CSS inheritance

유관희·2022년 4월 22일
0
post-thumbnail

상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미합니다. 상속은 CSS에서 생산성을 높이기 위한 중요한 기능입니다. 이번 수업에서는 상속이란 무엇인가를 알아봅니다.

상속이란


만약 위에서 서체의 색상을 지정해야 한다면 어떻게 하면 될까요? 모든 엘리먼트의 색상을 하나 하나 지정해야 할까요? 그것 보다 효율적인 방법이 있습니다. 바로 상속을 이용하는 것입니다.

아래처럼 html의 서체 색상만 조정하면 하위에 있는 모든 엘리먼트의 색상이 자동으로 바뀌게 됩니다. 이것은 각 엘리먼트가 상위 엘리먼트의 서체 색상 값을 물려 받기 때문입니다.

html{color:gray}

이러한 기능을 상속(inheritance)이라고 합니다.

상속을 하는 속성과 하지 않는 속성

하지만 모든 속성이 상속을 지원하는 것은 아닙니다. 상속을 하면 오히려 비효율적인 속성들이 있거든요. 아래 문서를 보시면 상속하는 속성과 상속하지 않는 속성의 목록을 볼 수 있습니다.

상속하는 속성과 상속하지 않는 속성의 목록

profile
안녕하세요~

0개의 댓글