django css 적용하기

css 적용

Django 에서는 css 파일을 static 요소 라고 합니다. 

Django 에서는 setting.py -> STATICFILES_FINDERS  에 따라 static 파일을 만드는 경로에 규칙이 존재합니다. 

지금까지 만들어 왔던 polls/ 에 static 폴더를 만들어 줍니다. 그밑에 다시 polls 폴더를 만들어 주고 style.css  라고 파일을 만들어 줍니다. 

polls/static/polls/style.css

li a {

    color: green;

}

이후에 

$ python manage.py collectstatic 

실행 시켜 줍니다. 

이렇게 되면 

mysite/setting.py 

STATIC_URL = '/static/'

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

에 의해서 mysite/static/polls/style.css 에 복사가 됩니다. 

polls/templates/polls/index.html

{% load static %}

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

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

에 의해서 소스에 포함이 됩니다. 

static 'polls/style.css'  탬플릿에서 

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

로 변환 됩니다. 

10.23.10.232:8888/polls/ (소스)

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

    <ul>

    

        <li><a href="/polls/5/">what question5</a></li>

    

        <li><a href="/polls/4/">what question4</a></li>

    

        <li><a href="/polls/3/">what question3</a></li>

    

        <li><a href="/polls/2/">what question2</a></li>

    

        <li><a href="/polls/1/">what question1</a></li>

    

    </ul>

다음과 같이 소스를 보내 줍니다.