사이드바 영역으로 건너뛰기

[CSS]2. 셀렉터(Selector)

 

 

2. 셀렉터(Selector)

2.1. Type Selector

2.2. Group Selector

2.3. Class attribute selector
2.4. ID Attribute Selector
2.5. Contextual selectors
2.6. Pseudo-Elements and Pseudo-Classes
2.6.1. Anchor Pseudo-Classes : :link, :visited, :active



2. 셀렉터(Selector)

2.1. Type Selector
Type selector는 HTML 요소를 selector로 사용하는 것이다. HTML에서는 selector를 쓸 때 대소문자를 구분하지 않는다.

  H1 { font-family: Helvetica }

2.2. Group Selector
여러 개의 selector가 같은 속성을 사용할 때는 하나로 묶어서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.

  H1 { font-family: Helvetica }
H2 { font-family: Helvetica }
H3 { font-family: Helvetica }

  H1, H2, H3 { font-family: Helvetica }

하나의 selector가 여러 개의 속성을 사용할 때는 속성들 사이에 세미콜론(;)을 써서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.

  H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

  H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; }

어떤 속성은 shorthand property라고 부르는 대표속성을 가지고 있어서, 위의 H1에 대한 예는 아래와 같이 더 간단하게 만들 수 있다.

  H1 { font : bold 12pt/14pt Helvetica }

2.3. Class attribute selector
Class 속성을 이용하면 여러 개의 요소를 그룹으로 묶어서 같은 스타일을 적용할 수 있다. Class attribute selector를 쓸 때는 아래의 예와 같이 마침표(.)를 사용한다.

  .pastoral { color : green } /* class=pastoral 속성이 들어간 모든 요소에 적용 */
H1.red { color : red } /* class=red 속성이 들어간 H1 요소에 적용*/
...
...
녹색으로 나오겠지...


여기도 녹색으로 나오겠지...

여기는 빨간색으로 나오겠지...


여기는 검은색일꺼야.


 

2.4. ID Attribute Selector
Id 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다르다. Id attribute selector를 쓸 때는 #표시를 사용한다. Id 속성을 쓰면 하이퍼링크의 대상이 될 수 있다는 점을 기억하자.

  H1#z98y { letter-spacing: 0.5em }
...
...

Wide text


 

2.5. Contextual selectors
"H1 안에 들어있는 EM 요소에만 파란색 글자를 주고 싶다"와 같이 특정 요소에 포함된 요소에만 스타일을 적용시키고자 할 때 contextual selector를 사용한다. 요소와 요소 사이읏?빈칸을 주고 나란히 써 주면 된다. Class나 id와 함께 사용할 수도 있다.

  H1 EM { color : blue }
...
...

여기는 검은색


여기도 검은색

여기는 검다가 여기는 푸른색 다시 검은색


 

2.6. Pseudo-Elements and Pseudo-Classes
거짓 요소와 class는 보다 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는 요소를 만들어 낸 것을 말한다. First-line pseudo-요소와 First-letter pseudo-요소 역시 제공된다고 하나 실제로 는 제대로 구현되지 않으므로 우리는 Anchor pseudo-classes에 대해서만 알아보도록 하자.

2.6.1. Anchor Pseudo-Classes : :link, :visited, :active
링크의 색이나 밑줄 등을 바꿀 때 사용한다. :link는 한 번도 클릭하지 않은 링크, :visited는 가본 적이 있는 링크, :active는 클릭하는 순간의 링크를 말한다.

 

Title



진보네트워크


 

A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고, a.link나 a#link와 같이 link, active, visited를 클래스나 id로 사용할 수도 있다.


진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크