Django와 부트스트랩

2022. 1. 14. 14:52ㆍ강의 정리/Django 와 프론트엔드

반응형

출처 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%A5%EA%B3%A0-%EC%9B%B9%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

 

장고(Django)를 배우기 시작한 입문자이시거나, 또는 배우고 싶은 생각이 있으신 분은 위 출처의 강의를 적극 추천드립니다!!!

 

 

 

 

Django에서는 템플릿끼리 서로 상속하고, 상속받는 부모 자녀의 관계를 지정할 수 있다.

 

본 포스팅에서는 layout.html을 부모로 지정하고, post_list.html과 post_detail.html을 자녀로 지정하겠다.

 

부모

 layout.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/minty/bootstrap.min.css" integrity="sha384-H4X+4tKc7b8s4GoMrylmy2ssQYpDHoqzPa9aKXbDwPoPUA3Ra8PA5dGzijN+ePnH" crossorigin="anonymous">    
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <title> {% block title %}{% endblock title %} </title>
    <style>
        body{
            padding-top: 5rem;
            padding-bottom: 2rem;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      
      <div class="container">
          <div class="row">
              <div class="col-sm-12">
                  {% block content %}
                  {% endblock content %}
      
                  <hr/>
                  &copy; Dongbaek
              </div>
          </div>
      </div>
</body>
</html>

 

  • 보통 부모 템플릿에서 script나 CDN, import, style을 부여함으로써 자녀 템플릿에 상속하여 자녀 템플릿의 가독성을 높여준다. 
    • <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/minty/bootstrap.min.css" integrity="sha384-H4X+4tKc7b8s4GoMrylmy2ssQYpDHoqzPa9aKXbDwPoPUA3Ra8PA5dGzijN+ePnH" crossorigin="anonymous">    
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <title> {% block title %}{% endblock title %} </title>
    <style>
        body{
            padding-top: 5rem;
            padding-bottom: 2rem;
        }
    </style>
</head>

 

  • 템플릿의 디자인과 레이아웃은 부트스트랩에서 원하는 예제를 선택후 해당 예제의 html에서 nav부분만 복사하여 가져왔다.
  • view-source:http://bootstrapk.com/examples/starter-template/
    • <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

 

  • 부트스트랩은 12그리드 시스템을 사용하기에 자녀에 상속할 block 위치에 적용시켜준다.
  • https://devdongbaek.tistory.com/31?category=1022153
    •       <div class="container">
          <div class="row">
              <div class="col-sm-12">
                  {% block content %}
                  {% endblock content %}

 

  • &copy는 저작권 표시(©)를 만들어준다. 
    •                   <hr/>
                  &copy; Dongbaek
              </div>
          </div>
      </div>

 

 

 

 

자녀

post_list.html

{% extends "Instagram/layout.html"%}
{% load bootstrap4 %}

{% block title %}
    Instagram / Post List
{% endblock title %}

{% block content %}       
    <form action="" method="get">
        <input type="text" name="q" value="{{ q }}" />
        <input type="submit" value="검색" />
    </form>


    <table class="table table-borderd table-hover">
        <tbody>
            {% for post in post_list %}
                <tr>
                    <td>
                        {{ post.pk }}
                    </td>
                    <td>
                        {% if post.photo %}
                            <img src="{{ post.photo.url }}" style="width: 100px;"/>
                        {% else %}
                            No Photo    
                        {% endif %}
                    </td>
                    <td>
                        <a href= "{{ post.get_absolute_url }}" >
                        {{ post.message }}       
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    {{ is_paginated }}
    {{ page_obj }}
    {% if is_paginated %}
        {% bootstrap_pagination page_obj size="small" justify_content="center" %}
    {% endif %}
{% endblock content %}

 

  • 자녀 템플릿은 extends를 사용해서 부모 템플릿을 상속받는다. 
    • {% extends "Instagram/layout.html"%}

 

  • 부트스트랩의 문법을 사용할 경우 load를 통해 bootstap을 사용한다 말해줘야함. settings.py에 적용도 필수
    • {% load bootstrap4 %}

 

  • 부모 템플릿이 지정한 block에 자녀 템플릿이 적용할 코드들을 넣어줌 
    • {% block title %}
    Instagram / Post List
{% endblock title %}

{% block content %}       
    <form action="" method="get">
        <input type="text" name="q" value="{{ q }}" />
        <input type="submit" value="검색" />
    </form>


    <table class="table table-borderd table-hover">
        <tbody>
            {% for post in post_list %}
                <tr>
                    <td>
                        {{ post.pk }}
                    </td>
                    <td>
                        {% if post.photo %}
                            <img src="{{ post.photo.url }}" style="width: 100px;"/>
                        {% else %}
                            No Photo    
                        {% endif %}
                    </td>
                    <td>
                        <a href= "{{ post.get_absolute_url }}" >
                        {{ post.message }}       
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    {{ is_paginated }}
    {{ page_obj }}
    {% if is_paginated %}
        {% bootstrap_pagination page_obj size="small" justify_content="center" %}
    {% endif %}
{% endblock content %}
       

 

 

 

자녀

post_detail.html

{% extends "Instagram/layout.html"%}


{% block title %}
    Post  Detail pk#{{ post.pk }}
{% endblock title %}

{% block content %}
    <h2>Author : {{ post.author }}</h2>

    {% if post.photo %}
        <div>
            <img src="{{ post.photo.url }}" />
        </div>
    {% endif %}

    {{ post.message }}
    <hr/>
    <a href="{% url 'instagram:post_list' %}" class="btn btn-primary">
        목록
    </a>
{% endblock content %}

 

  • 자녀 템플릿은 extends를 사용해서 부모 템플릿을 상속받는다. 
    • {% extends "Instagram/layout.html"%}

 

  • 부모 템플릿이 지정한 block에 자녀 템플릿이 적용할 코드들을 넣어줌 
    • {% block title %}
    Post  Detail pk#{{ post.pk }}
{% endblock title %}

{% block content %}
    <h2>Author : {{ post.author }}</h2>

    {% if post.photo %}
        <div>
            <img src="{{ post.photo.url }}" />
        </div>
    {% endif %}

    {{ post.message }}
    <hr/>
    <a href="{% url 'instagram:post_list' %}" class="btn btn-primary">
        목록
    </a>
{% endblock content %}

 

 

 

최종 화면

post_list.html
post_detail.html

반응형

'강의 정리 > Django 와 프론트엔드' 카테고리의 다른 글

Django가 static 파일을 다루는 방법  (0) 2022.01.17

관련글

댓글 0

티스토리툴바