[과제 번역] focus와 blur 과제, Edit TD on click 번역

Author: Violet-Bora-Lee

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html

@@ -10,11 +10,11 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
+  <p>수정하려는 셀을 클릭하세요. 완료 또는 취소 버튼을 눌러 동작을 마무리할 수 있습니다.</p>
 
   <table id="bagua-table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>Bagua</em> Chart(팔괘도): Direction, Element, Color, Meaning</th>
     </tr>
     <tr>
       <td class="nw"><strong>Northwest</strong>

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js

@@ -4,7 +4,7 @@ let editingTd;
 
 table.onclick = function(event) {
 
-  // 3 possible targets
+  // 총 3개의 타겟(셀, 완료, 취소)
   let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
   if (!table.contains(target)) return;
@@ -14,7 +14,7 @@ table.onclick = function(event) {
   } else if (target.className == 'edit-ok') {
     finishTdEdit(editingTd.elem, true);
   } else if (target.nodeName == 'TD') {
-    if (editingTd) return; // already editing
+    if (editingTd) return; // 셀을 수정 중인 경우
 
     makeTdEditable(target);
   }
@@ -27,7 +27,7 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
+  td.classList.add('edit-td'); // 수정 중인 td의 스타일을 변경
 
   let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
@@ -40,7 +40,7 @@ function makeTdEditable(td) {
   textArea.focus();
 
   td.insertAdjacentHTML("beforeEnd",
-    '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
+    '<div class="edit-controls"><button class="edit-ok">완료</button><button class="edit-cancel">취소</button></div>'
   );
 }
 

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html

@@ -10,11 +10,11 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
+  <p>수정하려는 셀을 클릭하세요. 완료 또는 취소 버튼을 눌러 동작을 마무리할 수 있습니다.</p>
 
   <table id="bagua-table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>Bagua</em> Chart(팔괘도): Direction, Element, Color, Meaning</th>
     </tr>
     <tr>
       <td class="nw"><strong>Northwest</strong>

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js

@@ -1,3 +1,3 @@
 let table = document.getElementById('bagua-table');
 
-/* your code */
+/* 여기에 코드를 작성하세요. */