주뇽's 저장소

3. Style, 구글 폰트를 통해 Header, Footer 꾸미기 본문

웹개발/Django

3. Style, 구글 폰트를 통해 Header, Footer 꾸미기

뎁쭌 2023. 8. 19. 00:16
728x90
반응형

1. Header 꾸미기

<div style="text-align: center; margin :2rem 0;">
    <div>
        <h1>Full Stack Project</h1>
    </div>
    <div>
        <span> nav1 </span>
        <span> nav2 </span>
        <span> nav3 </span>
    </div>
</div>

2. Footer 꾸미기

<div style="text-align: center; margin-bottom:2rem">
    <div style="font-size: .6rem;">
        <span>공지사항</span> |
        <span>서비스소개</span> |
        <span>제휴문의</span>

    </div>
    <div style="margin-top :1rem">
        <h6 style="margin-top :1rem">Full Stack Project</h6>
    </div>
</div>

3. 경계선 추가 <hr>태그 이용

<!DOCTYPE html>
<html lang="ko">
{%include  'head.html'%}

<body>
   
    {%include  'header.html'%}
    <hr>
    {%block content%}
    {%endblock%}
    <hr>
    {%include  'footer.html'%}
    
</body>
</html>

4. 부트스트랩 적용

Introduction

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

위 코드를 복사 후 head에 삽입

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Stack Project With Django</title>

    {% comment %} 부트스트랩 {% endcomment %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">
</head>

5. 폰트 적용

Browse Fonts - Google Fonts

  • 원하는 폰트를 고른 후 select

  • 링크를 헤드에 삽입 후 CSS font를 원하는 태그에 삽입

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Stack Project With Django</title>

    {% comment %} 부트스트랩 {% endcomment %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">

    {% comment %} 구글 폰트 {% endcomment %}
    <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=Gowun+Batang&family=Indie+Flower&family=Maven+Pro&family=Noto+Sans+KR:wght@300;700&family=Unna&display=swap" rel="stylesheet">
</head>

Header

<div style="font-family: 'Indie Flower', cursive; text-align: center; margin :2rem 0;">
    <div>
        <h1>Full Stack Project</h1>
    </div>
    <div>
        <span> nav1 </span>
        <span> nav2 </span>
        <span> nav3 </span>
    </div>
</div>

Footer

<div style="font-family: 'Indie Flower', cursive; text-align: center; margin-bottom:2rem">
    <div style="font-size: .6rem;">
        <span>공지사항</span> |
        <span>서비스소개</span> |
        <span>제휴문의</span>

    </div>
    <div style="margin-top :1rem">
        <h6 style="margin-top :1rem">Full Stack Project</h6>
    </div>
</div>

—# 눈아파서 색을 바꿨습니다. ㅠㅠ

 

저작자표시

'웹개발 > Django' 카테고리의 다른 글

4. CSS 개념 및 설정  (0) 2023.08.19
2. Include, Extends, Block  (0) 2023.08.19
1. Django Tutorial  (0) 2023.08.19
'웹개발/Django' Related Articles more