[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>

body {
  font-family: sans-serif;
}
.Onepiece {
  color: blue;
}

 

 

 

 

 

 

위처럼 한곳(Onepiece)에만 적용해도 전체적용되는것을 보실수 있습니다. 

---

강제상속

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

<div class="parent1">
  <div class="child1"></div>
</div>

.parent1 {
  position: absolute;
  background-color: green;
  width: 100px;
  
}

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