뼈대를 만들었으니 기본적인 디자인을 추가한다.
디자인은 html에 직접 style을 지정할 수 있지만 css를 만들어 별도로 관리한다.
모든 디자인을 css로 관리하는 것은 아니지만 큼지막한 것들을 css로 만든다.
또한, bootstrap과 font를 적용하여 쉽게 기본적인 골자를 갖추도록 한다.
이를위해 장고자체에서 static 설정을 해줘야 한다. 그리고 boostrap 세팅을 위해 pip install django-bootstrap4를 설치한다.
<static 설정>
Django
The web framework for perfectionists with deadlines.
docs.djangoproject.com
document에 따라 static설정을 마치고 static 폴더를 만들어 base.css라는 이름으로 파일을 생성한다.
<settings.py>에 해당내용 추가
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'accountapp',
'bootstrap4',
]
STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
<templates/head.html>에 해당 내용 추가
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
{% load static %}
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- GOOGLE FONT 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=Anton&family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
<!-- CSS LINK -->
<link rel="stylesheet" href="{% static 'base.css' %}" type="text/css">
</head>
<bootstrap 적용 후 화면>
스타일 지정을 위한 기본 세팅이 완료되었다.
'FrameWork > pinterest clone' 카테고리의 다른 글
| 7. accountapp 만들기 (0) | 2023.07.20 |
|---|---|
| 6. 기초 스타일링(2) (0) | 2023.07.19 |
| 4. 뼈대만들기2 (0) | 2023.07.17 |
| 3. 뼈대만들기1 (0) | 2023.07.16 |
| 2. 앱 시작 (0) | 2023.07.15 |
