🧩 Django Jinja 템플릿 완전 가이드
Django의 프론트엔드 렌더링은 Jinja 기반 템플릿 언어를 통해 동작합니다. HTML과 Python 변수를 자연스럽게 결합하여 웹 페이지를 효율적으로 구성할 수 있습니다. 이번 포스트에서는 Jinja 기본 문법부터 block/extends 활용법까지 실전 예제와 함께 시각적으로 정리합니다.
1️⃣ Jinja 문법 정리
Jinja는 HTML 내에서 동적 데이터를 표현하기 위해 다음과 같은 문법을 사용합니다.
🔤 기본 문법 요소
유형 문법 설명
| 변수 출력 | {{ 변수명 }} | 파이썬에서 전달받은 값을 출력함 |
| 조건문 | {% if 조건 %} ... {% endif %} | 조건에 따라 HTML 코드 분기 |
| 반복문 | {% for item in list %} ... {% endfor %} | 리스트를 반복 순회하며 출력 |
| 주석 | {# 주석 내용 #} | 템플릿 내에서 처리되지 않는 주석문 |
2️⃣ block 사용법
block은 템플릿 안에서 특정 영역을 정의하고, 하위 템플릿에서 해당 영역을 커스터마이징할 수 있게 해줍니다.
📌 예시: base.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
<div class="container">
{% block content %}
<p>기본 콘텐츠입니다.</p>
{% endblock %}
</div>
</body>
</html>
🔍 설명
- {% block title %}: 자식 템플릿에서 제목을 바꿀 수 있는 영역
- {% block content %}: 본문 영역 (페이지마다 다른 내용으로 구성 가능)
3️⃣ extends 사용법
extends는 상위 템플릿(base.html)의 구조를 재사용하는 방식입니다. 반복적인 HTML 구조를 줄이고 유지보수를 쉽게 만들어줍니다.
📌 예시: post_list.html
{% extends 'base.html' %}
{% block title %}게시글 목록{% endblock %}
{% block content %}
<h1>📋 게시글 리스트</h1>
<ul>
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endblock %}
🔍 설명
- extends: base.html을 상속하여 공통 레이아웃을 가져옴
- 각 block을 재정의하여 개별 페이지 콘텐츠 구성
✅ 실전 꿀팁
💡 반복문과 조건문 활용 예시
{% if posts %}
{% for post in posts %}
<p>{{ post.title }}</p>
{% endfor %}
{% else %}
<p>게시글이 없습니다.</p>
{% endif %}
💡 HTML 파일 위치 규칙
- 템플릿 파일은 보통 templates/앱이름/파일.html에 위치
- settings.py에서 TEMPLATES['DIRS']에 templates 폴더 경로 추가 필수
TEMPLATES = [
{
'DIRS': [BASE_DIR / 'templates'],
}
]
🎯 요약 정리
- {{ 변수 }}로 동적 데이터 출력, {% if %}, {% for %}로 흐름 제어
- block은 재정의 가능한 영역, extends는 상위 템플릿을 상속받는 구조
- 템플릿 분리는 유지보수성과 재사용성을 극대화하는 핵심 전략
'기술블로그-Django편' 카테고리의 다른 글
| 🔗 Django URL 설정 완벽 가이드 (0) | 2025.05.14 |
|---|---|
| ⚙️ Django Function-Based View (FBV) 완전 이해하기 (0) | 2025.05.14 |
| 🧱 Django Database Model 완전 정복 (0) | 2025.05.14 |
| 💻 Django 프로젝트 세팅 완전 정복! (0) | 2025.05.14 |
| 🔍 Django ORM Field Lookups 완벽 정리 (0) | 2025.05.14 |