[과제번역] Part 2 5.3 Resource loading: onload and onerror 과제 번역

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md

@@ -1,4 +1,4 @@
-A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
+모달 창은 다음과 같이 전체 창을 덮는 반투명 `<div id="cover-div">`를 사용하여 구현할 수 있습니다.
 
 ```css
 #cover-div {
@@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div">
 }
 ```
 
-Because the `<div>` covers everything, it gets all clicks, not the page below it.
+`<div>`는 모든 것을 다루기 때문에 그 아래 페이지가 아닌 모든 클릭을 얻습니다.
 
-Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+또한 `body.style.overflowY='hidden'`을 설정하여 페이지 스크롤을 방지할 수 있습니다.
 
-The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
+`불투명`을 원하지 않기 때문에 폼은 `<div>`가 아니라 그 옆에 있어야 합니다.

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md

@@ -2,32 +2,32 @@ importance: 5
 
 ---
 
-# Modal form
+# 모달 폼
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+함수 `showPrompt(html, callback)`를 생성하세요. 함수 showPrompt는 메시지 `html`, 입력 필드 및 `OK·CANCEL`버튼이 있는 폼을 표시하는 함수입니다.
 
-- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered.
-- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
+- 사용자가 텍스트 필드에 무언가를 입력하고 `key:Enter` 혹은 OK 버튼을 누르면 입력한 값으로 `callback(value)`이 호출됩니다.
+- 그렇지 않으면 사용자가 `key:Esc`혹은 CANCEL 버튼을 누르면 `callback(null)`이 호출됩니다.
 
-In both cases that ends the input process and removes the form.
+두 경우 모두 입력 프로세스가 종료하고 양식을 제거합니다.
 
-Requirements:
+요구 사항:
 
-- The form should be in the center of the window.
-- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
-- When the form is shown, the focus should be inside the `<input>` for the user.
-- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
+- 폼은 창 중앙에 있어야 합니다.
+- 폼은 '모달'입니다. 즉, 사용자가 페이지를 닫을 때까지 페이지의 나머지 부분과 상호 작용이 불가능합니다.
+- 폼이 표시될 때 사용자의 `<input>` 내부에 포커스가 있어야 합니다.
+- `key:Tab`·`key:Shift+Tab`은 폼 필드 간에 포커스를 이동해야 하며, 다른 페이지 요소로 이동하지 않도록 합니다.
 
-Usage example:
+사용 예:
 
 ```js
 showPrompt("Enter something<br>...smart :)", function(value) {
   alert(value);
 });
 ```
 
-A demo in the iframe:
+iframe 데모입니다.
 
 [iframe src="solution" height=160 border=1]
 
-P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
+참고: 원본 문서에는 고정된 위치를 가진 폼에 대한 HTML·CSS가 있지만 모달로 만드는 것은 사용자의 몫입니다.

2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md

@@ -1,6 +1,6 @@
 
-The algorithm:
-1. Make `img` for every source.
-2. Add `onload/onerror` for every image.
-3. Increase the counter when either `onload` or `onerror` triggers.
-4. When the counter value equals to the sources count -- we're done: `callback()`.
+알고리즘:
+1. 모든 소스에 대해 `img`를 만듭니다.
+2. 모든 이미지에 대해 `onload·onerror`를 추가합니다.
+3. `onload` 나 `onerror`가 트리거되면 카운터를 증가시킵니다.
+4. 카운터 값이 소스 수와 같으면 `callback()`이 완료됩니다.

2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md

@@ -2,22 +2,22 @@ importance: 4
 
 ---
 
-# Load images with a callback
+# 콜백으로 이미지 로드하기
 
-Normally, images are loaded when they are created. So when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
+일반적으로 이미지는 생성될 때 로드됩니다. 그래서 페이지에 `<img>`를 추가하면 사용자는 사진을 바로 볼 수 없습니다. 브라우저에서 먼저 로드해야 합니다.
 
-To show an image immediately, we can create it "in advance", like this:
+이미지를 바로 표시하기 위해서 다음과 같이 미리 생성할 수 있습니다.
 
 ```js
 let img = document.createElement('img');
 img.src = 'my.jpg';
 ```
 
-The browser starts loading the image and remembers it in the cache. Later, when the same image appears in the document (no matter how), it shows up immediately.
+브라우저는 이미지 로드를 시작하고 캐시에 저장합니다. 나중에 문서에 동일한 이미지가 나타나면 어떻게든 바로 표시됩니다.
 
-**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
+**배열의 모든 이미지를 `sources`에서 로드하고 준비가 되면 `callbak`을 실행하는 함수 `preloadImages(sources, callback)`를 만듭니다.**
 
-For instance, this will show an `alert` after the images are loaded:
+예를 들어 이미지가 로드된 후 `alert`창이 표시됩니다.
 
 ```js
 function loaded() {
@@ -27,10 +27,10 @@ function loaded() {
 preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
 ```
 
-In case of an error, the function should still assume the picture "loaded".
+오류가 발생하더라도 함수는 이미지를 '로드 됨'으로 간주해야 합니다.
 
-In other words, the `callback` is executed when all images are either loaded or errored out.
+즉, `callback`은 모든 이미지가 로드되거나 오류가 발생할 때 실행됩니다.
 
-The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
+콜백은 예를 들어 스크롤 가능한 이미지가 많은 갤러리를 표시하고 모든 이미지가 로드되었는지 확인하려는 경우에 유용합니다.
 
-In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.
+원본 문서에서 테스트 이미지에 대한 링크와 이미지가 로드되었는지 여부를 확인하는 코드를 찾을 수 있습니다. `300`을 출력해야 합니다.