[Python] django CSS 적용 방법 스태틱(static)

위와 같이 허접하게 디자인 되어 있는 화면 구성을 좀 더 세련되게 바꾸고자 합니다.

HTML에서 사용한 CSS 디자인 스타일시트(stylesheet, CSS파일)을 적용하면 됩니다.

장고에서 CSS 파일은 스태틱 디렉터리에 저장해야 합니다.

스태틱 디렉터리에 저장하는 파일들을 스태틱 파일이라고 합니다.

스태틱 파일이란 js, css, image, font 등과 같이 개발자가 사전에 미리 서버에 저장 해둔 파일들을 말합니다. 

일명 정적 파일이라고 합니다.

장고에서는 스태틱 파일과 관련하여 보통 다음 세 가지를 사용합니다.

1. STATICFILES_DIRS
   • 개발자가 추가로 지정해줘야 하는 부분입니다. 프로젝트 전반적으로 사용되는 static 경로가 어딘지 설정합니다.
   • 파일이 위치한 경로들을 지정하는 설정 항목입니다. 
   • STATICFILES_DIRS = (
   •        os.path.join(BASE_DIR, 'static'),
   • )
2. STATIC_URL
   • 이미 setting.py 파일에 STATIC_URL = '/static/' 으로 정의되어 있습니다. 이를 통해 각 static 파일에 대한 URL의 고정값을 설정할 수 있습니다. 
3. STATIC_ROOT
   • 각 static 파일들은 각자 다른 경로에 나뉘져 있습니다. ㅇ이유는 프로젝트 전반적으로 사용하는 파일들은 STATICFILES_DIRS 에 담겨 있고, 각자의 app 안에는 app에서 사용되는 파일들이 따로 모여있습니다. 
   • 배포를 하기 위해서는 이들을 하나의 디렉토리에 모아야 하는데 아래 명령어로 한 번에 모을 수 있습니다.
   • python manage.py collectstatic
   • 하지만 이더로 모을지는 따로 지정을 해줘야 하고 그 경로가 바로 STATIC_ROOT 입니다.

이번 글에서는 STATICFILES_DIRS 만 다루겠습니다.

 

스태틱(static) 디렉터리

스태틱 디렉터리를 mysite 아래에 생성합니다.

템플릿 디렉터리와 마찬가지로 mysite/config/setting.py 파일에 스태틱 파일을 등록합니다.

setting.py 파일 맨 아래에 아래와 같이 추가 작성합니다.

STATIC_URL = '/static/'
#아래 추가
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'static'),
]

 

스타일시트

style.css 파일을 다음과 같이 신규로 작성합니다.

경로는 mysite\static\style.css 입니다.

textarea {
	width:100%;
}

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

답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 답변 등록 버튼 상단에 10픽셀의 마진을 설정했습니다.

 

템플릿에 스타일 적용

question_detail.html 템플릿 파일에 css 파일을 적용합니다.

아래와 같이 상단에 추가합니다.

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

템플릿에 스타일시트와 같은 스태틱 파일을 사용하기 위해서는 템플릿 최상단에 {% load static %} 태그를 먼저 정의해야 합니다.

 

서버를 재시작하고 확인하면 다음과 같이 텍스트 창의 넓이가 넓어지고 답변등록 버튼이 아래로 이동하여 출력됩니다.