어떤 기능을 위해 필요한가?
템플릿을 상속하는 이유는 다양하겠지만 주로 상단 메뉴바나 고정된 header와 footer를 편리하게 구현하기 위해 사용한다.
웹 페이지 상단에 들어갈 메뉴바를 구현하고자 한다면 템플릿 상속에 대해 알아보자. 생각보다 간단하다
간단한 정의
템플릿 상속은 해당 사이트에 대한 모든 일반적인 요소들을 포함한 기본 “스켈레톤(skeleton)” 템플릿을 생성하도록 하고 자식 템플릿은 기본 템플릿을 오버라이드(override)할 수 있는 blocks 을 정의한다.
코드를 보는게 더 쉽다.
기본 템플릿 (layout.html)
layout.html
<!DOCTYPE HTML>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>Dangole</title>
</head>
<body>
<header>
<nav>
<a href="/">HOME</a>
<a href="/">먹방리스트</a>
<a href="/form">등록하기</a>
<a href="/">내 단골보기</a>
</nav>
<hr>
</header>
<main role="main">
<!-- Main content block -->
{% block content %}{% endblock %}
</main>
</body>
</html>이 코드를 실행시키면 다음과 같은 상단 바가 만들어진다.
layout.html 이라 부를 이 팀플릿은 간단한 두개의 칼럼을 가진 페이지로 사용할 간단한 HTML 스켈레톤 문서를 정의한다. 내용의 빈 블럭을 채우것이 “자식” 템플릿의 일이다:
기본 템플릿에는 어느 화면으로 이동하든 같은 자리에 그대로 넣어줄 html코드를 구현한다. 여기서 빠진 부분을 자식템플릿에서 구현해 줄 것이다.
block 태그가 하는 전부는 템플릿 엔진에 자식 템플릿이 템플릿의 block 태그를 오버라이드할 수 도 있다라고 알려준다.
자식템플릿이 들어갈 자리에 {% block %} 태그를 붙여준다.
위 코드에서는 {% block content %}{% endblock %} 으로 정해놓은 자리에 자식템플릿이 들어갈 것이다.
자식 템플릿
index.html
{% extends 'layout.html' %}
{% block content %}
<div align="center">
<img src="{{ url_for('static', filename='main_title.jpg') }}"/>
<h1>메인페이지</h1>
<div>
<p>한정서</p>
<p>
DAY/ 날짜/ 구현할 기능 --> 필요한 공부
</p>
<p>
Day1/ 2020-06-08 10:43pm/ header 메뉴 만들기,html 구조 만들기 --> flask를 이용한 html 상속기능
</p>
<p>
Day2/ 2020-06-0/ 유튜브 영상 크롤링해서 화면에 띄우기
</p>
</div>
</div>
{% endblock %}이미 눈치챘겠지만 여기서 {% extends 'layout.html' %}가 핵심이다.
자식 템플릿 상단에 layout.html을 확장한다고 알려준다.
기본 템플릿에서 표시해놨던 {% block content %}{% endblock %} 사이에 index.html 페이지의 html을 작성하면 된다.
같은 방법으로 form.html도 작성해보자
form.html
{% extends 'layout.html' %}
{% block content %}
<div>
<h1>등록하기</h1>
# 가게명 : <input type="text"/><br><br>
# 리뷰:<br><textarea rows=5 cols="50"></textarea>
</div>
{% endblock %}화면 출력
index.html
form.html
상단에 고정된 메뉴바가 생성된 것을 확인할 수 있다.
페이지 이동이 가능해졌다(●'◡'●)
마치며
혹여 잘못된 정보가 있을 시 댓글로 알려주신다면 꾸벅 감사인사드립니다. 관련 내용에 대한 덧붙임 환영합니다.
🧐출처 및 참고자료 :
flask-docs : https://flask-docs-kr.readthedocs.io/ko/latest/patterns/templateinheritance.html
flask로 만드는 블로그:https://opentutorials.org/module/3669/22003
