메뉴 클릭하면 변경되진 않는데,
이것을 응용해서 원하는 데로 적용하면 될 듯 하다.
tab_menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트를 이용한 메뉴 만들기</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
<style type="text/css">
body {
font-family: "맑은 고딕";
font-size: 0.75em;
color: #333;
}
ul.main_menu {
margin: 5px 0 0 10px;
padding: 0;
/* 리스트의 기본 위치를 잡아줍니다. */
}
ul.main_menu li {
list-style-type: none;
/* 리스트 타입은 none은 지정해서 앞부분의 불렛을 없애줍니다. */
display: block;
/* display는 여러가지 형태가 있는데 현재 사용하는 block은 말 그대로 li 태그에 있는 내용 하나를 block 시키는 것입니다. */
width: 100px;
height: 22px;
/* 메뉴의 높이와 크기를 지정합니다.*/
text-align: center;
/* 텍스트는 중앙으로 정렬하고 */
padding: 3px 0 0 0;
/* 패딩값을 조절하면서 텍스트의 위치를 조정합니다. */
margin: 0 2px 0 0;
/* 메뉴오하 메뉴 사이의 간격을 조절합니다. */
float: left;
/* 세로로 위치한 메뉴를 한 줄로 정렬하게 해 줍니다. */
border: 1px #999999 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #CCC;
/* 메뉴의 테두리를 조절합니다. */
}
ul.main_menu li.active {
/* 현재 활성화된 메뉴의 값을 지정해 줍니다. */
background: #FFF;
/* 배경은 흰색으로 */
padding-bottom: 1px;
/* 여기서는 패딩 아래쪽으로만 1px를 지정했는데, 패딩의 길이를 1px 정도 늘려서 밑줄 부분을 가려주는 역할을 합니다. */
border-bottom: none;
/* 밑쪽 부분의 테두리를 없애줍니다. */
}
ul.main_menu li:hover {
background: #FFF;
/* 배경은 흰색으로 */
padding-bottom: 1px;
/* 여기서는 패딩 아래쪽으로만 1px를 지정했는데, 패딩의 길이를 1px 정도 늘려서 밑줄 부분을 가려주는 역할을 합니다. */
border-bottom: none;
/* 밑쪽 부분의 테두리를 없애줍니다. */
cursor: pointer;
cursor: hand;
}
/* 마우스의 커서가 해당 메뉴에 올라가게 되면 li.active와 같은 효과를 주기 위해 ul.main_menu li:hover를 지정했습니다. */
.box {
border-bottom: 1px solid #666;
height: 26px;
}
/* 전체 메뉴의 밑 부분에 있는 긴 테두리를 만들어 주는 역할을 합니다. 여기서 높이값은 조금씩 조절하면서 정확하게 메뉴의 밑 부분에 맞춰야 합니다. */
</style>
</head>
<body>
<div class="box"> <!-- 전체 메뉴를 .box를 통해서 둘러 쌉니다. -->
<ul class="main_menu">
<li class="active">메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>
</body>
</html>
'Study > HTML, CSS' 카테고리의 다른 글
| [HTML5/CSS/Javascript] 스티키 노트(포스트잇) 만들기 (0) | 2019.05.27 |
|---|---|
| [html/css] 기초 (0) | 2019.05.16 |
