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도 사용할 수 있게 됐다!
삽질의 기록들 👨💻