[CSS] CSS 우선순위 이해하기

❓ CSS 우선순위란?

CSS 우선순위는 여러 스타일 규칙 중에서 어떤 것이 실제로 적용될지를 결정하는 규칙이다.

즉, 여러 스타일이 정의된 경우, 어떤 스타일이 더 중요한지를 결정하는 방식이다.

예를 들어, 같은 요소에 대해 두 가지 스타일 규칙이 있을 때, 우선순위에 따라 어떤 스타일이 최종적으로 보일지 결정된다.

 

❗ 우선순위

1. !important

!important를 사용하면, 특정 스타일이 다른 모든 스타일 규칙보다 우선적으로 적용된다. 끝판왕!

가장 강력한 우선순위를 가지지만, 남용하면 CSS 관리가 어려워질 수 있으니 주의하자.

이 경우, 다른 스타일 규칙은 전부 무시되고 모든 p 요소에 color: black;이 적용됨.

p { color: black !important; }

 

 

2. 인라인 스타일

HTML 요소에 직접 작성된 스타일. 가장 높은 우선순위를 가진다. (!important 제외)

<div style="color: red;">안녕하세요!</div>

 

 

3. ID 선택자

#id 형식의 ID 선택자는 높은 우선순위를 가진다.

#header { color: blue; }

 

 

4. 클래스 선택자와 속성 선택자

.class 및 [attribute] 형식의 선택자는 중간 우선순위를 가진다.

.button { color: green; }
[type="text"] { color: black; }

 

 

5. 요소 선택자

div, p와 같은 요소 선택자는 가장 낮은 우선순위를 가진다.

p { color: orange; }

 

---

📝 정리

1. 우선순위: !important > Inline style > id > class > tag > *

 

---

💡 참고 문헌

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

명시도 - CSS: Cascading Style Sheets | MDN