캐스케이딩 스타일 시트 레벨 2 개정 2 (CSS 2.2) 명세

요약

이 명세는 캐스케이딩 스타일 시트 레벨 2를 정의합니다. CSS는 작성자와 사용자가 구조화된 문서(예: HTML 문서 및 XML 애플리케이션)에 스타일(예: 글꼴 및 간격)을 추가할 수 있도록 하는 스타일 시트 언어입니다. 문서의 표현 스타일과 내용을 분리함으로써 CSS는 웹 작성 및 사이트 유지 관리를 단순화합니다.

CSS 2.2는 CSS 레벨 2의 두 번째 개정본 [CSS2]입니다. 이는 CSS 2.1(레벨 2의 첫 번째 개정본)의 몇 가지 오류를 수정했습니다. 이는 최신 CSS 버전이 아닙니다. CSS 전체를 구성하는 명세에 대한 개요는 "CSS Snapshot" [CSS]를 참고하십시오.

CSS 레벨 2는 미디어별 스타일 시트를 지원하여 작성자가 시각 브라우저, 청각 장치, 프린터, 점자 장치, 휴대용 장치 등 다양한 환경에 맞게 문서의 표현을 조정할 수 있도록 합니다. 또한 콘텐츠 배치, 표 레이아웃, 국제화 기능 및 사용자 인터페이스와 관련된 일부 속성을 지원합니다.

이 문서의 상태

이 섹션은 이 문서가 발행된 시점에서의 상태를 설명합니다. 다른 문서가 이 문서를 대체할 수 있습니다. 현재 W3C 발행물 목록과 이 기술 보고서의 최신 개정본은 W3C 기술 보고서 인덱스(http://www.w3.org/TR/)에서 확인할 수 있습니다.

첫 번째 공공 작업 초안으로 발행되었다고 해서 W3C 회원의 지지를 의미하지는 않습니다. 이 문서는 초안이며, 언제든지 업데이트, 교체 또는 폐기될 수 있습니다. 진행 중인 작업으로 이 문서를 인용하는 것은 적절하지 않습니다.

이 문서는 CSS 작업 그룹(스타일 활동의 일부)에 의해 작성되었습니다.

공개 메일링 리스트 www-style@w3.org(지침 참조)가 이 명세에 대한 논의에 선호됩니다. 이메일을 보낼 때 제목에 "CSS22"라는 텍스트를 포함하십시오. 예를 들어 “[CSS22] …코멘트 요약…”처럼 작성하십시오.

이 문서는 2004년 2월 5일 W3C 특허 정책에 따라 운영되는 그룹에 의해 작성되었습니다. W3C는 그룹의 결과물과 관련하여 공개된 특허 공개 목록을 유지합니다. 해당 페이지에는 특허를 공개하는 방법도 포함되어 있습니다. 개인이 필수적인 클레임을 포함하는 것으로 믿는 특허에 대한 실제 지식이 있는 경우 W3C 특허 정책 6항에 따라 정보를 공개해야 합니다.

이 문서는 2015년 9월 1일 W3C 프로세스 문서에 의해 관리됩니다.

이전 권고안 이후의 모든 변경 사항은 부록 C.에 나열되어 있습니다.

전체 목차

• 1 CSS 2.2 명세에 대하여
  • 1.1 CSS 2.2와 CSS 2의 비교
  • 1.2 명세 읽기
  • 1.3 명세의 구성 방식
  • 1.4 관례
    • 1.4.1 문서 언어 요소 및 속성
    • 1.4.2 CSS 속성 정의
      • 1.4.2.1 값
      • 1.4.2.2 초기값
      • 1.4.2.3 적용 대상
      • 1.4.2.4 상속
      • 1.4.2.5 백분율 값
      • 1.4.2.6 미디어 그룹
      • 1.4.2.7 계산된 값
    • 1.4.3 축약 속성
    • 1.4.4 참고 및 예시
    • 1.4.5 이미지 및 상세 설명
  • 1.5 감사의 글
• 2 CSS 2.2 소개
  • 2.1 HTML용 간단한 CSS 2.2 튜토리얼
  • 2.2 XML용 간단한 CSS 2.2 튜토리얼
  • 2.3 CSS 2.2 처리 모델
    • 2.3.1 캔버스
    • 2.3.2 CSS 2.2 주소 지정 모델
  • 2.4 CSS 설계 원칙
• 3 적합성: 요구 사항 및 권고사항
  • 3.1 정의
  • 3.2 UA 적합성
  • 3.3 오류 조건
  • 3.4 text/css 콘텐츠 타입
• 4 문법 및 기본 데이터 타입
  • 4.1 문법
    • 4.1.1 토큰화
    • 4.1.2 키워드
      • 4.1.2.1 벤더별 확장
      • 4.1.2.2 참고: 역사적 배경
    • 4.1.3 문자와 대소문자
    • 4.1.4 명령문
    • 4.1.5 At-규칙
    • 4.1.6 블록
    • 4.1.7 규칙 집합, 선언 블록, 선택자
    • 4.1.8 선언 및 속성
    • 4.1.9 주석
  • 4.2 구문 오류 처리 규칙
  • 4.3 값
    • 4.3.1 정수 및 실수
    • 4.3.2 길이
    • 4.3.3 백분율
    • 4.3.4 URL과 URI
    • 4.3.5 카운터
    • 4.3.6 색상
    • 4.3.7 문자열
    • 4.3.8 지원되지 않는 값
  • 4.4 CSS 스타일 시트 표현
    • 4.4.1 문자 인코딩에 없는 문자를 참조하기
• 5 선택자
  • 5.1 패턴 매칭
  • 5.2 선택자 문법
    • 5.2.1 그룹화
  • 5.3 범용 선택자
  • 5.4 유형 선택자
  • 5.5 후손 선택자
  • 5.6 자식 선택자
  • 5.7 인접 형제 선택자
  • 5.8 속성 선택자
    • 5.8.1 속성과 속성 값 매칭
    • 5.8.2 DTD의 기본 속성 값
    • 5.8.3 클래스 선택자
  • 5.9 ID 선택자
  • 5.10 의사 요소와 의사 클래스
  • 5.11 의사 클래스
    • 5.11.1 :first-child 의사 클래스
    • 5.11.2 링크 의사 클래스: :link 및 :visited
    • 5.11.3 동적 의사 클래스: :hover, :active, 및 :focus
    • 5.11.4 언어 의사 클래스: :lang
  • 5.12 의사 요소
    • 5.12.1 :first-line 의사 요소
    • 5.12.2 :first-letter 의사 요소
    • 5.12.3 :before 및 :after 의사 요소
• 6 속성 값 할당, 계단식 처리 및 상속
  • 6.1 지정 값, 계산 값 및 실제 값
    • 6.1.1 지정 값
    • 6.1.2 계산 값
    • 6.1.3 사용 값
    • 6.1.4 실제 값
  • 6.2 상속
    • 6.2.1 'inherit' 값
  • 6.3 @import 규칙
  • 6.4 계단식 처리
    • 6.4.1 계단식 순서
    • 6.4.2 !important 규칙
    • 6.4.3 선택자의 명시도 계산
    • 6.4.4 비-CSS 프레젠테이션 힌트의 우선순위
• 7 미디어 유형
  • 7.1 미디어 유형 소개
  • 7.2 미디어 종속 스타일 시트 지정
    • 7.2.1 @media 규칙
  • 7.3 인식된 미디어 유형
    • 7.3.1 미디어 그룹
• 8 박스 모델
  • 8.1 박스 크기
  • 8.2 여백, 패딩 및 테두리의 예
  • 8.3 여백 속성: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',그리고 'margin'
    • 8.3.1 여백 병합
  • 8.4 패딩 속성: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',그리고 'padding'
  • 8.5 테두리 속성
    • 8.5.1 테두리 너비: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',그리고 'border-width'
    • 8.5.2 테두리 색상: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',그리고 'border-color'
    • 8.5.3 테두리 스타일: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',그리고 'border-style'
    • 8.5.4 테두리 축약 속성: 'border-top', 'border-right', 'border-bottom', 'border-left',그리고 'border'
  • 8.6 양방향 컨텍스트에서 인라인 요소의 박스 모델
• 9 시각적 형식 모델
  • 9.1 시각적 형식 모델 소개
    • 9.1.1 뷰포트
    • 9.1.2 포함 블록
  • 9.2 박스 생성 제어
    • 9.2.1 블록 레벨 요소와 블록 박스
      • 9.2.1.1 익명 블록 박스
    • 9.2.2 인라인 레벨 요소와 인라인 박스
      • 9.2.2.1 익명 인라인 박스
    • 9.2.3 런인 박스
    • 9.2.4 'display' 속성
  • 9.3 배치 스킴
    • 9.3.1 배치 스킴 선택: 'position' 속성
    • 9.3.2 박스 오프셋: 'top', 'right', 'bottom', 'left'
  • 9.4 일반 흐름
    • 9.4.1 블록 포맷팅 컨텍스트
    • 9.4.2 인라인 포맷팅 컨텍스트
    • 9.4.3 상대 위치 지정
  • 9.5 플로트
    • 9.5.1 플로트 위치 지정: 'float' 속성
    • 9.5.2 플로트 옆의 흐름 제어: 'clear' 속성
  • 9.6 절대 위치 지정
    • 9.6.1 고정 위치 지정
  • 9.7 'display', 'position',및 'float'간의 관계
  • 9.8 일반 흐름, 플로트, 및 절대 위치 지정 비교
    • 9.8.1 일반 흐름
    • 9.8.2 상대 위치 지정
    • 9.8.3 박스 플로팅
    • 9.8.4 절대 위치 지정
  • 9.9 계층화된 프레젠테이션
    • 9.9.1 스택 레벨 지정: 'z-index' 속성
  • 9.10 텍스트 방향: 'direction' 및 'unicode-bidi' 속성
• 10 시각적 형식 모델 세부사항
  • 10.1 "컨테이닝 블록" 정의
  • 10.2 콘텐츠 너비: 'width' 속성
  • 10.3 너비와 마진 계산
    • 10.3.1 인라인, 대체되지 않은 요소
    • 10.3.2 인라인, 대체된 요소
    • 10.3.3 정상 흐름의 블록 수준, 대체되지 않은 요소
    • 10.3.4 정상 흐름의 블록 수준, 대체된 요소
    • 10.3.5 플로팅, 대체되지 않은 요소
    • 10.3.6 플로팅, 대체된 요소
    • 10.3.7 절대 포지셔닝, 대체되지 않은 요소
    • 10.3.8 절대 포지셔닝, 대체된 요소
    • 10.3.9 '인라인-블록', 정상 흐름의 대체되지 않은 요소
    • 10.3.10 '인라인-블록', 정상 흐름의 대체된 요소
  • 10.4 최소 및 최대 너비: 'min-width' 및 'max-width'
  • 10.5 콘텐츠 높이: 'height' 속성
  • 10.6 높이와 마진 계산
    • 10.6.1 인라인, 대체되지 않은 요소
    • 10.6.2 인라인 대체 요소, 정상 흐름의 블록 수준 대체 요소, 정상 흐름의 '인라인-블록' 대체 요소 및 플로팅 대체 요소
    • 10.6.3 'overflow'가 'visible'로 계산된 경우 정상 흐름의 블록 수준 대체되지 않은 요소
    • 10.6.4 절대적으로 위치된, 대체되지 않은 요소
    • 10.6.5 절대적으로 위치된, 대체된 요소
    • 10.6.6 복잡한 경우
    • 10.6.7 블록 포맷팅 컨텍스트 루트의 '자동' 높이
  • 10.7 최소 및 최대 높이: 'min-height' 및 'max-height'
  • 10.8 줄 높이 계산: 'line-height' 및 'vertical-align' 속성
    • 10.8.1 행간 및 절반 행간
• 11 시각적 효과
  • 11.1 오버플로우와 클리핑
    • 11.1.1 오버플로우: 'overflow' 속성
    • 11.1.2 클리핑: 'clip' 속성
  • 11.2 가시성: 'visibility' 속성
• 12 생성된 콘텐츠, 자동 번호 매기기 및 목록
  • 12.1 :before 및 :after 의사 요소
  • 12.2 'content' 속성
  • 12.3 인용부호
    • 12.3.1 'quotes' 속성을 사용하여 인용부호 지정
    • 12.3.2 'content' 속성을 사용하여 인용부호 삽입
  • 12.4 자동 카운터 및 번호 매기기
    • 12.4.1 중첩된 카운터와 범위
    • 12.4.2 카운터 스타일
    • 12.4.3 'display: none' 속성을 가진 요소의 카운터
  • 12.5 목록
    • 12.5.1 목록: 'list-style-type', 'list-style-image', 'list-style-position',및 'list-style' 속성
• 13 페이지 매체
  • 13.1 페이지 매체 소개
  • 13.2 페이지 박스: @page 규칙
    • 13.2.1 페이지 여백
    • 13.2.2 페이지 선택자: 왼쪽, 오른쪽, 첫 번째 페이지 선택
    • 13.2.3 페이지 박스 밖의 콘텐츠
  • 13.3 페이지 나누기
    • 13.3.1 페이지 나누기 속성: 'page-break-before', 'page-break-after', 'page-break-inside'
    • 13.3.2 요소 내부의 나누기: 'orphans', 'widows'
    • 13.3.3 허용된 페이지 나누기
    • 13.3.4 강제 페이지 나누기
    • 13.3.5 "최적" 페이지 나누기
  • 13.4 페이지 컨텍스트에서의 계단식
• 14 색상과 배경
  • 14.1 전경 색상: 'color' 속성
  • 14.2 배경
    • 14.2.1 배경 속성: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position',및 'background'
• 15 글꼴
  • 15.1 소개
  • 15.2 글꼴 매칭 알고리즘
  • 15.3 글꼴 패밀리: 'font-family' 속성
    • 15.3.1 일반 글꼴 패밀리
      • 15.3.1.1 serif
      • 15.3.1.2 sans-serif
      • 15.3.1.3 cursive
      • 15.3.1.4 fantasy
      • 15.3.1.5 monospace
  • 15.4 글꼴 스타일링: 'font-style' 속성
  • 15.5 스몰캡스: 'font-variant' 속성
  • 15.6 글꼴 두께: 'font-weight' 속성
  • 15.7 글꼴 크기: 'font-size' 속성
  • 15.8 축약형 글꼴 속성: 'font' 속성
• 16 텍스트
  • 16.1 들여쓰기: 'text-indent' 속성
  • 16.2 정렬: 'text-align' 속성
  • 16.3 장식
    • 16.3.1 밑줄, 위줄, 취소선 및 깜박임: 'text-decoration' 속성
  • 16.4 문자 및 단어 간격: 'letter-spacing', 'word-spacing' 속성
  • 16.5 대문자 변환: 'text-transform' 속성
  • 16.6 공백: 'white-space' 속성
    • 16.6.1 'white-space' 처리 모델
    • 16.6.2 공백 축소를 포함한 양방향성 예제
    • 16.6.3 제어 문자 및 결합 문자 세부사항
• 17 테이블
  • 17.1 테이블 소개
  • 17.2 CSS 테이블 모델
    • 17.2.1 익명 테이블 객체
  • 17.3 열
  • 17.4 시각적 포맷팅 모델의 테이블
    • 17.4.1 캡션 위치 및 정렬
  • 17.5 테이블 콘텐츠의 시각적 레이아웃
    • 17.5.1 테이블 레이어와 투명성
    • 17.5.2 테이블 너비 알고리즘: 'table-layout' 속성
      • 17.5.2.1 고정 테이블 레이아웃
      • 17.5.2.2 자동 테이블 레이아웃
    • 17.5.3 테이블 높이 알고리즘
    • 17.5.4 열의 수평 정렬
    • 17.5.5 동적 행 및 열 효과
  • 17.6 테두리
    • 17.6.1 분리된 테두리 모델
      • 17.6.1.1 비어 있는 셀 주위의 테두리와 배경: 'empty-cells' 속성
    • 17.6.2 중첩된 테두리 모델
      • 17.6.2.1 테두리 충돌 해결
    • 17.6.3 테두리 스타일
• 18 사용자 인터페이스
  • 18.1 커서: 'cursor' 속성
  • 18.2 시스템 색상
  • 18.3 글꼴에 대한 사용자 선호
  • 18.4 동적 윤곽선: 'outline' 속성
    • 18.4.1 윤곽선과 포커스
  • 18.5 확대
• 부록 A. 청각 스타일 시트
  • A.1 미디어 유형 'aural'과 'speech'
  • A.2 청각 스타일 시트 소개
    • A.2.1 각도
    • A.2.2 시간
    • A.2.3 주파수
  • A.3 볼륨 속성: 'volume'
  • A.4 말하기 속성: 'speak'
  • A.5 일시정지 속성: 'pause-before', 'pause-after',및 'pause'
  • A.6 큐 속성: 'cue-before', 'cue-after',및 'cue'
  • A.7 혼합 속성: 'play-during'
  • A.8 공간 속성: 'azimuth',및 'elevation'
  • A.9 음성 특성 속성: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress',및 'richness'
  • A.10 음성 속성: 'speak-punctuation', 'speak-numeral'
  • A.11 표의 음성 렌더링
    • A.11.1 헤더 읽기: 'speak-header' 속성
  • A.12 HTML 샘플 스타일 시트
  • A.13 Emacspeak
• 부록 B. 참고 문헌
  • B.1 표준 참조
  • B.2 정보성 참조
• 부록 C. 변경 사항
  • C.1 2011년 6월 7일 권고 이후의 변경 사항
• 부록 D. HTML 4의 기본 스타일 시트
• 부록 E. 스태킹 컨텍스트에 대한 상세 설명
  • E.1 정의
  • E.2 페인팅 순서
  • E.3 참고
• 부록 F. 전체 속성 표
• 부록 G. CSS 2.2의 문법
  • G.1 문법
  • G.2 어휘 스캐너
  • G.3 CSS 2.2와 CSS1의 토큰화 비교
  • G.4 구현 노트
• 부록 I. 색인