본문 바로가기
Research/Django

[Django] 점프 투 장고 튜토리얼 - 03-1. 네비게이션바

by RIEM 2021. 11. 16.

개요

이 문서는 점프 투 장고 사이트의 장고 튜토리얼 학습 내용을 정리한 내용입니다.

레퍼런스

점프 투 장고 https://wikidocs.net/72242

 

3. 파이보 서비스 개발!

3장에서는 파이보라는 게시판 앱을 개발하고, 이를 부트스트랩과 연동하여 보다 보기좋게 만들고, 게시물 등록뿐만 아니라 삭제, 수정, 로그인, 로그아웃, 페이징, 검색 기능까지 구현하는 것이 목표다.

 

3-1. 네비게이션바

메인페이지(Home)으로 돌아가는 네비게이션 장치를 만들어 서비스 이용에 편의성을 더해보자. 네비게이션바는 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트다.

 

네비게이션바

유저는 어떤 페이지에서도 네비게이션을 볼 수 있어야 한다. 이를 위해 네비게이션바를 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 'pybo/style.css' %}">
    <title>Hello, pybo!</title>
</head>
<body>
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
    <button 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>
    </button>
    <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>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

 

가장 왼쪽에 배치된‘Pybo’로고는 Pybo:index 페이지로 이동시켜 준다. 오른쪽에는 로그인 링크를 추가했다.

 

이와 같이 로그인 표시가 나타났다. ‘Pybo’로고 누르면 어디서든 메인페이지로 이동이 가능하다. 창을 줄이면 햄버거 메뉴 버튼이 생긴다. 

햄버거 메뉴 버튼을 누르면 어떠한 변화도 없다. 이는 base.html에 부트스트랩 자바스크립트 파일(bootstrap.min.js)이 포함되지 않았기 때문이다. 부트스트랩 자바스크립트는 제이쿼리(jQuery) 기반이다. 따라서 제이쿼리 자바스크립트 파일도 필요하다. 

 

부트스트랩 자바스크립트 파일은 다운받은 bootstrap-4.5.3-dist.zip 파일 내 있으니 참고하자. 

  • 압축파일내 경로: bootstrap-4.5.3-dist.zip\bootstrap-4.5.3-dist\js\bootstrap.min.js
  • 붙여 넣을 위치: ..\projects\mysite\static\bootstrap.min.js

제이쿼리는 다음 URL에서 다운로드 할 수 있다. 다른이름으로 저장해서 파일을 다운받아 주자.

 

위 2개 파일을 ../projects/mysite/static 폴더에 추가하면 아래와 같은 상태가 나타난다.

 


> ../projects/mysite/templates/base.html

Base.html의 <body> 태그 위에 <script>를 추가해주자. 자바스크립트 파일 사용하기 위해서이다. 튜토리얼에서 3.4.1버전의 jquery JS파일을 사용했으나, 나는 3.6.0 버전을 사용했다.

JqeuryJS를 Bootstrap JS보다 먼저 선언해주어야 한다. Bootstrap.min.js는 jquery-3.4.1.min.js가 있어야 사용할 수 있다. 따라서 JQuery JS와 Bootstrap JS를 호출하는 순서에 유의해야 한다. 

 
(... 생략 ...)
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- jQuery JS -->
<script src="{% static 'jquery-3.6.0.min.js' %}"></script>
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>



자, Jquery JS와 Bootstrap JS가 적용되면 아래와 같이 햄버거 메뉴가 슬라이딩 된다.

 

 

Include

장고에는 템플릿의 특정 위치에 다른 템플릿 삽입할 수 있는 include 태그가 있다. Include 태그는 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용한다.

 

이번에 include로 네이베이션바를 base.html 템플릿에 포함시켜보도록 하겠다.

Base.html에 포함시킬 navbar.html템플릿을 작성해보자.

> ../projects/mysite/templates/navbar.html

 
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
    <button 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>
    </button>
    <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>


>../projects/mysite/templates/base.html

Navbar.html의 내용은 위에서 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>

<!-- 네비게이션바 -->

<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">

    <a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>

    <button 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>

    </button>

    <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>

{% include "navbar.html" %}

<!-- 기본 템플릿 안에 삽입될 내용 Start -->

{% block content %}

{% endblock %}

<!-- 기본 템플릿 안에 삽입될 내용 End -->

<!-- jQuery JS -->

<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<!-- Bootstrap JS -->

<script src="{% static 'bootstrap.min.js' %}"></script>

</body>

</html>

 

네비게이션바 HTML 코드는 삭제했다. Navbar.html 템플릿을 include태그로 포함시켰기 때문이다. 템플릿을 독립적으로 관리하면 유지보수가 용이해진다.

 

'Research > Django' 카테고리의 다른 글

[Django] 점프 투 장고 튜토리얼 - 03-3. 템플릿 필터  (0) 2021.11.16
[Django] 점프 투 장고 튜토리얼 - 03-2. 페이징(Paging)  (0) 2021.11.16
[Django] 점프 투 장고 튜토리얼 - 02-10. 폼  (0) 2021.11.15
[Django] 점프 투 장고 튜토리얼 - 02-9. 템플릿 상속  (0) 2021.11.15
[Django] 점프 투 장고 튜토리얼 - 02-8. 부트스트랩  (0) 2021.11.11

관련글

댓글

티스토리툴바