집 >웹 프론트엔드 >HTML 튜토리얼 >HTML의 프레임 태그

HTML의 프레임 태그

王林원래의: 2024-09-04 16:32:031151검색

HTML 프레임 태그는 단일 웹페이지에 여러 사이트를 섹션 형태로 표시하는 데 사용됩니다. 이 태그를 사용하면 서로 다른 콘텐츠를 포함하는 여러 웹페이지를 결합하고 단일 웹페이지에 개별적으로 표시할 수 있도록 웹페이지를 디자인할 수 있습니다. 이는 단일 웹 페이지를 프레임이라고 부르는 여러 섹션으로 나누어 수행됩니다. 개별 프레임을 별도로 로드할 수 있습니다. 프레임 태그는 프레임세트 태그와 함께 사용됩니다. 여기서 프레임세트 태그는 컨테이너로 간주될 수 있으며, 그 안의 여러 프레임 태그는 여러 사이트를 나타냅니다.

구문:

프레임 태그의 기본 구문은 아래와 같습니다.

<frame src = "URL">

src 속성은 파일의 소스를 지정합니다. <프레임> 태그는 다른 속성을 지원하지만 src가 기본 속성입니다.

언급했듯이 태그는 꼬리표. 프레임세트는 각 프레임이 동일한 페이지에 로드될 개별 사이트를 나타내는 여러 프레임의 모음으로 간주될 수 있습니다. 프레임 태그는 아래와 같이 프레임셋 태그와 함께 사용됩니다.

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

frameset 태그에는 종료 태그가 있지만 프레임 태그에는 없습니다.

HTML의 프레임 태그 예

HTML의 프레임 태그 예는 다음과 같습니다.

예 #1 – 프레임을 수평으로 정렬

frame1,frame2,main 3개의 파일이 있습니다.

Frame1.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

메인.html

코드:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

출력: 여기서는 cols 속성을 사용하여 열로 지정했으며, 각 프레임의 너비는 50%로 설정했습니다.

HTML의 프레임 태그

예 #2 – 프레임을 수직으로 정렬

프레임1, 프레임2, 프레임3, 메인 4개의 파일이 있습니다.

Frame1.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Frame3.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

메인.html

코드:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

출력: 여기서 프레임셋 태그 위에 cols 속성을 사용하여 프레임을 가로로 나누었고 높이는 백분율로 언급되었습니다.

HTML의 프레임 태그

예 #3 – 링크를 사용하여 다른 프레임 탐색

이 예에서는 세 개의 파일, 프레임1.html, 프레임2.html, 프레임3.html이 동일합니다.

프레임 태그와 함께 이름 속성을 사용하겠습니다.

메인.html

코드:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

menu.html

코드:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

여기서 프레임셋 태그에서는 두 개의 프레임을 첫 번째 프레임의 30% 너비와 두 번째 프레임의 나머지 전체 너비로 나누었습니다. 첫 번째 프레임에는 하이퍼링크 형태로 메뉴가 나열됩니다. 두 번째 프레임에는 이름을 지정하고 menu.html에서 모든 링크의 프레임 이름으로 대상을 설정했습니다. 따라서 이 링크가 프레임을 지시하고 내용이 동일한 프레임에 표시됩니다.

출력:

HTML의 프레임 태그

참고: <프레임> 태그는 HTML5에서 지원되지 않습니다. 대신