Django / CSS(부트스트랩) / 템플릿 확장하기

뉴비뉴

카테고리 없음

Django / CSS(부트스트랩) / 템플릿 확장하기

뉴비뉴 2019. 6. 30.

부트스트랩

설치하기

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

정적 파일

CSS와 이미지 파일에 해당한다.

이 컨텐츠는 요청 내용에 따라 바뀌는 것이 아니기 때문에 모든 사용자들이 동일한 내용을 볼 수 있다.

 

해당 정적파일들을 mystyle.css 로 만들어서 link로 불러와서 사용하는 식으로 하는게 제일 좋다.

djangogirls\blog\static\blog\blog.css

 

가져오는 방법에는 

{% load static %}
<html>   
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
# static 이라는 이름의 템플릿 태그를 이용하여 지정

################################

<link rel="stylesheet" href="/static/css/blog.css">
# 해당 방법의 경우 static이 변경 될 수도 있으므로 위 방법을 사용해주는게 좋다.

두 개의 방법이 있다.

static에 대한 설정은 settings.py 에서 할 수 있다

#settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

폰트변경

#blog.css
h1 a, h2 a{
	font-family: 'Lobster';
}

#post_list.html
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" type="text/css">

템플릿 확장하기

현재 템플릿에 대한 부모 템플릿을 하나 만든다. base.html

부모에서 필요한 내용을 정의하고 자식 템플릿은 상속을 받아서 정의한다.

한마디로 중복이 되는 것은 부모 템플릿에 넣어두고, 나머지는 따로 설정해주면 된다.

#base.html
{% load static %}
<html>
    <head>
        <meta charset="utf-8" />
        <title>Django</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" type="text/css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="">Django Girls Blog</a></h1>
        </div>
        <div class="content container">
        <div class="row">
        <div class="col-md-8">
            {% for post in post_list %}
                <div class="post">
                    <div class="date">
                        <p>published: {{ post.published_date }}</p>
                    </div>
                    <h1><a href="">{{ post.title }}</a></h1>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
    </body>
</html>

###########################################################################
#base.html
<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

와 같이 변경해준다.

{% block content %}
{% endblock %}
#block 부분은 post_list.html 에서 불러올 예정이다.
#아래 코드를 참고하도록 하자.

#post_list.html
   {% extends "blog/base.html "%} # blog/base.html 에 상속을 받는다.
        {% block content %}
            {% for post in post_list %}
                <div class="post">
                    <div class="date">
                        <p>published: {{ post.published_date }}</p>
                    </div>
                    <h1><a href="">{{ post.title }}</a></h1>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        {% endblock %}

{% block content%}

{% endblock%}

block 이라는 템플릿 태그를 통해서 마킹을 한 것이다. 영역을 지정한 것이다 이름은 content

 

{% extends "blog/base.html "%}

상속을 받게 되면 특정 block 을 지정해서 block 에다가 content를 공급해주는 일 밖에 하지 못한다.

block 밖에 있는 내용은 다 무시하게 된다.

 

 

 

댓글

💲 추천 글

티스토리툴바