CSS !important 규칙이란?
CSS의 !important 규칙은 캐스케이드(cascade) 우선순위와 무관하게 특정 스타일 속성을 강제로 적용할 수 있게 해주는 강력한 도구입니다. !important가 선언된 속성은 해당 규칙이 CSS 문서의 어느 위치에 작성되었든 상관없이 항상 최우선적으로 적용됩니다.
기본 동작 원리
예를 들어 아래 스타일 시트에서는 같은 선택자 p에 대해 두 번 색상이 선언되었습니다. 이 경우 CSS의 캐스케이드 규칙에 따라 나중에 선언된 값이 우선 적용되므로, 단락 텍스트는 빨간색(#ff0000)이 아닌 검정색(#000000)으로 표시됩니다.
<style>
<!--
p {
color: #ff0000;
}
p {
color: #000000;
}
-->
</style>!important로 스타일 강제 적용하기
특정 속성이 반드시 적용되도록 보장하고 싶다면 해당 속성 값 뒤에 !important를 추가하면 됩니다. 따라서 단락 텍스트를 항상 빨간색으로 유지하고 싶다면 다음과 같이 작성합니다.
예제
<html>
<head>
<style>
p {
color: #ff0000 !important;
}
p {
color: #000000;
}
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>위 코드를 실행하면 나중에 선언된 검정색 규칙이 있음에도 불구하고, !important가 지정된 빨간색 규칙이 우선 적용되어 화면에는 빨간색 텍스트가 출력됩니다.
사용 시 주의사항
!important는 매우 편리하지만 남용하면 스타일 우선순위 관리가 어려워지고 디버깅이 복잡해질 수 있습니다. 가급적 선택자의 구체성(specificity)을 조절하는 방식으로 우선순위를 관리하고, 꼭 필요한 경우에만 !important를 사용하는 것이 좋습니다.