파이썬 Flask 반응형 템플릿 구해서 고치기 -1 : 무료 템플릿 다운로드

 

 

반응형 웹 템플릿 구하기

 

다운로드시 다른 링크로 옮겨가긴하지만

템플릿, 디자인, 효과 등 보기좋게 되어 있습니다.

웹쟁이 | 무료 웹소스 제공

 

심플한 템플릿이 많습니다.

TEMPLATED

 

비슷한 디자인이 많지만 분류를 잘해놓은 것 같습니다.

HTML5 UP

 

 

고치기

 

사용할 템플릿입니다.

별로 마음에 들지는 않습니다.

 

 

 

일반 페이지는 심플하니 이 페이지를 메인으로 하려고합니다.

 

 

 

Flask 프로젝트를 생성해서 static 과 templates 디렉터리를 생성하고 복사합니다.

(좌 템플릿, 우 Flask)

 

 

 

base.html 과 index.html 을 생성합니다.

 

 

 

이제 홈페이지의 상단과 하단 부분에 공통되는 부분을 찾습니다.

 

 

 

공통되는 상단과 하단을 제외한 본문은 표시한 부분으로

base.html 에 표시한 부분을 {% block content %}{% endblock %} 으로 하면 될 것 같습니다.

 

 

 

그리고 본문안의 타이틀에 해당되는 h2 태그에 {% block title %}{% endblock %} 을 넣어주었습니다.

상속받는 템플릿에서 제목을 넣을 수 있도록.

 

 

 

메인이되는 index.html 안에 base.html 을 상속받아서 내용을 넣어봅니다.

{% extends 'base.html' %}

{% block content %}

{% block title %} 메인 페이지 {% endblock %}

<p>오늘은 수요일입니다.</p>
<p>비가 많이 내립니다.</p>

{% endblock %}

 

다음은 Flask 코드를 작성하고 실행해봅니다.

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)

 

 

정상적으로(?) 작동하는 것을 확인했습니다.

 

 

 

다른 페이지도 템플릿을 이용해서 생성하고 실행해봅니다.

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

{% extends 'base.html' %}

{% block content %}

{% block title %} 리뷰 페이지 {% endblock %}

<p>이 페이지는 리뷰를 하는 페이지입니다.</p>

{% endblock %}

 

 

다음 포스팅에서는 static 디렉터리에 리소스 경로를 잡는 방법에 대해 다루겠습니다.