3-5. 자손/자식 선택자
■ 자손 선택자
자손 선택자(Descendant Selector)는 특정 요소의 자손 요소들을 선택합니다.
자손 선택자를 사용하면 사용되는 선택자의 개수를 상당 부분 줄일 수 있어 CSS 코드가 간결해지고 가독성이 좋아집니다.
<style>
#main h3 {
border-left: solid 8px orange;
padding-left: 20px;
}
#main p { line-height: 180%; }
#main span { font-weight: bold; }
#intro {
border: solid 1px green;
padding : 20px;
margin-top: 30px;
border-radius: 15px;
}
#intro h3 {
border-bottom: dotted 1px #cccccc;
padding-bottom: 5px;
}
#intro span {
font-weight: bold;
color: red;
}
</style>
<body>
<div id="main">
<h3>우리 식물원</h3>
<p>우리 식물원은 울창한 숲으로 둘러싸인 <span>우리산 자락에 위치</span>하고 있으며,
3,000종의 다양한 식물이 전시되고 있습니다.</p>
</div>
<div id="intro">
<h3>식물원 관람안내</h3>
<p>- 방문 1일전날까지 인터넷으로 예약해야 합니다.<br>
- 입장료 : 8,000원<br>
- 동절기인 <span>12월1일부터는 15:00에 폐장</span>합니다.</p>
<h3>식물원 이용시간</h3>
<p>- 야외 식물원 : 9:00 ~ 19:00<br>
- 온실 식물원 : 9:00 ~ 17:00<br>
- 문의전화 : 031-123-4567<br>
※ <span>일과 시간 외에는 홈페이지 게시판에 문의</span>해 주세요.</p>
</div>
</body>
ex3-7.html의 실행 결과
■ 자식 선택자
자식 선택자(Child Selector)는 특정 요소의 자식 요소들을 선택합니다. 다음 예제를 통하여 자식 선택자에 대해 알아봅니다.
<style>
#main h3 {
border-left: solid 8px orange;
padding-left: 20px;
}
#main p { line-height: 180%; }
#main span { font-weight: bold; }
#intro {
border: solid 1px green;
padding : 20px;
margin-top: 30px;
border-radius: 15px;
}
#intro h3 {
border-bottom: dotted 1px #cccccc;
padding-bottom: 5px;
}
#intro span {
font-weight: bold;
color: red;
}
</style>
<body>
<div id="main">
<h3>우리 식물원</h3>
<p>우리 식물원은 울창한 숲으로 둘러싸인 <span>우리산 자락에 위치</span>하고 있으며,
3,000종의 다양한 식물이 전시되고 있습니다.</p>
</div>
<div id="intro">
<h3>식물원 관람안내</h3>
<p>- 방문 1일전날까지 인터넷으로 예약해야 합니다.<br>
- 입장료 : 8,000원<br>
- 동절기인 <span>12월1일부터는 15:00에 폐장</span>합니다.</p>
<h3>식물원 이용시간</h3>
<p>- 야외 식물원 : 9:00 ~ 19:00<br>
- 온실 식물원 : 9:00 ~ 17:00<br>
- 문의전화 : 031-123-4567<br>
※ <span>일과 시간 외에는 홈페이지 게시판에 문의</span>해 주세요.</p>
</div>
</body>
ex3-8.html의 실행 결과
