상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미합니다. 상속은 CSS에서 생산성을 높이기 위한 중요한 기능입니다. 이번 수업에서는 상속이란 무엇인가를 알아봅니다.
상속이란
아래와 같은 코드가 있다고 가정해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="container"> <h1>수업순서</h1> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> <h1>수업참가자</h1> <ul> <li>최진혁</li> <li>최유빈</li> <li>한이람</li> <li>한이은</li> </ul></div> |
그 결과는 아래와 같습니다.
만약 위에서 서체의 색상을 지정해야 한다면 어떻게 하면 될까요? 모든 엘리먼트의 색상을 하나 하나 지정해야 할까요? 그것 보다 효율적인 방법이 있습니다. 바로 상속을 이용하는 것입니다.
아래처럼 html의 서체 색상만 조정하면 하위에 있는 모든 엘리먼트의 색상이 자동으로 바뀌게 됩니다. 이것은 각 엘리먼트가 상위 엘리먼트의 서체 색상 값을 물려 받기 때문입니다.
1 | html{color:gray} |
이러한 기능을 상속(inheritance)이라고 합니다.
상속을 하는 속성과 하지 않는 속성
하지만 모든 속성이 상속을 지원하는 것은 아닙니다. 상속을 하면 오히려 비효율적인 속성들이 있거든요. 아래 문서를 보시면 상속하는 속성과 상속하지 않는 속성의 목록을 볼 수 있습니다.
https://www.w3.org/TR/CSS21/propidx.html
이 표에서 아래 컬럼이 상속 여부를 알려주는 내용입니다.
