더북(TheBook)

메뉴 버튼은 웹 사이트에서 빠지지 않고 등장합니다. 각 메뉴 버튼은 관계가 서로 등등하며, 버튼을 클릭했을 때 특정 페이지로 화면이 전환됩니다. 보통 메뉴 버튼을 제작할 때는 순서가 없는 리스트 정보를 보여 주는 <ul> 태그와 <li> 태그를 입력합니다. 클릭할 때 페이지 전환 효과를 적용하고 싶다면 <a> 태그와 결합하여 사용합니다.

예제 소스 Exercise/2장/7_ol_ul_li/index.html

<!DOCTYPE html>
<html>
<head>……</head>
<body>
  <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
  </ul>
</body>
</html>

 

그림 2-32 <a> 태그와 결합한 <ul> 태그 실행 결과

 

이처럼 웹 사이트 구성 요소에 사용되는 태그에는 몇 가지 공식이 존재합니다. 이러한 공식을 손에 익을 때까지 반복해서 연습하면 웹 사이트 구조 작업을 쉽게 진행할 수 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.