Snippet 본문

플래킹형

등록
김인희, 신예호 (등록일 : 2012/08/08    최종수정일 : 2013/05/29)
Type
PC
설명
. 플래킹형 타입의 탭메뉴
미리보기
Html
<div class="tabdate_comm">
	<div class="thumb_preview">
		<ul class="tab_date" style="left:-82px"><!-- -82px씩 이동-->
			<li class="on">
				<a href="#" class="link_tab">
					<span class="txt_tab txt_0">D-1일차</span>
				</a>
			</li>
			<li class="on">
				<a href="#" class="link_tab">
					<span class="txt_tab txt_1">1일차</span>
				</a>
			</li>
			<li class="on">
				<a href="#" class="link_tab">
					<span class="txt_tab txt_2">2일차</span>
				</a>
			</li>
			<li class="on today_on">
				<a href="#" class="link_tab">
					<span class="txt_tab txt_3">3일차</span>
				</a>
			</li>
			<li>
				<a href="#" class="link_tab">
					<span class="txt_tab txt_4">4일차</span>
				</a>
			</li>
			<li>
				<a href="#" class="link_tab">
					<span class="txt_tab txt_5">5일차</span>
				</a>
			</li>
			<li class="selected_on">
				<a href="#" class="link_tab">
					<span class="txt_tab txt_6">6일차</span>
				</a>
			</li>
			<li>
				<a href="#" class="link_tab">
					<span class="txt_tab txt_7">7일차</span>
				</a>
			</li>
			<li>
				<a href="#" class="link_tab">
					<span class="txt_tab txt_8">8일차</span>
				</a>
			</li>
			<li>
				<a href="#" class="link_tab">
					<span class="txt_tab txt_9">9일차</span>
				</a>
			</li>
		</ul>
	</div>
	<span class="btn_date btn_prev"><span class="img_sample ico_prev">이전</span></span><!-- 이전이 없을경우 span으로 변경 -->
	<a href="#none" class="btn_date btn_next"><span class="img_sample ico_next">다음</span></a>
</div>
CSS
.img_sample {display:block;overflow:hidden;background:url(/snippet/image?idx=342) no-repeat;text-indent:-9999px}

.tabdate_comm {overflow:hidden;position:relative;width:617px;height:47px;background:url(/snippet/image?idx=341) repeat-x}
.tabdate_comm .thumb_preview {overflow:hidden;position:absolute;top:0;left:22px;width:573px;height:47px}
.tabdate_comm .tab_date {position:absolute;top:1px;width:9999px;height:46px}
.tabdate_comm .tab_date li {float:left;height:46px;border-right:1px solid #ddd}
.tabdate_comm .tab_date .link_tab {float:left;width:81px;height:46px}
.tabdate_comm .tab_date .txt_tab {display:block;overflow:hidden;width:44px;height:14px;margin:16px 0 0 19px;background:url(/snippet/image?idx=342) no-repeat;text-indent:-9999px;cursor:pointer}
.tabdate_comm .tab_date .link_tab .txt_0 {background-position:0 0}
.tabdate_comm .tab_date .link_tab .txt_1 {background-position:0 -25px}
.tabdate_comm .tab_date .link_tab .txt_2 {background-position:0 -50px}
.tabdate_comm .tab_date .link_tab .txt_3 {background-position:0 -75px}
.tabdate_comm .tab_date .link_tab .txt_4 {background-position:0 -100px}
.tabdate_comm .tab_date .link_tab .txt_5 {background-position:0 -125px}
.tabdate_comm .tab_date .link_tab .txt_6 {background-position:0 -150px}
.tabdate_comm .tab_date .link_tab .txt_7 {background-position:0 -175px}
.tabdate_comm .tab_date .link_tab .txt_8 {background-position:0 -200px}
.tabdate_comm .tab_date .link_tab .txt_9 {background-position:0 -225px}
.tabdate_comm .tab_date .on .link_tab .txt_0 {background-position:0 -250px}
.tabdate_comm .tab_date .on .link_tab .txt_1 {background-position:0 -275px}
.tabdate_comm .tab_date .on .link_tab .txt_2 {background-position:0 -300px}
.tabdate_comm .tab_date .on .link_tab .txt_3 {background-position:0 -325px}
.tabdate_comm .tab_date .on .link_tab .txt_4 {background-position:0 -350px}
.tabdate_comm .tab_date .on .link_tab .txt_5 {background-position:0 -375px}
.tabdate_comm .tab_date .on .link_tab .txt_6 {background-position:0 -400px}
.tabdate_comm .tab_date .on .link_tab .txt_7 {background-position:0 -425px}
.tabdate_comm .tab_date .on .link_tab .txt_8 {background-position:0 -450px}
.tabdate_comm .tab_date .on .link_tab .txt_9 {background-position:0 -475px}
.tabdate_comm .tab_date .selected_on .link_tab {background-color:#fff;cursor:default}
.tabdate_comm .tab_date .selected_on .txt_tab {cursor:default}
.tabdate_comm .tab_date .selected_on .link_tab .txt_0 {background-position:0 -500px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_1 {background-position:0 -525px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_2 {background-position:0 -550px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_3 {background-position:0 -575px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_4 {background-position:0 -600px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_5 {background-position:0 -625px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_6 {background-position:0 -650px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_7 {background-position:0 -675px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_8 {background-position:0 -700px}
.tabdate_comm .tab_date .selected_on .link_tab .txt_9 {background-position:0 -725px}
.tabdate_comm .tab_date .today_on .link_tab {height:45px;background-color:#fff;cursor:default}
.tabdate_comm .tab_date .today_on .link_tab .txt_tab {width:43px;margin-top:19px;background-position:0 -850px;cursor:default}
.tabdate_comm .btn_date {position:absolute;top:1px;width:20px;height:45px;border-left:1px solid #ddd;border-right:1px solid #ddd;background-color:#f2f4f7}
.tabdate_comm .btn_prev {left:0}
.tabdate_comm .btn_next {right:0}
.tabdate_comm .btn_date .img_sample {width:5px;height:9px;margin:18px 0 0 7px;cursor:pointer}
.tabdate_comm span.btn_date .img_sample {cursor:default}
.tabdate_comm .btn_prev .ico_prev {background-position:0 -750px}
.tabdate_comm .btn_next .ico_next {background-position:0 -800px}
.tabdate_comm span.btn_prev .ico_prev {background-position:0 -775px}
.tabdate_comm span.btn_next .ico_next {background-position:0 -825px}

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