11. 스태틱 디렉토리

[static 디렉토리]

 

스타일시트 파일은 장고의 스태틱 디렉토리에 저장해야 한다. 스태틱 디렉토리도 템플릿 디렉토리와 마찬가지로 config/settings.py 파일에 등록하여 사용한다. 일단 config/settings.py 파일을 수정하자.

STATICFILES_DIRS 라는 리스트 변수를 추가하고 BASE_DIR/'static' 디렉토리를 추가했다.BASE_DIR/static 은 /Users/<사용자명>/projects/mysite/static 을 의미하기때문에 다음 위치에 static 디렉토리를 생성해야한다.

 

 

[스타일 시트]

 

style.css 파일을 projects/mysite/static/style.css 에 만들고 다음과 같이 작성하자.

static폴더에 우클릭해 새파일 style.css를 만들자

 

style.css 파일에는 상세화면에 적용할 스타일을 정의했다. 답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 '답변등록' 버튼을 상단에 10 픽셀의 여백(margin)을 설정했다.

 

[적용]

 

작성한 스타일시트 파일을 질문 상테 템플릿에 적용하자.

projects/mysite/templates/pybo/question_detail.html 을 수정하자.

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

이제 질문상세 페이지를 들어가 보자.

저번과 다르게 텍스트 창의 넓이가 넓어지고 '답변등록' 버튼도 버튼위에 여유 공간도 생기고 변화가 생겼다.