상단 탭의 메뉴를 클릭했을 때 메뉴에 해당하는 내용이 나오도록 레이아웃을 만들어보았습니다.
여기에 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>
'웹 프로그래밍 > ------ CSS' 카테고리의 다른 글
| [CSS] float(2) - 레이아웃 ( Holy Grail Layout ) (1) | 2018.04.04 |
|---|---|
| [CSS] float(1) - 개념 (0) | 2018.04.04 |
| [CSS] 포지션( Position ) 개념 (0) | 2018.04.04 |
| [CSS 활용] 로그인 form 예제 (0) | 2018.04.04 |
| [CSS 활용] 게시판 레이아웃 예제 (0) | 2018.04.04 |
| [CSS] 폰트( 제곱표현, 말줄임 ) (0) | 2018.04.04 |
| [CSS] 복합 셀렉터 (0) | 2018.04.04 |