0. 들어가기에 앞서.
Python Flask의 return으로만 HTML을 작성하는 것은 매우 힘들고 그 자체가 곤혹일 것이다. 하지만 모든 문제에는 해결책이 있듯 이 Flask에서는 HTML 파일을 통한 Web Page를 구성할 수 있다. 이번 글에서는 render_template을 이용하여 HTML 파일을 Flask에 연결해 볼 것이다.
1. 사전 설정.
우선 render_template을 이용하기 위해서는 상단의 import 부분의 Flask 뒤에 render_template을 추가해 주어야 한다.
- Before
from flask import Flask
app = Flask(__name__)
...- After
from flask import Flask,render_template
app = Flask(__name__)
...이 render_template()는 .html 파일을 text형태로 반환해 준다. 사용 예는 굉장히 간단하다. 시작하기 전에 render_template를 사용할 모든 파일은 templates폴더 내에 존재해야 한다. 여러분의 작업 경로에 templates폴더를 추가하자
(flaskBlog) C:\flaskBlog>mkdir templates이제 templates 폴더에 .html 파일을 추가해 보자. 필자는 다음과 같이 파일을 만들었다.
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render Templates Example</title>
</head>
<body>
<h1>Hello render_templates() World!</h1>
</body>
</html>
2. HTML 파일 연결.
이제 Flask에 HTML 파일을 연결할 차례이다. 아래 사진은 전 글에서 했던 app.py로 실행한 Flask인데 코드를 보면 hello_world() 함수가 return 하는 문장이 그대로 HTML 형식으로 변환되어 Web Page에 나타나는 것을 알 수 있다.
즉 이는 app.route() 바로 아래에 있는 함수가 return 하는 text가 그대로 HTML 형식으로 변환되는 것을 알 수 있다. 앞서 소개한 render_template()이 html 파일을 text 형태로 반환하여 주는 것이라고 하였으니 render_template('FileName')을 return 뒤에 연결하면 된다.
- Before
@app.route("/")
def hello_world():
return "<p>Hello, World!</p"- After
@app.route("/")
def hello_world():
return render_template('index.html')- Result
결과와 HTML 코드를 확인해 보면 정상적으로 index.html 에서 작성한 내용이 출력되는 것을 알 수 있다. 아래는 app.py파일의 전체 코드이다.
- app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.debug = True
app.run()
3. HTML에 파일 Link 하기.
HTML 파일만을 이용해 웹사이트를 만든다면 그저 껍데기에 불과할 확률이 크다. 그래서 우리는 JavaScript와 CSS 등을 이용한다. Bootstarp, JQuery와 같은 CDN 방식의 파일이면 변경점이 없지만 자신이 직접 만든 Local의 파일을 이용하기 위해서는 기존의 방식과 다른 방법으로 Link 해야 한다. 우선 HTML에 Link 할 파일을 저장할 폴더를 생성해야 한다. 필자는 static이라는 이름의 폴더를 생성하였다.
(flaskBlog) C:\flaskBlog>mkdir static
이제 static 폴더에 HTML 파일에 연결할 .js 파일 또는 .css 파일을 생성하면 된다. HTML에 첨부될 모든 파일은 여기에 위치해야 한다. 이 파일들을 첨부하는 형식은 다음과 같다.
<script src="/static/*.js"></script>
<link rel="stylesheet" href="/static/*.css">
간단한 예를 들어보기 위해서 css파일을 작성하였다.
- style.css
h1 {
color: red;
}
이제 HTML 파일에 css 파일을 연결하여야 한다. HTML 파일의 head 부분에 아래와 같은 부분을 추가하면 된다.
<link rel="stylesheet" href="/static/style.css">
- Result
위 사진과 같이 정상적으로 결과가 출력되는 것을 알 수 있다.
4. 전체 코드.
- app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.debug = True
app.run()- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render Templates Example</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>Hello render_templates() World!</h1>
</body>
</html>- style.css
h1 {
color: red;
}
'PROGRAMMING > PYTHON' 카테고리의 다른 글
| [Flask.3] pyngrok로 외부에서 Flask 접속하기 (0) | 2022.02.18 |
|---|---|
| [Flask.2] 새로운 페이지 만들기 (0) | 2022.02.17 |
| [Flask.0] Flask 시작하기 (0) | 2022.02.17 |