ACHO.pk devlog

[멋쟁이사저처럼10기] Django template 언어와 속성, 네임스페이스(url 이동) 본문

멋쟁이사자처럼

[멋쟁이사저처럼10기] Django template 언어와 속성, 네임스페이스(url 이동)

Acho 2022. 6. 26. 14:30

초기 환경 설정
1. 가상환경 myvenv 생성
2. 프로젝트 bootstrap_ex 생성
3. 어플리케이션 bootapp 생성
4. templates, html, settigs.py, urls.py, views.py 설정

이전 글인 https://acho.tistory.com/34와 이어지는 글이다.

template 언어를 통해서 html에서 어떻게 url의 이동을 구현할 수 있는지, template 속성을 이용하여 어떻게 효율적으로 코딩할 수 있는지 알아보자.

Navbar

 

 

웹사이트 상단에 위치한 메뉴바, html 사이의 네비게이션이 가능하다.

 

https://getbootstrap.com/docs/5.2/components/navbar/

 

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

getbootstrap.com

 

color schemes 본문을 보면 navbar 색깔을 바꿀 수 있음을 알 수 있다.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

 

해당 기능 사용법을 익히기 위해 필요한 부분만 두고 다 지운다.

 

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">My page</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About page</a>
          </li> 
        </ul>
      </div>
    </div>
  </nav>

</body>

navbar 생성

Alerts

Additional content 

<body>

  <div class="alert alert-success" role="alert">
    <h4 class="alert-heading">About 페이지 입니다.</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>

</body>

alerts 생성

특정 url로 이동하기

 

navbar를 이용해서 url를 이동할 때마다 html 화면이 바뀌게 설정하는 방법은

프로젝트 폴더 안에 있는 urls.py 폴더에 아래 코드를 적어주면 된다.

from django.contrib import admin
from django.urls import path
from bootapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name ="home"),
    path('about/', views.about, name ="about")
]

그런 후에 어플리케이션 폴더 안에 있는 template 폴더에 about.html를 생성해주고, views.py 파일에 아래 코드를 추가한다.

def about(request):
    return render(request, 'about.html')

 

home.html과 about.html 에서 navbar 코드를 조금 수정해야 navbar의 메뉴 버튼으로 원하는 url로 이동이 가능하다.

 

위에서 urls.py에 url 경로와 이름을 지정했던 것을 기억할 것이다.

그 때 우리가 지정한 이름을 적어줘야한다. 아래 코드 '이름'에 적어줘야 한다.

href = "{% url '이름' %}"

 

 

home.html과 about.html의 코드는 거의 비슷하니 하나의 코드만 알아보겠다.

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">My page</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li> 
        </ul>
      </div>
    </div>
  </nav>

</body>

 

중복되는 코드 관리 =  template 상속

 

중복되는 코드를 하나의 html에 쓰고, 중복되지 않은 부분만 개별적인 html에서 관리한다.

 

1. 코드에서 중복되는 부분을 인식

2. 중복되는 코드를 써 줄 html 생성( 나는 base.html 로 이름을 붙였다. )

3. base.html 파일에서 개별적인 코드가 들어가는 부분에 아래 코드를 써준다.

 {% block content %} 
 	<!-- 각각의 html에서 서로 다른 코드가 들어가는 부분 -->
 {% endblock %}
 
<!-- 이런식으로 content 이름을 바꿔도 됨 -->
  {% block mycontent %} 
 	<!-- 각각의 html에서 서로 다른 코드가 들어가는 부분 -->
 {% endblock %}

 

4. 개별적인  각각의 html에서 중복되는 부분을 다 지운 후 아래 코드와 개별적인 코드를 써준다.

{% extends 'base.html' %}

{% block content %} 
	여기에 개별적인 코드 쓰기	
{% endblock %}

 

home.html

{% extends 'base.html' %}

{% block content %} 
  <div class="alert alert-success" role="alert">
    <h4 class="alert-heading">홈페이지 입니다.</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>
{% endblock %}

about.html

{% extends 'base.html' %}

{% block content %} 
    <div class="alert alert-success" role="alert">
    <h4 class="alert-heading">About 페이지 입니다.</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>
{% endblock %}

base.html

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" type="text/css" href = "{% static 'css/bootstrap.min.css' %}">
    <script src = "{% static 'js/bootstrap.min.js' %}"></script>
    <title>Bootstrap</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">My page</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li> 
        </ul>
      </div>
    </div>
  </nav>


    {% block content %} 

    {% endblock %}

</body>
</html>

 

 

 

 

 

 

'멋쟁이사자처럼' 카테고리의 다른 글

[멋쟁이사저처럼10기] Django models.py  (0) 2022.07.04
[멋쟁이사저처럼10기] Django 회사 소개 사이트 만들기  (0) 2022.06.26
[멋쟁이사저처럼10기] bootstrap 다루기  (0) 2022.06.26
[멋쟁이사저처럼10기] Django static 파일 다루기  (0) 2022.06.26
[멋쟁이사자처럼10기] Django url mapping 다루기  (0) 2022.05.29
'멋쟁이사자처럼' Related Articles more
Comments