반응형
웹 페이지에 디자인을 적용하려면 CSS를 사용해야 합니다.
CSS 파일이 pybo/static 디렉터리에 있어야 합니다.
cmd를 이용해 static폴더를 만들어 주겠습니다.
우리가 적용할 CSS는 텍스트 창 너비 100%와 답변등록 버튼 위에 마진 10px을 추가하겠습니다.
style.css라는 이름으로 만들어주세요 이제 link 태그로 가져와야겠죠?
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href=" {{ url_for('static', filename='style.css') }} ">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> {{ question.subject }} </h1>
<div>
{{ question.content }}
</div>
<h5> {{ question.answer_set|length }}개의 답변이 있습니다. </h5>
<div>
<ul>
{% for answer in question.answer_set %}
<li> {{ answer.content }}</li>
{% endfor %}
</ul>
</div>
<form action="{{ url_for('answer.create', question_id=question.id) }}" method="post">
<textarea name="content" id="content" row="15"></textarea>
<input type="submit" value="답변등록">
</form>
</body>
</html>link 태그를 question_detail.html에 추가해주세요
부트스트랩을 적용해보겠습니다.
2가지 방법이 있죠?
1. cdn쓰기
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">2. 다운로드 받아서 사용하기
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
부트스트랩에 관한 내용은 포스팅 했으니 그걸 참고해주세요
<!DOCTYPE html>
<html lang="en">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
</body>
</html>question_list.html 입니다. 여기에서 cdn을 사용했습니다.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
</body>
</html>question_detail.html입니다. 여기에서 다운로드 받은 걸 사용했습니다.
반응형