HTML / (36) iframes

■ 요약

▶ HTML <iframe> 태그는 inline 프레임을 지정한다.

▶ "src" 속성은 삽입된 페이지의 URL를 정의한다.

▶ 항상 "title" 속성을 포함해야 한다. (스크린 리더기를 위해)

▶ "height"과 "width" 속성은 iframe의 크기를 지정한다.

▶ "border:none;"을 추가하여 iframe의 둘러싸인 테두리를 제거한다.

 

▶ HTML iframe은 웹 페이지 안에 웹 페이지를 표시하는 데 사용된다.

 

■ HTML iframe 구문

▶ HTML <iframe> 태그는 inline 프레임을 지정한다.

▶ inline 프레임은 현재 HTML 문서 안에 다른 문서를 삽입하는 데 사용한다.

<iframe src="url" title="description"></iframe>

 

※ 항상 <iframe>에 <title> 속성을 포함하는 것이 좋다.

※ 스크린 리더에서 iframe의 내용을 읽는 데 사용된다.

 

■ iframe - 너비와 높이 설정

▶ "height"과 "width" 속성을 사용하여 iframe의 크기를 지정한다.

▶ 높이와 너비는 기본적으로 픽셀로 지정한다.

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width 

 

▶ 또는 "style" 속성 추가하고 CSS "height"와 "width" 속성을 사용할 수 있다.

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

 

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width_css 

 

■ iframe - 테두리 지우기

▶ 기본적으로 iframe은 테두리를 둘러싼다.

▶ 테두리를 없애려면 "style" 속성을 추가하고 CSS "border" 속성을 사용한다.

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_frameborder 

 

▶ CSS를 사용하면 iframe 테두리 크기, 스타일 및 색상을 변경할 수 있다.

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_border2 

 

■ iframe - 링크 대상

▶ iframe은 링크에 대상 프레임으로 사용할 수 있다.

▶ 링크의 "target" 속성은 iframe의 "name" 속성을 참조해야 한다.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target 

 

출처 : https://www.w3schools.com/html/html_iframe.asp

HTML Iframes