[문서] 문서 1.1 ~ 1.7 병합충돌 해결

2-ui/1-document/01-browser-environment/article.md

@@ -1,18 +1,10 @@
 # 브라우저 환경과 다양한 명세서
 
-<<<<<<< HEAD
 자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어입니다. 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였습니다.
 
 자바스크립트가 돌아가는 플랫폼은 *호스트(host)* 라고 불립니다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있습니다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 *호스트 환경(host environment)* 이라고 부릅니다.
 
 호스트 환경은 랭귀지 코어(ECMAScript - 옮긴이)에 더하여 플랫폼에 특정되는 객체와 함수를 제공합니다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주죠.
-=======
-The JavaScript language was initially created for web browsers. Since then, it has evolved into a language with many uses and platforms.
-
-A platform may be a browser, or a web-server or another *host*, or even a "smart" coffee machine if it can run JavaScript. Each of these provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
-
-A host environment provides its own objects and functions in addition to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
->>>>>>> upstream/master
 
 아래 그림은 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능을 개괄적으로 보여줍니다.
 
@@ -23,11 +15,7 @@ A host environment provides its own objects and functions in addition to the lan
 1. <info:global-object> 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다. 
 2. '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공합니다.
 
-<<<<<<< HEAD
 아래 예시에선 `window` 객체를 전역 객체로 사용하고 있습니다.
-=======
-For instance, we can use it as a global object:
->>>>>>> upstream/master
 
 ```js run global
 function sayHi() {
@@ -38,29 +26,17 @@ function sayHi() {
 window.sayHi();
 ```
 
-<<<<<<< HEAD
 아래 예시에선 `window` 객체가 브라우저 창을 대변하고 있으며, 이를 이용해 창의 높이를 출력합니다.
-=======
-And we can use it as a browser window, to show the window height:
->>>>>>> upstream/master
 
 ```js run
 alert(window.innerHeight); // 창 내부(inner window) 높이
 ```
 
-<<<<<<< HEAD
 `window` 객체엔 다양한 메서드와 프로퍼티가 있는데, 추후 자세히 살펴보도록 하겠습니다.
-=======
-There are more window-specific methods and properties, which we'll cover later.
->>>>>>> upstream/master
 
 ## 문서 객체 모델(DOM)
 
-<<<<<<< HEAD
 문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.
-=======
-The Document Object Model, or DOM for short, represents all page content as objects that can be modified.
->>>>>>> upstream/master
 
 `document` 객체는 페이지의 기본 '진입점' 역할을 합니다. `document` 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다.
 
@@ -73,30 +49,18 @@ document.body.style.background = "red";
 setTimeout(() => document.body.style.background = "", 1000);
 ```
 
-<<<<<<< HEAD
 문서 객체 모델은 예시에서 소개한 `document.body.style` 외에도 수많은 기능을 제공합니다. 관련 프로퍼티와 메서드에 대한 정보는 WHATWG의 [DOM Living Standard](https://dom.spec.whatwg.org)에서 찾을 수 있습니다.
-=======
-Here, we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org).
->>>>>>> upstream/master
 
 ```smart header="DOM은 브라우저만을 위한 모델이 아닙니다."
 DOM 명세서엔 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨있습니다. 그런데 브라우저가 아닌 곳에서도 DOM을 사용하는 경우가 있습니다. 
 
-<<<<<<< HEAD
 HTML 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용합니다. 이런 스크립트에선 명세서 일부만을 지원하겠지만요.
-=======
-For instance, server-side scripts that download HTML pages and process them can also use the DOM. They may support only a part of the specification though.
->>>>>>> upstream/master
 ```
 
 ```smart header="스타일링을 위한 CSSOM"
 CSS 규칙과 스타일시트(stylesheet)는 HTML과는 다른 구조를 띱니다. 따라서 CSS 규칙과 스타일시트를 객체로 나타내고 이 객체를 어떻게 읽고 쓸 수 있을지에 대한 설명을 담은 별도의 명세서, [CSS 객체 모델(CSS Object Model, CSSOM)](https://www.w3.org/TR/cssom-1/)이 존재합니다.
 
-<<<<<<< HEAD
 CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰입니다. 그런데 CSS 규칙은 대부분 정적이기 때문에 CSSOM을 실무에서 자주 접하지는 않을 겁니다. 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야 하는 경우는 극히 드물긴 하지만, 이때 CSSOM이 사용됩니다.
-=======
-The CSSOM is used together with the DOM when we modify style rules for the document. In practice though, the CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
->>>>>>> upstream/master
 ```
 
 ## 브라우저 객체 모델(BOM)
@@ -105,13 +69,8 @@ The CSSOM is used together with the DOM when we modify style rules for the docum
 
 예시:
 
-<<<<<<< HEAD
 - [navigator](mdn:api/Window/navigator) 객체는 브라우저와 운영체제에 대한 정보를 제공합니다. 객체엔 다양한 프로퍼티가 있는데, 가장 잘 알려진 프로퍼티는 현재 사용 중인 브라우저 정보를 알려주는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등) 정보를 알려주는 `navigator.platform`입니다.
 - [location](mdn:api/Window/location) 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줍니다.
-=======
-- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differentiate between Windows/Linux/Mac etc).
-- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
->>>>>>> upstream/master
 
 아래 예시는 `location` 객체를 어떻게 활용할 수 있을지 보여줍니다. 
 
@@ -122,60 +81,33 @@ if (confirm("위키피디아 페이지로 가시겠습니까?")) {
 }
 ```
 
-<<<<<<< HEAD
 `alert/confirm/prompt` 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이죠.  
 
 ```smart header="다양한 명세"
 BOM은 [HTML 명세서](https://html.spec.whatwg.org)의 일부입니다.
 
 BOM에 관련된 명세가 따로 있지는 않습니다. <https://html.spec.whatwg.org>에서 볼 수 있는 HTML 명세서는 태그, HTML 속성(attribute) 같은 'HTML' 뿐만 아니라 다양한 객체와 메서드, 브라우저에서만 사용되는 DOM 확장을 다룹니다. 이 모든 것이 HTML 기술에 속하기 때문입니다. HTML 명세서엔 이 외에도 <https://spec.whatwg.org>에 있는 내용도 들어갑니다.
-=======
-The functions `alert/confirm/prompt` are also a part of the BOM: they are not directly related to the document, but represent pure browser methods for communicating with the user.
-
-```smart header="Specifications"
-The BOM is a part of the general [HTML specification](https://html.spec.whatwg.org).
-
-Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods, and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
->>>>>>> upstream/master
 ```
 
 ## 요약
 
 표준에 대하여 이야기하면서 다음 명세서들을 알아보았습니다.
 
-<<<<<<< HEAD
 DOM 명세서
 : 문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, <https://dom.spec.whatwg.org>에서 볼 수 있습니다.
 
 CSSOM 명세서
 : 스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, <https://www.w3.org/TR/cssom-1/>에서 볼 수 있습니다.
-=======
-DOM specification
-: Describes the document structure, manipulations, and events, see <https://dom.spec.whatwg.org>.
-
-CSSOM specification
-: Describes stylesheets and style rules, manipulations with them, and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
->>>>>>> upstream/master
 
 HTML 명세서
 : 태그 등의 HTML 언어, `setTimeout`, `alert`, `location` 등의 다양한 브라우저 기능을 정의한 BOM에 대한 설명이 담겨있고, <https://html.spec.whatwg.org>에서 볼 수 있습니다. DOM 명세서에 다양한 프로퍼티와 메서드를 추가해 확장한 명세서입니다.
 
 몇몇 클래스에 대한 설명은 <https://spec.whatwg.org/>에서 확인할 수 있습니다.
 
-<<<<<<< HEAD
 배울 게 많지만, 모든 걸 한꺼번에 다루고 기억하기엔 그 양이 너무 많기 때문에 지금까지 소개해 드린 링크를 잘 기록해 놓으시기 바랍니다.
 
 프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 <https://developer.mozilla.org/en-US/search>을 찾아보는 것도 좋긴 하지만, 명세서에서 관련 설명을 찾는 게 더 나을 때도 있기 때문입니다. 명세서에 있는 설명은 복잡하고 내용도 더 많긴 하지만 명세서를 읽는 습관을 들이다 보면 기본 지식을 탄탄하게 쌓을 수 있습니다.
-=======
-Please note these links, as there's so much to learn that it's impossible to cover everything and remember it all.
-
-When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
->>>>>>> upstream/master
 
 검색창에 'WHATWG [용어]' 혹은 'MDN [용어]'로 검색하면 명세서나 MDN문서에서 원하는 내용을 쉽게 찾을 수 있습니다. <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage> 처럼 말이죠.
 
-<<<<<<< HEAD
 자 이제 UI에서 핵심적인 역할을 하는 DOM에 대해 본격적으로 살펴보도록 합시다.
-=======
-Now, we'll get down to learning the DOM, because the document plays the central role in the UI.
->>>>>>> upstream/master

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

@@ -51,11 +51,7 @@ DOM은 HTML을 아래와 같이 태그 트리 구조로 표현합니다.
 <div class="domtree"></div>
 
 <script>
-<<<<<<< HEAD
 let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"사슴에 관하여"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  사슴에 관한 진실."}]}]}
-=======
-let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]},{"name":"#text","nodeType":3,"content":"\n"}]},{"name":"#text","nodeType":3,"content":"\n"},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elk.\n"}]}]}
->>>>>>> upstream/master
 
 drawHtmlTree(node1, 'div.domtree', 690, 320);
 </script>
@@ -146,13 +142,8 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
 drawHtmlTree(node4, 'div.domtree', 690, 360);
 </script>
 
-<<<<<<< HEAD
 ````warn header="테이블엔 언제나 `<tbody>`가 있습니다."
 테이블은 조금 흥미롭습니다. DOM 명세서에선 테이블에 반드시 `<tbody>`가 있어야 한다고 못 박아 놓았지만, HTML에선 `<tbody>`를 생략하곤 합니다. 이때, 브라우저는 자동으로 DOM에 `<tbody>`를 만들어줍니다.  
-=======
-````warn header="Tables always have `<tbody>`"
-An interesting "special case" is tables. By DOM specification they must have `<tbody>` tag, but HTML text may omit it. Then the browser creates `<tbody>` in the DOM automatically.
->>>>>>> upstream/master
 
 HTML:
 
@@ -169,11 +160,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
 drawHtmlTree(node5,  'div.domtree', 600, 200);
 </script>
 
-<<<<<<< HEAD
 보이시죠? `<tbody>`가 어디선가 나타났습니다. 테이블을 다룰 땐 위 내용을 상기해 갑자기 나타난 `<tbody>`때문에 놀라지 않도록 합시다.
-=======
-You see? The `<tbody>` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises.
->>>>>>> upstream/master
 ````
 
 ## 기타 노드 타입
@@ -201,11 +188,7 @@ You see? The `<tbody>` appeared out of nowhere. We should keep this in mind whil
 <div class="domtree"></div>
 
 <script>
-<<<<<<< HEAD
 let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  사슴에 관한 진실.\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"사슴은 똑똑합니다."}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"그리고 잔꾀를 잘 부리죠!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n"}]}]};
-=======
-let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elk.\n  "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n    "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n    "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n\n\n"}]}]};
->>>>>>> upstream/master
 
 drawHtmlTree(node6, 'div.domtree', 690, 500);
 </script>
@@ -216,11 +199,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 
 **HTML 안의 모든 것은 (심지어 그것이 주석이더라도) DOM을 구성합니다.**
 
-<<<<<<< HEAD
 HTML 문서 최상단에 위치하는 `<!DOCTYPE...>` 지시자 또한 DOM 노드가 됩니다. 이 노드는 DOM 트리의 `<html>` 바로 위에 위치합니다. 본 튜토리얼에선 이 노드를 다루지 않을 예정이라 다이어그램에도 표시는 하지 않을 것입니다. 하지만 존재하는 노드입니다.
-=======
-Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before `<html>`. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there.
->>>>>>> upstream/master
 
 문서 전체를 나타내는 `document` 객체 또한 DOM 노드입니다.
 
@@ -233,11 +212,7 @@ Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM n
 
 ## DOM 구조 직접 보기
 
-<<<<<<< HEAD
 [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/)에 들어가면 실시간으로 DOM 구조를 볼 수 있습니다. 사이트에 들어가 DOM 구조를 보고 싶은 HTML 문서를 입력하면 HTML이 바로 DOM으로 바뀌어 출력됩니다.
-=======
-To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant.
->>>>>>> upstream/master
 
 Live DOM Viewer를 이용하는 것 말고도 브라우저 개발자 도구를 사용해 DOM을 탐색할 수 있습니다. 실제론 대부분의 개발자가 개발자 도구를 사용합니다.
 

2-ui/1-document/03-dom-navigation/article.md

@@ -214,11 +214,7 @@ alert( document.body.previousSibling ); // HTMLHeadElement
 
 ## 요소 간 이동
 
-<<<<<<< HEAD
 지금까지 언급한 탐색 관련 프로퍼티는 *모든* 종류의 노드를 참조합니다. `childNodes`를 이용하면 텍스트 노드, 요소 노드, 심지어 주석 노드까지 참조할 수 있죠.
-=======
-Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if they exist.
->>>>>>> upstream/master
 
 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않습니다. 웹 페이지를 구성하는 태그의 분신인 요소 노드를 조작하는 작업이 대다수이죠.