티스토리 뷰

자바스크립트에서 윈도우 창 크기에 대해 알아보겠습니다.


익스플로러, 크롬, 파이어폭스, 오페라 모두 같은 값을 출력하는 윈도우 창크기는 window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight 가 있습니다.


각 속성 이름만 봐도 대충 파악이 되죠.


정확하게 window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight 는 어떤 값인지 알아봅시다.


아래 스크린샷을 보시면 이해가 빠르실것입니다.


익스플로러 창입니다.


한눈에 바로 이해되시죠?


innerWidth, innerHeight 는 창 틀을 뺀 내용과 스크롤을 포함한 크기입니다.


참고로 아래는 크롬 창입니다.


익스플로러와 크롬은 같은 크기의 창인데, innerWidth, innerHeight는 익스플로러와 크롬이 다르죠?


창틀 크기가 달라서 생기는 현상입니다.


window.open 에서 width, height 값은 위 스크린샷에서 파란색 박스인 innerWidth, innerHeight 값입니다.


만약에 800 * 500 크기 이미지에 딱맞게 창을 띄우려면, window.open("window.html", "win", "width=800, height=500"); 이렇게 띄우면 됩니다.


하지만 창 크기를 변경하는 명령어인 resizeTo(가로, 세로)에서의 가로, 세로 값은 outerWidth, outerHeight 값이 변경되므로 아래와 같이 값을 구해야 합니다.


resizeTo 의 가로 값 = 이미지의 width + (window.outerWidth - window.innerWidth) 


resizeTo 의 세로 값 = 이미지의 height + (window.outerHeight - window.innerHeight)


window.outerWidth - window.innerWidth 는 창바깥쪽 크기에서 안쪽 크기를 뺀 값이므로 창틀의 크기가 됩니다.

댓글
댓글쓰기 폼
공지사항
Total
908,420
Today
196
Yesterday
326
링크
«   2021/02   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28            
글 보관함