Thymeleaf Layout구성

요즘 ThymeThymeleaf을 사용하면 레이아웃을 구성하는 포스팅을 해볼께요.

레이아웃구성

현재 개발중인 화면 레이아웃이에요 PC홈페이지 기준이에요.

 

파일구성

빈페이지,기본페이지,로그인페이지 3가지 버전에 따라 구성을 했어요 지금은 기본페이지 구성을 해볼께요.

default구성이에요
<div class="wrap">
	<!-- header -->
	<header id="header" th:replace="templates/fragments/header :: header">			
	</header>
	<!--// header -->
		
	<!-- breadcrumbs -->
	<div class="breadcrumbs-wrap" th:replace="templates/fragments/breadcrumbs :: breadcrumbs">
	</div>
	<!--// breadcrumbs -->				
				
	<!-- container -->
	<div id="container">
		<div class="inner">
			<!-- section-left -->
			<div class="section-left" th:replace="templates/fragments/left :: left">					
			</div>
			<!--// section-left -->
				
			<!-- contents -->
			<div class="contents" layout:fragment="content">
				contents
			</div>
			<!--// contents -->
		</div>
	</div>
	<!--// container -->
		
	<!-- footer -->
	<div th:replace="templates/fragments/footer :: footer">			
	</div>
	<!--// footer -->
</div>
	
<!-- 공통스크립트 -->
<script th:replace="templates/fragments/script :: script">
</script>

<!-- 페이지스크립트 -->
<th:block layout:fragment="page-script-block">
</th:block>

header(GNB),사이트이동경로표시( breadcrumbs),left(LNB),내용(content),footer.공통스크립트,페이지 스크립트 순서에요

<div id="header" th:fragment="header">

</div>

<div class="section-left" th:fragment="left">

</div>

<div class="breadcrumbs-wrap" th:fragment="breadcrumbs">

</div>

<div class="contents" layout:fragment="content">

</div>

<div id="footer" th:fragment="footer">

</div>

각 구성에 맞게 코딩을해서 구현을 하면되요.