38 부트스트랩 적용하기
38 부트스트랩? (Bootstrap)
부스트랩은 웹사이트 좀더 쉽게 빠르게 만들수 있게 도와주는 프레임워크입니다.
HTML, CSS, JS 가 테마, 템플릿 형태로 만들어져 있고, 크로스 브라우저 호환이 되어 크게 신경쓰지 않아서 좋습니다.
미리 디자인 되어 있는 사이트를 받아 수정해서 쓴다라고 생각하시면 됩니다.
38.2 부트스트랩 팀플릿 다운로드 - start Bootstrap
startbootstrap 사이트에서
SB Admin 이라는 템플릿을 다운받았습니다.
38.3 templates 디렉토리 위치 이동 - base.py
저와 동일하게 프로젝트 레이아웃을 구성하셨다면
templates 디렉토리를
myapp 밑으로 이동시켜 주시고,
base.py내의 templates_dir path 도 변경해주셔야 합니다.
뭔가 구조가 좀 이상하다 싶었는데,
부트스트랩 작업 할려고 보니 구조가 이상해서 변경했습니다.
TEMPLATES_DIR = os.path.join(APPS_DIR, 'templates')
디렉토리 이동과 base.py 변경이 되었으면
장고를 구동시켜 이상없는지 확인합니다.
python manage.py runserver
38.4 부트스트랩 js,css, 파일 복사
다운받은 부투스트랩 파일을 내 프로젝트 폴더로 옮기세요.
1) confg/settings/base.py 에 static에 대한 내용을 추가합니다.
2) myapp/ 에 static 폴더를 만듭니다.
3) 38.2 에서 다운로드파일 압축해제 후 dist안의 js, css, assets 폴더를 myapp/static 폴더로 복사합니다.
4) dist/index.html 을 myapp/templates에 복사합니다.
5) myapp/templates에 base폴더를 생성합니다.
#confg/settings/base.py
STATICFILES_DIRS = [os.path.join(APPS_DIR , "static")]
STATICFILES_FINDERS = ["django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",]
38.5 부트스트랩 인덱스 페이지 작업 - index.html
부트스트랩 인덱스 페이지를 띄워보겠습니다.
1) urls.py 에 index 경로를 설정합니다.
2) views.py에 index 관련 클래스를 하나 추가합니다.
3) index.html 파일에서 satic 파일의 경로를 변경합니다.
#myapp/blog/urls.py
path("", views.firstIndex.as_view(), name="first_index"),
#myapp/blog/views.py
class firstIndex(generic.ListView):
def __init__(self):
self.title_nm = "PytnoBlog에 오신것을 환영합니다. "
self.ogImgUrl = ""
self.descript = ""
self.template_name = "index.html"
def get(self, request, *args, **kwargs):
self.content = {"descript":self.descript,
"title_nm":self.title_nm,
"ogImgUrl":self.ogImgUrl,
"dataList":""}
return render(request, self.template_name, self.content)
#myapp/templates/index.html
{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet" />
38.6 부트스트랩 적용확인
style.css가 적용되었네요.
메뉴도 눌러보세요.
여기까지 개발하면서 텍스트 화면만 보다가
컬러가 적용되니 뭔가 뿌듯합니다.^__^