< django - 9 >

9. 스태틱 + CSS + 스타일시트와 템플릿에 스타일 적용하기

 

 

 

# 스태틱(Static) 디렉터리

- 스타일시트 파일은 장고의 스태틱 디렉터리에 저장

 

1. config/settings.py 파일을 아래처럼 수정

파일명은&nbsp;projects\mysite\config\settings.py

+ STATICFILES_DIRS 이라는 리스트 변수를 추가

+ STATICFILES_DIRS 에 BASE_DIR / 'static' 디렉터리를 추가했다.

 

 

 

2. static 디렉터리 생성

+ BASE_DIR / 'static'은 C:\projects\mysite\static 디렉터리를 의미

 

 

 

 

# 스타일시트와 템플릿에 스타일 적용하기

1. style.css 파일을 파일명을 projects\mysite\static\style.css 으로 하여 아래와 같이 작성

+ 파일 속 상세화면에 적용할 스타일을 정의함

+ 답변 등록 시 사용하는 텍스트 창 넓이 = 100% (Line 2)

+ "답변 등록" 버튼 상단의 마진 =  10픽셀 (Line 6)

 

 

 

2. projects\mysite\templates\pybo\question_detail.html 파일을 열어서 <h1> 바로 윗줄에 {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 추가 (Line 1, 2)

+ 템플릿의 맨 위에 {% load static %} 태그를 넣어야 템플릿에서 스타일시트같은 스태틱 파일과 {% static ... %} 같은 템플릿 태그를 사용할 수 있다.

 

 

 

3. http://localhost:8000/pybo/2/ 페이지를 불러와서 스타일이 적용됨을 확인 (당연히 변동사항이 있으니 서버를 재시작해야 함)