[Python] django 템플릿 상속 페이지 작성

액트 2022. 9. 19.

앞전에 작성한 question_list.html, question_detail.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 등이 포함되어 있어야 합니다.

기존에 작성한 question_list.html, question_detail.html 파일의 내용은 모두 <body> ... </body> 안에 들어가야 하는 내용입니다.

body 태그 밖은 두 파일 모두 같은 내용으로 중복됩니다. 똑같은 내용을 모든 템플릿 파일에 작성하는 번거로움을 없애고자 장고에선 템플릿 상속(extend) 기능을 제공합니다.

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

기본 템플릿 base.html 작성

우선 기본 틀이 되는 기본 템플릿을 먼저 작성합니다. 이름은 base.html 로 템플릿 디렉터리 안에 생성합니다.

mysite/template/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>

body 태그 안의 {% block content %} 와 {% endblock %} 는 base.html 을 상속한 템플릿에서 개별적으로 구현해야 하는 영역입니다.

기본 틀이 되는 base.html 템플릿 파일을 작성했으니 이 템플릿 파일을 상속 받을 파일을 수정합니다.

question_list.html 파일 수정

1,2 라인을 삭제하고 다음과 같이 작성합니다.

기존 1,2 라인은 base.html 파일에 내용과 중복되므로 삭제합니다.

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

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

base.html 템플릿을 상속하기 위해 {% extends 'base.html' %} 구문을 추가합니다.

{% block content %} 와 {% endblock %} 사이에 question_list.html 파일에서만 쓰이는 body 태그 안의 내용을 작성합니다.

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 %}

위와 같이 작성하고 파일 저장한 후 확인을 위해 브라우저 창에서 키보드 F12 키를 통해 소스코드를 확인합니다.

아래와 같이 왼쪽에 base.html 파일의 내용을 확인하실 수 있습니다.

저작자표시 비영리 변경금지

'IT > 소프트웨어' 카테고리의 다른 글

[JavaScript] 자바스크립 날짜 표현 (0)	2022.10.05
[Python] django 폼 사용 방법 - 게시판 질문 등록 (0)	2022.09.28
[Python] django 부트스트랩(Bootstrap) 적용 (2)	2022.09.19
[Python] django CSS 적용 방법 스태틱(static) (0)	2022.09.19
[Python] django 데이터 저장 (0)	2022.09.06