Snippet 본문

기본형A

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
Mobile
설명
기본 페이징
미리보기
Html
<div class="paging_comm">
    <span class="btn_page"><span class="img_sample ico_prev">이전페이지 없음</span></span>
    <span class="screen_out">현재페이지</span><em class="link_page">1</em>
    <a class="link_page" href="#none">2</a>
    <a class="link_page" href="#none">3</a>
    <a class="link_page" href="#none">4</a>
    <a href="#none" class="btn_page"><span class="img_sample ico_next">다음페이지</span></a><!-- 다음페이지가 없을 경우 span으로 변경 -->
</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:url(/snippet/image?idx=66) no-repeat;-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 {clear:both;margin:13px auto 30px;width:100%;text-align:center;font-size:12px}
.paging_comm .link_page {display:inline-block;width:26px;height:17px;margin-right:5px;padding:7px;border:1px solid #bbb;border-radius:3px;font-weight:bold;color:#666;background-color:#fff;text-decoration:none;-webkit-box-shadow:rgba(255,255,255,0.7) 0px 1px 1px inset;box-shadow:rgba(255,255,255,0.7) 0px 1px 1px inset;vertical-align:middle}
.paging_comm em.link_page {display:inline-block;width:26px;height:17px;margin-right:5px;padding:7px;border:1px solid #ed4f4d;border-radius:3px;font-weight:bold;color:#fff;background-color:#fa7573;vertical-align:middle}
.paging_comm .btn_page {display:inline-block;overflow:hidden;width:6px;height:11px;margin-right:5px;padding:10px 17px;border:1px solid #bbb;border-radius:3px;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient(top, #fff, #eee);background-image:linear-gradient(to bottom, #fff, #eee);background-color:#f5f5f5;text-decoration:none;vertical-align:top}
.paging_comm .btn_page .img_sample{display:block;overflow:hidden;width:7px;height:11px;text-indent:-9999px}
.paging_comm .btn_page .ico_prev{background-position:-60px -10px}
.paging_comm .btn_page .ico_next{background-position:-70px -10px}
.paging_comm span.btn_page .ico_prev{background-position:0 -10px}
.paging_comm span.btn_page .ico_next{background-position:-10px -10px}

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