CSS 적용이 안 될 때 체크해 봐야 할 3가지 원인

개발자의 머리를 지끈거리게 하는 CSS 적용의 수수께끼

웹사이트를 만들거나 디자인을 수정할 때 가장 당황스러운 순간 중 하나는 분명히 코드를 작성했는데 화면에는 아무런 변화가 없을 때입니다.

내가 짠 코드가 도대체 어디로 갔는지, 브라우저는 왜 내 마음을 몰라주는지 답답하기만 합니다. 머릿속으로는 멋진 레이아웃과 화려한 색상을 상상하며 스타일시트를 채워나갔지만, 막상 브라우저를 새로고침해 보면 원하던 결과는 나오지 않고 기존의 밋밋한 화면만 반겨줄 때가 많습니다.

코딩을 처음 접하는 초보자뿐만 아니라 수년간 경력을 쌓은 숙련된 개발자조차도 이러한 상황을 마주하면 잠시 멍해지곤 합니다.

이처럼 CSS가 적용되지 않는 현상은 웹 퍼블리싱 과정에서 가장 흔하게 발생하는 골칫거리입니다. 하지만 걱정할 필요는 없습니다. 스타일이 반영되지 않는 데에는 반드시 명확한 이유가 존재하며, 그 원인들은 생각보다 우리 주변에 아주 가깝게 숨어있습니다.

오늘은 여러분의 소중한 시간을 아껴주고 스트레스를 날려줄, CSS가 말을 듣지 않을 때 가장 먼저 의심해봐야 할 핵심적인 원인 세 가지를 자세히 살펴보겠습니다.

가장 먼저 의심해봐야 할 선택자의 우선순위 문제

CSS가 적용되지 않는다고 느껴질 때 가장 흔하게 범하는 실수는 바로 선택자의 우선순위 규칙을 간과하는 것입니다. 우리는 흔히 내가 작성한 코드가 맨 아래에 있으니 당연히 적용될 것이라고 생각하기 쉽습니다. 실제로 우선순위가 같은 규칙끼리는 나중에 작성한 쪽이 이기는 것이 맞지만, 브라우저는 그보다 먼저 훨씬 더 엄격하고 복잡한 계산 방식을 통해 어떤 스타일을 적용할지 결정합니다.

CSS의 세계에서는 누가 더 구체적으로 대상을 지목했느냐가 승패를 가릅니다. 이를 전문 용어로 명시도 혹은 가중치라고 부릅니다. 예를 들어 같은 종류의 요소를 한꺼번에 고르는 태그 선택자보다 특정 요소를 집어내는 클래스 선택자가 더 강한 힘을 가집니다. 그리고 클래스 선택자보다 아이디 선택자가 훨씬 더 강력한 힘을 발휘합니다. 여기에 HTML 태그 안에 style 속성으로 직접 적어 넣는 인라인 스타일은 아이디 선택자보다도 우선합니다.

만약 여러분이 아이디 선택자로 스타일을 지정해 둔 요소를 나중에 클래스 선택자로 덮어쓰려고 했다면, 브라우저는 당연히 더 강력한 아이디 선택자의 손을 들어주기 때문에 변화가 없는 것처럼 보이게 됩니다.

아래 예시를 보겠습니다. 하나의 문단에 아이디와 클래스를 모두 지정했을 때 어떤 색이 적용되는지 확인해 보세요.

<style>
  #title { color: red; }
  .highlight { color: blue; }
</style>

<p id="title" class="highlight">안녕하세요</p>

이 글자는 파란색이 아니라 빨간색으로 보입니다. .highlight는 클래스 선택자이고 #title은 아이디 선택자인데, 아이디 선택자가 더 강해서 나중에 쓴 .highlight보다 #title의 red가 적용되기 때문입니다.

더불어 강력한 한 방인 !important가 존재합니다. 이 키워드는 명시도와 상관없이 일반 규칙보다 먼저 적용되도록 우선순위를 높이는 기능을 가집니다. 만약 기존 코드 어딘가에 이 키워드가 숨어있다면, 여러분이 새로 추가하는 일반 스타일은 힘을 쓰지 못하고 무시당하게 됩니다.

따라서 내가 작성한 CSS 규칙이 다른 강력한 규칙에 의해 밀려나고 있는 것은 아닌지 브라우저 개발자 도구를 통해 꼼꼼히 확인해 볼 필요가 있습니다.

이 문제를 해결하기 위한 실용적인 조언을 드리자면, 코드의 복잡성을 낮추기 위해 가급적 아이디 선택자 사용은 자제하고 클래스 선택자 위주로 스타일을 설계하는 것이 좋습니다.

또한 코드가 꼬였을 때 !important를 무분별하게 남발하기보다는 선택자의 구조를 단순하게 유지하여 자연스럽게 우선순위가 정해지도록 유도하는 것이 유지보수 측면에서 훨씬 현명한 방법입니다.

파일 경로 설정과 연결 상태를 점검하는 방법

두 번째로 살펴봐야 할 원인은 HTML 파일과 CSS 파일이 제대로 연결되지 않았거나, 파일의 경로가 잘못 지정된 경우입니다. 겉보기에는 아무리 완벽한 스타일 코드를 작성했다고 하더라도 브라우저가 애초에 CSS 파일을 읽어오지 못하고 있다면 화면에는 아무런 변화도 일어나지 않습니다.

웹사이트는 기본적으로 HTML 문서가 뼈대를 잡고, 그 문서 안에 링크 태그를 통해 외부 스타일시트를 불러오는 방식으로 작동합니다. 이때 경로 설정에서 작은 실수 하나만 발생해도 연결이 끊어지고 맙니다.

HTML 파일의 head 안에 CSS 파일을 연결하는 태그는 다음과 같이 씁니다.

<head>
  <link rel="stylesheet" href="style.css">
</head>

href에는 CSS 파일의 경로를 적습니다. 여기서는 HTML 파일과 같은 폴더에 style.css가 있다고 가정했습니다. 파일 이름의 철자나 폴더 위치가 다르면 브라우저가 CSS 파일을 찾지 못해 스타일이 적용되지 않습니다.

예를 들어 현재 파일이 위치한 폴더 구조를 고려하지 않고 절대 경로를 잘못 적었거나, 폴더 이름이나 파일 이름의 대소문자를 다르게 적었을 때 이런 문제가 발생합니다.

특히 윈도우와 맥 운영체제는 기본적으로 대소문자를 구분하지 않고 파일을 찾아주지만, 실제 웹 서버로 많이 쓰이는 리눅스 환경에서는 대소문자를 엄격하게 구분하기 때문에 로컬에서는 잘 되던 디자인이 실제 배포 후 깨지는 황당한 경험을 할 수 있습니다.

• HTML 문서의 head 영역에 스타일시트 링크 태그가 올바르게 들어 있는지, rel 속성에 stylesheet 값이 빠지지 않았는지 확인합니다
• 파일 이름에 오타가 없는지, 확장자가 정확히 .css로 끝나는지 살펴봅니다
• 상대 경로를 사용할 때 ../ 기호를 이용해 상위 폴더로 잘 빠져나갔는지 검토합니다
• 브라우저 개발자 도구의 네트워크 탭을 열어 스타일 파일이 404 오류로 불러와지지 않는 것은 아닌지 확인합니다

파일 경로 문제는 경력과 상관없이 누구나 자주 실수하는 부분입니다. 프로젝트 폴더 구조를 처음부터 체계적으로 정리하고, 이미지나 스타일 파일의 경로를 한 가지 기준으로 통일해 일관되게 관리하는 습관을 들인다면 이러한 연결 오류를 미연에 방지할 수 있습니다.

브라우저 캐시가 가져오는 감쪽같은 착시 현상

마지막으로 짚어볼 원인은 눈에 보이지 않는 복병인 브라우저 캐시입니다. 코드를 수정하고 저장한 뒤 브라우저에서 새로고침을 수차례 눌러봐도 전혀 바뀌지 않아 멘탈이 흔들린다면, 높은 확률로 브라우저가 이전의 기억을 고집하고 있는 상태일 수 있습니다.

웹브라우저는 사용자가 웹사이트에 방문할 때 로딩 속도를 빠르게 만들기 위해 이미지, 자바스크립트, 그리고 CSS 파일과 같은 정적 자원들을 사용자의 컴퓨터나 스마트폰 저장 공간에 임시로 저장해 둡니다. 이를 캐시라고 부릅니다.

문제는 개발자가 코드를 수정하여 서버에 업로드했음에도 불구하고, 브라우저가 새로고침을 할 때 서버에서 새로운 파일을 가져오는 대신 내 컴퓨터에 저장된 예전 파일을 그대로 화면에 보여 주는 경우가 있다는 점입니다.

이로 인해 개발자는 코드가 잘못되었다고 오해하고 밤새워 코드를 고치는 삽질을 하게 됩니다.

이 답답한 상황을 해결하는 방법은 아주 간단합니다. 강력 새로고침 기능을 사용하면 됩니다. 일반적인 새로고침 단축키 대신, 브라우저가 기존 캐시를 완전히 무시하고 서버로부터 최신 파일을 다시 다운로드하게 만드는 특수 단축키를 활용하는 것입니다.

1. 윈도우 환경에서 크롬이나 엣지를 사용 중이라면 Ctrl + F5 키를 누릅니다
2. 맥 환경이라면 크롬은 Command + Shift + R 키를, 사파리는 Option + Command + R 키를 누릅니다
3. 크롬이나 엣지에서는 개발자 도구를 켠 상태에서 새로고침 버튼 위에 마우스 커서를 올리고 우클릭을 한 뒤, ‘캐시 비우기 및 강력 새로고침’ 메뉴를 직접 선택할 수도 있습니다

만약 다른 사용자들의 컴퓨터에서도 똑같이 스타일이 적용되지 않는다면 그것은 브라우저 캐시 문제가 아니라 앞서 언급한 경로 문제나 코드의 오류일 가능성이 높습니다. 하지만 오직 내 화면에서만 변화가 없다면 강력 새로고침으로 해결되는 경우가 많습니다.

현업에서 서비스를 운영하는 개발자들은 이러한 캐시 문제를 원천적으로 차단하기 위해 style.css?v=2처럼 파일 주소 뒤에 버전 번호를 붙이거나, 빌드할 때 파일 내용에 따라 해시값을 자동으로 붙여 코드가 바뀔 때마다 브라우저가 새로운 파일로 인식하도록 유도하는 기법을 사용하기도 합니다.

이러한 캐시 관리 기법은 웹사이트를 방문하는 고객들에게 항상 최신의 멋진 디자인을 보여주기 위한 매우 실용적인 지식입니다.

직접 실험해 보기: 파일 이름이 틀렸을 때

파일 경로가 틀리면 CSS가 적용되지 않는다는 것을 확인하려고, 맥에서 연습용 폴더를 만들어 직접 실험해 봤습니다. css-test 폴더 안에 style.css와 index.html 파일을 만들고, 제목은 빨간색이 되고 문단은 노란 배경이 되도록 CSS를 작성했습니다. 그런 다음 HTML에서 CSS 파일을 연결하는 부분을 일부러 styl.css로 틀리게 썼습니다.

<link rel="stylesheet" href="styl.css">

이렇게 연결하면 브라우저가 styl.css라는 파일을 찾지 못해서, 아래 화면처럼 CSS가 전혀 적용되지 않고 기본 모양으로 나옵니다.

파일 이름을 style.css로 고치고 새로고침하자 제목은 빨간색, 문단은 노란 배경으로 바뀌었습니다.

스타일이 적용되지 않을 때는 CSS 문법을 의심하기 전에 link 태그의 파일 이름과 경로부터 확인해 보세요. 저도 이 실험에서 글자 하나가 다른 것만으로 스타일이 전혀 적용되지 않는 것을 직접 확인했습니다.

실전 문제 해결을 위한 유용한 습관과 조언

지금까지 CSS가 적용되지 않을 때 체크해 봐야 할 대표적인 세 가지 원인을 알아보았습니다. 선택자의 우선순위 규칙, 파일의 경로와 연결 상태, 그리고 브라우저 캐시, 이 세 가지를 차례로 점검하면 많은 경우 원인을 찾을 수 있습니다.

웹 개발과 디자인 작업을 할 때 큰 도움이 되는 도구는 브라우저가 제공하는 개발자 도구입니다. 문제가 발생했을 때 당황하여 코드를 무작정 지웠다 다시 쓰기보다는, 개발자 도구를 열어 해당 요소에 어떤 스타일이 적용되어 있는지, 어떤 규칙이 취소선 처리되었는지 눈으로 직접 확인하는 습관을 들이는 것이 좋습니다.

작은 디테일을 놓치지 않는 꼼꼼함이 모여 결국 완성도 높은 웹페이지를 만들어냅니다.