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 을 적용
