아마도 html 을 사용해 보았다면, 페이지 마다 공통적으로 사용되는 부분이 많다는 사실을 알 것이다. html 파일은 기본적으로 크게, Head 부분과 body 부분으로 나뉘는데, 상당수의 웹사이트는 화면의 가장 윗부분에 자기 회사의 로고와 홈페이지 내의 메뉴들, 그리고 하단에는 회사 주소, 카피라이트 문구, 개인정보보호정책 링크 등등 필요한 부분을 적어 놓는 부분이 항상 따라다니도록 만들고 있다. 요새는 꼭 그렇지 않은 경우들도 많이 있기는 하지만, 어떤 방식이 되었든지간에 기본적으로 웹사이트에는 항상 고정적인 부분과, 페이지마다 바뀌는 부분들로 내용이 구성되어 있다.
먼저 아래의 소스를 보자
default.html
<!DOCTYPE Html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World
</body>
</html>이 소스를 보면 크게 head 부분과 body 부분으로 나뉜다. 이 중에 head 부분의 경우 항상 동일한 코드를 유지하는 경우가 많으므로 head 부분을 다른 파일로 만들어 주면 좋을듯 하여 새로운 파일로 head.html 파일을 만들어주자
head.html
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
헤드 부분이 이렇게 분할되었으므로, default.html 파일도 다시 수정을 해줄 필요가 있다. 아래와 같이 수정해준다.
default.html
<!DOCTYPE Html>
<html lang="ko">
{% include 'head.html' %}
<body>
Hello World
</body>
</html>이제 body 부분의 내용을 좀 보강할 필요가 있다. 언제까지 Hello World 만 보여줄 수는 없으니까 말이다.
간단하게 이렇게 해보면 좋을 것 같다.
default.html
<!DOCTYPE Html>
<html lang="ko">
{% include 'head.html' %}
<body>
Blogair
<hr>
Hello World
<hr>
Copyright (c) blogair.tistory.com
</body>
</html>그냥, Blogair 라는 이름의 타이틀을 만들고, Copyright (c) blog.tistory.com 이라는 이름의 하단을 만들었다. <hr>은 그냥 "줄"을 그리는 코드라고 보면 된다. 원치않으면 빼도 된다. 역시, 타이틀과 하단 부분 역시 보통 변화 없이 페이지가 많아져도 공통으로 진행되는 경우가 많으므로 역시 별도의 파일로 만들어준다면 보기도 좋고 편할것 같다. 상단은 top.html, 하단은 footer.html 파일로 만들어 주고 인클루드를 사용하면 default.html 파일은 아래와 같이 변한다
default.html
<!DOCTYPE Html>
<html lang="ko">
{% include 'head.html' %}
<body>
{% include 'top.html' %}
<hr>
Hello World
<hr>
{% include 'footer.thml' %}
</body>
</html>이제 Hello world 부분만을 바꾸면 모든 홈페이지의 내용을 바꾸는 구조가 가능해졌다!
그런데 여기까지만 할 경우 동일한 소스를 계속 사용하면서 지금의 Hello World 부분만 바꿔주면 되는 상황이 된다. 하지만 그것도 귀찮다. 구지 계속 똑같은걸 볼 필요는 없지 않을까? Hello World 부분도 바꿔버리자.
default.html
<!DOCTYPE Html>
<html lang="ko">
{% include 'head.html' %}
<body>
{% include 'top.html' %}
<hr>
{% block content %}
Hello World
{% endblock %}
<hr>
{% include 'footer.thml' %}
</body>
</html>만약 줄을 그리는 <hr> 코드도 보기 싫다면, top 또는 footer 파일 안에 집어 넣어도 된다. 여기서 block 라고 한 부분은 다른 웹페이지에서 이 뼈대파일을 가져와서 block content 부분을 새로 만들어서 넣으면 내용이 변경되는 부분이 된다.
사용 방법은 다음과 같다
hello_world.html
{% extends 'default.html' %}
{% block content %}
Hello World 2
{% endblock %}이렇게 하면 hello_world.html 파일을 부르면 head, top, footer 도 나오면서 Hello World 2 가 출력된다. 쉽게 말해 hello_world 에서 언급한 default.html 을 배경으로 맨 뒤에 깔고, default.html 파일에 존재하는 block 중 content 를 찾아서 hello_world.html 에 있는 파일로 내용을 덥어버려라와 같은 내용이다. 이렇게 하면 소스가 매우 단순해져서 좋다.
그런데 hello_world.html 은 어디에 넣어야 할까?
mysite 아래 memberApp 아래에 templates 폴더를 만들고 넣으면 된다. 코어의 셋팅 파일 내용중 INSTALLED 인가 하는 부분에 우린 처음에 생성했던 앱의 이름을 추가해주었었다. 그 덕분에 templates 역시 앱 아래에 만들어 줄 경우, 상위의 templates 를 검색하다 데이터가 없으면 앱 아래에 있는 templates 를 검색해서 자동으로 표시해주기 때문에 그냥 만들어서 넣어주면 좋지만, 단순히 이렇게만 하는 경우 한가지 문제가 있는데, 이름이 같은 파일의 경우 우선순위에서 밀리게 될 수 있다. 이런 경우를 대비하여 memberApp 폴더 안에 만든 templates 폴더 안에다가 memberApp 을 하나 더 만들고 그 위치에다가 데이터를 넣는다면 나중을 위해서도 훨씬 좋다.
이렇게 하고 나면, views.py 에 있는 주소 역시 다시 변경해주어야 한다.
memberApp/views.py
from django.shortcuts import render
# Create your views here.
def hello_world(request):
return render(request, 'memberApp/hello_world.html')이렇게 하고 나면, 브라우저상의 url 에 /member/hello_world/ 가 들어왔을 때 memberApp/hello_world.html 이 표시될 것이다
'개발 > PYTHON-DJANGO' 카테고리의 다른 글
| PYTHON > DJANGO > MYSQL 시작 (0) | 2021.09.02 |
|---|---|
| 파이썬 장고 7. 데이터베이스 Mysql(MariaDB) 연결 (0) | 2021.06.21 |
| 파이썬 장고 4. 직접코드에서 템플릿 연결로 변경 (0) | 2021.06.21 |
| 파이썬 장고 3. 연습1 - Hello World (0) | 2021.06.21 |
| 파이썬 장고 2. 앱생성 및 코어와의 연결 (0) | 2021.06.21 |