render_template
- 플라스크 코드 내에서 hmtl 마크업 언어를 사용해서 웹사이트를 제작하여 나타낼 수 있습니다.
- html 코드들을 플라스크내에 사용하는 것보다 .html 파일을 만들어서 라우팅하는 방법이 좀 더 깔끔하고, 관리하기에도 편합니다.
- 플라스크는 render_template 모듈을 통해서 .html파일을 렌더링 하여 브라우저를 통해 보여 줄 수 있습니다.
- 앞의 포스팅을 통해 만들어 놓은 app.py에 이어서 진행해 보겠습니다.
templates 디렉토리 생성
- 먼저 render_template 를 사용하기 위해서는 templates 디렉토리가 필요합니다.
- flask_server 하위에 templates 디렉토리를 만들어 줍니다.
index.html 생성
- 이제 templates 디렉토리 안에 index.html 을 생성해 줍니다.
- 파이참의 파일 생성에서는 .py 뿐만 아니라 html 파일도 생성할 수 있습니다.
- html 생성을 선택하면 파일 이름을 입력하는 항목과 html 버전을 선택할수 있습니다.
- 저는 html5를 선택 하겠습니다.
- index.html 파일을 생성하면 기본적인 Tag(태그)들이 입력되어 만들어 집니다.
index.html 수정
- index.html 파일 내용을 간단하게 수정해 보겠습니다.
- head 태그안에 있는 title 태그의 텍스트를 Hello로 수정합니다.
- body 태그 안에 h1태그를 추가 하고 , '안녕하세요'를 텍스트로 추가합니다.
- 그 아래에 h2태그를 추가 하고, '웹사이트에 방문해 주셔서 감사합니다.'를 추가합니다.
Tip
태그 입력시 태그 네임만 입력후 Tab키를 누르면 자동으로 <></>씌어져 생성됩니다.
ex) div-> tab -> <div></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1>안녕하세요.</h1>
<h2>웹사이트에 방문해 주셔서 감사합니다.</h2>
</body>
</html>
모듈 Import
- 이제 app.py로 이동합니다.
- import 임포트 해놓은 Flask에 추가적으로 render_tamplate 를 import 해 주겠습니다.
from flask import Flask,render_template
hello 함수 수정
- app.py에 작성되어 있는 hello함수를 수정하겠습니다.
- return 뒷 부분을 render_template('index.html')으로 수정합니다.
- 변경전
return "Hello World!"
- 변경후
return render_template('index.html')
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def hello():
return render_template('index.html')
if __name__ == '__main__':
app.run()
플라스크 실행
- 파이참 run을 이용해 플라스크 서버를 실행해 줍니다.
- 실행 후 표시되는 url링크를 클릭하여 접속합니다.
- index.html이 잘 표시되어 나타나는 것을 확인할 수 있습니다.
