1.7 combinator를 이용한 선택자 구성과 규칙 만들기
combinator는 여러 개의 단순한 선택자(selector)를 조합하여 하나의 통합 선택자(selector)를 만드는 형태로 자손(Descendant), 자식(Child), 인접 형제(Adjacent Sibling)과 일반적인 형제(General Sibling)으로 구분하며 이에 대한 개념을 이해하기 위해서 다음과 같이 HTML 문서를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>combinator 예제</title>
<style>
//combinator 관련 코드
</style>
</head>
<body>
<h4>Program Files <span>디렉토리는
여러분들이
<em>설치</em>하는
프로그램이 기본적으로 위치하는 곳입니다.</span>
</h4>
<p>Program Files 디렉토리 안에는 다양한
프로그램들</p>
<h5>Microsoft Office</h5>
<p>오피스 프로그램이 위치하고 있습니다.</p>
<h4>Windows 디렉토리는 <p class="myclass">여러분의 두뇌와 같은 역할을 하는
프로그램들이 들어 있는 곳</p>
</h4>
<p>그러므로 잘 보호해야 하겠죠?</p>
</body>
</html>
위와 같이 작성하고 "combinatorEx.html"로 저장합니다. 그 다음 IE9를 통해서 보면 다음과 같이 나타나게 됩니다.
위와 같이 스타일이
현재 하나도 적용이 안되어 있으므로 HTML 코드에 정의된 대로 출력을 하게 됩니다. combinator를 구체적으로 알아보기에 앞서 위 HTML 문서의
구조를 body를 루트(root)로 해서 Tree 형태로 도식화하면 다음과 같습니다.
위에서 보는
것처럼 span 요소는 “Program …”으로 시작하는 h4 요소의 자식 요소이고 em 요소는 h4 요소의 자손 요소입니다. 마찬가지로 “Windows …”으로 시작하는 h4 요소의 자식 요소는 “여러분의 …”으로 시작하는 p 요소가
됩니다. 위 트리 구조를 통해서 부모, 자식, 자손의 관계를 이해할 수 있을 것입니다. 이제 자손(Descendant) combinator부터
순차적으로 “combinatorEx.html”파일을 이용하여 알아 볼까요?
1.7.1 자손(Descendant) combinator
공백을 이용하여
다음과 같이 selector2가 selector1의 자손이
되는 관계가 성립할 때 자손이 되는 selector2에 스타일을 적용하게 됩니다.
selector1 selector2 { property:value; property:value; …}
“combinatorEx.html”
파일을 메모장으로 열어서 다음과 같이 “자손(Descendant) combinator” 코드를 h4 요소의 자손
요소가 em인 요소의 색상을 빨강색으로 적용하도록 작성합니다.
<style>
h4 em{ color: red; }
</style>
저장한 후 IE9를 통해 확인해보면 다음과 같이 h4의 자손 요소인 em 요소에 빨강색으로 스타일을 적용하여 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.7.3 인접 형제(Adjacent Sibling) combinator (0) | 2013.08.01 |
|---|---|
| 1.7.2 자식(Child) combinator (0) | 2013.08.01 |
| 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (1) | 2013.08.01 |
| 1.5.6 부정(negation) pseudo-class (1) | 2013.08.01 |
| only-child, only-of-type, empty (0) | 2013.08.01 |