수학과의 좌충우돌 프로그래밍

[Django] 템플릿 언어에 대해 알아보자. 본문

웹프로그래밍/Django

[Django] 템플릿 언어에 대해 알아보자.

ssung.k 2019. 2. 14. 00:13

안녕하세요  강민성입니다.


이번에는 템플릿 언어에 대해서 알아보도록 하겠습니다.




템플릿 언어에 대해서 알아보자




먼저 템플릿 언어가 무엇인지 부터 알아봅시다.


템플릿 언어란 파이썬 변수 및 문법을 html 안에서 쓸 수 있도록


장고에서 제공해주는 언어입니다.


그렇게 때문에 html 와도 다르고 파이썬과도 조금 다릅니다.


하지만 직관적으로 언어가 구성되어 있고 어렵지 않기 때문에 함께 알아보도록 합시다.




변수


변수를 템플릿 언어로 쓰기 위해서는 {{ 변수 }} , 다음과 같은 형태로 표현합니다.


일반적인 변수들과 같이 띄어쓰기는 허용이 안되며 _ 와 대소문자를 이용해서 표현을 해줍니다.


또한 ' . ' 을 이용해서 변수의 속성으로 접근할 수 있습니다.


예들 들면 blog 라는 변수의 title 속성으로 접근하기 위해서는


{{ blog.title }} 다음과 같이 표현합니다.




필터


필터로 인해서 변수에 여러가지 효과를 줄 수 있습니다.


필터는 | (파이프) 를 이용해서 적용할 수 있습니다.


필터 레퍼런스


위의 링크에서 30개 정도의 필터를 보실 수 있을 겁니다.


30개를 모두 설명할 수는 없고 대표적으로 한 가지만 설명 드리도록 하겠습니다.


length


이름에서도 알 수 있듯이 값의 길이를 반환합니다.


문자열이나 리스트 등 길이가 있는 자료형에 대해서


{{ 변수 | length }} 


다음과 같이 사용합니다.




태그


태그는 {% tag %} 다음과 같은 모양을 하고 있습니다.


마찬가지로 이 역시 


태그 레퍼런스


위의 링크를 통해서 확인할 수 있습니다.


마찬가지로 몇 가지만 알아보도록 하겠습니다.


제일 많이 쓰는 건 아무래도, 반복문과 제어문이겠죠.


반복문, for


{% for blog in blog_list %}


<p>{{ blog.title }}</p>


{ % endfor %}

제어문 if


{% if blog_list %}


<p>게시물의 수 : {{ blog_list | length }}</p>


{% else %}


<p>게시물이 없습니다.</p>



주석


탬플릿에서 한 행을 주석 처리하기 위한 구문은 {#   #} 입니다.


이 주석은 한 줄에 밖에 적용이 안되고


여러 줄에 걸쳐서 주석을 적용하기 위해서는


{% comment %}    {% endcomment %}


사이에 적어주어야합니다.


주석은 그리 어렵지 않으니 넘어가도록 하겠습니다.




템플릿 상속


이 상속 덕분에 프로젝트를 진행하면서 html 파일들을 쉽고 편하게 관리할 수 있습니다.


예를 들면 메뉴바를 생각해봅시다.


다음의 naver sports 의 화면입니다.



화면 상단을 보게 되면 각 종목이 나와있고 그 종목의 상세정보를 볼 수 있는


네이게이션 바가 있습니다.


이 네이게이션 바를 각 화면마다 똑같이 넣어준다면 굉장히 비효율적일 겁니다.


이 때 사용하는 것이 바로 템플릿 상속입니다.


예제를 통해 살펴보겠습니다.


다음과 같은 내용의 'base.html' 을 만들었습니다.


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock%}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
cs


지금은 예제다보니 최소한의 내용만 넣었지만


실제로는 다른 html 파일들에서 겹치는 부분을 최대한 넣어주는게 더 효율적일 것 입니다.


코드를 보시면 


{%  block %} { % endblock %} 


이 들어간 부분을 찾으실 수 있을 겁니다.


다른 html 파일이 base.html 을 상속 받을 시, 


이 부분에는 자기 파일의 내용을 채워서 가져가게 됩니다.


이번에는 'basketball.html' 을 만들어 보겠습니다.


1
2
3
4
5
6
7
{% extends "base.html" %}
 
{% block title %}basketball{% endblock %}
 
{% block content %}
<!-- 농구기사들을 내용으로 넣으면 될 것입니다. -->
{% endblock %}
cs


매 위에 extends 를 통해서 어떤 html을 상속받을지를 결정해줍니다.


다음으로는 부모 html 에 있는 block들과 대응시켜


그 안에 내용을 써주면 이 내용이 부모 html 의 block 안으로 들어가서


화면에 나오게 됩니다.




마무리



지금까지 템플릿 언어에 대해서 알아보았습니다.


프로젝트를 하는데 있어 이를 모르는 상태에서는


제한된 기능밖에 구현 하지 못할 것 입니다.


이도 잘 활용하시길 바랍니다 :)

저작자표시

'웹프로그래밍 > Django' 카테고리의 다른 글

[Django] 05. queryset 과 method  (6) 2019.02.24
[Django] 04. model 과 admin  (6) 2019.02.14
[Django] 03. 단어 수 세는 프로젝트  (4) 2019.02.13
[Django] 02. Django 시작, Hello World 출력  (5) 2019.02.13
[Django] 01. 기본환경셋팅, 가상환경 만들기  (9) 2019.02.13
'웹프로그래밍/Django' Related Articles more
Comments