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

(2020-06-27)

1. CSS (Cascading Style Sheet, 종속형 스타일 시트)HTML 만으로 쓰여진 구조(structure) 위주의 웹 페이지 상에,
  ㅇ 다양한 표현(presentation)을 주기 위해,
  ㅇ 스타일 속성 정보를 추가 가능케 함으로써,
  ㅇ 결국, 유연하고,깔끔하고,다채로운  화면 구성을 가능하게 함

  ※ [참고]
     - HTML : 일반 텍스트 문서 상에 구조화된 표현을 가능케하는 마크업 언어
     - 스타일 속성 : 문서 내 요소(문자 등)의 활자,색,크기,위치,레이아웃 등에 관한 정보
     - 스타일 시트 : 문서의 표현 서식(디자인 스타일 특성)을 묶어 따로 등록해 두는 시트


2. CSS 역사W3C에 의해 개발됨  ☞ W3C CSS home

  ㅇ 역사
     - 현재 CSS는 레벨 3까지 나와 있음  :  CSS1  1996년,  CSS2  1998년,  CSS3 ~
     - HTML에서는 HTML 3.2 부터 CSS를 지원하기 시작함
     - CSS3는 표준 작업이 지속적으로 진행되면서,
        . 혁신적이며 다소 복잡함을 더해가고 있음 (다단,변형,변환,애니메이션 등)


3. CSS 특징문법이 쉽고 사용하기 편리함                        ☞ CSS 선택자, CSS 속성, CSS 속성값 참조
     - CSS 구문 형식 :  selector { property : value }
        . 즉, 선택자 { 속성명 : 속성값 }

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

  ㅇ HTML 문서의 표현을 확장시켜줌  ☞ 웹디자인, 스타일시트 참조


4. CSS 추가 

  ※ (스타일 형식을 HTML 문서에 부가하는 방법)

  ㅇ Inline Stlye         : html 매 요소 마다 스타일을 적용시킴 
  ㅇ Embeded Style Sheet  : html 문서내에 포함시킴
     - 例) <style type='test/css'> ... </style>
  ㅇ External style Sheet : 외부 .css 파일화하여 링크로 걸어줌
     - 例) <link rel="stylesheet" href="mystyles.css" type="text/css">
  ㅇ @import : CSS 파일 안에서 다른 CSS 파일을 불러오는 경우   ☞ CSS @ 규칙 참조


5. CSS 문법

  ㅇ CSS 기본 구문 :  selector { property : value }  
     - CSS 선택자 (selector)                           ☞ CSS 선택자 참조
        . HTML 요소들의 선택/접근
        . HTML 요소들과 스타일 속성들 간의 관계를 맺어주기 위함
     - CSS 속성 지정 ( { property : value } )            ☞ CSS 속성 참조
        . 선택된 HTML 요소에 대한 속성별 값 지정
        . [참고] 특별한 CSS 속성명 ☞ Vendor Prefix(벤더 접두사) 참조

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


6. CSS 박스 모델 (Box Model)

  ※ ☞ CSS 박스 모델 참조
     - CSS는, 웹 페이지 안에 모든 요소(Element)를 사각형 즉, 박스 모델로써 다루고 있음

  ※ ☞ block 요소, inline 요소 참조 
     - html 태그별 보이기 성격( block,inline) 구분



Copyrightⓒ   차재복 (Cha Jae Bok)    " 정보통신 및 과학기술 지식을 간결하게 정리,체계화시키고 있습니다. "