스타일 상속

예제를 보면 animal이라는 클래스에 해당하는 요소들에 대해 글자색을 빨간색으로 적용하겠다고 명시하고 있다.

HTML의 요소 중에 class가 animal인 요소는 내용이 동물인 div 요소 하나 뿐이지만, 실제 화면에 출력된 결과를 보면

동물, 호랑이, 사자, 코끼리 모두에 빨간색이 적용된 것을 확인할 수 있다.

이는 "스타일 상속" 때문인데, animal 클래스의 하위 요소들 모두에게 스타일이 상속되어 적용된 것이다.

 

하지만 모든 CSS 속성들이 상속되는 것은 아니다. 자동적으로 상속되는 속성들을 보면 모두 글자/문자와 관련된 속성들이며 그렇다고 모든 글자/문자 관련 속성들이 자동 상속되는 것도 아니다.

우리가 자주 사용하는 속성들은 대부분 다 자동적으로 상속이 되며, 자동적으로 상속되지 않는 CSS 속성들을 강제로 상속시킬 수도 있다.

 

width와 height는 자동적으로 상속되는 속성이 아니기 때문에 부모와 자식 요소에 각각 적용되는 것을 확인할 수 있다.

자식의 속성 중에서 부모와 항상 같은 값을 만들고자 하는 속성이 있다면 그 속성은 상속받아 사용하면 부모 요소의 속성만 변경해주면 자식 요소의 속성 값은 자동으로 부모와 같은 값으로 지정된다.

이처럼 속성의 값을 inherit으로 명시하여 부모로부터 속성 값을 강제로 상속받아 사용할 수 있다.