사이즈와 좌표값 정리 / screenWidth Height, scrollWidth Height, innerWidth Height, outerWidth Height, offsetWidth Height, clientWidth Height & screenX Y, pageX Y, offsetX Y, clientX Y

Width & Height

 

속성	설명
Window.screenWidth, screenHeight	브라우저 창을 넘어서는, 유저가 보는 스크린 자체의 크기
Element.scrollWidth, scrollHeight	스크롤바로 숨겨진 영역까지 포함한 실제 엘리먼트의 크기
Window.outerWidth, outerHeight	브라우저 창 안의 스크롤바와 메뉴를 포함한 크기
Window.innerWidth, innerHeight	브라우저 창 안의 스크롤바와 메뉴를 제외한 document 크기
Element.offsetWidth, offsetHeight	엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 크기
Element.clientWidth, clientHeight	엘리먼트의 패딩만 포함한 크기. 보더, 스크롤바의 사이즈 제외한 크기
Element.getBoundingClinetRect().width/height	offsetWidth, offsetHeight와 같은 엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 크기 이지만, 1) 렌더링된 크기를 리턴, 2) 소수점까지 반환

 

 

screenWidth, screenHeight

브라우저 창을 넘어서는, 유저가 보는 스크린 자체의 크기

 

 

Element.scrollWidth, scrollHeight

보이고 있는 영역 외의 스크롤바로 숨겨진 영역까지 포함한 실제 엘리먼트의 크기. 

 

 

window.outerWidth, outerHeight : 브라우저 창 안의 스크롤바와 메뉴를 포함한 크기.

window.innerWidth, innerHeight : 브라우저 창 안의 스크롤바와 메뉴를 제외한 document 크기.

 

 

 

 

 

Element.offsetWidth, offsetHeight

엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 크기.

 

 

Element.clientWidth, clientHeight

엘리먼트의 패딩만 포함한 크기. 보더, 스크롤바의 사이즈를 제외한 크기.

 

Element.getBoundingClinetRect().width / height;

 

offsetWidth, offsetHeight와 같은 엘리먼트의 패딩과 보더, 스크롤바의 사이즈를 포함한 크기 이지만,

 

offsetWidth와 offsetHeight 속성은 엘리먼트의 레이아웃 크기를 리턴하는 반면,

getBoundingClientRect()는 1) 렌더링된 크기를 리턴합니다.

 

예를 들어, 엘리먼트에 다음과 같은 속성이 적용되어 있다고 가정해보면,

 

     width: 100px;

     transform: scale(0.5);

 

이 경우, offsetWidth는 100을 리턴하지만, getBoundingClientRect()는 50을 리턴하게 됩니다.

offsetWidth 뿐 아니라, 위에서 언급한, clientWidth, scrollWidth 모두 tranform에 의해 변경된 값은 적용되지 않습니다.

따라서, 최종 렌더링된 값을 가져오고 싶다면, offsetWidth 대신 getBoundingClientRect()를 사용하는 것이 좋습니다.

 

 

또한 offsetWidt, clientWidth, scrollWidth의 값은 반올림된 정수값을 반환하는 반면 

2) getBoundingClientRect()은 소수점까지 반환하는 차이가 있습니다.

 

 

 

 

Coordinates (좌표값)

 

속성	설명
screenX, screenY	브라우저 창을 넘어서는, 유저가 보는 스크린 자체의 왼쪽 위 꼭지점을 기준으로한 좌표.
pageX, pageY	스크롤된 값까지 모두 포함한 왼쪽 위 꼭지점을 기준으로한 좌표.
Element.ClientX , ClientY	내가 지금보고 있는 창 안에서의 스크롤바의 사이즈를 포함한 x,y 좌표.
Element.OffsetX, OffsetY	내가 지금보고 있는 창 안에서의 스크롤바의 사이즈를 제외한 x,y 좌표.
Element.getBoundingClinetRect().top,left,right,bottom	Element의 좌표값. Top의 경우 위에서부터 얼마나 떨어져 있는지 : Y축 Left의 경우 얼마나 왼쪽으로 떨어져 있는지 : X축 Bottom의 경우 element의 오른쪽 아래 지점까지 위에서부터 얼마나 떨어져 있는지 Right의 경우 오른쪽 아래 꼭지점까지 축에서 얼마나 떨어져 있는지 알 수 있습니다.

 

 

• 클릭했을 때, EVENT값에는 x, y 값이 들어있습니다.
• 왼쪽 최상위의 점을 기준으로 (0,0)으로 좌표값 (coordinates) 이 시작됩니다.
• 각 속성에 따라 최상위의 기준이 되는 시작점이 다릅니다.
• X값은 오른쪽으로 갈수록 숫자가 커집니다. Y값은 아래쪽으로 내려갈수록 숫자가 커집니다.

 

 

screenX, screenY

브라우저 창을 넘어서는, 유저가 보는 스크린 자체의 왼쪽 위 꼭지점을 기준으로한 좌표.

 

pageX, pageY

스크롤된 값까지 모두 포함한 왼쪽 위 꼭지점을 기준으로한 좌표.

 

Element.OffsetX, OffsetY

내가 지금보고 있는 창 안에서의 스크롤바의 사이즈를 포함한 x,y 좌표.

 

Element.ClientX , ClientY

내가 지금보고 있는 창 안에서의 스크롤바의 사이즈를 제외한 x,y 좌표.

 

 

 

Element.getBoundingClinetRect();

 

위에서 말씀드린 element의 width, height값 뿐만 아니라,

top, left, right, bottom을 통해 위치와 관련된 정보들도 얻을 수 있습니다.

 

Top의 경우 위에서부터 얼마나 떨어져 있는지 즉 Y축

Left의 경우 얼마나 왼쪽으로 떨어져 있는지 즉 X축

Bottom의 경우 element의 오른쪽 아래 꼭지점까지 위에서부터 얼마나 떨어져 있는지

Right의 경우 오른쪽 아래 꼭지점까지 축에서 얼마나 떨어져 있는지 알 수 있습니다.

 

1) 렌더링된 크기를 리턴합니다.

2) getBoundingClientRect()은 소수점까지 반환합니다.

 

다만 CSS의 경우 Right과 Bottom 의 의미가 다릅니다.

CSS 상에서 position을 absolute나 relative로 지정하게 되면 top, bottom, left, right값을 지정할 수 있는데,

이 때 right과 bottom은 브라우저에서 제일 오른쪽 축과 제일 아래쪽 축에서부터 떨어져있는 거리입니다. 

 

 

https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect