[Springboot] CSS 파일 불러올 때 경로 설정 문제 해결( <link> 관계가 stylesheet 일 때)

1. 문제 

Springboot 실습 중 

코드를 다 작성한 후 실행시켰는데 웹 페이지에 html 템플릿만 띄어지고 css 파일이 적용되지 않았다. 

 

2. 분석

css 파일을 호출하는 경로가 잘못된 것 같았다. 하지만 눈 씻고 확인해봐도 상대 경로를 잘 설정해보인 듯 했다. 

현재 파일은 mainLayout.html, 호출하고자 하는 파일은 main.css이다. 

현재 파일의 경로: resources/templates/layouts/mainLayout.html

호출하고자 하는 파일의 경로: resources/static/CSS/main.css

 

 

현재 파일인 mainLayout.html 에서 link태그를 이용하여 외부에 있는 css 파일을 불러오기 위해 다음과 같이 코드를 작성했었다. 

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

 

하지만 결과는..

 

 

ChatGPT 한테 도움을 요청했다. 

 

3. 해결

static 폴더 내에 있는 정적 파일을 불러올 때 경로는 '../static/'을 생략하고 static 하위 폴더부터 경로를 작성을 해도 무방하다고 한다. 왜냐하면 웹 애플리케이션에서 정적 파일들이 기본적으로 찾아지는 위치가 /static/ 이기 때문이다.

link 태그의 rel=stylesheet 를 사용할 때처럼 정적 파일을 호출할 때는 이미 /static/ 이 자동 추가되어 있으므로 static 하위 경로만 작성해도 된다.

 

따라서 코드를 다음과 같이 수정했다.

<link rel="stylesheet" href="CSS/main.css">

 

 

4. 결과