반응형
지금처럼 <ul>로 나열된 목록은 시가 많아질수록 가독성과 선택성이 떨어지며,
출간용 시 선택에도 불편합니다.
다음과 같이 **표 형식(테이블)**으로 바꾸고, 각 행에 선택용 체크박스와 “보기” 버튼을 함께 넣겠습니다.
📘 『시마당 프로젝트 따라하기』
9장. 시 목록을 표 형식으로 보기 + 시 선택 기능
작성자: easyfly
작성일: 2025년 7월 16일
🟦 1. 목록 템플릿 수정 – 표 형식 + 선택
📁 poem/templates/poem/poem_list.html
<!DOCTYPE html>
<html>
<head>
<title>시 목록 (전자책 출간용)</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f0f0f0;
}
a.button {
text-decoration: none;
padding: 4px 8px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>📚 시 목록 (전자책 출간용)</h1>
<form method="post" action="#">
{% csrf_token %}
<table>
<tr>
<th>선택</th>
<th>제목</th>
<th>작가</th>
<th>작성일</th>
<th>보기</th>
</tr>
{% for poem in poems %}
<tr>
<td><input type="checkbox" name="selected_poems" value="{{ poem.id }}"></td>
<td>{{ poem.title }}</td>
<td>{{ poem.author.name }}</td>
<td>{{ poem.created_at|date:"Y년 m월 d일 H:i" }}</td>
<td><a class="button" href="{% url 'poem_detail' poem.pk %}">보기</a></td>
</tr>
{% endfor %}
</table>
<br>
<button type="submit">선택한 시로 EPUB 만들기 (준비 중)</button>
</form>
<p><a href="{% url 'upload_poem' %}">✍️ 시 쓰러 가기</a></p>
</body>
</html>
📌 주요 변경 내용 요약
| 항목 | 설명 |
| 테이블로 시 목록 정렬 | 제목 / 작가 / 날짜를 컬럼별로 정리 |
| 체크박스 추가 | 추후 EPUB 출간용 시 선택 기능을 위한 준비 |
| 보기 버튼 추가 | 시 전문 확인 페이지로 이동 |
| 폼 구조 추가 | POST 방식으로 선택된 시를 서버에 전송 가능 (기능은 아직 구현 X) |
✅ 다음 단계 예고
『10장. 선택한 시를 EPUB 파일로 변환하여 자동 출간하기』
- 사용자가 체크박스로 시를 선택하고 “출간” 버튼을 누르면
선택된 시를 하나의 .epub 전자책 파일로 생성하는 기능을 구현합니다.
'HTML5 > 반응형 웹' 카테고리의 다른 글
| 시 목록 페이지 분리: "자세히 보기" 구현 (2) | 2025.07.15 |
|---|---|
| 업로드된 시 목록 보기 (ListView 만들기) (1) | 2025.07.14 |
| 시 업로드 페이지 만들기 (템플릿과 폼) (1) | 2025.07.13 |
| 관리자 페이지에 모델 등록하기 (1) | 2025.07.12 |
| 시 모델 만들기: Poem과 Author (2) | 2025.07.11 |