요약
MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.
상속되는 속성
요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산값을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 초기값을 얻습니다.
상속되는 속성의 대표적인 예는 color 속성입니다. 주어진 스타일 규칙:
p { color: green }
과 마크업:
<p>This paragraph has <em>emphasized text</em> in it.</p>
em 요소는 p 요소로부터 color 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 않습니다.
상속되지 않는 속성
요소의 상속되지 않는 속성(Mozilla 코드에서는 가끔 reset 속성으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻습니다(속성의 요약절에 지정된 대로).
상속되지 않는 속성의 대표적인 예는 border 속성입니다. 주어진 스타일 규칙:
p { border: medium solid }
과 마크업:
<p>This paragraph has <em>emphasized text</em> in it.</p>
"emphasized text"는 테두리가 없습니다(border-style의 초기값이 none이기 때문에).
주의
inherit 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.
참조
- CSS 참고서
- CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.
inherit