CSS에서 스타일 규칙이 적용되는 우선순위
CSS에서는 동일한 요소에 여러 스타일 규칙이 충돌할 경우, 어떤 규칙이 최종적으로 적용될지 결정하는 명확한 우선순위 체계가 존재합니다. 스타일을 효과적으로 관리하려면 이 우선순위 규칙을 정확히 이해하는 것이 필수적입니다.
1. 인라인 스타일 (Inline Style) — 가장 높은 우선순위
HTML 요소에 직접 지정하는 인라인 스타일시트가 가장 높은 우선순위를 갖습니다. 따라서 인라인 스타일은 <style>...</style> 태그 내에 정의된 규칙이나 외부 스타일 시트 파일에 정의된 어떤 규칙보다도 우선적으로 적용되어, 기존에 선언된 모든 규칙을 덮어쓰게 됩니다.
<p style="color: red;">이 문장은 항상 빨간색으로 표시됩니다.</p>2. 내부 스타일시트 (<style> 태그) — 중간 우선순위
<style>...</style> 태그 안에 정의된 내부 스타일시트의 규칙은 외부 스타일 시트 파일에 정의된 규칙보다 우선순위가 높습니다. 즉, HTML 문서 내부에 선언된 규칙이 외부 CSS 파일의 규칙을 재정의(override)할 수 있습니다.
3. 외부 스타일시트 (External Stylesheet) — 가장 낮은 우선순위
<link> 태그로 연결된 외부 스타일 시트 파일의 규칙은 세 가지 방식 중 가장 낮은 우선순위를 가집니다. 외부 파일에 정의된 규칙은 위의 두 방식(인라인 스타일, 내부 스타일시트)으로 지정된 규칙이 없을 때에만 적용됩니다.
우선순위 요약
세 가지 스타일 적용 방식의 우선순위를 정리하면 다음과 같습니다.
- 인라인 스타일 — 최상위 우선순위, 모든 규칙을 재정의함
- 내부 스타일시트 — 인라인 스타일에는 밀리지만 외부 스타일시트보다는 우선함
- 외부 스타일시트 — 최하위 우선순위, 다른 규칙이 없을 때만 적용됨
참고로, 이러한 일반적인 우선순위와 별개로 CSS 선택자의 구체성(specificity)과 !important 선언도 최종 적용 결과에 영향을 미치므로, 실무에서는 이를 함께 고려하여 스타일을 설계하는 것이 좋습니다.