CSS - 상속(Inheritance)

상속(Inheritance)

.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 에 적용된 색상(부모에서 지정한 스타일)이, 하위 요소들에게도 적용

 

 

상속되는 속성들(properties)

상속이 CSS 속성 모두 적용되는 것이 아니라, 글자를 다루는 속성들이 대부분 포함

• font

• font-size

• font-weight

• font-style

• line-height

• font-family

• color

• text-align

• text-indent

• text-decoration

• letter-spacing

• opacity

• 기타 등등

 

 

강제 상속

• 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 부모에서 자식으로 강제 상속

• 자식을 제외한 후손에게는 적용되지 않음, 모든 속성이 강제 상속을 사용할 수 있는 것은 아님

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

<div class=“parent”>
    <div class=“child”></div>
</div>

설명

child 클래스의 position속성이 inherit 값으로 인해 .parrent 클래스 position 속성의 abosolute 값이 강제 상속

 

 

 

 

출처 : heropy.org