1. 기본구조 : selector { property : value; } -> 선택자 { 속성 : 값; }
2. selectors ( 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) : 기본형 - 이것은 XAE에서 기본 정의되는 엘리먼트 Type에
해당할 것이다.
em {color: blue; }
7) 전체 선택자 (Universal Selectors) : 모든 타입에 대하여 적용한다.
* {color: blue; }
3. declaration
property:value 구문의 끝에는 항상 세미콜론(;) 으로 종결한다.
4. 주석문 (무조건 무시한다)
- /* */ 형태
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 9 | 글자, 문자, 텍스트, 글꼴, 서체, 폰트와 관련한 속성들 / font-size , 크기 단위(em, px, pt, rem), 절대 단위, 상대 단위 | 황제낙엽 | 2018.04.18 | 842 |
| 8 | 모든 브라우저에서 동작하는 opacity 설정 코드 | 황제낙엽 | 2013.02.14 | 649 |
| 7 | DXImageTransform.Microsoft.AlphaImageLoader 와 file dialog | 황제낙엽 | 2013.01.28 | 715 |
| 6 | Gradient 와 Background-Image 동시 적용 방안 | 황제낙엽 | 2013.01.11 | 693 |
| 5 |
그라디언트와 다중 배경 (gradient)
| 황제낙엽 | 2013.01.11 | 669 |
| 4 |
CSS Gradient Background Maker
| 황제낙엽 | 2013.01.11 | 577 |
| 3 | Radius, Gradient, Padding | 황제낙엽 | 2013.01.11 | 676 |
| 2 | 스타일-보더 테스트 관련 레퍼런스 | 황제낙엽 | 2013.01.04 | 797 |
| » | Style 의 선택자 종류 (CSS 정보) | 황제낙엽 | 2009.06.25 | 604 |