meong_j
기록하는 습관.
meong_j
전체 방문자
오늘
어제
  • 분류 전체보기 (176)
    • 개인 공부 정리 (0)
    • 서버 운영 (37)
      • Linux (36)
    • Frontend (11)
      • Vue.js (10)
    • Backend (70)
      • Java (4)
      • Python (22)
      • Django (38)
      • Spring (6)
    • Database (5)
      • Oracle (4)
      • MySQL (1)
      • MariaDB (0)
    • Android (14)
      • Kotlin (6)
    • 배포 (9)
      • Docker (8)
      • AWS (1)
    • IT_study (29)
      • Coding test (17)
      • 알고리즘 (5)
      • 스터디 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • github

인기 글

반응형

태그

  • 테크커리어
  • 배포인프라
  • docker
  • django
  • router-link
  • DHCP
  • 리눅스인증
  • gabagecollecter
  • dockersecret
  • Proxy
  • 코틀린자료형
  • 리눅스방화벽
  • 이차원배열정렬
  • Kotlin
  • 안드로이드adaptor
  • 개발자도서
  • SASS Variables
  • dp #알고리즘
  • 중첩라우트
  • cpu사용률

최근 댓글

최근 글

250x250
hELLO · Designed By 정상우.
meong_j

기록하는 습관.

django 05. style, 구글 폰트, 네이버 글꼴을 통해 Header, Footer 꾸미기
Backend/Django

django 05. style, 구글 폰트, 네이버 글꼴을 통해 Header, Footer 꾸미기

2021. 10. 5. 18:46
728x90
반응형

부트스트랩 설치

pip install django-bootstrap4

 

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

 

Installation — django-bootstrap4 3.0.1 documentation

© Copyright 2020, Dylan Verheul. Revision f63fec08.

django-bootstrap4.readthedocs.io

 

Settings.py 등록

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
    'accountapp',
]

 

html 경로 추가

 <!-- 부트스트랩 추가-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

 

 

구글 폰트(font) 설치

https://fonts.google.com/specimen/Lobster?preview.text=pragmatic&preview.text_type=custom 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

html 경로 추가

<!--    구글 폰트 링크-->
    <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=Lobster&display=swap" rel="stylesheet">

 

CSS 추가

.pragmatic_logo{
    font-family: 'Lobster', cursive;
}

 

네이버 글꼴 다운받기

https://hangeul.naver.com/2017/nanum

 

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

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

hangeul.naver.com

 

글꼴 다운받고 static > fonts 폴더 위치

 

  • html파일의 style 지정
반응형

'Backend > Django' 카테고리의 다른 글

django 07. model, DB 연동하기  (0) 2021.10.05
django 06. static 설정 및 css 파일 분리  (0) 2021.10.05
django 04. include/ extends / block 구문을 이용한 뼈대 html 만들기  (0) 2021.10.05
django 03. 장고 template의 extends, include 구문과 render 함수  (0) 2021.10.05
django 02. Git 활성화, 환경변수 분리, commit  (0) 2021.10.05
    'Backend/Django' 카테고리의 다른 글
    • django 07. model, DB 연동하기
    • django 06. static 설정 및 css 파일 분리
    • django 04. include/ extends / block 구문을 이용한 뼈대 html 만들기
    • django 03. 장고 template의 extends, include 구문과 render 함수
    meong_j
    meong_j
    #it #개발일기 #개발공부 #개발자 #백앤드 #생각정리 #시간은 실력에 비례한다 #뭐든지 꾸준히 열심히 #오늘의 내가 내일의 나를 만든다

    티스토리툴바