Flask #6 Jinja2 block 개념 정리

iwantit·2026년 3월 20일

목록 보기

6/8

1. Block이란?

block은 템플릿 상속에서 특정 영역을 채우기 위한 공간이다.
즉, 공통 레이아웃(base.html) 만들어 두고 페이지마다 바뀌는 부분만 block으로 채워 넣는 방식이다.

사용 하는 방법

{% block title %}{% endblock %}
{% block content %}{% endblock %}
{% block style %}{% endblock %}
{% block script %}{% endblock %}

실습

templates/base.html

<body>
    <h1>🔥 공통 header</h1>

    <div>
        {% block content %}
        기본 내용
        {% endblock %}
    </div>

    <h1>🔥 공통 footer</h1>
</body>

templates/home.html

{% extends 'base.html' %}

{% block content %}
<h2>🏠 홈 화면</h2>

<p>환영합니다! 이 페이지는 메인 페이지입니다.</p>

<ul>
    <li>공지사항 확인하기</li>
    <li>최근 게시글 보기</li>
    <li>마이페이지 이동</li>
</ul>

<button>로그인</button>
<button>회원가입</button>
{% endblock %}

result.html

{% extends 'base.html' %}

{% block content %}
<h2>📊 결과 화면</h2>

<p>입력한 데이터에 대한 결과입니다.</p>

<table border="1">
    <tr>
        <th>이름</th>
        <th>점수</th>
    </tr>
    <tr>
        <td>김철수</td>
        <td>85</td>
    </tr>
    <tr>
        <td>이영희</td>
        <td>92</td>
    </tr>
</table>

<p>평균 점수: 88.5</p>

<a href="/">다시 홈으로</a>
{% endblock %}

main.py

from flask import Flask, render_template

app = Flask(__name__)

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

# 홈 페이지
@app.route('/home')
def home():
    return render_template('home.html')

# 결과 페이지
@app.route('/result')
def result():
    return render_template('result.html')

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

2. 코드 설명

base.html

전체 페이지의 공통 레이아웃을 담당한다. 거의 변하지 않는 정적인 구조이다. 부모 html이므로, extends 'base.html'을 통하여 상속한다. 레이아웃 상속이다.

block의 의미

{% block content %}

이 부분은 나중에 다른 템플릿이 바꿀 수 있는 영역이다.
즉, 동적으로 내용이 들어갈 자리(빈칸)이다.

block은 더어쓰기 가능한 영역이다.

기본 내용은 쓰는 이유는?

{% block content %}
기본 내용
{% endblock %}

자식이 block을 안 쓰면 -> 기본 내용이 출력됨
자식이 block을 쓰면(/home 또는 /result) -> 기본 내용 대신 그 내용으로 교체됨
기본 내용 = fallback(기본값)

3. request.args.getlist

main.py

@app.route('/hobby', methods=['GET'])
def hobby():
    hobbies  = request.args.getlist('hobby')
    return render_template('hobby.html', hobbies=hobbies)

request.args → GET 요청의 쿼리스트링 데이터를 가져옴
getlist('hobby') → 같은 이름의 파라미터를 여러 개 리스트로 가져옴

hobby.html

{% extends 'base.html' %}
{% block content %}
<h2>취미 선택</h2>

<form method="GET">
    <input type="checkbox" name="hobby" value="게임"> 게임 <br>
    <input type="checkbox" name="hobby" value="운동"> 운동 <br>
    <input type="checkbox" name="hobby" value="독서"> 독서 <br>
    <input type="checkbox" name="hobby" value="코딩"> 코딩 <br>

    <button type="submit">전송</button>
</form>

<hr>
<h3>선택한 취미</h3>
<ul>
    {% for h in hobbies %}
        <li>{{ loop.index }}. {{ h }}</li>
    {% endfor %}
</ul>

{% endblock %}