Aug 22, 2020
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
 The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.
 문제 해결의 핵심은 방문자가 문서 끝에 머무르는 동안에 더 많은 날짜들을 페이지에 추가하는 (혹은 실생활 속 물건들을 더 불러오는) 함수입니다.

 We can call it immediately and add as a`window.onscroll`handler.
 이 함수를 바로 호출할 수도 있고,`window.onscroll`핸들러로 추가할 수도 있습니다.

 The most important question is: "How do we detect that the page is scrolled to bottom?"
 여기서 가장 중요한 것은 '페이지 끝까지 스크롤 되었을 때 어떻게 알아챌 것인가?'라는 궁금증입니다.

 Let's use window-relative coordinates.
 창-상대 좌표를 이용해보죠.

 The document is represented (and contained) within`<html>`tag, that is`document.documentElement`.
 문서는`<html>`태그, 즉`document.documentElement` 내에 표시됩니다(그리고 포함됩니다).

 We can get window-relative coordinates of the whole document as`document.documentElement.getBoundingClientRect()`, the`bottom`property will be window-relative coordinate of the document bottom.
 창-상대 좌표는`document.documentElement.getBoundingClientRect()`로 전체 문서에 대해 얻을 수 있으며,`bottom`프로퍼티는 문서 하단에 대한 창-상대 좌표를 의미하게 됩니다.

 For instance, if the height of the wholeHTMLdocument is `2000px`, then:
 예를 들어 전체HTML문서 높이가 `2000px`이라면,

 ```js
 //when we're on the top of the page
 //window-relative top = 0
 //페이지 상단에 위치할 때
 //창-상대 좌표 top = 0
 document.documentElement.getBoundingClientRect().top = 0

 //window-relative bottom = 2000
 //the document is long, so that is probably far beyond the window bottom
 //창-상대 좌표 bottom = 2000
 //문서가 길기 때문에 아마 하단 영역과 거리가 꽤 멀 것입니다.
 document.documentElement.getBoundingClientRect().bottom = 2000
 ```

 If we scroll`500px` below, then:
 아래로`500px`만큼 스크롤 한다면,

 ```js
 //document top is above the window 500px
 //문서 상단이 창 500px 위에 위치합니다.
 document.documentElement.getBoundingClientRect().top = -500
 //document bottom is 500px closer
 //문서 하단과는 500px만큼 가까워집니다.
 document.documentElement.getBoundingClientRect().bottom = 1500
 ```

 When we scroll till the end, assuming that the window height is `600px`:
 창 높이가 `600px`이라고 가정하고 끝까지 스크롤 할 경우:


 ```js
 //document top is above the window 1400px
 //문서 상단이 창 1400px 위에 위치합니다.
 document.documentElement.getBoundingClientRect().top = -1400
 //document bottom is below the window 600px
 //문서 하단이 창 600px 아래에 위치합니다.
 document.documentElement.getBoundingClientRect().bottom = 600
 ```

 Please note that the`bottom`can't be`0`, because it never reaches the window top. The lowest limit of the`bottom`coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up.
 문서`bottom`영역은 창 상단에 도달할 수 없기에`0`이 될 수 없음을 주의해야 합니다.`bottom`좌표 최솟값은 창 높이(600 가정)이며 더 위로 스크롤 할 수 없습니다.

 We can obtain the window height as`document.documentElement.clientHeight`.
 창 높이는`document.documentElement.clientHeight`로 얻을 수 있습니다.

 For our task, we need to know when the document bottom is not no more than`100px` away from it (that is:`600-700px`, if the height is `600`).
 과제를 해결하기 위해 문서 하단이`100px`이하 (높이가 `600`인 경우`600-700px`) 떨어져 있는지 알아야 합니다.

 So here's the function:
 아래 함수를 확인해보세요.

 ```js
 function populate() {
  while(true) {
    //document bottom
    //문서 하단
    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;

    //if the user scrolled far enough (<100pxto the end)
    //유저가 충분히 멀리 스크롤 했을 경우 (끝으로부터100px미만)
    if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
      //let's add more data
      //데이터를 추가합니다
      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
    }
  }
 }
 ```
 ```
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md

 ---

 #Endless page
 #끝없는 페이지

 Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
 끝이 없는 페이지를 생성합니다. 방문자가 끝까지 스크롤 하면 자동으로 페이지에 현재 날짜를 텍스트로 추가합니다 (방문자가 더 스크롤을 할 수 있도록).

 Like this:
 예시:

 [iframe src="solution" height=200]

 Please note two important features of the scroll:
 스크롤의 두 가지 중요한 특징에 주목하세요.

 1. **The scroll is "elastic".**We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
 2. **The scroll is imprecise.**When we scroll to page end, then we may be in fact like0-50pxaway from the real document bottom.
 1. **스크롤은 '탄력적'입니다.**일부 브라우저·기기에서 문서의 시작이나 끝을 약간 넘어가더라도 스크롤이 가능합니다 (빈 영역이 노출된 후 문서가 알아서 '정상'으로 되돌아갑니다).
 2. **스크롤은 부정확합니다.**페이지 끝까지 스크롤을 했을 때 실제 문서의 끝과는 약0-50px정도 차이가 날 수 있습니다.

 So, "scrolling to the end" should mean that the visitor is no more than100pxaway from the document end.
 그래서 '끝까지 스크롤'을 한다는 것은 방문자가 문서 끝에서100px이상 떨어져 있지 않음을 의미해야 합니다.

 P.S. In real life we may want to show "more messages" or "more goods".
 참고: 실생활에서 '더 많은 메시지' 또는 '더 많은 상품'을 보여주고 싶을 수 있습니다.
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
 importance: 5

 ---
 —

 #Up/down button
 #위·아래 버튼

 Create a "to the top" button to help with page scrolling.
 페이지 스크롤을 도와주는 '상단으로' 버튼을 생성합니다.

 It should work like this:
 -While the page is not scrolled down at least for the window height -- it's invisible.
 -When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
 -When the arrow is clicked, the page scrolls to the top.
 상단 이동 버튼은 다음과 같이 동작합니다.
 -페이지가 최소 창 높이만큼 아래로 스크롤 하지 않았을 경우 - 버튼이 노출되지 않습니다.
 -페이지가 창 높이보다 더 아래로 스크롤 될 경우 - '위쪽' 화살표가 좌측 상단 모서리에 표시됩니다. 페이지가 다시 위로 스크롤 된다면 이 화살표는 사라집니다.
 -화살표가 클릭 될 경우 페이지는 상단으로 스크롤 됩니다.

 Like this (top-left corner, scroll to see):
 아래와 같이 말이죠 (스크롤 해서 좌측 상단 모서리 확인).

 [iframe border="1" height="200" link src="solution"]
 [iframe border="1" height="200" link src="solution"]
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
 The`onscroll`handler should check which images are visible and show them.
 `onscroll`핸들러는 어떤 이미지가 노출 가능한지 확인하고 보여주어야 합니다.

 We also want to run it when the page loads, to detect immediately visible images and load them.
 또한 페이지를 로드할 때 보일 수 있는 이미지를 바로 감지하고 불러오기 위해 onscroll 핸들러를 실행시키고 싶습니다.

 The code should execute when the document is loaded, so that it has access to its content.
 코드는 문서를 불러올 때 실행되어야 하고, 이 코드는 문서 콘텐츠에 접근할 수 있어야 합니다.

 Or put it at the`<body>`bottom:
 또는`<body>`에 아래 코드를 삽입하세요.

 ```js
 // ...the page content is above...
 // ...페이지 콘텐츠는 위에 있습니다...

 function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

  //top elem edge is visible?
  //요소의 상단 모서리가 보이는지?
  let topVisible = coords.top > 0 && coords.top < windowHeight;

  //bottom elem edge is visible?
  //요소의 하단 모서리가 보이는지?
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
 }
 ```

 The `showVisible()`function uses the visibility check, implemented by `isVisible()`, to load visible images:
 함수 `showVisible()`은 `isVisible()` 에서 구현한 가시성 검사를 사용해서 화면에 노출 가능한 이미지를 로드합니다.

 ```js
 function showVisible() {
 */!*
 ```

 P.S. The solution also has a variant of`isVisible` that "preloads" images that are within 1 page above/below the current document scroll.
 참고: 해답에는 현재 문서 스크롤의 위·아래에 있는 이미지를 '미리 로드'하는 변형`isVisible`도 있습니다.
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md

 ---

 #Load visible images
 #보이는 이미지 불러오기

 Let's say we have a slow-speed client and want to save their mobile traffic.
 저속 클라이언트가 있고 모바일 트래픽을 절약하고자 한다고 가정하도록 하겠습니다.

 For that purpose we decide not to show images immediately, but rather replace them withplaceholders, like this:
 목표를 달성하기 위해 이미지를 바로 표시하지 않고 아래와 같이 플레이스홀더(placeholders)로 대체하기로 했습니다.

 ```html
 <img *!*src="placeholder.svg"*/!* width="128" height="128" *!*data-src="real.jpg"*/!*>
 ```

 So, initially all images are`placeholder.svg`. When the page scrolls to the position where the user can see the image -- we change`src` to the one in`data-src`, and so the image loads.
 따라서 처음에는 모든 이미지가`placeholder.svg`입니다. 사용자가 이미지를 볼 수 있는 위치로 스크롤 할 경우 -`src`를`data-src` 안에 있는 값으로 변경해서 이미지를 불러옵니다.

 Here's an example in`iframe`:
 `iframe` 에 예시가 있습니다.

 [iframe src="solution"]

 Scroll it to see images load "on-demand".
 예제를 스크롤 해서 필요할 때 바로 (on-demand) 이미지가 로드되는 것을 확인해보세요.

 Requirements:
 -When the page loads, those images that are on-screen should load immediately, prior to any scrolling.
 -Some images may be regular, without`data-src`. The code should not touch them.
 -Once an image is loaded, it should not reload any more when scrolled in/out.
 요구사항:
 -페이지가 로드될 때 화면에 있는 이미지는 스크롤전에 즉시 로드되어야 합니다.
 -어떤 이미지는`data-src` 없이 일반적일 수 있습니다. 코드가 해당 이미지를 건드리면 안 됩니다.
 -이미지가 한 번 로드되면 스크롤에 영향을 받아 다시 로드해서는 안 됩니다.

 P.S. If you can, make a more advanced solution that would "preload" images that are one page below/after the current position.
 추신: 가능하다면 현재 위치에서 한 페이지 아래·뒤에 있는 이미지를 '미리 로드'하는 개선된 해결책을 만들어보세요.

 P.P.S. Only vertical scroll is to be handled, no horizontal scrolling.
 재추신: 수평 스크롤이 아닌 수직 스크롤만 처리됩니다.
Original file line number	Diff line number	Diff line change
		@@ -1,65 +1,65 @@
		The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.
		문제 해결의 핵심은 방문자가 문서 끝에 머무르는 동안에 더 많은 날짜들을 페이지에 추가하는 (혹은 실생활 속 물건들을 더 불러오는) 함수입니다.

		We can call it immediately and add as a`window.onscroll`handler.
		이 함수를 바로 호출할 수도 있고,`window.onscroll`핸들러로 추가할 수도 있습니다.

		The most important question is: "How do we detect that the page is scrolled to bottom?"
		여기서 가장 중요한 것은 '페이지 끝까지 스크롤 되었을 때 어떻게 알아챌 것인가?'라는 궁금증입니다.

		Let's use window-relative coordinates.
		창-상대 좌표를 이용해보죠.

		The document is represented (and contained) within`<html>`tag, that is`document.documentElement`.
		문서는`<html>`태그, 즉`document.documentElement` 내에 표시됩니다(그리고 포함됩니다).

		We can get window-relative coordinates of the whole document as`document.documentElement.getBoundingClientRect()`, the`bottom`property will be window-relative coordinate of the document bottom.
		창-상대 좌표는`document.documentElement.getBoundingClientRect()`로 전체 문서에 대해 얻을 수 있으며,`bottom`프로퍼티는 문서 하단에 대한 창-상대 좌표를 의미하게 됩니다.

		For instance, if the height of the wholeHTMLdocument is `2000px`, then:
		예를 들어 전체HTML문서 높이가 `2000px`이라면,

		```js
		//when we're on the top of the page
		//window-relative top = 0
		//페이지 상단에 위치할 때
		//창-상대 좌표 top = 0
		document.documentElement.getBoundingClientRect().top = 0

		//window-relative bottom = 2000
		//the document is long, so that is probably far beyond the window bottom
		//창-상대 좌표 bottom = 2000
		//문서가 길기 때문에 아마 하단 영역과 거리가 꽤 멀 것입니다.
		document.documentElement.getBoundingClientRect().bottom = 2000
		```

		If we scroll`500px` below, then:
		아래로`500px`만큼 스크롤 한다면,

		```js
		//document top is above the window 500px
		//문서 상단이 창 500px 위에 위치합니다.
		document.documentElement.getBoundingClientRect().top = -500
		//document bottom is 500px closer
		//문서 하단과는 500px만큼 가까워집니다.
		document.documentElement.getBoundingClientRect().bottom = 1500
		```

		When we scroll till the end, assuming that the window height is `600px`:
		창 높이가 `600px`이라고 가정하고 끝까지 스크롤 할 경우:


		```js
		//document top is above the window 1400px
		//문서 상단이 창 1400px 위에 위치합니다.
		document.documentElement.getBoundingClientRect().top = -1400
		//document bottom is below the window 600px
		//문서 하단이 창 600px 아래에 위치합니다.
		document.documentElement.getBoundingClientRect().bottom = 600
		```

		Please note that the`bottom`can't be`0`, because it never reaches the window top. The lowest limit of the`bottom`coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up.
		문서`bottom`영역은 창 상단에 도달할 수 없기에`0`이 될 수 없음을 주의해야 합니다.`bottom`좌표 최솟값은 창 높이(600 가정)이며 더 위로 스크롤 할 수 없습니다.

		We can obtain the window height as`document.documentElement.clientHeight`.
		창 높이는`document.documentElement.clientHeight`로 얻을 수 있습니다.

		For our task, we need to know when the document bottom is not no more than`100px` away from it (that is:`600-700px`, if the height is `600`).
		과제를 해결하기 위해 문서 하단이`100px`이하 (높이가 `600`인 경우`600-700px`) 떨어져 있는지 알아야 합니다.

		So here's the function:
		아래 함수를 확인해보세요.

		```js
		function populate() {
		while(true) {
		//document bottom
		//문서 하단
		let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;

		//if the user scrolled far enough (<100pxto the end)
		//유저가 충분히 멀리 스크롤 했을 경우 (끝으로부터100px미만)
		if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
		//let's add more data
		//데이터를 추가합니다
		document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
		}
		}
		}
		```
		```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,19 +2,19 @@ importance: 5

		---

		#Endless page
		#끝없는 페이지

		Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
		끝이 없는 페이지를 생성합니다. 방문자가 끝까지 스크롤 하면 자동으로 페이지에 현재 날짜를 텍스트로 추가합니다 (방문자가 더 스크롤을 할 수 있도록).

		Like this:
		예시:

		[iframe src="solution" height=200]

		Please note two important features of the scroll:
		스크롤의 두 가지 중요한 특징에 주목하세요.

		1. The scroll is "elastic".We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
		2. The scroll is imprecise.When we scroll to page end, then we may be in fact like0-50pxaway from the real document bottom.
		1. 스크롤은 '탄력적'입니다.일부 브라우저·기기에서 문서의 시작이나 끝을 약간 넘어가더라도 스크롤이 가능합니다 (빈 영역이 노출된 후 문서가 알아서 '정상'으로 되돌아갑니다).
		2. 스크롤은 부정확합니다.페이지 끝까지 스크롤을 했을 때 실제 문서의 끝과는 약0-50px정도 차이가 날 수 있습니다.

		So, "scrolling to the end" should mean that the visitor is no more than100pxaway from the document end.
		그래서 '끝까지 스크롤'을 한다는 것은 방문자가 문서 끝에서100px이상 떨어져 있지 않음을 의미해야 합니다.

		P.S. In real life we may want to show "more messages" or "more goods".
		참고: 실생활에서 '더 많은 메시지' 또는 '더 많은 상품'을 보여주고 싶을 수 있습니다.
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,16 @@
		importance: 5

		---
		—

		#Up/down button
		#위·아래 버튼

		Create a "to the top" button to help with page scrolling.
		페이지 스크롤을 도와주는 '상단으로' 버튼을 생성합니다.

		It should work like this:
		-While the page is not scrolled down at least for the window height -- it's invisible.
		-When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
		-When the arrow is clicked, the page scrolls to the top.
		상단 이동 버튼은 다음과 같이 동작합니다.
		-페이지가 최소 창 높이만큼 아래로 스크롤 하지 않았을 경우 - 버튼이 노출되지 않습니다.
		-페이지가 창 높이보다 더 아래로 스크롤 될 경우 - '위쪽' 화살표가 좌측 상단 모서리에 표시됩니다. 페이지가 다시 위로 스크롤 된다면 이 화살표는 사라집니다.
		-화살표가 클릭 될 경우 페이지는 상단으로 스크롤 됩니다.

		Like this (top-left corner, scroll to see):
		아래와 같이 말이죠 (스크롤 해서 좌측 상단 모서리 확인).

		[iframe border="1" height="200" link src="solution"]
		[iframe border="1" height="200" link src="solution"]
Original file line number	Diff line number	Diff line change
		@@ -1,31 +1,31 @@
		The`onscroll`handler should check which images are visible and show them.
		`onscroll`핸들러는 어떤 이미지가 노출 가능한지 확인하고 보여주어야 합니다.

		We also want to run it when the page loads, to detect immediately visible images and load them.
		또한 페이지를 로드할 때 보일 수 있는 이미지를 바로 감지하고 불러오기 위해 onscroll 핸들러를 실행시키고 싶습니다.

		The code should execute when the document is loaded, so that it has access to its content.
		코드는 문서를 불러올 때 실행되어야 하고, 이 코드는 문서 콘텐츠에 접근할 수 있어야 합니다.

		Or put it at the`<body>`bottom:
		또는`<body>`에 아래 코드를 삽입하세요.

		```js
		// ...the page content is above...
		// ...페이지 콘텐츠는 위에 있습니다...

		function isVisible(elem) {

		let coords = elem.getBoundingClientRect();

		let windowHeight = document.documentElement.clientHeight;

		//top elem edge is visible?
		//요소의 상단 모서리가 보이는지?
		let topVisible = coords.top > 0 && coords.top < windowHeight;

		//bottom elem edge is visible?
		//요소의 하단 모서리가 보이는지?
		let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

		return topVisible \|\| bottomVisible;
		}
		```

		The `showVisible()`function uses the visibility check, implemented by `isVisible()`, to load visible images:
		함수 `showVisible()`은 `isVisible()` 에서 구현한 가시성 검사를 사용해서 화면에 노출 가능한 이미지를 로드합니다.

		```js
		function showVisible() {
Expand All		@@ -46,4 +46,4 @@ window.onscroll = showVisible;
		/!
		```

		P.S. The solution also has a variant of`isVisible` that "preloads" images that are within 1 page above/below the current document scroll.
		참고: 해답에는 현재 문서 스크롤의 위·아래에 있는 이미지를 '미리 로드'하는 변형`isVisible`도 있습니다.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,29 +2,29 @@ importance: 4

		---

		#Load visible images
		#보이는 이미지 불러오기

		Let's say we have a slow-speed client and want to save their mobile traffic.
		저속 클라이언트가 있고 모바일 트래픽을 절약하고자 한다고 가정하도록 하겠습니다.

		For that purpose we decide not to show images immediately, but rather replace them withplaceholders, like this:
		목표를 달성하기 위해 이미지를 바로 표시하지 않고 아래와 같이 플레이스홀더(placeholders)로 대체하기로 했습니다.

		```html
		<img !src="placeholder.svg"/! width="128" height="128" !data-src="real.jpg"/!>
		```

		So, initially all images are`placeholder.svg`. When the page scrolls to the position where the user can see the image -- we change`src` to the one in`data-src`, and so the image loads.
		따라서 처음에는 모든 이미지가`placeholder.svg`입니다. 사용자가 이미지를 볼 수 있는 위치로 스크롤 할 경우 -`src`를`data-src` 안에 있는 값으로 변경해서 이미지를 불러옵니다.

		Here's an example in`iframe`:
		`iframe` 에 예시가 있습니다.

		[iframe src="solution"]

		Scroll it to see images load "on-demand".
		예제를 스크롤 해서 필요할 때 바로 (on-demand) 이미지가 로드되는 것을 확인해보세요.

		Requirements:
		-When the page loads, those images that are on-screen should load immediately, prior to any scrolling.
		-Some images may be regular, without`data-src`. The code should not touch them.
		-Once an image is loaded, it should not reload any more when scrolled in/out.
		요구사항:
		-페이지가 로드될 때 화면에 있는 이미지는 스크롤전에 즉시 로드되어야 합니다.
		-어떤 이미지는`data-src` 없이 일반적일 수 있습니다. 코드가 해당 이미지를 건드리면 안 됩니다.
		-이미지가 한 번 로드되면 스크롤에 영향을 받아 다시 로드해서는 안 됩니다.

		P.S. If you can, make a more advanced solution that would "preload" images that are one page below/after the current position.
		추신: 가능하다면 현재 위치에서 한 페이지 아래·뒤에 있는 이미지를 '미리 로드'하는 개선된 해결책을 만들어보세요.

		P.P.S. Only vertical scroll is to be handled, no horizontal scrolling.
		재추신: 수평 스크롤이 아닌 수직 스크롤만 처리됩니다.