Trio 홈페이지 - 부록 D: CSS2의 문법

부록 D. CSS2의 문법

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

D.1 문법

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

*: 0 이상
+: 1 이상
?: 0 또는 1
|: 대체(alternative)들의 구분, 선택적 사용이 가능
[ ]: 구룹 짓기(grouping)

결과물들은:

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 문법에서 오류로 느껴졌었다. 이들을 아래에 설명한다.

CSS1 스타일쉬트들은 ASCII와 ISO-8859-1에서와 같이 한 바이트를 한 글자로 만 엔코딩할 수 있었다. CSS2에서는 이와 같은 제한이 없어졌다. 실제로, CSS1 토큰화(tokenizer)로 표현하는데는 어럽지 않아, 일부 사용도구들은 2 바이트 엔코딩을 수용하였었다.
CSS1은 유니코드(Unicode) 글자들을 참조하는 역슬래쉬(\) 다음에 네 개의 16진수 만을 허용하였었으나, CSS2 에서는 여섯개를 허용하였다. 더더욱, CSS2에서는 에스케입(escape) 과정을 한정하기 위하여 공백 글자를 허용하였다. 예: CSS1에서, 문자열 "\abcdef"는 세개(\abcd, e 와 f)의 글자들을 갖는데, CSS2에서는 한 글자(\abcdef) 만을 갖는다.
탭(tab) 글자(ASCII 9)는 문자열 안에서 허용되지 않았었다. 그러나, CSS1에서 문자열은 글꼴 이름에서와 URL을 위해서 만 사용되었으므로, 스타일쉬트가 그 이름 안에 탭을 가지는 글꼴 이름을 가질 때 만 CSS1과 CSS2사이에 공통으로 사용될 수 없다.
이와 비슷하게, 새줄(newline: 역 슬래쉬(\)로 에스케입)이 CSS1 문자열에서는 허용되지 않았었다.
CSS2는 인식자(identifier) 바로 뒤에 오는 수치를 DIMEN(알지 못하는 단위) 토큰(token)으로 해석(parse)하지 만, CSS1는 수치와 인식자로 해석 했었다. 이는 CSS1에서 선언 'font: 10pt/1.2serif'는 'font: 10pt/12pt serif'에서와 같이 맞는 것이었으나, CSS2에서는 "serif 앞에 빈칸이 필요하다(일부 사용도구들은 첫번째 예제를 수용하나 두번째는 수용하지 않는다.)
CSS1에서, 글라스(class) 이름이, 단위(".55in")가 아닌 한, 숫자(digit: ".55ft")로 시작될 수 있었다. CSS2에서는 이와 같은 클라스들은 알지 못하는 규격으로 해석된다(향후에는 새로운 단위들의 추가가 허용). ".55ft"를 유효한 클라스로 하기 위해서 CSS2는 첫번째 수치(digit)를 에스케입(".\55ft")된 것이 필요하다.

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

목차

D.1 문법

D.2 Lexical scanner

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