[Django] 스태틱 (11)

Study/Django

[Django] 스태틱 (11)

taecongs 2023. 9. 14. 10:21

스태틱(static) 디렉터리란?

웹 에서는 일반적으로 javaScript, css, image 등의 파일들을 사용하는데 이러한 파일들을 Django에서는 static파일이라 부른다. 이러한 static파일들의 체계적 관리를 위해 장고 프로젝트 디렉토리 (settings.py의 BASE_DIR) 에 static 서브폴더를 만들어 그곳에 static파일들을 관리한다.

(1) 스태틱(static) 디렉터리 설정하기

// (1) projects\mysite\config\settings.py 파일 수정하기
STATIC_URL = 'static/'
STATICFILES_DIRS = [ 
    BASE_DIR / 'static',
]

STATICFILES_DIRS이라는 리스트 변수를 추가한다.
STATICFILES_DIRS에는 BASE_DIR / 'static' 디렉터리를 추가한다.
BASE_DIR / 'static'은 C:\projects\mysite\static 디렉터리를 의미한다.
위의 과정을 진행 후 (mysite) c:\projects\mysite> mkdir static 폴더 생성한다.

(2) 템플릿 상속(base.html)을 통해 스타일 시트 정의하기

// (2) 기본 틀이 되는 base.html 템플릿 생성하기
{% load static %}
<!doctype html>
<html lang='ko'>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
        <link rel='stylesheet' type='text/css' href='{% static "bootstrap.min.css" %}'>
        <link rel='stylesheet' type='text/css' href='{% static "style.css" %}'>
        <title>Hello, pybo!</title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이 된다.
body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이다.

(3) 템플릿 상속(base.html)을 통해 새로운 html 템플릿 정의하기

// (3) 템플릿 상속(base.html)을 통해 새로운 html 템플릿 정의하기
{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
     (... 생략 ...)
</div>
{% endblock %}

base.html 템플릿을 생성 한 후 확장하여 해당 구조를 상속한 상태이다.
{% block content %} 와 {% endblock %} 템플릿 태그는 content라는 블록을 정의한다.