Aug 28, 2020 · Sep 20, 2020 · Nov 3, 2020 · Nov 3, 2020
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md
 The solution is:
 해답:

 ```js
 let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
 ```

 In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part.
 다르게 본다면 '(최대 높이) 빼기 (스크롤바에 가려진 윗부분) 빼기 (보이는 부분)'이 스크롤바에 가려진 바닥 부분입니다.
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md

 ---

 #What's the scroll from the bottom?
 #페이지 맨 밑부터 현재 스크롤 위치까지의 길이

 The`elem.scrollTop`property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it`scrollBottom`)?
 `elem.scrollTop`프로퍼티는 스크롤바에 의해 상단으로부터 가려진 화면의 크기를 가리킵니다. 바닥 스크롤(`scrollBottom`이라고 부릅시다)의 크기를 구할 수 있을까요?

 Write the code that works for an arbitrary`elem`.
 임의의 마우스 스크롤 요소`elem`으로 작동하는 코드를 작성해보세요.

 P.S.Please check your code: if there's no scroll or the element is fully scrolled down, then it should return`0`.
 P.S.코드를 확인해보세요. 만약 스크롤이 없거나 요소가 완전히 아래로 스크롤 됐을 때, 무조건`0`을 반환하도록 하세요.
diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md
 To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.
 스크롤바의 너비를 구하기 위해서는 스크롤이 포함됐지만 테두리와 패딩이 없는 요소를 만들어야 합니다.

 Then the difference between its full width`offsetWidth` and the inner content area width`clientWidth` will be exactly the scrollbar:
 콘텐츠의 전체 너비`offsetWidth`와 콘텐츠 내의 공간 너비`clientWidth`의 차이값은 스크롤바의 크기가 됩니다.

 ```js run
 //create a divwith the scroll
 //scroll이 포함된 div생성하기
 let div = document.createElement('div');

 div.style.overflowY = 'scroll';
 div.style.width = '50px';
 div.style.height = '50px';

 //must put it in the document, otherwise sizes will be 0
 //document 안에 div를 꼭 넣어야 하며, 그렇지 않으면 div의 크기는 0이 됩니다.
 document.body.append(div);
 let scrollWidth = div.offsetWidth - div.clientWidth;

diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md

 ---

 #What is the scrollbar width?
 #스크롤바의 너비

 Write the code that returns the width of a standard scrollbar.
 표준 스크롤바의 너비를 반환하는 코드를 작성해보세요.

 For Windows it usually varies between`12px` and`20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens),then it may be`0px`.
 Windows에서 보통 스크롤바의 너비는`12px`과`20px` 사이입니다. 브라우저가 스크롤바 전용 공간을 따로 남겨두지 않았다면(이때 스크롤바는 글자 뒤에 반투명하게 보일 수 있음),스크롤바의 너비는`0px`이 됩니다.

 P.S.The code should work for any HTML document, do not depend on its content.
 P.S.코드는 어떤 HTML 문서에서든 작동해야 하며, 콘텐츠에 의존해선 안 됩니다.
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md
 The ball has`position:absolute`. It means that its`left/top`coordinates are measured from the nearest positioned element, that is`#field` (because it has`position:relative`).
 공은`position:absolute`를 가지고 있습니다. 이는`left/top`좌표가 가장 가까운 위치 요소로부터 측정된다는 의미이며, 그것을`#field`라고 부릅니다. (왜냐하면 필드는`position:relative` 속성을 가지고 있으니까요.)

 The coordinates start from the inner left-upper corner of the field:
 좌표는 필드의 좌측 상단 코너의 내부로부터 시작합니다.

 ![](field.svg)

 The inner field width/height is`clientWidth/clientHeight`. So the field center has coordinates`(clientWidth/2, clientHeight/2)`.
 내부 필드의 너비, 높이는`clientWidth/clientHeight`입니다. 그래서 필드의 중앙은`(clientWidth/2, clientHeight/2)`)의 좌표를 가집니다.

 ...But if we set`ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
 …그러나 우리가`ball.style.left/top`을 중앙 좌표와 같은 값으로 설정한다면 공의 전체가 아닌 공의 좌측 상단 꼭짓점이 중앙에 오게 될 것입니다.

 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```

 Here's how it looks:
 한 번 어떻게 보이는지 살펴봅시다.

 [iframe height=180 src="ball-half"]

 To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
 공의 중앙을 필드의 중앙에 정렬하기 위해서는, 우리는 공을 공의 너비의 절반만큼 왼쪽으로, 높이의 절반만큼 위쪽으로 움직여야 합니다.

 ```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```

 Now the ball is finally centered.
 이제 공이 중앙에 위치하게 됐습니다.

 ````warn header="Attention: the pitfall!"
 ````warn header="주의점: 함정이 있습니다!"

 The code won't work reliably while`<img>` has no width/height:
 코드는`<img>`가 너비와 높이를 가지고 있지 않을 때 제대로 작동하지 않습니다.

 ```html
 <img src="ball.png" id="ball">
 ```
 ````

 When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal`0` until the image finishes loading.
 브라우저가 태그 혹은 CSS로부터 이미지의 너비와 높이를 알지 못할 때, 이미지 로딩이 끝날 때까지 똑같이 이미지의 크기를`0`으로 취급합니다.

 So the value of`ball.offsetWidth` will be`0` until the image loads. That leads to wrong coordinates in the code above.
 그래서 이미지가 불러와 질 때까지`ball.offsetWidth`값은`0`이 될 것입니다. 해당 코드에서는 잘못된 좌표를 불러오게 될 것입니다.

 After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of`ball.offsetWidth` is`0`.
 첫 번째 불러오기 이후, 브라우저는 보통 이미지를 캐시에 저장할 것이고 즉시 사이즈를 갖게 됩니다. 그러나`ball.offsetWidth`의 값은 처음으로 불러와 진`0`이 되겠죠.

 We should fix that by adding `width/height` to `<img>`:
 `<img>`에 `너비, 높이`를 추가함으로써 고쳐야 합니다.

 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```

 ...Or provide the size in CSS:
 …혹은 CSS에서 이미지의 사이즈를 줘야합니다.

 ```css
 #ball {
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md

 ---

 #Place the ball in the field center
 #축구공을 필드 중앙에 놓기

 Here's how the source document looks:
 주어진 HTML document는 이렇게 생겼습니다.

 [iframe src="source" edit link height=180]

 What are coordinates of the field center?
 필드 중앙의 좌표는 무엇일까요?

 Calculate them and use to place the ball into the center of the green field:
 좌표를 계산해 공을 필드의 중앙으로 옮기는 데 이용해봅시다.

 [iframe src="solution" height=180]

 -The element should be moved by JavaScript, not CSS.
 -The code should work with any ball size(`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
 -공 요소는 CSS가 아닌 JavaScript를 이용해 움직여야 합니다.
 -코드는 공 크기(`10`, `20`, `30`픽셀 등)의 크기가 어떻든, 필드의 크기가 어떻든, 주어진 값 뿐만이 아닌 모든 값에서 적용되어야 합니다.

 P.S.Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
 P.S.물론 CSS를 이용해 공을 중앙으로 옮길 수 있겠지만 여기서는 JavaScript만을 사용합니다. 더 나아가 JavaScript를 필히 사용해야 하는 다른 문제들과 더 복잡한 상황을 마주할 겁니다. “준비운동”을 해봅시다.
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md
 Differences:

 1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end.
 2. `getComputedStyle`may return non-numeric width like `"auto"` for an inline element.
 3.`clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner content area *without paddings*.
 4.If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The`clientWidth`property is always the same: scrollbar size is substracted if reserved.
 1. `getComputedStyle(elem).width`가 끝에 `px`과 함께 스트링값을 반환하는 반면에, `clientWidth`는 숫자값을 반환합니다.
 2. `getComputedStyle`은 아마 인라인 요소(inline element)의 `“auto”`와 같은 숫자가 아닌 너비 값을 반환할 것입니다.
 3.CSS 너비 표준과 `box-sizing`은 *패딩을 제외한* 내부 콘텐츠 공간을 가리키는 것에 비해 `clientWidth`는 요소와 패딩이 합쳐진 내부 콘텐츠 공간을 가리킵니다.
 4.스크롤바와 브라우저가 자신을 위한 영역을 따로 둔다면, 몇 브라우저는 CSS 너비(왜냐하면, 더는 콘텐츠에 사용할 수 없기 때문이겠죠.)로부터 해당 영역을 뺄 것이며 몇 브라우저는 빼지 않을 것입니다.`clientWidth`프로퍼티는 항상 같을 것입니다: 스크롤바 사이즈는 영역이 있으면 제외됩니다.
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md

 ---

 #The difference: CSSwidth versus clientWidth
 #차이점: CSS너비 v.s. clientWidth

 What's the difference between`getComputedStyle(elem).width`and `elem.clientWidth`?
 `getComputedStyle(elem).width`와 `elem.clientWidth` 사이의 차이점은 무엇일까요?

 Give at least 3 differences. The more the better.
 최소 세 가지 차이점을 답해주세요. 더 많을수록 좋습니다.
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		The solution is:
		해답:

		```js
		let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
		```

		In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part.
		다르게 본다면 '(최대 높이) 빼기 (스크롤바에 가려진 윗부분) 빼기 (보이는 부분)'이 스크롤바에 가려진 바닥 부분입니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 5

		---

		#What's the scroll from the bottom?
		#페이지 맨 밑부터 현재 스크롤 위치까지의 길이

		The`elem.scrollTop`property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it`scrollBottom`)?
		`elem.scrollTop`프로퍼티는 스크롤바에 의해 상단으로부터 가려진 화면의 크기를 가리킵니다. 바닥 스크롤(`scrollBottom`이라고 부릅시다)의 크기를 구할 수 있을까요?

		Write the code that works for an arbitrary`elem`.
		임의의 마우스 스크롤 요소`elem`으로 작동하는 코드를 작성해보세요.

		P.S.Please check your code: if there's no scroll or the element is fully scrolled down, then it should return`0`.
		P.S.코드를 확인해보세요. 만약 스크롤이 없거나 요소가 완전히 아래로 스크롤 됐을 때, 무조건`0`을 반환하도록 하세요.
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,16 @@
		To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.
		스크롤바의 너비를 구하기 위해서는 스크롤이 포함됐지만 테두리와 패딩이 없는 요소를 만들어야 합니다.

		Then the difference between its full width`offsetWidth` and the inner content area width`clientWidth` will be exactly the scrollbar:
		콘텐츠의 전체 너비`offsetWidth`와 콘텐츠 내의 공간 너비`clientWidth`의 차이값은 스크롤바의 크기가 됩니다.

		```js run
		//create a divwith the scroll
		//scroll이 포함된 div생성하기
		let div = document.createElement('div');

		div.style.overflowY = 'scroll';
		div.style.width = '50px';
		div.style.height = '50px';

		//must put it in the document, otherwise sizes will be 0
		//document 안에 div를 꼭 넣어야 하며, 그렇지 않으면 div의 크기는 0이 됩니다.
		document.body.append(div);
		let scrollWidth = div.offsetWidth - div.clientWidth;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 3

		---

		#What is the scrollbar width?
		#스크롤바의 너비

		Write the code that returns the width of a standard scrollbar.
		표준 스크롤바의 너비를 반환하는 코드를 작성해보세요.

		For Windows it usually varies between`12px` and`20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens),then it may be`0px`.
		Windows에서 보통 스크롤바의 너비는`12px`과`20px` 사이입니다. 브라우저가 스크롤바 전용 공간을 따로 남겨두지 않았다면(이때 스크롤바는 글자 뒤에 반투명하게 보일 수 있음),스크롤바의 너비는`0px`이 됩니다.

		P.S.The code should work for any HTML document, do not depend on its content.
		P.S.코드는 어떤 HTML 문서에서든 작동해야 하며, 콘텐츠에 의존해선 안 됩니다.
Original file line number	Diff line number	Diff line change
		@@ -1,53 +1,53 @@
		The ball has`position:absolute`. It means that its`left/top`coordinates are measured from the nearest positioned element, that is`#field` (because it has`position:relative`).
		공은`position:absolute`를 가지고 있습니다. 이는`left/top`좌표가 가장 가까운 위치 요소로부터 측정된다는 의미이며, 그것을`#field`라고 부릅니다. (왜냐하면 필드는`position:relative` 속성을 가지고 있으니까요.)

		The coordinates start from the inner left-upper corner of the field:
		좌표는 필드의 좌측 상단 코너의 내부로부터 시작합니다.

		![](field.svg)

		The inner field width/height is`clientWidth/clientHeight`. So the field center has coordinates`(clientWidth/2, clientHeight/2)`.
		내부 필드의 너비, 높이는`clientWidth/clientHeight`입니다. 그래서 필드의 중앙은`(clientWidth/2, clientHeight/2)`)의 좌표를 가집니다.

		...But if we set`ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
		…그러나 우리가`ball.style.left/top`을 중앙 좌표와 같은 값으로 설정한다면 공의 전체가 아닌 공의 좌측 상단 꼭짓점이 중앙에 오게 될 것입니다.

		```js
		ball.style.left = Math.round(field.clientWidth / 2) + 'px';
		ball.style.top = Math.round(field.clientHeight / 2) + 'px';
		```

		Here's how it looks:
		한 번 어떻게 보이는지 살펴봅시다.

		[iframe height=180 src="ball-half"]

		To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
		공의 중앙을 필드의 중앙에 정렬하기 위해서는, 우리는 공을 공의 너비의 절반만큼 왼쪽으로, 높이의 절반만큼 위쪽으로 움직여야 합니다.

		```js
		ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
		ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
		```

		Now the ball is finally centered.
		이제 공이 중앙에 위치하게 됐습니다.

		````warn header="Attention: the pitfall!"
		````warn header="주의점: 함정이 있습니다!"

		The code won't work reliably while`<img>` has no width/height:
		코드는`<img>`가 너비와 높이를 가지고 있지 않을 때 제대로 작동하지 않습니다.

		```html
		<img src="ball.png" id="ball">
		```
		````

		When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal`0` until the image finishes loading.
		브라우저가 태그 혹은 CSS로부터 이미지의 너비와 높이를 알지 못할 때, 이미지 로딩이 끝날 때까지 똑같이 이미지의 크기를`0`으로 취급합니다.

		So the value of`ball.offsetWidth` will be`0` until the image loads. That leads to wrong coordinates in the code above.
		그래서 이미지가 불러와 질 때까지`ball.offsetWidth`값은`0`이 될 것입니다. 해당 코드에서는 잘못된 좌표를 불러오게 될 것입니다.

		After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of`ball.offsetWidth` is`0`.
		첫 번째 불러오기 이후, 브라우저는 보통 이미지를 캐시에 저장할 것이고 즉시 사이즈를 갖게 됩니다. 그러나`ball.offsetWidth`의 값은 처음으로 불러와 진`0`이 되겠죠.

		We should fix that by adding `width/height` to `<img>`:
		`<img>`에 `너비, 높이`를 추가함으로써 고쳐야 합니다.

		```html
		<img src="ball.png" !width="40" height="40"/! id="ball">
		```

		...Or provide the size in CSS:
		…혹은 CSS에서 이미지의 사이즈를 줘야합니다.

		```css
		#ball {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,19 +2,19 @@ importance: 5

		---

		#Place the ball in the field center
		#축구공을 필드 중앙에 놓기

		Here's how the source document looks:
		주어진 HTML document는 이렇게 생겼습니다.

		[iframe src="source" edit link height=180]

		What are coordinates of the field center?
		필드 중앙의 좌표는 무엇일까요?

		Calculate them and use to place the ball into the center of the green field:
		좌표를 계산해 공을 필드의 중앙으로 옮기는 데 이용해봅시다.

		[iframe src="solution" height=180]

		-The element should be moved by JavaScript, not CSS.
		-The code should work with any ball size(`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
		-공 요소는 CSS가 아닌 JavaScript를 이용해 움직여야 합니다.
		-코드는 공 크기(`10`, `20`, `30`픽셀 등)의 크기가 어떻든, 필드의 크기가 어떻든, 주어진 값 뿐만이 아닌 모든 값에서 적용되어야 합니다.

		P.S.Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
		P.S.물론 CSS를 이용해 공을 중앙으로 옮길 수 있겠지만 여기서는 JavaScript만을 사용합니다. 더 나아가 JavaScript를 필히 사용해야 하는 다른 문제들과 더 복잡한 상황을 마주할 겁니다. “준비운동”을 해봅시다.
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		Differences:

		1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end.
		2. `getComputedStyle`may return non-numeric width like `"auto"` for an inline element.
		3.`clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner content area without paddings.
		4.If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The`clientWidth`property is always the same: scrollbar size is substracted if reserved.
		1. `getComputedStyle(elem).width`가 끝에 `px`과 함께 스트링값을 반환하는 반면에, `clientWidth`는 숫자값을 반환합니다.
		2. `getComputedStyle`은 아마 인라인 요소(inline element)의 `“auto”`와 같은 숫자가 아닌 너비 값을 반환할 것입니다.
		3.CSS 너비 표준과 `box-sizing`은 패딩을 제외한 내부 콘텐츠 공간을 가리키는 것에 비해 `clientWidth`는 요소와 패딩이 합쳐진 내부 콘텐츠 공간을 가리킵니다.
		4.스크롤바와 브라우저가 자신을 위한 영역을 따로 둔다면, 몇 브라우저는 CSS 너비(왜냐하면, 더는 콘텐츠에 사용할 수 없기 때문이겠죠.)로부터 해당 영역을 뺄 것이며 몇 브라우저는 빼지 않을 것입니다.`clientWidth`프로퍼티는 항상 같을 것입니다: 스크롤바 사이즈는 영역이 있으면 제외됩니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,8 +2,8 @@ importance: 5

		---

		#The difference: CSSwidth versus clientWidth
		#차이점: CSS너비 v.s. clientWidth

		What's the difference between`getComputedStyle(elem).width`and `elem.clientWidth`?
		`getComputedStyle(elem).width`와 `elem.clientWidth` 사이의 차이점은 무엇일까요?

		Give at least 3 differences. The more the better.
		최소 세 가지 차이점을 답해주세요. 더 많을수록 좋습니다.