CSS - !important

Css의 적용에는 순서가 있어서 뒤에서 적용된 Css가 우선적으로 적용된다.

 

그런데 이런 적용을 무시하고 항상 최우선으로 적용하려고 쓰는 것이 !important이다.

 

.d-block{
  height:600px !important;
  margin:0 auto;
}
.d-block{
  height:1000px;
  margin:0 auto;
}

 위 처럼 선언되면 뒤에 있는 height:1000px가 적용되는 것이 맞지만 !important가 있는 height:600px가 우선순위를 가지므로 적용된다.

 

가끔 bootstrapt를 사용하면 !important로 인해서 원하는 크기가 안먹히는 경우가 있다.

위와 같은 상황을 해결하기 위해서 아래와 같이 max를 이용한다.

.w-100{
  max-width:600px;
  height:600px;
  margin:0 auto;
}