HTML 태그정리

Youtube 영상 삽입

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/fUcIe7-2zxw?si=pcwkHi7hWIoogW_b"
  title="웹접근성이란 - AOA11Y Youtube"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

1. iframe → 외부 웹 콘텐츠(예: 유튜브 영상, 지도 등)를 삽입하는 태그
2. width="560" height="315" → 영상의 가로(560px), 세로(315px) 크기 지정
3. src="유튜브 URL" → 유튜브 영상의 Embed URL을 사용하여 삽입
4. 일반적인 유튜브 링크(https://www.youtube.com/watch?v=ID)가 아니라, 임베드(embed) URL 형식(https://www.youtube.com/embed/ID) 사용해야 함
5. title="웹접근성이란 - AOA11Y Youtube" → 웹 접근성을 고려한 설명 추가 (스크린리더 지원)
6. referrerpolicy="strict-origin-when-cross-origin" → 보안 정책 설정 (다른 출처의 콘텐츠 요청 시 원본 정보 제한)
7. allowfullscreen → 전체 화면 모드 지원

PDF 문서 삽입

<figure>
  <object
    type="application/pdf"
    data="/src/assets/pdf/wai-aria.pdf"
    width="600"
    height="1200"
  ></object>
  <figcaption>WAI-ARIA</figcaption>
</figure>

1. object → PDF, SWF, 플래시 등 다양한 파일을 직접 표시하는 요소
2. type="application/pdf" → 삽입할 파일의 MIME 타입을 지정 (여기서는 PDF)
3. data="/src/assets/pdf/wai-aria.pdf" → 실제 PDF 파일 경로
4. width="600" height="1200" → PDF 뷰어의 크기 지정
5. figcaption → 삽입한 PDF의 설명 추가 (접근성 향상)