23강 bootstrap을 이용하여 form디자인 정리

짜부·2023년 1월 18일

작정하고 장고

목록 보기
30/41

https://django-bootstrap4.readthedocs.io/en/latest/
(django bootstrap4 사용방법)
1. pip install django-bootstrap4
2. settings.py -> installed_apps ->'bootstrap4'
라이브러리를 사용하려면 특정라이브러리가 설치됐다고 알려주어야함.
3. {% load bootstrap4 %} : login.html에서 bootstap4 가져오기
4. {% bootstrap_form form %} 부트스트랩이 적용된 form


<input type="submit" class="~~~ col-6 mt-3">

mt= margin top 설정. mt-3기본 margin에 3배
col-6: 부모의 너비의 반. col-12는 부모의 너비


폰트 설정하기

네이버 폰트( https://hangeul.naver.com/font).

  • 원하는 폰트 설치 후 사용할 폰트 파일만 templates-> fonts디렉토리 생성후 여기에 넣어줌
  • head.html에 코드추가. 프로젝트의 어떤 경로에서든 다 사용할 수 있게됨
<style>
        @font-face{
            font-family: 'NanumSquareR';
            src: local('NanumSquareR'),
            url("{% static 'fonts/NanumSquareR.otf' %}") format("opentype");
        }
        @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");
        }
    </style>
  • base폰트로 설정하기
    base.html
<body style="font-family:'NanumSquareR';"> 
profile
화이팅

0개의 댓글