0. Kanbanboard
1. mypage & mainpage
https://codepen.io/JavaScriptJunkie/pen/jvRGZy
Profile Card
Responsive and colorful Profile Card concept. I hope you like it....
codepen.io
2. mypage 제작
<div class="row" style="flex: 3;">
<table class="table" id="article-table">
<thead>
<tr>
<th class="postCount"><a>게시글번호</a></th>
<th class="title col-2"><a>제목</a></th>
<th class="member_nickname"><a>닉네임</a></th>
<th class="created-at"><a>작성일</a></th>
<th class="modified-at"><a>수정일</a></th>
<th class="modified-at"><a>수정</a></th>
</tr>
</thead>
<tbody>
<tr th:each="posts, loop : ${Posts}" sec:authorize="isAuthenticated()"
th:if="${#authentication.getName() == posts.email}">
<td id="post_no" th:text="${posts.postNo}"></td>
<td>
<a th:text="${posts.title}" th:href="@{'/posts/' + ${posts.postNo}}" style="text-decoration: none; color: black;">게시물 보기</a>
</td>
<td th:text="${posts.nickname}"></td>
<td th:text="${posts.createdAt}"></td>
<td th:text="${posts.modifiedAt}"><
</td>
<td>
<a class="btn btn-primary" href="#"
role="button" th:href="@{/posts/{id}/update (id=${posts.postNo})}">수정
</a>
</td>
</tr>
</tbody>
</table>2.1 메인페이지에 PrePOSTList 가져오기
먼저 게시글리스트를 th:each로 가져오고 메인페이지에 보이게하는것을 4개만 가져오게 합니다.
제목과 그림사진을 누르면 게시글로 페이지 이동가능합니다.
더보기를 누를경우 모든게시글을 볼수있는 페이지로 넘어감니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> House portfolio</title>
</head>
<body>
<th:block th:fragment="PrePostList" xmlns:th="http://www.thymeleaf.org">
<div class="row">
<div class="col-md-12">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
주간 베스트 게시물
<span class="more-link" >
<a href="/postAllList" style="text-decoration: none; color: deepskyblue;">더보기</a>
</span>
</h3>
<!-- 여기서 부터 게시물 리스트 -->
<div class="row" style="padding: 20px 0;">
<div class="col-md-3" th:each="post, iterStat : ${Posts}" th:if="${iterStat.index < 4}">
<div class="card">
<div class="card__image-holder">
<a th:href="@{/posts/{id} (id=${post.postNo})}">
<img alt="wave" class="card__image" src="https://source.unsplash.com/150x100/?wave"
style="width: 100%; height: auto;"/>
</a>
</div>
<div class="card-title">
<h2 >
<a th:href="@{/posts/{id}(id=${post.postNo})}" th:text="${post.title}" style="text-decoration: none; color: black;"></a>
</h2>
<a>
<span th:text="${post.nickname()}"></span>
</a>
</div>
</div>
</div>
</div>
<!-- 여기까지 -->
</div>
</div>
</th:block>
</body>
</html>
<!-- 베스트 게시물 -->
<div th:replace="~{fragments/ShowPostList :: ShowPostList}"/>
<!-- 게시물 리스트-->
<div th:replace="~{fragments/PrePostList :: PrePostList}"/>
<div class="spacer-row"></div>
<div th:replace="~{fragments/PreShopList :: PreShopList}"/>메인 html에서 각각 html를 연결시킵니다.
https://codepen.io/candroo/pen/wKEwRL
3D Fold out reveal
Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes....
codepen.io
'포트폴리오 > ohouseClone' 카테고리의 다른 글
| 10. 각 페이지 기능 (0) | 2023.11.05 |
|---|---|
| 9.일반 로그인 만들기 (0) | 2023.11.02 |
| 7. 게시판 소셜로그인 만들기(google, naver, kakao)-spring (1) | 2023.11.01 |
| 6. 게시판 서비스 개발(spring + mysql) crud (0) | 2023.10.24 |
| 5. SpringSecurity 설정 및 customlogin페이지 제작 (0) | 2023.09.05 |
0. Kanbanboard
1. mypage & mainpage
https://codepen.io/JavaScriptJunkie/pen/jvRGZy
Profile Card
Responsive and colorful Profile Card concept. I hope you like it....
codepen.io
2. mypage 제작
<div class="row" style="flex: 3;">
<table class="table" id="article-table">
<thead>
<tr>
<th class="postCount"><a>게시글번호</a></th>
<th class="title col-2"><a>제목</a></th>
<th class="member_nickname"><a>닉네임</a></th>
<th class="created-at"><a>작성일</a></th>
<th class="modified-at"><a>수정일</a></th>
<th class="modified-at"><a>수정</a></th>
</tr>
</thead>
<tbody>
<tr th:each="posts, loop : ${Posts}" sec:authorize="isAuthenticated()"
th:if="${#authentication.getName() == posts.email}">
<td id="post_no" th:text="${posts.postNo}"></td>
<td>
<a th:text="${posts.title}" th:href="@{'/posts/' + ${posts.postNo}}" style="text-decoration: none; color: black;">게시물 보기</a>
</td>
<td th:text="${posts.nickname}"></td>
<td th:text="${posts.createdAt}"></td>
<td th:text="${posts.modifiedAt}"><
</td>
<td>
<a class="btn btn-primary" href="#"
role="button" th:href="@{/posts/{id}/update (id=${posts.postNo})}">수정
</a>
</td>
</tr>
</tbody>
</table>2.1 메인페이지에 PrePOSTList 가져오기
먼저 게시글리스트를 th:each로 가져오고 메인페이지에 보이게하는것을 4개만 가져오게 합니다.
제목과 그림사진을 누르면 게시글로 페이지 이동가능합니다.
더보기를 누를경우 모든게시글을 볼수있는 페이지로 넘어감니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title> House portfolio</title>
</head>
<body>
<th:block th:fragment="PrePostList" xmlns:th="http://www.thymeleaf.org">
<div class="row">
<div class="col-md-12">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
주간 베스트 게시물
<span class="more-link" >
<a href="/postAllList" style="text-decoration: none; color: deepskyblue;">더보기</a>
</span>
</h3>
<!-- 여기서 부터 게시물 리스트 -->
<div class="row" style="padding: 20px 0;">
<div class="col-md-3" th:each="post, iterStat : ${Posts}" th:if="${iterStat.index < 4}">
<div class="card">
<div class="card__image-holder">
<a th:href="@{/posts/{id} (id=${post.postNo})}">
<img alt="wave" class="card__image" src="https://source.unsplash.com/150x100/?wave"
style="width: 100%; height: auto;"/>
</a>
</div>
<div class="card-title">
<h2 >
<a th:href="@{/posts/{id}(id=${post.postNo})}" th:text="${post.title}" style="text-decoration: none; color: black;"></a>
</h2>
<a>
<span th:text="${post.nickname()}"></span>
</a>
</div>
</div>
</div>
</div>
<!-- 여기까지 -->
</div>
</div>
</th:block>
</body>
</html>
<!-- 베스트 게시물 -->
<div th:replace="~{fragments/ShowPostList :: ShowPostList}"/>
<!-- 게시물 리스트-->
<div th:replace="~{fragments/PrePostList :: PrePostList}"/>
<div class="spacer-row"></div>
<div th:replace="~{fragments/PreShopList :: PreShopList}"/>메인 html에서 각각 html를 연결시킵니다.
https://codepen.io/candroo/pen/wKEwRL
3D Fold out reveal
Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes....
codepen.io
'포트폴리오 > ohouseClone' 카테고리의 다른 글
| 10. 각 페이지 기능 (0) | 2023.11.05 |
|---|---|
| 9.일반 로그인 만들기 (0) | 2023.11.02 |
| 7. 게시판 소셜로그인 만들기(google, naver, kakao)-spring (1) | 2023.11.01 |
| 6. 게시판 서비스 개발(spring + mysql) crud (0) | 2023.10.24 |
| 5. SpringSecurity 설정 및 customlogin페이지 제작 (0) | 2023.09.05 |
