지금까지 Flask 웹프레임워크를 이용해 만든 웹페이지들은 정말…눈꼽만큼도 꾸미지 않은 날것의 HTML이다. 그래서 이런 화면이다.
정말 보기 싫은 화면이다. 이런 웹페이지를 만들어 공개한다면 아무도 방문하지 않을 가능성이 100%다.
이런 날것 그대로의 웹페이지를 환골탈태 시켜줄 수 있는 “프런트엔드 웹 프레임워크”가 있다. 바로 부트스트랩(Bootstrap)이다. 부트스트랩 프레임워크는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것뿐만 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 객체들의 미리 디자인된 클래스를 포함하고 있다.
다음의 예제를 살펴보면 알 수 있지만 html 태그에 class=”~~~” 만을 추가하는 것 만으로도 훨씬 수려해진 웹페이지가 만들어지는 것을 알 수 있다.
먼저 Bootstrap을 다운로드 받아 서버에 설치해야 한다. 다운로드는 다음의 부트스트랩 홈페이지에서 다운받으면 된다.
구글에서 검색하면 3.x 버전의 다운로드 페이지가 표시되는 경우가 많은데 2021년 4월 현재 5.0 베타버전이 나와 있으며 안정버전은 4.6이다.
다운로드를 받은 압축파일을 해제하면 css와 js 폴더가 생성되고 파일들이 보이는데 웹서버의 DocumentRoot에 해당되는 경로에 static이라는 디렉토리를 만들고 업로드 한다.
업로드를 마치면 다음과 같은 경로가 된다.
이 화면에서 업로드한 것은 4.5.3 버전이다. 4.6과 크게 다르지 않다. flask 웹 프레임워크로 작성된 경우에는 애플리케이션의 최상위 경로에 static 디렉토리를 만들고 업로드 했다.
업로드를 마치면… 설치가 끝났다. 쉽다.
이제 templates/view 디렉토리에 있는 html 파일에 부트스트랩 코드를 추가해주어야 한다. 먼저 글의 목록을 보여주는 post_list.html 파일을 다음과 같이 수정해준다.
4행에서 static 디렉토리 아래에 설치된 bootstrap.min.css 파일을 stylesheet로 지정하여 웹서버가 참조하게 한다. 이렇게 해주면 아래의 html 객체 즉, div, table, tr, td 등 태그에 지정한 class에 해당하는 CSS (Cascading Style Sheets)를 읽어와 화면에 표시해줄 때 사용하여 지정한 형태로 표시해준다.
7행에서 div 태그(판넬처럼 여러 html 객체를 포함하는 컨테이너)에 부트스트랩에서 미리 정의하고 있는 container의 my-3 CSS를 적용하도록 했다.
9행에서는 table 태그에 부트스트랩에서 정의한 가장 기본적인 table 디자인 CSS를 적용했다.
11행에서 tr 태그에 thead-dark를 적용했다. 어둡게 반전될 것을 기대했는데… 안된다. 원인은 찾는 중이다. -.-
뭐 대충 이렇게 적용하고 나면… 다음과 같이 환골탈태된 글목록 페이지가 표시된다.
다음은 글쓰기 페이지에 Bootstrap을 적용했다.
4행은 앞페이지와 동일하고…
10행에서
태그 내의 HTML 객체들을 form-group 이라는 form의 기본 CSS 클래스로 묶어 공통으로 적용해주었다. 사실 이 태그를 빼도 브라우저에 표시되는 디자인은 변화가 없는데… 부트스트랩의 도움말 페이지에서는 이렇게 묶어줄 것을 권고하고 있다.
12행에서 <input type=”text” ~~ 에는 form-control 이라는 클래스를 적용했다.
이하도 비슷하다. 이렇게 적용하면 다음과 같이 입력창이 바뀐다.
화면엔 표시되지 않았지만 입력창에 포커스를 가져가면 입력창이 하일라이트 되는 효과도 적용되었다.
마지막으로 글 하나의 내용을 보는 페이지다.
이 소스코드는 다음과 같이 표시된다.
다음은 글의 수정과 업데이트를 처리하는 페이지를 코딩하고 부트스트랩을 적용해보자.
#bootstrap #부트스트랩