CSS 활용한 tab 구현

CSS 활용한 tab 구현

탭기능을 추가하려면 javascript를 활용하여야만 했었다.
하지만 css3의 :target 선택자를 활용하면 javascript를 사용하지 않아도 쉽게 구현할 수 있다.

아래 간단한 HTML 구조를 예제로 만든다.

<div class="tab-wrap">
	<ul>
		<li><a href="#tab1">tab1</a></li>
		<li><a href="#tab2">tab2</a></li>
	</ul>

	<div>
		<article id="tab1">
			<h1>tab1 title</h1>
			<p>Here is tab1 contents</p>
		</article>
		<article id="tab2">
			<h1>tab2 title</h1>
			<p>Here is tab2 contents</p>
		</article>
	</div>
</div>

그리고 아래와 같이 CSS 규칙을 추가한다.

.tab-wrap * { 
	margin: 0px; 
	padding: 0px; 
}
.tab-wrap { 
	position: relative; 
	padding-top: 30px; 
}
.tab-wrap li { 
	z-index: 2; 
	position: absolute; 
	top: 0px; 
	width: 100px; 
	height: 30px; 
	text-indent: -9999%; 
}
.tab-wrap li:nth-of-type(1) { 
	left: 0px; 
}
.tab-wrap li:nth-of-type(2) { 
	left: 100px; 
}
.tab-wrap li a { 
	display: block; 
	width: 100%; 
	height: 100%; 
}
.tab-wrap article h1 { 
	position: absolute; 
	top: 0px; 
	width: 100px; 
	height: 30px; 
	line-height: 30px; 
	box-sizing: border-box; 
	border: 1px solid #ddd; 
	text-align: center; 
	font-size: 12px; 
}
.tab-wrap article p { 
	border: 1px solid #ddd; 
	padding: 30px; 
}
.tab-wrap article:target h1 { 
	background-color: yellow; 
}
.tab-wrap article:nth-of-type(1) h1 { 
	left: 0px; 
}
.tab-wrap article:nth-of-type(2) h1 { 
	left: 100px; 
}
.tab-wrap article:nth-of-type(1) p { 
	display: block;
}
.tab-wrap article p { 
	display: none; 
}
.tab-wrap article:target p { 
	display: block; 
}

설명하면, 일종의 속임수를 활용하여 tab기능을 구현하는 방식으로 먼저 article태그에 tab-contents 방식을 만든 후, 외부 tab 링크를 z-index로 덮어쓰우는 방식이다. 여기다 외부 tab 링크의 href-id로 연결하고 css3의 선택자인 :target 을 활용하여 선택과 비선택을 구별하도록 만들 수 있다.
(처음 페이지 로드시 선택 tab의 내용이 보여야 하는데, 아직 그 부분은 해결되지 못하였다)
아래는 적용된 예제이다.

출처 : http://blim.co.kr/archives/325