정적 파일

Coddy Django 여정의 Django 기초 섹션에 포함된 레슨. 23개 중 20번째.

카페의 페이지는 흰 바탕에 검은색으로 표시됩니다. 스타일시트를 사용하면 이를 바꿀 수 있으며, 스타일시트, 스크립트, 이미지는 정적 파일입니다. 서버는 뷰를 거치지 않고 이 파일들을 있는 그대로 전송합니다. Django는 템플릿을 찾는 방식과 마찬가지로 설치된 각 앱의 static/ 폴더에서 파일을 찾으며, 폴더 안에 앱 이름을 다시 넣습니다.

shop/static/shop/cart.js

이 파일들은 STATIC_URL 아래에서 제공되며, settings.py에서는 "static/"으로 설정됩니다. 따라서 해당 파일의 경로는 /static/shop/cart.js입니다. 템플릿에서는 {% load static %}을 선언한 다음 {% static %}을 사용해 주소를 만듭니다.

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

스타일시트의 <link rel="stylesheet" href="...">는 <head> 안에 넣습니다. 이를 base.html에 넣으면 해당 템플릿을 상속하는 모든 페이지에 적용됩니다.

챌린지

쉬움

menu/static/menu/style.css 파일을 만들고, 최소한 body { background: #fdf8f2; }를 넣으세요.
base.html에서 정적 태그를 불러오고 <head>에 스타일시트를 연결하여 모든 페이지가 /static/menu/style.css를 연결하도록 하세요.

Run을 누르세요. 페이지가 크림색으로 바뀝니다. /static/menu/style.css를 열어 Django가 제공하는 파일을 확인하세요.

직접 해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>