Django

장고 템플릿(Template) 언어

장고 템플릿 언어

  • 지난 토픽에서 {% load static %}와 같이 사용하였는데, 이는 이번 토픽에서 공부할 템플릿 태그를 활용한 것입니다.
  • 장고 템플릿 언어는 장고로 개발할 시 html 템플릿에서 사용할 수 있는 특별한 규칙 또는 문법이고, 
    템플릿 변수, 템플릿 필터, 템플릿 변수, 템플릿 코멘트 등이 있습니다.

 

 

 

 

템플릿 변수

  • 템플릿 변수는 {{ }}로 구성되어 있습니다.
  • 다음 예제를 보면서 템플릿 변수가 무엇인지 알아보도록 합시다.
{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

 

  • 위의 예제는 장고 공식 문서에 나와있는 예제입니다.
  • {{ section.title }}와 같이 사용하는 모습을 볼 수 있습니다.
  • 이는 나중에 다룰 부분인데, 뷰에서 템플릿으로 컨텍스트(context)를 전달할 수 있습니다.
    즉, 함수에서 html 문서로 어떠한 객체를 보낼 수 있다는 것입니다.
    {{ section.title }}와 같이 보냈다면, 뷰에서는 'section'이라는 객체를 html 문서로 보냈을 것이고, 그 'section'이라는 객체 안에는 'title'이라는 속성을 가지고 있을 것입니다.
     
  • 즉, 장고에서는 장고 템플릿 변수를 사용하여 html 문서 상에서도 어떠한 객체의 속성들에 접근할 수 있고, 이를 출력할 수 있도록 지원합니다.

 

 

 

 

템플릿 필터

  • 템플릿 변수의 값을 특정 형식으로 변환할 때 사용하고, 형식은 템플릿 변수 다음에 바('|')를 그은 다음 적용하고자 하는 필터를 명시합니다.
  • 위의 예제에서 봤을 때, {{ story.headline | upper }}의 'upper'와 같은 것들을 말합니다.
    'upper'라고 명시하였으므로, 'story.headline'의 값을 대문자 형식으로 변환하게 됩니다.

 

 

 

 

 

템플릿 태그

  • 템플릿 태그는 {% %}로 구성되어 있습니다.
  • 이전 토픽에서 사용하였던 {% load static %}와 같이 사용할 수도 있고, 위의 예제에서 볼 수 있듯이 if문 또는 for문와 같이 흐름을 제어할 수 있도록 작성할 수도 있습니다.
  • HTML 문서는 프로그래밍 언어가 아니고 마크업 언어이기 때문에 단지 문서를 웹에서 띄워주는 역할을 하는 것이라고 배웠습니다. 그렇기 때문에 HTML 자체는 프로그래밍적 로직을 구현할 수 없습니다만 if문, for문와 같은 템플릿 태그를 사용한다면 가능할 수 있습니다.
    따라서 앞에서 배웠던 템플릿 변수와 템플릿 태그를 활용한다면 간단한 처리도 가능하게 됩니다.
     
  • {% extends %}와 같이 단독으로 사용할 수 있는 템플릿 태그들도 있지만, {% if %} 처럼 뒤에 {% endif %} 템플릿 태그를 반드시 닫아주어야 하는 것들도 있습니다.

 

 

 

 

 

템플릿 코멘트

  • 말 그대로 HTML 문서 상에서 코멘트가 필요할 때 사용합니다.
  • 이는 주석과 비슷한 역할을 하고, 이는 장고로 개발할 시 웹 브라우저에 의해 해석되어 출력되지 않습니다.
  • 장고에서는 두 가지의 코멘트 형식을 제공합니다.
    1. {# #}
    2. {% comment %}
        {% endcomment %}

 

  • 1번 형식은 한 줄을 코멘트할 때 사용하고, 2번은 여러 줄을 코멘트할 때 '코멘트 태그' 사이에 코멘트를 적어주면 됩니다.

 

 

 

 

댓글

댓글 본문
  1. 카라멜팝콘
    좋은 강의 감사합니다!
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기