사용자 도구

사이트 도구


wiki:css:css_note:css_navbar

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


예제 설명

  • list-style-type: none; - 불릿을 제거합니다. 네비게이션 바는 목록 표시(marker)가 필요하지 않습니다.
  • margin: 0;padding: 0;으로 설정하여 브라우저의 기본 설정을 제거합니다.

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

/volume1/web/dokuwiki/data/pages/wiki/css/css_note/css_navbar.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)