Bootstrap을 이용한 Form 디자인 정리 (1)

참고 페이지 : Django Bootstrap

Welcome to django-bootstrap4's documentation! - django-bootstrap4 21.2 documentation

Welcome to django-bootstrap4's documentation!

https://django-bootstrap4.readthedocs.io/en/latest/index.html

•

기본 설정 : bootstrap4가 설치된 것을 알려주기 위해, settings.py의 INSTALLED_APP에 bootstrap4가 설치되었단 것을 알려주기

./accountapp/templates/login.html

•

mt는 기존의 margin-top의 x배를 의미한다.

•

col-12는 부모의 것을 100% 가져오는 것, 6은 50%를 의미한다.

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

    <div style="text-align : center; max-width : 500px; margin:4rem auto;">
        <div>
            <h4>Login</h4>
        </div>
        <div>
            <form action="" method="post">
                {% csrf_token %}
                <!--form -->
                {% bootstrap_form form %}
                <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
            </form>
        </div>
    </div>
{% endblock %}
HTML
복사

templates의 create.html파일도 bootstrap 적용 시켜주기

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

    <div style="text-align: center; max-width : 500px; margin:4rem auto;">
        <div class="mb-4">
            <h4>SignUp</h4>
        </div>
        <form action="{% url 'accountapp:create' %}" method="post">
            {% csrf_token %}
            <!-- 우리가 지정한 form 파일을 그대로 받아와준다. -->
            {% bootstrap_form form %}
            <input type = "submit" class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
    </div>

{% endblock %}
HTML
복사

폰트설정을 위해서 ./static/fonts 폴더 생성 후, 원하는 폰트 파일 넣어주기

•

참고 사진

./templates/head.html에 font 적용 시켜주기 (head 태그 안)

<!--    fornts -->
    <style>
        @font-face{
            font-family:'MaruBuri-Bold';
            src: local('MaruBuri-Bold'),
            url("{%static 'fonts/MaruBuri-Bold.otf' %}") format("opentype");
        }

        @font-face{
            font-family:'MaruBuri-ExtraLight';
            src: local('MaruBuri-ExtraLight'),
            url("{%static 'fonts/MaruBuri-ExtraLight.otf' %}") format("opentype");
        }
        
        @font-face{
            font-family:'MaruBuri-Light';
            src: local('MaruBuri-Light'),
            url("{%static 'fonts/MaruBuri-Light.otf' %}") format("opentype");
        }
        
        @font-face{
            font-family:'MaruBuri-Regular';
            src: local('MaruBuri-Regular'),
            url("{%static 'fonts/MaruBuri-Regular.otf' %}") format("opentype");
        }
        
        @font-face{
            font-family:'MaruBuri-SemiBold';
            src: local('MaruBuri-SemiBold'),
            url("{%static 'fonts/MaruBuri-SemiBold.otf' %}") format("opentype");
        }
    </style>
HTML
복사

templates base.html 파일의 body style에 font-family 적용 시켜주기