고유한 틀 생각하기!
일단 무조건 어디든지 들어가는 형태는 Navbar 이다.
Figma 주소를 참조하여 한번 디자인을 보자
링크 : https://www.figma.com/file/3e2Kz5PDdcdnx6CkZhSwAs/나의-페이지?node-id=0%3A1
모든 페이지에 Navbar가 들어간다
Navbar 형태는 이렇다
우선 이 템플릿을 이용하기 위해서 base.html을 생성한다.
그러기 위해서는 project 폴더 안에 templates 폴더를 생성한다.
이 templates 폴더 안에 base.html를 생성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{%block title%}{% endblock %}</title>
<script src="<https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js>" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js>" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
{% block script %}
{% endblock %}
{% block style %}
{% endblock %}
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
간단하게 틀을 잡기 위해서 block을 설정하고 있다.
Navbar 는 Bootstrap를 이용할 것이기 때문에 Bootstrap 에서 괜찮은 Navbar를 찾아보자
이 Navbar가 괜찮아 보인다.