반응형
Extends
extends:extends는 주로 모든 페이지에서 공통으로 사용되는 헤더와 푸터를 가진 기본 템플릿을 생성하고, 이를 다른 템플릿들이 상속받아 각자의 내용을 추가해 재 사용하는 것을 말한다.- 결과적으로 기본적으로 만든 템플릿을 재사용하는 것이다.
- 쉽게말해 매일 일기를 쓴다면 일기 제목과 날씨 내용은 매일 들어갈 것이다. 그 형식에다가 하루 하루의 내용을 채워나갈텐데 매번쓰는 형식을 불러오기 해서 그날의 내용만 채우는거라고 보면된다.
- 보통 홈페이지에는 제목이 모든페이지 위쪽에 보이기 마련이다. 그럼 모든 페이지에서 제목의 html을 새로 만드는게 아니라 불러오면된다.
예를 들어 기본 HTML파일의 이름을 base.html이라고 하고 이렇게 작성해보겠다.
<html>
<head>
<title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>이런 기본 HTML파일이 있다고 해보자 내가 다른 페이지에서 기본HTML 파일 위에 내용만 추가 하고 싶다고 하면 이렇게 작성한다 이 파일의 이름은 home.html파일이라고 하자.
{% extends "base.html" %} # 여기 보면 base.html 파일을 불러와 사용하고있다.
{% block title %}홈페이지 제목{% endblock %}
{% block content %}
<h1>안녕하세요, 홈페이지에 오신 것을 환영합니다.</h1>
{% endblock %}- 코드를 살펴보면 기본템플릿을 불러와 자신만의 제목과 내용을 추가하고있다.
Include
include:include는 특정 템플릿의 내용을 그대로 포함하는 데 사용된다.- 즉, 다른 템플릿 파일의 내용을 현재 위치에 삽입하는 것이다.
- 이 방법은 특정 템플릿 조각을 여러곳에서 재사용하려고 할 때 유용하다.
- 홈 페이지에 가보면 사용자가 특정 행동을 했을때 팝업창이 뜨는 것을 볼 수가 있는데 이 팝업창을 계속 코딩 한다면 번거로울 것이다.
이렇게 해보자 예를들어, alert.html파일을 만들어서
<div class="alert">
이것은 알림 메시지입니다.
</div>homl.html 파일에서 사용한다고 하면,
{% include "alert.html" %}
<h1>안녕하세요, 홈페이지에 오신 것을 환영합니다.</h1>이렇게 페이지에 삽입해 언제든 사용할 수 있다.
반응형
