🔥base.html 큰 틀 분석

HY_1023·2026년 3월 19일

헷갈리는 부분 정리

목록 보기

27/40

base.html 큰 틀 분석

1. 전체 구조 한눈에

base.html
│
├── head 영역        ← 브라우저 설정 (눈에 안 보임)
│
└── body 영역        ← 실제 화면
        │
        ├── header   ← 상단 네비게이션
        ├── main     ← 페이지마다 다른 내용 (핵심)
        └── footer   ← 하단 설명

2. head 영역 (눈에 안 보이는 설정)

<head>
    charset="UTF-8"          <!-- 한글 깨짐 방지 -->
    name="viewport"          <!-- 모바일 화면 대응 -->

    {% block title %}        <!-- 탭 제목 (자식이 채워넣음) -->
        공부시간 기록기
    {% endblock %}

    Google Fonts (Pretendard) <!-- 폰트 불러오기 -->
    style.css                 <!-- 전체 디자인 적용 -->
</head>

3. body 영역 (눈에 보이는 화면)

① header — 모든 페이지 공통 상단

<header>
    <a href="{% url 'study:list' %}">Study Tracker</a>  <!-- 로고 (클릭하면 홈) -->
    <nav>
        <a href="{% url 'study:list' %}">홈</a>          <!-- 네비게이션 -->
    </nav>
</header>

어느 페이지를 가도 항상 고정으로 보이는 상단 바

② main — 페이지마다 달라지는 핵심 영역

<main>
    {% block content %}{% endblock %}  <!-- 자식 파일이 채워넣는 공간 -->
</main>

이 구멍 하나로 모든 페이지 내용이 바뀜
study_list.html, study_form.html, study_detail.html 이 여기를 채움

③ footer — 모든 페이지 공통 하단

<footer>
    <p>꾸준한 기록이 결국 큰 성장을 만듭니다.</p>
    <p>Django 반복훈련 1 - 공부시간 기록기</p>
</footer>

어느 페이지를 가도 항상 고정으로 보이는 하단

4. base.html의 핵심 역할

자식 파일들 (study_list, study_form, study_detail)
        ↓
{% extends 'base.html' %}  ← "나 base 쓸게"
        ↓
{% block content %}        ← "main 구멍만 내가 채울게"
        ↓
header, footer는 base.html이 자동으로 붙여줌

부분	관리 주체	변경 여부
header	base.html	모든 페이지 동일
content	자식 파일	페이지마다 다름
footer	base.html	모든 페이지 동일

한줄 정리

base.html = 공통 레이아웃 틀
헤더/푸터는 고정, {% block content %} 구멍만 자식 파일이 채워넣는 구조

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}공부시간 기록기{% endblock %}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <div class="app-shell">
    <header class="site-header">
      <div class="header-inner container">
        <a href="{% url 'study:list' %}" class="brand">Study Tracker</a>
        <nav class="main-nav">
          <a href="{% url 'study:list' %}">홈</a>
        </nav>
      </div>
    </header>
 
    <main class="site-main">
      {% block content %}{% endblock %}
    </main>
 
    <footer class="site-footer">
      <div class="container footer-inner">
        <p>꾸준한 기록이 결국 큰 성장을 만듭니다.</p>
        <p class="footer-sub">Django 반복훈련 1 - 공부시간 기록기</p>
      </div>
    </footer>
  </div>
</body>
</html>

detail.html

## HTML 템플릿 큰 그림 분석

---

### 1. 상속 구조

```html
{% 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>

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

전체 흐름 한줄 요약

## HTML 템플릿 큰 그림 분석

---

### 1. 상속 구조

```html
{% 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
        → 배지 : 카테고리, 날짜, 시간 요약
        → 메모 : 있으면 출력, 없으면 대체 텍스트
        → 기록 정보 : 생성일, 수정일
        → 목록으로 버튼

HTML 태그 구조와 역할

1. 태그 계층 구조

div (큰 박스)
│
├── section (의미있는 구역)
│       │
│       ├── span  (인라인 텍스트)
│       ├── h1    (가장 큰 제목)
│       └── p     (문단 텍스트)
│
└── section (의미있는 구역)
        │
        ├── div   (그냥 박스)
        │     └── span (인라인 텍스트)
        │
        └── div   (그냥 박스)
              └── h2  (두번째 제목)
              └── p   (문단 텍스트)

2. 각 태그 역할

div — 그냥 박스 (의미 없음)

<div class="container">     <!-- 전체를 감싸는 틀 -->
<div class="record-meta">   <!-- 배지들 묶는 틀 -->
<div style="margin-top">    <!-- 간격용 틀 -->

레이아웃 잡는 용도
아무 의미 없이 그냥 묶을 때 사용

section — 의미있는 구역

<section class="hero-card">    <!-- 소개 구역 -->
<section class="detail-card">  <!-- 상세 내용 구역 -->

div와 비슷하지만 "이건 하나의 독립된 구역이야" 라는 의미 포함
페이지를 논리적으로 구역별로 나눌 때 사용

h1, h2 — 제목 (숫자가 클수록 작은 제목)

<h1>{{ study.title }}</h1>   <!-- 페이지 대표 제목 (가장 큼) -->
<h2>학습 메모</h2>            <!-- 섹션 제목 (두번째) -->
<h2>기록 정보</h2>            <!-- 섹션 제목 (두번째) -->

태그	크기	용도
h1	가장 큼	페이지 대표 제목 (페이지당 1개)
h2	두번째	섹션 제목
h3~h6	점점 작아짐	하위 제목

p — 문단 텍스트

<p class="hero-desc">기록한 공부 내용을...</p>   <!-- 설명 문단 -->
<p class="record-memo">{{ study.memo }}</p>      <!-- 메모 내용 -->
<p>생성일: {{ study.created_at }}</p>            <!-- 정보 텍스트 -->

문장, 문단 텍스트에 사용
위아래로 자동 여백 생김

span — 인라인 텍스트 조각

<span class="hero-eyebrow">Study Detail</span>  <!-- 작은 라벨 -->
<span class="badge">{{ study.get_category_display }}</span>  <!-- 배지 -->
<span class="badge gray">{{ study.study_date }}</span>       <!-- 배지 -->

p나 div와 달리 줄바꿈 없이 옆으로 나란히 붙음
텍스트 일부분에 스타일만 입힐 때 사용

3. div vs section vs p vs span 비교

태그	줄바꿈	의미	주 용도
`div`	O	없음	레이아웃 박스
`section`	O	있음	독립된 구역
`p`	O	있음	문단 텍스트
`span`	X	없음	인라인 텍스트

한줄 정리

div     → 그냥 묶는 박스
section → 의미있는 구역 박스
h1/h2   → 제목 (숫자 작을수록 큼)
p       → 문단 텍스트
span    → 줄바꿈 없는 텍스트 조각

빨간색 부분 = Django 템플릿 문법

코드에서 빨간색으로 보이는 부분은 크게 2가지 종류입니다

1. `{% %}` — 템플릿 태그 (명령어)

{% extends 'base.html' %}   <!-- 상속해 -->
{% block content %}          <!-- 여기서부터 채울게 -->
{% endblock %}               <!-- 여기까지 -->

{% if study.memo %}          <!-- 조건문 -->
{% else %}
{% endif %}

{% url 'study:list' %}       <!-- URL 생성 -->

파이썬 로직을 HTML 안에서 실행하는 명령어
if / else / endif, block, url 등 동작을 수행

2. `{{ }}` — 템플릿 변수 (값 출력)

{{ study.title }}                  <!-- 제목 출력 -->
{{ study.get_category_display }}   <!-- 카테고리 출력 -->
{{ study.study_date }}             <!-- 날짜 출력 -->
{{ study.hours }}                  <!-- 시간 출력 -->
{{ study.memo|linebreaksbr }}      <!-- 메모 출력 -->
{{ study.created_at }}             <!-- 생성일 출력 -->

views.py에서 넘겨준 데이터를 화면에 뿌려주는 역할
|linebreaksbr 는 필터 → 줄바꿈을 <br>로 변환

한눈에 비교

문법	생김새	역할
템플릿 태그	`{% %}`	명령 실행 (if, for, url...)
템플릿 변수	`{{ }}`	값 출력

쉽게 기억하는 법

{% %} → 퍼센트(%) 있음 → 명령어 (뭔가 해!)
{{ }} → 퍼센트 없음  → 변수 출력 (값 보여줘!)

인라인이란?

블록 vs 인라인 차이

블록 태그 (div, p, section) — 한 줄 전체를 차지

┌─────────────────────────┐
│ div (한 줄 전체 차지)    │
└─────────────────────────┘
┌─────────────────────────┐
│ p (또 한 줄 전체 차지)   │
└─────────────────────────┘

인라인 태그 (span) — 내용만큼만 차지

┌──────┐┌──────┐┌──────┐
│span  ││span  ││span  │  ← 옆으로 나란히 붙음
└──────┘└──────┘└──────┘

실제 코드로 비교

<!-- p 태그 → 줄바꿈 됨 -->
<p>Django</p>
<p>Python</p>

<!-- 결과 -->
Django
Python   ← 각각 다른 줄

<!-- span 태그 → 줄바꿈 안됨 -->
<span>Django</span>
<span>Python</span>

<!-- 결과 -->
Django Python  ← 같은 줄에 붙음

코드에서 span 쓴 이유

<span class="badge">카테고리</span>
<span class="badge gray">날짜</span>
<span class="badge gray">시간</span>

결과 화면:
[ 카테고리 ]  [ 날짜 ]  [ 시간 ]  ← 배지들이 가로로 나란히

div나 p를 썼다면 배지가 세로로 쌓였을 것

한줄 정리

블록(div, p)  → 줄 전체 차지 → 세로로 쌓임
인라인(span)  → 내용만큼만  → 가로로 나란히

HY_1023

개발언어를 배우는 과정 기록

이전 포스트

🔥_HTML 템플릿 큰 그림 분석

다음 포스트

🔥base.html 큰 틀 분석

헷갈리는 부분 정리

base.html 큰 틀 분석

1. 전체 구조 한눈에

2. head 영역 (눈에 안 보이는 설정)

3. body 영역 (눈에 보이는 화면)

4. base.html의 핵심 역할

한줄 정리

2. block 2개

3. content 안 구조

4. hero-card (소개 영역)

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

전체 흐름 한줄 요약

2. block 2개

3. content 안 구조

4. hero-card (소개 영역)

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

전체 흐름 한줄 요약

HTML 태그 구조와 역할

1. 태그 계층 구조

2. 각 태그 역할

3. div vs section vs p vs span 비교

한줄 정리

빨간색 부분 = Django 템플릿 문법

1. `{% %}` — 템플릿 태그 (명령어)

2. `{{ }}` — 템플릿 변수 (값 출력)

한눈에 비교

쉽게 기억하는 법

인라인이란?

블록 vs 인라인 차이

실제 코드로 비교

코드에서 span 쓴 이유

한줄 정리

🔥_HTML 템플릿 큰 그림 분석

마이그레이션마이그레이트

0개의 댓글

🔥base.html 큰 틀 분석

헷갈리는 부분 정리

base.html 큰 틀 분석

1. 전체 구조 한눈에

2. head 영역 (눈에 안 보이는 설정)

3. body 영역 (눈에 보이는 화면)

4. base.html의 핵심 역할

한줄 정리

2. block 2개

3. content 안 구조

4. hero-card (소개 영역)

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

전체 흐름 한줄 요약

2. block 2개

3. content 안 구조

4. hero-card (소개 영역)

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

전체 흐름 한줄 요약

HTML 태그 구조와 역할

1. 태그 계층 구조

2. 각 태그 역할

3. div vs section vs p vs span 비교

한줄 정리

빨간색 부분 = Django 템플릿 문법

1. {% %} — 템플릿 태그 (명령어)

2. {{ }} — 템플릿 변수 (값 출력)

한눈에 비교

쉽게 기억하는 법

인라인이란?

블록 vs 인라인 차이

실제 코드로 비교

코드에서 span 쓴 이유

한줄 정리

🔥_HTML 템플릿 큰 그림 분석

마이그레이션마이그레이트

0개의 댓글

1. `{% %}` — 템플릿 태그 (명령어)

2. `{{ }}` — 템플릿 변수 (값 출력)