Django - mysite (부트스트랩)

링크

이 페이지의 내용 정리 위캔입니다.
완성 소스 깃허브
부트스트랩 다운로드 링크

부트스트랩

• 디자이너의 도움 없이도 괜찮은 수준의 웹페이지를 만들 수 있게 도와주는 프레임워크이다.
• 트위터를 개발하면서 만들어졌다.
• 현재까지도 지속적으로 관리되고 있는 오픈소스 프로젝트이다.

부트스트랩 설치

• 위의 링크에서 다운로드 받아 압축해제한 파일 중 bootstrap.min.css 파일을 스태틱 디랙터리에 복붙한다.
• 경로 : ...mysite\static

부트스트랩 적용

• 경로 : templates\pybo\question_list.html

# 추가
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"'

{% if question_list %}
...

• 부트스트랩 스타일을 적용 했으니 템플릿도 부트스트랩을 사용하도록 수정한다.

질문 목록

• 경로 : ...template\pybo\question_list.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static '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>{{forloop.counter}}</td>
            <td>
                <a href="{% url 'pybo:detail' question.id %}">{{ question.subject}}</a>
            </td>
            <td>{{question.create_date}}</td>
        </tr>
        {%endfor%}
        {%else%}
        <tr>
            <td colspan="3"> 질문이 없습니다. </td>
        </tr>
        {%endif%}
        </tbody>
    </table>
</div>

<!-- 삭제
-
{% if question_list %} question_list가 있다면 question_list는 render 함수로 전달받은 질문 목록 데이터이다.
<ul>
    {% for question in question_list %} for문으로 question_list를 question에 순차적으로 대입
    <li><a href="{% url 'pybo:detail' question.id %}">{{question.subject}}</a></li>
    question.id 는 for문으로 대입된 question의 id번호 출력, question.subject는 제목 출력
    {% endfor %}
</ul>
{% else %}
<p>질문이 없습니다.</p>
{% endif %}
-->

• 기존에 <ul> 태그로 심플하게 작성했던 질문 목록을 테이블 구조로 변경했다.
• 번호와 작성일시 항목도 추가했다.
• 번호는 for문의 현재 순서를 의미하는 {{forloop.counter}}을 이용했다.
• 여기서 사용된 class="container my-3", class="table", class="thead-dark등은 부트스트랩 스타일에 정의되어 있는 클래스이다.

질문 상세

• 질문 상세 템플릿에도 부트스트랩을 적용한다.
• 경로 : ...tamplates\question_detail.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<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 class="d-flex justify-content-end">
                <div class="badge badge-light p-2">
                    {{ question.create_date }}
                </div>
            </div>
        </div>
    </div>
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
    <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 %}
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        <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>