Snippet 본문

플래킹 버튼형

등록
김면정 (등록일 : 2012/08/07    최종수정일 : 2014/03/07)
Type
Mobile
설명
플래킹 버튼형 - 페이지 수 유동적이게 변동가능. - 이전/다음 button 요소를 a요소로 변경가능
미리보기
Html
<div class="paging_comm">
	<span class="inner_paging">
		<span class="paging_num">
			<span class="screen_out">현재페이지</span><em class="num_page">1</em><span class="num_page">2</span><span class="num_page">3</span><span class="num_page">4</span><span class="num_page">5</span>
		</span>
		<button type="button" class="btn_page btn_prev"><span class="img_sample ico_prev">이전</span></button>
		<button type="button" class="btn_page btn_next"><span class="img_sample ico_next">다음</span></button>
	</span>
</div>
CSS
.img_sample {background:url(http://snippet.ftdev.daum.net/rest/image/load.php?idx=288) no-repeat}

.paging_comm {overflow:hidden;width:100%;text-align:center;clear:both}
.paging_comm .inner_paging {display:inline-block;position:relative;height:27px;margin:12px auto;text-align:center}
.paging_comm .btn_page {overflow:hidden;position:absolute;top:0;width:40px;height:27px;border:1px solid #d2d2d2;border-radius:5px;background-color:#f9f9f9;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f6f6f6));background-image:-moz-linear-gradient(top, #fff, #f6f6f6);background-image:-o-linear-gradient(top, #fff, #f6f6f6);background-image:linear-gradient(to bottom, #fff, #f6f6f6);-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.5);box-shadow:inset 0 1px 1px rgba(255,255,255,0.5);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.paging_comm .img_sample {display:block;overflow:hidden;margin:8px auto;width:7px;height:9px;text-indent:-9999px;vertical-align:top}
.paging_comm .btn_prev {left:0}
.paging_comm .btn_next {right:0}
.paging_comm .ico_prev {background-position:0 0}
.paging_comm .ico_next {background-position:0 -10px}
.paging_comm .paging_num {display:inline-block;margin:8px 46px 0;padding:0 10px}
.paging_comm .paging_num .num_page {display:inline;float:left;width:7px;height:7px;margin:1px 2px 0 1px;border:1px solid #bababa;border-radius:6px;background-color:#d3d3d3;font-size:0;line-height:0;text-indent:-9999px}
.paging_comm .paging_num em.num_page {border:1px solid #4081b4;background-color:#74acd7}

@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(http://snippet.ftdev.daum.net/rest/image/load.php?idx=289);-webkit-background-size:16px 19px;background-size:16px 19px}
}
@media 
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.img_sample {background-image:url(http://snippet.ftdev.daum.net/rest/image/load.php?idx=290);-webkit-background-size:16px 19px;background-size:16px 19px}
}

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