15. 네비게이션 바

네비게이션 바 는 모든화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 이를 이용해 메인페이지(Home)으로 돌아갈수있는 장치를 만들 수 있다. 네비게이션바는 모든 페이지에서 공통적으로 보여져야 하므로 projects\mysite\templates\base.html 을 다음과 같이 수정하자.

pybo:index 페이지로 이동해 주는 Pybo 로고를 가장 왼쪽에 배치하고 그 오른쪽에 로그인 링크를 추가했다. 로그인 기능은 추후에 설정한다.

좌상단에 Pybo 아이콘과 로그인 아이콘이 생겼다. 아무 페이지에서 Pybo 를 누르면 메인 페이지로 돌아간다. 로그인 버튼은 아직 설정을 안해서 아무런 일도 발생하지 않는다.

웹 브라우저의 크기를 작게 조절하면 로그인버튼이 사라지고 우상단에 메뉴버튼이 생긴다. 부트스트랩은 크기가 작아지면 네이게이션바에 있는 링크들은 작은 메뉴버튼으로 들어간다. 부트스트랩의 반응형 웹 기능이다. 메뉴버튼안에는 로그인 버튼이 들어있지만 아직은 설정을 다 끝내지 않아서 아무런 반응이 없다. 부트스트랩의 자바스크립트 파일(bootstrap.min.js)이 base.html 파일에 포함되지 않았다.

저번에 다운받은 파일 bootstrap-5.1.3-dist 파일에 있는bootstrap.min.js 파일을 옮겨주자.

bootstrap-5.1.3-dist\js\bootstrap.min.js 파일을 projects\mysite\static\bootstrap.min.js 로 옮겨주자.

이렇게 복사해주자. 그리고 projects\mysite\templates\base.html 파일을 열어 bootstrap.min.js 파일을 사용할 수 있도록 다음과 같이 수정하자.

이렇게 수정하면 메뉴 버튼  클릭시 숨겨진 링크가 나온다.

[include 태그]

 

직접 눌러서 확인해보면 알수있듯이 우상단의 버튼을 클릭하면 숨겨진 메뉴였던 로그인 버튼이 나온다.

 

장고에는 템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 Include 태그가 있다. include 태그는 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용된다. include 를 이용해 네비게이션바를 base.html 템플릿에 포함시키자.

일단 base.html 에 포함시킬 navbar.html 을 만들자.

projects\mysite\templates\navbar.html 위치에 파일을 만들고 다음과 같이 작성하자.

그리고 projects\mysite\templates\base.html 파일을 열어보자.

navbar.html 파일을 작성하면서 눈치 챘겠지만  base.html 의 빨간네모친 부분과 똑같다. 똑같은 저 부분을 다 지우고 Include 태그를 이용해 navbar.html 을 base.html 로 포함시키는 작업을 하려는것이다. 저 부분을 다 지우고 다음과 같이 수정하자.

이렇게 한다면 navbar.html 템플릿을 include 로 포함시킨것이다.