10강 style 구글 폰트를 통해 header,footer꾸미기
div는 단을 구분하고 배열한다
span은 옆으로 배열한다.
1. https://getbootstrap.com/docs/5.1/getting-started/introduction/
html에 맞게 디자인을 이쁘게 조금 바꿔준다
2.https://fonts.google.com/specimen/Lobster?query=lobster#standard-styles
구글폰트사이트 header and footer에서 폰트변경
3. head단에서 boot strap과 google fonts적용한다
<div style="text-align:center; margin-top: 2rem;">
<div style="font-size: .6rem;">
<span>제휴문의</span> |
<span>연락처</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h5 style="margin-top: 1rem; font-family: 'Lobster', cursive
;">Pragmatic</h5>
</div>
</div>
<div style="text-align:center; margin: 2rem 0">
<div>
<h1 style= "font-family: 'Lobster', cursive;">Pragmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
4. <hr> 구분선 추가
<!DOCTYPE html>
<html lang="ko">
{% include 'head.html'%}
<body>
{% include 'header.html'%}
<hr>
{% block content %}
{% endblock %}
<hr>
{% include 'footer.html'%}
</body>
</html>
'Computer Science > Django_pinterest' 카테고리의 다른 글
| 210818 장고 16강 GET, POST 프로토콜 실습 (0) | 2021.08.19 |
|---|---|
| 20210818 장고 핀터레스트 14강Model, DB 연동,~15강 서버와 통신하는 HTTP 프로토콜 메서드 중에서도 GET, POST (0) | 2021.08.18 |
| 20210817 장고 핀터레스트 12강 ~13강 (0) | 2021.08.18 |
| 210816 장고 : 핀터레스트 11강 (static 설정 및 css 파일 분리) (0) | 2021.08.16 |
| 210816 django_pinterest_01 (1~7강) git first commit (0) | 2021.08.16 |
