hy30nq's blog
Flask 템플릿 상속으로 효율적인 웹 페이지 만들기 본문
안녕하세요 여러분! 오늘은 Flask를 이용한 템플릿 상속에 대해 알아보려고 해요. 이 방법을 사용하면 웹 페이지를 더욱 효율적이고 깔끔하게 만들 수 있답니다.
템플릿 상속이란?
Flask에서 템플릿 상속은 여러 HTML 파일 간에 공통 부분을 재사용할 수 있게 해주는 기능이에요. 이렇게 하면 중복 코드를 줄이고 유지보수가 쉬워져요. 템플릿 상속의 기본 구문은 다음과 같아요:
{% block 블록명 %}: 이 구문은 자식 템플릿에서 재정의 가능한 블록 영역을 설정해요. 블록명은 해당 블록의 고유한 식별자에요.{% endblock %}: 이 태그는 블록의 종료를 나타내요. 각각의 block 선언은 반드시 이 태그로 종결되어야 해요.{% extends '파일명' %}: 자식 템플릿에서 이 구문을 사용하여 특정 부모 템플릿을 상속받을 것임을 명시해요.
예시 코드
자, 이제 예시 코드를 통해 템플릿 상속을 어떻게 사용하는지 알아볼까요?
1. 부모 템플릿 만들기
먼저, 부모 템플릿을 만들어야 해요. base.html 파일을 생성하고 다음과 같이 작성해요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<header>
<h1>저희 웹사이트에 오신 것을 환영합니다!</h1>
</header>
<nav>
<!-- 네비게이션 바 -->
</nav>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>저작권 © 2024 저희 웹사이트. 모든 권리 보유.</p>
</footer>
</body>
</html>여기서 {% block title %}과 {% block content %}는 자식 템플릿에서 재정의할 수 있는 영역이에요.
2. 자식 템플릿 만들기
이제 부모 템플릿을 상속받는 자식 템플릿을 만들어볼게요. index.html 파일을 생성하고 다음과 같이 작성해요:
{% extends 'base.html' %}
{% block title %}홈페이지{% endblock %}
{% block content %}
<h2>홈페이지에 오신 것을 환영합니다!</h2>
<p>여기는 메인 콘텐츠 영역입니다.</p>
{% endblock %}자식 템플릿에서 {% extends 'base.html' %} 구문을 사용하여 base.html 파일을 상속받고 있어요. 그리고 title 블록과 content 블록을 재정의하여 자신만의 내용을 추가하고 있어요.
3. Flask 애플리케이션에서 템플릿 렌더링하기
마지막으로, Flask 애플리케이션을 설정하고 템플릿을 렌더링해볼게요. 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)이제 Flask 애플리케이션을 실행하면, index.html 템플릿이 렌더링되어 웹 페이지에 표시될 거예요. 부모 템플릿 base.html의 구조를 그대로 가져오면서, 자식 템플릿 index.html에서 정의한 내용이 포함된답니다.
마무리
Flask의 템플릿 상속 기능을 이용하면 웹 페이지를 더욱 효율적으로 관리할 수 있어요. 부모 템플릿에서 공통 구조를 정의하고, 자식 템플릿에서 필요한 부분만 재정의하여 사용하면 된답니다. 오늘 배운 내용을 통해 여러분도 멋진 웹 페이지를 만들어보세요!
'Web > web dev' 카테고리의 다른 글
| 파이썬 플라스크에서 캐싱과 static_url_path 사용하기 (0) | 2024.06.17 |
|---|---|
| Flask로 정적 파일 제공하기: 이미지 파일 제공 예시 (0) | 2024.06.17 |
| Flask Jinja2 템플릿 엔진 사용법 가이드 (1) | 2024.06.15 |
| Flask에서 make_response() 함수 사용하기: 예시와 함께 알아보기 (0) | 2024.06.14 |
| Flask에서 `jsonify()`를 사용하는 이유와 예시 (0) | 2024.06.14 |
