🛠 Django 기본 Form(as_p)을 간접 커스터마이징하는 방법

🛠 Django 기본 Form(as_p)을 간접 커스터마이징하는 방법

---

🎯 목표

Django의 기본 form.as_p 구조를 사용하면서도 Bootstrap 스타일 적용, 동적 버튼/제목 변경 등 UI를 개선하는 방법을 익히고, blog_form.html 템플릿과 View 코드의 관계를 이해합니다.

---

✅ 1. 템플릿 구조 (blog_form.html)

{% extends 'base.html' %}
{% block content %}
  <h1 class="mt-3">블로그 {{ sub_title }}</h1>
  <form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button class="btn btn-primary">{{ btn_name|default:"저장" }}</button>
  </form>
{% endblock %}

🔍 주요 특징

• form.as_p: Django의 기본 HTML 렌더링 방식. 각 폼 필드를 <p> 태그로 감싸서 출력
• {{ sub_title }}: View에서 전달된 값에 따라 "작성", "수정" 등의 문구 표시
• {{ btn_name|default:"저장" }}: 버튼 이름을 동적으로 설정. 값이 없으면 "저장"이 기본값

---

✅ 2. View 코드에서 context 동적 전달

✏️ BlogCreateView 예시

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['sub_title'] = '작성'
    context['btn_name'] = '생성'
    return context

✏️ BlogUpdateView 예시

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['sub_title'] = '수정'
    context['btn_name'] = '수정'
    return context

📌 역할 요약

• sub_title: 템플릿의 <h1> 제목에 반영됨
• btn_name: 버튼의 텍스트에 반영됨
• 같은 템플릿(blog_form.html)을 사용하지만 View에 따라 보여지는 UI는 다르게 구성됨

---

✅ 3. Bootstrap 스타일 적용: 간접 커스터마이징

form.as_p는 직접 스타일 조정이 어려움 → 그래서 아래 방법 사용

1️⃣ JavaScript로 클래스 강제 부여 (form-js.html)

<script>
  document.querySelectorAll('select, input, textarea').forEach(function(ele){
    ele.classList.add('form-control');
  });
</script>

• 모든 입력 요소에 form-control 클래스를 자동 부여
• Bootstrap UI 자동 적용됨 (단, 클라이언트 렌더링 기준)

2️⃣ 또는 widgets 방식으로 스타일 부여 (Form 클래스에서)

class BlogForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ['title', 'content']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'content': forms.Textarea(attrs={'class': 'form-control'}),
        }

---

🧩 정리: 직접 vs 간접 커스터마이징

방식 설명 유연성

form.as_p	Django 기본 구조 출력	❌ 낮음
JS로 class 추가	form-control 자동 부여	✅ 중간
widgets 설정	폼 클래스 내에서 직접 Bootstrap 적용	✅ 중간
form.field 직접 출력	완전 수동 제어 (필드, 라벨, 에러까지)	✅ 최고

---

✅ 최종 요약

• form.as_p는 직접 커스터마이징은 불가하지만, 외부에서 간접적으로 스타일 적용 가능
• 템플릿에 보여지는 제목과 버튼 문구는 View의 get_context_data()로 동적 설정
• 하나의 템플릿에서 Create/Update 등 다양한 뷰를 유연하게 처리할 수 있는 구조

💡 간단하게 시작하고 싶다면 form.as_p + JS 스타일, 세부 제어가 필요하면 form.field 방식으로 전환하세요!