소위 하위 요소라고 하는 요소를 지정할 수 있습니다. 이러한 요소는 다른 요소에 직접적으로 종속되는 요소입니다. 다소 추상적으로 들리겠지만 예시를 통해 잘 설명할 수 있습니다.
<body> <p>문단 1</p> <p>문단 2</p> <p>문단 3</p> </body>
여기서 body는 부모 요소입니다. p 요소는 body의 각 자식 요소입니다. 이 지식을 바탕으로 자식 요소 선택기를 사용할 수 있습니다.
body>p { color: blue; }
이 구문은 body의 직접 자식인 모든 단락을 파란색으로 변환합니다.
다음 예제는 body p와 body>p의 두 문장의 차이점을 다시 한 번 보여줍니다.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> body>p { font-family: "Courier New", Courier, monospace; font-size: 200%; } body p { colour:#0066FF; } </style> </head> <body> <p>문단 1</p> <p>문단 2</p> <p>문단 3</p> <div> <p>문단 4</p> </div> </body> </html>처음 세 개의 정의된 p 텍스트 단락은 body의 직접 자식입니다. body p 명령은 모든 텍스트 단락에 파란색 글꼴을 할당합니다. body>p는 차례로 처음 세 개의 텍스트 단락에만 영향을 줍니다. 따라서 이러한 단락도 더 큰 글꼴로 표시됩니다.
다음으로 후속 요소 선택기를 소개하겠습니다. 이 선택기는 다른 요소 바로 뒤에 있고 동일한 상위 요소를 가진 요소를 표시합니다. 다음은 또 다른 예시입니다:
h1+p { color: blue; }
이 구문은 단락의 텍스트 색상을 파란색으로 설정합니다. 단, 이 구문은 단락이 1차 제목 바로 다음에 오는 경우에만 적용됩니다.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> h1+p { color: blue; } </style> </head> <body> <h1>헤딩</h1> <p>문단 1</p> <h2>헤딩</h2>
<p>문단 2</p> <p>문단 3</p> <div> <p>문단 4</p> </div> </body> </html>브라우저에서 결과를 확인합니다.
첫 번째 단락만 파란색으로 표시됩니다. 다른 단락은 검은색입니다. 이는 이 p 요소들이 h1이 아니라 h2를 따르기 때문입니다.
또한 CSS3에는 후속 요소와 관련하여 추가 옵션이 도입되었습니다. 이제 특정 요소의 모든 후속 요소에 액세스할 수 있습니다. 예를 들어 보겠습니다:
h1~p { color: red; }
이 구문은 h1 뒤에 오는 모든 단락을 처리합니다.
참고로 요소에 직접 접근하는 것만이 가능한 것은 아닙니다. 요소의 속성을 통한 접근도 가능합니다.
다음은 이러한 선택자 중 일부입니다:
- [att] - 요소에 속성만 포함하면 됩니다. 값도 전송되는지 여부는 상관없습니다.
- a[href] - 모든 하이퍼링크(<a href=...>)가 선택됩니다. 그러나 앵커 정의(<a name=...>)에는 적용되지 않습니다.
- align=left] - 정렬 속성에 왼쪽 값이 있는 모든 요소를 표시합니다.
- attr~=값] - 공백으로 구분된 값 목록에 값이 포함된 모든 요소를 표시합니다.
- attr|=값] - 속성 내 지정된 값이 하이픈으로 구분된 문자열의 시작 부분에 있는 경우 요소를 선택합니다.
- img[width="200"] - 너비가 200픽셀인 모든 그래픽이 여기에 표시됩니다.
이러한 속성 선택기가 실제로 언제 필요할지 자연스럽게 의문이 생깁니다. 예를 들어 양식과 그 안에 정의된 체크박스를 생각해 보세요. 이제 아시다시피 확인란은 입력 요소를 통해 정의됩니다. 문제는 입력 요소가 일반 텍스트 입력 필드를 정의하는 데에도 사용된다는 것입니다. 즉, 입력을 사용하여 체크박스와 텍스트 입력 필드의 서식을 다르게 지정할 수 없습니다. 바로 이 점이 속성 선택기가 필요한 이유입니다. 다음 예시를 보면 더 잘 이해할 수 있습니다:
<body> 이름: <입력 유형="텍스트" id="name" /> <br /> 남자: <입력 유형="체크박스" 이름="성별" id="gender" /> <br /> 여자: <입력 유형="체크박스" 이름="성별" id="gender" /> </body>
여기에는 다양한 양식 요소가 정의되어 있습니다.
- 하나의 텍스트 입력 필드
- 두 개의 체크박스
이러한 필드는 서식을 지정해야 합니다.
입력 { 테두리:3px 솔리드 #000; 너비: 10m; }필드에 테두리와 너비가 할당되어 있습니다.
여기서 문제는 정의된 너비가 실제로 텍스트 입력 필드에만 적용되고 확인란에는 적용되지 않아야 한다는 것입니다. 그러나 요소 선택기는 서로 다른 필드 유형을 구분할 수 없습니다. 속성 선택기는 이러한 구분이 제대로 작동하도록 하는 데 사용됩니다. 다음은 그 예시입니다:
입력[유형="체크박스"] { 너비: 자동; }
표시된 선택기는 실제로 속성-값 조합이 type="checkbox"인 입력 요소에만 액세스합니다.
반복
CSS는 이제 드디어 반복을 처리할 수 있는 옵션을 제공합니다. 이 기능이 어디에 유용할지 자연스럽게 의문이 생깁니다. 예를 들어 표의 두 번째 행을 모두 다른 색상으로 디자인하려는 경우 이러한 선택기가 유용합니다. 사용 가능한 선택기를 소개하기 전에 일반적인 예시를 살펴보겠습니다:
<ol id="languages"> <li>HTML</li> <li>HTML5</li> <li>CSS</li> <li>CSS3</li> <li>JavaScript <li>JScript</li> <li>Java</li> <li>pHP</li> <li>Python</li> </ol>
이것은 일반적인 글머리 기호 목록입니다. CSS를 사용하면 이제 세 번째 목록 항목마다 배경색이 할당됩니다.
이를 위해 nth-child() 선택기가 사용됩니다. 이 선택기는 각 n번째 자식 요소의 주소를 지정하는 데 사용됩니다.
#languages li:nth-child(3n) { background-color: red; }
다음과 같은 선택기를 사용할 수 있습니다:
- root - :root 선택기는 문서의 루트를 지정하는 데 사용할 수 있습니다.
- nth-child(n) - 부모 요소 내의 모든 n번째 요소를 제어합니다. 이 선택기는 여러 요소를 다르게 디자인해야 할 때 특히 유용합니다. n은 산술 연산을 적용할 수 있는 고정 키워드입니다. n은 값 1과 동일시할 수 있습니다.
- :nth-last-child(n) - 요소의 모든 n번째 요소를 제어하여 자식 요소를 끝부터 통과시킵니다.
- :nth-of-type(n)-동일한 레벨에서 동일한 HTML 유형의 모든 n번째 요소를 제어합니다.
- :nth-last-of-type(n) - 같은 레벨에 있는 모든 n번째 요소를 제어하여 요소가 뒤에서 전달되도록 합니다.
- :first-child - 요소 내의 첫 번째 자식 요소를 제어합니다.
- last-child - 요소 내의 마지막 자식 요소를 제어합니다.
- :first-of-type - 부모 요소 내에서 동일한 HTML 요소 유형의 첫 번째 요소를 제어합니다.
- last-of-type - 부모 요소 내에서 동일한 HTML 요소 유형의 마지막 요소를 제어합니다.
- only-child - 형제 요소가 없고 부모 요소에 유일한 자식 요소를 표시하는 요소를 제어합니다.
- only-of-type - 동일한 HTML 유형의 형제 요소가 없어 부모 요소에서 이 유형의 유일한 자식 요소를 나타내는 요소를 제어합니다.
- :빈 - 빈 요소를 제어합니다.
여기에 제시된 선택기를 사용하면 복잡한 클래스 정의는 이제 과거의 일이므로 HTML 작업이 훨씬 쉬워집니다.
