[Django] 스태틱(static) 디렉터리, 스타일시트 등록하기

Python/Django

by TUZA 2022. 9. 18. 00:24

스태틱(static) 디렉터리

스타일시트 파일은 장고의 스태틱 디렉터리에 저장해야한다.

스태틱 디렉터리도 템플릿 디렉터리와 마찬가지로 config/settings.py 에 저장해야한다.

#config/settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

STATICFILES_DIRS 라는 리스트 변수를 추가했다.

그리고 BASE_DIR / 'static' 를 디렉터리를 추가했다.

#스타일시트 등록하기

{% load static %} 를 html 파일 최상단에 기재해주면 된다.

{% load static %}
<link rel = 'stylesheet' type="text/css" href ="{% static 'style.css'%}"></lin

#템플릿 상속

#base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!--  Required meta tags   -->
    <meta charset="UTF-8">
    <meta name = 'viewport' content = 'width=device-width, initial-scale = 1, shrink-to-fit=no'>
    <!-- Bootstrap CSS    -->
    <link rel = 'stylesheet' type = 'text/css' href ="{% static 'bootstrap.min.css' %}"/>
    <!-- pybo CSS    -->
    <link rel = 'stylesheet' type="text/css" href="{% static 'style.css'%}">

    <title>Hello, pybo!</title>

</head>
<body>
<!--기본 템플릿 안에 삽입될 내용 start-->
{%block content %}
{%endblock %}
<!--기본 템플릿 안에 삽입될 내용 end-->
</body>
</html>

#question_detail.html
{% extends 'base.html'%}
{% block content%}

<div class="container my-3">
    <!-- 질문 -->
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2">
                    {{ question.create_date }}
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 -->
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2">
                    {{ answer.create_date }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <!-- 답변 등록 -->
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        <div class="mb-3">
            <label for="content" class="form-label">답변내용</label>
            <textarea name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>
{% endblock%}

저작자표시

'Python > Django' 카테고리의 다른 글

[Django] 네비게이션바 (1)	2022.09.22
[Django] 폼(Form) 복습필요 (0)	2022.09.18
[Django] 데이터 저장 (복습필요) (0)	2022.09.16
[Django] URL 별칭 (0)	2022.09.16
[Django] 질문 목록 및 상세 페이지 만들기 (0)	2022.09.16