[Django] Bootstrap4에 대해 알아보고 Django에 Bootstrap4 부트스트랩 적용하기
__Evening
[Django] Bootstrap4에 대해 알아보고 Django에 Bootstrap4 부트스트랩 적용하기Framework/Django2021. 1. 30. 22:12@__Evening
Table of Contents
반응형

안녕하세요

​

이번 시간에는 Bootstrap4에 대해 알아보고 Django에 Bootstrap4를 적용하는 실습을 진행하겠습니다. 

 

1. Django Bootstrap4 란?

Django 프레임워크에서 Bootstrap 4를 사용하기 쉽게 만들어주는 라이브러리입니다. Bootstrap 4는 웹 개발에서 가장 인기 있는 프론트엔드 프레임워크 중 하나로, HTML, CSS, JavaScript 코드를 재사용할 수 있는 컴포넌트와 클래스를 제공하여 개발자가 웹 페이지를 쉽게 디자인하고 구현할 수 있도록 도와줍니다.

 

Django Bootstrap4는 Django 프로젝트에 Bootstrap 4를 적용하는 과정을 간소화합니다. Django Bootstrap4는 HTML 태그를 생성하는 Python 코드를 제공하여, 개발자가 HTML, CSS 및 JavaScript를 직접 작성하지 않고도 Bootstrap 4의 컴포넌트와 클래스를 사용할 수 있게 해줍니다. 이를 통해 개발 시간을 단축하고 코드의 가독성과 유지 보수성을 높일 수 있습니다.

 

2. Django Bootstrap4 장점 (사용하는 이유)

1. 개발 속도 향상

Django Bootstrap4는 Django 프로젝트에서 Bootstrap 4를 쉽게 적용할 수 있도록 도와주므로, 개발 속도를 향상시킬 수 있습니다.

 

2. 쉬운 사용성

Django Bootstrap4는 Python 코드를 사용하여 HTML 태그를 생성하므로, HTML, CSS 및 JavaScript를 직접 작성하지 않아도 되므로 쉽게 사용할 수 있습니다.

 

3. 일관된 디자인

Bootstrap 4의 컴포넌트와 클래스를 사용하면 일관된 디자인을 쉽게 구현할 수 있습니다.

 

4. 유지 보수성 향상

Django Bootstrap4는 코드의 가독성과 유지 보수성을 향상시키므로, 유지 보수성이 높은 Django 프로젝트를 구현할 수 있습니다.

 

5. 반응형 디자인

Bootstrap 4는 모바일 기기에 대한 반응형 디자인을 기본으로 제공하므로, Django Bootstrap4를 사용하면 모바일 기기에서도 웹 페이지를 쉽게 볼 수 있습니다.

 

3. Django에 Bootstrap4 설치하기

pip install django-bootstrap4

pip를 이용해서 django-bootstrap4를 설치해줍니다.

 

4. Django에 Bootstrap4 적용하기

1. Settings.py 파일에 'bootstrap4' 추가하기

INSTALLED_APPS = [
    ...
    'bootstrap4',
]

 

Settings.py을 열어서 [INSTALLED_APPS]에 'bootstrap4'를 등록합니다.

 

2. 템플릿에서 Bootstrap 4 적용하기

{% load bootstrap4 %}

템플릿 파일의 맨 위에 다음 코드를 추가합니다.

 

 

>> Bootstrap4 적용하는데 있어서 2가지 방법을 적용할 수 있습니다.

3. Bootstrap 4의 CSS 및 JavaScript 파일을 로드합니다.

{% bootstrap_css %}
{% bootstrap_javascript %}

이제 Bootstrap 4의 클래스와 컴포넌트를 사용할 수 있습니다.

 

3-1. Bootstrap4 CDN 적용하기

https://getbootstrap.com/docs/4.1/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

다음은 Bootstrap4 CDN입니다. [HTML]에서 <head></head> 사이에 삽입해주시면 사용하실 수 있습니다.

 

​5. 적용된 Bootstrap4 확인하기

0. 템플릿 확장 적용하기

[Django] Django에서 템플릿 확장의 개념과 템플릿 확장 적용하는 방법 실습하기 (tistory.com)

 

[Django] Django에서 템플릿 확장의 개념과 템플릿 확장 적용하는 방법 실습하기

안녕하세요 이번 시간에는 템플릿 확장에 대한 개념을 알아보고 템플릿 확장을 적용하는 방법에 대해 실습을 진행하겠습니다. 1. 템플릿 확장이란? Django에서 템플릿 확장(Template inheritance)은 여

eveningdev.tistory.com

 

1. 간단하게 Views.py 작성하기

from django.shortcuts import render

def post(request):
	return render(request, 'index.html', {})

 

2. 템플릿 상단에 Bootstrap4 추가하기

(1) 첫 번째 방법: Bootstrap 4의 CSS 및 JavaScript 파일을 로드하기

<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>
<!-- index.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% block content %}
    <button>Bootstrap4 미적용 버튼</button>
    <button class="btn btn-primary">Bootstrap4 적용 버튼</button>
<% endblock %>

 

(2) 두 번째 방법: Bootstrap4 CDN 추가하기

<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>
<!-- index.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
    <button>Bootstrap4 미적용 버튼</button>
    <button class="btn btn-primary">Bootstrap4 적용 버튼</button>
<% endblock %>

 

 

3. Urls.py 설정하기

from django.urls import path
from . import views

urlpatterns = [
    path('', views.post, name='index'),
]

 

4. 서버 실행하기

python manage.py runserver

Bootstrap4가 적용된 버튼과 적용이 되지 않은 버튼이 시각적으로 차이가 나는 것을 볼 수 있습니다.

 

이번 시간에는 Bootstrap4에 대해 알아보고 Django에 Bootstrap4를 적용하는 실습을 진행했습니다.

​

감사합니다.

반응형

'Framework > Django' 카테고리의 다른 글

[Django] Django ORM에 대해 알아보고 POST를 이용한 데이터베이스 저장하기  (0) 2021.01.30
[Django] Django에서 GET, POST 방식에 대해 알아보고 간단한 실습하기  (0) 2021.01.30
[Django] Django MTV(Model-View-Controller) 디자인 패턴 알아보기  (0) 2021.01.30
[Django] 웹 프레임워크 Django의 동작원리와 라우팅에 대해 알아보기  (0) 2021.01.30
[Django] Django 관리자 기능에 대해 알아보고 관리자 페이지 실습하기  (0) 2021.01.30
__Evening
@__Evening :: Good Evening

클라우드, 개발, 자격증, 취업 정보 등 IT 정보 공간

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

Framework/Django 추천 글
more
image

티스토리툴바