CSS 적용 안 됨 원인 9가지와 브라우저에서 확인하는 방법

개발자 도구 Network 탭에서 스타일시트는 분명히 200으로 내려왔습니다. 그런데 화면은 스타일이 하나도 입혀지지 않은 상태입니다. CSS 적용 안 됨 문제는 파일이 도착했는지와 그 파일이 실제로 화면에 반영되는지가 별개라는 데서 출발합니다.

브라우저가 스타일시트를 받아들이려면 형식이 맞아야 하고, 문법이 깨지지 않아야 하며, 선택자가 실제 요소와 맞아떨어져야 합니다. 세 조건 중 하나만 어긋나도 파일은 정상인데 화면만 그대로인 상황이 됩니다. 이 글은 CSS 적용 안 됨의 원인을 단계별로 나누고 확인 순서를 정리합니다.

파일이 도착한 것과 적용된 것의 차이

CSS 적용 안 됨 상태로 스타일이 빠진 웹페이지 화면

Network 탭의 200은 전송 성공만 뜻합니다. 브라우저가 그 내용을 스타일시트로 해석했는지는 별도 문제입니다. 응답 헤더의 형식 표기가 스타일시트로 지정되어 있지 않으면 최신 브라우저는 파일을 무시합니다.

이 경우 Console 탭에 형식이 맞지 않아 적용하지 않았다는 안내가 출력됩니다. CSS 적용 안 됨 상황에서 Console을 함께 열어야 하는 이유가 여기에 있습니다.

서버 설정에서 확장자별 형식 표기를 지정하면 해결됩니다. 정적 파일을 스토리지에서 서비스하는 구성이라면 업로드 시점에 형식을 지정해 주어야 합니다.

단계확인 방법통과했다는 뜻실패했을 때 증상
도착Network 탭의 상태 코드파일이 서버에서 왔음404 또는 차단 표시
형식Content-Type 헤더브라우저가 스타일로 인식파일은 있는데 무시됨
해석Elements 탭의 Styles 목록규칙이 목록에 나타남규칙이 아예 보이지 않음
일치선택자 옆의 요소 표시규칙이 요소에 걸림규칙은 있으나 적용 대상 없음
우선취소선 여부값이 최종으로 반영됨다른 규칙에 덮어써짐

가정 예시 — 실제 표시 위치는 브라우저 버전에 따라 다를 수 있음

CSS 적용 안 됨 증상은 다섯 단계 중 어디에서 끊겼는지에 따라 대응이 완전히 달라집니다. 도착 단계에서 끊겼다면 서버를, 우선 단계에서 밀렸다면 규칙을 봐야 합니다.

개발자 도구에서 이 다섯 단계를 순서대로 확인하면 원인을 대부분 한 번에 찾을 수 있습니다. 반대로 순서를 건너뛰면 이미 정상인 단계를 반복해서 확인하게 됩니다.

응답 본문이 스타일시트가 아닌 경우

경로가 틀렸는데 서버가 안내 페이지를 200으로 돌려주면, 브라우저는 스타일시트 자리에서 문서를 받게 됩니다. Response 탭을 열어 내용을 직접 보면 태그가 가득한 문서가 나타납니다.

이 유형은 Network 탭만 봐서는 절대 알 수 없습니다. 상태 코드가 정상이기 때문입니다. 본문을 눈으로 확인하는 절차가 반드시 필요합니다.

단일 페이지 애플리케이션에서는 모든 경로를 진입 문서로 넘기는 규칙 때문에 이런 상황이 자주 생깁니다. 정적 파일 경로는 규칙에서 제외하도록 설정해야 합니다.

문법 오류로 뒤쪽이 통째로 무시되는 경우

스타일시트는 중괄호가 하나만 어긋나도 그 뒤 규칙이 모두 무효가 됩니다. 파일 앞부분의 스타일은 적용되는데 뒤쪽만 적용되지 않는다면 이 유형일 가능성이 큽니다.

브라우저는 문법 오류를 크게 알리지 않습니다. 조용히 건너뛰기 때문에 개발자가 알아채기 어렵습니다. Sources 탭에서 파일을 열어 구조가 정상인지 확인하거나 검사 도구를 돌려 보는 편이 확실합니다.

주석 기호가 닫히지 않은 경우도 같은 결과를 만듭니다. 여는 기호만 남아 있으면 그 뒤 내용이 전부 주석으로 처리됩니다.

문법 오류는 눈으로 찾기 어렵기 때문에 브라우저가 규칙을 어디까지 읽었는지 확인하는 편이 빠릅니다. 아래처럼 닫는 괄호가 빠지면 그 뒤의 규칙이 통째로 무시됩니다.

style.cssCSS
.card {
  padding: 16px;
  color: #333;
/* 닫는 괄호 누락 */

.card .title {
  font-weight: 700;
}

이 경우 Elements 탭의 Styles 목록에 뒤쪽 규칙이 아예 나타나지 않습니다. 규칙이 보이지 않는다면 값을 고치는 대신 그 위쪽 문법부터 확인해야 합니다.

빌드 단계를 거치는 구조라면 빌드 결과 파일을 직접 열어 확인하는 편이 확실합니다. 원본 파일은 정상인데 결과 파일에서 규칙이 잘려 있는 경우가 있습니다.

선택자가 요소와 맞지 않는 경우

파일도 정상이고 문법도 맞는데 특정 요소에만 스타일이 걸리지 않는다면 선택자를 확인해야 합니다. 클래스 이름의 오타, 대소문자 차이, 공백 위치가 흔한 원인입니다.

Elements 탭에서 해당 요소를 선택하면 오른쪽에 적용된 규칙 목록이 표시됩니다. 여기에 내가 작성한 규칙이 아예 나타나지 않는다면 선택자가 맞지 않는다는 뜻입니다.

동적으로 클래스를 붙이는 코드가 있다면 실제 문서의 클래스 이름을 확인해야 합니다. 코드에서 의도한 이름과 실제로 붙은 이름이 다른 경우가 자주 있습니다.

우선순위에 밀려 덮어써지는 경우

규칙은 적용되었지만 다른 규칙이 더 강해서 화면에 반영되지 않는 상황도 있습니다. Elements 탭에서 취소선이 그어진 속성이 보이면 이 경우입니다.

선택자가 구체적일수록 우선순위가 높습니다. 아이디 선택자가 클래스 선택자보다 강하고, 요소에 직접 적은 스타일이 그보다 더 강합니다. CSS 적용 안 됨처럼 보이지만 실제로는 덮어써진 상태입니다.

강제 우선 지정은 마지막 수단으로 남겨 두는 편이 좋습니다. 남발하면 이후 수정이 점점 어려워지고, 결국 같은 문제가 더 자주 생깁니다.

규칙 형태대략적인 힘덮어쓰기 가능 여부확인 위치
요소 이름가장 약함쉽게 덮어써짐Styles 목록 아래쪽
클래스보통같은 층끼리는 순서대로Styles 목록 중간
아이디강함클래스보다 우선Styles 목록 위쪽
인라인 스타일매우 강함파일 규칙으로는 어려움Elements 탭의 태그 속성
!important가장 강함같은 표시끼리만 경쟁규칙 옆 표시

가정 예시 — 실제 계산은 선택자 조합에 따라 달라집니다

취소선이 그어진 값이 보인다면 규칙 자체는 도착했고 우선순위에서 밀린 것입니다. 이때는 파일을 다시 확인할 필요 없이 선택자를 조정하면 됩니다.

!important를 늘리는 방식은 당장은 해결되지만 나중에 같은 문제를 더 크게 만듭니다. 선택자를 한 단계 구체적으로 바꾸는 편이 오래갑니다.

불러오는 위치와 순서 문제

스타일시트는 나중에 불러온 쪽이 앞선 규칙을 덮습니다. 테마 스타일보다 사용자 정의 스타일을 먼저 불러오면 의도한 수정이 반영되지 않습니다.

워드프레스에서는 스타일 등록 시 의존 관계를 지정해 순서를 조정할 수 있습니다. 순서를 강제하지 않으면 플러그인 업데이트 후 순서가 바뀌어 갑자기 CSS 적용 안 됨이 발생하기도 합니다.

문서 안에 직접 적은 스타일 블록은 위치에 따라 결과가 달라집니다. 외부 파일보다 뒤에 있어야 덮어쓸 수 있습니다.

같은 이름의 규칙이 여러 파일에 흩어져 있으면 나중에 읽힌 쪽이 이깁니다. 그래서 파일을 불러오는 순서만 바꿔도 화면이 달라지는 일이 생깁니다.

워드프레스처럼 테마와 플러그인이 각자 스타일을 불러오는 구조에서는 순서를 직접 지정해 두는 편이 안전합니다. Styles 목록에 적힌 파일 이름을 보면 지금 어느 파일이 마지막으로 읽혔는지 확인할 수 있습니다.

불러오는 위치가 문서 뒤쪽이면 화면이 한 번 그려진 뒤에 스타일이 적용되어 깜빡임이 생기기도 합니다. CSS 적용 안 됨으로 보이는 증상 중 일부는 이 순서 문제입니다.

캐시가 옛 스타일을 유지하는 경우

파일을 수정했는데 화면이 그대로라면 브라우저가 옛 사본을 쓰고 있을 수 있습니다. 개발자 도구에서 캐시 사용을 끄고 새로 고쳐 화면이 바뀌면 원인이 확인됩니다.

워드프레스 캐시 플러그인이나 CDN이 있으면 브라우저 캐시를 비워도 소용이 없습니다. 플러그인 캐시를 비우고 CDN 경로를 무효화해야 새 파일이 전달됩니다.

근본적인 해결은 파일 이름이나 주소 뒤에 버전 값을 붙이는 방식입니다. 내용이 바뀔 때마다 값이 달라지면 브라우저는 새 자원으로 인식합니다.

캐시는 브라우저에만 있는 것이 아닙니다. 서버 쪽 페이지 캐시, 앞단 CDN, 워드프레스 캐시 플러그인이 각각 사본을 들고 있을 수 있습니다.

한 곳만 비우고 확인하면 결과가 그대로여서 캐시가 원인이 아니라고 판단하기 쉽습니다. 바깥쪽부터 안쪽으로 순서대로 비워 가며 확인하는 편이 확실합니다.

미디어 쿼리와 조건부 적용

화면 폭 조건이 걸린 규칙은 조건을 만족할 때만 적용됩니다. 데스크톱에서 확인하면서 모바일용 규칙이 반영되지 않는다고 판단하는 경우가 종종 있습니다.

개발자 도구의 기기 모드로 화면 폭을 바꿔 가며 확인하면 조건 경계가 어디인지 눈으로 볼 수 있습니다. Elements 탭의 규칙 목록에도 어떤 조건에서 온 규칙인지 함께 표시됩니다.

인쇄용 조건이나 다크 모드 조건이 걸린 규칙도 마찬가지입니다. 조건을 만족하지 않으면 CSS 적용 안 됨으로 보이지만 정상 동작입니다.

전처리기와 빌드 과정에서 생기는 문제

요즘은 스타일을 직접 쓰기보다 전처리기나 빌드 도구를 거쳐 만들어 내는 경우가 많습니다. 이때는 원본 파일을 고쳤는데 결과물이 갱신되지 않아 화면이 그대로인 상황이 자주 생깁니다.

감시 모드가 꺼져 있거나, 빌드가 실패했는데 이전 결과물이 남아 있는 경우가 대표적입니다. 터미널의 빌드 로그를 확인하면 실패 여부가 바로 드러납니다.

사용하지 않는 규칙을 자동으로 걷어 내는 기능이 켜져 있으면, 동적으로 붙는 클래스가 통째로 삭제되기도 합니다. 결과 파일에 해당 클래스가 남아 있는지 검색해 보면 확인됩니다.

소스맵을 켜 두면 브라우저에서 원본 파일 기준으로 위치를 볼 수 있어 확인이 훨씬 수월해집니다. 개발 환경에서는 켜 두는 편을 권합니다.

테마와 플러그인이 겹칠 때

워드프레스에서는 테마와 여러 플러그인이 각자 스타일을 등록합니다. 같은 요소를 여러 곳에서 건드리면 최종 결과가 예상과 달라집니다.

이때는 자식 테마를 만들어 수정 사항을 한곳에 모으는 방식이 안전합니다. 부모 테마가 업데이트되어도 수정 내용이 사라지지 않고, 불러오는 순서도 뒤로 밀려 우선권을 갖습니다.

플러그인이 만들어 내는 스타일은 설정 화면에서 끄거나 비울 수 있는 경우가 많습니다. 코드로 덮어쓰기보다 그쪽을 먼저 확인하는 편이 유지 관리에 유리합니다.

테마와 플러그인이 같은 요소를 서로 다른 규칙으로 잡고 있으면 어느 쪽이 이길지 예측하기 어렵습니다. 이때는 규칙을 새로 추가하기 전에 지금 적용되고 있는 규칙이 어느 파일에서 왔는지부터 확인해야 합니다.

자식 테마나 사용자 정의 스타일 영역을 쓰면 원본 파일을 건드리지 않고도 순서상 뒤쪽에 규칙을 둘 수 있습니다. 업데이트로 수정 내용이 사라지는 문제도 함께 막을 수 있습니다.

플러그인을 하나씩 꺼 가며 확인하는 방법도 있지만, 운영 중인 사이트라면 개발자 도구에서 규칙의 출처를 확인하는 편이 안전합니다. CSS 적용 안 됨의 원인이 충돌인지 아닌지는 Styles 목록만으로도 대부분 판단할 수 있습니다.

확인을 마친 뒤 정리할 것

원인을 찾았다면 어떤 단계에서 끊겼는지 한 줄로 기록해 두십시오. 형식 표기, 문법, 선택자, 우선순위, 캐시 중 무엇이었는지만 남겨도 다음 대응이 빨라집니다.

같은 유형이 반복된다면 개별 수정보다 구조를 손볼 때입니다. 스타일 등록 순서를 명시적으로 지정하고, 결과 파일에 버전 값을 붙이는 두 가지만 정리해도 CSS 적용 안 됨의 상당수가 사라집니다.

브라우저 기본 스타일과의 충돌

브라우저마다 요소에 기본 스타일이 들어 있습니다. 여백이나 글꼴 크기처럼 눈에 띄지 않는 값이 미리 지정되어 있어, 아무것도 안 했는데 화면이 어긋나 보이는 원인이 되기도 합니다.

초기화 스타일을 먼저 불러오면 이런 차이를 줄일 수 있습니다. 다만 초기화 파일이 내 규칙보다 뒤에 오면 오히려 내 스타일이 지워지므로 순서를 확인해야 합니다.

Elements 탭의 계산된 스타일에서는 최종 값이 어디에서 왔는지 함께 표시됩니다. 브라우저 기본값이 원인인지 내 규칙이 원인인지 여기서 구분할 수 있습니다.

브라우저는 아무 규칙도 없을 때 쓰는 기본값을 가지고 있습니다. 목록과 표, 버튼, 입력 요소는 브라우저마다 기본값이 달라서 같은 규칙을 적용해도 화면이 조금씩 달라 보입니다.

초기화 스타일을 먼저 불러오면 이 차이를 줄일 수 있습니다. 다만 초기화 범위가 넓으면 필요한 기본값까지 지워지므로 어떤 요소가 영향을 받는지 확인해 두는 편이 좋습니다.

실시간으로 값을 바꿔 보며 확인하기

Elements 탭에서는 규칙을 직접 수정해 결과를 즉시 볼 수 있습니다. 값을 바꿔 화면이 반응하면 그 규칙이 실제로 적용되고 있다는 뜻이고, 아무 변화가 없으면 다른 규칙에 밀리고 있다는 뜻입니다.

속성 옆의 체크 상자를 끄고 켜 보는 방법도 유용합니다. 껐을 때 화면이 그대로라면 그 속성은 처음부터 화면에 영향을 주지 않고 있던 것입니다.

여기서 확인한 값은 새로 고치면 사라집니다. 원인을 찾은 뒤에는 실제 파일에 반영하는 것을 잊지 않아야 합니다.

확인 순서를 짧게 정리하면

먼저 Console을 열어 형식 관련 안내가 있는지 봅니다. 없다면 Response에서 본문이 스타일시트인지 확인합니다. 그다음 Elements에서 규칙이 목록에 있는지, 취소선이 있는지 차례로 봅니다.

여기까지 모두 정상인데 화면이 그대로라면 캐시를 의심하면 됩니다. 이 순서를 지키면 CSS 적용 안 됨의 원인은 대부분 몇 분 안에 특정됩니다.

협업할 때 공유하면 좋은 정보

혼자 확인해서 답이 나오지 않으면 다른 사람에게 넘기게 됩니다. 이때 화면 사진만 보내는 것보다 실패한 요청 주소, Console의 첫 메시지, Elements에서 본 규칙 목록 세 가지를 함께 전달하면 확인 시간이 크게 줄어듭니다.

브라우저 종류와 버전, 접속한 주소도 함께 적어 두십시오. 환경 차이 때문에 재현이 되지 않아 시간을 허비하는 일이 자주 있습니다.

다른 사람에게 확인을 부탁할 때는 아래 항목을 함께 전달하면 왕복이 줄어듭니다.

  • 문제가 보이는 주소와 화면 크기
  • 브라우저 종류와 버전
  • Styles 목록에 규칙이 보이는지 여부
  • 취소선이 있는지, 있다면 무엇에 덮어써졌는지
  • 캐시를 끈 상태에서의 결과

항목 대부분은 개발자 도구 화면을 그대로 옮겨 적으면 됩니다. 화면 사진 한 장보다 이 목록이 원인을 훨씬 빨리 좁혀 줍니다.

CSS 적용 안 됨을 좁히는 점검 순서

CSS 적용 안 됨을 단계별로 좁혀 나가는 점검 흐름

아래 순서는 위에서부터 차례대로 확인하도록 정리한 것입니다. 앞 단계에서 원인이 드러나면 뒤 단계는 건너뛰어도 됩니다.

1단계 · 파일이 실제로 도착했는지 확인

Network 탭에서 스타일시트 요청의 상태 코드를 봅니다. 실패했다면 주소나 경로 문제이므로 규칙을 아무리 고쳐도 화면은 바뀌지 않습니다.

도착했다면 Size 열의 값이 0이 아닌지도 함께 확인합니다. 빈 파일이 오는 구성도 있습니다.

2단계 · 응답 형식 확인

Content-Type이 스타일시트로 지정되어 있는지 봅니다. 형식이 어긋나면 브라우저가 파일을 받고도 사용하지 않습니다.

오류 안내 화면이 스타일시트 자리에 오는 경우도 있으므로 Response 탭의 첫 줄을 확인하는 편이 좋습니다.

3단계 · 규칙이 목록에 나타나는지 확인

요소를 선택하고 Styles 목록에서 해당 규칙을 찾습니다. 목록에 없다면 문법 오류로 잘렸거나 선택자가 요소와 맞지 않는 것입니다.

규칙 옆에 적힌 파일 이름과 줄 번호를 보면 어느 파일이 적용되고 있는지도 함께 확인할 수 있습니다.

4단계 · 취소선과 우선순위 확인

값에 취소선이 있다면 다른 규칙에 밀린 상태입니다. 위쪽에 있는 규칙을 따라가면 무엇이 덮어쓰고 있는지 바로 보입니다.

인라인 스타일이 원인이라면 파일이 아니라 그 속성을 만드는 코드를 봐야 합니다.

5단계 · 조건부 적용 여부 확인

미디어 쿼리 안에 있는 규칙은 화면 크기가 조건에 맞을 때만 적용됩니다. 창 크기를 바꿔 가며 확인하면 조건 문제인지 알 수 있습니다.

다크 모드나 인쇄용 조건이 걸려 있는 경우도 같은 방식으로 확인합니다.

6단계 · 캐시를 끄고 다시 확인

개발자 도구에서 캐시 사용을 끄고 새로 고칩니다. 이때 정상으로 바뀐다면 옛 파일이 남아 있던 것이 원인입니다.

배포마다 파일 이름에 버전을 붙여 두면 CSS 적용 안 됨 증상이 캐시 때문에 반복되는 일을 막을 수 있습니다.

내 상황에 맞는 CSS 적용 안 됨 판단 기준

  • 스타일이 전혀 적용되지 않는다 — 형식 표기와 응답 본문을 먼저 확인합니다.
  • 일부 규칙만 적용되지 않는다 — 문법 오류나 우선순위를 확인합니다.
  • 특정 요소만 적용되지 않는다 — 선택자와 실제 클래스 이름을 대조합니다.
  • 수정 전 화면이 계속 보인다 — 캐시를 의심합니다.
  • 특정 화면 크기에서만 다르다 — 조건부 규칙을 확인합니다.

CSS 적용 안 됨을 확인하는 5단계 체크리스트

  1. Console 탭에 형식 관련 안내가 있는지 봅니다. 있으면 서버 설정 문제입니다.
  2. Response 탭에서 본문이 스타일시트인지 확인합니다. 문서가 왔다면 경로 문제입니다.
  3. Elements 탭에서 요소를 선택해 규칙 목록을 봅니다. 규칙이 없으면 선택자 문제입니다.
  4. 취소선이 그어진 속성이 있는지 확인합니다. 있으면 우선순위 문제입니다.
  5. 캐시 사용을 끄고 다시 새로 고칩니다. 화면이 바뀌면 캐시가 원인입니다.

CSS 적용 안 됨에서 흔히 생기는 오해 3가지

첫 번째, 200이면 적용된 것이라고 보는 시각입니다. 전송과 해석은 다른 단계입니다. 형식 표기가 어긋나면 받아 놓고도 쓰지 않습니다.

두 번째, 강제 우선 지정으로 해결하는 습관입니다. 당장은 반영되지만 원인은 그대로 남고 이후 수정이 점점 어려워집니다.

세 번째, 파일을 다시 올리면 된다는 생각입니다. 문법 오류나 선택자 문제라면 몇 번을 올려도 결과가 같습니다.

수정한 CSS가 반영되지 않는 대부분의 경우는 브라우저나 서버 캐시가 원인입니다. 어느 쪽 캐시를 지워야 하는지는 캐시 작동 원리와 브라우저·서버 캐시 차이에서 판별할 수 있습니다.

CSS 적용 안 됨 자주 묻는 질문

로컬에서는 되는데 서버에서만 안 됩니다

경로 대소문자, 형식 표기 설정, 빌드 산출물 차이를 먼저 비교하십시오. 세 가지 안에서 원인이 나오는 경우가 대부분입니다.

일부 브라우저에서만 적용되지 않습니다

해당 속성을 그 브라우저가 지원하지 않을 수 있습니다. Elements 탭에서 속성이 회색으로 표시되면 인식하지 못한 것입니다.

새로 고침을 여러 번 해야 반영됩니다

캐시가 남아 있다는 신호입니다. 파일 주소에 버전 값을 붙이는 방식으로 정리하면 반복되지 않습니다.

인라인 스타일이 계속 이깁니다

요소에 직접 적은 스타일은 외부 파일보다 우선합니다. 그 값을 만들어 내는 코드를 찾아 정리하는 편이 근본적인 해결입니다.

관리자 화면에만 적용이 안 됩니다

관리자 화면과 사용자 화면은 불러오는 스타일 목록이 다릅니다. 등록 위치를 확인해 보십시오.

규칙 목록에 내 파일이 아예 없습니다

파일이 문서에 연결되지 않았을 가능성이 큽니다. 문서의 연결 태그가 실제로 출력되고 있는지 확인하십시오.

개발자 도구에서 값을 바꾸면 적용됩니다

규칙 자체는 문제가 없고 파일이 화면까지 오지 못한 상태입니다. 파일 경로와 캐시를 먼저 확인해야 합니다.

특정 화면 크기에서만 적용되지 않습니다

미디어 쿼리 조건이 겹쳐 있는 경우입니다. 조건 범위가 서로 물리면 뒤에 오는 규칙이 이깁니다.

빌드한 파일에서만 규칙이 빠집니다

빌드 과정에서 사용하지 않는 것으로 판단해 제거했을 가능성이 큽니다. 클래스 이름을 코드에서 조합해 만드는 구조라면 제거 대상에서 빼 두어야 합니다.

편집팀 노트 — CSS 적용 안 됨을 직접 따져보며 정리한 기준

CSS 적용 안 됨 확인 순서를 정리한 편집팀 노트

이 글을 정리하면서 편집팀은 같은 규칙을 형식, 문법, 선택자, 우선순위 조건을 바꿔 가며 적용해 결과를 비교했습니다. 가장 자주 시간을 뺏긴 지점은 파일을 다시 저장하고 새로 고치는 동작을 반복한 순간이었습니다.

규칙이 Styles 목록에 보이는지부터 확인하면 그 반복이 사라집니다. 목록에 있으면 파일은 이미 도착한 것이므로 확인 대상이 선택자와 우선순위로 좁혀집니다.

또 하나 정리해 둔 기준은 취소선을 신호로 읽는다는 점입니다. 취소선이 보이면 CSS 적용 안 됨의 원인은 파일이 아니라 규칙끼리의 경쟁입니다.

마지막으로 !important를 늘리지 않는 방향을 권합니다. 당장은 해결되지만 다음 사람이 같은 화면을 고칠 때 훨씬 더 큰 비용을 치르게 됩니다.

핵심 요약

CSS 적용 안 됨은 전송, 해석, 선택, 우선순위라는 네 단계 중 어디선가 끊긴 상태입니다. Console의 형식 안내, Response의 실제 본문, Elements의 규칙 목록과 취소선을 차례로 확인하면 원인 위치가 특정됩니다.

Network 탭의 200만 보고 판단하지 않는 것이 핵심입니다. 이 글은 정보 제공을 위한 정리이며, 실제 적용은 사용 중인 환경에 맞춰 확인하시기 바랍니다.

함께 보면 좋은 자료와 관련 글

본문에 적은 탭 이름과 항목 위치는 2026년 8월 기준으로 확인한 내용입니다.

Leek의 블로그 홈으로

다른 속도 최적화와 문제 해결 가이드도 홈에서 모아 보실 수 있습니다.

Leek
Leek

웹·브라우저 문제 해결과 속도 최적화를 직접 확인해 기록하는 1인 블로그 운영자입니다. 브라우저·서버·CDN 캐시, 크롬·엣지·웨일 설정, 워드프레스 운영과 캐시 플러그인, 윈도우 성능 관리, 구글 계정·Gmail·구글 포토 오류까지 제가 실제로 겪고 해결한 과정을 클릭 경로와 확인 날짜로 남깁니다. 개념만 옮겨 적기보다, 어떤 순서로 눌렀고 무엇이 달라졌는지를 쓰는 데 초점을 둡니다.

기사 : 46

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다