목차
CSS 커뮤니티는 1998년에 CSS2 명세가 권고안이 된 이후로 CSS2 명세에 대해 상당한 경험을 쌓았습니다. CSS2 명세의 오류는 이후 2011년 첫 개정판 [CSS21]에서 수정되었으나, 새로운 오류 수정 사항이 필요했습니다.
많은 문제들은 곧 발표될 CSS3 명세에서 다루어질 예정이지만, 현재의 상황은 CSS2의 구현과 상호 운용성을 저해하고 있습니다. CSS 2.2 명세는 이러한 상황을 해결하고자 다음과 같은 노력을 기울였습니다:
따라서 CSS2 스타일 시트가 반드시 CSS 2.2와 전방 호환되는 것은 아니지만, CSS 2.2 기능만을 사용하는 스타일 시트는 오늘날 더 쉽게 호환되는 사용자 에이전트를 찾을 수 있고, 미래에도 전방 호환성을 유지할 가능성이 높습니다. 전방 호환성 파괴는 바람직하지 않지만, CSS 2.2의 개정이 가져다주는 이점이 더 크다고 생각합니다.
CSS 2.2는 CSS 2.1 및 CSS2를 기반으로 하며, 이들을 대체하도록 설계되었습니다. CSS2의 일부는 CSS 2.2에서 변경되지 않았으며, 일부는 수정되었고 일부는 삭제되었습니다. 삭제된 부분은 향후 CSS3 명세에서 사용할 수 있습니다. 향후 명세는 CSS 2.2를 참조해야 하며, 만약 CSS 2.2에서 제외된 기능이 필요하다면 해당 기능에 한하여 CSS2를 참조하거나, 해당 기능을 포함하는 CSS3 모듈을 참조하는 것이 바람직합니다.
이 섹션은 비규범적입니다.
이 명세는 CSS 작성자와 CSS 구현자 두 유형의 독자를 염두에 두고 작성되었습니다. 우리는 명세가 작성자에게 효율적이고, 보기 좋으며, 접근 가능한 문서를 작성할 수 있는 도구를 제공하되, CSS의 구현 세부사항을 과도하게 노출하지 않기를 바랍니다. 구현자는 호환되는 사용자 에이전트를 만들기 위한 모든 정보를 찾을 수 있을 것입니다. 명세는 CSS에 대한 일반적인 소개로 시작하여, 끝으로 갈수록 점점 더 기술적이고 구체적으로 변합니다. 빠른 정보 접근을 위해 일반 목차, 각 섹션 시작 부분의 개별 목차, 그리고 색인이 전자 및 인쇄 버전 모두에서 쉬운 탐색을 제공합니다.
명세는 전자 및 인쇄 두 가지 표현 모드를 염두에 두고 작성되었습니다. 두 표현 방식은 대체로 비슷하겠지만, 독자들은 몇 가지 차이점을 발견할 수 있습니다. 예를 들어, 인쇄 버전에서는 링크가 작동하지 않으며, 전자 버전에는 페이지 번호가 표시되지 않습니다. 불일치가 있을 경우 전자 버전이 문서의 권위 있는 버전으로 간주됩니다.
이 섹션은 비규범적입니다.
명세는 다음과 같은 섹션으로 구성되어 있습니다:
각 CSS 속성 정의는 다음과 유사한 주요 정보 요약으로 시작합니다:
| 이름: | property-name |
|---|---|
| 값: | 허용 값 및 문법 |
| 초기값: | 초기 값 |
| 적용 대상: | 이 속성이 적용되는 요소 |
| 상속: | 이 속성이 상속되는지 여부 |
| 백분율: | 백분율 값 해석 방식 |
| 미디어: | 이 속성이 적용되는 미디어 그룹 |
| 계산값: | 계산된 값 산출 방식 |
이 부분은 'property-name'이라는 속성에 대해 유효한 값 집합을 지정합니다. 속성 값은 하나 이상의 구성 요소로 이루어질 수 있습니다. 구성 값 유형은 여러 방식으로 지정됩니다:
이 정의들에 사용된 기타 단어들은 반드시 따옴표 없이 그대로 사용되어야 하는 키워드입니다(예: red). 슬래시(/)와 쉼표(,)도 그대로 사용되어야 합니다.
구성 값은 다음과 같이 속성 값으로 배열될 수 있습니다:
나란히 배열된 값이 더블 앰퍼샌드보다 우선하며, 더블 앰퍼샌드는 더블 바보다, 더블 바는 바보다 우선합니다. 따라서 다음 줄들은 동일합니다:
a b | c || d && e f
[ a b ] | [ c || [ d && [ e f ]]]
각 타입, 키워드 또는 대괄호로 그룹화된 값 뒤에는 다음과 같은 수정자를 붙일 수 있습니다:
다음 예시는 다양한 값 유형을 보여줍니다:
값: N | NW | NE
값: [ <length> | thick | thin ]{1,4}
값: [<family-name> , ]* <family-name>
값: <uri>? <color> [ / <color> ]?
값: <uri> || <color>
값: inset? && [ <length>{2,4} && <color>? ]
구성 값은 부록 G.2에 설명된 토큰 기준으로 지정됩니다. 문법상 expr 생성 규칙의 구성 요소 사이에 공백이
허용되므로, 속성 값의 토큰 사이에도 공백이 나타날 수 있습니다.
참고: 많은 경우 토큰을 구분하기 위해 실제로 공백이 필요합니다. 예를 들어 '1em2em' 값은 숫자 '1'과 식별자 'em2em'으로 된 하나의
DIMEN 토큰으로 해석되어, 올바르지 않은 단위가 됩니다. 이 경우 두 길이 '1em'과 '2em'으로 해석하려면 '2' 앞에 공백이 필요합니다.
이 부분은 해당 속성의 초기 값을 지정합니다. 스타일 시트에서 지정된 값, 상속된 값, 초기 값 간의 상호작용에 대해서는 캐스케이드 섹션을 참고하세요.
이 부분은 속성이 적용되는 요소를 나열합니다. 모든 요소는 모든 속성을 갖고 있다고 간주되지만, 일부 속성은 특정 요소 유형에 렌더링 효과가 없습니다. 예를 들어, 'clear' 속성은 블록 레벨 요소에만 영향을 줍니다.
이 부분은 속성 값이 상위 요소로부터 상속되는지 여부를 나타냅니다. 스타일 시트에서 지정된 값, 상속된 값, 초기 값 간의 상호작용에 대해서는 캐스케이드 섹션을 참고하세요.
이 부분은 속성 값에 백분율이 포함될 경우, 그 해석 방식을 나타냅니다. 여기 "N/A"가 표시되면 해당 속성은 값에 백분율을 허용하지 않는다는 뜻입니다.
이 부분은 속성이 적용되는 미디어 그룹을 나타냅니다. 미디어 그룹에 대한 정보는 비규범적입니다.
이 부분은 속성의 계산된 값에 대해 설명합니다. 계산된 값 섹션을 참고하세요.
일부 속성은 축약 속성입니다. 즉, 하나의 속성으로 여러 속성 값을 지정할 수 있습니다.
예를 들어, 'font' 속성은 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', 'font-family' 등을 한 번에 설정할 수 있는 축약 속성입니다.
축약형에서 값이 생략되면, 생략된 각 속성에는 초기값이 할당됩니다(캐스케이드 섹션 참조).
다음과 같은 여러 스타일 규칙은:
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
아래와 같이 하나의 축약 속성으로 작성할 수 있습니다:
h1 { font: bold 12pt/14pt Helvetica }
이 예시에서 'font-variant', 'font-style'는 초기값을 가집니다.
잘못된 사용을 설명하는 모든 예시는 "ILLEGAL EXAMPLE"로 명확히 표시됩니다.
DOCTYPE 선언이 없는 HTML 예시는 HTML 4.01 Strict DTD [HTML4]에 부합하는 SGML 텍스트 엔티티입니다. 기타 HTML 예시는 각 예시에서 제시된 DTD를 따릅니다.
모든 참고는 정보 제공용입니다.
예시와 참고는 명세의 출처 HTML 내에서 표시되며, CSS 사용자 에이전트는 이를 특별하게 렌더링합니다.
전자 명세의 대부분의 이미지는 그 내용을 설명하는 "상세 설명"과 함께 제공됩니다. 상세 설명 링크는 이미지 뒤에 "[D]"로 표시됩니다.
이미지와 상세 설명은 정보 제공용입니다.
이 섹션은 비규범적입니다.
CSS 2.2는 CSS2 및 CSS 2.1을 기반으로 합니다. CSS2에 기여한 사람들은 CSS2 감사의 글 섹션과 CSS 2.1에 기여한 사람들은 CSS 2.1 감사의 글 섹션에서 확인할 수 있습니다.
다음 분들께 감사드립니다. 이 분들은 www-style 메일링 리스트에서 의견과 피드백을 통해 본 명세 작성에 도움을 주셨습니다: 추후 작성 예정.
추가로, 특별히 감사의 말씀을 전하고 싶은 분들: 추후 작성 예정.
테스트 스위트 작성에 도움을 주신 다음 분들께도 깊이 감사드립니다: 추후 작성 예정 … 그리고 CSS1 테스트 스위트에 기여한 모든 분들께도 감사드립니다.