style, 구글 폰트를 통해 Header, Footer 꾸미기
Bootstrap
프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크이다.
각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다.
Google font
- 구글 폰트 링크
https://fonts.google.com/
head.html
링크로 연결해준다.
<head>
<meta charset="UTF-8">
<title>practice_django</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<!-- GOOGLE FONT 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=DotGothic16&family=Lobster&family=Nanum+Gothic&family=Quicksand:wght@300&display=swap" rel="stylesheet">
</head>
Static 설정 및 CSS 파일 분리
Static?
정적이란 뜻으로 CSS, Javascript 등 자주 변경되지 않는 파일들을 static이라고 한다.
1. 정적 파일 폴더 생성
프로젝트 루트 디렉토리에서 static 디렉토리를 생성한다.
setting.py에서 아래와 같은 코드를 작성한다.
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
BASE_DIR / "static",
]2. CSS 파일 분리
위에서 생성한 static 폴더 내에 base.css라는 CSS 파일을 만든다.
{% load static %}
<!-- DEFAULT CSS LINK -->
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">class로 이름을 정해주고 css 파일에서 코드를 작성한다.
.practice_django_logo {
font-family: 'Handjet', cursive;
}CSS 핵심 - display 속성 및 Size 단위
Display
1. Block
부모의 width를 최대한의 넓이로 모두 가져가며 블록 모양의 형태이다.
높이는 따로 설정을 하지 않는 이상 기본값 혹은 내용 길이에 맞게 설정된다.
ex) div, p 태그
2. Inline
새로운 줄이 시작되지 않고 같은 줄에서 자식 태그가 쌓인다.
필요한 만큼(글씨의 가로 폭)만 차지한다.
ex) span 태그
3. Inline-block
블록이지만 인라인처럼 한 줄에 배치된다.
4. None
시각화되는 과정에서 아무것도 없다.
시각화 속성 - Hidden
보이지만 않을 뿐 존재한다.
해리포터 투명망토 느낌
Size
1. px
부모의 속성이 커지거나 작아저도 사이즈는 고정이다.
➡️ 부모 노드들과 상관이 없음!
2. em
부모의 속성이 커지거나 작아지면 사이즈는 조정된다.
부모가 여러 개 있을 때, 모든 부모에서 받은 것들을 모두 합해서 곱한 상태로 적용된다.
➡️ 부모 노드 모두 합산
3. rem(👑)
root em을 의미하며, 루트 요소를 기준으로 상대적으로 크기가 조정된다.
➡️ 최상단의 html 폰트 사이즈에만 연관이 있어 직접적으로 영향을 받음
4. %
바로 위의 부모에 따라 크기가 조정된다.
➡️ 부모에 대한 상대적 크기 조절
CSS display 속성, rem 단위 실습
✨Tip! git에서 전에 커밋했던 내용으로 돌아가기
$ git reset --hard HEAD🤓 새로 알게된 점
rem, em 등의 차이에 대해 알게되었다. rem은 루트의 크기에 따라 상대적으로 조절되는 것이고, em은 바로 위의 부모에 따라 조절되는 것이다.
그리고 git에서 전에 커밋했던 내용으로 돌아가는 방법에 대해 알게되었다.
예전부터 git은 어렵다고 생각했는데 실습을 통해 조금씩 사용해보니 git과의 낯가림이 옅어지는 것 같다.
