HTML 상속 - 부모tag, 자식tag

부모 태그에서 자식 태그로 상속되는 몇 가지 속성들을 살펴보자. 

 

1. color
2. font-family
3. font-size
4. font-weight
5. line-height
6. list-style
7. text-align
8. visibility

위의 속성들도 항상 상속되는 것은 아니다. 

 

예를 들어 <a>태그에는 color 속성이 상속되지 않는다. 

<a>태그가 억지로 상속을 받아오려면 inherit값을 써야한다. 

inherit은 부모 요소에 따라 상속을 시켜주는 값이다.

<div class="div1">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

<div class="div2">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

.div1 {
  color: green;
}

.div2 {
  color: orange;
}

.div2 a {
  color: inherit;
}

이렇게 div2 a 속성에 inherit을 해주어야 div2에 있는 a태그도 orange color를 가지게 된다.