[Python] django 내비게이션바 만들기
웹사이트에 있는 메뉴 바로가기를 위한 내비게이션바 만드는 예제입니다.
내비게이션바는 모든 웹페이지에서 공통적으로 보여야 하므로 base.html 템플릿에 추가해야 합니다.
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>
<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>위와 같이 수정하고 http://localhost:8000/pybo/ 페이지를 확인하면 아래 사진과 같이 왼쪽 위에 Pybo 과 로그인이 있는 네비게이션 파를 확인하실 수 있습니다.
웹 브라우저의 크기를 줄이면 로그인 링크는 사라지고 오른쪽 위에 매뉴 버튼을 확인하실 수 있습니다.
부트스트랩은 브라우저의 크기가 작아지면 내비게이션 바에 있는 링크들을 작은 매뉴 버튼으로 변형합니다.
작은 매뉴 버튼을 클릭해야 로그인 링크 버튼이 보이는데 클릭해도 아무런 반응이 없을 것입니다.
그 이유는 부트스트랩 자바스크립트 파일 (bootstrap.min.js)이 base.html 파일에 포함되지 않았기 때문입니다.
부트스트랩 자바스크립트 파일은 이미 다운로드 받은 bootstrap-5.1.3-dist.zip 압축파일에 있으므로 다음 위치에 복사합니다.
압축파일내 경로: bootstrap-5.1.3-dist.zip\bootstrap-5.1.3-dist\js\bootstrap.min.js
붙여 넣을 위치: projects\mysite\static\bootstrap.min.js
그리고 추가한 bootstrap.min.js 파일을 사용할 수 있도록 base.html 의 </body> 태그 바로 위에 다음처럼 추가합니다.
이렇게 하고 웹브라우저를 새로고침 후 다시 확인해 보면 아래 사진과 같이 로그인 링크가 활성화 되는 것을 확인하실 수 있습니다.
'IT > 소프트웨어' 카테고리의 다른 글
| [Excel] 엑셀 - 셀 삽입 오류, 데이터의 손실을 방지하기 위해 데이터가 들어 있는 셀을 워크 시트 밖으로 이동할 수 없습니다. 오류 해결 방법 (0) | 2022.10.11 |
|---|---|
| [Python] django include 기능 (2) | 2022.10.07 |
| [JavaScript] 자바스크립 날짜 표현 (0) | 2022.10.05 |
| [Python] django 폼 사용 방법 - 게시판 질문 등록 (0) | 2022.09.28 |
| [Python] django 템플릿 상속 페이지 작성 (0) | 2022.09.19 |
댓글