수직 네비게이션 바를 만들려면, 이전 페이지의 코드 외에도, 목록 안의 <a> 요소의 스타일을 지정할 수 있습니다.

• Home
• News
• Contact
• About

A background color is added to the links to show the link area.

Notice that the whole link area is clickable, not just the text.

• display: block; - 링크를 블럭 요소로 표시하면, 텍스트뿐만 아니라 전체 링크 영역을 클릭할 수 있게 만들고, 너비 (그리고 패딩, 마진, 높이 등)를 지정할 수 있습니다.
• width: 60px; - 블럭 요소는 기본적으로 사용 가능한 전체 너비를 차지합니다. 60픽셀의 너비를 지정합니다.
  

또한 블록 요소로 표시될 때 사용 가능한 전체 너비를 차지하기 때문에, <ul>의 너비를 설정하고, <a>의 너비를 제거할 수 있습니다.
이전 예제와 동일한 결과가 생성됩니다. 이전 예제와 동일한 결과가 생성됩니다.

• Home
• News
• Contact
• About

A background color is added to the links to show the link area.

Notice that the whole link area is clickable, not just the text.

회색 컬러의 배경으로, 기본 세로 네비게이션 바를 만들고,
사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.

vertical Navigation Bar

• Home
• News
• Contact
• About

현재 링크에 “active” 클래스를 추가하여, 사용자가 어느 페이지에 있는지 알 수 있습니다.

vertical Navigation Bar

In this exmple, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.

• Home
• News
• Contact
• About

text-align:center를 <li> 또는 <a>에 추가하여, 링크를 중앙에 배치합니다.

border 속성을 <ul>에 추가하고, navbar 주위에 보더를 추가합니다. navbar 안에 보더를 추가하려면,
마지막 요소를 제외한 모든 <li> 요소에 border-bottom을 추가합니다.

vertical Navigation Bar

In this exmple, we center the navigation links and add a border to the naviation bar.

• Home
• News
• Contact
• About

전체 높이의 'sticky'(고정된) 측면 네비게이션을 만듭니다:

• Home
• News
• Contact
• About