Tab

Tab

탭은 Main과 Sub 형태 두가지로 사용될 수 있으며, 탭의 line 컬러와 _on 텍스트 컬러는 각 서비스의 primary 컬러를 사용하도록 합니다.

탭 버튼은 최소 3개 이상일 때 사용하기를 권장합니다. 2개의 탭일 경우 사용자가 인지하기에 따라 활성화되어 있는 영역과 비활성화 영역 구분에 대한 혼란을 방지하기 위해서입니다. * 모바일에서는 버튼과 마찬가지로 사용자의 터치 영역을 고려하여 최소 높이를 지정해 디자인합니다.

1. Main Tab

• Main Tab은 Sub Tab과의 혼용을 막기위해 라인으로 사용하도록 합니다. 가장 긴 타이틀에 따라 각 탭의 가로 사이즈를 동일하게 조정합니다.

HTML

<nav class="set-tab-nav fixed-w02-mode">
	<ul>
		<li class="active"><button type="button">타이틀1 (10)</button></li><!-- 활성화 된 곳은 li 태그에 active 클래스 적용 -->
		<li><button type="button">타이틀2 (3)</button></li>
		<li><button type="button">타이틀3 (13)</button></li>
	</ul>
</nav>

CSS

/* set sub title box */
.set-tab-nav {margin-right:5.5rem;margin-top:-0.5rem;}

/* set tab navigation */
.set-tab-nav {position:relative;height:5rem;margin-left:5.6rem;margin-bottom:1.5rem;}
.set-tab-nav:after {content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#ccc;}
.set-tab-nav ul {position:relative;z-index:1;height:5rem;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.set-tab-nav li {height:5rem;}
.set-tab-nav button, .set-tab-nav a {display:block;width:100%;padding:1.2rem 1rem 1.4rem 1rem;color:#999;font-size:1.6rem;line-height:2.4rem;text-align:center;}
.set-tab-nav .active {border-bottom:3px solid #1769ff;}
.set-tab-nav .active button, .set-tab-nav .active a {color:#1769ff;}
.set-tab-nav.fixed-w-mode li {width:15rem;}
.set-tab-nav.fixed-w-mode button, .set-tab-nav.fixed-w-mode a {padding-left:0;padding-right:0;}
.set-tab-nav.fixed-w02-mode {margin-left:0;margin-bottom:2rem;}
.set-tab-nav.fixed-w02-mode li {width:16rem;}

.tab-cont-wrap {display:none;margin-left:5.6rem;margin-right:5.5rem;}
.tab-cont-wrap .set-util-box .r-side {right:2rem;}
.tab-cont-wrap .tb-col-view {margin-top:0;}
.tab-cont-wrap .set-util-box {margin:1.5rem 0;}
.tab-cont-wrap.active {display:block;}

2. Sub Tab

• Sub Tab은 Main Tab의 하위메뉴로 버튼형식으로 이루어 집니다.

HTML

CSS