CSS !important 개념

🔹 `!important`의 동작 방식

!important가 적용된 CSS 속성은 다른 모든 스타일 규칙을 무시하고 강제로 적용됩니다.
특히 다음을 덮어씁니다:

인라인 스타일 (style="color: red;")
더 높은 specificity(우선순위)를 가진 스타일

📌 예제:

p {
  color: blue !important;
}

p {
  color: red; /* 이 스타일은 무시됨 */
}

✅ 결과적으로 <p> 태그의 색상은 **파란색(blue)**이 됩니다.

🔹 CSS 스타일 우선순위

일반적으로 CSS의 우선순위는 다음과 같습니다:

인라인 스타일 (style="color: red;")
ID 선택자 (#id)
클래스, 속성, 가상 클래스 (.class, [attr], :hover)
태그 선택자 (div, p, h1)
전체 선택자 (*) 및 상속된 스타일

하지만, !important가 적용되면 이 모든 우선순위를 무시하고 가장 먼저 적용됩니다.

🔹 `!important` 우선순위 덮어쓰기

만약 여러 개의 !important 스타일이 있다면 더 높은 specificity를 가진 스타일이 적용됩니다.

📌 예제:

p {
  color: green !important;
}

#special {
  color: red !important;
}

✅ id="special"을 가진 <p> 태그는 **빨간색(red)**이 됩니다.
ID 선택자(#id)는 일반 태그 선택자(p)보다 specificity가 높기 때문입니다.

기존 `!important`를 덮어쓰는 방법

더 높은 specificity 사용 body p.special { color: orange !important; }
인라인 스타일에서 !important 사용 <p id="special" style="color: yellow !important;">이 텍스트는 노란색</p> ✅ style 속성이 적용된 경우, CSS의 !important보다 더 강한 우선순위를 가집니다.

🔹 `!important`의 올바른 사용법

✅ 사용하면 좋은 경우

✔ 외부 라이브러리(부트스트랩, Tailwind CSS 등) 스타일 덮어쓰기
✔ 빠른 수정이 필요한 경우
✔ 매우 중요한 스타일을 강제로 적용해야 할 때 (예: display: none !important;)

❌ 사용을 피해야 하는 경우

🚫 프로젝트 전반에 남용하면 유지보수가 어려워짐
🚫 선택자 우선순위를 제대로 설정하지 않고 !important로 해결하려는 경우
🚫 다른 스타일과 충돌이 많아질 경우 디버깅이 어려워짐

🔹 베스트 프랙티스 (Best Practices)

최대한 적게 사용하자 – !important를 남발하면 코드 관리가 어려워집니다.
더 나은 선택자를 고려하자 – !important 없이도 해결할 방법이 있는지 확인하세요.
사용할 때 주석을 남기자 – 왜 !important를 적용했는지 설명하는 주석을 추가하세요.

📌 예제 (적절한 !important 사용)

/* Bootstrap 기본 스타일을 덮어쓰기 위해 사용 */
.btn-primary {
  background-color: black !important;
}

🚀 정리

!important는 모든 스타일 규칙을 무시하고 최우선으로 적용됩니다.
인라인 스타일보다도 강력하게 적용되며, 특정 스타일을 덮어씁니다.
다른 !important 스타일을 덮으려면 specificity를 높이거나 인라인 스타일에서 사용하면 됩니다.
유지보수를 고려하여 가능한 최소한으로만 사용하는 것이 좋습니다.

더 구체적인 예제가 필요하시면 알려주세요! 😊

CSS !important 개념

목차