style, 구글 폰트 통해 Header, Footer 꾸미기

수강계획

2022/01/08

번호

복습여부

수강여부

수강일

2022/01/08

속성

f12 눌러서 확인하고 header, footer 각각 모양에 맞게 스타일 적용하기

부트스트랩

•

css 코드 복사하고 head.html 파일에 붙여넣기(자료같은거 가져올때 여기에 넣음, 사이트 모든페이지에 적용)

•

ctrl + / : 주석 

margin 두개 적용할 때 앞(상하) 뒤(좌우)

google fonts 사이트 들어가서 글꼴 고르고 링크 head에 붙여넣고 밑에 css는 적용할 곳에 붙여넣기

<div style="text-align:center; margin: 2rem 0;">
        <div>
             <h1 style="font-family: 'Gamja Flower', cursive;">Jichuuu</h1>
        </div>
        <div>
            <span>nav1</span>
            <span>nav2</span>
            <span>nav3</span>
            <span>nav4</span>
        </div>
    </div>
HTML
복사
header.html

<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body>

    {% include 'header.html' %}

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    {% include 'footer.html' %}

</body>
</html>
HTML
복사
base.html

{% extends 'base.html' %}

{% block content %}

    <div  style="height : 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
        <h1>
            testing
        </h1>
    </div>

{% endblock %}
HTML
복사
hello_world.html

<div style="text-align:center; margin-top: 2rem;">

        <div style="font-size: 0.6rem;">
            <span>공지사항</span> ㅣ
            <span>제휴문의</span> ㅣ
            <span>서비스 소개</span>
        </div>
        <div style="margin-top: 1rem;">
            <h6 style="margin-top: 1rem; font-family: 'Gamja Flower', cursive;">Jichuuu</h6>
        </div>

    </div>
HTML
복사
footer.html

<head>
    <meta charset="UTF-8">
    <title>Jichuuu</title>

    <!--  BOOTSTRAP LINK  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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=Gamja+Flower&display=swap" rel="stylesheet">
</head>
HTML
복사
head.html

git commit 하기 ,,!