HTML PAGING CSS (페이징 CSS)

HTML PAGING CSS (페이징 CSS)

쓸만한  페이징 CSS가 있어 소개 하고자한다.

보통 필자는  부트스트랩을 많이사용하나 부트스트랩이 이쁘지않거나

HTML 로 사용 할경우  많은 고민이 따른다. 

그러다가 발견한것이있는데

해당 CSS이다. 

바둑돌모양으로 이쁘며 바꾸기도 용의하게되어있어

CSS를 조금만 만질줄 아는사람이면 자신의 스타일로 언제든지 변경시킬수 있을것같으며

IE 7이상의 버전 , 파이어폭스, 크롬, 사파리, 엣지 . ETC...  등 버전에서도 사용이 가능하다.

<<< 1 2 3 4 5 > >>

.paging .hide {display:block;height:0;width:0;font-size:0;line-height:0;margin:0;padding:0;overflow:hidden;}


.paging{padding:19px;text-align:center;}


.paging a{display:inline-block;width:23px;height:23px;padding-top:2px;vertical-align:middle;}


.paging a:hover{text-decoration:underline;}


.paging .btn_arr{text-decoration:none;}


.paging .btn_arr, .paging .on{margin:0 3px;padding-top:0;border:1px solid #ddd; border-radius:30px;

/* background:url(/front/img/com/btn_paging.png) no-repeat; */}


.paging .on{padding-top:1px;height:22px;color:#fff;font-weight:bold;background:#000;}


.paging .on:hover{text-decoration:none;}


/* 백그라운드일경우

.paging .first{background-position:left top;}

.paging .prev{background-position:-50px top;}

.paging .next{background-position:-100px top;}

.paging .last{background-position:-150px top;}*/
 
<!-- paging -->
 
<div class="paging">
 
  <a href="#" class="btn_arr first"><span class="hide">처음페이지</span></a>            
  <a href="#" class="btn_arr prev"><span class="hide">이전페이지</span></a>     
  <a href="#" class="on">1</a><!-- D : 활성화페이지일 경우 : on 처리 -->
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#" class="btn_arr next"><span class="hide">다음페이지</span></a>            
  <a href="#" class="btn_arr last"><span class="hide">마지막페이지</span></a>           
</div>
 
<!-- //paging -->