부모 태그에 CSS 속성을 적용하면 자식 태그는 어떤 영향을 받을까요?
예제 소스 Exercise/5장/1_inheritance/style.css
header {
color: red;
}
그림 5-1 index.html 실행 결과
TIP
여기서는 익스터널 방식으로 CSS 속성을 적용합니다.
<header> 태그에 color: red;을 적용했더니 부모의 CSS 속성을 자식인 <h1>과 <p> 태그가 상속받으면서 글자 색이 모두 빨간색으로 바뀌었습니다.
이처럼 부모가 가진 CSS 속성이 자식에게 영향을 미치는 것을 ‘상속’이라고 합니다. 현실 세계에서 부모의 유전자가 자식에게 전달되는 것과 유사합니다. 단, 부모의 CSS 속성 중에서 이후에 살펴볼 background-color, margin, padding, position 등 몇 가지 속성은 자식에게 상속되지 않습니다. 부모의 유전자가 자식에게 전부 전해지지 않고 일부만 전해지는 것과 유사합니다.