[신규 번역] Part 2 - 2.1 브라우저 이벤트 소개 과제 1-3 번역 (#1539)

boyeonihn · Violet-Bora-Lee · commit 3219d5410cee · 2022-10-09T17:00:46.000+09:00
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -7,13 +7,13 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="Text를 숨기려면 클릭하세요." />
 
   <div id="text">Text</div>
 
   <script>
-    // Here it doesn't matter how we hide the text,
-    // could also use style.display:
+    // 텍스트를 숨기는 방법은 다양한데, 그 방법은 중요하지 않습니다.
+    // style.display를 사용해도 됩니다. 
     document.getElementById('hider').onclick = function() {
       document.getElementById('text').hidden = true;
     }
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
@@ -7,12 +7,12 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="Text를 숨기려면 클릭하세요." />
 
   <div id="text">Text</div>
 
   <script>
-    /* your code */
+    /* 코드를 여기에 작성하세요 */
   </script>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Hide on click
+# 버튼 클릭 시 특정 요소 숨기기
 
-Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+`button`을 클릭하면 `<div id="text">`가 사라지도록 `button`에 자바스크립트를 추가해봅시다. 
 
-The demo:
+데모:
 
 [iframe border=1 src="solution" height=80]
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,4 +1,4 @@
-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">
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -2,11 +2,11 @@ importance: 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">
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,8 +1,8 @@
-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`가 있지만 첫 번째 핸들러는`removeEventListener`에 의해 지워지지 않았기 때문에 트리거됩니다. 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해주어야 합니다. `removeEventListener`에 첫 번째 핸들러의 함수와 똑같이 생긴 함수를 전달했지만, 엄연히 다른 함수이기 때문에 `removeEventListener`를 사용해도 첫 번째 이벤트 핸들러는 지워지지 않습니다.
 
-To remove a function object, we need to store a reference to it, like this:
+이미 등록한 핸들러 함수를 삭제하려면 다음과 같이 함수에 대한 참조를 저장해야 합니다.
 
 ```js
 function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+핸들러 `button.onclick`은 독립적으로 동작합니다. 따라서 `addEventListener`와 함께 동작하였습니다.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -2,11 +2,11 @@ importance: 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"));

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-Can use `this` in the handler to reference "the element itself" here:
	`1`	+핸들러 내부에 `this`를 사용해 '요소 자체'를 참조할 수 있습니다.
`2`	`2`
`3`	`3`	```html run height=50
`4`	`4`	`<input type="button" onclick="this.hidden=true" value="Click to hide">`