django에 css 부분 추가하기

css 파일을 위한 static 폴더를 만들어봅시다.

사용자 마다 다른 컨텐츠를 보여주는 웹사이트를 "동적"이라고 표현합니다. 페이스북이나 인스타그램 같은 사이트를 들어가보면 알 수 있죠. 제가 추가한 친구나 제가 "좋아요"를 누른 게시글의 바탕으로 컨텐츠를 보여줍니다. 하지만 이런 동적인 컨텐츠가 아니라 거의 대부분의 유저가 공통적으로 가지는 부분이 있습니다. 바로 css나 js 부분입니다. 이런 파일들을 모아서 static 폴더에 넣습니다. static 폴더는 어디에 정의해야할까요?

"앱 폴더 > static > 앱 이름의 폴더 > static file"에 위치하면 됩니다.

이번 튜토리얼의 경우는 reading 폴더 안에 static이라는 폴더를 만들고, static 폴더 안에 다시 reading이라는 폴더를 만든 후에  그 안에 main.css를 정의했습니다.

main.css파일 넣기

우선 css 코드를 보겠습니다.

템플릿을 정의할 때 클래스 값을 넣은 것들이 몇개 있습니다. 그 태그들에 간단하게 css 효과들을 주었습니다. 이제 이 값들을 어떻게 템플릿에 전달할까요?

base.html에 static 넣기 

base.html에 우리가 만든 css 파일을 넣으면 다른 모든 템플릿에서 css 파일을 적용받을 것입니다. 그래서 base.html에 파일에 넣어주면 됩니다.

{% load static %}을 통해서 스태틱 파일을 불러옵니다. 그 다음에 {% static "위치"%}를 통해서 링크 태그의 href 값으로 전달해주시면 됩니다. {% static %}은 static 파일의 절대 url을 형성합니다. 인덱스 페이지에 접속해보세요. css가 적용되었나요?

혹시 정적파일이 적용되지 않으면 ctrl + c를 눌러서 프로그램을 종료한 뒤 다시 장고를 시작해주세요.

주의할 점

setting.py에 우리는 STARIC_ROOT = os.path.join(BASE_DIR, 'static')이라고 정의한 적이 있습니다. 이는 나중에 스태틱 파일을 모아줄 때 위치를 지정한 것이라고 생각하시면 됩니다. 파이썬 애니웨어에 호스팅 할때 collectstatic이라는 명령어를 실행하고 정적파일의 위치를 알려줍니다. static 파일은 앱 마다 존재할 수 있습니다. 그래서 이것들을 하나의 폴더에(루트폴더 아래에 위치하도록 합니다.) 모아주는 명령어가 "collectstatic"입니다. 최적화를 위해서 이렇게 한다고 생각하시면 됩니다.