Bootstrap을 이용한 Form 디자인 정리 (작정하고 장고 23강)

_upper·2023년 5월 20일

23강

django-bootstrap4 라이브러리를 이용하여 form을 부트스트랩 스타일로 꾸며보고, 지금까지 만든 사이트의 디자인을 정리한다.

부트스트랩 설치

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

pip install django-bootstrap4

settings.py에 등록하고

{% load bootstrap4 %}

bootstrap4로 가져오기

font 적용

https://hangeul.naver.com/font

static - fonts 에 복붙 -> header에 추가

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

0개의 댓글