이번 HTML 강좌에서는 CSS 적용만으로 마우스 커서가 올려지면 색상이 변하는 메뉴를 만들어 보도록 하겠습니다.
완성된 결과물은 아래와 같습니다.
각 메뉴마다 마우스 커서를 가져가 보면 색상이 변하는 것을 볼 수 있는데요. 뭔가 뽀대가 나면서 멋져 보이지 않나요? ^^
이런 기능을 이미지 사용 없이 오로지 CSS 적용만으로 구현하실 수 있습니다.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
li {
float: left;
width: 75px;
text-align: center;
}
li a {
color: white;
text-decoration: none;
padding: 15px
0;
display: block;
}
li a:hover {
color: red;
background-color: yellow;
}
</style>
위와 같이 스타일을 작성한 후…
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
위와 같이 리스트 태그를 이용해 메뉴를 완성하실 수 있습니다.