여기까지 왔으면 존나 잘하고 있는 것이다. 왜냐? 처음에는 존나 어려우니까 ㅠ
이제 각종 html파일을 넣을 템플릿과 css를 만들어보자.
1. 템플릿 렌더링하기
- mkdir static templates
이제 이 템플렛s폴더 안에서 템플렛을 렌더링할 것인데
그러기 위해서는 render_template라는 함수(?)를 가져와야(import)한다.
app.py의 첫번째 줄에 이렇게 추가해주면 된다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)그리고 인덱스 함수에서 render_template라는 함수를 리턴해준다.
()안에 파일명을 쓰면 해당 파일로 리다이렉트한다고 생각하면 된다.
배쉬창으로 돌아가서
- cd templates
- touch index.html
templates폴더 안에 index.html파일을 만들어준다.
인덱스 파일은 알아서 이렇게 코딩해주고...
다시 실행해보면
쟌. 성공적으로 렌더링되었다.
2. html 분리하여 상속받기
이제 index.html에 추가로 base.html을 만들어서 구조화할 것이다.
뼈대랑 콘텐츠를 분리한다고 생각하면 된다.
base.html에 레이아웃을 만들어놓고
index.html에는 콘텐츠만 담을 것이다.
그리고 라우터로 index.html를 불러오면 index.html에서 base.html의 레이아웃을 상속받아 완전한 구조를 이루게 만들어주는 작업을 하면 된다.
\todoApp\templates\base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>\todoApp\templates\index.html
{% extends 'base.html' %}
{% block head %}
<title>Task Master</title>
{% endblock %}
{% block body %}
<h1>Template</h1>
{% endblock %}처음에는 %%{{}{의 남발이 혼란스러울테지만 보다보면 적응된다.
extends는 상속을 받겠다는 의미다.
대충 base.html로부터 코드를 받아와~ 라는 의미
그리고 base.html에 타이틀부분과 바디 부분은 각각 block head와 block body로 채워져있는데
인덱스에서 그 부분을 채워주겠다는 뜻이다
이렇게 해주고 로컬서버를 다시 들어가보면
성공적으로 상속된 것을 볼 수 있다.
그러면 이제 css를 넣어볼까?
3. CSS넣기
\todoApp\templates\base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>\todoApp\app.py
\todoApp\static\css\main.css
body{margin:0;font-family: Arial, Helvetica, sans-serif;}link rel로 href='/static/css/main.css' 이런식으로 단순하게 이어줄 수도 있지만
폴더가 복잡해지고 파일이 많아지면 상대경로/절대경로를 생각하기가 까다로울 수 있다.
그래서 url_for라는 함수를 사용한다.
그 전에 app.py에서 url_for를 추가로 들여와주고,,
href="{{ url_for('폴더명', filename='폴더 안의 파일 및 경로') }}"
이렇게 써준다.(이것은 진자2 문법이다)
js도 추가해야한다면 같은 방법으로 하면 된다.
app.py를 다시 시작하고 F12를 눌러 css가 성공적으로 적용된 것을 확인해보자.
자 이제 거의 다 끝났다.
다음은 sql알케미로 데이터베이스를 만들고 테이블을 만든 뒤
연결하여 db를 추가해볼 것이다.
그 전에 파이썬으로 설정해야하는 것이 있어서 다음페이지에 이어서 하겠다.
'왕초보를 위한 에러로그' 카테고리의 다른 글
| 파이썬 플라스크-sqlalchemy를 이용한 투두리스트 만들기(A-Z) (4)sqlalchemy로 db만들고 연결하기 (0) | 2019.12.29 |
|---|---|
| 파이썬 플라스크-sqlalchemy를 이용한 투두리스트 만들기(A-Z) (2)파이썬 파일 만들고 헬로월드 띄우기 (0) | 2019.12.29 |
| 파이썬 플라스크-sqlalchemy를 이용한 투두리스트 만들기(A-Z) (1)가상환경 만들기 (0) | 2019.12.29 |