Bootstrap을 이용한 Form 디자인 정리

수강계획

2022/01/11

번호

복습여부

수강여부

수강일

2022/01/12

속성

Installation - django-bootstrap4 21.2 documentation

The preferred way to install django-bootstrap4 is : $ pip install django-bootstrap4 Alternatively, you can install download or clone this repo and install from its folder with: In your project, you should add django-bootstrap4 to your requirements.txt . Be sure to use virtualenv if you develop python projects.

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

설치해주고 setting 파일 내에 등록해주기

mt-3 : margin top에 있는 크기를 기존의 3배 만들기

cf) mb

col-6 : 너비 12=100%

{% 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 %}
                {% bootstrap_form form %}
                <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
            </form>
        </div>
    </div>


{% endblock %}
HTML
복사
login.html

{% 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 %}
      {% bootstrap_form form %}
      <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
    </form>
  </div>

{% endblock %}
HTML
복사
create.html

글꼴 파일 다운 받고 static 폴더 내에 fonts 폴더 생성해서 붙여넣기

{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Jichuuu</title>

    <!--  BOOTSTRAP LINK  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- GOOGLE FONTS LINK    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">

    <!-- DEFAULT CSS LINK -->
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">

    <style>
        @font-face {
            font-family: 'NanumSquareR';
            src: local('NanumSquareR'),
            url("{% static 'fonts/NanumSquareR.ttf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareEB';
            src: local('NanumSquareEB'),
            url("{% static 'fonts/NanumSquareEB.otf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareB';
            src: local('NanumSquareB'),
            url("{% static 'fonts/NanumSquareB.otf' %}") format("opentype");
        }
        @font-face {
            font-family: 'NanumSquareR';
            src: local('NanumSquareR'),
            url("{% static 'fonts/NanumSquareR.otf' %}") format("opentype");
        }
    </style>

</head>
HTML
복사
head.html

<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body style="font-family: 'NanumSquareR';">

    {% include 'header.html' %}

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    {% include 'footer.html' %}

</body>
</html>
HTML
복사
base.html

.Jichuuu_logo {
    font-family: 'Gamja Flower', cursive;
}

.Jichuuu_footer_button {
    font-size: 0.9rem;
}

.Jichuuu_footer {
    text-align:center;
    margin-top: 2rem;
}

.Jichuuu_header {
    text-align:center;
    margin: 2rem 0;
}
CSS
복사
base.css

footer button font size 0.6rem에서 0.9rem으로 키웠는데 적용이 안됨 왜 ,,,,,,,,,,,,,

runserver 해서 보면 다시 원래대로 0.6rem으로 돌아가있다 ,,,,,,,,,,,,,,,,,,,,,,,,,