Week 4 · 통합 점검과 디버깅
Day 23 / 42
CSS 디버깅 — 적용 안 되는 5가지 원인
"분명히 썼는데 왜 안 되지?"의 원인은 사실 몇 개 안 됩니다
10초 핵심 요약
- 원인은 딱 5가지입니다: 선택자 오타 / 우선순위 패배 / 캐시 / 저장 누락 / 상속 방해.
- Day 4에서 배운 우선순위(태그<클래스<ID)가 여기서 실전으로 쓰입니다.
!important는 문제를 해결하는 게 아니라 나중에 더 큰 문제를 만듭니다.
01
5가지 원인, 순서대로 의심하기
| 원인 | 확인 방법 |
|---|
| 선택자 오타 | 클래스 앞 점(.) 빠짐, 철자 오류 |
| 우선순위 패배 | Styles 패널에 취소선(color) |
| 캐시 | Ctrl+Shift+R로 강제 새로고침해도 그대로인지 |
| 저장 누락 | 파일을 실제로 저장했는지, 빌드 결과에 반영됐는지 |
| 상속 방해 | 부모 요소의 다른 속성이 자식에 영향을 주는지 |
02
우선순위 점수 계산법
ID는 100점, 클래스는 10점, 태그는 1점입니다. 선택자를 조합해서 쓰면 점수가 합산됩니다. 점수가 높은 쪽이 이깁니다. #sidebar .title은 100+10=110점, .post-card .title은 10+10=20점 — 앞쪽이 이깁니다.
흔한 충돌 원인 — 외부 CSS 리셋이나 다른 곳에서 가져온 컴포넌트가 ID 선택자를 쓰고 있으면, 내가 만든 class 선택자가 우선순위에서 집니다. 해결책은 !important가 아니라, 선택자를 더 구체적으로(상위 요소를 앞에 추가) 만드는 것입니다.
03
!important를 피해야 하는 이유
!important는 우선순위 계산을 무시하고 무조건 이기는 치트키입니다. 편해 보이지만, 나중에 그보다 더 센 규칙이 필요하면 또 !important를 써야 하고, 결국 CSS 전체가 !important 범벅이 되어 어느 것도 수정할 수 없는 상태가 됩니다.
안 될 때 확인하세요
위 표 순서(오타 → 우선순위 → 캐시 → 저장 → 상속)대로 하나씩 지워나가세요. 대부분은 앞의 2가지(오타, 우선순위)에서 해결됩니다.
04
Day 23 완료 체크리스트
우선순위 점수 계산법(ID/클래스/태그)을 설명할 수 있다.
일부러 우선순위 충돌을 만들고 선택자 구체성으로 해결해봤다.
스스로 설명해보기 — !important를 쓰는 대신 우선순위(specificity)를 높이는 게 왜 더 나은 해결책인지 설명할 수 있나요?
오늘의 용어
우선순위(specificity)
ID(100)+클래스(10)+태그(1) 점수 합산으로 승자를 정하는 CSS 규칙
!important
우선순위 계산을 무시하고 무조건 이기는 예외 규칙 (남용 금지)