로그인 화면 코드
•
메인 레이아웃에서 변하는 부분을 미리 지정했기 때문에 다음과 같이 layout:fragment 를 선언하고 코드를 짰습니다.
•
화면은 피그마에 있는 화면과 크게 다르지 않기 때문에 따로 적지 않겠습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="main_layout">
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../static/css/login.css" th:href="@{/css/login.css}"/>
</head>
<!-- 대체하고 싶은 요소에 layout:fragment 속성을 부여한다. -->
<div layout:fragment="content">
<div class="wrapper__login">
<div class="txt__login">Login</div>
<div class="txt__login__info">
<p>
현재 로그아웃 상태입니다<br>
서비스 이용은 로그인 후에 가능합니다
</p>
</div>
<!-- 아이디 / 비밀번호 입력 부분 -->
<div class="wrapper__login__input">
<div class="input__id">
<input type="text" id="userId" name="userId" />
</div>
<div class="input__pw">
<input type="password" id="password" name="password" />
</div>
</div>
<!-- 하단 버튼 -->
<div class="wrapper__login__btn">
<button class="btn__login" >로그인</button>
<button id="closeBtn" onclick="closeTab()">창닫기</button>
</div>
</div>
</div>
</html>
HTML
복사