공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

iframe 태그

serpiko 2013. 10. 29. 16:02

iframe 태그 : 이 태그는 문서내에 다른 문서를 불러오는 태그로 frame 태그와 달리 폭(width)과 높이(height) 속성을 사용할 수 있는 태그입니다. 페이지내에 다른 페이지를 감쪽같이 혹은 특별하개 삽입할 수도 있고 한 페이지내에 여러개의 문서를 표시할 수도 있기 때문에 홈페이지에 많이 쓰이는 아주 유용한 태그입니다. <iframe>~</iframe>태그를 잘 이용하면 홈을 꾸미는데 많은 도움이 될 것입니다. 다음과 같은 속성이 있습니다.

src

문서에 삽입할 페이지를 불러옵니다.
<iframe src="불러올 문서(주소)"> 
예) <iframe src="ifrme_01.html">

name

프레임의 이름을 지정합니다. 이 속성은 연결된 또 다른 하이퍼 텍스트 문서를 이름을 지정한 프레임에 불러올때 사용합니다. 문서이름은 적당히 지정하면 됩니다. 
<iframe name="문서이름"> 예) <iframe name="frame">

frameborder

프레임의 경계선(테두리) 표시 여부를 결정합니다 다음과 같은 옵션을 사용합니다
테두리를 표시하려면 frameborder="숫자"
테두리를 표시하지 않으려면 frameborder="0" 
<iframe frameborder="1"> <iframe frameborder="0">

bordercolor

색상코드를 사용해 프레임의 테두리색을 표시합니다 
<iframe bordercolor="black">

scrolling

프레임의 스크롤바(이동줄) 표시여부를 결정해 줍니다. 옵션으로는 yes(스크롤바표시), no(스크롤바표시안함), auto(자동)를 사용하고 기본값은 auto 입니다.
<iframe scrolling="auto">

width
height

프레임의 폭(width)과 높이(height)를 지정합니다.
<iframe width="300" height="200">

marginwidth
marginheight

프레임과 프레임안에 들어온 문서의 좌,우 여백(marginwidth)과 상,하(marginheight)여백을 지정합니다. .
<iframe marginwidth="20" marginheight="25">

style

스타일 속성을 직접 기입하여 지정합니다..
<iframe src="parent_ex2.html" style="border:2 solid blue">



 예제보기 1

<html>
<head>
<title>iframe 태그</title>
</head>
<body>
<iframe src="iframe01.html" frameborder="1" scorlling="auto" width=550 height=200>
</iframe>
</body>
</html>


 실행결과 1

현재의 페이지에 iframe01.html 이라는 문서를 불러들인 결과입니다.


 예제보기 2

<html>
<head>
<title>iframe 태그</title>
</head>
<body>
<iframe src="iframe01.html" frameborder="0" scrolling="no" width=500 height=200>
</iframe>
</body>
</html>


 실행결과 2

불러들인 프레임에서 frameborder 와 scorlling 을 없앤 결과입니다





출처 : http://dsk114.com.ne.kr/

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

canvas의 속성제어와 context 선언 - 동시에 처리하기  (0) 2013.11.04
<meta http-equiv="refresh"> HTML 자동 갱신하기  (0) 2013.10.31
라디오버튼  (0) 2013.10.21
다이어그램 - GoJS (Diagram)  (0) 2013.10.14
snow Effect  (0) 2013.10.14
댓글