본문 바로가기
Research/Django

[Django] 점프 투 장고 튜토리얼 - 02-9. 템플릿 상속

by RIEM 2021. 11. 15.
728x90

Django 점프 투 장고 정리

작성일 : 2021-11-11

문서버전 : 1.0

 

개요

이 문서는 점프 투 장고 사이트의 장고 튜토리얼 학습 내용을 정리한 내용입니다.

레퍼런스

점프 투 장고 https://wikidocs.net/72242

2-9. 템플릿 상속

현재까지 만든 질문 목록, 질문 상세 템플릿은 기존 HTML과는 다른 구조다. 웹 브라우저의 종류에 상관없이 동일하게 화면을 나타내기 위해선 웹 표준을 지켜서 HTML 문서를 작성할 필요가 있다.

 

표준 HTML 구조

표준 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>

(... 생략 ...)

</body>
</html>

 

Html, head, body 엘리먼트가 있다. head 엘리먼트 내는 css, meta, title 엘리먼트가 위치한다.

 

태그 vs 엘리먼트 

여기서 태그와 엘리먼트의 차이에 대해 짚고 넘어가보자.

 

<table> #083u0jr302 </table>

<table>은 table ‘태그’이다. ‘<table> #083u0jr302 </table>’인 구간(block)은 table 엘리먼트다.

 

템플릿 상속

앞에서 작성한 질문 목록, 질문 상세 페이지 템플릿을 표준 HTML 구조에 맞춰 수정해보자. 

 

템플릿 파일을 표준 HTML 구조로 변경할 경우 body 엘리먼트 바깥 부분이 중복된다. CSS 파일 이름이 변경되거나 CSS 파일 추가될 때마다 템플릿 파일을 일일이 수정하기 귀찮아진다. 이러한 불편함을 해소하기 위해 장고의 템플릿 상속(extend) 기능을 제공한다. 

 

Base.html

> ../projects/mysite/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 문서 기본 틀이다. {% block content %}와 {% endblock %} 템플릿 태그는 base.html 상속한 템플릿에서 개별적으로 구현해야 하는 영역이다.

 

Question_list.html

Question_list.html 템플릿을 수정해주자.

> ../projects/mysite/templates/pybo/question_list.html

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

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

        (... 생략 ...)

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

 

  • {% extends ‘base.html’ %} : base.html 템플릿 상속을 위해서 추가했다.
  • 위 코드 두줄은 base.html 내 중복된 내용으로 제거
  • {% block content %}, {% endblock %} 사이 question_list.html 고유의 내용이 포함된다. 

Question_detail.html

> ../projects/mysite/templates/pybo/question_detail.html

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

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

    (... 생략 ...)

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

 

{% extends ‘base.html’ %} 템플릿 태그 맨 위에 추가한 뒤 {% block content%}와 {% endblock %} 작성했다. 템플릿 상속 적용 후 질문 목록, 질문 상세를 조회해보자. 

 

Sytle.css

부트스트랩 적용으로 style.css의 내용은 필요가 없어졌으니 기존 내용 삭제하자. 이후 부트스트랩으로 표현할 수 없는 경우를 위해 파일은 남겨두자.

> ../projects/mysite/static/style.css

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

 

728x90

댓글