[Django] 2 - 7. 스태틱

[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 %} {{ question.subject }}

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

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

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

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

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

https://wikidocs.net/book/4223

from http://wroni.tistory.com/10 by ccl(A) rewrite - 2021-11-29 11:27:40