(8) 부트스트랩

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

부트스트랩을 적용하여 파이보 서비스를 이쁘게 만들어 보자.

---

부트 스트랩 설치

부트스트랩은 다음 URL에서 다운받아 설치할수 있다.

해당 실습은 부트스트랩 버전 5 기준으로 진행한다. 다른 버전을 사용하면 정상 동작하지 않을 수 있다.

 

https://getbootstrap.com/docs/5.1/getting-started/download/

Download

 

 

부트스트랩 다운로드 페이지 접속후 "Download" 버튼을 누르면 다음과 같은 파일이 다운로드 된다.

bootstrap-5.1.3-dist.zip

해당 폴더에서 bootstrap.min.css 파일을 카피하여 스태틱 디렉터리에 저장하자.

---

부트 스트랩 적용

먼저 질문 목록 템플릿에 부트스트랩을 다음처럼 적용하자.

[파일명: projects\mysite\templates\pybo\question_list.html]

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
{% if question_list %}
(... 생략 ...)

 

이제 부트스트랩 스타일을 적용 했으니 템플릿도 부트스트랩을 사용하도록 다음과 같이 수정하자.

[파일명: projects\mysite\templates\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="table-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>

 

이제 다음처럼 부트스트랩이 적용된 질문 목록을 볼 수 있을 것이다.

---

이어서 질문 상세 템플릿에도 다음처럼 부트스트랩을 적용하자.

[파일명: projects\mysite\templates\pybo\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 bg-light text-dark 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 bg-light text-dark 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="mb-3">
            <label for="content" class="form-label">답변내용</label>
            <textarea name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>

 

질문 상세 템플릿에 사용한 부트스트랩 클래스를 다음처럼 표로 정리하였다.

---

부트스트랩을 적용한 질문 상세 화면은 다음과 같다.

 

부트스트랩을 사용하면 정말 빠르게 만족스러운 화면을 만들 수 있다!