내비게이션 기능

jurin·2020년 12월 14일

플라스크 - python

목록 보기

7/17

책 '점프 투 플라스크'를 공부하면서 정리한 내용입니다.
출처 : https://wikidocs.net/book/4542

내비게이션 기능

1. 로고, 계정생성, 로그인 링크 추가

네이게이션 바는 모든 페이지에서 보여야 하므로 base.html 템플릿 파일의 body 태그 안에 추가한다.
가장 왼쪽에 메인 페이지로 이동해주는 'Pybo' 로고(클래스값 navbar-brand), 오른쪽에 '계정생성', '로그인' 링크

<!doctype html>
<html lang="ko">
<head>
    (... 생략 ...)
</head>
<body>
<!-- ------------------------------ [edit] -------------------------------- -->
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{{ url_for('main.index') }}">Pybo</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="#">계정생성</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">로그인</a>
            </li>
        </ul>
    </div>
</nav>
<!-- ---------------------------------------------------------------------- -->
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

모든 화면이 상속하는 base.html 파일에 추가됐으므로 네이게이션 바는 질문 목록 조회, 질문 상세 조회, 질문 등록 화면 모두에 나타난다.

2. 햄버거 메뉴 버튼 확인

웹 브라우저의 너비를 줄였을 때 ‘계정생성’과 ‘로그인’ 링크가 사라지면서 햄버거 메뉴 버튼이 생긴다. 부트스트랩은 크기가 작은 기기를 고려한 '반응형 웹'까지 적용되었기 때문이다.

but, 햄버거 메뉴 버튼을 클릭해도 반응이 없다. -> 부트스트랩 자바스크립트 파일(bootstrap.min.js)이 base.html 파일에 포함되지 않았기 때문, 또한 부트스트랩 자바스크립트 파일은 제이쿼리를 기반으로 만들어졌기 때문에 제이쿼리 파일이 필요하다.

3. 부트스트랩 자바스크립트 파일 추가

부트스트랩 자바스크립트 파일은 bootstrap-4.5.3-dist.zip 압축 파일에 존재. 이 파일을 찾아 C:/projects/myproject/pybo/static/bootstrap.min.js에 복사

4. 제이쿼리 파일 추가

jquery.com/download에 접속
‘Download the compressed, production jQuery 3.4.1’ 링크를 마우스 오른쪽 버튼으로 누른 다음 ‘다른 이름으로 링크 저장’
다운로드 된 ‘jquery-3.4.1.min.js’ 파일을 C:/projects/myproject/pybo/static/jquery-3.4.1.min.js에 붙여 넣기

5. templates/base.html에 파일 추가

<!-- jQuery JS -->
<script src="{{ url_for('static', filename='jquery-3.5.1.min.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
<!-- ---------------------------------------------------------------------- -->

제이쿼리 버전 확인 필수!

include 기능으로 내비게이션 바 추가

플라스크에는 템플릿 특정 위치에 HTML을 삽입해 주는 include 기능이 있다.

1. templates/navbar.html

navbar을 분리시켜서 include 기능으로 base.html에 삽입시킨다.

<!-- 네비게이션바 -->
<!-- ------------------------------ [edit] -------------------------------- -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <a class="navbar-brand" href="{{ url_for('main.index') }}">Pybo</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="#">계정생성</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">로그인</a>
            </li>
        </ul>
    </div>
</nav>
<!-- ---------------------------------------------------------------------- -->