Merge remote-tracking branch 'origin/master'

Violet-Bora-Lee · Violet-Bora-Lee · commit a3d316324f82 · 2021-05-01T14:10:22.000+09:00
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Edit TD on click
+# 클릭해서 TD 수정하기
 
-Make table cells editable on click.
+셀을 클릭하면 해당 셀을 수정할 수 있게 해주는 테이블을 만들어보세요.
 
-- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
-- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
-- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
-- The table may have many cells. Use event delegation.
+- 셀 클릭 시 셀 안에 textarea가 나타나면서 셀에 들어 있는 콘텐츠(HTML)를 '수정'할 수 있어야 합니다. 이때 textarea 크기는 기존 cell 크기와 같아야 합니다.
+- 셀 수정 시 셀 아래쪽에 '완료'와 '취소' 버튼이 노출되도록 하고, 각 버튼을 누르면 수정이 종료, 취소될 수 있게 합니다.
+- 한 번에 하나의 셀만 수정할 수 있어야 합니다. `<td>`가 '수정 중'일 때는 다른 셀을 눌러도 클릭 이벤트가 무시되어야 합니다.
+- 테이블엔 더 많은 셀이 추가될 수 있으므로 이벤트 위임을 사용하세요.
 
-The demo:
+데모:
 
 [iframe src="solution" height=400]
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
@@ -1,6 +1,6 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
+`mouse.onclick`으로 클릭 이벤트를 핸들링하고 `position:fixed`로 쥐가 이동할 수 있도록 준비합니다. 이 상태에서 `mouse.onkeydown`로 화살표 키를 핸들링합니다.
 
-The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
+문제의 핵심은 `keydown`은 오직 포커스된 요소에서만 트리거 된다는 점입니다. 따라서 원하는 요구사항을 구현하려면 요소에 `tabindex`를 추가해줘야 합니다. 그런데 문제에서 HTML을 수정하지 말라고 했으므로 속성값 추가 말고 `mouse.tabIndex` 프로퍼티를 사용해야 합니다.
 
-P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.
+참고: 해답에서 `mouse.onclick`을 `mouse.onfocus`로 바꿔도 잘 동작합니다.
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html
@@ -18,7 +18,7 @@
 
 <body>
 
-  <p>Click on the mouse and move it with arrow keys.</p>
+  <p>쥐를 클릭하고 화살표 키를 눌러 쥐를 움직여 보세요.</p>
 
   <pre id="mouse">
  _   _
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html
@@ -18,7 +18,7 @@
 
 <body>
 
-  <p>Click on the mouse and move it with arrow keys.</p>
+  <p>쥐를 클릭하고 화살표 키를 눌러 쥐를 움직여 보세요.</p>
 
   <pre id="mouse">
  _   _
@@ -34,7 +34,7 @@
 
 
   <script>
-    // ...your code...
+    // ...여기에 코드를 작성하세요...
   </script>
 
 </body>
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -2,11 +2,12 @@ importance: 4
 
 ---
 
-# Keyboard-driven mouse
+# 키보드로 쥐 움직이기
 
-Focus on the mouse. Then use arrow keys to move it:
+쥐에 포커스를 준 다음 화살표 키를 이용해서 쥐를 움직여봅시다.
 
 [demo src="solution"]
 
-P.S. Don't put event handlers anywhere except the `#mouse` element.
-P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.
+참고1: `#mouse` 요소 이외의 어느 곳에도 이벤트 핸들러를 달지 마세요.
+
+참고2: HTML과 CSS를 수정하지 마세요. 작성할 자바스크립트는 어떤 요소에서도 동작할 수 있는 범용성이 있어야 합니다.
diff --git a/2-ui/4-forms-controls/index.md b/2-ui/4-forms-controls/index.md
@@ -1,3 +1,3 @@
-# Forms, controls
+# 폼과 폼 조작
 
-Special properties and events for forms `<form>` and controls: `<input>`, `<select>` and other.
+`<form>`의 전용 프로퍼티와 이벤트, 폼 조작에 사용되는 `<input>`, `<select>` 등에 대해 알아봅시다.
