Header, Footer 구성하기
개발자 도구(F1)를 열고 Element의 Style 태그를 크롬 상에서 작성 가능
<!--header.html-->
<div>
<div>
<h1>Prgmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
footer에 코드 작성
<!--footer.html-->
<div>
<div>
<span>공지사항</span>
<span>제휴문의</span>
<span>서비스 소개</span>
</div>
<div>
<h6>Pragmatic</h6>
</div>
</div>
크롬 상에서 작성했던 text-align:center 스타일 코드를 직접 header.html과 footer.html에 적용
<!--header.html-->
<div style="text-align:center">
<div>
<h1>Prgmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div><!--footer.html-->
<div style="text=align:center">
<div>
<span>공지사항</span>
<span>제휴문의</span>
<span>서비스 소개</span>
</div>
<div>
<h6>Pragmatic</h6>
</div>
</div>
공지사항, 제휴문의, 서비스 소개의 글자를 0.6 rem 정도로 축소
span 태그 간 |(vertical bar, Shift + ) 를 추가해 글자를 구분
그 밑에 Pragmatic 이라는 글자의 margin-top을 1rem으로 수정
<!--footer.html-->
<div style="text-align:center">
<div style="font-size: .6rem;">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span> |
</div>
<div style="margin-top: 1rem">
<h6 style="margin-top: 1rem">Pragmatic</h6>
</div>
</div>
base.html에서 header와 footer 사이에 <hr>태그를 추가해 구분선 만들기
<!--base.html-->
<!doctype html>
<html lang="ko">
{% include 'head.html' %}
<body>
{% include 'header.html' %}
<hr>
{% block content %}}
{% endblock %}
<hr>
{% include 'footer.html' %}
</body>
</html>
header에 margin-bottom 수정, footer에 margin-top 추가
<!--header.html-->
<div style="text-align:center; margin-bottom: 2rem;">
<div>
<h1>Prgmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div><!--footer.html-->
<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">
<h6 style="margin-top: 1rem">Pragmatic</h6>
</div>
</div>부트스트랩 추가
1. 부트스트랩
트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것
html 스타일을 그럴듯하게 만들어주는 라이브러리
2. 구글에 Bootstrap 검색 후 사이트 들어가서 css 링크 복사
링크를 복사 후 head.html 파일에 다음 링크를 추가
<!-- head.html -->
<head>
<meta charset="UTF-8">
<title>Pragmatic</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
페이지를 새로 고침하면 간격이 바뀐다. 그럴듯하게 바뀌었지만 margin 부분이 좁아졌기 때문에 header.html 파일에 들어가서 <div style="text-align:center; margin: 2rem 0;">을 작성해 늘려줌
이렇게 margin을 두 개의 인자로 작성하면 처음 인자는 상하를 나타내고 뒤의 숫자는 좌우에 margin을 표현
폰트 설정
1) 구글에 폰트 검색(https://fonts.google.com/)하고 선택 후 링크 복사해서 head.html파일에 추가
<!--head.html-->
<head>
<meta charset="UTF-8">
<title>Pragmatic</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- Google Fonts 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=Bebas+Neue&display=swap" rel="stylesheet">
</head>사용은 다음 코드를 복사하여 header.html 과 footer.html 에 스타일 코드 추가
font-family: 'Bebas Neue', cursive;
<!--header.html-->
<div style="text-align:center; margin: 2rem 0; font-family: 'Bebas Neue', cursive;">
<div>
<h1>Pragmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div><!--footer.html-->
<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">
<h6 style="margin-top: 1rem; font-family: 'Bebas Neue', cursive;"">Pragmatic</h6>
</div>
</div>git에 저장하고 커밋
