이번에는 Navbar를 적용시켜볼 것입니다.
https://getbootstrap.com/docs/5.0/components/navbar/
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
navbar에서 이 부분을 개조해서 쓸 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('main.index') }}">Pybo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">계정생성</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>templates/navbar.html 를 만들어주시고 작성해주세요
수정사항은 Home 부분을 없앴고 Pybo, 계정생성, 로그인을 바꿔 적었습니다.
또한 Pybo 링크에 main.index url_for를 적용했습니다.
너비를 줄이면 그에 대한 반응형웹처럼 햄버거가 나옵니다. 그걸 누르면 저렇게 나와야 합니다.
근데 작동을 안 할 것입니다. 왜냐하면 저 부분은 자바스크립트로 한 것이기 때문에 부트스트랩의 JS를 추가해야합니다.
https://getbootstrap.com/docs/5.1/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
여기에서 다운로드 받아서 bootstrap.min.js를 추가해주시면 됩니다.
그리고 bootstrap에 있는 기능은 부트스트랩.js로 만들어졌지만
그 안에 제이쿼리로 만들어진 것도 있기 때문에 제이쿼리도 또한 가져와야합니다.
둘다 cdn으로 사용가능한데 여기선 일단 다운로드 받아서 넣어보겠습니다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
</head>
<body>
{% include "navbar.html" %}
<!-- 기본 템플릿에 삽입할 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿에 삽입할 내용 End -->
<!-- jQuery JS -->
<script src="{{ url_for('static', filename='jquery-3.6.0.min.js') }}"> </script>
<!-- Bootstarp JS -->
<script src="{{ url_for('static', filename='bootstrap.min.js') }}"> </script>
</body>
</html>base.html 입니다.
우리는 저렇게 block content 처럼 삽입할 내용을 모듈화로서 넣을 수도 있지만 {% include %}를 이용할 수도 있습니다.
1번만 사용되지만 따로 파일로 관리해야 이후 유지 보수하는데 유리하므로 분리를 했습니다.
어떤 페이지를 가든 위에는 고정되어 있습니다.
'플라스크 (추후 수정)' 카테고리의 다른 글
| Flask 필터 적용하기 strftime, jinja_env.filters (0) | 2021.08.14 |
|---|---|
| Flask 페이징 (0) | 2021.08.14 |
| Flask 답변 등록 폼검증 수정하기 (0) | 2021.08.12 |
| Flask 질문등록기능추가, Flask-WTF, SECRET_KEY, validators=[DataRequired()], validate_on_submit(), request.method, form.errors.item, {{ form.csrf_token }} (0) | 2021.08.12 |
| Flask 모듈화 {% extends %}, {% block content %}, {% endblock %} (0) | 2021.08.12 |