핀터레스트만들기 #2
작심 삼일 하지말고 차근차근잘 따라가보자
8강
pycache 를 지워준다
소스제어를 하기위해 지운다. 속도가 빨라진다.
HTML
HYPER
TEXT
MARKUP
LANGUAGE
자주쓰이는 구문을TEMPLATE
extends / include
extends
pre-made template html
html 파일을 먼저 만들어 놓고, 그것을 가져와서 블럭들을 채워 나간다.
include
만들고있는 html파일이 있닫고 하면 , 거기에 쪼그만한 조각같은것을 템플릿안에다가 박아 넣는 느낌
익스텐드는 바탕을 깔아주는 느낌
인클루드는 뭔가를 가져와서 붙이는 느낌
익스텐드로 바탕을 만들고
인클루드로 내용을 채운다 뭐이런형식으로 만들 수 있다.
그것을 response view가 되겠죠? 이게 결과입니다.
이제는 html템플릿을 가져와서 안으로 채워넣어서 응답을 만드는 작업을한다.
$ git status
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: templates/basic.html
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: .gitignore
modified: accountapp/views.py
modified: pragmatic/settings.py
modified: templates/basic.html
A@DESKTOP-BLV1ET3 MINGW64 /c/users/A/PycharmProjects/pythonProject/pragmatic (master)
$ git add.
git: 'add.' is not a git command. See 'git --help'.
The most similar command is
add
A@DESKTOP-BLV1ET3 MINGW64 /c/users/A/PycharmProjects/pythonProject/pragmatic (master)
$ git add .
A@DESKTOP-BLV1ET3 MINGW64 /c/users/A/PycharmProjects/pythonProject/pragmatic (master)
$ git commit -m "djust Django course 8 commit"
[master 80dbee9] djust Django course 8 commit
4 files changed, 14 insertions(+), 2 deletions(-)
create mode 100644 templates/basic.html
A@DESKTOP-BLV1ET3 MINGW64 /c/users/A/PycharmProjects/pythonProject/pragmatic (master)
$ git commit -m "Initial commit"
render는 view에서 사용하든 변수를 html템플릿으로 넘길 수 있다.
9강 include/extends/block 구문을 이용한 뼈대 html 만들기
뼈대에서 인클루드 구문으로 따로 다른파일로 만든다 ->템플릿 폴더내로
#border-radius: 모서리 필렛
이번강의의핵심은 include문
top과 footer는 동일한 페이지에서 사용하니 템플릿 폴더를 따로 만들어주서 거기에
html코딩을 작성하여 붙여 넣는다. 항상 페이지마다 들어간다. 같은 형태로 (include)사용이
위의 부분과 아래부분은 똑같이 유지한다.
하지만 미들 즉 템플릿은 어카운트 앱에 추가하여 내용만 바꾸어 각 페이지마다 사용이 다르게끔 한다.(extends)
뭘 ? 뼈대를 base.html을 가져온다. 가져와서 내부의 내용만 바꿀 수 있다.
base.html
<!DOCTYPE html>
<html lang="ko">
{% include 'head.html'%}
<body>
{% include 'header.html'%}
{% block content %}
{% endblock %}
{% include 'footer.html'%}
</body>
</html>
hello_world.html
{% extends 'base.html' %}
{% block content %}
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
<h1>
testing
</h1>
</div> #안에 내용만 바꿔주는 작업 뼈대는 베이스가된다.
{% endblock %}