CSS, CSS3   Cascading Style Sheet   종속형 스타일 시트

(2017-06-17)
1. 종속형 스타일 시트 (CSS)HTML 태그 만으로 정해진 구조(layout/structure) 위주의 웹 페이지에다가, 
     다양한 표현 스타일 속성 정보를 추가 가능
     - 유연하고도 깔끔한  화면 구성을 가능하게 함
        . 스타일 속성 : 문서 내 문자의 활자,색,크기,위치 등에 관한 정보를 말함

  ㅇ W3C에 의해 개발됨  ☞ W3C CSS home


2. CSS 특징상속성
     - 하나의 태그로 정의된 스타일 속성을 이 태그와 관련된 모든 하위 태그에 종속적으로
       전달되게 함
        . 즉, 부모 태그의 어떤 스타일 속성을 자식 태그에서 상속 받을 수 있음

  ㅇ 문법이 쉽고 사용하기 편리
     - CSS 구문 형식 :  selector { property : value }

  ㅇ HTML 문서의 표현 방식을 확장시켜줌

  ㅇ 역사
     - 현재 CSS는 레벨 3까지 나와 있음  :  CSS1  1996년,  CSS2  1998년,  CSS3
        . CSS3는 계속 표준 작업이 진행되며, 혁신적이며 다소 복잡함을 더해가고 있음
     - HTML에서는 HTML 3.2 부터 CSS를 지원하기 시작함


3. 스타일 형식을 HTML, XHTML 에 부가하는 방법

  ㅇ Inline Stlye         : html 태그 매 요소 마다 스타일을 적용시킴 
  ㅇ Embeded Style Sheet  : html 문서내에 포함시킴
  ㅇ External style Sheet : 외부 .css 파일화하여 링크로 걸어줌
     - 例) <link rel="stylesheet" href="mystyles.css" type="text/css">


4. CSS 박스 모델 (Box Model)

  ㅇ CSS는 웹 페이지 안에 모든 요소(Element)를 사각형 박스 모델로 다룸

     

     - 주요 영역 구분
        . margin(마진) : 바깥 여백, border(테두리선) : 경계선, padding(페딩) : 안 여백
        . content(내용) : 실제 표시할 내용
     - 배경(background) : border,padding,content 영역 만 해당
     - 박스 크기 조정
        . 기본 => content 영역 만 해당
        . 옵션 => (border + padding + content) 영역 또는 background 영역 해당
           .. 옵션에 의한 박스 크기 조정은 box-sizing 속성 {box-sizing:boarder-box}에 의함


5. CSS 주요 문법

  ㅇ CSS 기본 구문 형식 :  selector { property : value }                 ☞ CSS 속성 값 참조
     - CSS 선택자 (selector)
        . HTML 요소들과 스타일 속성들 간의 관계를 맺어주기 위한 HTML 요소들의 선택 접근 형식
     - CSS 속성 값 (property : value)

  ㅇ CSS @ 규칙 (@-rule)
     - @import, @font-face, @media, @keyframe 등


[웹 디자인] 1. 웹 디자인 2. 스타일 시트 3. CSS 4. CSS 선택자 5. CSS 속성 값 6. CSS 위치 레이아웃
  1.   기술공통
  2.   기초과학
  3.   파동/광학/음향
  4.   방송/멀티미디어/정보이론
  5.   전자/전기/제어
  6.   통신/네트워킹
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   스크립트 언어
            3.   DOM,BOM
            4.   웹페이지 기능 요소
            5.   웹 디자인
              1.   1. 웹 디자인
                  2. 스타일 시트
                  3. CSS
                  4. CSS 선택자
                  5. CSS 속성 값
                  6. CSS 위치 레이아웃
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   기계/재료/공업일반
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     모바일웹     참고문헌