css 캐스케이딩 - 스타일 적용 우선 순위

CSS는 Cascading Style Sheet의 약자라는 것을 처음 알았다.

 

여기서 Cascading이란 '폭포' '위에서 아래로 흐르는' 등의 뜻이 있다.

이것이 무엇을 의미하냐면 수많은 css 선택자들 중 어떤 것이 가장 우선 선택자인지를 구분하는 기능을 의미한다.

 

예를 들면 동일한 태그 내의 class 선택자에 red color를 적용하고, id 선택자에는 blue color를 적용했을 때

id 선택자가 우선순위가 높기 때문에 blue 컬러가 적용된다. 

캐스케이딩 우선순위

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

 

1. 중요도

2. 구체성(명시도)

3. 선언 순서

 

그럼 각 개념별로 자세하게 알아보자. 

 

중요도

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

 

1. 인라인 스타일 css

- 태그 내에서 사용한 css 선언

2. <style>요소 내의 css

- html 파일 내에서 <style></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 속성

 

그리고 이 위의 모든 것을 뛰어넘어 강제로 1순위로 만드는 치트키가 있다.! 바로..

!important

* {
	color:red!important;
}

위와 같이  쓰면 작성하면 가장 중요한 속성값으로 적용된다.

선언 순서

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

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

아래와 같은 경우 가장 아래에 선언한 blue 컬러가 적용된다.

.title_1{
	color: red;
}
.title_1{
	color: green;
}
.title_1{
	color: blue;
}

 

---

가끔 css가 적용되지 않은 경우가 있는데

이런 경우 캐스케이딩 고려하여 css를 다시 한번 점검하면

문제를 찾을 수 있다.