iframe 태그
iframe 태그는 한 사이트의 콘텐츠를 다른 사이트에 삽입할 수 있게 해줍니다. 새 창이나 탭을 열지 않고도 비디오, 이미지, 글과 같은 콘텐츠를 표시하는 데 사용됩니다.
삽입된 사이트의 콘텐츠는 해당 사이트 자체의 디자인을 유지합니다. 따라서 우리 사이트의 CSS 스타일이나 JavaScript 코드는 iframe 태그 내부의 콘텐츠에 영향을 미치지 않습니다.
iframe의 콘텐츠에 우리의 JavaScript를 적용하려면 특별한 방법을 사용해야 합니다.
iframe 태그는 YouTube 등의 플랫폼에서 비디오를 삽입하거나, 다른 출처의 글과 이미지를 표시하는 등 웹사이트에서 널리 사용됩니다.
속성
| 속성 | 설명 |
|---|---|
src |
삽입할 페이지의 주소를 지정합니다. |
srcdoc |
속성 내에서 직접 iframe의 콘텐츠를 정의할 수 있습니다. |
frameborder |
iframe 주변의 테두리를 설정합니다.
값 yes는 테두리를 설정하고(기본값),
값 no는 테두리를 제거합니다.
|
scrolling |
iframe 내부의 스크롤바를 설정합니다.
값 auto - 필요 시 스크롤(기본값),
값 yes - 항상 스크롤 표시,
값 no - 스크롤 없음.
|
예제
우리 사이트에 다른 사이트(예를 들어 code.mu)의 iframe을 삽입해 보겠습니다:
<iframe src="https://code.mu/" width="600" height="400"></iframe>
:
예제
우리 사이트에 YouTube 비디오를 삽입하겠습니다:
<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
:
예제
iframe에 직접 콘텐츠를 작성해 보겠습니다:
<iframe
srcdoc="<h1>제목</h1><p>텍스트</p>"
width="300"
height="200">
</iframe>
:
