네비게이션바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 메인 페이지로 돌아갈 수 있는 기능을 추가하기 위해 네비게이션바를 만들 것이다.
네비게이션바 추가하기
(1단계) 로고, 로그인 링크 추가하기
네비게이션바는 모든 페이지에 보여야 하므로 base.html 템플릿 파일을 열어 <body> 태그 바로 아래에 추가한다. 네비게이션바에는 메인 페이지로 이동해 주는 'Pybo' 로고(클래스값 navbar-brand)를 가장 왼쪽에 배치하고, 오른쪽에는 '로그인' 링크를 추가한다.
| <body> <!-- 네비게이션바 Start --> <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> <a class="navbar-board" href="{% url 'pybo:index' %}">Pybo</a> <botton class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </botton> <div class="collapse navbar-collapse flex-grow-0" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">로그인</a> </li> </ul> </div> </nav> <!-- 네비게이션바 End --> <!-- 기본 템플릿 안에 삽입될 내용 Start --> {% block content %} {% endblock %} <!-- 기본 템플릿 안에 삽입될 내용 end --> </body> </html> |
(2단계) 질문 목록 화면에서 상단 네비게이션바 확인하기
상단에 네비게이션 바가 보일 것이다. 네비게이션 바의 'Pybo' 로고를 누르면 다른 페이지에서 메인 페이지로 돌아갈 수 있는지 확인해 보자. 네비게이션바는 모든 화면이 상속하는 base.html 파일에 추가되어서 모든 화면에 노출된다.
(3단계) 부트스트랩이 제공하는 햄버거(삼선) 메뉴 버튼 확인하기
아무 페이지나 접속해서 웹 브라우저의 너비를 줄여보면 어느 순간 햄버거(삼선) 버튼이 생긴다. 그리고 '로그인'링크는 사라진다.
이렇게 부트스트랩은 화면 크기를 고려하여 '반응형 웹'까지 적용되어 있다. 그런데 햄버거 메뉴 버튼을 클릭해도 아무런 변화가 없을 것이다. 그 이유는 부트스트랩 자바스크립트 파일(bootstrap.min.js)이 base.html 파일에 포함되지 않았기 때문이다. 또한 부트스트랩 자바스크립트 파일은 제이쿼리 기반으로 해서 만들어졌다. 결국 햄버거 메뉴 버튼을 정상작동 가능하게 만들려면 부트스트랩 자바스크립트 파일과 제이쿼리 파일이 필요하다.
(4단계) 부트스트랩에 필요한 파일 추가하기 - 부트스트랩 자바스크립트(javascript) 파일
부트스트랩 자바스크립트 파일은 bootstrap-4.5.3-dist.zip 압축 파일에 있다.
bootstrap.min.js 파일을 아래 위치에 복사해 붙여 넣는다.
(경로) D:\projects\mysite\static
(5단계) 부트스트랩에 필요한 파일 추가하기 - 제이쿼리(jQuery)
제이쿼리는 아래 홈페이지에 접속하여 [Download] 메뉴 클릭한 후, Download the compressed, production jQuery 3.6.1 우버튼 클릭하여 [다른 이름으로 링크저장] 한다.
(저장경로) D:\projects\mysite\static
(6단계) templates/base.html에 파일 추가하기
base.html 파일 </body> 태그 바로 위에 코드를 추가한다. 수정한 다음 햄버거 메뉴 버튼을 누르면 숨어 있는 링크가 표시된다.
| (.. 생략 ..) <script src="{% static 'jquery-3.6.1.min.js' %}"></script> <!-- Bootstrap JS --> <script src="{% static 'bootstrap.min.js' %}"></script> </body> |
include 기능으로 네비게이션바 추가해 보기
이번에는 조금 더 나은 방법으로 네비게이션바를 템플릿에 추가해 보자. 장고에는 템플릿 특정 위치에 템플릿 파일을 삽입하는 include 기능이 있다. 이번에는 include 를 사용하여 네비게이션바를 base.html 파일에 추가해 보자.
(1단계) templates/navbar.html 생성하고 코드 작성하기
templates 디렉터리에 navbar.html 파일을 생성하고 다음과 같이 코드를 작성하자. navbar.html 파일의 코드는 base.html파일에 작성했던 네비게이션바를 위한 HTML 코드와 같다.
| # D:\projects\mysite\templates\navbar.html (New) <!-- 네비게이션바 Start --> <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> <a class="navbar-board" href="{% url 'pybo:index' %}">Pybo</a> <botton class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </botton> <div class="collapse navbar-collapse flex-grow-0" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">로그인</a> </li> </ul> </div> </nav> <!-- 네비게이션바 End --> |
(2단계) templates/base.html에 include 적용하기
include 기능을 이용해 navbar.html 파일을 base.html 파일에 삽입해 보자.
| <body> {% include "navbar.html" %} (.. 생략..) |
이렇게 include 기능은 템플릿의 특정 영역을 중복, 반복해서 사용할 경우에 유용하다. 또한 따로 파일로 관리하는 것이 유지보수에 유리하다.
여기까지.
'개발자모드 > 혼자공부하는파이썬' 카테고리의 다른 글
| [파이썬/장고#16] 템플릿 필터로 빼기기능 만들어 게시물번호 출력하기, 질문에 대한 답변 개수 출력하기 (0) | 2022.09.08 |
|---|---|
| [파이썬/장고#15] 게시판 페이징 기능 구현하기 (ft. Paginator 클래스 사용) (1) | 2022.09.06 |
| [파이썬/장고#13] 데이터 저장 기능 개발(질문등록, 답변등록) / ModelForm 상속, 라벨속성 지정, 필수값체크 처리 방법 (0) | 2022.09.02 |
| [파이썬/장고#12] 표준 HTML 구조 / 표준 HTML 템플릿 상속하여 화면개발하는 방법 (0) | 2022.08.31 |
| [파이썬/장고#11] 부트스트랩(Bootstrap) 다운로드 및 셋팅 / 부트스트랩 적용하여 쉽게 화면개발하기 (1) | 2022.08.30 |
댓글