HTML 헤더
<html>, <head>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<style>
.field-error {
border-color: #dc3545;
color: #dc3545;
}
</style>
</head>
타임리프 사용 설정 - xmlns:th="http://www.thymeleaf.org"
부트스트랩 css파일 상대경로 - th:href="@{/css/bootstrap.min.css}"
<style> 태그 : 오류발생시 사용
전체 컨테이너
<div class="container" style="max-width: 1000px">
<!-- code -->
</div>컨테이너 좌우 너비 최대 1000px로 고정
row, column
row 지정 후 그 row 안을 두개의 column으로 지정
왼쪽부터 첫번째 column은 text-start로, 두번째 column은 text-end 로 지정
<div class="py-1 row">
<div class="col text-start">
<!-- column 1 내용 -->
</div>
<div class="col text-end">
<!-- column 2 내용 -->
</div>
</div>
text-start / text-end / text-center : 해당 태그 내에 들어갈 요소의 위치 지정
py-1 : 해당 태그위 위 아래 여백설정
< form >
form의 <input> 에 작성한 내용을 아래에 type="submit"을 누르면 POST형식으로 제출한다.
그럼 해당 URL의 @PostMapping 된 메소드로 작성한 내용이 전달된다.
<form action="memberPage.html" th:action th:object="${form}" method="post" >
<div>
<label for="currentPassword" th:text="#{label.member.currentPassword}">현재 비밀번호</label>
<input type="password" id="currentPassword" th:field="*{currentPassword}"
class="form-control" th:errorclass="field-error" >
<div class="field-error" th:errors="*{currentPassword}" />
</div>
<!-- 생략 -->
<button class="w-100 btn btn-outline-danger btn-sm" th:text="#{button.editPassword}" type="submit">
비밀번호 변경
</button>
</form>
해당 URL의 @GetMapping된 컨트롤러에서 model.addAttribute("form", new EditMemberForm() ); 으로 빈 객체라도 전달해야한다.
th:object=${form} 는 컨트롤러로부터 "form"이란 이름의 객체를 받아서, 그 객체의 필드를 th:field=" *{...}" 로 받아서 매핑한다.
그럼 @PostMapping 된 컨트롤러에서 [ @Validated @ModelAttribute("form") EditMemberForm form ] 매개변수로 받아서 사용할 수 있다.
게시판 <Table>
<table class="table">
<thead>
<tr>
<th style="width: 100px; text-align: center" th:text="#{label.board.id}">번호</th>
<th style="width: 500px; text-align: center" th:text="#{label.board.title}">제목</th>
<th style="width: 150px; text-align: center" th:text="#{label.board.writer}">작성자</th>
<th style="width: 150px; text-align: center" th:text="#{label.board.date}">등록일</th>
<th style="width: 100px; text-align: center" th:text="#{label.board.views}">조회수</th>
</tr>
</thead>
<tbody>
<tr th:each="post : ${posts}">
<td style="width: 100px; text-align: center" th:text="${post.id}">1234</td>
<td style="width: 500px; text-align: center">
<a th:href="@{/board/post/{postId}(postId=${post.id})}">
<th:block th:text="${#strings.length(post.title) > 20 ? #strings.substring(post.title, 0, 20) + '...' : post.title}">
title-example
</th:block>
</a><!-- 문자열 길이가 20 넘어가면 ...으로 표시-->
</td>
<td style="width: 150px; text-align: center" th:text="${post.writerId}">hsryuuu</td>
<td style="width: 150px; text-align: center" th:text="${post.create_date.plusDays(1) < #temporals.createNow() ? #temporals.format(post.create_date, 'yyyy-MM-dd') : #temporals.format(post.create_date, 'HH:mm')}">
<!-- create_date가 현재시간으로부터 하루 이전이면 날짜를, 하루 이내면 시간을 표시 -->
</td>
<td style="width: 100px; text-align: center" th:text="${post.views}">23</td>
</tr>
</tbody>
</table><button> 단순 링크 버튼
<button class="btn-sm btn-primary py-1 "
onclick="location.href='writeForm.html'"
th:onclick="|location.href='@{/board/write-form}'|"
th:text="#{button.writing}"
type="button">글쓰기</button>th:onclick에서 지정된 url을 Get 방식으로 호출한다.
수평선
<hr class="my-1">
<hr class="py-1">my : 수평선 상하 여백 설정
py : 수평선 두께 설정
반응형
'Front-End > Web Views' 카테고리의 다른 글
| [JSP] JSP 간단 정리 (0) | 2023.08.01 |
|---|---|
| [Thymeleaf] 기본 문법 (연산, 반복, if, 블록) (0) | 2023.05.04 |
| [Thymeleaf] 기본객체, 유틸리티 객체 (0) | 2023.04.21 |
| [Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴) (0) | 2023.04.20 |
| [Thymeleaf] 타임리프 란? (0) | 2023.04.20 |
