컴굥일지
[Django Study 04] Style and CSS 본문
[style, 구글 폰트를 통해 Header, Footer 꾸미기]
먼저 head.html 파일에 링크를 추가한다.
<head> <meta charset="UTF-8"> <title>PRAGMATIC</title> <!-- google font --> <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=Lobster&display=swap" rel="stylesheet"> <!-- 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"> </head>그리고 폰트를 적용할 header,footer 안의 특정 태그에 style 속성을 추가한다.
<div style=”font-family: 폰트이름”>
처럼 적으면 된다.
[Static 설정 및 CSS 파일 분리]
- style 속성은 보통 CSS 파일로 분리하여 관리한다. (간단한건 그냥 놔두기도 한다.)
- CSS 파일을 분리하기 전에 Static에 관한 설정을 해주어야 한다.
Static
- 정적이라는 뜻으로, CSS나 JS 등 자주 변하지 않는 파일들을 보통 static이라고 한다.
- 프로젝트나 앱 별로 따로 관리한다.
settings.py에서 STATIC_URL 아래에 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')을 추가한다.
STATIC_ROOT는 나중에 프로젝트 안의 모든 스태틱 파일들을 한군데로 모을 때 어디로 모일지를 알려주는 것이다.
STATICFILES_DIRS = [ BASE_DIR/”static”, ] 을 작성하고, 앱에 종속되지 않은(프로젝트 전체에서 관리할 수 있는) static 폴더를 따로 생성하여, 이 안에서 정적 파일들을 관리한다.
static 폴더 안에 base.css 파일을 만들어서 관리한다.
CSS 파일 분리
static 파일을 가져오기 위해서는 head.html에 {% load static %} 이라고 적어주어야 한다.
그리고 링크를 걸 때 아래와 같이 하면 된다.
{% load static %} <head> <meta charset="UTF-8"> <title>PRAGMATIC</title> <!-- DEFAULT CSS LINK --> <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}"> </head>header나 footer 등과 같은 html 파일 안에서 style=”~~” 이런식으로 적던 것을 class를 만들고, css파일을 아래와 같이 작성하면 된다.
.클래스이름{ font-family:"Lobster", cursive; }
[CSS 핵심 - display 속성 및 Size 단위 px, em, rem, %]
- CSS : HTML을 꾸미기 위한 디자인 언어 묶음
- 스타일 속성을 적용하는 순서 : 태그 안에 속성으로 직접 쓰는 것, style태그로 쓰는 것, CSS 파일
display 속성
Block : 부모 태그의 최대한의 너비를 모두 가져가면서 블럭 모양의 형태를 가진다.
Inline : 글씨의 크기 만큼만 가져간다.
Inline-block : 블록임에도 불구하고 Inline처럼 오른쪽으로 쌓인다.
None : HTML태그 상에서 존재하긴 하지만, 시각화 과정에서 존재하지 않는 것
(Hidden: 시각화 과정에서 위치는 차지하고 있다. 보이지만 않을뿐 존재하긴 한다.)
Size 척도
- px : 부모의 크기가 어떻게 변하든 처음 정해진 크기를 유지한다. (절대적 크기)
- em : 부모의 크기가 변하면 같은 비율로 변한다. (부모가 여러개면 비율 적용이 여러번 된다.)
- rem : root HTML의 크기가 변하면 같은 비율로 변한다.
- % : 바로 위의 부모의 크기에서 %로 크기가 결정된다.
[출처] 작정하고 장고! Django Pinterest 따라만들기 : 바닥부터 배포까지
섹션 1. Django Tutorial (10강 ~ 13강)
'프로그래밍 강의 > Django' 카테고리의 다른 글
| [Django Study 06] Django CRUD 및 CreateView (0) | 2022.04.18 |
|---|---|
| [Django Study 05] Model, DB 연동, HTTP 프로토콜(GET, POST), DB 데이터 저장 (0) | 2022.04.14 |
| [Django Study 03] Django Template - extends, include로 HTML 만들기 (0) | 2022.04.12 |
| [Django Study 02] Django 시작 & Gitignore (0) | 2022.04.11 |
| [Django Study 01] Django Intro (0) | 2022.04.07 |