Tech Trail

[Django 주식 검색 웹 만들기 03] Django 웹 프로젝트에서 Template 설정하기: templates (base.html, home.html) 본문

Project Showcase/[Django] 주식 검색 웹 만들기 [완]

[Django 주식 검색 웹 만들기 03] Django 웹 프로젝트에서 Template 설정하기: templates (base.html, home.html)

_밍지_ 2024. 4. 4. 18:50
728x90
반응형
SMALL

1. Django 프로젝트 설정

 

이제 우리가 단순히 "aaa"를 출력하는 것이 아니라, 우리가 만든 웹 화면을 출력해야 합니다.

우선, stocks 앱 내에 templates라는 새로운 폴더를 생성합니다. 이 폴더는 Django에게 웹 페이지의 템플릿을 저장하는 곳임을 알려줍니다.

 

 

stocks>New>Directory

 

New Directory에 templates 입력

 

2. 템플릿 구조 설정

 

그런 다음, templates 폴더 내에 stocks 앱과 동일한 이름의 또 다른 폴더를 생성합니다. 이는 템플릿 파일을 더 구조적으로 관리하기 위한 것입니다.

 

 

 

3. 홈페이지 템플릿 작성

 

이 안에 home.html 파일을 생성하여 웹 페이지의 내용을 작성합니다.

 

 

 

 

<body></body> 태그 안에 "Hello, world!"를 입력해 보겠습니다.

 

4. 뷰 설정

 

그리고 이후에 views.py 파일로 돌아가서, Response 관련 내용을 모두 삭제하고 아래와 같이 작성할 것입니다.

 

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'stocks/home.html')

 

 

 

이렇게 하고 나서 실행시켜 볼게요.

 

 

 

 

"Hello, world!"가 웹 페이지에 표시되는 것을 확인했을 거라고 생각합니다.

 

여기서 주목해야 할 두 가지가 있습니다.

 

우선, 다시 views.py로 돌아와서, 마지막에 render 할 때 경로가 'stocks/home.html'로 되어 있었습니다. 일반적으로 'templates/'을 포함한 ' templates/ stocks/home.html' 경로가 올바르게 보일 수 있습니다. 하지만 Django는 웹을 렌더링 할 때 자동으로 'templates' 폴더 내부를 탐색하기 때문에 'templates/'을 명시할 필요가 없습니다. 'stocks/home.html'로 지정하는 것이 올바릅니다.

 

두 번째로, 우리가 굳이 'templates' 내부에 앱 이름과 동일한 폴더를 추가한 이유에 대해 생각해 보겠습니다.

이것은 관습적인 방법입니다.

Django 프로젝트에서는 여러 개의 앱이 동시에 작동할 수 있습니다.

이러한 구조를 유지하기 위해 앱 이름과 동일한 폴더를 생성하여 각 앱의 템플릿 파일을 분리합니다.

즉, 다른 앱의 home.html 파일에 실수로 접근하지 않도록 한번 더 앱 이름과 같은 폴더를 생성해서 지정해 준 겁니다.

 

5. 베이스 템플릿 생성

 

또한, 'templates/stocks' 내부에 'base.html' 파일을 생성하여 웹 페이지의 공통 요소(로고, 푸터 등)를 지정해 줄 것입니다.

 

 

 

 

웹 페이지를 보면 페이지가 변해도 상단의 로고나 하단의 라이선스 등과 같은 요소들은 중복되어 나타날 수 있습니다. 이러한 부분을 지정해 주는 작업입니다.

 

 

base.html에는 다음과 같이 작성해 주세요.

 

{% block content %}
{% endblock %}

 

 

 

그리고 home.html 파일 내의 모든 코드를 지우고 아래와 같이 작성해 주세요.

 

 

{% extends 'base.html' %}
{% block content %}
{% endblock %}

 

 

이제 홈페이지를 불러올 때, base와 home이 결합된 페이지의 형태로 불러올 것입니다.

 

6. Bootstrap 활용

 

 

구글에 Bootstrap이라고 검색하고 한번 들어가 볼게요. (아래 링크를 클릭해도 좋아요)

https://getbootstrap.com/docs/4.4/getting-started/introduction/

 

Bootstrap은 웹디자인 관련 부문을 미리 생성해 주는 사이트로, 웹 제작을 보다 쉽고 빠르게 할 수 있도록 도와줍니다. Bootstrap의 Starter Template는 기본적인 웹 페이지 레이아웃과 스타일을 미리 설정해 놓은 것으로, 웹 페이지를 시작할 때 유용하게 사용할 수 있습니다.

 

 

 

 

링크 클릭 후에 밑으로 내리다 보면 Bootstrap 공식 문서에서 제공하는 Starter Template의 예시 코드가 있는데, 이 코드를 복사하여 사용할 것입니다.

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

 

 

 

이제 base.html에 위의 코드를 붙여 넣어주세요.

아까 써준 block 부분 코드는 body 태그 안으로 넣어주시면 됩니다.

 

 

이렇게 하면 home.html 파일을 호출할 때 base.html의 모든 코드가 함께 불러와집니다.

다시 한번 정리하자면, base.html 파일을 만드는 이유는 중복된 부분을 효율적으로 관리하기 위함입니다.

 

 

또한, home.html 파일 이외에도 다른 .html 파일이 있을 때는

 

{% extends 'base.html' %}
{% block content %}
{% endblock %}

 

 

{% extends 'base.html' %}와 같은 코드를 사용하여 base에 등록된 내용을 쉽게 복사해서 넣어줄 수 있습니다.

 

 

7. 템플릿 태그 활용

 

마무리로 템플릿 태그에 대해서 좀 더 알아보겠습니다.

예를 들어, 'a'라는 데이터를 넘겨줬다고 가정하면, {{ a }}와 같이 사용하여 넘겨받은 데이터를 출력할 수 있습니다.

이 기호는 지정된 값에 대한 표현을 할 때 사용됩니다.

{% url 'home' %}은 url.py 파일의 name이 'home'인 부분을 실행시키라는 의미이며, block을 사용하여 템플릿을 결합시키는 데에도 활용할 수 있습니다.

또한, HTML 문서 안에서는 for문을 사용할 수 없지만, {% for i in list %}와 같이 사용하여 for 문을 돌릴 수 있습니다. 이러한 템플릿 태그는 HTML 내부에서 작업을 더 확장할 수 있도록 도와줍니다.

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Project Showcase > [Django] 주식 검색 웹 만들기 [완]' 카테고리의 다른 글

[Django 주식 검색 웹 만들기 06] 주식 정보 테이블 디자인 및 데이터 출력 방법  (0) 2024.04.04
[Django 주식 검색 웹 만들기 05] 파이썬 Django를 활용한 주식 검색 웹 애플리케이션 만들기: 데이터 수집과 검색 기능 구현  (0) 2024.04.04
[Django 주식 검색 웹 만들기 04] 주식 api로 주식 데이터 수집과 화면 표시하기  (0) 2024.04.04
[Django 주식 검색 웹 만들기 02] Django 웹 개발 시작: 프로젝트 및 앱 설정하기 (manage.py, urls.py, views.py)  (0) 2024.04.04
[Django 주식 검색 웹 만들기 01] 프로젝트 생성 방법  (0) 2024.04.04
'Project Showcase/[Django] 주식 검색 웹 만들기 [완]' Related Articles more