[HTML] 9. 아이프레임

Mar 06, 2025


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<hr />
<iframe src="https://www.youtube.com/embed/1sFsho4_cDw" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src="https://www.meta-coding.com" width="800px" height="400px"></iframe>
<iframe src="https://www.naver.com" width="800px" height="400px"></iframe>
</body>
</html>

1. iframe 기본 구조


<iframe src="URL" width="넓이" height="높이" frameborder="0"></iframe>

💡

src: 임베드할 외부 콘텐츠의 URL을 지정.

width, height: 아이프레임의 너비와 높이를 지정.

frameborder: 테두리 여부를 설정 (0이면 테두리가 없음).

allowfullscreen: 전체화면 모드를 허용하려면 이 속성을 사용.

주의 : YouTube 등 일부 사이트는 src URL에 embed 형태로 변환한 링크를 사용

💡

출력 결과

두 개의 외부 웹사이트인 메타코딩과 네이버가 페이지 내에서 임베드되어 표시.

주의 : 일부 웹사이트는 보안 정책에 따라 외부 페이지를 iframe으로 표시하지 못하게 제한할 수 있습니다.

HTML

[HTML] 9. 아이프레임

백하림

Mar 06, 2025


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<hr />
<iframe src="https://www.youtube.com/embed/1sFsho4_cDw" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src="https://www.meta-coding.com" width="800px" height="400px"></iframe>
<iframe src="https://www.naver.com" width="800px" height="400px"></iframe>
</body>
</html>

1. iframe 기본 구조


<iframe src="URL" width="넓이" height="높이" frameborder="0"></iframe>

💡

src: 임베드할 외부 콘텐츠의 URL을 지정.

width, height: 아이프레임의 너비와 높이를 지정.

frameborder: 테두리 여부를 설정 (0이면 테두리가 없음).

allowfullscreen: 전체화면 모드를 허용하려면 이 속성을 사용.

주의 : YouTube 등 일부 사이트는 src URL에 embed 형태로 변환한 링크를 사용

💡

출력 결과

두 개의 외부 웹사이트인 메타코딩과 네이버가 페이지 내에서 임베드되어 표시.

주의 : 일부 웹사이트는 보안 정책에 따라 외부 페이지를 iframe으로 표시하지 못하게 제한할 수 있습니다.