c21. 수평형 네비게이션 바

수평형 네비게이션 바

• 회사로고
• 즐겨찾기
• 수업일정
• 사용자
• 로그온

수평형 네비게이션 바 (horizontal navigation bar) 는 두가지 방법이 있는데, 인라인 (inline) 방식과 플로우팅 (floating list) 방식이 있습니다.

인라인 방식에서는 <li> 태그를 인라인으로 지정합니다.

li {display: inline;}

display: inline; 은, 기본적으로 <li> 태그는 블록 태그로서, 줄바꿈이 자동으로되는데, 여기서 앞 뒤의 리스트 항목간에 줄바꿈을 제거하여, 리스트 모두를 하나의 라인에 보이게 할 수 있습니다.

---

다른 방법으로는 플로팅 리스트 항목으로 만들면 되는데, <li> 태그를 플로우트 시켜서, 하나씩 차례로 배치하는 방법이 있습니다.

ul.h {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li.h {
float: left;
}

li.h a.h {
display: block;
padding: 14px 16px;
}

float: left; 는 블록 태그들을 한쪽으로 미는 역할을 합니다.
display: block; 은 링크를 블록 태그 전체를 클릭할 수 있는 링크 영역으로 만들어 줍니다.
padding: 14px 16px; 은 블록 태그에 상하, 좌우 패딩을 지정하여 버튼 처럼 보이게 해 줍니다.

---

현재 선택된 네비게이션 링크는 "active" 클래스를 만들어서, 사용자에게 어떤 페이지를 보고 있는지 알게 해 주는 것이 좋습니다.
.active {
background-color: Fuchsia;
}

---

일부 리스트 항목은 오른쪽으로 정렬 시키는 것이 좋습니다.

이때 그 리스트 항목만을 담기 위한 <ul> 을 하나 생성해서 스타일 속성을 float:right; 으로 주면 됩니다.
<ul style="float:right;list-style-type:none;">

---

각 리스트 항목에 테두리 구분선을 넣으려면 먼저, border-right:1px solid #bbb; 으로 오른쪽에 모두 선을 넣은 후, 맨 마지막 것만 border-right: none; 으로 지워주면 됩니다.
li.h {
float: left;
border-right:1px solid #bbb;
}

li.h:last-child {
border-right: none;
}

---

마지막으로 네비게이션 바를 화면의 맨 위 또는 맨 아래에 고정시켜서, 스크롤을 해도 항상 화면의 맨위나 아래에 보이게 하려면, position: fixed; 속성과 함께, 
top: 0; 또는 bottom: 0; 속성을 주면 됩니다.
ul.h {
    position: fixed;
    top: 0;
    /*bottom: 0;*/
    width: 100%;
}

---

<style>
ul.h {
/*position: fixed;
top: 0;
bottom: 0;
width: 100%;*/
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: AliceBlue;
}

li.h {
float: left;
border-right:1px solid #bbb;
}

li.h:last-child {
border-right: none;
}

li.h a.h {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li.h a.h:hover:not(.active) {
background-color: Gold;
}

.active {
background-color: Fuchsia;
}
</style>
<ul class="h">
<li class="h"><a class="h active" href="#">회사로고</a></li>
<li class="h"><a class="h" href="#">즐겨찾기</a></li>
<li class="h"><a class="h" href="#">수업일정</a></li>
<ul style="float:right;list-style-type:none;">
<li class="h"><a class="h" href="#">사용자</a></li>
<li class="h"><a class="h" href="#">로그온</a></li>
</ul>
</ul>

---

[광고] Udemy 동영상 강의로 보기