โ ๋ด๊ฐ โ๊ฐ์ฒด ์งํฅโ์ด๋ ์ฉ์ด๋ฅผ ๊ณ ์ํ์ผ๋ ๋ง์ธ๋ฐ, C++๋ฅผ ์ผ๋์ ๋์ง ์์๋ค๊ณ ๋งํ ์ ์๋ค. โ
- Alan Kay
๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์๋ฒ์ง

HTML ์์์ ์ขํ
์น๋ฌธ์์ ์ด๋ค ์์(element)์ ์์น ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํ ํ์๊ฐ ์์๋, DOMRect ํด๋์ค์ getBoundingClientRect() ๋ฉ์๋๋ฅผ ํตํด ์ขํ ์ ๋ณด๊ฐ ๋ค์ ๊ฐ์ฒด๋ฅผ ์ป์ ์ ์๋ค. ๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๋ฉฐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์์น ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋ค
const rect = document.querySelector('div').getBoundingClientRect();
console.log(rect);

getBoundingClientRect() ๋ฉ์๋์ ๋ฐํ ๊ฐ์ ์๋ฆฌ๋จผํธ์ padding๊ณผ border-width๋ฅผ ํฌํจํด ์ ๋ฐ์ ์ธ ์ฌ๊ฐํ์ ์์น์ ํฌ๊ธฐ๋ฅผ px ๋จ์๋ก ๋ํ๋ธ๋ค.
๊ฐ ์์ฑ์ ๊ฐ๋ค์ด ๋ํ๋๋ ์๋ฏธ๋ ๋ค์๊ณผ ๊ฐ๋ค.
- x : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค x ์ขํ
- y : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค y ์ขํ
- width : ์๋ฆฌ๋จผํธ ๊ฐ๋ก ๊ธธ์ด
- height : ์๋ฆฌ๋จผํธ ์ธ๋ก ๊ธธ์ด
- top : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค ์ธ๋ก ์์์ ๋ถํฐ ์๋ฆฌ๋จผํธ ์๋ณ ๊น์ง์ ๊ฑฐ๋ฆฌ (y ๊ฐ๊ณผ ๊ฐ์)
- left : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค ๊ฐ๋ก ์์์ ๋ถํฐ ์๋ฆฌ๋จผํธ ์ข์ธก๋ณ ๊น์ง์ ๊ฑฐ๋ฆฌ (x ๊ฐ๊ณผ ๊ฐ์)
- right : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค ๊ฐ๋ก ์์์ ๋ถํฐ ์๋ฆฌ๋จผํธ ์ฐ์ธก๋ณ ๊น์ง์ ๊ฑฐ๋ฆฌ (x + width ๊ฐ๊ณผ ๊ฐ์)
- bottom : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค ์ธ๋ก ์์์ ๋ถํฐ ์๋ฆฌ๋จผํธ ์๋๋ณ ๊น์ง์ ๊ฑฐ๋ฆฌ (y + height ๊ฐ๊ณผ ๊ฐ์)

์์์ ์ขํ๋ ์์์ผ ์ ์๋ค. ์๋ฅผ ๋ค์ด ๋ฌธ์ ํ์ด์ง๊ฐ ์คํฌ๋กค๋์ด ํ์ฌ ๋ธ๋ผ์ฐ์ ์ฐฝ ์์ ์์๊ฐ ์์นํด ์๋ ๊ฒฝ์ฐ top์ ๊ฐ์ ์์์ด๊ฒ ๋๋ค.
# ์ฐธ๊ณ ์๋ฃ
https://ko.javascript.info/coordinates
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.