window.open("newWin.htm", "winName", "width=300,height=200,left=200,top=200");

left=200,top=200는 모니터의 크기를 기준으로 위치시키는 지정으로 이것은 모니터의 해상도에 따라서 배치할 수 있는 좌표가 제한됩니다. 모니터의 해상도는 screen 객체의 요소 width, height로 알 수 있습니다. 800x600의 해상도에서는 screen.width는 800, screen.height는 600으로 나옵니다.

모니터의 해상도를 기준으로 배치를 하면 사용자의 환경에 따라서 브라우저 창이 taskbar같은 것의 밑으로 들어갈 수 있습니다. screen 객체의 width, height는 모니터의 크기를 기준으로 하기 때문입니다. 사용자의 taskbar는 프로그램을 실행하면 실행한 것의 목록을 보여주는 것으로 숨기거나 숨기지 않을 수 있습니다. taskbar를 숨기지 않았다면 taskbar의 위치에 따라서 창의 배치를 결정해야 합니다. 이 taskbar를 뺀 크기가 screen 객체의 availWidth, availHeight입니다. taskbar가 있는 위치는 상관없이 무조건 taskbar를 뺀 크기입니다. 즉, 브라우저를 가장 크게 열 수 있는 크기입니다.

모니터 아래에 높이 100 pixel 크기의 taskbar가 있다면 screen.availHeight의 크기는 800x600 해상도에서 500 pixel이 됩니다.


[그림 desktop.gif]

위의 그림이 windows95의 바탕화면 그림입니다. 가장 아래에 있는 회색의 줄이 taskbar입니다.

이 taskbar는 사용자가 보이게 하거나 숨길 수 있습니다. 기본 설정은 보여주는 것입니다. 그리고 위치를 바탕화면의 4면으로 옮길 수도 있습니다. taskbar를 숨기게 해놓은 사용자의 환경에서 screen.height와 screen.availHeight는 같은 값을 가집니다. 즉, 전체 화면 모두에서 웹 브라우저를 사용할 수 있습니다.

창 이동 시키기

창을 배치하거나 이동시키는 동작을 할 때, 사용할 수 있는 내장 함수가 window 객체의 moveTo(x, y), moveBy(x, y)입니다. moveTo(x, y)는 x, y에 지정한 좌표로 창을 위치 시키고 moveBy(x, y)는 현재의 창의 위치에서 상대적으로 x, y만큼 더하여 위치시킵니다. x는 수평, y는 수직 방향으로 창을 이동시킵니다. nn4에서는 비슷한 기능을 하는 screen 객체의 screenX, screenY 요소도 있습니다.

창을 배치시킬 때, 사용자의 바탕화면에 taskbar가 있다면 그것을 감안해야지 브라우저가 taskbar 밑으로 들어가는 것을 막을 수 있습니다. 전체 바탕화면에서 taskbar의 크기를 뺀 크기가 screen.availWidth, screen.availHeight입니다. 이것은 taskbar가 있는 위치에 상관없이 무조건 taskbar의 크기를 뺀 값입니다.

바탕화면에서 taskbar가 있는 위치를 알 수 있는 JavaScript 요소는 없습니다. 있어서도 안되겠죠.. 사용자가 taskbar를 자신이 원하는 곳에 만들 수 있기 때문에 전체 바탕화면의 크기에서 브라우저를 배치하기 위해서는 taskbar의 위치를 알던가 비슷한 기능을 하는 요소를 알아야 합니다. nn4에서는 screen 객체에 availLeft, availTop이라는 요소가 있습니다. 반면에 ie4,x, ie5.x는 없습니다.

availLeft, availTop는 taskbar의 크기를 뺀 바탕화면의 시작 좌표를 말해줍니다. 만약, 어떤 사용자의 바탕화면 왼쪽에 폭 100 pixel 크기의 taskbar를 만들어서 사용한다면 screen.availLeft의 값은 100입니다. 그래서 taskbar 바로 오른쪽에 브라우저를 위치 시키기 위해서는 window.moveTo(screen.availLeft, screen.availTop)으로 하면 taskbar 바로 오른쪽에 딱 붙어서 브라우저가 위치합니다.

창 크기 바꾸기

창 크기를 다루는 내장 함수는 window 객체의 resizeTo(x, y), resizeBy(x, y)입니다. resizeTo(x, y)는 x, y에 지정한 크기로 창의 크기를 바꾸고 resizeBy(x, y)는 현재의 창의 크기에서 상대적으로 x, y만큼 더 크기를 증가시키거나 수축시킵니다.

window.resizeTo(400, 400)

창의 크기를 늘릴 때, 현재의 크기에서 조금만 늘릴려고 한다면 현재창의 전체 크기를 알아야 합니다. 창의 전체 크기는 nn4에서는 window.outerWidth, window.outerHeight로 알 수 있습니다. outerWidth, outerHeight는 브라우저 매뉴와 웹 페이지의 크기를 포함한 전체 크기입니다. ie4, ie5에서는 아직 모르겠습니다.

if(screen.availLeft) window.moveTo(screen.availLeft, screen.availTop)
else window.moveTo(0, 0)
window.resizeTo(screen.availWidth, screen.availHeight)

nn4에서 창 다룰때의 문제

nn4에서 window의 함수인 moveTo(), moveBy(), resizeTo(), resizeBy()과 screen 객체의 요소인 screenX, screenY를 사용하면 브라우저의 매뉴 구조가 달라집니다. 그래서 창을 이동시키거나 크기를 변경할 창은 toolbar, menubar 같은 것을 지정하지 않은 창을 열어서 사용해야 겠습니다.

--
낙서판의 질문을 받고 만든 페이지인데 생각보다 창 다루는 것이 쉽지는 않네요.
언제나 하는 말이고 불러도 들려오지 않는 메아리지만, 틀리거나 다른 방법을 알고 있으면 reply 부탁합니다.

[T O P]