[Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기

오늘의 목표

flask에 다운받을 리소스들을 잘 연결해보자

오늘의 도구

bootstrap/flask/startbootstrap

참조할 멋있는 template :

https://startbootstrap.com/theme/grayscale

[Grayscale - Free One Page Bootstrap Theme - Start Bootstrap

Like our free products? Our pro products are even better! Go Pro Today!

startbootstrap.com](https://startbootstrap.com/theme/grayscale)

1. flask 서버를 이용하기 위해서 파이썬 파일을 하나 먼저 만든다.

from flask import Flask

app=Flask(__name__)

@app.route('/')
def home_page():
    return "<h1>안녕하십니까</h1>"

if (__name__)=="__main__":
    app.run(debug=True)

2. flask 의 html파일 렌더링하기

<main.py>flask을 실행하는 메인 파이썬 파일

from flask import Flask,render_template

app=Flask(__name__)

@app.route('/')
def home_page():
    return render_template('index.html')

if (__name__)=="__main__":
    app.run(debug=True)

이때 사용할 html과 css js 기타 이미지 등의 파일 경로를 잘 설정해줘야한다.

templates라는 폴더를 만들어 index.html 파일을 만들자.

나는 위에 게시한 사이트의 template을 다운받아썼다.

이렇게 다운받아진 파일들을 flask를 사용하기 위해서 잘 정리해보자.

파일 경로 설정

다음으로 static파일에 담은 css 와 js을 Index에서 불러오기 위해서 올바른 파일수정이 필요하다.

css예를 들어

<link href="css/styles.css" rel="stylesheet" />

이렇게 저장되어있는 경로를 static파일 경로를 추가하여 저장한다.

<link href="static/css/styles.css" rel="stylesheet" />
<script src="static/js/scripts.js"></script>

이렇게 이미지 경로수정까지 하고 flask를 실행하고 서버에 접속하며 위와 같은 웹이 만들어져있다.

나는 이렇게 상대경로 혹은 절대경로로 수정하는 것이 편한데 왜 {{url\_for('static',filename='style.css')}을 이용하라는 것인지 모르겠다. 이건 다시 문서들을 들여다봐야한다.

오늘의 html 파일을 분석해보면

3. 여러 페이지를 만들기

이번 파일 말고 간혹 다른 html 안에 nav을 보면 여러 페이지의 링크가 있다.

                  <ul class="navbar-nav ms-auto py-4 py-lg-0">
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
                    </ul>

여기에 저장된 링크를 살펴보자 '파일.html'이렇게 연결되어있다.

저 링크를 누를 때마다 url주소/index.html 이렇게 주소가 변경된다.

그렇다면 저 flask에서 서버를 불러오기 위해서는

@app.route('/index.html')
def home_page():
    return render_template('index.html')

와 같이 route('/index.html') 이라 써야한다. 만일 저기에 href="abc"였다면 .route('/abc')라 해야한다

이와 같은 라우트 연결 함수를 contact about post 마저 만들어 내고 실행을 누르면 로컬서버에서 다른 페이지로 연결이 가능하다.

여러 페이지 모두 동일한 header 와 footer을 갖도록 유도해야한다.