Bootstrap - 네비게이션 데모

네비바(Navbar)는 무엇인가요?

안녕하세요, 웹 개발자 지망생 여러분! 오늘은 Bootstrap 네비게이션 바, 즉 우리가 부르는 "네비바(navbars)"의 흥미로운 세계로 함께潜入해 보겠습니다. 집을 짓는 것을 상상해 보세요 - 네비바는 모든 방을 연결하는 복도와 같습니다. 방문자들이 귀하의 웹사이트에서 쉽게 이동할 수 있도록 돕는 중앙 허브입니다.

Bootstrap - Navigation Demo

네비바는 웹 페이지 상단에 자리 잡고 있으며, 귀하의 웹사이트의 다른 섹션 또는 페이지로 이동할 수 있는 링크를 제공하는 강력한 네비게이션 컴포넌트입니다. 방문자들이 디지털 풍경을 안내하는 지도와 같습니다.

왜 Bootstrap을 사용하여 네비바를 만드는가요?

Bootstrap은 우리에게 슈퍼 허브 툴킷을 제공하는 것입니다. 미리 디자인된 컴포넌트로 가득 차 있어 우리의 삶을 더 쉽게 만들어 줍니다. Bootstrap을 사용하여 네비바를 만들면 다음과 같은 이점이 있습니다:

다양한 기기에서 일관된 모양새(응답형 디자인)
쉬운 맞춤화
다양한 네비게이션 패턴에 대한 내장 지원

이제 손을 dirt up하고 시작해 보겠습니다!

기본 네비바 구조

여기 Bootstrap 네비바의 기본 구조입니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Your Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>

이를 분해해 보겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">: 이는 우리의 주요 네비바 컨테이너입니다. 클래스는 그 모양새와 동작을 정의합니다.
<a class="navbar-brand" href="#">: 여기에 귀하의 브랜드 이름이나 로고가 들어갑니다.
<button class="navbar-toggler">: 이 버튼은 작은 화면에서 네비바를 토글하는 역할을 합니다.
<div class="collapse navbar-collapse">: 이는 작은 화면에서 네비바 항목이 닫히는 컨테이너입니다.
<ul class="navbar-nav">: 이 비정렬 목록은 우리의 네비게이션 항목을 포함합니다.
<li class="nav-item">: 각 목록 항목은 네비게이션 항목을 나타냅니다.

네비바 맞춤화

색상 변경

Bootstrap은 다양한 색상 계획을 제공합니다. 어두운 네비바를 시도해 보겠습니다:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- 네비바 내용 -->
</nav>

여기서 navbar-light bg-light을 navbar-dark bg-dark으로 변경했습니다. 네비바가 밤하늘처럼 슬릭한 모습을 띠게 됩니다!

검색 폼 추가

검색 기능을 추가하고 싶다면 다음과 같이 합니다:

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

이를 navbar-collapse div 내에 추가하세요. 네비게이션 복도에 확대镜을 추가하는 것과 같습니다!

드롭다운 메뉴

드롭다운 메뉴를 추가하여 더욱 흥미를 띄워 보겠습니다:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

이는 네비바 내에 드롭다운 메뉴를 생성합니다. 네비게이션 복도에 비밀 방을 추가하는 것과 같습니다!

응답형 동작

Bootstrap 네비바는 기본적으로 응답형입니다. 작은 화면에서 네비바는 토글 버튼(자주 "햄버거 메뉴"라고 부릅니다)으로 축소됩니다. 이는 모든 기기에서 네비게이션이 사용 가능하도록 합니다.

브라우저 창 크기를 조정해 보세요. 네비바 항목이 사라지고 토글 버튼이 나타나는 것을 볼 수 있습니다. 이 버튼을 클릭하면 네비게이션 항목이 드롭다운 형식으로 나타납니다.

최선의 관행

간단하게 유지하세요: 사용자를 과부하시키지 마세요.
명확한 레이블 사용: 네비게이션 항목이 쉽게 이해될 수 있도록 하세요.
현재 페이지 강조: active 클래스를 사용하여 사용자가 현재 위치를 알 수 있도록 하세요.
브랜드 고려: 브랜드 디자인과 일치하는 색상과 스타일을 선택하세요.

결론

축하합니다! 지금까지 첫 Bootstrap 네비바를 만들었습니다. 연습이 완벽을 만듭니다. 다양한 조합을 시도하고, 색상을 놀려보고, 가장 중요한 것은 즐겁게 하세요!

다음은 우리가 사용한 주요 Bootstrap 클래스를 요약한 표입니다:

클래스	목적
navbar	주요 네비바 컨테이너 정의
navbar-expand-lg	네비바 확장의 분기점 설정
navbar-light/dark	네비바 색상 계획 설정
bg-light/dark	네비바 배경 색상 설정
navbar-brand	브랜드/로고 영역 스타일
navbar-toggler	작은 화면에서 토글 버튼 생성
navbar-nav	네비게이션 항목 목록 스타일
nav-item	개별 네비게이션 항목 스타일
nav-link	네비게이션 항목 내 링크 스타일
dropdown-toggle	드롭다운 토글 생성
dropdown-menu	드롭다운 메뉴 컨테이너 스타일
dropdown-item	드롭다운 메뉴 내 항목 스타일

이제 놀라운 네비바를 만들어 보세요! 기억하세요, 모든 훌륭한 웹사이트는 훌륭한 네비게이션으로 시작됩니다. 즐거운 코딩을!

Credits: Image by storyset