Bigfat

[Web] 부트스트랩 적용하기 (게시판 구현) 본문

Java/web

[Web] 부트스트랩 적용하기 (게시판 구현)

kyou 2017. 4. 10. 19:40

게시글 리스트 화면(list.jsp)에 부트스트랩을 적용해보자

  부트스트랩(Bootstrap)이란 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 HTML5 기반의 오픈 소스 웹 디자인 프레임워크다(참고1). 부트스트랩 공식 홈페이지에서 다운로드 가능하며, 'Download Bootstrap'을 선택하였다.

  글쓴 시점의 부트스트랩은 3.3.7버전으로 bootstrap-3.3.7-dist.zip 압축 파일이 다운받아질 것이다. 압축 파일을 WebContent 폴더 안으로 옮긴 후 압축을 풀도록 하자. bootstrap-3.3.7-dist 폴더 아래에 css, fonts, js 폴더가 있는 것을 확인할 수 있다. jsp파일에서 css를 상대 경로로 접근하기 때문에 편의를 위해 bootstrap-3.3.7-dist 폴더명을 bootstrap-3.3.7으로 변경하였다. 참고로 부트스트랩 js를 사용하기 위해서는 jQuery가 필요하다.

  이제 프로젝트는 아래와 같은 구조가 된다.


  게시판의 메인 페이지인 list.jsp에 부트스트랩을 적용해보자. bootstrap.css와 bootstrap.min.css 둘 중 하나를 적용하면 되는데, CSS파일을 배포할 때 파일을 압축해서 *.min.css 형식으로 배포한다(CSS minified, 축소하다). 파일을 열어보면 빈 공간 없이 소스가 한 줄로 붙어있는 것을 확인할 수 있는데, 이는 조금이라도 용량을 줄여 화면 출력의 속도를 내기 위함이다(참고2). *.js파일을 *.min.js 형식으로 압축하여 배포하는 것도 같은 방식이다. 그러므로 우리는 bootstrap.min.css를 사용하고, 소스를 분석하거나 변경이 필요하다면 bootstrap.css를 확인하도록 하자.

  아래 list.jsp는 부트스트랩을 적용하고, 변경이 필요한 부분은 bootstrap.css 소스를 확인한 뒤 <head>태그 안에 <style>태그에 재정의하였다. list.jsp 내에 불필요한 주석을 제거하고, <div>태그로 각 부분을 묶는 등 최대한 정리하였기에 이전보다 조금더 깔끔해 보인다.

  애니메이션 지점을 설정하는 @keyframes 속성은 인터넷 익스플로러 10 이상과 최신 모던 브라우저에서 지원하며 이전 모던 브라우저를 고려하려면 @-webkit-keyframes, @-moz-keyframes와 같이 접두사를 붙여줘야 한다(참고3). 그러므로 크롬을 가까이 하자. 몇몇 사이트를 둘러보니 hit을 이미지로 사용한 것을 확인하였다.

  (2017. 04. 11. '글쓰기' 링크 주소 변경)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>BBS List</title>
	<!-- Bootstrap -->
	<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<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>
</head>
<body>
	<div id="container">
		<div align="right">
			<!-- Login 검증 -->
			<!-- jstl의 if문은 else가 없어서 따로 검증해야함. -->
			<c:if test="${id != null}">
				<%-- <%@include file="loginOk.jsp" %> --%>
			</c:if>
			<c:if test="${id == null}">
				<%-- <%@include file="login.jsp" %> --%>
			</c:if>
		</div>
	
		<div id="list">
			<b>게시판 (전체 글: ${totalCount})</b>
		</div>
		
		<div id="write">
			<a href="/bbs/writeForm.bbs?pageNum=${pageNum}">글쓰기</a>
		</div>
		
		<div>
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th width="10%">번호</th>
						<th width="50%">제목</th>
						<th width="10%">작성자</th>
						<th width="20%">작성일</th>
						<th width="10%">조회</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="article" items="${articles}" varStatus="status">
						<tr>
							<td>${article.articleNumber}</td>
							<td id="title">
								<c:if test="${article.depth > 0}">
									&nbsp;&nbsp;
								</c:if>
								<a href="/bbs/content.bbs?articleNumber=${article.articleNumber}&pageNum=${pageNum}">${article.title}</a>
								<c:if test="${article.hit >= 20}">
									<span class="hit">hit!</span>
								</c:if>
							</td>
							<td>${article.id}</td>
							<td>${article.writeDate}</td>
							<td>${article.hit}</td>
						<tr>
					</c:forEach>
				</tbody>
			</table>
			
			<!-- Paging 처리 -->
			<div id="paging">
				${pageCode}
			</div>
		</div>
	</div>
</body>
</html>


  톰캣을 실행하고 http://localhost/bbs/list.bbs?pageNum=1로 접속해 부트스트랩이 적용된 화면을 확인하자. 첫 번째는 'hit!' 애니메이션이 적용되는 화면을, 두 번째는 <tr>태그에 마우스 커서가 hover((허공을) 맴돌다) 되었을 때 색상이 변하게 해주는 부트스트랩의 table-hover가 적용된 화면을 보여준다.



  선택된 페이지 번호를 더 잘 보이게 하기 위해서 Page클래스의 paging메서드 코드를 조금 변경하였다. if문 안에 첫 번째 append메서드 내에 <font>태그의 color 속성의 값을 변경하고 size 속성을 추가해주면 위와 같은 화면을 출력한다.

/**
 * Page클래스의 paging메서드
 */
// pageBlock에 포함되는 페이지 숫자 출력하고, 링크를 달아준다.
for(int i = startPage; i <= endPage; i++) {
	if(i == pageNum) {
		sb.append("&nbsp;&nbsp;<b><font color='#668cff' size='4'>");
		sb.append(i);
		sb.append("</font></b>");
	} else {
		sb.append("&nbsp;&nbsp;<a href='list.bbs?pageNum=");
		sb.append(i);
		sb.append("'>");
		sb.append(i);
		sb.append("</a>");
	}
}


  다음 글에선 게시글을 수정하고, 답글을 작성하는 기능을 구현해보도록 한다.



[나무위키, 부트스트랩 참고1]

[[자바스크립트] javascript 파일 압축 및 복원하기 (***.min.js 파일 만들기) 참고2]

[「Do it! HTML5+CSS3 웹 표준의 정석」 교재 참고3]

[CSS 레이아웃 블럭을 가운데 정렬하는 방법 (margin:0 auto) 참고]

[[CSS] 애니메이션, 글자 깜박임, keyframes 참고]

[[Bootstrap] CSS - Tables (테이블 디자인 하기) 참고]

[모든 영단어 검색은 네이버 영어사전]


저작자표시 비영리 동일조건

'Java > web' 카테고리의 다른 글

[Web] 글 수정 화면 만들기 (게시판 구현)  (2) 2017.04.11
[Web] 로그인, 로그아웃 구현하기 (게시판 구현)  (0) 2017.04.11
[Web] 글 확인 화면 만들기 (게시판 구현)  (4) 2017.04.10
[Web] 에러 페이지 처리하기 (게시판 구현)  (0) 2017.04.10
[Web] 페이징 처리하기 (게시판 구현)  (2) 2017.04.07
'Java/web' Related Articles more