#10. CSS 상속 (Inherit) / 강제 상속

상속(Inherit)

부모요소를 자동으로 자식요소에 상속되도록 하는 요소들이 있습니다. 이것들은 주로 텍스트와 관련된 요소들입니다. font(font-size, font-weight, font-style, font-family), color, text-align, text-indent, text-decoration 등등

<!-- html -->
<div class="Onepiece">원피스
  <div class="Pirates">해적
    <div class="Roger">The Roger Pirates</div>
    <div class="RedHair">The Red Hair Pirates</div>
    <div class="Rocks">The Rocks Pirates</div>
  </div>
  <div class="Marine">해군
    <div class="Sengoku">Sengoku the Buddha</div>
    <div class="Borsalino">Kizaru</div>
  </div>
</div>

/* css */
.Onepiece {
  color: red;
}

---

강제상속

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

<!-- html -->
<div class="parent">
  <div class="child"></div>
</div>

/* css */
.parent {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
}

.child {
  position: inherit; /* 강제 상속 받아 position: absolute; 와 동일 */
  background-color: blue; 
  width: 50px;
  height: 50px;
}