Mac 버전 장고 탬플릿 및 Bootstrap 세팅

오늘은 장고 탬플릿과 Bootstrap 세팅에 대해 설명하려고 합니다.

먼저 각 앱 폴더에 있는 탬플릿 html을 사용하는 것이 아닌 여러 개의 앱에서 공통의 탬플릿 html을 사용할 수 있도록 하기 위한 설정을 진행하겠습니다. 먼저 mypost 폴더(상위) 내부에 있는 mypost 디렉토리(하위)로 들어가서 settings.py 를 클릭합니다. 아래와 같이 TEMPLATES 변수 안에 'DIRS': [os.path.join(BASE_DIR, 'templates')]를 입력하여 장고가 기본적으로 파악하는 탬플릿의 위치를 수정해줍니다. 본래 장고가 파악하는 탬플릿의 디폴트 경로는 각 앱 안에 있는 탬플릿 html입니다.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

위와 같이 공통의 탬플릿을 참조하라고 했다면 mypost 폴더(상위) 안에 templates 폴더가 필요하겠죠? 폴더를 만들고 그 안에 base.html 파일을 생성한 후 아래와 같이 작성하면 됩니다. {% block title %} {% endblock %} 은 다음에 살펴볼 post_list.html 에서 가져올 범위를 뜻합니다.

<html>
    <head>
        <title>
            This is my website - {% block title %} {% endblock %}
        </title>
    </head>
    <body>
        {% block content %} <!--post_list.html에서 가져올 블록 범위-->

        {% endblock %}
    </body>
</html>

아래는 기존에 작성하였던 post_list.html 파일입니다. 이 파일을 templates 폴더의 base.html 파일까지 "확장"할 것이기 때문에 상단에 {% extends 'base.html' %}을 입력해줍니다. 이후 내용을 전달할 범위를 설정해주세요.

{% extends 'base.html' %}
<!--탬플릿 확장(extend) 기능-->

{% block title %}
See my posts / Writing your own post
{% endblock %}


{% block content %}

{% for post in posts %}
<br/>
<h2>{{ post.title }} </h2>
    <br/>
{{ post.content }}
<br/>

------------
{% endfor %}


<h3> 새로운 글 작성하기 </h3>

<form action="{% url 'post' %}" method="POST">
    {% csrf_token %} 
    제목 : <input name="title" /><br/>
    내용 : <textarea name="content" rows="20">
    </textarea>
    <input type="submit"/>
</form>

{% endblock %}

이제 프론트앤드 라이브러리 Bootstrap에 대해 소개해드리겠습니다. 부트스트랩은 CSS 스타일이며 Javascript 기능을 지원하는 미디어 쿼리를 사용하는 반응협 웹입니다.

부트스트랩 홈페이지에 들어가서 CDN 코드를 복사합니다. 부트스트랩을 활용하면 따로 코딩을 거치지 않아도 class나 id 명으로만 원하는 스타일을 적용할 수 있습니다. 아래의 코드를 base.html 에 추가해야 하는데요, 위치는 그 아래의 코드를 참고해주시기 바랍니다. 간단히 말하면, CSS와 테마에 해당하는 코드는 </title> 뒤에, 자바스크립트에 해당하는 코드는 <body> 뒤에 추가하면 됩니다.

<html>
    <head>
        <title>
            New this is my website - {% block title %} {% endblock %}
        </title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    </head>
    <body>
        <h1> This is new best HTML</h1>
        {% block content %}
        
        {% endblock %}
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

다음으로 post_list.html 파일에서 부트스트랩 class명 "table" 을 추가하여 테이블 모양을 만들어보도록 하겠습니다.

{% extends 'base.html' %}

{% block title %}
See my posts / Writing your own post
{% endblock %}


{% block content %}

<table class="table">
    <thead>
        <tr>
            <th> head </th>
            <th> tail </th>
        </tr>
    </thead>
    <tobody>
        <tr>
            <td> good looking </td>
            <td> good body </td>
        </tr>
    </tobody>
</table>


{% endblock %}

이렇게 하고 웹 페이지를 살펴보면 아래와 같이 테이블이 나타날 것입니다.

지금까지 부트스트랩이 무엇인지 간단히 살펴봤고, 이제부터 본격적으로 부트스트랩을 살펴보겠습니다. 부트스트랩의 핵심기능은 웹 Layout(Grid System) 과 반응협 웹(미디어 쿼리) 입니다. 다시 말해, 부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12열(column)이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그리드 옵션에 대한 자세한 내용은 부트스트랩 홈페이지를 참고하시기 바랍니다. 한국어로 잘 설명되어 있어 이해하는 데 어렵지 않을 것입니다.

먼저 base.html 파일을 열어 코드를 추가해줍니다. 부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 콘테이너 요소가 필요합니다. 따라서 block content가 입력될 곳을 <div class="container">로 감싸줘야 합니다.

<html>
    <head>
        <title>
            New this is my website - {% block title %} {% endblock %}
        </title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    </head>
    <body>
        
        <div class="container">
            <h1> This is new best HTML</h1>
            {% block content %} <!--post_list.html에서 가져올 블록 범위-->
            {% endblock %}
        </div>
        
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

다음으로 post_list.html 파일을 열어 다음과 같이 수정합니다. <div class="col-md-6 col-sm-12"> 같은 경우는 그대로 따라할 필요 없이 본인이 원하는 레이아웃대로 설정하면 됩니다. <div class="jumbotron"> 같은 경우, 부트스트랩의 콤포넌트 카테고리의 점보트론을 확인하시면 어떤 모양인지 알 수 있습니다. form 모양을 설정할 때 사용한 class="form-control 관련 내용은 콤포넌트 카테고리의 입력 그룹을 확인해보시면 됩니다. 버튼 모양을 설정하기 위해 사용한 class="btn btn-primary btn-block" 의 경우는 콤포넌트 카테고리의 라벨을 확인해주세요.

{% extends 'base.html' %}

{% block title %}
See my posts / Writing your own post
{% endblock %}


{% block content %}

<div class="row">
{% for post in posts %}
    <div class="col-md-6 col-sm-12">
        <div class="jumbotron">
            <div class="row">
            <h2>{{ post.title }}</h2>
            </div>
            <div class="row">
            {{ post.content }}
            </div>
        </div>
    </div>
{% endfor %}
</div>

<h3> Write New Post</h3>

<form action="{% url 'post' %}" method="post">
    {% csrf_token %}    
    <h4>Title</h4>
    <input class="form-control" name="title" type="text"/>
    <h4>Content</h4>
    <textarea class="form-control" name="content" type="text" rows="20">
    </textarea>
    <button class="btn btn-primary btn-block" type="submit">Submit the post</button> 
</form>
{% endblock %}

위의 과정을 모두 잘 따라오셨다면 아래와 같은 웹 페이지를 볼 수 있을 것입니다.

728x90

저작자표시 비영리 변경금지

'문돌이 존버 > Django 스터디' 카테고리의 다른 글

AWS EC2 Ubuntu 18.04 Django 서버 구축 및 Logstash 연동 (1탄) (0)	2020.08.15
윈도우(window) 버전 Django 세팅 및 코드 예제 (0)	2020.07.31
Mac 버전 장고 웹페이지 http request (1)	2020.06.20
Mac 버전 장고 데이터베이스 관리 3탄 (1)	2020.06.20
Mac 버전 장고 데이터베이스 관리 2탄 (0)	2020.06.20

문돌이가 이해한 인공지능 이야기

Mac 버전 장고 탬플릿 및 Bootstrap 세팅

'문돌이 존버 > Django 스터디' 카테고리의 다른 글

티스토리툴바

Mac 버전 장고 탬플릿 및 Bootstrap 세팅

'문돌이 존버 > Django 스터디' 카테고리의 다른 글

'문돌이 존버/Django 스터디' 관련글

티스토리툴바