[웹접근성] Html Guide: Board

<div class="infoBox">
	<fieldset>
		<legend>공지사항 검색</legend>
		<strong class="title"><label for="sort">구분</label></strong>
		<span class="selectBox" style="width:140px">
			<select id="sort" title="구분선택">
				<ption value="aa" selected>전체</option>
				<option value="bb">안내</option>
			</select>
		</span>
		<a class="btnS btnBlack" href="#">확인</a>
		
		<div class="addInfo">								
			<div class="search">
				<input type="text" title="검색어 입력" value="검색어를 입력하세요." style="width:330px">
				<button type="button">검색</button>
			</div>
		</div>
	</fieldset>
</div>
<div class="board">
	<table summary="테이블 설명을 서술형으로 제공합니다.">
		<caption>테이블 제목</caption>
		<colgroup>
			<col width="8%">
			<col width="12%">
			<col width="*">
			<col width="10%">
			<col width="10%">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">번호</th>
				<th scope="col">구분</th>
				<th scope="col">제목</th>
				<th scope="col">등록일</th>
				<th scope="col">조회수</th>
			</tr>
		</thead>
		<tbody>
			<tr class="notice"><!-- table 리스트 상단에 노출되는 공지사항 -->
				<td><img src="../img/common/ico_notice.png" alt="주요공지"></td>
				<td>T world</td>
				<td class="tit"><a href="#">리스트<img src="../img/common/ico_file.png" alt="첨부파일"><img src="../img/common/ico_new.png" alt="NEW"></a></td>
				<td>2015.12.20</td>
				<td>9999</td>
			</tr>
			<tr>
				<td>9999</td>
				<td>안내</td>
				<td class="tit"><a href="#">리스트<img src="../img/common/ico_file.png" alt="첨부파일"><img src="../img/common/ico_new.png" alt="NEW"></a></td>
				<td>2015.12.20</td>
				<td>9999</td>
			</tr>
			<tr class="noData">
				<td colspan="5">조회 결과가 없습니다.</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="pager">
	<a href="#" class="btn first">처음으로</a>
	<a href="#" class="btn prev">이전으로</a>
	<span class="num">
		<a href="#">1</a>
		<a href="#" class="on"><span class="hidden">현재 페이지:</span>2</a><!-- 현재페이지 class="on" 추가/ <span class="hidden">현재 페이지:</span> 코드 추가 -->
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
		<a href="#">7</a>
		<a href="#">8</a>
		<a href="#">9</a>
		<a href="#">10</a>
	</span>
	<a href="#" class="btn next">다음으로</a>
	<a href="#" class="btn end">마지막으로</a>
</div>

/*board*/
tr.notice{background:#fffdf3}
.board{width: 80%;table-layout:fixed;border-top:2px solid #ea002c;text-align:center;}
.board th{padding:21px 0 22px;border-bottom:1px solid #ccc;font-weight:bold;font-size:13px;color:#333}
.board td{padding:20px 0;border-bottom:1px solid #e4e4e4;color:#666}
.board td.tit{padding-left:30px;text-align:left}
.board td.tit a{display:inline-block;overflow:hidden;width:650px;white-space:nowrap;text-overflow:ellipsis;font-size:16px;line-height:21px;color:#111}
.board td.tit a:hover{color:#ea002c}
.board td img{margin-left:10px;vertical-align:middle;}