[HTML] HTML - 15. iframe 요소

728x90

어느덧 HTML이 중간단계쯤 까지 온것 같습니다.

이번 시간에는 HTM에서 다른 웹페이지를

삽입하는 방법을 알아보도록 하겠습니다.

iframe 요소

HTML에서 iframe이라는 요소는

inline frame의 약자로 iframe 요소를 이용해

해당 웹 페이지 안에 어떠한 제한 없이

또 다른 하나의 웹 페이지를

삽입할 수 있습니다.

<iframe src="삽입할 페이지의 주소"></iframe>

iframe 요소는 frame 요소와는 달리 종료 태그가

존재합니다. 또한. iframe 요소는 명시된 크기로

삽입되는 창의 크기가 고정되는 요소입니다.

<iframe src="http://www.tcpschool.com/html/html_space_framesIframes" style="width:100%;height:1200px">
</iframe>

iframe 요소의 테두리 변경

iframe 요소에는 기본적으로 검정색의

테투리(border)를 가집니다.

이러한 테두리의 스타일은 style 속성에서

border 속성을 이용해 변경할 수 있습니다.

<iframe src="http://www.tcpschool.com/html/html_space_framesIframes" 
style="width:100%;height:1200px;border: 3px solid cadetblue">

</iframe>

테두리를 표현하고 싶지 않다면 style 속성에

border 속성값을 none으로 설정합니다.

 <iframe src="http://www.tcpschool.com/html/html_space_framesIframes" 
 style="width:100%;height:1200px;border:none">
 </iframe>

iframe 요소 페이지 변경하기

<a>태그를 이용해 iframe 요소의 최초 페이지를

중간에 변경할 수 있습니다.

<a>태그의 target 속성과 iframe 요소의

name 속성을 연결하면

<a>태그를 통해 iframe 요소의 페이지를

변경할 수 있습니다.

<iframe src="http://www.tcpschool.com/css/intro" name="frame_target" style="width:100%;height:800px;"></iframe>
<p>
   <a href="http://www.tcpschool.com/css/css_intro_basic" target="frame_target">CSS 기초문서로 이동</a>
</p>

프레임셋(frameset)

프레임셋(frameset)을 이용하면 하나의

브라우저 창에 둘 이상의 페이지를

표시할 수 있습니다.

이러한 프레임셋은 iframe 요소와는 달리

하나 이상의 페이지를 동시에 가질 수 있습니다.

또, noresize 속성을 명시하지 않으면

사용자가 마음대로 페이지의 크기를

조절할 수 있습니다.

프레임셋에서 각각의 페이지는

frame 요소로 표현됩니다.

frame 요소는 iframe 요소와 달리

종료 태그를 가지지 않습니다.

noframes 요소는 해당 브라우저가

frame 요소를 지원하지 않을 때

보여지는 문자열을 저장합니다.

수직 프레임셋

수직 프레임셋은 하나의 브라우저 창을

세로 방향으로 분리해 표현합니다.

<frameset  cols="25%,*,25%">
   <frame name="left" src="http://www.tcpschool.com/css/intro">
   <frame name="center" src="http://www.tcpschool.com/css/intro">
   <frame name="right" src="http://www.tcpschool.com/css/intro">     
<noframes>
   <body> 이브라우저는 frame 태그를 지원하지 않습니다.</body>
</noframes>
</frameset>

수평 프레임셋

수평 프레임셋은 하나의 브라우저 창을

가로 방향으로 표현합니다.

<frameset rows="20%,60%,20%">
   <frame name="top" src="http://www.tcpschool.com/css/intro" noresize="noresize"/>
   <frame name="center" src="http://www.tcpschool.com/css/intro" noresize="noresize"/>
   <frame name="bottom" src="http://www.tcpschool.com/css/intro" noresize="noresize"/>
   <noframes>
    <body>
        이 브라우저는 frame 태그를 지원하지 않습니다.
    </body>
  </noframes>
</frameset>

웨 예제는 frame 요소안에 noresize 속성을 명시함으로써

사용자가 창의 크기를 조절할 수 가 없습니다.

참고자료

GitHub - Koras02/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to Koras02/html-study development by creating an account on GitHub.

github.com

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

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

[HTML] HTML - 16.레이아웃 (0)	2023.01.18
[HTML] HTML - 14.블록과 인라인 (0)	2023.01.12
[HTML] HTML - 13.리스트와 테이블 (0)	2023.01.10