✅ Django 템플릿 상속: base.html과 blog_details.html이 어떻게 작동하는지 완전 정리
Django 웹 프로젝트를 만들다 보면 중복되는 HTML 코드들이 많이 생기기 마련이죠. 예를 들어 모든 페이지에 공통으로 있는 네비게이션 바(nav), 로그인/로그아웃 버튼, 기본 레이아웃 등은 매번 복붙하기보다는 템플릿 상속 기능을 활용해서 깔끔하게 유지할 수 있습니다.
🔷 예시 시나리오
- base.html: 모든 페이지에서 공통으로 사용할 레이아웃(기본 틀)
- blog_details.html: 특정 블로그 글을 보여주는 내용 전용 템플릿
✅ base.html의 역할
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>블로그 프로젝트</title>
</head>
<body>
<nav style="display: flex; justify-content: space-between">
<div>
<a href="{% url 'blog_list' %}">홈</a>
</div>
<div style="text-align: right">
{% if request.user.is_authenticated %}
<form action="{% url 'logout' %}" method="POST" style="display: inline">
{% csrf_token %}
<button>로그아웃</button>
</form>
{{ request.user.username }}
{% else %}
<a href="{% url 'login' %}">로그인</a>
{% endif %}
</div>
</nav>
<!-- 하위 템플릿에서 이 영역을 덮어씌움 -->
{% block content %}{% endblock %}
</body>
</html>
👉 핵심 포인트
- {% block content %}{% endblock %}: 이 부분을 하위 템플릿에서 덮어쓰기 가능하도록 열어둔 블록입니다.
- 네비게이션 바와 기본 HTML 구조는 모든 페이지에 공통 적용됩니다.
✅ blog_details.html의 역할
<!-- blog_details.html -->
{% extends 'base.html' %}
{% block content %}
<h1>{{ blog.title }}</h1>
<div style="text-align: right">
{{ blog.author.username }}
</div>
<hr>
<p>{{ blog.content }}</p>
<a href="{% url 'blog_list' %}">목록으로 돌아가기</a>
{% endblock %}
👉 핵심 포인트
- {% extends 'base.html' %}: base.html을 상속받아 전체 레이아웃을 공유합니다.
- {% block content %} ... {% endblock %}: base.html의 content 블록을 이 내용으로 덮어씌웁니다.
🧠 최종 렌더링 구조 (브라우저에 보이는 형태)
렌더링 후 최종 결과는 아래처럼 합쳐집니다:
<body>
<nav>홈 / 로그인 또는 로그아웃 버튼</nav>
<h1>블로그 제목</h1>
<div>작성자 정보</div>
<p>블로그 본문</p>
<a>목록으로 돌아가기</a>
</body>
✅ 즉, 기본 구조는 base.html이 제공하고, 개별 내용은 blog_details.html이 채우는 구조입니다.
✅ 템플릿 상속의 장점
항목 설명
| ✅ 중복 제거 | 공통 요소를 base에만 작성하면 반복 필요 없음 |
| ✅ 유지보수 편리 | 전체 페이지 구조 수정 시 base.html만 변경하면 됨 |
| ✅ 일관된 UI | 어떤 템플릿에서도 동일한 레이아웃 유지 가능 |
🔁 관련 팁: block과 include의 차이
기능 목적 사용 위치
| block | 하위 템플릿에서 덮어쓸 수 있게 열어둠 | base.html 등 레이아웃 템플릿에서 사용 |
| include | 공통 템플릿 파일을 끼워 넣음 | 로그인창, 네비 등 공통 구성요소에서 사용 |
✅ 마무리 요약
- base.html: 전체 틀(레이아웃) + {% block content %} 구간 제공
- blog_details.html: base를 상속하고 해당 블록만 내용으로 채움
- Django의 템플릿 상속 구조는 유지보수와 확장성에 매우 유리합니다.
필요하시면 block title, block script 같은 다중 블록 구조나 include를 병행하는 구조도 함께 정리해드릴게요 😊