CSS - 계단식 ( Cascade )

웹 프로젝트를 진행하다 보면 요소에 적용시킨 CSS 가 제대로 작동하지 않는 현상이 발생하는 경우가 있습니다. 보통 이런 상황에서 가장 먼저 확인해야할 사항은 동일 요소에 두 가지 규칙이 작성되었는지를 확인하는 것입니다. 

 

CSS에는 동일 요소에 두 가지 규칙이 작성되었을 때 계단식(Cascade)과 밀접하게 관련된 우선 순위 개념을 사용하여 충돌을 제어합니다. 

---

계단식

CSS에서는 규칙의 순서가 매우 중요합니다. 동일한 요소에 적용된 두 가지 규칙에 대해서 CSS는 마지막에 나오는 규칙이 사용됩니다.

 

아래의 예시에서는 h1에 대해 2가지의 스타일을 적용합니다. 하나는 글자의 색을 빨강으로 하나는 글자의 색을 파랑으로 설정했습니다.

<style>
h1{ color:red;}
h1{ color:blue;}
</style>

 

계단식이 적용

 

CSS는 이처럼 중첩된 단락이 본문에 적용되는데 3가지 요소를 이용하여 적용합니다.

 

Importance > 우선 순위 > 소스 순서

 

1. 소스 순서

 위의 예시에서 적용된 요소가 소스 순서입니다. 우선 순위와 Importance가 동일한 규칙에 경우 마지막에 오는 규칙을 우선 적용합니다. 

 

2. 우선순위

소스 순서는 앞에 존재하지만 마지막에 나오는 규칙보다 더 높은 우선 순위를 가지는 규칙은 소스 순서를 무시하고 적용됩니다. 어떤 규칙이 더 우선인가는 선택자의 종류에따라 달라집니다. 선택자의 우선 순위는 4개의 값을 사용하여 측정합니다.

 

• Thousands : 선언이 인라인 스타일인 style 속성 안에 있으면 Thousands 열에 1점을 얻습니다.
• Hundreds : 전체 선택자에 포함된 각 ID 선택자에 대해 Hundreds 열에 1점을 얻습니다.
• Tens : 이 선택한에서 전체 선택자 내에 퍼함된 각 class 선택자. 속성 선택자는 1점을 얻습니다.
• Ones : 각 요소 선택자 는 1점을 얻습니다.

선택자	Thousands	Hundreds	Tens	Ones	Total
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
요소의 style 속성 안에 규칙이 있는 선택자가 없습니다	1	0	0	0	1000

3.!important

위에 설명한 소스 순서와 우선 순위를 모두 무효화하는 명령어 입니다.

 

예를 들어, 아래와 같은 코드가 있다면 소스 순서 상 blue가 적용됩니다. 

<style>
h1{ color:red;}
h1{ color:blue;}
</style>

계단식이 적용

하지만 !important를 사용하면 red를 강제로 적용 시킬 수 있습니다.

<style>
    	#h1test2{
        	color:red !important;
            border : 10px solid orange;
            background-color : green;
        }
        #h1test2{
        	color:blue;
            border : 10px solid black;
            background-color : blue;
        }
    </style>

 

계단식이 적용

 

위 예시에서 보이는 것처럼 순서상 마지막에 언급된 규칙으로 출력이되서 파란색 글씨에 파란 배경 이 출력되어야 하지만 !important 속성으로 인해 빨간 글씨에 파란배경이 나오는 것을 볼 수 있습니다. 이처럼 꼭 반드시 적용되어야 하는 스타일에는 !important 속성을 사용할 수 있습니다.