게시판 목록 스타일 지정

웹사이트에 전체에 적용될 스타일을 설정한다.
아래 코드를 /*** 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>