CSS 네비게이션 바

보기: 네비게이션 바

수직 네비게이션 바

수평 네비게이션 바


네비게이션 바

쉽게 사용할 수 있는 네비게이션은 모든 웹사이트에서 중요합니다.

CSS를 사용하면 지루한 HTML 메뉴를 아름다운 네비게이션 바로 변환할 수 있습니다.

네비게이션 바 = 링크 목록

네비게이션 바는 표준 HTML을 기본으로 필요합니다.

이 예제에서는 표준 HTML 목록을 사용하여 네비게이션 바를 만듭니다.

导航栏은 주로 링크 목록으로 구성되어 있기 때문에 <ul>와 <li> 요소를 사용하는 것이 매우 의미가 있습니다:

예제

<ul>
  <li><a href="index.asp">홈</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>

직접 시도해 보세요

현재, 목록 기호 및 외경(마진)과 내경(패딩)을 목록에서 제거합니다:

예제

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

직접 시도해 보세요

예제 설명:

  • list-style-type: none; - 목록 기호 제거. 네비게이션 테이블은 목록 항목 표시를 필요하지 않습니다.
  • 설정 margin: 0; 와 padding: 0; 브라우저의 기본 설정을 제거합니다.

이전 예제의 코드는 가로와 세로 네비게이션 바에서 사용된 표준 코드입니다. 다음 장에서 더 많은 내용을 배울 수 있습니다.