[프로그래밍] Chap 2. 장고 기본 요소 학습#8 (부트스트랩)

 

안녕하세요. 밤고래에요 :)

오늘은 저번시간에 CSS를 적용하여 만들었던 파이보 웹사이트에

부트스트랩을 활용하여 좀 더 예쁘게 웹사이트를 만들어보고자 합니다. 

 

Chap 2. 장고 기본 요소 학습#7 (스타일 시트(CSS))

 

2-8 부트스트랩으로 더 쉽게 화면 꾸미기

부트스트랩은 전문 웹 디자니어가 아닌 개발자 혼자서도 화면을 괜찮은 수준으로 만들 수 있게 도와주는 도구다.

부트스트랩은 트위터를 개발하면서 만들어졌고, 지속적으로 관리되고 있는 오픈소스 프로젝트이다.

 

 

 

[실습] 파이보에 부트스트랩 적용하기(p100)

Step 1. 부트스트랩 설치하기

아래 링크를 통하여 부트스트랩 설치 파일을 내려받자

 

 

Download

 

 

내려받은 파일의 압축을 해제하면 많은 파일이 들어 있다.

이 중에서 bootstrap.min.css 파일만 복사해서 mysite/static 디렉터리에 저장하자.

 

 

Step 2. 질문 목록 템플릿에 부트스트랩 적용하기

pybo/question_list.html 파일에 부트스트랩을 적용하기 위해 {% load static %} 태그와 link 엘리먼트를 추가하자.

 

 

 

이어서 부트스트랩을 이용하여 템플릿을 다음과 같이 재구성하자. 

여기서 사용된 container, my-3, thead-dart 등이 바로 부트스트랩이 제공하는 클래스이다.

 

 

 

기존에는 질문 목록을 ul 엘리먼트로 간단히 표시했지만,

여기서는 table 엘리먼트로 바꾸고 질문의 일련번호와 작성일시 항목도 추가했다.

 

질문의 일련번호는 {{ forlloop.counter }} 를 이용하여 표시했다.

{{ forlloop.counter }}는 {% for ... %}에서 반복 시 자동으로 매겨지는 순섯 값을 의미한다.

 

기존 소스는 아래와 같이 주석처리하였다.

 

 

 

Step 3. 질문 상세 템플릿에 부트스트랩 사용하기

 

 

질문, 답변은 하나의 뭉치에 해당되므로 부트스트랩의 card 컴포넌트를 사용했고, 

질문 내용과 답변 내용은 style 속성으로 white-space: pre-line 을 적용하여

텍스트의 줄바꿈을 정상적으로 보이게 만들었다. 

부트스트랩 클래스 my-3은 상하 마진값 3을 의미한다. 

py-2는 상하 패딩값 2, p-2는 상하좌우 패딩값 2를 의미한다. 

d-flex justify-content-end는 컴포넌트 오른쪽 정렬을 의미한다.

 

<부트스트랩 적용 전>

1. 질문 리스트 게시판

 

2. 답변 리스트 게시판

 

<부트스트랩 적용 후>

1. 질문 리스트 게시판

 

2. 답변 리스트 게시판

 

부트스트랩을 적용하여 빠르고 쉽게 UI를 개선한것 처럼 

개발자가 일일히 CSS 문법을 알고, UI를 개선하기 위한 별도의 코드를 입력하지 않아도된다.

 

 

위는 우리가 이번에 사용한 thead-dark 클래스가 정의된 부분이며, 

이 외에도 부트스트랩을 사용하여 할 수 있는 css 요소는 매우 많다.

bootstrap.min.css 파일에 이미 예쁜 테이블이나 색 등이 정의가 되어있다.

 

결국, 개발자는 css파일에서 '어떤 요소를 쓸지' 와 '템플릿(html파일) 과 연결하는 작업'만 해주면된다.