지난 시간에는 html에 몇가지 태그를 추가해서 view로 출력하는 시간을 가졌죠.
그 html의 이름이 base였습니다.
이번 시간에는 왜 그 html 이름이 base 였는지 확인하는 시간입니다.
보통 웹사이트를 보면 header footer, body의 기본적인 레이아웃을 잡아서 작업을 할텐데
그것들을 계속 복사붙이기 하면서 새로 다른 페이지 들을 만드는 것이 상당히 비효율 적이게 되는것이죠. 따라서 base.html에서 레이아웃을 잡아두고 다른 html을 추가할 때 이 요소들을 상속받으면서 계속 사용하게 됩니다.
그래서 base.html에
{% block contents %}
{% endblock %}과 같은 것 문자들이 들어가 있었는데.
지난 시간의 base.html과 base.css를 수정했습니다.
(수정코드는 맨 밑에 두겠습니다.)
솔직히 html에 대한내용은 이번 시간까지하면 거의 끝납니다.
제가 html, css, javascript등에 대한 내용은 잘...
단지 view에서 연산하고 output을 시각하기 위해 강제로 저도 참고하면서 배워서 작성중입니다.
1. base.html 상속 받는 html 만들기.
[모두 app_main]안에서 이루어짐
1. child.html(이름상관없음) 을 생성한다.
2. 해당 페이지의 내용을 다음처럼 채워준다.
{% extends 'base.html' %}
{% load static %}
{% block contents %}
{% endblock %}- view에서 새로 함수뷰를 작성한다.
->child.html 렌더링만 함
def child(request):
return render(request, 'child.html')4.url.py
import하는 부분에 child를 추가하고 urlspatterns에 한줄이 추가되었죠?
from django.contrib import admin
from django.urls import path, include, re_path
from .views import index, child
urlpatterns = [
path('', index, name='main'),
path('child', child, name='child')
]2. http://127.0.0.1:8000/main/child 실행
분명 child.html에는 html에 대한 내용이 하나도 없는데 base.html과 동일한 결과가 나타납니다!.
이제 실제로 원하는 내용은
{% block contents %}
{% endblock %}내부에 html코드를 추가하여 작성하면 됩니다!
끝.
3.변경된 코드
base.html
<!DOCTYPE html>
<html lang="ko">
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block header %}
{% endblock %}
<title> CSS 레이아웃 테스트</title>
</head>
<body>
<section id="header">
<div class="wrapper">
<div class="header_title">
<li class="bugger area">
</li>
</div>
<div class="header_icon">
HOKlNG
</div>
<div class="profile">Log In</div>
</div>
</section>
<section class="container">
<section class="item section-body">
{% block contents %}
{% endblock %}
</section>
</section>
<section id="footer">
<section class="footer">
푸터
</section>
</section>
</body>
</html>base.css
body {
margin:0;
height:100vh;
}
#header{
font-weight: bold;
background-color: #FF8C0A;
font-size: 15px;
color: white;
}
.wrapper{
width: 100%;
min-height: 65px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_icon{
display: flex;
margin: 0 auto;
list-style:none;
}
.header_list li{
margin-right: 4%;
}
.header_title{
font-size: 30px;
margin-left: 30px;
}
.profile{
margin-right: 3%;
}
.container {
max-width: 1240px;
min-height: 900px;
height: 100%;
margin: 0 auto;
}
.item {
padding: 3%;
}
.section-body {
background-color: #ffd84d;
height: 100vh;
max-height: 100%
}
.footer {
min-height: 150px;
background-color: #f5f5f5;
}