view 와 엔드포인트 등에서 보여주는 여러 html 파일들이 있다. 뭔가 템플릿을 추가 할 때마다 매번 html 파일 내에 head 태그를 넣고, 메타 태그를 넣고, body 에 거의 똑같다 시피한 html 코드를 항상 복붙해 오거나 따라 쳐야 할까?
이제부터는 하나의 기준이 되는 html 파일을 만들고 그걸 기준으로 "상속" 을 사용할 것이다.
1. base.html
지금까지의 템플릿 html 파일은 register.html, login.html 이렇게 파일 두개가 있었다. 템플릿이 거의 똑같기 때문에 중복되는 코드가 많다.
base.html 파일을 만들어서 앞으로 어떤 html 파일을 만들 때 그 파일에서 base.html 을 상속해서 쓸 수 있는 기준을 만든다고 생각하면 쉽다.
이제 이 base.html 을 상속 받아서 안에 어느 영역에 채워넣어야 하는지 'base.html' 파일 안에 지정을 해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0",
shrink-to-fit=no">
<!-- <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/> -->
<link rel="stylesheet" href="/static/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
.container 에 들어가는 login, register 폼은 각각의 역할에 맞는 form 이 만들어져야 한다.
그러기 위해서는 base.html 에 그 form 이 만들어질 영역을 알려주어야 한다.
위의 코드에서 볼 수 있듯이, block content 와 endblock 으로 영역을 지정해 주었고 다른 템플릿에서 상속을 받으면 저 위치에서 새롭게 쓰여지는 내용으로 채워지게 된다.
이제 그럼 login.html 에서 base.html 을 상속받게 해보자.
2. login.html, register.html 수정
login.html 에서 base.html 에 있던 코드는 모두 삭제 했다. (vscode : cmd + k + f 는 코드 정렬)
이제 지우고 남아 있는 내용을 바로 아까 만든 base.html 에서의 "block content" 안에다 넣어야 할 것이다.
그리고 코드 상단에 다음과 같이 입력한다.
{% extends "base.html" %}
이제 이 login.html 파일은 base.html 파일을 상속 받았다.
그리고 이제 그 안에 있는 content 의 block 은 다음과 같이 채운다 라는 것을 알려준다.
{% extends "base.html" %}
{% block content %}
""" login 에 들어가는 폼 관련 등의 html 코드 입력 """
{% endblock %}
register.html 도 적용해 본다.
3. 마무리
템플릿 코드의 중복을 피하기 위해서 기준이 되는 base.html 을 만들고 거기에 내가 내용을 채울 수 있는 공간을 만들어 준다는 것이 핵심이다.
base.html 에 메타 정보를 입력하게 되면 모든 페이지에 적용할 수 있게 된다.
