Flask 화면 예쁘게 꾸미기

1. static 디렉터리 만들고 스타일시트 작성하기

/* flask > projects > firstproject > pybo > static > style.css */

textarea {
  width: 100\%;
}

input[type="submit"] {
  margin-top: 10px;
}

2. 질문 상세 페이지에 스타일시트 적용하기

<!-- flask > projects > firstproject > pybo > template > quetion / question_detail.html -->
<link rel="stylesheet" jref="\{\{ url_for('static', filename='style.css') \}\}" />
<h1></h1>
. . .

3. 부트스트랩 설치하기

https://getbootstrap.com/docs/4.5/getting-started/download/ 다운로드
압축 해제 후 bootstrap.min.css > pybo/static 저장

4. 부트스트랩 적용

<!-- flask > projects > firstproject > pybo > template > quetion / question_detail.html -->
<link
  rel="stylesheet"
  href="\{\{ url_for('static', filename='bootstrap.min.css') \}\}"
/>
<div class="container my-3">
  <table class="table">
    <thead>
      <tr class="thead-dark">
        <th>번호</th>
        <th>제목</th>
        <th>작성일시</th>
      </tr>
    </thead>
    <tbody>
      {\% if question_list \%} {\% for question in question_list \%}
      <tr>
        <td></td>
        <td>
          <a href="\{\{ url_for('question.detail', question_id=question.id)\}\}"
            ></a
          >
        </td>
        <td></td>
      </tr>
      {\% endfor \%} {\% else \%}
      <tr>
        <td colspan="3">질문이 없습니다.</td>
      </tr>
      {\% endif \%}
    </tbody>
  </table>
</div>

5. 질문 상세 조회 템플릿에 부트스트랩 적용하기

<link
  rel="stylesheet"
  href="\{\{ url_for('static', filename='bootstrap.min.css') \}\}"
/>
<div class="container my-3">
  <h2 class="border-bottom py-2"></h2>
  <div class="card my-3">
    <div class="card-body">
      <div class="card-text" style="white-space: pre-line">
        
      </div>
      <div class="d-flex justify-content-end">
        <div class="badge badge-light p-2"></div>
      </div>
    </div>
  </div>
  <h5 class="border-bottom my-3 py-2">
    개의 답변이 있습니다.
  </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">
        
      </div>
      <div class="d-flex justify-content-end">
        <div class="badge badge-light p-2"></div>
      </div>
    </div>
  </div>
  {\% endfor \%}
  <form
    action="\{\{ url_for('answer.create', question_id=question.id) \}\}"
    method="post"
    class="my-3"
  >
    <div class="form-group">
      <textarea
        name="content"
        id="content"
        class="form-control"
        rows="10"
      ></textarea>
    </div>
    <input type="submit" value="답변등록" class="btn btn-primary" />
  </form>
</div>

2023 32
2022 153