Template 사용법
템플릿(template)은 웹 개발에서 많이 사용되는 개념으로, 반복되는 HTML 코드를 재사용하여 웹 페이지의 구조를 일관되게 만들어주는 기능입니다. 템플릿을 사용하면 일관된 디자인을 유지하고, 코드의 중복을 최소화할 수 있어 개발 효율성을 높일 수 있습니다.
1. 템플릿 문법
템플릿은 일반적으로 중괄호({{ }})를 사용하여 변수 값을 삽입하는 방식으로 동작합니다. 중괄호 안에 변수나 표현식을 작성하여 동적인 콘텐츠를 만들 수 있습니다.
{{ 변수명 }}2. 템플릿 예제
아래는 간단한 템플릿 예제입니다. {{ name }}이라는 변수를 이용하여 동적으로 이름을 출력하는 템플릿입니다.
<h1>안녕하세요, {{ name }}님!</h1>위 템플릿을 아래와 같이 사용한다면 이름을 동적으로 출력할 수 있습니다.
<h1>안녕하세요, John님!</h1>
<h1>안녕하세요, Alice님!</h1>3. 템플릿 상속
템플릿 상속을 이용하면 기본 템플릿을 설정하고, 추가적인 템플릿을 작성할 수 있습니다. 기본 템플릿의 뼈대를 그대로 사용하면서 다른 영역을 변경하고 확장할 수 있어 효율적인 웹 페이지 디자인을 구현할 수 있습니다.
기본 템플릿(base.html):
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<header>
<h1>{{ header }}</h1>
</header>
<div class="content">
{% block content %}{% endblock %}
</div>
<footer>
<p>이 글은 {{ author }}에 의해 작성되었습니다.</p>
</footer>
</body>
</html>상속할 템플릿(sub.html):
{% extends "base.html" %}
{% block content %}
<h2>{{ subheader }}</h2>
<p>{{ content }}</p>
{% endblock %}위 예제에서 extends 문법은 base.html 템플릿을 상속한다는 의미입니다. 그리고 block 문법은 해당 영역을 다른 템플릿에서 채울 수 있는 영역으로 설정합니다. content 블록은 sub.html에서 정의하여 base.html의 해당 영역을 대체합니다.
마무리
이상으로 템플릿 사용법과 예제를 정리해보았습니다. 템플릿을 사용하면 웹 개발에서 일관된 디자인과 효율적인 코드 작성을 위해 많은 도움을 받을 수 있습니다. 템플릿을 잘 활용하여 개발 프로젝트를 진행해보세요!
댓글