====== CSS Navigation Bar ====== * description : CSS Horizontal Navbar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 \\ =====Horizontal Navigation Bars===== 가로 네비게이션 바를 만드는 방법에는 두 가지가 있습니다.\\ 인라인(inline) 또는 플로팅(floating) 목록 항목 사용하는 것입니다.\ \\ ====Inline List Items==== 가로 네비게이션 바를 만드는 한 가지 방법은 이전 페이지의 "표준"코드 외에도, %%
  • %% 요소를 인라인(inline)으로 지정하는 것입니다.\\ {{:wiki:css:css_note:inline1.png?600|}}\\ ====예제==== \\ ====예제 설명==== * ''%%display: inline;%%'' - 기본적으로 %%
  • %% 요소는 블록 요소입니다. 여기서는, 각 목록 항목 앞뒤의 줄 바꿈을 제거하여 한 줄에 표시합니다.\\ =====Floating List Items===== 가로 네비게이션 바를 만드는 또 다른 방법은 %%
  • %% 요소를 플로팅하고, 네비게이션 링크의 레이아웃을 지정하는 것입니다.\\ {{:wiki:css:css_note:inline2.png?600|}}\\ ====예제====

    Note:If a !DOCTYPE is not specified, floating items can produce unexpected results.

    A background color is added to the links to show the link area. The whole link area is clickable, not just the text.

    Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list..

    \\ ====예제 설명==== * ''%%float: left;%%'' - float를 사용하여 블럭 요소들을 서로 옆으로 배치되게 합니다. * ''%%display: block;%%'' - 패딩(그리고 원하는 경우, 높이, 너비, 마진 등)을 지정할 수 있습니다. * ''%%padding: 8px;%%'' - 블럭 요소는 사용 가능한 전체 너비를 차지하므로 나란히 float할 수 없습니다. 그래서 패딩을 지정하여 보기 좋게 만듭니다. * ''%%background-color: #dddddd;%%'' - 각 요소에 회색의 배경색을 추가합니다. **Tip:** 전체 너비의 배경색을 원하는 경우, 각 %%%% 요소 대신 %%