Snippet 본문

라운드형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
PC
설명
라운드 형태의 탭메뉴
미리보기
Html
<div class="tab_comm">
	<h2 class="bg_tab"><span class="screen_out">미디어다음</span></h2>
	<div class="section_tab">
		<h3 class="tit_head tit_news"><a href="#none" class="link_tab">뉴스</a></h3>
		<ul class="list_txt">
			<li class="emph_g"><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
			<li><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
			<li><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
			<li><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
			<li><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
			<li><a href="#none" class="link_txt">[뉴스] 뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스뉴스</a></li>
		</ul>
	</div>
	<div class="section_tab on">
		<h3 class="tit_head tit_economy"><a href="#none" class="link_tab">경제</a></h3>
		<ul class="list_txt">
			<li class="emph_g"><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
			<li><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
			<li><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
			<li><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
			<li><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
			<li><a href="#none" class="link_txt">[경제] 경제경제경제경제경제경제경제경제경제경제경제경제경제경제경제</a></li>
		</ul>
	</div>
	<div class="section_tab">
		<h3 class="tit_head tit_sports"><a href="#none" class="link_tab">스포츠</a></h3>
		<ul class="list_txt">
			<li class="emph_g"><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
			<li><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
			<li><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
			<li><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
			<li><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
			<li><a href="#none" class="link_txt">[스포츠] 스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠스포츠</a></li>
		</ul>
	</div>
	<div class="section_tab">
		<h3 class="tit_head tit_entertain"><a href="#none" class="link_tab">연예</a></h3>
		<ul class="list_txt">
			<li class="emph_g"><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
			<li><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
			<li><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
			<li><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
			<li><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
			<li><a href="#none" class="link_txt">[연예] 연예연예연예연예연예연예연예연예연예연예연예연예연예연예연예</a></li>
		</ul>
	</div>
	<div class="section_tab">
		<h3 class="tit_head tit_game"><a href="#none" class="link_tab">루리웹</a></h3>
		<ul class="list_txt">
		<li class="emph_g"><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
			<li><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
			<li><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
			<li><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
			<li><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
			<li><a href="#none" class="link_txt">[루리웹] 루리웹루리웹루리웹루리웹루리웹</a></li>
		</ul>
	</div>
</div>
CSS
.tab_comm {position:relative;width:401px;height:248px;padding-top:3px}
.tab_comm .bg_tab {padding-top:3px;height:29px;background:url(/snippet/image?idx=5) 0 3px no-repeat}
.tab_comm .tit_head {overflow:hidden;position:absolute;top:3px;width:80px}
.tab_comm .link_tab {display:block;overflow:hidden;height:29px;padding-top:3px;font-size:11px;line-height:32px;color:#32313f;text-align:center;font-weight:normal;text-decoration:none}
.tab_comm .on .link_tab {font-weight:bold;letter-spacing:-1px}
.tab_comm .tit_news {left:1px}
.tab_comm .tit_economy {left:81px}
.tab_comm .tit_sports {left:161px}
.tab_comm .tit_entertain {left:241px}
.tab_comm .tit_game {left:321px}
.tab_comm .on .tit_head {z-index:1;width:87px;background:url(/snippet/image?idx=5) -85px -30px no-repeat}
.tab_comm .on .tit_news {left:0;width:85px;background-position:0 -30px}
.tab_comm .on .tit_economy {left:78px}
.tab_comm .on .tit_sports {left:158px}
.tab_comm .on .tit_entertain {left:238px}
.tab_comm .on .tit_game {left:318px;width:83px;background-position:-172px -30px}
.tab_comm .list_txt {display:none;overflow:hidden;width:100%;padding-top:5px}
.tab_comm .on .list_txt {display:block}
.tab_comm .list_txt li {overflow:hidden;float:left;width:100%;padding-top:10px;line-height:14px;white-space:nowrap}
.tab_comm .list_txt .link_txt {float:left;color:#333}
.tab_comm .list_txt .emph_g {font-weight:bold;letter-spacing:-1px}

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