[프로그래밍] Chap 2. 장고 기본 요소 학습#7 (스타일 시트(CSS))

안녕하세요. 밤고래에요 :)

앞에서는 게시판 답변 등록 기능을 만들었어요.

 

 

[프로그래밍] Chap 2. 장고 기본 요소 학습#6 (게시판 답변 등록 기능)

 

 

그러나 아직 뭔가 부족한 느낌...? UI 개선이 필요합니다.

오늘은 UI 를 개선하기 위해 스타일시트를 적용해보려고합니다.

 

 

 

 

2-7 화면 예쁘게 꾸미기

[실습] 웹 페이지에 스타일시트 적용하기(p97)

스타일시트를 파이보에 적용하려면 CSS 파일이 스태틱 디렉터리에 있어야한다.

 

Step 1. 설정 파일에 스태틱 디렉터리 위치 추가하기

config/setting.py 파일을 열어 STATICFILES_DIRS 에 스태틱 디렉터리 경로를 추가하자.

 

 

 

Step 2. 스태틱 디렉터리 만들고 스타일시트 작성하기

프로젝트 루트 디렉터리에 static이라는 이름의 디렉터리를 생성하자.

 

 

아래와 같이 생성된 static 디렉터리 하위로 style.css 파일을 만들어 다음 코드를 작성하자.

 

 

답변을 등록할 때 사용하는 textarea를 100%로 넓히고, <답변등록> 버튼 위에 margin을 10px 추가했다.

 

Step 3. 질문 상세 템플릿에 스타일 적용하기

pybo/question_detail.html 파일에 style.css 파일을 적용해보자.

스태틱 파일을 사용하기 위해 템플릿 파일 맨 위에 {% load static %} 태그를 삽입하고, link 엘리먼트 href 속성에 {% static 'style.css' %}를 적자.

 

 

다음편에는 CSS가 아닌 부트스트랩으로 보다 개선된 UI 웹페이지 만드는 법을 다루겠습니다. 

감사합니다.