Django(장고) static 디렉터리와 템플릿 상속 및 include 태그 사용

Web/Django

Django(장고) static 디렉터리와 템플릿 상속 및 include 태그 사용

daeunnniii 2021. 8. 3. 01:59

728x90

Django의 static

1. static 디렉터리 추가

static 디렉터리는 스타일시트 파일을 저장하는 곳이다. templates 디렉터리와 마찬가지로 static 디렉터리도 settings.py 파일에 등록해주어야한다.

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

2. 스타일시트 작성 및 템플릿에 스타일 적용

static 디렉터리에 style.css 파일을 다음과 같이 간단하게 작성해보았다. textarea의 넓이를 100%로, "답변 등록" 버튼 상단에 100 픽셀의 여백을 설정했다.

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

이제 question_detail.html 템플릿에 스타일시트 파일을 적용하자. 템플릿에 스타일시트와 같은 스태틱 파일을 사용하기 위해서는 템플릿 상단에 {% load static %} 태그를 삽입해야한다. 그리고 스타일시트 파일 경로는 {% static 'style.css' %} 처럼 작성한다.

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

이제 다시 접속해보면 왼쪽과 같았던 화면이 오른쪽과 같이 스타일시트가 잘 적용된 것을 확인할 수 있다.

Django의 템플릿 상속

템플릿 상속이란, body를 제외한 기본적인 틀이 되는 템플릿을 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법이다. 예를 들어, CSS 파일 이름이 변경되는 경우, 해당 CSS 파일을 사용하는 템플릿 파일을 일일이 찾아 변경해주어야한다. 이러한 문제를 해결하기 위해 템플릿 상속을 사용한다!

1. base.html

먼저 기본 틀이 되는 base.html 템플릿을 작성한다. base.html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 HTML 문서의 기본 틀이된다. body 엘리먼트 안의

{% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다.

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<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" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

  <title>hi, notes!</title>
</head>
<body>
  <!-- 기본 템플릿 안에 삽입될 내용 Start -->
  {% block content %}
  {% endblock %}
  <!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

2. question_list.html

base.html 템플릿을 상속하기 위해 {% extends 'base.html' %} 처럼 extends 템플릿 문법을 사용한다. 그리고 {% block content %} 와 {% endblock %} 사이에 question_list.html에서만 쓰이는 내용을 작성하면 된다!

{% extends 'base.html' %}
{% block content %}
<div class="table-container">
    <table class="table">
        (-- 생략 --)
    </table>
</div>
{% endblock %}

이렇게 Django에서 static 디렉터리를 settings.py에 등록하는 과정과 템플릿 상속에 대해서 알아보았다!

이제 include 태그 사용법에 대해 알아보자.

include 태그

장고에는 템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 include 태그가 있다. 이 include 태그는 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용된다.

먼저 템플릿 디렉터리에서 navbar.html 파일을 생성한 뒤 부트스트랩에서 내비게이션바 소스코드를 갖고온다.

<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
  <a class="navbar-brand" href="{% url 'notes:index' %}">Notes</a>
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item ">
        <a class="nav-link" href="#">로그인</a>
      </li>
    </ul>
  </div>
</nav>

그리고 base.html을 다음과 같이 수정한다. {% include "navbar.html" %}로 include 태그를 활용하여 포함시켰다.

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<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" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <!-- jQuery JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/4.6.0/jquery.min.js"></script>

  <title>miracle notes</title>
</head>
<body>
  <!-- 네비게이션바 -->
  {% include "navbar.html" %}
  <!-- 기본 템플릿 안에 삽입될 내용 Start -->
  {% block content %}
  {% endblock %}
  <!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>

이렇게 오늘도 알차게 Django에 대해 배워보았다!

참고: https://wikidocs.net/70851

728x90

저작자표시 비영리 동일조건

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

장고(Django) Paginator을 활용하여 페이징 기능 구현하기 (4)	2021.08.04
장고(Django) GET과 POST를 활용하여 폼(Form) 작업하기 (0)	2021.08.03
Django(장고)에서 POST 방식의 데이터 저장 (0)	2021.08.03
Django(장고) url 별칭과 네임스페이스 살펴보기 (0)	2021.08.03
Django(장고) 템플릿과 데이터 조회 및 URL 매핑하기 (0)	2021.08.02

현재글Django(장고) static 디렉터리와 템플릿 상속 및 include 태그 사용

다비's IT