220114 TIL

CoderS·2022년 1월 14일

TIL django 코드잇 코딩

TIL DAY 157

오늘 배운 일

✔️ Django 웹 개발

1. 디자인 입히기 I

이번에는 지금까지 작성한 블로그 프로젝트에 디자인을 입혀보겠다.

사실 우리는 웹 사이트에 디자인을 입히는 과정은 웹 퍼블리싱에서 배웠듯이 HTML 과 CSS 를 사용해서 작업하는 일이 필요하다.

django 에 집중하기 위해서 HTML 과 CSS 는 미리 준비해두었다.

사실 디자인 템플릿은 무료 디자인부터 유료 디자인 템플릿까지 인터넷에서 쉽게 찾을 수 있다.

중요한 사실은 그 템플릿을 가져와서 django 에 넣는 작업이다.

이번 과정을 통해서 우리는 다양한 템플릿을 가져와서 웹 사이트에 적용시킬 수 있게 될 것 이다.

먼저, django 문법을 적용하지 않은 일반적인 템플릿 디자인 파일을 보겠다.

밑에 있는 링크를 클릭해서 저장해주고 압축 해제시켜서 우리 costory 프로젝트로 이동시킨다.

링크텍스트

design 폴더 안에 index.html 파일을 실행시켜준다.

결과는...

이렇게 예쁜 코스토리 디자인 템플릿이 나타나게 된다.

그리고 글 하나를 클릭해주면...

위에처럼 글이 하나 나오는데 사실 이 부분은 하드코딩 되어있기 때문에 모든 게시글이 똑같이 나온다.

이제 우리는 이 디자인을 가져와서 우리 코스토리 프로젝트에 적용을 시켜볼 것 이다.

costory 프로젝트가 있는 VSCode 로 이동해준다.

design/index.html

index.html 로 가서 확인해보면 HTML 구조로 짜여있다.

그리고 design 디렉토리에는 다섯 가지의 HTML 파일들이 존재한다.

design/index.html

design/posting.html

design/detail.html

등 다섯 개의 HTML 파일들의 head 부분이 반복되는 것을 확인할 수 있다.

body 부분 또한 반복되는 부분들이 존재한다.

design/index.html

CSS 파일의 경로나 이미지 파일의 경로가 하드코딩 되어있다.

그리하여 우리는 파일들을 가져와서 공통되는 구조들은 부모 템플릿으로 만들어주고 base.html 넣어준 다음에 상속받는 방식으로 코딩을 해 볼 것이다.

그리고 게시글 마다 변경이 필요한 부분은 블록 처리를 해서 구현을 하고 이미지나 CSS 같은 정적 파일도 django 구조로 바꿔준다.

그럼 이제는 코드를 작성하면서 디자인 템플릿을 django 프로젝트에 넣어보겠다.

먼저 templates 디렉토리를 보면 세 개의 파일들이 존재한다.

중요한 것은 우리는 기존 파일들이 아닌 밑에 있는 링크를 참고해서 위에처럼 저장하고 압축을 풀어준다.

링크텍스트

그리고 들어가서...

design_template 을 클릭해서 안에 있는 3개의 HTML 파일들을 우리의 templates posts 에 있는 HTML 파일들을 덮어쓴다.

그리고 VSCode 로 가서 먼저 base.html 를 확인해준다.

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>코스토리</title>
    <meta charset="UTF-8">
    {% block css %}
    {% endblock css %}
    <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css">
</head>
<body>
   <div id="warp">
        <div id="header">
            <div id="nav">
                <div class="logo">
                    <a href="[A]"><img src="{% static 'posts/images/logo.png' %}"></a>
                </div>
            </div>
            {% block post_header %}
            {% endblock post_header %}
        </div>
        {% block logo_text %}
        {% endblock logo_text %}
        <div id="content">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div>
        <div id="footer">
            <div class="footer">
                <p>Costory</p>
            </div>
        </div>
    </div>
</body>
</html>

바뀐 것 을 확인할 수 있다.

코드를 잘 보면 네 개의 블록이 있는데 그 중에 맨 위에 있는 CSS 블록 같은 경우에는 CSS 즉 HTML 파일마다 다른 스타일을 적용해 주기 위해서 블록을 만들어주었다.

두 번째 블록은 포스트 상세 페이지 위에서 제목을 넣어주기 위해서 post_header 라는 블록을 만들어주었다.

다음 블록은 글 목록 페이지에 로고가 있는데, 그 로고를 만들어주기 위한 logo_text 블록이 존재한다.

마지막으로 포스트의 내용이 들어갈 content 블록이 있다.

우리는 앞으로 base.html 을 상속해서 여러 템플릿을 만들게 될 것이다.

자식 템플릿에서는 구현이 필요한 부분에 이 블록들을 사용하면 되는 것이다.

base.html

여기 A 라고 적힌 부분을 구현해보도록 하겠다.

빨간줄로 그어져있는 부분은 로고를 클릭했을 때, 이동할 링크를 적어주는 것인데, 로고를 클릭하면 우리 웹 페이지의 가장 첫 화면인 포스트의 목록을 보여주는 URL 로 이동하도록 하겠다.

costory 프로젝트의 urls.py 를 참고해서 하드코딩된 URL 대신 URL 템플릿 태그를 이용해서 작성을 해보겠다.

전에 배운것을 토대로 템플릿 태그를 사용해서 만들어보았다.

그럼 이 base.html 을 상속해서 post_list 템플릿과 post_detail 템플릿을 적어보겠다.

먼저 post_list.html 로 가서 파일의 구조를 분석해보겠다.

post_list.html

{% block css %}
    <link rel="stylesheet" href="./css/post_list.css">
{% endblock css %}

{% block logo_text %}
    <div id="header">
        <div class="container">
            <h1><img src="{% static 'posts/images/headertxt.png' %}"></h1>
        </div>
    </div>
{% endblock logo_text %}


{% block content %}
    <div class="post_container">

    </div>
{% endblock content %}



<!-- 글 목록에서 반복될 개별 포스트 템플릿

<div class="post"><a href="[A] 개별 포스트로 이동하는 URL">         
    <h2 class="title">[B] 글 목록에서 보여질 제목</h2>
    <p class="date">[C] 글 목록에서 보여질 작성일</p>
    <p class="text">[D] 글 목록에서 보여질 본문 100자</p>
</a></div>

-->
    
    
<!-- 이전에 작성했던 post_list.html

{% extends './base.html' %}

{% block post_container %}
    <h3>글 목록 페이지</h3>
    <table>
        <tr>
            <td>제목</td>
            <td>작성일</td>
            <td>수정일</td>
        </tr>
        {% for post in posts %}
            <tr>
                <td><a href="{% url 'post-detail' post.id %}">{{post.title}}</a></td>
                <td>{{post.dt_created}}</td>
                <td>{{post.dt_modified}}</td>
            </tr>
        {% endfor %}
    </table>
{% endblock post_container %}

-->