베스트게시물 게시판 (디자인 코드 추가, 내 프로젝트에 적용)

Back-End/Spring 2019. 9. 27. 15:25
728x90
반응형

조회수가 50이 넘는 게시물은 제목 옆에 hit 애니메이션이 출력되도록 하고,


추천수 상위 3개의 글은 1위,2위,3위 애니메이션이 출력되도록 설정, 나머지 4위~10위 까지는 이달의 추천글 애니메이션이 출력되도록 함.


그리고 마우스 커서를 올리면 게시글의 색상이 변하도록 구현함




bestboard.jsp 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
<%@ include file="../include/menu.jsp"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 


디자인 관련 (css 관련 코드들)

<link rel = "stylesheet" href = "/css/bootstrap.css">
 
  <style>
    #container {
      width: 70%;
      margin: 0 auto;     /* 가로로 중앙에 배치 */
      padding-top: 10%;   /* 테두리와 내용 사이의 패딩 여백 */
    }
     
    #list {
      text-align: center;
    }
   
    #write {
      text-align: right;
    }
     
    /* Bootstrap 수정 */
    .table > thead {
      background-color: #b3c6ff;
    }
    .table > thead > tr > th {
      text-align: center;
    }
    .table-hover > tbody > tr:hover {
      background-color: #e6ecff;
    }
    .table > tbody > tr > td {
      text-align: center;
    }
    .table > tbody > tr > #title {
      text-align: left;
    }
     
    div > #paging {
      text-align: center;
    }
     
    .hit {
      animation-name: blink;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      /* 위 속성들을 한 줄로 표기하기 */
      /* -webkit-animation: blink 1.5s ease infinite; */
    }
     
    /* 애니메이션 지점 설정하기 */
    /* 익스플로러 10 이상, 최신 모던 브라우저에서 지원 */
    @keyframes blink {
      from {color: white;}
      30% {color: yellow;}
      to {color: red; font-weight: bold;}
      /* 0% {color:white;}
      30% {color: yellow;}
      100% {color:red; font-weight: bold;} */
    }
  </style>
 
 


 <script>
//게시판 목록 페이지로 이동하게 하는 함수
function list(page){
    console.log("페이지를 이동합니다.");
    location.href="list.do?curPage="+page;
};
 
</script>
<%@ include file="../include/login.jsp"%><br>
    
 
 
<center>
<div id = "list">
<b>베스트 게시물 게시판</b>
</div>
 
<div>
<!-- 해당 table 클래스는 마우스를 올려놓았을때 게시글의 색깔이 파란색으로 변하도록 하는 클래스 -->
<table class="table table-striped table table-hover">
<center>
<thead>
    <tr>
    <!-- width옆에 %는 테이블에서 차지할 비율을 나타낸것 -->
        <th width="20%"><span style="color: green; font-weight: bold;">추천수 순위</span></th>
        <th width="10%">게시글 번호</th>
        <th width="15%">제목</th>
        <th width="15%">작성자</th>
        <th width="15%">내용</th>
        <th width="15%">날짜</th>
        <th width="5%">조회수</th>
        <th width="5%">추천수</th>
    </tr>
    </thead>
    <tbody>
        
    <!-- forEach var = "개별데이터" items = "집합데이터" -->
    <c:forEach var = "row" items = "${map.list}" varStatus="status"> <!-- 컨트롤러에서 map안에 list를 넣었기 때문에 이렇게 받는다. -->
    <tr>
    
        <td>
        <center>
        <!-- hit를 사용해서 추천수 상위 1~3위 까지는 순위 애니메이션이 출력되도록 함 -->
        <c:if test="${row.rk <= 3 }">
            <span class = "hit" size = "7">${row.rk}위!!</span>
        </c:if>
        
        
        <!-- hit를 사용해서 추천수 상위 1~3위 까지는 이달의 추천글 애니메이션이 출력되도록 함 -->
        <c:if test="${row.rk >= 4 }">
            <span class = "hit" size = "4">이달의 추천글!!</span>
        </c:if>
        
        </font>
        </center>
        </td>    <!-- 게시글 순위 -->
        
        
        <td><center>${row.member_bno}</center></td>    <!-- 글번호 -->
        <!-- 클릭하면 컨트롤러의 view.do로 이동하고, 게시물번호, 페이지 번호, 검색옵션, 키워드를 같이 넘긴다 -->
        
        <!-- 조회수가 50이 넘는 글은 제목옆에 hit라는 애니메이션이 출력되도록 함 -->
    <td id ="title">
        <a href="best_board_view.do?member_bno=${row.member_bno}">${row.title}</a>
        <c:if test="${row.viewcnt >= 50 }">
            <span class = "hit">hit!!</span>
        </c:if>
</td>
 
        <td>${row.user_id}</td>    <!-- 작성자의 이름 -->
        <td>${row.content}</td>    <!-- 글의내용 -->
        <td>${row.reg_date}</td>    <!-- 날짜의 출력형식을 변경함 -->
        <td><center>${row.viewcnt}</center></td>    <!-- 조회수 -->
        <td><center>${row.recommend}</center></td>    <!-- 추천수 -->
 
 
    
    </tr>
    </c:forEach>
    </tbody>
 
</table>
</div>
 
<form name="form1" method="post" action="list.do">
    <select name="search_option">
        <option value="user_id"
<c:if test="${map.search_option == 'user_id'}">selected</c:if>
        >작성자</option>
        <option value="title" 
<c:if test="${map.search_option == 'title'}">selected</c:if>
        >제목</option>
        <option value="content" 
<c:if test="${map.search_option == 'content'}">selected</c:if>
        >내용</option>
        <option value="all" 
<c:if test="${map.search_option == 'all'}">selected</c:if>
        >작성자+내용+제목</option>
    </select>
    <input name="keyword" value="${map.keyword}">
    <input type="submit" value="조회">
   
</form>
 
 
 
 
</center>
<br><br><%@ include file="../include/Botton.jsp"%>
</body>
</html>
cs








728x90
반응형
저작자표시

'Back-End > Spring' 카테고리의 다른 글

토비의 스프링 1-1 (간단한 DAO 만들기)  (0) 2020.12.22
메뉴바에 디자인 넣어보기 (수정중)  (0) 2019.09.28
베스트 게시물 관련 게시판 구현 (내 프로젝트에 적용)  (0) 2019.09.26
소셜 로그인 (네이버, 카카오톡, 페이스북) 후 프로필 확인 (내 프로젝트 적용))  (1) 2019.09.24
프로필보기 기능 구현 (내 프로젝트에 적용)  (0) 2019.09.23
:

티스토리툴바