Chap 2. 장고 기본 요소 학습#9 (표준 HTML 과 템플릿 상속)

 

안녕하세요. 밤고래에요 :)

오늘은 표준 HTML 과 템플릿 상속을 배워보고자 합니다. 

 

2-9 표준 HTML 과 템플릿 상속 사용해 보기

지금까지 작성한 질문 목록과 질문 상세 템플릿 파일을 표준 HTML 구조가 아니다.

어떤 OS나 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면

반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다.

 

그럼 표준 HTML 구조는 어떻게 생겼을까?

다음과 같이 html, head, body 엘리먼트가 있어야하며, CSS 파일은 head 엘리먼트 안에 있어야 한다.

또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다.

 

 

 

[실습] 템플릿을 표준 HTML 구조로 바꾸기(p106)

앞에서 작성한 템플릿 파일을 표준 HTML 구조로 수정해보자.

템플릿이란 앞서 작성한 Pybo 웹사이트의 html 파일을 의미한다.

 

 

 

[프로그래밍] Chap 2. 장고 기본 요소 학습#6 (게시판 답변 등록 기능)

 

 

그런데 모든 템플릿 파일을 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복된다.

그리고 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가되면 head 엘리먼트의 내용을 수정하려고 템플릿 파일을 일일이 찾아다녀야 하는 불편함도 있다. 

장고는 이런 불편함을 해소하기 위한 템플릿 상속(extends) 기능을 제공한다. 

이번에는 표준 HTML 뿐만아니라 템플릿 상속 기능까지 사용할 것이다.

 

Step 1. 템플릿 파일의 기본 틀 작성하기

우선 템플릿 파일의 기본 틀인 base.html 템플릿을 작성하자.

모든 템플릿에서 공통으로 입력할 내용을 여기에 포함한다고 생각하면 된다.

 

 

 

body 엘리먼트에 {% block content %}와 {% endblock %} 템플릿 태그가 있다.

바로 이 부분이 이후 base.html 템플릿 파일을 상속한 파일에서 구현해야 하는 영역이 된다. 

이제 기존에 사용했던 question_list.html 템플릿을 다음과 같이 변경하자. 

 

Step 2. 질문 목록 템플릿 수정하기

질문 목록을 나타내는 question_list.html 파일을 다음과 같이 수정하자.

 

base.html 템플릿 파일을 상속받고자 {% extends 'base.html' %} 템플릿 태그를 사용했다.

그리고 {% block content %} 와 {% endblock %} 사이에 question_list.html 파일에서만 사용할 내용을 작성했다. 

이제 표준 html 구조를 갖추게 되었다. 

 

Step 3. 질문 상세 팀플릿 수정하기

question_detail.html 파일도 같은 방법으로 수정하자

 

 

Step 4. 기존 스타일 파일 내용 비우기

부트스트랩을 사용하게 되었으니 style.css 파일의 내용을 비우자.

 

 

 

여기까지 표준 HTML 과 템플릿 상속에 대해 알아보았습니다 :) 

감사합니다.