상속제어 inherit / initial / unset

css를 쓰다 보면 종종 마주하는 initial 과 inherit
이 둘의 속성에 대해 알아보자

---

상속이란?

상속(inherit)은 하위 요소가 상위 요소의 스타일 속성 값을 물려받는 것이다.

대표적인 부모자식 사이의  ul 과  li  로 예를 들면

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul {
color: tomato;
}

이렇게 했을 경우에
ul의 자식 요소인 li는 ul의 스타일을 상속받는다.

다만 상속받지 않는 요소들도 존재하는데 상속 요소를 사용할 때 찾아보면서 많은 공부가 됐다!

---

상속 공용 키워드에는 총 세 가지가 있다.
이를 전역 속성이라고 부른다.
1. inherit
2. initial
3. unset

---

1.  inherit

• 해당 속성을 상위 요소로부터 상속받는다.
• 모든 요소가 상속이 되는 것은 아니므로 사용 시 검색을 통해 확인해야 한다.
• 절망의 IE 를 제외하고는 대부분의 브라우저에서 사용 가능하다. (얼른 IE가 없는 미래가 오길...)
•  

---

2.  initial

• 기본값을 사용 (이때 기본값은 브라우저에 저장된 기본 설정 값을 말한다)
• IE는 지원을 하지 않으므로 현재 대부분은 태그를 초기화할 때 margin: 0 , padding: 0 값을 쓰곤 한다.

---

3. unset

• 상속이 되는 속성이라면 inherit 을 적용하고, 상속이 되지 않는 속성이라면 initial 이 적용된다.
• 대부분의 브라우저에서 지원 가능하지만 혹시 모를 사태를 대비해 기존 속성 값을 많이 사용하는 듯하다.

 

 

상속이 지원되는 속성은 초기화해주되 inherit 키워드를 사용하고, 상속이 지원 안되면 initial 사용하자 !

---

여태껏 상속 요소를 활용하지 않고  CSS를 사용해서 쓸데없는 코드들이 많았는데 앞으로는 최대한 상속 요소들을 잘 활용해야겠다!