[Django] 9. 부트스트랩을 적용시키자.

[Django] 9. 부트스트랩을 적용시키자.

반응형

웹 페이지를 더 예쁘게 꾸미기 위해서 CSS가 필수적이다.

하지만 거두절미하고 부트스트랩을 사용하면 더 편하게 꾸밀 수 있다.

우선, css파일은 모두 프로젝트 디렉터리에 static 폴더를 만들어 관리한다.

static 폴더를 만든 다음 부트스트랩을 다운받자.

다음 링크에 들어가서 부트스트랩 설치파일을 내려받자.

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

다운받아서 당장은 전부 사용할 필요는 없고, bootstrap.min.css 파일만 방금 만든 static 폴더 안에 집어넣어주자.

( 다음에 사용할 수 있으니 지우진 말자 )

그 다음 settings.py 파일을 열어서 static 경로를 추가해주자

#config/setting.py ... STATIC_URL = 'static/' STATICFILES_DIRS = [ BASE_DIR / 'static', ] ...

이제 question_list.html에 부트스트랩을 추가하고, 부트스트랩에서 제공하는 클래스들로 재구성해보자.

{% load static %} 번호 제목 작성일시 {% if question_list %} {% for question in question_list %} {{ forloop.counter }} {{ question.subject }} {{ question.create_date }} {% endfor %} {% else %} 질문이 없습니다. {% endif %}

이렇게 작성하고 파이보 url을 입력하면,

이렇게 그럴싸한 페이지가 출력된다.

질문 상세페이지도 다음과 같이 수정하자.

templates/question_detail.html

{% load static %} {{ question.subject }} {{ question.content }} {{ question.create_date }} {{question.answer_set.count}}개의 답변이 있습니다. {% for answer in question.answer_set.all %} {{ answer.content }} {{ answer.create_date }} {% endfor %} {% csrf_token %} {% if form.errors %} {% for field in form %} {% if field.errors %} {{ field.label }} {{ field.errors }} {% endif %} {% endfor %} {% endif %}

그대로 복사해도 좋고, 복사 붙여넣기해도 좋다.

html에 깊게 공부할 목적이 아니라 크게 생각하지않고 클론코딩만 진행했다.

질문 상세페이지는 다음과 같이 꽤 그럴싸한 페이지가 완성된다.

반응형

from http://kkiho.tistory.com/37 by ccl(A) rewrite - 2021-12-27 17:00:27