CSS 적용 우선순위

 

CSS 적용 우선순위는 웹 페이지의 스타일을 결정하는데 중요한 역할을 합니다. 이 글에서는 CSS 적용 우선순위를 설명하겠습니다.

---

1순위. Importance(중요도)  :  

!important 키워드가 적용된 스타일은 다른 모든 스타일보다 우선시됩니다.

---

2순위. 명시도(Specificity)  : 

선택자의 특정성에 따라 우선순위가 결정됩니다. 선택자가 더 구체적일수록 우선시됩니다. 예를 들어, 아이디 선택자(#example)가 클래스 선택자(.example)보다 더 구체적입니다.

---

3순위. 순서(Origin) :

스타일 규칙이 선언된 순서에 따라서도 우선순위가 결정됩니다. 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씁니다.
따라서, 뒤에 나오는 css가 우선순위가 높습니다.

---

4순위. 상속(Inheritance)  :

마지막으로 상위 객체에 의해 상속된 속성이 적용됩니다
하위 요소가 상위 요소로부터 스타일을 상속받을 수 있지만, 
직접 스타일이 지정된 속성은 상속된 속성보다 우선시됩니다.

 

---

요약하자면 CSS 적용 우선순위는 다음과 같은 순서로 결정됩니다:,
1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성(inline방식)
3. 아이디(#id)로 지정한 속성
4. 클래스(.class), 가상선택자(:pseudo) 로 지정한 속성
5. HTML 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

 

이렇게 CSS 적용 우선순위를 이해하고 적절하게 활용하면, 웹 페이지의 스타일을 효과적으로 제어할 수 있습니다.