부트스트랩 네비게이션 바 만들기
부트스트랩을 이용해 네비게이션 바(헤더)를 만들어본다.
기본 HTML 템플릿 준비
부트스트랩을 사용하려면 먼저 HTML 문서에 부트스트랩의 CSS와 JavaScript 파일을 포함시켜야 한다. 이 파일들을 포함해야만 부트스트랩의 스타일과 기능이 제대로 작동한다.
CDN(Content Delivery Network)을 사용하여 부트스트랩의 파일들을 간단하게 가져왔다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Navigation Bar</title> <!-- 부트스트랩 CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 네비게이션 바 자리 --> <!-- 부트스트랩 JS와 Popper.js --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> </body> </html>
위 코드는 부트스트랩 CSS와 JavaScript 파일을 연결하는 기본적인 코드이다. bootstrap.bundle.min.js 파일은 부트스트랩의 JavaScript뿐만 아니라 팝오버와 툴팁 등 여러 기능에 필요한 Popper.js도 포함하고 있어서 별도로 추가할 필요가 없다. 이 두 파일만 포함하면 부트스트랩의 모든 기능을 사용할 수 있다.
네비게이션 바 추가
이제 부트스트랩을 이용해 실제 네비게이션 바를 추가할 차례다. 부트스트랩에서는 네비게이션 바를 만들기 위해 navbar 클래스를 사용한다. 이 클래스는 네비게이션 바의 기본 스타일을 자동으로 적용한다.
예를 들어, 텍스트 색상, 배경 색상, 여백 등이 기본적으로 설정된다. 이 클래스 외에도 navbar-expand-lg, navbar-light, bg-light 등 여러 클래스를 사용하여 네비게이션 바의 디자인을 세부적으로 조정할 수 있다.
navbar-expand-lg 클래스는 화면 크기가 lg 이상일 때 네비게이션 바가 확장되도록 한다. lg는 화면 크기가 992px 이상일 때를 의미한다. 작은 화면에서는 메뉴가 접혀서 표시되고, 큰 화면에서는 메뉴가 확장되어 가로로 나열된다. 이처럼 navbar-expand-lg 클래스는 반응형 웹 디자인을 위한 중요한 설정이다.
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> </div> </nav>
navbar-light와 bg-light 클래스를 사용하면 네비게이션 바의 배경이 밝은 색으로, 텍스트는 어두운 색으로 설정된다.
만약 어두운 테마의 네비게이션 바를 원하면 navbar-dark bg-dark 클래스를 사용할 수 있다. 이와 같이 navbar-light와 bg-light는 디자인을 세밀하게 조정하는 데 중요한 역할을 한다.
container-fluid 클래스는 네비게이션 바의 내용이 페이지 전체 너비에 맞게 배치되도록 한다. 이 클래스는 내부 요소들이 페이지 너비에 맞춰 확장되게 만든다.
페이지의 중앙에 위치시키고 싶다면 container 클래스를 사용할 수 있다.
브랜드(로고) 추가
브랜드는 일반적으로 네비게이션 바의 왼쪽에 배치된다. 이 부분에는 보통 사이트 이름이나 로고가 들어간다.
부트스트랩에서는 navbar-brand 클래스를 사용하여 브랜드 영역을 쉽게 설정할 수 있다. 이 클래스는 브랜드 이름이나 로고를 포함하는 링크를 만드는 데 유용하다.
href="#"는 현재 페이지에서 다른 페이지로 이동하지 않도록 설정한 것이다. 실제 사이트에서는 여기에 홈 페이지나 로고 페이지 링크를 추가하면 된다.
<a class="navbar-brand" href="#">Brand</a>
navbar-brand 클래스는 부트스트랩이 기본적으로 제공하는 스타일을 적용하며, 네비게이션 바에서 중요한 역할을 하는 부분이다.
이 클래스를 사용하면 사이트의 이름이나 로고가 적절하게 스타일링되며, 링크로 설정되기 때문에 사용자가 클릭할 수 있다.
토글 버튼 (작은 화면에서 펼침)
모바일 화면에서는 네비게이션 바의 항목들이 화면에 맞지 않게 나열될 수 있다. 이런 경우 부트스트랩은 메뉴를 접고 펼칠 수 있는 토글 버튼을 제공한다.
이 버튼은 작은 화면에서만 표시되며, 클릭하면 메뉴가 펼쳐지고, 다시 클릭하면 접힌다. 이 기능은 navbar-toggler 클래스를 통해 구현된다.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
navbar-toggler는 버튼이 클릭될 때 메뉴를 열거나 닫는 역할을 한다. data-bs-target="#navbarNav"는 이 버튼을 클릭했을 때 어느 요소를 접고 펼칠지를 지정한다.
#navbarNav는 메뉴가 들어 있는 <div>의 id로, 이 요소가 버튼 클릭에 따라 열리거나 닫히게 된다. 이를 통해 모바일 화면에서 메뉴가 자동으로 접히고, 사용자가 필요할 때만 메뉴를 펼칠 수 있게 된다.
네비게이션 링크 추가
네비게이션 바의 주요 항목들은 ul 리스트 안에 각 항목을 li 태그로 넣어서 구성된다. 이 항목들은 각각 nav-item 클래스를 사용하며, 각 항목의 링크는 nav-link 클래스를 사용하여 스타일링된다. active 클래스는 현재 페이지를 나타내는 링크에 추가되며, disabled 클래스는 비활성화된 링크를 표시할 때 사용된다.
<ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</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>
nav-item 클래스를 사용하면 네비게이션 항목들이 일관되게 배치된다. nav-link는 각 링크에 스타일을 적용하며, 링크를 클릭할 때 기본적인 부트스트랩 스타일을 유지하도록 한다.
active 클래스는 현재 페이지를 강조하는 데 사용되고, disabled 클래스는 사용자가 클릭할 수 없는 링크를 설정하는 데 유용하다.
또한, aria-disabled="true"는 접근성(Accessibility)을 고려하여 비활성화된 링크임을 명시한다.
전체 코드
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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"> <a class="nav-link active" aria-current="page" href="#">Home</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> </div> </nav>
결론
부트스트랩을 이용하면 복잡한 코딩 없이 빠르고 쉽게 반응형 네비게이션 바를 만들 수 있다.
navbar 클래스를 사용하면 기본적인 스타일링이 자동으로 적용되며, navbar-expand-lg 같은 클래스를 이용해 반응형 디자인을 구현할 수 있다.
토글 버튼을 이용하면 작은 화면에서도 메뉴가 제대로 작동하며, 각 항목들은 nav-item, nav-link 클래스를 통해 깔끔하게 정리된다.
부트스트랩을 활용하면 이런 기본적인 네비게이션 바를 손쉽게 만들 수 있고, 이후에는 디자인과 기능을 자유롭게 커스터마이즈할 수 있다.