From e2f38a503d2aab5934a2854d0a7f4df22300aa93 Mon Sep 17 00:00:00 2001
From: Kesus Kim <kesuskim@gmail.com>
Date: Mon, 13 Mar 2017 10:50:20 +0900
Subject: [PATCH 1/5] Trans(component-styles.jade): All

---
 .../ts/latest/guide/component-styles.jade     | 399 +++++++++++++-----
 1 file changed, 294 insertions(+), 105 deletions(-)

diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index 0527c3d4..bf63fab7 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -2,124 +2,201 @@ block includes
   include ../_util-fns
 
 :marked
+  Angular 어플리케이션은 스타일시트로 일반적인 CSS를 이용합니다. 즉 우리가
+  CSS 스타일시트에 대해 알고 있는 모든 것, 가령 선택자나 규칙, 미디어쿼리 등을
+  Angular 어플리케이션에 직접 사용할 수 있어요.
+
   Angular applications are styled with regular CSS. That means we can apply
   everything we know about CSS stylesheets, selectors, rules, and media queries
   to our Angular applications directly.
-  
+
+  그 외에도, Angular는 *컴포넌트 스타일*을 이용하여 일반적인 CSS 보다 더욱 체계적으로
+  모듈화를 하여 번들링 할 수 있는 능력이 있습니다.
+
   On top of this, Angular has the ability to bundle *component styles*
   with our components enabling a more modular design than regular stylesheets.
-  
+
+  이번 챕터에서는 이러한 *컴포넌트 스타일*을 어떻게 사용하고 적용할 수 있는지 배워볼거에요.
+
   In this chapter we learn how to load and apply these *component styles*.
-  
-  ## Table Of Contents
 
-  * [Using Component Styles](#using-component-styles)
-  * [Special selectors](#special-selectors)
-  * [Loading Styles into Components](#loading-styles)
-  * [Controlling View Encapsulation: Emulated, Native, and None](#view-encapsulation)
-  * [Appendix 1: Inspecting the generated runtime component styles](#inspect-generated-css)
-  * [Appendix 2: Loading Styles with Relative URLs](#relative-urls)
+  ## 목차
 
-  Run the <live-example></live-example> of the code shown in this chapter.
+  * [컴포넌트 스타일 사용하기](#using-component-styles)
+  * [특별한 선택자](#special-selectors)
+  * [컴포넌트에 스타일 불러오기](#loading-styles)
+  * [뷰 캡슐화 제어하기: Emulated, Native, and None](#view-encapsulation)
+  * [부록 1: 생성된 런타임 컴포넌트 스타일 탐색하기](#inspect-generated-css)
+  * [부록 2: 상대 경로 URL을 이용하여 스타일 불러오기](#relative-urls)
+
+  이 페이지의 예제는 <live-example></live-example> 에서 확인 가능합니다.
 
 .l-main-section
 :marked
-  ## Using Component Styles
-  
+  ## 컴포넌트 스타일 사용하기
+
+  우리가 작성하는 모든 Angular 컴포넌트에 대해, 우리는 HTML 템플릿뿐만 아니라,
+  템플릿과 같이 동작하는 CSS 스타일(선택자, 규칙, 미디어 쿼리 등)도 정의합니다.
+
   For every Angular component we write, we may define not only an HTML template,
-  but also the CSS styles that go with that template, 
+  but also the CSS styles that go with that template,
   specifying any selectors, rules, and media queries that we need.
 
+  이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 속성 값을 설정하는 것 입니다.
+  `styles` 속성 값은 CSS 코드가 포함된 문자열의 배열을 취합니다.
+  보통 아래의 예제와 같이 하나의 문자열만을 주지요.
+
   One way to do this is to set the `styles` property in the component metadata.
   The `styles` property takes #{_an} #{_array} of strings that contain CSS code.
   Usually we give it one string as in this example:
-  
+
 +makeExample('component-styles/ts/src/app/hero-app.component.ts')(format='.')
 
 :marked
+  컴포넌트 스타일은 전통적이며, 전역적으로 스타일을 작성하는 방법과 몇 가지가 다릅니다.
+
   Component styles differ from traditional, global styles in a couple of ways.
-  
+
+  먼저 컴포넌트 스타일 안에 넣는 선택자들은 *오직 해당하는 컴포넌트의 템플릿 안에서만 적용됩니다.* 위의 예제에서의
+  `h1` 선택자는 `HeroAppComponent` 템플릿 내의 `<h1>` 태그에만 적용되며, 어플리케이션 내의 그 밖의 `<h1>` 태그에는 영향을 미치지 않습니다.
+
   Firstly, the selectors we put into a component's styles *only apply within the template
   of that component*. The `h1` selector in the example above only applies to the `<h1>` tag
   in the template of `HeroAppComponent`. Any `<h1>` elements elsewhere in
   the application are unaffected.
-  
+
+  이것은 전통적인 CSS가 동작하는 방식에 비하여 모듈화에 있어서 다음과 같은 개선점을 가지고 있습니다.
+
   This is a big improvement in modularity compared to how CSS traditionally works:
-  
-  1. We can use the CSS class names and selectors that make the most sense in the context of each component. 
-     
-  1. Class names and selectors are local to the component and won't collide with 
+
+  1. 각각의 컴포넌트의 상황에 최적화 된 선택자와 클래스 이름을 사용할 수 있다.
+
+  1. We can use the CSS class names and selectors that make the most sense in the context of each component.
+
+  1. 클래스 이름과 선택자들은 해당 컴포넌트에 지역적이며, 어플리케이션 내의 다른 곳에서 사용되고 있는
+     다른 클래스들이나 선택자들과 겹치지 않는다.
+
+  1. Class names and selectors are local to the component and won't collide with
   classes and selectors used elsewhere in the application.
-     
+
+  1. 컴포넌트의 스타일은 어플리케이션의 다른 곳에서 스타일을 변경함으로써 *변경할 수 없다*.
+
   1. Our component's styles *cannot* be changed by changes to styles elsewhere in the application.
-     
+
+  1. 각각의 컴포넌트의 CSS 코드는 TypeScript 와 HTML 코드 내에 동시에 적용할 수 있으며,
+     이는 프로젝트 구조를 정리하는데에 도움이 된다.
+
   1. We can co-locate the CSS code of each component with the TypeScript and HTML code of the component,
      which leads to a neat and tidy project structure.
-     
+
+  1. 미래의 어느 시점에 해당 코드가 어디에 또 사용되었는지 찾아보는 고통을 겪지 않고도
+     컴포넌트의 CSS 코드를 변경하거나 제거할 수 있다. 그저 컴포넌트 내에 있는 코드만 보면 된다.
+
   1. We can change or remove component CSS code in the future without trawling through the
      whole application to see where else it may have been used. We just look at the component we're in.
 
 a(id="special-selectors")
 .l-main-section
 :marked
-  ## Special selectors
-  
-  Component styles have a few special *selectors* from the world of 
+  ## 특별한 선택자들
+
+  컴포넌트 스타일에는 [shadow DOM 스타일의 스코핑](https://www.w3.org/TR/css-scoping-1) 으로부터 파생된 몇몇 특별한 *선택자들*이 있습니다.
+
+  Component styles have a few special *selectors* from the world of
   [shadow DOM style scoping](https://www.w3.org/TR/css-scoping-1):
-  
+
   ### :host
 
+  `:host` 가상 클래스 선택자를 해당 컴포넌트의 *상위 컴포넌트*를 선택하기 위해 사용하세요.
+  (컴포넌트 템플릿 *내에 존재하는* 엘리먼트를 선택하는 경우와는 반대로 말이에요.)
+
   Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
   targeting elements *inside* the component's template):
-  
+
 +makeExample('component-styles/ts/src/app/hero-details.component.css', 'host')(format='.')
 
 :marked
+  이 방법은 상위 엘리먼트를 선택할 수 있는 *유일한* 방법입니다. 다른 선택자들로는
+  상위 엘리먼트에 절대 선택할 수 없어요, 왜냐면 그 엘리먼트는 컴포넌트의 템플릿에 속하지 않았으니까요.
+  그 엘리먼트는 해당 엘리먼트의 상위 컴포넌트의 템플릿에 속해있지요.
+
   This is the *only* way we can target the host element. We cannot reach
   it from inside the component with other selectors, because it is not part of the
   component's own template. It is in a parent component's template.
-  
-  Use the *function form* to apply host styles conditionally by 
+
+  `:host` 다음에 오는 소괄호에 다른 선택자를 포함하여, *함수의 형태*를 사용하여
+  조건에 따라 상위 엘리먼트의 스타일을 적용하세요.
+
+  Use the *function form* to apply host styles conditionally by
   including another selector inside parentheses after `:host`.
-  
+
+  다음의 예제는 `active` 클래스를 가지고 있는 경우에 상위 엘리먼트를 선택할 것입니다.
+
   In the next example we target the host element again, but only when it also has the `active` CSS class.
-  
+
 +makeExample('component-styles/ts/src/app/hero-details.component.css', 'hostfunction')(format=".")
-  
+
 :marked
   ### :host-context
-  
+
+  때때로 컴포넌트의 뷰의 *외부*에서 어떤 조건에 따라 스타일을 적용하는 것이 좋을 때가 있습니다.
+  예를 들어, 문서의 `<body>` 엘리먼트에 적용되는 CSS 테마 클래스가 있을 수 있죠. 이 테마를 기반으로
+  우리의 컴포넌트도 맞춰서 변경하고 싶다고 해봐요.
+
   Sometimes it is useful to apply styles based on some condition *outside* a component's view.
   For example, there may be a CSS theme class applied to the document `<body>` element, and
   we want to change how our component looks based on that.
-  
+
+  `:host-context()` 가상 선택자를 사용하세요. 이 선택자는 `:host()` 함수처럼 동작합니다.
+  이 선택자는 해당 컴포넌트의 *모든 부모* 엘리먼트들의 CSS 클래스를 찾아냅니다.
+  문서의 최상위 엘리먼트인 `<html>` 엘리먼트까지요. 이것은 다른 선택자들과 조합하였을 때 굉장히 유용합니다.
+
   Use the `:host-context()` pseudo-class selector. It works just like the function
   form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
   up to the document root. It's useful when combined with another selector.
-  
+
+  다음의 예제는, 어떠한 부모 엘리먼트가 `theme-light` 이라는 CSS 클래스를 가지고 있는 경우에 대해,
+  컴포넌트 내의 `<h2>` 엘리먼트에 `background-color` 스타일을 적용합니다.
+
   In the following example, we apply a `background-color` style to all `<h2>` elements *inside* the component, only
   if some ancestor element has the CSS class `theme-light`.
-  
+
+
 +makeExample('component-styles/ts/src/app/hero-details.component.css', 'hostcontext')(format='.')
-  
+
 :marked
   ### /deep/
-  
-  Component styles normally apply only to the HTML in the component's own template. 
-  
+
+  컴포넌트 스타일은 일반적으로 컴포넌트의 템플릿 내에 존재하는 HTML에 대해서만 적용됩니다.
+
+  Component styles normally apply only to the HTML in the component's own template.
+
+  `/deep/` 선택자를 이용하여 모든 자식 컴포넌트 뷰에 대해 스타일을 전부 적용시키도록 강제할 수 있습니다.
+  `/deep/` 선택자는 컴포넌트가 어떠한 깊이에 있든, 얼마나 많이 겹쳐 있든 상관없이 적용되며, 컴포넌트의
+  *View Children과 Content Children 모두*에 적용됩니다.
+
   We can use the `/deep/` selector to force a style down through the child component tree into all the child component views.
   The `/deep/` selector works to any depth of nested components, and it applies *both to the view
-  children and the content children* of the component. 
-  
-  In this example, we target all `<h3>` elements, from the host element down 
-  through this component to all of its child elements in the DOM: 
+  children and the content children* of the component.
+
+  다음의 예제는, 상위 엘리먼트부터 해당 컴포넌트에 이르기까지 DOM 내의 모든 자식 엘리먼트에 대해
+  `<h3>` 엘리먼트를 선택합니다.
+
+  In this example, we target all `<h3>` elements, from the host element down
+  through this component to all of its child elements in the DOM:
+
 +makeExample('component-styles/ts/src/app/hero-details.component.css', 'deep')(format=".")
 
 :marked
+  `/deep/` 선택자는 별칭으로 `>>>` 를 가지고 있습니다. 두 가지를 마음껏 바꾸어 사용할 수 있습니다.
+
   The `/deep/` selector also has the alias `>>>`. We can use either of the two interchangeably.
 
 .alert.is-important
   :marked
+    `/deep/`과 `>>>` 선택자는 **emulated** 뷰 캡슐화에 대해서만 사용되어야 합니다.
+    이것은 기본 값이며, 대개 그렇게 사용합니다. 자세한 내용에 대해서는 [뷰 캡슐화 제어](#view-encapsulation) 부분을 참조하세요.
+
     The `/deep/` and `>>>` selectors should only be used with **emulated** view encapsulation.
     This is the default and it is what we use most of the time. See the
     [Controlling View Encapsulation](#view-encapsulation)
@@ -128,115 +205,189 @@ a(id="special-selectors")
 a(id='loading-styles')
 .l-main-section
 :marked
-  ## Loading Styles into Components
-  
-  We have several ways to add styles to a component: 
+  ## 컴포넌트로 스타일 불러오기
+
+  컴포넌트에 스타일을 더하는 여러 가지 방법이 있습니다.
+
+  We have several ways to add styles to a component:
+
+  * 템플릿 HTML에 인라인 `<style>` 태그 사용
+
   * inline in the template HTML
+
+  * 메타 정보로 `styles` 이나 `styleUrls`를 설정
+
   * by setting `styles` or `styleUrls` metadata
+
+  * CSS 의 `@import` 사용
+
   * with CSS imports
-  
+
+
+  위에서 언급한 스코핑 규칙은 이 불러오는 방법들에 대해 각각 적용됩니다.
+
   The scoping rules outlined above apply to each of these loading patterns.
-  
-  ### Styles in Metadata
-  
+
+  ### 메타 정보에 styles 설정
+
+  컴포넌트의 `@Component` 장식자에 `styles` 배열 속성 값을 추가할 수 있습니다.
+  배열 내의 각각의 문자열에(일반적으로는 하나의 문자열만 사용합니다) CSS를 정의합니다.
+
   We can add a `styles` #{_array} property to the `@Component` #{_decorator}.
   Each string in the #{_array} (usually just one string) defines the CSS.
-  
+
 +makeExample('component-styles/ts/src/app/hero-app.component.ts')
-  
+
 :marked
-  ### Template Inline Styles
-  
+  ### 템플릿에 인라인 `<style>` 태그 사용
+
+  `<style>` 태그를 이용하여 HTML 템플릿 내에 직접 사용함으로써
+  스타일을 적용시킬 수도 있습니다.
+
   We can embed styles directly into the HTML template by putting them
   inside `<style>` tags.
-  
+
 +makeExample('component-styles/ts/src/app/hero-controls.component.ts', 'inlinestyles')
 
 :marked
-  ### Style URLs in Metadata
-  
+  ### 메타 정보에 style URLs 설정
+
+  컴포넌트의 `@Component` 장식자에 `styleUrls` 속성값을 주어 외부의 CSS 파일들을 불러올 수 있습니다.
+
   We can load styles from external CSS files by adding a `styleUrls` attribute
   into a component's `@Component` #{_decorator}:
-  
+
 +makeExample('component-styles/ts/src/app/hero-details.component.ts', 'styleurls')
 
 block style-url
   .alert.is-important
     :marked
+      이 URL은 ***어플리케이션의 루트 경로에 상대적*** 이며, 루트 경로는 일반적으로
+      어플리케이션을 관장하는 `index.html`의 경로를 의미합니다.
+      스타일시트 파일의 URL은 컴포넌트 파일에 대해 상대적이지 *않습니다*.
+      그것이 예제에서 본 URL이 `src/app/`으로 시작하는 이유입니다.
+      [부록 2](#relative-urls)에서 URL을 컴포넌트 파일의 상대 경로에 맞게 설정하는
+      방법을 살펴보세요.
+
       The URL is ***relative to the application root*** which is usually the
-      location of the `index.html` web page that hosts the application. 
+      location of the `index.html` web page that hosts the application.
       The style file URL is *not* relative to the component file.
       That's why the example URL begins `src/app/`.
-      See [Appendix 2](#relative-urls) to specify a URL relative to the 
+      See [Appendix 2](#relative-urls) to specify a URL relative to the
       component file.
 
 block module-bundlers
   .l-sub-section
     :marked
+      Webpack과 같은 모듈 번들러를 사용하는 사용자들은 `styles` 속성을 이용하여
+      빌드 타임에 외부 CSS 파일들을 불러들일 수 있습니다. 이렇게 작성할 수 있습니다:
+
       Users of module bundlers like Webpack may also use the `styles` attribute
       to load styles from external files at build time. They could write:
 
       `styles: [require('my.component.css')]`
 
-      We set the `styles` property, **not** `styleUrls` property! The module 
-      bundler is loading the CSS strings, not Angular. 
-      Angular only sees the CSS strings *after* the bundler loads them. 
-      To Angular it is as if we wrote the `styles` array by hand. 
-      Refer to the module bundler's documentation for information on 
+      `stylesUrls` 속성이 **아닌**, `styles` 속성을 설정하였습니다! 모듈 번들러는
+      CSS 문자열을 로딩하지, Angular를 로딩하지 않습니다.
+      Angular는 모듈 번들러가 CSS 파일들을 불러들인 이후에, 오직 CSS 문자열만 볼 뿐입니다.
+      Angular에게는 마치 우리가 `styles` 배열에 손으로 직접 CSS 문자열을 작성한 것처럼
+      보일 뿐 입니다.
+      CSS를 이러한 방식으로 로딩하는 방식에 대해서는, 모듈 번들러의 문서를 참조하세요.
+
+      We set the `styles` property, **not** `styleUrls` property! The module
+      bundler is loading the CSS strings, not Angular.
+      Angular only sees the CSS strings *after* the bundler loads them.
+      To Angular it is as if we wrote the `styles` array by hand.
+      Refer to the module bundler's documentation for information on
       loading CSS in this manner.
-  
+
 :marked
-  ### Template Link Tags
-  
-  We can also embed `<link>` tags into the component's HTML template. 
-  
-  As with `styleUrls`, the link tag's `href` URL is relative to the 
+  ### 템플릿에 link 태그
+
+  컴포넌트의 HTML 템플릿 내에 `<link>` 태그를 직접 이용할 수도 있습니다.
+
+  We can also embed `<link>` tags into the component's HTML template.
+
+  `styleUrls`과 같이, link 태그의 `href` URL은 컴포넌트 파일에 대해 상대적인 것이 아니라,
+  어플리케이션 루트 경로에 대해 상대적입니다.
+
+  As with `styleUrls`, the link tag's `href` URL is relative to the
   application root, not relative to the component file.
-  
+
 +makeExample('component-styles/ts/src/app/hero-team.component.ts', 'stylelink')
-  
+
 :marked
-  ### CSS @imports
-  
+  ### CSS @import
+
+  표준 CSS의 [`@import` 규칙](https://developer.mozilla.org/en/docs/Web/CSS/@import) 을
+  이용하여 CSS 파일들을 불러들일 수도 있습니다.
+
   We can also import CSS files into our CSS files by using the standard CSS
   [`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).
-  
+
 block css-import-url
   :marked
+    *이 경우*, URL은 불러들여 오는 CSS의 파일에 대해 상대적입니다.
+
     In *this* case the URL is relative to the CSS file into which we are importing.
-  
+
 +makeExample('component-styles/ts/src/app/hero-details.component.css', 'import', 'src/app/hero-details.component.css (excerpt)')
 
 a#view-encapsulation
 .l-main-section
 :marked
-  ## Controlling View Encapsulation: Native, Emulated, and None
-  
+  ## 뷰 캡슐화 제어: Native, Emulated, and None
+
+  위에서 논의되었듯, 컴포넌트의 CSS 스타일은 컴포넌트 자체 뷰에 캡슐화되며, 어플리케이션의 다른 부분에
+  영향을 끼치지 않습니다.
+
   As discussed above, component CSS styles are *encapsulated* into the component's own view and do
   not affect the rest of the application.
-  
+
+  이러한 캡슐화를 *컴포넌트 별* 기반으로 *뷰 캡슐화 모드* 값을 컴포넌트 메타정보에 설정함으로써 이러한
+  동작들을 제어할 수 있습니다. 선택할 수 있는 3가지의 모드는 다음과 같습니다:
+
   We can control how this encapsulation happens on a *per
   component* basis by setting the *view encapsulation mode* in the component metadata. There
   are three modes to choose from:
-  
+
+  * `Native` 뷰 캡슐화는 브라우저의 네이티브 [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
+    구현체를 사용하여 컴포넌트의 상위 엘리먼트에 Shadow DOM을 붙히고, Shadow DOM 내에 컴포넌트의 뷰를 놓습니다.
+    컴포넌트의 스타일은 그 Shadow DOM 내에 포함됩니다.
+
   * `Native` view encapsulation uses the browser's native [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
     implementation to attach a Shadow DOM to the component's host element, and then puts the component
     view inside that Shadow DOM. The component's styles are included within the Shadow DOM.
-    
+
+  * `Emulated` 뷰 캡슐화는 (**기본 값**) CSS 코드를 효율적으로 컴포넌트의 뷰에 CSS를 스코핑하여
+    Shadow DOM의 행동을 모방합니다.
+    자세한 내용은 [부록 1](#inspect-generated-css) 을 참고하세요.
+
   * `Emulated` view encapsulation (**the default**) emulates the behavior of Shadow DOM by preprocessing
     (and renaming) the CSS code to effectively scope the CSS to the component's view.
     See [Appendix 1](#inspect-generated-css) for details.
-    
-  * `None` means that Angular does no view encapsulation. 
-    Angular adds the CSS to the global styles. 
-    The scoping rules, isolations, and protections discussed earlier do not apply. 
+
+  * `None` 은 Angular가 뷰 캡슐화를 하지 않음을 의미합니다.
+    Angular는 CSS를 전역 스타일에 더할 것입니다. 기존에 논의되었던 스코핑 규칙, 고립화 등이 적용되지 않을 것입니다.
+    이 방법은 본질적으로는 컴포넌트의 스타일을 HTML에 붙여넣기 한 것과 동일합니다.
+
+  * `None` means that Angular does no view encapsulation.
+    Angular adds the CSS to the global styles.
+    The scoping rules, isolations, and protections discussed earlier do not apply.
     This is essentially the same as pasting the component's styles into the HTML.
-    
+
+  컴포넌트의 캡슐화 모드를 컴포넌트의 메타 정보에 `encapsulation` 속성을 이용하여 설정하세요:
+
   Set the components encapsulation mode using the `encapsulation` property in the component metadata:
-  
+
 +makeExample('component-styles/ts/src/app/quest-summary.component.ts', 'encapsulation.native')(format='.')
 
 :marked
+  `Native` 뷰 캡슐화는 [네이티브로 Shadow DOM을 지원하는 브라우저에 대해서만](http://caniuse.com/#feat=shadowdom) 동작합니다.
+  (역자 주: 네이티브로 지원한다는 의미는, 폴리필 등을 이용하지 않고도 동작하는, 최신 브라우저를 의미합니다.)
+  지원 여부는 아직까지도 제한적이므로, `Emulated` 뷰 캡슐화가 기본 모드이며 대개의 경우에 추천되는 이유가
+  바로 이것이지요.
+
   `Native` view encapsulation only works on [browsers that have native support
   for Shadow DOM](http://caniuse.com/#feat=shadowdom). The support is still limited,
   which is why `Emulated` view encapsulation is the default mode and recommended
@@ -245,15 +396,21 @@ a#view-encapsulation
 a#inspect-generated-css
 .l-main-section
 :marked
-  ## Appendix 1: Inspecting The CSS Generated in Emulated View Encapsulation
-  
+  ## 부록 1: Emulated 뷰 캡슐화에 대해 생성된 CSS 코드 검사(inspect)하기
+
+  기본 emulated 뷰 캡슐화를 사용하는 경우, Angular는 모든 컴포넌트의 스타일을 미리 처리하여서
+  표준 Shadow CSS의 스코핑 룰에 대략적으로 비슷하게 할 수 있습니다.
+
   When using the default emulated view encapsulation, Angular preprocesses
   all component styles so that they approximate the standard Shadow CSS scoping rules.
-  
+
+  실행 중인 Angular 어플리케이션의 emulated 뷰 캡슐화 된 DOM 을 검사할 때는,
+  각각의 DOM 엘리먼트에 몇 가지 추가된 속성들을 볼 수 있습니다:
+
   When we inspect the DOM of a running Angular application with emulated view
   encapsulation enabled, we see that each DOM element has some extra attributes
   attached to it:
-  
+
 code-example(format="").
   &lt;hero-details _nghost-pmm-5>
     &lt;h2 _ngcontent-pmm-5>Mister Fantastic&lt;/h2>
@@ -263,17 +420,30 @@ code-example(format="").
   &lt;/hero-detail>
 
 :marked
+  두 가지 종류의 생성된 속성이 있습니다:
+
   We see two kinds of generated attributes:
+
+  * 네이티브 캡슐화에서 Shadow DOM 의 상위 엘리먼트가 될 엘리먼트는 `_nghost` 라는, 생성된 속성값을
+    가지고 있습니다. 이 값은 컴포넌트의 상위 엘리먼트들의 경우에 생성됩니다.
+
   * An element that would be a Shadow DOM host in native encapsulation has a
     generated `_nghost` attribute. This is typically the case for component host elements.
-    
-  * An element within a component's view has a `_ngcontent` attribute 
+
+  * 컴포넌트 뷰 내의 엘리먼트는 `_ngcontent` 속성값을 갖습니다. 이 속성값은
+    이 엘리먼트가 어떠한 상위 엘리먼트의 emulated Shadow DOM에 속해있는지를 식별합니다.
+
+  * An element within a component's view has a `_ngcontent` attribute
   that identifies to which host's emulated Shadow DOM this element belongs.
-  
+
+  이 속성들의 정확한 값은 중요하지 않습니다. 이 값들은 자동으로 생성되며, 어플리케이션 코드에서는
+  절대 참조하지 않습니다. 하지만 이 값들은 생성된 컴포넌트의 스타일을 가리키며, 이 스타일은
+  DOM의 `<head>` 부분에서 찾아볼 수 있지요:
+
   The exact values of these attributes are not important. They are automatically
   generated and we never refer to them in application code. But they are targeted
   by the generated component styles, which we'll find in the `<head>` section of the DOM:
-  
+
 code-example(format="").
   [_nghost-pmm-5] {
     display: block;
@@ -284,36 +454,55 @@ code-example(format="").
     background-color: white;
     border: 1px solid #777;
   }
-  
+
 :marked
+  이것들은 우리가 작성한 스타일이며, 각각의 선택자에 `_nghost`나 `_ngcontent` 의 속성 선택자가
+  추가되어 후처리 되었습니다. 이렇게 추가된 선택자들은 이번 가이드에서 설명된 스코핑 규칙을 적용시킵니다.
+
   These are the styles we wrote, post-processed so that each selector is augmented
-  with `_nghost` or `_ngcontent` attribute selectors. 
+  with `_nghost` or `_ngcontent` attribute selectors.
   These extra selectors enable the scoping rules described in this guide.
-  
+
+  아마 Shadow DOM이 더욱 사용되기 전까지는 *emulated* 모드와 함께 살아야 할 것입니다.
+
   We'll likely live with *emulated* mode until shadow DOM gains traction.
-  
+
 a#relative-urls
 .l-main-section
 :marked
+  ## 부록 2: 상대 경로 URL을 이용하여 스타일 불러오기
+
   ## Appendix 2: Loading Styles with Relative URLs
-  
+
+  같은 디렉토리 내에 컴포넌트의 코드, HTML, CSS 세 개의 별도의 파일로 분리하는 것은 일반적인 관습입니다:
+
   It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
+
 code-example(format="nocode").
   quest-summary.component.ts
   quest-summary.component.html
   quest-summary.component.css
 
 :marked
+  컴포넌트의 메타정보에 `templateUrl`, `styleUrls` 속성을 설정하여 템플릿과 CSS 파일을 포함시킬 수 있습니다.
+  대개 이 파일들이 컴포넌트와 같이 위치하고 있기 때문에, 절대 경로를 이용하여 지정해 줄 필요 없이 그저 이름만으로
+  참조하는 것도 괜찮을 것입니다.
+
   We include the template and CSS files by setting the `templateUrl` and `styleUrls` metadata properties respectively.
   Because these files are co-located with the component,
   it would be nice to refer to them by name without also having to specify a path back to the root of the application.
 
 block module-id
   :marked
+    Angular가 전체 경로 URL을 계산하는 방법을 컴포넌트의 메타정보에 `moduleId` 속성값을 `module.id`로 줌으로써
+    변경할 수도 있습니다.
+
     We can change the way Angular calculates the full URL be setting the component metadata's `moduleId` property to `module.id`.
 
   +makeExample('src/app/quest-summary.component.ts')
 
   :marked
-    Learn more about `moduleId` in the [Component-Relative Paths](../cookbook/component-relative-paths.html) chapter.
+    `moduleId`에 대해서는 [컴포넌트-관련 경로](../cookbook/component-relative-paths.html) 챕터에서
+    더욱 자세한 정보를 알아보세요.
 
+    Learn more about `moduleId` in the [Component-Relative Paths](../cookbook/component-relative-paths.html) chapter.

From a38eca087b49e3a982e921d4adf1c48ee262d082 Mon Sep 17 00:00:00 2001
From: Kesus Kim <kesuskim@gmail.com>
Date: Mon, 13 Mar 2017 10:54:34 +0900
Subject: [PATCH 2/5] Trans(component-styles.jade): add title

---
 .../ts/latest/guide/component-styles.jade     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index bf63fab7..c525940b 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -35,6 +35,8 @@ block includes
 :marked
   ## 컴포넌트 스타일 사용하기
 
+  ## Using Component Styles
+
   우리가 작성하는 모든 Angular 컴포넌트에 대해, 우리는 HTML 템플릿뿐만 아니라,
   템플릿과 같이 동작하는 CSS 스타일(선택자, 규칙, 미디어 쿼리 등)도 정의합니다.
 
@@ -100,6 +102,8 @@ a(id="special-selectors")
 :marked
   ## 특별한 선택자들
 
+  ## Special selectors
+
   컴포넌트 스타일에는 [shadow DOM 스타일의 스코핑](https://www.w3.org/TR/css-scoping-1) 으로부터 파생된 몇몇 특별한 *선택자들*이 있습니다.
 
   Component styles have a few special *selectors* from the world of
@@ -207,6 +211,8 @@ a(id='loading-styles')
 :marked
   ## 컴포넌트로 스타일 불러오기
 
+  ## Loading Styles into Components
+
   컴포넌트에 스타일을 더하는 여러 가지 방법이 있습니다.
 
   We have several ways to add styles to a component:
@@ -230,6 +236,8 @@ a(id='loading-styles')
 
   ### 메타 정보에 styles 설정
 
+  ### Styles in Metadata
+
   컴포넌트의 `@Component` 장식자에 `styles` 배열 속성 값을 추가할 수 있습니다.
   배열 내의 각각의 문자열에(일반적으로는 하나의 문자열만 사용합니다) CSS를 정의합니다.
 
@@ -241,6 +249,8 @@ a(id='loading-styles')
 :marked
   ### 템플릿에 인라인 `<style>` 태그 사용
 
+  ### Template Inline Styles
+
   `<style>` 태그를 이용하여 HTML 템플릿 내에 직접 사용함으로써
   스타일을 적용시킬 수도 있습니다.
 
@@ -252,6 +262,8 @@ a(id='loading-styles')
 :marked
   ### 메타 정보에 style URLs 설정
 
+  ### Style URLs in Metadata
+
   컴포넌트의 `@Component` 장식자에 `styleUrls` 속성값을 주어 외부의 CSS 파일들을 불러올 수 있습니다.
 
   We can load styles from external CSS files by adding a `styleUrls` attribute
@@ -304,6 +316,8 @@ block module-bundlers
 :marked
   ### 템플릿에 link 태그
 
+  ### Template Link Tags
+
   컴포넌트의 HTML 템플릿 내에 `<link>` 태그를 직접 이용할 수도 있습니다.
 
   We can also embed `<link>` tags into the component's HTML template.
@@ -319,6 +333,8 @@ block module-bundlers
 :marked
   ### CSS @import
 
+  ### CSS @imports
+
   표준 CSS의 [`@import` 규칙](https://developer.mozilla.org/en/docs/Web/CSS/@import) 을
   이용하여 CSS 파일들을 불러들일 수도 있습니다.
 
@@ -338,6 +354,8 @@ a#view-encapsulation
 :marked
   ## 뷰 캡슐화 제어: Native, Emulated, and None
 
+  ## Controlling View Encapsulation: Native, Emulated, and None
+
   위에서 논의되었듯, 컴포넌트의 CSS 스타일은 컴포넌트 자체 뷰에 캡슐화되며, 어플리케이션의 다른 부분에
   영향을 끼치지 않습니다.
 
@@ -398,6 +416,8 @@ a#inspect-generated-css
 :marked
   ## 부록 1: Emulated 뷰 캡슐화에 대해 생성된 CSS 코드 검사(inspect)하기
 
+  ## Appendix 1: Inspecting The CSS Generated in Emulated View Encapsulation
+
   기본 emulated 뷰 캡슐화를 사용하는 경우, Angular는 모든 컴포넌트의 스타일을 미리 처리하여서
   표준 Shadow CSS의 스코핑 룰에 대략적으로 비슷하게 할 수 있습니다.
 

From 535370283d5b93667c74450bb40a20d631e0a5a4 Mon Sep 17 00:00:00 2001
From: Kesus Kim <kesuskim@gmail.com>
Date: Mon, 13 Mar 2017 21:38:52 +0900
Subject: [PATCH 3/5] Trans(guide/setup-systemjs-anatomy.jade): All

---
 .../latest/guide/setup-systemjs-anatomy.jade  | 118 +++++++++++++++---
 1 file changed, 101 insertions(+), 17 deletions(-)

diff --git a/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade b/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
index 584aa12f..d714af20 100644
--- a/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
+++ b/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
@@ -2,11 +2,20 @@ block includes
   include ../_util-fns
 
 :marked
+  [설치 문서](setup.html)의 과정은 _많은_ 파일들을 설치하지만, 대부분은
+  안전하게 무시할 수 있습니다.
+
   The documentation [setup](setup.html) procedures install a _lot_ of files,
   Most of them can be safely ignored.
 
+  어플리케이션에 관련된 **`src/`** 폴더와 **`e2e/`** 폴더 _내에_ 존재하는 파일이 개발자들에게 제일 중요합니다.
+
   Application files _inside the_ **`src/`** and **`e2e/`** folders matter most to developers.
-  
+
+  두 폴더 _외에_ 존재하는 파일들은 개발 환경을 결정합니다.
+  그 파일들은 거의 바뀌지 않으며, 아마 그 파일을 직접 보거나 수정할 일은 거의 없을 겁니다.
+  만약 해야 한다면, 이 페이지는 그 파일이 무엇을 하는지, 그들의 목적을 이해하는데에 도움을 줄 것입니다.
+
   Files _outside_ those folders condition the development environment.
   They rarely change and you may never view or modify them.
   If you do, this page can help you understand their purpose.
@@ -16,35 +25,55 @@ table(width="100%")
   col(width="10%")
   col(width="90%")
   tr
-    th File
-    th Purpose
+    th 파일
+    //- th File
+    th 목적
+    //- th Purpose
   tr
     td <code>src/app/...</code>
     td
       :marked
-        Your Angular application files go here. 
-        
+        Angular 어플리케이션 파일은 이곳에 존재합니다.
+
+        Your Angular application files go here.
+
+        "Hello Angular" 샘플 어플리케이션에는 기본적으로
+        `AppComponent`, `AppModule`, 그리고 컴포넌트의 단위 테스트(`app.component.spec.ts`) 와
+        부트스트랩 파일, `main.ts` 파일들로 구성되어 있지요.
+
         Ships with the "Hello Angular" sample's
         `AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
         the bootstrap file, `main.ts`.
-            
-        Try the <live-example name="setup">sample application</live-example> 
+
+
+        <live-example name="setup">샘플 어플리케이션</live-example>과
+        <live-example name="setup" plnkr="quickstart-specs">단위 테스트</live-example>
+        _예제 프로그램_을 직접 실행시켜보세요.
+
+        Try the <live-example name="setup">sample application</live-example>
         and the <live-example name="setup" plnkr="quickstart-specs">unit test</live-example>
         as _live examples_.
   tr
     td <code>e2e/...</code>
     td
       :marked
-        _End-to-end_ (e2e) tests of your application, 
+        어플리케이션의 _End-to-end_ (e2e) 테스트를 위한 파일입니다.
+        Jasmine으로 작성되었고, e2e 테스트 러너인 <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>에 의해 실행됩니다.
+
+        _End-to-end_ (e2e) tests of your application,
         written in Jasmine and run by the
         <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
         e2e test runner.
 
+        "Hello Angular" 샘플 프로그램에 대한 e2e 테스트가 초기화되어 있습니다.
+
         Initialized with an e2e test for the "Hello Angular" sample.
   tr
     td <code>node_modules/...</code>
     td
       :marked
+        `npm install` 명령으로 설치된 _npm_ 패키지들입니다.
+
         The _npm_ packages installed with the `npm install` command.
   tr
     td
@@ -55,113 +84,168 @@ table(width="100%")
         .travis.yml
     td
       :marked
-        Tooling configuration files and folders. 
+        개발 도구에서 사용하는 설정 파일 및 폴더입니다.
+        꼭 필요한 경우가 아니면 그냥 무시하세요.
+
+        Tooling configuration files and folders.
         Ignore them until you have a compelling reason to do otherwise.
   tr
     td <code>CHANGELOG.md</code>
     td
       :marked
+        _빠른시작_ 레포지토리의 변화를 기록해놓은 파일입니다.
+        무시하거나 지워버리세요.
+
         The history of changes to the _QuickStart_ repository.
         Delete or ignore.
   tr
     td <code>favicon.ico</code>
     td
       :marked
+        브라우저 탭에 나타나는 어플리케이션 아이콘입니다.
+
         The application icon that appears in the browser tab.
   tr
     td <code>index.html</code>
     td
       :marked
-        The application host page. 
+        어플리케이션을 호스팅 해주는 페이지입니다.
+        미리 선언된 순서대로, 몇 가지 핵심적인 스크립트를 먼저 불러들입니다.
+        그 이후에 body 태그 내에 있는 `<my-app>` 태그에 루트 컴포넌트인
+        `AppComponent`를 위치시킴으로써 어플리케이션을 부팅합니다.
+
+        The application host page.
         It loads a few essential scripts in a prescribed order.
         Then it boots the application, placing the root `AppComponent`
         in the custom `<my-app>` body tag.
 
+        모든 문서의 어플리케이션 샘플은 동일한 `index.html` 파일을 사용합니다.
+
         The same `index.html` satisfies all documentation application samples.
   tr
     td <code>karma.conf.js</code>
     td
       :marked
+        <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a> 테스트 러너의 설정 파일입니다. 자세한 내용은 [테스트](testing.html) 가이드를 참조하세요.
+
         Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
         test runner described in the [Testing](testing.html) guide.
   tr
     td <code>karma-test-shim.js</code>
     td
       :marked
+        [테스트](testing.html) 가이드에서 언급한 대로, SystemJS와 함께
+        <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a> 테스트 러너를 동작시키기 위한 스크립트 파일입니다.
+
         Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
         with SystemJS as described in the [Testing](testing.html) guide.
   tr
     td <code>non-essential-files.txt</code>
     td
       :marked
+        빠른시작 시드에서 테스팅하거나 git 파일의 유지보수 목적을 위해서 지워버려도 되는
+        파일들의 목록입니다. 추가적으로 다음의 문서 [_중요하지 않은 파일 지우기_](setup.html#non-essential "Setup: Deleting non-essential files")
+        부분을 참조하세요.
+        *실수로라도 당신의 테스트 파일이나 git 설정 파일을 지울 수 있으니, 무조건 처음에만 지우세요!*
+
         A list of files that you can delete if you want to purge your setup of the
         original QuickStart Seed testing and git maintainence artifacts.
-        See instructions in the optional 
+        See instructions in the optional
         [_Deleting non-essential files_](setup.html#non-essential "Setup: Deleting non-essential files") section.
         *Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*
   tr
     td <code>LICENSE</code>
     td
       :marked
+        이 설정 코드를 당신의 어플리케이션에서 사용해도 되는 MIT 오픈소스 라이센스 파일입니다.
+
         The open source MIT license to use this setup code in your application.
   tr
     td <code>package.json</code>
     td
       :marked
+        프로젝트의 `npm` 패키지의 의존 파일들에 대한 정보를 포함하고 있습니다.
+
         Identifies `npm `package dependencies for the project.
-        
+
+        어플리케이션을 실행시키기 위한 스크립트, 테스트를 실행시키기 위한 스크립트 등을 포함하고 있습니다.
+        목록을 보기 위해서는 `npm run`을 입력하세요. 더 자세한 내용을 알고 싶다면
+        <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
+           target="_blank" title="npm scripts for Angular documentation samples">관련 문서</a>를 참조하세요.
+
         Contains command scripts for running the application,
         running tests, and more. Enter `npm run` for a listing.
-        <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts" 
+        <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
            target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
   tr
     td <code>protractor.config.js</code>
     td
       :marked
-        Configuration for the 
+        _end-to-end_ (e2e) 테스트 러너인 <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>의 설정 파일입니다.
+
+        Configuration for the
         <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
         _end-to-end_ (e2e) test runner.
   tr
     td <code>README.md</code>
     td
       :marked
+        당신의 프로젝트에서 본 git 레포지토리를 사용하기 위한 지침서의 내용이 적혀있습니다.
+        삭제하기 전에 읽어볼 만 합니다.
+
         Instruction for using this git repository in your project.
         Worth reading before deleting.
   tr
     td <code>styles.css</code>
     td
       :marked
+        어플리케이션의 전역으로 적용되는 스타일입니다. 빠른시작 샘플 어플리케이션에서는 `<h1>` 스타일과 함께 초기화됩니다.
+
         Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
 
   tr
     td <code>systemjs<br>.config.js</code>
     td
       :marked
+        **SystemJS** 모듈 로더에게 어느 곳에서 JavaScript 내의 `import` 구문에서 참조된 모듈들을 찾을지를 알려줍니다. 가령 다음과 같이 말이에요:
+
         Tells the **SystemJS** module loader where to find modules
         referenced in JavaScript `import` statements such as
+
       code-example(language="ts").
         import { Component } from '@angular/core;
       :marked
+        SystemJS 설정에 대해 확신하지 않는다면 이 파일은 건드리지 마세요.
+
         Don't touch this file unless you are fully versed in SystemJS configuration.
   tr
     td <code>systemjs<br>.config.extras.js</code>
     td
       :marked
-        Optional extra SystemJS configuration. 
+        SystemJS에 관한 부가적인 설정 파일입니다. SystemJS 에 어플리케이션의 _배럴_ 등의 맵핑을 원본 파일인 `systemjs.config.js` 파일의 수정 없이도 추가할 수 있습니다.
+
+        Optional extra SystemJS configuration.
         A way to add SystemJS mappings, such as for appliation _barrels_,
         without changing the original `system.config.js`.
    tr
     td <code>tsconfig.json</code>
     td
       :marked
+        타입스크립트 컴파일러에게, 타입스크립트가 모든 모던 브라우저에서 돌아갈 수 있는 자바스크립트로 트랜스파일이 될 수 있도록 설정하는 정보를 말해줍니다.
+
         Tells the TypeScript compiler how to transpile TypeScript source files
         into JavaScript files that run in all modern browsers.
    tr
     td <code>tslint.json</code>
     td
       :marked
+        `npm`에서 설치된 타입스크립트 린터(linter)가 당신의 타입스크립트 코드를 검사하고,
+        규칙을 어긴 경우 그에 대해 알려줄 수 있도록 합니다.
+
         The `npm` installed TypeScript linter inspects your TypeScript code
         and complains when you violate one of its rules.
-        
-        This file defines linting rules favored by the 
+
+        이 파일은 [Angular 스타일 가이드](style-guide.html)와 이 문서의 저자에 의해 작성된 린팅 규칙을 정의합니다.
+
+        This file defines linting rules favored by the
         [Angular style guide](style-guide.html) and by the authors of the documentation.

From 0633fbea17bc20f5c726a08b4884f71e30075c89 Mon Sep 17 00:00:00 2001
From: Kesus Kim <kesuskim@gmail.com>
Date: Thu, 23 Mar 2017 21:57:09 +0900
Subject: [PATCH 4/5] Trans(guide/component-styles.jade): Recap

---
 .../ts/latest/guide/component-styles.jade     | 102 +++++++++++-------
 1 file changed, 61 insertions(+), 41 deletions(-)

diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index c525940b..dd314196 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -2,9 +2,9 @@ block includes
   include ../_util-fns
 
 :marked
-  Angular 어플리케이션은 스타일시트로 일반적인 CSS를 이용합니다. 즉 우리가
-  CSS 스타일시트에 대해 알고 있는 모든 것, 가령 선택자나 규칙, 미디어쿼리 등을
-  Angular 어플리케이션에 직접 사용할 수 있어요.
+  Angular 애플리케이션은 스타일시트로 일반적인 CSS를 이용합니다. 즉 CSS 스타일시트,
+  선택자나 규칙 및 미디어쿼리에 대해 알고 있는 모든 것들을
+  Angular 애플리케이션에 직접 적용할 수 있습니다.
 
   Angular applications are styled with regular CSS. That means we can apply
   everything we know about CSS stylesheets, selectors, rules, and media queries
@@ -16,37 +16,58 @@ block includes
   On top of this, Angular has the ability to bundle *component styles*
   with our components enabling a more modular design than regular stylesheets.
 
-  이번 챕터에서는 이러한 *컴포넌트 스타일*을 어떻게 사용하고 적용할 수 있는지 배워볼거에요.
+  이번 챕터에서는 이러한 *컴포넌트 스타일*을 어떻게 사용하고 적용할 수 있는지 배워봅시다.
 
   In this chapter we learn how to load and apply these *component styles*.
 
   ## 목차
 
+  ## Table Of Contents
+
   * [컴포넌트 스타일 사용하기](#using-component-styles)
+
+  * [Using Component Styles](#using-component-styles)
+
   * [특별한 선택자](#special-selectors)
+
+  * [Special selectors](#special-selectors)
+
   * [컴포넌트에 스타일 불러오기](#loading-styles)
+
+  * [Loading Styles into Components](#loading-styles)
+
   * [뷰 캡슐화 제어하기: Emulated, Native, and None](#view-encapsulation)
+
+  * [Controlling View Encapsulation: Emulated, Native, and None](#view-encapsulation)
+
   * [부록 1: 생성된 런타임 컴포넌트 스타일 탐색하기](#inspect-generated-css)
+
+  * [Appendix 1: Inspecting the generated runtime component styles](#inspect-generated-css)
+
   * [부록 2: 상대 경로 URL을 이용하여 스타일 불러오기](#relative-urls)
 
+  * [Appendix 2: Loading Styles with Relative URLs](#relative-urls)
+
   이 페이지의 예제는 <live-example></live-example> 에서 확인 가능합니다.
 
+  Run the <live-example></live-example> of the code shown in this chapter.
+
 .l-main-section
 :marked
   ## 컴포넌트 스타일 사용하기
 
   ## Using Component Styles
 
-  우리가 작성하는 모든 Angular 컴포넌트에 대해, 우리는 HTML 템플릿뿐만 아니라,
-  템플릿과 같이 동작하는 CSS 스타일(선택자, 규칙, 미디어 쿼리 등)도 정의합니다.
+  작성하는 모든 Angular 컴포넌트에 대해 HTML 템플릿뿐만 아니라 해당 템플릿과 함께 제공되는
+  CSS 스타일을 정의하여, 필요한 선택자, 규칙 및 미디어쿼리를 지정할 수 있습니다.
 
   For every Angular component we write, we may define not only an HTML template,
   but also the CSS styles that go with that template,
   specifying any selectors, rules, and media queries that we need.
 
-  이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 속성 값을 설정하는 것 입니다.
-  `styles` 속성 값은 CSS 코드가 포함된 문자열의 배열을 취합니다.
-  보통 아래의 예제와 같이 하나의 문자열만을 주지요.
+  이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 프로퍼티 값을 설정하는 것입니다.
+  `styles` 프로퍼티 값은 CSS 코드가 포함된 문자열의 배열을 취합니다.
+  보통 아래의 예제와 같이 하나의 문자열만을 줍니다.
 
   One way to do this is to set the `styles` property in the component metadata.
   The `styles` property takes #{_an} #{_array} of strings that contain CSS code.
@@ -60,7 +81,7 @@ block includes
   Component styles differ from traditional, global styles in a couple of ways.
 
   먼저 컴포넌트 스타일 안에 넣는 선택자들은 *오직 해당하는 컴포넌트의 템플릿 안에서만 적용됩니다.* 위의 예제에서의
-  `h1` 선택자는 `HeroAppComponent` 템플릿 내의 `<h1>` 태그에만 적용되며, 어플리케이션 내의 그 밖의 `<h1>` 태그에는 영향을 미치지 않습니다.
+  `h1` 선택자는 `HeroAppComponent` 템플릿 내의 `<h1>` 태그에만 적용되며, 애플리케이션 내의 그 밖의 `<h1>` 태그에는 영향을 미치지 않습니다.
 
   Firstly, the selectors we put into a component's styles *only apply within the template
   of that component*. The `h1` selector in the example above only applies to the `<h1>` tag
@@ -75,13 +96,13 @@ block includes
 
   1. We can use the CSS class names and selectors that make the most sense in the context of each component.
 
-  1. 클래스 이름과 선택자들은 해당 컴포넌트에 지역적이며, 어플리케이션 내의 다른 곳에서 사용되고 있는
+  1. 클래스 이름과 선택자들은 해당 컴포넌트에 지역적이며, 애플리케이션 내의 다른 곳에서 사용되고 있는
      다른 클래스들이나 선택자들과 겹치지 않는다.
 
   1. Class names and selectors are local to the component and won't collide with
   classes and selectors used elsewhere in the application.
 
-  1. 컴포넌트의 스타일은 어플리케이션의 다른 곳에서 스타일을 변경함으로써 *변경할 수 없다*.
+  1. 컴포넌트의 스타일은 애플리케이션의 다른 곳에서 스타일을 변경함으로써 *변경할 수 없다*.
 
   1. Our component's styles *cannot* be changed by changes to styles elsewhere in the application.
 
@@ -111,8 +132,8 @@ a(id="special-selectors")
 
   ### :host
 
-  `:host` 가상 클래스 선택자를 해당 컴포넌트의 *상위 컴포넌트*를 선택하기 위해 사용하세요.
-  (컴포넌트 템플릿 *내에 존재하는* 엘리먼트를 선택하는 경우와는 반대로 말이에요.)
+  `:host` 가상 클래스 선택자를 해당 컴포넌트를 호스팅하는 *상위 엘리먼트*를 선택하기 위해 사용하세요.
+  (컴포넌트 템플릿 *내에 존재하는* 엘리먼트를 선택하는 경우와는 대조됩니다.)
 
   Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
   targeting elements *inside* the component's template):
@@ -121,8 +142,8 @@ a(id="special-selectors")
 
 :marked
   이 방법은 상위 엘리먼트를 선택할 수 있는 *유일한* 방법입니다. 다른 선택자들로는
-  상위 엘리먼트에 절대 선택할 수 없어요, 왜냐면 그 엘리먼트는 컴포넌트의 템플릿에 속하지 않았으니까요.
-  그 엘리먼트는 해당 엘리먼트의 상위 컴포넌트의 템플릿에 속해있지요.
+  상위 엘리먼트를 절대로 선택할 수 없습니다. 왜냐하면 상위 엘리먼트는 해당 컴포넌트의 템플릿에 속해 있지 않기 때문입니다.
+  상위 엘리먼트는 해당 엘리먼트의 상위 컴포넌트의 템플릿에 속해있습니다.
 
   This is the *only* way we can target the host element. We cannot reach
   it from inside the component with other selectors, because it is not part of the
@@ -144,16 +165,16 @@ a(id="special-selectors")
   ### :host-context
 
   때때로 컴포넌트의 뷰의 *외부*에서 어떤 조건에 따라 스타일을 적용하는 것이 좋을 때가 있습니다.
-  예를 들어, 문서의 `<body>` 엘리먼트에 적용되는 CSS 테마 클래스가 있을 수 있죠. 이 테마를 기반으로
-  우리의 컴포넌트도 맞춰서 변경하고 싶다고 해봐요.
+  예를 들어, 문서의 `<body>` 엘리먼트에 적용되는 CSS 테마 클래스가 있습니다. 이 테마를 기반으로
+  컴포넌트도 맞춰서 변경하고 싶다고 합시다.
 
   Sometimes it is useful to apply styles based on some condition *outside* a component's view.
   For example, there may be a CSS theme class applied to the document `<body>` element, and
   we want to change how our component looks based on that.
 
   `:host-context()` 가상 선택자를 사용하세요. 이 선택자는 `:host()` 함수처럼 동작합니다.
-  이 선택자는 해당 컴포넌트의 *모든 부모* 엘리먼트들의 CSS 클래스를 찾아냅니다.
-  문서의 최상위 엘리먼트인 `<html>` 엘리먼트까지요. 이것은 다른 선택자들과 조합하였을 때 굉장히 유용합니다.
+  이 선택자는 해당 컴포넌트의 *모든 부모* 엘리먼트, 즉 문서의 최상위 엘리먼트인 `<html>` 엘리먼트까지의 CSS 클래스를 찾아냅니다.
+  이것은 다른 선택자들과 조합하였을 때 굉장히 유용합니다.
 
   Use the `:host-context()` pseudo-class selector. It works just like the function
   form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
@@ -238,8 +259,8 @@ a(id='loading-styles')
 
   ### Styles in Metadata
 
-  컴포넌트의 `@Component` 장식자에 `styles` 배열 속성 값을 추가할 수 있습니다.
-  배열 내의 각각의 문자열에(일반적으로는 하나의 문자열만 사용합니다) CSS를 정의합니다.
+  컴포넌트의 `@Component` 데코레이터에 `styles` 배열 프로퍼티 값을 추가할 수 있습니다.
+  배열 내의 각각의 문자열에 CSS를 정의합니다(일반적으로는 하나의 문자열만 사용합니다).
 
   We can add a `styles` #{_array} property to the `@Component` #{_decorator}.
   Each string in the #{_array} (usually just one string) defines the CSS.
@@ -264,7 +285,7 @@ a(id='loading-styles')
 
   ### Style URLs in Metadata
 
-  컴포넌트의 `@Component` 장식자에 `styleUrls` 속성값을 주어 외부의 CSS 파일들을 불러올 수 있습니다.
+  컴포넌트의 `@Component` 데코레이터에 `styleUrls` 속성값을 주어 외부의 CSS 파일들을 불러올 수 있습니다.
 
   We can load styles from external CSS files by adding a `styleUrls` attribute
   into a component's `@Component` #{_decorator}:
@@ -274,8 +295,8 @@ a(id='loading-styles')
 block style-url
   .alert.is-important
     :marked
-      이 URL은 ***어플리케이션의 루트 경로에 상대적*** 이며, 루트 경로는 일반적으로
-      어플리케이션을 관장하는 `index.html`의 경로를 의미합니다.
+      이 URL은 ***애플리케이션의 루트 경로에 상대적*** 이며, 루트 경로는 일반적으로
+      애플리케이션을 관장하는 `index.html`의 경로를 의미합니다.
       스타일시트 파일의 URL은 컴포넌트 파일에 대해 상대적이지 *않습니다*.
       그것이 예제에서 본 URL이 `src/app/`으로 시작하는 이유입니다.
       [부록 2](#relative-urls)에서 URL을 컴포넌트 파일의 상대 경로에 맞게 설정하는
@@ -299,11 +320,10 @@ block module-bundlers
 
       `styles: [require('my.component.css')]`
 
-      `stylesUrls` 속성이 **아닌**, `styles` 속성을 설정하였습니다! 모듈 번들러는
-      CSS 문자열을 로딩하지, Angular를 로딩하지 않습니다.
-      Angular는 모듈 번들러가 CSS 파일들을 불러들인 이후에, 오직 CSS 문자열만 볼 뿐입니다.
-      Angular에게는 마치 우리가 `styles` 배열에 손으로 직접 CSS 문자열을 작성한 것처럼
-      보일 뿐 입니다.
+      `stylesUrls` 프로퍼티가 **아닌**, `styles` 프로퍼티를 설정하였습니다! 모듈 번들러는
+      CSS 문자열을 로딩하지, Angular 애플리케이션을 로딩하는 것은 아닙니다.
+      Angular 애플리케이션은 모듈 번들러가 CSS 파일들을 로딩한 결과 값인 CSS 문자열만을 확인할 뿐입니다.
+      Angular에게는 그저 `styles` 배열이 CSS 문자열들로 작성된 것처럼 보일 것입니다.
       CSS를 이러한 방식으로 로딩하는 방식에 대해서는, 모듈 번들러의 문서를 참조하세요.
 
       We set the `styles` property, **not** `styleUrls` property! The module
@@ -323,7 +343,7 @@ block module-bundlers
   We can also embed `<link>` tags into the component's HTML template.
 
   `styleUrls`과 같이, link 태그의 `href` URL은 컴포넌트 파일에 대해 상대적인 것이 아니라,
-  어플리케이션 루트 경로에 대해 상대적입니다.
+  애플리케이션 루트 경로에 대해 상대적입니다.
 
   As with `styleUrls`, the link tag's `href` URL is relative to the
   application root, not relative to the component file.
@@ -356,7 +376,7 @@ a#view-encapsulation
 
   ## Controlling View Encapsulation: Native, Emulated, and None
 
-  위에서 논의되었듯, 컴포넌트의 CSS 스타일은 컴포넌트 자체 뷰에 캡슐화되며, 어플리케이션의 다른 부분에
+  위에서 논의되었듯, 컴포넌트의 CSS 스타일은 컴포넌트 자체 뷰에 캡슐화되며, 애플리케이션의 다른 부분에
   영향을 끼치지 않습니다.
 
   As discussed above, component CSS styles are *encapsulated* into the component's own view and do
@@ -394,7 +414,7 @@ a#view-encapsulation
     The scoping rules, isolations, and protections discussed earlier do not apply.
     This is essentially the same as pasting the component's styles into the HTML.
 
-  컴포넌트의 캡슐화 모드를 컴포넌트의 메타 정보에 `encapsulation` 속성을 이용하여 설정하세요:
+  컴포넌트의 캡슐화 모드를 컴포넌트의 메타 정보에 `encapsulation` 프로퍼티를 이용하여 설정하세요:
 
   Set the components encapsulation mode using the `encapsulation` property in the component metadata:
 
@@ -403,8 +423,8 @@ a#view-encapsulation
 :marked
   `Native` 뷰 캡슐화는 [네이티브로 Shadow DOM을 지원하는 브라우저에 대해서만](http://caniuse.com/#feat=shadowdom) 동작합니다.
   (역자 주: 네이티브로 지원한다는 의미는, 폴리필 등을 이용하지 않고도 동작하는, 최신 브라우저를 의미합니다.)
-  지원 여부는 아직까지도 제한적이므로, `Emulated` 뷰 캡슐화가 기본 모드이며 대개의 경우에 추천되는 이유가
-  바로 이것이지요.
+  브라우저의 지원 여부가 아직까지도 제한적이기 때문에 `Emulated` 뷰 캡슐화가 기본 모드이며 대개의 경우에 `Emulated` 뷰 캡슐화를 사용하도록
+  추천하는 이유입니다.
 
   `Native` view encapsulation only works on [browsers that have native support
   for Shadow DOM](http://caniuse.com/#feat=shadowdom). The support is still limited,
@@ -424,7 +444,7 @@ a#inspect-generated-css
   When using the default emulated view encapsulation, Angular preprocesses
   all component styles so that they approximate the standard Shadow CSS scoping rules.
 
-  실행 중인 Angular 어플리케이션의 emulated 뷰 캡슐화 된 DOM 을 검사할 때는,
+  실행 중인 Angular 애플리케이션의 emulated 뷰 캡슐화 된 DOM 을 검사할 때는,
   각각의 DOM 엘리먼트에 몇 가지 추가된 속성들을 볼 수 있습니다:
 
   When we inspect the DOM of a running Angular application with emulated view
@@ -456,9 +476,9 @@ code-example(format="").
   * An element within a component's view has a `_ngcontent` attribute
   that identifies to which host's emulated Shadow DOM this element belongs.
 
-  이 속성들의 정확한 값은 중요하지 않습니다. 이 값들은 자동으로 생성되며, 어플리케이션 코드에서는
+  이 속성들의 정확한 값은 중요하지 않습니다. 이 값들은 자동으로 생성되며, 애플리케이션 코드에서는
   절대 참조하지 않습니다. 하지만 이 값들은 생성된 컴포넌트의 스타일을 가리키며, 이 스타일은
-  DOM의 `<head>` 부분에서 찾아볼 수 있지요:
+  DOM의 `<head>` 부분에서 찾아볼 수 있습니다:
 
   The exact values of these attributes are not important. They are automatically
   generated and we never refer to them in application code. But they are targeted
@@ -483,7 +503,7 @@ code-example(format="").
   with `_nghost` or `_ngcontent` attribute selectors.
   These extra selectors enable the scoping rules described in this guide.
 
-  아마 Shadow DOM이 더욱 사용되기 전까지는 *emulated* 모드와 함께 살아야 할 것입니다.
+  아마 Shadow DOM이 더욱 사용되기 전까지는 *emulated* 모드에 익숙해지는 것이 좋을 것입니다.
 
   We'll likely live with *emulated* mode until shadow DOM gains traction.
 
@@ -504,7 +524,7 @@ code-example(format="nocode").
   quest-summary.component.css
 
 :marked
-  컴포넌트의 메타정보에 `templateUrl`, `styleUrls` 속성을 설정하여 템플릿과 CSS 파일을 포함시킬 수 있습니다.
+  컴포넌트의 메타정보에 `templateUrl`, `styleUrls` 프로퍼티를 설정하여 템플릿과 CSS 파일을 포함시킬 수 있습니다.
   대개 이 파일들이 컴포넌트와 같이 위치하고 있기 때문에, 절대 경로를 이용하여 지정해 줄 필요 없이 그저 이름만으로
   참조하는 것도 괜찮을 것입니다.
 
@@ -514,7 +534,7 @@ code-example(format="nocode").
 
 block module-id
   :marked
-    Angular가 전체 경로 URL을 계산하는 방법을 컴포넌트의 메타정보에 `moduleId` 속성값을 `module.id`로 줌으로써
+    Angular가 전체 경로 URL을 계산하는 방법을 컴포넌트의 메타정보에 `moduleId` 프로퍼티 값을 `module.id`로 줌으로써
     변경할 수도 있습니다.
 
     We can change the way Angular calculates the full URL be setting the component metadata's `moduleId` property to `module.id`.

From 91ade4664e33f1564856c8721ee6be9103417d2a Mon Sep 17 00:00:00 2001
From: Kesus Kim <kesuskim@gmail.com>
Date: Thu, 23 Mar 2017 22:07:02 +0900
Subject: [PATCH 5/5] Trans(guide/setup-systemjs-anatomy.jade): Recap

---
 .../docs/ts/latest/guide/setup-systemjs-anatomy.jade   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade b/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
index d714af20..b49e3ef7 100644
--- a/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
+++ b/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
@@ -39,7 +39,7 @@ table(width="100%")
 
         "Hello Angular" 샘플 어플리케이션에는 기본적으로
         `AppComponent`, `AppModule`, 그리고 컴포넌트의 단위 테스트(`app.component.spec.ts`) 와
-        부트스트랩 파일, `main.ts` 파일들로 구성되어 있지요.
+        부트스트랩 파일, `main.ts` 파일들로 구성되어 있습니다.
 
         Ships with the "Hello Angular" sample's
         `AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
@@ -93,7 +93,7 @@ table(width="100%")
     td <code>CHANGELOG.md</code>
     td
       :marked
-        _빠른시작_ 레포지토리의 변화를 기록해놓은 파일입니다.
+        _QuickStart_ 레포지토리의 변화를 기록해놓은 파일입니다.
         무시하거나 지워버리세요.
 
         The history of changes to the _QuickStart_ repository.
@@ -143,7 +143,7 @@ table(width="100%")
     td <code>non-essential-files.txt</code>
     td
       :marked
-        빠른시작 시드에서 테스팅하거나 git 파일의 유지보수 목적을 위해서 지워버려도 되는
+        QuickStart 시드에서 테스팅하거나 git 파일의 유지보수 목적을 위해서 지워버려도 되는
         파일들의 목록입니다. 추가적으로 다음의 문서 [_중요하지 않은 파일 지우기_](setup.html#non-essential "Setup: Deleting non-essential files")
         부분을 참조하세요.
         *실수로라도 당신의 테스트 파일이나 git 설정 파일을 지울 수 있으니, 무조건 처음에만 지우세요!*
@@ -199,7 +199,7 @@ table(width="100%")
     td <code>styles.css</code>
     td
       :marked
-        어플리케이션의 전역으로 적용되는 스타일입니다. 빠른시작 샘플 어플리케이션에서는 `<h1>` 스타일과 함께 초기화됩니다.
+        어플리케이션의 전역으로 적용되는 스타일입니다. QuickStart 샘플 어플리케이션에서는 `<h1>` 스타일과 함께 초기화됩니다.
 
         Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
 
@@ -207,7 +207,7 @@ table(width="100%")
     td <code>systemjs<br>.config.js</code>
     td
       :marked
-        **SystemJS** 모듈 로더에게 어느 곳에서 JavaScript 내의 `import` 구문에서 참조된 모듈들을 찾을지를 알려줍니다. 가령 다음과 같이 말이에요:
+        **SystemJS** 모듈 로더에게 어느 곳에서 JavaScript 내의 `import` 구문에서 참조된 모듈들을 찾을지를 알려줍니다. 다음의 예를 참조하세요:
 
         Tells the **SystemJS** module loader where to find modules
         referenced in JavaScript `import` statements such as