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

2017.08.02 12:04

이번 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>

 

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

신고
Posted by googlinfo(원래버핏)
이 댓글을 비밀 댓글로

티스토리 툴바