[Django 9] static 으로 css 로드하기
장고에서는 css나 js 같은 정적 파일들을 static 폴더에서 한번에 관리한다.
장고에서는
css나js같은 정적 파일들을static폴더에서 한번에 관리한다.
1. static 폴더 생성
app 폴더 안에 static 폴더를 생성하고, 그 안에 main.css 파일을 넣어준다.
2. base.html에 static 링크하기
<head>
{% load static %}
<link rel="stylesheet" href="{% static "main.css" %}">
</head>만약 개별 페이지 마다의 css 파일을 만들었다면 똑같이 static 폴더에 넣어준 뒤 각 템플릿에서 static으로 링크하면 된다.
3. base.html 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static "main.css" %}">
</head>
<body>
<h1>django 블로그</h1>
<div id="nav" class="nav">
<div class="icon">
<ul>
<li><a title="Home" href="{% url 'home' %}"><i class="fa fa-home "></i></a></li>
<li><a href="{% url 'home' %}"><i class="fa fa-search "></i></a></li>
<li><a href="{% url 'new' %}"><i class="fa fa-edit "></i></a></li>
</ul>
</div>
<div class="text">
<ul>
<li><a title="Home" href="{% url 'home' %}">홈</a></li>
<li><a href="{% url 'home' %}" >소개</a></li>
<li><a href="{% url 'new' %}" >새 글쓰기</a></li>
</ul>
</div>
</div>
{% block content %}
{% endblock %}
</body>
</html>나는 codepen의 Fly-Out Nav를 가져와 사용했다.
모든 페이지에 들어갈 nav 요소이기 때문에 base.html 에 넣어준것이고, 각 페이지마다의 템플릿은
block content에 담길 것이다.만약 부트스트랩을 사용하고싶다면 아래 CDN을 head에 추가해주자!
이 템플릿이 폰트어썸 icon을 사용하고 있기 때문에,
font-awesomeCDN을 head에 추가했다.더 다양한 icon을 사용하고 싶다면 여기 참고!
4. 모든 페이지에 상속하기
{% extends 'base.html' %}로 가져오고,{% block content %}과{% endblock %}내부에 원래 있던 home.html 의 코드를 적어준다.
Last updated
Was this helpful?