<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
color: #555;
background: #eeeeee;
margin:0;
padding: 0;
box-sizing: border-box;}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;}
p {
margin: 0 0 20px;
line-height: 1.5;}
.main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #ffffff;}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;}
/*라디오버튼 숨김*/
input {
display: none;}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;}
label:hover {
color: #2e9cdf;
cursor: pointer;}
/*input 클릭시, label 스타일*/
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid #2e9cdf;
border-bottom: 1px solid #ffffff;}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;}
</style>
<title>Document</title>
</head>
<body>
<h1>CSS를 이용하여 Tab 만들기</h1>
<div class="main">
<input id="tab1" type="radio" name="tabs" checked> <!--디폴트 메뉴-->
<label for="tab1">tab menu1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">tab menu2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">tab menu3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">tab menu4</label>
<section id="content1">
<p>tab menu1의 내용</p>
</section>
<section id="content2">
<p>tab menu2의 내용</p>
</section>
<section id="content3">
<p>tab menu3의 내용</p>
</section>
<section id="content4">
<p>tab menu4의 내용</p>
</section>
</div>
</body>
</html>
