[CSS] Important

안녕하세요 동기 여러분! 오늘은 !important에 대해 알아봅시다.

 

Exclamation mark Important

Specificity에서 type과 class, id 모두 같이 적용을 할시에 id만 적용되는 모습을 볼 수 있었습니다.(클릭시 Specificity 포스팅으로  이동)

 

!important를 이용해 다시 해봅시다!

<h1 class='blueclass' id='greenclass'>승자는 누구인가!</h1>

h1 {
  color: red !important;
}

.blueclass {
  color: blue;
}

#greenclass {
  color: green;
}

 

!important를 h1 { color: red 옆에 붙여 넣었더니 빨간색으로 글자가 나옵니다.

 

!important 프로퍼티를 붙일 시 적용받는 프로퍼티와 값은 다른 어떠한 프로퍼티와 값들 보다도 우선시하게 됩니다. 그래서 위와 같은 결과가 나올 수 있습니다. (말 그대로 중요한)

 

!important는 다른 stylesheet에서도 많이 사용되는데 예를 들어 부트스트랩에서도 사용이 가능합니다.

 

---

 

오늘의 느낌

크리스마스에 운동을 하러 갔는데 혼자서 운동하는 사람들이 꽤나 있었다...

그렇다...