원래 구현하고자 했던 반응형 웹페이지를 위해 bootstrap을 적용하려고 한다.
Django에 bootstrap 적용하는 방법을 알아보자.
1. bootstrap 테마를 다운로드
적용하고 싶은 테마를 찾아 다운로드 해보자.
https://startbootstrap.com/ 요기서!
적용하고 싶은것;; 모르겠고 그냥 무료 첫번째거 받았다. 연습하려고.
다운로드 받으면 zip파일 상태이다. 압축을 풀어준다.
2. django app 생성하기.
원래 만들어져 있던 프로젝트 hello_django에 app을 하나 새로 만든다.
bootstrap study용 app이다~~
app을 생성했으니 settings의 INSTALLED_APPS에 추가해주어야 한다.
hello_django\hello_django\settings.py
사실 이거안해줘서 template없다고 계속 에러나고 난리였음.
settings.py에 하나 더 추가해주어야 할 것은 bootstrap templates 관련 변수이다.
STATIC_URL이라는 변수는 기본적으로 정의되어 있다.
2. templates 생성
내 app안에 templates를 생성해주고, index.html도 생성해준다.
{appname}/index.html
index.html 내용 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
</html>
위 index.html 템플릿을 보여줄 view도 작성해준다.
hello_django\bootstrap_study\views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')views.py에 index 함수를 추가해주었다.
index화면에 접근할 url 설정하기
먼저 hello_django\hello_django\urls.py를 열어 아래 코드를 추가하고,
"""hello_django URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('mydjango/', include('mydjango.urls')),
path('polls/', include('polls.urls')),
path('bootstrap_study/', include('bootstrap_study.urls')),
]
다음으로 hello_django\bootstrap_study\urls.py 를 새로 생성하여 아래 코드를 입력해준다.
from django.urls import path
from . import views
appname='bootstrap_study'
urlpatterns = [
path('', views.index, name='index'),
]
그리고 index page가 나오는지 확인하기 위해 서버를 실행시켜 준다.
python manage.py runserver
아무것도 없는 페이지를 만들었다.
2. bootstrap 적용하기.
app 안에 static이라는 폴더를 생성한다.
그리고 static 안에 처음에 다운로드 받았던 bootstrap의 파일들을 복사해준다.
뭐가 참 많다.
이렇게 하고나서 서버를 실행시켜 확인해보면 아래와 같이 나온다.
ㅋ 뭔가 2% 부족한데.
{appname}/index.html file을 열어 맨 위에 아래 코드를 추가해주고,
{% load static %}
css파일 경로들을 변경해준다.
기존 :
수정후 :
css가 있는 부분들 모두 바꿔주어야 한다.
최종 화면 :
(구석탱이에 그림하나가 안뜨는데 나중에 보자 패스~~)
참고한 블로그 :
tunghs.github.io/2019/09/07/2019-09-07-Apply-Django-Bootstrap/
Django Bootstrap 적용하기
화면 구현Djagno 프로젝트와, 앱을 생성했다는 가정하에 시작한. 내 Django 프로젝트의 구조는 아래와 같다. 간단하게 모듈 디렉토리와 프로젝트 디렉토리 구조만 첨부했다. 12345678910111213141516WebTest/
tunghs.github.io
django bootstrap 적용
django project를 생성한 후에 app을 하나 생성합니다.(저는 project의 이름을 portfolio, app의 이름을 main이라고 지었습니다.) project폴더안에 static이라는 폴더를 생성한 뒤 settings.py의 마지막부분을 다..
usang0810.tistory.com
부트스트랩(bootstrap) django에 연결하기
부트스트랩 템플릿을 연결하는 연습을 하기 위해서 일단 아래의 부트스트랩 템플릿 파일을 다운 받는다. 1. 압출파일을 열어보면 아래와 같은 파일들이 들어있다. 2. 이 중에서 index.html을 복사해
pyrois.tistory.com
하나만 보면 모르겠어서 계속 검색하다 보니 잔뜩 봤다.... 그런데도 엄청 헤맸다. 휴...
'개발Study > web' 카테고리의 다른 글
| django port 접근 허용하기 (0) | 2022.01.28 |
|---|---|
| powerMockup (0) | 2020.12.03 |
| Django template (0) | 2020.11.22 |
| Django 지름길 (0) | 2020.11.22 |
| Django admin 비밀번호 분실했을 때 (0) | 2020.11.15 |
댓글