이번 포스팅은 정말 짧겠네요.
Django의 MTV 중 Template을 상속하는 방법에 대해 알아보겠습니다.
왜 상속을 하나요?
템플릿은 html 파일이라고 이해하면 됩니다. 즉, 동일한 레이아웃을 갖는 여러개의 html을 만들게 되면 중복으로 업무로드가 발생하니, 중복부분은 상속을 시킴으로써 효율적인 구성을 가능하게 합니다.
base가 되는 html 생성
먼저 공통적인 레이아웃을 담당하는 부분을 담은 html 파일을 만듭니다. base.html 이라고 하겠습니다.
중간에 보시면 {} 로 담아놨는데요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>화면</title> <link rel="stylesheet" href="/static/bootstrap.min.css"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> {% block contents %} {% endblock %} </div> </body> </html> | cs |
block content: 상속받는 html이 시작하는 부분입니다.endblock: 상속받는 html이 끝나는 부분입니다.
쉽게 얘기해서, 저 둘 사이에 있는 부분들만 각각의 템플릿에서 작업해주면 됩니다. 위 코드의 경우, container 안에 든 코드만 따로 작업한다고 보면 됩니다.
각각의 템플릿에는 블록 사이의 내용만 담습니다.
예제는 아래와 같습니다. html의 기본이 되는 구문들은 다 빼고, div 부분부터 시작하는 것을 알 수 있습니다.
어떤 베이스 템플릿을 가져올 건지, 블록 시작점과 끝점은 어딘지 각각 선언해줘야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | {% extends "base.html" %} {% block contents %} <div class="row mt-5"> <div class="col-12 text-center"> <h1>로그인</h1> </div> </div> <div class="row mt-5"> <div class="col-12 text-center"> {{ error }} </div> </div> <div class="row mt-5"> <div class="col-12"> <form method="post" action="."> {% csrf_token %} <div class="form-group"> <label for="username">사용자명</label> <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="이름을 입력하세요." name="username"> </div> <div class="form-group"> <label for="password">비밀번호</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력하세요." name="password"> </div> <button type="submit" class="btn btn-primary">로그인</button> </form> </div> </div> {% endblock %} | cs |
'Developer > Django' 카테고리의 다른 글
| [Django] Form 이해 및 사용 방법 (0) | 2020.11.30 |
|---|---|
| [Django] Bootstrap 스타일 적용하기 (0) | 2020.11.27 |
| [Django] GET, POST 메소드 구현 (0) | 2020.11.26 |
| [Django] URL 연결하기 (0) | 2020.11.25 |
| [Django] 모델 테이블 분리해서 어드민 페이지에 보여주기 (0) | 2020.11.24 |
댓글