작정하고 장고(10~13)

진단·2022년 9월 27일

작장고

목록 보기

2/7

html style

header.html

<div style="text-align:center"; margin-bottom: 2rem 0;>
	<div>
    	<h1>Pragmatic</h1>
    </div>
    <div>
    	<span>nav1</span>
        <span>nav2</span>
        <span>nav3</span>
        <span>nav4</span>
    </div>
</div>
<hr>

footer.html

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

해당 태그에 style로 적용
<div style="text-align:center"; margin-bottom: 2rem 0;>
margin-bottom: 2rem 0; -> 2rem은 상하, 0은 좌우
<hr>은 구분선 (base.html)

bootstrap

bootsrap
-> head.html에 사용

<head>
	<meta charset="UTF-8">
    <title>Pragmatic</title>
    
    <!-- BOOTSTRAP LINK -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>

구글 폰트

구글 폰트
head.html에 link적용

<head>
	<meta charset="UTF-8">
    <title>Pragmatic</title>
    
    <!-- BOOTSTRAP LINK -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    
    <!-- GOOGLE FONTS LINKS -->
    <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=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
</head>

폰트를 적용하려는 html에서 사용

<div style="text-align:center"; margin-bottom: 2rem 0;>
	<div>
    	<h1 style="font-family: 'Noto Sans KR', sans-serif;">Pragmatic</h1>
    </div>
    <div>
    	<span>nav1</span>
        <span>nav2</span>
        <span>nav3</span>
        <span>nav4</span>
    </div>
</div>

css활용을 위한 static files

app에 종속되지 않는 css를 모아 놓은 static files

setting.py -> static_url아래에

STATIC_URL = 'static/'

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

css 파일 분리

<h6 style="margin-top: 1rem;">Pragmatic</h6>
->

<h6 class="pragmatic_footer_logo">Pragmatic</h6>

.pragmatic_footer_logo{
	font-family: 'Lobster', cursive;
}

static을 가져오기 위해 head.html에 추가
{% load static %}는 head.html 가장 상단에 추가해준다
캐시 문제로 수정하고 바로 변경해주고 싶을 때 href 태그 뒤에 ?after를 붙인다

<!-- DEFAULT CSS LINK -->
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}?after">
</head>

head.html 전체 코드

{% load static %}

<head>
	<meta charset="UTF-8">
    <title>Pragmatic</title>
    
    <!-- BOOTSTRAP LINK -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    
    <!-- GOOGLE FONTS LINKS -->
    <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=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
    
    <!-- DEFAULT CSS LINK -->
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}?after">
</head>