Backend/Spring
[Spring boot] 정적 리소스 사용
나는 유찌
2020. 2. 23. 11:12
어떠한 웹 페이지를 만들면 CSS를 입히게 된다.
CSS 없으면 시각적으로 너무 초라하니까..ㅎㅎ
Spring boot를 이용할 때 정적 리소스를 어떻게 입히는지 포스팅을 하겠다!
1. ViewResolver
|
1
2
3
4
5
6
7
8
9
|
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/img/**",
"/css/**",
"/js/**")
.addResourceLocations("classpath:/static/img/",
"classpath:/static/css/",
"classpath:/static/js/");
}
|
resources -> static 폴더 밑의 파일 구조이다.
코드에 입력되어 있는 경로와 매칭해서 보면 '아!' 하고 알 것이다ㅎㅎ.
2. HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{css/custom.css}"/>
<link rel="stylesheet" th:href="@{css/AdminLTE.min.css}"/>
<link th:href="@{css/_all-skins.min.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="/" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<img th:src="@{img/home.svg}" style="width: 20px;"/> <span class="d-none d-md-inline">메인</span>
</a>
</body>
|
사용한 템플릿 엔진은 타임리프이다.
보통 HTML에서 a태그처럼 href가 들어가는 경우 그냥 'href="~~"'이라고 입력을 한다.
타임리프의 경우 'th:href' 라고 입력을 하게 되는데 이때 경로를 잡아주면서 '@{파일 경로}'로 입력을 하게 된다.
위의 코드도 마찬가지로 link 태그로 css 파일경로를 잡아줄 때 물론 href로 잡아주어도 되지만 나는 th:href를 사용했다.
th:href="@{css/bootstrap.min.css}"
오타가 있거나 '/'를 잘못 사용하면 CSS가 나타나지 않고
'어! 이거 왜이래!' 하면서 개발자 모드로 확인해보면 404 not found가 나타나는 현상을 볼 수 있으니 유의해서 입력하여준다.