게시판 목록 스타일 지정

웹사이트에 전체에 적용될 스타일을 설정한다.
아래 코드를 /*** The Essential Code ***/의 html, body 설정 다음에 추가한다.

pre {
    margin: 0 0 0.7em 0;
    font-family: Consolas, "Noto Sans KR", dotum, "Liberation Mono", Courier, monospace;	
}
input, select, textarea, td, th {
    color: #646464; 
    font-size: 12px;
    font-family: "돋움", dotum, sans-serif; 
}
table {
    border-collapse: collapse;
}
img {
    border: 0; 
}
form { 
    margin: 0;
	padding: 0; 
}
a:link {
    color: #2C80D0;
    text-decoration: none;
}
a:visited {
    color: #2C80D0;
    text-decoration: none;
}
a:active {
    color: #2C80D0;
    text-decoration: none;
}
a:hover {
    color: #2C80D0;
    text-decoration: underline;
}

html, body에 설정한 폰트가 모든 엘리먼트에 적용된다고 생각해선 안 된다.
다음 줄에 html과 body에 설정한 폰트가 적용되지 않은 엘리먼트(input, select, textarea, td)의 폰트를 지정하고 있다.
div역시 html, body에서 설정한 폰트를 상속하지 않지만 div 폰트를 일괄적으로 설정하는 것은 필요치 않아 뺐다.

table의 border-collapse: collapse; 설정은 셀(td를 의미)과 셀의 테두리를 서로 겹치게 하여 셀이 서로 붙어 보이게 한다.
img의 border: 0; 설정은 img에 디폴트 border 값을 주는 옛 브라우저가 있어 추가했다.

form 엘리먼트의 margin과 padding은 디폴트 값이 있다.
form 엘리먼트의 margin과 padding이 필요하지 않아 모두 0으로 설정했다.

게시판 목록 디자인

/*** Just for Looks ***/에서 #content를 삭제한다.
index.html을 열고 '다른 이름으로 저장하기' 메뉴를 사용해 list.html 파일을 만든다.
list.html의 #content 엘리먼트에 다음을 추가한다.

<!-- 본문 시작 -->
<div id="content-categories">Eclipse &gt;자유 게시판</div>

<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>
<!--  반복 구간 끝 -->             
</table>
<div id="paging">
	<a href="#">[이전]</a>
	<span class="bbs-strong">6</span> <!--현재 페이지-->
	<a href="#">[7]</a>
	<a href="#">[8]</a>
	<a href="#">[9]</a>
	<a href="#">[10]</a>
	<a href="#">[다음]</a>
</div>
<div id="list-menu">
	<input type="button" value="새 글쓰기" />
</div>
<div id="search">
	<form method="get">
	<p style="margin: 0;padding: 0;" >
		<input type="hidden" name="curPage" value="1" />
		<input type="hidden" name="boardCd" value="chat" />
		<div>
			<input type="text" name="searchWord" size="15" maxlength="30" />
			<input type="submit" value="검색" />
		</div>
	</p>
	</form>
</div>
<!--  본문 끝 -->

게시판 디자인 1

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

#content {
	margin-left: 180px;
	margin-right: 210px;
	padding-left: 9px;
	padding-right: 9px;
	font-size: 0.9em;
	line-height: 1.6;
}

패딩을 추가했으므로 #content의 width는 592px이다.
1000 - 마진 390(180 + 210) - 패딩 18(9+9) = 592

게시판 디자인 2

#content-categories는 #content의 가장 위에서 사용자에게 #content 내용이 어떤 카테고리에 속하는지 보여준다.
다음을 스타일 시트에 추가한다.

#content-categories {
	margin: 0;
	padding-top: 10px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
}

게시판 디자인 3

게시판 테이블 셀 헤더 스타일

.bbs-table {
	width: 100%;
	margin: 0.7em 0 0 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: 1px solid silver;
	line-height: 1.45;
}
.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="첨부 파일" style="vertical-align: middle;" />
		<!-- 댓글 개수표시 -->
		[5]
	</td>
	<td style="text-align: center;">2011.11.15</td>
	<td style="text-align: center;">4555</td>
</tr>
<!-- 반복 구간 끝 -->

게시판 디자인 8

페이지 이동 링크 스타일

#paging {
    text-align: center;
    font-size: 13px;
}
#paging > a {
    color: #555;
    text-decoration: none;
}
#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="첨부 파일" style="vertical-align: middle;" />
		<!--댓글 개수표시-->
		<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>

게시판 디자인 10