HTML의 <frame> 태그는 프레임을 생성하는 데 사용되며, <frameset> 내부에서 하나의 창(윈도우) 프레임을 정의합니다. 하나의 브라우저 화면을 여러 개의 독립적인 영역으로 나누어, 각 영역에 서로 다른 문서를 표시할 수 있게 해주는 태그입니다.
참고: <frame> 태그는 HTML5에서 더 이상 지원되지 않는(deprecated) 요소입니다. 최신 웹 표준에서는 <iframe>이나 CSS 레이아웃 기법을 사용하는 것이 권장됩니다.
<frame> 태그의 주요 속성
| 속성 | 설명 |
|---|---|
| frameborder | 프레임 주위에 테두리를 표시할지 여부를 지정합니다. |
| longdesc | 프레임 내용에 대한 긴 설명이 담긴 페이지의 URL을 지정합니다. |
| marginheight | 프레임의 위쪽과 아래쪽 여백을 설정합니다. |
| marginwidth | 프레임의 왼쪽과 오른쪽 여백을 설정합니다. |
| name | 프레임의 이름을 지정합니다. |
| noresize | 사용자가 프레임 크기를 조절하지 못하도록 합니다. |
| scrolling | 프레임 내부에 스크롤바를 표시할지 여부를 결정합니다. |
| src | 프레임 안에 표시할 문서의 URL을 지정합니다. |
예제 코드
이제 실제 예제를 통해 <frame> 태그를 구현하는 방법을 살펴보겠습니다.
<!DOCTYPE html> <html> <frameset cols="30%,30%,20%,20%"> <frame src="https://www.tutorialspoint.com/codingground.htm"> <frame src="https://store.tutorialspoint.com/"> <frame src="https://www.tutorialspoint.com/tutorialslibrary.htm"> <frame src="https://www.tutorialspoint.com/programming_examples/"> </frameset> </html>
실행 결과
위 코드를 실행하면 각각의 프레임에 서로 다른 페이지가 개별적으로 표시되는 결과를 확인할 수 있습니다.
코드 분석
위 예제에서는 하나의 frameset 안에 총 네 개의 프레임이 포함되어 있습니다.
<frameset cols="30%,30%,20%,20%"> <frame src="https://www.tutorialspoint.com/codingground.htm"> <frame src="https://store.tutorialspoint.com/"> <frame src="https://www.tutorialspoint.com/tutorialslibrary.htm"> <frame src="https://www.tutorialspoint.com/programming_examples/"> </frameset>
cols 속성에 지정된 백분율 값에 따라, 각 프레임은 frameset 내부에서 다음과 같이 화면을 나누어 가집니다.
frameset cols="30%,30%,20%,20%">
즉, 첫 번째와 두 번째 프레임은 전체 너비의 30%씩 차지하고, 세 번째와 네 번째 프레임은 각각 20%씩 차지하게 됩니다. 이처럼 <frameset>의 cols 또는 rows 속성을 활용하면 화면을 원하는 비율로 자유롭게 분할할 수 있습니다.