Leap's

<ul class="tab_menu tabsize_50">
	<li>
		<a href="./" class="active">
			<span class="tab_content_01">텝메뉴 1</span>
		</a>
	</li>
	<li class="last_child">
		<a href="./" class="content_02">
			<span class="tab_content_02">tabmenu 2</span>
		</a>
	</li>
</ul>

• <ul class="tab_menu tabsize_50"> - 텝메뉴 리스트 선언과 Mobile 에서 보여질 텝메뉴 길이
  • tabsize_100 : 100%
  • tabsize_50 : 50%
  • tabsize_25 : 25%
  • tabsize_33 : 33.33333333333333%
• <a href="./" class="active"> - 페이지가 처음 열렸을때 활성화 되어있는 텝메뉴
• <span class="tab_content_01"> - 자바스크립트로 class 명과 같은 이름을 가지고 있는 div를 display on · off 시킴

<div class="tab_content_01 tab_contents">
	<h3 class="basic">텝메뉴 1 제목</h3>
	<ul class="basic">
		<li>텝메뉴 1 내용 1</li>
		<li>텝메뉴 1 내용 2</li>
		<li>텝메뉴 1 내용 3</li>
		<li>텝메뉴 1 내용 4</li>
		<li>텝메뉴 1 내용 5</li>
	</ul>
</div>

• <div class="tab_content_01 tab_contents"> - 텝메뉴의 a 태그에 의해 display on · off 될 컨텐츠 영역
• 텝메뉴의 span class 명과 동일한 class 명이 있어야 함
• float 속성이 있는 텝메뉴 바로 다음에 위치하기 때문에 class tab_contents 에 clear: both 속성이 있음

@media screen and (max-width: 759px)
{
	...

	ul.tabsize_(size) li
	{
		width: (size)%;
	}

• Tablet 이하에서 텝메뉴 크기
• size의 값으로 li의 스타일이 적용됨
• 값
  • tabsize_100 : 100%
  • tabsize_50 : 50%
  • tabsize_25 : 25%
  • tabsize_33 : 33.33333333333333%

ul.tab_menu li a
{
	display: block;
	padding: 10px 20px 10px 20px;
	text-align: center;
	line-height: 13px;
	color: #333333;
	border: 1px solid #cccccc;
	border-right: none;
}

• line-height: 13px - 높이값 조정