달나라 노트

Python django project 1 - 게시판 만들기 ch.9 : static 파일(Bootstrap 디자인 변경) 본문

Python django/Python django project 1

Python django project 1 - 게시판 만들기 ch.9 : static 파일(Bootstrap 디자인 변경)

CosmosProject 2020. 12. 20. 22:10
728x90
반응형

 

 

자 이제 어느정도 화면과 기능을 구성해봤는데요.

우리는 지금까지 bootstrap을 이용하고있었습니다.

 

근데 만약 좀 검정 배경의 테마를 적용하고싶다면 어떻게 해야할까요?

물론 css를 직접 작성해도 되지만 bootswatch를 이용하여 미리 만들어진 bootstrap 템플릿을 이용해봅시다.

 

bootswatch.com/

 

위 주소에 접속해보면 여러 테마를 다운받을 수 있는데요.

 

전 Slate라는 좀 어두운 배경의 css를 다운받아 보겠습니다.

 

 

 

 

그리고 django proejct의 pro/ 디렉토리에 static이란 디렉토리를 만들고, 그 안에 다운받은 css파일을 넣어줍니다.

 

 

 

이제 css파일을 적용시켜야하는데 pro/pro/settings.py에 STATIC_URL = '/static/' 라는 내용이 있을텐데 그 아래에 아래처럼 static file의 경로를 추가해줍니다.

 

"""
Django settings for pro project.

Generated by 'django-admin startproject' using Django 2.2.5.

For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

...

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

제가 추가한 부분은 STATICFILES_DIRS 인데, 이것은 bootstrap.min.css 파일이 있는 경로를 명시해주는 겁니다.

BASE_DIR은 root directory를 나타내는데 한번 보면

 

/django_web/pro 이렇게 가장 상단의 pro 디렉토리를 의미합니다.

따라서 os.path.join(BASE_DIR, 'static')은 /django_web/pro/static을 의미하고, 이 디렉토리에 바로 css파일이 있게 되는거죠.

 

 

 

 

이제 이 css파일을 템플릿에도 적용시켜야하는데, pro/app/user/templates/base.html 파일의 link 태그를 아래처럼 수정합니다.

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

        <link rel="stylesheet" href="/static/bootstrap.min.css"/>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

        {% block header %}
        {% endblock %}
    </head>

    <body>
        <div class="container">
            {% block body %}
            {% endblock %}
        </div>
    </body>
</html>

보면 link 태그의 href가 방금 가져온 bootstrap css 파일을 참조하고 있음을 알고 있습니다.

 

 

 

 

 

여기까지하고 다시 127.0.0.1:8000 주소로 들어가보면

이렇게 모든 테마가 바뀐 것을 알 수 있습니다.

 

 

 

728x90
반응형

'Python django > Python django project 1' 카테고리의 다른 글

Python django project 1 - 게시판 만들기 ch.11 : 게시글 등록 기능 만들기  (0) 2020.12.21
Python django project 1 - 게시판 만들기 ch.10 : 게시글 목록 만들기  (0) 2020.12.20
Python django project 1 - 게시판 만들기 ch.8 : 로그인  (0) 2020.12.20
Python django project 1 - 게시판 만들기 ch.7 : 회원가입  (0) 2020.12.13
Python django project 1 - 게시판 만들기 ch.6 : template & view  (0) 2020.12.13
'Python django/Python django project 1' Related Articles more
Comments