CSS Navigation Bar

어느 웹사이트에서나 사용이 쉬운 길도우미(내비게이션)를 갖는 건 중요하다.

Navigation Bar = List of Links

길도우미는 기본적으로 표준 HTML을 필요로 한다.

길도우미는 기본적으로 link들의 list이다, 그래서 <ul>과 <li> 요소들을 사용해야한다.

<ul>태그 안에 <li>태그를 넣고 각 <li>태그 사이에 <a>태그를 넣는다. 블록요소라서 세로로 출력되고 머리기호, 밑줄이 나타난다.

예시

머리기호, 마진, 패딩을 리스트로부터 없앤다.

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

예시

list-style-type:none; 은 머리기호를 없앤다. 길도우미는 list 마커가 필요하지 않다.

margin:0; padding:0;은 브라우저의 기본 설정을 없애기 위해 설정한다.

위 예시는 수직적, 수평적 길도우미 모두에 표준인 코드다.

Vertical Navigation Bar

수직 길도우미를 생성하기 위해, 위 코트에 추가적으로, 리스트 안에서 <a>요소의 스타일을 지정할 수 있다.

li a {
    display: block;
    width: 60px;
}

예시

display:block; 링크를 블럭 요소로 표시하는 것은 전체 링크 영역을 클릭할 수 있게 만든다. 너비, 패딩, 마진, 높이 등을 지정할 수 있게 해준다.

width:60px; 블럭 요소는 기본적으로 사용할 수 있는 전체 너비를 사용한다. 60px 너비로 지정.

<a>의 너비를 없애고, <ul>의 너비도 설정할 수 있다. 블럭요소로써 표시될 때 전체 너비를 가져간다. 위 예시랑 같은 결과가 나온다.

예시

Vertical Navigation Bar 예시

회색 배경의 수직 길도우미를 생성하고 사용자가 마우스를 갖다댔을 때 링크들의 배경색이 바뀐다.

Active/Current Navigation Link

현재 링크에 "active"클래스를 추가하여 사용자가 어느 페이지에 있는지 알게 한다.

예시

li a:hover:not(.active) {

    background-color: blue;

    color: white;

}

li의 자손인 a태그에 마우스를 갖다댔을 때 .active 클래스가 아니면 배경색을 파랑, 글자색을 흰색으로 만든다.

Center Links & Add Borders

링크를 가운데 정렬하기 위해 <li> 또는 <a>에 text-align:center를 추가한다.

<ul>에 border 속성을 추가해서 길도우미 주변에 border를 추가한다. 길도우미 안에 border를 원한다면, border-bottom을 마지막 것 빼고 모든 <li>요소들에 추가한다.

Full-height Fixed Vertical Navbar

전체 높이의 "sticky" 사이드 길도우미

예시

ul의 position속성 값을 fixed로 한다.

Horizontal Navigation Bar

inline 또는 floating

Inline List Items

<li> 요소들을 inline으로 지정한다.

예시

한 줄에 <li>요소들이 표시된다.

Floating List Items

수평 길도우미를 만드는 다른 방식은 <li>요소를 부유하게 만드는 것이다.

예시

Horizontal Navigation Bar

어두운 배경을 갖고 사용자가 마우스를 갖다댈 때 링크들의 배경색이 바뀌는 수평적인 기본 길도우미 생성

예시

Right-Align Links

오른쪽으로 리스트 아이템들이 부유함으로써 링크들 우측 정렬

예시

Border Dividers

<li> 요소에 border-right 추가

예시

Fixed Navigation Bar

사용자가 페이지를 스크롤할지라도, 길도우미 바가 페이지의 상단, 하단에 위치하도록 한다.

상단예시 하단예시

Sticky Navbar

position:stcky; 사용

sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이를 번갈아간다. 뷰포트 안에서 주어진 오프셋 위치를 만날 때까지 position은 relative이다. 이후 position은 fixed가 된다.

예시

https://www.w3schools.com/css/css_navbar.asp