Merge branch 'master' into 1311

Author: Violet-Bora-Lee

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

@@ -11,4 +11,5 @@ importance: 5
 구체적인 요구사항은 다음과 같습니다.
 
 - 단 하나의 이벤트 핸들러(이벤트 위임 사용하기)
+
 - 노드(텍스트) 바깥(빈 곳)을 클릭하면 아무 일도 일어나지 않아야 합니다.

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

@@ -26,21 +26,21 @@
     <thead>
       <tr>
         <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="string">이름</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>5</td>
-        <td>John</td>
+        <td>일리야</td>
       </tr>
       <tr>
         <td>2</td>
-        <td>Pete</td>
+        <td>보라</td>
       </tr>
       <tr>
         <td>12</td>
-        <td>Ann</td>
+        <td>한솔</td>
       </tr>
       <tr>
         <td>9</td>
@@ -60,9 +60,9 @@
 
       let th = e.target;
       // if TH, then sort
-      // cellIndex is the number of th:
+      // cellIndex는 몇 번째 열인지를 나타내는 인덱스 값입니다.
       //   0 for the first column
-      //   1 for the second column, etc
+      //   두 번째 열이라면 1이 됩니다.
       sortGrid(th.cellIndex, th.dataset.type);
     };
 
@@ -71,7 +71,7 @@
 
       let rowsArray = Array.from(tbody.rows);
 
-      // compare(a, b) compares two rows, need for sorting
+      // 변수 compare에 할당할 함수 compare(a, b)는 두 행을 비교하고 필요에 따라 정렬을 진행합니다.
       let compare;
 
       switch (type) {

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

@@ -25,36 +25,36 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
+        <th data-type="number">나이</th>
         <th data-type="string">Name</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>5</td>
-        <td>John</td>
+        <td>일리야</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Pete</td>
       </tr>
       <tr>
         <td>12</td>
-        <td>Ann</td>
+        <td>호진</td>
       </tr>
       <tr>
         <td>9</td>
         <td>Eugene</td>
       </tr>
       <tr>
         <td>1</td>
-        <td>Ilya</td>
+        <td>호석</td>
       </tr>
     </tbody>
   </table>
 
   <script>
-    // ...your code...
+    // ...여기에 코드를 작성하세요...
   </script>
 
 </body>

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,41 +2,41 @@ importance: 4
 
 ---
 
-# Sortable table
+# 정렬 기능을 제공하는 표
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+열 제목을 나타내는 요소인 `<th>`를 클릭하면 열 전체가 정렬되는 표를 만들어보세요.
 
-Each `<th>` has the type in the attribute, like this:
+모든 `<th>` 속성엔 다음과 같이 데이터의 타입이 정의되어 있습니다.
 
 ```html
 <table id="grid">
   <thead>
     <tr>
 *!*
-      <th data-type="number">Age</th>
-      <th data-type="string">Name</th>
+      <th data-type="number">나이</th>
+      <th data-type="string">이름</th>
 */!*
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>5</td>
-      <td>John</td>
+      <td>일리야</td>
     </tr>
     <tr>
       <td>10</td>
-      <td>Ann</td>
+      <td>보라</td>
     </tr>
     ...
   </tbody>
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+위 예시에선 첫 번째 열엔 숫자가, 두 번째 열엔 문자열이 들어갑니다. 구현할 정렬 함수는 데이터 타입에 맞게 정렬을 해줘야 합니다.
 
-Only `"string"` and `"number"` types should be supported.
+이 문제에선 `'숫자'`와 `'문자열'` 타입만 다룬다고 가정하겠습니다.
 
-The working example:
+제대로 해답을 작성했다면 다음 예시처럼 동작해야 합니다.
 
 [iframe border=1 src="solution" height=190]
 

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
 ```