CSS를 작성했는데 화면에 적용되지 않을 때 확인 순서
1. CSS가 안 먹는 이유부터 이해하기
분명히 CSS를 작성했는데 화면에서 아무 변화가 없으면, 처음에는 코드 전체가 잘못된 것처럼 느껴집니다. 하지만 실제로는 대부분 단순한 연결 문제입니다. 대표적으로 파일 경로가 틀렸거나, 선택자가 대상 요소와 일치하지 않거나, 더 강한 우선순위 스타일에 덮여서 적용이 보이지 않는 경우가 많습니다.
핵심은 "CSS를 썼다"가 아니라 "브라우저가 그 CSS를 읽고, 해당 요소에, 이길 수 있는 우선순위로 적용했는가"를 확인하는 것입니다. 이 세 단계 중 하나라도 빠지면 작성한 스타일은 존재해도 화면에는 나타나지 않습니다. 그래서 순서를 정해 점검하면 훨씬 빨리 해결됩니다.
2. 가장 먼저 확인할 체크포인트
아래 항목은 CSS 미적용 이슈에서 가장 자주 걸리는 지점입니다. 순서대로 확인하면 문제 범위를 빠르게 좁힐 수 있습니다.
| 확인 항목 | 자주 나는 실수 | 즉시 확인 방법 |
|---|---|---|
| 파일 연결 | link href 경로 오타, 파일명 대소문자 불일치 | 개발자도구 Network에서 CSS 파일 200 응답 확인 |
| 선택자 일치 | .class와 #id 혼동, 오타 | Elements 탭에서 실제 class/id 값 대조 |
| 우선순위 충돌 | 더 구체적인 선택자나 inline style에 덮임 | Computed/Styles에서 어떤 규칙이 이겼는지 확인 |
| 캐시 문제 | 수정했는데 이전 CSS가 계속 보임 | 강력 새로고침(Ctrl+F5) 후 재확인 |
| 빌드 반영 | 번들러/프레임워크에서 CSS 파일이 import 안 됨 | 엔트리 파일 import 여부와 빌드 로그 점검 |
3. 문제를 빠르게 찾는 점검 순서
1) 연결부터 본다: link 태그와 파일 응답
가장 먼저 head의 link 태그를 확인하세요. 경로가 상대경로인지 절대경로인지, 폴더 위치가 맞는지 점검합니다. 그다음 Network에서 CSS 파일 요청 결과를 확인해 404인지 200인지 확인합니다. 파일이 로드되지 않으면 어떤 규칙도 적용될 수 없습니다.
2) 선택자가 맞는지 확인한다
예를 들어 .card에 스타일을 썼는데 HTML이 class="cards"라면 당연히 적용되지 않습니다. 사소해 보이지만 가장 흔한 원인입니다. 특히 복붙 작업 후 이름이 바뀌었는지 꼭 보세요. 선택자 일치만 해결해도 미적용 문제 상당수가 끝납니다.
3) 우선순위 싸움에서 졌는지 점검한다
스타일이 보이지 않을 때는 "안 들어갔다"가 아니라 "들어갔지만 졌다"일 수 있습니다. 동일 속성에 대해 더 구체적인 선택자, 더 뒤쪽 선언, inline style이 있으면 기존 규칙이 무시됩니다. 이때는 선택자 구체성을 조정하거나 선언 위치를 재정렬해 충돌을 해소해야 합니다.
4) 레이아웃 맥락까지 확인한다
스타일이 적용됐는데도 원하는 결과가 안 보일 수 있습니다. 예를 들어 width를 줬지만 부모가 flex 규칙으로 크기를 강제하면 기대와 다르게 보입니다. 따라서 단일 요소만 보지 말고 부모-자식 구조, display, position, overflow 같은 레이아웃 맥락까지 함께 봐야 정확하게 해결됩니다.
4. 재발 방지를 위한 스타일링 습관
첫째, 네이밍 규칙을 정해 클래스 이름을 일관되게 유지하세요. 둘째, 컴포넌트별 CSS 파일을 분리하고 엔트리 import를 체크리스트로 관리하세요. 셋째, 중요한 UI는 개발자도구에서 최종 Computed 값을 확인하는 습관을 들이세요. 이 세 가지가 쌓이면 "왜 안 먹지" 시간을 크게 줄일 수 있습니다.
추가로 AI에게 수정 요청을 할 때는 화면 캡처, 관련 HTML, 적용하려는 CSS, 현재 우선순위 정보를 함께 제공하면 정확도가 올라갑니다. 디버깅의 핵심은 감이 아니라 근거입니다. 로드 여부, 선택자 일치, 우선순위 충돌만 체계적으로 보면 CSS 문제는 대부분 해결됩니다.
5. 자주 묻는 질문
Q1. !important를 붙이면 바로 해결되나요?
A. 임시 해결에는 도움이 되지만 남용하면 유지보수가 어려워집니다. 원인(선택자/순서/구조)을 먼저 해결하고 최소한으로 사용하는 것이 좋습니다.
Q2. 같은 선택자인데 어떤 건 적용되고 어떤 건 안 됩니다.
A. 선언 순서 차이일 가능성이 큽니다. 동일 구체성에서는 나중에 선언된 규칙이 우선합니다. 파일 로드 순서도 함께 확인하세요.
Q3. 프레임워크 사용 중인데 CSS가 계속 덮여요.
A. 기본 스타일 시스템(예: reset, utility class, 컴포넌트 스코프)을 먼저 이해해야 합니다. 적용 레이어와 우선순위 규칙을 확인하면 충돌 해결이 훨씬 쉬워집니다.