[pinterest clone (15)] form 디자인

728x90

django-bootstrap4 라이브러리 설치하기

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

Installation — django-bootstrap4 2.0.2 documentation

django-bootstrap4.readthedocs.io

settings.py INSTALLED_APPS에 bootstrap4 추가

login.html

{% 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 %}

Create.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 %}

Font 바꾸기

hangeul.naver.com/font

[네이버 한글한글 아름답게 : 글꼴모음]

한글의 아름다움, 나눔글꼴로 나눕니다.

hangeul.naver.com

나눔스퀘어 OTF 설치

static 폴더안에 fonts 폴더 만들어 붙여넣기

head.html 에 style태그 추가

{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Platypus</title>
    <!-- BOOTSTRAP LINK -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- GOOGLE FONTS LINK -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    <!-- DEFAULT CSS LINK -->
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">

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

base.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>

728x90

저작자표시

'웹 프로그래밍' 카테고리의 다른 글

[pinterest clone (17)] UpdateView를 이용한 비밀번호 변경 구현 (0)	2021.04.28
[pinterest clone (16)] DetailView를 이용한 개인페이지 구현 (0)	2021.04.28
[pinterest clone (14)] Login / Logout 구현 (0)	2021.04.27
[pinterest clone (13)] CreateView를 통한 회원가입 구현 (0)	2021.04.27
Django가 CRUD로 유명한 이유 (0)	2021.04.27

'웹 프로그래밍' 카테고리의 다른 글

티스토리툴바