sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
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 을 적용
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
12 | Style cssText Property | 황제낙엽 | 2012.09.13 | 321 |
11 | 브라우저별 border 설정에 따른 디자인 테스트 고려사항 | 황제낙엽 | 2012.08.28 | 97 |
» | CSS 문법 분석 | 황제낙엽 | 2012.08.28 | 105 |
9 | Element 의 투명도 | 황제낙엽 | 2012.05.25 | 180 |
8 | IE Conditional Comments 필터링 | 황제낙엽 | 2011.10.05 | 144 |
7 | How To Create an IE-Only Stylesheet | 황제낙엽 | 2011.10.05 | 148 |
6 |
Document documentMode Property
![]() | 황제낙엽 | 2011.10.04 | 982 |
5 |
(CSS2) RGBA값 사용해보기 및 IE 패치 방법
![]() | 황제낙엽 | 2011.10.04 | 203 |
4 | Style overflow Property | 황제낙엽 | 2011.06.27 | 206 |
3 |
pt, px, em, % 비교표
![]() | 황제낙엽 | 2011.05.24 | 789 |
2 | 박스(box) 모델 | 황제낙엽 | 2009.06.27 | 273 |
1 | Element 의 visibility스타일과 display스타일 | 황제낙엽 | 2008.09.24 | 95 |