Snippet 본문

보더형B

등록
신예호 (등록일 : 2011/09/26    최종수정일 : 2013/03/11)
Type
Mobile
설명
좌, 우에 라인이 없는 탭메뉴
미리보기
Html
<div class="tab_comm">
	<ul class="tab_menu">
		<li><a href="#none" class="link_tab">투데이</a></li>
		<li class="on"><em class="link_tab">스토리</em></li><!-- 선택된 탭인경우 em으로 변경 -->
		<li class="lst"><a href="#none" class="link_tab">라이프</a></li>
	</ul>
</div>
CSS
.tab_comm{overflow:hidden;width:100%}
.tab_menu {width:101%;height:36px}
.tab_menu li {float:left;width:33.33%;height:34px;border-top:1px solid #b2b2b2;border-bottom:1px solid #b2b2b2;background:#f6f6f6}
.tab_menu .link_tab {display:block;height:27px;padding-top:7px;border-right:1px solid #ddd;font-size:13px;text-align:center;color:#666}
.tab_menu .on {height:35px;border-bottom:0;background:#fff}
.tab_menu .on .link_tab {position:relative;height:28px;margin-left:-1px;border-left:1px solid #b2b2b2;border-right:1px solid #b2b2b2;color:#222}
.tab_menu .lst {border-right:0 none}
.tab_menu .lst .link_tab {border-right:0}

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