Bootstrap - Navbar

▶ Navbar in Bootstrap?

개인적 의견으로 Bootstrap을 이용하는 가장 큰 이유들 중 하나라고 생각한다. 쉽고 편리하며, 이상적인 형태의 nav를 경험해볼 수 있기 때문이다.

▶ Navbar 구조 잡기

1. 우선 nav 태그의 class를 navbar로 지정 후 기본적인 내비게이션 바를 만들어 준다.
   이후 내비게이션 내부에 브랜딩 로고를 삽입하기 위해 a 태그class에 navbar-brand 지정한다.

입력

<nav class="navbar navbar-dark bg-dark">
	<a href="#" class="navbar-brand">Ukja2</a>
</nav>

출력

• 여기서 한 가지 nav 태그를 div로 사용할 수도 있지만 권장하지는 않는다.

• navbar-dark : navbar 내부의 글자색을 의미한다.
  navbar-light : 반대로 어두운 글자색을 표현한다.

• bg-dark : 배경색을 의미하며, Bootstrap 내부의 기본 색상인 primary 또는 success , warning , dark 등등이 존재한다.

• navbar-brand : 회사명, 로고 등을 배치할 수 있게 만든 변수
  문자 뿐 아니라 이미지도 삽입할 수 있다.

위와 같이 입력 시 검은 배경색의 navbar와 그 내부 시작점에 Ukja2 라는 brand logo가 나타난다.

2. bar 내부에 추가적인 nav-link 목록을 입력해준다.

입력

    <nav class="navbar navbar-dark bg-dark">

        <a href="#" class="navbar-brand">Ukja2</a>

        <div class="navbar-nav">
            <a href="main" class="nav-item nav-link">Home</a>
            <a href="main" class="nav-item nav-link">About</a>
            <a href="main" class="nav-item nav-link">Contact</a>
        </div>
    </nav>

출력

• nav-item : 내비게이션 항목을 감싸는 컨테이너를 의미한다.
• nav-link : 내비게이션 항목 내의 링크를 스타일링한다.

위와 같은 형태는 이상적이지 않기 때문에 반응형 웹에 맞게 만들어보자

3. 오른쪽에 있는 요소들을 collapse 내부로 줄바꿈 시켜주어야 한다.

입력

    <nav class="navbar navbar-expend-lg navbar-dark bg-dark">

        <a href="#" class="navbar-brand">Ukja2</a>

        <div class="collapse navbar-collapse" id="expandme">
            <div class="navbar-nav">
                <a href="main" class="nav-item nav-link">Home</a>
                <a href="main" class="nav-item nav-link">About</a>
                <a href="main" class="nav-item nav-link">Contact</a>
            </div>
        </div>
    </nav>

출력

• collapse : bootstrap의 일부로 어떠한 요소들을 숨기거나 드러내게 할 수 있는 class다. 주로 반응형 웹이 일정 크기 이하로 줄어들 때 다수의 내비게이션 메뉴들을 하나의 아이콘 내부로 숨기게 할 수 있다는 의미이다. 예시로 햄버거 버튼 의 경우가 있다.

• navbar-expand-lg : navbar가 어떤 크기일 때 줄어들고 다시 커지는지 그 기준을 정의한다. small, medium, large 등이 존재한다.

• 또한 왜 수평으로 정렬되는가 하면 Bootstrap에서
  navbar-expand-lg class가 반응형 Grid를 활용한 시스템으로 이를 사용하면 navbar가 큰 화면에서는 수평으로 확장되지만, 작은 화면에서는 수직으로 정렬되기 때문이다. 그렇기 때문에 navbar-expand-lg class를 적용 함으로써 화면이 lg 크기 이상일 때 내비게이션 바를 수평으로 정렬하고, 그보다 작은 화면에서는 수직으로 정렬된다.

4. 하지만 정작 화면이 줄어들었을 때 내비게이션 메뉴들은 보이지 않는다. 이를 나타내기 위해 메뉴들을 담아줄 toggler버튼이 필요하다.

입력

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<a href="#" class="navbar-brand">Ukja2</a>


	<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#expandme">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="expandme">
		<div class="navbar-nav">
			<a href="main" class="nav-item nav-link">Home</a>
			<a href="main" class="nav-item nav-link">About</a>
			<a href="main" class="nav-item nav-link">Contact</a>
	</div>
</div>

출력 (중단점 이하일 때)

위 형태를 만들기 위해서 가장 중요한 점은 내비게이션 메뉴 요소에 id를 추가하고, 해당 id를 아이콘 요소에 연결을 시켜야 한다는 점이다. 그렇게 해야 작은 화면에서 toggler를 클릭했을 때 내비게이션 메뉴가 수직으로 정렬되기 때문이다.

잠깐 코드를 설명하자면

• navbar-toggler : 작은 화면에서 내비게이션 메뉴를 숨기고 햄버거 버튼을 표시하는 역할을 한다.
• data-bs-toggle="collapse" : 버튼을 클릭하면 지정된 요소를 열고 닫는다.
• data-bs-target="#expandme" : 토글할 대상 요소의 ID를 지정한다.

이렇게 하면 매우 간단한 bootstrap navbar를 만들어볼 수 있다.
하지만 무엇보다 가장 중요한 점은 toggler를 활용한 동작들느 Javascript가 필요하기 때문에 반드시 bootstrap의 js cdn을 적용시켜야 한다.