Snippet 본문

페이징 기본형A

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/07)
Type
PC
설명
기본형의 페이징 네비게이션 (이전, 다음)
미리보기
Html
<div class="paging_comm">
    <a href="#none" class="img_sample btn_prev">이전</a>
    <span class="screen_out">현재페이지</span><em class="link_page">1</em>
    <a href="#none" class="link_page">2</a>
    <a href="#none" class="link_page">3</a>
    <a href="#none" class="link_page">4</a>
    <a href="#none" class="link_page">5</a>
    <a href="#none" class="link_page">6</a>
    <a href="#none" class="link_page">7</a>
    <a href="#none" class="link_page">8</a>
    <a href="#none" class="link_page">9</a>
    <a href="#none" class="link_page">10</a>
    <a href="#none" class="img_sample btn_next">다음</a>
</div>
CSS
/* 공통 */
.img_sample {background:url(/snippet/image?idx=59) no-repeat 0 0}
 
/* 페이징 */
.paging_comm {font-weight:bold;font-size:14px;line-height:14px;text-align:center;vertical-align:top}
.paging_comm .link_page {display:inline-block;padding:4px 6px 3px 5px;margin-right:1px;border:1px solid #eaeaea;text-decoration:none}
.paging_comm .link_page:hover,
.paging_comm em.link_page {border:1px solid #536fe5;color:#536fe5;font-weight:bold}
.paging_comm .img_sample {display:inline-block;padding:6px 2px 4px 3px;border:0 none;font-weight:normal;color:#999;text-decoration:none}
.paging_comm .link_page:hover {text-decoration:none}
.paging_comm .btn_prev {padding-left:6px;background-position:0 10px}
.paging_comm .btn_next {padding-right:7px;background-position:100% -10px}
.paging_comm a.btn_prev:hover {background-position:0 -30px;color:#333}
.paging_comm a.btn_next:hover {background-position:100% -50px;color:#333}
.paging_comm span.btn_prev {background-position:0 10px;color:#999}
.paging_comm span.btn_next {background-position:100% -10px;color:#999}

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