Snippet 본문

기본형B

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
Mobile
설명
현재 / 마지막 페이지 숫자 노출형
미리보기
Html
<div class="paging_comm">
    <a href="#none" class="btn_page btn_prev"><span class="img_sample ico_prev">Fun 이전</span></a>
    <span class="screen_out">현재페이지</span><span class="num_page">1</span> <span class="txt_bar">/</span> 4
    <a href="#none"  class="btn_page btn_next"><span class="img_sample ico_next">Fun 다음</span></a>
</div>
CSS
/* background image */
.img_sample {background:url(/snippet/image?idx=65) no-repeat}

/* high resolution image */
/* ratio 1.5 */
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.img_sample {background-image:url(/snippet/image?idx=66);-webkit-background-size:80px 24px;background-size:80px 24px}
}
/* ratio 2 */
@media 
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.img_sample {background-image:url(/snippet/image?idx=166);-webkit-background-size:80px 24px;background-size:80px 24px}
}

/* paging */
.paging_comm {position:relative;width:134px;height:26px;margin:0 auto;color:#666;text-align:center;line-height:26px}
.paging_comm .num_page {color:#425de8;font-size:14px}
.paging_comm .txt_bar {color:#c5c5c5}
.paging_comm .btn_page {position:absolute;top:0;width:37px;height:26px;overflow:hidden;text-indent:-9999px;border:1px solid #b3b4bb;-webkit-border-radius:3px;background-color:#fafafa;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f6f6f6))}
.paging_comm .btn_prev {left:0}
.paging_comm .btn_next {right:0}
.paging_comm .img_sample {display:block;margin:8px auto 0 auto;width:6px;height:9px;overflow:hidden;text-align:center}
.paging_comm .ico_prev {background-position:-40px -10px}
.paging_comm .ico_next {background-position:-50px -10px}

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