backend/django

django tutorial: static files- 스타일시트, css, stylesheet (part 6)

seul chan 2017. 3. 3. 18:17

서버에서 만든 HTML 이외에도 이미지, 자바스크립트, CSS와 같은 추가적인 파일이 필요

=> 이번 튜토리얼에서는 stylesheet나 이미지를 poll 앱에 추가해볼 것

=> 장고에서는 이런 파일들을 "static files"라고 부른다.


작은 프로젝트에서는 이런 static file들을 웹서버가 찾을 수 있는 곳에 두면 되기 때문에 쉽게 처리 가능

=> 하지만 큰 프로젝트, 특히 여러개의 app들이 있는 것들은 복잡해질 수 있음


그래서 django.contrib.staticfiles가 있다

=> 각각의 앱에서 static 파일들을 => 쉽게 제공 가능한 하나의 장소로 모아줌



**Customize your app’s look and feel

우선, polls 폴더 안에 'static'이라는 폴더를 만든다

=> 장고는 static file을 그곳에서 찾는다 (templates 폴더와 유사하게)


장고의 STATICFILES_FINDERS 세팅은 static file들을 다른 소스들과 구분하는 다양한 finder들이 들어있다.

ex) defaults중 하나인 AppDirectoriesFinder는 INSTALLED_APPS(polls과 같은) 내의 "static"이라는 서브디렉토리를 살펴본

방금 만든 'static' 디렉토리 안에 'polls'라는 다른 디렉토리를 만들고 style.css 파일을 만들자

=> 즉, 스타일시트는 polls/static/polls/style.css 에 위치한다

AppDirectoriesFinder가 동작하기 때문에 polls/static.css 라고만 명시해주어도 된다.


# static file namespacing

템플릿과 마찬가지로 polls/static 안에 static file들을 넣는 것

=> 사실은 bad idea이다. 왜?

==> 장고는 첫 이름이 일치하는 첫 static file을 찾고, 만약 다른 어플리케이션에 같은 이름이 있으면 둘을 구분할 수없음

==> 그래서 정확한 것을 지정해주어야함, 

==> 그래서 가장 쉬운 방법은 namespacing 하는 것! 

===> 그래서 static file들을 어플리케이션 이름과 똑같은 폴더(polls)에 다시 넣어준 것임


스타일시트에 다음 코드를 추가한다 

polls/static/polls/style.css에

-----------

li a {

    color: green;

}

-----------


그리고 polls/templates/polls/index.html의 상단에 다음을 추가

----------

{% load static %}


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

----------

{% load static %} 템플릿 태그는 static file들의 절대 URL을 생성

이것이 전부이다. 

이제 다시 localhost:8000/polls/를 로드하여 질문들이 초록색인지 확인


**Adding a background-image

다음은 이미지들에 대한 subdirectory를 만들 것이다. 
=> polls/static/polls 에 images라는 폴더를 만들고
=> 폴더 안에 background.gif 이미지를 넣어라. 즉, 
polls/static/polls/images/backgournd.gif가 된다

그리고 스타일시트에 다음을 추가한다.
polls/static/polls/style.css에
-------
body {
    background: white url("images/background.gif") no-repeat right bottom;
}
-------
를 추가한 후 다시 페이지를 로드해보면 백그라운드 이미지가 동작하는 것을 볼 수 있따.

# 주의
{% static %} 태그는 장고로 만들어지지 않은 스타일시트에는 적용이 안된다
=> static 파일들 간의 relative path를 사용해야함
==> STATIC_URL을 바꿀 수 있기 때문 (??)


기본적인 내용들은 이렇고 자세한 것들은
the static files howto (https://docs.djangoproject.com/en/1.10/howto/static-files/)
the staticfiles reference(https://docs.djangoproject.com/en/1.10/ref/contrib/staticfiles/)
Deploying static files(https://docs.djangoproject.com/en/1.10/howto/static-files/deployment/)/
를 참고한다.