CSS 작업 방법 중 제일 먼저 해야 할 일은 jQuery의 Selector 처럼 선택자의 활용 이다.
1. 공통 선택하기
* 는 모든 HTML 태그에 대한 속성 선택
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; }
간단하게 대표적인 선택 방법을 알아 보았다.