더 많이 실패하기

스프링 부트 프로젝트에 부트스트랩 템플릿 추가 본문

개념정리/웹 프로그래밍

스프링 부트 프로젝트에 부트스트랩 템플릿 추가

김발자~ 2023. 2. 17. 15:30
반응형

 

 

1. 부트스트랩 템플릿 사이트에서 원하는 템플릿을 골라 다운로드 한다

 

무료로 이용하기 좋은 사이트 몇 개

https://bootstrapmade.com/

 

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

 

https://startbootstrap.com/

 

Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap

Landing Page A clean, functional landing page theme

startbootstrap.com

 

https://bootswatch.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를 확인한 후 적용하면 된다!

다른 코드들도 필요하다면 그때그때 경로 설정 후 추가한다!

 

 

반응형

'개념정리 > 웹 프로그래밍' 카테고리의 다른 글

[웹개발] 공통 html  (0) 2023.05.25
포트 죽이기  (0) 2023.05.21
294. 개인 프로젝트 시작  (0) 2023.05.20
[Spring] Maven update 75% 무한로딩  (0) 2023.04.03
공부 193일차: 프로젝트  (0) 2023.02.08
'개념정리/웹 프로그래밍' Related Articles more
Comments