어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 표준 HTML 문서의 구조는 html, head, body 엘리먼트가 있어야 하며, CSS 파일 링크는 head 엘리먼트 안에 있어야 한다.
base.html
앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해 보자.
먼저 기본 틀이 되는 base.html 템플릿을 다음처럼 작성하자.
[파일이름: projects/mysite/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>
question_list.html
[파일이름: projects/mysite/templates/pybo/question_list.html]
{% extends 'base.html' %}
{% block content %}<div class="container my-3">
<table class="table">
<thead>
<tr class="table-dark">
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
{% if question_list %}
{% for question in question_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
<a href="{% url 'pybo:detail' question.id %}">{{ question.subject }}</a>
</td>
<td>{{ question.create_date }}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3">질문이 없습니다.</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock %}
이제 브라우저에서 소스보기 기능으로 생성된 HTML을 확인해보자.
질문 목록, 질문 상세를 조회해 보자. 화면에 보여지는 것은 동일하지만 표준 HTML 구조로 변경된 것을 확인할 수 있다.
*해당 화면에서 오른쪽 마우스 클릭 후, 소스보기 선택
그리고 부트스트랩 적용으로 인해 style.css의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제하자.
하지만 이후 부트스트랩으로 표현할 수 없는 스타일을 위해 파일 자체를 삭제하지는 말고 내용만 삭제하자.
'Django' 카테고리의 다른 글
| (11) 내비게이션 바 (0) | 2024.07.05 |
|---|---|
| (10) 폼 (1) | 2024.07.02 |
| (8) 부트스트랩 (0) | 2024.07.02 |
| (7) 데이터 저장 및 스태틱 (0) | 2024.07.02 |
| (6) URL 별칭 (0) | 2024.07.02 |
