[CSS 이해하기] 상속
2022. 12. 15. 14:41
CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식에게 물려주는 것과 같다.
어떤 스타일 규칙이 특정 요소 뿐만 아니라 그 자손 요소까지 적용되는 것을 말한다.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상속</title>
<link rel="stylesheet" href="css/상속.css">
</head>
<body>
<h1>Hello, <em>CSS</em></h1>
</body>
</html>/*상속.css파일*/
h1 { color: gray; }
위 코드에서 <em>은 부모인 <h1>의 color: gray를 상속받는다.
그렇다고 모든 속성이 다 상속되는 것은 아니다.
우선은 margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 있자.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상속</title>
<link rel="stylesheet" href="css/상속.css">
</head>
<body>
<h1 id="page">Hello, <em>CSS</em></h1>
</body>
</html>/*상속.css*/
* { color: red; }
h1#page { color: gray; }위 코드에서는 전체 선택자를 사용해서 color: red를 적용하고 id 선택자를 사용해서 color: gray를 선언했다.
전체 선택자의 구체성은 0, 0, 0, 0이고 id 선택자의 구체성은 0, 1, 0, 1이다.
이 경우 <em>에는 어떤 color가 적용될까?
<em>에는 color: red가 적용되었다.
상속된 속성은 아무런 구체성을 가지지 않기 때문이다(0, 0, 0, 0도 가지지 않음. 구체성이 없다고 해석).
0, 0, 0, 0의 구체성조차 가지지 않아 전체 선택자에 밀려 color: red가 적용되는 것이다.
만약 전체 선택자가 없다면 color: gray가 적용된다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [CSS 속성] (0) | 2022.12.16 |
|---|---|
| [CSS 이해하기] 캐스케이딩(cascading) (0) | 2022.12.15 |
| [CSS 이해하기] 구체성 (0) | 2022.12.15 |
| [CSS 이해하기] 가상 선택자 (0) | 2022.12.15 |
| [CSS 이해하기] 선택자 (0) | 2022.12.14 |
