목차

CSS Navigation Bar

  • description : CSS NavBar
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-30


사용하기 쉬운 네비게이션 바는 모든 웹 사이트에서 중요합니다.

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

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

예제에서는 표준 HTML 목록의 네비게이션 바를 작성합니다.

네비게이션 바는 기본적으로 링크 목록이므로, <ul> 및 <li> 요소를 사용하는 것이 완벽합니다.

예제

Note: We use href="#" for test links. In a real web site, this would be URLs.

Result



목록에서 불릿(bullets), 마진(margin)과 패딩(padding)을 제거합니다.

예제

In this example, we remove the bullets from the list, and its default padding and margin.

Result


예제 설명

상기 예제의 코드는 수직, 수평 네비게이션 바 모두에서 사용되는 표준 코드입니다.