CSS Navigation Bar

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

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

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

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

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

• Home
• News
• Contact
• About

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

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

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

• Home
• News
• Contact
• About

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

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