[css] 선택자 우선순위
CSS(Cascading Style Sheets)에서 선택자 우선순위는 스타일을 적용하는 데 있어서 중요한 역할을 합니다. 선택자 우선순위는 스타일 규칙이 적용되는 우선 순위를 결정하며, 다양한 선택자와 스타일 규칙이 섞여 있을 때 어떤 스타일이 최종적으로 적용될지를 결정합니다.
기본 우선순위
- 인라인 스타일 : HTML 요소에 직접 적용된 스타일은 다른 선택자에 의해 재정의될 수 없습니다.
- ID 선택자 :
#으로 시작하는 선택자로 지정된 스타일은 클래스 선택자보다 높은 우선순위를 갖습니다. - 클래스 선택자 및 속성 선택자 :
.class나[attribute]로 지정된 스타일은 태그 선택자보다 우선시되며, 같은 우선순위를 갖습니다. - 태그 선택자 : HTML 태그 이름을 사용하여 지정된 스타일은 가장 낮은 우선순위를 갖습니다.
선택자 우선순위 규칙
다음은 선택자 우선순위를 효과적으로 사용할 수 있는 몇 가지 규칙입니다.
명시도(Specificity)
선택자가 얼마나 명시적으로 정의되었느냐에 따라 우선순위가 정해집니다.
- 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자
중요성(Importance)
!important 키워드가 사용된 스타일은 다른 모든 스타일보다 우선시됩니다.
순서
스타일 규칙이 CSS 파일에서 선언된 순서에 따라 우선순위가 결정됩니다. 나중에 선언된 규칙일수록 우선시됩니다.
결론
CSS 선택자 우선순위를 이해하여 웹 페이지의 스타일을 관리하는 데 도움이 됩니다. 명시도, 중요성, 순서에 주의하여 적절한 선택자를 사용하고, 스타일 규칙을 효율적으로 적용하여 웹 페이지의 디자인을 제어할 수 있습니다.
참고 문헌