상속제어 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를 사용해서 쓸데없는 코드들이 많았는데 앞으로는 최대한 상속요소들을 잘 활용해야겠다 !