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

(2023-11-15)

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

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


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

  ㅇ 역사
     - 현재 CSS는 레벨 3까지 나와 있음  
        . CSS1 : 1996년12월, CSS2 : 1998년5월, CSS2.1 : 2011년6월
        . CSS3 (버젼별 구분 없이, 모듈 단위로 묶어 정리하면서, 지속적으로 개별 권고를 시작함)
     - CSS3는 표준 작업이 지속적으로 진행되면서,
        . 혁신적이며 다소 복잡함을 더해가고 있음 (다단, 변형, 변환, 애니메이션 등)
     - 한편, HTML에서는 HTML 3.2 부터 CSS를 본격 지원하기 시작함


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

     * [참고]
       - CSS 선택자 (단순 선택자, 그룹 선택자, 결합 선택자, 가상 선택자)
       - CSS 속성 (CSS 텍스트, CSS 색상, CSS 배경, CSS 여백, CSS 정렬 등)
       - CSS 속성값 참조

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

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

  ㅇ 한편, CSS 모든 것이 전역 범위(Global Scope)로 선언되므로,
     - 서로 간섭할 가능성이 높음


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">
        . rel : (relation) 링크파일이 현재 웹페이지와 어떤 관계인지를 설명하는 속성
           .. 주로, 검색 엔진을 위한 정보 제공용 임
        . href : 링크파일명 및 상대 위치
  ㅇ @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에서, Cascading Style의 의미?

  ㅇ 동일 요소에, 여러 스타일 규칙들을, 연이어 다중 적용할 수 있음을 말함

  ㅇ cascading (다중 적용)에 따른 규칙 충돌을 피하려면, => specificity (특정 적용)
     * (우선순위에 의해, 특정 적용 가능해짐)                        ☞ CSS 선택자 참조
     - (높음) inline style > id 선택자 > 가상 선택자 > 속성 선택자 > 
             class 선택자 > 요소 선택자 (특정요소 > 모든 요소) (낮음)


7. CSS 박스 모델 (Box Model)

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

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

CSS
   1. CSS   2. CSS 리스트   3. CSS @ 규칙  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"