HTML 공간 분할-2
iframe 요소
iframe 요소
-
iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.<iframe src="삽입할페이지주소"></iframe> -
iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다.
또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정된다.<iframe src="/css/intro" style="width:100%; height:300px"> </iframe>
iframe 요소의 테두리 변경
-
iframe 요소는 기본적으로 검정색 테두리(border)를 가진다.
이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있다.<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon"> </iframe>
-
테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다.
<iframe src="/css/intro" style="width:100%; height:300px; border:none"> </iframe>
iframe 요소의 페이지 변경하기
-
<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다.
<a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면,<a>태그를 통해 iframe 요소의 페이지를 변경할 수 있게 된다.<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe> <p> <a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a> </p>
프레임셋(frameset)
-
프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있다.
이러한 프레임셋은 iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있다. -
또한, noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절할 수 있다.
프레임셋에서 각각의 페이지는 frame 요소로 표현된다.
frame 요소는 iframe 요소와는 달리 종료 태그를 가지지 않는다.
noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장한다. -
frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않는다. 💢
(음.. 그럼 알아둘 필요가 있는 것일까?)
따라서 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소를 사용하거나 CSS를 이용하여 표현해야 한다.
수직 프레임셋
-
수직 프레임셋은 하나의 브라우저 창을 세로 방향으로 분리하여 표현한다.
<frameset cols="25%,*,25%"> <frame name="left" src="/html/intro"/> <frame name="center" src="/css/intro"/> <frame name="right" src="/php/intro"/> <noframes> <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body> </noframes> </frameset>
수평 프레임셋
-
수평 프레임셋은 하나의 브라우저 창을 가로 방향으로 분리하여 표현한다.
<frameset rows="20%,60%,20%"> <frame name="top" src="/html/intro" noresize="noresize" /> <frame name="center" src="/css/intro" noresize="noresize" /> <frame name="bottom" src="/php/intro" noresize="noresize" /> <noframes> <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body> </noframes> </frameset>
