반응형
Iframe(inline frame) 요소
- iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
<iframe src="삽입할페이지주소" width="넓이" height="높이"
title="아이프레임 제목" name="링크대상이름" scrolling="스크롤바"></iframe><iframe src="https://www.google.com/" style="width:100%; height:300px">
</iframe>테두리 변경
- iframe 은 기본적으로 검정색 테두리를 가지지만, style의 border 속성을 이용하면 변경할 수 있다.
<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon"></iframe>
<iframe src="/css/intro" style="width:100%; height:300px; border:none"></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)
- 프레임셋은 iframe과는 달리 하나의 브라우저 창에 하나 이상의 페이지를 동시에 표현할 수 있다.
- frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않으므로, iframe이나 CSS를 이용하여 표현해야 한다.
수직 프레임셋 - 세로 방향으로 분리
<frameset cols="5%,*,5%">
<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>- noresize 속성을 명시하지 않으면 사용자가 마음대로 페이지의 크기를 조절할 수 있다.
- 프레임셋에서 각각의 페이지는 frame 요소로 표현되는데, iframe과는 달리 종료 태그를 가지지 않는다.
- noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장한다.
Reference
반응형
'Language > Html' 카테고리의 다른 글
| HTML 핵심 개념 문법 한 장 정리 - 링크, 텍스트, 리스트, 폼, 멀티미디어 (0) | 2023.10.03 |
|---|---|
| [Html] Css, Javascript, Xhtml 적용하기 (0) | 2023.06.19 |
| [Html] 공간 분할 방법 - 블록/인라인 (0) | 2023.06.19 |
| [Html] 그래픽 요소 - Canvas와 SVG (0) | 2023.06.19 |
| [Html] 멀티미디어 비디오 - 썸네일, 자막 (0) | 2023.06.19 |