만들고자 하는 레이아웃 머리,몸통,바닥 3가지로 나누어짐
templates 디렉토리 내에 head.html 파일 생성
base.html 파일에서 head 부분 지우고 include 구문 작성
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
HTML
복사
head.html
<!DOCTYPE html>
<html lang="ko">
{% include 'head.html %}
<body>
Hello world!
</body>
</html>
HTML
복사
base.html
alt 누르고 커서 누르면 다중커서 가능 - 동시에 여러줄 작업가능
header.html, footer.html 파일 생성한 후 base.html에 include 구문 사용
header와 footer는 동일하게 유지
body 부분만 바뀔거임
<!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>
HTML
복사
base.html
나머지 부분은 다 재사용하면서 content 부분만 accountapp 내부에서 마음대로 설정할 수 있게 함
<!DOCTYPE html>
<html lang="ko">
{% include 'head.html' %}
<body>
{% include 'header.html' %}
{% block content %}
{% endblock %}
<div style="height : 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
</div>
{% include 'footer.html' %}
</body>
</html>
HTML
복사
base.html
accountapp 내부에 accountapp 자체의 템플릿을 보관하는 templates 디렉토리 생성
templates 디렉토리 안에 accountapp 디렉토리 생성 : 어떤 앱에서 html 파일을 가져왔는지 가독성을 높이기 위한 사전작업
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 %}
HTML
복사
block content 내용만 바꿀 수 있고 뼈대는 그대로 가져옴
views.py 파일에서 html 파일 수정하기
def hello_world(request):
return render(request, 'accountapp/hello_world.html')
Python
복사
git commit 하기