(CSS)! important에 대해 알아보기

by

CSS(Cascading Style Sheets)

  • HTML 요소는 하나 이상의 스타일의 영향을 받을 수 있는 대문에 적용할 스타일에 대한 우선순위를 결정해야 합니다. (이것을 캐스케이딩이라고 한다.)

Cascading

  • CSS Cascading은 CSS가 요소에 적용하는 스타일의 우선 순위를 결정하는 데 사용하는 알고리즘
  • CSS Cascade는 어떤 스타일을 적용할지를 결정하기 위해 몇 가지 기준을 고려합니다. 그 기준은 다음과 같습니다.
  1. Relevance
  2. Origin and Importance
  3. Specificity(특이성)
  4. Order of Apperance(작성 순서)
  • 일반적으로 CSS를 만들 때 3번과 4번을 신중하게 고려해야 합니다.
  • !important는 두 번 고려하는 순서와 관련이 있습니다.

자세한 내용은 아래 링크를 참조하십시오.

Introducing the CSS Cascade – CSS: Cascading Style Sheets | MDN

! important란?

css 적용시, !important 가 붙으면 Cascading 선택할 때 우선순위에 둔다.

'추천 관련글,

!important 가 붙은 스타일은 important 선언으로 해, 그 외의 스타일은 normal 선언이라고 한다.

p {
  color: red !important;
}
p {
  color: blue;
}

위의 예에 이런 식으로 important 선언을 적용하면 p 태그에는 빨간색이 적용됩니다.

!importnant 가 붙으면(자), Cascade 는 기준의 2 번째의 기준인 Origin 기준을 평가할 때, 다음의 순서로 평가한다.

  1. Transition
  2. Important User-Agent
  3. Important User
  4. Important Author
  5. 애니메이션
  6. 작성자
  7. 사용자
  8. User-Agent

보면 !important가 선언되었지만 Cascade에서 가중치가 증가하고 우선 순위가 반전되는 것을 확인할 수 있습니다.

! important 작성해야합니까?

  • !important는 가능한 한 사용하기 어렵다. important 선언은 다시 스타일을 덮어쓰기 위해서도 important 선언을 사용해야 하기 때문에 important 수가 점점 늘어날 수 있기 때문이다.
  • !important 를 사용하는 경우에는, 재정의하지 않게 주석을 붙이는 것이 좋다고 한다.

그래도 사용하는 경우?

1. 기존 스타일을 변경할 수 없는 상태에서 새 스타일을 덮어써야 할 때

  • 어쨌든 Cascading의 순서를 잘 고려하여 스타일을 적용하는 것이 가장 좋지만 이전 코드를 수정하는 것은 어려운 상황이있을 수 있습니다.
  • 그럴 때 important 선언을 사용할 수 있다. 그러나 앞서 언급했듯이 가능한 한 적게 사용하는 것이 좋습니다. Important를 다시 Important로 덮어 쓰는 상황은 가능한 한 피하는 것이 좋습니다.

2. utility class

  • 버튼을 예로 들어 보겠습니다.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#" class="button">BUTTON</a>
  </body>
</html>

  • 위와 같이 버튼의 스타일을 한 번에 지정해 두고, 어느 요소를 배치해도 같은 스타일이 나오게 하는 경우를 예로 들어 보면, 이하와 같이 보다 높은 특이성을 가지는 스타일이 있을 때에 문제가 있을 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 3px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>This is a
        <a href="#" class="button">BUTTON</a>
      </p>
    </section>
  </body>
</html>
직접 해보기 »

  • button 클래스를 가지는 요소라면, 반드시 같은 스타일을 적용하고 싶은 경우는!important 를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 3px solid #666 !important;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>This is a
        <a href="#" class="button">BUTTON</a>
      </p>
    </section>
  </body>
</html>

3. 사용자 스타일 시트

  • !important는 원래 거의 사용자 스타일 시트를 위해 사용되었다고 한다.
  • 사용자 스타일시트는 사용자가 직접 스타일링하여 방문하는 모든 페이지에 적용하도록 웹 브라우저에 지시합니다.
  • 주석을 숨기거나 광고를 숨기거나 글꼴을 올리는 등 사용자 본인이 좋아하는 스타일을 어느 정도 바꿀 수 있다.
  • 그래서 지금은 사용자 스타일 시트를 거의 사용하지 않으므로 큰 의미가없는 것 같습니다. (Chrome은 사용자 스타일 시트를 사용하기 위해 확장 기능이 필요하며 Firefox는 개발자 도구에서 옵션을 사용 설정하면 사용할 수 있습니다. Safari는 간단히 사용할 수 있습니다.)