앞서 파이보의 기초 공사가 마무리되었으니 이제 본격적으로 파이보를 만들 차례이다.
지금까지 만든 파이보로 질문 목록을 조회하고 질문을 등록하고, 다시 내용을 보고 답변을 달고 이렇게 조작을 하다 보면 아마도 불편함을 느낄 것이다. 그것은 바로 메인페이지(Home)로 돌아갈 수 있는 장치가 없기 때문이다.
이번에는 이러한 불편을 해소할 수 있는 내비게이션바를 만들어 보자.
<내비게이션바>
내비게이션바는 모든 페이지에서 공통적으로 보여야 하므로 다음처럼 base.html 템플릿에 추가해야 한다.
[파일명: projects\mysite\templates\base.html]
Copy{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- pybo CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'pybo/style.css' %}">
<title>Hello, pybo!</title>
</head>
<body>
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>
항상 pybo:index 페이지로 이동해 주는 'Pybo' 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가했다. (로그인 기능은 나중에 구현한다.)
이와 같이 수정하고 질문 목록 페이지를 요청하면 화면 상단에 다음과 같은 내비게이션바가 보일 것이다.
내비게이션바의 'Pybo' 로고를 누르면 아무 곳에서나 메인 페이지로 돌아갈 수 있다.
'Pybo' 로고를 눌러서 잘 작동하는지 확인해 보자.
부트스트랩 자바스크립트 파일은 이미 다운로드 받은 bootstrap-5.1.3-dist.zip 압축파일에 있으므로
다음 위치에 복사해 주자. 아직 다운 안받았으면 아래 링크를 통해 다운받아주자.
https://getbootstrap.com/docs/5.1/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
즉, 다음처럼 projects\mysite\static 디렉터리 하위에 bootstrap.min.js 파일이 위치해 있어야 한다.
그리고 추가한 bootstrap.min.js 파일을 사용할 수 있도록 base.html의 </body> 태그 바로위에 다음처럼 추가하자.
[파일명: projects\mysite\templates\base.html]
(... 생략 ...)
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>
이렇게 수정하면 메뉴 버튼 클릭시 숨겨진 링크가 다음처럼 표시되는 것을 확인할 수 있을 것이다.
<include>
장고에는 템플릿의 특정 위치에 다른 템플릿을 삽입할수 있는 include 태그가 있다. include 태그는 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용한다.
이번에는 include를 이용하여 네비게이션바를 base.html 템플릿에 포함시켜 보자.
[파일명: projects\mysite\templates\navbar.html]
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
</ul>
</div>
</div>
</nav>
그리고 base.html을 다음과 같이 수정하자.
[파일명: projects\mysite\templates\base.html]
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- pybo CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<title>Hello, pybo!</title>
</head>
<body>
<!-- 네비게이션바 -->
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>
네비게이션바 HTML 코드들을 삭제하고 navbar.html 템플릿을 include 태그로 포함시켰다.
'Django' 카테고리의 다른 글
| PostgreSQL 설치와 장고와 연동하기 (1) | 2024.07.08 |
|---|---|
| Django rest framework 설치 및 기본 세팅 (0) | 2024.07.05 |
| (10) 폼 (1) | 2024.07.02 |
| (9) 템플릿 상속 (0) | 2024.07.02 |
| (8) 부트스트랩 (0) | 2024.07.02 |
