HTML의 프레임 태그

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

구문:

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

<frame src="URL">

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

언급했듯이 태그는

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

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

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

HTML의 프레임 태그 예

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

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

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

Frame1.html

코드:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 1 </h1>
</div>

Frame2.html

코드:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 2 </h1>
</div>

메인.html

코드:

<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>

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

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

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

Frame1.html

코드:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 1 </h1>
</div>

Frame2.html

코드:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 2 </h1>
</div>

Frame3.html

코드:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 3 </h1>
</div>

메인.html

코드:

<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>

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

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

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

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

메인.html

코드:

<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>

menu.html

코드:

<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>

<div class="results">
<h2 id="Menu"> Menu </h2>
<a href="frame1.html" target="frame"> Frame 1 </a>  
<a href="frame2.html" target="frame"> Frame 2 </a>  
<a href="frame3.html" target="frame"> Frame 3 </a>
</div>

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

출력:

참고: 태그는 HTML5에서 지원되지 않습니다. 대신

위 내용은 HTML의 프레임 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!