WeniVooks

검색

Django 베이스캠프

템플릿 태그 추가 설명

1. 템플릿 태그

앞서 살펴본 것처럼 템플릿 태그는 Django에서 HTML 페이지에 파이썬 코드와 데이터를 넣을 수 있게 해주는 특별한 기능입니다.

1.1 간단한 예제

간단한 예제를 만들어 살펴보도록 하겠습니다. 아래 코드를 복사해서, 작업할 폴더의 터미널에 shift + insert를 하여 붙여넣기를 해주세요. 저는 Window를 사용하므로 앞으로는 .\venv\Scripts\activate를 사용하도록 하겠습니다. 마지막 코드에서는 enter를 입력해 주어야 합니다.

mkdir 02_5_template_tag
cd 02_5_template_tag
python -m venv venv
.\venv\Scripts\activate  # Windows
source venv/bin/activate  # macOS/Linux
pip install django
django-admin startproject config .
python manage.py migrate
mkdir 02_5_template_tag
cd 02_5_template_tag
python -m venv venv
.\venv\Scripts\activate  # Windows
source venv/bin/activate  # macOS/Linux
pip install django
django-admin startproject config .
python manage.py migrate

아래 views에는 사용자 정보와 게시글 정보, 숫자 리스트가 있습니다.

# urls.py
from django.urls import path
from django.shortcuts import render
from datetime import datetime
 
def example_view(request):
    context = {
        'user': {
            'name': '홍길동',
            'email': 'hong@example.com',
            'age': 25,
        },
        'posts': [
            {'title': '첫 번째 글', 
            'content': '안녕하세요.\n첫 번째 글입니다.', 
            'date': datetime(2023, 7, 1)},
            {'title': '두 번째 글', 
            'content': '반갑습니다.\n두 번째 글입니다.', 
            'date': datetime(2023, 7, 15)},
            {'title': '세 번째 글', 
            'content': '안녕히 가세요.\n세 번째 글입니다.', 
            'date': datetime(2023, 7, 30)},
        ],
        'numbers': list(range(1, 11)),
    }
    return render(request, 'example.html', context)
 
urlpatterns = [
    path('example/', example_view),
]
# urls.py
from django.urls import path
from django.shortcuts import render
from datetime import datetime
 
def example_view(request):
    context = {
        'user': {
            'name': '홍길동',
            'email': 'hong@example.com',
            'age': 25,
        },
        'posts': [
            {'title': '첫 번째 글', 
            'content': '안녕하세요.\n첫 번째 글입니다.', 
            'date': datetime(2023, 7, 1)},
            {'title': '두 번째 글', 
            'content': '반갑습니다.\n두 번째 글입니다.', 
            'date': datetime(2023, 7, 15)},
            {'title': '세 번째 글', 
            'content': '안녕히 가세요.\n세 번째 글입니다.', 
            'date': datetime(2023, 7, 30)},
        ],
        'numbers': list(range(1, 11)),
    }
    return render(request, 'example.html', context)
 
urlpatterns = [
    path('example/', example_view),
]

templates 폴더를 최상단 디렉토리 아래 만들고 example.html 파일을 생성하고 아래 코드를 입력해주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django 템플릿 태그 예시</title>
</head>
<body>
    <h1>Django 템플릿 태그 예시</h1>
 
    <h2>1. 변수 출력</h2>
    <p>이름: {{ user.name }}</p>
    <p>이메일: {{ user.email }}</p>
 
    <h2>2. 조건문</h2>
    {% if user.age >= 20 %}
        <p>{{ user.name }}님은 성인입니다.</p>
    {% else %}
        <p>{{ user.name }}님은 미성년자입니다.</p>
    {% endif %}
 
    <h2>3. 반복문</h2>
    <ul>
    {% for post in posts %}
        <li>
            <h3>{{ post.title }}</h3>
            <p>{{ post.content|linebreaks }}</p>
            <small>작성일: {{ post.date|date:"Y년 m월 d일" }}</small>
        </li>
    {% empty %}
        <li>게시글이 없습니다.</li>
    {% endfor %}
    </ul>
 
    <h2>4. 필터 사용</h2>
    <p>첫 번째 글 내용 (5단어): {{ posts.0.content|truncatewords:5 }}</p>
    <p>첫 번째 글 내용 길이: {{ posts.0.content|length }}</p>
 
    <h2>5. forloop 변수</h2>
    <ul>
    {% for number in numbers %}
        <li>
            {{ forloop.counter }}번째 숫자: {{ number }}
            {% if forloop.first %}(첫 번째){% endif %}
            {% if forloop.last %}(마지막){% endif %}
        </li>
    {% endfor %}
    </ul>
 
    <h2>6. with 태그</h2>
    {% with total=numbers|length %}
        <p>numbers 리스트의 길이: {{ total }}</p>
    {% endwith %}
 
    <h2>7. lorem 태그</h2>
    {% lorem 2 p %}
 
    <h2>8. now 태그</h2>
    <p>현재 날짜 및 시간: {% now "Y년 m월 d일 H:i" %}</p>
 
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django 템플릿 태그 예시</title>
</head>
<body>
    <h1>Django 템플릿 태그 예시</h1>
 
    <h2>1. 변수 출력</h2>
    <p>이름: {{ user.name }}</p>
    <p>이메일: {{ user.email }}</p>
 
    <h2>2. 조건문</h2>
    {% if user.age >= 20 %}
        <p>{{ user.name }}님은 성인입니다.</p>
    {% else %}
        <p>{{ user.name }}님은 미성년자입니다.</p>
    {% endif %}
 
    <h2>3. 반복문</h2>
    <ul>
    {% for post in posts %}
        <li>
            <h3>{{ post.title }}</h3>
            <p>{{ post.content|linebreaks }}</p>
            <small>작성일: {{ post.date|date:"Y년 m월 d일" }}</small>
        </li>
    {% empty %}
        <li>게시글이 없습니다.</li>
    {% endfor %}
    </ul>
 
    <h2>4. 필터 사용</h2>
    <p>첫 번째 글 내용 (5단어): {{ posts.0.content|truncatewords:5 }}</p>
    <p>첫 번째 글 내용 길이: {{ posts.0.content|length }}</p>
 
    <h2>5. forloop 변수</h2>
    <ul>
    {% for number in numbers %}
        <li>
            {{ forloop.counter }}번째 숫자: {{ number }}
            {% if forloop.first %}(첫 번째){% endif %}
            {% if forloop.last %}(마지막){% endif %}
        </li>
    {% endfor %}
    </ul>
 
    <h2>6. with 태그</h2>
    {% with total=numbers|length %}
        <p>numbers 리스트의 길이: {{ total }}</p>
    {% endwith %}
 
    <h2>7. lorem 태그</h2>
    {% lorem 2 p %}
 
    <h2>8. now 태그</h2>
    <p>현재 날짜 및 시간: {% now "Y년 m월 d일 H:i" %}</p>
 
</body>
</html>

실행시키기 위해서는 settings.py에 TEMPLATES에 DIRS를 추가해주어야 합니다.

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 추가
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 추가
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

서버를 실행하고 http://127.0.0.1:8000/example/로 접속하여 동작되는 화면을 확인해보겠습니다.

python manage.py runserver
python manage.py runserver

2. 기본적인 템플릿 태그 사용법

2.1 변수 출력

변수 값을 출력하려면 {{ }} 구문을 사용합니다.

<p>이름: {{ user.name }}</p>
<p>이메일: {{ user.email }}</p>
<p>이름: {{ user.name }}</p>
<p>이메일: {{ user.email }}</p>
2.2 제어 구문

{% %}을 이용하면 구문을 사용하여 Python과 유사한 제어 구문을 실행할 수 있습니다. 끝낼때에는 {% end~ %}를 붙여줘야 합니다.

2.2.1 조건문 사용하기

{% if %}, {% elif %}, {% else %} 태그로 조건문을 구현할 수 있습니다.

{% if user.age >= 20 %}
    <p>{{ user.name }}님은 성인입니다.</p>
{% else %}
    <p>{{ user.name }}님은 미성년자입니다.</p>
{% endif %}
{% if user.age >= 20 %}
    <p>{{ user.name }}님은 성인입니다.</p>
{% else %}
    <p>{{ user.name }}님은 미성년자입니다.</p>
{% endif %}
2.2.1 반복문 사용하기

{% for %} 태그를 사용하여 리스트나 딕셔너리를 순회할 수 있습니다.

{% for post in posts %}
    <h3>{{ post.title }}</h3>
    <p>{{ post.content }}</p>
{% endfor %}
{% for post in posts %}
    <h3>{{ post.title }}</h3>
    <p>{{ post.content }}</p>
{% endfor %}
2.3 주석

{# #}을 이용해서 주석으로 사용 할 수 있습니다.

<p>{# 주석 입니다! #}</p>
<p>{# 주석 입니다! #}</p>

3. 템플릿 필터

템플릿 필터는 변수의 값을 조정하거나 맞추는 데 사용됩니다.

3.1 linebreaks

텍스트의 줄바꿈을 HTML <br> 태그로 변환합니다.

<p>{{ post.content|linebreaks }}</p>
<p>{{ post.content|linebreaks }}</p>
3.2 truncatewords

텍스트를 지정된 단어 수로 자릅니다. 공백을 기준으로 합니다.

<!-- INPUT: "Hello, world!" -->
<p>{{ post.content|truncatewords:5 }}</p>
<!-- OUTPUT: "Hello, ..."-->
<!-- INPUT: "Hello, world!" -->
<p>{{ post.content|truncatewords:5 }}</p>
<!-- OUTPUT: "Hello, ..."-->
3.3 length

문자열이나 리스트의 길이를 반환합니다.

<!-- INPUT: "Hello, world!" -->
<p>내용 길이: {{ post.content|length }}</p>
<!-- OUTPUT: 13 -->
<!-- INPUT: "Hello, world!" -->
<p>내용 길이: {{ post.content|length }}</p>
<!-- OUTPUT: 13 -->
3.4 slice

문자열이나 리스트의 일부를 잘라냅니다.

<!-- INPUT: "Hello, world!" -->
<p>{{ i.contents|slice:":5" }}</p>
<!-- OUTPUT: "Hello" -->
<!-- INPUT: "Hello, world!" -->
<p>{{ i.contents|slice:":5" }}</p>
<!-- OUTPUT: "Hello" -->
3.5 date

날짜를 지정된 포맷으로 출력합니다.

<!-- INPUT: datetime(2023, 7, 1) -->
<p>작성일: {{ post.date|date:"Y년 m월 d일" }}</p>
<!-- OUTPUT: "2023년 7월 1일" -->
<!-- INPUT: datetime(2023, 7, 1) -->
<p>작성일: {{ post.date|date:"Y년 m월 d일" }}</p>
<!-- OUTPUT: "2023년 7월 1일" -->

4. 템플릿 태그의 고급 기능

4.1 forloop 변수

반복문 안에서 현재 루프가 몇번째 인지 알려줍니다.

{% for number in numbers %}
    {{ forloop.counter }}번째 숫자: {{ number }}
    {% if forloop.first %}(첫 번째){% endif %}
    {% if forloop.last %}(마지막){% endif %}
{% endfor %}
{% for number in numbers %}
    {{ forloop.counter }}번째 숫자: {{ number }}
    {% if forloop.first %}(첫 번째){% endif %}
    {% if forloop.last %}(마지막){% endif %}
{% endfor %}
  • forloop.counter: 1부터 시작하는 루프 카운터
  • forloop.counter0: 0부터 시작하는 루프 카운터
  • forloop.revcounter: 마지막 항목부터 거꾸로 세는 카운터
  • forloop.first: 첫 번째 루프일 때 True
  • forloop.last: 마지막 루프일 때 True
4.2 with 태그

변수를 설정합니다.

{% with total=numbers|length %}
    <p>numbers 리스트의 길이: {{ total }}</p>
{% endwith %}
{% with total=numbers|length %}
    <p>numbers 리스트의 길이: {{ total }}</p>
{% endwith %}
4.3 lorem 태그

로렘 입숨 텍스트를 생성합니다. 아무 의미가 없는 더미 텍스트를 만드는데 사용합니다.

{% lorem 3 p %}
{% lorem 3 p %}
4.4 now 태그

현재 날짜와 시간을 출력합니다.

<p>It is {% now "jS F Y H:i" %}</p>
<!-- "21st October 2023 14:30" -->
<p>It is {% now "Y/M/D" %}</p>
<!-- 2023/10/21 -->
<p>It is {% now "jS F Y H:i" %}</p>
<!-- "21st October 2023 14:30" -->
<p>It is {% now "Y/M/D" %}</p>
<!-- 2023/10/21 -->
  • Y: 4자리 연도 (예: 2023)
  • M: 월을 01-12로 표시
  • D: 일을 01-31로 표시
  • F: 월 이름 전체 (예: January)
  • j: 일을 1-31로 표시 (앞에 0 없음)
  • S: 일의 서수 접미사 (st, nd, rd, th)
  • H: 24시간 형식의 시간 (00-23)
  • i: 분 (00-59)

5. 참고 사항

템플릿 태그의 추가적인 내용은 아래 공식 문서를 참고해 주세요.

Django 공식 문서- template tag
2.4 View 추가 설명3장 Model과 DataBase