728x90
1. Templates 상속
템플릿 상속이란,
html 화면 상 계속해서 중복되는 부분을 별도의 .html 분류하여 1번만 작성하고 계속해서 재사용하는 아주 편리한 기능이다.
- 주로 base.html로 이름을 정하고,
베너(header)나 footer부분, 전체적인 틀을 정의한다.
< 작성 절차>
base.html
1. 먼저 tempaltes.html 안에 base.html 파일을 생성한다.
2. base.html이 뼈대가 되어 재사용 되어진다.
3. 컨텐츠를 채워놓을 공간을 content 블럭으로 구분한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="navbar">
이부분이 모든 페이지에 공통으로 들어갈 요소
</div>
{% block content %}
{% comment %} base.html을 상속한 템플릿에서 구현해야 하는 영역 {% endcomment %}
{% endblock %}
</body>
</html>
home.html
1. base.html을 상속받는다.
{% extends 'base.html' %}
2. 상속에 들어갈 내용은
{% block contnent %}
{% endblock %}
안에 적는다.
{% extends 'base.html' %}
<br>
{% block content %}
<h3> 여기는 홈 화면 템플릿 변수를 이용해 화면에 출력했지롱 </h3>
{% for d in designer %}
<div>
{% if d.image %}
<img src = '{{ d.image.url }}' hegiht = 150 width = 150>
{% endif %}
</div>
<div>
<h5>{{ d.name }} </h5>
<h5>{{ d.adress }} </h5>
<h5>{{ d.description }} </h5>
{% endfor %}
{% endblock %}
이런식으로 나타난다!! 야호~!
반응형
'Django > 기초' 카테고리의 다른 글
| [Django] 장고입문 5. model, 웹 화면(html, 프론트)에 출력하기, 뿌리기 (0) | 2021.06.13 |
|---|---|
| [Django] 장고 입문 4. Model 과 Admin (0) | 2021.06.13 |
| [Django] 장고 입문 3. views.py, urls.py 연결 (0) | 2021.06.13 |
| [Django] 장고 입문 2. 프로젝트 & 앱 생성, 연동 (0) | 2021.06.13 |
| [Django] 장고 입문 1. 가상환경 설정( 장고 시작 ) (0) | 2021.06.13 |