작정하고 장고 10강 style, 구글폰트로 Header,Footer 꾸미기

짜부·2023년 1월 15일

작정하고 장고

목록 보기
19/41

    1. footer, base, header.html 꾸미기

      #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>Pragmatic</h1>
        </div>
        <div>
            <span>nav1</span>
            <span>nav2</span>
            <span>nav3</span>
            <span>nav4</span>
        </div>
    </div>

      base.html

      #구분선 추가
<!DOCTYPE html>
<html lang="en">
{% include 'head.html' %}
<body>

    {% include 'header.html' %}

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    {% include 'footer.html' %}
</body>
</html>
  • bootstrap 적용 bootstrap 링크 : Get started with Bootstrap head.html 에 추가
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  • Google Font 적용 Google Fonts

    1. 원하는 Font 찾기

    2. Use on the web에서 태그가 있는 코드 복사해서 head에 넣기

    3. CSS rules to specify families에서 위에 lobster 복사해서 적용하고 싶은 곳에 붙여넣기

      ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a89039e3-3308-4467-9eb5-4401b4894216/Untitled.png)

      header.html 코드

      	<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>
profile
짜부
화이팅
이전 포스트

작정하고 장고 8강,9강 Django Template

다음 포스트

작정하고 장고 11강 Static 설정 및 CSS 파일 분리

0개의 댓글