(Django 기초) Static 설정 및 CSS파일 분리

Posted by : Django at Sep 28, 2020

Category : Django

Get Code

Static 설정해 주기

Static : CSS 등 특별이 변동될 일이 없는 선언을 모아둔 파일

pragmatic\settings.py

# settings.py

# ...

STATIC_URL = '/static/'

# static파일을 staticfiles아래 넣을 것 입니다.
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [
    # BASE_DIR / "static",
    os.path.join(BASE_DIR, 'static')
]

# ...

static/base.css 생성

.pragmatic_footer_logo {
    font-family: 'Gamja Flower', cursive;
}

footer를 수정해보면

<!-- footer.html -->

<div style="text-align:center; margin-top: 2rem;">
    <div style="font-size: .6rem">
        <span>공지사항</span> |
        <span>서비스 소개</span>
    </div>
    <div style="margin-top: 1rem; font-family: 'Gamja Flower', cursive;"">
        <h6 class="pragmatic_footer_logo">Pragmatic</h6>
    </div>
</div>

head.html

{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Pragmatic</title>

    <!-- boostrap link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- googlefont -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">

    <!-- default css link -->
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}"
</head>

모두 css로 적용한다

<!-- base.css -->

.pragmatic_logo {
    font-family: 'Gamja Flower', cursive;
}

.pragmatic_footer_button {
    font-size: .6rem;
}

.pragmatic_footer {
    text-align: center;
    margin-top: 2rem;
}

.pragmatic_header {
    text-align:center;
    margin: 2rem 0;
}

<!-- header.html -->
<div class="pragmatic_header">
    <div>
        <h1 class="pragmatic_logo">Pragmatic</h1>
    </div>
    <div>
        <span>nav1</span>
        <span>nav2</span>
        <span>nav3</span>
        <span>nav4</span>
    </div>
</div>

<!-- footer.html -->
<div class="pragmatic_footer">
    <div class="pragmatic_footer_button">
        <span>공지사항</span> |
        <span>서비스 소개</span>
    </div>
    <div style="margin-top: 1rem; font-family: 'Gamja Flower', cursive;"">
        <h6 class="pragmatic_logo">Pragmatic</h6>
    </div>
</div>