[Django] 장고의 기본 요소 익히기 - 템플릿 상속

싱숭생숭어·2023년 5월 1일

Django

목록 보기

13/19

위 글은 점프 투 장고를 참고해 작성하였습니다.

지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다.

표준 HTML 구조

표준 HTML 구조의 예

<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">
    <title>Hello, pybo!</title>
</head>
<body>
(... 생략 ...)
</body>
</html>

표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일 링크는 head 엘리먼트 안에 있어야 함
또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 함

태그와 엘리먼트

<table> (... 생략 ...) </table> 

위에서 <table>은 table 태그이고 <table> ~ </table> 처럼 table 태그로 시작해서 table 태그로 닫힌 구간(Block)은 table 엘리먼트

템플릿 상속

앞에서 작성한 질문 목록, 질문 상세 템플릿을 모두 표준 HTML로 수정

템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복 -> 이 경우, CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 함

이런 중복과 불편함 해소를 위해 장고는 템플릿 상속(extend) 기능을 제공함

템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법

base.html

먼저 기본 틀이 되는 templates/base.html 템플릿을 다음처럼 작성

{% load static %}
<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <!-- pybo CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <title>Hello, pybo!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀
body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역

TemplateDoesNotExist at /pybo/ 오류 주의!!!
base.html 파일을 templates/pybo가 아닌 templates 하위에 생성해야 한다 !! templates/pybo/base.html 위치로 파일을 생성하면

TemplateDoesNotExist at /pybo/ 오류가 발생한다 ~~
따라서 위치를 아래 사진과 같이 지정해야 함

question_list.html

그 다음 question_list.html 템플릿을 아래와 같이 변경

{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
    <table class="table">

        (... 생략 ...)

    </table>
</div>
{% endblock %}

base.html 템플릿을 상속하기 위해 {% extends 'base.html' %} 처럼 extends 템플릿 문법을 사용

상단의 두 줄은 base.html에 이미 있는 내용이므로 삭제

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">

{% block content %} 와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용을 작성
이렇게 하면 이제 question_list.html은 base.html 템플릿을 상속받아 표준 HTML문서로 바뀌게 됨

question_detail.html

question_detail.html도 위와 같은 방법으로 수정 !!

{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>

    (... 생략 ...)

    </form>
</div>
{% endblock %}