Spring Boot 게시판 만들기 6 - 게시판 페이지 만들기
게시판 페이지 템플릿게시판 페이지도 게시판 작성페이지와 똑같이 Bootstrap 과 BootWatch 를 이용해 만들었다. <!DOCTYPE html><html lang="ko"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="./css/bootstrap.css"> <link rel="stylesheet" href="./css/custom.min.css"> <title>게시글 작성 페이지</title></head><body class="bg-light"><nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"> <a class="navbar-brand" href="#">게시판</a></nav><div class="container col-lg-6 "> <form class="form-inline my-2 my-lg-0 float-right" style="padding-bottom : 16px;"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> <div class="table-responsive clearfix"> <table class="table table-hover"> <thead> <tr> <th>번호</th> <th>제목</th> <th>작성자</th> <th>등록일</th> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> <div class="btn_wrap text-right"> <a href="#" class="btn btn-primary waves-effect waves-light">Write</a> </div> <div class="text-center "> <ul class="pagination" style="justify-content: center;"> <li class="page-item disabled"> <a class="page-link" href="#">«</a> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">4</a> </li> <li class="page-item"> <a class="page-link" href="#">5</a> </li> <li class="page-item"> <a class="page-link" href="#">»</a> </li> </ul> </div> </div></div></body></html> 타임리프 문법 적용하기<!DOCTYPE html><html lang="ko" xmlns:th="http://www.thymeleaf.org"><head th:replace="fragments/head :: main-head"/><body class="bg-light"><nav th:replace="fragments/navbar :: main-nav"/><div class="container col-lg-6 "> <form class="form-inline my-2 my-lg-0 float-right" style="padding-bottom : 16px;"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> <div class="table-responsive clearfix"> <table class="table table-hover"> <thead class="text-center"> <tr> <th>번호</th> <th>제목</th> <th>작성자</th> <th>등록일</th> <th >수정/삭제</th> </tr> </thead> <tbody class="text-center"> <tr th:each="Post:${PostList}"> <td class="align-middle" th:text="${PostStat.index+1}"></td> <td class="align-middle"> <a th:text="${Post.title}"></a> </td> <td class="align-middle" th:text="${Post.name}"></td> <td class="align-middle" th:text="${Post.writeTime}"></td> <td class="text-center align-middle"> <button class="btn btn-primary">수정</button> <button class="btn btn-danger">삭제</button> </td> </tr> </tbody> </table> <div class="btn_wrap text-right"> <a href="#" class="btn btn-primary waves-effect waves-light">Write</a> </div> <div class="text-center "> <ul class="pagination" style="justify-content: center;"> <li class="page-item disabled"> <a class="page-link" href="#">«</a> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">4</a> </li> <li class="page-item"> <a class="page-link" href="#">5</a> </li> <li class="page-item"> <a class="page-link" href="#">»</a> </li> </ul> </div> </div></div></body></html>