1. extend 와 include의 이해
Django에서 extend와 include는 HTML 템플릿의 구조와 구성을 관리하는 데 사용되는 템플릿 태그입니다.
2. home 폴더에서 연습해 보기
templates/home 폴더 생성
templates/home/index.html 파일 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
안녕하세요!!!
</body>
</html>home/views.py
아래와 같이 수정
# Create your views here.
def index(request):
return render(request,"home/index.html")
아래와 같이 나오는가 확인
home/head.html 추가
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>home/header.html 추가
<div style="height: 10rem; background-color: #97E7E1; border-radius: 1rem; margin: 2rem">
해더로 사용할 부분입니다.
</div>home/footer.html 추가
<div style="height: 10rem; background-color: #97E7E1; border-radius: 1rem; margin: 2rem">
풋터로 사용할 부분입니다.
</div>이제 index.html을 수정해보자
<!DOCTYPE html>
<html lang="en">
{% include 'home/head.html' %}
<body>
{% include 'home/header.html' %}
<div style="height: 10rem; background-color: #97E7E1; border-radius: 1rem; margin: 2rem">
안녕하세요
</div>
{% include 'home/footer.html' %}
</body>
</html>
include 결론
include 태그는 템플릿 내에 다른 템플릿의 내용을 포함하는 데 사용됩니다.
3. extend 이해
home/base.html
<!DOCTYPE html>
<html lang="en">
{% include 'head.html' %}
<body>
{% include 'header.html' %}
{% block content %}{% endblock content%}
{% include 'footer.html' %}
</body>
</html>home/hollo_world.html
{% extends 'base.html' %}
{% block content %}
<div style="height: 10rem; background-color: #97E7E1; border-radius: 1rem; margin: 2rem">
<h1>블록 내 들어갈 내용 입력</h1>
</div>
{% endblock content %}home/views.py
# Create your views here.
def index(request):
return render(request,"home/hello_world.html")
결론
-
extend 태그는 다른 템플릿의 레이아웃 역할을 하는 기본 템플릿을 생성
-
다른 템플릿에서는 extend 태그를 사용하여 기본 템플릿의 구조와 레이아웃을 상속합니다. (기본이 템플릿(base.html)을 상속해서 사용한다는 의미가 가장 와닿습니다)
-
extend를 사용하기 위해 base.html에 block 설정을 해줍니다.
block의 위치는 상속 받아서 변경하고 싶은 위치에 작성합니다.
{% block %}, {% endblock %} 형식으로 입력해줍니다.block name을 입력해야 여러개의 block을 사용하는 경우 이를 구분할 수 있습니다.
https://hangbok-archive.com/development/django/%EC%9E%A5%EA%B3%A0-extend-include/
쿵스보이(얼짱뮤지션)