offfff

HTML iframes 본문

프로그래밍

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>

<ifame src="http://dk-projects.tistory.com" style="border:2px solid grey;"></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

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 헤더(HTML Head)  (0) 2016.09.10
HTML 자바스크립트(HTML JavaScript)  (0) 2016.09.09
HTML Classes  (0) 2016.09.07
HTML 블록(HTML Blocks)  (0) 2016.09.06
HTML 리스트(HTML Lists)  (0) 2016.09.05
'프로그래밍' Related Articles more