CSS - 네비게이션 바: 웹 사이트 네비게이션의 관문

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 CSS 네비게이션 바의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 웹 디자인의 이 중요한 부분을 안내해 드리기 위해 여기 있습니다. 그러니 좋아하는 음료를 마시며 편안하게 앉아, 함께 빠져보겠습니다!

CSS - Navbar

네비게이션 바는 무엇인가요?

코딩을 시작하기 전에 네비게이션 바가 무엇인지 이해해 보겠습니다. 대형 도서관에 있다고 상상해 보세요. 원하는 책을 어떻게 찾을까요? 안내 표지와 디렉토리를 사용하지 않나요? 네비게이션 바는 웹 사이트에서 그런 역할을 합니다. 사용자가 사이트를 쉽게 탐색할 수 있도록 도와주는 링크 모음입니다.

이제 다양한 유형의 네비게이션 바와 CSS를 사용하여 그것을 만드는 방법을 살펴보겠습니다.

CSS 수평 네비게이션 바

수평 네비게이션 바는 웹 사이트에서 가장 흔하게 볼 수 있는 유형입니다. 페이지 상단에 버튼 줄처럼 보입니다.

다음은 간단한 예제입니다:

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

그리고 이를 예쁘게 보이게 하는 CSS입니다:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

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

.navbar li a:hover {
background-color: #111;
}

이를 설명해 보겠습니다:

목록에서 콜론을 제거합니다: list-style-type: none;
목록 아이템을 왼쪽으로浮动시킵니다.
링크를 버튼처럼 스타일링합니다.
호버 효과을 추가하여 상호작용성을 높입니다.

CSS 수직 네비게이션 바

occasionally, you might want your navbar to be vertical, especially on mobile devices or sidebars. Here's how you can do that:

<ul class="vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

And the CSS:

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Here, the main difference is that we don't float the list items. Instead, we set a width for the entire navbar and let the list items stack naturally.

CSS Dropdown Navbar

Now, let's add some pizzazz with a dropdown menu! This is great for organizing subcategories.

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">Laptops</a>
<a href="#">Tablets</a>
<a href="#">Smartphones</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
</ul>

And the CSS:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

This CSS uses the :hover pseudo-class to show the dropdown content when the user hovers over the "Products" link.

CSS Fixed Navbar

A fixed navbar stays in place even when you scroll. It's like having a personal guide that's always there when you need it.

To make a navbar fixed, we just need to add one line to our CSS:

.navbar {
/* ... other styles ... */
position: fixed;
top: 0;
width: 100%;
}

This keeps the navbar at the top of the screen at all times.

CSS Sticky Navbar

A sticky navbar is similar to a fixed navbar, but it only becomes fixed after you scroll past it. It's like a friend who follows you, but only after you've walked a certain distance.

Here's how to make a sticky navbar:

.navbar {
/* ... other styles ... */
position: sticky;
top: 0;
}

The difference is that we use position: sticky instead of position: fixed.

Divider Lines for Navbar

Sometimes, you want to separate your navbar items with lines. Here's a neat trick to do that:

.navbar li {
border-right: 1px solid #bbb;
}

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

This adds a line between each item, except for the last one.

Fixed Vertical Navbar

Lastly, let's combine what we've learned to create a fixed vertical navbar:

<ul class="fixed-vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

And the CSS:

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

This creates a vertical navbar that stays on the left side of the screen as you scroll.

결론

이렇게 다양한 네비게이션 바 스타일을 다루었습니다. 수평에서 수직, 드롭다운에서 고정형까지. 연습이 완벽을 이루는 것을 기억하세요, 그래서 이 스타일들을 실험하고 자신만의 독특한 네비게이션 바 디자인을 만들어 보세요.

다음은 우리가 다루었던 다양한 네비게이션 바 유형을 요약한 표입니다:

네비게이션 바 유형	주요 CSS 속성	주요 특징
수평	`float: left;`	아이템 수평 정렬
수직	`width: [value];`	아이템 수직 스택
드롭다운	`:hover`	호버 시 추가 옵션 표시
고정	`position: fixed;`	스크롤 시 고정
점착	`position: sticky;`	스크롤 후 고정

기억하시자, 코딩은 요리와 같습니다 - 기본 레시피로 시작하지만, 더 편안해지면 자신만의 맛을 더해갈 수 있습니다. 그러니 이 스타일들을 섞고 match하고, 시각적으로 아름다운 것을 만들어 보세요!

기쁜 코딩을 기원하며, 여러분의 네비게이션 바가 항상 흥미로운 목적지로 이끌어주기를 바랍니다!

Credits: Image by storyset