1 1단계: 정적인 메뉴 버튼 만들기

먼저 메뉴 버튼을 만들기 위한 HTML 설계 작업을 진행하겠습니다.

<nav> 태그를 사용하여 메뉴 버튼을 담는 공간을 만듭니다. 각각의 메뉴는 순서가 없는 리스트이므로 <ul> 태그를 적용하고, 리스트 정보는 <li> 태그로 표현합니다. 메뉴 버튼을 클릭했을 때 페이지가 전환되도록 <li> 태그 안에 <a> 태그를 삽입합니다.

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

<nav>
    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
    </ul>
</nav>

그림 11-1 정적인 메뉴 버튼

결과를 보면 글자 앞에 가운뎃점(•)과 글자 밑에 밑줄( _ )이 함께 표시되었습니다. 이는 <ul>과 <a> 태그가 가진 list-style과 text-decoration 속성 때문입니다. list-style 속성은 리스트 정보를 표기하는 디자인에 영향을 미칩니다. text-decoration 속성은 텍스트에 밑줄이나 윗줄 또는 가운뎃줄을 넣을 때 사용합니다.