[Django] 2 - 7. 스태틱

이전 포스트

 

[Django] 1. 개발 환경 설정 https://wroni.tistory.com/4

[Django] 2 - 1. URL과 View https://wroni.tistory.com/5

[Django] 2 - 2. 모델 https://wroni.tistory.com/6

[Django] 2 - 3. 장고 관리자 https://wroni.tistory.com/7

[Django] 2 - 4. 조회와 템플릿 https://wroni.tistory.com/8

[Django] 2 - 5. URL과 네임스페이스, 2 - 6. 데이터 저장 https://wroni.tistory.com/9

---

2 - 7. 스태틱

 

1. 스태틱(static) 디렉터리

 

템플릿 디렉터리를 만들었다면, 웹 페이지를 꾸밀 수 있는 CSS가 적용되는 스태틱(static) 디렉터리도 만들어주어야 한다.

 

템플릿 디렉터리와 마찬가지로 confing/settings.py 파일에 등록한다

 

파일 : C:\projects\mysite\config\settings.py

STATIC_URL = '/static/'
# 추가할 내용
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

 

settings.py 맨 하단에 보면 STATIC_URL이 정의되어 있을 것이다. 밑에 STATICFILES_DIRS 를 추가한다.

BASE_DIR / 'static' 은 C:\projects\mysite\static 디렉터리를 의미하므로, 다음처럼 static 디렉터리를 생성한다.

 

 

mkdir static

 

 

2. 스타일시트

 

스태틱 디렉터리를 생성했으므로 스타일시트 파일은 다음 위치에 저장해야 한다.

 

C:\projects\mysite\static

 

style.css 파일을 다음과 같이 작성한다

 

파일 : C:\projects\mysite\static\style.css

textarea {
    width : 100%;
}

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

 

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

 

 

3. 템플릿에 스타일 적용

 

파일 : C:\projects\mysite\templates\pybo\question_detail.html

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

 

템플릿에 스타일시트 적용 위해서는 템플릿 파일 가장 상단에 {% load static %} 태그를 삽입한다.

그리고 스티일시트 파일 경로는 {% static 'style.css' %] 로 지정한다.

 

스타일시트가 적용되었는지 웹 서버를 구동시켜 직접 확인해보자.

 

 

텍스트창이 넓어지고, "답변등록" 버튼 위에 10픽셀 정도 여유가 생겼다.

 

---

※ 본 내용은 django 공부 기록이며, 점프 투 장고를 참고하였습니다.

https://wikidocs.net/book/4223

점프 투 장고