HTML iframes

프로그래밍

offfff 2016. 9. 8. 09:00

HTML Iframes

iframe은 웹페이지 안에 웹페이지를 출력하는데 사용된다.

Iframes Syntax

HTML iframe은 <iframe> 태그로 정의된다.

src 속성에 웹페이지의 주소를 값으로 적는다.

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

Iframes - Set Height and Width

height와 width 속성을 사용해서 ifame의 높이와 폭을 결정할 수 있다.

속성값은 기본적으로 픽셀단위로 취급되고, %단위도 사용할 수 있다.

<!DOCTYPE html>

<html>

<body>

<ifame src="http://dk-projects.tistory.com" height="100%" width="300"></iframe>

</body>

</html>

Iframes - Remove the Border

기본적으로 iframe은 테두리를 가지고 있다.

테두리를 없애고 싶으면, style 속성을 추가하거나 CSS border 속성을 사용해서 없앨 수 있다.

<!DOCTYPE html>

<html>

<body>

<ifame src="http://dk-projects.tistory.com" style="border:none;"></iframe>

</body>

</html>

Iframes - Target for a Link

링크를 클릭했을 때, 새 창이나 탭에서 열거나, 현재 페이지에서 해당 주소로 이동하게 된다.

그런데 iframe을 사용하면, 링크를 클릭했을 때, 프레임에서 해당 주소 페이지를 띄우도록 할 수 있다.

링크의 target 속성과 iframe의 name 속성을 응용하면 된다.

<!DOCTYPE html>

<html>

<body>

<ifame src="http://dk-projects.tistory.com" name="iframe_a"></iframe>

<p><a href="www.naver.com" target="iframe_a">네이버 열기</a></p>

<p><a href="http://dk-projects.tistory.com" target="iframe_a">블로그 열기</a></p>

</body>

</html>

아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_iframe.asp