ACHO.pk devlog

[멋쟁이사저처럼10기] Django static 파일 다루기 본문

멋쟁이사자처럼

[멋쟁이사저처럼10기] Django static 파일 다루기

Acho 2022. 6. 26. 12:01

아마도 어플리케이션에서 템플릿 만드는 과정을 설명하는 건 이번까지가 마지막일 것이다. 

혹시 내 블로그를 보고 궁금한 게 있다면 댓글 또는 이전 블로그를 확인하기 바란다.

웹 서비스 내부 데이터에는 static과 media 파일이 있다.

static : 웹 서비스 내부에서 사용자들을 위해 미리 준비한 데이터

media : 사용자가 업로드한, 사용자에 의한 데이터

 

Django는 settings.py에서 static 파일을 관리한다.

 

    -STATICFILES_DIRS: static 파일들의 경로 작성

 

    -STATIC_ROOT : 배포를 하기 위해 특정 파일에 static 파일들을 복사하여 모아 놓을 경로

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

 

    -STATIC_URL : static파일을 제공할 url

 

static 파일을 다루는 방법

 

1. 'staticapp' 이라는 어플리케이션을 생성하고 등록한다. 어플리케이션 이름은 자유.

2. 우리가 만든 프로젝트 폴더 안에 있는 urls.py 파일에 아래 코드를 적는다.

from django.contrib import admin
from django.urls import path
from staticapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home)
]

 

3. 1번에서 만든 어플리케이션 폴더 안에 있는 views.py 파일에서 html과 연결해 줄 함수를 생성한다.

from django.shortcuts import render

# Create your views here.

def home(request):
    return render(request, 'home.html')

 

4. 1번에서 만든 어플리케이션 폴더 안에 templates 폴더를 생성하고 templates 폴더 안에 3번에서 만든 html 이름과 같은 html 파일을 생성한다. 

    · tip : vs code 오른쪽 하단에 HTML 또는 Django Templates로 되어있는 걸 확인할 수 있는데, 후자일 경우 이를 html로 바꿔주고, 코드창에 html쳤을 때 자동완성으로 뜨는 html:5를 선택하면 자동으로 html 기본 코드가 작성된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<div>Hello Static !! </div>
</body>
</html>

 

5. 우리가 만들어 놓은 프로젝트 폴더 안에 있는 settings.py 파일에 들어간다. 제일 하단에 아래 코드를 추가한다.

   최상위 디렉토리인 베이스 디렉토리 아래에 static이라는 폴더를 생성하여 static 파일들을 생성한다는 뜻이다.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

**** 어플리케이션 별로 Static Files을 따로 관리하고 싶을 경우 (해당 어플리케이션 폴더 아래에 'static' 폴더 생성) **** 

베이스 디렉토리 아래, staticapp 디렉토리 아래, static.를 의미한다.

import os

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

 

 

6. 새로 만든 static 폴더 안에  style.css 파일을 생성하고, 이미지 파일을 불러온다.

 

 

 

body{
    text-align: center;
}

프로젝트 디렉토리 하단

프로젝트 디렉토리 하단
어플리케이션 디렉토리 하단

div {
    border: 4px dotted black;
}

어플리케이션 디렉토리 하단

 

 

 

우리가 만든 html 파일에 설정하고 만든 static 파일을 갖고와서 쓸 수 있어야한다.

여기서 {% %} 이것을 '템플릿 언어'라고 한다. 

 

STATICFILES_DIRS 에 적어놓은 static 파일들을 해당 html에 로드해서 사용할 수 있게 한다.

static 파일 불러오기

{% load static %}

<head>
	<link rel = "stylesheet" type ="text/css" href="{% static 'css/style.css' %}">
	<link rel = "stylesheet" type ="text/css" href="{% static 'mycss/style2.css' %}">
</head>
<body>
	<img src = "{% static 'img/frog.jpg' %}" width="50%">
</body>

 

최종 결과

css 적용된 결과물

 

우리가 만든 static 파일을 모두 모아 배포를 하기 때문에 어떤 파일이나 경로에 모을지 작성해줄 필요가 있다.

'staticfiles'라는 폴더에 static 파일을 모두 모아준다는 뜻이다.

STATIC_ROOT = os.path.join('staticfiles')

 

static 파일들을 모두 모아주는 명령어 

$ python manage.py collectstatic

이 명령어를 실행하고 나면 'staticfiles'가 생성된 것을 확인할 수 있다.

'멋쟁이사자처럼' 카테고리의 다른 글

[멋쟁이사저처럼10기] Django template 언어와 속성, 네임스페이스(url 이동)  (0) 2022.06.26
[멋쟁이사저처럼10기] bootstrap 다루기  (0) 2022.06.26
[멋쟁이사자처럼10기] Django url mapping 다루기  (0) 2022.05.29
[멋쟁이사자처럼10기] 가상환경 설정하고 Django 시작하기  (0) 2022.05.23
[멋쟁이사자처럼10기] Django와 친해지기  (0) 2022.05.21
'멋쟁이사자처럼' Related Articles more
Comments