[브라우저 이벤트 소개] 과제 번역

2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md

@@ -1,11 +1,11 @@
-importance: 5
+중요도: 5
 
 ---
 
-# Hide on click
+# 클릭하여 숨기기
 
-Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+`button`에 자바스크립트를 추가해 클릭할 때 `<div id="text">`가 사라지게 합니다.
 
-The demo:
+데모:
 
 [iframe border=1 src="solution" height=80]

2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md

@@ -1,5 +1,5 @@
-Can use `this` in the handler to reference "the element itself" here:
+핸들러에서 `this` 를 사용하여 여기서 "요소 자체"를 참조할 수 있습니다.
 
 ```html run height=50
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+<input type="button" onclick="this.hidden=true" value="숨기려면 클릭해 주세요.">
 ```

2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md

@@ -1,12 +1,12 @@
-importance: 5
+중요도: 5
 
 ---
 
-# Hide self
+# 자기 자신 숨기기
 
-Create a button that hides itself on click.
+클릭할 때 자기 자신을 숨기는 버튼을 만드세요.
 
 ```online
-Like this:
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+이것처럼 말이죠:
+<input type="button" onclick="this.hidden=true" value="숨기려면 클릭해 주세요.">
 ```

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md

@@ -1,16 +1,16 @@
-The answer: `1` and `2`.
+정답: `1` 그리고 `2`.
 
-The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+첫 번째 핸들러는 `removeEventListener`에 의해 제거되지 않았기 때문에 트리거 됩니다. 핸들러를 제거하기 위해서는 할당된 함수를 정확히 전달해야 합니다. 그리고 코드에서 새로운 함수가 전달되는데, 기능은 같아 보이지만 다른 함수입니다.
 
-To remove a function object, we need to store a reference to it, like this:
+함수 객체를 제거하려면, 다음과 같은 참조를 저장해야 합니다.
 
 ```js
 function handler() {
   alert(1);
 }
 
-button.addEventListener("click", handler);
-button.removeEventListener("click", handler);
+button.addEventListener("클릭해 주세요.", handler);
+button.removeEventListener("클릭해 주세요.", handler);
 ```
 
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+핸들러 `button.onclick`는 독립적으로 작동하며 `addEventListener`를 추가합니다.

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md

@@ -1,17 +1,17 @@
-importance: 5
+중요도: 5
 
 ---
 
-# Which handlers run?
+# 어떤 핸들러가 실행될까요?
 
-There's a button in the variable. There are no handlers on it.
+변수에 버튼이 있습니다. 여기에 핸들러는 없습니다.
 
-Which handlers run on click after the following code? Which alerts show up?
+다음 코드 클릭 후 어떤 핸들러가 실행되나요? 어떤 경고가 출력 되나요?
 
 ```js no-beautify
-button.addEventListener("click", () => alert("1"));
+button.addEventListener("클릭해 주세요.", () => alert("1"));
 
-button.removeEventListener("click", () => alert("1"));
+button.removeEventListener("클릭해 주세요.", () => alert("1"));
 
 button.onclick = () => alert(2);
 ```

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md

@@ -1,21 +1,21 @@
-importance: 5
+중요도: 5
 
 ---
 
-# Move the ball across the field
+# 공을 운동장 건너편으로 옮겨 보세요.
 
-Move the ball across the field to a click. Like this:
+클릭하여 공을 운동장 건너편으로 옮겨 보세요. 아래와 같이 말이죠:
 
 [iframe src="solution" height="260" link]
 
-Requirements:
+요구사항:
 
-- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
-- CSS-animation is welcome.
-- The ball must not cross field boundaries.
-- When the page is scrolled, nothing should break.
+- 클릭 시 공의 중심은 마우스 포인터 바로 아래에 위치해야 합니다(가능한 필드 가장자리를 넘지 않고).
+- CSS-애니메이션을 사용해도 괜찮습니다.
+- 공은 절대로 필드 가장자리를 넘으면 안됩니다.
+- 페이지를 스크롤 할 때, 어떤것도 깨지지 않아야 합니다.
 
 Notes:
 
-- The code should also work with different ball and field sizes, not be bound to any fixed values.
-- Use properties `event.clientX/event.clientY` for click coordinates.
+- 코드는 다른 공과 필드 크기에서도 동작해야 하며, 고정된 값에 영향을 받지 않습니다.
+- 클릭 좌표에는 `event.clientX/event.clientY`을 사용하세요.