작정하고 Django 9강 -include / extends / block 구문을 이용한 뼈대 html 만들기

_·2023년 7월 31일

UDR 언더독레볼루션

작정하고 Django 강의

목록 보기

8/44

만들고자 하는 레이아웃 형태

머리, 몸통, 바닥 3가지 부분으로 구분 가능
3개의 뼈대를 만드는 과정

include 구문으로 다른 파일로 만들기

1. head 파일

head 부분은 링크 삽입, 소스 가져오기 등 나중에 여러가지 내용이 들어감
include를 이용해 head 부분이 나중에는 여러가지가 들어갈건데(링크 삽입, 소스 가져오기 등) 뼈대에서 다 보기엔 난잡하기 때문에 include 구문을 이용해서 다른 파일로 만들어줄 것

head.html 파일에서 제목은 Pragmatic으로 지정해줌

2. base 파일

base.html 파일에서는 html language를 ko로 바꾸고, 헤드 부분을 따로 include 시켜줌

레이아웃의 상, 중, 하 를 나누기 위해 body 태그 안에 div 태그(가능한 폭을 모두 가져가는 형태의 태그) 사용

※ 다중 커서 입력 : alt + 커서

<!doctype html>
<html lang="ko">
{% include 'head.html' %}
<body>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>

    <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>

    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>

</body>
</html>

div 태그가 차지하는 높이를 각각 10rem, 20rem, 10rem을 갖도록 설정 background-color, border-radius, margin 을 설정

서버 구동(python manage.py runserver)하면 이렇게 나옴

머리 부분과 바닥 부분은 항상 똑같이 그대로 유지할 것
중간에 있는 내용만 바꾸는 것이 핵심
머리, 바닥 div는 include구문을 사용해 항상 가져오도록 만들 것

3. header, footer 파일

맨 위 div는 templates 폴더 내 header.html 파일로 맨 아래 div는 footer.html파일로 만듦

<!--base.html-->
<!doctype html>
<html lang="ko">
{% include 'head.html' %}
<body>
    {% include 'header.html' %}

    <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>

    {% include 'footer.html' %}
</body>
</html>

<!-- header.html -->
<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>

<!-- footer.html -->
<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>

중간에 내용을 바꿔야 하는 몸통 부분은 extends 구문을 사용하기 위해 먼저 블럭 구문을 삽입해줘야 함
{% block content %} : content 라는 블록을 새로 만들어주는 것 그리고 {% endblock %}으로 어디까지가 end block 인지를 명시해주기

accountapp 내부에 따로 accountapp 자체의 templates들을 보관할 경로 만들기

accountapp 내부에 templates 폴더를 생성해주고 그 안에 accountapp 이라는 폴더를 만들어 이 안에다가 새로 html 파일들을 넣어줄 것

번거롭게 하는 이유?
앱 내부에 있는 template에서 html 파일을 바로 만들어버리면 accountapp 내부의 views.py에서의 'base.html'을 가져올 때 'accountapp/base.html'와 같이 어떤 앱에서 이 html 파일을 가져왔는지 가독성을 높이기 위한 사전 작업을 하는 것.

1. extends 구문 사용

accountapp 폴더 안에 extends할 html 파일을 만들 것
hello_world.html 파일을 만들고 그 안의 내용으로는 일일히 html 파일을 다 만들어줄 필요 없이 extends 구문을 사용

{% extends ''%}

이러면 'base.html' 파일을 가져오게 된다 -> 이 구문을 사용하게 되면 'base.html' 의 내용을 가져오는데 그중에 block content 내용만 우리가 바꿀 수 있게 만들어지는것이 바로 extends.

그 이후에 {% block content %} ~ {% endblock %} 사이에 마음대로 내용을 바꿀 수 있게 되고 그 사이에 아까 몸통 부분에 해당했던 div 태그의 내용을 가지고 렌더링을 하게 됨

{% extends 'base.html' %}

{% block content %}

    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
        <h1>
            testing
        </h1>
    </div>

{% endblock  %}

확인을 위해서 testing 을 h1 태그로 작성
views.py 파일의 return render 부분의 수정을 하지 않고 'base.html' 라고 두면, tempates 에 있는 base.html 을 가져오게 됨
'accountapp/hello_world.html'을 가져오도록 생성

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.

def hello_world(request):
    return render(request, 'accountapp/hello_world.html')