영역, 좌표, 사이즈 관련 정리

브라우저 창의 사이즈를 이리저리 조정해 보면 조금씩 다르게 적용됨을 알 수 있습니다.

*. 박스모델
innerWidth, innerHeight, outerWidth, outerHeight  가 W3C 에 의해 제정되었지만,
웹브라우저 종류나 버전에 따라 잘 지켜지지 않기도 한다.
간혹 Hack 을 사용해서 빠져나가는 방법을 쓰기는 하지만 이중 박스 모델을 사용하면,
핵을 사용하지 않아도 어떠한 웹브라우저든지 정확하게 맞아 들어간다.
<style>
div, span {margin:0; padding:0; border:0}
.inner {padding:10px}
</style>
<div style="width:100px; background:yellow">
  <div class="inner" style="background:red; border:2px blue solid">실제로 화면에 표시되는 내용들..</div>

</div>
상기와 같이 하면, 바깥쪽 div 로 인해 전체 Width 는 100px 이 되고,
안쪽 div 로 인해 100px 안 쪽에 폭 2 pixel 의 직선이 생긴다.
IE, FF, Chrome 등등 웹브라우저의 종류나 버전에 상관없이 동일한 박스가 생성된다.
바깥쪽 옵션인 margin, padding, border 값 등이 0 픽셀이므로, width 만 적용된다.
안쪽 박스는 바깥쪽 박스 안에 생성되므로 100% 가 width 와 동등하게 된다.
안쪽 박스에 border 가 2픽셀 두께로 생성되더라도 바깥쪽 width 를 넘어설 수가 없으므로,
상하 4 픽셀, 좌우 4 픽셀의 경계선은 100 픽셀 안쪽에 생기는 것.
실제로 화면에 표시되는 내용은 좌우 4픽셀, 상하 4픽셀을 제외한 내용이 보여지되..
안쪽 박스에 padding 이 10px 먹기 때문에 다시 좌우 20픽셀, 상하 20픽셀이 빠지므로..
최종적으로 화면에 표시되는 내용이 위치하는 공간은,
좌우 24 픽셀 상하 24 픽셀이 빠지게 된다.
어쨌든 바깥쪽은 아직도 100 픽셀의 폭을 갖게 된다.
height 를 설정하더라도 마찬가지이겠지만,
height 는 overflow 가 적용되므로 특별히 지정되지 않으면 내용에 맞게 아래로 길쭉하게 된다.
물론 white-space:nowrap; text-overflow:ellipsis; overflow:hidden 옵션이 붙으면 말줄임표가..


screen.availWidth

screen.width
$(screen).width()
웹브라우저 화면 폭
화면 가운데 오플/이동 할때 많이 사용

screen.height
$(screen).height()
웹브라우저 화면 높이
화면 가운데 오플/이동 할때 많이 사용



event.clientX
마우스 이벤트가 발생한 client 위치의 X 좌표, 스크롤 되어도 client 기준으로 좌표값이 나옴

event.clientY
마우스 이벤트가 발생한 client 위치의 Y 좌표, 스크롤 되어도 client 기준으로 좌표값이 나옴

event.pageX
마우스 이벤트가 발생한 page 위치의 X 좌표, 스크롤 된 것을 포함한 좌표값

event.pageY
마우스 이벤트가 발생한 page 위치의 Y 좌표, 스크롤 된 것을 포함한 좌표값

event.screenX
마우스 이벤트가 발생한 screen 위치의 X 좌표, 스크롤 되어도 스크린 기준으로 좌표값이 나옴

event.screenY
마우스 이벤트가 발생한 screen 위치의 Y 좌표, 스크롤 되어도 스크린 기준으로 좌표값이 나옴



document.body.offsetWidth
화면에 보여지는 사이즈

document.body.scrollWidth
$(document).scrollWidth()
화면에서 스크롤 되는 부분도 포함한 사이즈

document.body.scrollLeft
$(document).scrollLeft()
스크롤된 화면의 X 좌표, 항상 0 일테지..
($(window).width()-$(..).width())/2 +$(docuemnt).scrollLeft()

document.body.scrollTop
$(document).scrollTop()
스크롤된 화면의 Y 좌표
event.clientY 와 함께 사용해서 스크롤이 된 다음에도 마우스의 현재 위치를 체크할때 사용
($(window).height()-$(..).height())/2 +$(docuemnt).scrollTop()

$(document).width()

$(document).height()



$(window).width()
($(window).width()-$(..).width())/2 +$(docuemnt).scrollLeft()

$(window).height()
($(window).height()-$(..).height())/2 +$(docuemnt).scrollTop()