인라인 하위 창(inline sub window)은 <iframe> 요소를 의미하며, <iframe> 태그를 사용하면 현재 HTML 문서 안에 또 다른 문서나 외부 콘텐츠를 삽입할 수 있습니다. 웹페이지, 동영상, 지도 등 다양한 콘텐츠를 페이지 내부에 그대로 보여줄 때 유용하게 활용됩니다.
iframe 태그의 주요 속성
HTML <iframe> 태그는 아래와 같은 속성을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | left right top middle bottom | 주변 텍스트를 기준으로 iframe을 정렬하는 방식을 지정합니다. |
| frameborder | 1 0 | 프레임 주위에 테두리를 표시할지 여부를 지정합니다. |
| height | 픽셀 값 | 인라인 프레임의 높이를 지정합니다. |
| longdesc | URL | 프레임 내용에 대한 상세 설명이 담긴 문서의 URL입니다. |
| marginheight | 픽셀 값 | 프레임 테두리와 내용 사이의 위아래 여백을 픽셀 단위로 지정합니다. 예: marginheight="10" |
| marginwidth | 픽셀 값 | 프레임 내용과 좌우 여백 사이의 간격을 픽셀 단위로 지정합니다. |
| name | 텍스트 | 프레임의 이름을 지정합니다. |
| sandbox (HTML5) | "" allow-forms allow-same-origin allow-scripts allow-top-navigation | iframe 콘텐츠에 추가적인 보안 제한을 적용합니다. |
| scrolling | yes no auto | 스크롤바의 표시 여부와 동작 방식을 결정합니다. |
| seamless (HTML5) | seamless | iframe이 마치 포함된 문서의 일부인 것처럼 자연스럽게 보이도록 지정합니다. |
| src | URL | 프레임에 표시할 콘텐츠 파일의 위치(URL)입니다. |
| srcdoc (HTML5) | HTML 코드 | iframe 안에 직접 표시할 페이지의 HTML 콘텐츠를 지정합니다. |
| width | 픽셀 값 | 인라인 프레임의 너비를 지정합니다. |
참고: align, frameborder, scrolling 속성은 HTML5에서 더 이상 사용되지 않으므로(deprecated), 가급적 CSS를 사용해 스타일을 지정하는 것이 좋습니다.
예제
다음 코드를 실행하면 인라인 프레임을 만들어 볼 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML iframe Tag</title> </head> <body> <iframe src = "https://www.tutorialspoint.com/index.htm" width = "100%"></iframe> </body> </html>