4번째 줄: |
4번째 줄: |
| | | |
| =상속= | | =상속= |
− | 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다. | + | 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. |
| + | |
| + | 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; |
| + | |
| + | => 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다. |
| | | |
| 일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다. | | 일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다. |
| | | |
| + | === 방법 === |
| 다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다. | | 다른 탬플릿을 넣을 공간을 지정한 후, 다른 탬플릿에서 부모 탬플릿을 상속받아 사용한다. |
− |
| |
− | === 방법 ===
| |
| *부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다. | | *부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다. |
| *{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다. | | *{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다. |
25번째 줄: |
28번째 줄: |
| !코드 | | !코드 |
| |- | | |- |
− | |부모탬플릿 만들기 | + | |부모탬플릿 만들기(전체) |
− | |가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<syntaxhighlight lang="html"> | + | |가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<syntaxhighlight lang="html+django"> |
| <!DOCTYPE html> | | <!DOCTYPE html> |
| <html lang="ko"> | | <html lang="ko"> |
| <head> | | <head> |
− | {% load static %}
| + | <!--사이트 전체에 들어가야 할 내용.--> |
− | <!-- Required meta tags -->
| + | {% block title %} |
− | <meta charset="utf-8">
| + | 부모탬플릿 내용. 상속할 땐 안나타난다. |
− | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
| + | {% endblock title %} |
− | <!-- 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> | | </head> |
| <body> | | <body> |
− | {% block content %}{% endblock content %} | + | {% block content %} |
| + | {% endblock content %} |
| </body> | | </body> |
| </html> | | </html> |
47번째 줄: |
46번째 줄: |
| 자식탬플릿의 내용이 있는데 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다. | | 자식탬플릿의 내용이 있는데 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다. |
| |- | | |- |
− | |자식탬플릿 만들기 | + | |자식탬플릿 만들기(섹션) |
| |하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.<syntaxhighlight lang="html"> | | |하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.<syntaxhighlight lang="html"> |
− | {%extends "부모.html"%} | + | {%extends "상대경로/부모.html"%} |
| + | |
| {% block title %} | | {% block title %} |
| <title>타이틀을 위해 만들어진 블록</title> | | <title>타이틀을 위해 만들어진 블록</title> |
57번째 줄: |
57번째 줄: |
| |자식탬플릿 만들기2 | | |자식탬플릿 만들기2 |
| |개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.<syntaxhighlight lang="html"> | | |개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.<syntaxhighlight lang="html"> |
− | {%extends "섹션별.html"%} | + | {%extends "상대경로/섹션별.html"%} |
| {% block content %} | | {% block content %} |
| 바디에 들어갈 내용들을 쓴다. | | 바디에 들어갈 내용들을 쓴다. |
73번째 줄: |
73번째 줄: |
| 단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다. | | 단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다. |
| | | |
− | | + | <code>include with 변수명 = 넣을객체명</code> 형태로도 사용 가능. |
− | <code>include with 변수명 = 넣을 객체명</code> 형태로도 사용 가능. | |
| [[분류:장고 탬플릿]] | | [[분류:장고 탬플릿]] |