첫 번째 Django 앱 만들기 (Part 6: Static files)

시작

Part 5에 이어서 간단한 설문조사(Polls) 앱을 만드는 과정을 통해 Django의 static files 사용 방법을 알아보려고 합니다. 본 포스트에서는 macOS와 IntelliJ IDEA Ultimate을 사용합니다.

본문

앱의 look과 feel을 커스터마이즈

먼저 polls 디렉터리에 static이라는 디렉터리를 만듭니다. Django는 polls/templates/에서 템플릿을 찾는 방법과 유사하게 그곳에서 정적 파일을 찾습니다.

Django의 STATICFILES_FINDERS 설정에는 다양한 소스에서 정적 파일을 검색하는 방법을 제공하는 finders 목록이 포함됩니다. 기본값 중 하나는 방금 생성한 polls와 같은 INSTALLED_APPS에서 static 하위 디렉터리를 찾는 AppDirectoriesFinder입니다.

# List of finder classes that know how to find static files in  
# various locations.
STATICFILES_FINDERS = [  
    "django.contrib.staticfiles.finders.FileSystemFinder",  
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",  
    # 'django.contrib.staticfiles.finders.DefaultStorageFinder',  
]

방금 만든 정적 디렉터리 내에 polls라는 또 다른 디렉터리를 만들고 그 안에 style.css 파일을 만듭니다. AppDirectoriesFinder 정적 파일 검색기의 작동 방식으로 인해 템플릿 경로를 참조하는 방법과 유사하게 Django에서 이 정적 파일을 polls/style.css로 참조할 수 있습니다.

li a {
    color: green;
}

 

다음으로 polls/templates/polls/index.html 상단에 다음 코드를 추가합니다.

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

 

 

{% static %} 템플릿 태그는 정적 파일의 절대 URL을 생성합니다.

서버를 실행하여 http://localhost:8000/polls/에 접속하여 확인합니다.

배경 이미지 추가

polls/static/polls 디렉터리에 이미지 하위 디렉터리를 만듭니다. 이 디렉터리 안에 배경으로 사용하고 싶은 이미지를 추가합니다. 파일 이름은 background.png로 지정합니다.

그런 다음 스타일시트(polls/static/polls/style.css)에 이미지에 대한 참조를 추가합니다.

body {
    background: white url("images/background.png") no-repeat;
}

 

다시 http://localhost:8000/polls/에 접속하면 배경 이미지가 적용된 것을 확인할 수 있습니다.

마무리

Part6는 간단히 static files를 사용하는 방법을 알아보았습니다.

참고자료

• https://docs.djangoproject.com/en/5.1/intro/tutorial06/
• https://docs.djangoproject.com/en/5.1/howto/static-files/