본문 바로가기
기타/django

작정하고 장고 - include / extends / block 구문

by 방배킹 2023. 4. 3.

작정하고 장고 9강 - include / extends / block 구문을 이용한 뼈대 html 만들기

<!DOCTYPE html>
<html lang="ko">

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

<body>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>
    <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>
</body>
</html>

다음과 같은 코드에서 include, extends, block 구문을 사용해보자

<!--head.html -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--header.html -->
<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>
<!--footer.html -->
<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>
<!--base.html -->
<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body>
    {% include 'header.html' %}

    {% block content %}
    {% endblock %}

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

위와 같이 추가 html 파일을 만들고 include 문을 사용해서 적용한다.


accountapp 내부에 template 디렉토리를 만들고 hello_world.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 %}

base.html의

{% block content %}
{% endblock %}

부분에 대한 코드이다.

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

그리고 view.py의 코드를 다음과 같이 hello_world.html을 반환하도록 해주면


마찬가지로 실행이 잘된다.

'기타 > django' 카테고리의 다른 글

작정하고 장고 - static 설정, css파일 분리  (0) 2023.04.05
작정하고 장고 - 구글폰트, 부트스트랩 사용하기  (0) 2023.04.04
작정하고 장고 - Template 만들기  (0) 2023.03.31
작정하고 장고 - 파이참 git 연결, commit, push  (0) 2023.03.31
작정하고 장고 - 간단한 view 만들기  (0) 2023.03.29

관련글

댓글

티스토리툴바