탭 컨텐츠 (소페이지)

Home 매뉴얼 탭 컨텐츠 (소페이지)

* 기본형

탭 컨텐츠로 사용 할 컨텐츠의 최상단 div에 class="tab_list_wrap"를 추가한다.
(해당 div 안에 탭 버튼과 탭 컨텐츠가 함께 포함되어야 한다.)

탭 버튼의 상단 div에 class="tab_btn_wrap"를 추가한다.

탭 컨텐츠의 상단 div에 class="tab_cont_wrap"를 추가한다.

<div class="tab_list_wrap">
	
	<div class="tab_btn_wrap">
		<ul>
			<li class="on"><a href="#tab_cont1">탭 버튼1</a></li>
			<li><a href="#tab_cont2">탭 버튼2</a></li>
			<li><a href="#tab_cont3">탭 버튼3</a></li>
		</ul>
	</div>
	

	
	<div class="tab_cont_wrap">
		<div id="tab_cont1" class="tab_content">
			탭 컨텐츠1
		</div>

		<div id="tab_cont2" class="tab_content">
			탭 컨텐츠2
		</div>

		<div id="tab_cont3" class="tab_content">
			탭 컨텐츠3
		</div>
	</div>
	
</div>
* 탭 버튼

탭 버튼의 상단 div에 class="tab_btn_wrap"를 추가한다.

구조는 div ul li a 순서로 되어 있으며, 제일 처음 보여질 컨텐츠의 탭 버튼에 class="on"를 추가한다.

a href=""에는 보여질 컨텐츠 div의 id 값을 입력한다. 형식 : #id값 (#을 반드시 붙여야하며, id값이 일치해야 정상적으로 작동한다.)

<div class="tab_btn_wrap">
	<ul>
		<li class="on"><a href="#tab_cont1">탭 버튼1</a></li>
		<li><a href="#tab_cont2">탭 버튼2</a></li>
		<li><a href="#tab_cont3">탭 버튼3</a></li>
	</ul>
</div>
* 탭 컨텐츠

탭 컨텐츠의 상단 div에 class="tab_cont_wrap"를 추가한다.

각 컨텐츠의 상단 div에 id="" 아이디 값을 지정하고, class="tab_content"를 추가한다.

<div class="tab_cont_wrap">
	<div id="tab_cont1" class="tab_content">
		탭 컨텐츠1
	</div>

	<div id="tab_cont2" class="tab_content">
		탭 컨텐츠2
	</div>

	<div id="tab_cont3" class="tab_content">
		탭 컨텐츠3
	</div>
</div>
탭 컨텐츠1
탭 컨텐츠2
탭 컨텐츠3