1. Bootsratp에 대하여
Bootstrap을 적용시키는 방법에는 2가지가 있다.
1. Bootstrap관련 코드를 직접 다운 받아 설치하기
2. CDN 이용하기
1) Bootstrap관련 코드를 직접 다운 받아 설치하기
다운받아서 static 폴더에 넣어서 활용하면 됨.(static 관련 설명은 일단 만드는 Django(2)에 포스팅되어 있음)
js랑 css파일들을 알아서 분류해서 넣어두고
{% load static %}
<!DOCTYPE html>
<html lang="en">
<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" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<title>Bootstrap Practice</title>
</head>
<body>
<div class="container">
Hello Bootstrap!
<button type="button" class="btn btn-primary">Primary</button>
</div>
</body>
</html>이런식으로 Html문서를 작성하면 clear
2) CDN 이용하기
네트워크상에서 가져오는거라 코드 복붙만 하면 된다.
하지만 좀 불안정하다는 단점이 있다.
2. Bootstrap 실습 - NABVAR 적용하기.
다음으로 실제 Bootstrap을 적용해 보는 시간.
목표한 것은 위에 메뉴바를 만들고, 메뉴바에서 탭을 누르면 그 페이지로 이동하게 하는 것.
코드는 다음과 같다.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<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" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<title>Bootstrap Practice</title>
</head>
<body>
<nav class="navbar navbar-expand-lg" style="background-color: #0dd2e8;">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'realhome' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Hello Bootstrap!!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
</body>
</html>주의할 점이라면 Home 탭이나 About 탭을 눌렀을 때 해당 HTML문서를 띄우려면 템플릿 언어를 사용해야 한다는 점.
그걸 위해서 bootapp과 관련한 url의 name을 지정했다.
bootapp에 있는 views.py에 home2라는 함수를 실행하는 url 이름을 realhome으로 설정.
마찬가지로 about/으로 들어갔을 때 띄우는 about함수는 about이라는 이름으로 설정.
bootstrap의 views.py
urlpatterns = [
path('', views.home2, name='realhome'),
path('about/', views.about, name='about'),
]a태그에서 비어있는 href자리에 템플릿 언어로 url 주소를 입력하면 된다.
"{% url 'realhome' %}"에서 realhome은 url path에서 지정한 이름이지 Html문서의 이름인 것은 아니니 주의.
<a class="nav-link active" aria-current="page" href="{% url 'realhome' %}">Home</a>아무튼 이렇게 코딩하면 이런 웹사이트가 만들어진다.(허접주의)
3. Template 상속
중복되는 코드가 매우 많으니까 중복되지 않는 코드만 따로 관리할 수 있도록 장고에서 지원하는 기능. 경험해 보니 상당히 혁신적인 기능 중 하나라는 생각이 든다. 굉장히 편리하다.
1) 일단 bootapp-templates에 base.html 파일을 하나 만들어준다.
2) 그리고, 겹치는 부분을 복사해서 base.html에 붙여넣는다.
3) 나머지 HTML문서들에서 겹치는 부분을 싹 지우고 아래의 코드를 붙여넣는다. base.html에 있는거 그대로 갖고오라는 뜻임.
{% extends 'base.html' %}4) 그리고 HTML문서마다 다른 부분은 base.html에서 다음의 코드를 붙여넣는다. 참고로 block content의 content 부분은 다른 이름 아무거나 원하는거 넣어도 된다.
{% block content %}
{% endblock %}5) 실제 HTML문서들로 들어가 달라질 부분들을 아까 그 코드로 감싼다.
{% block content %}
{% endblock %}최종적으로 base.html은 다음의 모양이 되고.
나머지 문서들은 이런 모양이 됨.
보면 base.html에 템플릿상속을 해준 덕분에 나머지 html이 상당히 간결해진 것을 알 수 있다. 이것이 Template 상속의 힘이다.
