HTML 강좌 8장, CSS 이용해 마우스 롤오버 메뉴 만들기

이번 HTML 강좌에서는 CSS 적용만으로 마우스 커서가 올려지면 색상이 변하는 메뉴를 만들어 보도록 하겠습니다.

 

완성된 결과물은 아래와 같습니다.

 

 

각 메뉴마다 마우스 커서를 가져가 보면 색상이 변하는 것을 볼 수 있는데요. 뭔가 뽀대가 나면서 멋져 보이지 않나요? ^^

 

이런 기능을 이미지 사용 없이 오로지 CSS 적용만으로 구현하실 수 있습니다.

 

<style>
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>

 

위와 같이 리스트 태그를 이용해 메뉴를 완성하실 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다