Hello, pybo!

$$config title: [Django] 점프투장고 | 2-09 | 템플릿 상속 keywords: - IT - django - 점프투장고 $$ # 개요 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 표현되고, 정상 작동하도록 반드시 웹 표준을 지키는 `HTML 문서`로 작성해야 한다. 2. 템플릿 상속 1. base.html 2. question_list.html 3. question_detail.html 3. style.css # 템플릿 상속 앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해 보자. 그런데 템플릿 파일을 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복 그러면 CSS 파일명 변경시, 새 CSS 파일 추가될 시마다, 모든 템플릿 파일을 일일이 수정해야 함 장고는 이런 중복과 불편함을 해소하기 위해 `템플릿 상속(extend)` 기능을 제공한다. 템플릿 상속은 `기본 틀 템플릿`을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법 # base.html 먼저 기본 틀이 되는 base.html 템플릿을 다음처럼 작성 `base.html 템플릿` - 모든 템플릿이 상속해야 하는 템플릿 - 표준 HTML 문서의 기본 틀 body 엘리먼트 안의 `{% block content %}`와 `{% endblock %}` 템플릿 태그는 `base.html`을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다. `[파일이름: C:/projects/mysite/templates/base.html]` ```html {% load static %} Hello, pybo! {% block content %} {% endblock %} ``` # question_list.html `[파일이름: C:/projects/mysite/templates/pybo/question_list.html]` ```html {% load static %} # 삭제 # 삭제 {% extends 'base.html' %} # 추가 {% block content %} # 추가

(... 생략 ...)

{% 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`도 동일한 방법으로 수정 - `{% extends 'base.html' %}` 템플릿 태그를 맨 위에 추가 - 기존 내용 위 아래로 `{% block content %}`와 `{% endblock %}`를 작성 `[파일이름: C:/projects/mysite/templates/pybo/question_detail.html]` ```html {% load static %} # 삭제 #삭제 {% extends 'base.html' %} # 추가 {% block content %} # 추가

(... 생략 ...)

{% endblock %} # 추가 ``` ## 결과 - 템플릿 상속을 적용후 질문 목록, 질문 상세를 조회해 보자. - 브라우저에서 소스보기 기능으로 생성된 HTML을 확인 가능

{{ question.subject }}