static file 이란?
[Django Tutorial] Blog 만들기 (10)
Vue-Django 연동원리 웹 프로그램에서 css나 img, js 파일들은 static file 혹은 assets file 이라고 한다. django 측면에서 static 파일은 지칭하는 url로 보통 /static/ 이라는 url을 사용한다. /static/이라는..
duckracoon.tistory.com
1
settings.py에 STATIC_ROOT 정의
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')python manage.py collectstatic 이라는 명령어가 있다. 모든 static 파일들을 한군데로 모아주는 명령인데 이 명령을 통해서 파일들이 어디로 모일것인지를 알려주는데 STATIC_ROOT 다.
2
settings.py에 STATICFILES_DIR 정의
: 특정앱에 종속되어 있지 않은 프로젝트 전체에서 관리할 수 있는 그런 static 폴더를 따로 만들고 싶어서.
STATICFILES가 보통은 앱 내부에 있는 static folder를 찾는데 임의적으로 static files directory를 추가해줌으로써 앱에 종속되어있지 않은 static folder를 따로 만들수 있다.
3
최상위 프로젝트 아래 static 폴더를 만든다.
static/base.css 생성
css 작성해주면됨.
4
근데 어떻게 불러오느냐? head.html에서 {% load static %} 을 써주면 됨.
{% load static %}
<head>
<meta charset="UTF-8">
<title>Platypus</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- GOOGLE FONTS LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
</head>
5
{% load static %}
<head>
<meta charset="UTF-8">
<title>Platypus</title>
<!-- BOOTSTRAP LINK -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- GOOGLE FONTS LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<!-- DEFAULT CSS LINK -->
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
</head>href="{% static 'base.css' %}"
settings.py에 STATIC_URL = '/static/' 에 'base.css'가 붙어서 /static/base.css 이런 주소를 렌더링해서 전해주게되는거다.
'웹 프로그래밍' 카테고리의 다른 글
| [pinterest clone (9)] Model, DB 연동 (0) | 2021.04.26 |
|---|---|
| CSS에 대한 정리 (0) | 2021.04.26 |
| [pinterest clone (7)] 디자인 (0) | 2021.04.26 |
| [pinterest clone (6)] html (include / extends) (0) | 2021.04.26 |
| [pinterest clone (5)] Django template과 Views 연결 (0) | 2021.04.26 |