django | 12. 표준 HTML과 템플릿 상속

sojung·2021년 6월 17일
0

django

목록 보기
13/21
post-thumbnail

기본설정

# settings.py

...
TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'djangoMaster', 'templates')],
        ...
    },
]
...
29 ALLOWED_HOSTS = ['*']
...
108 LANGUAGE_CODE = 'ko-kr'
...
110 TIME_ZONE = 'Asia/Seoul'
...
116 USE_TZ = False

템플릿을 표준 HTML 구조로 바꾸기  

템플릿을 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복된다. 그리고 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가되면 head 엘리먼트의 내용을 수정하려고 템플릿 파일을 일일이 찾아다녀야 하는 불펴함도 있다.
장고는 이런 불편함을 해소하기 위한 템플릿 상속(extends) 기능을 제공한다. 여기서는 단순히 템플릿을 표준 HTML 구조로 바꾸는 것이 아니라 템플릿 상속 기능까지 사용할 것이다.

base.html 생성하고 상속하기

템플릿 파일의 기본 틀을 작성한다.

1. Starter template 가져오기

djangoMaster>templates>base.html 파일을 생성하고, Bootstrap에서 starter template을 가져와 base.html에 복사를 해준다.
Starter template

2. base.html에 block 만들어주기

# djangoMaster>templates>base.html

<!doctype html>
<html lang="ko"> <!-- en로 되어있는데 ko로 바꿔줬지만 굳이 바꾸지 않아도 된다. -->

<head>
  ...
</head>

<body>
  <!-- 기본 템프릿 안에 삽입될 내용 START -->
  {% block content %}
  {% endblock %}
  <!-- 기본 템플릿 안에 삽입될 내용 END -->
</body>

</html>

{% block content %}{% endblock %}, 이 템플릿 태그 사이에 우리가 원하는 HTML 파일이 들어간다. 따라서 base.html 템플릿 파일을 상속한 파일에서 구현해야 하는 영역이 된다.

3. base.html 상속하기

<!-- home/templates/question_list.html -->

{% extends 'base.html' %} <!-- base.html 템플릿 상속 -->
{% block content %} <!-- 이 HTML에서만 사용할 내용을 작성 -->
<h1>질문 리스트 보기</h1>

...

<p>질문이 없습니다.</p>
{% endif %}

{% endblock %} <!-- {% block content %}와 짝꿍 -->

{% extends 'base.html' %}을 가장 위에 작성해야 한다.

<!-- home/templates/question_detail.html -->

{% extends 'base.html' %}
{% block content %}

<h1>{{ a_question.subject }}</h1>
<div>{{ a_question.content }}</div>

...

{% endblock %}
profile
걸음마코더

0개의 댓글