CSS 기본
zbum
I. 서론
웹표준에 입각한 웹페이지를 구성하는데 있어 구조-형식-동작의 분리는 필수적인 요소이다. 지금껏 웹페이지의 디자인을 위해 아무렇게나 써왔던 TABLE Layout, 형식을 위한 tag들을 사용하지 않기위하여 CSS에 대한 깊은 이해는 필수적이다.
CSS는 Selector와 Definition으로 구성되어 있으며 Selector을 이해한다면 CSS의 70% 이상을 이해한 것일 할 수 있다. 나머지 Definition은 레퍼런스를 이용하여 계속 참조해 나가야 할 부분이다. 그럼 이제부터 CSS Selector에 대해서 공부해 보자.
II. 본론
1) CSS 의 구성
CSS는 선택자(Selector)와 선언부로 이루어져 있다. 선언부는 속성과 값으로 구성되어 있다.
2) CSS 선택자와 HTML 엘리먼트
CSS의 Selector는 웹페이지의 Document상에서 CSS 속성을 적용할 HTML ELEMENT를 선택(특정,Targeting)하기위한 CSS구성요소 이다.
CSS Selector의 역할은 아래 그림을 보면 명확히 알 수 있다. 즉, xxx.css에서 p라는 selector를 사용하면 그 CSS를 적용한 HTML문서의 모든 p tag에 해당 속성이 적용된다. 아래 그림처럼 <p>가나다라마</p> 는 볼드체에 파란색 글씨로 보일 것이다.
3) CSS 선택자의 종류
위의 예와 같이 HTML 의 엘리먼트를 선택하는 선택자 뿐만아니라 다양한 형태의 CSS Selector가 존재한다. 아래는 CSS2기준의 Selector이다.
| 구분 | 패턴 | 대상 | 비고 |
|---|---|---|---|
| universal selector | * | Document 상의 모든 HTML Element를 선택 | |
| Element type Selectors | E | Dcouement 상의 모든 E 엘리먼트 타입을 선택 | |
| Descendant Selectors | E F | E의 하위도드중 F 타입을 선택 | |
| Child Selectors | E > F | E의 자식 노드 중 F 타입을 선택 | |
| Class Selector | .aaa | class 속성이 aaa 인 HTML 엘리먼트 선택 | |
| ID Selector | #bbb | id 속성이 bbb인 HTML 엘리먼트 선택 | |
| Pseudo-element Selector | E:first-child | ||
| Pseudo-class | E:active, E:hover, E:focus |
특정 조건하의 모든 엘리먼트를 선택 | |
| Adjacent Selector | E+F | E엘리먼트 다음에 바로 F엘리먼트가 이어지면 선택 엘리먼트간 간격 조정등에 유용 | IE8에서 지원 |
| Attribute Selectors | E[foo], foo 속성값이 지정된 E엘리먼트 선택 E[foo=“warning”], foo 속성값이 warning인 E엘리먼트 E[foo~=“warning”] foo 속성값에 단어 warning 이 포함된 E엘리먼트 E[lang|=“en”] lang 속성값에 ‘-’으로 구분된 en값이 포함된 E엘리먼트 |
lang=“en-uk” lang=“en-us” |
III. 결론
CSS의 Selector에 대해서 살펴보았다.
다음엔 CSS를 이용한 웹페이지 Layout에 대해서 살펴 보겠다.
이 글은 스프링노트에서 작성되었습니다.
댓글