이전의 포스트들에서 작성했던 HTML파일들을 보여드리면 정말 초라하기 그지없었습니다.
이는 당연하게도 CSS와 Javascript 등의 기능이 완전 배제된 Text 위주의 페이지였기 때문입니다.
여기서 저는 Flask를 좀 더 화끈한 페이지로 만들어보고자 부트스트랩(Bootstrap)을 함께 연동하는 방법을 알아보고자 합니다.
다른 플라스크 예제는 아래의 링크를 살펴봐주시기 바랍니다~
[Python Flask] 웹 페이지 만들기 01 - 환경 설정
[Python Flask] 웹 페이지 만들기 02 - 기본 파일 작성하기
[Python Flask] 웹 페이지 만들기 03 - 파이썬에서 웹으로 값 전달
[Python Flask] 웹 페이지 만들기 05 - MySQL 연동하기(pymysql)
[Python Flask] 웹 페이지 만들기 06 - MySQL 연동하기(DB 클래스 생성)
01. 부트스트랩(Bootstrap) 다운로드
부트스트랩을 다운로드 하는 페이지는 다음과 같이 나타나 있습니다.
여기서 [부트스트랩 다운로드]를 클릭합니다.
부트스트랩 파일을 다운로드 받으면 다음과 같은 압축파일이 다운받아집니다.
여기 있는 파일을 모두 [static] 폴더에 옮겨주시기 바랍니다.
여기까지 옮겼다면 바로 HTML 소스를 수정해봐야겠지요!
02. 부트르스탭 적용 및 HTML 파일 수정
이제 부트스트랩을 다운받았다면 다음과 메인 페이지의 HTML 소스를 다음과 같이 수정해볼 수 있습니다.
수정할 파일은 이전 포스트에서 작성했던 index.html 파일입니다.
<!DOCTYPE html>
<!-- saved from url=(0049)http://bootstrapk.com/examples/starter-template/# -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://bootstrapk.com/favicon.ico">
<title>[Python Flask] 웹 페이지 만들기 - kkamikoon</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://bootstrapk.com/examples/starter-template/#">[Python-Flask-Building-Web-Page]</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://bootstrapk.com/examples/starter-template/#">Home</a></li>
<li><a href="http://bootstrapk.com/examples/starter-template/#about">About</a></li>
<li><a href="http://bootstrapk.com/examples/starter-template/#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body></html>
위의 소스의 원본은 다음 링크에서
이 예제에서 수정해준 부분은 중요표시를 해두었습니다.
모두 경로를 바꾸어주었는데, static 폴더 아래에 저장한 css 혹은 js 경로를 바꾸어주었습니다.
단, 여기서 우리가 따로 다운로드하지 않은 소스가 있습니다.
18번 라인과 58번 라인입니다.
해당 라인의 소스는 아래에서 다운로드 받으실 수 있습니다.
jquery.min.js혹은 부트스트랩 스타터 템플릿 예제 링크를 들어가셔서 Ctrl + s를 하시면 HTML 파일과 함께 폴더가 생성됩니다.
해당 폴더 내부에 위 파일들이 다운로드되어 있는 것을 볼 수 있으니 편한 방법으로 사용하시면 되겠습니다.
03. 결과
위의 소스를 index.html에 작성했다면 다음과 같이 나타날 것입니다.
'PYTHON > Python Flask' 카테고리의 다른 글
| [Python Flask] 웹 페이지 만들기 06 - MySQL 연동하기(DB 클래스 생성) (20) | 2019.02.27 |
|---|---|
| [Python Flask] 웹 페이지 만들기 05 - MySQL 연동하기(pymysql) (2) | 2019.02.27 |
| [Python Flask] 웹 페이지 만들기 03 - 파이썬에서 웹으로 값 전달 (17) | 2019.02.26 |
| [Python Flask] 웹 페이지 만들기 02 - 기본 파일 작성하기 (58) | 2019.02.25 |
| [Python Flask] 웹 페이지 만들기 01 - 환경 설정 (5) | 2019.02.20 |