Day 65 - 복습 - 인용 태그 비교

Day 65 - 복습 - 인용 태그 비교

🎯 학습 목표

• blockquote, q, cite 태그의 차이점 명확히 이해하기
• 상황에 맞는 올바른 인용 태그 선택하기
• 세 태그를 조합하여 완벽한 인용문 구조 만들기
• cite 속성과 cite 태그 구분하기
• 인용 관련 시맨틱 마크업 마스터하기

📌 이번 주 학습 내용 정리

💡 한눈에 보는 인용 태그

이번 주에 배운 세 가지 인용 관련 태그를 정리합니다:

• blockquote: 긴 인용문 (블록 요소)
• q: 짧은 인용문 (인라인 요소)
• cite: 작품 제목 (인라인 요소)

📊 세 태그 비교표

구분	blockquote	q	cite
용도	긴 인용문	짧은 인용문	작품 제목
요소 유형	블록 (block)	인라인 (inline)	인라인 (inline)
기본 스타일	들여쓰기	따옴표 자동 추가	이탤릭체
줄바꿈	전후로 발생	없음	없음
cite 속성	사용 가능	사용 가능	해당 없음
인용 대상	다른 출처의 글	다른 출처의 글	창작물 제목만

🎨 각 태그 상세 비교

📦 blockquote - 긴 인용문

특징:

• 블록 레벨 요소 (전후로 줄바꿈)
• 여러 문장, 여러 문단 가능
• 기본 스타일: 들여쓰기
• cite 속성으로 출처 URL 지정 가능

사용 예:

<blockquote cite="https://example.com">
    <p>긴 인용문 내용...</p>
    <footer>— <cite>출처 작품명</cite></footer>
</blockquote>

적합한 상황: 책의 한 문단 인용, 연설문, 긴 명언, 기사 인용

💬 q - 짧은 인용문

특징:

• 인라인 요소 (문장 안에서 사용)
• 한두 문장 정도의 짧은 인용
• 기본 스타일: 따옴표 자동 추가
• cite 속성으로 출처 URL 지정 가능

사용 예:

<p>그는 <q cite="https://example.com">짧은 한마디</q>라고 말했습니다.</p>

적합한 상황: 대화 중 인용, 짧은 문구 인용, 문장 속 한마디

📖 cite - 작품 제목

특징:

• 인라인 요소 (문장 안에서 사용)
• 창작물의 제목만 표시
• 기본 스타일: 이탤릭체
• 인용문이 아닌 제목을 마크업

사용 예:

<p>저는 <cite>어린 왕자</cite>를 읽었습니다.</p>

적합한 상황: 책 제목, 영화 제목, 노래 제목, 그림 제목

⚠️ cite 속성 vs cite 태그

🔍 헷갈리기 쉬운 두 가지

구분	cite 속성	cite 태그
문법	cite="URL"	<cite>제목</cite>
값	URL (웹 주소)	텍스트 (작품 제목)
화면 표시	표시 안 됨	이탤릭체로 표시
사용 위치	blockquote, q 안에서	독립적으로 어디서든
목적	출처 URL 제공	작품명 시맨틱 표시

🔧 완벽한 인용문 구조

💡 세 태그를 함께 사용하기

blockquote, cite 태그, cite 속성을 모두 활용한 완벽한 인용문 구조입니다:

<blockquote cite="https://ko.wikipedia.org/wiki/어린_왕자">
    <p>
        중요한 것은 눈에 보이지 않아.
        오직 마음으로만 볼 수 있지.
    </p>
    <footer>
        — <cite>어린 왕자</cite>, 앙투안 드 생텍쥐페리
    </footer>
</blockquote>

결과:

중요한 것은 눈에 보이지 않아. 오직 마음으로만 볼 수 있지.

— 어린 왕자, 앙투안 드 생텍쥐페리

구조 분석:

• blockquote: 전체 인용문을 감싸는 블록
• cite 속성: 출처 URL (화면에 안 보임, 검색엔진용)
• p: 인용문 내용
• footer: 출처 정보 영역
• cite 태그: 작품 제목 (이탤릭체로 표시)

🌟 상황별 태그 선택 가이드

📝 상황 1: 책을 소개할 때

올바른 사용:

<p>저는 <cite>사피엔스</cite>를 추천합니다. 유발 하라리의 이 책은...</p>

→ 책 제목만 있으므로 cite 태그 사용

📝 상황 2: 누군가의 말을 짧게 인용할 때

올바른 사용:

<p>선생님은 <q>열심히 하면 된다</q>라고 격려해주셨습니다.</p>

→ 문장 안의 짧은 인용이므로 q 태그 사용

📝 상황 3: 긴 연설문을 인용할 때

올바른 사용:

<blockquote>
    <p>나에게는 꿈이 있습니다. 언젠가 이 나라가...</p>
    <p>나에게는 꿈이 있습니다. 조지아의 붉은 언덕에서...</p>
</blockquote>

→ 여러 문단의 긴 인용이므로 blockquote 태그 사용

📝 상황 4: 책에서 명언을 인용하고 출처도 표시할 때

올바른 사용:

<blockquote>
    <p>명언 내용...</p>
    <footer>— <cite>책 제목</cite>, 저자명</footer>
</blockquote>

→ blockquote + cite 태그 조합 사용

💡 실습 과제

✏️ 실습 1: 태그 선택하기

다음 상황에 맞는 태그를 선택하세요:

1. "해리 포터" 영화를 소개하는 문장 → ( )
2. 친구가 한 짧은 한마디를 인용 → ( )
3. 논문에서 여러 문단을 인용 → ( )

정답: 1-cite, 2-q, 3-blockquote

✏️ 실습 2: 완벽한 인용문 만들기

좋아하는 책에서 명언을 하나 골라 완벽한 인용문 구조를 만들어보세요:

1. blockquote로 전체 감싸기
2. cite 속성에 관련 URL 추가
3. p 태그로 인용 내용 작성
4. footer와 cite 태그로 출처 표시

✏️ 실습 3: 혼합 사용

다음 문장을 올바르게 마크업해보세요:

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

1. 책 제목 "어린 왕자"는 cite 태그
2. 여우의 말은 q 태그
3. 전체를 p 태그로

⚠️ 주의사항과 팁

🎯 자주 하는 실수

• 사람 이름에 cite 태그: ❌ 작품 제목에만 사용!
• 짧은 인용에 blockquote: ❌ 한두 문장은 q 태그!
• cite 속성과 태그 혼동: ❌ 속성은 URL, 태그는 제목!
• q 안에 따옴표 직접 입력: ❌ 자동 추가되므로 불필요!

💪 마스터 팁

• 시맨틱 마크업의 힘: 검색엔진과 스크린리더가 내용을 정확히 이해
• 일관성 유지: 같은 문서에서는 같은 패턴으로 인용
• CSS 활용: 기본 스타일을 원하는 대로 변경 가능
• 저작권 주의: 적절한 분량만 인용, 반드시 출처 표시

📝 요약 정리

✅ 이번 주 핵심 정리

태그	한 줄 정의	기본 스타일
<blockquote>	긴 인용문 블록	들여쓰기
<q>	짧은 인라인 인용	따옴표 추가
<cite>	작품 제목 표시	이탤릭체

🔑 기억할 공식

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

🧠 퀴즈

📚 종합 테스트

1. 긴 인용문에 사용하는 블록 레벨 태그는?
   ① q ② cite ③ blockquote ④ quote
2. 문장 안에서 짧은 인용에 사용하는 태그는?
   ① blockquote ② q ③ cite ④ em
3. 책 제목을 표시할 때 사용하는 태그는?
   ① q ② blockquote ③ title ④ cite
4. cite 속성의 값으로 적합한 것은?
   ① 저자 이름 ② 작품 제목 ③ URL ④ 출판년도
5. q 태그의 기본 스타일은?
   ① 들여쓰기 ② 이탤릭체 ③ 따옴표 자동 추가 ④ 굵은 글씨
6. 다음 중 cite 태그 사용이 올바른 것은?
   ① <cite>셰익스피어</cite>
   ② <cite>햄릿</cite>
   ③ <cite>영국</cite>
   ④ <cite>https://example.com</cite>
7. blockquote 안에서 출처를 표시하기에 적합한 태그 조합은?
   ① header + span
   ② footer + cite
   ③ div + a
   ④ p + strong

정답: 1-③, 2-②, 3-④, 4-③, 5-③, 6-②, 7-②

📚 참고 자료

🔗 더 알아보기

• MDN Web Docs: HTML 인용 요소 가이드
• W3C: HTML5 시맨틱 마크업 명세
• 접근성 가이드: WCAG 인용문 접근성
• CSS 스타일링: 인용문 디자인 패턴

🎓 다음 학습 예고

Day 66 - 실습 - 명언 모음집 만들기

내일은 배운 인용 태그들을 활용해 멋진 명언 모음집을 만듭니다!

blockquote, q, cite를 실전에서 활용해봅시다!

다양한 스타일의 인용문 디자인도 적용해봅니다!

---

Day 65 - 복습 - 인용 태그 비교 | EPUB 제작 365일 마스터 과정