자습서: Visual Studio에서 Django와 함께 정적 파일 제공 및 템플릿 상속 사용

이 문서에서는 Visual Studio에서 Django 웹 프레임워크로 작업 자습서 시리즈의 3단계를 제공합니다.

이 자습서 시리즈의 이전 단계에서는 자체 포함 HTML의 단일 페이지로 최소 Django 앱을 만듭니다. 최신 웹앱은 일반적으로 많은 페이지로 구성되며 CSS 및 JavaScript 파일과 같은 공유 리소스를 사용하여 일관된 스타일 지정 및 동작을 제공합니다. 3단계에서는 Visual Studio 항목 템플릿을 사용하여 Django 프로젝트에 콘텐츠를 추가하고 애플리케이션의 기능을 확장합니다.

자습서의 3단계에서는 다음 방법을 알아봅니다.

Visual Studio 항목 템플릿을 사용하여 상용구 코드로 새 파일을 빠르게 추가
Django 코드에서 정적 파일 제공
Django 앱에 페이지 추가
템플릿 상속을 사용하여 페이지 간에 머리글 및 탐색 만들기

필수 조건

Django 프로젝트를 만드는 1단계에서 만든 Visual Studio 솔루션 및 Django 애플리케이션 프로젝트는 보기 및 페이지 템플릿을 사용하여 Django 앱을 만드는 2단계에서 업데이트되었습니다. 이 자습서 시리즈의 일부입니다.
Django 템플릿 버전, Visual Studio 프로젝트 및 Django 프로젝트 및 Mac의 Python 개발에 대한 자세한 내용은 이 자습서 시리즈의 1단계에서 필수 구성 요소 섹션을 검토하세요.

Visual Studio에서 항목 템플릿 살펴보기

Django 애플리케이션을 개발할 때 일반적으로 Python, HTML, CSS 및 JavaScript 파일을 더 많이 추가합니다. Visual Studio는 각 파일 형식(및 배포에 필요할 수 있는 web.config 같은 기타 파일)에 대해 시작하는 데 편리한 항목 템플릿을 제공합니다. 이러한 템플릿을 사용하여 상용구 코드를 사용하여 다양한 형식의 새 파일을 빠르게 추가할 수 있습니다.

사용 가능한 템플릿을 보려면 Visual Studio에서 솔루션 탐색기 이동하여 프로젝트 구조를 엽니다.
파일을 새로 만들고자 하는 폴더를 마우스 오른쪽 버튼으로 클릭한 다음, 추가>새 항목을 선택합니다. 새 항목 추가 대화 상자가 열립니다.

Visual Studio의 새 항목 추가 대화 상자에서 사용 가능한 템플릿을 보여 주는

Visual Studio의 새 항목 추가 대화 상자에서 사용 가능한 템플릿을 보여 주는
템플릿을 사용하려면 원하는 템플릿을 선택하고 파일 이름을 입력한 다음 추가선택합니다.

Visual Studio는 현재 프로젝트에 파일을 추가하고 소스 제어에 대한 변경 내용을 표시합니다.

Visual Studio에서 항목 템플릿을 식별하는 방법 이해

Visual Studio 프로젝트 파일(.pyproj)에는 파일을 Python 프로젝트로 표시하는 프로젝트 형식 식별자가 포함되어 있습니다. Visual Studio는 이 형식 식별자를 사용하여 프로젝트 형식에 적합한 항목 템플릿만 인식하고 표시합니다. Visual Studio는 매번 정렬을 요청하지 않고 다양한 프로젝트 형식에 대해 다양한 항목 템플릿 집합을 제공하는 이 방법을 따릅니다.

앱에서 정적 파일 제공

Python을 사용하여 빌드된 웹앱에서(프레임워크를 사용하여) Python 파일은 항상 웹 호스트의 서버에서 실행되며 사용자의 컴퓨터로 전송되지 않습니다. CSS 및 JavaScript와 같은 다른 파일은 브라우저에서만 사용되므로 호스트 서버는 요청 시 as-is 전달하기만 합니다. 이러한 형식의 파일을 "정적" 파일이라고 하며, Django는 코드를 작성할 필요 없이 파일을 자동으로 배달할 수 있습니다.

Django 프로젝트는 기본적으로 앱의 정적 폴더에서 정적 파일을 제공하도록 설정됩니다. 이 동작은 Django 프로젝트의 settings.py 파일에서 다음 코드에 의해 가능합니다.

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

원하는 폴더 구조를 사용하여 앱의 정적 폴더 내에서 파일을 구성하고 정 적 폴더 내의 상대 경로를 사용하여 파일을 참조할 수 있습니다.

HTML 템플릿에서 정적 CSS 파일 사용

다음 단계에 따라 앱에 CSS 파일을 추가한 다음, index.html 템플릿에서 CSS 스타일시트를 사용합니다.

솔루션 탐색기에서 프로젝트에서 HelloDjangoApp 폴더를 마우스 오른쪽 단추로 클릭하고새 폴더추가>를 선택한 다음 폴더 이름을 정적으로 지정합니다.
정적 폴더를 마우스 오른쪽 단추로 클릭하고 추가>새 항목선택합니다.
새 항목 추가 대화 상자에서 스타일시트 템플릿을 선택하고, 파일을 site.cs로 이름을 지정한 후 추가를 선택합니다.

Visual Studio는 프로젝트에 site.css 파일을 추가하고 편집기에서 파일을 엽니다. 업데이트된 Django 프로젝트 구조의 예는 다음과 같습니다.

솔루션 탐색기의 정적 파일 구조를 보여 주는
site.css 파일의 내용을 다음 스타일로 바꿉니다.
```
.message {
    font-weight: 600;
    color: blue;
}
```
HelloDjangoApp/templates/index.html 파일의 내용을 다음 태그로 바꿉니다.
```
<html>
   <head>
      <title>{{ title }}</title>
      {% load static %} 
      <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
이 코드는 자습서 시리즈의 2단계에서 <strong> HTML 요소를 <span> 스타일 클래스를 참조하는 message 요소로 바꿉니다. 이러한 방식으로 스타일 클래스를 사용하면 HTML 요소의 스타일을 유연하게 지정할 수 있습니다.
파일>모두 저장을 선택하여 프로젝트 변경 사항을 저장하거나 Ctrl+Shift+S 바로 가기 키를 사용합니다. (프로젝트를 개발할 때 Visual Studio에서 파일을 자동으로 저장하므로 이 단계는 필요하지 않습니다.)
프로젝트를 실행하고 결과를 관찰합니다. 완료되면 앱을 중지합니다.
(선택 사항) 변경 내용을 소스 제어에 커밋하고 원격 리포지토리를 업데이트할 수 있습니다. 자세한 내용은 이 자습서 시리즈의 2단계에서 소스 제어 변경 내용 커밋을 참조하세요.

{% 로드 정적 %} 태그를 사용하세요.

이 문장은 HTML 요소의 <head> 및 <body>와 같은 정적 파일에 대한 사이트 상대 참조 앞에 {% load static %}index.html 파일에 존재해야 합니다. 이 섹션에 표시된 예제에서 "정적 파일"은 사용자 지정 Django 템플릿 태그 집합을 참조합니다. 태그 집합을 사용하면 {% static %} 구문을 통해 정적 파일을 참조할 수 있습니다. 태그가 {% load static %} 없으면 앱이 실행되면 예외가 표시됩니다.

{% 로드 정적 %} 태그 없이 참조 추가

HTML 마크업에서 {% load static %} 태그를 사용하지 않고 정적 파일에 대한 사이트 상대 경로를 설정할 수도 있습니다. 이 경우 Django 프로젝트 폴더 계층 구조 내에서 정적 폴더의 위치를 지정합니다.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

정적 파일 및 폴더 구성

프로젝트 요구 사항에 따라 정적 폴더에 다른 CSS, JavaScript 및 HTML 파일을 추가할 수 있습니다. 정적 파일을 구성하는 일반적인 방법은 글꼴, 스크립트및 콘텐츠 (스타일시트 및 기타 파일의 경우)라는 하위 폴더를 만드는 것입니다. 각 경우에 상대 파일 경로에서 참조에 {% static %} 폴더를 포함해야 합니다.

Django 애플리케이션에 페이지 추가

Django 애플리케이션에 다른 페이지를 추가하려면 다음 작업이 포함됩니다.

뷰를 정의하는 Python 함수 추가
페이지의 HTML 태그에 대한 템플릿 추가
Django 프로젝트의 urls.py 파일에서 URL 경로 업데이트

다음 단계에 따라 HelloDjangoApp 프로젝트에 정보(/about) 페이지를 추가하고 홈페이지에서 해당 페이지에 대한 링크를 추가합니다.

솔루션 탐색기에서 프로젝트에서 템플릿/HelloDjangoApp 폴더를 마우스 오른쪽 단추로 클릭하고새 항목추가>를 선택합니다.

팁 (조언)

추가 메뉴에 새 항목 명령이 표시되지 않으면 필요에 따라 Visual Studio가 디버깅 모드를 종료하도록 Django 앱을 중지해야 합니다.
새 항목 추가 대화 상자에서 HTML 페이지 템플릿을 선택하고 파일 이름을 about.html이름을 지정한 다음 추가를 선택합니다.

about.html 파일의 내용을 다음 HTML 태그로 바꿉니다.

<html>
   <head>
      <title>{{ title }}</title>
      {% load static %}
      <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

이후 단계에서는 홈페이지에 대한 명시적 링크를 탐색 모음으로 바꿉 있습니다.

HelloDjangoApp/views.py 파일에서 템플릿을 사용하는 함수 about 를 추가합니다.

def about(request):
   return render(
      request,
      "HelloDjangoApp/about.html",
      {
         'title' : "About HelloDjangoApp",
         'content' : "Example app page for Django."
      }
   )

Django 프로젝트의 BasicProject/urls.py 파일에서 페이지의 경로를 배열의 about 마지막 항목 urlPatterns 으로 추가합니다.

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

templates/HelloDjangoApp/index.html 파일에서 <body> 요소의 첫 번째 문장으로 다음 태그를 추가합니다.
```
<div><a href="about">About</a></div>
```
이 태그는 Django 앱의 /about 페이지에 대한 링크를 추가합니다. 이후 단계에서는 이 링크를 탐색 모음으로 바꿉 있습니다.
프로젝트 변경 내용을 저장하고 프로젝트를 다시 실행합니다. /about 페이지로 이동하여 다양한 앱 페이지 간 탐색을 확인합니다.
완료되면 앱을 중지합니다.

"인덱스" 페이지로 라우팅

실행 중인 앱의 /index 페이지로 이동하려고 하면 페이지를 찾을 수 없음(404) 오류가 표시됩니다.

HelloDjangoApp/views.py 파일에는 이름이 지정된 index함수가 있지만 Django 프로젝트의 BasicProject/urls.py 파일의 URL 라우팅 패턴에는 문자열index과 일치하는 정규식이 포함되어 있지 않습니다. 앱 "인덱스" 페이지의 현재 표현식은 ^$입니다. 문자열 index과 일치하려면 패턴 ^index$에 대한 다른 URL 항목을 추가해야 합니다.

다음 섹션에서는 페이지 템플릿의 태그를 {% url '<pattern_name>' %} 사용하여 패턴의 이름을 참조하는 것이 더 나은 방법을 설명합니다. 이 경우 Django는 적절한 URL을 만듭니다. 예를 들어 템플릿/HelloDjangoApp/about.html 파일의 <div><a href="home">Home</a></div> 마크업을 <div><a href="{% url 'index' %}">Home</a></div> 마크업으로 교체할 수 있습니다. 이제 문자열의 'index' 사용은 urls.py 파일의 첫 번째 URL 패턴 이름이 지정 'index'되므로 작동합니다. 두 번째 패턴을 참조하는 데 사용할 'home' 수도 있습니다.

헤더 및 탐색에 템플릿 상속 사용

각 페이지의 명시적 탐색 링크 대신, 많은 웹앱에는 가장 중요한 페이지 링크, 팝업 메뉴 등을 제공하는 브랜딩 헤더와 탐색 모음이 있습니다. 앱 내에서 일관성을 유지하려면 머리글 및 탐색 모음이 모든 페이지에서 동일해야 하지만 모든 페이지 템플릿에서 동일한 코드를 반복할 필요는 없습니다. 단일 파일에서 모든 페이지의 공통 부분을 정의할 수 있습니다.

Django의 템플릿 시스템은 여러 템플릿에서 특정 요소를 다시 사용하는 두 가지 방법을 제공합니다.

에 포함된은 {% include <template_path> %}구문을 사용하여 참조 템플릿의 특정 위치에 삽입하는 다른 페이지 서식 파일입니다. 코드에서 경로를 동적으로 변경하려는 경우 변수를 사용할 수도 있습니다. 포함은 일반적으로 페이지의 특정 위치에서 공유 템플릿을 끌어오기 위해 페이지 본문에 사용됩니다.
상속 페이지 템플릿의 시작 부분에 {% extends <template_path> %} 구문을 사용하여, 참조 템플릿이 기반으로 삼는 공유 기본 템플릿을 지정합니다. 상속은 일반적으로 앱 페이지의 공유 레이아웃, 탐색 모음 및 기타 구조를 정의하는 데 사용됩니다. 이 방법을 사용하려면, 블록이라는 기본 템플릿의 특정 영역만 추가하거나 수정하기 위해 참조 템플릿을 사용해야 합니다.

두 방법 모두, <template_path> 값은 앱의 템플릿 폴더에 상대적이거나, ../ 또는 ./도 허용됩니다.

기본 템플릿은 {% block <block_name> %} 및 {% endblock %} 태그를 사용하여 블록을 설명합니다. 참조 템플릿에서 블록 이름이 같은 태그를 사용하는 경우 참조 템플릿의 블록 콘텐츠가 기본 템플릿에서 일치하는 블록을 재정의합니다.

다음 단계에서는 템플릿 상속을 보여 줍니다.

솔루션 탐색기에서 templates/HelloDjangoApp 폴더를 마우스 오른쪽 단추로 클릭하고 이름이 layout.htmlHTML 페이지 템플릿에서 새 파일을 만듭니다.

layout.html 파일의 내용을 다음 HTML 태그로 바꿉니다.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   {% load static %}
   <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Django</a>
      <a href="{% url 'home' %}" class="navbar-item">Home</a>
      <a href="{% url 'about' %}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

이 템플릿에는 참조 페이지가 대체해야 하는 모든 콘텐츠를 식별하는 content블록이 포함되어 있습니다.

HelloDjangoApp/static/site.css 파일의 끝에 다음 스타일을 추가합니다.

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

이러한 스타일 정의는 이 연습에서 흥미로운 결과를 생성합니다. 이 안내서에서는 반응형 디자인을 보여 주지 않습니다.

템플릿/HelloDjangoApp/index.html 파일의 내용을 다음 코드로 바꿉니다.
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
이제 index 템플릿은 기본 템플릿을 참조하고 content 블록을 재정의합니다. 상속을 사용하여 이 템플릿이 간소화된 것을 볼 수 있습니다.
템플릿/HelloDjangoApp/about.html 파일의 내용을 다음 코드로 바꿉니다. 그러면 about 템플릿이 기본 템플릿을 참조하고, content 블록을 재정의하게 됩니다.
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
앱을 다시 실행하고 결과를 관찰합니다. 탐색 모음 링크를 사용하여 앱 페이지 간에 전환합니다.
완료되면 앱을 중지하고 프로젝트 변경 내용을 저장합니다.
앱을 크게 변경했기 때문에 변경 내용을 Git 리포지토리에 저장하는 것이 좋습니다. 자세한 내용은 이 자습서 시리즈의 2단계에서 소스 제어 변경 내용 커밋을 참조하세요.

다음 단계

4단계: 전체 Django 웹 프로젝트 템플릿 사용

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-08-08