I. CCS의 기본 - 3. 캐스케이딩 스타일 시트

CSS에서 C는 캐스케이딩(cascading)의 이니셜을 딴 것이며, 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미이다.

다시말해 CSS는 우선순위가 있는 스타일 시트 라고 할 수 있다.

즉, CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때, 우선순위에 따라 적용할 스타일을 결정하여 충돌을 피한다.

이때 스타일이 충돌하지 않게 하는 방법은 다음 두가지 방법이 있다.

스타일 우선순위	스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
스타일 상속	태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.

 

스타일 우선순위

첫 번째 원칙인 스타일 우선순위는 캐스케이딩에서 가장 중요하다.

우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다.

우선 순위는 다음 3가지 개념에 따라 지정된다.

1. 얼마나 중요한가?

웹 브라우저에 내용을 표시할 때에는 단순히 CSS소스의 스타일만 적용되는 것이 아니다.

컴퓨터 사용자가 지정한 스타일

웹 문서를 제작한 제작자의 스타일

웹 브라우저가 기본으로 정해 놓은 스타일

이렇게 세가지의 스타일을 함께 사용한다.

표의 위쪽이 더 높은 우선순위를 갖는다.

만약 여러 스타일에서 충돌이 발생할 경우, 높은 우선순위에 있는 스타일이 적용되고, 낮은 우선순위에 있는 스타일은 무시된다.

2. 적용 범위는 어디까지인가?

중요도가 같은 스타일들이 충돌한다면 어떨까?

스타일 적용 범위에 따라 우선순위를 정할 수 있다.

스타일 적용 범위가 좁을수록 우선순위가 높아진다.

단, 여기에서 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아진다.

이를 차례대로 나열하면 다음 표와 같다.

!important

인라인 스타일

id 스타일

클래스 스타일

타입 스타일

3. 소스 코드의 작성 순서는 어떠한가?

스타일 시트에서 중요도와 적용 범위가 같다면 소스의 작성 순서가 우선 순위를 결정한다. 

소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

 

 

 

스타일 상속

두 번째 원칙인 스타일 상속에 대해 알아보자.

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다.

이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.

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