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

만약 부모 템플릿을 상속받은 자식 템플릿에서 따로 적용하고 싶은 css 파일이 있다면 어떻게 해야할까?

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>
...

  • `

    `

    자식 템플릿의 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도 사용할 수 있게 됐다!

Previous[Django 9] static 으로 css 로드하기Next[Django 11] URL app별로 관리하기

Last updated