고정 헤더 영역
상세 컨텐츠
본문
반응형
하위 선택자
- 하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.
section p { color: blue; }
- section은 상위 요소고, p는 section 요소의 하위 요소다.
<html>
<head>
<meta charset="utf-8">
<style>
section p {
color: blue;
}
</style>
</head>
<body>
<section>
<p>
<span>애국가</span>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
</section>
</body>
</html>- css에 section 태그의 <p> 태그의 아래 모든 요소의 글자 색상이 파란색으로 적용되게 했다. 그러면 <span> 태그는 적용된 속성이 없기 때문에 default 값인 검은색이 표출된다.
실행 화면
자식 선택자 - 자식 요소에만 스타일 적용하기
- 하위 요소 전체에 스타일을 적용하는 것이 아니라 자식 요소에만 스타일을 적용할 수 있다. 자식 선택자는 자식 요소에 스타일을 적용한 선택자로 두 요소 사이에 '>(부등호)'를 표시해 부모 요소와 자식 요소를 구분한다.
section > p { color: blue; }
<html>
<head>
<meta charset="utf-8">
<style>
section > p {
color: blue;
}
</style>
</head>
<body>
<section>
<p>
<span>애국가</span>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
</section>
</body>
</html>
실행 화면
- <section> 태그의 자식인 <p> 태그만 선택이 됐기 때문에 <p>태그의 글자 색상만 파란색으로 적용된다.
인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기
- 부모와 자식 관계로 지정했으나 형제 관계에서 스타일을 적용할 수 있다. 형제 선택자는 '+'를 이용해 인접한 형제 관계 태그에 스타일을 적용할 수 있다.
요소 1 + 요소2
<html>
<head>
<meta charset="utf-8">
<style>
section p + span {
color: blue;
}
</style>
</head>
<body>
<section>
<p>
<span>애국가</span>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
</section>
</body>
</html>
실행 화면
- <section> 태그 안의 <p>태그와 <span> 태그의 색상이 파란색으로 적용되어 표출된다.
형제 선택자 - 형제 요소에 스타일 적용하기
- 위의 스타일 적용은 인접한 형제 요소에 대해서 적용을 했다. 인접 형제 선택자와 달리 모든 형제에 요소를 적용할 수 있다. '~'를 이용하면 첫 번째 요소와 두 번째 요소 사이에 있는 태그에 스타일이 적용된다.
요소 1 ~ 요소 2
<html>
<head>
<meta charset="utf-8">
<style>
section p ~ span {
color: blue;
}
</style>
</head>
<body>
<section>
<p>
<span>애국가</span>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
<span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.</span><br/>
</section>
</body>
</html>
실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 가상 클래스와 가상 요소 (0) | 2021.05.13 |
|---|---|
| [CSS 기초] 속성 선택자 (0) | 2021.05.12 |
| [HTML5] 시맨틱 태그 (0) | 2021.05.10 |
| [CSS 기초] 표 스타일 (2) (0) | 2021.05.07 |
| [CSS 기초] 표 스타일 (1) (0) | 2021.05.06 |
댓글 영역