> For the complete documentation index, see [llms.txt](https://hidaehyunlee.gitbook.io/fork-my-brain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hidaehyunlee.gitbook.io/fork-my-brain/django/django-9-static-css.md).
# \[Django 9] static 으로 css 로드하기
장고에서는 css나 js 같은 정적 파일들을 static 폴더에서 한번에 관리한다.
> 장고에서는 `css`나 `js`같은 정적 파일들을 `static` 폴더에서 한번에 관리한다.
## 1. static 폴더 생성
app 폴더 안에 `static` 폴더를 생성하고, 그 안에 `main.css` 파일을 넣어준다.
## 2. base.html에 static 링크하기
```markup
{% load static %}
```
만약 개별 페이지 마다의 css 파일을 만들었다면 똑같이 static 폴더에 넣어준 뒤 각 템플릿에서 static으로 링크하면 된다.
## 3. base.html 만들기
```markup
Document
{% load static %}
{% block content %}
{% endblock %}
```
* 나는 codepen의 [Fly-Out Nav](https://codepen.io/tmrDevelops/pen/RNdKYY)를 가져와 사용했다.
모든 페이지에 들어갈 nav 요소이기 때문에 base.html 에 넣어준것이고, 각 페이지마다의 템플릿은 `block content` 에 담길 것이다.
* 만약 부트스트랩을 사용하고싶다면 아래 CDN을 head에 추가해주자!
```markup
```
* 이 템플릿이 폰트어썸 icon을 사용하고 있기 때문에, `font-awesome` CDN을 head에 추가했다.
```markup
```
더 다양한 icon을 사용하고 싶다면 [여기](https://www.w3schools.com/icons/icons_reference.asp) 참고!
## 4. 모든 페이지에 상속하기
```markup
{% extends 'base.html' %}
{% block content %}
새 글쓰기
{% for blog in blogs.all%}