Django - 템플릿 상속
● 템플릿 상속
지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 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 태그로 닫힌 구간(Block)은 table 엘리먼트이다.
- 템플릿 상속
앞서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정하면
body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복 된다.
이 경우 CSS 파일 이름이 변경되거나 추가될 때마다 모든 템플릿 파일 수정이 필요하다.
장고는 중복과 불편함을 해소하기 위해 템플릿 상속(extend) 기능을 제공한다.
- base.html
[파일이름: projects/mysite/templates/base.html]
* 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을 상속한 템플릿에서 개별적으로 구현해야 하는 영역
- 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 %}
** base.html 템플릿을 상속하기 위해 {% extends 'base.html' %} 처럼 extends 템플릿 문법 사용
** {% block content %} 와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용 작성
question_list.html은 base.html 템플릿을 상속받아 표준 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 %}를 작성
- style.css
[파일명: projects\mysite\static\style.css]
부트스트랩 적용으로 내용 삭제
