1. Template이란?
-
Documentation을 참고하며 함께 공부했다.
-
Dynamic한 HTML webpage를 생성하기 위해 쓰인다고 한다. 이를 위해 Dynamic과 Static Webpage를 알아보았다.
-
Static Webpage는 Server가 즉시 HTTP Request를 받으면 저장된 HTML 문서를 HTTP Response로 반환할 수 있는 정적인 웹 페이지다. 그에 반해 별도의 프로그램을 통해 동적으로 데이터 요소 등을 HTML 문서에 추가하는 경우 Dynamic하다고 한다. 일반적으로 요즘 사이트 대부분은 Dynamic하다. 당장 웹 광고만 봐도 그때 그때 다르니까.
-
Django에서는 기존 HTML문서의 Static한 Script에 더해 Template Variable, Tag, Filter 등을 추가해 Dynamic한 HTML 문서로 렌더링해 반환한다.
2. Template의 요소들
-
Variables : Double Bracket을 사용해서 나타낸다.
render(request, template_name, context)를 통해 template page에 context가 전달되면 그 안에 있는 variable을 사용할 수 있다.{{ subject }}같은 식으로. -
Tags : Logic을 Rendering해서 안에 넣어준다. if, for, csrf_token 등에 쓰이고,
{% for subject in qustion %} ... {% endfor %}식으로 쓴다. -
Filters : variable이나 Tag를 다양하게 바꿔준다. 오늘 사용한 예시는
value="{{ form.subject.value|default_if_none:'' }}"처럼 입력값이 없으면 ''를 출력하는 filter를 사용했다. |를 통해 표시한다. -
Comment : 주석으로
{# 이렇게 #}사용한다.
3. Template Setting
-
먼저 config/settings.py의 TEMPLATES에 'DIR' 영역에 경로를 추가해줘야 한다.
'DIRS': [BASE_DIR / 'templates'], -
templates 디렉토리를 만들어준다. 공용으로 사용하는 Template은 해당 디렉토리에 바로, app별 Template은 templates/{appname} 식으로 하위 디렉토리를 만들어 관리한다.
4. Template 사용하기
-
올바르게 .html 파일을 작성한다. templates/pybo/question_detail.html을 작성했다.
-
urls.py에 path를 설정하고, views에 해당 템플릿을 사용하도록 하는 함수를 작성해 연결해준다. ex)
urlpatterns = [path('<int:question_id>/', views.detail, name='detail')] -
views.py에 해당 요청을 처리하도록 함수를 만든다. 위에 int형의 question_id가 매개변수로 들어오므로, 이를 request와 함께 받는다. 또한 return할 때, 위에서 작성해둔 템플릿의 이름을 작성한다.
context = {'question': question},render(request, 'pybo/question_detail.html', context)
5. Template에 Static Files 사용하기
-
Static Files란 Django에서 웹을 만드는 데에 필요한 추가적인 파일들을 일컫는다. 예시로는 CSS, JS, image 등이 있다.
-
config.py에
STATICFILES_DIRS = [BASE_DIR / 'static']을 추가해주고, base 경로에 static 디렉토리를 만들어준다. -
load static 태그를 통해 템플릿에 적용이 가능하다. 다음과 같다.
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">- Bootstrap의 css를 이용해서 style을 구성했다.
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.cs' %}">로 변경하고, Template의 구성요소들의 class를 잘 설정해 좀 더 깔끔하게 화면을 구성했다.
6. Template 상속
- html표준은 다음과 같이 구성된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">
<title>Hello, Pybo!</title>
</head>
<body>
</body>
</html>-
이런 Base구조를 두고 Template은 Body 내부에서만 변경되는 것이 일반적이므로, 이를 상속해서 많이 사용한다. base.html을 먼저 구성한다. 위에
{% load static %}을 추가하고, href를 바꿔주고, body안에{% block content %}``{% endblock %}을 넣어준다. -
이후 template 파일에 위 아래로 다음 코드를 추가하면, 상속된다.
{% extends 'base.html' %}
{% block content %}
<!-- 내용 -->
{% endblock %}