[Python/Django] 파이썬 주식 정보(뉴스) 페이지 만들기 - 3. 부트스트랩

2021.07.08 - [Python/Django(장고)] - [Python/Django] 파이썬 주식 정보(뉴스) 페이지 만들기 - 2. 네이버 API를 이용하여 검색정보 받아오기

[Python/Django] 파이썬 주식 정보(뉴스) 페이지 만들기 - 2. 네이버 API를 이용하여 검색정보 받아오기

이번 포스트에서는 부트스트랩을 이용하여 HTML 페이지를 살짝 꾸며보도록 하겠다.

 

 

 

1. 부트스트랩

 

http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

부트스트랩은 트위터에서 시작된 오픈소스 프론트엔드 프레임워크이며 여러 웹 디자인과 기능을 CSS, JavaScript로 만들어 쉽게 사용할 수 있도록 제작한 프레임워크이다.

 

 

 

https://getbootstrap.kr/docs/5.0/getting-started/download/

 

해당 웹사이트에서 다운로드할 수 있다. 

 

 

 

프로젝트 폴더(mysite)에 static이라는 이름으로 폴더를 하나 만들어 준다.

 

파일을 다운받고 압축을 풀어준 다음, css 폴더에서 bootstrap.min.css 파일을 static 폴더로 옮겨준다.

 

 

 

2. Django에서 부트스트랩 사용

 

https://getbootstrap.kr/docs/5.0/examples/

Examples

 

먼저 위 사이트에 접속하면 여러 예제들을 확인할 수 있다.

 

가져오는 방법은 크롤링과 유사한데, 여기서 제공하는 네비게이션 같은 기능을 사용하기 위해서는 JQuery라는것이 필요한데, 이는 추후에 다시 설명하도록 하겠다.

 

Examples에서 예제나 소스코드를 따로 다운받을 수 있다.

위 페이지의 예제에서 Blog라는 이름의 예제를 사용해보도록 하겠다.

 

 

다운로드한 파일들 중에서

index 라는 HTML파일은 templates 폴더에 넣고 css파일은 static 폴더에 넣어주도록 한다.

 

 

 

이렇게 넣어주면 된다.

 

 

#Django

{% load static %}

그리고 다음과 같이 최상단에 load static을 적용하여 static 폴더에 있는 내용들을 불러올수 있도록 설정한다.

static 폴더에 있던 파일들은 CSS파일이므로, 이를 호출한다고 생각하면 쉽다.

 

 

그리고 해당 부분도 다음과 같이 바꿔주도록 한다.

 

링크에 해당하는 부분들을 바꿔주어야 하는데, href로 불러오는 부분에서

bootstrap.min.css, blog.css, blog.rtl.css라는 이름으로 된 파일을 전부 static 폴더에서 로드할수 있도록 설정해준다.

 

<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{% static 'blog.css' %}" rel="stylesheet">

 

 

결과가 잘 나오는 모습을 확인할 수 있다.