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

 

전에 만들었던 blog_list.html 을 복사해서 방금 만든 post_list.html 에 덮어 씌워보자.

 

그리고 서버를 실행시키고 http://127.0.0.1:8000/blog/ 에 들어가면

 

 

이러한 화면이 나온다. 뭐 전보다는 낫긴 한데 그래도 좀 뭔가 허전하다..

 

좀 덜 이쁜걸 보아하니 css 가 적용이 안된 것 같다. 개발자 도구에서 [console] 을 확인하면 

 

 

음 역시 bootstrap.min.css 가 없댄다.

 

html -> css

 위의 순서를 보면 웹 브라우저가 서버에 접속을 하면 html 을 서버에게서 받는다. 그런데 만약 html 에서 css 파일을 적용한다고 나와있으면! css 파일을 불러와서 웹 브라우저에 다시 랜더링한다. 즉 bootstrap.min.css 파일을 부르는건 html 인 것이다..

 

일단 장고의 작동 구조를 보면 장고는 MTV 구조로 동작한다. 즉 여기서의 templates 폴더의 html 파일은 정적인 파일이 아닌 것이다.

따라서 templates 폴더에 css 나 js 파일을 같이 저장해도 html 이 알아서 찾아가지 못한다..!

왜냐하면? 장고는 views.py 에서 정의한 내용에 따라 html 파일의 빈칸을 채워 웹 페이지에 보여주는 것이기 때문이다...

 

그러므로 우리는 특정 URL 로 접속을 하면 그에 맞게 html, css, js 를 제공할 수 있도록 설정만 해두면 되는 것이다.

 

2. css 경로 지정

 

특정 URL 이 입력되면 css 파일을 제공해주기 위해 경로를 지정해줘야 한다.

 

일단 앱 폴더(여기서는 blog 폴더) 안에 blog/static/blog/bootstrap 폴더를 만든다.

이전에 받았던 bootstrap.min.css 파일과 bootstrap.min.css.map 파일을 그 안에 넣자.

 

 

그리고 post_list.html 파일을 수정하자!

 

<!DOCTYPE html>
{% load static %} <!-- 이건 static 폴더를 가져오겠다는 의미 -->
<html>

<head>
    <title>Blog</title>
    <link rel="stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" media="screen">
    <script src="https://kit.fontawesome.com/cdfefe70b1.js" crossorigin="anonymous"></script>
</head>

(...생략)

 

그리고 새로고침 하니까 적용이 안 되던데.. 그래서 다시 서버를 재시작하니까 정상적으로 됐다!

 

 

이제 우리가 실제로 가지고 있는 포스트 내용을 여기에 보이게 해보자.

 

 

3. 실제 포스트 내용 출력하기

 

지금 만들어져있는 html 파일에는 포스트가 1개 보이게 해놓은 상태인데, 여기에 실제 포스트 내용이 보이게 하자.

 

현재, post_list.html 에 보면  <!-- Blog post --> 라고 적혀있는 div 가 있는데,  그 위에다가 for 문을 작성해서 포스트 내용을 출력해주면 된다. 물론 밑의 포스트 제목, 포스트 내용, 포스트 작성일자 또한 수정해야한다.

 

<div class="col-md-8 col-lg-9">
                <h1>Blog</h1>
                {% for p in post_list %}
                <!-- Blog post-->
                <div class="card mb-4">
                    <a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg"
                            alt="..." /></a>
                    <div class="card-body">
                        <h2 class="card-title h4">{{ p.title }}</h2>
                        <p class="card-text">{{ p.content }}</p>
                        <!-- 여기서 p.get_absolute_url 은 blog/models.py 에 있는 함수 중 Post 상세 페이지로 이동시켜주는 함수이다. -->
                        <a href="{{ p.get_absolute_url }}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{ p.created_at }} by
                        <a href="#">작성자 명 위치</a>
                    </div>
                    (...생략)
                </div>
                {% endfor %}
            </div>

 

그리고 새로고침.

 

 

이상 무.

 

포스트 내용 아래에 있는 'Read More -> ' 버튼을 클릭하면 

 

 

 

이렇게 포스트 상세 페이지로 이동한다.

'캡스톤 > Django' 카테고리의 다른 글

[Django] 템플릿에서 if 문 적용하기  (0) 2022.03.20
[Django] 포스트 상세 페이지에 부트스트랩 적용  (0) 2022.03.18
[Django] CBV로 페이지 만들기  (0) 2022.03.11
[Django] URL 설정  (0) 2022.03.11
[Django] 모델 생성  (0) 2022.03.10

티스토리툴바