웹 페이지에서 링크를 클릭했을 때 새 브라우저 창(팝업)을 열고 싶다면 window.open() 메서드를 사용하면 됩니다. 이 메서드는 지정한 URL을 새 창에서 열어주며, 창의 이름과 크기 등 다양한 옵션을 함께 설정할 수 있습니다.
window.open() 기본 문법
window.open(url, name, specs) 형태로 호출하며, 각 인자는 다음과 같은 역할을 합니다.
- url: 새 창에서 열고자 하는 페이지 주소
- name: 새 창의 이름(target 속성 값과 일치시키면 해당 창을 재사용)
- specs: width, height 등 창의 크기 및 표시 옵션
예제 코드
다음은 링크를 클릭하면 500×500 크기의 새 팝업 창을 여는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<a href="https:///www.google.com" target="popup"
onclick="window.open('https:///www.google.com','popup','width=500,height=500'); return false;">
링크로 팝업 창 열기
</a>
</body>
<script>
</script>
</html>여기서 핵심은 onclick 이벤트 안에서 window.open()을 호출하고, return false;로 기본 링크 동작(현재 창에서 페이지 이동)을 차단하는 것입니다. 덕분에 링크는 오직 새 팝업 창에서만 열리게 됩니다.
실행 방법
위 코드를 "anyName.html(index.html)"이라는 파일명으로 저장한 뒤, VSCode 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 프로그램이 실행됩니다.
출력 결과
프로그램을 실행하면 브라우저에 다음과 같은 화면이 나타납니다.
이제 화면의 링크를 클릭해 보세요. 지정한 크기(500×500)의 새 팝업 창이 열리는 것을 확인할 수 있습니다.
