static 설정
- 자주 변경되지 않는 에셋들
- 프로젝트나 앱 별로 관리할 수 있다.
- settings.py에서 STATIC_ROOT 속성을 설정한다.
#in settings.py
STATIC_URL = 'static/'
#STATIC_ROOT = 'staticfiles'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') #추가해야 할 부분
STATICFILES_DIRS = [
BASE_DIR / "static",
] #추가2- 나중에 커맨드로 STATIC_ROOT에 static 파일들을 모아줄 수 있다.
- 보통은 static 파일들의 경로를 찾을 때 앱 내부에서 찾는데, STATICFILES_DIRS 속성을 저렇게 지정해주면 최상위 프로젝트 폴더에서부터 찾는다.
- 즉, 앱에 종속되지 않는 static 디렉토리로 관리할 수 있게 된다.
- 그러므로 프로젝트 폴더 바로 아래에 ‘static’ 디렉토리를 만들고 그 아래에 ‘base.css’ 파일을 만든다.
css 파일 분리하기
<!-- in tempaltes/footer.html -->
<div style="margin-top: 1rem;">
<h6 style="margin-top: 1rem; font-family: 'Zen Dots'; cursive;">My site</h6>
</div>- 이 부분을 다음과 같이 변경하여 style을 빼주고 class를 부여한다.
<!-- in tempaltes/footer.html -->
<div style="margin-top: 1rem;">
<h6 class="mysite_footer_logo">My site</h6>
</div>- 다음으로, base.css 파일을 작성한다.
.mysite_footer_logo {
font-family: 'Zen Dots', cursive;
}- 이 base.css를 적용하기 위해, head.html에서 가져온다.
<!-- in tempaltes/head.html -->
{% load static %}
<head>
<meta charset="UTF=8">
<title>title</title>
<!-- bootstrap link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<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=Zen+Dots&display=swap" rel="stylesheet">
<!-- css link -->
<link rel="stylesheet" type="text/css", href="{% static 'base.css' %}">
</head>- static을 사용하기 위해 첫 줄에 load하는 작업이 필요하다.
- 그 다음 css link의 경로에도 장고 구문을 이용해 static 안의 base.css를 넣어준다.
- settings.py의 STATIC_URL과 ‘base.css’를 합쳐 장고가 변환해준다.
- 새로고침 하면 폰트가 적용된 것을 볼 수 있다.
- 이런 식으로 html안에 인라인으로 스타일이 적용된 것을 css 파일로 분리하여 적용할 수 있다.
CSS 필수 부분 짚고 넘어가기
- CSS: html을 꾸미기 위한 디자인 묶음
- Display 속성: 태그들 마다 이 display 속성을 갖고 있다.
- Block: 부모 태그의 최대한의(parent’s 100%) width를 가져간다. 높이는 기본값 혹은 설정한 값
- Inline: 한 줄에서 사용하는 최소한의 width, 그래서 한 줄에 여러개 쌓일 수 있다.
- Inline-block: block이지만 inline처럼 오른쪽으로 여러개 쌓일 수 있다.
- None: 아무 것도 없는 취급함 (다른 요소가 그 자리를 차지하게 됨)
- Visibility 속성
- Hidden: 보여주지 않지만 존재하기 때문에, 그 자리를 다른 요소가 대신 차지하지 않음
- Size 속성: rem이 짱이고, 가끔 %쓴다. (사이트를 반응형responsive으로 만들어야 하기 때문)
- px: 부모 태그의 크기에 상관 없이 픽셀 단위의 크기
- em
- 부모 태그의 크기에 따라간다.
- 하지만 부모 태그가 많으면 문제가 발생한다.
- 조부모가 2배, 부모가 2배로 커졌을 때 자신은 4배로 커지게 된다.
- rem
- root HTML의 default font-size 크기(보통 16px)를 따라간다.
- 그래서 부모 태그의 크기에 상관이 없다.
- 만약 root HTML의 default font-size가 변하면 변한 비율만큼 따라간다.
- 3rem이면 보통 48px이 된다.
- %: 바로 위의 부모 태그 크기의 비율이다.
적용하면서 공부하기
- style을 적용하는 방법은 3가지가 있다.
- 태그의 inline에서 style=”…” 로 적용
- css파일을 분리해서 link하여 적용
- 이 세 가지 방법에 우선순위가 있는데 1, 3, 2번 순서대로 먼저 적용한다.
- hello_world.html을 다음과 같이 수정해보자.
{% extends 'base.html' %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
<h1>
testing
</h1>
<div class="testing" style="display: block;">block</div>
<div class="testing" style="display: inline;">inline</div>
<div class="testing" style="display: none;">none</div>
<div class="testing" style="display: inline-block;">inline-block</div>
<div class="testing">default</div>
</div>
{% endblock %}- 수정한 후 새로고침을 해보면,
- block
- inline, inline-block
- default
- 의 순서로 영역을 차지한 것을 볼 수 있다.
- block은 부모의 width 100%를 가져가기 때문에 다음 요소 inline은 다음 줄에 있다.
- inline은 최소한의 크기를 가진다.
- inline-block은 설정한 3rem x 3rem의 크기를 가진다.
- default는 기본적으로 block으로 설정된다.
- 참고로 의 기본 display 속성은 inline이다.
- 즉, display 속성을 바꾸지 않는 이상 size를 다르게 설정해도 무시하고 최소한의 크기를 가진다.
{% extends 'base.html' %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
<h1>
testing
</h1>
<div class="testing" style="display: inline-block; width: 48px; height: 48px;">inline-block</div>
<div class="testing" style="display: inline-block; width: 3em; height: 3em;">inline-block</div>
<div class="testing" style="display: inline-block; width: 3rem; height: 3rem;">inline-block</div>
<div class="testing" style="display: inline-block; width: 30%; height: 30%;">inline-block</div>
</div>
{% endblock %}- 이번에는 size 속성을 공부해보자.
- 내 기준 default font-size가 16px이어서 48px=3em=3rem이다.
- 브라우저의 개발자 모드에서 이 default font-size를 바꿔보자.
- html 태그를 클릭하고 styles 탭에서 element.style 에 font-size: 32px로 변경할 수 있다.
- 32px로 변경하면 첫번째의 48px은 그대로지만 3em과 3rem은 96px로 변경되었다.
- 이제, em과 rem의 차이를 알아보기 위해 부모 div 태그 style에 ‘font-size: 2rem;’을 추가한다.
- em이 배로 증가한다.
Model
- Django와 Database를 연동시켜준다.
- $ python manage.py 옵션들
- makemigrations: models.py에 쓰인 내용을 DB와 연동
- models.py에서 class를 만듦으로써 item을 만들 수 있다.
- class를 만들 때 models.Model을 상속받아야 한다.
- migrate를 해야 적용된다.
- migrate: 연동된 내용을 적용함
- settings.py에서 연동될 DB를 설정할 수 있다.
- 기본적으로는 sqlite3
- makemigrations: models.py에 쓰인 내용을 DB와 연동
공부