1.5.5 구조적(structural) pseudo-class
구조적 의사-클래스(pseudo-class)는
DOM(Document Object Model) 구조를 바탕으로 동작하는 선택자로 DOM은
요소(Element), 속성(Attribute), 텍스트(text)로 구성된 HTML 페이지의 계층형 구조를 나타냅니다.
구조적 의사-클래스(pseudo-class)는 이러한 계층형, 다시 말해서 트리(Tree) 구조의 HTML DOM 구조에서 요소(Element)의 id나 class 속성 같은 것을 이용하지 않고도 요소의 상대적 위치를 탐색하는데 요긴하게 사용될 수 있는 선택자(Selector)로 사용할 수 있는 구조적 의사-클래스(pseudo-class)는 다음과 같습니다.
|
pseudo-class |
설명 |
|
root |
HTML 문서의 루트를 나타내며 html 요소(Element)를 의미함 |
|
nth-child |
부모 내의 자식들 중에서 원하는 자식 요소(들)을 선택하는데 사용 |
|
nth-last-child |
nth-child와 유사하지만 맨 마지막 자식 요소부터 카운팅한다는 점에서 조금 다르며 맨 마지막의 자식 요소를 선택하거나 그 바로 전에 나타나는 자식 요소를 선택할 때 유용 |
|
nth-of-type |
특정 요소에 해당하는 자식 요소(들)만을 선택할 때 사용 |
|
nth-last-of-type |
특정 요소에 해당하는 자식 요소(들)만을 선택한다는 점에서는 nth-of-type과 유사하지만 맨 마지막 자식 요소부터 카운팅한다는 점이 다름 |
|
first-child |
첫 번째 자식 요소를 선택하는 것으로 nth-child(1)과 같음 |
|
last-child |
마지막 자식 요소를 선택하는 것으로 nth-last-child(1)과 같음 |
|
first-of-type |
특정 요소에 해당하는 첫 번째 자식 요소 선택. nth-of-type(1)과 같음 |
|
last-of-type |
특정 요소에 해당하는 자식 요소(들) 중 맨 마지막 자식 요소를 선택하는 것으로 nth-last-of-type(1)과 같음 |
|
only-child |
특정 부모 요소에 하나의 자식 요소만 있을 때 해당 자식 요소 선택 |
|
only-of-type |
해당 요소가 부모 요소 내에서 단지 한 개만 존재하는 요소 선택 |
|
empty |
자식 요소가 없거나 텍스트가 없는 요소 선택 |
root, nth-child, nth-last-child
root 의사 클래스는 HTML 문서의 루트를 나타내며 HTML5 요소 <html>을 의미하며 사용하는 형태는
다음과 같습니다.
:root {
background-color: yellow; }
다음으로 nth-child는 부모 내의 자식들 중에서 원하는 자식 요소(들)을 선택하는데 사용하며 이렇게 선택된 요소(들)에 대해서 스타일을 적용하게 되며 일반적인 형식은 다음과 같습니다.
:nth-child(){ property:value; property:value; …}
HTML요소이름:nth-child(){ property:value; property:value; …}
위에서 첫 번째
형식은 root를 기준으로 몇 번째 자식 요소(Element)인지를
선택하는 것을 의미합니다. 반면 2 번째는 해당 HTML 요소가 선택 대상이 되는 것입니다.
그래서 nth-child()에 대해서 구체적으로 보면 :nth-child(n)은
부모 내에 포함된 모든 자식들을 선택한다는 의미가 됩니다. 다음으로 table
요소(Element) 내에 5개의 tr 요소(Element)가 있을 경우 tr 요소의 짝수(even) 위치에 해당하는 요소들만 선택한다면 tr:nth-child(even)를 사용하고 홀수의 경우는 tr:nth-child(odd)와 같이 작성해주면
되는 것입니다.
그렇다면 tr 요소들 중 첫 번째 tr 요소를
제외하고 적용할 경우는 어떻게 하면 될까요? “tr:nth-child(n+2)”를 사용하면 됩니다.
만일 3의 배수의 위치에 해당하는 요소만 선택할 경우는
nth-child(3n)과 같이 선택할 수 있습니다. 정리하면 nth-child()을 이용하여 원하는 자식 요소를 선택하려면 다음과 같은 일반식을 이용하면 됩니다.
nth-child(an+b)
조금 복잡하지요? 쉽게 두 번째 형식을 “HTML요소이름:nth-child(){ …}”을 이용하는 것이 편할 것입니다. 마지막으로 nth-last-child는 nth-child()와 유사하며 맨 마지막 자식 요소부터 카운팅한다는 점에서 조금 다르며 마지막 자식 요소(들)을 선택하는데 유용하게 사용할 수 있습니다.
HTML요소이름:nth-last-child(){ property:value; property:value; …}
위 형식에서 nth-last-child()는 “nth-last-child(1)”와
같이 사용하면 맨 마지막 자식 요소를 선택하는 것이고 맨 마지막에서 2 번째 자식 요소를 선택한다면
“nth-last-child(2)”와 같이 사용하면 됩니다. 그러면
맨 마지막 자식요소, 그리고 바로 전에 나오는 자식요소 2개를
선택할 경우는 어떻게 하면 될까요? “nth-last-child(-n+2)”와 같이 해주면 됩니다.
이제 방금 전 설명한 3개의 구조적인 의사 클래스에 대한 이해를 돕기 위해서 메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>root, nth-child, nth-last-child를 이용한 선택자 예제</title>
<style>
:root { background-color: yellow; }
</style>
</head>
<body>
<table>
<tr>
<th>도서</th>
<th>수량</th>
<th>구매금액</th>
</tr>
<tr>
<td>부의 미래</td>
<td>1</td>
<td>19,800원</td>
</tr>
<tr>
<td>시골의사 박경철의 자기 혁명</td>
<td>1</td>
<td>16,000원</td>
</tr>
<tr>
<td>아이디어맨</td>
<td>1</td>
<td>15,000원</td>
</tr>
<tr>
<td>드라이브(Drive)</td>
<td>1</td>
<td>15,000원</td>
</tr>
<tr>
<td colspan="2">총구매금액</td>
<td>65,800원</td>
</tr>
</table>
</body>
</html>위와 같이 작성한 후 “rootnthnth-lastEx.html”로 저장한 후 IE9를 통해 열어보면 다음과 같이 나타납니다.
위에서 보는
것처럼 root 의사 클래스를 이용하여 <style>…</style>
블록 내에 설정한대로 배경색이 노란색(yellow)으로 적용되어 나타납니다.
이 예제에 대한 DOM 구조를 간략하게 나타내면 다음과 같습니다.
위 그림에서
보는 것처럼 body 요소(Element)는 html 요소(Element)의 자식(child) 요소가 됩니다. 반면에
body 요소(Element)는 table 요소(Element)의 부모(parent) 요소가 되는 것입니다.
마찬가지로 5개의 tr 요소(Element)는 table 요소(Element)에게는
자식(child) 요소이나 th, td 요소(Element)에게는 부모(parent) 요소가 되는 것입니다.
그러면 tr 요소들 중 맨 마지막 요소는 어떻게 찾을 수 있을까요? nth-last-child(1), last-child 구조적 의사-클래스(pseudo-class)를 이용하면 됩니다.
이제 이러한 이해를 바탕으로 위 결과에서 도서, 수량, 구매금액과 같은 타이틀에 해당하는 부분을 배경색이 검정, 글꼴 색상이
흰색으로 설정하고 총구매금액이 포함된 행에 대해서 글꼴 색상을 빨강(red), 글꼴을 진하게 나타내도록 <style>…</style> 블록 내에 다음과 같이 코드를 추가합니다.
th{ background-color: black;color:
white;}
위에서 보는 것처럼 테이블(table) 요소의 자식 요소인 테이블의 헤더를 나타내는 th 요소에 배경색이 검정, 글꼴 색상이 흰색으로 설정하고 nth-last-child 의사 클래스를 이용하여 table 요소의 마지막 자식 요소에 대해 글꼴 색상을 빨강(red), 글꼴을 진하게 나타내도록 합니다. 저장하고 IE9를 통해 열어보면 다음과 같이 나타나게 됩니다.
이제 nth-child에 대해서 알아볼 차례입니다. 테이블 데이터(td)에는 “부의 미래”부터
“총구매금액”에 해당하는
5개의 데이터 행이 존재합니다. 첫 번째 테이블 레코드(행)을 선택할 경우는 nth-child(1)과 같이 명시해주면 됩니다.
이제 짝수, 홀수에 해당하는 테이블 레코드(행)에 대해서 스타일을 적용해볼까요? 먼저 짝수행에 대해서 배경색을 green으로 바꾸도록 다음과 같은 코드 2개 중 하나를 <style>…</style> 블록 내에 추가합니다.
tr:nth-child(2n){ background-color: green;}
tr:nth-child(even){ background-color: green;}
저장한후 IE9를 통해 보면 다음과 같이 나타나게
됩니다.
만약에 홀수
데이터 행에 대해서 적용하려면 어떻게 하면 될까요? 다음의 2 개의
코드 중 하나를 적용하면 됩니다.
tr:nth-child(2n+1){ background-color:
green;}
tr:nth-child(odd){ background-color: green;}
다음으로 칼럼(열) 단위로 스타일을 적용해볼까요? nth-last-child 의사 클래스를 이용하여 <style> …
</style> 블록 안을 주석 처리하고 다음과 같이 한 줄 코드를 추가합니다.
:root {
background-color: yellow; } th{ background-color:
black;color: white;}
//tr:nth-last-child(1){color: red; font-weight: bolder;} tr:nth-child(2n){ background-color: green;}
td:nth-last-child(1){color: red; font-weight: bolder;}
<style>
</style>
위에서 테이블
헤더(th)나 테이블 데이터(td)의 경계선이 나타나는 것을
없애고자 한다면 다음 같이 테이블의 border-collapse 속성을 이용하여 인접 셀들간에 경계선을
공유하도록 하고 th, td에 대해서는 경계(border) 속성값을
“none” 으로 설정합니다.
table{ border-collapse: collapse;}
th,td{border: none;}저장한 후 IE9를 통해 확인해보면 다음과 같이 경계선이 없는 형태로 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| first-child, last-child, first-of-type, last-of-type (0) | 2013.08.01 |
|---|---|
| nth-of-type, nth-last-of-type (0) | 2013.08.01 |
| 1.5.4 UI element state pseudo-class (0) | 2013.07.31 |
| 1.5.3 언어(lang) pseudo-class (0) | 2013.07.31 |
| 1.5.2 target pseudo-class (0) | 2013.07.31 |