[CSS] 상속

 

▶ 상속(inheritance)

  - HTML, CSS에서도 조상(상위) 요소로부터 자손(하위) 요소로 CSS의 명령 또는 속성들이 상속될 수 있음.

 

CSS 상속 예시

  - 실제로 위의 예에서 .ecosystem에 해당하는 생태계 텍스트뿐만 아니라 그 하위의 동물, 식물, 호랑이 등의 요소들까지도 빨간색 텍스트로 변경됨.

    - 생태계(.ecosystem)에 적용된 색상이 하위 요소들에도 적용된 것.
  - 특정 CSS 속성들은 조상 요소에 지정하는 것만으로도 하위 요소에 영향을 미칠 수 있음.
  - 상속되는 속성들은 대부분 글자를 다루는 속성.

※ 상속되는 속성들(properties)
  - font
    - font-size
    - font-weight
    - font-style
    - line-height
    - font-family
  - color
  - text-align
  - text-indent
  - text-decoration
  - letter-spacing
  - opacity
  등...

 

 

▶ 강제 상속

- 필요에 의해 조상 요소가 가진 특정한 속성을 자식/후손 요소에게 강제적으로 상속시키는 것.

 

강제 상속 예시

  - 위의 예시와 같이 상속되지 않는 속성(값)도 position: inherit;이라는 속성/값을 사용하여 부모에서 자식으로 강제 상속시킬 수 있음.
  - 자식을 제외한 후손에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아님에 유의.