Django(장고)에서 form을 이용한 style 활용법

Study/python
2021. 2. 3. 16:49

python 코드로 스타일 먹이기

보통 Django(이하 장고)를 사용할 때 프론트를 장고에서 제공하는 템플릿을 이용해서 만드는데요, 템플릿은 html영역이기 때문에 html와 css를 잘 먹여서 스타일을 어떻게 먹이냐에 따라 화면에 퀄리티가 달라집니다 ㅋㅋ

저는 백엔드 개발자이지 프론트개발자가 아니기 때문에 html/css에 아주 취약한데요,,, 여러분이 아마 장고를 처음 설치해봤다면 기본적으로 제공하는 admin화면을 보셨을 겁니다. 근데 내부 라이브러리를 찾아봐도 그 admin화면을 그리는 html와 css파일을 찾을 수 없는데, 어떻게 그린 걸까요?

장고에서는 템플릿에 html안에서 style을 적용하지 않고, python 코드에 form 클래스를 이용해서 style을 적용할 수 있습니다. 일단 빈 프로젝트를 만들고 startapp이라는 명령어를 통해 새로운 app을 하나 만듭니다.

setting.py에 INSTALLED_APPS에 새로만든 'app'을 추가해주세요

그리고 forms.py를 하나 만들어서 name, email, age 필드를 만들어볼 건데요, 필드를 만들기 전에 모델을 먼저 만들어줍니다.

# ~/app/models.py
from django.db import models


class User(models.Model):
    name = models.CharField(max_length=20)
    email = models.EmailField()
    age = models.IntegerField()

간단하게 User 모델을 만들어줬습니다. 이름하고 이멜하고 나이만 있네요 ㅋㅋ 다음은 forms.py 파일을 만들어서 아래와 같이 입력합니다.

# ~/app/forms.py
from django.forms import ModelForm, TextInput, EmailInput, NumberInput
from .models import User


class UserInfoForm(ModelForm):
    class Meta:
        model = User
        fields = ['name', 'email', 'age']
        widgets = {
            'name': TextInput(attrs={
                'class': "form-control",
                'style': 'max-width: 300px;',
                'placeholder': 'Name'
                }),
            'email': EmailInput(attrs={
                'class': "form-control",
                'style': 'max-width: 300px;',
                'placeholder': 'Email'
                }),
            'age': NumberInput(attrs={
                'class': "form-control",
                'style': 'max-width: 100px;',
                'placeholder': 'Age'
            }),
        }

보시면 attrs에 style과 html 속성 값들이 들어간 것을 알 수 있습니다. 이렇게 python에서 속성을 먹이고 템플릿에 넘겨주면 자동으로 짠~하고 보이는 거죠.

이제 템플릿을 만들어볼 텐데요, app폴더 안에 templates 폴더를 만들고 다시 app 폴더를 만들고 index.html을 만들어봅시다.

{# ~/app/templates/app/index.html #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
{{ form }}
</body>
</html>

html은 아주 간단합니다. 그냥 기본 포맷에 body 안에 {{form}}만 추가해줬어요.

시험해보기 위해서 마지막으로 views.py와 urls.py를 세팅해봅시다.

# ~/app/views.py
from django.shortcuts import render
from .forms import UserInfoForm


def index(request):
    return render(request, "app/index.html", {
        "form": UserInfoForm,
    })

# ~/djangoProject/urls.py
from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
]

여기서 urls.py는 app폴더에 있는 게 아니라 프로젝트 폴더(settings.py와 같은 경로)에 있는 urls.py입니다.

이제 장고를 켜고 127.0.0.1:8000/index로 접속해봅시다.

단순히 views.py에서 전달받은 form만 body에서 출력했을 뿐인데 적절하게 form이 그려졌습니다.

전체를 출력하지 않고 하나씩만 출력도 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
<div>
    {{ form.name }}
</div>
<div>
    {{ form.email }}
</div>
<div>
    {{ form.age }}
</div>
</body>
</html>

index.html을 위처럼 바꾸면 아래와 같이 화면이 바뀝니다.

단건으로 쓸 경우 필드 이름 label이 빠지네요.

정리

위에서 사용했던 것처럼 html에서 style을 먹이지 않고 python에서 class단위로 form을 관리할 수 있습니다.

물론 html에서 css활용이 더욱 편한 분들이 있을 거예요, 하지만 django에서 제공하는 form를 사용하면 각 component단위로 관리가 가능합니다. 마치 react나 vue 같은 프론트 프레임워크처럼요!!

따라서 장고 하나만 사용할 경우에는 이 기능을 활용하면 프론트 코드를 쉽게 정리할 수 있을 것 같습니다.

자세한 정보는 아래 공식 문서 페이지에 잘 나와있더군요 ^^ 더 자세한 설명은 아래 링크를 참고하세요.

Django 튜토리얼 파트 9: 폼(form)으로 작업하기 - Web 개발 학습하기 | MDN (mozilla.org)

Django 튜토리얼 파트 9: 폼(form)으로 작업하기 - Web 개발 학습하기 | MDN

Django 튜토리얼 파트 9: 폼(form)으로 작업하기 Jump to sectionJump to section 이 튜토리얼에서 우리는 Django에서 HTML Form 작업 방법을 보여주고 특히 model Instance를 생성,수정,제거 하는 Form을 작성하는 가

developer.mozilla.org

저작자표시 비영리 변경금지

'Study > python' 카테고리의 다른 글

Pycharm community 버전에서 django 프로젝트 생성 (0)	2021.08.10
Python에서 switch문 사용하기. if ~ elif 그만하고 싶을 때 ㅋㅋㅋ (0)	2021.03.19
Django mysql Full Text Index 먹이기 (0)	2020.03.25
[ISSUE] Django migrate 문제 (0)	2020.03.03
anaconda 가상환경 설치 및 python 프로젝트 초기 세팅 (0)	2020.03.01

IT, I Think