더북(TheBook)

3 3단계: 동적인 메뉴 버튼 만들기

 

이번에는 Day 10에서 배운 transition 속성을 사용하여 메뉴 버튼에 마우스 포인터를 올리면 버튼이 움직이면서 배경색이 달라지는 동적인 메뉴 버튼을 만들겠습니다.

앞에서 만든 메뉴 버튼과 마찬가지로 HTML 문서에는 <nav>, <ul>, <li>, <a> 태그를 적용하여 설계 도면을 만드는 작업을 합니다.

예제 소스 Exercise/11장/3_navigation/index.html

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact US</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Sign in</a></li>
    </ul>
</nav>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.