c18. CSS 수직형 네비게이션 바

CSS 수직형 네비게이션 바

• 인사 말씀
• 최근 소식
• 판매 제품
• 조직 소개

웹 사이트에서 내용을 쉽게 구분해서 찾기 쉽도록 해주는 것이 중요한데, CSS 가 지루한 HTML 메뉴를 보기 좋게 바꾸어 줄수 있습니다.

네비게이션 바 (Navigation Bar) 는 쉽게 링크 들의 목록인데 <ul>, <li> 태그를 활용하면 좋습니다.

<ul>, <li> 태그에서 나타나는 리스트 마커 (bullets), 마진, 패딩을 제거해야 합니다

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

list-style-type: none; 은 네비게이션 바에서는 필요없는 리스트 마커를 제거해 줍니다.

마진과 패딩을 0으로 설정합니다. margin: 0; padding: 0; 브라우저 별로 다르게 설정 되었을 수 있는 값을 모두 0으로 설정해 줍니다.

네비게이션 바를 생성하려면, 리스트 내에 <a> 태그가 필요하므로 li a 선택자에 스타일을 지정합니다.

li a {display: block;}

display: block; 은 링크를 블록 태그로 만들어서, 링크 영역 전체를 클릭할 수 있도록 해줍니다.

---

네비게이션 바에 배경 색상을 지정하고, 마우스의 움직임에 따라 배경색상을 바꾸어 줍니다.
ul.v {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: AliceBlue;
/*position: fixed;*/
height: 100%;
overflow: auto;
}
li.v a:hover {
background-color: Gold ;
color: white;
}

---

그리고 "active" 클래스를 하나 추가하여, 현재 선택된 링크가 어떤 것인지 사용자가 알수 있게 해줍니다.
li.v a.active {
    background-color: Fuchsia;
    color: white;
}

---

메뉴를 고정위치에 있게하고, 메뉴가 많아져 화면을 벗어날 정도이면 자동으로 스크롤이 생기도록 속성을 부여합니다.
ul.v {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: AliceBlue;
    /*position: fixed; 고정위치에 있게 합니다. */
    /*height: 100%; 전체 높이를 사용하도록 합니다. */
    overflow: auto; /*  사이드바 메뉴가 아주 많아져 스크롤이 필요하면 자동으로 생성되도록 합니다. */
}

---

<style>
/*body {margin: 0;}*/

ul.v {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: AliceBlue;
/*position: fixed; 고정위치에 있게 합니다. */
/*height: 100%; 전체 높이를 사용하도록 합니다. */
overflow: auto; /* 사이드바 메뉴가 아주 많아져 스크롤이 필요하면 자동으로 생성되도록 합니다. */
}

li.v {border-bottom:1px solid #bbb;}

li.v:last-child {border-bottom: none;}

li.v a.v {
display: block;
color: black;
padding: 10px 0 10px 20px;
text-decoration: none;
}

li.v a.active {
background-color: Fuchsia;
color: white;
}

li.v a.v:hover:not(.active) {
background-color: Gold;
color: white;
}
</style>
<ul class="v">
<li class="v"><a class="v" href="#">인사 말씀</a></li>
<li class="v"><a class="v" href="#">최근 소식</a></li>
<li class="v"><a class="v active" href="#">판매 제품</a></li>
<li class="v"><a class="v" href="#">조직 소개</a></li>
</ul>

---

<style>

/*body {margin: 0;}*/

ul.vertical {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: AliceBlue;

/*position: fixed; 고정위치에 있게 합니다. */

/*height: 100%; 전체 높이를 사용하도록 합니다. */

overflow: auto; /* 사이드바 메뉴가 아주 많아져 스크롤이 필요하면 자동으로 생성되도록 합니다. */

}

li.vertical {border-bottom:1px solid #bbb;}

li.vertical:last-child {border-bottom: none;}

li.vertical a.vertical {

display: block;

color: black;

padding: 10px 0 10px 20px;

text-decoration: none;

}

li.vertical a.active {

background-color: Fuchsia;

color: white;

}

li.vertical a.vertical:hover:not(.active) {

background-color: Gold;

color: white;

}

</style>

<ul class="vertical">

<li class="vertical"><a class="vertical" href="#">인사 말씀</a></li>

<li class="vertical"><a class="vertical" href="#">최근 소식</a></li>

<li class="vertical"><a class="vertical active" href="#">판매 제품</a></li>

<li class="vertical"><a class="vertical" href="#">조직 소개</a></li>

</ul>

---

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