HTML 하위 창(프레임)이란?
HTML에서 하위 창을 만들 때는 <frame> 태그를 사용합니다. 이 태그는 <frameset> 태그 내부에서 화면을 나누는 각각의 개별 프레임 영역을 정의하는 역할을 합니다.
주의: <frame> 태그는 HTML5에서 공식적으로 제외된 요소입니다. 최신 브라우저에서는 더 이상 지원되지 않으므로 새로운 프로젝트에서는 사용하지 않는 것이 좋으며, 대신 <iframe> 태그를 활용하는 것이 권장됩니다.
frame 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| frameborder | 0 또는 1 | 프레임 주변에 테두리를 표시할지 여부를 지정합니다. |
| marginheight | 픽셀(px) | 프레임 콘텐츠와 위·아래 테두리 사이의 여백을 픽셀 단위로 지정합니다. 예: marginheight = "10" |
| marginwidth | 픽셀(px) | 프레임 콘텐츠와 왼쪽·오른쪽 테두리 사이의 여백을 픽셀 단위로 지정합니다. |
| name | 프레임 이름 | 프레임의 고유 이름을 지정합니다. 링크의 target 속성과 함께 사용됩니다. |
| noresize | noresize | 지정하면 사용자가 마우스로 프레임 크기를 조절할 수 없습니다. |
| scrolling | yes no auto | 스크롤바의 표시 방식을 결정합니다. |
| src | URL | 프레임에 표시할 문서 파일의 경로를 지정합니다. |
하위 창 만들기 예제
다음 코드를 실행하면 좌우 두 개의 프레임으로 나뉜 하위 창을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML frame Tag</title> </head> <frameset cols = "200, *"> <frame src = "/html/menu.htm" name = "menu_page" /> <frame src = "/html/main.htm" name = "main_page" /> <noframes> <body> 브라우저가 프레임을 지원하지 않습니다. </body> </noframes> </frameset> </html>
위 예제에서 <frameset cols = "200, *">는 화면을 왼쪽 200픽셀과 나머지 전체 영역으로 나누며, 각 영역에는 menu.htm과 main.htm 문서가 각각 로드됩니다. <noframes> 태그는 프레임을 지원하지 않는 구형 브라우저를 위한 대체 콘텐츠를 제공합니다.
HTML5 환경에서의 대안: iframe
<frame>과 <frameset>은 더 이상 사용할 수 없으므로, 현재는 <iframe>(인라인 프레임)을 사용하여 문서 안에 다른 문서를 삽입하는 방식이 표준입니다. <iframe>은 CSS와 함께 활용하면 기존 프레임셋과 유사한 화면 분할 효과도 충분히 구현할 수 있습니다.
<iframe src = "/html/main.htm" width = "100%" height = "400"></iframe>