재현님의 HELP 요청
form 태그안에 로그인 버튼까지 넣고 싶은데 아래와 같이 코드를 작성하면 레이아웃이 이상해지는 현상이 발생했다.
해결 코드
이전코드
<!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>
<!-- 아이디 / 비밀번호 입력 부분 -->
<form action="/member/login" method="post" th:object="${loginRequest}">
<div class="wrapper__login__input">
<div class="input__id">
<input type="text" id="userId" name="userId" placeholder="아이디 입력"/>
<span th:if="${#fields.hasErrors('userId')}" th:errors="*{userId}"></span>
</div>
<div class="input__pw">
<input type="password" id="password" name="password" placeholder="비밀번호 입력"/>
<span th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
</div>
<!-- 하단 버튼 -->
<div class="wrapper__login__btn">
<button class="btn__login" >로그인</button>
</div>
</form>
<button id="closeBtn">홈으로</button>
</div>
</div>
HTML
복사
바꾼코드
<!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="container__login">
<div class="txt__login">Login</div>
<div class="txt__login__info">
<p>
현재 로그아웃 상태입니다<br>
서비스 이용은 로그인 후에 가능합니다
</p>
</div>
<!-- 아이디 / 비밀번호 입력 부분 -->
<form action="/member/login" method="post" th:object="${loginRequest}">
<div class="wrapper__login__input">
<div class="input__id">
<input type="text" id="userId" name="userId" placeholder="아이디 입력"/>
<span class="error__id" th:if="${#fields.hasErrors('userId')}" th:errors="*{userId}"></span>
</div>
<div class="input__pw">
<input type="password" id="password" name="password" placeholder="비밀번호 입력"/>
<span class="error__pw" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
</div>
</div>
<!-- 하단 버튼 -->
<button class="btn__login" >로그인</button>
</form>
<button class="closeBtn">홈으로</button>
</div>
</div>
HTML
복사
완성 화면
레이아웃 예쁘게 정렬 validation 문구 예쁘게 수정==================================================================//
