상단 탭의 메뉴를 클릭했을 때 메뉴에 해당하는 내용이 나오도록 레이아웃을 만들어보았습니다.
여기에 JS 코드가 있어서 메뉴마다 다른 내용을 보여줄 수 있도록 활용하면 좋을 것 같습니다.
<style type="text/css">
* { margin:0; padding:0
}
body { font-family: '맑은 고딕' 돋움; font-size:0.75em; color:#333
}
ul li{
list-style-type: none;
}
.tab-box{
margin: 50px auto 0 auto;
width:520px;
}
.tab-box ul{
height:30px;
}
.tab-box li{
float:left;
width:100px;
height:30px;
line-height:30px; /* 중앙정렬 */
margin-right: 2px;
text-align: center;
background-color: #ccc;
border-radius:3px 3px 0 0;
cursor: pointer;
}
.tab-box li.selected{
background-color: orange;
}
.tab-view{
width:506px;
height:100px;
line-height: 100px;
border: 1px solid gray;
text-align:center;
margin-top:-1px;
}
</style>
<body>
<div class="tab-box">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li class="selected">메뉴 4</li>
<li>메뉴 5</li>
</ul>
<div class="tab-view">
탭뷰입니다.
</div>
</div>
</body>