[Django] static 으로 css 로드하기

이대현·2020년 7월 23일

django python static

Django

목록 보기

9/11

장고에서는 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 의 코드를 적어준다.

이대현

삽질의 기록들 👨‍💻

이전 포스트

[Django] 템플릿 상속

다음 포스트