728x90
반응형
1. static 디렉터리
//config\\settings.py
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
스타일시트 파일은 장고의 스태틱 디렉터리에 저장해야 한다. config/settings.py 파일에 등록하여 사용한다.
static이라는 디렉터리에 스타일시트 파일을 넣어야 하므로, static 폴더가 존재해야 한다. 이를 만들어준다.
mkdir static
반응형
2. 스타일 시트
// static/style.css
textarea {
width:100%;
}
input[type=submit] {
margin-top:10px;
}
style.css 파일에는 상세화면에 적용할 스타일을 정의했다. 답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 "답변등록" 버튼 상단에 10 픽셀의 마진을 설정했다.
3. 템플릿에 스타일 적용
// pybo\\question_detail.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
템플릿 최상단에 {% load static %} 태그를 먼저 삽입해야 static을 사용할 수 있다.
4. 템플릿 상속
템플릿 파일들을 모두 표준 HTML 구조로 변경하면 body 엘리먼트 바깥 부분(head 엘리먼트 등)은 모두 같은 내용으로 중복된다. CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야 한다.
장고는 이런 중복과 불편함을 해소하기 위해 템플릿 상속(extend) 기능을 제공한다. 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용한다. 즉, 공통 컴포넌트를 만들어 바뀌는 부분만 html만 만들어 이를 코드로 구현하면 된다.
1) base.html
// templates/base.html
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- pybo CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<title>Hello, pybo!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>
이전에는 pybo폴더안에 html을 생성했다. 이는 공통으로 사용하는 것이므로 templates폴더 안에 위치하도록 해야 한다.
💡 body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 된다.
2) question_list.html
// templates/pybo/question_list.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
<table class="table">
(... 생략 ...)
</table>
</div>
{% endblock %}
- {% extends 'base.html' %} : base.html 템플릿을 상속하기 extends 템플릿 문법을 사용한다.
- {% block content %} 와 {% endblock %} 사이 : question_list.html에서만 쓰이는 내용을 작성한다.
728x90
반응형
