[python] Flask - Navigation 추가

0. 들어가기

-. 이번엔 웹 사이트를 전반적으로 볼 수 있는 지도, Navigation bar를 만들어본다.

-. 게시판을 하나하나 url 넣어서 확인하려니 귀찮기도 해서.. 네비바 먼저 만든다.

1. html 수정

-. 앞서와 크게 달라지는건 없고, 단순히 navigation bar 스크립트만 추가하면 된다.

#base.html 수정
<body>
{% include "navigation.html" %}
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2021 by <a href="http://https://givemethesocks.tistory.com/">DongtanDobby</a>.
        {% endblock %}
    </div>
</body>

#navigation.html 추가
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{{ url_for('main.main') }}"><img src="../static/img/logo.png" height=50 alt="logo"></a>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item ">
                <a class="nav-link" href="/feed">공시확인</a>
            </li>

            <li class="nav-item ">
                <a class="nav-link" href="/board">자유게시판</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">계정생성</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">로그인</a>
            </li>
        </ul>
    </div>
</nav>

-. 완료.

728x90

저작자표시

'python > Flask' 카테고리의 다른 글

[Flask] REST API, swagger 적용 (0)	2022.03.06
[python] Flask - 게시판 만들기 (2) (0)	2021.02.22
[python] Flask - 게시판 만들기 (2) - 부트스트랩과 웹표준 (0)	2021.02.21
[python] Flask - 게시판 만들기 (1) (2)	2021.02.21
[python] Flask - ORM 사용 SQLite 연동 - 파이썬은 날먹 (0)	2021.02.21