iframe 요소
iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
<iframe src="삽입할페이지주소"></iframe>iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다.
또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정된다.
<iframe src="삽입할페이지주소" style="width:120%; height:300px">
</iframe>iframe 요소의 테두리 변경
iframe 요소는 기본적으로 검정색 테두리(border)를 갖는다.
이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있다.
<iframe src="삽입할페이지주소" style="width:120%; height:300px; border: 3px dashed maroon">
</iframe>테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다.
<iframe src="삽입할페이지주소" style="width:120%; height:300px; border:none">
</iframe>iframe 요소의 페이지 변경하기
<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있다.
<a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있게 된다.
<iframe src="삽입할페이지주소" name="frame_target" style="width:100%; height:300px;"></iframe>
<p>
<a href="클릭하면 변경될 주소" target="frame_target">링크내용등등</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="삽입될 주소 경로1"/>
<frame name="center" src="삽입될 주소 경로2"/>
<frame name="right" src="삽입될 주소 경로3"/>
<noframes>
<body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>
</noframes>
</frameset>수평 프레임셋
수평 프레임셋은 하나의 브라우저 창을 가로 방향으로 분리하여 표현한다.
<frameset rows="20%,60%,20%">
<frame name="top" src="삽입될 주소 경로1" noresize="noresize" />
<frame name="center" src="삽입될 주소 경로2" noresize="noresize" />
<frame name="bottom" src="삽입될 주소 경로3" noresize="noresize" />
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
</body>
</noframes>
</frameset>위의 예제에서 frame 요소에 noresize 속성을 명시하였으므로, 사용자가 창의 크기를 조절할 수 없다.
'Language > HTML' 카테고리의 다른 글
| [HTML] HTML 레이아웃(Layout) (0) | 2022.09.17 |
|---|---|
| [HTML] iframe의 단점 (0) | 2022.09.17 |
| [HTML] HTML(block, inline) (1) | 2022.09.17 |
| [HTML] HTML 테이블(Table) (0) | 2022.09.16 |
| [HTML] HTML 리스트(List) (0) | 2022.09.16 |