<!--header.html-->
<div>
<div>
<h1>Prgmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
헤더 구성
개발자 도구를 열고 Element 의 Style 태그를 크롬상에서 임시로 작성할 수 있다.
text-align:center; 다음과 같이 중앙 정렬이 된것을 확인할 수 있다.
이와 같은 방식으로 footer 도 적용
footer 에서 style 부분을 지우고 다음과 같이 작성 하면 화면이 출력됨
<!--footer.html-->
<div>
<div>
<span>공지사항</span>
<span>제휴문의</span>
<span>서비스 소개</span>
</div>
<div>
<h6>Pragmatic</h6>
</div>
</div>
이제 아까 크롬상에서 작성했던 text-align:center 스타일 코드를 직접 header.html 과 footer.html 에 적용을 시켜준다.
<!--footer.html-->
<div style="text=align:center">
<div>
<span>공지사항</span>
<span>제휴문의</span>
<span>서비스 소개</span>
</div>
<div>
<h6>Pragmatic</h6>
</div>
</div><!--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>
이처럼 가운데 정렬이 완성되었다.
공지사항, 제휴문의, 서비스 소개의 글자가 너무 크기 떄문에 글자수를 0.6 rem 정도로 축소시킨 후 span 태그 간 |(bar) 를 추가해 글자를 구분하도록 해준다.
그리고 그 밑에 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 추가
<!--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><!--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>
그리고 추가적으로 부트스트랩을 추가할것이다
부트스트랩 : html 스타일을 그럴듯하게 만들어주는 라이브러리
css 의 링크를 거는것만으로도 적용시킬 수 있다.
이 링크를 복사한다
base.html 을 만들면서 head.html 을 분리시켜 놨었는데
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 부분이 좁아졌기 떄문에 늘려주기 -> <div style="text-align:center; margin: 2rem 0;">
이렇게 margin 을 두개의 인자로 작성하면 처음 인자는 상하를 나타내고 뒤의 숫자는 좌우에 margin 을 표현한다.
폰트 설정
폰트 선택 후 링크 복사 후 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=Lobster&display=swap" rel="stylesheet">
</head>
사용은 다음 코드를 복사하여 header.html 과 footer.html 에 스타일 코드 추가
<!--header.html-->
<div style="text-align:center; margin: 2rem 0;">
<div>
<h1 style="font-family: 'Lobster', cursive;">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; font-family: 'Lobster', cursive;"">Pragmatic</h6>
</div>
</div>
폰트가 바뀐것 확인.
커밋 완료
