[부트스트랩]
부트스트랩은 디자이너의 도움 없이 개발자 혼자서 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다.
https://getbootstrap.com/docs/5.1/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
링크를 통해 다운로드하자. 버전은 5.x 버전이다.
다운로드하면 다음과 같은 폴더가 있다.
그안에
css 폴더안에
bootstrap.min.css 파일이 있다. 이 다운받은 폴더\css\bootstarp.min.css 파일을
\Users\<사용자명>\ptojects\mysite\static\bootstrap.min.css 위치로 복사해 준다.
정확한 위치로 잘 복사하자.
projects\mysite\templates\pybo\question_list.html 파일을 다음과 같이 수정하자.
부트스트랩 스타일을 적용했으니 템플릿도 부트스트랩을 사용하도록 하자.
projects\mysite\templates\pybo\question_list.html 를 다음과 같이 수정하자.
바로 전에 작성한것 밑에다가 적어주면 된다. 원래는 <ul> 태그로 간단하게 작성했던 질문 목록을 테이블 구조로 변경했다. 번호와 작성일시 항목도 추가했다. 번호는 for 문의 현재 순서를 의미하는 {{ forloop.counter }} 를 이용했다. 여기서 사용한 class="container my-3", class="table", class="table-dark" 등은 부트스트랩 스타일에 정의되어 있는 클래스들이다. 부트스트랩에 대한 자세한 내용은 다음 링크를 참조하자.
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
이제 적용된 페이지를 확인해보자.
깔끔해졌다.
이제 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>
부트스트랩으로 화면을 구성하다 보면 가끔은 이렇게 많은 양의 HTML코드를 작성해야 한다. 질문이나 답변은 하나의 뭉치에 해당하므로 부트스트랩의 card 컴포넌트를 사용했다.
다음 링크는 부트스트랩의 card 컴포넌트이다.
https://getbootstrap.com/docs/5.1/components/card/
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
question_detail.html 에 사용한 부트스트랩 클래스는 다음과 같다.
부트스트랩 클래스 | 설명 |
card, card-body, card-text | 부트스트랩 card 컴포넌트 |
badge | 부트스트랩 badge 컴포넌트 |
form-control, form-label | 부트스트랩 form 컴포넌트 |
border-bottom | 아래방향 테두리 선 |
my-3 | 상하 여백값 3 |
py-2 | 상하 패딩값 2(패딩=컨텐츠와 테두리사이의 여백) |
부트스트랩 클래스 | 설명 |
p-2 | 상하좌우 패딩값 2 |
d-flex justify-content-end | 컴포넌트의 우측 정렬 |
bg-light | 연회색 배경 |
text-dark | 검은색 글씨 |
text-start | 좌측 정렬 |
btn btn-primary | 부트스트랩 버튼 컴포넌트 |
질문 내용과 답변 내용에는 style="white-space: pre-line"과 같은 스타일을 지정해 주었다. 글 내용의 줄 바꿈을 정상적으로 표시하기 위해 적용한 스타일이다.
적용한 화면을 확인하자.
깔끔하고 예쁘게 되었다.
'Django > 따라하는 장고' 카테고리의 다른 글
14. 폼 (1) | 2022.11.03 |
---|---|
13. 표준 HTML & 템플릿 상속 (0) | 2022.10.31 |
11. 스태틱 디렉토리 (0) | 2022.10.25 |
10. 답변 등록하기 (0) | 2022.10.22 |
9. URL 별칭 (0) | 2022.10.20 |