[CSS 입문] 캐스캐이딩 스타일 시트(CSS)

1. 캐스캐이딩(Cascading)이란?

CSS에서 'C'는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 스타일 간의 충돌을 막기 위한 방법으로 이 방법에는 '스타일 우선순위'와 '스타일 상속'의 두 가지 원칙이 있습니다.

2. 스타일 우선순위

스타일 우선순위는 캐스캐이딩에서 가장 중요한 원칙입니다.  어떤 스타일을 먼저 적용할 것인지 결정하는 규칙으로 다음의 세가지 개념에 따라 지정됩니다.

① 중요도(Importance)

사용자 스타일 시트의 중요 스타일 ☞ 제작자 스타일 시트의 중요 스타일 ☞ 제작자 스타일 시트의 일반 스타일 ☞ 사용자 스타일 시트의 중요 스타일 ☞ 브라우저 스타일 시트의 스타일

- 사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자에 맞게 구성해 놓은 스타일 시트를 말한다.

- 사용자 스타일 시트는 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없다.

- 제작자 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다.

- 브라우저 스타일 시트란 브라우저들마다 기본적으로 지정하고 있는 스타일입니다.

② 명시도(Specificity)

인라인 스타일 ☞ id 스타일 ☞ 클래스 스타일 ☞ 태그 

③ 소스에서의 순서(Source Older)

소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씁니다.

3. 스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 합니다.

스타일 상속에서 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소 상속되는 것이 아니라는 점입니다. 글자 색은 자식요소로 상속되지만 부모 요소에 배경 이미지나 배경 색이 있으면 자식 요소에 상속되지 않습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석