[Django Study 03] Django Template - extends, include로 HTML 만들기

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[장고 Template의 extends, include 구문과 render 함수]

장고 Template에서 자주 쓰이는 구문 ⇒ extends, include

extends

미리 만들어둔 HTML 템플릿이 있는데, 이것을 가져와서 나머지 내용들을 채워나가는 방식

include

만들고 있는 html 파일에 조그만 조각들을 가져와서 템플릿에 박아 넣는 방식

⇒ extends로 바탕을 만들고, include로 내용을 채워나간다.

실습

templates폴더를 새로 생성하고 그 안에 base.html을 만든다.

accountapp/views.py파일에서 templates/base.html을 사용하기 위해 settings.py를 수정한다.

 # pragmatic/settings.py
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
         'DIRS': [os.path.join(BASE_DIR,'templates')],  # 여기 추가
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
                 'django.template.context_processors.debug',
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
             ],
         },
     },
 ]

위와 같이 DIRS에 os.path.join(BASE_DIR,”폴더이름”)을 추가해준다.

hello_world()를 수정해준다.

 #accountapp/views.py
 def hello_world(request):
     render(request, "base.html")
     #render(request, "가져오는 html 이름")

[include/extends/block 구문을 이용한 뼈대 html 만들기]

base.html에서 html의 head부분과 body 부분을 나누어 주고자 한다.

또한 body 부분에서 header/content/footer를 나누고자 한다.

head, header, footer는 내용이 거의 고정적이므로 include를 사용
content 부분은 extends를 사용한다.

<!-- templates/body.html -->
<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body style="font-family: 'NanumSquare';">

    {% include 'header.html' %}

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    {% include 'footer.html' %}

</body>
</html>

include : {% include “파일명” %} 로 입력하면 된다.
extends: {% block 블럭이름 %}을 쓰고 어디까지가 블럭인지 {% endblock %}로 나타낸다.

<!-- templates/head.html -->
<head>
    <meta charset="UTF-8">
  <title>PRAGMATIC</title>
</head>

include할 파일은 그냥 원래 html에 쓰던 것처럼 해당 부분을 작성하면 된다.

<!-- accountapp/templates/accountapp/hello_world.html -->
{% extends "base.html" %}

{% block content %}
    <h1>
            Hello World!
    </h1>
{% endblock%}

extends 하는 파일은 위와 같이 코드를 작성해야 한다.

먼저 맨 위에 {% extends "base.html" %} 를 작성한다.
그리고 {% block 블럭이름 %}과 {% endblock %} 사이에 내용을 적으면 된다.

//참고로 templates파일 안에 앱이름으로 된 파일을 하나 더 만들고 html파일을 만든 이유는, 가독성을 높이기 위함이다. (아래와 같이 쓰기 위함)

#accountapp/views.py
def hello_world(request):
    render(request, "accountapp/hello_world.html")

[출처] 작정하고 장고! Django Pinterest 따라만들기 : 바닥부터 배포까지

섹션 1. Django Tutorial (8강 ~ 9강)

https://www.inflearn.com/course/%EC%9E%A5%EA%B3%A0-%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8/dashboard

[Django Study 05] Model, DB 연동, HTTP 프로토콜(GET, POST), DB 데이터 저장 (0)	2022.04.14
[Django Study 04] Style and CSS (0)	2022.04.13
[Django Study 02] Django 시작 & Gitignore (0)	2022.04.11
[Django Study 01] Django Intro (0)	2022.04.07
[Django Study 00] Django Study 시작 (0)	2022.04.06

컴굥일지