날로 웹 애플리케이션의 UI가 복잡해지고 JavaScript를 이용해서 사용자와 웹 애플리케이션 간의 상호작용에 따른 특정 객체에 대한 접근과 조작이 점점 더 유행을 타게 되면서, 웹 브라우저의 창 속에 존재하는 어떤 한 객체의 정확한 크기와 위치 좌푯값을 얻는 일은 무척이나 중요해졌다. 하지만 객체의 위치를 재는 방법과 그 속성은 헷갈릴 만큼이나 다양하고, 불행히도 웹 브라우저마다 같은 속성도 서로 다른 크기를 돌려준다. 그래서 여기에 DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성값들을 정리하고, 그림으로 나타내 보았다.
– Window Properties:
screen.width, screen.height
스크린 영역의 픽셀(pixels) 단위 너비와 높이(읽기 전용). 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
innerHeight, innerWidth
브라우저 창 속 문서가 표시되는 영역의 픽셀 단위 너비와 높이(읽기 전용). 여기에는 메뉴 막대, 도구 막대, 스크롤 바 등이 포함되지 않으나, 예외적으로 Firefox와 Opera에서는 스크롤 바의 영역이 포함된 값을 돌려준다. 이 속성은 IE에서는 지원되지 않고, 버전과 Doctype 선언에 의한 표준 호환 모드냐 아니냐에 따라 document.documentElement 혹은 document.body에 있는 clientWidth와 clientHeight 값을 사용해야 한다.
outerHeight, outerWidth
브라우저 창 전체의 픽셀 단위 너비와 높이(읽기 전용). 여기에는 메뉴 막대, 도구 막대, 스크롤 바 등이 포함된 값이다. IE에서는 해당 값이 존재하지 않고, 대신 MS 전용 속성인 document.documentElement 혹은 document.body의 offsetHeight, offsetWidth를 써야 한다.
pageXOffset, pageYOffset, scrollX, scrollY
문서가 얼마 만큼 스크롤 되었는지를 알려주는 픽셀 단위의 값(읽기 전용). 이것도 역시나 Internet Explorer는 지원하지 않는다. 대신 document.documentElement 혹은 document.body의 비표준 scrollLeft와 scrollTop을 사용.
– Window and Mouse Event Properties:
screenLeft, screenTop, screenX, screenY
스크린 속 창의 왼쪽 위 구석에 있는 모서리의 위치를 나타내는 좌표 값(읽기 전용). IE, Safari, 그리고 Opera는 screenLeft와 screenTop을 지원하지만, Firefox와 Safari는 screenX와 screenY를 지원한다.
– HTML Element Properties:
offsetHeight, offsetWidth
한 객체의 픽셀 단위의 너비와 높이 값으로, margin을 제외한 스크롤 바와 padding, border 값을 포함하고 있다. 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
clientHeight, clientWidth
한 객체의 픽셀 단위의 너비와 높이 값으로 padding 값이 포함되나, 그 외의 스크롤 바와 border, margin 값은 포함되지 않는다. 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
offsetLeft, offsetTop
상위 offsetParent 객체를 기준으로 해서 한 객체의 왼쪽 위 모서리의 X, Y 좌푯값. 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
offsetParent
어떤 특정 객체를 포함하고 있는 상위 객체로서 하위 객체의 offsetLeft 그리고 offsetTop의 기준 좌표 시스템 역할을 한다. 대부분의 경우, offsetParent는 하위 객체를 포함하고 있는 Document object가 되지만, 유동적으로 위치하는(absolute-positioned) 요소의 경우에는 또 이 요소를 포함하고 있는 유동적으로 위치한 상위 요소가 바로 offsetParent가 된다. 복잡한 것은 브라우저마다 offsetParent가 되는 요소를 다르게 가리켜서 주의가 요구된다. (예를 들어, Firefox에서는 root node를 가리키지만, Opera에서는 바로 위의 부모 요소를 가리킨다) 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
scrollHeight, scrollWidth
한 객체의 픽셀 단위의 전체 너비와 높이 값. 이 객체가 스크롤 바를 가지고 있으면(overflow: auto), 이 값은 객체의 보이는 부분만의 크기를 나타내는 offsetHeight과 offsetWidth 값과는 다르게 된다. 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다. 하지만 스크롤 바를 표시하는 구현 방법이 브라우저들 사이에 차이를 보이는 이유로 저마다 돌려주는 값도 달라서, Firefox와 IE는 객체의 padding까지 포함한 값을 나타내나 Safari의 경우에는 content의 크기에다 한쪽 padding 값만을 더해서 돌려주며 Opera의 경우에도 content 크기에다 한쪽 padding 값과 함께 한쪽 border 값까지 포함하는 등 브라우저마다 심한 편차를 보여주고 있어서 사용을 신중히 해야 한다.
scrollLeft, scrollTop
객체가 스크롤 바를 가지고 있으면, 객체가 얼마만큼 스크롤 되었는지 왼쪽 위 모서리를 기준으로 한 픽셀 단위의 값. 이 속성은 브라우저에 따라 문서의 <body> 혹은 <html> 태그에도 정의되어 있어서, 문서 전체가 얼마나 스크롤 되었는지를 나타낸다. 주의할 것은, <iframe> 태그에서 스크롤 된 값은 무시된다. 웹 표준 규약은 아니지만 여러 브라우저에서 지원하고 있다.
자, 그럼 위의 내용을 그림으로 정리하면,
결론적으로, 각 속성에 대한 브라우저들끼리의 합의가 이루어지지 않는 한 합리적이고 공통된 값을 얻기란 상당히 골치 아파서 커다란 걸림돌로 작용한다. 그나마 UI 관련 JavaScript 라이브러리들이 존재하니 시름을 덜 수 있다. 이렇게 놓고 보니, 정리하려고 해도 현재로썬 명확한 정리 자체가 될 수가 없다. 😕
“DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리”에 달린 3개의 댓글
😉 좋네요 ~ 고맙습니다`
도움이 된다니 반갑군요. 🙂
하지만, 너무 복잡하고 역시나 아직 브라우저들 마다 의외의 값을 돌려주는 경우도 많아서 앞으로 상황은 또 바뀔지도 모릅니다. 🙄
유용한 팁이네요.. ㅇ_ㅇ 제 블로그로 퍼 가도록 할게요..! 물론 출처 명시!