Flask-WTF는 Flask 웹 프레임워크와 함께 사용되는 WTForms와 결합된 확장 도구입니다. Flask-WTF를 사용하여 폼 요소를 그리면, 기본적으로 Bootstrap 스타일이 적용됩니다. 하지만, 사용자는 이 기본 스타일을 변경하고 자신만의 스타일을 적용할 수 있습니다.

폼 요소들의 스타일을 설정하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 WTForms에서 제공하는 class 속성을 사용하는 것입니다.

예를 들어, Flask-WTF를 사용하여 LoginForm 클래스로 로그인 폼을 만들었다고 가정해봅시다. 이 폼의 입력 필드에 스타일을 적용하려면 다음과 같이 class 속성을 설정합니다.

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()], render_kw={"class": "form-control"})
    password = PasswordField('Password', validators=[DataRequired()], render_kw={"class": "form-control"})

위의 예시에서 render_kw 매개변수를 사용하여 class 속성을 설정하였습니다. 이렇게 설정된 class 속성은 폼 요소의 HTML 출력에 적용됩니다. 위의 코드에서는 Bootstrap의 form-control 클래스를 사용하여 입력 필드에 스타일을 적용하였습니다.

또 다른 방법으로는, 템플릿 파일에서 개별적으로 스타일을 설정하는 것입니다. Flask-WTF는 템플릿 파일에서 폼 요소의 속성을 직접 설정할 수 있는 기능을 제공합니다.

예를 들어, login.html 템플릿 파일에서 LoginForm 폼의 입력 필드에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다.

{% extends "base.html" %}

{% block content %}
  <form method="POST" action="{{ url_for('login') }}">
    {{ form.csrf_token }}
    <div class="form-group">
      {{ form.username.label }}
      {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
      {{ form.password.label }}
      {{ form.password(class="form-control") }}
    </div>
    <button type="submit" class="btn btn-primary">로그인</button>
  </form>
{% endblock %}

위의 예시에서는 class 속성을 사용하여 입력 필드에 Bootstrap의 form-control 클래스를 적용하였습니다. 또한, 로그인 버튼에도 btn 클래스와 btn-primary 클래스를 적용하여 스타일을 설정하였습니다.

이렇게 Flask-WTF에서 폼 요소들에 스타일을 적용하는 방법에 대해서 알아보았습니다. 이와 같은 방법들을 사용하여 원하는 스타일을 설정할 수 있습니다.