board_list (class="bbs_list_01")

#pagenum {
	width:100%;			/* ul 가로값 설정 */
	font-family:tahoma;
	font-size:1px;			/* li를 display:inline으로 배치시 공백문자크기만큼 벌어짐 방지 */
	margin:20px 0;
	text-align:center;		/* 넘버링의 가운데 정렬 */
}
#pagenum a.active {		/* 현재 페이지 넘버 표시 */
	font-weight:bold;
	color:#EB671D;
}
#pagenum li {
	display:inline;
	margin-left:-2px;	/* 공백문자 만큼 벌어진 여백 없애기 */
}
#pagenum li span {
	font-size:11px;		/* ul의 font-size:1px을 원래 글자 크기로 돌림 */
	background:url(images/page_line.gif) no-repeat left center;	/* 넘버 사이에 구분선이 있을경우 */
}
#pagenum li span.first {
	background-image:none;	/* 구분선중 첫번째에만 없애기 */
}
#pagenum li span a:hover {	/* 마우스 오버시 효과 */
	color:#0066CC;
	background-color:#efefef;
}
#pagenum li a {
	padding:0 7px 0 8px;	/* 마우스 클릭을 쉽게 하기위한 좌우 여백 지정 */
}
#pagenum li img {
	position:relative;
	top:1px;		/* 텍스트와 이미지의 수평정렬을 맞춤 */
	margin:0 -5px;		/* 패딩값 보정 */
}

<ul id="pagenum">
	<li><a href="#"><img src="" alt="처음으로" /></a></li>
	<li><a href="#"><img src="" alt="다음으로" /></a></li>
	<li><span class="first"><a href="#">1</a></span></li>
	<li><span><a href="#">2</a></span></li>
	<li><span><a href="#">3</a></span></li>
	<li><span><a href="#">4</a></span></li>
	<li><span><a href="#">5</a></span></li>
	<li><span><a href="#" class="active">6</a></span></li>
	<li><span><a href="#">7</a></span></li>
	<li><span><a href="#">8</a></span></li>
	<li><span><a href="#">9</a></span></li>
	<li><span><a href="#">10</a></span></li>
	<li><a href="#"><img src="" alt="이전으로" /></a></li>
	<li><a href="#"><img src="" alt="마지막으로" /></a></li>
</ul>