Snippet 본문

이전 다음 형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
Mobile
설명
이전, 다음 노출형
미리보기
Html
<div class="paging_comm">
    <span class="btn_page btn_prev">
        <span class="img_sample ico_prev"></span>
        이전
    </span>
    <a href="#none" class="btn_page btn_next">
        다음
        <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-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 .btn_page {overflow:hidden;float:left;width:50%;display:block;height:25px;padding-top:7px;border:1px solid #c8c8c8;font-size:13px;background:-webkit-gradient(linear,left top,left bottom,from(#fff), to(#f9f9f9));background-color:#fcfcfc;color:#999;text-align:center}
.paging_comm .btn_prev {border-top-left-radius:3px;border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px}
.paging_comm .btn_next {overflow:hidden;float:none;width:auto;border-left:0 none;border-top-right-radius:3px;border-bottom-right-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px}
.paging_comm .img_sample {display:inline-block;overflow:hidden;width:6px;height:9px;margin-top:6px;vertical-align:top;text-indent:-9999em}
.paging_comm .ico_prev {background-position:0 0}
.paging_comm .ico_next {background-position:-10px 0}
.paging_comm a.btn_page {color:#222}
.paging_comm a.btn_page .ico_prev {background-position:-20px 0}
.paging_comm a.btn_page .ico_next {background-position:-30px 0}

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