🔥_HTML 템플릿 큰 그림 분석

HTML 템플릿 큰 그림 분석

---

1. 상속 구조

{% extends 'base.html' %}

• base.html의 공통 레이아웃을 그대로 가져오고
• 이 파일은 다른 부분만 채워넣는 역할

---

2. block 2개

{% block title %}
    {{ study.title }} | 공부시간 기록기
{% endblock %}

{% block content %}
    ... 실제 내용 ...
{% endblock %}

block	역할
title	브라우저 탭 제목
content	화면에 보이는 내용 전체

---

3. content 안 구조

{% block content %}
    │
    ├── section.hero-card     ← 상단 소개 영역
    │
    └── section.detail-card   ← 상세 내용 영역
            │
            ├── 배지들 (카테고리, 날짜, 시간)
            ├── 학습 메모
            ├── 기록 정보 (생성일, 수정일)
            └── 목록으로 버튼

---

4. hero-card (소개 영역)

<section class="hero-card">
    <span>Study Detail</span>       <!-- 작은 라벨 -->
    <h1>{{ study.title }}</h1>      <!-- 공부 제목 (DB에서 가져옴) -->
    <p>기록한 공부 내용을...</p>     <!-- 설명글 -->
</section>

• {{ study.title }} = views.py에서 넘겨준 study 객체의 제목

---

5. detail-card (핵심 내용 영역)

① 배지 묶음

<div class="record-meta">
    {{ study.get_category_display }}  <!-- 카테고리 이름 -->
    {{ study.study_date }}            <!-- 공부 날짜 -->
    {{ study.hours }}시간 {{ study.minutes }}분  <!-- 공부 시간 -->
    {{ study.total_minutes }}분       <!-- 총 분 -->
</div>

• 한눈에 볼 수 있는 요약 정보들을 배지로 표시

② 학습 메모

{% if study.memo %}
    {{ study.memo|linebreaksbr }}  <!-- 메모 있으면 출력 -->
{% else %}
    작성된 메모가 없습니다.         <!-- 없으면 대체 텍스트 -->
{% endif %}

• |linebreaksbr = 메모에서 줄바꿈을 <br>태그로 변환해주는 필터

③ 기록 정보

<p>생성일: {{ study.created_at }}</p>
<p>수정일: {{ study.updated_at }}</p>

• 언제 처음 작성했고 언제 마지막으로 수정했는지

④ 버튼

<a href="{% url 'study:list' %}">목록으로</a>

• 상세 페이지에서 목록 페이지로 돌아가는 버튼

---

전체 흐름 한줄 요약

base.html 레이아웃 상속
    → hero-card : 제목 + 설명
    → detail-card
        → 배지 : 카테고리, 날짜, 시간 요약
        → 메모 : 있으면 출력, 없으면 대체 텍스트
        → 기록 정보 : 생성일, 수정일
        → 목록으로 버튼