!important 규칙은 웹페이지의 스타일을 강제로 덮어쓸 때 사용하는 선언입니다. 하지만 솔직히 말하면, !important를 '꼭 써야 하는' 경우보다 '쓰지 않아야 하는' 경우가 훨씬 많습니다. 이 글에서는 !important의 실제 활용 사례를 먼저 살펴본 뒤, 왜 신중하게 아껴 써야 하는지 함께 정리해 보겠습니다.
CSS 프레임워크의 기본 스타일 덮어쓰기
CSS를 작성하다 보면 이미 제공된 스타일시트를 덮어써야 하는 순간이 옵니다. 예를 들어 Bootstrap처럼 프로젝트를 빠르게 시작할 수 있게 도와주는 CSS 프레임워크를 사용할 때, 프레임워크에 내장된 스타일을 내 입맛대로 바꾸고 싶어질 수 있죠.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
위 코드의 모든 내용을 한 번에 이해하지 못해도 걱정하지 마세요. 일단 실행 버튼을 누르고, 스스로 파악할 수 있는 부분에 집중해 보세요. 클래스나 id가 지정된 HTML 구조, Bootstrap에서 불러온 것으로 보이는 외부 스타일시트 링크, 그리고 문서의 <head> 안에 정의되어 있는데도 화면에 제대로 반영되지 않는 커스텀 스타일이 있다는 정도면 충분합니다.
이제 .nav 셀렉터 안의 background-color: pink; 뒤에 !important를 입력해 보세요. 이때 색상 값과 !important 사이에는 반드시 공백을 하나 넣어야 합니다. 입력했다면 코드를 다시 실행해 보세요. 네비게이션 바의 배경색이 분홍색으로 바뀌었나요?
이것이 !important 규칙의 첫 번째 활용 사례입니다. CSS 프레임워크나 다른 소스에서 제공되는 기본 스타일시트가 있을 때, !important를 사용하면 해당 스타일의 우선순위를 높여 Bootstrap이 기본으로 적용하는 디자인을 성공적으로 덮어쓸 수 있습니다.
인라인 스타일 덮어쓰기
두 번째 활용 사례는 요소에 직접 작성된 인라인(inline) 스타일을 덮어써야 할 때입니다. 인라인 스타일은 CSS 우선순위(cascade)에서 매우 높은 위치를 차지하기 때문에, 일반적인 외부 스타일시트나 <style> 태그의 규칙으로는 쉽게 변경되지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
위 코드를 보면 <body> 안의 일부 리스트 항목에는 인라인 스타일이 직접 지정되어 있고, <style> 태그에는 이를 덮어쓸 수 있는 잠재적 규칙들이 준비되어 있습니다. 각 선언 뒤에 !important를 붙여 인라인 스타일보다 우선순위를 높여 보세요. 그러면 <style> 태그의 스타일이 화면에 그대로 반영됩니다.
!important 사용 시 주의사항
마지막으로 꼭 기억해야 할 점이 있습니다. !important 규칙은 결코 모범 사례(best practice)가 아니며, 최대한 아껴서 사용해야 합니다. 특정 선언에 강제로 최고 우선순위를 부여하기 때문에, 코드베이스가 커지면 어떤 스타일이 어디서 왜 적용되는지 추적하기 어려워지고, 나중에 원인을 찾기 힘든 버그로 이어질 수 있습니다.
만약 프레임워크를 사용하지 않는 상황에서 !important가 필요하다고 느껴진다면, 대부분은 셀렉터 구조를 재구성하거나 선택자의 구체성(specificity)을 조정하는 방식으로 동일한 결과를 얻을 수 있습니다. !important는 어디까지나 최후의 수단이라는 점을 명심하세요.