현재 폴더 구조
index.html
{% extends "base.html" %}
{% load static %}
{% block css_files %}
<link rel="stylesheet" href="{% static "challenges/challenges.css"%}">
{% endblock %}
{% block page_title %}
All challenges
{% endblock %}
{% block content%}
{% include "challenges/include/header.html" with active_page="index"%}
<ul>
{% for month in months %}
<li><a href="{% url 'month-challenge' month %}">{{ month|title}}</a></li>
{% endfor %}
</ul>
{% endblock %}1. {% load static %} 키워드 추가
<link rel="stylesheet" href="{% static "challenges/challenges.css"%}">
href 속성으로 static 파일을 임포트 할 수 있다 .
settings.py 를 잠깐 살펴보자
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]STATIC_URL 과 STATICFILES_DIRS 가 있다.
STATIC_URL: 이 설정은 웹 애플리케이션에서 정적 파일에 접근할 수 있는 URL을 정의한다 일반적으로는 /static/과 같이 설정되며, 이 URL을 통해 웹 페이지에서 정적 파일에 접근할 수 있습니다.
STATICFILES_DIRS: 이 설정은 장고가 정적 파일을 찾을 디렉토리를 정의한다.
STATICFILES_DIRS는 리스트로 정의되며, 각 요소는 정적 파일이 위치한 경로를 나타낸다. 이 설정을 통해 장고는 애플리케이션 디렉토리 외부에 있는 정적 파일을 찾을 수 있다. 일반적으로는 프로젝트의 루트 디렉토리에 있는 static 디렉토리를 지정한다.
base.html 을 살펴보자
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block page_title%}My Challenges{% endblock %}</title>
<link rel="stylesheet" href="{% static "styles.css" %}">
{% block css_files %}
{% endblock %}
</head>
<body>
<h1>All Challenges</h1>
{% block content %}{% endblock %}
</body>
</html>base.html 에선 styles.css 파일을 로드하여 global 한 css 설정을 하고 있다. 이처럼 웹 애플리 케이션 내부가 아닌 root 디렉토리 아래에 있는 templates/base.html 이 css 파일을 로드할때 장고는 root 디렉토리 아래에 있는 static 폴더에서 styles.css 를 찾게 된다.
# 이 설정을 해줬기 때문에!
STATICFILES_DIRS = [
BASE_DIR / "static",
]
장고 기본 설정은 아래와 같다.
1. 웹 어플리 케이션 내부에서의 css 파일을 웹 내부의 static 폴더에서 탐색한다.
만약 원한다면 내가 직접
STATICFILES_DIRS 에 경로를 추가해서 root/templates/base.html 이 찾는 css 파일의 위치를 알려줘야한다
'Django' 카테고리의 다른 글
| dot notation (0) | 2024.05.15 |
|---|---|
| 다이나믹 라우팅 (0) | 2024.05.10 |
| 커스텀 404 페이지 (0) | 2024.05.06 |
| 파이참 장고 HTML 자동 완성 설정하기 (0) | 2024.05.05 |
| 템플릿 서빙 방법 및 문법 (0) | 2024.05.05 |