[Django] Django에서 템플릿 확장의 개념과 템플릿 확장 적용하는 방법 실습하기

[Django] Django에서 템플릿 확장의 개념과 템플릿 확장 적용하는 방법 실습하기Framework/Django2021. 1. 30. 21:55@__Evening

Table of Contents

안녕하세요

이번 시간에는 템플릿 확장에 대한 개념을 알아보고 템플릿 확장을 적용하는 방법에 대해 실습을 진행하겠습니다.

1. 템플릿 확장이란?

Django에서 템플릿 확장(Template inheritance)은 여러 개의 템플릿 파일에서 공통된 HTML 코드를 추출하여 별도의 템플릿 파일로 분리하고, 이를 상속하는 방식으로 중복된 코드를 제거하는 기능을 제공합니다.

기본적으로 템플릿 확장은 base.html 파일을 상속받아 {% block %} 템플릿 태그를 이용하여 자식 템플릿에서 해당 부분을 오버라이딩하는 방식으로 작성됩니다.

2. 템플릿 파일 생성하기(base.html, index.html)

예를 들어, base.html 파일에서는 모든 HTML 페이지에서 공통으로 사용되는 코드를 작성하고, 이를 상속받아서 {% block %} 태그를 이용하여 자식 템플릿에서 해당 부분을 오버라이딩할 수 있습니다.

<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Website{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block extrahead %}{% endblock %}
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

위의 예시에서, {% block %} 태그는 해당 부분이 자식 템플릿에서 오버라이딩될 수 있는 부분을 정의하며, endblock은 해당 부분의 마감 태그입니다. 자식 템플릿에서 이 부분을 오버라이딩하여 내용을 채울 수 있습니다.

이 때 {% load static %}는 정적 파일 사용을 위해 추가하는 부분입니다.

<!-- index.html -->
{% extends 'base.html' %}

{% block title %}My Home Page{% endblock %}

{% block extrahead %}
  <link rel="stylesheet" href="{% static 'css/index.css' %}"> # extrahead를 통해 추가로 링크 삽입 가능
{% endblock %}

{% block content %}
    <h1>Welcome to my website!</h1>
{% endblock %}

위의 예시에서, {% extends %} 태그는 base.html을 상속받는 것을 의미하며, {% block %} 태그를 이용하여 base.html의 내용을 오버라이딩하고 있습니다. 여기서 base.html은 부모 index.html은 자식입니다.

3. `base.css`와 `index.css` 파일을 생성하고 정적 파일 설정하기

# [windows]
우클릭 - 폴더 생성 - [static] - [base.css, index.css 생성]

# [linux]
mkdir static
touch base.css child.css

정적 파일을 담는 폴더인 static 폴더를 만들고 [base.css, index.css] 파일을 생성합니다.

4. Settings.py 파일에서 정적 파일 경로 설정하기

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

Settings.py 파일에 다음과 같이 정적 파일 경로를 설정해서 static 폴더에 있는 정적 파일들을 불러올 수 있게 끔 설정합니다.

템플릿 확장을 사용하면 HTML 코드의 중복을 제거하고, 유지보수를 용이하게 할 수 있습니다.

이번 시간에는 템플릿 확장에 대한 개념을 알아보고 간단하게 적용할 수 있는 샘플 코드를 알아봤습니다.

감사합니다.

'Framework > Django' 카테고리의 다른 글

[Django] Django 관리자 기능에 대해 알아보고 관리자 페이지 실습하기 (0)	2021.01.30
[Django] Django에서 Model에 대해 알아보고 Model 생성 실습하기 (0)	2021.01.30
[Django] Settings 파일 기본 설정에 대해 알아보고 Migration 및 서버 실행하기 (0)	2021.01.30
[Django] Django 설치하고 프로젝트 시작하기 (0)	2021.01.30
[Django] Django Framework에서 가상 환경 설정하고 켜고 끄는 방법 (0)	2021.01.30

@__Evening :: Good Evening

클라우드, 개발, 자격증, 취업 정보 등 IT 정보 공간

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

1. 템플릿 확장이란?

2. 템플릿 파일 생성하기(base.html, index.html)

3. `base.css`와 `index.css` 파일을 생성하고 정적 파일 설정하기

4. Settings.py 파일에서 정적 파일 경로 설정하기

'Framework > Django' 카테고리의 다른 글

티스토리툴바