HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
프론트엔드 스쿨 교안(1기)
/
📝
Node
/
📝
14. template_engine
/
📝
010_template_engine\template
📝

010_template_engine\template

파일이름 : 010_template_engine\template\base.html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>메뉴</p> {# 보통은 block style, block content, block script로 나눠 작성 #} {% block content %} {% endblock %}<p>푸터</p> </body> </html>
파일이름 : 010_template_engine\template\test1.html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>hello world</h1> <p>{{ name }}</p> <p>{{ age }}</p> </body> </html>
파일이름 : 010_template_engine\template\test2.html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>hello world</h1> {% for i in 예금 %} <h1>{{ i.은행명 }}</h1> <p>{{ i.계좌번호 }}</p> <p>{{ i.금액 }}</p> {% endfor %}{% for i, j in 습득연도 %} <h1>{{ i }}, {{ j }}</h1> {% endfor %} </body> </html>
파일이름 : 010_template_engine\template\test3.html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> {# 주석, 조건문, 변수, 필터, 사전식정렬 #} <h1>hello world</h1> {# Comparisons : == === != !== > >= < <= Logic : and or not #} {% for i in 예금 %} {% if i.금액 <= 100 %} <h1 style="color:red;">{{ i.은행명 }}</h1> <p>{{ i.계좌번호 }}</p> <p>{{ i.금액 }}</p> {% elif i.금액 <= 200 %} <h1 style="color:green;">{{ i.은행명 }}</h1> <p>{{ i.계좌번호 }}</p> <p>{{ i.금액 }}</p> {% else %} <h1 style="color:blue;">{{ i.은행명 }}</h1> <p>{{ i.계좌번호 }}</p> <p>{{ i.금액 }}</p> {% endif %} {% endfor %} <hr> {% set x = 10 %} {% set y = 10 %} {{ x + y }} {# Addition: + Subtraction: - Division: / Division and integer truncation: // Division remainder: % Multiplication: * Power: ** #} <hr> {# 우리가 true로 설정해 Autoescaping이 됩니다. #} {{ text }} {{ text | safe }} {{ text | escape }} {{ -x | abs }} <hr> <p>아래와 같은 것 말고도 join, reverse 같은 것을 지원합니다. 게시판에 게시물 정렬하기 좋겠죠.</p> {% set items = { 'ae': 1, 'ad': 2, 'ac': 3, 'ba': 4, 'bf': 5, 'bb': 6 } %} {% for item in items | dictsort %} {{ item }} {% endfor %} </body> </html>
파일이름 : 010_template_engine\template\test4.html {% extends 'base.html' %} {% block content %} <p>내용</p> <p>내용</p> <p>내용</p> <p>내용</p> <p>내용</p> <p>내용</p> {% endblock %}