Snippet 본문

페이징 기본형B

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/07)
Type
PC
설명
기본형의 페이징 네비게이션 (더보기 숫자형)
미리보기
Html
<div class="paging_comm">
    <a href="#none" class="link_page img_sample btn_prev"><span class="screen_out">이전</span>1~10</a>
    <span class="screen_out">현재페이지</span><em class="link_page">11</em>
    <a href="#none" class="link_page">12</a>
    <a href="#none" class="link_page">13</a>
    <a href="#none" class="link_page">14</a>
    <a href="#none" class="link_page">15</a>
    <a href="#none" class="link_page">16</a>
    <a href="#none" class="link_page">17</a>
    <a href="#none" class="link_page">18</a>
    <a href="#none" class="link_page">19</a>
    <a href="#none" class="link_page">20</a>
    <a href="#none" class="link_page img_sample btn_next"><span class="screen_out">다음</span>11~20</a>
</div>
CSS
/* 공통 */
.img_sample {background:url(/snippet/image?idx=60) no-repeat 0 0}
 
/* 페이징 */
.paging_comm {overflow:hidden;width:100%;text-align:center;vertical-align:top}
.paging_comm .link_page {display:inline-block;height:15px;padding:0 5px 1px 5px;margin-right:-1px;border:1px solid #dadada;background-color:#fff;color:#666768;font-size:12px;font-family:tahoma,sans-serif;line-height:14px;font-weight:bold;vertical-align:top}
.paging_comm a.link_page:hover,
.paging_comm em.link_page {border:1px solid #3a3a3a;color:#fff;background-color:#3a3a3a;text-decoration:none}
.paging_comm .btn_prev {padding:0 5px 1px 10px;background-position:0 3px}
.paging_comm .btn_next {padding:0 10px 1px 5px;background-position:100% -17px}
.paging_comm a.btn_prev:hover {color:#fff;background-position:0 -37px}
.paging_comm a.btn_next:hover {color:#fff;background-position:100%  -57px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기