앞에서 배웠던 주요 선택자(selector) 외에도 CSS3에는 매우 다양한 선택자들이 있습니다.
연결 선택자
연결 선택자는 '콤비네이션 선택자', '콤비네이션 실렉터(combination selector)'라고도 합니다.
하위 선택자
지정한 모든 하위 요소에 스타일 적용하기
하위 선택자(descendant selector, 디센던트 셀렉터)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 합니다.
| 기본형 |
설명 |
| 상위요소 하위요소(section {color:blue;}) |
모든 하위요소에 적용 |
자식 선택자
자식 요소에만 스타일 적용하기
하위 요소에 전체 스타일을 적용하는 것이 아니라 자식 요소에만 스타일을 적용할 수도 있습니다. 자식 선택자(child selector)는 자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 '>(gt)'를 표시해 부모 요소와 자식 요소를 구분합니다. 하위 선택자에서는 자식 요소뿐만 아니라 그 자손까지 적용되는 반면, 자식 선택자에서는 바로 아래 요소, 즉 자식 요소에만 스타일이 적용됩니다.
인접 형제 선택자
가장 가까운 형제 요소에 스타일 적용하기
| 기본형 |
설명 |
| 요소 1 + 요소 2 |
요소1다음에 오는 요소2에 적용(한번만) |
먼저 나오는 '형 요소', 나중에 나오는 요소를 '동생 요소'라고 합니다. 인접 형제 선택자(adjacent selector)는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에만 스타일이 적용됩니다.
형제 선택자
형제 요소에 스타일 적용하기
| 기본형 |
설명 |
| 요소 1 ~ 요소 2 |
요소 1 다음에 오는 요소2에 적용한다. |
인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다. 첫 번째 요소와 두 번째 요소 사이에 '~(틸드)'를 표시합니다.
속성 선택자
attribute 태그에 붙어있는 추가적인 값이며 J-querry에서도 사용가능하다.
사용하는 속성들의 값에 따라 스타일을 지정한다. 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다.
[속성 = 값] 선택자
특정 값을 갖는 속성에 스타일 적용하기
| 기본형 |
설명 |
| [속성 = 값] |
속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용한다. |
[속성 ~= 값] 선택자
여러 값 중 특정 값이 포함된 속성에 스타일 적용하기
| 기본형 |
설명 |
| [속성 ~= 값] |
여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택합니다. |
하나의 속성 값이 여러 개일 때 특정 속성 값을 찾는데 편리합니다.
[속성 |= 값]
| 기본형 |
설명 |
| [속성 |= 값] |
특정 값이 포함된 속성에 스타일을 적용합니다.("값-"으로 시작하면 스타일을 적용) |
특정 값이 포함된 속성에 스타일 적용하기
[속성 ^= 값]
특정 값으로 시작하는 속성에 스타일 적용하기
| 기본형 |
설명 |
| [속성 ^= 값] |
지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다. |
[속성 $= 값]
특정 값으로 끝나는 속성에 스타일 적용하기
| 기본형 |
설명 |
| [속성 $= 값] |
지정한 값으로 끝나는 요소를 찾아 스타일을 적용합니다. |
[속성 *= 값]
값의 일부가 일치하는 속성에 스타일 적용하기
| 기본형 |
설명 |
| [속성 *= 값] |
값이 포함되어 있으면 스타일을 적용합니다. |
속성 정리
| 기본형 |
스타일 적용 경우 |
예시 - 선택자 |
예시 - 적용되는 요소 |
| [속성] |
지정한 '속성'일 때 |
[href] |
<a href="#">메뉴 1</a> |
| [속성 = 값] |
'값'에 일치할 때 |
[target="_blank"] |
<a href="......" target="_blank">HTML</a> |
| [속성 ~= 값] |
여러 값들 중 특정 '값'이 포함 |
[class~="button"] |
<a href="#" class="flat button">메뉴 4</a> |
| [속성 |= 값] |
'값'이 포함
(하이픈 포함 단어별) |
[title="us"] |
<a href="#" title="us">영어</a>
<a href="#" title="us-english">영어</a> |
| [속성 ^= 값] |
'값'으로 시작 |
[title^="eng"] |
<a href="#" title="english">영어</a> |
| [속성 $= 값] |
'값'으로 끝남 |
[href $="xls"] |
<a href="intro.xls">엑셀 파일</a> |
| [속성 *= 값] |
'값'이 속성 값의 일부 일 때 |
[href *= "w3"] |
<a href="http://www.w3c.org/TR/html">HTML 사이트</a> |
가상 클래스와 가상 요소
클래스 이름 앞에 콜론(;)을 붙여 표시하는 가상 클래스와 클래스 이름 앞에 콜론 두 개(;;)를 붙여 표시하는 가상 요소를 사용합니다.
사용자 동작에 반응하는 가상 클래스
1. :link 가상 클래스 선택자
방문하지 않은 링크 스타일에 적용
사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다. 택스트 링크는 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link선택자를 사용합니다.
2. :visited 가상 클래스 선택자
방문한 링크에 스타일 적용
문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다. 방문한 텍스트 링크는 기본적으로 자주색(purple)으로 표시되는데 사용자가 방문했던 링크도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited선택자를 사용해 조절합니다.
3. :hover 가상 클래스 선택자
웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정합니다. 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과(rollover)를 만들 수 있습니다.
4. :active 가상 클래스 선택자
웹 요소를 활성화했을 때의 스타일 적용
링크나 이미지 등 웹 요소를 활성화했을 때(누르고 있을 때)의 스타일을 지정합니다. 예를 들어 링크를 클릭했을 때의 스타일을 지정합니다.
5. :focus 가상 클래스 선택자
웹 요소에 초점이 맞추어 졌을 때의 스타일 적용
웹 요소에 초점이 맞추어졌을 때의 스타일을 지정합니다. 예를 들어 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 Tab을 눌러 초점을 이동했을 때의 스타일을 지정합니다.
가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다. 앞에서 살펴본 1~4 모두 정의한다면 :link 선택 자부터 정의하고 :visited, :hover, :active 순서대로 정의합니다. 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않습니다.
UI 요소 상태에 따른 가상 클래스
사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자를 사용합니다. 그중에서도 UI(User Interface) 요소의 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용합니다.
1. :enabled와 :disabled 가상 클래스 선택자
요소를 사용할 수 있을 때와 없을 때의 스타일 지정
해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 :disabled클래스를 사용합니다. 텍스트 영역 필드(textarea)를 게시판 입력으로 사용할 때는 :enabled, 약관으로 보여줄 때는 :disabled로 사용합니다.
2. :checked가상 클래스 선택자
라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정
라디오 박스나 체크 박스에서 사용자가 해당 항목을 선택했을 때(체크했을 때)의 스타일을 지정합니다.
구조 가상 클래스
웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다.
1. :root 가상 클래스 선택자
문서 전체에 적용하기
HTML문서에서는 루트 요소가 HTML이므로 HTML요소에 스타일이 적용됩니다.
2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자
자식 요소의 위치에 따라 스타일 적용하기
여러 개의 항목이 일렬(가로 or 세로)로 나열되어 있는 경우, calss나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 수 있습니다. 주로 메뉴 항목에 이 선택자를 사용합니다. 세 번째에 있는 메뉴 항목이든 끝에 있는 메뉴 항목이든 원하는 위치에 따라 요소를 찾아 스타일을 지정할 수 있기 때문입니다.
:nth-child(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용하고 :nth-last-child(n)는 끝에서부터 n번째인 자식 요소에 스타일을 적용합니다. an+b처럼 수식을 사용할 수도 있는데 n값은 0부터 차례대로 정수를 대입해 계산합니다.
다만, 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모요소를 갖고 있어야만 합니다. 즉, 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 합니다.
3. :nth-of-type(n), nth-last-of-type(n) 가상 클래스 선택자
특정 태그 위치에 스타일 적용하기
<p>태그나 <li> 태그가 여러 개 나열되어 있고 각 태그에 id나 class를 사용하지 않은 상태에서 몇 번째에 잇는 <p> 태그 또는 몇 번째에 있는 <li> 태그처럼 태그에 따라 몇 번째에 있는 항목인지를 지정해 스타일을 적용할 때 이 가상 클래스 선택자를 사용합니다.
:nth-of-type(n)은 앞에서부터 세어 n번째 요소이고 :nth-last-of-type(n)은 끝에서부터 세어 n 번째 요소에 스타일을 지정합니다.
4. :first-child, :last-child 가상 클래스 선택자
첫 번째, 마지막 요소에 스타일 적용하기
:first-chiuld는 첫 번째 자식 요소를 선택해 스타일을 적용하고 :last-child는 마지막 자식요소에 스타일을 적용합니다.
예를 들어 section p:first-child는 section의 p 자식 요소들 중 첫번째 p 자식 요소를 가리킵니다.
5. :first-of-type, :last-of-type 가상 클래스 선택자
형제 관계 요소의 위치에 따라 스타일 적용하기
형제 관계인 요소 중에서 :first-of-type은 첫 번째 요소, :last-of-type은 마지막 요소에 스타일을 적용합니다.
6. :only-child, :only-of-type 가상 클래스 선택자
하나뿐인 자식 요소에 스타일 적용하기
:only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용하며 :only-of-type은 :only-child와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용합니다.
그 외 가상 클래스
1. :target가상 클래스 선택자
앵커 목적지에 스타일 적용하기
같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용합니다. 이때 :target 선택자를 이용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있습니다.
2. :not 가상 클래스 선택자
특정 요소가 아닐 때 스타일 적용하기
:not 선택자는 이름에서도 알 수 있듯이 부정의 의미가 있습니다. 여기서 not은'괄호 안에 있는 요소를 제외한'이라는 의미입니다.
가상 요소
가상 요소는 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(;;)를 붙여 표시합니다.
1. ::first-line요소와 ::first-letter요소
첫 번째 줄, 첫 번째 글자에 스타일 적용하기
이 요소들을 사용하면 지정한 요소의 첫 번째 줄(::first-line)이나 첫 번째 글자(::first-letter)에 스타일을 쉽게 적용할 수 있습니다. ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다. 만약 <p>태그 안에<br>태그가 있어 첫 번째 글자가 첫 번째 줄에 없을경우, 적용할 수 없습니다.
2. ::before, ::after요소
내용의 앞뒤에 콘텐츠 추가하기
이 요소를 사용하면 특정 내용 앞(::before)이나 뒤(::after)에 지정한 내용을 넣을 수 있습니다. 다시 말해 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.
