이번 포스팅에서는 장고의 기본 요소 중 하나인 템플릿 상속(extend)에 대하여 공부를 해보고자 한다.
표준 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 태그로 시작해서 table 태그로 닫힌 구간(Block)은 table 엘리먼트이다.
템플릿 상속(extend)
앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해야 한다.
템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복될 것이다.
그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 한다.
장고는 이런 중복과 불편함을 해소하기 위해 템플릿 상속(extend) 기능을 제공한다.
템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.
base.html
기본 틀이 되는 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>
파이참 커뮤니티 버전은 에디터 창의 <!doctype html> 부분에 오류표시가 나타난다.
하지만 기능상에는 전혀 문제가 없으므로 무시하면 된다.
base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이 된다.
body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다.
question_list.html
question_list.html 템플릿을 수정해야 한다.
[파일이름: projects/mysite/templates/pybo/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에 이미 있는 내용이므로 삭제한다.
{% block content %} 와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용을 작성한다.
이렇게 하면 이제 question_list.html은 base.html 템플릿을 상속받아 표준 HTML 문서로 바뀌게 된다.
question_detail.html
question_detail.html도 마찬가지 방법으로 수정한다.
[파일이름: projects/mysite/templates/pybo/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 %}
{% extends 'base.html' %} 템플릿 태그를 맨 위에 추가하고 기존 내용 위아래로 {% block content % } 와 {% endblock %} 를 작성했다.
템플릿 상속을 적용한 후 질문 목록, 질문 상세를 조회해 보자. 화면에 보이는 것은 동일하지만 표준 HTML 구조로 변경된 것을 확인할 수 있다.
브라우저에서 소스보기 기능으로 생성된 HTML을 확인할 수 있다.
[질문 목록 - 브라우저 소스보기 화면]
style.css
부트스트랩 적용으로 인해 style.css의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제해야 한다.
이 파일은 이후 부트스트랩으로 표현할 수 없는 스타일을 위해 사용할 것이기 때문에 파일 자체를 삭제하지는 않고 내용만 삭제한다.
[파일명: projects\mysite\static\style.css]
textarea {
width:100%;
}
input[type=submit] {
margin-top:10px;
}
<!-- 삭제 -->
'Framework > Django' 카테고리의 다른 글
| [Django] 장고(Django) 서비스 개발 - 내비게이션 바(navigation bar) (0) | 2022.12.05 |
|---|---|
| [Django] 장고(Django) 기본요소 - 폼(Form) (4) | 2022.12.04 |
| [Django] 장고(Django) 기본요소 - 부트스트랩(Bootstrap) (2) | 2022.12.01 |
| [Django] 장고(Django) 기본요소 - 스태틱(static) (0) | 2022.11.29 |
| [Django] 장고(Django) 기본요소 - URL 별칭 (0) | 2022.11.27 |