Static 설정 및 CSS 파일 분리

수강계획

2022/01/08

번호

복습여부

수강여부

수강일

2022/01/08

속성

css파일 : 디자인 파일만 따로 분리해놓은 것

html은 뼈대만 남겨두고 디자인적인 요소들은 css 파일로 따로 관리하는 것이 보통 개발패턴

static : 정적, 자주 변경되지않는 파일들

setting 파일에서 STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)

os - 라이브러리

path - 경로 관련 모듈

join - function, 합친다

BASE_DIR 누르고 ctrl + b : 선언되어있는 내용으로 바로 감

python manage.py collectstatic : 프로젝트 안에 있는 모든 static file들을 한군데로 모아주는 명령어

장고 공식문서에서 앱에 종속되지 않은 static 폴더를 따로 만드는 코드 복붙

STATICFILES_DIRS = [
    BASE_DIR / "static",
]
Python
복사

최상위 폴더(Jichuuu) 밑에 static 폴더 생성, 그 안에 base.css 파일 생성

footer.html 파일에서 스타일 적용한거 지우고 clss=”이름”

<div style="text-align:center; margin-top: 2rem;">

        <div style="font-size: 0.6rem;">
            <span>공지사항</span> ㅣ
            <span>제휴문의</span> ㅣ
            <span>서비스 소개</span>
        </div>
        <div style="margin-top: 1rem;">
            <h6 class="Jichuuu_footer_logo">Jichuuu</h6>
        </div>

    </div>
HTML
복사

base.css 파일에 . 이름 {스타일적용할거}

.Jichuuu_footer_logo {
    font-family: 'Gamja Flower', cursive;
}
CSS
복사

footer.html에 base.css 가져오는 과정이 필요함 - head.html 파일에 {% load static %}

default css link 작성

{% load static %}

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

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

    <!-- GOOGLE FONTS LINK    -->
    <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>
HTML
복사

f12 눌러서 font 적용된거 확인

•

setting 파일의 static_url과 head의 css link가 연결됨

<div class="Jichuuu_header">
        <div>
             <h1 class="Jichuuu_logo">Jichuuu</h1>
        </div>
        <div>
            <span>nav1</span>
            <span>nav2</span>
            <span>nav3</span>
            <span>nav4</span>
        </div>
    </div>
HTML
복사
header.html

<div class="Jichuuu_footer">

        <div class="Jichuuu_footer_button">
            <span>공지사항</span> ㅣ
            <span>제휴문의</span> ㅣ
            <span>서비스 소개</span>
        </div>
        <div style="margin-top: 1rem;">
            <h6 class="Jichuuu_logo">Jichuuu</h6>
        </div>

    </div>
HTML
복사
footer.html

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

.Jichuuu_footer_button {
    font-size: 0.6rem;
}

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

.Jichuuu_header {
    text-align:center;
    margin: 2rem 0;
}
CSS
복사
base.css