[Django 8] 템플릿 상속

html 문서 중 기본 뼈대가 되는 문서를 기본 템플릿으로 정하고, 이는 공통의 코드이므로 다른 문서에서 기본 템플릿의 코드가 필요하면 상속하여 가져다 쓸 수 있다.

템플릿 상속이란? html 문서 중 기본 뼈대가 되는 문서를 기본 템플릿으로 정하고, 이는 공통의 코드이므로 다른 문서에서 기본 템플릿의 코드가 필요하면 상속하여 가져다 쓰는 것.

  • base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 틀을 갖춘 문서가 된다.

  • 기본이 되는 템플릿을 'base.html'로 정한다.

1. templates 폴더에 base.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <div class="navbar">
      모든 페이지에 공통으로 들어갈 요소
      </div>
    {% block content %} 
          // base.html을 상속한 템플릿에서 구현해야 하는 영역
    {% endblock %}
</body>
</html>

  • body 태그의

    {% block content %}
{% endblock %}

    는 base.html을 상속한 템플릿에서 구현해야 하는 영역이 된다.

  • 즉, block 외의 모든 요소들은base.html을 상속한 템플릿들에서 공통적으로 보여지게 된다.

  • head태그의 메타데이터도 상속 받기 때문에 이를 이용해 부트스트랩 CDN을 모든 템플릿에서 일일이 다운받지 않고 사용할 수 있다.

2. home.html 에서 상속

{% extends 'base.html' %}
{% block content %}
<div>
  각 페이지에만 존재하는 요소들.
</div>
{% endblock %}

  • 각 html 파일 최상단에 base.html 을 상속 받는다는 것을 명시해준다

    {% extends 'base.html' %}

주의 👀 extends는 항상 파일 최상단에 위치해야한다! 안그럼 에러남!

3. 참고

Previous[Django 11] URL app별로 관리하기Next[Django 4] MTV 패턴

Last updated