목차
<frameset> 예제 - 가로 3등분 프레임 <frameset> 정의 <frameset> 구문 <frameset> 선택속성 (HTML 4.01) <frameset> 표준속성 (HTML 4.01) <frameset> 이벤트속성 <frameset> 예제 - 가로 2등분 프레임 <frameset> 예제 - 주소고정
HTML5 지원 X
<frameset> 예제 - 가로 3등분 프레임
<frameset cols="25%,*,25%"> </frameset>
※ 양 사이드가 전체 가로 길이의 25%씩 차지하고, 나머지가 절반 차지
<frameset> 정의
<frameset> 태그는 하나 이상의 <frame> 태그를 포함하며, <frame> 태그는 개별 속성을 지닐 수 있음.
<frameset> 태그의 길이는 그 안에 얼마나 많은 열과 행의 내용이 있냐, 또, 가로 세로 길이에 따라 크기가 결정됨.
<frame> 태그를 포함하는 페이지를 만드려면, "HTML Frameset DTD"나 "XHTML Frameset DTD" 선언 해야 함.
<frameset> 태그 사용할 땐, <body> 태그 사용 X
2.
<frameset> 태그는 시작태그와 종료태그로 구성됨.
3.
MDN frameset 예제 보기
4. 주의사항
<frameset> 태그는 HTML5에서는 지원 X <frameset> 사용시, 전체화면 기능 작동 X (예: 유튜브, unitegallery 등)
<frameset> 구문
<frameset 속성='속성값'> <frame src="주소1"> <frame src="주소2">
...
</frameset>
<frameset> 선택속성 (HTML 4.01)
속성
속성값
쓰임새
비고
cols
px 단위
% 단위
* (이미 할당된 길이를 제외한 나머지 전부)
열의 크기나 개수
HTML5제외
rows
px 단위
% 단위
* (이미 할당된 길이를 제외한 나머지 전부)
행의 크기나 개수
HTML5제외
※ % 단위 이용하면 드래그로 프레임 크기 조절 가능. (첨부파일 frameset2 참고)
<frameset> 표준속성 (HTML 4.01)
속성
속성값
쓰임새
class
글자
클래스 선택자
id
글자
고유 아이디 선택자
style
스타일 속성
요소의 인라인 스타일 속성
title
글자
요소에 관한 설명 문구
<frameset> 이벤트속성
속성
속성값
쓰임새
onload
script 구문
문서가 열릴 때 작동하는 스크립트
onunload
script 구문
문서가 닫힐 때 작동하는 스크립트
<frameset> 예제 - 가로 2등분 프레임
index.php (메인)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>홈짱닷컴 (Homzzang.com)</title>
<link rel='stylesheet' href='style.css'>
</head>
<frameset id=' index ' cols="180,*" noresize>
<frame name="menu" id="menu" src="menu.php">
<frame name="main " id="main
</frameset>
</html>
※ main 영역은 home 뿐만 아니라 page1, page2도 불러와야 하므로 이름 통일 일부러 안 함.
menu.php (메뉴 페이지)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id='aside'>
<input type='button' onclick='resize_toggle ()' value='↔'> 홈짱닷컴
<div class='menu'>
<p><a href="home.php" target="main
<p><a href="page1.php" target="main
<p><a href="page2.php" target="main
</div>
</div>
<script>
function resize_toggle () {
var obj = parent.document.getElementById('index
if(obj.cols == '140,*') obj.cols='180,*';
else obj.cols='140,*';
}
</script>
</body>
home.php (메뉴1 페이지)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id='home'>
<h1>홈짱닷컴 Homzzang.com</h1>
<div class='banner'>
</div>
</body>
page1.php (메뉴2 페이지)
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel='stylesheet' href='style.css'>
</head>
<div id='page1'>
<h2>1. 코딩언어 강의</h2>
<ol>
<li>HTML</li>
<li>CSS</li> </ol>
<div>
</body>
page2.php (메뉴3 페이지)
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel='stylesheet' href='style.css'>
</head>
<div id='page2'>
<h2>2. 빌더서버 강의</h2>
<ol>
<li>그누보드5 (G5)</li>
<li>영카트5 (YC5)</li> </ol>
<div>
</body>
style.css (각 페이지 스타일)
@charset "utf-8";
html,body {height:100%;margin:0; padding:0}
html * {line-height:2.5}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#index {border:0px solid red;}
#aside {width:100%; padding:20px; height:100%; box-sizing:border-box; overflow:hidden; color:white; background:red;}
#aside input {cursor:pointer;}
#aside a {color:white;}
#home {height:100%; box-sizing:border-box; overflow:hidden; }
#home h1 {width:50%; margin:100px auto 0; text-align:center;}
#home .banner {border:1px dashed gray; width:50%; margin:20px auto; padding:30px; text-align:center;}
#page1,#page2 {padding:10px 30px 0;}
※ 제타위키 예제 참고
<frameset> 예제 - 주소고정
<?php
$LastModified = gmdate("D d M Y H:i:s", filemtime($_SERVER['SCRIPT_FILENAME']));
header("Last-Modified: $LastModified GMT");
header("ETag: \"$LastModified\"");
?>
<html>
<head>
<title>홈짱닷컴</title>
</head>
<frameset rows="0,*" border=0>
<frame src="blank.html" name="blank">
<frame src="https://homzzang.com/index.php" name="main">
</frameset>
</html>
