속성 값이 적용이 되지 않을 때 - !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 important를 붙입니다.
1 min read

!important

CSS는 같은 속성을 여러 번 정의했을 때,나중에 설정한 값이 우선 순위로 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 !important를 속성값 뒤에 붙입니다.

 

기본형

selector {
  property: value !important;
}

 

예제

다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다.

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

 

하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지합니다.

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

 

다시 속성값을 재설정 하고 싶으면 !important를 다시 붙입니다.

다음은 문단의 글자색을 녹색으로 만듭니다.

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

 

기타 CSS 참조

You may like these posts

  • transform / skew transform의 skew로 요소를 비틀기 또는 기울이기를 할 수 있습니다. 평면(2D)에서의 이동입니다.   기본형 transform : skew ( value ); value에 값을 입력합니다. 단위는 deg, rad, grad 등을 사용…
  • align-items align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.   기본형 align-items : stretch | flex-start | flex-end | center | baselin…
  • transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.   기본형 transform : rotate ( angle ); angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, tur…
  • align-self align-self 속성을 이용하면 특정 플렉스 아이템을 개별적으로 배치할 수 있습니다. 플렉스 컨테이너에서 아이템 전체의 배치 방법을 결정하지만 align-self 속성으로 특정 아이템의 배치 방법을 변경할 수 있습니다. 예를 들어 display:flex 속성으로 정의된 플…
  • transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.   기본형 transform : scale ( value ); value에 값을 입력합니다. 1은 원래의 크기이고 0.5, 1.5…
  • perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.   기본형 prespective-origin : x-position | y-position x…

Post a Comment