부트스트랩 - 네비게이션 바: 전문적인 웹 네비게이션의 관문

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 현대 웹 디자인에서 가장 중요한 구성 요소 중 하나인 네비게이션 바에 대해 깊이 알아보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 부트스트랩 네비게이션 바의 fascinující 세계를 안내해 드리게 되어 기쁩니다. 가장 좋아하는 음료를 마시면서 편안하게 앉아, 이 코딩 모험을 함께 시작해 보세요!

작동 원리

네비게이션 바를 만들기 전에, 먼저 그것이 무엇이고 어떻게 작동하는지 이해해 보겠습니다. 네비게이션 바는 웹사이트의 지도와 같습니다. 이는 사용자가 여러분의 디지털 작품을 탐색할 수 있도록 도와줍니다. 부트스트랩에서는 네비게이션 바가 반응형이며 기본적으로 접혀 있습니다. 이는 다양한 화면 크기에 아름답게 조정된다는 뜻입니다. 이不是很 멋질까요?

기본 네비게이션 바

가장 기본적인 네비게이션 바를 시작해 보겠습니다. 다음은 간단한 예제입니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

이를 분해해 보면:

• <nav> 엘리먼트에서 부트스트랩 클래스를 사용합니다.
• navbar-brand 클래스는 웹사이트 이름이나 로고에 사용됩니다.
• navbar-toggler는 모바일 뷰에서 유명한 "햄버거" 메뉴를 만듭니다.
• navbar-collapse 디브 내부에는 순서 없는 목록에 네비게이션 아이템이 있습니다.

수직 네비게이션 바

东西를 돌리자면 어떨까요? 수직 네비게이션 바를 시도해 보겠습니다:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

여기서의 마법은 flex-column 클래스입니다. 이는 우리의 수평 네비게이션 바를 멋진 수직 네비게이션 바로 변환합니다. 멋지지 않나요?

중앙 정렬 네비게이션 바

모든 것을 완벽하게 정렬하고 싶은 사람들을 위해, 네비게이션 바 아이템을 중앙에 정렬하는 방법을 소개합니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

mx-auto 클래스는 우리의 슈퍼 헤로입니다. 양쪽에 자동 마진을 적용하여 콘텐츠를 중앙에 정렬합니다.

브랜드

여러분의 브랜드는 여러분의 신분입니다. 브랜드를 빛나게 만드는 방법을 보겠습니다:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

이 코드는 로고를 브랜드 이름 옆에 추가합니다. d-inline-block과 align-top 클래스는 모든 것이 잘 정렬되도록 합니다.

텍스트

때로는 네비게이션 바에 단순한 텍스트가 필요할 수 있습니다:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>

navbar-text 클래스는 텍스트를 네비게이션 바의 외관과 일치시키기 위해 스타일링합니다.

이미지와 텍스트

이미지와 텍스트를 결합하여 더 역동적인 네비게이션 바를 만들어 보겠습니다:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Welcome to our website!
</span>
</nav>

이는 로고와 환영 메시지를 포함한 네비게이션 바를 만듭니다. 이렇게 보이면 전문적이지 않나요?

네비게이션 구성 요소

nav 구성 요소는 우리의 네비게이션 바의 핵심입니다. 더 복잡한 예제를 살펴보겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

이 예제에는 활성 링크, 일반 링크, 비활성 링크가 포함되어 있습니다. sr-only 클래스는 화면 리더를 위한 접근성을 향상시킵니다.

목록 없는 네비게이션 바

보다 깨끗한 외관을 위해 목록 없이 네비게이션 바를 만들 수 있습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</nav>

이는 <ul>과 <li> 태그를 사용하지 않고 동일한 결과를 얻습니다.

드롭다운 추가

네비게이션 바에 드롭다운을 추가하여 레벨을 높이겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>

dropdown-toggle 클래스는 드롭다운 효과를 만들고, dropdown-menu와 dropdown-item은 드롭다운 콘텐츠를 스타일링합니다.

폼 추가

검색 바를 추가하고 싶다면? 문제ありません! 네비게이션 바에 폼을 추가하는 방법을 보겠습니다:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<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>
</nav>

form-inline 클래스는 폼 요소를 한 줄에 유지합니다. 이는 네비게이션 바에 완벽합니다.

색상 테마

부트스트랩은 다양한 색상 테마를 제공합니다. 여기서는 어둡게 색칠된 네비게이션 바를 보여드리겠습니다:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

navbar-light을 navbar-dark로, bg-light을 bg-dark로 변경하면 간단합니다!

컨테이너 사용

최고의 정렬을 위해 네비게이션 바 콘텐츠를 컨테이너로 감싸는 방법을 알아보겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Contained Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

container 클래스는 콘텐츠를 중앙에 정렬하고 반응형 고정 폭을 제공합니다.

배치

고정 상단

네비게이션 바를 상단에 고정하고 싶다면 다음과 같이 합니다:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

fixed-top 클래스는 네비게이션 바를 상단에 고정시킵니다. 사용자가 스크롤할 때도 상단에 남아 있습니다.

반응형 동작

부트스트랩 네비게이션 바는 기본적으로 반응형입니다. 작은 화면에서는 접혀지고, 큰 화면에서는 확장됩니다. 이를 위해서는 navbar-expand-* 클래스를 사용합니다:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar content -->
</nav>

이 네비게이션 바는 중간 크기의 화면에서 확장됩니다.

토글러

네비게이션 바 토글러는 모바일 기기에서 유명한 "햄버거" 메뉴를 만듭니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<!-- Navbar content -->
</div>
</nav>

navbar-toggler 버튼은 네비게이션 바 콘텐츠의 가시성을 제어합니다.

외부 콘텐츠

네비게이션 바 외부의 콘텐츠를 토글할 수도 있습니다:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>

이는 네비게이션 바 자체 외부의 콘텐츠를 토글합니다.

오프캔버스

마지막으로, 오프캔버스 네비게이션 바를 살펴보겠습니다:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas content -->
</div>
</div>
</div>
</nav>

이는 측면에서 슬라이드 인 네비게이션 바로 사용할 수 있습니다. 이제 여러분은 부트스트랩 네비게이션 바의 다양한 기능을 경험해 보았습니다. 연습을 통해 완벽하게 익혀보세요! 행복한 코딩과 여러분의 네비게이션 바가 항상 사용자를 안내해 주기를 바랍니다!

메서드	설명
.navbar()	네비게이션 바 컴포넌트 초기화
.collapse('toggle')	네비게이션 바 접기 토글
.collapse('show')	네비게이션 바 접기 표시
.collapse('hide')	네비게이션 바 접기 숨기기
.offcanvas('toggle')	오프캔버스 네비게이션 바 토글
.offcanvas('show')	오프캔버스 네비게이션 바 표시
.offcanvas('hide')	오프캔버스 네비게이션 바 숨기기

Credits: Image by storyset