Day 20 - 실습 - 중요한 부분 강조하기

Day 20: 실습 - 중요한 부분 강조하기

📖 오늘 배울 내용

이번 주에 배운 5가지 강조 태그를 실전에서 활용해봐요! 실제 웹 페이지를 만들면서 언제 어떤 태그를 사용해야 하는지 완벽하게 익혀요! 🎨

💡 어제 배운 것 복습

• strong: 중요 정보 (굵게)
• em: 감정 표현 (기울임)
• u: 이름, 용어 (밑줄)
• s/del: 틀린 정보, 완료 (취소선)
• 조합: 여러 태그를 함께 사용

---

1. 실습 프로젝트 소개 🎯

오늘은 세 가지 실전 프로젝트를 만들어볼 거예요!

📋 오늘의 프로젝트

1. 프로젝트 1: 영화 리뷰 페이지 만들기 🎬
2. 프로젝트 2: 온라인 쇼핑몰 상품 페이지 만들기 🛒
3. 프로젝트 3: 주간 학습 계획표 만들기 📚

게임으로 비유하면

🎮 레벨을 깨는 게임과 같아요!

🟢 레벨 1 (쉬움): 영화 리뷰
→ 기본 태그 활용 연습

🟡 레벨 2 (보통): 쇼핑몰 상품 페이지
→ 실전 태그 조합 연습

🔴 레벨 3 (어려움): 학습 계획표
→ 복잡한 태그 활용 연습

하나씩 차근차근 완성해봐요! 🚀

---

2. 프로젝트 1: 영화 리뷰 페이지 🎬

🎯 프로젝트 목표

좋아하는 영화의 리뷰를 작성하면서 강조 태그를 적절히 사용해봐요!

사용할 태그:

• 영화 제목 → em
• 감독, 배우 이름 → u
• 개봉일, 관람 등급 → strong
• 내 감정 → em
• 이전 평점 수정 → del + strong

📝 Step 1: 기본 정보 작성하기

<h1>🎬 영화 리뷰</h1>

<h2>기본 정보</h2>
<p>
<strong>제목:</strong> <em>토이 스토리</em><br>
<strong>감독:</strong> <u>존 라세터</u><br>
<strong>개봉:</strong> 1995년<br>
<strong>장르:</strong> 애니메이션, 모험<br>
<strong>관람 등급:</strong> 전체 관람가
</p>

📝 Step 2: 줄거리 작성하기

<h2>줄거리</h2>
<p>
카우보이 인형 <u>우디</u>는 주인 <u>앤디</u>의 <strong>가장 좋아하는</strong> 장난감이었어요.
그런데 생일 선물로 <em>멋진</em> 우주 전사 <u>버즈</u>가 오면서
<u>우디</u>의 위치가 <em>위태로워져요</em>.
</p>

<p>
처음엔 서로 <em>싫어했지만</em>, 위험한 상황을 함께 겪으며
<strong>진정한 친구</strong>가 되는 이야기예요! 🤝
</p>

📝 Step 3: 나의 감상 작성하기

<h2>나의 감상</h2>
<p>
이 영화는 <em>정말 재미있었어요</em>!
장난감들이 살아 움직이는 장면이 <em>너무 신기했어요</em>. 🎪
</p>

<p>
특히 <strong>"친구는 영원히"</strong>라는 메시지가
<em>가슴에 깊이 와닿았어요</em>. 💙
</p>

<h2>평점</h2>
<p>
<del>4점</del> <strong>5점 만점에 5점!</strong> ⭐⭐⭐⭐⭐
</p>

<p>
<em>모든 연령대에게 추천해요!</em> 👍
</p>

✨ 완성된 결과 보기

결과:

🎬 영화 리뷰

기본 정보

제목: 토이 스토리
감독: 존 라세터
개봉: 1995년
장르: 애니메이션, 모험
관람 등급: 전체 관람가

줄거리

카우보이 인형 우디는 주인 앤디의 가장 좋아하는 장난감이었어요. 그런데 생일 선물로 멋진 우주 전사 버즈가 오면서 우디의 위치가 위태로워져요.

처음엔 서로 싫어했지만, 위험한 상황을 함께 겪으며 진정한 친구가 되는 이야기예요! 🤝

나의 감상

이 영화는 정말 재미있었어요! 장난감들이 살아 움직이는 장면이 너무 신기했어요. 🎪

특히 "친구는 영원히"라는 메시지가 가슴에 깊이 와닿았어요. 💙

평점

4점 5점 만점에 5점! ⭐⭐⭐⭐⭐

모든 연령대에게 추천해요! 👍

✅ 체크 포인트

영화 제목에 em 태그 사용

인물 이름에 u 태그 사용

중요 정보에 strong 태그 사용

감정 표현에 em 태그 사용

수정된 평점에 del 태그 사용

---

3. 프로젝트 2: 온라인 쇼핑몰 상품 페이지 🛒

🎯 프로젝트 목표

할인 행사 중인 온라인 쇼핑몰 상품 페이지를 만들어봐요!

사용할 태그:

• 상품명 → u
• 원래 가격 → s
• 할인 가격 → strong
• 할인율 → em
• 중요 공지 → strong

📝 Step 1: 상품 정보 작성하기

<h1>🛒 주말 특가 세일</h1>

<p style="text-align: center;">
<strong>기간:</strong> 12월 10일 ~ 12월 12일<br>
<em>선착순 100명 한정!</em> ⏰
</p>

<hr>

<h2>📱 전자기기</h2>

<h3><u>무선 이어폰 PRO</u></h3>
<p>
<s>89,000원</s> <strong>59,000원</strong><br>
<em>30,000원 할인 (34% 할인)</em> 🎉
</p>

<p>
<strong>특징:</strong><br>
- 노이즈 캔슬링 기능<br>
- <strong>24시간</strong> 배터리 수명<br>
- 방수 기능 (IPX7)
</p>

📝 Step 2: 더 많은 상품 추가하기

<h3><u>블루투스 스피커 MINI</u></h3>
<p>
<s>120,000원</s> <strong>79,000원</strong><br>
<em>무려 41,000원 할인! (34% 할인)</em> 🔥
</p>

<p>
<strong>특징:</strong><br>
- 360도 사운드<br>
- <strong>12시간</strong> 재생 시간<br>
- 휴대용 디자인
</p>

<hr>

<h2>⌚ 웨어러블</h2>

<h3><u>스마트워치 ULTRA</u></h3>
<p>
<s>350,000원</s> <strong>249,000원</strong><br>
<em>101,000원 할인 (29% 할인)</em> 💎
</p>

<p>
<strong>특징:</strong><br>
- 건강 모니터링<br>
- GPS 기능<br>
- <strong>방수 기능</strong>
</p>

📝 Step 3: 주의사항 작성하기

<hr>

<h2>⚠️ 주의사항</h2>
<p>
<strong>배송:</strong> <del>3일 소요</del> <strong>당일 배송</strong> (특가 기간)<br>
<strong>반품:</strong> 14일 이내 <em>무료 반품</em><br>
<strong>결제:</strong> 모든 카드 <strong>무이자 할부</strong> 가능
</p>

<p style="text-align: center;">
<em>지금 바로 구매하세요!</em> 🛍️
</p>

✨ 완성된 결과 보기

결과:

🛒 주말 특가 세일

기간: 12월 10일 ~ 12월 12일
선착순 100명 한정! ⏰

---

📱 전자기기

무선 이어폰 PRO

89,000원 59,000원
30,000원 할인 (34% 할인) 🎉

특징:
- 노이즈 캔슬링 기능
- 24시간 배터리 수명
- 방수 기능 (IPX7)

블루투스 스피커 MINI

120,000원 79,000원
무려 41,000원 할인! (34% 할인) 🔥

특징:
- 360도 사운드
- 12시간 재생 시간
- 휴대용 디자인

---

⌚ 웨어러블

스마트워치 ULTRA

350,000원 249,000원
101,000원 할인 (29% 할인) 💎

특징:
- 건강 모니터링
- GPS 기능
- 방수 기능

---

⚠️ 주의사항

배송: 3일 소요 당일 배송 (특가 기간)
반품: 14일 이내 무료 반품
결제: 모든 카드 무이자 할부 가능

지금 바로 구매하세요! 🛍️

✅ 체크 포인트

상품명에 u 태그 사용

원래 가격에 s 태그 사용

할인 가격에 strong 태그 사용

할인율에 em 태그 사용

변경된 배송일에 del 태그 사용

---

4. 프로젝트 3: 주간 학습 계획표 📚

🎯 프로젝트 목표

일주일 학습 계획을 세우고 완료한 항목을 표시해봐요!

사용할 태그:

• 과목명 → u
• 중요한 시험 → strong
• 완료한 과제 → del
• 목표, 다짐 → em
• 변경된 계획 → del + strong

📝 전체 코드

<h1>📚 12월 2주차 학습 계획표</h1>

<p>
<strong>목표:</strong> <em>매일 꾸준히 공부하기!</em> 💪
</p>

<hr>

<h2>📅 월요일 (12/9)</h2>
<p>
<strong>오전:</strong><br>
<del><u>수학</u> 문제 풀기 (10문제)</del> ✅ 완료!<br>
<del><u>영어</u> 단어 암기 (20개)</del> ✅ 완료!
</p>

<p>
<strong>오후:</strong><br>
<del><u>과학</u> 교과서 읽기</del> ✅ 완료!<br>
<u>국어</u> 독후감 쓰기
</p>

<hr>

<h2>📅 화요일 (12/10)</h2>
<p>
<strong>중요! 오늘은 <u>수학</u> 시험일!</strong> 📝
</p>

<p>
<strong>오전:</strong><br>
<del><u>수학</u> 시험 대비 복습</del> ✅ 완료!<br>
<strong><u>수학</u> 시험 보기</strong>
</p>

<p>
<strong>오후:</strong><br>
<u>영어</u> 듣기 연습<br>
<u>사회</u> 요점 정리
</p>

<hr>

<h2>📅 수요일 (12/11)</h2>
<p>
<strong>오전:</strong><br>
<u>과학</u> 실험 보고서 작성<br>
<u>영어</u> 문법 공부
</p>

<p>
<strong>오후:</strong><br>
<del><u>체육</u> 수업 (오후 3시)</del> <strong>취소됨</strong><br>
→ <strong><u>미술</u> 수업으로 변경</strong>
</p>

<hr>

<h2>📅 목요일 (12/12)</h2>
<p>
<strong>오전:</strong><br>
<u>국어</u> 독서 감상문 완성<br>
<u>수학</u> 오답 노트 정리
</p>

<p>
<strong>오후:</strong><br>
<u>영어</u> 작문 연습<br>
<strong>다음 주 <u>과학</u> 시험 대비 시작</strong>
</p>

<hr>

<h2>📅 금요일 (12/13)</h2>
<p>
<strong>오전:</strong><br>
<u>사회</u> 프로젝트 준비<br>
<u>음악</u> 악기 연습
</p>

<p>
<strong>오후:</strong><br>
이번 주 복습 및 정리<br>
<em>주말 계획 세우기!</em> 🎯
</p>

<hr>

<h2>📊 이번 주 성과</h2>
<p>
<strong>완료한 과제:</strong> 7개 ✅<br>
<strong>남은 과제:</strong> 12개<br>
<strong>시험:</strong> <u>수학</u> (화요일)
</p>

<p>
<em>"꾸준함이 실력을 만든다!"</em> 💪<br>
<em>이번 주도 화이팅!</em> 🔥
</p>

✨ 완성된 결과 보기

결과:

📚 12월 2주차 학습 계획표

목표: 매일 꾸준히 공부하기! 💪

---

📅 월요일 (12/9)

오전:
수학 문제 풀기 (10문제) ✅ 완료!
영어 단어 암기 (20개) ✅ 완료!

오후:
과학 교과서 읽기 ✅ 완료!
국어 독후감 쓰기

---

📅 화요일 (12/10)

중요! 오늘은 수학 시험일! 📝

오전:
수학 시험 대비 복습 ✅ 완료!
수학 시험 보기

오후:
영어 듣기 연습
사회 요점 정리

---

📅 수요일 (12/11)

오전:
과학 실험 보고서 작성
영어 문법 공부

오후:
체육 수업 (오후 3시) 취소됨
→ 미술 수업으로 변경

📊 이번 주 성과

완료한 과제: 7개 ✅
남은 과제: 12개
시험: 수학 (화요일)

"꾸준함이 실력을 만든다!" 💪
이번 주도 화이팅! 🔥

✅ 체크 포인트

과목명에 u 태그 사용

완료한 과제에 del 태그 사용

중요한 시험에 strong 태그 사용

목표/다짐에 em 태그 사용

변경된 일정에 del과 strong 태그 함께 사용

---

5. 나만의 프로젝트 만들기 🎨

🚀 최종 미션

이제 여러분이 직접 자유 주제로 웹 페이지를 만들어보세요!

주제 아이디어:

1. 나의 버킷리스트 (하고 싶은 일 목록)
2. 좋아하는 게임 소개
3. 가족 소개 페이지
4. 요리 레시피
5. 여행 가고 싶은 곳
6. 나의 꿈과 목표

필수 조건:

제목(h1, h2) 포함하기

strong 태그 5번 이상 사용

em 태그 5번 이상 사용

u 태그 3번 이상 사용

s 또는 del 태그 2번 이상 사용

5가지 태그 모두 사용하기

태그를 적절한 곳에 사용하기

문단(p)과 줄바꿈(br) 적절히 사용

---

✨ Week 3 총정리

Day	내용	핵심 태그
Day 15	굵게 - strong 태그	<strong>
Day 16	기울임 - em 태그	<em>
Day 17	밑줄 - u 태그	<u>
Day 18	취소선 - s, del 태그	<s>, <del>
Day 19	복습 - 강조 태그 비교	전체 복습
Day 20	실습 - 중요한 부분 강조하기	실전 프로젝트

이번 주 배운 핵심:

1. 5가지 강조 태그의 용도 구별
2. 상황에 맞는 태그 선택 능력
3. 여러 태그의 조합 활용
4. 실전 프로젝트 완성

---

📚 Day 21: 주간 복습 + 퀴즈

다음편에는 이번 주에 배운 모든 내용을 복습하고 종합 퀴즈를 풀어봐요!
Week 3를 완벽하게 마무리해요! 🎯✨

---

📝 오늘의 한마디

"실습을 통해 배우면
훨씬 더 오래 기억에 남아요!
여러분은 이제 강조 태그 마스터예요! 🎉✨"

✅ 오늘 배운 것 체크리스트

프로젝트 1 (영화 리뷰) 완성했다

프로젝트 2 (쇼핑몰 페이지) 완성했다

프로젝트 3 (학습 계획표) 완성했다

나만의 프로젝트를 시작했다

5가지 태그를 실전에서 사용할 수 있다

태그를 적절한 곳에 사용하는 방법을 안다

모두 체크했다면 Day 20 완료! Week 3 끝! 🎉🎊