■ 자손 선택자
자손 선택자(Descendant Selector)는 특정 요소의 자손 요소들을 선택합니다.
자손 선택자를 사용하면 사용되는 선택자의 개수를 상당 부분 줄일 수 있어 CSS 코드가 간결해지고 가독성이 좋아집니다.
< style>
{
}
{ line-height: 180%; }
{ font-weight: bold; }
{
}
{
}
{
}
< /style>
< body>
< div id=" main" >
< h3> 우리 식물원< /h3>
< p> 우리 식물원은 울창한 숲으로 둘러싸인 < span> 우리산 자락에 위치< /span> 하고 있으며,
< /p>
< /div>
< div id=" intro" >
< h3> 식물원 관람안내< /h3>
< p> - 방문 1일전날까지 인터넷으로 예약해야 합니다.< br>
< br>
< span> 12월1일부터는 15:00에 폐장< /span> 합니다.< /p>
< h3> 식물원 이용시간< /h3>
< p> - 야외 식물원 : 9:00 ~ 19:00< br>
< br>
< br>
< span> 일과 시간 외에는 홈페이지 게시판에 문의< /span> 해 주세요.< /p>
< /div>
< /body>
ex3-7.html의 실행 결과
새 창에서 보기
■ 자식 선택자
자식 선택자(Child Selector)는 특정 요소의 자식 요소들을 선택합니다. 다음 예제를 통하여 자식 선택자에 대해 알아봅니다.
< style>
> p { color: red; }
{ text-decoration: underline;}
< /style>
< body>
< div>
< p> 우리 식물원은 울창한 숲으로 둘러싸인 우리산 자락에 위치하고 있으며,
< /p>
< span>
< p> 방문 1일 전날까지 인터넷으로 예약해야 합니다. 동절기인 12월1일부터는
< /p>
< /span>
< /div>
< p> - 야외 식물원 : 9:00 ~ 19:00< br>
< br>
< br>
< /p>
< /body>
ex3-8.html의 실행 결과
새 창에서 보기
다음은 앞에서 배운 다양한 선택자가 사용된 예입니다.
< style>
{
}
{
}
> a {
}
{
}
{
}
< /style>
< body>
< div class=" nav" >
< a href=" #" > 홈< /a>
< a href=" #" > 글 목록< /a>
< a href=" #" > 연락처< /a>
< /div>
< div id=" main" >
< h1> 웹 개발 블로그에 오신 것을 환영합니다!< /h1>
< p> 이 블로그는 < span class=" highlight" > 웹 개발< /span> 관련 주제를 다룹니다. 다양한 기술과
< span class=" highlight" > 프로그래밍< /span> 언어에 대해 배워보세요.
< /p>
< div class=" post" >
< h2> HTML 기초< /h2>
< p> HTML은 웹 페이지의 < span class=" highlight" > 구조< /span> 를 정의하는 마크업 언어입니다.
< /p>
< div>
< p> HTML 문서는 요소(element)로 이루어져 있습니다. 각 요소는 시작 태그와 종료 태그로
< /p>
< /div>
< /div>
< div class=" post" >
< h2> CSS 소개< /h2>
< p> CSS는 웹 페이지의 < span class=" highlight" > 디자인< /span> 을 담당합니다. 색상, 글꼴,
< /p>
< div>
< p> CSS를 사용하여 HTML 요소에 스타일을 추가할 수 있습니다.< /p>
< /div>
< /div>
< /div>
ex3-13.html의 실행 결과
새 창에서 보기
