링크
이 페이지의 내용 정리 위캔입니다.
완성 소스 깃허브
템플릿 상속
- 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하기 위해 웹 표준을 지키는 HTML 문서를 작성해야 한다.
표준 HTML 구조
- 표준 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>
(... 생략 ...)
</body>
</html>
- 표준 HTML문서의 구조는 위처럼 html, head, body 엘리먼트가 있어야 한다.
- css 파일은 head 엘리먼트 안에 있어야 한다.
- head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다.
템플릿 상속
- 템플릿 파일을 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복된다.
- 그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 한다.
- 장고는 이런 중복과 불편함을 해소하기 위해 템플릿 상속(extend) 기능을 제공한다.
- 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다.
- base.html
- 기본 틀이 되는
base.html 템플릿을 작성한다.
- 경로 :
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">
<!-- 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>
- 에디터 창의
<!doctype html> 부분에 오류표시가 나타나도 무시한다.
base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML문서의 기본 틀이 된다.- body 엘리먼트 안의
{% block content %}와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다.
- question_list.html
- 경로 : ...templates\pybo\question_list.html
<!-- 삭제
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
-->
# 추가
{% entends 'base.html' %}
{% block content %}
<div class="container my-3">
...
</div>
# 추가
{% endblock %}
- 상단의 두 줄은 이미 있는 내용이므로 삭제했다.
base.html 템플릿을 상속하기 위해 {% extends 'base.html' %}처럼 extends 템플릿 문법을 사용했다.{% block content %}와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용을 작성했다.
- question_detail.html
- 2번과 같은 방법으로 수정한다.
- 경로 :
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 %}
style.css
- 부트스트랩의 적용으로 인해
style.css의 내용은 필요가 없어졌으므로 삭제한다.
- 이 파일은 이후 부트스트랩으로 표현할 수 없는 스타일을 위해 사용하므로 내용만 삭제한다.
/*textarea {
width: 100%;
}
input[type=submit]{
margin-top: 10px;
}*/
