logo

HTML 아이프레임

HTML Iframe은 중첩된 웹페이지(웹페이지 내의 웹페이지)를 표시하는 데 사용됩니다. HTML

HTML iframe은 직사각형 영역의 현재 HTML 문서 내에 다른 문서를 포함합니다.

웹페이지 콘텐츠와 iframe 콘텐츠는 JavaScript를 사용하여 서로 상호 작용할 수 있습니다.

자바 arraylist 메소드

Iframe 구문

HTML iframe은 다음과 같이 정의됩니다.

 <iframe src="URL"></iframe> 

여기서 'src' 속성은 인라인 프레임 페이지의 웹 주소(URL)를 지정합니다.

iframe의 너비와 높이 설정

'width' 및 'height' 속성을 사용하여 iframe의 너비와 높이를 설정할 수 있습니다. 기본적으로 속성 값은 픽셀 단위로 지정되지만 백분율로 설정할 수도 있습니다. 즉, 50%, 60% 등.

예: (픽셀)

 <h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
지금 테스트해보세요

예: (백분율)

 <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
지금 테스트해보세요

CSS를 사용하여 iframe의 높이와 너비를 설정할 수도 있습니다.

예:

 <h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
지금 테스트해보세요

iframe의 테두리 제거

기본적으로 iframe에는 주변에 테두리가 있습니다. 속성과 CSS 테두리 속성을 사용하여 테두리를 제거할 수 있습니다.

예:

 <h2>Remove the Iframe Border</h2> <p>This iframe example doesn&apos;t have any border</p> <iframe src="https://www.javatpoint.com/"></iframe> 
지금 테스트해보세요

iframe 테두리의 크기, 색상, 스타일을 변경할 수도 있습니다.

컴퓨터가 뭐야?

예:

 <h2>Custom Iframe Border</h2> <iframe src="https://www.javatpoint.com/"></iframe> 
지금 테스트해보세요

링크의 Iframe 타겟

iframe을 사용하여 링크의 대상 프레임을 설정할 수 있습니다. 링크의 지정된 대상 속성은 iframe의 이름 속성을 참조해야 합니다.

예:

 <h2>Iframe - Target for a Link</h2> <iframe src="new.html" name="iframe_a"></iframe> <p> <a href="https://www.javatpoint.com">JavaTpoint.com</a> </p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p> 
지금 테스트해보세요

산출

HTML 아이프레임

new.hmtl 출력 코드:

 p{ font-size: 50px; color: red;} <p>This is a link below the ifarme click on link to open new iframe. </p> 

iframe을 사용하여 YouTube 동영상 삽입

다음을 사용하여 웹페이지에 YouTube 동영상을 추가할 수도 있습니다.

다음은 웹페이지에 YouTube 비디오를 추가하는 몇 가지 단계입니다.

  • 삽입하려는 YouTube 동영상으로 이동하세요.
  • 동영상 아래에서 공유 ➦를 클릭하세요.
  • 삽입 옵션을 클릭하세요.
  • HTML 코드를 복사합니다.
  • HTML 파일에 코드를 붙여넣으세요.
  • 요구 사항에 따라 높이, 너비 및 기타 속성을 변경합니다.

예:

 <iframe src="https://www.youtube.com/embed/JHq3pL4cdy4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/O5hShUO6wxs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">></iframe> 
지금 테스트해보세요

산출:

자바의 str.substring
HTML 아이프레임

속성

속성 이름 설명
전체 화면 허용 true이면 해당 프레임을 전체 화면으로 열 수 있습니다.
픽셀 삽입된 iframe의 높이를 정의하며 기본 높이는 150px입니다.
이름 텍스트 iframe에 이름을 지정합니다. 한 프레임에 링크를 생성하려면 name 속성이 중요합니다.
틀경계 1 또는 0 iframe에 테두리가 있어야 하는지 여부를 정의합니다. (HTML5에서는 지원되지 않습니다).
너비 픽셀 포함된 프레임의 너비를 정의하며 기본 너비는 300px입니다.
소스 URL src 속성은 iframe에 로드할 콘텐츠의 경로 이름이나 파일 이름을 지정하는 데 사용됩니다.
모래 상자
이 속성은 프레임 내용에 대한 추가 제한을 적용하는 데 사용됩니다.
허용 양식 이 키워드를 사용하지 않으면 양식 제출이 허용되고 양식 제출이 차단됩니다.
팝업 허용 팝업이 활성화되며, 적용하지 않으면 팝업이 열리지 않습니다.
허용 스크립트 그러면 스크립트가 실행될 수 있습니다.
동일한 출처 허용 이 키워드를 사용하면 포함된 리소스가 동일한 소스에서 다운로드된 것으로 처리됩니다.
srcdoc srcdoc 속성은 인라인 iframe에 HTML 콘텐츠를 표시하는 데 사용됩니다. src 속성을 재정의합니다(브라우저가 지원하는 경우).
스크롤
이는 브라우저가 iframe에 스크롤 막대를 제공해야 하는지 여부를 나타냅니다. (HTML5에서는 지원되지 않음)
자동 스크롤바는 iframe의 콘텐츠가 크기보다 큰 경우에만 표시됩니다.
iframe에 대한 스크롤 막대를 항상 표시합니다.
아니요 iframe에 스크롤바를 표시하지 않습니다.