[day-34] 부트스트랩 적용

기본적인 흐름은 전과 같다. 템플릿을 적용하는 부분에서 차이가 있는데 이에 대해 짚고 넘어가자.

템플릿 적용

템플릿을 적용하는 방식에는 2가지 방식이 있다.

• settings.py에서 BASE_DIR / templates로 설정하는 방법

  • 루트 디렉토리의 템플릿 폴더에서 모든 템플릿을 정의
  • 관리하기 편하고 템플릿 구조를 한 눈에 파악 가능
  • 프로젝트가 크고 복잡할수록 이름의 충돌 발생
  • 특정 앱과 관련된 템플릿 찾기 힘듬

• settings.py 기본 세팅

  • 각 앱마다 템플릿 폴더를 가짐
  • 재사용 쉬움
  • 전체적인 템플릿 구조 파악이 어려움

상황에 맞게 사용한다.

부트스트랩 적용

static 폴더 생성

settings.py에서 다음과 같이 선언한다.

STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"]

이후, static 폴더를 생성한 후 해당 폴더에 부트스트랩 파일을 그대로 집어넣는다.

base.html 생성

부트스트랩을 활용할 앱의 템플릿에 base.html을 생성한다. 수정할 부분만

{% block contents %}
    {% endblock %}

위와 같이 설정한다. 이 파일을 기본 베이스로 수정할 것이라는 이야기이다.

상속받는 html 생성

base.html의 내용을 조금 수정해서 사용할 html을 생성한다.

    {% extends 'base.html' %}
    {% block contents %}
    {% load static %}
    ... 내용 ....
    {% endblock %}

urls.py, views.py 연결 확인

부트스트랩과 잘 연결되어 있는지 확인하면 끝이다.

# blog > urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.blog_list, name="blog_list"),
    path("<int:pk>/", views.blog_detail, name="blog_detail"),
]

# blog > views.py 

blog_database = ...

def blog_list(request):
    context = {"blog_list": blog_database}
    return render(request, "blog/blog_list.html", context)


def blog_detail(request, pk):
    context = {"blog": blog_database[pk - 1]}
    return render(request, "blog/blog_detail.html", context)