[표준 HTML]
지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야한다.
표준 HTML 문서의 구조는 html, head, body 엘리먼트가 있어야하고, CSS 파일 링크는 head 엘리먼트 안에 있어야 한다. meta, title 엘리먼트 또한 head 엘리먼트 등이 포함되어야 한다.
[템플릿 상속]
앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정하자. 템플릿 파일들을 모두 표준 HTML 구조로 변경한다면 body 엘리먼트의 바깥 부분은 모두 같은 내용으로 중복될 것이다. 그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때 마다 모든 템플릿 파일을 하나하나 수정해야 한다.
장고는 이러한 불편함을 해소하기 위해 템플릿 상속기능을 제공한다. 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.
먼저 projects/mysite/templates/base.html 을 만들고 작성하자.
base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이 된다. body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이다.
이제 projects/mysite/templates/pybo/question_list.html 템플릿은 다음과 같이 수정하자.
원래 적혀있던
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static bbootstrap.min.css' %}">
이 두줄은 base.html 에 이미 있는 내용이라 삭제했다.
base.html 템플릿을 상속하기 위해 extends(상속) 템플릿 문법을 사용했다. {% block content %} 와 {% endblock %} 사이에 question_list.html 에서만 사용하는 내용을 작성했다. 이렇게 하면 question_list.html 은 base.html 템플릿을 상속받아 표준 HTML 문서로 바뀐다.
question_detail.html 파일도 손봐야한다.
projects/mysite/templates/pybo/question_deatail.html 파일을 수정하자.
이전과 마찬가지로 원래있던 맨위에 2줄은 base.html 에 이미 있는 내용이라 삭제했고, {% extends 'base.html' %} 로 base.html 을 상속한 후 기존 내용 위 아래로 {% block content %} 와 {% endblock %} 를 작성했다.
이제 http://localhost:8000/pybo 페이지를 열어보면 화면에 보여지는 것은 동일하지만 표준 HTML 로 작성되어있다. 이 사실을 확인하려면 맥os 사파리 기준으로
[개발자용 - 페이지 소스 보기] 버튼을 클릭하면 된다. 개발자용 버튼을 생성하는 법은 인터넷에 검색하면 나온다.
버튼을 누르면 이렇게 표준 HTML 구조로 작성된 화면을 확인할 수 있다.
[style.css]
부트스트랩을 적용했기 때문에 style.css 의 내용은 필교아 없어졌으므로 기존에 있던 내용을 모두 삭제하자. 이 파일은 이후에 부트스트랩으로 표현할 수 없는 스타일을 위해 사용할 이기 때문에 파일 자차를 삭제하지는 말고 내용만 삭제하자.
projects\mysite\static\style.css 파일의 내용을 모두 삭제하자.
'Django > 따라하는 장고' 카테고리의 다른 글
| 15. 네비게이션 바 (0) | 2022.11.04 |
|---|---|
| 14. 폼 (1) | 2022.11.03 |
| 12. 부트스트랩 (0) | 2022.10.27 |
| 11. 스태틱 디렉토리 (0) | 2022.10.25 |
| 10. 답변 등록하기 (0) | 2022.10.22 |
