본문 바로가기
Django/Django로 pinterest만들기

003. Django 뼈대 template html 만들기

by hyun-am 2020. 12. 17.

 

뼈대 만들기

 

include, extends, block

 

먼저 장고에서는 템플릿 상속을 통해 html코드 구현시 재사용을 편하게 하기위에 include, extends,block를 제공합니다. 여기서 먼저 include사용 예시를 봐보겠습니다.

 

먼저 메인 프로젝트내에서 templates폴더를 생성한 후 아래와 같이 html 파일을 만들어 주겠습니다.

그러면 파일 구조는 다음과 같습니다.

  • hyunterest
    • hyunterest
    • accountapp
    • myvenv
    • templates
      • base.html
      • footer.html
      • head.html
      • header.html
    • manage.py
    • .env
    • .gitignore

 

<hyunterest/templates/base.html>

<!DOCTYPE html>
<html lang="ko">
  {% include 'head.html' %}
  <body>
    {% include 'header.html' %}
    
    {% block content %}
    {% endblock %}

    {% include 'footer.html' %}
  </body>
</html>

<hyunterest/templates/head.html>

<head>
    <meta charset="UTF-8">
    <title>Hyunterest</title>
</head>

나머지 footer과 header는 아직 필요하지 않아서 그냥 빈 상태로 두겠습니다.

 

잘 적용 되는지 확인하기

 

먼저 잘 적용 되는지 확인하기 위해 만들어둔 accountapp에서 진행하겠습니다.

 

먼저 views.py에 들어가서 테스트를 할 view를 생성하겠습니다.

<hyunterest/accountapp/views.py>

def hello(request):
    return render(request, 'accountapp/hello.html')

마찬가지로 이제 이것을 들어갈 링크를 생성해 주겠습니다.

 

<hyunterest/accountapp/urls.py>

from django.urls import path
from .views import hello
app_name = "accountapp"

urlpatterns = [
    path('', hello, name="hello")
]

마지막으로 화면상으로 보여줄 templates을 만들겠습니다.

먼저 templates를 만들기 위해 앱안에 templates라는 폴더를 생성하고 그 안에 accountapp이라는 폴더를 또 생성하겠습니다.

구조는 다음과 같습니다.

  • hyunterest
    • accountapp
      • templates
        • accountapp
          • hello.html
    • hyunterest
    • manage.py
    • myvenv
    • templates
    • .gitignore
    • 기타등등

     

그 후 다음과 같이 html코드를 입력하겠습니다.

<hyunterest/accountapp/templates/accountapp/hello.html>

{% extends 'base.html' %}
{% block content %}
  <body>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem"></div>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem"></div>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem"></div>
  </body>
{% endblock %}

그 후 실행시킨 후 다음과 같은 링크에 들어가면 아래와 같은 화면이 나오는 것을 확인할 수 있습니다.

 

링크 : http://127.0.0.1:8000/account/

header,footer설정하기

이제 header와 Footer를 만들어서 다시 한번 수정을 해보겠습니다.

 

<hyunterest/templates/header.html>

<div style = "text-align:center; margin-bottom:2px;">
    <div>
        <h1>Hyunterest</h1>
    </div>
    <div>
        <span>nav1</span>
        <span>nav2</span>
        <span>nav3</span>
        <span>nav4</span>
    </div>
</div>

 

<hyunterest/templates/footer.html>

<div style = "text-align:center;margin-top:2px;">
    <div style="font-size:.6rem;">
        <span>공지사항</span> |
        <span>문의사항</span> |
        <span>서비스소개</span>
    </div>
    <div style="margin-top:1rem;">
        <h6>Hyunterest</h6>
    </div>

</div>

 

그 다음 기존에 만들었던 hello.html도 수정하겠습니다.

<hyunterest/accountapp/templates/accountapp/hello.html>

{% extends 'base.html' %}
{% block content %}
  <body>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem"><h3 style="padding:2rem">Body</h3></div>
  </body>
{% endblock %}

 

마지막으로 base.html을 수정한 다음 실행시켜 보겠습니다.

<hyunterest/templates/base.html>

<!DOCTYPE html>
<html lang="ko">
  {% include 'head.html' %}
  <body>
    {% include 'header.html' %}
    <hr>

    {% block content %}
    {% endblock %}
    <hr>
    
    {% include 'footer.html' %}
  </body>
</html>

 

이렇게 서로 영향을 미치지 않고 잘 변경 된 것을 확인할 수 있습니다.

 

참고

 

프로젝트 관련 참고 영상은 아래 유튜브를 참고하고 만들었습니다.

https://www.youtube.com/watch?v=RWEZITw27Ts&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo

 

코드를 참고하고 싶으면 아래의 주소를 참고 하시면 되겠습니다.

https://github.com/HyunAm0225/hyunterest

 

HyunAm0225/hyunterest

pinterest사이트 Clone 코딩. Contribute to HyunAm0225/hyunterest development by creating an account on GitHub.

github.com

Django로 Pinterest만들기

001. 프로젝트 세팅하기

hyun-am-coding.tistory.com/entry/001-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

 

001. 프로젝트 세팅하기

프로젝트 세팅하기 폴더와 가상환경 만들기 먼저 장고 프로젝트를 만들기위한 폴더를 만들겠습니다. 먼저 저는 저의 이름을 따서 hyunterest라는 폴더를 만들겠습니다. 그리고 그 후 폴더 안에 들

hyun-am-coding.tistory.com

002. Account App 만들기

hyun-am-coding.tistory.com/entry/002-Account-APP-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

002. Account APP 만들기

Account App만들기 django에서 App생성하기 먼저 다음과 같은 명령어를 통해 App을 생성하겠습니다. python manage.py startapp accountapp 그러면 다음과 같이 폴더 구성이 됩니다. hyunterest accountapp hyunte..

hyun-am-coding.tistory.com

003. Django 뼈대 template html 만들기

hyun-am-coding.tistory.com/entry/003-Django-%EB%BC%88%EB%8C%80-template-html-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

003. Django 뼈대 template html 만들기

뼈대 만들기 include, extends, block 먼저 장고에서는 템플릿 상속을 통해 html코드 구현시 재사용을 편하게 하기위에 include, extends,block를 제공합니다. 여기서 먼저 include사용 예시를 봐보겠습니다. 먼

hyun-am-coding.tistory.com

 

저작자표시

'Django > Django로 pinterest만들기' 카테고리의 다른 글

Django Form에 bootstrap적용하기  (0) 2020.12.29
Header과 Footer 꾸미기  (0) 2020.12.22
002. Account APP 만들기  (0) 2020.12.17
001. 프로젝트 세팅하기  (0) 2020.12.17

관련글

댓글

티스토리툴바