1. Base.html 템플릿 파일을 만든다.
- 지금까지 만든 HTML 템플릿은 표준구조를 가지고 있지 않은 상태이다.
- 장고에서 부르는 템플릿은 파일마다 기능에 꼭 필요한 구조만 작성하고
반복되는 <head> 태그와 같은것들은 모두 Base.html 에 넣어서 사용한다.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Requierd Meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, 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 %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
</body>
</html>- css 코드도 모두 Base.html 파일 헤드태그에 넣어준다.
- 이때 Base.html은 템플릿폴더바로 아래에 저장한다. template/pybo 아님. template 에 저장.
- 아래형식만 지켜주면된다.
- {% load static %}
{% block content %}
/*--- 여기에 다른파일이 삽입되게 된다. ---*/
{% endblock %}
2. question_list.html, question_detail.html은 다음과 같이 수정하면된다.
{% extends 'base.html' %}
{% block content %}
<div class = "container my-3">
<table class="table">
/*---- 생략 -----*/
</table>
</div>
{% endblock %}{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
/*---- 생략 ----*/
</div>
{% endblock %}- 아래형식이 삽입될 파일에 들어가면된다.
- {% extends 'base.html' %}
{% block content %}
/*--- 삽입될 태그가 여기 들어가면 된다 ---*/
{% endblock %}
3. 부트스트랩을 사용하게 되었으므로 기존 Style.css 파일 안의 내용은 모두 지워준다.
위 문서는 이지스퍼블리싱에서 출간한 박응용님의 "점프투 장고"를 제가 공부하면서 요약한 내용입니다.
게시한 내용은 공부를 하면서 저만 알아볼 수 있게 요약한 부분들도 많으므로 부족한 내용은
직접 책을 구입하셔서 보시면 좋을 것 같습니다.
'Study > django' 카테고리의 다른 글
| django - Questionform (0) | 2021.10.06 |
|---|---|
| django - CSS (0) | 2021.09.25 |
| django - Answerform (0) | 2021.09.25 |
| django - Namespace (0) | 2021.09.25 |
| django - QuestionContent (0) | 2021.09.25 |