
python api 쇼핑몰 만들기 어쩌구 하다가
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewpoint" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css"
crossorigin="anonymous"
/>
<title>{% block title %}Home{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
<a class="nav-item nav-link" id="login" href="/login">Login</a>
<a class="nav-item nav-link" id="signUp" href="/sign-up">Sign up</a>
<a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
<a class="nav-item nav-link" id="home" href="/">Home</a>
</div>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
integrity="sha512"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384"
crossorigin="anonymous"
></script>
<script>
type = "text/javascript";
src = "{{ url_for('static', filename='index.js') }}";
</script>
</body>
</html>
home.html
{% extends "base.html" %}
{% block title %}Changed{% endblock %}
을 만들었다.
화면분할 상태( item 들을 한번에 보여주기 힘든 상황에서는 메뉴버튼으로 접고 펼 수 있다.)
메뉴 버튼 누르기 전
메뉴 버튼 누른 후
전체화면 상태 (item 들을 한번에 보여줄 수 있는 상황에서는 메뉴버튼이 사라진다.)
프론트를 하려고 한 건 아닌데 강제로 하는 느낌이다. 하지만 재미있다.