가끔씩 CSS의 속성값은 정확히 작성해줬는데 실제로 웹 내에서 확인했을 때, 내가 설정한 값으로 디자인이 나오지 않을 때가 있었다. 왜 이런 현상이 일어나는 지 궁금하여 찾아본 결과, CSS는 Cascading이란 규칙을 따르고 있다는 것을 알게되었다. 그럼 Cascading이 도대체 무엇일까?

CSS의 Cascading(캐스케이딩)

Cascading의 정의

Cascading(캐스케이딩)은 폭포가 위에서 아래로 떨어지듯, 여러 단계에 덜쳐 연쇄적으로 영향을 미치며 발생하는 흐름을 정의한 용어이다. CSS에서 캐스케이딩은 스타일 규칙이 우선순위에 따라 연쇄적으로 적용되는 원리를 뜻한다. CSS가 Cascading Style Sheets의 약자인 만큼 캐스케이딩은 CSS에서 가장 중요한 원리이다.

---

캐스케이딩 우선순위

캐스케이딩 우선순위는 3가지에 의해 결정된다

1. 중요도

2. 구체성(명시도)

3. 선언 순서

---

중요도

중요도를 결정하는 요소 및 순서는 아래와 같다.

1. 인라인 스타일 css

   태그 내에서 사용한 css 선언

2. <style>요소 내의 css

   html 파일 내에서 <style> 태그로 선언한 css

3. <link>로 연결한 css 파일

   html과 css 파일을 연결해서 선언하는 방식

4. 브라우저 스타일 시트

   브라우저 별로 기본으로 적용되어있는 값

---

구체성(명시도)

구체성은 태그, class, id 등의 선택자에 따른 우선순위다.

1. id 선택자

   id 선택자에 적용한 css 속성

2. 클래스 선택자, 가상 선택자

   class나 가상 선택자의 css 속성

3. 태그 선택자

   <div>, <select>등 태그에 적용한 css 속성

4. 전체 선택자

   * 선택자를 사용해서 태그 전체에 적용하는 css 속성

5. 부모에게 상속받은 속성

   부모 태그에게 상속받은 css 속성

!important를 사용하면 위 우선순위와 상관없이 무조건 1순위로 결정된다.

  * {
	color:red!important;
}

---

선언 순서

코드를 작성한 순서에따라 우선순위가 결정되기도 한다.

만약 3개의 class에 속성을 부여했다면 가장 아래에 선언한 css 속성이 적용된다.