게시판 페이징 UI 종류

페이징 네이비게이션 방법 2가지

맨 처음과 끝 표시는 어렵지 않다.

<< : 맨 처음 1페이지
>> : 맨 끝 마지막 페이지

 

하지만 이전 버튼과 다음 버튼의 경우 의미가 두 가지 버전으로 나뉠 수 있다.

#1. < > : 다음,이전 페이지
#2. < > : 11페이지 ~ 20페이지

 

<div class="pg-wrap">
	<div class="pg-box">
		<a href="#none" class="pg_page pg_start"><img src="/img/pg_start_ico.png" alt=""></a>
		<a href="#none" class="pg_page pg_prev"><img src="/img/pg_prev_ico.png" alt=""></a>
		<a href="#none" class="pg_page">1</a>
		<a href="#none" class="pg_page pg_current">2</a>
		<a href="#none" class="pg_page">3</a> 
		<a href="#none" class="pg_page">4</a>
		<a href="#none" class="pg_page">5</a>
		<a href="#none" class="pg_page">6</a>
		<a href="#none" class="pg_page">7</a>
		<a href="#none" class="pg_page">8</a>
		<a href="#none" class="pg_page">9</a>
		<a href="#none" class="pg_page">10</a>
		<a href="#none" class="pg_page pg_next"><img src="/img/pg_next_ico.png" alt=""></a>
		<a href="#none" class="pg_page pg_end"><img src="/img/pg_end_ico.png" alt=""></a>
	</div>
</div>