[DJANGO 기초] 5. Static 파일 관리, 부트스트랩 CSS 테마 적용

silversu 2021. 6. 19. 12:26

2021. 6. 19. 12:26

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/14

[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조 - T, V 작성)

본 프로젝트는 패캠 강의를 참고 합니다. <이전 글> https://silvercoding.tistory.com/13 https://silvercoding.tistory.com/12 https://silvercoding.tistory.com/11 [DJANGO 기초] 가상환경 설정 및 앱 생성..

silvercoding.tistory.com

CDN

부트스트랩 CDN은 Content Delivery Network의 약자로, 외부에 있는 CSS또는 Javascript주소를 가져올 수 있도록 해주는 서비스이다.

간략한 개념을 보고 넘어가도록 하자. CSS나 Javascript와 같은 파일이 원본 서버에 들어가있고 여러개의 서버로 분산되어 있는 것이다. 만약 우리나라에서 글로벌 서비스를 하게 되면 서버가 한국에 있게 되고, 그럼 원본이 한국에 있게 된다. 그렇게 되면 미국에 있는 사용자는 멀리 있는 서버 탓에 느린 서비스를 제공받게 된다. 그래서 중간에 여러 서버들을 두는 것이다. 나라별로 서버를 뿌려놓는 것이다. 이처럼 자신에게 빠른 곳으로 접속해서 받아가는 서비스가 CDN 이다.

본 프로젝트에서 쓰인 CSS 링크도 원본에 있는 데이터를 가져온 게 아니라 현재 pc에서 가장 빠른 서버에서 가져온 것이다.

(더 자세히 알아보려면)

CDN 참고 문서

https://docs.microsoft.com/ko-kr/azure/cdn/cdn-overview

CDN(콘텐츠 배달 네트워크)이란? - Azure

Azure CDN(Content Delivery Network) 무엇인지 알아보고 고대역폭 콘텐츠를 배달하는 방법을 알아봅니다.

docs.microsoft.com

기존에 이러한 CDN을 사용하여 CSS를 사용하였다. 이번 글에서는 CDN을 쓰지 않으면서 CSS를 적용하는 방법을 알아볼 것이다.

직접 만든 CSS 파일을 적용하려면

1. static 폴더 만들기

community ---> static 폴더 생성

생성한 static 폴더에서 css, javascript 파일 관리를 하게된다.

settings.py

...
import os

...

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

...

이미 STATIC_URL 작성되어있다. 이제 css파일에 접근했을 때 그게 어디파일에 있는지를 알려주어야 한다.

STATICFILES_DIRS = [] 리스트를 만들어 폴더를 넣어주면 된다. BASE_DIR 는 프로젝트 폴더인 community이고, 생성한 static 폴더와 join해준다. os를 import하는 것도 잊지 말자.

2. CSS 파일 준비

백엔드 중심의 프로젝트이므로 직접 CSS 파일을 만들지 않고 부트스트랩의 테마를 사용할 것이다.

<bootstrap 4.3 themes free>

https://bootswatch.com/

Bootswatch: Free themes for Bootstrap

Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.

bootswatch.com

이곳에서 마음에 드는 테마를 골라서

bootstrap.min.css 를 다운받아준다.

다운받은 파일을 static폴더에 옮겨준다.

이제 모든 준비를 마쳤고, html에 적용해준 다음 결과 확인을 해본다.

3. html에 CSS 적용해주기

user ---> templates ---> register.html

원래 코드

...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

...

CSS 테마 적용 코드

...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

...

link 태그만 바꾼다. static 폴더의 css 파일을 연결 해주면 된다.

모두 마친 후 서버에 들어가보면 이렇게 화려한 테마가 적용이 된 것을 볼 수 있다!

다음 글에서는 세션 및 로그인을 알아 보도록 한다.

'웹 > Django' 카테고리의 다른 글

[DJANGO 기초] 7. Template 확장, 상속 (0)	2021.06.19
[DJANGO 기초] 6. 세션, 로그인 페이지 구현 (0)	2021.06.19
[DJANGO 기초] 4. 회원가입 페이지 만들기 (MTV 구조 - T, V 작성) (0)	2021.06.16
[DJANGO 기초] 3. Django admin, 개발 서버 활용 (0)	2021.06.14
[DJANGO 기초] 2. MTV의 Model 생성, sqlite db 기본적인 관리 (0)	2021.06.14

🤍

[DJANGO 기초] 5. Static 파일 관리, 부트스트랩 CSS 테마 적용

'웹 > Django' 카테고리의 다른 글

+ Recent posts

티스토리툴바