[HTML, CSS] - 내비게이션 바

 

---

 

 

---

 

내비게이션 바

웹 사이트의 메뉴

 

링크를 사용한 리스트 메뉴

가장 기본적 방법

HTML에서 링크는 <a>태그로 표현

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a href="/css/intro">CSS</a></li>
    <li><a href="/javascript/intro">자바스크립트</a></li>
</ul>

 

 

수직 내비게이션 바

 

링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정

메뉴의 어느 곳을 클릭하더라도 바로 연결된 페이지로 넘어가게 설정

<style>
    ul { background-color: #FFDAB9; width: 150px; list-style-type: none; margin: 0; padding: 0; }
    li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

 

+ 클래스

내비게이션 바에서 현재 메뉴의 위치도 표현 가능

 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

 

+ border 속성

내비게이션 바에 경계선을 표현 가능

<style>
    li { border-bottom: solid 1px black; }
    li:last-child { border-bottom: none; }
</style>

 

 

수평 내비게이션 바

 

display 속성의 inline 속성값을 이용한 방법

링크를 사용한 리스트 메뉴에서 <li>요소의 display 속성값을 inline으로 설정

블록 요소였던 <li>요소가 인라인 요소의 성질을 갖도록 변경

인라인 요소로 변경된 <li>요소는 너비가 자신의 내용만큼만을 차지하도록 변경

따라서 모든 <li>요소가 수평으로 늘어서게 됌

<style>
    li { display: inline; }
</style>

 

floating 속성을 이용한 방법

링크를 사용한 리스트 메뉴의 <li>요소에 float 속성을 설정

float 속성값 : left -> 모든 메뉴가 왼쪽으로 정렬

float 속성값 : right -> 모든 메뉴가 오른쪽으로 정렬

<style>
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; padding: 8px; }
</style>

 

+ CSS

 여러 가지 스타일 설정

<style>
    ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;
        text-align: center; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

 

+ 클래스

내비게이션 바에서 현재 메뉴의 위치 표현

 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

 

+ <ul>요소나 <ol>요소의 float 속성값을 조절

왼쪽 메뉴뿐 / 오른쪽 메뉴 함께 설정

 Home, HTML, CSS 메뉴는 왼쪽으로 정렬되며, 로그인, 회원가입 메뉴는 오른쪽으로 정렬

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a class="current" href="/css/intro">CSS</a></li>
    <ul style="float:right; list-style-type:none;">
        <li><a href="/bbs/login.php">로그인</a></li>
        <li><a href="/bbs/register_form.php">회원가입</a></li>
    </ul>
</ul>

 

+ border 속성

내비게이션 바에 경계선을 표현

<style>
    li { float: left; border-right: solid 1px white; }
    li:last-child { border-right: none; }
<style>

 

 

---

 

https://www.tcpschool.com/css/css_advanced_navigation