[Spring Boot] Bootstrap 연동

이 작업에서 중요한 부분

• 정확한 경로 지정
• 스프링 부트의 경우 정적 리소스를 반환하는 기본 경로는 resources/static

1. Bootstrap 템플릿 다운로드

아래 사이트에서 원하는 부트스트랩 템플릿을 다운로드하면 된다. 이외에 다른 템플릿을 찾는다면 구글에 검색해서 찾아보고 무료인지와 무료인 경우 어느 기능까지 구현되는지, 문서는 잘 작성 되어 있는지 등을 확인해서 고르면 좋을 것 같다.

https://startbootstrap.com/

Start Bootstrap

 

나는 아래의 템플릿이 진행하는 프로젝트 UI에 적합할 것이라는 의견으로 통합 되어 선택되었다.

https://themeselection.com/item/sneat-bootstrap-html-admin-template/

Sneat - Bootstrap 5 HTML Admin Template

 

2. Spring Boot 프로젝트에 적용하기

압축파일을 풀면 asserts, html, scss(or css) 폴더가 있다.

 

이 폴더를 프로젝트 내에 static 폴더 하단에 넣어준다. 이유는 위에서 말했 듯이 정적파일은 static 폴더에서 기본으로 설정 되어 있기 때문이다.

 

압축 파일에 있는 index.html 파일은 templates로 옮겨서 Controller에서 index.html 파일을 불러올 수 있도록 한다.

index.html 파일을 확인해보면 css를 불러오는 부분에서 경로가 잘못 지정되어 있는 경우가 있다.

아래의 사진의 경우는 디렉터리가 static/assets/vender/...로 맞는 경우이기 때문에 아무런 문제가 없지만 ../와 같이 상대경로로 작성되어 다른 경로를 나타내는 부분도 있으니 확인이 필요하다.