Spring Boot에서 CSS 파일 로드 오류 해결하기

문제 상황

HTML 코드에서 버튼에 Bootstrap 클래스를 적용했지만 CSS가 전혀 적용되지 않았다.

bootstrap.css 파일을 resources/static/css 폴더에 넣었고, home.html에서 <link> 태그로 CSS를 연결했으나, 브라우저에서 스타일이 적용되지 않았다.

 

원인 분석

Spring Boot에서는 정적 파일(CSS, JavaScript, 이미지 등)을 서빙하기 위해 기본적으로 src/main/resources/static 폴더를 사용한다. CSS 파일을 연결할 때 경로가 잘못 설정되어 있어 웹 서버에서 해당 파일을 찾지 못하고 있었다.

 

해결 방법

1. 정적 리소스 경로 이해하기

Spring Boot에서는 static 폴더 내의 파일들을 자동으로 서빙한다. 예를 들어 src/main/resources/static/css/bootstrap.css 파일은 웹에서 /css/bootstrap.css 경로로 접근할 수 있다.

따라서 HTML 파일에서 CSS 파일 경로를 /static/css/bootstrap.css로 작성하면 안 되고 /css/bootstrap.css로 수정해야 한다.

2. HTML에서 CSS 파일 경로 수정

수정 전 (오류 코드): <link rel="stylesheet" href="/static/css/bootstrap.css">

수정 후 (정상 코드): <link rel="stylesheet" href="/css/bootstrap.css">

 

Spring Boot는 resources/static 폴더에 있는 파일들을 /static/ 경로가 아니라 /로 시작하는 URL로 제공한다.

 

**Intelij에서는 수정 전 코드로 입력했을 때 파일 정보가 뜨고, 수정 후 코드를 입력했을 때 cannot resolve..가 뜬다. (이부분 때문에 찾는데 오랜 시간이 걸림) 그러나 Intelij를 무시하고 실행하면 정상적으로 적용된다.

 

 

FIN.