CSS !Important rule(중요도 규칙)

CSS !important rule이란 무엇인가?

CSS의 !important 규칙은 속성/값에 일반적인 것보다 더 중요한 값을 추가하는 데 사용된다.

실제로 !important 규칙을 사용하면 해당 요소의 특정 속성에 대한 이전 모든 스타일링 규칙이 재정의된다!

예를 들어 보자:

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>이것은 단락이다..</p>

<p class="myclass">이것은 단락이다..</p>

<p id="myid">이것은 단락이다..</p>

</body>
</html>

위의 예에서 ID 선택기와 클래스 선택기가 더 높은 특정성을 가지더라도 세 문단 모두 빨간색 배경색이 된다. !important 규칙은 두 경우 모두 배경색 속성을 재정의한다.

p 요소 스타일은 background-color red로 설정하였고 !important를 지정하였다. 아래 p요소의 글들의 스타일은 모두 배경색이 빨강색으로 우선 지정한다. 위의 코드를 실행한 결과는 아래 그림과 같다.

!important에 관하여

!important 규칙을 재정의하는 유일한 방법은 소스 코드에 동일한(또는 더 높은) 특정성을 가진 선언에 다른 !important 규칙을 포함하는 것이다. 여기서 문제가 시작된다! 이것은 CSS 코드를 혼란스럽게 만들고 디버깅을 어렵게 한다. 특히 큰 스타일 시트를 가지고 있는 경우에는 더욱 그렇다!

여기서 간단한 예를 만들었습니다. CSS 소스 코드를 보면 어떤 색이 가장 중요한 것으로 간주되는지 잘 알 수 없다:

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>이것은 단락이다..</p>

<p class="myclass">이것은 단락이다..</p>

<p id="myid">이것은 단락이다..</p>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

!important 규칙에 대해 알게 되어 좋다. 일부 CSS 소스 코드에서 볼 수 있다. 하지만 꼭 필요한 경우가 아니면 사용하지 마시오.

아마도 !important의 한두 가지 공정한 사용

!important를 사용하는 한 가지 방법은 다른 방법으로 무시할 수 없는 스타일을 재정의해야 하는 경우이다. CMS(콘텐츠 관리 시스템)에서 작업 중이고 CSS 코드를 편집할 수 없는 경우일 수 있다. 그런 다음 일부 CMS 스타일을 재정의하도록 일부 사용자 지정 스타일을 설정할 수 있다.

!important를 사용하는 또 다른 방법은 다음과 같다. 페이지의 모든 단추에 대해 특별한 모양을 원한다고 가정한다. 여기서 단추는 회색 배경색, 흰색 텍스트, 일부 패딩과 테두리로 스타일이 지정된다:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
</style>
</head>
<body>

<p>버튼: <a class="button" href="default.asp">CSS 튜토리얼</a></p>

<p>버튼: <a class="button" href="/html/">HTML 튜토리얼</a></p>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

특정성이 더 높은 다른 요소 안에 단추를 넣으면 단추 모양이 바뀔 수 있다. 다음은 예이다:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}
</style>
</head>
<body>

<p>버튼: <a class="button" href="default.asp">CSS 튜토리얼</a></p>

<div id="myDiv">
<p>myDiv 링크 텍스트: <a href="/html/">HTML 튜토리얼</a></p>
<p>myDiv 링크 버튼: <a href="/html/" class="button">HTML 튜토리얼</a></p>
</div>

</body>
</html>

첫번째 p요소는 클래스가 button으로 지정되어 background-color #8c8c8c, color white 등이 적용이 되며

div id선택자 myDiv 가 지정이 되어 color red background-color yellow가 지정이 되도록 정의하였다.

두번째 p 요소는 div idl 선택자 myDiv에 포함이 되고 a 요소가 color red background-color yellow가 지정되고

세번째 p 요소는 div 요소와 a요소와 클래스 button의 특정성 값에 따라 color red background-color yellow 가 설정이 된다.

위의 코드를 실행한 결과는 아래 그림과 같다.

무슨 일이 있어도 모든 단추가 같은 모양이 되도록 "강제"하려면 다음과 같이 단추의 속성에 !important 규칙을 추가할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}
</style>
</head>
<body>

<p>버튼: <a class="button" href="default.asp">CSS 튜토리얼</a></p>

<div id="myDiv">
<p>myDiv 링크 텍스트: <a href="/html/">HTML 튜토리얼</a></p>
<p>myDiv 링크 버튼: <a href="/html/" class="button">HTML 튜토리얼</a></p>
</div>

</body>
</html>

위의 코드를 실행한 결과는 아래 그림과 같다.