--- /dev/null
+# ν
νλ¦Ώ
+
+**FastAPI**μ ν¨κ» μνλ μ΄λ€ ν
νλ¦Ώ μμ§λ μ¬μ©ν μ μμ΅λλ€.
+
+μΌλ°μ μΈ μ νμ Jinja2λ‘, Flaskμ λ€λ₯Έ λꡬμμλ μ¬μ©λ©λλ€.
+
+μ€μ μ μ½κ² ν μ μλ μ νΈλ¦¬ν°κ° μμΌλ©°, μ΄λ₯Ό **FastAPI** μ ν리μΌμ΄μ
μμ μ§μ μ¬μ©ν μ μμ΅λλ€(Starlette μ 곡).
+
+## μμ‘΄μ± μ€μΉ
+
+κ°μ νκ²½μ μμ±νκ³ (virtual environment{.internal-link target=_blank}), νμ±νν ν jinja2λ₯Ό μ€μΉν΄μΌ ν©λλ€:
+
+
+<div class="termy">
+
+```console
+$ pip install jinja2
+
+---> 100%
+```
+
+</div>
+
+## μ¬μ©νκΈ° `Jinja2Templates`
+
+* `Jinja2Templates`λ₯Ό κ°μ Έμ΅λλ€.
+* λμ€μ μ¬μ¬μ©ν μ μλ `templates` κ°μ²΄λ₯Ό μμ±ν©λλ€.
+* ν
νλ¦Ώμ λ°νν κ²½λ‘ μμ
μ `Request` λ§€κ°λ³μλ₯Ό μ μΈν©λλ€.
+* μμ±ν `templates`λ₯Ό μ¬μ©νμ¬ `TemplateResponse`λ₯Ό λ λλ§νκ³ λ°νν©λλ€. ν
νλ¦Ώμ μ΄λ¦, μμ² κ°μ²΄ λ° Jinja2 ν
νλ¦Ώ λ΄μμ μ¬μ©λ ν€-κ° μμ΄ ν¬ν¨λ "컨ν
μ€νΈ" λμ
λ리λ μ λ¬ν©λλ€.
+
+
+```Python hl_lines="4 11 15-18"
+{!../../docs_src/templates/tutorial001.py!}
+```
+
+/// note | μ°Έκ³
+
+FastAPI 0.108.0 μ΄μ κ³Ό Starlette 0.29.0μμλ `name`μ΄ μ²« λ²μ§Έ λ§€κ°λ³μμμ΅λλ€.
+
+λν μ΄μ λ²μ μμλ `request` κ°μ²΄κ° Jinja2μ 컨ν
μ€νΈμμ ν€-κ° μμ μΌλΆλ‘ μ λ¬λμμ΅λλ€.
+
+///
+
+/// tip | ν
+
+`response_class=HTMLResponse`λ₯Ό μ μΈνλ©΄ λ¬Έμ UI μλ΅μ΄ HTMLμμ μ μ μμ΅λλ€.
+
+///
+
+/// note | κΈ°μ μΈλΆ μ¬ν
+`from starlette.templating import Jinja2Templates`λ₯Ό μ¬μ©ν μλ μμ΅λλ€.
+
+**FastAPI**λ κ°λ°μλ₯Ό μν νΈλ¦¬ν¨μΌλ‘ `fastapi.templating` λμ `starlette.templating`μ μ 곡ν©λλ€. νμ§λ§ λλΆλΆμ μ¬μ© κ°λ₯ν μλ΅μ Starletteμμ μ§μ μ΅λλ€. `Request` λ° `StaticFiles`λ λ§μ°¬κ°μ§μ
λλ€.
+///
+
+## ν
νλ¦Ώ μμ±νκΈ°
+
+κ·Έλ° λ€μ `templates/item.html`μ ν
νλ¦Ώμ μμ±ν μ μμ΅λλ€. μλ₯Ό λ€λ©΄:
+
+```jinja hl_lines="7"
+{!../../docs_src/templates/templates/item.html!}
+```
+
+### ν
νλ¦Ώ 컨ν
μ€νΈ κ°
+
+λ€μκ³Ό κ°μ HTMLμμ:
+
+{% raw %}
+
+```jinja
+Item ID: {{ id }}
+```
+
+{% endraw %}
+
+...μ΄λ μ λ¬ν "컨ν
μ€νΈ" `dict`μμ κ°μ Έμ¨ `id`λ₯Ό νμν©λλ€:
+
+```Python
+{"id": id}
+```
+
+μλ₯Ό λ€μ΄, IDκ° `42`μΌ κ²½μ°, μ΄λ λ€μκ³Ό κ°μ΄ λ λλ§λ©λλ€:
+
+```html
+Item ID: 42
+```
+
+### ν
νλ¦Ώ `url_for` μΈμ
+
+ν
νλ¦Ώ λ΄μμ `url_for()`λ₯Ό μ¬μ©ν μλ μμΌλ©°, μ΄λ *κ²½λ‘ μμ
ν¨μ*μμ μ¬μ©λ μΈμμ λμΌν μΈμλ₯Ό λ°μ΅λλ€.
+
+λ°λΌμ λ€μκ³Ό κ°μ λΆλΆμμ:
+
+{% raw %}
+
+```jinja
+<a href="{{ url_for('read_item', id=id) }}">
+```
+
+{% endraw %}
+
+...μ΄λ *κ²½λ‘ μμ
ν¨μ* `read_item(id=id)`κ° μ²λ¦¬ν λμΌν URLλ‘ λ§ν¬λ₯Ό μμ±ν©λλ€.
+
+μλ₯Ό λ€μ΄, IDκ° `42`μΌ κ²½μ°, μ΄λ λ€μκ³Ό κ°μ΄ λ λλ§λ©λλ€:
+```html
+<a href="/items/42">
+```
+
+## ν
νλ¦Ώκ³Ό μ μ νμΌ
+
+ν
νλ¦Ώ λ΄μμ `url_for()`λ₯Ό μ¬μ©ν μ μμΌλ©°, μλ₯Ό λ€μ΄ `name="static"`μΌλ‘ λ§μ΄νΈν `StaticFiles`μ ν¨κ» μ¬μ©ν μ μμ΅λλ€.
+
+```jinja hl_lines="4"
+{!../../docs_src/templates/templates/item.html!}
+```
+
+μ΄ μμ μμλ `static/styles.css`μ μλ CSS νμΌμ μ°κ²°λ κ²μ
λλ€:
+
+```CSS hl_lines="4"
+{!../../docs_src/templates/static/styles.css!}
+```
+
+κ·Έλ¦¬κ³ `StaticFiles`λ₯Ό μ¬μ©νκ³ μμΌλ―λ‘, ν΄λΉ CSS νμΌμ **FastAPI** μ ν리μΌμ΄μ
μμ `/static/styles.css` URLλ‘ μλ μ 곡λ©λλ€.
+
+## λ λ§μ μΈλΆ μ¬ν
+
+ν
νλ¦Ώ ν
μ€νΈλ₯Ό ν¬ν¨ν λ λ§μ μΈλΆ μ¬νμ <a href="https://www.starlette.io/templates/" class="external-link" target="_blank">Starletteμ ν
νλ¦Ώ λ¬Έμ</a>λ₯Ό νμΈνμΈμ.