You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-앞으로는 이 좌표를 `clientX/clientY`로 표시하며 왜 이런 이름을 쓰는지는 나중에 event 프로퍼티를 공부할 때 명확히 알게 됩니다.
9
+
2.**document 기준** - document 최상단(root)에서`position:absolute`를 사용하는 것과 비슷하게 document 상단/왼쪽 모서리에서부터 계산합니다.
10
+
-앞으로는 `pageX/pageY`로 표시합니다.
11
11
12
-
When the page is scrolled to the very beginning, so that the top/left corner of the window is exactly the document top/left corner, these coordinates equal each other. But after the document shifts, window-relative coordinates of elements change, as elements move across the window, while document-relative coordinates remain the same.
12
+
스크롤을 움직이기 바로 전에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그런데 스크롤이 움직이기 시작하면 document가 움직이기 때문에 document 기준 좌표는 그대로이지만 요소의 window 기준 좌표는 바뀝니다.
13
13
14
-
On this picture we take a point in the document and demonstrate its coordinates before the scroll (left) and after it (right):
14
+
다음 그림은 document 내 한 지점을 잡고 나서 스크롤 전(왼쪽)과 후(오른쪽)의 좌표를 보여줍니다.
15
15
16
16
17
17
18
-
When the document scrolled:
19
-
-`pageY` - document-relative coordinate stayed the same, it's counted from the document top (now scrolled out).
20
-
-`clientY` - window-relative coordinate did change (the arrow became shorter), as the same point became closer to window top.
18
+
document가 스크롤 될 때
19
+
-`pageY` - document 기준 좌표는 document 상단(스크롤 되어 밀려남)에서부터 계산되어 동일합니다.
20
+
-`clientY` - window 기준 좌표는 해당 지점이 window 상단과 가까워지면서 변화(화살표가 짧아짐)되었습니다.
21
21
22
-
## Element coordinates: getBoundingClientRect
22
+
## getBoundingClientRect로 요소 좌표 얻기
23
23
24
-
The method `elem.getBoundingClientRect()`returns window coordinates for a minimal rectangle that encloses `elem` as an object of built-in [DOMRect](https://www.w3.org/TR/geometry-1/#domrect)class.
24
+
`elem.getBoundingClientRect()`메서드는 `elem`을 감쌀 수 있는 가장 작은 네모영역의 window 기준 좌표를 [DOMRect](https://www.w3.org/TR/geometry-1/#domrect)클래스의 객체로 반환합니다.
25
25
26
-
Main `DOMRect`properties:
26
+
`DOMRect`주요 프로퍼티는 다음과 같습니다.
27
27
28
-
-`x/y` -- X/Y-coordinates of the rectangle origin relative to window,
29
-
-`width/height` -- width/height of the rectangle (can be negative).
28
+
-`x/y` -- 네모영역의 window 기준 X/Y 좌표
29
+
-`width/height` -- 네모영역의 너비/높이(음수 가능)
30
30
31
-
Additionally, there are derived properties:
31
+
`x/y`, `width/height` 말고 다음과 같은 프로퍼티도 있습니다.
32
32
33
-
-`top/bottom` -- Y-coordinate for the top/bottom rectangle edge,
34
-
-`left/right` -- X-coordinate for the left/right rectangle edge.
33
+
-`top/bottom` -- 네모영역 상단/하단 모서리의 Y 좌표
34
+
-`left/right` -- 네모영역 왼쪽/오른쪽 모서리의 X 좌표
35
35
36
36
```online
37
-
For instance click this button to see its window coordinates:
37
+
이 버튼을 누르면 버튼의 window 기준 좌표를 예시로 보여줍니다.
38
38
39
-
<p><input id="brTest" type="button" value="Get coordinates using button.getBoundingClientRect() for this button" onclick='showRect(this)'/></p>
If you scroll the page and repeat, you'll notice that as window-relative button position changes, its window coordinates (`y/top/bottom` if you scroll vertically) change as well.
56
+
페이지를 스크롤 하여 반복해보면 버튼의 위치가 달라지면서 window 기준 좌표(수직 스크롤 시 `y/top/bottom`)도 바뀌는 것을 알 수 있습니다.
57
57
```
58
58
59
-
Here's the picture of `elem.getBoundingClientRect()` output:
59
+
다음 그림은 `elem.getBoundingClientRect()`의 결과입니다.
60
60
61
61
62
62
63
-
As you can see, `x/y` and `width/height`fully describe the rectangle. Derived properties can be easily calculated from them:
63
+
보이는 것처럼 `x/y`와 `width/height`만으로 네모 영역을 완전히 묘사할 수 있습니다. 파생된 프로퍼티는 이들로부터 쉽게 계산 가능한 값입니다.
64
64
65
65
-`left = x`
66
66
-`top = y`
67
67
-`right = x + width`
68
68
-`bottom = y + height`
69
69
70
-
Please note:
70
+
다음을 주의하세요.
71
71
72
-
-Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to`style.left/top`.
73
-
-Coordinates may be negative. For instance, if the page is scrolled so that `elem` is now above the window, then `elem.getBoundingClientRect().top` is negative.
72
+
-좌표는 `10.5`처럼 소수도 가능합니다. 소수는 정상적인 값이며 브라우저는 내부 계산에 소수를 사용합니다. 따라서`style.left/top`를 설정할 때 반올림할 필요가 없습니다.
73
+
-좌표는 음수일 수 있습니다. 가령 페이지가 스크롤 되어 `elem`이 window 위로 밀려났을 때 `elem.getBoundingClientRect().top`는 음수가 됩니다.
74
74
75
-
```smart header="Why derived properties are needed? Why does`top/left` exist if there's `x/y`?"
76
-
Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`. So the additional derived properties are for convenience.
75
+
```smart header="왜 파생된 프로퍼티가 필요한가요? `x/y`가 있는데`top/left`가 왜 존재하나요?"
76
+
수학적으로 사각형은 시작 지점인 `(x,y)`와 방향 벡터 `(width,height)`만으로도 정의됩니다. 즉 파생된 프로퍼티는 편의를 위한 목적으로 사용합니다.
77
77
78
-
Technically it's possible for `width/height` to be negative, that allows for "directed" rectangle, e.g. to represent mouse selection with properly marked start and end.
78
+
이론적으로 `width/height`는 '방향이 있는' 사각형을 나타낼 때 음수가 될 수 있습니다. 예를 들어 마우스로 시작과 끝 지점을 지정하여 선택 영역을 표시할 때 사용할 수 있습니다.
79
79
80
-
Negative `width/height` values mean that the rectangle starts at its bottom-right corner and then "grows" left-upwards.
80
+
사각형이 하단 오른쪽에서 시작하여 상단 왼쪽으로 '올라가면' `width/height`는 음수 값입니다.
81
81
82
-
Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`):
82
+
다음은 `width`과 `height`가 음수 값인 사각형입니다(`width=-200`, `height=-100`).
83
83
84
84
85
85
86
-
As you can see,`left/top` do not equal `x/y` in such case.
86
+
보이는 것처럼 이런 예시에서는`left/top`은 `x/y`와 같은 값이 아닙니다.
87
87
88
-
In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates.
88
+
그러나 실제로는 `elem.getBoundingClientRect()`는 항상 양수의 width/height 값을 반환하며 여기에서는 같아 보이는 프로퍼티가 왜 중복이 아닌지를 설명하기 위해 `width/height` 음수 값을 언급했습니다.
89
89
```
90
90
91
-
```warn header="Internet Explorer: no support for `x/y`"
92
-
Internet Explorer doesn't support `x/y` properties for historical reasons.
91
+
```warn header="Internet Internet Explorer는 `x/y`를 지원하지 않습니다."
92
+
Internet Explorer는 예전부터 `x/y` 프로퍼티를 지원하지 않아 왔습니다.
93
93
94
-
So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`.
94
+
그래서 `DomRect.prototype`에 getter를 추가해 폴리필을 만들거나 `elem.getBoundingClientRect()`를 호출하면 그 결괏값의 `width/height`가 양수라는 특징을 이용해 `x/y`대신 `top/left`을 이용합니다.
95
95
```
96
96
97
-
```warn header="Coordinates right/bottom are different from CSS position properties"
98
-
There are obvious similarities between window-relative coordinates and CSS `position:fixed`.
97
+
```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다."
98
+
window 기준 좌표와 CSS `position:fixed` 사이에는 명백한 유사점이 있습니다.
99
99
100
-
But in CSS positioning, `right` property means the distance from the right edge, and `bottom` property means the distance from the bottom edge.
100
+
그러나 CSS position에서는 `right` 프로퍼티는 오른쪽 모서리로부터의 거리, `bottom` 프로퍼티는 하단 모서리로부터의 거리를 의미합니다.
101
101
102
-
If we just look at the picture above, we can see that in JavaScript it is not so. All window coordinates are counted from the top-left corner, including these ones.
102
+
위에 있는 그림만 보더라도 자바스크립트에서는 의미가 다름을 알 수 있습니다. `right`, `bottom` 프로퍼티를 포함한 모든 window 기준 좌표는 상단 왼쪽 시작점에서부터 계산됩니다.
103
103
```
104
104
105
105
## elementFromPoint(x, y) [#elementFromPoint]
106
106
107
-
The call to `document.elementFromPoint(x, y)` returns the most nested element at window coordinates `(x, y)`.
107
+
`document.elementFromPoint(x, y)`을 호출하면 window 기준 좌표 `(x, y)`에 있는 요소를 중첩 최하위에 있는 요소로 반환합니다.
108
108
109
-
The syntax is:
109
+
문법은 다음과 같습니다.
110
110
111
111
```js
112
112
let elem =document.elementFromPoint(x, y);
113
113
```
114
114
115
-
For instance, the code below highlights and outputs the tag of the element that is now in the middle of the window:
115
+
예를 들어 아래 코드는 지금 window 정중앙에 있는 요소의 태그를 강조해서 표시하고 태그 이름을 출력합니다.
116
116
117
117
```js run
118
118
let centerX =document.documentElement.clientWidth/2;
As it uses window coordinates, the element may be different depending on the current scroll position.
127
+
window 좌표를 사용하기 때문에 요소는 현재 스크롤하고 있는 위치에 따라 다를 수 있습니다.
128
128
129
-
````warn header="For out-of-window coordinates the `elementFromPoint` returns `null`"
130
-
The method `document.elementFromPoint(x,y)`only works if `(x,y)` are inside the visible area.
129
+
````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 반환합니다."
130
+
`document.elementFromPoint(x,y)`메서드는 `(x,y)`가 보이는 영역 안에 있을 때에만 동작합니다.
131
131
132
-
If any of the coordinates is negative or exceeds the window width/height, then it returns `null`.
132
+
좌표 중 하나라도 음수이거나 window의 너비/넓이를 벗어나면 `null`을 반환합니다.
133
133
134
-
Here's a typical error that may occur if we don't check for it:
134
+
다음은 확인하지 않았을 때 나타날 수 있는 전형적인 에러입니다.
135
135
136
136
```js
137
137
let elem =document.elementFromPoint(x, y);
138
-
//if the coordinates happen to be out of the window, then elem = null
138
+
//좌표가 window 밖으로 나가면 elem = null
139
139
*!*
140
-
elem.style.background=''; //Error!
140
+
elem.style.background=''; //에러!
141
141
*/!*
142
142
```
143
143
````
144
144
145
-
## Using for "fixed" positioning
145
+
## '고정(fixed)' 위치 지정에 사용하기
146
146
147
-
Most of time we need coordinates in order to position something.
147
+
좌표는 대부분 무언가를 위치시키려는 목적으로 사용합니다.
148
148
149
-
To show something near an element, we can use `getBoundingClientRect` to get its coordinates, and then CSS `position` together with `left/top` (or `right/bottom`).
149
+
요소 근처에 무언가를 표시할 때에는 `getBoundingClientRect`를 사용해 요소의 좌표를 얻고 CSS `position`을 `left/top`(또는 `right/bottom`)과 함께 사용해서 표시합니다.
150
150
151
-
For instance, the function `createMessageUnder(elem, html)` below shows the message under `elem`:
151
+
예를 들어 아래 `createMessageUnder(elem, html)` 함수는 `elem` 아래쪽에 메시지를 표시합니다.
152
152
153
153
```js
154
154
let elem = document.getElementById("coords-show-mark");
@@ -172,45 +172,45 @@ function createMessageUnder(elem, html) {
172
172
return message;
173
173
}
174
174
175
-
// Usage:
176
-
// add it for 5 seconds in the document
175
+
// 쓰임새 :
176
+
// document 안에 5초 동안만 추가합니다.
177
177
let message = createMessageUnder(elem, 'Hello, world!');
178
178
document.body.append(message);
179
179
setTimeout(() => message.remove(), 5000);
180
180
```
181
181
182
182
```online
183
-
Click the button to run it:
183
+
실행하려면 버튼을 누르세요.
184
184
185
-
<button id="coords-show-mark">Button with id="coords-show-mark", the message will appear under it</button>
185
+
<button id="coords-show-mark">id="coords-show-mark"인 버튼이고 메시지는 그 아래에 나타납니다.</button>
186
186
```
187
187
188
-
The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on. That's easy, as we have all the coordinates and sizes of the element.
188
+
코드를 수정하면 왼쪽, 오른쪽, 아래쪽에 메시지를 표시할 수 있고 CSS 애니메이션을 적용하여 '페이드 인' 등도 할 수 있습니다. 모든 좌푯값과 요소의 크기만 알면 쉽게 할 수 있습니다.
189
189
190
-
But note the important detail: when the page is scrolled, the message flows away from the button.
190
+
그러나 중요한 주의사항이 있습니다. 페이지를 스크롤 하면 메시지가 버튼에서 떨어지게 됩니다.
191
191
192
-
The reason is obvious: the message element relies on `position:fixed`, so it remains at the same place of the window while the page scrolls away.
192
+
이유는 분명합니다. 메시지 요소가 `position:fixed`이기 때문에 페이지가 스크롤 되어도 window 기준으로 같은 지점에 남아 있게 됩니다.
193
193
194
-
To change that, we need to use document-based coordinates and `position:absolute`.
194
+
이것을 바꾸고 싶으면 document 기반 좌표와 `position:absolute`를 사용해야 합니다.
195
195
196
-
## Document coordinates [#getCoords]
196
+
## document 좌표 [#getCoords]
197
197
198
-
Document-relative coordinates start from the upper-left corner of the document, not the window.
198
+
document 기준 좌표는 window가 아닌 document 상단 왼쪽 모서리에서부터 시작합니다.
199
199
200
-
In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` on top.
We can use `position:absolute` and `top/left` to put something at a certain place of the document, so that it remains there during a page scroll. But we need the right coordinates first.
202
+
document의 특정 지점에 무언가를 위치시킬 때 `position:absolute`와 `top/left`를 사용하면 페이지를 스크롤 해도 한자리에 있게 할 수 있습니다. 그러려면 우선 정확한 좌표가 있어야 합니다.
203
203
204
-
There's no standard method to get the document coordinates of an element. But it's easy to write it.
204
+
요소의 document 좌표를 얻는 표준 메서드는 없습니다. 하지만 쉽게 작성할 수 있습니다.
205
205
206
-
The two coordinate systems are connected by the formula:
207
-
- `pageY` = `clientY` + height of the scrolled-out vertical part of the document.
208
-
- `pageX` = `clientX` + width of the scrolled-out horizontal part of the document.
206
+
두 좌표 체계는 다음 수식에 의해 연관됩니다.
207
+
- `pageY` = `clientY` + document에서 스크롤 되어 수직으로 밀려난 부분의 높이
208
+
- `pageX` = `clientX` + document에서 스크롤 되어 수평으로 밀려난 부분의 너비
209
209
210
-
The function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them:
210
+
다음 `getCoords(elem)` 함수는 `elem.getBoundingClientRect()`에서 window 좌표를 얻고 여기에 현재 스크롤 된 위치를 더합니다.
211
211
212
212
```js
213
-
// get document coordinates of the element
213
+
// 요소의 document 좌표를 얻습니다
214
214
function getCoords(elem) {
215
215
let box = elem.getBoundingClientRect();
216
216
@@ -223,9 +223,9 @@ function getCoords(elem) {
223
223
}
224
224
```
225
225
226
-
If in the example above we used it with `position:absolute`, then the message would stay near the element on scroll.
226
+
위의 예제에서 `position:absolute`을 사용했다면 메시지는 스크롤을 해도 요소 근처에 머물게 됩니다.
227
227
228
-
The modified `createMessageUnder` function:
228
+
다음은 수정된 `createMessageUnder` 함수입니다.
229
229
230
230
```js
231
231
function createMessageUnder(elem, html) {
@@ -243,13 +243,13 @@ function createMessageUnder(elem, html) {
243
243
}
244
244
```
245
245
246
-
## Summary
246
+
## 요약
247
247
248
-
Any point on the page has coordinates:
248
+
페이지의 어떤 지점이라도 다음 좌표를 갖습니다.
249
249
250
-
1. Relative to the window -- `elem.getBoundingClientRect()`.
251
-
2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll.
250
+
1. window 기준 -- `elem.getBoundingClientRect()`
251
+
2. document 기준 -- `elem.getBoundingClientRect()` + 현재 페이지 스크롤 위치
252
252
253
-
Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`.
253
+
window 좌표는 `position:fixed`와 사용하기 좋고 document 좌표는 `position:absolute`와 사용하기 좋습니다.
254
254
255
-
Both coordinate systems have their pros and cons; there are times we need one or the other one, just like CSS `position` `absolute` and `fixed`.
255
+
두 좌표 체계 모두 장단점이 있습니다. CSS의 `position`, `absolute`, `fixed`처럼 이게 필요할 때도 있고 저게 필요할 때도 있습니다.
0 commit comments