[Django] 점프 투 장고 튜토리얼 - 02-7. 스태틱

Django 점프 투 장고 정리

작성일 : 2021-11-09

문서버전 : 1.0

 

개요

이 문서는 점프 투 장고 사이트의 장고 튜토리얼 학습 내용을 정리한 내용입니다.

레퍼런스

점프 투 장고 https://wikidocs.net/72242

 

2-7. 스태틱

지금까지 만든 것은 질문 목록 화면과 질문 상세 화면이었다. 현재까진 단순 기능 구현이었으므로 근사한 화면을 위해 디자인을 적용해야 한다. 디자인 적용을 위해 스타일시트(CSS 파일)을 사용해야 한다. 이번 장에서는 pybo에 스타일시트를 적용해보자.

스태틱(static) 디렉터리

스타일시트 파일의 위치는 장고의 스태틱 디렉터리다. 스태틱 디렉토리 또한 템플릿 디렉토리와 마찬가지로 config/settings.py 파일에 등록해야 한다. 

> ../projects/mysite/config/settings.py

 

(... 생략 ...)

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

(... 생략 ...)

STATICFILES_DIRS 변수를 추가하여 BASE_DIR/‘static’디렉토리를 추가했다. 

 

BASE_DIR/’static’ = ../projects/mysite/static

> Static 디렉토리 추가하기.

../projects/mysite/mkdir static

템플릿과 마찬가지로 앱 디렉토리 바로 아래 static 디렉토리를 생성해도 장고는 static 디렉토리를 인식할 수 있다. ../projects/mysite/pybo/static과 같이 디렉토리를 만들어도 장고가 static 디렉토리로 인식한다. 하지만 앱 하위에 static 디렉토리를 구성하는 곳은 템플릿과 같은 이유로 권장하지 않는다.

 

스타일시트

스타일 시트를 아래 위치에 추가해주자.

> ../projects/mysite/static/style.css

 

textarea {
    width:100%;
}

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

답변 등록 시 사용하는 텍스트 창 너비를 100%로, 답변등록 버튼 상단에 10px 마진을 설정했다.

 

템플릿에 스타일 적용

> ../projects/mysite/templates/pybo/question_detail.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<h1>{{ question.subject }}</h1>
(... 생략 ...)

 

스타일시트 사용하기 위해선?

템플릿에 스타일시트와 같은 static 파일을 사용하려면 템플릿 최상단에 {% load static %} 태그를 삽입해야 한다. 그리고 스타일시트 파일 경로는 {% static ‘style.css’ %}처럼 지정한다.

 

자, 변경된 화면을 확인해보자.

변경 전

변경 후

 

여유로운 답변등록 창이 만들어졌다!