error-css파일 net::ERR_ABORTED 404 (Not Found)

상황 : thymeleaf로 개발 중 html파일과 css파일을 분리한 후 발생한 에러

 

html 파일에 css를 넣으니 html 파일이 너무 길어졌다. 그래서 css파일을 분리했다.

static/css 밑에 css 파일이 들어간다.

 

공통적으로 resources 폴더 밑에 존재하고 html 파일은 templates 폴더 밑에, css 파일은 static/css/ 폴더 밑에 위치하는 구조이다.

그래서 html 파일에서 css 파일을 읽어올 수 있도록 하기 위해 다음과 같이 설정 해주었다.

<link rel="stylesheet" href="/static/css/subscription.css" />

근데 서버를 실행하면 html 파일은 인식해도 css 파일은 인식을 못했다.

 

👉 수정 전 코드

<link rel="stylesheet" href="/static/css/subscription.css" />

 

👉 수정 후 코드

<link rel="stylesheet" href="/css/subscription.css" />

 

원인 : css 파일의 경로 문제였다.

 

spring boot는 정적 리소스 파일(css, js, 이미지)을 제공할 때 static, public, resources, META-INF/resources 디렉토리의 파일을 웹 루트 경로(/) 아래에 자동으로 매핑한다.

[참고 : https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot]

즉, src/main/resources/static 폴더를 정적 리소스의 루트 경로로 설정하는 것이다.

그래서 /static/css 폴더 밑에 위치한 css 파일은 /static/css가 아니라 /css 로 매핑 해주어야 한다.

(css/style.css가 아니라 /css/style.css 라고 설정 해주어야 한다!)

 

수정 후 코드로 설정하면 정상적으로 css 파일 경로를 불러와서 html 화면에 적용된다!