이번에는 만들어놓은 장고 프로젝트에 부트스트랩을 적용해보려고 한다.
1. 부트스트랩(bootstrap)이란?
부트스트랩은 동적 웹사이트를 위한 CSS 프레임워크 중 한 종류라고 한다.
웹 사이트를 만들기 위해서는 HTML, CSS, Javascript를 조합하여 만드는데, HTML은 기본적으로 화면의 내용이나 뼈대를 구성하고, CSS는 폰트나 이미지, 색상같은 디자인적 요소를 담당하며 Javascript는 버튼이나 화면 동작같은 element 동작이나 서버와의 통신 등을 담당한다. 실무에서도 많이 사용되니 알아두는 것이 좋을 것 같다.
2. 부트스트랩 적용하기
부트스트랩 공식 홈페이지에 접속한다. 메인 화면처럼 바로 다운로드 시켜서 적용시켜도 되지만, 오늘은 몇 줄의 코드를 이용해 빠르게 부트스트랩을 적용시켜보려고 한다.
위 쪽 상단의 [Documentation] 탭을 클릭한다. 다음과 같은 창이 뜰 것이다.
위 같은 창이 나타났다면, CSS와 JS 탭에 있는 소스코드를 복사한다.(<link rel~과 <script src~ 부분을 말한다.)
이를 base.html의 head 태그 안쪽에 입력해준다.
혹시, base.html이나 templates 폴더가 없는 분들은 다음 링크를 참고하면 될 것 같다.
[+] django project에 템플릿 확장하기
메뉴바나 타이틀같이 어느 페이지를 접속해도 공통적으로 쓰이는 부분이 있다. 이런 영역을 메인 메뉴 혹은 GNB(Global Navigation Bar)라고 한다. django에서는 템플릿 확장이라는 방법을 사용한다. 레이아웃 부..
soy3on.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
새로고침을 하면 적용된 것을 확인할 수 있을 것이다.
간단하다!!!
'프로젝트 > 파이썬 장고를 이용한 웹페이지 만들기' 카테고리의 다른 글
| [+] django project에 템플릿 확장하기 (0) | 2020.04.18 |
|---|---|
| 9. 튜토리얼 따라하기 - 설문조사(4) (0) | 2020.02.14 |
| 8. 튜토리얼 따라하기 - 설문조사(3) (0) | 2020.02.07 |
| 7. 튜토리얼 따라하기 - 설문조사(2) (0) | 2020.02.06 |
| 6. 튜토리얼 따라하기 - 설문조사(1) (0) | 2020.02.02 |
