HTML에서 하나의 브라우저 창을 여러 개의 프레임으로 나누어 각기 다른 문서를 동시에 표시하려면 <frameset> 태그를 사용합니다. 이 태그는 창을 행(row) 또는 열(column) 단위로 분할하고, 분할된 각 영역에 <frame> 요소를 배치하는 방식으로 동작합니다.
HTML5 지원 중단 안내
주의: <frameset> 태그는 HTML5 표준에서 제외되었으며, 최신 브라우저에서는 더 이상 지원되지 않습니다. 따라서 새로운 프로젝트에서는 사용하지 않는 것이 좋습니다. 대신 <iframe>이나 CSS Flexbox, Grid 레이아웃을 활용하면 유사한 화면 구성을 더 안전하게 구현할 수 있습니다.
<frameset> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| cols | 열 크기 | 열(column)의 개수와 너비를 픽셀(px), 백분율(%), 상대 길이(*) 중 하나로 지정합니다. 기본값은 100%입니다. |
| rows | 행 크기 | 행(row)의 개수와 높이를 픽셀(px), 백분율(%), 상대 길이(*) 중 하나로 지정합니다. 기본값은 100%입니다. |
사용 예제
다음 코드를 실행하면 <frameset> 태그를 사용해 두 개의 열로 나뉜 프레임 세트를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML frameset Tag</title>
</head>
<frameset cols = "300, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>
브라우저가 프레임을 지원하지 않습니다.
</body>
</noframes>
</frameset>
</html>
코드 설명
- cols = "300, *" : 첫 번째 열은 300픽셀의 고정 폭으로, 두 번째 열은 남은 공간 전체(*)를 차지하도록 설정합니다.
- <frame src="..."> : 각 프레임에 표시할 문서의 경로를 지정합니다.
- <noframes> : 프레임을 지원하지 않는 구형 브라우저를 위한 대체 콘텐츠를 제공합니다.
이처럼 <frameset>은 과거에 메뉴 영역과 본문 영역을 하나의 화면에 함께 보여주기 위해 널리 사용되었지만, 접근성과 유지보수 측면의 한계로 인해 현재는 사실상 사용되지 않습니다. 현대적인 웹 개발에서는 CSS Grid나 Flexbox로 전체 레이아웃을 구성하고, 외부 콘텐츠를 삽입해야 할 때는 <iframe>을 사용하는 것이 권장됩니다.