[Thymeleaf, html, bootstrap] 자주 사용하는 태그 모음

HSRyuuu 2023. 4. 22. 15:53

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) &gt; 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) &lt; #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 : 수평선 두께 설정