[Web] 수정한 CSS 파일이 HTML에 적용되지 않을 때

한 달 전에 클론 코딩으로 만든 자그마한 프로젝트를 블로그에 정리하기 위해 오랜만에 열어보았다.

고작 'index.html', 'style.css', 'app.py'라는 이름의 3개 파일이 전부인데도, 그 사이에 몇몇 부분은 까먹거나 이해가 안 갔다.

(하... 이제부턴 진짜 프로젝트와 공부도 중요하지만, 거기서 배운 점, 어려웠던 점 등을 기록으로 남기는 과정도 중요하게 여기고 기록해야겠다...ㅠㅠ)

그래도 나름 쉬운 언어(언어라고 하기에도 부끄럽지만)였기 때문에 다시 수정해보고, 결과를 보는 건 재밌었다.

 

그. 런. 데.

도저히 이해가 안 가는 게, 어느 순간부터 CSS 파일을 수정하고 위치를 바꿔서 링크해도 HTML에서 제대로 적용이 안 된다. CSS 파일을 제거했을 때 아예 HTML 모양이 망가지거나, 위치를 제대로 입력 안 했을 때 오류가 뜨는 것을 보면 분명 CSS 파일을 읽고 있긴 하다.

그래서 검색해본 결과! 내 경우에 이를 해결해준 방법을 알았는데 내 블로그에도 기록으로 남겨본다.

단, 이 해결 방법은 나처럼 CSS를 HTML에서 link 태그로 적용시키고 있는 경우에 가능하다.

 

우선 이 문제는 브라우저가 이전에 사용한 CSS 파일을 캐시 데이터로 보관하고 사용하면서 발생한 일이었다.

내가 아무리 수정을 해도 결과물을 보여주는 브라우저에서는 이전에 보관한 CSS 파일을 다시 사용하고,

링크된 최신 CSS 파일의 적용이 제대로 이루어지지 않으면서 제자리걸음인 것이었다.

 

 

이를 해결하는 방법 첫 번째! HTML을 실행하는 브라우저(내 경우는 Brave)의 '인터넷 기록 삭제'를 한다.

기존에 저장된 브라우저의 캐시 데이터를 삭제하고, 서버 파일(app.py)을 다시 실행시키면 이전에 미리 보관해둔 CSS 파일이 없기 때문에, 최신 수정된 CSS 파일을 다시 제대로 불러와서 적용시킬 수밖에 없다. 브라우저에서 인터넷 기록을 삭제하는 방법은 아래처럼 진행하면 누구나 할 수 있다.

단, 첫 번째 방법은 CSS를 수정하고 저장할 때마다 인터넷 기록을 삭제해줘야 한다.

 

이런 귀찮음을 덜어주는 두 번째 방법은 link 태그의 CSS 파일 주소 끝에 '?after'를 붙여주는 것이다.

내 경우는 HTML 파일과 CSS 파일이 위와 같은 디렉터리 구조에 담겨있기 때문에, HTML의 link 태그에서 CSS를 다음과 같이 불러왔다.

하지만 아래처럼 href 속성의 문자열(style.css의 주소) 끝에 ?after 까지 붙여주니 문제가 해결되었다.

 

이렇게 HTML에서 link 태그를 통해 CSS 파일을 불러오고 있는 상황에서 CSS의 최신 수정 사항이 반영되지 않을 때!

해결하는 방법 2가지를 기록으로 남겼다.

앞으로 이외에도 다양한 공부, 프로젝트, 오류 해결 등을 기록해야겠다.