네비게이션 바(Navigation bar) 만들기

■ 네비게이션 바 만들기

 

네비게이션 바는 많은 웹 사이트에서 사용하는 있는 메뉴바 방식으로 CSS를 사용하면 다음과 같이 만들 수 있다.

 

 

□ 태그 구성

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

 

□ CSS 구성

// 리스트 스타일, 마진, 패딩을 제거 

ul {
list-style-type:none;
margin:0;
padding:0;
}

 

// 항목이 수평으로 쌓이게 float 속성 변경  

li {
float:left;
} 

 

// <a>태그를 사용한 메뉴는 너비와 블럭레벨로 변경시킨다.

a {
display:block;
width:60px;
}