본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

CSS 선택자 2

최초 작성일
최종 수정일
이번 시간에는...
CSS 선택자 두 번째 시간. 기본 선택자들 보다 좀 더 정교한 선택자를 살펴봅니다. 자식 선택자나 인접 형제 선택자 같은 관계 선택자와 :link, :visited, :hover, :active, :first-child 같은 가상 클래스 선택자를 다룹니다.

지난 CSS 초급 강의, '선택자 1' 시간에는 기초적인 선택자를 다루었습니다. 물론 사실 CSS 파일의 선택자 중 대부분은 '선택자 1'에서 다뤘던 선택자들로 채워집니다. 하지만 이 선택자들 만으로는 약간 부족한 부분이 있어, 이 부족한 부분을 채워줄 선택자들을 소개합니다. 참고로 이번 시간에 다룰 선택자 중에서는 IE6에서는 지원하지 않는, IE7부터 지원하는 선택자가 몇 가지 있습니다.

* 선택자

이 '*' 선택자는 지난 크로스 브라우징 강의에서 CSS 초기화를 설명하면서 등장했던 선택자 입니다. 이 선택자는 아시다시피 모든 요소를 선택하는 선택자입니다. 이 선택자는 선택자들의 우선 순위 중 제일 하위에 위치하고 있습니다. 그렇기 때문에, 이 선택자는 주로 CSS 초기화 정도에서만 사용됩니다. 전에 말씀 드렸듯이 이 '*' 선택자는 속도가 조금 떨어지는 선택자입니다. 사실, CSS의 선택자를 가지고 속도를 따지는 일은 별 의미 없는 일이긴 합니다. (워낙 미미한 차이입니다.) 하지만, 속도를 떠나서 '*' 선택자는 굳이 쓸 이유가 없습니다.

관계를 나타내는 선택자들

여기서 다룰 선택자들은 요소와 요소간의 관계를 나타내는 선택자들입니다. 때문에 만약 '>' 선택자라면 'A > B'와 같은 표현을 할 것입니다. 참고로 지금 다룰 관계 선택자들은 IE6에선 인식하지 않습니다. IE 7부터 인식하는 선택자이니 참고하시기 바랍니다. (물론 크롬이나 파이어폭스같은 브라우저들은 인식합니다.)

A > B 선택자 (자식 선택자)

'>' 선택자는 A 요소의 바로 하위요소(자식 요소) B를 선택하는 선택자 입니다. 예를 들어 다음의 마크 업을 예로 들겠습니다.

위 마크 업에서 div.contryul.city안에 모두 span 요소가 있음을 알 수 있습니다. 여기서 만약 div.contry의 자식 span 요소에 스타일을 주고 싶다면 다음과 같이 줄 것입니다.

하지만 이렇게 되면, ul.city 밑의 span 요소까지 스타일이 들어갑니다. 그리고 만약 이것을 원치 않는다면, ul.city 밑의 span 요소에 스타일을 다시 줘서 덮어 씌어야 합니다.

여기서 '>' 선택자를 사용하면 간단하게 해결이 됩니다.

이렇게 주면 ul.contry의 바로 자식인 span 요소들만 선택하기 때문에, ul.city 밑의 span 요소에는 스타일이 적용되지 않습니다.

Korea
  • Seoul
  • Incheon
USA
  • New York
  • New Jersey

A + B 선택자 (인접 형제 선택자)

이 '+' 선택자는 A 요소와 나란히 형제 관계로 있는 B 요소를 선택합니다. (앞의 A 요소는 선택되지 않습니다.) 이번에도 마크 업을 먼저 보고 예를 들겠습니다. 다음의 소스를 확인해보세요.

앞의 마크 업에서 다음과 같이 '+' 선택자를 주도록 하겠습니다.

이렇게 줄 경우, p 요소 다음에 오는 p 요소를 선택하기 때문에, 'Orange'와 'Banana'가 있는 p 요소에만 스타일이 적용됩니다.

Apple.
Orange.
Banana.

A ~ B 선택자 (일반 형제 선택자)

이 '~' 선택자는 앞서 본 '+' 선택자와 비슷합니다. 이 요소 역시 A 요소와 형제 관계인 B 요소를 선택합니다. 다만 차이점이 있다면 '+' 선택자처럼 인접하지 않더라도, 형제 관계라면 선택이 된다는 것입니다.

앞의 마크 업 예제와 비슷하지만, 이번에는 'Something else'가 적힌 divp 사이에 끼어들었습니다. 여기서 만약 앞선 '+' 선택자로 스타일을 준다면 'Orange'가 있는 p 요소에만 스타일이 적용됩니다. (Banana가 있는 p 요소는 div + p가 되어야 선택할 수 있습니다.) 하지만 다음과 같이 '~' 선택자를 사용할 경우, 'Orange', 'Banana' 둘 다 선택이 됩니다. (물론 '+'와 같이 기준이 되는 첫 번째 요소, Apple이 담긴 p 요소는 선택되지 않습니다.)

Apple.
Orange.
Something else
Banana.

가상 클래스(Pseudo-class) 선택자들

여태까지 배워온 선택자들은 대체적으로 그 자체의 이름(class, id) 또는 요소들간의 관계로 선택하는 선택자였습니다. 하지만 이 가상 클래스 선택자들은 주로 해당 요소의 상태에 따라 선택을 합니다. 예를 들어 a 요소 같은 경우에 마우스를 오버했을 때 상태가 바뀌게 되는데, 요소의 이러한 상태를 선택하는 것 입니다. 이 선택자는 요소의 상태이기 때문에 보통 요소를 가리키는 다른 선택자와 같이 사용 합니다.

앵커(a)의 가상 클래스

a 요소는 아시다시피 다른 페이지 주소로 이동하는 앵커 요소입니다. 이 요소는 네 가지 상태를 가지고 있습니다. 참고로 앵커의 가상 클래스 선택자들은 IE6에서도 지원합니다.

:link - 링크 상태

a 요소는 전에 다뤘듯이 꼭 href 속성이 있을 필요는 없습니다. 만약 href가 없다면 돛의 역할(다른 href의 타겟)을 한다고 말씀 드렸습니다. (혹시 이 내용이 기억나지 않으신다면, HTML 초급의 a 요소에 대한 강의를 읽어보시기 바랍니다.) 이 ':link'선택자는 href 속성을 가지고 있는 요소만을 선택합니다.

여기서 보면 test가 있는 a 요소만 링크이기 때문에, test가 있는 a 요소에만 스타일이 적용됩니다.

:visited - 방문한 링크

이 선택자는 링크 중에 이미 방문한 링크를 선택하는 선택자입니다. 예를 들어 CSS가 없는 가장 기본적인 HTML 문서를 웹 브라우저에서 열면, 아직 방문하지 않은 링크는 보통 파란색으로 표시되며, 방문했던 링크는 보통 보라색으로 표시되는 것을 볼 수 있습니다. 이는 브라우저가 자체적으로 'a:link'에는 파란색을 'a:visited'에는 보라색을 넣었다고 볼 수 있습니다.

:hover - 오버 상태

이 선택자는 링크 중, 마우스를 오버 했을 때의 상태를 선택합니다. 링크 중 마우스를 오버 했을 때, 색이 바뀐다거나 밑줄이 생긴다거나 하는 것은 이 선택자를 통해서 적용된 스타일입니다. 참고로 이 :hover 선택자는 꼭 a 요소가 아니더라도 스타일을 줄 수 있습니다.

:active - 클릭 상태

이 선택자는 링크를 마우스로 클릭 했을 때의 상태를 선택합니다. 종종 이 선택자를 이용해서 버튼이 눌리는 듯한 효과를 주기도 합니다.

앵커(a)의 가상 클래스 선택자 순서

앞서 본 앵커(a)의 가상 클래스 선택자는 모두 같은 우선 순위를 가집니다. 이 말은 어느 것이 나중에 선언되느냐에 따라 스타일을 덮어씌우게 될 수도 있다는 것입니다. 만약 ':link'를 ':hover'보다 나중에 스타일을 줄 경우, ':link'가 ':hover'의 스타일을 덮어씌워서 오버했을 때의 스타일이 표현되지 않을 수 있습니다. 그렇기 때문에 앵커 가상 클래스의 순서를 지켜주는 것은, 보다 효율적으로 스타일을 줄 수 방법입니다.

이 순서는 보편적으로 봤을 때, 가장 큰 범위부터 작은 범위로 선언하면 됩니다. 일단 가장 큰 범위인 전체 링크(:link)에 스타일이 들어가며 그 링크 중에 이미 들어갔던 링크(:visited)가 있을 것입니다. 그러니 ':visited' 보다 ':link'를 먼저 선언하는 게 좋습니다. 또한 링크 중에서 마우스를 오버하는 경우(:hover)는 마우스 포인터가 한 개이기 때문에, 많은 링크들 전체 수 보다 무조건 적을 것입니다. 그렇기 때문에 ':hover'는 ':link'나 ':visited'보다 나중에 선언하는 것이 좋고, 링크의 클릭(:active)는 무조건 오버된 다음에 이루어 질 수 있으므로, ':hover' 다음에 선언되면 됩니다.

다시 정리하자면 같은 단계의 선택자일 때, ':link > :visited > :hover > :active' 순으로 위치하는 것이 제일 효율적입니다.

:focus 선택자 - 초점이 선택된 상태

이 ':focus' 선택자는 보통 나중 HTML 강의에서 살펴볼 input 요소(폼 요소)가 선택되었을 때, 키보드 초점이 해당 요소에 와 있을 때를 선택합니다. 이 키보드 초점은 브라우저에서 tab키를 통해 이동되는(Shift + tab을 누르면 역방향으로 이동) 초점을 얘기합니다. 이 초점은 href 속성을 가진 a 요소에도 위치하기 때문에, 이 ':focus' 선택자는 href 속성을 가진 a 요소에서도 사용 가능합니다. 이 선택자를 통해서 초점이 이동한 요소에 스타일을 다르게 주면, 키보드의 접근성이 보다 향상되므로 이 선택자 사용을 권장합니다. 참고로 이 ':focus' 선택자는 IE 7 이하에서는 지원하지 않으며, IE8 부터 지원되는 선택자입니다.

:first-child 선택자

이 선택자는 'first-child'(첫 번째 자식)라는 말 그대로, 해당 요소가 가장 첫 번째 자식인가를 판단하여 선택합니다.

Apple.
Orange.
Something else
Banana.

아까 관계 선택자들을 설명할 때 썼던 예시 입니다. 여기서 'p:first-child' 선택자를 사용할 경우, 'Apple'를 담고 있는 p 요소만이 선택됩니다. 하지만 여기서 만약 'Apple'를 담은 p 요소보다 앞에 다른 요소가 오는 경우가 있다면,

Something else
Apple.
Orange.
Banana.

이 'p:first-child'는 아무 요소도 선택하지 못합니다. 'Apple'의 p 요소는 첫 번째 자식이 아니고, 첫 번째 자식은 div 요소이기 때문입니다. 이 부분 주의하시기 바랍니다. 이 ':first-child' 선택자는 IE7 부터 지원합니다.

정리

이상으로 '선택자' 두 번째 시간을 통해, 더 많은 선택자들을 다뤄 보았습니다. 살펴볼 선택자는 아직 더 남아있습니다. 이는 다음 'CSS 고급' 챕터에서 '선택자 3'로 다룰 계획입니다. 하지만 처음 말씀 드렸듯이, CSS 파일에 들어갈 많은 선택자들의 대다수는 '선택자 1'에서 다룬 선택자들입니다. '선택자 2'에서 다룬 선택자들, 그리고 '선택자 3'에서 다룰 선택자들 역시 유용하지만, 종종 지원하지 않는 브라우저가 있는 (주로 IE6 또는 IE7) 선택자들입니다. 그렇기 때문에, 가장 기본적인 선택자로 표현할 수 있다면 기본적인 선택자를 사용하는 것이 좋습니다.

요점 정리
  • * 선택자는 모든 요소를 선택하는 선택자. 테스트를 제외하곤 거의 쓸 일 없음.
  • 관계를 나타내는 선택자들은 IE7 이상부터 지원 (IE6 미지원).
  • A > B 는 자식 선택자. 바로 하위 자식을 선택.
  • A + B 는 인접 형제 선택자. A 바로 다음에 오는 형제 요소 B를 선택.
  • A ~ B 는 일반 형제 선택자. A 바로 다음부터 B까지 오는 모든 형제 요소를 선택.
  • 가상 클래스 선택자 - 주로 요소의 상태에 따른 선택.
  • :link - 링크인 상태를 선택.
  • :visited - 링크 중 방문한 링크를 선택.
  • :hover - 마우스가 오버된 상태.
  • :active - 마우스가 클릭되는 상태.
  • :link > :visited > :hover > :active 순으로 선언하는 것이 효과적
  • :focus - 폼 또는 링크에 포커스가 간 상태
  • :first-child - 요소가 형제들 중 가장 처음에 있는 경우.

이 글이 유용하셨다면 친구들에게 공유 해주세요.