템플릿 상속이란?
html 문서 중 기본 뼈대가 되는 문서를 기본 템플릿으로 정하고, 이는 공통의 코드이므로 다른 문서에서 기본 템플릿의 코드가 필요하면 상속하여 가져다 쓰는 것.
-
base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 틀을 갖춘 문서가 된다.
-
기본이 되는 템플릿을 'base.html'로 정한다.
1. templates 폴더에 base.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>
<div class="navbar">
모든 페이지에 공통으로 들어갈 요소
</div>
{% block content %}
// base.html을 상속한 템플릿에서 구현해야 하는 영역
{% endblock %}
</body>
</html>-
body태그의{% block content %} {% endblock %}는
base.html을 상속한 템플릿에서 구현해야 하는 영역이 된다. -
즉,
block외의 모든 요소들은base.html을 상속한 템플릿들에서 공통적으로 보여지게 된다. -
head태그의 메타데이터도 상속 받기 때문에 이를 이용해 부트스트랩 CDN을 모든 템플릿에서 일일이 다운받지 않고 사용할 수 있다.
2. home.html 에서 상속
{% extends 'base.html' %}
{% block content %}
<div>
각 페이지에만 존재하는 요소들.
</div>
{% endblock %}-
각 html 파일 최상단에
base.html을 상속 받는다는 것을 명시해준다{% extends 'base.html' %}
주의 👀 extends는 항상 파일 최상단에 위치해야한다! 안그럼 에러남!
3. 참고
삽질의 기록들 👨💻