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

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

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

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

해결 방법은 아래와 같다.

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

```css
app/static/new.css
```

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

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

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

```markup
<!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를 링크할 수 있게된다.

```markup
{% 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**도 사용할 수 있게 됐다!
