Trio 홈페이지 - CSS2 문법과 기본 데이터 타입들

이 항목은 어떤 CSS 버전(CSS2 포함)에나 공통적인 문법(과 향후 버전에 부합하는 해석)을 기술한다. CSS 향후 버전들은 추가적인 문맥(syntactic)이 추가 되더라도 이 핵심 문법을 따를 것이다.

이들 설명은 지명적(normative)이다. 이는 또한 부록 D에 기술된 지명적 문법 명령에 의하여 보완된다.

CSS의 모든 버전(level 1, level 2, 향후 level)은 같은 핵심 문법을 사용한다. 이는 사용도구에게, 현재의 사용도구들에 생성되어 있지 않는, 여러 CSS 버전들로 씌여진 스타일쉬트를(완전히 이해하지 못한다 하더라도) 해석하도록 한다. 설계자은 이 기능을 다른 사용도구들에 의하여 작동되는 스타일쉬트를 생성하는데 사용할 수 있다. 또한 가장 최신의 CSS 수준(level)에서 작용할 가능성을 준다.

렉시칼(lexical) 수준에서, CSS 스타일쉬트는 토큰(token)들의 연속(sequence)으로 구성된다. CSS2에서 토큰들의 목록은 다음과 같다. 이 정의는 렉스 스타일(Lex-style)의 일반적인 표현을 사용한다. 8진수 코드는 ISO 10646)을 참조하라. 렉스(Lex) 안에 있는 것 같이, 복수 일치의 경우, 가장 긴 일치(match)가 그 토큰을 결정한다.

토큰(token)	정의

IDENT	`{ident}`
ATKEYWORD	`@{ident}`
STRING	`{string}`
HASH	`#{name}`
NUMBER	`{num}`
PERCENT	`{num}%`
DIMENSION	`{num}{ident}`
URI	`url${w}{string}{w}$ \|url${w}([!#$%&-~]\|{nonascii}\|{escape}){w}$`
UNICODE-RANGE	`U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?`
CDO	`<!--`
CDC	`-->`
;	`;`
{	`\{`
}	`\}`
(	`\(`
)	`\)`
[	`\[`
]	`\]`
S	`[ \t\r\n\f]+`
COMMENT	`\/\[^]\+([^/][^]\+)\/`
FUNCTION	`{ident}\(`
INCLUDES	`~=`
DASHMATCH	`\|=`
DELIM	`위 명령에 일치(match) 않는 다른 글자`

Macro	정의

ident	`{nmstart}{nmchar}*`
name	`{nmchar}+`
nmstart	`[a-zA-Z]\|{nonascii}\|{escape}`
nonascii	`[^\0-\177]`
unicode	`\\[0-9a-f]{1,6}[ \n\r\t\f]?`
escape	`{unicode}\|\\[ -~\200-\4177777]`
nmchar	`[a-z0-9-]\|{nonascii}\|{escape}`
num	`[0-9]+\|[0-9]*\.[0-9]+`
string	`{string1}\|{string2}`
string1	`\"([\t !#$%&(-~]\|\\{nl}\|\'\|{nonascii}\|{escape})*\"`
string2	`\'([\t !#$%&(-~]\|\\{nl}\|\"\|{nonascii}\|{escape})*\'`
nl	`\n\|\r\n\|\r\|\f`
w	`[ \t\r\n\f]*`

아래 부분은 CSS의 핵심 문법이다. 뒤에 오는 항목들은 이를 어떻게 사용하는가을 기술한다. 부록 D에서 CSS 수준(level) 2 언어와 보다 더 가까운 제한적인 문법을 기술하였다.

COMMENT(주석) 토큰은 읽을 수 있도록 문법 안에 나타나지 않는다. 그러나 어떤 갯수든 이들 토큰들은 다른 토큰들사이 어떤 곳에도 나타 날 수 있다.

위의 문법에서 토큰(token) S는 공백(whitespace)을 의미한다. 공백("space": Unicode code 32), 탭("tab": 9), 줄넣기("line feed": 10), 줄바꿈("carriage return": 13), 양식공급("form feed": 12) 글자들 만 공백으로 나타날 수 있다. 다른 강조 공백("em-space": 8195)와 그래픽 공백("표의 문자(ideographic) 공간": 12288)등 공백과 비슷한 글자들은 공백의 부분이 될 수 없다.

4.1.2 키워드(keyword)

키워드는 인식자(identifier)들의 양식(form)을 갖는다. 키워드를 따옴표("..." 또는 '...')사이에 위치시켜서는 안된다. 따라서,

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 글자들과 대소문자

4.1.4 문장(statement)

CSS의 어느 버전에서나 CSS 스타일쉬트는 문장의 목록으로 구성된다(위의 문법 참조). 명령(at-rule)과 명령 세트(rule set)들 , 두 종류의 문장이 있다. 문장 앞, 뒤에 공백이 올 수 있다.

이 규격에서, "바로이전" 또는 "바로다음"이라는 표현은 공백 또는 주석(comment)이 방해하지 않는 상태를 의미한다.

4.1.5 명령(at-rule)

명령(at-rule)은 키워드(at-keyword)로 시작되는데 이는 '@' 글자 바로다음에 인식자(identifier)가 따라 나온다(예: '@import', '@page').

명령(at-rule)은 다음 쎄미콜론(;) 또는 다음 블럭(block) 중 먼저 만나는 것까지 모두, 그리고 그것을 포함하여, 구성된다. 인식하지 못하는 명령(at-rule)을 만나는 CSS 사용도구는 그 전체의 명령을 무시하고, 그 다음의 해석(parsing)을 계속하여야 한다.

CSS2 사용도구는 블럭(block) 안에 있던가 또는 모든 명령 세트(rule set)들이 먼저 나오지 않는, 어떤 '@import' 명령을 무시하여야 한다.

예를 들어, CSS2 해석자(parser)가 이 스타일쉬트를 만났다고 가정하자:

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

두번째 '@import'는 CSS2에 따라 틀린(illegal) 것이다. CSS2 해석자(parser)는 전체 명령(at-rule)을 무시하고, 유효한 범위의 다음과 같은 스타일쉬트가 된다:

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

다음 예제에서, 두번째 '@import' 명령은 '@media' 블럭(block) 안에서 나오므로 유효하지 않다.

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

4.1.6 블럭(block)

블럭은 왼쪽 대괄호({)로 시작하고, 짝맞는 오른쪽 대괄호(})로 종료한다. 그 사이에 괄호(( )), 중괄호([ ])와 대괄호({ })들을 제외하고는 어떤 글자들도 들어 갈 수 있다. 이들은 항상 짝을 맞추어야 하고 네스트(nest)될 수 있다. 단일(') 또는 이중 따옴표들(")도 짝을 맞추어야 하고, 그 사이의 글자들은 문자열로 해석되어야 한다. 위 문자열의 토큰화 정의를 참조하라.

다음 블럭(block) 예제에서, 이중 따옴표들 속의 오른쪽 대괄호는 블럭의 대괄호 열림과 짝이 맞지 않고, 두번째 단일 따옴표는 하나의 에스케입(escape)된 글자이므로 첫번째 단일 따옴표와 짝이 맞지 않는다는 점을 주시하라:

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

위의 명령은 유효한 CSS2가 아니지 만 이는 여전히 위에 정의된 바와 같은 블럭(block)이라는 점을 주시하라.

4.1.7 명령 세트(rule set), 선언 블럭(block), 선택자(selector)

명령세트(rule set: "rule"이라고도 함)는 선택자와 그 다음에 오는 선언 블럭으로 구성된다.

선언블럭(declaration-block)(다음 텍스트에서 {}-block이라고도 부름)은 왼쪽 대괄호 ({)로 시작하고 그 짝이 맞는 오른쪽 대괄호 (})로 종료한다. 그 사이에 0개 또는 그 이상의 쎄미콜론(;)으로 분리된 선언들의 목록이 와야 한다.

선택자(selector)는 첫번째 왼쪽 대괄호 ({)를 포함하지 않고, 그 것까지의 모든 것으로 구성된다. 선택자는 항상 {}-block과 함께 사용된다. 유효한 CSS2가 아니어서 사용도구가 선택자를 해석할 수 없을 때는 {}-block 또한 무시되어여야 한다.

CSS2는 선택자 안의 컴마(,)에 특수한 의미를 준다. 그러나, CSS의 향후 버전에서 다른 의미를 가질수 있겠지 만 아직 모르기 때문에, 그 선택자 안의 어느 부분에서 오류가 있으면, 그 선택자의 나머지 부분이 CSS2에 맞는다 하더라도, 이 전체 문장(statement)은 무시되어야 한다.

예를 들어, "&"는 CSS2 선택자에서 유효한 토큰(token)이 아니기 때문에, CSS2 사용도구는 두번째 줄 전체를 무시하여야 하므로, H3, H4의 색상도 적색(red)으로 설정하지 않는다:

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

여기 더 복잡한 예제를 보자. 첫번째 두 대괄호들의 짝들은 한 문자열 안에 있고, 그 선택자(selector)의 끝은 표시되지 않았다. 이는 유효한 CSS2 문장(statement)이다.

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

4.1.8 선언과 속성

선언은 빈것(empty)이거나, 또는 속성과 그 다음 콜론(:), 그 다음에 값으로 구성되는 것 일 수 있다. 이들 각각의 앞 뒤에 공백을 가질 수 있다.

선택자(selector)의 작용하는 방법 때문에, 같은 선택자에서 쎄미콜론(;)으로 분리된 구룹들을 구성하여 복수 선언을 할 수 있다.

따라서, 다음 명령은:

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

은 아래와 같은 것이다:

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

속성은 인식자(identifier)이다. 그 값 안에는 어떻 글자도 올 수 있으나, 괄호("( )"), 중괄호("[ ]"), 대괄호("{ }"), 단일 따옴표(')와 이중 따옴표 (")들은 짝을 맞추어 나와야 한다. 그리고 문자열들 안에 있지 않는 쎄미콜론들은 에스케입(escape)되어야 한다. 괄호들, 중괄호들, 대괄호들은 네스트(nest)될 수 있다. 따옴표 안에서 글자들은 문자열로 해석된다.

값의 문법은 각 속성에 따라 별도로 정의되어 있으나, 어떤 경우든, 그 값은 인식자(identifier), 문자열, 숫자, 길이, 백분율, URI, 색상, 각도, 시간, 주파수(frequencies)들로 부터 구성된다.

사용도구는 유효하지 않은 속성 이름 또는 값을 가지고 있는 선언을 무시하여야 한다. 각 CSS2 속성은 자신의 문법(syntactic)과 그 받을 수 있는 값들의 문법적 제한(semantic restriction)을 갖는다.

예를 들어, CSS2 해석자(parser)가 이 스타일쉬트를 만났다고 가정하자:

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'은 정의되어 있지 않다. CSS2 해석자(parser)는 이 선언들을 무시하고, 다음과 같이 스타일쉬트의 효과로 축소한다:

H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 주석(comment)

주석는 "/*" 글자로 시작되고 "*/" 글자로 종료된다. 이은 토큰(token)들사이의 어디에나 나타날 수 있으며, 내용(content)은 표현에 영향을 주지 않는다. 주석들은 네스트(nest)될 수 없다.

CSS는 또한 어떤 위치에서, SGML 주석 분리자(delimiter: "")를 허용하나, 이들은 CSS 주석를 해제하지 않는다. HTML 원문 안의 STYLE 엘레멘트에서 나타나는 스타일 명령이 HTML 3.2 이전 사용도구에서 감춰 줄 수 있다. 추가적 정보는 HTML 4 규격을 참조하라.

4.2 해석(parsing) 오류 처리 규칙

어떤 경우에는, 사용도구들은 틀린(illegal) 스타일쉬트의 부분을 무시하여야 한다. 이 규격에서 무시(ignore)한다는 것은 사용도구가 틀린 부문을 시작과 종료를 찾기위하여 해석하는 것을 의미하지 만, 그렇지 않으면, 거기에 없는 것으로 작용하도록 정의한다.

현존하는 속성들에서 향후 새로운 속성과 새로운 값이 추가될 수 있슴에 대비하여 사용도구는 다음의 시나리오(scenario)을 만났을 때 다음 규칙을 준수할 필요가 있다.

4.3 값

4.3.1 정수들과 실수(real) 수치

일부 값의 종류(type)들은 정수 값들(<정수>로 표시) 또는 실수 값들(<수치>로 표시)을 가질 수 있다. 실수와 정수는 십진수(decimal)로 만 표시된다. <정수>는 하나이상의 "0"에서 "9"사이의 글자들로 구성된다. <수치>는 <정수>, 0(zero)개 또는 여러개의 숫자와 그 뒤를 따르는 점(.), 그 뒤의 하나이상의 숫자(digit)들로 구성될 수 있다. 정수와 실수들 둘 다에서 그 앞에 부호를 나타내는 "-" 또는 "+"를 가질 수 있다.

값으로 정수 또는 실수를 허용하는 여러 속성들은 실제적으로 그 값을 어떤 범위로 제한하는데, 많은 경우, 음수값이 아니어야 한다는 점을 주시하라.

4.3.2 길이(length)

길이값(이 규격에서 <길이>로 표시)의 양식은 선택적 부호 글자('+' 또는 '-', 디폴트는 '+')와 그 바로 뒤에오는 <수치>(소수점이 있거나 없거나), 그리고 그 바로 뒤의 단위 인식자(identifier 예: px, deg, 등)로 구성된다. '0' 길이 다음, 단위 인식자(identifier)는 선택적이다.

일부 속성은 음수 길이 값을 허용하지 만, 이는 양식화 모델을 복잡하개 만들 수 있으며 특정 적용 한계가 있을 수 있다. 만일 음수 길이 값을 지원할 수 없으면, 이는 지원되는 가장 가까운 값으로 변환되어야 한다.

상대적인 것과 절대적인 두가지 종류의 길이 단위(unit)들이 있다. 상대적 길이 단위는 다른 길이 속성에 대한 상대적인 길이를 지정한다. 상대적 단위를 사용하는 스타일쉬트는 한 메디아에서 다른 메디아로 보다 쉽게 스케일(scale)할 수 있다(예: 컴퓨터 디스플레이에서 레저 프린터로).

H1 { margin: 0.5em } /* em */
H1 { margin: 1ex }  /* ex */
P { font-size: 12px }  /* px */

'em' 단위는 그 사용되는 엘레멘트 속성 'font-size'의 계산된 값과 같다. 'font-size' 속성 자체의 값 안에서 'em'이 나올 때는 예외인데, 이 경우, 이는 모체 엘레멘트의 글꼴 크기(font size)를 참조한다. 이는 수직 또는 수평적 거리에 사용될 수 있다(이 단위는 또한 때때로 인쇄술(typographic) 텍스트들 안의 quad-width로도 불리움).

'ex' 단위는 글꼴의 'x-height'로 정의된다. x-height는 소문자 "x"의 높이에 해당하므로 그렇게 불리운다. 그러나, 'ex'은, 글꼴에 "x"를 가지고 있지 않더라도, 정의된다.

명령:

H1 { line-height: 1.2em }

이는 H1 엘레멘트 줄의 높이가 H1 엘레멘트 글꼴 크기보다 20% 더 크게 된다. 이와 달리:

H1 { font-size: 1.2em }

이는 H1 엘레멘트에 의하여 전달(inherit)된 글꼴 크기보다 20% 더 크게 H1 엘레멘트의 글꼴 크기가 된다.

문서계통(tree)의 최상위(root)를 지정할 때(예: HTML에서 "HTML")는, 'em'과 'ex'는 그 속성의 최초값을 참조한다.

픽셀(pixel) 단위는, 거의 컴퓨터 디스플레이 등, 보는(viewing) 장치의 해상도에 상대적이다. 만일 출력 장치의 픽셀(pixel) 밀도가 일반적인 컴퓨터 디스플레이와 많이 다른 경우, 사용도구는 픽셀 값을 다시 스케일할 것을 추천한다. 참조(reference) 픽셀은 90dpi 밀도 장치에서, 사용자의 한 팔(arm) 거리에서, 한 픽셀의 보이는 각도(angle)로 될 것을 추천한다. 정상적인 팔의 길이 28 인치에서 보이는 각도는 약 0.0227 도가 된다.

따라서 한 팔 거리에서 읽을 때, 1px 은 약 0.28 mm(1/90 인치)에 해당된다. 레저 프린터로 인쇄할 때는, 한 팔 길이보다 약간 작은 길이(55 cm, 21 inches)를 의미하여, 1px은 약 0.21 mm가 된다. 인치당 300 점을 인쇄하는 프린터(300dpi: dots-per-inch)에서는 3 점(dot)들이 조정(round up)될 수 있고, 600 dpi 프린터에서는, 5 점들이 조정될 수 있다.

아래 두 이미지(image)들은 픽셀 크기에 대한 보이는 거리 효과와 장치의 해상도(resolution)의 효과를 설명한다. 첫번째 이미지에서, 읽는 거리 71 cm(28 inch)는 0.28 mm의 px를 만들고, 읽는 거리 3.5 m(12 feet)에서는 1.4 mm의 px가 필요할 것이다.

두번째 이미지에서, 저해상도(low-resolution) 컴퓨터 스크린 장치에서 단일 점(dot)을 차지하는 1px 지역(area)과 같은 지역이 고해상도 장치(400 dpi 레저 프린터와 같은) 16 점(dot)를 차지한다.

자식(child) 엘레멘트들은 그들의 모체에서 지정된 상대값을 전달(inherit)하지 않고 일반적으로 계산된 값을 전달한다.

다음 명령(에서, 만일 H1이 BODY 엘레멘트의 자식이면, H1 엘레멘트의 계산된 'text-indent' 값은 45pt이 아니라 36pt가 된다.

BODY {
  font-size: 12pt;
  text-indent: 3em; /* 말하자면 36pt */
}
H1 { font-size: 15pt }

절대 길이 단위는 출력 메디아의 물리적(physical) 속성을 알 때에 만 유용하다. 절대 단위는:

H1 { margin: 0.5in }  /* inches */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */

지정된 길이가 지원되지 않으면, 사용도구는 실제값에서 대략치를 취해야 한다.

4.3.3 백분율

백분율 값(이 규격에서 <백분율>로 표시)의 양식은 선택적 부호 글자('+' 또는 '-', 디폴트는 '+') 그 바로 뒤를 따라오는 <수치>와 그 바로 뒤의 '%'로 구성된다.

백분율 값은 항상, 예를 들어 길이 등, 다른 값에 상대적이다. 백분율을 허용하는 각 속성은 그 값의 백분율은 무엇을 참조하는가도 정의하였다. 그 값은 같은 엘레멘트의 다른 속성, 조상(ancestor) 엘레멘트의 속성, 또는 양식화 문맥의 값(예: 용기블럭(containing block)의 너비)이 될 수 있다. 백분율 값이 최상위(root) 엘레멘트의 속성을 위하여 설정되었을 때와 백분율이 일부 속성의 전달(inherit)된 값을 조회하게 정의되었을 때, 결과값은 백분율 곱하기 그 속성의 최초값이 된다.

일반적으로 자식(child) 엘레멘트는 그 모체의 계산된 값을 전달(inherit) 받으므로, 다음 예제에서, P 엘레멘트의 자식은 'line-height'가, 백분율 값(120%)이 아니라, 값 12pt를 전달 받을 것이다.

P { font-size: 10pt }
P { line-height: 120% } /* 'font-size'의 120% */

4.3.4 URL + URN = URI

URL(Uniform Resource Locators, [RFC1738]와 [RFC1808] 참조)들은 웹상에서 자원의 주소를 제공한다. URN(Uniform Resource Name)으로 불리우는 자원을 지정하는 새로운 방식이 예상된다. 이들은 합하여 URI(Uniform Resource Identifiers, [URI] 참조)로 불른다. 이 규격은 URI 라는 용어를 사용한다.

이 규격에서 URI 값은 <uri>로 표시하였다. 속성값에서 URI를 지정하는 기능의 표시는 다음과 같이 "url()"로 하였다:

BODY { background: url("http://www.bg.com/pinkish.gif") }

URI 값의 양식은 'url(' 그 뒤 선택적 공백, 그 뒤 선택적 단일 따옴표(') 또는 이중 따옴표("), 그 뒤 URI 자체, 그 뒤 선택적 단일 따옴표(') 또는 이중 따옴표("), 그 다음 선택적 공백, 그 뒤 ')'로 구성된다. 이 두 따옴표들은 짝을 맞추어야 한다.

따옴표 없는 예제:

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

URI 안에 나타나는 괄호, 컴마, 공백 글자, 단일 따옴표(')와 이중 따옴표(")들은 역슬래쉬: '$', '$', '\,'로 에스케입(escape)되어야 한다.

URI의 종류에 따라, 위의 글자들을 [URI]에 기술된 바와 같이 URI-escape(여기서 "(" = %28, ")" = %29, 등)된 것도 가능하다.

자원의 절대적 위치에 영향을 받지 않는 모듈화(modular)된 스타일쉬트을 생성하기 위하여, 제작자들 상대적 URI를 사용할 수 있다. 상대적 URI([RFC1808]에서 정의된 바와 같은)는 기초(base) URI를 사용하여 완전한 URI를 산출할 수 있다. 이 처리의 지명적(normative) 기능이 RFC 1808, 항목 3에 정의되어 있다. CSS 스타일쉬트에서, 기초 URI는, 원문에 대한 것이 아니고, 스타일쉬트에 대한 것이다.

예를 들어, 다음 명령을 가정하자:

BODY { background: url("yellow") }

는 URI가 지정하는 스타일쉬트 안에 위치하고 있다:

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

BODY 원문의 배경은 원문의 URI에 의하여 지정된 것이 어떤 이미지이던 바둑판식으로 배열한다.

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

사용도구는 없거나 적용할 수 없는 자원을 지정하는 URI를 처리하는 방법에서 서로 다를 수 있다.

4.3.5 카운터(counter)

카운터는 인식자(identifier)('counter-increment'와 'counter-reset' 속성들 참조)로 표시된다. 카운터의 값을 참조하기 위하여, 'counter(<identifier>)' 또는 'counter(<identifier>, <list-style-type>)'가 사용된다. 디폴트 스타일은 'decimal'이다.

같은 이름의 네스트(nest)된 카운터들의 순서를 참조하기 위하여, 'counters(<identifier>, <문자열>)' 또는 'counters(<identifier>, <문자열>, <list-style-type>)'로 표시한다. 생성된 내용 장에 있는 "네스트된 카운터와 설명"을 참조하라.

CSS2에서 카운터의 값은 'content' 속성 만을 참조할 수 있다. 'none'도 가능한 <list-style-type>이라는 점을 주시하라; 'counter(x, none)'으로 빈(empty) 문자열을 얻는다.

여기 각 chapter (H1)의 문단 (P)에 번호를 붙이는 스타일쉬트가 있다. 문단들은 로마 숫자로 번호가 붙여지고 그 위에 점과 빈칸이 따라 온다.

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

'counter-reset'의 범위(scope)에 없는 카운터는 최상위(root) 엘레멘트의 'counter-reset'에 의하여 0으로 리세트(reset)된 것으로 가정한다.

4.3.6 색상(color)

키워드(keyword) 목록은 색상의 이름들이다: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 이 16 색상은 번역문 HTML 4 색상에 정의되어 있다. 이 색상 키워드들에 추가하여, 사용자는 사용자 환경에서 어떤 개체(object)에 의하여 사용되는 색상에 해당하는 키워드를 지정할 수 있다. 추가 정보는 시스템 색상 항목을 참고하라.

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) } /* 정수 범위 0 - 255 */
EM { color: rgb(100%, 0%, 0%) }/* 유동(float) 범위 0.0% - 100.0% */

RGB 16진수 값의 양식은 '#' 다음에 나오는 세(3)자리 또는 여섯(6)자리 16진수 글자들로 표시한다. 세(3)자리 RGB 표시(#rgb)는, 0을 추가하는 것이 아니고, 반복에 의하여 여섯(6)자리 양식(#rrggbb)으로 변환된다. 예를 들어, #fb0는 #ffbb00로 확장된다. 이는 흰색(#ffffff)이 짧은 표현(#fff)으로 확실히되고 디스플레이 색상에 관계할 수 있는 요인을 확실히 제거할 수 있다.

기능을 표시하는 RGB 값의 양식은 'rgb(' 다음에 수치값들의 컴마로 분리된 목록(3개의 정수 값들 또는 3개의 백분율 값들), 그 다음 ')'로 구성된다. 정수 값 255 는 100%에 해당되고, 16진수 F 또는 FF: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF 이다. 수치 값 앞, 뒤에 공백 글자가 허용된다.

모든 RGB 색상들은 sRGB 색상 공간([SRGB] 참조)에 지정된다. 사용도구는 이 색상들을 대표하는 주파수(fidelity)에 따라 달라진다. 그러나 sRGB를 사용함은 모호하지 않고, 어떤 색상이어야 하는가를 정의하는데 측정할 수 있는 수단을 제공하여 주며, 이는 국제 표준들([COLORIMETRY] 참조)과도 관계된다.

규격에 부합하는 사용도구는 감마보정(gamma-correction)을 수행하기 위하여 색상 디스플레이를 위한 노력을 감소시킬 수 있다. sRGB는 지정된 보이는 조건하에서 디스플레이 감마를 2.2로 지정한다. 사용도구는 CSS에서 주어진 색상과 출력 장치의 "natural" 디스플레이 감마를 조합하여, 효과적 디스플레이 감마 2.2가 달성 되도록 조정하여야 한다. 상세 정보를 위하여 감마(gamma) 보정 항목을 참조하라. CSS에서 지정된 색상 만이 영향을 받는다는 점을 주시하라; 예: 이미지는 그들 자체의 색상 정보를 갖는다.

그 장치의 지원할 수 있는 값 밖에 있는 것은 잘려져야 한다: red, green, blue 값들은 그 장치에 의하여 지원되는 범위 안에 오도록 변화되어야 한다. 전형적인 모니터(CRT)에서, 그 장치의 gamut는 sRGB와 같고, 아래 세 명령들은 서로 같다:

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에 다른 gamuts를 갖는다; sRGB 범위 0..255 밖의 일부 색상은 (그 장치의 gamut 안에서) 표현할 수 있고, 한편 sRGB 범위 0...255 안의 다른 색상은 그 장치의 gamut 밖이 되고 그러면 잘려 질 것이다.

주석. 색상이 문서에 현저히 많은 정보를 추가하여 제공하고, 더 읽기 쉽게해 주지만, 어떤 색상 조합은 색맹 사용자에게 문제가 될 수 있슴을 고려하라. 배경 이미지를 사용하거나 배경색을 설정한다면, 글자(foreground) 색상을 배경에 맞게 조정하라.

4.3.7 각도(angle)

그들의 양식은 선택적 부호글자('+' 또는 '-', 디폴트는 '+'), 바로 뒤에 나오는 <수치>, 그 바로 뒤 각도 단위 인식자(identifier)로 구성된다.

각도 값은 음수가 될 수 있다. 사용도구에 의하여 범위 0 - 360deg로 정상화 시켜야 한다. 예를 들어, -10deg와 350deg는 같다.

예를 들어, 직각은 '90deg', '100grad' 또는 '1.570796326794897rad'이다.

4.3.8 시간(time)

그들의 양식은 <수치>, 그 바로 뒤의 시간 단위 인식자(identifier)로 구성된다.

4.3.9 주파수(frequency)

그들의 양식은 <수치>, 그 바로 다음의 주파수 단위 인식자(identifier)로 구성된다.

예를 들어, 200Hz(또는 200hz)은 저음(bass) 소리이고. 6kHz (또는 6khz)은 고음(treble) 소리이다.

4.3.10 문자열

문자열은 이중 따옴표 또는 단일 따옴표들와 함께 쓰여 질 수 있다. 이중 따옴표는, 에스케입(escape: '\"' 또는 '\22'로)되지 않는 한, 다른 이중 따옴표 안에 올 수 없다. 단일 따옴표에서도 동일하다("\'" 또는 "\27").

"이는 '문자열'이다."
"이는 \"string\"이다."
'이는 "string"이다.'
'이는 \'string\'이다.'

한 문자열은 직접적으로 새줄(newline)을 포함할 수 없다. 문자열에 새줄을 포함시키려면, 에스케입(escape) "\A"(16진수 A는 유니코드에서 새로운 줄을 공급하는 글자이나, CSS에서 원래의 표현 "newline")를 사용하여야 한다. 예를 들어 'content' 속성을 참조하라.

여러 줄에 걸처 문자열을 줄바꿈(break)하는 것이 가능하다 그러나 이런 경우 새줄 자체가 역슬래쉬(\)와 함께 에스케입(escape)되어야 한다. 예를 들어, 다음 두 선택자(selector)는 꼭 같다:

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

4.4 CSS 문서의 대표(representation)

CSS 스타일쉬트는 공통 글자 세트(Universal Character Set: [ISO10646] 참조)로 부터의 글자들의 연속(sequence)이다. 송신하고 저장하기 위하여, 이들 글자들은, 지원되는 US-ASCII(예: ISO 8859-x, SHIFT JIS, 등)에 있는 글자세트로, 글자 엔코딩에 의하여 엔코드(encode)되어야 한다. 글자세트(character set) 글자 엔코딩 내용은 번역문 HTML 4 규격, 번역문 항목 5를 참고하라. 또한 XML 1.0 규격([XML10], 항목 2.2, 4.3.3과 부록 F도 참조하라.

스타일쉬트가 HTML의 STYLE 엘레멘트 또는 "style" 애트리뷰트(attribute)와 같은 다른 문서 안에 깔려(embed) 있으면, 그 스타일쉬트는 전체 문서의 글자엔코딩을 같이 사용한다.

스타일쉬트가 별도의 화일에 있으면, 사용도구는, 문서의 글자 엔코딩을 결정하는데, 다음 우선순위를 따라야 한다(높은 우선순위에서 낮은 우선순위로):

@charset 명령은 외부(external) 스타일쉬트 안에 최대로 하나 만 나타날 수 있고, 문서의 다른 어떤 글자들보다 맨 먼저 나와야한다. 이는 깔려 있는 스타일쉬트에는 나타나서는 안된다. "@charset" 다음에, 제작자들은 글자 엔코딩의 이름을 명시한다. 그 이름은 IANA 등록(registry: [IANA])의 글자세트 이름이어야 한다. 글자세트의 완전한 목록을 보기 위해서는 [CHARSETS]를 참조하라. 예제:

이 규격은 사용도구가 어떤 글자엔코딩을 지원해야 하는가를 강요하지 않는다.

@charset에 의존하는 것은, 어떻게 엔코드되는가 하는 우선지정 정보가 없으므로, 이론적으로 문제를 수반한다는 점을 주시하라. 그러나 실제적으로는, 인터넷 상에서, ASCII, UTF-16, UCS-4, 또는 드믈게 EBCDIC에 기초하여, 엔코딩이 널리 사용된다. 이는, 일반적으로, 문서의 최초(initial) 바이트(byte) 값이, 사용도구로 하여금 사용할 수 있는 엔코딩 종류(encoding family)를 감지하게 하고, @charset 명령을 디코딩(decode)하기에 충분한 정보를 제공하여, 역으로 정확한 글자 엔코딩을 결정할 수 있게 한다는 것을 의미한다.

4.4.1 글자 엔코딩에 없는 글자들 참조

스타일쉬트는 현재의 글자 엔코딩(character encoding)에 없는 참조 글자를 해야 만하게 될 수 있다. 이 ISO 10646 글자들을 참조한 에스케입(escape)된 글자로 써져야 한다. 이 에스케입(escape)들은 HTML에서나 또는 XML 문서에서 수치 글자를 참조하는 같은 목적으로 사용된다(번역문 HTML 4, 번역문 항목 5와 24 참조).

글자 에스케입(escape) 기능은 소수의 글자 만을 이 방식으로 표현해야 할 때 사용되어야 한다. 만일 문서의 대부분이 에스케입(escape)을 필요로 한다면, 제작자들은 보다 적절한 엔코딩 방식으로 엔코딩하여야 한다(예: 만일 문서가 많은 그리스(Greek) 글자들을 포함하고 있다면, 제작자들은 "ISO-8859-7" 또는 "UTF-8"를 사용할 수 있을 것이다).

다른 글자 엔코딩에 사용되는 중간 프로세서(processor)들이 이 엔코딩의 에스케입(escape)된 순서를 바이트(byte) 순서로 번역할 수 있을 것이다. 이와는 달리, 중간 프로세서들이, ASCII 글자의 특수한 의미를 무효화시키는, 에스케입된 순서로 수정하지 말아야 한다.

규격에 부합하는 사용도구는, 그들이 인식하는 어떤 글자 엔코딩에서, 모든 글자들을 유니코드(Unicode)로 올바르게 일치시켜야 한다(또는 그들이 그렇게 한 것처럼 작용하여야 한다).

예를 들어, ISO-8859-1 (Latin-1)으로 송신된 문서는 그리스(Greek) 글자를 직접적으로는 포함할 수 없다: "κουρος"(Greek: "kouros")는 "\3BA\3BF\3C5\3C1\3BF\3C2"로 써야 한다.

주석. HTML 4에서, 수치 글자 참조는 번역문 "style" 애트리뷰트 값으로 해석되지 만, STYLE 엘레멘트의 내용에서는 그렇지 않다. 이 때문에, 제작자들은, "style" 애트리뷰트(attribute)와 STYLE 엘레멘트 양쪽에서 수치 글자 참조 하는 것보다는, CSS 글자 에스케입(escape) 기능을 사용하도록 권한다.

목차

4.1 문법

4.1.1 토큰화