Day 67 - 주간 복습 + 퀴즈

Day 67 - 주간 복습 + 퀴즈

🎯 학습 목표

• Week 11 전체 내용 종합 복습하기
• 인용 태그 3종(blockquote, q, cite) 완벽 정리
• 종합 퀴즈로 이해도 점검하기
• 실전 코딩 문제 풀어보기
• 다음 주 학습 내용 미리보기

📅 Week 11 학습 내용 돌아보기

Day 61

긴 인용 - blockquote 태그 (1)
기본 개념과 구조

Day 62

blockquote 활용법 (2)
CSS 스타일링과 중첩

Day 63

짧은 인용 - q 태그
인라인 인용과 따옴표

Day 64

인용 출처 - cite 태그
작품 제목 표시

Day 65

복습 - 인용 태그 비교
세 태그 종합 비교

Day 66

실습 - 명언 모음집
실전 프로젝트

📊 핵심 개념 총정리

💡 인용 태그 한눈에 보기

태그	용도	요소 유형	기본 스타일
<blockquote>	긴 인용문	블록	들여쓰기
<q>	짧은 인용문	인라인	따옴표
<cite>	작품 제목	인라인	이탤릭

🔑 핵심 공식

긴 인용문 = <blockquote>
짧은 인용문 = <q>
작품 제목 = <cite> 태그
출처 URL = cite 속성

완벽한 구조:
<blockquote cite="URL">
    <p>인용 내용</p>
    <footer>— <cite>작품명</cite>, 저자명</footer>
</blockquote>

⚠️ 자주 하는 실수 정리

❌ 이렇게 하면 안 돼요!

실수	올바른 방법
사람 이름에 cite 태그 사용	cite는 작품 제목에만!
짧은 인용에 blockquote 사용	한두 문장은 q 태그로!
q 안에 따옴표 직접 입력	자동 추가되니 불필요!
cite 속성과 태그 혼동	속성=URL, 태그=제목
내 글에 blockquote 사용	외부 출처 인용에만!

🧠 종합 퀴즈 (15문제)

📚 Part 1: 기본 개념 (5문제)

1. blockquote 태그의 기본 스타일은?
   ① 글자가 굵어진다
   ② 들여쓰기가 적용된다
   ③ 따옴표가 추가된다
   ④ 글자가 기울어진다
2. q 태그의 특징으로 올바른 것은?
   ① 블록 레벨 요소이다
   ② 기본 스타일은 들여쓰기이다
   ③ 자동으로 따옴표가 추가된다
   ④ 긴 인용문에 적합하다
3. cite 태그의 용도는?
   ① 인용문의 URL 표시
   ② 창작물의 제목 표시
   ③ 저자의 이름 표시
   ④ 출판년도 표시
4. blockquote의 cite 속성에 들어가는 값은?
   ① 저자 이름
   ② 작품 제목
   ③ 출처 URL
   ④ 출판사명
5. 다음 중 인라인 요소만 모은 것은?
   ① blockquote, q
   ② q, cite
   ③ blockquote, cite
   ④ div, q

📚 Part 2: 상황 판단 (5문제)

6. "어린 왕자" 책 제목을 표시할 때 적합한 태그는?
   ① <q>어린 왕자</q>
   ② <cite>어린 왕자</cite>
   ③ <blockquote>어린 왕자</blockquote>
   ④ <em>어린 왕자</em>
7. 친구가 한 짧은 말을 인용할 때 적합한 태그는?
   ① blockquote
   ② cite
   ③ q
   ④ em
8. 책의 한 문단 전체를 인용할 때 적합한 태그는?
   ① q
   ② cite
   ③ blockquote
   ④ p
9. "셰익스피어"라는 사람 이름에 사용할 태그는?
   ① cite
   ② q
   ③ 태그 없이 일반 텍스트
   ④ blockquote
10. 인용문 출처를 화면에 표시할 때 사용하는 태그 조합은?
    ① header + cite
    ② footer + cite
    ③ aside + q
    ④ div + span

📚 Part 3: 코드 분석 (5문제)

11. 다음 코드에서 잘못된 부분은?

    <blockquote>
        <p>명언 내용</p>
        <footer>— <cite>공자</cite></footer>
    </blockquote>

    ① blockquote 사용
    ② p 태그 사용
    ③ cite 안에 사람 이름
    ④ footer 사용
12. 다음 코드의 결과로 올바른 것은?

    <p>그는 <q>할 수 있다</q>고 말했다.</p>

    ① 그는 할 수 있다고 말했다.
    ② 그는 "할 수 있다"고 말했다.
    ③ "그는 할 수 있다고 말했다."
    ④ 그는 『할 수 있다』고 말했다.
13. cite 속성과 cite 태그가 모두 올바르게 사용된 것은?
    ① <blockquote cite="책제목">...</blockquote>
    ② <q cite="https://url.com">...</q>
    ③ <cite>https://url.com</cite>
    ④ 위 모두 틀림
14. 다음 중 시맨틱 마크업이 올바른 것은?

    A: <p><i>해리 포터</i>를 읽었다.</p>
    B: <p><cite>해리 포터</cite>를 읽었다.</p>

    ① A만 올바름
    ② B만 올바름
    ③ 둘 다 올바름
    ④ 둘 다 틀림
15. blockquote 안에서 여러 문단을 표시하는 올바른 방법은?
    ① br 태그로 줄바꿈
    ② 각 문단을 p 태그로 감싸기
    ③ span 태그로 구분
    ④ 그냥 텍스트로 작성

✅ 정답

Part 1: 1-②, 2-③, 3-②, 4-③, 5-②

Part 2: 6-②, 7-③, 8-③, 9-③, 10-②

Part 3: 11-③, 12-②, 13-②, 14-②, 15-②

🏆 점수 확인

13-15개: 완벽해요! 인용 태그 마스터!

10-12개: 잘했어요! 조금만 더 복습하면 완벽!

7-9개: 괜찮아요! 헷갈리는 부분 다시 확인!

6개 이하: Day 61-66 내용을 다시 복습해보세요!

💡 실전 코딩 문제

✏️ 코딩 문제 1

다음 문장을 올바른 HTML로 마크업하세요:

"어린 왕자에서 여우가 '길들인다는 건 관계를 맺는 거야'라고 말했다."

정답:

<p>
    <cite>어린 왕자</cite>에서 여우가
    <q>길들인다는 건 관계를 맺는 거야</q>라고 말했다.
</p>

✏️ 코딩 문제 2

다음 조건을 만족하는 인용문을 작성하세요:

• 명언: "상상력은 지식보다 중요하다"
• 저자: 알베르트 아인슈타인
• 출처 URL: https://ko.wikipedia.org/wiki/아인슈타인

정답:

<blockquote cite="https://ko.wikipedia.org/wiki/아인슈타인">
    <p>상상력은 지식보다 중요하다.</p>
    <footer>— 알베르트 아인슈타인</footer>
</blockquote>

📝 Week 11 요약

✅ 이번 주 핵심 학습 내용

• blockquote: 긴 인용문용 블록 요소, 기본 들여쓰기
• q: 짧은 인용문용 인라인 요소, 자동 따옴표
• cite 태그: 작품 제목 표시, 기본 이탤릭
• cite 속성: 출처 URL 지정 (화면 미표시)
• footer + cite: 인용문 출처를 화면에 표시
• 시맨틱 마크업: 검색엔진과 스크린리더 이해 도움

🎯 실전 활용

• 명언 모음집 제작
• 다양한 CSS 스타일링
• 카테고리별 분류

🔮 다음 주 예고: Week 12

📅 Week 12: 주석과 특수문자

Day	주제
Day 68	주석 달기 방법
Day 69	주석의 활용
Day 70	특수문자 -  , <, >
Day 71	특수문자 - ©, ®, ™
Day 72	한글 특수문자
Day 73	실습 - 특수문자가 있는 문서
Day 74	주간 복습 + 퀴즈

미리보기: HTML 주석(<!-- -->)과 특수문자 엔티티(&copy; 등)를 배웁니다!

📚 참고 자료

🔗 복습 자료

• Day 61-66: 이번 주 학습 파일 다시 읽어보기
• MDN Web Docs: HTML 인용 요소 가이드
• 실습: 명언 모음집 확장해보기
• 연습: 다양한 스타일 시도해보기

🎓 Week 11 완료!

인용 태그 마스터를 축하합니다! 🎉

blockquote, q, cite를 자유자재로 활용할 수 있게 되었습니다!

다음 주에는 주석과 특수문자를 배워봅시다!

---

Day 67 - 주간 복습 + 퀴즈 | EPUB 제작 365일 마스터 과정