CSS 상속과 캐스케이딩

1. 상속(Inheritance)

'상속'이란 하위 요소(자식, 자손)가 상위 요소(부모, 조상)로부터 특정 CSS 속성을 물려받는 것을 의미한다.

상속의 개념이 없다면 글꼴, 글씨크기, 글색상 같은 스타일 속성들을 모든 요소마다 각각 지정해줘야 할 것입니다. 그러므로 상속은 CSS에서 생산성을 높이기 위한 중요한 기능입니다.

하지만 모든 CSS 속성이 상속되는 것은 아닙니다. margin 같은 경우는 하위 요소가 상위 요소의 속성 값들을 물려받는 경우가 거의 없으므로 상속되지 않습니다.

대부분의 경우, 상식적으로 생각하면 어떤 속성들이 상속되고 어떤 것들이 그렇지 않을지 쉽게 짐작할 수 있습니다.
구체적인 상속 여부를 확인하려면 CSS 2.1 명세의 속성 요약 테이블을 참고하세요.

상속되지 않는 속성들은, inherit 속성 값을 사용하여 명시적으로 상속받게 할 수 있습니다.

'캐스케이딩'은 하나의 요소에 여러 속성들을 선언할 때 생기는 충돌을 충돌을 피하는 규칙을 말한다.

캐스캐이딩에는 다음과 같이 세가지 규칙이 있습니다.

CSS 선언의 중요도는, 그것이 '어디' 에서 사용되었는가에 따라 다릅니다. 다음의 순서 대로, 나중 선언이 앞선 선언을 덮어쓰고 요소에 적용됩니다.

CSS 속성을 줄 때 !important를 뒤에 붙이면 우선순위가 가장 높아집니다.

div {
    font-size: 24px !important;
}

명시도란 규칙의 선택자가 얼마나 명확하게 요소를 지정하고 있는지 측정한 것입니다. 명시도가 낮은 선택자는 넓은 범위의 요소들에 적용될 것이며, 명시도가 높은 선택자는 페이지의 단 하나의 요소만 선택하고 있을 수도 있습니다.

하나의 요소를 가리키는 선언이 두개 있고, 두 선언의 중요도와 명시도가 모두 같다면, 나중에 나온 선언을 선택하게 됩니다.