[Django] 2 - 8. 부트스트랩

이전 포스트

 

[Django] 1. 개발 환경 설정 https://wroni.tistory.com/4

[Django] 2 - 1. URL과 View https://wroni.tistory.com/5

[Django] 2 - 2. 모델 https://wroni.tistory.com/6

[Django] 2 - 3. 장고 관리자 https://wroni.tistory.com/7

[Django] 2 - 4. 조회와 템플릿 https://wroni.tistory.com/8

[Django] 2 - 5. URL과 네임스페이스, 2 - 6. 데이터 저장 https://wroni.tistory.com/9

[Django] 2 - 7. 스태틱 https://wroni.tistory.com/10

---

2 - 8. 부트스트랩

 

 

1. 부트스트랩 설치

 

웹 디자인을 간편하게 할 수 있는 부트스트랩을 이용하여 html에 적용해보자.

 

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

Download

 

우리는 4.6.0 버전으로 할 것이다. 5 버전 이상에서 하면 동작하지 않으므로 유의하자.

 

 

Compiled CSS and JS 아래에 Download 버튼을 누르고 다운 받으면 된다.

 

다운 완료하면 압축파일이 다운 받아지는데, 압축을 풀고 이 중 bootstrap.min.css 파일을 복사해서

스태틱(static) 디렉터리에 저장하자.

 

 

경로를 올바르게 저장하면 이렇게 뜬다.

나중에 bootstrap.min.js 파일도 필요하기 때문에 다운 받은 bootstrap-4.6.0 파일을 삭제하지 말자.

 

 

2. 부트스트랩 적용

 

먼저 부트스트랩을 적용해보자. 질문 목록 템플릿에 다음과 같이 코드를 추가하자.

 

파일 : C:\projects\mysite\templates\pybo\question_list.html

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

 

이와같이 코드를 작성하면, 부트스트랩 스타일을 적용한 것이다.

 

이제 템플릿도 부트스트랩을 사용하도록 다음과 같이 수정할 것이다.

 

파일 : C:\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="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>

 

 

코드가 길기 때문에 오타로 인해 오류가 나거나 원하는대로 결과가 안 나온다면 해당 코드를 복붙 해서 수정하자.

 

코드를 수정하고 웹 서버를 구동시키면

 

 

이런 식으로 결과가 나온다.

 

{{ forloop.counter }} 는 번호, 즉 게시물 번호를 의미한다.

 

class="container my-3", class="table", class="thead-dark" 등은 부트스트랩 스타일에 정의되어 있는 클래스들이다.

 

 

 

이제 질문 상세 템플릿에도 부트스트랩을 적용해보자.

 

파일 : C:\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 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>

 

 

질문 상세 템플릿에 사용한 부트스트랩 클래스

 

부트스트랩 클래스	설명
card, card-body, card-text	부트스트랩 Card 컴포넌트
badge, badge-light	부트스트랩 Badge 컴포넌트
form-group, form-control	부트스트랩 Form 컴포넌트
border-bottom	아래방향 테두리 선
my-3	상하 마진값 3
py-2	상하 패딩값 2
p-2	상하좌우 패딩값 2
d-flex justify-content-end	컴포넌트 우측 정렬

 

style="white-space: pre-line;" 과 같은 스타일을 지정해주면 글 내용의 줄 바꿈을 정상적으로 보여줄 수 있다.

 

 

질문 상세 페이지도 잘 나오고 있다.

 

---

※ 본 내용은 django 공부 기록이며, 점프 투 장고를 참고하였습니다.

https://wikidocs.net/book/4223

점프 투 장고