CSS 선택자의 이용

CSS 작업 방법 중 제일 먼저 해야 할 일은 jQuery의 Selector 처럼 선택자의 활용 이다.

1. 공통 선택하기

* 는 모든 HTML 태그에 대한 속성 선택

* { color: green; }

2. 태그 선택하기

div, p, h1, h2, h3, h4, h5, h6, span ... 여러가지 태그에 대한 속성 선택

div { color: green; border: 1px solid blue; }

3. 자식 태그 선택 하기

div 태그에 하위로 p 태그 선택

<div>

<p>이 부분이 선택 된다.</p>

</div>

div > p { color: green; }

4. ID 선택 하기

첫 번째로 ID만 선택 하는 방법이 있다. #header 이고, 활용 하자면 div 태그이며 ID가 header를 찾는 경우 div#header 로 좀더 정교하게 이용 할 수 있다.

<div id=header>

header

</div>

#header { border: 1px solid blue; height: 100px; width: 100% }

div#header { border: 1px solid blue; height: 100px; width: 100% }

5. Class 선택 하기

위의 방법 ID는 한 페이지에 한번 밖에 이용하지 못하고 개발자들이 자바스크립트로 작업을 할 때 ID를 많이 이용하기 때문에 최소한의 ID만 사용하고 Class로 작업하며, 하나의 영역 Div에서 자식태그로 접근 하는 방식을 많이 활용 해야 한다.

Class는 .area 이와 같은 방법으로 접근 할 수 있다. 좀 더 활용 하자면 div 태그이며 class가 header를 찾는 경우 div.area 로 이용 할 수 있다.

<div class="area">

area

</div>

.area { color: green; }

div.area { color: green; }

간단하게 대표적인 선택 방법을 알아 보았다.