window.open 크기 정하기 - 새창 열기 스크립트 태그 (크기, 위치, 툴바 등 조정) > 웹제작/운영

새창 열기 스크립트 태그

window.open 크기 정하기

브라우저 방식이 바뀌면서 이제는 새창 단순 링크라면 그냥 새탭으로 열려버리게 되었다.

그래서 대부분의 홈페이지가 새탭 열기를 하고 있지만...

굳이 새창으로 링크를 열어야 할 경우라면 window.open의 가로 세로 크기 속성을 이용하면 된다.

window.open 크기 정하기 - 새창 열기 스크립트 태그 (크기, 위치, 툴바 등 조정)

새창 열기 예제 코드

새창 스크립트를 쓰면서 가로와 세로를 지정해 주면 새탭이 아니라 새창으로 띄울 수 있다. 

이것은 일반적인 <a> 태그의 target="_blank"과는 다른 방식이다.

먼저 아래 기본 코드를 보고 공부해 보자.

[code]

   <a href="javascript:void(window.open('대상URL', '창 이름', '속성과 옵션들))">클릭</a>

[/code]

javascript:void까지는 그냥 링크에 적용되는 자바스크립트니까 잘 알고 있을 것이다.

그 다음에 오는 window.open( )가 새창 열기 태그의 핵심이다.

여기에는 각종 속성 옵션이 들어가는데, 종류별로 아래에서 설명하겠다.

window.open 새창 크기 등 기본 옵션

window.open에는 3가지의 외따옴표가 이어질 수 있다. 아래처럼...

window.open('      ', '      ', '      ') // 이렇게 말이다. 

이 중에서 첫 번째(대상)와 두 번째(창 이름)는 당연한 것이니까 넘어가고, 세 번째 외따옴표에 들어갈 속성들을 알아 보자.

여기에는 아래 같은 속성들을 사용할 수 있다. 우선 기본 옵션을 보자.

top : 나타날 위치의 높이

left : 나타탈 위치의 왼쪽 간격

width : 가로 크기

height : 세로 크기

기본 옵션으로 예를 들자면 이렇다.

[code]

   <a href="javascript:void(window.open('대상URL', '창 이름', 'top=20px, left=20px, width=600px, height=450px'))">클릭</a>

[/code]

이 많은 속성들이 마지막 하나의 외따옴표 안에 들어간다. 아래 속성까지 들어가면 매우 긴 속성이 하나의 외따옴표에 들어가게 되는 것이다. 

단, 속성의 구분은 중간에 쉼표( , )를 사용한다.

새창 열기 스크립트 바와 줄 표시

브라우저는 기본적으로 위와 아래 등에 여러 기능 줄이 붙어 있다. 예르 들자면 주소표시줄, 툴바줄 같은 것이다. 

심지어 따로 표시가 없어도 창을 끌면 크기를 조절할 수 있는 기능까지 들어 있다. 

이런 것들이 다 필요없어서 막아야 할 때는 어떡할까?

toolbar : 툴바 표시줄

staus : 상태 표시줄

memubar : 메뉴 표시줄

location : 주소 표시줄

directoryies : 연결 표시줄

resizable : 크기 조절 가능/불가능

이것들을 다 막아버리려면 아래처럼 하면 된다.

[code]

   <a href="javascript:void(window.open('대상URL', '창 이름', 'toolbar=no, staus=no, memubar=no, location=no, directoryies=no, resizable=no'))">클릭</a>

[/code]

물론 꼭 나타내야 한다면 no 대신 yes를 사용하면 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

그런데 여기서 주의할 것이 있다. 

1. yes, no 대신 1, 0을 쓰는 사람들도 있다.

2. 따로 추가로 설명했던 toolbar, staus, memubar, location, directoryies, resizable는 명령이 먹히지 않는 브라우저도 있다는 것이다.