안녕하세요. 오늘은 장고에서 부트스트랩 테마를 적용해보겠습니다 :D
부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크로, 반응형 웹 페이지 구현에 많이 사용되는데요.
모바일/PC 에 최적화된 웹 페이지를 구현할 수 있을 뿐 아니라 빠르게 HTML을 구성할 수 있습니다.
오늘은 아래 free template 사이트에 올라와있는 bootstrap 템플릿을 이용할 예정입니다.
URL : https://startbootstrap.com/template/shop-homepage
목차
1. 프로젝트 구성도
2. 환경 구축
3. MVT 패턴 구축
4. 부트스트랩 테마 적용
📌1. 프로젝트 구성도
프로젝트 구성도는 다음과 같습니다. (프로젝트 이름 : blog / 앱 이름 posts)
blog (settings.py 등) / posts (static, templates, urls.py, views.py 등)
📌 2. 환경 구축
먼저, 로컬 PC에 부트스트랩이 설치되어있지 않은 경우 pip 명령어를 통해 부트스트랩을 설치합니다.
pip install bootstrap4
이후 장고 프로젝트 내 환경 파일(setting.py)의 INSTALLED_APPS에 bootstrap4 을 포함시킵니다.
> settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap4',
'posts',
]
그리고 settings.py 최하단에 STATIC_URL 을 '/static/' 으로 선언합니다.
장고에서 CSS/JS/IMG 등의 파일 등은 정적(static)파일로 분류합니다.
이러한 정적 파일들을 저장하겠다는 스태틱 디렉터리 경로를 추가해줍니다.
STATIC_URL = '/static/'
📌 3. MVT 패턴 만들기
이제 장고의 MVT 패턴에 의해 URL-VIEW-TEMPLATE 을 작성해보겠습니다. 장고는 MVT패턴, 모델/뷰/템플릿 패턴에 의해 동작하는데요. 본 글에서는 디비를 연동하지 않으므로 모델을 선언하지 않고 VT, 즉 뷰와 템플릿만 작성해보겠습니다.
1) urls.py
urls.py에서 개발 서버 실행시 index.html 을 실행시킬 경로를 작성합니다.
from django.urls import path, include
from . import views
app_name = 'posts'
urlpatterns = [
path('index',views.index),
]
2) views.py
MVT패턴의 'V(View)'를 구현합니다. 뷰에서는 /index 에 매핑될 index 함수를 구현해줍니다.
리턴 형식 render는 HttpResponse와 loads를 포함한 함수로 request, 템플릿 파일을 변수로 받아 Request를 반환하는 함수입니다. 즉, /index 실행시 index.html 로 매핑하게 해주는 함수입니다.
def index(request):
#코드 구현
return render(request, "index.html")
3) templates/index.html
이제 MVT패턴의 'T'를 작성합니다. 앱(posts) 내 templates 폴더를 생성하여 index.html 파일을 만듭니다.
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
</body>
</html>
📌4. 부트스트랩 테마 적용
장고에서 css/js/img 같은 파일은 정적으로 분류하므로, static 폴더에 저장합니다. 다운 받은 bootstrap 템플릿의 assets/css/js폴더를 static 파일에 복사하세요 :D 이후 index.html은 templates 폴더 안에 덮어씁니다.
부트스트랩 구조
· static/assets (이미지 등 파일)
· static/css (css 파일)
· static/js (js 파일)
· templates/index.html
index.html
이후 index.html 에서 최상단에 static 폴더 위치가 있는 곳을 명시합니다.
{% load static %}
이제 style.css / script.js 파일을 스태틱디렉터리에 저장된 경로로 연결할 것입니다.
1) 부트스트랩 테마의 static 디렉터리의 style.css 와 연결합니다. (index.html 13번째줄 수정)
<link href="{% static 'css/styles.css' %}" rel="stylesheet" />
2) js도 static 디렉터리의 script.js 와 연결합니다. (index.html 266번째 줄 수정)
<script src="{% static 'js/scripts.js'%}"></script>
개발 서버 실행
이후 python manage.py runserver 를 통해 개발서버를 실행하고,
127.0.0.1/index에 접속하면 부트스트랩 테마가 적용된 모습을 볼 수 있습니다.
감사합니다 :D
'BE > Django' 카테고리의 다른 글
| [django] 장고 ORM 데이터 CRUD(Create,Read,Update,Delete) (0) | 2021.11.11 |
|---|---|
| [django] REST API GET/POST 구현 (2) | 2021.07.12 |
| [django] swagger로 REST API 문서 만들기 (1) | 2021.07.11 |
| [django] 어드민 계정 생성 및 비밀번호 초기화 (0) | 2021.06.29 |
| [django] 웹페이지 만들기 (3) - 뷰 생성하기 (0) | 2021.06.28 |
