Snippet 본문

날짜 선택형

등록
신예호 (등록일 : 2011/09/26    최종수정일 : 2013/03/08)
Type
Mobile
설명
날짜 선택형
미리보기
Html
<div class="paging_comm">
	<span class="btn_page btn_prev"><span class="img_sample ico_arr"></span>-</span> <!-- 이전 페이지가 없을 경우 span으로 변경 -->
	<em class="txt_time">03.02(수)</em>
	<a href="#none" class="btn_page btn_next"><span class="img_sample ico_arr"></span>03.03(목)</a>
</div>
CSS
/* background image */
.img_sample {background:url(/snippet/image?idx=67) 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=68);-webkit-background-size:16px 19px;background-size:16px 19px}
}
/* 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=68);-webkit-background-size:16px 19px;background-size:16px 19px}
}

/* paging */
.paging_comm {height:31px;margin:10px;border:1px solid #d8d8d8;-webkit-border-radius:3px;border-radius:3px;font-size:13px;background-color:#fefefe;line-height:31px}
.paging_comm .txt_time {overflow:hidden;float:left;position:relative;top:-1px;height:31px;width:33.3%;background:#f5f5f5;border:1px solid #c9c9c9;border-bottom:0;color:#222;text-align:center;line-height:31px;-webkit-box-shadow:inset 1px 1px 0px #ededed;box-shadow:inset 1px 1px 0px #ededed}
.paging_comm .btn_page {display:block;position:relative;height:31px;text-align:center}
.paging_comm .btn_page .ico_arr {overflow:hidden;position:absolute;top:11px;width:6px;height:9px}
.paging_comm .btn_prev {float:left;width:33.3%;color:#222}
.paging_comm .btn_prev .ico_arr {left:10px;background-position:0 0}
.paging_comm .btn_next {overflow:hidden;float:none;width:auto;color:#222}
.paging_comm .btn_next .ico_arr {right:10px;background-position:0 -10px}

/* 비활성상태 */
.paging_comm span.btn_prev .ico_arr {background-position:-10px 0}
.paging_comm span.btn_next .ico_arr {background-position:-10px -10px}

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