스프링 부트 프로젝트에 부트스트랩 템플릿 추가
1. 부트스트랩 템플릿 사이트에서 원하는 템플릿을 골라 다운로드 한다
무료로 이용하기 좋은 사이트 몇 개
Free Bootstrap Themes and Website Templates | BootstrapMade
At BootstrapMade, we create beautiful website templates using Bootstrap, the most popular front-end framework for developing responsive, mobile first websites. All of our bootstrap templates are created with care, fully responsive and cross-browser compati
bootstrapmade.com
Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap
Landing Page A clean, functional landing page theme
startbootstrap.com
Bootswatch: Free themes for Bootstrap
Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.
bootswatch.com
(처음부터 페이지 템플릿 쓰기가 어려우면 위 사이트에서 직접 조립해서 쓰는 것도 좋다)
나는 이 템플릿을 받았다
2. 다운로드한 파일의 압축을 푼다
템플릿마다 폴더 및 파일 구성이 조금 다른데, 내가 고른 템플릿은 이렇게 되어 있다
3. 스프링 부트 프로젝트를 생성한다
4. 템플릿 폴더를 복사하여 static 폴더에 붙여넣기한다
static 폴더는 스프링 프로젝트의 src-main-resouces 안에 있다
2에서 보았듯 내가 다운로드한 템플릿은 폴더가 총 2개 있으므로 이 2개만 복사, 붙여넣기 해준다
5. 템플릿 파일 경로를 정해준 후 jsp 파일에 넣는다
템플릿 폴더에 포함되어 있는 index.html에서 페이지 소스 보기 등을 활용하여 확인해보면
보통 템플릿 위, 아래에 스타일시트로 사용할 리소스를 불러오는 코드들이 적혀있다
여기에
|
1
|
${pageContext.request.contextPath}
|
cs |
이 코드를 추가하면 된다(파일의 현재 위치에서 리소스 파일 경로를 잡아준다)
내가 고른 템플릿 기준으로는 이렇게 나온다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Vendor CSS Files -->
<link href="${pageContext.request.contextPath}/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/quill/quill.snow.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/quill/quill.bubble.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/assets/vendor/simple-datatables/style.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Vendor JS Files -->
<script src="${pageContext.request.contextPath}/assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/chart.js/chart.umd.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/echarts/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/quill/quill.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/tinymce/tinymce.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="${pageContext.request.contextPath}/assets/js/main.js"></script>
</body>
</html>
|
cs |
이제 자유롭게 템플릿에 포함된 스타일들 중에서 원하는 class를 확인한 후 적용하면 된다!
다른 코드들도 필요하다면 그때그때 경로 설정 후 추가한다!