Django | crispy-forms 사용하기(bootstrap5)

2023. 7. 1. 19:07·BackEnd/Django

포스트 작성 페이지에서 <table>로 만들어진 입력 폼이 한쪽에 치우쳐 있어 모양이 예쁘다고 볼 수 없다.

이런 문제를 crispy-forms를 사용하여 오른쪽 그림과 같이 해결할 수 있다.

crispy-forms 사용 전/후

bootstrap4 기준으로는 pip install을 이용해 하나만 설치해 주면 되지만 bootstrap5에서는 추가로 하나를 더 설치해주어야 한다.

pip install django-crispy-forms
pip install crispy-bootstrap5

 

그다음 설치한 모듈들을 settings.py에 등록시켜주어야 한다.

INSTALL_APPS에 crispy-forms와 crispy_bootstrap5를 등록시켜 주고, 맨 아래에 bootstrap5를 사용하겠다고 지정한다.

 

그런 다음 포스트 작성 페이지를 구성하는 html 파일에 crispy_forms를 적용할 수 있도록 맨 위에 {% load crispy_forms_tags %}를 추가한다.

입력 폼에 cripsy_forms를 적용하기 위해 <table> 태그에 있던 요소들을 밖으로 꺼내주고, <table> 태그를 삭제한 뒤 {{ form }}을 {{ form | crispy }}로 수정한다.

이렇게 하면 더 이상 입력 폼이 테이블 형태로 나타나지 않는다.

코드 수정 전/후

 

참고

 

GitHub - django-crispy-forms/crispy-bootstrap5: Bootstrap5 template pack for django-crispy-forms

Bootstrap5 template pack for django-crispy-forms. Contribute to django-crispy-forms/crispy-bootstrap5 development by creating an account on GitHub.

github.com

 

반응형
저작자표시 (새창열림)
'BackEnd/Django' 카테고리의 다른 글
  • Django | django-alluth로 구글 로그인 기능 구현하기
  • Django | MarkdownX로 마크다운 적용하기
  • Django | WRANINGS: null has no effect on manytomanyfield
  • Django | 장고 셸 플러스(shell plus) 사용하기
dduniverse
dduniverse
  • dduniverse
    dduniverse
    dduniverse
  • 전체
    오늘
    어제
    • 분류 전체보기 (242)
      • Algorithm (123)
        • 알고리즘 이론 (8)
        • 백준 (19)
        • 프로그래머스 (83)
        • 구름 알고리즘 먼데이 챌린지 (13)
      • 빅데이터분석기사 (10)
        • 통계 (4)
        • 실기 (6)
      • KT에이블스쿨 (26)
      • FrontEnd (11)
        • React (5)
        • 기타 (6)
      • BackEnd (18)
        • Django (15)
        • Spring (3)
      • DS & ML (11)
        • Machine Learning (9)
        • Kaggle (2)
      • TIL (43)
        • python (22)
        • javascript (3)
        • 오류해결 (10)
        • 기타 (7)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 관리
    • 글쓰기
  • 링크

  • 인기 글

  • hELLO· Designed By정상우.v4.10.0
dduniverse
Django | crispy-forms 사용하기(bootstrap5)
상단으로

티스토리툴바