[HTML] HTML - 15. iframe 요소
어느덧 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