CSS를 이용한 네비게이션 메뉴바

적용 및 테스트 IE & FireFox2 리스트(목록)태그를 네비게이션 메뉴바로 활용한 예 입니다.실제로 메뉴에 사용된 HTML 태그는, 다음과 같이 매우 간결합니다.
[ 메뉴에 사용된 HTML 태그 ]<ul id="mainMenu">
<li><a href="/products/">Products</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="/purchase/">Purchase</a></li>
<li><a href="/support/">Support</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/contact/">Contact</a></li>
</ul> 먼저 간단히, 메뉴 디자인의 설계를 살펴 보겠습니다.

ul태그에서 아래쪽 테두리값을 이용해 베이스 라인을 깔아두었기 때문에, 실제 박스가 차지하는 크기는 26px(25px+1px)가 됩니다. 리스트 항목(li)태그에 적절한 좌우패딩값을 주어 메뉴간 간격을 설정할 수 있습니다.박스의 영역 높이(25px) 안쪽에 자리잡는 메뉴항목(<a></a>)은, 마우스 오버에 대한 아래쪽 테두리값을 3px로 설정했습니다. 따라서, 테두리를 제외한 22px범위 영역의 높이와 패딩값을 설정하도록 합니다. [ 사용한 스타일 시트 ] <style type="text/css">#mainMenu{
list-style: none;
margin: 0; padding: 0 0 25px 5px; background-color: #000000; border-bottom: 1px solid #ffcc00;
}영역의 아래쪽에 패딩값을 25px로 주어, border-bottom이 베이스 라인으로 표현되게 합니다.ul박스가 웹페이지에서 표현되는 세로의 실제 사이즈는 26px(25px+1px)입니다.메뉴텍스트의 좌측간격이 15px이고, 아래의 li의 좌측 패딩값(10px)이므로 ul의 왼쪽 패딩은 5px로 설정합니다.
#mainMenu li{
float: left;
margin: 0; padding: 0 10px;
}가로로 나열된 메뉴이기 때문에, float: left를 사용하여, 리스트 항목들을 좌에서 우로 배치하도록 합니다.설계된 내용에 따라, 좌/우 공통으로 10px의 패딩값을 설정합니다. 메뉴간 간격(20px)
#mainMenu a{
display: block;
margin: 0; padding: 5px 0 1px 0;
height: 16px; font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
text-decoration:none;
}li태그의 배치 속성이 float: left인 관계로, 안쪽에 위치하는 a태그를 블록레벨로 설정하여, 정확한 레이아웃을 만들 수 있도록 합니다. 상(5px), 하(1px), 영역높이(16px)의 합은 실제 영역높이(25px)에서 롤오보 보더값(3px)를 제외한 값입니다. (5px+1px+16px = 25px-3px)
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }</style>a태그에 롤 오버 스타일입니다. 아래쪽에 3px두께의 테두리(border)를 만들도록 하였습니다. 롤 오버 이미지를 활용한 네비게이션 바약간만 손을 본다면, 아래와 같은 이미지를 활용한 네비게이션 바를 만들 수 있습니다.
여기에 사용된 이미지는 다음과 같습니다.
[ 사용한 스타일 시트 ] <style type="text/css">#mainMenu{
list-style: none;
margin: 0; padding: 0 0 25px 5px; background-color: #000000; border-bottom: 1px solid #ffcc00;
}#mainMenu li{
float: left;
margin: 0; padding: 0 10px;
}#mainMenu a{
display: block;
margin: 0; padding: 5px 0 4px 0;
height: 16px; font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
text-decoration:none;
}#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{ background: url(images/line_dot.gif) no-repeat 50% 100%;}</style>위와 같이, a태그의 아래쪽 테두리(border)를 없앴기 때문에, 아래여백을 (1px→4px)로 테두리 크기만큼 키워줍니다. 끝으로, 롤 오버 스타일에서, 가로는 가운데, 세로는 아래쪽에 이미지가 표현되도록 했습니다. (50% 100%) 이렇게 작성된 코드는, 유지/관리가 매우 쉽고 또한, 이식 작업도 매우 유용하게 합니다.