5일차(CSS-상속과 공용키워드)-24.11.20

상속과 공용키워드

상속

상속(Inheritance)란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

예) ul{ color: violet; }
li요소를 선택하지 않아도 상위요소에서 주어진 색이 반영이 된다.

상위 요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않는 속성도 있다.

상속가능(글자관련 多)	상속불가능(박스모델관련 多)
color, font-family, font-size, font-weight, text-align, cursor 등	background-color, background-image, background-repeat, border, display 등

 

공용키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속여부를 제어할 수 있는 3개의 키워드를 별도로 지원한다.
모든 속성에 적용할 수 있는 키워드이므로 ‘전역 키워드’라고도 부르기도 한다.

키워드	의미
inherit	상위요소로부터 해당 속성의 값을 받아 사용
initial	(브라우저에 지정되어있는)해당 속성의 기본값을 요소에 적용
unset	상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용