이번 포스팅에서는 HTML의 iframe을 이용한 외부 콘텐츠 통합 방법에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지에 다른 웹 페이지를 삽입하는 방법을 자세히 학습해봅시다.
자동목차
이론: iframe 이란?
HTML의 <iframe> 태그는 웹 페이지 내에 다른 HTML 페이지를 임베드하는 데 사용됩니다. 이를 통해 웹 페이지에 YouTube 동영상, Google Maps 등의 외부 콘텐츠를 쉽게 삽입할 수 있습니다.
실습: iframe 사용하기
아래의 코드는 Google Maps를 웹 페이지에 삽입하는 간단한 예시입니다.
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096037!2d144.95373531532157!3d-37.817209979751584!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce6e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2s!4v1606974553041!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>
코드 설명: iframe 태그의 속성
- src: 임베드할 웹 페이지의 URL을 지정합니다.
- width와 height: iframe의 너비와 높이를 지정합니다.
- style: CSS를 이용하여 iframe의 스타일을 지정합니다. 이 예시에서는 테두리를 없애는 스타일을 적용하였습니다.
- allowfullscreen: 이 속성이 지정되면, iframe의 콘텐츠를 전체 화면으로 볼 수 있습니다.
- aria-hidden과 tabindex: 웹 접근성과 관련된 속성입니다. aria-hidden="false"는 스크린 리더기가 iframe의 콘텐츠를 읽을 수 있음을, tabindex="0"은 키보드로 iframe을 조작할 수 있음을 나타냅니다.
마무리
HTML의 <iframe> 태그를 이용하면 웹 페이지에 다른 웹 페이지나 외부 콘텐츠를 쉽게 삽입할 수 있습니다. 이번 포스팅을 통해 iframe의 활용 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.