Django 상속

글 작성자: caputdraconis

/* 호잇 */

템플릿 파일들의 상속을 다룹니당.

 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="/static/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row mt-5">
    			<div class="col-12 text-center">
        			<h1>로그인</h1>
    			</div>
			</div>
			<div class="row mt-5">
    			<div class="col-12">
        			{{ error }}
    			</div>
			</div>
			<div class="row mt-5">
   				 <div class="col-12">
 
                      <form method="POST" action=".">
                        {% csrf_token %}
                        {% for field in form %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            <input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id_for_label }}" placeholder="{{ field.label }}" name="{{ field.name }}">
                        </div>
                       {% endfor %}
 
                      <button type="submit" class="btn btn-primary">로그인</button>
                      </form>
    			</div>
			</div>
        </div>
     </body>
</html>

로그인 페이지를 담당하는 login.html이 대충 요로코롬 있다고 해보자.

 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="/static/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row mt-5">
    <div class="col-12 text-center">
        <h1>회원가입</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{ 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"  placeholder="사용자 이름" name="username">
                
            </div>
            <div class="form-group">
                <label for="useremail">사용자 이메일</label>
                <input type="email" class="form-control" id="useremail"  placeholder="사용자 이메일" name="useremail">
                
                </div>
            <div class="form-group">
                <label for="password">비밀번호</label>
                <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
            </div>
            <div class="form-group">
                <label for="re-assword">비밀번호 확인</label>
                <input type="password" class="form-control" id="re-password" placeholder="비밀번호" name="re-password">
            </div>
            <button type="submit" class="btn btn-primary">등록</button>
            </form>
    </div>
</div>
        </div>
    </body>
    </html>

상태가 살짝 엉망이지만 대충 회원가입을 담당하는 register.html이 이렇게 생겼다고 해보자.

자세히 보면 login.html과 register.html은 container라는 클래스를 가진 div태그 안에만 차이점이 있고 나머지 코드는 일치한다.

만약 head 태그 내에 고쳐야 하는 부분이 있다면, 지금은 login.html, register.html 이렇게 2개의 파일이지만 나중에 수많은 파일들을 하나하나 고쳐주어야 하는 귀찮음이 발생할 수도 있다!

이 귀찮음을 상속으로 해결할 수 있다.

일단 login.html과 register.html에서 일치하는 부분(container라는 클래스의 div 태그 밖)을 따로 base.html이라는 이름의 파일로 저장해준다.

 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="/static/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
        </div>
    </body>
    </html>

요로코롬

 <!-- login.html -->
<div class="row mt-5">
    <div class="col-12 text-center">
        <h1>로그인</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{ error }}
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
 
        <form method="POST" action=".">
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id_for_label }}" placeholder="{{ field.label }}" name="{{ field.name }}">
            </div>
            {% endfor %}
            
            <button type="submit" class="btn btn-primary">로그인</button>
            </form>
    </div>
</div>

 <!-- register.html -->
<div class="row mt-5">
    <div class="col-12 text-center">
        <h1>회원가입</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{ 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"  placeholder="사용자 이름" name="username">
                
            </div>
            <div class="form-group">
                <label for="useremail">사용자 이메일</label>
                <input type="email" class="form-control" id="useremail"  placeholder="사용자 이메일" name="useremail">
                
                </div>
            <div class="form-group">
                <label for="password">비밀번호</label>
                <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
            </div>
            <div class="form-group">
                <label for="re-assword">비밀번호 확인</label>
                <input type="password" class="form-control" id="re-password" placeholder="비밀번호" name="re-password">
            </div>
            <button type="submit" class="btn btn-primary">등록</button>
            </form>
    </div>
</div>

이제 base.html 안에 이 나머지 코드를 넣어서 출력해달라는 부탁을 해보쟈.

일단 base.html에 '여기다가 나머지 코드를 넣으면 돼' 라는 영역 표시를 해주자.

 {% block 블록이름 %}
{% endblock %}

위의 코드를 넣어주면, block 시작점부터 끝점(endblock) 그 사이에 코드를 넣어준다.

이번 base.html에는 블록 이름을 contents로 하여 만들어보쟈.

 <!-- base.html -->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="/static/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            {% block contents %}
            {% endblock %}
        </div>
    </body>
    </html>

그럼 이제 login.html 과 register.html에 'base.html을 불러와서 그 사이에 나를 넣어줭'을 알려주어야 한다.

{% extends "base.html" %}

'base.html을 불러와서 그 사이에 나를 넣어줭'에서 'base.html을 불러와서'를 담당하는 부분이다. login.html과 register.html의 앞에 넣어준다.

 {% block 블록이름 %}
{% endblock %}

그리고 앞에서 사용했던 block의 시작과 끝을 명시하는 코드를 사용하여 '그 사이에 나를 넣어줭'을 알려준다!

 <!-- lgoin.html -->
{% 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">
        {{ error }}
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
 
        <form method="POST" action=".">
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <input type="{{ field.field.widget.input_type }}" class="form-control" id="{{ field.id_for_label }}" placeholder="{{ field.label }}" name="{{ field.name }}">
            </div>
            {% endfor %}
            
            <button type="submit" class="btn btn-primary">로그인</button>
            </form>
    </div>
</div>
{% endblock %}

 <!-- register.html -->
{% 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">
        {{ 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"  placeholder="사용자 이름" name="username">
                
            </div>
            <div class="form-group">
                <label for="useremail">사용자 이메일</label>
                <input type="email" class="form-control" id="useremail"  placeholder="사용자 이메일" name="useremail">
                
                </div>
            <div class="form-group">
                <label for="password">비밀번호</label>
                <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
            </div>
            <div class="form-group">
                <label for="re-assword">비밀번호 확인</label>
                <input type="password" class="form-control" id="re-password" placeholder="비밀번호" name="re-password">
            </div>
            <button type="submit" class="btn btn-primary">등록</button>
            </form>
    </div>
</div>
{% endblock %}

고럼 끄으읕

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Django 상속

댓글

이 글 공유하기

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

댓글

이 글 공유하기

다른 글

[Django] Django 프로젝트 중 맞닥뜨린 높은 벽들

Django 공식문서 요약 1

Framework Django 기초 정리(3)

Framework Django 기초 정리(2)

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역