복잡한 로직을 정하기 이전에 렌더링을 해주어야할 화면부터 잡아보자. 반복되는 코드 작성을 피하기 위해, base.html 그리고 템플릿언어 중 block, endblock을 활용하자.
<!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">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
//헤드 부분에서 각 페이지마다 달라질 부분 설정
{% block head %}
{% endblock %}
</head>
<body>
//바디 부분에서 각 페이지마다 달라질 부분 설정
{% block body %}
{% endblock %}
</body>
</html>base.html을 위와 같이 작성해놓은 다음, 이제 index.html에서 base.html을 extends하여 달라지는 부분만 수정한다.
{% extends 'base.html' %}
<!-- 헤드부분 -->
{% block head %}
<title>Task Master</title>
{% endblock %}
<!-- 바디부분 -->
{% block body %}
<div class="content">
<h1>도대체 무엇을 해야하나</h1>
//table의 형태로 할일들의 리스트를 띄워주어야 한다
<table>
<tr>
<th>할일</th>
<th>저장한 시간</th>
<th>수정/삭제</th>
</tr>
<tr>
<td></td>
<td></td>
<td>
<a href="">Update</a>
<br>
<a href="">Delete</a>
</td>
</tr>
</table>
//할일들의 리스트를 작성한다면, POST 요청을 보내도록 한다
<form action="/" method="POST">
<input type="text" name="content" id="content">
<input type="submit" Value="Add Task">
</form>
</div>
{% endblock %}할일을 작성해야, 할일들을 저장하고, 이를 메인화면에 테이블의 형태로 띄워줄 수 있다. 다음 글에서 작성한 내용을 저장하는 부분을 다뤄본다(POST요청처리)
'Projects > Flask 할일리스트' 카테고리의 다른 글
| #5. 작성한 할일 수정하기 (0) | 2021.05.22 |
|---|---|
| #4. 작성한 할일 삭제하기 (0) | 2021.05.22 |
| #3. 할일 리스트를 저장하고, 이 리스트를 메인페이지에 띄워주기 (0) | 2021.05.22 |
| #1. 프로젝트 세팅하기 (0) | 2021.05.22 |
| #0. Flask로 CRUD를 모두 구현해보기 (0) | 2021.05.22 |
