[Django] tutorial #6-css, static file

사용자가 서버로부터 데이터를 받아 자신의 화면에 보여지는 작업을 렌더링이라 한다.

화면이 보여지기 위해서는 화면의 뷰를 담당하는 html, css, javascript가 필요하다.
이 세가지를 장고에서는 static file 즉, 정적파일이라고 한다.

장고에서는 서버와 static파일을 분리할 수 있도록 기능을 제공한다.

여기서는 static 파일이 분리가 가능하구나 정도만 알고 넘어가자!

static파일의 기본위치는 앱(polls) 내부에 static 디렉토리를 만들어 관리를 해줘야하며,

이때 다른 앱에서 이름이 중복되는 경우가 있기 때문에 앱 이름으로 namespace를 명시해주기 위해 앱이름을 갖는 디렉토리를 하나 더 만들어 주는 것을 권장한다.

polls/
    static/polls
    	style.css

static 파일 분리하기

다음과 같이 static폴더에 css파일을 만들어 준다.

li a {
    color: green;
}

css파일을 만들어준 뒤, html파일에 css파일을 연결(load)해주는 코드를 맨 위에 추가해준다.

- polls/templates/polls/index.css

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

그 다음 만들어준 css파일이 잘 적용되었는지 확인하기 위해 서버를 재시작해주면,
다음과 같이 질문의 링크가 녹색으로 표시되는 것을 확인할 수 있다.

배경이미지 추가하기

이미지를 사용하고 싶다면, polls/static/polls 디렉토리 안에 image 서브 디렉토리를 만들어 관리해주면 된다.

polls/
    static/polls/
    	image/
           background.gif

이미지 파일을 넣은 뒤 polls/static/polls/style.css에 다음 코드를 추가해준다.

- polls/static/polls/style.css

body {
    background: white url("images/background.gif") no-repeat;
}

🔎 참고
디장고 공식문서
디장고 공식문서 강의자료