#11 부트스트랩(Bootstrap)

 이전 글에서 스타일시트를 사용하여 웹 페이지를 디자인 하는 방법을 배웠지만 직접 스타일시트를 작성하여

웹 페이지를 디자인하는 것은 쉬운 일이 아니다.  부트스트랩은 웹 디자이너가 아닌 개발자도 보다 쉽게 그럴싸한

웹 디자인이 가능하도록 보조해주는 프레임워크이다. 

 

1. 부트스트랩 설치

이 글을 작성하는 현재 시점에서 부트스트랩의 최신 버전은 v5.1.1 이다.  하지만 강좌를 따라가는 중인 만큼 우선은

강좌에서 사용한 v4.6.0 을 사용하여 진행하기로 한다. 최신 버전을 사용하는 법에 대해서는 추후에 별도로 공부하여

정리를 해보기로 한다.

 

 먼저 부트스트랩 홈페이지(https://getbootstrap.kr/)에 접속하여 v4.6.x 문서를 클릭한다.

 

그 다음 좌측에서 download 탭을 클릭하여 이동한 뒤 하단의 Download 버튼을 누르면 압축파일 하나를 다운받을 수

있다. 압축 파일의 내용물 중 bootstarp.min.css 파일을 이전 글에서 생성했던 static 디렉토리에 옮기면 설치는 끝이다.

 

static 디렉토리에 위치시킨 부트스트랩 스타일시트

 

 

 

2. 부트스트랩 적용 - 질문 리스트 페이지

 이제 부트스트랩을 템플릿에 적용시킬 차례이다.  question_list.html 을 다음과 같이 수정한다.

먼저 이전 글에서 했던 것 처럼 스타일시트를 적용시킨 뒤, table 태그로 표를 생성, thead(table head) 태그로 각 열의

이름을 지정하고 tbody(table body) 태그 내에 thead 에 정의한 열 이름에 맞춰 순서대로 정보를 표시하도록 한다.

만약 질문이 없다면 질문 글이 없음을 표시한다. (세 열을 병합한 크기의 한 줄로 표시한다.) 

 

 

여기까지 적용하고 웹 페이지에 접속해보면  위와 같이 웹 페이지의 디자인이 상당히 괜찮아진 것을 확인할 수 있다.

 

 

3. 부트스트랩 적용 - 질문 상세 페이지

 다음은 질문 상세 페이지에 부트스트랩을 적용해보자. question_detail.html 을 다음과 같이 수정한다.

마찬가지로 스타일시트를 적용해준 뒤 템플릿 코드를 수정해준다.  div 태그에서 card 클래스를 사용하여 박스안에 내용을 표시하고 박스 우하단에 생성일시를 표시하는 형태이다.  

 

여기까지 적용하고나면 위와 같이 질문 상세 페이지도 깔끔한 모습이 된 것은 확인할 수 있다. 

 

여기서 사용된 것을 비롯해 부트스트랩의 많은 클래스들을 어느정도 익혀두면 큰 어려움 없이 심플한 웹 디자인이

가능해진다.  더 자세히 알아보려면 공식문서(https://getbootstrap.com/docs/4.6)를 참조하면 좋다.