Day 5 - 복습 - 제목 태그 완전 정복

Day 5: 복습 - 제목 태그 완전 정복

📖 오늘 배울 내용

오늘은 지금까지 배운 제목 태그를 완벽하게 정리하는 날이에요! h1부터 h6까지 모든 제목 태그를 복습하고, 실전에서 어떻게 사용하는지 알아봐요.

💡 지난 4일 동안 배운 것

• Day 1: HTML과 태그의 기본 개념
• Day 2: h1 태그 - 가장 큰 제목
• Day 3: h2, h3 태그 - 중간 크기 제목들
• Day 4: h4, h5, h6 태그 - 작은 크기 제목들

---

1. 제목 태그 전체 복습 📚

제목 태그는 h1부터 h6까지 총 6개가 있어요. 각각의 특징을 정리해볼게요!

태그	이름	크기	용도	사용 횟수
<h1>	Heading 1	가장 큼 ⭐⭐⭐⭐⭐⭐	페이지 제목	1번만!
<h2>	Heading 2	큼 ⭐⭐⭐⭐⭐	주요 챕터	여러 번
<h3>	Heading 3	중간 ⭐⭐⭐⭐	소제목	여러 번
<h4>	Heading 4	작음 ⭐⭐⭐	세부 제목	여러 번
<h5>	Heading 5	더 작음 ⭐⭐	상세 분류	여러 번
<h6>	Heading 6	가장 작음 ⭐	최소 단위	여러 번

학교로 비유하면

🏫 학교 이름 = <h1> (○○초등학교)
📚 학년 = <h2> (1학년, 2학년, 3학년)
👥 반 = <h3> (1반, 2반, 3반)
📖 과목 = <h4> (국어, 수학, 영어)
📝 단원 = <h5> (1단원, 2단원)
✏️ 소단원 = <h6> (가, 나, 다)

계층적으로 점점 세분화되는 구조예요!

---

2. 크기 비교 - 한눈에 보기 👀

모든 제목 태그를 한번에 비교해볼까요?

코드 예시

<h1>h1 - 가장 큰 제목</h1>
<h2>h2 - 큰 제목</h2>
<h3>h3 - 중간 제목</h3>
<h4>h4 - 작은 제목</h4>
<h5>h5 - 더 작은 제목</h5>
<h6>h6 - 가장 작은 제목</h6>

결과:

h1 - 가장 큰 제목

h2 - 큰 제목

h3 - 중간 제목

h4 - 작은 제목

h5 - 더 작은 제목

h6 - 가장 작은 제목

💡 크기 순서 기억법

숫자가 작을수록 → 제목이 커요! 📏
숫자가 클수록 → 제목이 작아져요! 📏

1 = 첫째 = 제일 중요 = 가장 큼
6 = 여섯째 = 제일 덜 중요 = 가장 작음

---

3. 제목 태그 사용 규칙 📋

제목 태그를 제대로 사용하려면 반드시 지켜야 할 규칙이 있어요!

⚠️ 필수 규칙 5가지

1. h1은 한 페이지에 딱 한 번만!
   → 책 표지는 하나만 있듯이, h1도 하나만 있어야 해요
2. 순서대로 사용하기!
   → h1 → h2 → h3 → h4 → h5 → h6 순서 지키기
3. 순서 건너뛰지 않기!
   → h2 다음에 바로 h5는 안 돼요. h3, h4를 거쳐야 해요
4. 닫는 태그 꼭 쓰기!
   → <h1>제목</h1> 이렇게 짝을 맞춰주세요
5. 의미 있게 사용하기!
   → 그냥 크게 보이려고 h1을 쓰면 안 돼요. 정말 제목일 때만!

계단으로 비유하면

🏢 제목 태그는 계단과 같아요!

✅ 올바른 사용:
1층(h1) → 2층(h2) → 3층(h3) → 4층(h4)

❌ 잘못된 사용:
1층(h1) → 5층(h5) ← 2, 3, 4층을 건너뛰었어요!

계단을 한 칸씩 올라가듯이,
제목도 순서대로 사용하세요! 🪜

---

4. 실전 예제 - 완전한 웹페이지 만들기 🎨

지금까지 배운 모든 제목 태그를 사용해서 완전한 웹페이지를 만들어볼까요?

예시: 동물원 안내 페이지

<h1>서울 동물원에 오신 것을 환영합니다</h1>

<h2>1관: 육상 동물관</h2>

<h3>대형 동물 구역</h3>
<h4>코끼리 우리</h4>
<h5>아프리카코끼리</h5>
<h6>이름: 점보, 나이: 15살</h6>
<h5>아시아코끼리</h5>
<h6>이름: 코순이, 나이: 20살</h6>

<h4>기린 우리</h4>
<h5>기린 가족</h5>
<h6>아빠 기린: 목돌이</h6>
<h6>엄마 기린: 목순이</h6>

<h3>육식 동물 구역</h3>
<h4>사자 우리</h4>
<h5>수사자</h5>
<h6>이름: 심바, 특징: 갈기가 멋져요</h6>

<h2>2관: 수중 동물관</h2>

<h3>물고기 수족관</h3>
<h4>열대어 수조</h4>
<h5>클라운피시</h5>
<h6>개체수: 약 50마리</h6>

결과:

서울 동물원에 오신 것을 환영합니다

1관: 육상 동물관

대형 동물 구역

코끼리 우리

아프리카코끼리

이름: 점보, 나이: 15살

아시아코끼리

이름: 코순이, 나이: 20살

기린 우리

기린 가족

아빠 기린: 목돌이

엄마 기린: 목순이

육식 동물 구역

사자 우리

수사자

이름: 심바, 특징: 갈기가 멋져요

2관: 수중 동물관

물고기 수족관

열대어 수조

클라운피시

개체수: 약 50마리

보세요! 제목들이 계층적으로 아주 잘 정리되어 있죠? 이렇게 하면 누구나 쉽게 내용을 찾을 수 있어요! 😊

---

5. 자주 하는 실수와 해결법 ❌➡️✅

실수 ❌	올바른 방법 ✅
h1을 여러 번 사용	h1은 한 페이지에 한 번만!
h2 다음에 바로 h5 사용	h2 → h3 → h4 → h5 순서대로
닫는 태그 안 씀 <h1>제목	반드시 닫기! <h1>제목</h1>
크게 보이려고 h1 남발	의미에 맞게 사용하기
제목이 아닌데 제목 태그 사용	진짜 제목일 때만 사용

교통신호로 비유하면

🚦 제목 태그 사용 규칙

🟢 초록불 (OK):
- h1은 한 번만 사용
- 순서대로 사용 (h1→h2→h3...)
- 의미 있는 제목에만 사용

🔴 빨간불 (STOP):
- h1 여러 번 사용 금지
- 순서 건너뛰기 금지
- 단순히 크게 보이려고 사용 금지

규칙을 지켜야 안전해요! 🛡️

---

6. 종합 퀴즈 - 실력 확인하기 🧠

📝 퀴즈 1. 제목 태그는 모두 몇 개인가요?

정답 보기 👆

정답: 6개 (h1, h2, h3, h4, h5, h6)
설명: HTML에는 h1부터 h6까지 총 6개의 제목 태그가 있어요. Heading의 약자 h에 숫자를 붙여서 사용해요!

📝 퀴즈 2. h1 태그는 한 페이지에 몇 번 사용할 수 있나요?

정답 보기 👆

정답: 1번만 사용 가능
설명: h1은 페이지의 가장 중요한 제목이에요. 책 표지가 하나만 있듯이, h1도 한 페이지에 딱 한 번만 사용해야 해요. 나머지 h2~h6는 여러 번 사용 가능해요!

📝 퀴즈 3. h3 다음에 h6를 바로 써도 될까요?

정답 보기 👆

정답: ❌ 안 돼요!
설명: 제목 태그는 순서대로 사용해야 해요. h3 다음에는 h4가 와야 하고, 그 다음 h5, 그 다음 h6이 와야 해요. 계단을 한 칸씩 내려가듯이 순서를 지켜야 해요!

📝 퀴즈 4. 가장 큰 제목 태그는 무엇인가요?

정답 보기 👆

정답: h1
설명: h1이 가장 크고, 숫자가 커질수록 제목이 작아져요. h1 > h2 > h3 > h4 > h5 > h6 순서로 작아진답니다!

📝 퀴즈 5. 다음 중 올바른 사용은?

A) <h1>제목<h1>
B) <h1>제목</h1>
C) <h1>제목

정답 보기 👆

정답: B) <h1>제목</h1>
설명:
A는 닫는 태그가 잘못되었어요 (슬래시 / 없음)
B는 완벽해요! 여는 태그 <h1>과 닫는 태그 </h1> 짝이 맞아요
C는 닫는 태그가 없어요. 모든 태그는 짝을 맞춰야 해요!

---

🎯 종합 실습 과제

미션: h1부터 h6까지 모두 사용해서 자신만의 웹페이지를 만들어보세요!

주제 선택:

• 우리 가족 소개
• 좋아하는 게임 공략
• 내가 가고 싶은 여행지
• 좋아하는 책 소개
• 우리 반 친구들 소개

필수 조건:

1. h1은 딱 한 번만 사용하기
2. h1부터 h6까지 모두 사용하기
3. 제목 태그를 순서대로 사용하기
4. 계층 구조가 명확하게 보이도록 하기

예시 구조:

<h1>주제</h1>
  <h2>대분류 1</h2>
    <h3>중분류 1-1</h3>
      <h4>소분류 1-1-1</h4>
        <h5>세부항목</h5>
          <h6>상세내용</h6>

---

✨ Week 1 총정리

1. 제목 태그는 h1부터 h6까지 총 6개
2. 숫자가 작을수록 크고 중요한 제목
3. h1은 한 페이지에 한 번만 사용
4. 제목 태그는 순서대로 사용해야 함 (건너뛰기 금지)
5. 모든 태그는 여는 태그와 닫는 태그 짝을 맞춰야 함
6. 의미 있는 제목에만 사용하기
7. 계층 구조를 명확하게 만들기

---

📚 Day 6: 실습 - 책 목차 만들기

다음편에는 제목 태그를 활용해서 실제 책 목차를 만들어봐요!
지금까지 배운 모든 제목 태그를 실전에서 사용해보는 시간이에요! 📖✨

---

📝 오늘의 한마디

"복습은 실력의 어머니!
오늘 배운 제목 태그 규칙을 완벽하게 익혀두면
앞으로 어떤 웹페이지도 만들 수 있어요! 💪✨"

✅ 오늘 배운 것 체크리스트

h1부터 h6까지 6개의 제목 태그를 모두 알고 있나요?

제목 태그 사용 규칙 5가지를 이해했나요?

h1은 한 페이지에 한 번만 쓴다는 걸 기억하나요?

제목 태그를 순서대로 사용할 수 있나요?

자주 하는 실수를 피할 수 있나요?

h1부터 h6까지 모두 사용해서 웹페이지를 만들어봤나요?

모두 체크했다면 Week 1 복습 완료! 🎉