Snippet 본문

보더형A

등록
신예호 (등록일 : 2011/09/26    최종수정일 : 2013/03/11)
Type
Mobile
설명
탭메뉴 보더형
미리보기
Html
<div class="tab_comm">
	<ul class="tab_menu">
		<li><a href="#none" class="link_tab">탭 제목1</a></li>
		<li class="lst on"><a href="#none" class="link_tab">탭 제목2</a></li>
	</ul>
</div>
CSS
.tab_comm {height:38px;margin-top:23px;border-left:1px solid #ddd;border-right:1px solid #ddd}
.tab_comm .tab_menu {overflow:hidden;width:100%}
.tab_comm li {float:left;width:50%;text-align:center}
.tab_comm .link_tab {display:block;height:36px;border-right:1px solid #ddd;border-top:1px solid #ddd;border-bottom:1px solid #ddd;font-size:15px;line-height:36px;background-color:#f5f5f5;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #fff, #f5f5f5);background-image:-o-linear-gradient(top, #fff, #f5f5f5);background-image:linear-gradient(to bottom, #fff, #f5f5f5)}
.tab_comm .on .link_tab {height:38px;border-bottom:0 none;background:#fff;color:#f2385b}
.tab_comm .lst {overflow:hidden;float:none;width:auto}
.tab_comm .lst .link_tab {border-right:0 none}

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