2021년 5월 25일 (화) 18:58 판

1 개요

커다란 틀은 전체 페이지에서 공유하고, 내용물만 바꾸어야 할 때, 전체 틀을 그대로 사용하는 게 편하다.

2 상속

코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다.

일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다.

다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다.

2.1 방법

부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다.
{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다.
자식템플릿에선 그 블록을 다 채우지 않아도 된다.

일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다.

사이트 전체의 룩앤필을 담는 base.html. 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다.
하위의 섹션별 스타일을 담는 섹션별 html.
개별 페이지에 대한 템플릿.
3에 포함될 하위기능들.(부록)

과정

코드

부모탬플릿 만들기

가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.

<!DOCTYPE html>
<html lang="ko">
<head>
    {% load static %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. -->
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    {% block title %}부모탬플릿 내용. 상속할 땐 안나타난다.{% endblock title %}
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>

블록 태그 사이에 뭘 써넣으면, 자식탬플릿으로부터 가져올 것이 없을 때 그걸 보여준다.

자식탬플릿의 내용이 있는데 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 {{block.super}}를 넣는다.

자식탬플릿 만들기

하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.

{%extends "부모.html"%}
{% block title %}
<title>타이틀을 위해 만들어진 블록</title>
{% endblock title%}

자식탬플릿 만들기2

개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.

{%extends "섹션별.html"%}
{% block content %}
바디에 들어갈 내용들을 쓴다.
{% endblock content%}

3 include

많은 기능을 넣다보면 코드가 복잡해져 가독성이 떨어진다. 이게 싫은 사람들은 html을 분리해 관리하면 된다. 그냥 코드를 단순화 하기 위해 완전 모듈화 해서 분리관리를 하고 싶은 이들에게 필요한 기능.
상속에선 부모탬플릿과 자식이 선형으로 연결되어 여러 자식의 기능을 불러오거나 여러 부모의 기능을 불러오진 못했다. 많은 탬플릿의 기능을 복합적으로 끌어와야 할 때 사용하는 기능.
똑같은 코드를 반복 사용해야 할 경우에도 쓰면 좋다.

3.1 방법

{% include "탬플릿명.html" %}

단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다.

include with 변수명 = 넣을 객체명 형태로도 사용 가능.

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
+커다란 틀은 전체 페이지에서 공유하고, 내용물만 바꾸어야 할 때, 전체 틀을 그대로 사용하는 게 편하다.
 =상속=
 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다.
 일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다.
+다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다.
 === 방법 ===
@@ 10번째 줄: / 14번째 줄: @@
 *{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다.
 *자식템플릿에선 그 블록을 다 채우지 않아도 된다.
 일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다.
-#사이트 전체의 룩앤필을 담는 base.html 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다.
+#사이트 전체의 룩앤필을 담는 base.html. 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다.
-#하위의 섹션별 스타일을 담는 섹션별 html
+#하위의 섹션별 스타일을 담는 섹션별 html.
 #개별 페이지에 대한 템플릿.
-#3에 포함될 하위기능들.
+#3에 포함될 하위기능들.(부록)
 {| class="wikitable"
 |+
@@ 35번째 줄: / 38번째 줄: @@
      <!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. -->
      <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
-     {% block title %}{% endblock title %}
+     {% block title %}부모탬플릿 내용. 상속할 땐 안나타난다.{% endblock title %}
 </head>
 <body>
@@ 42번째 줄: / 45번째 줄: @@
 </html>
 </syntaxhighlight>블록 태그 사이에 뭘 써넣으면, 자식탬플릿으로부터 가져올 것이 없을 때 그걸 보여준다.
-자식탬플릿의 내용이 있는데, 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다.
+자식탬플릿의 내용이 있는데 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다.
 |-
 |자식탬플릿 만들기

"4. 장고 탬플릿 재사용"의 두 판 사이의 차이