정적 파일

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

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

shop/static/shop/cart.js

Django는 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를 연결하도록 하세요.

실행을 누르세요. 페이지가 크림색으로 바뀝니다.

직접 해보기

<!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>