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

(2021-03-21)
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 선택자, CSS 속성, CSS 속성값 참조
     - CSS 구문 형식 :  selector { property : value }
        . 즉, 선택자 { 속성명 : 속성값 }

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

  ㅇ 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">
  ㅇ @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) 구분


[CSS] 1. CSS 2. CSS 리스트 3. CSS @ 규칙
[CSS 구문 (선택자,속성,단위)] [폰트,텍스트] [색상,배경,그림자] [박스모델 (마진,보더,여백,block,inline)] [레이아웃,정렬] [특수효과 (변형)] [미디어 쿼리 (반응형 웹)]
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   전기전자공학
  5.   방송/멀티미디어/정보이론
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   웹기술
            1. 웹 이란?
            2. 하이퍼텍스트
        1.   웹 구성
        2.   HTTP
        3.   웹 페이지
          1.   마크업 언어
          2.   DOM,BOM
          3.   웹 기능 요소
          4.   웹 디자인
                1. 웹 디자인
                2. 스타일 시트
            1.   CSS
                  1. CSS
                  2. CSS 리스트
                  3. CSS @ 규칙
              1.   CSS 구문 (선택자,속성,단위)
              2.   폰트,텍스트
              3.   색상,배경,그림자
              4.   박스모델 (마진,보더,여백,block,inline)
              5.   레이아웃,정렬
              6.   특수효과 (변형)
              7.   미디어 쿼리 (반응형 웹)
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌