📢 공지사항
home

Static 설정 및 CSS 파일 분리

복습
수강일
05월 12일
수강일_
2022/05/12
숫자
11
주차
1주차
체크
태그
Django Tutorial
os.path.join
os - 라이브러리
path - 경로 관련 라이브러리
join - 라이브러리를 합친다
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
= static파일들을 나중에 한 곳에 모을 때, 어디로 모을것인지 정해준다.
CSS 스타일 분리
보통 html은 뼈대만 남겨두고, CSS는 파일을 따로 빼내 관리하는것이 보통의 개발 패턴.
빼내기 전에, static에 관한 설정을 해줘야 한다.
static : 정적 변수. 수명과 연계에 따라 달라지는 가시성을 모두 제어하는 예약어이다. CSS나 font등을 말한다.
사용하기 위해 static root를 설정해준다.
STATIC_ROOT = 'os.path.join(BASE_DIR, 'staticfiles')
Python
복사
settings.py
os.path.join.(BASE_DIR)이란? os : 라이브러리(os에서 제공하는 함수, 모듈들) path : 경로와 관련된 모듈들 join : 그 중 join이라는 함수. BASE_DIR : 미리 지정한 디렉토리. 현재는 pragmatic dir.
static files 폴더를 따로 만들어, 앱에 종속되지 않는 static files 를 관리 가능.
STATIC_URL = 'static/' STATIC_ROOT = 'staticfiles' STATICFILES_DIRS = [ BASE_DIR / "static",
Python
복사
settings.py
상위 dir에 static 폴더 생성 후, base.css 파일을 생성해준다.

CSS class를 이용한 view 꾸미기

css 파일에서 스타일을 클래스로 지정하고, html에서 이를 로드해 사용한다.
.pragmatic_footer_logo { font-family: 'Hahmlet', serif;" }
CSS
복사
base.css
<div> <h6 class="pragmatic_footer_logo">Pragmatic</h6> </div>
HTML
복사
footer.html
static file을 가져오기 위해선, head.html에 다음과 같이 입력해준다.
{% load static %} <!-- DAFAULT CSS LINK --> <link rel="stylesheet" type="text/css href="{% static 'base.css' %}">
HTML
복사
head.html
base.css에 필요한 경로를 django가 알아서 렌더링 해줘서 전체 템플릿에서 사용할 수 있게 된다.
 11:10초 이론설명 중요!