티스토리 뷰
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자
Lkt_Programmer 2019. 3. 27. 13:52안녕하세요. CSS 선택자와 관련된 3번째 포스팅입니다. 오늘 배울 선택자는 하위 선택자와 자식 선택자 그리고 등위 선택자가 되겠습니다.
1. 하위 선택자와 자식 선택자 |
먼저 태그 구조에서 자손과 자식에 대한 개념을 살펴보겠습니다.
<h1><div><p> 태그를 활용하여 작성한 간단한 HTML 코드입니다. 해당 코드의 태그 구조를 tree 구조로 살펴보면 다음과 같습니다.
후손이라는 말은 특정 태그에 종속되어 있는 모든 하위 요소들을 의미합니다. 위 구조에서 html 태그의 후손에 해당하는 태그들인 <head><body><h1><div> 태그들에 이에 해당합니다.
자식 태그의 경우는 특정 태그에 종속되면서 바로 한 단계 아래에 해당하는 요소들을 의미합니다. 위 그림에서 body 태그의 자식 태그들은 <h1><div> 태그를 의미합니다. 물론 이 두 개의 태그는 html의 후손 태그이기도 합니다.
이러한 개념을 CSS 선택자에 적용하여 선택자를 지정할 수 있는 것이 바로 하위 선택자와 자식 선택자가 됩니다. 아래 샘플 예제를 참조 바랍니다.
▼ body > div { border : 2px solid black;} Rule Set은 <body>태그의 자식 요소에 해당하는 태그들 중에서 div 태그를 선택하여 border을 설정하라는 의미입니다.
▼ #content p { color : red;} RuleSet은 태그 id 값이 content의 후손 요소에 해당하는 태그들 중에서 p 태그의 color 속성값을 red로 설정하라는 의미로 해석이 됩니다.
2. 등위 선택자 |
등위 선택자는 동등한 위치에 있는 태그를 선택하여 CSS 속성을 지정할 수 있는 태그를 의미합니다.
A ~ B |
A에 해당하는 태그와 동등한 위치에 있는 B 선택 |
A + B |
A에 해당하는 태그와 동등한 위치에 있는 인접한 태그 |
아래 샘플 예제를 참고바랍니다.
▼ h1 ~ p 선택자는 h1과 동일한 위치에 있는 p 태그를 선택하여 color 속성값을 red로 지정하라는 의미입니다. Content1 ~ Content5 까지 모두 적용이 된 것을 확인할 수 있습니다. 반면 h1 + p의 경우는 동등한 위치에 있으면서 가장 인접한 태그 하나를 선택하게 됩니다. 결과를 보면 Content1만 font-size 속성이 적용이 된 것을 확인할 수 있습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility (0) | 2019.03.29 |
|---|---|
| [HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자 (0) | 2019.03.28 |
| [HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자 (0) | 2019.03.26 |
| [HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1 (0) | 2019.03.25 |
| [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기 (0) | 2019.03.24 |