안녕하세요. 오늘은 장고에서 부트스트랩 테마를 적용해보겠습니다 :D 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크로, 반응형 웹 페이지 구현에 많이 사용되는데요. 모바일/PC 에 최적화된 웹 페이지를 구현할 수 있을 뿐 아니라 빠르게 HTML을 구성할 수 있습니다. 오늘은 아래 free template 사이트에 올라와있는 bootstrap 템플릿을 이용할 예정입니다. URL : https://startbootstrap.com/template/shop-homepage 목차 📌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
그리고 settings.py 최하단에 STATIC_URL 을 '/static/' 으로 선언합니다. 장고에서 CSS/JS/IMG 등의 파일 등은 정적(static)파일로 분류합니다. 이러한 정적 파일들을 저장하겠다는 스태틱 디렉터리 경로를 추가해줍니다.
📌 3. MVT 패턴 만들기 이제 장고의 MVT 패턴에 의해 URL-VIEW-TEMPLATE 을 작성해보겠습니다. 장고는 MVT패턴, 모델/뷰/템플릿 패턴에 의해 동작하는데요. 본 글에서는 디비를 연동하지 않으므로 모델을 선언하지 않고 VT, 즉 뷰와 템플릿만 작성해보겠습니다. 1) urls.py urls.py에서 개발 서버 실행시 index.html 을 실행시킬 경로를 작성합니다.
2) views.py MVT패턴의 'V(View)'를 구현합니다. 뷰에서는 /index 에 매핑될 index 함수를 구현해줍니다. 리턴 형식 render는 HttpResponse와 loads를 포함한 함수로 request, 템플릿 파일을 변수로 받아 Request를 반환하는 함수입니다. 즉, /index 실행시 index.html 로 매핑하게 해주는 함수입니다.
3) templates/index.html 이제 MVT패턴의 'T'를 작성합니다. 앱(posts) 내 templates 폴더를 생성하여 index.html 파일을 만듭니다.
📌4. 부트스트랩 테마 적용 장고에서 css/js/img 같은 파일은 정적으로 분류하므로, static 폴더에 저장합니다. 다운 받은 bootstrap 템플릿의 assets/css/js폴더를 static 파일에 복사하세요 :D 이후 index.html은 templates 폴더 안에 덮어씁니다. 부트스트랩 구조 · static/assets (이미지 등 파일) · static/css (css 파일) index.html 이후 index.html 에서 최상단에 static 폴더 위치가 있는 곳을 명시합니다. {% load static %} 이제 style.css / script.js 파일을 스태틱디렉터리에 저장된 경로로 연결할 것입니다. 1) 부트스트랩 테마의 static 디렉터리의 style.css 와 연결합니다. (index.html 13번째줄 수정) <linkhref="{% static 'css/styles.css' %}"rel="stylesheet" /> 2) js도 static 디렉터리의 script.js 와 연결합니다. (index.html 266번째 줄 수정) <scriptsrc="{% static 'js/scripts.js'%}"></script> 개발 서버 실행 이후 python manage.py runserver 를 통해 개발서버를 실행하고, 127.0.0.1/index에 접속하면 부트스트랩 테마가 적용된 모습을 볼 수 있습니다. 감사합니다 :D |