실전 웹 표준 가이드 : CSS 선택자

누리 디자인 CSS 가이드 라인 (NHN) : http://html.nhndesign.com/guidelines/css/

 

1. CSS(Cascading Style Sheet)?
CSS는 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해 사용하는 language이다.

 

1) CSS의 선언
CSS의 선언은 selector와 선언부로 이루어져 있다.
p.text { margin: 0 ; }  CSS 구문에서 p.text가 selector이고 {}안의 내용이 선언부이다.
selector에 해당하는 HTML엘리먼트에 선언부에 명시된 것 과 같은 스타일을 적용하라는 의미로 해석된다.

selector는 ,(comma)를 이용하여 구분할 수 있다.

p.text, span.name { color: #666; } CSS 구문을 해석하면 "text"라는 class를 갖는 <p> 엘리먼트와  "name"이라는 class를 갖는 <span> 엘리먼트는 둘다 폰트의 색이 rgb #666666으로 나타나게 된다.

동일한 selector에 서로 다른 선언들이 있을 경우 이를 하나의 selector에 ;(semi-colon)으로 구분하여 선언할 수 있다.
h1 { font-weight: bold; font-size: 3em; color: #333; }

1.1 CSS Selector
CSS selector를 잘 알고 능숙하게 사용하게 되면 보다 구조화된 문서를 제작하는 것에 도움을 주게 된다.

 

1) 일반 선택자
일반 선택자는 네 가지 종류가 있다.
- 공용 선택자(*) : 모든 태그를 지정
- 타입 선택자(A) : 태그 A를 지정
- 클래스 선택자(.A) : 클래스가 A인 태그를 지정
- ID 선택자(#A) : 아이디가 A인 태그를 지정

 

사용 예)
- 공용 선택자 : 모든 엘리먼트를 선택한다.

* {
margin: 0;
padding: 0;
}

이와 같은 선언을 할 경우 페이지 내의 기본 마진과 패딩을 갖고 있는 모든 엘리먼트들의 여백이 없어지게 된다.

div.search * {
vertical-align: middle
}

이 경우 div.search 안의 모든 엘리먼트가 세로로 가운데 정렬이 되게 된다.

 

- 타입 선택자 : 특정 엘리먼트를 선택한다.

body {
margin: 0;
}

이 경우 body 엘리먼트를, div를 선택할 경우 div 엘리먼트를 선택하게 된다.

- 클래스 선택자 : 선언된 클래스를 사용하는 엘리먼트를 선택한다.
한 페이지에서 여러번 사용할 수 있기 때문에 반복적으로 여러번 나오는 스타일의 경우 class를 지정해서 정의하여 사용하게 된다.

.wrapper {
margin: 0;
}

- ID 선택자
선언된 ID를 사용하는 엘리먼트를 선택하게 된다.
ID 선언은 한 페이지에서 unique 해야 한다.

#content_view {
margin: 0;
}

 

2) 복합 선택자
복합 선택자는 세 가지 종류가 있다.
- 하위 선택자(A B) : 태그 A로 감싸져 있는 태그 B를 지정
- 자식 선택자(A>B) : 태그 A로 감싸져 있는 태그 B중 한단계 밑에 것을 지정
- 인접 선택자(A+B) : 태그 A와 B가 연속으로 나와 있는 것을 지정

 

사용 예)
- 하위 선택자 : 선택한 엘리먼트의 하위에 있는 엘리먼트들을 선택한다.
보통 ID 선택자와 함께 사용하여 중복선언을 피하고자 할때 많이 사용한다.
불필요하게 class를 많이 적어주지 않아도 많은 하위 엘리먼트를 한번에 선택할 수 있기 때문에 유용하고 많이 사용한다.

<ul id="list">
<li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
<li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
...
...
<li>
</ul>

 

위와 같은 코드에서 a엘리먼트에 스타일을 적용하고자 할 때, 아래와 같이 사용할 수 있다.

 

ul#list a:link,
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}

- 자식 선택자 : 엘리먼트의 자식 엘리먼트를 선택한다.
하위 선택자와는 달리 바로 하위에 있는 자식 엘리먼트만을 선택한다.
중첩된 태그를 사용할 때 유용하게 사용가능 하다.

 

<ul class=depth1">
 <li>
  <a href=".."></a>
  <ul class="depth2">
   <li>
    ...
   </li>
  </ul>
 </li>
</ul>

 

위와 같은 코드에서 depth1에 li에만 스타일을 적용하고 싶은 경우, 아래와 같이 사용할 수 있다.

 

ul.depth1>li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}

 

- 인접 선택자 : 2개의 엘리먼트가 서로 근접해 있는 형제관계일 경우를 선택한다.
제목 바로 아래의 문단에만 특정 스타일을 적용하는 경우와 같이 다른 엘리먼트가 디자인적으로 영향을 미칠 때에 유용하게 사용할 수 있다.

 

<h2>제목</h2>
<p>문서의 시작... </p>
<h2>제목2</h2>
<p>두번째 시작...</p>

 

제목 바로 다음에 나오는 문단의 첫글자를 크게 나타내고자 할 경우, 아래와 같이 사용할 수 있다.

 

h2+p:first-letter {
float: left;
font-size: 2.2em;
}

 

3) 가상 클래스 선택자, 동적선택자

참고 : http://www.clearboth.org/css3_1_by_isdn386/