#14 내비게이션 바

 이번에는 지금까지 만든 웹사이트에 내비게이션 바를 추가할 차례이다.  내비게이션 바는 웹사이트의

여러 페이지들에 접근할 수 있는 하이퍼텍스트 링크를 포함하고있는 영역이다.  일반적으로

웹사이트의 모든 페이지에 나타나며 시각적으로도 기능적으로도 웹사이트의 주요 디자인 요소 중

하나이다.

 

1. 템플릿 수정

내비게이션 바가 모든 웹페이지에 공통적으로 나타나도록 하기 위해 base.html 템플릿을 다음과 같이 수정해준다.

로그인 기능은 추후에 구현할 예정이지만 미리 내비게이션 바에 위치시켜두었다. button 태그로 작성한 것은

창의 크기가 일정 수준 작아지면 나타나는 id 가 navbarNav 인 영역의 메뉴들을 숨겼다 나타냈다 할 수 있는 토글

메뉴 버튼이다.

 

평소에는 메인페이지로 이동하기 위한 Pybo 링크와 로그인 링크가 표시된다.

 

창의 크기를 줄이면 로그인 메뉴가 사라지고 우측에 메뉴 버튼이 나타난 것을 확인할 수 있다.

 

 

2. 메뉴버튼 구현 

현재 상태로는 메뉴 버튼을 눌러도 숨겨진 로그인 버튼이 나타나지 않는다.  이 버튼이 작동하도록 하려면

부트스트랩 자바 스크립트 파일이 추가되어야한다. 

 

부트스트랩을 설치할때 다운받았던 압축파일 내의 bootstrap.min.js 파일과 jquery 다운로드 페이지에서

"Download the compressed, production jQuery <version>" 링크를 다른이름으로 저장하여 받을 수 있는

jquery-<version>.min.js 파일을 다음과 같이 static 디렉토리에 위치시킨다.

 

base.html 의 본문 영역 이후에 script 태그를 사용하여 js 파일들을 추가해준다.

 

이제 메뉴 버튼을 누르면 정상적으로 숨겨진 로그인 링크가 나타나는 것을 확인할 수 있다.

 

 

3. include

내비게이션 바의 html 코드가 다른 템플릿에서 재사용될 경우를 고려해서 별도의 파일로 분리하고 base.html에서

include 하는 방식으로 바꿔보자. 

 

먼저 templates 디렉토리에 navbar.html을 생성한다. 내용은 내비게이션 바를 만들기 위해 base.html에 삽입했던

코드와 동일하다.

 

다음으로 base.html 에서 내비게이션 바의 html 코드가 있던 자리에 navbar.html 을 include 해주면 이전과 동일하게

작동한다. 편리한 유지보수를 위해 독립적인 기능으로 볼 수 있는 부분들은 파일을 분리해주는 습관을 들이는 것이 좋다.