[Django] 한 템플릿에서 복수의 css 파일 적용하기

hidaehyunlee·2020년 7월 23일
1

나의 Django

목록 보기
10/11

base.html을 상속받은 자식 템플릿의 경우, 무조건 부모 템플릿의 main.css 파일도 같이 상속받는다. 만약 자식 템플릿에서 따로 적용하고 싶은 css 파일이 있다면 어떻게 해야할까?

예를들어, 새 글쓰기를 기능을 가진 new.html 파일은 Navbar 도 상속받아야하고, 글 작성 form을 위한 css도 따로 적용해줘야한다.

해결 방법은 아래와 같다.


1. 자식 템플릿 css 파일 생성

app/static/new.css

우선, new.css 파일을 static 폴더에 만들어준다.


2. 부모 템플릿의 head에 {%block%} 생성

new.css를 위한 extrahead라는 이름의 block을 base.html의 head 섹션에 정의해준다.

<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <link rel="stylesheet" href="{% static "base.css" %}">
  {% block extrahead %}
  {% endblock %}
</head>
...
  • {% block extrahead %}
    {% endblock %}

    자식 템플릿의 head 섹션에서 파일별로 다르게 사용할 수 있는 block이 된다.


3. 자식 템플릿의 head에서 static 링크

new.html의 head에서 new.css를 링크할 수 있게된다.

{% extends "base.html" %}
<head> 
  {% load static %}
  {% block extrahead %}
  <link rel="stylesheet" href="{% static "new.css" %}">
  {% endblock %}
</head>
...
  • {% extends "base.html" %} 를 통해 main.css를 상속받는 동시에,
  • {% load static %} 을 통해 new.css도 사용할 수 있게 됐다!

profile
삽질의 기록들 👨‍💻

0개의 댓글