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 index 10945ccd78..cf7dc5e7ae 100644 --- 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 @@ -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 `` tag, that is `document.documentElement`. +문서는 `` 태그, 즉 `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 whole HTML document 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 (<100px to the end) + // 유저가 충분히 멀리 스크롤 했을 경우 (끝으로부터 100px 미만) if (windowRelativeBottom < document.documentElement.clientHeight + 100) { - // let's add more data + // 데이터를 추가합니다 document.body.insertAdjacentHTML("beforeend", `

Date: ${new Date()}

`); } } } -``` +``` \ No newline at end of file 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 index 7c8d14fca6..a6f180de7b 100644 --- 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 @@ -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 like 0-50px away from the real document bottom. +1. **스크롤은 '탄력적'입니다.** 일부 브라우저·기기에서 문서의 시작이나 끝을 약간 넘어가더라도 스크롤이 가능합니다 (빈 영역이 노출된 후 문서가 알아서 '정상'으로 되돌아갑니다). +2. **스크롤은 부정확합니다.** 페이지 끝까지 스크롤을 했을 때 실제 문서의 끝과는 약 0-50px 정도 차이가 날 수 있습니다. -So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end. +그래서 '끝까지 스크롤'을 한다는 것은 방문자가 문서 끝에서 100px 이상 떨어져 있지 않음을 의미해야 합니다. -P.S. In real life we may want to show "more messages" or "more goods". +참고: 실생활에서 '더 많은 메시지' 또는 '더 많은 상품'을 보여주고 싶을 수 있습니다. \ No newline at end of file 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 index c9f0f62255..dc2e5e1f19 100644 --- 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 @@ -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"] \ No newline at end of file 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 index 1649251b91..dc97b5f9ca 100644 --- 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 @@ -1,13 +1,13 @@ -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 `` bottom: +또는 `` 에 아래 코드를 삽입하세요. ```js -// ...the page content is above... +// ...페이지 콘텐츠는 위에 있습니다... function isVisible(elem) { @@ -15,17 +15,17 @@ function isVisible(elem) { 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() { @@ -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`도 있습니다. \ No newline at end of file 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 index 3237889827..4ca74503fc 100644 --- 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 @@ -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 with placeholders, like this: +목표를 달성하기 위해 이미지를 바로 표시하지 않고 아래와 같이 플레이스홀더(placeholders)로 대체하기로 했습니다. ```html ``` -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. +재추신: 수평 스크롤이 아닌 수직 스크롤만 처리됩니다. \ No newline at end of file