HTML + CSS 마크업 (3) 자주 사용되는 CSS 선택자 12종

 

시작하기에 앞서

 

코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고

 

요점을 적어두고 다시 활용하기 위한 글입니다.

 

1. *

1 2 3 4

* {  margin: 0;  padding: 0; }

고급 선택자로 이동하기 전에 초보자를 위해 쉬운 선택자부터 알아보죠.

별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding 값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괜찮습니다. 그러나, 저는 여러분에게 이 별표를 실전에서 사용하지 말라고 권합니다. 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않습니다.

*를 자식 선택자에도 사용할 수 있습니다.

1 2 3

#container * {  border: 1px solid black; }

이 코드는 #container div의 자식 요소 전체를 대상으로 합니다. 한 번 더 말하지만, 이 선택자를 과다하게 사용하지 마세요.

 

2. #X

1 2 3 4

#container {    width: 960px;    margin: auto; }

선택자 앞에 해시(#) 기호를 붙여서 id를 대상으로 삼습니다. 가장 흔하고 쉽게 사용됩니다. 하지만, id 선택자를 사용할 때는 조심스러워야 합니다.

자문해 보세요. 이 요소를 대상으로 하기 위해 id를 필히 적용해야 할까요?

id 선택자는 유연성이 없고 재활용할 수 없습니다. 가능한 처음에 태그 명이나 새로운 HTML 요소 중 하나, 아니면 가상 클래스라도 적어 보세요.

 

3. .X

1 2 3

.error {   color: red; }

class 선택자입니다. id와 class의 차이점이라면, 후자는 여러 개의 요소를 대상으로 정할 수 있습니다. 스타일을 한 그룹의 요소에 적용할 때는 class를 사용하세요. 찾을 가망성이 거의 없는 요소에 id를 사용하고 그 유일한 요소에만 스타일을 적용하세요.

 

4. X Y

1 2 3

li a {   text-decoration: none; }

다음으로 가장 많이 언급하는 선택자는 descendant입니다. 선택자를 이용해 더 상세히 작업해야 할 때, 이 선택자를 사용합니다. 가령, 전체 앵커 태그를 대상으로 하기보다 순서를 매기지 않는 목록(unordered list)에 있는 앵커만 대상으로 한다면 어떨까요? 하위 선택자를 사용하면 상세해집니다.

꿀팁 - 선택자가 X Y Z A B.error처럼 보이면 여러분은 작업을 잘못하고 있습니다. 모든 요소에 꼭 가중치를 둬야 하는지를 늘 자문하세요.

 

5. X

1 2	a { color: red; } ul { margin-left: 0; }

만일 여러분이 id나 class가 아닌 type에 따라 한 페이지에 있는 모든 요소를 대상으로 삼고 싶다면 어떨까요? 간단히 type 선택자를 이용하세요. 순서가 정해지지 않은 목록 전부를 대상으로 해야 한다면 ul {}를 쓰세요.

 

6. X:visited와 X:link

1 2	a:link { color: red; } a:visted { color: purple; }

클릭하기 전 상태의 앵커 태그 전체를 대상으로 하려고 :link 가상 클래스를 사용합니다.

:visited 가상 클래스로 하기도 합니다. 예상하듯이 이는 클릭했었거나 방문했던 페이지에 있는 앵커 태그에만 특정한 스타일을 적용할 수 있습니다.

 

7. X + Y

1 2 3

ul + p {    color: red; }

인접 선택자로 부르는 선택자입니다. 앞의 요소 바로 뒤에 있는 요소만 선택합니다. 위 코드에서 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 됩니다.

 

8. X > Y

1 2 3

div#container > ul {   border: 1px solid black; }

일반 X Y와 X > Y의 차이점은 후자가 직계 자식만을 선택한다는 것입니다. 가령, 아래 마크업을 생각해 보세요.

01 02 03 04 05 06 07 08 09 10 11 12

<div id="container">    <ul>       <li> List Item         <ul>            <li> Child </li>         </ul>       </li>       <li> List Item </li>       <li> List Item </li>       <li> List Item </li>    </ul> </div>

#container > ul 선택자는 id가 container인 div의 직계 자손인 ul만 대상으로 삼습니다. 예를 들어 첫 번째 li의 자식인 ul은 대상이 되지 않습니다.

이런 이유로 자식 선택자를 이용해 성능을 향상할 수 있습니다. 사실, 자바스크립트를 기반으로 하는 CSS 선택자 엔진으로 작업할 때 추천합니다.

 

9. X:checked

1 2 3

input[type=radio]:checked {    border: 1px solid black; }

이 가상 클래스는 라디오 버튼이나 체크박스처럼 체크되는 사용자 인터페이스 요소만을 대상으로 합니다. 아래 코드처럼 간단합니다.

 

10. X:after

before과 after 가상 클래스는 매우 효과적입니다. 사람들이 늘 이 두 클래스를 효과적으로 사용하는 새롭고 창의적인 방법을 찾고 있는 듯합니다. 이 클래스는 선택된 요소 주변에 콘텐츠를 생성합니다.

많은 사람이 clear-fix 핵을 접했을 때 이 클래스를 맨 먼저 도입했었습니다.

01 02 03 04 05 06 07 08 09 10 11 12 13

.clearfix:after {     content: "";     display: block;     clear: both;     visibility: hidden;     font-size: 0;     height: 0;     }   .clearfix {    *display: inline-block;    _height: 1%; }

이 핵은 요소 뒤에 공간을 덧붙이고 float 효과를 제거하는데 :after 가상 클래스를 사용했습니다. 특히 overflow: hidden; 방법이 불가능한 경우 여러분이 사용할 방법 중에 가장 훌륭한 방법입니다.

 

11. X:hover

1 2 3

div:hover {   background: #e3e3e3; }

에이. 이 선택자는 알고 있겠죠. 공식 용어는 사용자 동작(user action) 가상 클래스랍니다. 혼란스럽겠지만 그렇지는 않습니다. 사용자가 요소 위에 커서를 올릴 때 특정한 스타일을 적용하고 싶나요? 이 선택자로 처리하세요!

알아두세요. 앵커 태그가 아닌 태그에 :hover 가상 클래스를 적용했을 때 인터넷 익스플로러의 하위 버전에서는 반응하지 않습니다.

대부분 hover 상태에서, 가령 앵커 태그에 border-bottom을 적용할 때 이 선택자를 사용합니다.

1 2 3

a:hover {  border-bottom: 1px solid black; }

꿀팁 - border-bottom: 1px solid black;이 text-decoration: underline;보다 보기 더 좋습니다.

 

 

12. X:nth-child(n)

1 2 3

li:nth-child(3) {    color: red; }

여러 요소 중에서 특정 요소를 지목하는 방법이 없었던 시절이 기억나나요? 그 문제를 풀어줄 nth-child 가상 클래스가 있답니다!

nth-child는 변숫값을 정수(integer)로 받습니다. 0부터 시작하지는 않습니다. 두 번째 항목을 대상으로 하고 싶다면 li:nth-child(2)로 작성합니다.

자식 요소의 변수 집합을 선택하는 데에도 이 방식을 활용할 수 있습니다. 가령, 항목의 4번째마다 선택하려면 li:nth-child(4n)로 작성하면 됩니다.