[Django] 정적(static)파일 관리하기 / 2021.08.27

* 참고 자료 : 코드잇 Django 강의

* 코드잇에서 제공하는 파일을 사용하겠습니다.


1. 정적 파일 (static files)
정적 파일이란 html 파일을 제외하고 웹 페이지를 렌더링 하는 과정에서 필요한 추가적인 파일들을 말한다.
예를 들어 css, javascript, img, font 파일 등을 말한다.

(1) 정적 파일 디렉터리 만들기
먼저 우리가 작업하고 있는 foods앱 안에 정적파일 관리를 위한 static디렉터리를 생성하고

static

static 디렉터리안에 앱 이름과 같은 foods 디렉터리를 생성하자.

static안의 foods

(2) 하위 디렉터리 만들기
static/foods 디렉터리 안에 정적 파일들을 그냥 넣을 수도 있지만 보통은 나누어서 하위 디렉터리를 생성해준다.
static/foods 디렉터리 하위에 css, images, fonts 디렉터리를 생성해주자.

static/foods안의 css, fonts, images

그리고 코드잇에서 제공하는 각각의 파일들을 폴더에 넣어주었다.

2. 정적 파일 사용하기
정적 파일을 사용하기 위해 각각의 코드를 수정해주자.

(1) 템플릿 파일
코드 맨위에

{% load static %}

이 코드를 넣어주어야 하는데 이 코드는 템플릿 태그이며
static에 있는 정적 파일을 현재 이 템플릿 파일에서 사용한다고 알려주는 것이다.

1 - 1) css의 경로

<link rel="stylesheet" href={% static 'foods/css/style.css'%}>

css의 경로를 foods디렉터리안의 css디렉터리 안의 style.css라고 변경해주어야 한다.

사이트를 실행해보면,

출처: 코드잇

이렇게 css가 적용된 페이지를 확인할 수 있다.

1 - 1) image의 경로

<img src={% static "foods/images/chicken.jpg"%} width="300px" height="200px"/>

이미지의 경로를 foods디렉터리 안의 images디렉터리 안의 chicken.jpg로 변경해주어야 한다.

사이트를 실행해보면,

출처: 코드잇

이렇게 이미지가 잘 나오는 것을 확인할 수 있다.