[CSS] 상속(Inherit)의 개념

1. 상속이란 ?

    - 조상 요소로부터 하위요소로 CSS의 요소가 상속이 될 수 있다.

 

.ecosystem{
    color:red;
}

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

.ecosystem에 적용된 색상이 하위 요소들에게도 적용됨

 

2. 상속되는 속성

• font
• color
• text-align
• text-indent
• text-decoration
• letter-spacing
• opacity 등

3. 강제 속성

    - 상속되지 않는 속성도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속 시킬 수 있다. '자식'을 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아님

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

.parent{
    position: absolute;  /* 상속되지 않는 속성과 값*/
}
.child{
    position: inherit;   /* 강제 상속 받아 position : absolute; 와 동일*/
}