탐색 막대라는 게 뭐야?

여러분의 탐색 목록이 다음과 같이 비순차 링크 목록과 같다고 해보자.

<ul> 태그 안에 마크업(<li></li>)을 사용한 것이다.

• link1
• link2
• link3
• link4
• link5

수평 탐색 막대

우리는 페이지 상에서 이들 목록이 어떤 식으로 표시될 지를 CSS로 제어할 수 있다.

즉 display:inline을 사용하여 수평 탐색 막대를 만들 수 있다.

이 탐색 막대에 사용된 코드는 다음과 같다:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

수직 탐색 막대

이에 사용된 코드는 다음과 같다:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

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

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

추가적인 정보는, 마크 뉴하우즈 기사에서 목록 길들이기(Taming lists)와 CSS-토론 위키에 있는 목록 스타일링을 보도록 한다.