[ 스타일의 상속 관계 ]
웹 문서에서 사용하는 태그들은 상속의 개념이 적용된다. 그래서 부모 요소와 자식 요소가 존재한다.
예를 들어 <ul><li>목록1</li><li>목록2</li></ul> 형태가 있을 때 ul은 li의 부모 요소이고 li는 ul의 자식요소이다.
그리고 부모 요소에 있는 속성들이 자식 요소로 이어지는데 이것이 바로 '상속'이다.
상속의 예로는 body에 배경색을 넣으면 자식 요소인 <h2>와 <p> 등에도 같은 배경색이 적용된다.
그리고 스타일은 단계적으로 적용되기 때문에
p{color:red;}
p{color:blue;}
처럼 같은 태그에 다른 스타일이 적용되면 마지막으로 정의된 스타일을 적용한다. 위 소스에서는 글자색에 'blue' 가 적용된다.
선택자는 여러가지가 있다. 선택자(selector)란, 속성이 어디에 적용되는지 표시하는 것이다.
명칭 |
선택자 |
설명 |
전체 선택자 |
* {속성:속성 값;} |
페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. |
태그 선택자 |
태그 {속성:속성 값;} |
특정 태그에 스타일을 적용한다. |
클래스 선택자 |
.클래스이름 {속성:속성 값;} |
특정 클래스에 스타일을 적용한다. |
id선택자 |
#id이름 {속성:속성 값;} |
특정 id에 스타일을 적용한다. |
하위 선택자 |
상위요소 하위요소 {속성:속성 값;} |
모든 하위 요소에 스타일을 적용한다. |
자식 선택자 |
부모요소 > 자식요소 {속성:속성 값;} |
자식 요소에만 스타일을 적용한다. |
인접 형제 선택자 |
요소1 + 요소2 {속성:속성 값;} |
첫 번째 동생 요소에 스타일을 적용한다. |
형제 선택자 |
요소1 ~ 요소2 {속성:속성 값;} |
형제 요소에 스타일을 적용한다. |
그룹 선택자 |
요소1,요소2 {속성:속성 값;} |
여러 요소들에 한번에 묶어서 스타일을 적용한다. |
[ 선택자(selector) ]
하위 선택자 |
자식 선택자 | 인접 형제 선택자 | 형제 선택자 |
section ul {속성:속성 값;} |
section > ul {속성:속성 값;} | h1 + p {속성:속성 값;} | h1 ~ p {속성:속성 값;} |
<body> <section> <p></p> <ul> <li> <ul></ul> </li> <li> <ul></ul> </li> </ul> </section> </body> | <body> <section> <p></p> <ul> <li> <ul></ul> </li> <li> <ul></ul> </li> </ul> </section> </body> | <body> <section> <h1></h1> <p></p> <p></p> <p></p> </section> </body> | <body> <section> <h1></h1> <p></p> <p></p> <p></p> </section> </body> |
[ 헷갈리기 쉬운 선택자들 ]
'Web development > HTML & CSS' 카테고리의 다른 글
| 11가지 한글 구글 폰트 (0) | 2017.09.30 |
|---|---|
| CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0) | 2017.08.12 |
| CSS 정의 및 특징 (0) | 2017.07.22 |
| HTML5 태그 미지원 브라우저 (0) | 2017.07.19 |
| HTML 이미지 맵 만들기(usemap) (0) | 2017.07.18 |