📂 정적 파일 관리하기

이정연·2022년 9월 19일

django static

Django

목록 보기

1/12

포스트 목록 페이지에 부트스트랩 적용하기

HTML에서 css파일을 불러와 적용하는 과정이다.

이 때 css 파일을 post_list.html이 속해있는 templates폴더에 저장하는 것이 아니라 다른 곳에 저장해야 한다.

templates 폴더는 동적인 파일들을 제공한다. 예를 들어 post_list.html 파일을 참고해봐도 사용자의 입맛에 맞게

커스텀된 views.py의 내용에 따라 사용자에게 제공한다. 즉 계속 소스 코드 내용이 바뀔 수 있다는 점이다.

반면에 css,js 파일은 고정된 내용만 제공하면 된다. 따라서 이는 static 폴더에서 관리를 해야한다.

앱 단위에 static 폴더를 만든 후 그 아래에 css 파일을 넣어주면 예쁘게 적용된 홈페이지를 만날 수 있다.

<!DOCTYPE html>
{% load static %}
<html lang="ko">
    <head>
        <title>Blog</title>
        <link rel="stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" media="screen">
        <script src="https://kit.fontawesome.com/7738fa2555.js" crossorigin="anonymous"></script>
    </head>

load static으로 정적인 파일을 쓴다고 선언해준 후 css 파일이 위치한 경로를 지정해주어 사용한다.

포스트 상세 페이지 부트스트랩

Start Bootstrap 홈페이지 > Templates > Blog > Blog Post에서 카피카피
(model)_detail.post에 갖다 붙여넣기
부트스트랩 부분만 수정해주면 됨

실제 포스트 내용 반영 방법

model.field를 이용하여 원하는 위치에 작성

ex)

<!-- Post header-->
                        <header class="mb-4">
                            <!-- Post title-->
                            <h1 class="fw-bolder mb-1">{{ post.title }}</h1>
                            <!-- Post meta content-->
                            <div class="text-muted fst-italic mb-2">{{ post.created_at }} by 작성자명 쓸 위치(개발예정)</div>
                            <!-- Post categories-->
                            <a class="badge bg-secondary text-decoration-none link-light" href="#!">Web Design</a>
                            <a class="badge bg-secondary text-decoration-none link-light" href="#!">Freebies</a>
                        </header>
                        <!-- Preview image figure-->
                        <figure class="mb-4"><img class="img-fluid rounded" src="https://dummyimage.com/900x400/ced4da/6c757d.jpg" alt="..." /></figure>
                        <!-- Post content-->
                        <section class="mb-5">
                            <p>{{ post.content }}</p>
                        </section>

이정연

0x68656C6C6F21

다음 포스트

📂 정적 파일 관리하기

Django

포스트 목록 페이지에 부트스트랩 적용하기

포스트 상세 페이지 부트스트랩

실제 포스트 내용 반영 방법

🎵 미디어 파일 관리하기

0개의 댓글