frame 요소
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>
프레임셋(frameset)
프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있습니다.
이러한 프레임셋은 iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있습니다.
또한, noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절할 수 있습니다.
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>위의 예제는 frame 요소에 noresize 속성을 명시하였으므로, 사용자가 창의 크기를 조절할 수 없습니다.
https://www.tcpschool.com/html/html_space_framesIframes
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Frame</title>
</head>
<body>
<a href="연습문제1.html" target="frame_abc">연습문제1</a>
<a href="연습문제2.html" target="frame_abc">연습문제2</a>
<a href="연습문제3.html" target="frame_abc">연습문제3</a>
<a href="연습문제4.html" target="frame_abc">연습문제4</a>
<a href="연습문제5.html" target="frame_abc">연습문제5</a>
<hr>
<iframe src="" name="frame_abc" style="width:70%; height:600px; border:none"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Frame</title>
</head>
<frameset cols="25%,*">
<frame name="left" src="test19.html"></frame>
<frame name="right" src="test19.html">
<nonframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다.
</body>
</nonframes>
</frameset>
</html>
'HTML' 카테고리의 다른 글
| HTML(CSS연습문제)_2024-07-05 (2) | 2024.07.05 |
|---|---|
| HTML(link_태그의 rel 속성)_2024-07-04 (0) | 2024.07.04 |
| HTML(블록과 인라인)_2024-07-03 (2) | 2024.07.03 |
| HTML(연습문제)_2024-07-03 (0) | 2024.07.03 |
| HTML(이미지)_2024-07-02 (0) | 2024.07.02 |
