🌱 기초 프론트엔드
CSS에서 !important가 뭔가요?
쉽게 이해하기
!important는 회의에서 "제 의견이 최종입니다!"라고 선언하는 것과 같아요. 다른 모든 규칙을 무시하고 무조건 이 스타일을 적용하라는 강력한 명령이죠. 하지만 너무 자주 쓰면 나중에 수정이 어려워져요.
핵심 정리
CSS 우선순위를 무시하고 스타일을 강제로 적용하는 !important의 의미와 주의점을 알아봅니다.
자세히 알아보기
CSS에서 여러 규칙이 충돌할 때 우선순위를 정하는 방법이 있는데, !important는 그 모든 우선순위를 무시하고 해당 스타일을 강제로 적용하는 키워드예요. color: red !important; 처럼 속성 값 뒤에 붙여 사용해요.
실무에서는 가능한 한 !important를 쓰지 않는 게 좋아요. 왜냐하면 나중에 스타일을 수정하려고 할 때 !important 때문에 막혀서, 또 다른 !important를 써야 하는 악순환이 생기거든요. 코드가 점점 복잡해지고 관리하기 어려워져요.
그래도 쓸 수밖에 없는 상황이 있어요. 외부 라이브러리의 스타일을 덮어써야 하는데 선택자 우선순위를 높이기 어려울 때, 또는 급하게 버그를 고쳐야 하는데 구조를 바꿀 시간이 없을 때 임시방편으로 쓰곤 해요.
하지만 장기적으로는 선택자를 더 구체적으로 작성하거나, CSS 구조를 개선하는 게 더 좋은 해결책이에요. !important는 정말 필요할 때만, 그것도 최소한으로 사용하는 게 좋습니다.