Front/HTML

[HTML4] iframe, frameset, frame 태그

시월해 2021. 4. 20. 17:11

* iframe 태그 : 내부 프레임(inline frame) 이라는 의미로 하나의 html문서 내부에 다른 html문서를
보여주고자 할때 사용하는 태그.


* iframe 태그 속성
- src : iframe에 삽입될 문서의 주소
- width : iframe에 너비 지정(px or %)
- height : iframe에 높이 지정(px or %)
- scrolling : iframe에 스크롤바 설정 유무를 지정.==> yes(스크롤바 설치),no(스크롤바 없애), auto(자동)
- frameborder : iframe의 테두리를 표시할지 여부 선택.==> 1(테두리가 있음), 0(테두리가 없음)

 


<iframe 예제>

<title>Insert title here</title>
</head>
<body>
 <iframe src="Ex11.html" width="70%" height="600" scrolling="auto" frameborder="1"></iframe>
</body>
</html>

iframe 안에 html 문서가 나타난 것을 볼 수 있다.


 

* frameset 태그
- 여러 개의 html문서를 동시에 한 화면에 나타날 수 있게 하는 태그.
주의) 반드시 body태그 밖에서 설정을 해야 함.


* frameset 태그 속성
- cols : 수직으로 나누고자 하는 프레임의 크기를 픽셀이나 비율(%)를 이용하여 순서대로 지정함.
- rows : 수평으로 나누고자 하는 프레임의 크기를 픽셀이나 비율(%)를 이용하여 순서대로 지정함.
- frameborder : 프레임을 나눈 경계선의 두께를 지정하는데 "0"으로 설정 시 경계선이 사라짐. 

* frame 태그 속성
- src : 해당 프레임에서 보여줄 문서의 경로와 파일 이름을 지정.
- name : 해당 프레임의 이름을 지정할 때 사용하는데 주로 링크 시 target의 대상이 됨.
- scrolling : frame에 스크롤바 설정 유무를 지정.==> yes(스크롤바 설치),no(스크롤바 없애), auto(자동)


<frameset 예제>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<frameset cols="30%, *">
	<frame src="Ex21.html" name="left"/>
	<frame name="right"/>
</frameset>
<body>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>내용</h2>
	<hr>
	
	<a href="Ex11.html" target="right">예제 11</a> <br>
	<a href="Ex17.html" target="right">예제 17</a> <br>
	<a href="http://www.nate.com" target="right">네이트</a> <br>
	
</body>
</html>

Ex20.html 파일에 Ex21.html 파일을 불러온 것.

왼쪽과 오른쪽 프레임으로 나누어 나타나는 것을 볼 수 있다.