[웹접근성] Style Guide: page navigation

<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>
		<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>

.pager{padding:30px 0 0;text-align:center}
.pager *{vertical-align:middle}
.pager a{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;font-size:14px;color:#666}
.pager .btn, .pager .btn:hover{background:url(../../img/common/sp_form.png) no-repeat;text-indent:-9999px;line-height:0;font-size:0}
.pager .first, .pager .first:hover{background-position:0 -141px}
.pager .prev, .pager .prev:hover{margin:0 10px 0 2px;background-position:-35px -141px}
.pager .next, .pager .next:hover{margin:0 2px 0 10px;background-position:0 -171px}
.pager .end, .pager .end:hover{background-position:-35px -171px}
.pager a.on, .pager a:hover{background:#ea002c;text-decoration:none;color:#fff}