HTML의 <iframe> 태그는 하나의 웹 문서를 다른 웹 페이지 안에 삽입(임베드)하는 기능을 합니다. 삽입 대상은 PDF, 웹 페이지, 지도, 동영상 등 다양하며, src 속성으로 삽입할 리소스의 위치를 지정합니다.
HTML만으로도 PDF 문서나 구글 지도처럼 별도의 웹 문서로 제공되는 콘텐츠를 현재 페이지에 그대로 불러올 수 있습니다. 이때 사용하는 것이 바로 <iframe> 태그입니다. 이 글에서는 <iframe> 태그의 기본 개념부터 실전 예제까지 단계별로 살펴보겠습니다.
HTML iframe이란?
iframe은 '인라인 프레임(inline frame)'이라고도 부르며, 외부 웹 문서를 현재 페이지 안에 표시하는 요소입니다. 지도, PDF, 동영상, 다른 웹 페이지 등 거의 모든 웹 리소스를 삽입할 수 있습니다.
중요한 특징 중 하나는 iframe 내부의 코드가 페이지의 나머지 부분과 완전히 독립적이라는 점입니다. 따라서 부모 페이지에 적용된 CSS 스타일이나 자바스크립트는 iframe 안에는 적용되지 않습니다.
<iframe> 태그의 기본 문법은 다음과 같습니다:
<iframe src="url"></iframe>
<iframe> 태그로 프레임을 생성하고, src 속성에는 삽입하고 싶은 리소스의 URL을 지정합니다.
iframe 기본 사용 예제
간단한 예제를 통해 <iframe> 태그의 동작 방식을 확인해 보겠습니다.
워싱턴 D.C.의 한 역사 협회 홈페이지를 만든다고 가정해 봅시다. 협회는 미국 헌법의 탄생을 다룬 칸 아카데미(Khan Academy) 강의 영상을, 입회에 관심 있는 사람에게 추천하는 페이지에 삽입하기를 원합니다. 이때 다음과 같은 코드를 사용할 수 있습니다:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
위 코드는 유튜브 영상 링크("https://www.youtube.com/embed/Rk8dCnKIfP4")를 iframe으로 불러와 페이지에 표시합니다. 이 링크가 바로 협회가 노출하기 원하는 영상의 주소입니다.
iframe 크기 조절: height와 width 속성
height 속성과 width 속성을 사용하면 iframe의 크기를 지정할 수 있습니다. 협회에서 영상을 더 크게 보여달라고 요청했다면, 너비 500픽셀, 높이 300픽셀로 설정하는 코드는 다음과 같습니다:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
이제 삽입된 영상은 너비 500픽셀, 높이 300픽셀로 표시되어 방문자가 훨씬 잘 볼 수 있습니다.
참고로 CSS를 사용해서도 크기를 조절할 수 있지만, HTML 자체에서 height와 width 속성을 지원하므로 굳이 그럴 필요는 없습니다.
iframe 테두리 제거하기
<iframe> 태그를 사용하면 기본적으로 콘텐츠 주변에 테두리(border)가 표시됩니다. 이 테두리를 없애려면 CSS의 border:none; 속성을 활용하면 됩니다.
협회에서 영상 주변의 테두리를 제거해 달라고 요청했다면 다음과 같이 작성하면 됩니다:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
이제 영상 주변의 테두리가 깔끔하게 사라진 것을 확인할 수 있습니다.
iframe을 링크 대상(target)으로 사용하기
<iframe> 태그는 링크의 출력 대상 프레임으로도 활용할 수 있습니다. 링크의 target 속성값을 iframe의 name 속성과 일치시키면, 해당 링크를 클릭했을 때 iframe 안에 콘텐츠가 열리게 됩니다.
협회에 미국 헌법 제1조(Article I)를 다룬 또 다른 칸 아카데미 영상을 소개해 달라는 요청이 들어왔다고 가정해 봅시다. '탄생(Birth)'이라는 텍스트를 클릭하면 '미국 헌법의 탄생' 영상이, '제1조(Article I)'를 클릭하면 헌법 제1조 관련 영상이 iframe에 재생되도록 만들어야 합니다. 이때 사용할 수 있는 코드는 다음과 같습니다:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
기본 상태에서는 iframe에 '미국 헌법의 탄생' 영상이 표시됩니다. 여기서 'Article I' 링크를 클릭하면 iframe의 내용이 헌법 제1조 관련 영상으로 전환됩니다. 반대로 'Birth' 링크를 클릭하면, 이미 해당 영상이 표시 중이 아니라면 다시 '헌법의 탄생' 영상으로 되돌아갑니다.
마무리
HTML의 <iframe> 태그는 웹 페이지, PDF, 지도, 동영상 같은 외부 웹 리소스를 다른 페이지 안에 삽입할 때 사용합니다. 지도나 파일, 영상, 다른 웹 페이지를 사이트에 추가하고 싶다면 iframe이 가장 간편한 방법 중 하나입니다.
이 글에서는 <iframe> 태그의 기본 문법부터 크기 조절, 테두리 제거, 링크 대상 지정까지 예제와 함께 살펴보았습니다. 이제 여러분도 <iframe> 태그를 능숙하게 활용할 준비가 되었습니다!
HTML을 더 깊이 배우고 싶다면, HTML 학습 가이드도 함께 참고해 보세요.