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์ ๊ฐ๋ค ๋ถ์ฌ๋ฃ๊ธฐ
๋ถํธ์คํธ๋ฉ ๋ถ๋ถ๋ง ์์ ํด์ฃผ๋ฉด ๋จ
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>