이전   다음   목차   속성   색인  

4 문법 및 기본 데이터 타입

목차

4.1 문법

이 섹션에서는 모든 CSS 수준(현행 표준인 CSS 2.2 포함)에 공통적인 문법과 전방 호환 파싱 규칙을 설명합니다. CSS의 향후 업데이트에서도 이 핵심 문법을 따르지만, 추가적인 문법 제약이 더해질 수 있습니다.

이 설명들은 규범적입니다. 또한 부록 G에 제시된 규범적인 문법 규칙으로 보완됩니다.

이 명세에서 "직전" 또는 "직후"라는 표현은 중간에 공백이나 주석이 없는 경우를 의미합니다.

4.1.1 토큰화

모든 CSS 수준—1, 2, 그리고 향후 모든 수준—은 동일한 핵심 문법을 사용합니다. 이를 통해 UA는 자신이 만들어질 당시 존재하지 않았던 CSS 수준으로 작성된 스타일 시트도 파싱(완전히 이해하지는 못하더라도)할 수 있습니다. 디자이너는 이 기능을 활용해 구버전 사용자 에이전트와도 호환되는 스타일 시트를 만들면서 최신 CSS 기능도 사용할 수 있습니다.

어휘적 수준에서 CSS 스타일 시트는 토큰의 연속으로 구성됩니다. CSS의 토큰 목록은 아래와 같습니다. 정의는 Lex 스타일의 정규 표현식을 사용합니다. 8진수 코드는 ISO 10646([ISO10646])를 참조합니다. Lex와 마찬가지로, 여러 패턴이 일치할 때는 가장 긴 일치가 토큰을 결정합니다.

토큰 정의
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
BAD_STRING {badstring}
BAD_URI {baduri}
BAD_COMMENT {badcomment}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI {U}{R}{L}\({w}{string}{w}\)|
{U}{R}{L}\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE u\+[?]{1,6}|
u\+[0-9a-f]{1}[?]{0,5}|
u\+[0-9a-f]{2}[?]{0,4}|
u\+[0-9a-f]{3}[?]{0,3}|
u\+[0-9a-f]{4}[?]{0,2}|
u\+[0-9a-f]{5}[?]{0,1}|
u\+[0-9a-f]{6}|
u\+[0-9a-f]{1,6}-[0-9a-f]{1,6}
CDO <!--
CDC -->
: :
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/*][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM 위 규칙에서 일치하지 않으며, 홑따옴표나 쌍따옴표도 아닌 기타 모든 문자

위 중괄호({})로 표시된 매크로의 정의는 다음과 같습니다:

매크로 정의
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\\[^\n\r\f0-9a-f]
nmchar [_a-z0-9-]|{nonascii}|{escape}
num [+-]?([0-9]+|[0-9]*\.[0-9]+)(e[+-]?[0-9]+)?
string {string1}|{string2}
string1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2 \'([^\n\r\f\\']|\\{nl}|{escape})*\'
badstring {badstring1}|{badstring2}
badstring1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\\?
badstring2 \'([^\n\r\f\\']|\\{nl}|{escape})*\\?
badcomment {badcomment1}|{badcomment2}
badcomment1 \/\*[^*]*\*+([^/*][^*]*\*+)*
badcomment2 \/\*[^*]*(\*+[^/*][^*]*)*
baduri {baduri1}|{baduri2}|{baduri3}
baduri1 {U}{R}{L}\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
baduri2 {U}{R}{L}\({w}{string}{w}
baduri3 {U}{R}{L}\({w}{badstring}
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
L l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
R r|\\0{0,4}(52|72)(\r\n|[ \t\r\n\f])?|\\r
U u|\\0{0,4}(55|75)(\r\n|[ \t\r\n\f])?|\\u

예시:

예를 들어, 가장 긴 일치 규칙에 따라 "red-->"는 IDENT "red--"와 DELIM ">"로 토큰화됩니다. IDENT 뒤에 CDC가 아니라 IDENT 뒤에 DELIM이 오는 것입니다.

아래는 CSS의 핵심 문법입니다. 다음 섹션에서는 이를 활용하는 방법을 설명합니다. 부록 G는 CSS 2 수준 언어에 더 가까운, 더 엄격한 문법을 설명합니다. 이 문법으로 파싱할 수 있지만 부록 G의 문법으로는 파싱할 수 없는 스타일 시트의 일부는 구문 오류 처리 규칙에 따라 무시됩니다. 

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration-list '}' S*;
declaration-list: declaration [ ';' S* declaration-list ]?
              | at-rule declaration-list
              | /* empty */;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

"unused" 생성식은 CSS에서 사용되지 않으며, 향후 확장에서도 사용되지 않습니다. 이 규칙은 오류 처리에 도움을 주기 위해서만 포함되어 있습니다. (4.2 "구문 오류 처리 규칙" 참고)

COMMENT 토큰은(문법을 읽기 쉽게 하기 위해) 문법에 나타나지 않지만, 다른 토큰 밖 어디에든 얼마든지 나타날 수 있습니다. (단, @charset 규칙 앞이나 내부에 주석이 있으면 @charset이 비활성화된다는 점에 주의하세요.)

위 문법에서 S 토큰은 공백 문자를 의미합니다. 오직 "space"(U+0020), "tab"(U+0009), "line feed"(U+000A), "carriage return"(U+000D), "form feed"(U+000C) 문자만 공백이 될 수 있습니다. "em-space"(U+2003)나 "ideographic space"(U+3000)와 같은 다른 공백류 문자는 결코 공백에 포함되지 않습니다.

토큰화 또는 파싱할 수 없는 입력의 의미는 CSS 2.2에서 정의되지 않습니다.

4.1.2 키워드

키워드는 식별자 형태를 가집니다. 키워드는 쌍따옴표("...")나 홑따옴표('...')로 둘러싸여 있으면 안 됩니다. 따라서, 

red

는 키워드이지만, 

"red"

는 키워드가 아닙니다. (이것은 문자열입니다.) 기타 잘못된 예시: 

width: "auto";
border: "none";
background: "red";

4.1.2.1 벤더별 확장

CSS에서 식별자는 '-'(대시) 또는 '_'(언더스코어)로 시작할 수 있습니다. 키워드와 속성 이름이 - 또는 _로 시작하면 벤더별 확장용으로 예약되어 있습니다. 이러한 벤더별 확장은 다음 형식 중 하나여야 합니다: 

'-' + 벤더 식별자 + '-' + 의미 있는 이름
'_' + 벤더 식별자 + '-' + 의미 있는 이름

예시:

예를 들어 XYZ 조직이 디스플레이의 동쪽 테두리 색상을 기술하는 속성을 추가했다면, -xyz-border-east-color라고 부를 수 있습니다.

기타 알려진 예시:

-moz-box-sizing
-moz-border-radius
-wap-accesskey

처음에 대시나 언더스코어가 붙은 속성이나 키워드는 현행 표준 및 미래의 CSS 어느 수준에서도 사용되지 않을 것이 보장됩니다. 따라서 일반적인 CSS 구현체는 이러한 속성을 인식하지 않을 수 있으며 구문 오류 처리 규칙에 따라 무시할 수 있습니다. 단, 처음의 대시나 언더스코어는 문법의 일부이므로 CSS 2.2 구현자는 벤더별 확장을 지원하지 않더라도 항상 CSS 호환 파서를 사용할 수 있어야 합니다.

작성자는 벤더별 확장 사용을 피해야 합니다.

4.1.2.2 참고: 역사적 배경

이 섹션은 정보 제공용입니다.

작성 시점에 다음과 같은 접두사가 존재하는 것으로 알려져 있습니다:

접두사 조직명
-ms-, mso- Microsoft
-moz- Mozilla
-o-, -xv- Opera Software
-atsc- 고급 텔레비전 표준 위원회(ATSC)
-wap- WAP 포럼
-khtml- KDE
-webkit- Apple
prince- YesLogic
-ah- Antenna House
-hp- Hewlett Packard
-ro- Real Objects
-rim- Research In Motion
-tc- TallComponents

4.1.3 문자와 대소문자

다음 규칙은 항상 적용됩니다:

4.1.4 명령문

CSS 스타일 시트(어느 CSS 수준이든)는 명령문 목록으로 구성됩니다(위의 문법 참고). 명령문에는 두 가지 종류가 있습니다: at-규칙과 규칙 집합. 명령문 주변에는 공백 문자가 있을 수 있습니다.

4.1.5 At-규칙

At-규칙은 at-키워드로 시작하며, '@' 문자 바로 뒤에 식별자가 옵니다(예: '@import', '@page').

At-규칙은 다음 세미콜론(;) 또는 다음 블록까지, 둘 중 먼저 나오는 부분까지로 구성됩니다.

CSS 2.2 사용자 에이전트는 무시해야 합니다. '@import' 규칙이 블록 내부에 있거나, @charset 또는 @import 규칙이 아닌 무시되지 않은 명령문 뒤에 나타나는 경우 해당 규칙을 무시해야 합니다.

예를 들어, CSS 2.2 파서가 다음 스타일 시트를 만나면: 

@import "subs.css";
h1 { color: blue }
@import "list.css";

두 번째 '@import'는 CSS 2.2에 따라 잘못된 것입니다. CSS 2.2 파서는 전체 at-규칙을 무시하므로, 스타일 시트가 다음과 같이 축소됩니다: 

@import "subs.css";
h1 { color: blue }

다음 예시에서 두 번째 '@import' 규칙은 '@media' 블록 내부에 있으므로 잘못된 것입니다. 

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }

대신, 'print' 미디어에만 스타일 시트를 임포트하려면 미디어 구문이 포함된 @import 규칙을 사용하세요. 예: 

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

4.1.6 블록

블록은 왼쪽 중괄호({)로 시작해서, 짝이 맞는 오른쪽 중괄호(})로 끝납니다. 그 사이에는 모든 토큰이 올 수 있지만, 괄호(( )), 대괄호([ ]), 중괄호({ })는 항상 짝이 맞아야 하며, 중첩될 수 있습니다. 홑따옴표(')와 쌍따옴표(")도 짝이 맞아야 하며, 그 사이의 문자는 문자열로 파싱됩니다. 문자열의 정의는 토큰화 참고.

다음은 블록 예시입니다. 쌍따옴표 안의 오른쪽 중괄호는 블록의 시작 중괄호와 짝이 맞지 않고, 두 번째 홑따옴표는 이스케이프 문자이므로 첫 번째 홑따옴표와 짝이 맞지 않습니다: 

{ causta: "}" + ({7} * '\'') }

위 규칙은 CSS 2.2에서 올바르지 않지만, 위에서 정의한 블록에는 해당합니다.

4.1.7 규칙 집합, 선언 블록, 선택자

규칙 집합(룰이라고도 함)은 선택자와 선언 블록으로 구성됩니다.

선언 블록은 왼쪽 중괄호({)로 시작해, 짝이 맞는 오른쪽 중괄호(})로 끝납니다. 그 사이에는 0개 이상의 선언과 at-규칙 목록이 있어야 합니다. 선언은 마지막이 아니라면 세미콜론(;)으로 끝나야 합니다.

참고: CSS 2에는 규칙 집합 내부에 올 수 있는 at-규칙이 없지만, 향후 수준에서는 정의될 수 있습니다.

선택자(선택자 섹션 참고)는 첫 왼쪽 중괄호({) 직전까지의 모든 내용으로 구성됩니다. 선택자는 항상 선언 블록과 함께 사용됩니다. 사용자 에이전트가 선택자를 파싱할 수 없으면(즉, CSS 2.2에 올바르지 않으면), 선택자와 그 뒤의 선언 블록(있다면 둘 다)을 무시해야 합니다.

CSS 2.2는 선택자에서 쉼표(,)에 특별한 의미를 부여하지만, 미래 CSS에서는 쉼표가 다른 의미를 가질 수 있으므로 선택자에 오류가 있으면 해당 명령문 전체를 무시해야 합니다. 나머지 선택자가 CSS 2.2에서 올바르게 보여도 마찬가지입니다.

예를 들어, "&"는 CSS 2.2 선택자에서 올바른 토큰이 아니므로, CSS 2.2 사용자 에이전트는 두 번째 줄 전체를 무시하고 H3의 색상을 빨간색으로 설정하지 않습니다: 

h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }

예시:

다음은 좀 더 복잡한 예시입니다. 처음 두 쌍의 중괄호는 문자열 내부에 있으므로 선택자의 끝을 표시하지 않습니다. 이것은 올바른 CSS 2.2 규칙입니다. 

p[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 선언 및 속성

선언은 비어있거나, 속성 이름 다음에 콜론(:), 그 다음에 속성 값이 옵니다. 각각의 요소 주변에는 공백 문자가 올 수 있습니다.

선택자 동작 때문에, 동일 선택자에 대한 여러 선언은 세미콜론(;)으로 구분된 그룹에 정리할 수 있습니다.

예시:

다음과 같은 규칙들은:

h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }

다음과 동일합니다:

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

속성 이름은 식별자입니다. 어떤 토큰이든 속성 값에 올 수 있습니다. 괄호("()"), 대괄호("[]"), 중괄호("{}"), 홑따옴표('), 쌍따옴표(")는 짝이 맞아야 하며, 문자열이 아닌 곳에서의 세미콜론은 이스케이프해야 합니다. 괄호, 대괄호, 중괄호는 중첩될 수 있습니다. 따옴표 안에서는 문자가 문자열로 파싱됩니다.

값의 문법은 각 속성마다 별도로 지정되지만, 값은 식별자, 문자열, 숫자, 길이, 백분율, URI, 색상 등으로 구성됩니다.

사용자 에이전트는 속성 이름이나 값이 올바르지 않은 선언을 무시해야 합니다. 모든 CSS 속성은 허용 값에 대한 자체 문법 및 의미 제약을 가집니다.

예를 들어 CSS 2.2 파서가 다음 스타일 시트를 만나면: 

h1 { color: red; font-style: 12pt }  /* 잘못된 값: 12pt */
p { color: blue;  font-vendor: any;  /* 잘못된 속성: font-vendor */
    font-variant: small-caps }
em em { font-style: normal }

첫 번째 줄의 두 번째 선언은 잘못된 값 '12pt'를 가집니다. 두 번째 줄의 두 번째 선언은 정의되지 않은 속성 'font-vendor'를 포함합니다. CSS 2.2 파서는 이러한 선언을 무시하므로 결과적으로 스타일 시트는 다음과 같이 축소됩니다: 

h1 { color: red; }
p { color: blue;  font-variant: small-caps }
em em { font-style: normal }

4.1.9 주석

주석은 "/*"로 시작해서 "*/"로 끝납니다. 다른 토큰 밖 어디서든 올 수 있으며, 내용은 렌더링에 아무 영향도 없습니다. 주석은 중첩될 수 없습니다.

CSS는 SGML 주석 구분자("<!--" 및 "-->")도 문법에서 정의된 특정 위치에 허용하지만, 이는 CSS 주석을 구분하지 않습니다. 이러한 구분자는 HTML 소스 문서(예: STYLE 요소) 내의 스타일 규칙이 pre-HTML 3.2 사용자 에이전트에서 숨겨지도록 허용된 것입니다. 자세한 내용은 HTML 4 명세([HTML4])를 참고하세요.

4.2 구문 오류 처리 규칙

경우에 따라 사용자 에이전트는 잘못된 스타일 시트의 일부를 무시해야 합니다. 이 명세는 무시를, 사용자 에이전트가 잘못된 부분을 파싱(시작과 끝을 찾기 위해)하지만, 그 부분이 없었던 것처럼 동작하는 것으로 정의합니다. CSS 2.2는 dash나 언더스코어로 시작하지 않는 모든 property:value 조합과 @-키워드를 미래 CSS 업데이트를 위해 예약합니다. 구현체는 이러한 조합(향후 CSS에서 도입된 경우 제외)을 무시해야 합니다.

향후 새로운 속성 및 기존 속성의 새로운 값 추가를 보장하기 위해, 사용자 에이전트는 다음 시나리오에서 아래 규칙을 따라야 합니다:

4.3 값

4.3.1 정수와 실수

일부 값 유형은 정수 값(<integer>) 또는 실수 값(<number>)을 가질 수 있습니다. 실수와 정수는 십진수 표기법으로만 지정됩니다. <integer>는 "0"에서 "9"까지의 하나 이상의 숫자로 구성됩니다. <number>는 정수이거나, 숫자 0개 이상 뒤에 점(.)이 오고, 그 뒤에 하나 이상의 숫자가 올 수 있습니다. 정수와 실수 모두 "-" 또는 "+"로 부호를 나타낼 수 있습니다. -0은 0과 동등하며 음수가 아닙니다.

정수 또는 실수 값을 허용하는 많은 속성은 실제로 값을 특정 범위로 제한하며, 종종 비음수로 제한합니다.

4.3.2 길이

길이는 거리 측정을 나타냅니다.

길이 값(<length>)의 형식은 <number>(소수점 포함 여부와 상관없이) 바로 뒤에 단위 식별자(예: px, em 등)가 오는 것입니다. 0 길이 뒤에는 단위 식별자가 선택적입니다.

일부 속성은 음수 길이 값을 허용하지만, 이는 형식 모델을 복잡하게 만들 수 있으며 구현별 제한이 있을 수 있습니다. 음수 길이 값을 지원할 수 없는 경우, 지원 가능한 가장 가까운 값으로 변환해야 합니다.

음수 길이 값이 음수를 허용하지 않는 속성에 설정된 경우, 선언은 무시됩니다.

사용된 길이를 지원할 수 없는 경우, 사용자 에이전트는 이를 실제 값으로 근사해야 합니다.

길이 단위는 두 가지 유형이 있습니다: 상대적 단위와 절대적 단위. 상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 상대 단위를 사용하는 스타일 시트는 하나의 출력 환경에서 다른 출력 환경으로 더 쉽게 확장할 수 있습니다.

상대 단위는 다음과 같습니다:

예시:

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */

'em' 단위는 사용된 요소의 'font-size' 속성의 계산된 값과 같습니다. 예외는 'font-size' 속성 자체 값에서 'em'이 발생하는 경우로, 이 경우 부모 요소의 폰트 크기를 참조합니다. 이는 수직 또는 수평 측정에 사용될 수 있습니다. (이 단위는 타이포그래피 텍스트에서 quad-width라고도 합니다.)

'ex' 단위는 요소의 첫 번째 사용 가능한 폰트에 의해 정의됩니다. 예외는 'ex'가 'font-size' 속성 값에서 발생하는 경우로, 이 경우 부모 요소의 'ex'를 참조합니다.

'x-height'는 소문자 "x"의 높이와 동일한 경우가 많기 때문에 이렇게 불립니다. 그러나 "x"를 포함하지 않는 폰트에 대해서도 'ex'가 정의됩니다.

폰트의 x-height는 여러 가지 방법으로 찾을 수 있습니다. 일부 폰트는 x-height에 대한 신뢰할 수 있는 메트릭을 포함합니다. 신뢰할 수 있는 폰트 메트릭을 사용할 수 없는 경우, UA는 소문자 글리프의 높이에서 x-height를 결정할 수 있습니다. 가능한 휴리스틱 중 하나는 소문자 "o" 글리프가 기준선 아래로 얼마나 확장되는지 확인하고, 그 값을 경계 상자의 상단에서 빼는 것입니다. x-height를 결정할 수 없거나 실용적이지 않은 경우, 0.5em 값을 사용해야 합니다.

예시:

다음 규칙은:

h1 { line-height: 1.2em }

"h1" 요소의 줄 높이가 "h1" 요소의 폰트 크기보다 20% 더 크다는 의미입니다. 반면:

h1 { font-size: 1.2em }

"h1" 요소의 폰트 크기가 "h1" 요소가 상속받은 폰트 크기보다 20% 더 크다는 의미입니다.

문서 트리(document tree, 예: HTML의 "HTML")의 루트에 대해 지정된 경우, 'em' 및 'ex'는 속성의 초기 값을 참조합니다.

자식 요소는 부모에 대해 지정된 상대 값을 상속하지 않습니다. 대신 계산된 값을 상속합니다.

예시:

다음 규칙에서 "h1" 요소의 'text-indent'의 계산된 값은 "h1"이 "body" 요소의 자식인 경우 45px이 아니라 36px이 됩니다.

body {
  font-size: 12px;
  text-indent: 3em;  /* i.e., 36px */
}
h1 { font-size: 15px }

절대 길이 단위는 서로 간의 관계에서 고정되어 있습니다. 이러한 단위는 출력 환경이 알려져 있을 때 주로 유용합니다. 절대 단위는 물리적 단위 (in, cm, mm, pt, pc)와 px 단위로 구성됩니다:

CSS 장치의 경우, 이러한 크기는 (i) 물리적 단위를 물리적 측정값에 연결하거나, (ii) 픽셀 단위를 기준 픽셀에 연결하여 고정됩니다. 인쇄 매체 및 이와 유사한 고해상도 장치의 경우, 앵커 단위는 표준 물리적 단위(인치, 센티미터 등) 중 하나여야 합니다. 저해상도 장치 및 보기 거리가 비정상적인 장치의 경우, 대신 픽셀 단위를 앵커 단위로 사용하는 것이 권장됩니다. 이러한 장치의 경우, 픽셀 단위는 기준 픽셀에 가장 근접한 장치 픽셀의 정수 단위를 참조하는 것이 권장됩니다.

참고: 앵커 단위가 픽셀 단위라면, 물리적 단위는 물리적 측정값과 일치하지 않을 수 있습니다. 반대로 앵커 단위가 물리적 단위라면, 픽셀 단위는 장치 픽셀의 정수 단위와 매핑되지 않을 수 있습니다.

참고: 픽셀 단위와 물리적 단위의 이 정의는 이전 CSS 버전과 다릅니다. 특히, 이전 CSS 버전에서는 픽셀 단위와 물리적 단위가 고정 비율로 연결되지 않았습니다. 물리적 단위는 항상 물리적 측정값에 묶여 있었던 반면, 픽셀 단위는 기준 픽셀에 가장 근접하도록 가변적이었습니다. (이 변경은 기존 콘텐츠가 96dpi 가정에 과도하게 의존하기 때문에 이루어졌으며, 이 가정을 깨면 콘텐츠가 깨질 수 있습니다.)

기준 픽셀은 96dpi 픽셀 밀도를 가진 장치에서 한 픽셀의 시각적 각도이며, 팔 길이 거리에서 측정됩니다. 평균적인 팔 길이 거리는 28인치로, 시각적 각도는 약 0.0213도입니다. 팔 길이에서 읽을 때, 1px은 약 0.26 mm (1/96 인치)에 해당합니다.

아래 이미지는 기준 픽셀의 크기에 대한 거리의 영향을 보여줍니다: 읽기 거리가 71 cm (28 인치)일 때 기준 픽셀은 0.26 mm이며, 읽기 거리가 3.5 m (12 피트)일 때 기준 픽셀은 1.3 mm입니다.

거리가 증가할수록 픽셀이 더 커져야 함을 보여주는 이미지   [D]

두 번째 이미지는 장치의 해상도가 픽셀 단위에 미치는 영향을 보여줍니다: 낮은 해상도의 장치(예: 일반 컴퓨터 디스플레이)에서는 1px x 1px 영역이 하나의 점으로 표현되지만, 높은 해상도의 장치(예: 프린터)에서는 동일한 영역이 16개의 점으로 표현됩니다.

고해상도 장치에서 1px x 1px 영역을 덮기 위해 더 많은 장치 픽셀(점)이 필요함을 보여주는 이미지   [D]

예시:

h1 { margin: 0.5in }      /* 인치  */
h2 { line-height: 3cm }   /* 센티미터 */
h3 { word-spacing: 4mm }  /* 밀리미터 */
h4 { font-size: 12pt }    /* 포인트 */
h4 { font-size: 1pc }     /* 파이카 */
p  { font-size: 12px }    /* 픽셀 */

4.3.3 백분율

백분율 값의 형식(이 명세서에서 <percentage>로 표시됨)은 <number> 바로 뒤에 '%'가 오는 형태입니다.

백분율 값은 항상 다른 값(예: 길이)에 상대적입니다. 백분율을 허용하는 각 속성은 백분율이 참조하는 값을 정의합니다. 이 값은 동일한 요소의 다른 속성, 상위 요소의 속성, 또는 포맷 컨텍스트의 값(예: 포함 블록의 너비)일 수 있습니다. 루트(root) 요소의 속성에 대해 백분율 값이 설정되고, 백분율이 상속된 속성 값을 참조한다고 정의된 경우, 결과 값은 해당 속성의 초기 값에 백분율을 곱한 값입니다.

예시:

자식 요소는 (일반적으로) 부모의 계산된 값을 상속하므로, 다음 예시에서 P 요소의 자식은 'line-height'에 대해 120%가 아닌 12px 값을 상속받습니다: 

p { font-size: 10px }
p { line-height: 120% }  /* 'font-size'의 120% */

4.3.4 URL과 URI

URI 값(통합 자원 식별자, [RFC3986] 참조, 여기에는 URL, URN 등이 포함됨)은 본 명세서에서 <uri>로 표시됩니다. 속성 값에서 URI를 지정하는 기능 표기법은 "url()"입니다. 예:

예시:

body { background: url("http://www.example.com/pinkish.png") }

URI 값의 형식은 'url('로 시작하고, 선택적 공백 뒤에 선택적인 홑따옴표(') 또는 쌍따옴표(")가 오며, 그 뒤에 URI 자체가 오고, 다시 선택적인 홑따옴표(') 또는 쌍따옴표(")가 오며, 선택적 공백 뒤에 ')'로 닫힙니다. 두 따옴표 문자는 동일해야 합니다.

예시:

따옴표 없이 사용한 예시: 

li { list-style: url(http://www.example.com/redball.png) disc }

따옴표로 감싸지 않은 URI에 나타나는 일부 문자(예: 괄호, 공백 문자, 홑따옴표('), 쌍따옴표("))는 URI 값이 URI 토큰이 되도록 백슬래시로 이스케이프해야 합니다: '\(', '\)'.

URI 유형에 따라 위의 문자를 URI 이스케이프(예: "(" = %28, ")" = %29 등)로 작성할 수도 있습니다. 자세한 내용은 [RFC3986]를 참조하세요.

참고: COMMENT 토큰은 다른 토큰 내에 나타날 수 없습니다. 따라서, "url(/*x*/pic.png)"는 URI "/*x*/pic.png"를 나타내며, "pic.png"를 나타내지 않습니다.

모듈화된 스타일 시트를 작성할 때 리소스의 절대 위치에 의존하지 않도록 작성자는 상대 URI를 사용할 수 있습니다. 상대 URI([RFC3986]에서 정의됨)는 기본 URI를 사용하여 전체 URI로 해석됩니다. RFC 3986 섹션 5는 이 프로세스에 대한 규범적 알고리즘을 정의합니다. CSS 스타일 시트의 경우, 기본 URI는 소스 문서가 아닌 스타일 시트의 URI입니다.

예시:

예를 들어, 다음 규칙이:

body { background: url("yellow") }

다음 URI로 지정된 스타일 시트에 위치한 경우:

http://www.example.org/style/basic.css

소스 문서의 BODY 배경은 해당 URI에 의해 지정된 리소스의 이미지를 타일 형식으로 채웁니다: 

http://www.example.org/style/yellow

사용자 에이전트는 잘못된 URI 또는 사용할 수 없거나 적용할 수 없는 리소스를 지정하는 URI를 처리하는 방법에 차이가 있을 수 있습니다.

4.3.5 카운터

카운터 는 대소문자를 구분하는 식별자로 표시됩니다(예: 'counter-increment' 및 'counter-reset' 속성 참조). 카운터 값을 참조하려면 'counter(<identifier>)' 또는 'counter(<identifier>, <'list-style-type'>)' 표기법을 사용하며, 토큰 사이에 선택적으로 공백을 넣을 수 있습니다. 기본 스타일은 'decimal'입니다.

동일한 이름의 중첩된 카운터 시퀀스를 참조하려면, 'counters(<identifier>, <string>)' 또는 'counters(<identifier>, <string>, <'list-style-type'>)' 표기법을 사용하며, 토큰 사이에 선택적으로 공백을 넣을 수 있습니다.

"중첩 카운터와 범위" 장에서 사용자 에이전트가 카운터의 값 또는 값을 어떻게 결정해야 하는지에 대해 확인하세요. 'content' 속성의 카운터 값을 문자열로 변환하는 방법은 해당 정의를 참조하세요.

CSS 2.2에서는 카운터 값이 'content' 속성에서만 참조될 수 있습니다. 참고로 'none'은 가능한 <'list-style-type'> 값 중 하나이며, 'counter(x, none)'는 빈 문자열을 반환합니다.

예시:

다음은 각 장(h1)에 대해 단락(p)을 번호 매기는 스타일 시트입니다. 단락은 로마 숫자로 번호가 매겨지며, 점과 공백이 뒤따릅니다: 

p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

4.3.6 색상

<color> 는 키워드 또는 숫자 RGB 지정 중 하나입니다.

색상 키워드 목록은 다음과 같습니다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. 이 17가지 색상은 다음 값을 가집니다:

maroon #800000 red #ff0000 orange #ffA500 yellow #ffff00 olive #808000
purple #800080 fuchsia #ff00ff white #ffffff lime #00ff00 green #008000
navy #000080 blue #0000ff aqua #00ffff teal #008080
black #000000 silver #c0c0c0 gray #808080

이 색상 키워드 외에도, 사용자는 사용자 환경의 특정 객체에서 사용되는 색상에 해당하는 키워드를 지정할 수 있습니다. 자세한 내용은 시스템 색상 섹션을 참조하세요.

예시:

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

RGB 색상 모델은 숫자 색상 지정에 사용됩니다. 다음 예시는 모두 동일한 색상을 지정합니다:

예시:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

16진수 표기법에서 RGB 값의 형식은 '#' 바로 뒤에 세 자리 또는 여섯 자리 16진수 문자가 오는 것입니다. 세 자리 RGB 표기법(#rgb)은 숫자를 추가하지 않고, 숫자를 복제하여 여섯 자리 형태(#rrggbb)로 변환됩니다. 예를 들어, #fb0은 #ffbb00으로 확장됩니다. 이는 짧은 표기법(#fff)으로 흰색(#ffffff)을 지정할 수 있도록 하고, 디스플레이 색상 깊이에 대한 의존성을 제거합니다.

함수 표기법에서 RGB 값의 형식은 'rgb('로 시작하고, 세 개의 숫자 값(정수 값 또는 백분율 값)을 쉼표로 구분하여 나열하며, ')'로 닫습니다. 정수 값 255는 100%에 해당하며, 16진수 표기법의 F 또는 FF에 해당합니다: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. 숫자 값 주변에는 공백 문자가 허용됩니다.

모든 RGB 색상은 sRGB 색상 공간에서 지정됩니다([SRGB] 참조). 사용자 에이전트는 이 색상을 표현하는 정확성에서 차이가 있을 수 있지만, sRGB를 사용하면 색상이 무엇이어야 하는지에 대한 명확하고 객관적으로 측정 가능한 정의를 제공하며, 이는 국제 표준([COLORIMETRY] 참조)과 관련될 수 있습니다.

적합한 사용자 에이전트는 색상 표시 작업을 감마 보정(gamma-correction) 수행으로 제한할 수 있습니다. sRGB는 지정된 보기 조건에서 2.2의 디스플레이 감마를 지정합니다. 사용자 에이전트는 CSS에서 제공된 색상을 조정하여 출력 장치의 "자연스러운" 디스플레이 감마와 결합하여 2.2의 효과적인 디스플레이 감마를 생성해야 합니다. 참고로, CSS에서 지정된 색상만 영향을 받으며, 예를 들어, 이미지는 자체 색상 정보를 포함해야 합니다.

장치 색역을 벗어난 값은 색역이 알려진 경우 자르거나 색역 내로 매핑해야 합니다: 빨강, 초록, 파랑 값은 장치가 지원하는 범위 내로 변경되어야 합니다. 사용자 에이전트는 색상을 한 색역에서 다른 색역으로 고품질 매핑할 수 있습니다. sRGB와 동일한 장치 색역을 가진 일반 CRT 모니터의 경우, 아래 네 가지 규칙은 동일합니다:

예시:

em { color: rgb(255,0,0) }       /* 정수 범위 0 - 255 */
em { color: rgb(300,0,0) }       /* rgb(255,0,0)으로 자름 */
em { color: rgb(255,-10,0) }     /* rgb(255,0,0)으로 자름 */
em { color: rgb(110%, 0%, 0%) }  /* rgb(100%,0%,0%)으로 자름 */

프린터와 같은 다른 장치는 sRGB와 다른 색역을 가집니다. 0..255 sRGB 범위를 벗어나는 일부 색상은 표현 가능(장치 색역 내)이지만, 0..255 sRGB 범위 내의 다른 색상은 장치 색역을 벗어나 매핑됩니다.

참고. 색상 값의 매핑 또는 자르기는 알려진 경우 실제 장치 색역에 대해 수행해야 합니다(0..255보다 크거나 작을 수 있음).

4.3.7 문자열

문자열은 쌍따옴표 또는 홑따옴표로 작성할 수 있습니다. 쌍따옴표는 쌍따옴표 안에 직접 나타날 수 없으며, 이스케이프되어야 합니다(예: '\"' 또는 '\22'). 홑따옴표도 마찬가지입니다(예: "\'" 또는 "\27").

예시:

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

문자열은 직접적으로 줄바꿈을 포함할 수 없습니다. 문자열에 줄바꿈을 포함하려면 ISO-10646(U+000A)의 줄바꿈 문자를 나타내는 이스케이프를 사용해야 합니다(예: "\A" 또는 "\00000a"). 이 문자는 CSS에서 "줄바꿈"의 일반 개념을 나타냅니다. 예시는 'content' 속성을 참조하세요.

미적 또는 기타 이유로 문자열을 여러 줄에 걸쳐 나눌 수도 있지만, 이 경우 줄바꿈 자체를 백슬래시(\)로 이스케이프해야 합니다. 예를 들어, 다음 두 선택자는 정확히 동일합니다:

예시:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

4.3.8 지원되지 않는 값

사용자 에이전트(UA)가 특정 값을 지원하지 않는 경우, UA는 스타일 시트를 파싱할 때 해당 값을 무시해야 하며, 해당 값이 잘못된 값인 것처럼 처리해야 합니다. 예:

예시:

  h3 {
    display: inline;
    display: run-in;
  }

'display' 속성에서 'run-in' 값을 지원하는 UA는 첫 번째 display 선언을 수락한 후 두 번째 display 선언으로 해당 값을 "덮어씁니다". 'run-in' 값을 지원하지 않는 UA는 첫 번째 display 선언을 처리하고 두 번째 display 선언을 무시합니다.

4.4 CSS 스타일 시트 표현

CSS 스타일 시트는 유니버설 문자 집합([ISO10646])의 문자 시퀀스입니다. 전송 및 저장을 위해 이러한 문자는 US-ASCII에서 사용 가능한 문자를 지원하는 문자 인코딩(e.g., UTF-8, ISO 8859-x, SHIFT JIS 등)으로 인코딩되어야 합니다. 문자 집합 및 문자 인코딩에 대한 좋은 소개는 HTML 4 명세([HTML4], 5장)을 참조하세요. 또한 XML 1.1 명세([XML11], 2.2 및 4.3.3 섹션, 부록 E)도 참고하세요.

스타일 시트가 HTML의 STYLE 요소나 "style" 속성처럼 다른 문서에 포함된 경우, 스타일 시트는 전체 문서의 문자 인코딩을 공유합니다.

스타일 시트가 별도의 파일에 있는 경우, 사용자 에이전트는 스타일 시트의 문자 인코딩을 결정할 때 다음 우선 순위를 준수해야 합니다(우선 순위 높은 순서):

  1. "Content-Type" 필드(또는 다른 프로토콜의 유사한 매개변수)에 있는 HTTP "charset" 매개변수
  2. BOM 및/또는 @charset (아래 참조)
  3. <link charset=""> 또는 연결 메커니즘에서 제공된 기타 메타데이터(있는 경우)
  4. 참조 스타일 시트 또는 문서의 문자 인코딩(있는 경우)
  5. UTF-8 가정

@charset 규칙을 사용하는 작성자는 스타일 시트의 맨 앞에 해당 규칙을 배치해야 하며, 앞에는 아무 문자도 없어야 합니다. (사용된 인코딩에 적합한 바이트 순서 표시가 있을 경우, 이는 @charset 규칙 앞에 올 수 있습니다.)

"@charset" 뒤에는 작성자가 문자 인코딩 이름을 지정해야 합니다(따옴표로 묶음). 예: 

@charset "ISO-8859-1";

@charset은 문자 그대로 작성되어야 합니다. 즉, '@charset "'(소문자, 백슬래시 이스케이프 없음) 10자 뒤에 인코딩 이름이 오고, 마지막에 '";'가 옵니다.

이름은 IANA 레지스트리에서 기술된 문자 집합 이름이어야 합니다. 전체 문자 집합 목록은 [CHARSETS]를 참조하세요. 작성자는 IANA 레지스트리에서 "선호 MIME 이름"으로 표시된 문자 집합 이름을 사용해야 합니다.

사용자 에이전트는 최소한 UTF-8 인코딩을 지원해야 합니다.

위 1번 규칙(HTTP "charset" 매개변수 또는 유사한 규칙)을 통해 문자 인코딩이 UTF-8, UTF-16 또는 UTF-32 중 하나로 확인된 경우, 파일 시작 부분의 BOM(있는 경우)이 다음과 같이 해당 문자 인코딩을 재정의합니다:

첫 바이트(16진수) 결과 인코딩
00 00 FE FF UTF-32, big-endian
FF FE 00 00 UTF-32, little-endian
FE FF UTF-16, big-endian
FF FE UTF-16, little-endian
EF BB BF UTF-8

1번 규칙이 UTF-16BE, UTF-16LE, UTF-32BE 또는 UTF-32LE의 문자 인코딩을 제공하는 경우, 파일 시작 부분에 BOM이 있으면 오류가 발생합니다. CSS UA는 지정된 인코딩을 무시하고 위 표를 사용하여 복구해야 합니다.

참고: UTF-16BE, UTF-16LE, UTF-32BE 또는 UTF-32LE에서 파일 시작 부분의 BOM이 오류라는 것은 [UNICODE]에 의해 명시되어 있습니다.

사용자 에이전트는 스타일 시트 시작 부분에 있지 않은 @charset 규칙을 무시해야 합니다. 사용자 에이전트가 BOM 및/또는 @charset 규칙을 사용하여 문자 인코딩을 감지할 때, 다음 규칙을 따라야 합니다:

사용자 에이전트는 알 수 없는 인코딩의 스타일 시트를 무시해야 합니다.

4.4.1 문자 인코딩에 없는 문자를 참조하기

스타일 시트는 현재 문자 인코딩에서 표현할 수 없는 문자를 참조해야 할 수 있습니다. 이러한 문자는 ISO 10646 문자의 이스케이프 참조로 작성해야 합니다. 이러한 이스케이프는 HTML 또는 XML 문서에서 숫자 문자 참조와 동일한 목적을 수행합니다(참조: [HTML4], 5장 및 25장).

문자 이스케이프 메커니즘은 소수의 문자만 이 방식으로 표현해야 할 때 사용해야 합니다. 만약 스타일 시트 대부분이 이스케이프를 필요로 한다면, 작성자는 더 적합한 인코딩으로 스타일 시트를 인코딩해야 합니다(예: 스타일 시트에 많은 그리스 문자가 포함된 경우, 작성자는 "ISO-8859-7" 또는 "UTF-8"을 사용할 수 있습니다).

다른 문자 인코딩을 사용하는 중간 프로세서는 이 이스케이프 시퀀스를 해당 인코딩의 바이트 시퀀스로 변환할 수 있습니다. 하지만 중간 프로세서는 ASCII 문자의 특별한 의미를 취소하는 이스케이프 시퀀스를 변경해서는 안 됩니다.

적합한 사용자 에이전트는 인식하는 모든 문자 인코딩의 문자를 ISO-10646에 올바르게 매핑해야 합니다(또는 그렇게 동작해야 합니다).

예를 들어, ISO-8859-1(Latin-1)로 전송된 스타일 시트는 그리스 문자를 직접 포함할 수 없습니다: "κουρος" (그리스어: "kouros")는 "\3BA\3BF\3C5\3C1\3BF\3C2"로 작성해야 합니다.

참고. HTML 4에서는 숫자 문자 참조가 "style" 속성 값에서는 해석되지만 STYLE 요소의 내용에서는 해석되지 않습니다. 이러한 비대칭성 때문에, 작성자는 숫자 문자 참조 대신 CSS 문자 이스케이프 메커니즘을 사용하는 것을 권장합니다. 예를 들어, 우리는 다음을 권장합니다: 

<SPAN style="font-family: L\FC beck">...</SPAN>

다음 대신:

<SPAN style="font-family: L&#252;beck">...</SPAN>

이전   다음   목차   속성   색인