● 내비게이션바
내비게이션바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트
부트스트랩 내비게이션바: getbootstrap.com/docs/5.1/components/navbar
[파일명: projects\mysite\templates\base.html]
홈, 로그인 등 버튼 상단에 추가
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bootstrap -->
<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">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
<button class="navbar-toggle" 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' 로고를 누르면 메인페이지 이동
#페이지 크기를 줄이면 로그인 버튼이 사라지고 햄버거 메뉴 버튼이 보인다.
[파일명: projects\mysite\templates\base.html] 수정
(... 생략 ...)
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 end -->
<!-- Bootstrap Js -->
<script src="{% static 'bootstrap.min.js' %}"></script> #js 파일 추가
</body>
</html>
**
#숨겨진 링크가 표시된다.
● include
include 태그란?
템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 태그
템플릿에 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용한다.
[파일명: projects\mysite\templates\navbar.html] 신규 파일 생성
base.html에 포함시킬 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>
[파일명: projects\mysite\templates\base.html]
(.. 생략 ..)
<body>
<!-- 네비게이션바 -->
{% include "navbar.html" %} # 수정
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>
**
네비게이션바 HTML 코드들을 삭제하고 navbar.html 템플릿을 include 태그로 포함
'Web > Django' 카테고리의 다른 글
| Django - 페이징 (0) | 2024.05.27 |
|---|---|
| Django - 폼 (0) | 2024.05.21 |
| Django - 템플릿 상속 (0) | 2024.05.18 |
| Django - 부트스트랩 (0) | 2024.05.18 |
| Django - 스태틱 (0) | 2024.05.18 |