Merge branch 'master' into 1312

Author: Violet-Bora-Lee

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
-The solution has two parts.
+해답은 두 파트로 나뉩니다.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. 트리에 있는 모든 텍스트를 `<span>`이 감싸도록 합니다. 이렇게 하면 CSS `:hover`를 사용해 마우스 오버 시 글씨를 굴게 해주는 효과를 줄 수 있고 `<span>`이 차지하는 너비가 텍스트의 너비와 정확히 일치하기 때문에 텍스트에만 클릭 이벤트가 동작하도록 할 수 있습니다.
+2. 루트 노드인 `tree`에 핸들러를 추가하고 클릭 이벤트가 `<span>`으로 감싼 텍스트에만 동작하도록 합니다.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

@@ -54,23 +54,22 @@
   </ul>
 
   <script>
-    // move all text into <span>
-    // they occupy exactly the place necessary for the text,
+    // 텍스트 전부를 <span>이 감싸도록 합니다.
     for (let li of tree.querySelectorAll('li')) {
       let span = document.createElement('span');
       li.prepend(span);
-      span.append(span.nextSibling); // move the text node into span
+      span.append(span.nextSibling); // 텍스트 노드를 span 안으로 옮깁니다.
     }
 
-    // catch clicks on whole tree
+    // 트리 전체의 클릭 이벤트를 감지하는 리스너를 만듭니다.
     tree.onclick = function(event) {
 
       if (event.target.tagName != 'SPAN') {
         return;
       }
 
       let childrenContainer = event.target.parentNode.querySelector('ul');
-      if (!childrenContainer) return; // no children
+      if (!childrenContainer) return; // 자손 노드가 없는 경우
 
       childrenContainer.hidden = !childrenContainer.hidden;
     }

2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html

@@ -42,5 +42,9 @@
     </li>
   </ul>
 
+  <script>
+    // ...여기에 코드를 작성하세요...
+  </script>
+
 </body>
 </html>

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,13 +2,14 @@ importance: 5
 
 ---
 
-# Tree menu
+# 트리 메뉴 구현하기
 
-Create a tree that shows/hides node children on click:
+노드를 클릭하면 자손 노드가 보이거나 숨겨지는 트리 메뉴를 구현해보세요.
 
 [iframe border=1 src="solution"]
 
-Requirements:
+구체적인 요구사항은 다음과 같습니다.
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- 단 하나의 이벤트 핸들러(이벤트 위임 사용하기)
+
+- 노드(텍스트) 바깥(빈 곳)을 클릭하면 아무 일도 일어나지 않아야 합니다.

2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html

@@ -40,7 +40,7 @@
       </tr>
       <tr>
         <td>12</td>
-        <td>태형</td>
+        <td>호진</td>
       </tr>
       <tr>
         <td>9</td>

2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html

@@ -6,11 +6,11 @@
   <style>
     body {
       height: 2000px;
-      /* make body scrollable, the tooltip should work after the scroll */
+      /* 높이를 일부러 키워서 스크롤이 나타나도록 하였습니다. 스크롤 위치에 상관없이 요구사항대로 툴팁이 나타나야 합니다. */
     }
 
     .tooltip {
-      /* some styles for the tooltip, you can use your own instead */
+      /* 툴팁을 꾸며주기 위한 CSS입니다. 다른 스타일을 원하면 수정해도 괜찮습니다. */
       position: fixed;
       padding: 10px 20px;
       border: 1px solid #b3c9ce;
@@ -30,7 +30,7 @@
   <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
 
   <button data-tooltip="the tooltip is longer than the element">Short button</button>
-  <button data-tooltip="HTML<br>tooltip">One more button</button>
+  <button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>
 
   <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
 

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -4,35 +4,35 @@ importance: 5
 
 # Tooltip behavior
 
-Create JS-code for the tooltip behavior.
+툴팁(tooltip)을 보여주는 JS 코드를 작성해봅시다.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+`data-tooltip` 속성이 있는 요소에 마우스를 가져다 대면 툴팁이 보여야 하고, 마우스 커서가 요소에서 떠나면 툴팁이 사라져야 합니다.
 
-An example of annotated HTML:
+`data-tooltip` 속성은 다음 HTML처럼 추가할 수 있습니다.
 ```html
 <button data-tooltip="the tooltip is longer than the element">Short button</button>
-<button data-tooltip="HTML<br>tooltip">One more button</button>
+<button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>
 ```
 
 Should work like this:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+`data-tooltip`이 있는 요소엔 텍스트만 있다고 가정하겠습니다. 요소 안에 다른 태그가 있는 경우는 생각하지 않기로 합시다.
 
 Details:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
+- 툴팁과 요소의 간격은 `5px`입니다.
+- 가능하면 툴팁은 요소를 기준으로 중앙에 있도록 합시다.
 - The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- 툴팁안에 띄울 콘텐츠는 `data-tooltip` 속성에서 가져옵니다. 속성값은 HTML일 수 있습니다.
 
 You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+- `mouseover` -- 요소 안으로 포인터가 이동할 때 발생하는 이벤트
+- `mouseout`-- 요소 밖으로 포인터가 이동할 때 발생하는 이벤트
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+이벤트 위임을 사용해서 두 개의 핸들러만으로 원하는 기능을 구현하세요. `document`에 핸들러를 추가해 `data-tooltip` 속성이 있는 요소 안이나 밖으로 마우스 포인터가 이동하는 경우를 모두 감지하고 두 핸들러를 통해 툴팁을 보여주거나 감추시면 됩니다. 
 
 After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
 
-P.S. Only one tooltip may show up at a time.
+P.S. 한 번에 한 개의 툴팁 만 보여줄 수 있습니다.

6-data-storage/02-localstorage/article.md

@@ -127,17 +127,17 @@ for(let key of keys) {
 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환됩니다.
 
 ```js run
-sessionStorage.user = {name: "John"};
-alert(sessionStorage.user); // [object Object]
+localStorage.user = {name: "John"};
+alert(localStorage.user); // [object Object]
 ```
 
 `JSON`을 사용하면 객체를 쓸 수 있긴 합니다.
 
 ```js run
-sessionStorage.user = JSON.stringify({name: "John"});
+localStorage.user = JSON.stringify({name: "John"});
 
 // 잠시 후 
-let user = JSON.parse( sessionStorage.user );
+let user = JSON.parse( localStorage.user );
 alert( user.name ); // John
 ```