CSS2 CSS 문법 분석

2010년도에 회사업무로 CSS 컴파일러 개발을 수행한 적이 있었는데 이때 분석한 내용이다

1. 기본구조

selector { property : value; }  ->  선택자 { 속성 : 값; }

2. selector ( http://css.maxdesign.com.au/selectutorial/ 참조)

1) 클래스 선택자 (Class Selectors) : .class선택자가 선언된 모든 태그에 대하여 style을 적용한다.

.big { font-size: 110%; font-weight: bold; }

div.big { color: blue; }

td.big { color: yellow; }

label.big { color: green; }

form.big { color: red; }

2) 아이디 선택자 (Id Selectors) : 해당되는 아이디에 해당되는 태그에만 style을 적용한다.

#navigation { width: 12em; color: #333; }

div#navigation { width: 12em; color: #333; }

3) 의사클래스 (Pseudo Classes) :

a:visited {}

a:hover {} 

a:link, a:visited { color: blue; }

a:hover, a:active { color: red; }

4) 문맥선택자 (Descendant Selectors) : 

UL OL EM { color : gray; }

예제와 같은 경우 <UL><OL><EM></EM></OL></UL>의 형태에 대해서만

color:gray선언이 적용된다.

5) 자식선택자 (Child Selectors)

div > em { color: blue; }

OR

div>em { color: blue; }

6) 타입 선택자 (Type Selectors) : 기본형

em {color: blue; }

7) 전체 선택자 (Universal Selectors) : 모든 타입에 대하여 적용한다.

* {color: blue; }

3. declaration

property:value 구문의 끝에는 항상 세미콜론(;) 으로 종결한다.

4. 주석문 (무조건 무시한다)

/*     */ 형태

5. 파싱 방식

1) 선택자에 따른 자식노드 검색

2) 기본구조에서 selector 와 declaration 을 분리

3) 선택자의 타입과 구조에 따라 Page 내의 element 트리를 검색

4) 최종적으로 검색 결과에 대응하는 element 에 declaration 을 적용