java-school logo

목록

게시판뿐 아니라 웹사이트에 전체에 적용될 스타일을 설정한다.
/*** The Essential Code ***/에 아래 강조된 부분을 추가한다.

@CHARSET "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*** The Essential Code ***/
html, body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans KR", "Liberation Sans", Helvetica, dotum, sans-serif;
}
div, input, select, textarea, td {
	color: #646464;
	font-size: 12px;
}
table {
	border-collapse: collapse;
}
img {
	border: 0;
}
form {
	margin: 0;
	padding: 0;
}

지금까지 예제를 따라 하면서 작성한 index.html을 열고 '다른 이름으로 저장하기' 메뉴를 이용해서 list.html 파일을 생성한다.
/*** Just for Looks ***/에서 #content을 삭제한다.
list.html의 #content에 다음을 붙여넣는다.

<!-- 본문 시작 -->
<div id="url-navi">Eclipse &gt; Eclipse Tutorial</div>
<h1>Eclipse 설치</h1>
<table class="bbs-table">
<!--  게시판 목록 머리말 -->
<tr>
	<th>NO</th>
	<th>TITLE</th>
	<th>DATE</th>
	<th>HIT</th>
</tr>
<!--  반복 구간 시작 -->
<tr>
	<td>11</td> <!--번호-->
	<td>
		<a href="#">제목</a>
		<img src="images/attach.png" alt="첨부 파일" /> <!--첨부 파일이 있으면 표시-->
		[5] <!--댓글 개수표시-->
		</td>
		<td>2011.11.15</td> <!--등록일-->
		<td>4555</td> <!--조회 수-->
</tr>
<tr>
	<td>11</td> <!--번호-->
	<td>
		<a href="#">제목</a>
		<img src="images/attach.png" alt="첨부 파일" /> <!--첨부 파일이 있으면 표시-->
		[5] <!--댓글 개수표시-->
		</td>
		<td>2011.11.15</td> <!--등록일-->
		<td>4555</td> <!--조회 수-->
</tr>
<tr>
	<td>11</td> <!--번호-->
	<td>
		<a href="#">제목</a>
		<img src="images/attach.png" alt="첨부 파일" /> <!--첨부 파일이 있으면 표시-->
		[5] <!--댓글 개수표시-->
		</td>
		<td>2011.11.15</td> <!--등록일-->
		<td>4555</td> <!--조회 수-->
</tr>
<tr>
	<td>11</td> <!--번호-->
	<td>
		<a href="#">제목</a>
		<img src="images/attach.png" alt="첨부 파일" /> <!--첨부 파일이 있으면 표시-->
		[5] <!--댓글 개수표시-->
		</td>
		<td>2011.11.15</td> <!--등록일-->
		<td>4555</td> <!--조회 수-->
</tr>
<!--  반복 구간 끝 -->             
</table>
<div id="paging">
	<span class="bbs-strong">1</span> <!--현재 페이지-->
	<a href="#">[2]</a>
	<a href="#">[3]</a>
	<a href="#">[4]</a>
	<a href="#">[5]</a>
</div>
<div id="list-menu">
	<input type="button" value="새 글쓰기" />
</div>
<div id="search">
	<form action="list.jsp" method="get">
	<p style="margin: 0;padding: 0;" >
		<input type="hidden" name="boardCd" value="free" />
		<input type="hidden" name="curPage" value="1" />                               
		<input type="text" name="searchWord" size="15" maxlength="30" />
		<input type="submit" value="검색" />
	</p>
	</form>
</div>
<!--  본문 끝 -->

게시판 디자인 1

#content 패딩, 폰트 크기, 줄 간격 설정

#content {
	margin-left: 180px;
	margin-right: 210px;
	padding-left: 9px;
	padding-right: 9px;
	border-left: 1px solid #DAEAAA;
	border-right: 1px solid #DAEAAA;
	font-size: 13px;
	line-height: 19px;
}
#content 좌우 패딩 9px
608에서 18을 뺀 590px이 #content의 width가 된다.

게시판 디자인 2

#url-navi 추가

Eclipse > Eclipse Tutorial 부분의 스타일을 위해 다음을 CSS 파일에 추가한다.

#url-navi {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 8px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	border-bottom: 1px solid #DAEAAA;
}

게시판 디자인 3

게시판 제목 스타일

게시판 제목에 해당하는 #content h1을 추가한다.

#content h1 {
	margin: 9px 0;
	padding: 7px 0x;
	font-size: 15px;
}

게시판 디자인 4

목록 머릿글 스타일

사실 여기까지는 게시판 디자인이 아니라 일반적인 content 디자인이다.
bbs 엘리먼트가 감싸고 있는 부분이 게시판 부분이다.
게시판 목록 머릿글에 해당하는 th 스타일을 지정한다.

.bbs-table {
	width: 100%;
	margin: 1em 0;
}
.bbs-table th {
	color: #92B91C;
	border-top: 1px solid #92B91C;
	border-bottom: 1px solid #92B91C;
}

게시판 디자인 5

게시판 목록 아이템 디자인

번호, 제목, 등록일, 조회 수 부분에 대한 스타일을 지정한다.

.bbs-table td {
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: silver 1px solid;
}
.bbs-table td a {
	color: #555;
	text-decoration: none;
}
.bbs-table td a:hover {
	color:#555;
	text-decoration: underline;
}

게시판 디자인 6

목록 머릿말의 넓이를 조절한다.

<!--  게시판 목록 머리말 -->
<tr>
    <th style="width: 60px;">NO</th>
    <th>TITLE</th>
    <th style="width: 84px;">DATE</th>
    <th style="width: 60px;">HIT</th>
</tr>

게시판 디자인 7

목록 아이템 중 제목을 제외하고 text-align: center;로 설정한다.

<tr>
	<td style="text-align: center;">11</td>
	<td>
		<a href="#">제목</a>
		<img src="images/attach.png" alt="첨부 파일" />
		[5]
	</td>
	<td style="text-align: center;">2011.11.15</td>
	<td style="text-align: center;">4555</td>
</tr>

게시판 디자인 8

페이지 이동 링크 스타일 지정

#paging {
    text-align: center;
}
#paging a {
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
#paging a:hover {
    color: #555;
    text-decoration: underline;
}

게시판 디자인 9

댓글 개수, 현재 페이지 번호와 같이 게시판에서 글자를 강조하기 위한 스타일을 추가한다.

.bbs-strong {
	color: #FFA500;
	font-weight: bold;
}

bbs-string 스타일을 댓글 개수와 현재 페이지 번호에 적용한다.

<tr>
	<td style="text-align: center;">11</td> <!--번호-->
	<td>
		<a href="#">제목</a>
		<!--첨부 파일이 있으면 표시-->
		<img src="images/attach.png" alt="첨부 파일" />
		<!--댓글 개수표시-->
		<span class="bbs-strong">[5]</span>
	</td>
	<td style="text-align: center;">2011.11.15</td> <!--등록일-->
	<td style="text-align: center;">4555</td> <!--조회 수-->
</tr>
</table>

<div id="paging">
<span class="bbs-strong">1</span>
<a href="#">[2]</a>
<a href="#">[3]</a>
<a href="#">[4]</a>
<a href="#">[5]</a>
</div>

게시판 디자인 10

새 글쓰기 버튼 위치 조정

새 글쓰기 버튼이 화면 오른쪽에 있도록 스타일을 지정한다.

#list-menu {
    text-align: right;
}

게시판 디자인 11

검색을 중앙으로

검색을 화면 중앙으로 이동시킨다.

#search {
	text-align: center;
}

게시판 디자인 12

화면 간격 조정

#search와 #footer의 간격도 조정한다.
기존 #search에 다음 강조된 부분을 추가한다.

#search {
	text-align: center;
	padding-bottom: 15px;
}

게시판 디자인 13

참고