diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 5a51022e03..f9fcd3e89e 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/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. 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다. 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에 관련된 명세가 따로 있지는 않습니다. 에서 볼 수 있는 HTML 명세서는 태그, HTML 속성(attribute) 같은 'HTML' 뿐만 아니라 다양한 객체와 메서드, 브라우저에서만 사용되는 DOM 확장을 다룹니다. 이 모든 것이 HTML 기술에 속하기 때문입니다. HTML 명세서엔 이 외에도 에 있는 내용도 들어갑니다. -======= -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 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 . ->>>>>>> upstream/master ``` ## 요약 표준에 대하여 이야기하면서 다음 명세서들을 알아보았습니다. -<<<<<<< HEAD DOM 명세서 : 문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, 에서 볼 수 있습니다. CSSOM 명세서 : 스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, 에서 볼 수 있습니다. -======= -DOM specification -: Describes the document structure, manipulations, and events, see . - -CSSOM specification -: Describes stylesheets and style rules, manipulations with them, and their binding to documents, see . ->>>>>>> upstream/master HTML 명세서 : 태그 등의 HTML 언어, `setTimeout`, `alert`, `location` 등의 다양한 브라우저 기능을 정의한 BOM에 대한 설명이 담겨있고, 에서 볼 수 있습니다. DOM 명세서에 다양한 프로퍼티와 메서드를 추가해 확장한 명세서입니다. 몇몇 클래스에 대한 설명은 에서 확인할 수 있습니다. -<<<<<<< HEAD 배울 게 많지만, 모든 걸 한꺼번에 다루고 기억하기엔 그 양이 너무 많기 때문에 지금까지 소개해 드린 링크를 잘 기록해 놓으시기 바랍니다. 프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 을 찾아보는 것도 좋긴 하지만, 명세서에서 관련 설명을 찾는 게 더 나을 때도 있기 때문입니다. 명세서에 있는 설명은 복잡하고 내용도 더 많긴 하지만 명세서를 읽는 습관을 들이다 보면 기본 지식을 탄탄하게 쌓을 수 있습니다. -======= -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 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문서에서 원하는 내용을 쉽게 찾을 수 있습니다. , 처럼 말이죠. -<<<<<<< HEAD 자 이제 UI에서 핵심적인 역할을 하는 DOM에 대해 본격적으로 살펴보도록 합시다. -======= -Now, we'll get down to learning the DOM, because the document plays the central role in the UI. ->>>>>>> upstream/master diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index d06f75742f..7128c0d135 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -51,11 +51,7 @@ DOM은 HTML을 아래와 같이 태그 트리 구조로 표현합니다.
@@ -146,13 +142,8 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); -<<<<<<< HEAD ````warn header="테이블엔 언제나 ``가 있습니다." 테이블은 조금 흥미롭습니다. DOM 명세서에선 테이블에 반드시 ``가 있어야 한다고 못 박아 놓았지만, HTML에선 ``를 생략하곤 합니다. 이때, 브라우저는 자동으로 DOM에 ``를 만들어줍니다. -======= -````warn header="Tables always have ``" -An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` 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); -<<<<<<< HEAD 보이시죠? ``가 어디선가 나타났습니다. 테이블을 다룰 땐 위 내용을 상기해 갑자기 나타난 ``때문에 놀라지 않도록 합시다. -======= -You see? The `` 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 `` appeared out of nowhere. We should keep this in mind whil
@@ -216,11 +199,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); **HTML 안의 모든 것은 (심지어 그것이 주석이더라도) DOM을 구성합니다.** -<<<<<<< HEAD HTML 문서 최상단에 위치하는 `` 지시자 또한 DOM 노드가 됩니다. 이 노드는 DOM 트리의 `` 바로 위에 위치합니다. 본 튜토리얼에선 이 노드를 다루지 않을 예정이라 다이어그램에도 표시는 하지 않을 것입니다. 하지만 존재하는 노드입니다. -======= -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. 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 `` 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을 탐색할 수 있습니다. 실제론 대부분의 개발자가 개발자 도구를 사용합니다. diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 8c2dfeb2bc..8b759337f3 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/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 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않습니다. 웹 페이지를 구성하는 태그의 분신인 요소 노드를 조작하는 작업이 대다수이죠. diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 8d60dbb66c..9db17890b3 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -54,13 +54,8 @@ ``` -<<<<<<< HEAD ```warn header="id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 마세요." `id`에 대응하는 전역변수는 [명세서](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem)의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다. -======= -```warn header="Please don't use id-named global variables to access elements" -This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility. ->>>>>>> upstream/master 브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 해서 개발자의 편의를 도모합니다. 그런데 이런 방식은 스크립트가 간단할 땐 괜찮지만, 이름이 충돌할 가능성이 있기 때문에 추천하는 방식은 아닙니다. HTML을 보지 않은 상황에서 코드만 보고 변수의 출처를 알기 힘들다는 단점도 있습니다. @@ -75,13 +70,8 @@ This behavior is described [in the specification](https://html.spec.whatwg.org/m 같은 `id`를 가진 요소가 여러 개 있으면 `document.getElementById`같이 `id`를 이용해 요소를 검색하는 메서드의 동작이 예측 불가능해집니다. 검색된 여러 요소 중 어떤 요소를 반환할지 판단하지 못해 임의의 요소가 반환되죠. 문서 내 동일 `id`가 없도록 해 이런 일을 방지하도록 합시다. ``` -<<<<<<< HEAD ```warn header="`anyNode.getElementById`가 아닌 `document.getElementById`" `getElementById`는 `document` 객체를 대상으로 해당 `id`를 가진 요소 노드를 찾아 줍니다. 문서 노드가 아닌 다른 노드엔 호출할 수 없습니다. -======= -```warn header="Only `document.getElementById`, not `anyElem.getElementById`" -The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document. ->>>>>>> upstream/master ``` ## querySelectorAll [#querySelectorAll] @@ -126,11 +116,7 @@ querySelectorAll에는 `:hover`나 `:active` 같은 CSS 선택자의 가상 클 지금까지 소개한 모든 메서드는 DOM 검색에 쓰입니다. -<<<<<<< HEAD [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches)는 DOM을 검색하는 일이 아닌 조금 다른 일을 합니다. 이 메서드는 요소 `elem`이 주어진 CSS 선택자와 일치하는지 여부를 판단해줍니다. 일치한다면 `true`, 아니라면 `false`를 반환하죠. -======= -The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`. ->>>>>>> upstream/master 요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용합니다. @@ -156,11 +142,7 @@ The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does n 부모 요소, 부모 요소의 부모 요소 등 DOM 트리에서 특정 요소의 상위에 있는 요소들은 *조상(ancestor)* 요소라고 합니다. -<<<<<<< HEAD 메서드 `elem.closest(css)`는 `elem` 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 도와줍니다. -======= -The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. ->>>>>>> upstream/master `closest`메서드는 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾습니다. CSS 선택자와 일치하는 요소를 찾으면, 검색을 중단하고 해당 요소를 반환합니다. @@ -171,13 +153,8 @@ The method `elem.closest(css)` looks for the nearest ancestor that matches the C
    -<<<<<<< HEAD
  • 1장
  • 2장
    • -======= -
  • Chapter 1
    • -
  • Chapter 2
    • ->>>>>>> upstream/master
@@ -386,11 +363,7 @@ DOM에서 원하는 노드를 검색하게 해주는 주요 메서드 6가지는 -<<<<<<< HEAD 아마 실무에선 `querySelector`나 `querySelectorAll`을 가장 많이 사용하실 겁니다. `getElementBy`로 시작하는 메서드는 대개 오래된 스크립트에서 만날 수 있는데, 일부 이 메서드가 꼭 필요한 상황에서 쓰이는 경우도 있습니다. -======= -By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts. ->>>>>>> upstream/master 이 외에 알아두면 좋을 만한 메서드는 아래와 같습니다. diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 4e87f37d6f..c1d7c68cc3 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -10,11 +10,7 @@ DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원합니다. DOM 노드는 종류에 따라 대응하는 내장 클래스가 다릅니다. -<<<<<<< HEAD 계층 구조 꼭대기엔 [EventTarget](https://dom.spec.whatwg.org/#eventtarget)이 있는데, [Node](http://dom.spec.whatwg.org/#interface-node)는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받습니다. -======= -The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtarget), that is inherited by [Node](https://dom.spec.whatwg.org/#interface-node), and other DOM nodes inherit from it. ->>>>>>> upstream/master 이런 관계를 그림으로 나타내면 다음과 같습니다. @@ -22,7 +18,6 @@ The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtar 각 클래스는 다음과 같은 특징을 지닙니다. -<<<<<<< HEAD - [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- 루트에 있는 '추상(abstract)' 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않습니다. EventTarget가 모든 DOM 노드의 베이스에 있기때문에 DOM 노드에서 '이벤트'를 사용할 수 있습니다. 자세한 내용은 곧 다룰 예정입니다. - [Node](http://dom.spec.whatwg.org/#interface-node) -- 역시 '추상' 클래스로, DOM 노드의 베이스 역할을 합니다. getter 역할을 하는 `parentNode`, `nextSibling`, `childNodes` 등의 주요 트리 탐색 기능을 제공합니다. `Node` 클래스의 객체는 절대 생성되지 않습니다. 하지만 이 클래스를 상속받는 클래스는 여럿 있습니다. 텍스트 노드를 위한 `Text` 클래스와 요소 노드를 위한 `Element` 클래스, 주석 노드를 위한 `Comment`클래스는 `Node`클래스를 상속받습니다. - [Element](http://dom.spec.whatwg.org/#interface-element) -- DOM 요소를 위한 베이스 클래스입니다. `nextElementSibling`, `children` 이나 `getElementsByTagName`, `querySelector` 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 합니다. 브라우저는 HTML뿐만 아니라 XML, SVG도 지원하는데 `Element` 클래스는 이와 관련된 `SVGElement`, `XMLElement`, `HTMLElement` 클래스의 베이스 역할을 합니다. @@ -33,41 +28,6 @@ The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtar - 이외에도 다른 클래스가 많은데, 각 태그에 해당하는 클래스는 고유한 프로퍼티와 메서드를 지원합니다. 이렇게 특정 노드에서 사용할 수 있는 프로퍼티와 메서드는 상속을 기반으로 결정됩니다. -======= -- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class for everything. - - Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. - -- [Node](https://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. - - It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are other classes that inherit from it (and so inherit the `Node` functionality). - -- [Document](https://dom.spec.whatwg.org/#interface-document), for historical reasons often inherited by `HTMLDocument` (though the latest spec doesn't dictate it) -- is a document as a whole. - - The `document` global object belongs exactly to this class. It serves as an entry point to the DOM. - -- [CharacterData](https://dom.spec.whatwg.org/#interface-characterdata) -- an "abstract" class, inherited by: - - [Text](https://dom.spec.whatwg.org/#interface-text) -- the class corresponding to a text inside elements, e.g. `Hello` in `

Hello

`. - - [Comment](https://dom.spec.whatwg.org/#interface-comment) -- the class for comments. They are not shown, but each comment becomes a member of DOM. - -- [Element](https://dom.spec.whatwg.org/#interface-element) -- is the base class for DOM elements. - - It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. - - A browser supports not only HTML, but also XML and SVG. So the `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` (we don't need them here) and `HTMLElement`. - -- Finally, [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) is the basic class for all HTML elements. We'll work with it most of the time. - - It is inherited by concrete HTML elements: - - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, - - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `` elements, - - ...and so on. - -There are many other tags with their own classes that may have specific properties and methods, while some elements, such as ``, `
`, `
` do not have any specific properties, so they are instances of `HTMLElement` class. - -So, the full set of properties and methods of a given node comes as the result of the chain of inheritance. ->>>>>>> upstream/master `` 요소에 대응하는 DOM 객체를 예로 들어봅시다. 이 객체는 [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) 클래스를 기반으로 만들어집니다. @@ -171,19 +131,11 @@ interface HTMLInputElement: HTMLElement { ``` -<<<<<<< HEAD 1. 첫 번째 `
`엔 이름이 'HTML 형태'로 저장됩니다. 입력한 태그는 태그로 해석되어 굵은 글씨가 출력되네요. 2. 두 번째 `
`엔 이름이 '텍스트 형태'로 저장됩니다. 따라서 입력한 값 그대로 `이보라`가 출력되는 것을 확인할 수 있습니다. -======= -1. The first `
` gets the name "as HTML": all tags become tags, so we see the bold name. -2. The second `
` gets the name "as text", so we literally see `Winnie-the-Pooh!`. ->>>>>>> upstream/master 개발을 하다보면 사용자의 입력값을 받아 처리해야 하는 경우가 많습니다. 이때 사용자가 입력한 값은 텍스트로 처리되어야 합니다. 예상치 못한 HTML이 사이트에 침투하는 것을 막으려면 `textContent`를 사용합시다. @@ -474,11 +413,7 @@ elem.innerHTML = elem.innerHTML + "..." hidden 속성과 hidden 프로퍼티는 요소를 보여줄지 말지 지정할 때 사용할 수 있습니다. -<<<<<<< HEAD `hidden`은 HTML 안에서 쓸 수도 있고 자바스크립트에서도 쓸 수 있습니다. -======= -We can use it in HTML or assign it using JavaScript, like this: ->>>>>>> upstream/master ```html run height="80"
아래 두 div를 숨겨봅시다.
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index 2296934834..c683859cf0 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -162,11 +162,7 @@ HTML 속성을 어떻게 다루는지에 대한 예시를 살펴봅시다. ``` -<<<<<<< HEAD 그런데 아래 예시의 `input.value`처럼 동기화가 속성에서 프로퍼티 방향으로만 일어나는 예외상황도 존재합니다. -======= -But there are exclusions, for instance `input.value` synchronizes only from attribute -> property, but not back: ->>>>>>> upstream/master ```html run @@ -302,11 +298,7 @@ HTML을 작성할 때 우리는 대부분 표준 속성을 사용합니다. 하
``` -<<<<<<< HEAD 이렇게 커스텀 속성을 사용하는 게 `.order-state-new`, `.order-state-pending`, `order-state-canceled`같은 클래스를 사용하는 것보다 왜 선호될까요? -======= -Why would using an attribute be preferable to having classes like `.order-state-new`, `.order-state-pending`, `.order-state-canceled`? ->>>>>>> upstream/master 이유는 속성은 클래스보다 다루기 편리하다는 점 때문입니다. 속성의 상태는 아래와 같이 쉽게 변경할 수 있습니다. diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md index 2970ab741f..eab23709c4 100644 --- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md +++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md @@ -6,11 +6,7 @@ importance: 5 빈 DOM 요소 `elem`과 `text`라는 문자열이 있습니다. -<<<<<<< HEAD 셋 중에서 같은 동작을 수행하는 명령어는 무엇일까요? -======= -Which of these 3 commands will do exactly the same? ->>>>>>> upstream/master 1. `elem.append(document.createTextNode(text))` 2. `elem.innerHTML = text` diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md index 5961f9a0e2..418f204f9d 100644 --- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md +++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md @@ -52,10 +52,6 @@ function clockStop() { } ``` -<<<<<<< HEAD `update()`는 `clockStart()` 에서뿐만 아니라 `(*)`로 표시한 줄에서도 호출됩니다. 양쪽 모두에서 `update()`를 호출하지 않으면 `setInterval`이 실행되기 전까지 사용자는 아무런 내용이 없는 시계를 봐야 하기 때문입니다. -======= -Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then. -Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`. ->>>>>>> upstream/master +또한 `clockStart()`에서 새 인터벌을 설정할 때는 시계가 실행 중이지 않을 때만 해야 합니다. 그렇지 않으면 시작 버튼을 여러 번 클릭할 경우 여러 인터벌이 동시에 설정됩니다. 더 심각한 문제는 마지막 인터벌의 `timerID`만 보관하게 되어 나머지 인터벌에 대한 참조를 잃게 된다는 점입니다. 그러면 시계를 다시는 멈출 수 없게 됩니다! `(**)`로 표시한 줄에서 시계가 멈출 때 `timerID`를 초기화해야 한다는 점도 유의하세요. 이렇게 해야 나중에 `clockStart()`를 실행해 시계를 다시 시작할 수 있습니다. diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md index 5bb2aa27f6..6455ac18be 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md @@ -1,17 +1,9 @@ 이 이상한 동작의 이유는 바로 주어진 HTML이 잘못되었기 때문입니다. -<<<<<<< HEAD 브라우저는 이를 자동으로 고쳐야 합니다. 그러나 명세에 따르면 `` 안에는 표와 관련된 특정 태그만이 존재할 수 있기 때문에 텍스트가 있어서는 안 됩니다. 따라서 브라우저는 `'aaa'`를 `
` *앞에* 추가합니다. -======= -The browser has to fix it automatically. But there may be no text inside the `
`: according to the spec only table-specific tags are allowed. So the browser shows `"aaa"` *before* the `
`. ->>>>>>> upstream/master 이제 표를 삭제해도 텍스트가 남아있는 이유가 분명해졌습니다. -<<<<<<< HEAD 이 문제는 브라우저 도구를 사용해 DOM을 탐색해보면 쉽게 답을 찾을 수 있습니다. 브라우저 도구에서는 `
` 앞에 `'aaa'` 가 있는 것으로 표시됩니다. -======= -The question can be easily answered by exploring the DOM using the browser tools. You'll see `"aaa"` before the `
`. ->>>>>>> upstream/master HTML 표준에는 잘못된 HTML을 수정하는 방법이 구체적으로 정해져 있으므로, 이러한 브라우저의 동작은 올바른 동작입니다. \ No newline at end of file diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md index 56552b433a..07f13070f9 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md @@ -22,10 +22,6 @@ importance: 1 alert(table); // table 은 삭제할 표의 id 입니다. table.remove(); -<<<<<<< HEAD // 왜 문서 안에 aaa가 남아 있을까요? -======= - // why there's still "aaa" in the document? ->>>>>>> upstream/master ``` diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md index 748eed413d..f66b63584a 100644 --- a/2-ui/1-document/07-modifying-document/6-create-list/task.md +++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md @@ -8,15 +8,9 @@ importance: 4 리스트의 모든 요소는 아래 방법으로 생성합니다. -<<<<<<< HEAD 1. `prompt`를 사용해 사용자로부터 리스트의 내용을 입력받습니다. 2. 1번에서 입력받은 내용을 갖는 `
  • ` 를 생성한 후 `
      ` 에 추가합니다. 3. 사용자가 입력을 취소할 때까지 계속합니다 (`ESC` 키나 프롬프트 창의 취소 버튼을 누를 때까지). -======= -1. Ask a user about its content using `prompt`. -2. Create the `
    • ` with it and add it to `
        `. -3. Continue until the user cancels the input (by pressing `key:Esc` or via an empty entry). ->>>>>>> upstream/master 모든 요소는 동적으로 생성되어야 합니다.