CSS 적용이 이상해? 그럼 CSS 우선순위를 봐

HTML에 CSS를 적용하는 과정에서 내가 원하는 대로 적용이 안 되는 경우가 너무 많다. 이때 내가 정확하게 적용했나? 오타가 발생한 것은 아닌가?를 먼저 따져본다. 아무리 봐도 정확하고 오타가 없는데 적용이 되지 않는다? 그렇다면 우선순위를 확인해 보자.

 

1. !important

해당 키워드는 적용하고 싶은 스타일 속성의 옆에 작성하여 사용할 수 있다.

main { color: blue !important; }

해당 키워드를 사용하게 되면 기존 우선순위를 무시하고 원하는 속성을 적용할 수 있다. 순서를 무시하고 싶고 가능한 경우에는 정말 편리하지만, 너무 좋다고 생각 없이 사용하다 보면 머리가 아파질 수 있기 때문에 사용은 최대한 자제해야 한다.

2. 우선순위

우선순위를 따져보자면 점수를 부여하게 된다. 이때 점수를 부여하는 기준은 까다롭지만 간단하게 본다면 detail의 차이이다. 얼마나 명확하게 스타일이 적용되는 것을 알려주느냐에 따라 점수가 다르게 부여된다.

점수	기준
1000	스타일이 인라인 즉 HTML의 style 속성에 적용되어 있다면 선택자는 없지만 1000점을 얻는다.
100	ID 선택자
10	Class 선택자, 속성 선택자 또는 pseudo-class
1	각 요소 선택자, pseudo-element

3. 소스(코드) 순서

CSS에서 C는 cascading에서 가져온 알파벳으로 계단식이라는 의미를 가지고 있다.

계단식의 의미는 같은 가중치를 가지고 있는 스타일이 있을 때, 최하단에 있는 스타일이 적용된다는 의미이다.

좀 더 풀어보자면

'계단을 내려간다'

즉,

'상단의 스타일부터 적용하며 하단으로 내려간다'

와 같은 말로 중복되는 속성은 가중치가 같다면 아래 스타일로 덮인다라는 말로 이해했다.

 

큰 틀에 대해서는 설명했지만 코드 구현은 역시 직접 경험해 보면서 하는 것이 제일 빠르다고 생각한다.

어려우면 절망하지 말고 다시 공부하고 시도하기!!

 

참고 및 출처

MDN- 계단식 및 상속, 2023.10.24

Inpa Dev - CSS 속성 상속 개념 & 적용 우선순위, Inpa,  2023.10.24

CSS선택자 우선순위: 점수 매기기, 영벨롭, 2023.10.24