Bootstrap의 Navbar로 메뉴바 구성하기
웹 서비스를 만들기 위해 웹페이지를 만들다보면, 여러 페이지간의 전환을 위해 메뉴바를 구성해야 하는데, 부트스트랩의 Navbar를 이용하면,
복잡할수도 있는 메뉴바를 쉽게 구성할수 있다.
Navbar 사용의 문제
그런데 이렇게 Navbar를 사용하다 보면, 아쉬운 점이 몇가지 있다.
무엇보다 웹서비스에 포함된 웹페이지가 많아지면, Nabvar자체가 많이 길어지게 된다. 특히 버튼 타입 메뉴나, Pull-down방식의 메뉴들이 많아지다 보면 코드가 더욱 더 길어지는데, 모든 웹페이지마다 이런 Navbar 코드를 붙여넣다 보면 각 페이지의 코드가 길어지고 가독성도 떨어지는 문제가 있다.
또한, 웹서비스를 만들다보면, 각각의 웹페이지 이름을 변경하거나, 새로운 페이지를 추가하는 경우가 매우 빈번한데, 그럴때마다 사용하는 모든 웹페이지의 Navbar를 일일이 수정해야 하는 번거로움이 있다. 사용하는 페이지가 불과 몇개 안된다면, 이러한 수작업도 참고 할수 있겠으나, 사용하는 웹페이지의 수가 5~10개 정도를 넘어서기 시작하면 이것이 매우 거추장스럽고 번거로운 일이 되고 만다. 또한 반복해서 여러 페이지의 Navbar를 수정하다 보면 실수도 하는 경우도 있어 신경이 많이 쓰이게 된다.
이러한 문제들 때문에, 각각의 웹페이지마다 Navbar를 포함시키는 대신 좀 더 효율적인 방법을 모색하게 되는데, 해결책이 있다.
Navbar.html로 동적 Navbar 만들기
해결책은 Navbar를 별도 파일로 독립시켜 동적 Navbar를 만드는 방법을 사용하는 것이다.
즉 다음과 같은 Navbar 코드를 각각의 웹페이지에 직접 넣는 대신 별도의 파일 (예 : Navbar.html)로 만들어 주는 것이다.
이제 각각의 웹페이지 코드에는 위와 같은 Navbar 코드를 삭제하는 대신 다음과 같이 별도의 html파일로 독립시킨 Navbar.html을 불러서 사용하는 간단한 코드를 넣어주면 된다.
이렇게 하면, 혹시라도 메뉴구성을 변경하거나, 웹페이지의 이름을 변경하거나 하는 경우에 Navbar파일을 한번만 수정해주면 되므로, 메뉴바 변경 작업이 무척 간단해진다.
만일 로그인 상태등에 따라 사용하는 Navbar를 2-3가지로 변경하려는 경우, 각각의 Navbar1.html, Navbar2.html 등으로 만들어주고 위에서 해당되는 이름으로 변경하여 사용하면 된다.