{% load static_files %}
<!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">
<title>{% block title %}home.html{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
{% block extra-style %}{% endblock %}
</head>- bootstarp
- font
- icon
Tip
<!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">
<title>{% block title %}home.html{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
{% block extra-style %}{% endblock %}
</head>
...
<div class="container">
{% block content %}{% endblock %}
</div>
{% block footer %}{% endblock %}
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% block extra-script %}{% endblock %}- base.html에 title, extra-style, content, footer, extra-script를 지정해서 구성을 만들어준다.
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}home.html{% endblock %}
{% block extra-style %}
<style type="text/css">
.home-window {
background-image: url("{% static 'img/lion.jpg' %}");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 500px;
border-top: 10px solid #ccc;
border-bottom: 10px solid #ccc;
color: yellow;
padding: 20px 0 0 20px;
}
.title {
color: #c80;
font-weight: bold;
}
.powered {
position: relative;
top: 77%;
color: #cc0;
font-style: italic;
}
.footer-wrapper {
background: #456;
color: #eee;
line-height: 50px;
}
.footer-wrapper a {
color: #ff9; /* footer-right text */
}
.footer-wrapper a:hover {
color: #0ff;
}
footer ul li {
text-align: center;
}
</style>
{% endblock extra-style %}
{% block content %}
<div class="home-window">
<h2 class="title">Django - Python Web Programming</h2>
<h4 class="powered"><i class="fas fa-cog"></i> powered by django and bootstrap.</h4>
</div>
<hr style="margin: 10px 0;">
<div class="row text-center">
<div class="col-sm-6">
<h3>Todo App</h3>
<p>With Todo app, you can manage, prioritize, and complete the most important things
you need to do every day. I can focus on the most important things
and I can do my day more deliberately.
You can also share lists with colleagues, friends, and family.</p>
</div>
<div class="col-sm-6">
<h3>Blog App</h3>
<p>This application makes it possible to log daily events or write your own interests
such as hobbies, techniques, etc.
A typical blog combines text, digital images, and links to other blogs, web pages,
and other media related to its topic.</p>
</div>
</div>
{% endblock content %}
{% block footer %}
<footer class="fixed-bottom footer-wrapper">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Copyright © 2019 DjangoBook by shkim</p>
</div>
<div class="col-md-8">
<ul class="list-inline float-right">
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" data-placement="top" title="준비중입니다">Introduction</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" data-placement="top" title="준비중입니다">Help</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" data-placement="top" title="준비중입니다">Policy</a>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" data-placement="top" title="준비중입니다">Something</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
{% endblock footer %}
{% block extra-script %}
<script>
$(function () {
$('[data-toggle=tooltip]').tooltip();
});
</script>
{% endblock extra-script %}- 해당 순서에 대한 예시다.
OnePunchLotto