CSS 13 키워드 정리 상속이란?

상속이란 그리고 공용 키워드 알아 두면 좋은 개념들

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

 

👗 자기에게 주어진 스타일이 없을 때 물려 받는 것. 마치자매들이 옷 나눠 입듯이 옷 없으면 언니 옷 물려 입는다.

 

ul{ color: tomato;}

-> li 요소를 선택하지 않았다. 그러나 상위 요소 ul의 색깔이 반영되었다!

 

다 되는 건 아니다. 링크 참조 https://www.w3.org/TR/CSS21/propidx.html

 

상위 요소로 부터 상속이 이루어지는 속성이 있는 반면 그렇지 않은 속성도 있다.
상속이 되는 것	. color, font-family, font-size, font-weight, text-align, cursor 등
상속이 안 되는 것	background-color, background-image, background-repeat, border, display etc.

 

상속은 자기에게 주어진 스타일이 없는 경우에 진행이 된다.

 

---

내용정리

• 상속 은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것이다.
• 상속 가능 여부는 속성마다 다르다.
• 모든 속성에 대해 사용 가능한 키워드 속성값이 있다.

---

공유 키워드

모든 CSS 속성에 사용 가능한 키워드가 있다. 때문에 이를 전역 값 이라고 표현한다.

 

1. inherit :  상위 요소로부터 해당 속성의 값을 받아 사용(상속을 받겠다) 인헤릿

ex) border: inherit 상속을 받겠다

2. initial :  브라우저 에 지정되어 았는 해당 속성의 기본값을 요소에 적용한다. (기본값) 이니셜

3. unset : 상속 속성에 대해서는 inherit 처럼 , 상속 되지 않는 속성에 대해서는 inital 처럼 적용함.

 

---

정리

1. inherit 은 상위 요소로부터 값을 물려 받겠다는 의미
2. initial 은 기본값(초기값) 을 사용하겠다는 의미
3. unset은 상위 요소로부터 물려 받을 수 있으면 물려 받고, 그럴 수 없으면 기본값을 사용 하겠다는 의미.