고정 헤더 영역
상세 컨텐츠
본문
#네비게이션바
#base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<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">
<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-->
<!--Bootstrap JS-->
<script src = "{% static 'bootstrap.min.js'%}"></script>
</body>
</html>#include
#include
#장고에는 템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 include 태그가 있다.
#include 태그는 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용한다.#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
{% load static %}
<!DOCTYPE html>
<html lang="en">
<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 -->
{% include navbar.html %}
<!--기본 템플릿 안에 삽입될 내용 start-->
{%block content %}
{%endblock %}
<!--기본 템플릿 안에 삽입될 내용 end-->
<!--Bootstrap JS-->
<script src = "{% static 'bootstrap.min.js'%}"></script>
</body>
</html>반응형
'Python > Django' 카테고리의 다른 글
| [Django] 템플릿 필터 함수 (0) | 2022.09.23 |
|---|---|
| [Django] 페이징 (1) | 2022.09.22 |
| [Django] 폼(Form) 복습필요 (0) | 2022.09.18 |
| [Django] 스태틱(static) 디렉터리, 스타일시트 등록하기 (0) | 2022.09.18 |
| [Django] 데이터 저장 (복습필요) (0) | 2022.09.16 |
