작정하고 장고 8강 - 장고 Template extends include 구문, render : Django로 Pinterest 따라하기!
Django Templates에서 자주 쓰이는 구문 extends / include
- extends
- 구역을 나눠 미리 만든 html을 가져와서 블럭을 채워 나간다는 느낌
- include
- 만들고 있는 html에 블럭을 가져온다는 느낌
- extends로 바탕을 만들고 include로 내용을 채워 가져다 붙인다.
Django Templates 사용하기
- 먼저, 프로젝트 디렉토리 안에 ‘templates’ 디렉토리를 만들고, 그 안에 ‘base.html’을 만들어보자.
- 이 템플릿들은 나중에 views.py에서 response로 사용자에게 뿌려질 것이다.
- accountapp/views.py 의 hello_world 뷰를 다음과 같이 바꿔보자.
#in accountapp/views.py
from django.shortcuts import render
def hello_world(request):
return render(request, 'base.html')- 서버를 구동시킨 후, 127.0.0.1/accountapp/hello_world 에 접속하면 오류가 뜰 것이다.
- 이는 templates 디렉토리의 경로 지정을 안해서 생기는 오류로, mysite/settings.py의 TEMPATES 부분을 다음과 같이 바꿔주자.
#in mysite/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’ 부분에 경로를 지정해서 찾을 수 있게 한다.
- 저장하고 다시 새로고침을 해보면 정상적으로 response를 받을 수 있다.
include를 이용하여 템플릿 분리, 재사용하기
- 먼저, templates 디렉토리 내에 ‘head.html’을 만들어 ‘base.html’의 head 부분을 잘라내 붙인다.
- 다음으로 ‘base.html’에 include 를 이용하여 다음 구문을 적어준다.
- {% include “head.html” %}
- ‘header.html’과 ‘footer.html’ 도 만들어 다음과 같은 div 태그를 만들어준다.
<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; "> </div> - ‘base.html’에는 다음을 적어주면 된다.
<body>
{% include 'header.html' %}
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
</div>
{% include 'footer.html' %}
</body>- 모두 완성이 되고 새로고침을 하면 3부분의 영역으로 나뉜 것을 볼 수 있다.
- 여기서 ‘base.html’ 가운데의 div를 지우고 대신 다음을 추가해준다.
<body> {% include 'header.html' %} {% block content %} {% endblock %} {% include 'footer.html' %} </body> - accountapp 디렉토리 내에 ‘templates/accountapp/’ 디렉토리를 만들어준다.
- views.py에서 어떤 앱에서 템플릿을 가져온건지 네임스페이스를 명시해주기 위해서 필요한 절차이다.
- 만든 ‘accountapp/templates/accountapp/’ 디렉토리 안에 extends할 ‘hello_world.html’을 만든다.
{% extends 'base.html'}
{% block content %}
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
<h1>testing</h1>
</div>
{% endblock %}- views.py에서는 다음과 같이 렌더링을 할 수 있게 해준다.
def hello_world(request):
return render(request, 'accoutapp/hello_world.html')- 이쯤되면 include와 extends를 어떻게 써야할지 감이 올 것이다.
- include는 코드 전체를 가져와서 모듈, 함수처럼 작은 단위로 재사용할 때 용이하다.
- extends는 html 전체를 가져오지만 block을 통해 덧붙이는 것이 가능하다.
header와 footer 꾸미기
base.html
<!DOCTYPE html>
<html lang="ko">
{% include "head.html" %}
<body>
{% include 'header.html' %}
<hr>
{% block content %}
{% endblock %}
<hr>
{% include 'footer.html' %}
</body>
</html>header.html
<div style="text-align: center; margin: 2rem 0;">
<div>
<h1>My site</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>footer.html
<div style="text-align: center; margin-top: 2rem;">
<div style="font-size: .6rem;">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h6 style="margin-top: 1rem;">My site</h6>
</div>
</div>- 별건 없고 base.html에는 hr 태그로 구분선을 넣어주었고, header와 footer에는 제목과 여러 메뉴를 가운데 정렬과 여백을 설정해주었다.
bootstrap 이용하기
- header.html이 아닌 head.html에 다음과 같이 링크를 추가해주는 것만으로 bootstrap을 사용할 수 있다.
<head>
<meta charset="UTF=8">
<title>title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>폰트 적용하기
- https://fonts.google.com 에서 원하는 폰트를 검색할 수 있다.
- 적절한 폰트를 골라 select this style 버튼을 눌러 link 태그를 복사하여 head.html에 붙여넣으면 된다.
<head>
<meta charset="UTF=8">
<title>title</title>
<!-- bootstrap link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
</head>- 폰트를 적용하는 방법은 아래와 같이 style에 font-family 속성을 이용하면 된다.
header.html
<div style="text-align: center; margin: 2rem 0;">
<div>
<h1 style="font-family: 'Zen Dots'; cursive;">My site</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>footer.html
<div style="text-align: center; margin-top: 2rem;">
<div style="font-size: .6rem;">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h6 style="margin-top: 1rem; font-family: 'Zen Dots'; cursive;">My site</h6>
</div>
</div>여기까지 완성된 화면
공부