W3C부록 D. CSS2의 문법Trio 홈페이지 

목차

이 부록은 지명적이다.

아래 문법은 CSS2의 문법을 정의한다. 그러나, 어떤 의미에서는 이는 이 규격의 추가적인 문맥적인 제한이 이 문법에는 표시되지 않은 CSS2의 상위 세트(superset)이다. 규격에 부합하는 사용도구는 향후 버전에 부합한 명령 해석(parsing), 속성과 값 표기와 단위(unit) 표기(notation)도 준수하여야 한다. 예를 들어 "class" 애트리뷰트(attribute)의 가능한 값들에 대한 제한과 같은, 추가적으로 문서언어의 제한이 가해 질 수 있다

D.1 문법

아래 문법은 LL(1)이다. 그러나, 이는 CSS2 문법 일 뿐이며, 해석(parsing) 목적으로 표현된 것이 아니므로, 대부분 사용도구들은 직접적으로 사용하지 말아야 한다는 점에 유의하라. 이 양식은 인간의 사용에 적합하게 만들어 졌으며, 일부 약식 명령 표기는 Yacc([YACC] 참조) 범위 밖이다:

결과물들은:

stylesheet
  : [ CHARSET_SYM S* STRING S* ';' ]?
    [S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
    [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
  ;
media
  : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* IDENT? pseudo_page? S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
pseudo_page
  : ':' IDENT
  ;
font_face
  : FONT_FACE_SYM S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
operator
  : '/' S* | ',' S* | /* empty */
  ;
combinator
  : '+' S* | '>' S* | /* empty */
  ;
unary_operator
  : '-' | '+'
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator simple_selector ]*
  ;
simple_selector
  : element_name? [ HASH | class | attrib | pseudo ]* S*
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
  ;
declaration
  : property ':' S* expr prio?
    | /* empty */
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator term ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
    TIME S* | FREQ S* | function ]
    | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/* color는 다음 제한을 갖는다.
  * 3 개 또는 6 개의 16진수(0-9a-fA-F)를 가짐.

 "#" 다음에; 예 "#000"는 되나 "#abcd"는 안됨. */
hexcolor
  : HASH S*
  ;

D.2 Lexical scanner

다음은 훌렉스(Flex) 표기([FLEX] 참조)로 쓰여진 토큰화(tokenizer)이다. 이 토큰화는 대소문자를 구별한다.

두 번의 "\377"는 현재 Flex 버전의 취급할 수 있는 가장 높은 글자 번호를 나타낸다(십진수 255). 이는 유니코드(Unicode: /ISO-10646)에서 가능한 가장 높은 코드 포인트인 "\4177777"(십진수 1114111)로 읽혀져야 한다.

%option case-insensitive

h  [0-9a-f]
nonascii  [\200-\377]
unicode  \\{h}{1,6}[ \t\r\n\f]?
escape {unicode}|\\[ -~\200-\377]
nmstart  [a-z]|{nonascii}|{escape}
nmchar  [a-z0-9-]|{nonascii}|{escape}
string1  \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2  \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident {nmstart}{nmchar}*
name {nmchar}+
num  [0-9]+|[0-9]*"."[0-9]+
string {string1}|{string2}
url  ([!#$%&*-~]|{nonascii}|{escape})*
w  [ \t\r\n\f]*
nl  \n|\r\n|\r|\f
range  \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))

%%

[ \t\r\n\f]+ {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/ /* 주석 무시 ignore comments */

"<!--" {return CDO;}
"-->" {return CDC;}
"~=" {return INCLUDES;}
"|=" {return DASHMATCH;}

{string} {return STRING;}

{ident} {return IDENT;}

"#"{name} {return HASH;}

"@import" {return IMPORT_SYM;}
"@page" {return PAGE_SYM;}
"@media" {return MEDIA_SYM;}
"@font-face" {return FONT_FACE_SYM;}
"@charset" {return CHARSET_SYM;}
"@"{ident} {return ATKEYWORD;}

"!{w}important" {return IMPORTANT_SYM;}

{num}em {return EMS;}
{num}ex {return EXS;}
{num}px {return LENGTH;}
{num}cm {return LENGTH;}
{num}mm {return LENGTH;}
{num}in {return LENGTH;}
{num}pt {return LENGTH;}
{num}pc {return LENGTH;}
{num}deg {return ANGLE;}
{num}rad {return ANGLE;}
{num}grad {return ANGLE;}
{num}ms {return TIME;}
{num}s {return TIME;}
{num}Hz {return FREQ;}
{num}kHz {return FREQ;}
{num}{ident} {return DIMEN;}
{num}% {return PERCENTAGE;}
{num} {return NUMBER;}

"url("{w}{string}{w}")" {return URI;}
"url("{w}{url}{w}")" {return URI;}
{ident}"(" {return FUNCTION;}

U\+{range} {return UNICODERANGE;}
U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;}

. {return *yytext;}

D.3 CSS2와 CSS1에서 토큰화 비교

번역문 CSS1 추천안과 위에 제시된 문법에는 일부 차이들이 있다. 이들 대부분은 CSS1에는 없었던 CSS2의 새로운 토큰(token)들에 기인한 것이다. 다른 것들은 문법이 더 읽기 쉽게 다시 쓰여졌기 때문이다. 그러나, 일부 서로 통하지 않는(incompatible) 변경들이 있는데, 이들은 CSS1 문법에서 오류로 느껴졌었다. 이들을 아래에 설명한다.


페이지 맨위로맨위Trio 홈페이지 문서()는 자유로이 연결 사용이 가능함.
(수정일 )