[Django 9] static 으로 css 로드하기

장고에서는 css나 js 같은 정적 파일들을 static 폴더에서 한번에 관리한다.

장고에서는 css나 js같은 정적 파일들을 static 폴더에서 한번에 관리한다.

1. static 폴더 생성

app 폴더 안에 static 폴더를 생성하고, 그 안에 main.css 파일을 넣어준다.

2. base.html에 static 링크하기

<head>
{% load static %}
    <link rel="stylesheet" href="{% static "main.css" %}">
</head>

만약 개별 페이지 마다의 css 파일을 만들었다면 똑같이 static 폴더에 넣어준 뒤 각 템플릿에서 static으로 링크하면 된다.

3. base.html 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
    {% load static %}
    <link rel="stylesheet" href="{% static "main.css" %}">
</head>
<body>
    <h1>django 블로그</h1>
    <div id="nav" class="nav">
            <div class="icon">
                <ul>
                    <li><a title="Home" href="{% url 'home' %}"><i class="fa fa-home "></i></a></li>
                    <li><a href="{% url 'home' %}"><i class="fa fa-search "></i></a></li>
                    <li><a href="{% url 'new' %}"><i class="fa fa-edit "></i></a></li>

                </ul>
            </div>
            <div class="text">
                <ul>
                    <li><a title="Home" href="{% url 'home' %}">홈</a></li>
                    <li><a href="{% url 'home' %}" >소개</a></li>
                    <li><a href="{% url 'new' %}" >새 글쓰기</a></li>
                </ul>
            </div>
    </div>
    {% block content %} 
    {% endblock %}
</body>
</html>

나는 codepen의 Fly-Out Nav를 가져와 사용했다.
모든 페이지에 들어갈 nav 요소이기 때문에 base.html 에 넣어준것이고, 각 페이지마다의 템플릿은 block content 에 담길 것이다.

만약 부트스트랩을 사용하고싶다면 아래 CDN을 head에 추가해주자!

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

이 템플릿이 폰트어썸 icon을 사용하고 있기 때문에, font-awesome CDN을 head에 추가했다.
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
더 다양한 icon을 사용하고 싶다면 여기 참고!

4. 모든 페이지에 상속하기

{% extends 'base.html' %}

{% block content %}
        <a href="{% url 'new' %}">새 글쓰기</a>
    {% for blog in blogs.all%}
    <div>
        <h1><a href="{% url 'detail' blog.id %}"> {{blog.title}} </a></h1>
        <p> {{blog.created_at}}</p>
    </div>
    {%endfor%}
{% endblock %}

{% extends 'base.html' %} 로 가져오고,
{% block content %} 과 {% endblock %} 내부에 원래 있던 home.html 의 코드를 적어준다.

Previous[Django 3] Hello World 웹사이트 만들기 Next[Django 10] 한 템플릿에서 복수의 css 파일 적용하기

Last updated 3 years ago

Was this helpful?

3. base.html 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
    {% load static %}
    <link rel="stylesheet" href="{% static "main.css" %}">
</head>
<body>
    <h1>django 블로그</h1>
    <div id="nav" class="nav">
            <div class="icon">
                <ul>
                    <li><a title="Home" href="{% url 'home' %}"><i class="fa fa-home "></i></a></li>
                    <li><a href="{% url 'home' %}"><i class="fa fa-search "></i></a></li>
                    <li><a href="{% url 'new' %}"><i class="fa fa-edit "></i></a></li>

                </ul>
            </div>
            <div class="text">
                <ul>
                    <li><a title="Home" href="{% url 'home' %}">홈</a></li>
                    <li><a href="{% url 'home' %}" >소개</a></li>
                    <li><a href="{% url 'new' %}" >새 글쓰기</a></li>
                </ul>
            </div>
    </div>
    {% block content %} 
    {% endblock %}
</body>
</html>

나는 codepen의 Fly-Out Nav를 가져와 사용했다.

모든 페이지에 들어갈 nav 요소이기 때문에 base.html 에 넣어준것이고, 각 페이지마다의 템플릿은 block content 에 담길 것이다.

만약 부트스트랩을 사용하고싶다면 아래 CDN을 head에 추가해주자!

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

이 템플릿이 폰트어썸 icon을 사용하고 있기 때문에, font-awesome CDN을 head에 추가했다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

더 다양한 icon을 사용하고 싶다면 여기 참고!

4. 모든 페이지에 상속하기

{% extends 'base.html' %}

{% block content %}
        <a href="{% url 'new' %}">새 글쓰기</a>
    {% for blog in blogs.all%}
    <div>
        <h1><a href="{% url 'detail' blog.id %}"> {{blog.title}} </a></h1>
        <p> {{blog.created_at}}</p>
    </div>
    {%endfor%}
{% endblock %}

{% extends 'base.html' %} 로 가져오고,

{% block content %} 과 {% endblock %} 내부에 원래 있던 home.html 의 코드를 적어준다.