📍 Navbar 추가
Navbar가 있으면 여러모로 편리하기 때문에 페이지 상단에 Navbar를 추가해주려한다.
bootstrap을 이용할 것이기 때문에 base.html에 CDN방식을 적용하여 앞으로 생성할 html들에 쉽게 bootstrap을 적용시켜보자.
base.html을 생성하기 전 base.html을 저장할 project 최상단에 'templates' 폴더를 생성하고 settings.py를 설정해주었다.
DIRS를 설정해주어야 엔진이 base templates를 찾을 수 있다.
TEMPLATES = [
{
"DIRS": [BASE_DIR / 'templates'],
},
]
templates 폴더에는 기본 템플릿인 base.html, _nav.html를 추가해주고
base.html에 아래의 CDN링크를 추가해준다. (bootstrap 홈페이지 참고)
📌 # base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
{% include '_nav.html' %}
<div class="container">
{% block body %}
{% endblock %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>- 기본 양식 작성(! tap)
- CDN 적용
- _nav.html 연결
- blockbody 연결 : blockbody, endblock 사이에 다른 template들의 코드들이 들어가 template이 적용된다고 생각하면 된다.
📌 # _nav.html
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-instagram"></i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>bootstrap에 있는 여러 Navbar 형식 중 하나를 선택하여 추가해주었다.
기능이 추가될때마다 Navbar에 링크를 추가해보기로 하고 내용은 따로 수정하지 않았다.
📌 # index.html
{% extends 'base.html' %}
{% block body %}
{% for post in posts %}
{% include '_card.html' %}
{% endfor %}
{% endblock %}기존에 만들었던 index에도 적용해주자.
extends 'base.html' : base.html에서 확장된 html이라는 뜻
block body, endblock : base.html에 있는 block body, endblock 사이에 해당 코드들이 들어가는 것과 같다고 생각하면 된다.
Navbar가 추가되고 card도 bootstrap이 적용된 모습!
'Django > INSTA' 카테고리의 다른 글
| [Django] 장고 CRUD기능 중 CREATE - 인스타 클론코딩 (0) | 2024.01.21 |
|---|---|
| [Django] 장고 부트스트랩 Grid - 인스타 클론코딩 (0) | 2024.01.19 |
| [Django] 장고 Image 크기, 비율 조절(Resized) - 인스타 클론코딩 (0) | 2024.01.19 |
| [Django] 장고 CRUD기능 중 READ - 인스타 클론코딩 (0) | 2024.01.19 |
| [Django] 장고 모델링 - 인스타 클론코딩 (0) | 2024.01.18 |