Font 설정하기
Django도 템플릿 언어와 CSS를 통해 웹 프론트를 꾸며줄 수 있습니다. 이번에 해볼 거는 https://fonts.google.com/ 에 들어가서 자신이 원하는 폰트를 복사 한 후 설정하는것을 해보겠습니다. 여기서 원하는 폰트가 있으면 여기서 select this style을 누른 다음 옆에 Select this style을 클릭한 후 Link가 나오면 복사 한 후 앞에서 만들었던 head.html에 붙여넣기 하겠습니다.
head.html
<head>
<meta charset="UTF-8">
<title>Hyunterest</title>
<!-- GOOGLE FONTS LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>이런식으로 설정하고 만약에 원하는 폰트를 사용하고 싶으면 style에 font-family: 'Lobster', cursive;를 넣어주면 글자가 바뀌는 것을 확인할 수 있습니다.
예시 코드는 다음과 같습니다.
header.html
<div style = "text-align:center; margin-bottom:2px;">
<div>
<h1 style="font-family: 'Lobster', cursive">Hyunterest</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
footer도 마찬가지로 폰트를 적용 시켜주겠습니다.
footer.html
<div style = "text-align:center;margin-top:2px;">
<div style="font-size:.6rem;">
<span>공지사항</span> |
<span>문의사항</span> |
<span>서비스소개</span>
</div>
<div style="margin-top:1rem;">
<h6 style="font-family: 'Lobster', cursive;">Hyunterest</h6>
</div>
</div>
그러면 다음과 같이 화면에 글씨체가 바뀐것을 확인할 수 있습니다.
Bootstrap사용을 위한 head에 cdn등록하기
Bootstrap이란
부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와주는 것입니다.
CDN이란
콘텐츠 전송 네트워크는 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 인터넷 서비스 제공자에 직접 연결되어 데이터를 전송하므로, 콘텐츠 병목을 피할 수 있는 장점이 있습니다.
bootstrap CDN등록하기
이제 Bootstrap을 아까 만든 head.html에 cdn으로 등록시켜 주겠습니다.
먼저 부트스트랩 홈페이지는 다음과 같습니다.
링크 : https://getbootstrap.com/docs/5.0/getting-started/introduction/
<head>
<meta charset="UTF-8">
<title>Hyunterest</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- GOOGLE FONTS LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
참고
Youtube
https://www.youtube.com/watch?v=0AFchbdiQ5E&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=10
Github
https://github.com/HyunAm0225/hyunterest
HyunAm0225/hyunterest
pinterest사이트 Clone 코딩. Contribute to HyunAm0225/hyunterest development by creating an account on GitHub.
github.com
'Django > Django로 pinterest만들기' 카테고리의 다른 글
| Django Form에 bootstrap적용하기 (0) | 2020.12.29 |
|---|---|
| 003. Django 뼈대 template html 만들기 (0) | 2020.12.17 |
| 002. Account APP 만들기 (0) | 2020.12.17 |
| 001. 프로젝트 세팅하기 (0) | 2020.12.17 |
댓글