Django 튜토리얼 | 앱 모양 및 느낌 사용자 정의

소개

이 튜토리얼은 **Create Some Automated Tests**에서 끝난 부분부터 시작합니다. 우리는 테스트된 웹 투표 애플리케이션을 구축했으며, 이제 스타일시트와 이미지를 추가할 것입니다.

app의 모양과 느낌 사용자 정의하기

먼저, polls 디렉토리 안에 static이라는 디렉토리를 생성합니다. Django 는 polls/templates/ 내에서 템플릿을 찾는 방식과 유사하게, 거기에서 정적 파일 (static files) 을 찾습니다.

Django 의 STATICFILES_FINDERS 설정에는 다양한 소스에서 정적 파일을 찾는 방법을 아는 파인더 (finder) 목록이 포함되어 있습니다. 기본값 중 하나는 AppDirectoriesFinder로, 방금 생성한 polls와 같이 각 INSTALLED_APPS에서 "static" 하위 디렉토리를 찾습니다. 관리자 사이트 (admin site) 는 정적 파일에 대해 동일한 디렉토리 구조를 사용합니다.

방금 생성한 static 디렉토리 내에 polls라는 다른 디렉토리를 생성하고, 그 안에 style.css라는 파일을 생성합니다. 즉, 스타일시트는 polls/static/polls/style.css에 있어야 합니다. AppDirectoriesFinder 정적 파일 파인더가 작동하는 방식 때문에, Django 에서 이 정적 파일을 템플릿 경로를 참조하는 방식과 유사하게 polls/style.css로 참조할 수 있습니다.

정적 파일 네임스페이싱 (Static file namespacing)

템플릿과 마찬가지로, 정적 파일을 polls/static에 직접 넣을 수도 있지만 (다른 polls 하위 디렉토리를 생성하는 대신), 실제로 좋지 않은 생각입니다. Django 는 이름이 일치하는 첫 번째 정적 파일을 선택하며, 다른 애플리케이션에 동일한 이름의 정적 파일이 있는 경우 Django 는 이를 구별할 수 없습니다. 우리는 Django 가 올바른 파일을 가리키도록 해야 하며, 이를 보장하는 가장 좋은 방법은 *네임스페이싱 (namespacing)*하는 것입니다. 즉, 해당 정적 파일을 애플리케이션 자체의 이름을 딴 다른 디렉토리 안에 넣는 것입니다.

다음 코드를 해당 스타일시트 (polls/static/polls/style.css) 에 넣습니다.

li a {
  color: green;
}

다음으로, polls/templates/polls/index.html의 맨 위에 다음을 추가합니다.

{% load static %}

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

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

개발을 위해 해야 할 일은 이게 전부입니다.

서버를 시작하거나 (이미 실행 중인 경우 다시 시작):

python manage.py runserver 0.0.0.0:8080

Web 8080 탭을 다시 로드하면 질문 링크가 녹색으로 표시되어 (Django 스타일!) 스타일시트가 제대로 로드되었음을 의미합니다.

배경 이미지 추가하기

다음으로, 이미지를 위한 하위 디렉토리를 생성합니다. polls/static/polls/ 디렉토리에 images 하위 디렉토리를 생성합니다. 이 디렉토리 안에 배경으로 사용하려는 모든 이미지 파일을 추가합니다. 이 튜토리얼의 목적을 위해, 우리는 VM 의 /tmp/background.png 디렉토리에서 찾을 수 있는 background.png라는 파일을 사용하고 있습니다.

/tmp/background.png를 polls/static/polls/images/background.png로 복사해야 합니다.

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

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

Web 8080 탭을 다시 로드하면 화면 왼쪽 상단에 배경이 로드되는 것을 볼 수 있습니다.

{% static %} 템플릿 태그는 스타일시트와 같이 Django 에서 생성되지 않은 정적 파일에서는 사용할 수 없습니다. 정적 파일을 서로 연결할 때는 항상 **상대 경로 (relative paths)**를 사용해야 합니다. 그러면 정적 파일의 많은 경로를 수정하지 않고도 STATIC_URL (URL 을 생성하기 위해 static 템플릿 태그에서 사용됨) 을 변경할 수 있습니다.

이것이 **기본 사항 (basics)**입니다. 설정 및 프레임워크에 포함된 기타 세부 정보에 대한 자세한 내용은 정적 파일 사용 방법 </howto/static-files/index> 및 정적 파일 참조 </ref/contrib/staticfiles>를 참조하십시오. 정적 파일 배포 </howto/static-files/deployment>는 실제 서버에서 정적 파일을 사용하는 방법을 설명합니다.

정적 파일에 익숙해지면, Django 의 자동 생성된 관리자 사이트를 사용자 정의하는 방법을 배우기 위해 Django 의 관리자 사이트 사용자 정의하기를 읽어보세요.

요약

축하합니다! 스타일시트 및 이미지 추가 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.