이번 게시글에서는 모든 페이지에서 사용할 페이지의 공통 부분을 분리하도록 하겠습니다.
먼저 Header와 Footer에 해당하는 화면을 분리하고자 합니다.
여기에서 Header는 <nav>태그로, Footer는 Footer라 작성이 된 부분으로 사용할 것입니다.
[Header]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">메인페이지</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
</ul>
</div>
</nav>[Footer]
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
2개의 공통 부분을 따로 만들어보도록 하겠습니다. 우선 사전 작업으로 <html> 태그에 작업해야 할 것이 있습니다.
[main.html]
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<html>
제가 사용하는 Thymeleaf에서 th 태그와 layout 태그를 사용합니다. 이를 사용하기 위해 xmlns:th="http://www.thymeleaf.org"와 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 을 반드시 작성해야합니다.
Thymeleaf의 레이아웃에 대해 설명을 원하시면 아래의 링크를 참고하시면 됩니다.
[Spring Boot] thymeleaf 사용하기 (2) Layout 설정하기 | View(html) 코드 중복 관리하기
[Spring Boot] thymeleaf 사용하기 (2) - Layout 설정하기 - View(html) 코드 중복 관리하기 Spring/Spring Boot로 웹 페이지 개발 시 View 부분을 구현할 경우 제일 많이 쓰는게 HTML/JS/CSS가 아닐까 합니다. 이번 포스
devzzi.tistory.com
templates/views 에 layouts 라는 폴더 생성 뒤 header.html, footer.html을 생성합니다.
위와 같이 작성을 하고 안에 해당하는 태그들을 갖고와 사용합니다.
[header.html]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">메인페이지</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
</ul>
</div>
</nav>
</header>
</html>[footer.html]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="header">
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</footer>
</html>
여기서 header와 footer 말고도 공통되는 부분이 있다고 하시면 태그를 header와 footer가 아닌 th:block 태그를 이용하시면 됩니다.
분리가 완료되었으면 main.html에서 공통되는 부분은 제거시킵니다. 그리고 안에 th 태그를 이용하여 작업을 진행합니다.
[main.html의 body 태그]
<body>
<header th:replace="layouts/header::header"></header>
[비공통부분]...
<footer th:replace="layouts/footer::footer"></footer>
</body>
해당 태그로 설정한 header와 footer에 th:replace 태그를 이용하여 공통 부분을 갖고 올 수 있습니다. 여기서 ::를 기준을 잡아 살펴보도록 하겠습니다.
왼쪽으로는 application.properties에서 설정했던 prefix 경로를 기준으로 layouts 폴더 안에 header.html을 확인하는 경로입니다. 그리고 오른쪽으로는 해당 파일에서 th:fragment="[설정한 이름]"으로 작성한 것이 있을텐데 설정한 이름을 넣으시면 됩니다.
이로써 Header와 Footer에 해당하는 공통 부분, 즉 레이아웃에 대해 설명드렸습니다.
'개발 > 프로젝트' 카테고리의 다른 글
| [스프링부트 게시판] 15. 회원가입 기능 구현 (0) | 2023.01.23 |
|---|---|
| [스프링부트 게시판] 14. 로그인, 회원가입 화면 만들기 (1) | 2023.01.21 |
| [스프링부트 게시판] 12. 메인화면 만들기 (0) | 2023.01.19 |
| [스프링부트 게시판] 11. JPA DELETE (0) | 2023.01.18 |
| [스프링부트 게시판] 10. JPA UPDATE (0) | 2023.01.17 |
