본문 바로가기

Python_WEB/Tweetme

[Django]Bootstrap & Django Templates

728x90

CodingEntrepreneurs Django 강의 정리

Bootstrap>

https://ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

 

부트스트랩 (프론트엔드 프레임워크) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동��

ko.wikipedia.org

 

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

CDN>

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

 

extends tag>

{% extends "base.html" %}

 

1. 기본 탬플릿 지정

2. 템플릿 확장의 의미

3. 템플릿 태그

4. 템플릿 태그는 퍼센트 기호와 단일 중괄호로 표현한다.

 

block tag>

{% block blockname %}
{% endblock blockname %}

 

1. 탬플릿의 섹션들을 선언

 

base.html>

<!-- templates/base.html -->

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Tweetme 2{% block head_title %}{% endblock head_title %}</title>
</head>

<body>
    {% block content %}
    {% endblock content %}
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html> 

 

home.html>

<!-- templates/pages/home.html -->

{% extends 'base.html' %}

{% block head_title %}
This is amazing!!!!
{% endblock head_title %}

{% block content %}
Welcome to Tweetme 2
{% endblock content %} 

 

결과물>

반응형

'Python_WEB > Tweetme' 카테고리의 다른 글

[Django]Dynamic Load Tweets via JavaScript  (0) 2020.07.08
[Django]Tweet List View  (0) 2020.07.08
[Django]Bootstrap & Django Templates  (0) 2020.07.08
[Django]Our First Template  (0) 2020.07.08
[Django]Dynamic View into REST API Endpoint  (0) 2020.07.01
[Django]Handling Dynamic Routing  (0) 2020.07.01