파이썬 장고 #6 장고에 연동한 HTML 문서에 CSS 적용하기

CSS에 대한 설명은 웹개발 : front-end 탭에 아주 자세하세 설명되어 있으니 참고!

지난번 포스팅에서는 장고 서버에 HTML 문서를 적용하는 법을 알아보았다. HTML하면 자동으로 생각나는 것이 CSS기 때문에 이번 포스팅은 장고에 연동한 HTML문서에 CSS를 적용해보는 시간을 가져보겠다. 

혹시나 하는 마음에 HTML문서가 있는 디렉토리에 style.css를 만들어 HTML에 연동해보았는데, 당연히 될리가 없다ㅋㅋ장고에 연동된 HTML 문서에 CSS 스타일링을 적용하려면 많은 단계를 거쳐야 한다.

 

1. settings.py에 정적파일 적용

일단 manage.py가 있는 디렉토리에 static이라는 디렉토리를 하나 만들어준다. 그 다음 하위 폴더로 CSS이라는 이름의 디렉토리를 만들어 주고, 다시 그 하위폴더에 style.css 파일을 만들어준다.

static->CSS->style.css

그 다음 settings.py에 들어가서 

staticfiles_dirs = (
    os.path.join(BASE_DIR, 'static'),
)

위의 코드를 추가시켜준다. 이 코드를 적용해주면 HTML에서 스크립트로 정적파일을 불러올 때, 아까 만들었던 static 디렉토리에서 정적파일을 찾는다.

맨 아레에 추가

 

2. HTML 문서에 CSS 적용하기

이 방법은 일반적인 적용법과는 다르다. 일단 그 전과 동일하게 link 태그를 선언한다. 그 다음 href 속성에서 달라진다.