Skip to content

Commit 0dfd2b5

Browse files
Violet-Bora-LeeViolet-Bora-Lee
committed
[브라우저 환경과 다양한 명세서] 번역
- 원문 수정사항 반영
1 parent 693d4b4 commit 0dfd2b5

File tree

1 file changed

+43
-43
lines changed

1 file changed

+43
-43
lines changed

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

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
# 브라우저 환경과 다양한 명세
1+
# 브라우저 환경과 다양한 명세서
22

3-
자바스크립트는 본래 웹 브라우저에서 사용하려고 만들어진 언어입니다. 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였습니다.
3+
자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어입니다. 이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였습니다.
44

5-
자바스크립트가 돌아가는 플랫폼은 *호스트(host)* 라고 불립니다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있습니다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세에선 이를 *호스트 환경(host environment)* 이라고 부릅니다.
5+
자바스크립트가 돌아가는 플랫폼은 *호스트(host)* 라고 불립니다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있습니다. 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 *호스트 환경(host environment)* 이라고 부릅니다.
66

7-
호스트 환경은 랭귀지 코어(ECMAScript)에 더하여 플랫폼에 특정되는 객체와 함수를 제공합니다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주죠.
7+
호스트 환경은 랭귀지 코어(ECMAScript - 옮긴이)에 더하여 플랫폼에 특정되는 객체와 함수를 제공합니다. 웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공해주죠.
88

9-
아래는 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능을 개괄적으로 보여주는 그림입니다.
9+
아래 그림은 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능을 개괄적으로 보여줍니다.
1010

1111
![](windowObjects.svg)
1212

13-
최상단엔 `window` 객체가 있습니다. 이 객체는 2가지 역할을 합니다.
13+
최상단엔 `window`라 불리는 '루트' 객체가 있습니다. `window` 객체는 2가지 역할을 합니다.
1414

15-
1. <info:global-object>에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다.
16-
2. "브라우저 창(browser window)"을 대변하고, 이를 제어할 수 있는 메서드를 제공합니다.
15+
1. <info:global-object> 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체입니다.
16+
2. '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공합니다.
1717

18-
아래 예시는 `window` 객체를 전역 객체로 사용하고 있습니다.
18+
아래 예시에선 `window` 객체를 전역 객체로 사용하고 있습니다.
1919

2020
```js run
2121
function sayHi() {
22-
alert("안녕하세요");
22+
alert("안녕하세요.");
2323
}
2424

2525
// 전역 함수는 전역 객체(window)의 메서드임
@@ -29,16 +29,16 @@ window.sayHi();
2929
아래 예시에선 `window` 객체가 브라우저 창을 대변하고 있으며, 이를 이용해 창의 높이를 출력합니다.
3030

3131
```js run
32-
alert(window.innerHeight); // 창 내부 높이
32+
alert(window.innerHeight); // 창 내부(inner window) 높이
3333
```
3434

35-
`window` 객체에 관련된 다양한 메서드와 프로퍼티는 추후 자세히 살펴보도록 하겠습니다.
35+
`window` 객체엔 다양한 메서드와 프로퍼티가 있는데, 추후 자세히 살펴보도록 하겠습니다.
3636

37-
## DOM(문서 객체 모델)
37+
## 문서 객체 모델(DOM)
3838

39-
Document Object Model, or DOM for short, represents all page content as objects that can be modified.
39+
문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.
4040

41-
The `document` object is the main "entry point" to the page. We can change or create anything on the page using it.
41+
`document` 객체는 페이지의 기본 '진입점' 역할을 합니다. `document` 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다.
4242

4343
예시:
4444
```js run
@@ -49,32 +49,32 @@ document.body.style.background = "red";
4949
setTimeout(() => document.body.style.background = "", 1000);
5050
```
5151

52-
문서 객체는 예시에서 소개한 `document.body.style` 외에도 수많은 기능을 제공합니다. 문서 객체의 프로퍼티와 메서드에 대한 설명은 명세(specification)에서 찾을 수 있습니다.
52+
문서 객체 모델은 예시에서 소개한 `document.body.style` 외에도 수많은 기능을 제공합니다. 관련 프로퍼티와 메서드에 대한 정보는 관련 명세서에서 찾을 수 있습니다.
5353

54-
- **DOM에 관한 표준** 은 <https://dom.spec.whatwg.org>에서 확인할 수 있습니다.
54+
- WHATWG의 **DOM 살아있는 표준(Living Standard)** -- <https://dom.spec.whatwg.org>
5555

56-
```smart header="DOM is not only for browsers"
57-
The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too.
56+
```smart header="DOM은 브라우저만을 위한 모델이 아닙니다."
57+
DOM 명세서엔 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨있습니다. 그런데 브라우저가 아닌 곳에서도 DOM을 사용하는 경우가 있습니다.
5858
59-
For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though.
59+
HTML 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용합니다. 이런 스크립트에선 명세서 일부만을 지원하겠지만요.
6060
```
6161

62-
```smart header="CSSOM for styling"
63-
CSS rules and stylesheets are structured in a different way than HTML. There's a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/), that explains how they are represented as objects, and how to read and write them.
62+
```smart header="스타일링을 위한 CSSOM"
63+
CSS 규칙과 스타일시트(stylesheet)는 HTML과는 다른 구조를 띱니다. 따라서 CSS 규칙과 스타일시트를 객체로 나타내고 이 객체를 어떻게 읽고 쓸 수 있을지에 대한 설명을 담은 별도의 명세서, [CSS 객체 모델(CSS Object Model, CSSOM)](https://www.w3.org/TR/cssom-1/)이 존재합니다.
6464
65-
CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, but that's also possible.
65+
CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰입니다. 그런데 CSS 규칙은 대부분 정적이기 때문에 CSSOM을 실무에서 자주 접하지는 않을 겁니다. 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야 하는 경우는 극히 드물긴 하지만, 이때 CSSOM이 사용됩니다.
6666
```
6767

68-
## BOM(브라우저 객체 모델)
68+
## 브라우저 객체 모델(BOM)
6969

70-
브라우저 객체 모델(Browser Object Model, BOM)은 HTML 명세의 일부로, 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가적인 객체를 나타냅니다.
70+
브라우저 객체 모델(Browser Object Model, BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타냅니다.
7171

7272
예시:
7373

74-
- [navigator](mdn:api/Window/navigator) 객체를 이용하면 브라우저와 운영체제에 대한 정보를 얻을 수 있습니다. 이 객체엔 많은 프로퍼티가 있지만, 가장 많이 알려진 프로퍼티는 현재 사용 중인 브라우저를 판단하는 데 쓰이는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등)를 알아내는 데 쓰이는 `navigator.platform`입니다.
75-
- [location](mdn:api/Window/location) 객체는 현재 창의 URL 정보를 제공합니다. 또한 새로운 URL로 변경(redirect)할 수 있는 기능을 제공합니다.
74+
- [navigator](mdn:api/Window/navigator) 객체는 브라우저와 운영체제에 대한 정보를 제공합니다. 객체엔 다양한 프로퍼티가 있는데, 가장 잘 알려진 프로퍼티는 현재 사용 중인 브라우저 정보를 알려주는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등) 정보를 알려주는 `navigator.platform`입니다.
75+
- [location](mdn:api/Window/location) 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줍니다.
7676

77-
예제를 통해 `location` 객체의 용례를 살펴봅시다.
77+
아래 예시는 `location` 객체를 어떻게 활용할 수 있을지 보여줍니다.
7878

7979
```js run
8080
alert(location.href); // 현재 URL을 보여줌
@@ -83,33 +83,33 @@ if (confirm("위키피디아 페이지로 가시겠습니까?")) {
8383
}
8484
```
8585

86-
메서드 `alert/confirm/prompt` 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이죠.
86+
`alert/confirm/prompt` 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이죠.
8787

8888
```smart header="다양한 명세"
89-
[HTML 명세](https://html.spec.whatwg.org)는 BOM에 대한 내용도 다룹니다. BOM에 관련된 명세가 따로 있을 것 같은데도 말이죠.
89+
BOM은 [HTML 명세서](https://html.spec.whatwg.org)의 일부입니다.
9090
91-
<https://html.spec.whatwg.org>에선 태그, HTML 속성(attribute) 같은 "HTML"에 관련된 내용만 다루지 않습니다. 브라우저 전반에서 사용되는 객체, 메서드 부터 특정 브라우저에서만 사용되는 DOM 확장까지도 다룹니다. 이 모든 것이 HTML 기술에 속하기 때문입니다. HTML 명세에서 다루지 않는 것들에 대한 명세는 <https://spec.whatwg.org>에서 확인할 수 있습니다.
91+
BOM에 관련된 명세가 따로 있지는 않습니다. <https://html.spec.whatwg.org>에서 볼 수 있는 HTML 명세서는 태그, HTML 속성(attribute) 같은 'HTML' 뿐만 아니라 다양한 객체와 메서드, 브라우저에서만 사용되는 DOM 확장을 다룹니다. 이 모든 것이 HTML 기술에 속하기 때문입니다. HTML 명세서엔 이 외에도 <https://spec.whatwg.org>에 있는 내용도 들어갑니다.
9292
```
9393

9494
## 요약
9595

96-
표준에 대하여 이야기하면서 다음 명세들을 알아보았습니다.
96+
표준에 대하여 이야기하면서 다음 명세서들을 알아보았습니다.
9797

98-
DOM 명세
99-
: 문서 구조, 조작, 이벤트를 설명하고, <https://dom.spec.whatwg.org>에서 볼 수 있습니다.
98+
DOM 명세서
99+
: 문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, <https://dom.spec.whatwg.org>에서 볼 수 있습니다.
100100

101-
CSSOM 명세
102-
: CSS와 스타일시트에 대한 규칙, 자바스크립트로 문서 스타일을 조작하는 방법에 대해 설명하고, <https://www.w3.org/TR/cssom-1/>에서 볼 수 있습니다.
101+
CSSOM 명세서
102+
: 스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, <https://www.w3.org/TR/cssom-1/>에서 볼 수 있습니다.
103103

104-
HTML 명세
105-
: 태그와 같은 HTML 언어, `setTimeout`, `alert`, `location` 등의 다양한 브라우저 기능을 정의한 BOM(browser object model)에 관해 설명하고, <https://html.spec.whatwg.org>에서 볼 수 있습니다. DOM 명세에 추가적인 프로퍼티와 메서드를 더해 확장한 명세입니다.
104+
HTML 명세서
105+
: 태그 등의 HTML 언어, `setTimeout`, `alert`, `location` 등의 다양한 브라우저 기능을 정의한 BOM에 대한 설명이 담겨있고, <https://html.spec.whatwg.org>에서 볼 수 있습니다. DOM 명세서에 다양한 프로퍼티와 메서드를 추가해 확장한 명세서입니다.
106106

107-
Additionally, some classes are described separately at <https://spec.whatwg.org/>.
107+
몇몇 클래스에 대한 설명은 <https://spec.whatwg.org/>에서 확인할 수 있습니다.
108108

109-
Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
109+
배울 게 많지만, 모든 걸 한꺼번에 다루고 기억하기엔 그 양이 너무 많기 때문에 지금까지 소개해 드린 링크를 잘 기록해 놓으시기 바랍니다.
110110

111-
When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> 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.
111+
프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 <https://developer.mozilla.org/en-US/search>을 찾아보는 것도 좋긴 하지만, 명세서에서 관련 설명을 찾는 게 더 나을 때도 있기 때문입니다. 명세서에 있는 설명은 복잡하고 내용도 더 많긴 하지만 명세서를 읽는 습관을 들이다 보면 기초 지식을 탄탄하게 쌓을 수 있습니다.
112112

113-
To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
113+
검색창에 'WHATWG [용어]' 혹은 'MDN [용어]'로 검색하면 명세서나 MDN문서에서 원하는 내용을 쉽게 찾을 수 있습니다. <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage> 처럼 말이죠.
114114

115-
Now we'll get down to learning DOM, because the document plays the central role in the UI.
115+
자 이제 UI에서 핵심적인 역할을 하는 DOM에 대해 본격적으로 살펴보도록 합시다.

0 commit comments

Comments
 (0)