[CSS] !important 개념 및 사용 방법

CSS의 속성에 대한 정의가 여러번 정의되어 있다면 마지막에 정의된 속성이 적용이 된다.
만약 마지막에 정의된 속성이 아니라 가장 먼저 적용된 값을 유지시키려면 속성 뒤에 !important를 붙이면 된다.

!important란?

먼저, important는 '중요한'이라는 뜻을 갖고 있다.
이와 같이 CSS에서 !important는 중요한 요소의 속성이 변경되지 않도록 한다.
때문에 하기처럼 한 속성에 대한 정의가 여러번 되었다 하더라도 !important가 적용되어 있으면 나중에 설정한 값은 적용되지 않는다.

 

p {
  color : red !important;
}

p {
  color : blue;
}

위의 코드에서 p는 red색상의 컬러가 나온다.
다시 속성값을 변경하고 싶다면 변경하고자하는 속성 뒤에 똑같이 !important를 붙여주면 된다.

 

p{
 color : red !important;
}

p{
 color : green !important;
}

p{
 color : blue;
}

위의 코드에서 p는 red가 아니라 green이 나온다.