반응형
HTML 파일을 구성할 때 중복되는 부분이 있습니다.
예를 들어서 부트스트랩의 link가 대표적이고
어떤 부분은 어느 한 부분만 똑같은 부분이 있을 수도 있습니다.
그래서 중복되는 것들을 하나의 html에 저장해서 불러오면 되는 것입니다.
(여기에서는 위에 부분이 바뀌지 않음)
{% extends 'base.html' %}
이걸로 불러 올 수 있습니다. 하지만 이것만 쓰면 전체가 다 덮어씌워지게 됩니다.
즉 question_list에 적으면 base.html로 다 덮어씌워지게 되는 것이죠
그래서 {% block content %} 와 {% endblock %} 을 사용해서 question_list가 쓰일 수 있는 영역을 만들어주는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>base.html 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<div class="container my-3 text-center">
<table calss="table">
<thead>
<tr class="bg-dark text-white">
<th> 번호 </th>
<th> 제목 </th>
<th> 작성일시 </th>
</tr>
</thead>
<tbody>
{% if question_list %}
{% for question in question_list %}
<tr>
<td>{{ loop.index }}</td>
<td><a href="{{ url_for('question.detail', question_id=question.id) }}">{{question.subject}}</a></td>
<td>{{ question.create_date }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3"> 질문이 없습니다. </td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock %}
</body>
</html>question.list.html 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
<h2 class="border-bottom py-2">{{ question.subject }}</h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
</div>
<div class="d-flex justify-content-end">
<div class="badge badge-light p-2">
{{ question.create_date }}
</div>
</div>
</div>
<h5 class="border-bottom my-3 py-2">{{ question.answer_set|length }}개의 답변이 있습니다.</h5>
{% for answer in question.answer_set %}
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space : pre-line;">
{{ answer.content }}
</div>
<div class="d-flex justify-content-end">
<div class="badge badge-light p-2">
{{ answer.create_date }}
</div>
</div>
</div>
</div>
{% endfor %}
<h5> {{ question.answer_set|length }}개의 답변이 있습니다. </h5>
<div>
<ul>
{% for answer in question.answer_set %}
<li> {{ answer.content }}</li>
{% endfor %}
</ul>
</div>
<form class="my-3" action="{{ url_for('answer.create', question_id=question.id) }}" method="post">
<div class="form-group">
<textarea name="content" id="content" row="15"></textarea>
<input class="btn btn-primary" type="submit" value="답변등록">
</div>
</form>
</div>
{% endblock %}
</body>
</html>question.detail.html 입니다.
반응형