찾다

HTML 프레임셋 태그

Sep 04, 2024 pm 04:30 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

HTML의 태그는 여러 프레임을 결합하여 단일 웹 페이지로 표시합니다. 이 문서는 프레임세트에 포함된 모든 프레임으로 구성됩니다. 프레임은 개별 창이나 웹사이트와 유사할 뿐입니다. 프레임셋 태그를 사용하면 여러 열이나 행을 구성하고 그 아래에 프레임을 포함할 수 있습니다. 이 기능은 HTML 5 이전에도 제공되었으며 다양한 문서를 결합하여 한 번에 표시하는 데 유용합니다. 각 프레임에는 해당 내용이 포함될 수 있습니다. 일반적으로 HTML이나 이미지와 같은 다른 웹 파일입니다.

구문

여기서 시작 태그는

이라는 종료 태그로 끝납니다. 태그에는 하나 이상의 여러 프레임 태그가 포함될 수 있습니다. 각 프레임 태그는 속성 이름이 "src"인 태그로 프레임 내용을 전달합니다. 소개한 대로 이 콘텐츠는 HTML이나 전달 이미지 등 웹 파일과 같은 것이 될 수 있습니다.
<frameset cols rows=", , , ">
<frame src="source%20file%20name.%20.%20.%20">
. . . . . .
. . . . . .
<frame src="source%20file%20name.%20.%20.%20">
</frameset>

여기에는 열 또는 행 속성이 포함된 시작 태그 프레임세트가 있습니다. 일반적으로 프레임세트 태그는 여러 프레임을 결합하는 데 사용되므로 이 두 속성은 프레임세트 태그와 함께 사용됩니다. 이러한 태그는 다양한 프레임을 배치하기 위해 행이나 열을 형성하는 데만 사용됩니다. 그러면 간단한 프레임 태그가 시작 태그 뒤에 옵니다. 프레임에 파일을 표시하려면 프레임 태그에 "src" 속성을 사용하고 파일 이름을 값으로 전달합니다. 우리는 점을 사용하여 단일 프레임이 여러 프레임을 포함할 수 있음을 보여주었습니다. 그리고 마지막으로 태그를 닫아 프레임셋 태그를 닫습니다.

프레임셋 태그 속성

아래는 프레임셋 태그가 지원하는 속성 목록입니다.

1. cols: 이 속성은 프레임을 내부에 배치하는 데 사용됩니다. cols 속성은 프레임세트를 여러 열로 나누어 프레임을 수직으로 표시합니다. 이 속성을 사용하면 프레임세트의 각 열 너비를 설정할 수도 있습니다. 이 속성에 값을 전달하여 각 프레임에 대해 서로 다른 값을 설정할 수 있습니다. 값은 백분율, 픽셀 또는 상대 길이로 전달될 수 있습니다. 이 속성의 기본값은 100%입니다.

2. 행: 이 속성은 cols 속성과도 유사합니다. 행 속성은 프레임세트를 여러 행으로 나누고 프레임이 가로로 하나씩 표시됩니다. cols 속성과 유사한 값을 전달하여 각 프레임의 높이를 설정할 수 있습니다. 행과 열을 모두 사용하면 원하는 결과를 얻을 수 있습니다. 이 속성의 기본값도 100%입니다.

3. border: 이 속성은 프레임세트 태그에 사용되어 프레임세트에 있는 각 프레임의 너비를 정의합니다.

4. 프레임 간격: 프레임 세트 태그는 "프레임 간격" 속성을 사용하여 내부 프레임 사이의 간격을 설정합니다.

HTML 프레임셋 태그 구현 예시

다음은 HTML 프레임세트 태그의 예입니다.

예시 #1

하나의 상위 창에서 서로 다른 파일을 프레임으로 사용하므로 여러 HTML 파일이 포함되어 있습니다.

코드:

메인 파일:



<title> frameset tag in HTML </title>
<style>
</style>

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

프레임 1이라는 단일 소스 파일이 있습니다.

frame1.html:



<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>


<h2 id="Example-of-Frameset-tag"> Example of Frameset tag </h2>
<h1 id="Frame"> Frame 1 </h1>

출력:

단일 프레임에 파일이 하나만 포함되어 있으므로 페이지에는 프레임.html의 내용이 전체적으로 표시됩니다. 프레임의 너비와 높이는 기본적으로 100%입니다. 그렇기 때문에 하나의 프레임이 모든 영역을 차지하게 됩니다.

HTML 프레임셋 태그

예시 #2

예제에 프레임을 하나 더 추가하고 cols 속성을 사용하여 열별로 나누고 값을 백분율로 전달해 보겠습니다.

코드:

frame2.html:



<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>

<h2 id="Hello-World"> Hello World..! </h2>
<h1 id="Frame"> Frame 2 </h1>

메인 파일:



<title> frameset tag in HTML </title>
<style>
</style>

<frameset cols="40% , 60 %">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>

출력:

여기에서는 두 개의 프레임을 전달하고 40%와 60%로 값이 전달된 cols 속성을 사용하여 분할했습니다. 첫 번째 프레임의 너비를 40%, 두 번째 프레임의 너비를 60%로 만듭니다.

HTML 프레임셋 태그

예시 #3

row 속성을 이용하여 동일한 프레임을 가로로 나누어 보겠습니다. 동일한 마지막 예를 수정하겠습니다. 차이점은 행 속성이 cols 속성을 대체한다는 것입니다. 행 속성도 cols 속성과 유사한 값을 갖습니다. 프레임 수에 따라 여러 값을 전달할 수 있습니다.

코드:

메인 파일:



<title> frameset tag in HTML </title>
<style>
</style>

<frameset rows="50% , 50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>

출력:

여기서 출력은 높이가 50%인 두 개의 수평 프레임입니다. 이 높이는 실제 브라우저 창과 일치합니다.

HTML 프레임셋 태그

결론

HTML의 프레임셋 태그와 그 용도, 활용 방법에 대해 알아봤습니다. 이 태그는 여러 프레임을 하나의 디스플레이 창에 병합하여 표시하는 것을 목표로 합니다. 사용 가능한 속성을 사용하여 프레임의 위치와 크기를 정의할 수도 있습니다. 이 태그는 HTML 5부터 더 이상 사용되지 않습니다.

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

 태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까? 태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

html in Action : 웹 사이트 구조의 예html in Action : 웹 사이트 구조의 예May 05, 2025 am 12:03 AM

HTML은 명확한 구조를 가진 웹 사이트를 구축하는 데 사용됩니다. 1) 태그를 사용하여 웹 사이트 구조를 정의하십시오. 2) 예는 블로그 및 전자 상거래 웹 사이트의 구조를 보여줍니다. 3) 잘못된 레이블 중첩과 같은 일반적인 실수를 피하십시오. 4) HTTP 요청을 줄이고 시맨틱 태그를 사용하여 성능을 최적화합니다.

HTML 페이지에 이미지를 어떻게 삽입합니까?HTML 페이지에 이미지를 어떻게 삽입합니까?May 04, 2025 am 12:02 AM

TOINSERTANIMAGEINTOANHTMLPAGE, USETHETAGWITHSRCANDALTATTRIBUTES.1) USEALTTEXTFORACCESSIBLEANDSEO.2) AMPLEMESSRCSETFORRESPONSIVEIMAGES.3) ApplyLazyLoadingWithLoading = "Lazy"TOOPTIMIZEPEROUCTION.4) OPTIMIZEPEPERCESIVEIMAGES

HTML의 목적 : 웹 브라우저가 컨텐츠를 표시 할 수 있도록합니다HTML의 목적 : 웹 브라우저가 컨텐츠를 표시 할 수 있도록합니다May 03, 2025 am 12:03 AM

HTML의 핵심 목적은 브라우저가 웹 컨텐츠를 이해하고 표시 할 수 있도록하는 것입니다. 1. HTML은 TO 등과 같은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의합니다. 2. HTML5는 멀티미디어 지원을 향상시키고 소개 및 태그를 향상시킵니다. 3.html은 사용자 상호 작용을 지원하기위한 양식 요소를 제공합니다. 4. HTML 코드를 최적화하면 HTTP 요청 감소 및 HTML 압축과 같은 웹 페이지 성능이 향상 될 수 있습니다.

HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구