Size & event
===================
Size
===================
1. Viewport
뷰포트에서 레이어는 Stacking Rule 에 의해 Z-index 순위를 정한다.
뷰포트의 종류는 Visual Viewport (모니터 스크린화면 사이즈), Layout Viewport(HTML 또는 Elements 사이즈)
2. 사이즈 ( Layout viewport )
1) window.innerWidth , window.innerHeight
실제 브라우져에 보여지는 화면 사이즈, Scrollbar 사이즈 포함함
2) window.pageXOffset , window. pageYOffset
HTML전체 사이즈 기준, Scrollbar 사이즈 포함함
3) document.documentElement.clientWidth , document.documentElement.clientHeight
실제 브라우져에 보여지는 화면 사이즈, Scrollbar 사이즈 포함하지 않음
4) document.documentElemnt.offsetWidth , document.documentElement.offsetHeight
HTML전체 사이즈 기준, Scrollbar 사이즈 포함하지 않음
===================
event
===================
1. Property
1) event.pageX , event.pageY
HTML 사이즈에서 상대(relative)좌표
2) event.clientX , event.clientY
실제 브라우져에 보여지는 화면 사이즈에서 상대(relative)좌표
3) event.screentX , event.screenY
모니터 스크린 사이즈에서 상대(relative)좌표
===================
media query (css)
===================
1. width , height
실제 브라우져에 보여지는 화면 사이즈)
2. device-width , device-height
모니터 스크린 사이즈