이것저것

(4) 메인 페이지 및 bootstrap, navbar 설정 본문

Python

(4) 메인 페이지 및 bootstrap, navbar 설정

곰태태 2023. 11. 25. 14:37
반응형
SMALL

참고 페이지와 다르게 나는 게시판을 생성할 예정이 아니므로

간단하게 보여줄 메인페이지만 작성하고 넘어갈 것이다.

먼저

pybo 폴더안에 templates 폴더를 만들어준다.

그리고 main.html 페이지를 작성했다.

DMS/pybo/templates/main.html

<!doctype html>
<html lang="ko">
	<head>
	</head>
	<body>
		<div>메인페이지</div>
	</body>
</html>

일단 엄청 간단하게...

 

그리고 main_views.py에 '/'를 수정해준다.

from flask import Blueprint, render_template

bp = Blueprint('main', __name__, url_prefix='/')

# 이 작업을 통해서 라우팅 함수는 main_views 파일에 작업하면된다.

@bp.route('/hello')
def hello_pybo():
    return 'Hello, Pybo!'

@bp.route('/')
def index():
    return render_template('main.html')

render_template는 flask에서 HTML 파일을 렌더링할 수 있게 도와주는 함수이다.

그러므로 import에 render_template를 추가해주고

bp.route의 '/' 경로에 render_template로 main.html을 불러와서 return 해준다.

그러면 아래처럼 출력되는 것을 확인 할 수 있다.

-참조-

https://wikidocs.net/81053

 

3-01 내비게이션바

* `[완성 소스]` : [github.com/pahkey/jump2flask/tree/3-01](https://github.com/pahkey/jump2flask/tree/3-…

wikidocs.net

이제 navbar를 먼저 만들어보자

main.html에 navbar를 추가하자 코드는 참조 페이지에서 그대로 가져왔다.

<!doctype html>
<html lang="ko">
	<head>
	</head>
	<body>
    	<!-- 네비게이션바 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <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="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <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>
		<div>메인페이지</div>
	</body>
</html>

아주 환장(?)적인 페이지가 만들어진다.

왜냐하면 bootstrap과 css부분을 다 빼먹었기때문이다 ^^

부트스트렙과 css를 먼저 추가해보자

부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/

요기 다운로드를 누르면 zip파일이 받아진다.

압축을 해제해준다음에 css 파일에 bootstrap.min.css 만 우선 사용해보자.

나중에 추가로 bootstrap.min.js도 사용할 예정이니 압축푼 파일은 그대로 놔둬도 될것같다.

bootstrap.min.css 파일은 pybo에 static이라는 폴더를 만들어서 안에 넣어주자.

그리고 main.html에 부트스트렙 부분을 추가하자.

<!doctype html>
<html lang="ko">
	<head>
    	<!-- 부트스트렙추가 -->
        <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
	</head>

	<body>
    	<!-- 네비게이션바 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <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="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <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>
		<div>메인페이지</div>
	</body>
</html>

 

head에 부트스트렙 부분을 추가했다 그러면 이제 navbar가 정상적으로 나오는 것을 확인 할 수 있다.

여기까지 bootstrap 적용 및 navbar 생성을 마치겠다

반응형
LIST

'Python' 카테고리의 다른 글

(6) 회원가입 구현하기  (1) 2023.11.26
(5) Flask Jinja2를 사용해 표준 HTML과 템플릿 상속 사용하기  (0) 2023.11.25
(3) 모델 생성하기  (5) 2023.11.23
(2) pycharm에 mysql 불러오기  (2) 2023.11.22
(1) Pycharm에서 Flask 사용하기  (2) 2023.11.22
'Python' Related Articles more
Comments