HTML 프레임셋 환경에서 target top 및 프레임 해제 구성 방법

• 목록
• 스크랩

HTML 프레임셋 환경에서 target _top 및 프레임 해제 구성 방법

프레임셋 구조로 이루어진 레거시 웹 환경에서 특정 링크나 자바스크립트를 이용해 프레임을 해제하고 전체 페이지로 이동(target _top)하는 방법을 살펴봅니다.

프레임셋 환경에서 target=_top을 이용한 프레임 해제 방법

프레임셋으로 구성된 웹페이지에서 링크를 클릭했을 때 하위 프레임 내부에서만 페이지가 바뀌는 현상을 방지하고, 최상위 부모 창 전체가 해당 주소로 이동하도록 하려면 HTML 링크의 target 속성이나 자바스크립트를 활용할 수 있습니다.

1. 링크 태그에 target="_top" 속성 지정

링크를 통해 페이지를 이동할 때 target="_top" 속성을 추가하면 프레임을 걷어내고 가장 상단 창에서 문서가 열리도록 지정할 수 있습니다.

<a href="main.html" target="_top">Home</a>

2. 자바스크립트를 이용한 프레임 해제

프레임 내부 문서의 자바스크립트 실행 구간에서 window.open 함수의 타깃 인자에 '_top'을 전달하여 프레임 문서를 벗어난 전체 페이지 이동을 구현할 수 있습니다.

window.open('주소', '_top');

주의사항

<frameset> 및 <frame> 태그 구조는 최신 HTML5 표준에서 공식 지원되지 않으므로, 레거시 시스템 유지보수 환경에서만 사용하시기 바랍니다.

HTML 프레임 환경에서 target _top 및 프레임셋 구성 방법

프레임셋 문서 구조에서 특정 프레임 내 문서의 자바스크립트를 이용해 프레임 구조를 해제하고 전체 페이지로 이동(target="_top")하려면 자바스크립트의 window.open('주소', '_top') 코드를 활용할 수 있습니다.

1. 프레임셋 문서 구조 예시

<frameset> 태그는 화면을 분할하며, <frame> 태그를 통해 각 영역에 개별 문서를 로드합니다. 아래는 상·하단으로 프레임을 나누는 기본 구조 예시입니다.

<html>
<head>
<title>해피정닷컴 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset rows="*, 100px" frameborder="no" border="0" framespacing="0">
<frame name="main" noresize scrolling="auto" src="test1-1.php" marginwidth="0" marginheight="0" frameborder="no">
<frame name="session" scrolling="no" noresize src="test1-2.php" marginwidth="0" marginheight="0" frameborder="no" />
</frameset><noframes></noframes>

2. 자바스크립트를 이용한 프레임 해제 및 이동

프레임 상단 문서(test1_1.php 등) 내부에서 현재의 프레임 문서를 걷어내고 전체 창으로 새로운 페이지를 띄우려면 다음과 같이 스크립트를 작성합니다.

<script>
window.open('test2.php', '_top');
</script>

적용 시 참고 사항

• 최신 HTML5 표준에서는 <frameset> 태그가 지원되지 않으므로, 위 구조는 레거시 환경에서만 유효합니다.

HTML 프레임셋 환경과 target _top 활용 방법

프레임셋 문서 구조에서 특정 링크나 스크립트를 통해 프레임을 해제하고 전체 페이지로 이동(target="_top")하려면, 자바스크립트나 HTML 구조 설정을 적용할 수 있습니다.

1. 자바스크립트를 이용한 프레임 해제

프레임 상단 문서 등에서 스크립트를 실행하여 프레임 문서를 걷어내고 전체 페이지로 이동할 수 있습니다.

window.open('주소', '_top');

2. 프레임셋(frameset) 문서 구조 예시

HTML 문서 소스 내에서 <frameset>과 <frame> 태그를 사용하여 화면 영역을 나누고 각 문서를 로드할 수 있습니다.

<html>
<head>
<title>프레임 문서</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset rows="*, 100px" frameborder="no" border="0" framespacing="0">
<frame name="main" noresize scrolling="auto" src="test1-1.php" marginwidth="0" marginheight="0" frameborder="no">
<frame name="session" scrolling="no" noresize src="test1-2.php" marginwidth="0" marginheight="0" frameborder="no" />
</frameset><noframes></noframes>

3. 표준 호환성 주의사항

프레임셋(frameset) 요소는 HTML4에서 사용되던 방식이며, 접근성 저하, 검색엔진 비호환, 모바일 미지원 등의 이유로 최신 HTML5 표준에서는 공식적으로 폐지(deprecated)되었으므로 레거시 환경에서만 유효하게 작동합니다.

참고자료

기타 참고자료

• happyjung.com — frame에서 target=_top 사용하기 > 기술자료 | 해피정닷컴
• happyjung.com — frame에서 target=_top 사용하기 > 기술자료 | 해피정닷컴
• zpxlcm.tistory.com — jquery jquery로 a 태그 target 변경하는 방법 + 보안 문제
• uxkm.io — 프레임셋 문서 구조 | UXKM