워드프레스를 사용하다 보면 분명히 CSS를 수정했는데도 배경색이나 글자 색이 전혀 바뀌지 않는 경험을 하신 적이 있을 겁니다. 저도 최근에 <th> 테이블 헤더의 색상을 변경하려다가 제대로 적용되지 않아 당황했는데요, 그 원인은 바로 CSS 우선순위 때문이었습니다.
이 글에서는 CSS 색상 변경이 먹히지 않을 때의 원인과 해결법을 쉽게 정리해드립니다.
증상: CSS background-color를 바꿨는데 색이 변하지 않는다?
예를 들어 아래와 같이 스타일을 수정했다고 가정해볼게요.
그런데 페이지를 새로고침해도 색상은 예전 그대로입니다. 이럴 때 당황하지 마세요. 문제는 브라우저나 워드프레스 자체가 당신의 스타일을 “무시”하고 있기 때문입니다.
워드프레스에서는 테마나 플러그인, 혹은 페이지 빌더가 이미 CSS를 설정해놓은 경우가 많습니다. 이럴 때는 내가 작성한 스타일이 덮어씌워져서 작동하지 않습니다.
🛠️ 해결법은: !important를 사용하세요
CSS에 다음과 같이 !important를 붙이면 최우선 적용됩니다.
단 한 줄로 강제 적용!
적용 후에는 반드시 브라우저 캐시를 새로고침 해줘야 효과가 보입니다.
♻️ 참고: 캐시와의 싸움
워드프레스는 다음과 같은 캐시가 작동하고 있을 수 있습니다:
브라우저 캐시
해결:
Ctrl + F5또는Shift + F5
워드프레스 캐시 플러그인 (예: Autoptimize, WP Super Cache)
해결: 플러그인 내에서 “캐시 삭제” 클릭
💡 워드프레스에서 CSS 커스터마이징할 때 팁
| 상황 | 해결 방법 |
|---|---|
| CSS 적용 안됨 | !important 붙이기 |
| 페이지마다 다르게 적용하고 싶을 때 | .page-id-123 th { ... } 같은 구체적인 선택자 사용 |
| 가장 안전한 적용 위치 | “외모 → 사용자 정의 → 추가 CSS”에 작성하기 |
| 자식 테마 사용 시 | style.css 마지막에 작성하기 |
✍️ 마무리하며
워드프레스에서 CSS가 적용되지 않아 고생하셨던 분들께 이 팁이 도움이 되었으면 좋겠습니다.
스타일 하나 바꾸는 것도 이렇게 복잡해질 수 있지만, !important와 몇 가지 기본 원리만 알면 훨씬 쉽게 꾸밀 수 있어요.
같은 문제 겪고 있는 분들에게 공유해주세요! 🙌
