Django 프론트& 백엔드 개발

Django 템플릿 상속 이해하기 (부모 · 자식 템플릿)

Data Jun 2026. 1. 4. 10:18

Django에서는 부모 템플릿(base.html)
이를 상속받는 자식 템플릿(index.html) 구조를 자주 사용합니다.

 

이 방식의 핵심은 공통 구조는 부모에, 내용은 자식에 두는 것입니다.

 

1. 부모 템플릿 (base.html)

부모 템플릿에는 전체 페이지의 뼈대
자식이 끼워 넣을 수 있는 block을 정의합니다.

<body>
  <div>
    {% block date-block %}
    {% endblock %}
  </div>

  <hr>

  <h1>코스토랑</h1>
  <h2>난 코딩할때가 제일 이뻐</h2>

  <div class="food-container">
    {% block food-container %}
    {% endblock %}
  </div>
</body>

이 상태만 보면 내용은 비어 있고 틀만 존재합니다.

 

2. 자식 템플릿 (index.html)

자식 템플릿은 부모를 상속받아
필요한 블록만 선택적으로 채웁니다.

{% extends "./base.html" %}
{% load static %}

{% block date-block %}
  <div>12 Aug, 2020</div>
{% endblock %}

{% block food-container %}
  <div class="food">
    <img src="{% static 'foods/images/chicken.jpg' %}">
    <h3>코딩에 빠진 닭</h3>
  </div>
{% endblock %}

extends는 항상 파일 최상단에 있어야 합니다.

 

3. 부모·자식 템플릿 동작 원리

부모만 block 내용을 가진 경우

부모 템플릿 내용이 그대로 출력

부모 + 자식 모두 block 내용이 있는 경우

자식 템플릿 내용으로 오버라이딩

 

4. 정리하면

  • 부모 템플릿: 공통 레이아웃
  • 자식 템플릿: 페이지별 내용
  • block이 없으면 → 부모 내용 사용
  • block이 있으면 → 자식 내용으로 덮어씀(override)

이 구조 덕분에
중복 없는 HTML 관리 + 유지보수 쉬운 구조를 만들 수 있습니다.