HTML Iframe

사진: Unsplash의Tolga Ahmetler

HTML 아이프레임(Iframe) 태그 정리하기

이번 포스팅에서는 HTML의 아이프레임(Iframe) 태그를 정리해보겠습니다. 아이프레임은 하나의 웹페이지 안에 다른 웹페이지를 삽입할 때 사용됩니다.

---

1. 기본 아이프레임 구조

아이프레임은 <iframe> 태그를 사용하여 작성합니다. src 속성을 통해 불러올 페이지를 지정할 수 있습니다.

코드 예제

<iframe src="https://example.com/">
    브라우저가 아이프레임을 지원하지 않습니다.
</iframe>

결과 화면

아이프레임 영역에 https://example.com/ 웹페이지가 표시됩니다. 만약 브라우저가 아이프레임을 지원하지 않을 경우, "브라우저가 아이프레임을 지원하지 않습니다."라는 메시지가 나타납니다.

---

2. 아이프레임 속성

1) src

src는 아이프레임 안에 표시할 URL을 지정합니다.

<iframe src="https://example.com/"></iframe>

2) name

name 속성은 아이프레임에 이름을 지정합니다. 이를 통해 특정 링크를 아이프레임 안에서 열 수 있습니다.

<iframe name="sample" src="https://example.com/"></iframe>

3) width와 height

아이프레임의 너비와 높이를 지정합니다.

<iframe src="https://example.com/" width="500" height="300"></iframe>

4) frameborder

테두리를 표시하거나 숨길 수 있습니다. 기본값은 1입니다.

<iframe src="https://example.com/" frameborder="0"></iframe>

---

3. 아이프레임과 링크 연동

아이프레임의 name 속성을 활용하여 특정 링크를 클릭하면 아이프레임 안에 다른 페이지를 열 수 있습니다.

코드 예제

<iframe name="sample" src="https://example.com/"></iframe>

<a href="chapter05-list.html" target="sample">리스트 실습</a>
<a href="chapter05-table.html" target="sample">테이블 실습</a>
<a href="chapter05.html" target="sample">멀티미디어 실습</a>

동작 설명

• name="sample"로 지정된 아이프레임에 링크를 연동합니다.
• target="sample" 속성을 링크에 추가하면 클릭 시 해당 링크가 아이프레임에서 열립니다.

---

4. 주의 사항

1. 보안 문제

   • 일부 사이트는 보안을 이유로 다른 도메인의 URL이 아이프레임으로 불러와지지 않도록 설정할 수 있습니다(X-Frame-Options 헤더 사용).
   • 예: https://example.com과 같은 사이트는 아이프레임에서 표시되지 않을 수 있습니다.

2. 반응형 디자인

   • width와 height를 %로 설정하여 반응형 웹페이지에서 아이프레임 크기를 조절할 수 있습니다.

   <iframe src="https://example.com/" style="width: 100%; height: 500px;"></iframe>

---

최종 결과

코드

<iframe name="sample" src="https://example.com/" width="600" height="400"></iframe>

<a href="chapter05-list.html" target="sample">리스트 실습</a>
<a href="chapter05-table.html" target="sample">테이블 실습</a>
<a href="chapter05.html" target="sample">멀티미디어 실습</a>

결과

1. 아이프레임에 https://example.com/ 페이지가 기본으로 표시됩니다.
2. 링크를 클릭하면 아이프레임 안에서 다른 HTML 파일들이 열립니다.