[DOM 트리] 번역 보완

- 용어통일(문자 노드 --> 텍스트 노드)
- 용어통일(개발자 도구의 탭 --> 패널)

Author: Violet-Bora-Lee

2-ui/1-document/02-dom-nodes/article.md

@@ -66,7 +66,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320);
 
 요소 내의 문자는 *텍스트(text) 노드*가 됩니다. 위 그림에서 `#text`를 확인해보세요. 텍스트 노드는 문자열만 담습니다. 자식 노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 됩니다.
 
-위 그림에서 `<title>` 태그는 `"사슴에 관하여"`라는 문자 노드를 자식으로 갖습니다.
+위 그림에서 `<title>` 태그는 `"사슴에 관하여"`라는 텍스트 노드를 자식으로 갖습니다.
 
 텍스트 노드에 있는 특수문자를 눈여겨보시기 바랍니다.
 
@@ -216,7 +216,7 @@ HTML 문서 최상단에 위치하는 `<!DOCTYPE...>` 지시자 또한 DOM 노
 
 Live DOM Viewer를 이용하는 것 말고도 브라우저 개발자 도구를 사용해 DOM을 탐색할 수 있습니다. 실제론 대부분의 개발자가 개발자 도구를 사용합니다.
 
-[elk.html](elk.html) 페이지를 열고, 개발자 도구를 연 다음 Elements 탭으로 이동해봅시다.
+[elk.html](elk.html) 페이지를 열고, 개발자 도구를 연 다음 Elements 패널으로 이동해봅시다.
 
 아래와 같은 화면이 보일 겁니다.
 
@@ -226,36 +226,36 @@ Live DOM Viewer를 이용하는 것 말고도 브라우저 개발자 도구를 
 
 개발자 도구를 이용해 DOM 구조를 볼 땐, 생략된 부분이 있다는 점에 유의하시길 바랍니다. 텍스트 노드는 그냥 텍스트로만 표시되고, 띄어쓰기만 있는 빈 텍스트 노드는 나타나지 않습니다. 개발 중엔 대부분 요소 노드만 다루기 때문에 이 점이 문제가 되지는 않지만 말이죠.
 
-좌측 상단의 <span class="devtools" style="background-position:-328px -124px"></span> 버튼을 클릭한 후, 마우스 등의 포인터 장비로 웹페이지 상의 노드를 클릭하면, Elements 탭의 해당 노드로 이동하게 되어 노드를 자세히 살펴볼 수 있습니다. 특정 요소가 DOM 트리 내 어디에 있는지 바로 확인할 수 있기 때문에 방대한 HTML을 다룰 때 아주 유용합니다.
+좌측 상단의 <span class="devtools" style="background-position:-328px -124px"></span> 버튼을 클릭한 후, 마우스 등의 포인터 장비로 웹페이지 상의 노드를 클릭하면, Elements 패널의 해당 노드로 이동하게 되어 노드를 자세히 살펴볼 수 있습니다. 특정 요소가 DOM 트리 내 어디에 있는지 바로 확인할 수 있기 때문에 방대한 HTML을 다룰 때 아주 유용합니다.
 
 검사 하고 싶은 요소에 포인터를 댄 후에 마우스 오른쪽 버튼 클릭했을 때 나타나는 컨텍스트 메뉴에서 'Inspect'를 클릭해도 같은 기능을 사용할 수 있습니다.
 
 ![](inspect.svg)
 
-Elements 탭의 우측엔 여러 하위 탭이 있습니다.
-- **Styles** -- 내장 규칙(회색 배경)을 포함하여 현재 선택한 요소에 적용된 CSS 규칙을 일률적으로 보여줍니다. 하단부 박스에 있는 크기(dimension), 마진(margin), 패딩(padding)을 비롯한 스타일 대부분을 Styles 탭에서 바로 수정해 볼 수 있습니다.
+Elements 패널 우측엔 여러 하위 패널이 있습니다.
+- **Styles** -- 내장 규칙(회색 배경)을 포함하여 현재 선택한 요소에 적용된 CSS 규칙을 일률적으로 보여줍니다. 하단부 박스에 있는 크기(dimension), 마진(margin), 패딩(padding)을 비롯한 스타일 대부분을 Styles 패널에서 바로 수정해 볼 수 있습니다.
 - **Computed** -- 현재 선택한 요소에 적용된 CSS 규칙을 프로퍼티 기준으로 보여줍니다. CSS 상속 등을 통해 적용된 규칙도 볼 수 있습니다.
 - **Event Listeners** -- DOM 요소에 붙은 이벤트 리스너를 볼 수 있습니다. 자세한 내용은 다음 파트에서 다룰 예정입니다.
 - 기타 등등
 
-각 탭이 무슨 역할을 하는지 알아보려면 직접 클릭해 보고 이리저리 살펴보는 게 제일 좋습니다. 대부분의 값은 바로 수정해 볼 수 있습니다.
+각 패널이 무슨 역할을 하는지 알아보려면 직접 클릭해 보고 이리저리 살펴보는 게 제일 좋습니다. 대부분의 값은 바로 수정해 볼 수 있습니다.
 
 ## 콘솔을 사용해 DOM 다루기
 
 개발자 도구를 이용해 DOM을 탐색하다 보면, DOM에 자바스크립트를 적용해 보고 싶어질 때가 생깁니다. 노드를 가져와서 코드로 해당 노드를 수정하고, 브라우저상에서 결과물을 바로 볼 수 있게 말이죠. 이럴 때 쓸 수 있는 몇 가지 팁을 알려드리겠습니다.
 
 먼저 아래 작업을 해주세요.
 
-- Elements 탭에서 첫 번째 `<li>`를 선택하세요.
-- `key:Esc`를 눌러 Elements 탭 아래에 콘솔을 띄우세요.
+- Elements 패널에서 첫 번째 `<li>`를 선택하세요.
+- `key:Esc`를 눌러 Elements 패널 아래에 콘솔을 띄우세요.
 
 이제 가장 마지막에 선택했던 요소는 `$0`으로, 그 이전에 선택했던 요소는 `$1`로 접근할 수 있습니다.
 
 예를 들어 콘솔 창에 `$0.style.background = 'red'`을 입력하면 아래와 같이 첫 번째 list 아이템이 붉은색으로 표시되는 걸 볼 수 있습니다.
 
 ![](domconsole0.svg)
 
-이 방법을 사용하면 Elements 탭에 있는 노드를 콘솔창으로 가져올 수 있습니다.
+이 방법을 사용하면 Elements 패널에 있는 노드를 콘솔창으로 가져올 수 있습니다.
 
 또 다른 방법도 있습니다. DOM 노드를 참조하는 변수가 있는 경우 콘솔에 `inspect(node)` 명령어를 입력하면 Elements 패널에서 해당 요소가 강조되는 것을 확인할 수 있습니다.