네비게이션

부트스트랩의 내비게이션 바는 반응형 웹 디자인에서 자주 사용되는 기능.
다양한 화면 크기에서 적절하게 변경하는 메뉴를 쉽게 만들 수 있음

* class 기능 설명
.navbar
    - 네비게이션 바를 정의하는 기본 설정. 네비게이션 바의 기본 설정 스타일을 적용

.navbar-expand{-sm -md -lg -xl -xxl}
    - 네비게이션 바가 특정 화면 크기 이상에서 확장되도록 함
    - 화면 크기가 설정된 값보다 작을 때는 햄버거메뉴(석 삼자) 아이콘으로 축소
    -sm : 작은 화면 크기 576px 이하는 햄버거 메뉴 아이콘 보임
    -md : 중간 화면 크기 768px 이하는 햄버거 메뉴 아이콘 보임(태블릿pc)
    -lg : 큰 화면 크기 992px 이하는 햄버거 메뉴 아이콘 보임(작은 모니터 사이즈)
    -xl : 큰 화면 크기 1200px 이하는 햄버거 메뉴 아이콘 보임(평균 모니터 사이즈)
    -xxl : 큰 화면 크기 1400px 이하는 햄버거 메뉴 아이콘 보임(큰 모니터 사이즈)

.navbar-light   
    - 밝은 배경색을 사용하는 네비게이션 바
    - 링크와 텍스트 색상은 어두워짐

.navbar-dark   
    - 링크와 텍스트 색상은 밝아짐
    - .bg-색상 을 함께 사용해줘야함
       .bg-light 
           - 네비게이션 바의 배경색을 밝게 설정
       .bg-dark 
           - 네비게이션 바의 배경색을 어둡게 설정
       .bg-primary 
           - 네비게이션 바의 배경색을 기본 색상으로 설정

.navber-brand 
    - 네비게이션 바의 브랜드나 로고를 표시하는 부분

.navbar-toggler
    - 작은 화면에서 네비게이션 바를 열고 닫는 버튼
    - 열고 닫는 기능만 존재하고 눈앞에 보이는 디자인이 없음

.navbar-toggler-icon 
    - 눈에 보이는 디자인(icon)을 추가(햄버거 모양 아이콘)

.collapse 
    - 반응형으로 동작하는 콘텐츠(내용)를 감싸는 부분

.navbar-collapse 
    - 네비게이션 바의 내용이 축소/확장 될 수 있도록 함

.navbar-nav
    - 네비게이션 바의 안의 목록을 감싸는 부분

.nav-item  
    - 네비게이션 바의 각 항목을 표현

.nav-link
    - 네비게이션 바의 각 항목의 링크를 디자인한 것

data-bs-toggle="collapse"
    - 부트스트랩에서 js를 사용해서 태그를 토글로 만드는 역할

data-bs-target="#id명"
    - 토글 대상의 id를 나타냄