본문 바로가기
LIKELION 9th

[Django] 템플릿 상속 및 css 파일 적용하기(feat. 내비게이션 바)

Donghae 2021. 5. 29. 20:48

지난 멋사 세션에서 게시판을 만들고 귀찮은 마음에 css작업은 미뤄뒀던 나...

 

내비게이션 바를 만들어서 상속을 해볼까 하던 차에 템플릿 상속이랑 css 파일 적용 개념이 엉망진창인걸 깨달았다. 이번 글은 2시간 동안 싸우면서 배운 템플릿 상속 및 css 파일 적용 정리 글이다.

 

1. 장고 프로젝트 및 앱 만들기

 

toy_project라는 이름으로 프로젝트를 만들고 그 안에 main앱을 만들었다.

* 여기까지의 자세한 과정은 지난 글 참고

 

2. 템플릿 상속

1) 프로젝트 폴더에 base.html 만들기

<!--toy_project/templates/base.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    {% block extrahead %}
    {% endblock %}
</head>
<body>
    <nav>
        <ul class="nav-container">
            <li class="nav-item"><a href="">프로젝트 이름</a></li>
            <li class="nav-item"><a href="">로그인</a></li>
            <li class="nav-item"><a href="">회원가입</a></li>
        </ul>
    </nav>
    {% block content %}
    {% endblock %}
</body>
</html>

 

모든 페이지에 적용될 네비게이션 바를 구현하기 위해 base.html을 만들었다.

* 이때 base.html은 부모 템플릿이 되며 {% block title %}, {% block extrahead %}, {% block content %} 안에 자식 템플릿의 내용이 들어간다.

 

2) 프로젝트 폴더의 settings.py 수정하기

#toy_project/settings.py

···
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['toy_project/templates'],	#base.html이 있는 곳 알려주기
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
···

 

base.html의 경로를 알려주기위해 TEMPLATES의 비어있는 'DIRS'를 수정했다.

 

3) 템플릿 상속하기

<!--main/templates/index.html-->
{% extends 'base.html' %}

{% block title %}Document{% endblock %}

{% block content %}
<h1>index 내용</h1>
{% endblock %}
  • main앱 templates 폴더 내 자식 템플릿인 index.html을 만들었다.
  • {% extends '부모 템플릿' %}은 가장 첫 줄에 적어줘야 한다.

여기까지 하면 내용을 상속하는 건 끝

 

3. css 파일 적용하기

1) 프로젝트 폴더의 settings.py 수정하기

#toy_project/settings.py

···
import os

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
···
  • 먼저 정적 파일(static files)을 적용시키기 위해 settings.py에 코드를 위와 같이 추가했다.
  • 이는 정적파일을 호출할 때 static 폴더에서 찾게 하기 위해서다.

*정적 파일에는 css, jpg, javascript 파일 등이 있다.

 

2) base.css 만들기

/*main/static/css/base.css*/
body {
    margin: 0;
}

.nav-container {
    display: flex;
    flex-direction: row; 
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fcbe32;
    list-style-type: none;
}

.nav-item {
    padding: 15px;
    cursor: pointer;
}

.nav-item a{
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
}

 

base.html에 적용할 css파일을 간단하게 만들었다.

 

3) base.html에서 css 파일 불러오기

<!--toy_project/templates/base.html-->

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}"> #css 파일 적용
    {% block extrahead %}
    {% endblock %}
</head>
<body>
    <nav>
        <ul class="nav-container">
            <li class="nav-item"><a href="">프로젝트 이름</a></li>
            <li class="nav-item"><a href="">로그인</a></li>
            <li class="nav-item"><a href="">회원가입</a></li>
        </ul>
    </nav>
    {% block content %}
    {% endblock %}
</body>
</html>
  • {% load static %}을 사용해 정적 파일 경로에 있는 모든 파일을 불러올 수 있도록 했다.
  • 그리고 css 파일 적용을 위해 <head> 안에 코드를 작성했다.

 

index.html에 {% load static %}까지 추가하면 css 파일 적용하기 끝

 

index.html

 

그런데 index.html에도 css 파일을 적용하고 싶을 땐 어떻게 해야할까

 

답은 {% block extrahead %} 사용하기

 

<!--toy_project/templates/base.html-->
<!DOCTYPE html>
<html lang="en">
<head>
	···
    {% block extrahead %}
    {% endblock %}
</head>
<body>
···
/*main/static/css/index.css*/
h1 {
    color:gold;
}
<!--main/templates/index.html-->
{% extends 'base.html' %}
{% load static %}

{% block extrahead %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block title %}Document{% endblock %}

{% block content %}
<h1>index 내용</h1>
{% endblock %}
  • {% block extrahead %}를 부모 템플릿인 base.html에 만들면 자식 템플릿 head 섹션에서 사용이 가능하다.
  • index.html은 {% extends 'base.html' %}에서 base.css를 상속받고, 동시에 {% block extrahead %}로 index.css를 적용할 수 있다.

 

index.html

 

index.css까지 적용 끝끝

 

참고자료

 

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

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

velog.io

 

Django 웹 11 추가사항 - (blog) 템플릿 상속

#새로 알게된 것 - {%block contents%} {%endblock contents%}  : body 태그 안에 씀! #더 찾아본 것 Q: 그럼 페이지마다 css 다른건 어떻게 할까? - {%block css %}{%endblock css%} : head 태그 안에 씀! Q : b..

yulme.tistory.com

 

#26 웹 개발 CSS 강좌 - 내비게이션 바 만들기

오늘부터는 지금까지 알려드린 내용을 바탕으로 예제 페이지를 만들어 보겠습니다. 이번 시간에 만들 예제...

blog.naver.com

 

[Django] static 으로 css 로드하기

장고에서는 css나 js 같은 정적 파일들을 static 폴더에서 한번에 관리한다.

velog.io

 

 

저작자표시

'LIKELION 9th' 카테고리의 다른 글

[Django] SECRET_KEY 분리하기(Django Secret Key exposed on GitHub 메일)  (0) 2021.06.05
[멋쟁이 사자처럼] 토이프로젝트 아이디어 발표🌊  (0) 2021.06.03
[멋쟁이 사자처럼] Django로 블로그 만들기3 (댓글 쓰기)  (0) 2021.05.25
[멋쟁이 사자처럼] Django로 블로그 만들기2 (회원가입, 로그인, 로그아웃)  (0) 2021.05.24
[멋쟁이 사자처럼] Django로 블로그 만들기(CRUD 기능 구현하기)  (0) 2021.05.16

'LIKELION 9th' Related Articles

티스토리툴바