스타일 상속

상속

<div class="ecosystem">생태계
    <div class="animal">동물
        <div class="tiger">호랑이</div>
        <div class="lion">사자</div>
        <div class="elephant">코끼리</div>
    </div>
    <div class="plant">식물</div>
</div>

.animal {
	color: red;
}

- .animal의 자식 요소까지 영향을 미친다.

※ 상속되는 CSS 속성들 (대부분 글자 / 문자 관련 속성들)
- font-style: 글자 기울기
- font-weight: 글자 두께
- font-size: 글자 크기
- line-height: 줄 높이
- font-family: 폰트(서체)
- color: 글자 색상
- text-align: 정렬

 

 

 

강제 상속

▶ inherit: 상속 기능이 없는 속성들에게 상속 기능을 강제로 부여한다.

<div class="parent">
	<div class="child"></div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background-color: red;
}

.child {
    width: 100px;
    height: inherit;
    background-color: inherit;
}

- 자식 요소에 inherit을 설정하면 부모 요소의 속성을 상속한다.