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

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


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

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


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

  ㅇ 문법이 쉽고 사용하기 편리                                     ☞ CSS 선택자 참조
     - CSS 구문 형식 :  selector { property : value }

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


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

  ㅇ 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">


5. CSS 박스 모델 (Box Model)

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

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


6. CSS 주요 문법

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

  ㅇ CSS @ 규칙 (@-rule) : @charset, @import, @font-face, @media, @keyframe 등
     - @charset "문자세트 이름" : 스타일시트 파일문자인코딩 방식의 지정
        . 반드시, 첫 줄 맨 앞에 있어야 함
        . 例) @charset "UTF-8";
     - @import url("URL 경로명") : 스타일시트 파일을 가져오기
        . 반드시, CSS 선택자가 나오기 전 스타일시트의 시작 부분에 위치하여야 함
        . 例) @import url("/path/stylesheet.css");
     - @media : 미디어 종별(특정 조건)에 따라 다른 스타일 설정을 줌 (미디어 퀴리)
        . 형식) @media (특정 미디어 조건) { 설정 내용 }
        . 미디어 유형 종류 : print, screen, handheld, braille, projection, screen, tty, tv
           .. all (모든 미디어 유형)
        . 미디어 특성 쿼리 종류 : device-width, orientaion, resolution 등
           .. min-,max- 접두사 : 이를 이용하여 최대값,최소값 이하/이상인지를 확인 가능
        . 例) @media (min-width:758px) { 설정 내용 } => 768 픽셀 이상이면, 설정 적용
     - @font-face : 사용자 정의 글꼴
        . 형식) @font-face { font-family: 사용자정의폰트명; src: url(글꼴파일명); }
        . 글꼴파일명 例) *.ttf, *.otf, *.woff 등


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 값 6. CSS 배경 7. CSS 색상 8. CSS 위치 레이아웃 9. CSS 정렬 10. CSS 텍스트

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