HTML& CSS/CSS

스타일의 상속(inheritance)

본클라쓰 2011. 3. 31. 12:06

 

 CSS에서 상속은 매우 중요한 역할을 합니다.

 

 HTML 문서는 집합적 트리구조로 이루어져 있습니다. 따라서 루트 엘레멘트를 기준으로 자식 엘레멘트들이 뻗어가는 구조이 문서가 구성되는 때 이 때 여러 자식 엘레멘트를 가진 부모 엘레멘트에 자식들의 기본 스타일을 지정하여 자식 엘레멘트들이 모두 같은 스타일의 속성을 사용하는 것이 CSS의 상속입니다. CSS의 상속은 HTML 문서의 구조적 특성을 활용하기 위한 방법입니다.

 

 CSS의 상속은 HTML 문서의 스타일을 전체적 관점에서 제작할 수 있는 방법을 제공합니다. 다음과 같은 문서는 <h>태그가 부모 엘레멘트가 되고 <em>이 자식 엘레멘트가 됩니다. 이 때 <h> 엘레멘트에 글자색을 지정하면 <em>엘레멘트에도 그대로 글자색이 상속되어 적용됩니다.

 

 

 결과는 아래와 같습니다.

 

 또한 상속은 외부 스타일 시트, 내부 스타일 시트, 태그 엘레멘트에 직접 작성한 스타일 정의 등 다양한 스타일이 존재할 때 적용되는 스타일을 결정하는 데도 중요한 역할을 합니다.