Spring Boot MVC 패턴 프로젝트에서 부트스트랩(bootstrap) 템플릿을 적용하며 정리한 내용입니다.
해당 내용은 아래 타임리프 레이아웃(Thymeleaf layout)을 적용한 상태에서 추가된 내용이기 때문에 함께 내용 참고하시면 좋을 것 같습니다.
Spring Boot 타임리프 Thymeleaf layout 적용하는 방법
타임리프(Thymeleaf)에 대해서 간단하게, 타임리프는 서버 사이드 템플릿 엔진(Template Engine)의 한 종류로, 쉽게 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해주는 역
wildeveloperetrain.tistory.com
***
You don't need to put the layout:fragment/data-layout-fragment attribute into the <head> section - the decoration process will automatically copy the <head> section of your content templates into your layout page.위 레이아웃을 적용했을 때 다음과 같은 경고 로그가 나오는데, 이 부분은 default_layout.html 파일과 content가 되는 각 페이지 html 파일 내부에 있는 layout:fragment="css", layout:fragment="script" 부분으로 인해 발생하는 것으로 해당 영역을 다 지워주고 content가 되는 파일에서 별도의 css 또는 script 파일을 적용하고 싶은 경우 <head></head> 영역을 추가해서 넣어주면 적용됩니다.
(혹시 이해가 안 되신다면 포스팅 맨 하단 github에 있는 코드를 참고 부탁드립니다.)
부트스트랩(Bootstrap)이란,
부트스트랩은 트위터에서 개발 시작된 '프론트엔드 프레임워크'인데요.
입력 폼이나 버튼, 내비게이션 바, 페이징 바, 드롭다운 메뉴 등 웹 페이지에서 많이 쓰이는 요소들을 거의 다 내장하고 있기 때문에 부트스트랩을 사용하면 프론트엔드 개발을 쉽게 할 수 있다는 장점이 있습니다. 사용하기 위해서는 bootstrap의 css와 javascript 관련 사항을 설치하고 적용해서 사용할 수 있으며, 디자인 같은 경우는 테마나 템플릿을 다운로드하여서 전체 또는 부분적으로 적용할 수 있습니다.
부트스트랩을 사용하면 프론트엔드 개발이 쉬워진다고는 하지만 기본적인 HTML, CSS의 개념을 어느 정도 이해하고 있어야 제대로 사용할 수 있습니다.
이어지는 내용은 위 사이트의 SB Admin 템플릿을 적용하는 예시이며, 단순하게 index.html을 불러오는 것이 아니라 header 영역, sidebar 영역, content 영역, footer 영역을 thymeleaf layout에 적용시키는 것까지 포함되어 있습니다.
내용에서 이해가 되지 않는 부분은 포스팅 하단에 링크된 github 코드를 참고 부탁드립니다.
먼저 SB Admin 템플릿을 다운로드하여 내부를 살펴보면 html 파일들 외 assets, css, js 폴더를 볼 수 있는데요.
해당 폴더들을 스프링 부트 프로젝트의 resources 디렉토리 내부의 static 디렉토리로 복사해줍니다.
***
이 부분은 적용하는 사람마다 다르기 때문에 정답은 없지만, 예시를 보면 별도로 bootstrap 디렉토리를 생성하여 넣어주는 것도 볼 수 있는데요.
그 경우 다운로드한 템플릿에 적용된 html 파일들이 참고하고 있는 css, js 경로가 /bootstrap/ 디렉토리를 포함하지 않기 때문에 각각의 html 마다 해당 부분을 찾아 수정해줘야 하는 추가 작업이 발생하며, 개발자의 실수로 html 파일에서 수정을 빠트리는 경우 오류가 발생할 수 있습니다.
//head 영역
<head></head>
//body 영역
<body class="sb-nav-fixed>
//header 영역
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark"></nav>
//header 아래 나머지 영역
<div id="layoutSidenav">
//sidebar 영역
<div id="layoutSidenav_nav"></div>
//content + footer 영역
<div id="layoutSidenav_content">
//content 영역
<main></main>
//footer 영역
<footer></footer>
<div>
</div>
//사용되는 javacript 추가
</body>이어서 Thymeleaf layout을 적용하기 위해 index.html 파일의 구조를 살펴보면 위와 같은 구조로 이뤄져 있는데요.
<!DOCTYPE html>
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
...
//bootstrap에 필요한 css 및 js 생략 (생략된 부분은 index.html 참고)
</head>
<body class="sb-nav-fixed">
<!-- header fragment 사용 -->
<th:block th:replace="fragments/header :: headerFragment"></th:block>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<!-- sidebar fragment 사용 -->
<th:block th:replace="fragments/sidebar :: sidebarFragment"></th:block>
</div>
<div id="layoutSidenav_content">
<main>
<!-- content fragment 사용 -->
<th:block layout:fragment="content"></th:block>
</main>
<!-- footer fragment 사용 -->
<th:block th:replace="fragments/footer :: footerFragment"></th:block>
</div>
</div>
//bootstrap에 필요한 js 부분 생략 (생략된 부분은 index.html 참고)
</body>
</html>index.html의 구조에 따라 default_layout.html을 다음과 같이 변경해줍니다.
그리고 각각의 fragment 부분들(header, sidebar, footer)은 아래와 같은데요.
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!--headerFragment 선언-->
<nav th:fragment="headerFragment" class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
...
</nav>
</html>(header.html)
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!--sidebarFragment 선언-->
<nav th:fragment="sidebarFragment" class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
...
</nav>
</html>(sidebar.thml)
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!--footerFragment 선언-->
<footer th:fragment="footerFragment" class="py-4 bg-light mt-auto">
</footer>
</html>(footer.html)
이렇게 적용하면 템플릿을 사용하는 페이지에 content를 제외한 header, sidebar, footer 부분을 공통적으로 사용할 수 있습니다.
(login 페이지와 같이 템플릿 적용이 필요 없는 부분은 html 자체에 템플릿을 적용하지 않으면 됩니다.)
컨트롤러 영역에서는 다음과 같이 ModelAndView 객체를 사용하거나 Model 객체를 사용하여 페이지에 연결할 수 있습니다.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html(.properties에 적용된 설정 값)
< 참고 코드 >
GitHub - JianChoi-Kor/SideToon: side_toon_project
side_toon_project. Contribute to JianChoi-Kor/SideToon development by creating an account on GitHub.
github.com
'Programming > Spring Boot' 카테고리의 다른 글
| MultipartFile to File 차이점과 변환 방법(Java) (0) | 2022.10.17 |
|---|---|
| Spring Boot + GraphQL 기본적인 사용법 정리 (0) | 2022.10.11 |
| Spring Boot Multi Module Project 생성하기(maven) (0) | 2022.09.29 |
| SpringBoot form-data list object (객체 리스트 받는 방법) (0) | 2022.09.06 |
| Querydsl 서브쿼리 사용하는 방법(select절, where절) (0) | 2022.08.24 |