메인 레이아웃 코드
•
화면은 피그마에 있는 화면과 크게 다르지 않기 때문에 따로 적지 않았습니다.
<!-- 메인 레이 아웃 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Main</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/main_layout.css"/>
</head>
<body>
<div class="container__common">
<nav>
<div class="wrapper__btn__profile">
<button><img src="/img/btn_profile.png"></button>
</div>
<div class="wrapper__btn">
<button><img src="/img/btn_dashboard.png"></button>
<button><img src="/img/btn_message.png"></button>
<button><img src="/img/btn_planner.png"></button>
<button><img src="/img/btn_gallery.png"></button>
<button><img src="/img/btn_board.png"></button>
</div>
<span class="toggle__button"></span>
</nav>
<!-- 바뀌는 부분에 다음과 같이 layoutLfragment="content" 를 넣어 주었습니다.-->
<div layout:fragment="content" class="container__contents"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/js/jQuery-2.1.4.min.js"></script>
<script>
const toggleList = document.querySelectorAll(".toggle__switch__login");
toggleList.forEach(($toggle) => {
$toggle.onclick = () => {
$toggle.classList.toggle('active');
}
});
</script>
</html>
HTML
복사