이전포스트
[Django] 1. 개발 환경 설정 https://wroni.tistory.com/4
[Django] 2 - 1. URL과 View https://wroni.tistory.com/5
[Django] 2 - 2. 모델 https://wroni.tistory.com/6
[Django] 2 - 3. 장고 관리자 https://wroni.tistory.com/7
[Django] 2 - 4. 조회와 템플릿 https://wroni.tistory.com/8
[Django] 2 - 5. URL과 네임스페이스, 2 - 6. 데이터 저장 https://wroni.tistory.com/9
[Django] 2 - 7. 스태틱 https://wroni.tistory.com/10
[Django] 2 - 8. 부트스트랩 https://wroni.tistory.com/11
2 - 9. 템플릿 상속
질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니었다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 웹 표준을 지키는 HTML 문서를 작성해야 한다.
1. 표준 HTML 구조
표준 HTML 구조는 html, head, body 엘리먼트가 있어야 하고, CSS 파일은 head 엘리먼트 안에 있어야 한다.
또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다.
2. 템플릿 상속
body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복된다. 그러면 CSS 파일 이름이 변변겨오디거나 새로운 CSS 파일이 추가될 때마다 모든 템릇릿 파일을 일일이 수정해야 한다.
장고는 extend 기능을 제공한다. 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.
먼저 기본 툴이 되는 base.html 템플릿을 작성하자.
파일 : C:\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">
<!-- Bottstrap 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.htlm 템플릿은 모든 템플릿이 상속해야 하는 템플릿이다. body 엘리먼트 안의 {% block content %} 와
{% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이다.
파일 : C:\projects\mysite\templates\pybo\question_list.html
{% load static %}
<link rel="stylesheet type='text/area" 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 %}를 작성.
3. style.css
부스트랩 적용으로 인해 style.css 내용을 필요 없어졌으니 기존 내용은 삭제한다.
이후에 사용할 수 있으니 파일 자체는 삭제하지 말고 내용만 삭제하자.
textarea {
width:100%;
}
input(type=submit) {
margin-top:10px;
}
# 내용 다 지우기
※ 본 내용은 django 공부 기록이며, 점프 투 장고를 참고하였습니다.
https://wikidocs.net/book/4223
점프 투 장고
**점프 투 장고 오프라인 책 출간 !! (2020.12)** * [책 구입 안내](https://wikidocs.net/105844)
wikidocs.net
'Django > Django 기초' 카테고리의 다른 글
| [Django] 3 - 1. 네비게이션바 (0) | 2021.12.02 |
|---|---|
| [Django] 2 - 10. 폼 (0) | 2021.12.01 |
| [Django] 2 - 8. 부트스트랩 (0) | 2021.11.29 |
| [Django] 2 - 7. 스태틱 (0) | 2021.11.29 |
| [Django] 2 - 5. URL과 네임스페이스, 2 - 6. 데이터 저장 (0) | 2021.11.26 |
