[django]MDSE_02_CSS으로 세련된 웹사이트 만들기

개요

이 게시글은 장고 기반의 웹사이트를 구축하는 과정을 기록한 문서입니다. 장고 튜토리얼 ‘점프투파이썬(https://wikidocs.net/71303)’을 참조하여 작성했습니다.

목표

기존 HTML에 CSS을 적용해 세련된 웹사이트를 만들어본다.

단순 문구말고 좀 더 그럴싸한 HTML 페이지를 띄워보자.

> ..detection/views.py

 

from django.http import HttpResponse
from django.shortcuts import render

def index(request):
  """
  페이지 Home 화면 출력
  """
  return render(request, 'detection/home.html')

 

여기서 render함수는 무슨 기능을 할까? Render함수는 파이썬 데이터를 template에 적용시킨 후에 HTML으로 반환시키는 함수다. 지금은 데이터가 없으니 단순 HTML만 반환하는 상황이다. 

 

템플릿 디렉토리 경로 설정

detection/home.html을 반환시키는 함수를 만들었다. 그렇다면 home.html 파일을 만들어주어야 한다. 하지만 그 전에 우선 템플릿 디렉토리 경로 설정부터 해주자.

> ../config/settings.py

 

TEMPLATES = [
  {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      'DIRS': [BASE_DIR / 'templates'],
      'APP_DIRS': True,
      'OPTIONS': {
          'context_processors': [
              'django.template.context_processors.debug',
              'django.template.context_processors.request',
              'django.contrib.auth.context_processors.auth',
              'django.contrib.messages.context_processors.messages',
          ],
      },
  },
]

 

DIRS는 리스트를 변수로 가지고 있는데, 템플릿 디렉터리를 여러개 지정할 수 있기 

때문이다. 템플릿 디렉터리를 지정해주었으니 해당 디렉터리에 HTML 파일을 추가하면 된다.

> Templates/detection/home.html

디렉터리 생성 후 html를 추가해주었다.

 

로컬서버를 실행해서 웹사이트를 열면 아래와 같은 화면이 출력된다.

 

화면 속 내용은 ‘사진에서 수화물 반입금지 물품을 자동으로 감지해주는 웹 프로그램’의 사이트의 일부를 나타내고 있다. 현재 필자는 멀티캠퍼스 데이터사이언스/엔지니어링 전문가 8회차 과정에 참여하여 팀프로젝트로 위 서비스를 웹 상에서 구현중이다. 아직 CSS가 적용되지 않아 난잡하지만 정상적으로 작동하고 있다는 것은 알 수 있다.

 

위에서 Home, 데이터세트, 통계 그래프… 등은 상단 네비게이션 바에 있는 메뉴들이다. 그중 데이터 세트를 dataset.html 템플릿과 연동시켜주자.

> ../templates/detection/home.html

아래와 같이 데이터세트의 a 태그의 href 속성에 ‘/detection/dataset/’url을 지정해준다.

 

...
 <div class="collapse navbar-collapse" id="ftco-nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"><a href="home.html" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">제작동기</a></li>
      <li class="nav-item"><a href="/detection/dataset" class="nav-link">데이터 세트</a></li>
      <li class="nav-item"><a href="statistics.html" class="nav-link">통계 그래프</a></li>
      <li class="nav-item"><a href="producer.html" class="nav-link">제작자</a></li>
  </ul>
</div>
...

> ../detection/urls.py

위에서 지정된 url은 views.dataset 함수와 매핑된다.

 

from django.urls import path

from . import views

app_name = 'detection'

urlpatterns = [
  path('', views.index),
  path('dataset/', views.dataset),
]

> ../detection/views.py

 

from django.http import HttpResponse
from django.shortcuts import render

def index(request):
  """
  페이지 Home 화면 출력
  """
  return render(request, 'detection/home.html')

def dataset(request):
  return render(request, 'detection/dataset.html')

 

Views.py 내 dataset 함수가 실행되어 detection/dataset.html 템플릿을 반환한다. 화면을 확인해보자.

 

localhost:8000/detection/dataset/ 사이트를 들어가면 위와 같은 화면이 나타난다. 아직 보기는 어렵지만 정상적으로 기능은 작동한다는 것을 알 수 있다. 

 

스태틱

시각이미지를 활용해 효율적으로 정보를 전달할 수 있도록 스타일시트(css)를 적용해보자. 

Static 디렉터리

스타일시트의 파일은 장고의 스태틱 디렉터리에 저장해야 한다. 이전에 템플릿 디렉터리와 같이 스태틱 디렉터리도 경로를 설정에 추가해주어야 한다.

> ../config/settings.py

 

(... 생략 ...)

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

(... 생략 ...)

 

Staticfiles_dirs 변수에 base_dir / ‘static’ 디렉터리를 설정해주었다.

 

위에 설정해준 디렉터리를 실제로 생성해주자.

Static 디렉터리를 생성하면 당연하지만 처음에는 비어있는 상태다. 위 캡처 기준으로는 css, fonts, images … 등 파일이 추가되었는데, 해당 파일은 현재 팀프로젝트에서 이미 준비해둔 파일들이다.

 

HTML 템플릿에 CSS 적용

Home.html 파일에 추가한 css을 적용해주자. 형식은 아래와 같다.

{% load static %} <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> <h1>{{ question.subject }}</h1> (... 생략 ...)

 

HTML 최상단에 {% load static %}으로 static 디렉터리를 호출한 뒤, 해당 디렉터리의 파일들을 href의 속성으로 호출해서 사용하면 된다.

 

기존 파일들은 static 디렉터리에 지정되지 않았기 때문에 주소를 모두 변경해주어야 한다. 귀찮지만 하나씩 수정해주자.

웹사이트에 은은한 파스텔톤의 UI가 적용된 것을 확인할 수 있다.

 

자 하지만 문제는 각 페이지별로 UI가 다르다는 점이다. 즉, UI가 Home.html에만 적용되어있고 다른 페이지들에는 적용되지 않은 상황이다.

 

이 경우 개별적으로 CSS를 적용해줘도 좋겠지만, 사이트 모두가 동일한 UI를 가지고 있다면 대표되는 CSS 파일을 만들어서 함께 사용하는 것이 효율적이겠다. 이것을 템플릿 상속이라 한다.

 

템플릿 상속

상속할 수 있는 표준 HTML 파일인 Base.html을 만들어주자.

> ../templates/base.html

 

{% load static %}

<!-- {% static 'style.css' %} -->

<html lang="en">
<head>
...
</head>

<body>

...

  <!-- 기본 템플릿 안에 삽입될 내용 Start -->
  {% block content %}
  {% endblock %}
  <!-- 기본 템플릿 안에 삽입될 내용 End -->

...

</body>
</html>

 

최상단에 static을 호출한다. {% block content %}와 {% endblock %} 사이에 개별 사이트의 코드들이 포함되는 부분이라고 생각하면 된다. 즉, 개별 사이트들의 HTML 파일 내용이 블락 사이에 들어간다.

 

 

 

 

 

각 사이트별로 템플릿이 잘 적용된 것을 알 수 있다.

 

로그인 사이트로 돌아가보자. 이제 실제로 로그인이 가능한 사이트를 만들어보자.