"4. 장고 탬플릿 재사용"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
| (같은 사용자의 중간 판 7개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
| + | <youtube>https://www.youtube.com/watch?v=V6GEk88jhQo</youtube> | ||
==개요== | ==개요== | ||
| + | 커다란 틀은 전체 페이지에서 공유하고, 내용물만 바꾸어야 할 때, 전체 틀을 그대로 사용하는 게 편하다. 상속이라고도 하지. | ||
| + | |||
| + | == 전략 == | ||
| + | 일반적으로 웹사이트 전체를 아우르는 base.html을 두고, 앱별로 섹션을 아우르는 app.html(이 이름이 정렬했을 때 앞에 나와서 편하다.) 따위를 두어 전체적인 느낌을 유지한다. | ||
| + | |||
=상속= | =상속= | ||
| − | 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다. | + | 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. |
| + | |||
| + | 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; | ||
| + | |||
| + | => 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다. | ||
일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다. | 일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다. | ||
=== 방법 === | === 방법 === | ||
| + | 다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다. | ||
*부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다. | *부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다. | ||
*{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다. | *{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다. | ||
*자식템플릿에선 그 블록을 다 채우지 않아도 된다. | *자식템플릿에선 그 블록을 다 채우지 않아도 된다. | ||
| − | |||
일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다. | 일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다. | ||
| − | #사이트 전체의 룩앤필을 담는 base.html 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다. | + | #사이트 전체의 룩앤필을 담는 base.html. 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다. |
| − | #하위의 섹션별 스타일을 담는 섹션별 html | + | #하위의 섹션별 스타일을 담는 섹션별 html. |
#개별 페이지에 대한 템플릿. | #개별 페이지에 대한 템플릿. | ||
| − | #3에 포함될 하위기능들. | + | #3에 포함될 하위기능들.(부록) |
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+ | ||
| 22번째 줄: | 32번째 줄: | ||
!코드 | !코드 | ||
|- | |- | ||
| − | |부모탬플릿 만들기 | + | |부모탬플릿 만들기(전체) |
| − | |가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<syntaxhighlight lang="html"> | + | |가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<syntaxhighlight lang="html+django"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
<head> | <head> | ||
| − | + | <!--사이트 전체에 들어가야 할 내용.--> | |
| − | + | {% block title %} | |
| − | + | 부모탬플릿 내용. 상속할 땐 안나타난다. | |
| − | + | {% endblock title %} | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
| − | {% block content %}{% endblock content %} | + | {% block content %} |
| + | {% endblock content %} | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>블록 태그 사이에 뭘 써넣으면, 자식탬플릿으로부터 가져올 것이 없을 때 그걸 보여준다. | </syntaxhighlight>블록 태그 사이에 뭘 써넣으면, 자식탬플릿으로부터 가져올 것이 없을 때 그걸 보여준다. | ||
| − | 자식탬플릿의 내용이 있는데 | + | 자식탬플릿의 내용이 있는데 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다.(부모 탬플릿의 내용을 그대로 가져다 쓰고 조금 변형할 때 사용.) |
|- | |- | ||
| − | |자식탬플릿 만들기 | + | |자식탬플릿 만들기(섹션) |
|하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.<syntaxhighlight lang="html"> | |하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.<syntaxhighlight lang="html"> | ||
| − | {%extends "부모.html"%} | + | {%extends "상대경로/부모.html"%} |
| + | |||
{% block title %} | {% block title %} | ||
<title>타이틀을 위해 만들어진 블록</title> | <title>타이틀을 위해 만들어진 블록</title> | ||
| 54번째 줄: | 61번째 줄: | ||
|자식탬플릿 만들기2 | |자식탬플릿 만들기2 | ||
|개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.<syntaxhighlight lang="html"> | |개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.<syntaxhighlight lang="html"> | ||
| − | {%extends "섹션별.html"%} | + | {%extends "상대경로/섹션별.html"%} |
{% block content %} | {% block content %} | ||
바디에 들어갈 내용들을 쓴다. | 바디에 들어갈 내용들을 쓴다. | ||
| 70번째 줄: | 77번째 줄: | ||
단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다. | 단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다. | ||
| + | <code>include with 변수명 = 넣을객체명(넣을값)</code> 형태로도 사용 가능. | ||
| − | < | + | == 탬플릿에서 변수 지정 == |
| + | 다른 탬플릿에서 특정 변수로 사용하고 있는데, 편의상 다른 이름을 사용하고 있었을 때.. 탬플릿 활용을 위해 다음과 같은 방식으로 변수를 지정할 수 있다.<syntaxhighlight lang="html+django"> | ||
| + | {% with teacher.classroom_set.all as classroom_list %} | ||
| + | {% include "school_report/classroom/list.html" %} | ||
| + | {% endwith %} | ||
| + | </syntaxhighlight>with 태그로 닫아주는 형태이거나... 혹은 for, if 태그 안에서 with을 사용할 수 있다. | ||
[[분류:장고 탬플릿]] | [[분류:장고 탬플릿]] | ||
2022년 9월 13일 (화) 16:09 기준 최신판
1 개요[편집 | 원본 편집]
커다란 틀은 전체 페이지에서 공유하고, 내용물만 바꾸어야 할 때, 전체 틀을 그대로 사용하는 게 편하다. 상속이라고도 하지.
2 전략[편집 | 원본 편집]
일반적으로 웹사이트 전체를 아우르는 base.html을 두고, 앱별로 섹션을 아우르는 app.html(이 이름이 정렬했을 때 앞에 나와서 편하다.) 따위를 두어 전체적인 느낌을 유지한다.
3 상속[편집 | 원본 편집]
코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다.
만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다;
=> 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다.
일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다.
3.1 방법[편집 | 원본 편집]
다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다.
- 부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다.
- {% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다.
- 자식템플릿에선 그 블록을 다 채우지 않아도 된다.
일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다.
- 사이트 전체의 룩앤필을 담는 base.html. 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다.
- 하위의 섹션별 스타일을 담는 섹션별 html.
- 개별 페이지에 대한 템플릿.
- 3에 포함될 하위기능들.(부록)
| 과정 | 코드 |
|---|---|
| 부모탬플릿 만들기(전체) | 가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<!DOCTYPE html>
<html lang="ko">
<head>
<!--사이트 전체에 들어가야 할 내용.-->
{% 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%}
|
4 include[편집 | 원본 편집]
- 많은 기능을 넣다보면 코드가 복잡해져 가독성이 떨어진다. 이게 싫은 사람들은 html을 분리해 관리하면 된다. 그냥 코드를 단순화 하기 위해 완전 모듈화 해서 분리관리를 하고 싶은 이들에게 필요한 기능.
- 상속에선 부모탬플릿과 자식이 선형으로 연결되어 여러 자식의 기능을 불러오거나 여러 부모의 기능을 불러오진 못했다. 많은 탬플릿의 기능을 복합적으로 끌어와야 할 때 사용하는 기능.
- 똑같은 코드를 반복 사용해야 할 경우에도 쓰면 좋다.
4.1 방법[편집 | 원본 편집]
{% include "탬플릿명.html" %}
단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다.
include with 변수명 = 넣을객체명(넣을값) 형태로도 사용 가능.
4.2 탬플릿에서 변수 지정[편집 | 원본 편집]
다른 탬플릿에서 특정 변수로 사용하고 있는데, 편의상 다른 이름을 사용하고 있었을 때.. 탬플릿 활용을 위해 다음과 같은 방식으로 변수를 지정할 수 있다.
{% with teacher.classroom_set.all as classroom_list %}
{% include "school_report/classroom/list.html" %}
{% endwith %}
with 태그로 닫아주는 형태이거나... 혹은 for, if 태그 안에서 with을 사용할 수 있다.