Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Component Style / Setup Anatomy 번역 완료#46

Open
kesuskim wants to merge 5 commits intoangular:masterfrom
kesuskim:master
Open

Component Style / Setup Anatomy 번역 완료#46
kesuskim wants to merge 5 commits intoangular:masterfrom
kesuskim:master

Conversation

@kesuskim
Copy link
Copy Markdown

No description provided.

@kesuskim kesuskim changed the title Trans(guide/component-styles.jade) Component Style / Setup Anatomy 번역 완료 Mar 13, 2017
Copy link
Copy Markdown
Contributor

@byungjune byungjune left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1차 리뷰를 하였습니다. 문맥상 어색한 점과 한글화 가이드와 어긋나는 부분들이 있어 한 파일의 500라인 중 60라인 정도까지만 우선 리뷰하였습니다. 리뷰 내용 및 한글화 가이드(https://github.com/angular/angular-ko/blob/master/ko-trans-guide.md) 참고하셔서 전체 페이지 수정해주시면 추가 리뷰 하도록 하겠습니다 : ) 수고하셨습니다 👍

include ../_util-fns

:marked
Angular 어플리케이션은 스타일시트로 일반적인 CSS를 이용합니다. 즉 우리가
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 공통적으로 어플리케이션이 아닌 애플리케이션을 사용하고 있습니다. 본 파일에 있는 11개의 어플리케이션에 대한 수정을 부탁드릴게요.
  2. 영문의 we에 대해서는 별도로 우리라는 해석을 하고 있지 않습니다. 해석을 안하는 쪽이 더 자연스럽기 때문입니다^^

자세한 내용은 한글화 가이드를 참고해주세요.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아아, ㅠㅠㅠ 이런, 많이 틀려서 채점하시기 힘드셨겠어요... ㅋㅋㅋㅋ 학생들이 항상 가이드를 잘 따라주면 좋은데, 저처럼 몸으로 부딪혀서 배우는 사람들도 있지요... 이런,
아마 몇 번은 더 실수 할 수도 있지만, 앞으로 좀 더 숙련되면 실수 없이 하겠습니당.. ㅎㅎ 감사해요!

:marked
Angular 어플리케이션은 스타일시트로 일반적인 CSS를 이용합니다. 즉 우리가
CSS 스타일시트에 대해 알고 있는 모든 것, 가령 선택자나 규칙, 미디어쿼리 등을
Angular 어플리케이션에 직접 사용할 수 있어요.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적인 한글의 어미를 ~습니다와 같은 존칭어를 사용하고 있습니다.
그리고 해석상의 오류가 있는 것 같아 다음과 같은 수정이 필요합니다.
확인 부탁드릴게요 : )

  • 변경전 : 즉 우리가 CSS 스타일시트에 대해 알고 있는 모든 것, 가령 선택자나 규칙, 미디어쿼리 등을 Angular 어플리케이션에 직접 사용할 수 있어요.

  • 변경후 : 즉 CSS 스타일시트, 선택자, 규칙 및 미디어쿼리에 대해 알고있는 모든 것을 Angular 애플리케이션에 직접 적용할 수 있습니다.



그 외에도, Angular는 *컴포넌트 스타일*을 이용하여 일반적인 CSS 보다 더욱 체계적으로
모듈화를 하여 번들링 할 수 있는 능력이 있습니다.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

영어문장 그대로 조금 더 자연스러운 번역을 위해 수정을 하면 좋을 것 같습니다.

  • 변경전 : 그 외에도, Angular는 컴포넌트 스타일을 이용하여 일반적인 CSS 보다 더욱 체계적으로 모듈화를 하여 번들링 할 수 있는 능력이 있습니다.
  • 변경후 : 이 외에도 Angular는 컴포넌트 스타일을 컴포넌트에 묶어 일반 스타일시트보다 모듈러 디자인을 가능하게 합니다.

In this chapter we learn how to load and apply these *component styles*.

## Table Of Contents

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

영문을 삭제하시면 안됩니다.
아래와 같이
(한글)

(영문)

(한글)

(영문)

으로 적용해주세요.

## Table Of Contents

## 목차

* [컴포넌트 스타일 사용하기](#using-component-styles)

* [Using Component Styles](#using-component-styles)

* [특별한 선택자](#special-selectors)

* [Special selectors](#special-selectors)

...

* [부록 1: 생성된 런타임 컴포넌트 스타일 탐색하기](#inspect-generated-css)
* [부록 2: 상대 경로 URL을 이용하여 스타일 불러오기](#relative-urls)

이 페이지의 예제는 <live-example></live-example> 에서 확인 가능합니다.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

영문이 삭제되었습니다

Run the <live-example></live-example> of the code shown in this chapter.


우리가 작성하는 모든 Angular 컴포넌트에 대해, 우리는 HTML 템플릿뿐만 아니라,
템플릿과 같이 동작하는 CSS 스타일(선택자, 규칙, 미디어 쿼리 등)도 정의합니다.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우리에 대한 삭제 및 해석에 대한 수정이 필요한 것 같습니다. : )
HTML템플릿과 CSS스타일을 이용하여 필요한 선택자, 규칙, 미디어쿼리를 선택한다는 내용입니다.

  • 변경전 : 우리가 작성하는 모든 Angular 컴포넌트에 대해, 우리는 HTML 템플릿뿐만 아니라, 템플릿과 같이 동작하는 CSS 스타일(선택자, 규칙, 미디어 쿼리 등)도 정의합니다.

  • 변경후 : 작성하는 모든 Angular 컴포넌트에 대해 HTML 템플릿뿐만 아니라 해당 템플릿과 함께 제공되는 CSS 스타일을 정의하여, 필요한 선택자, 규칙 및 미디어쿼리를 지정할 수 있습니다.

but also the CSS styles that go with that template,
specifying any selectors, rules, and media queries that we need.

이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 속성 값을 설정하는 것 입니다.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

property에 대한 번역은 프로퍼티로 하여 수정이 필요합니다.

  • 변경전 : 이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 styles 속성 값을 설정하는 것 입니다.
  • 변경후 : 이를 하기 위한 방법 중 하나는 컴포넌트 메타데이터의 styles 프로퍼티 값을 설정하는 것 입니다.

specifying any selectors, rules, and media queries that we need.

이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 속성 값을 설정하는 것 입니다.
`styles` 속성 값은 CSS 코드가 포함된 문자열의 배열을 취합니다.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래 내용에 대한 본 파일의 전체 수정을 부탁드릴게요 : )

속성 -> 프로퍼티


이를 하기 위한 방법 중 하나는 컴포넌트 내의 메타데이터에 `styles` 속성 값을 설정하는 것 입니다.
`styles` 속성 값은 CSS 코드가 포함된 문자열의 배열을 취합니다.
보통 아래의 예제와 같이 하나의 문자열만을 주지요.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

문자 어미의 변경이 필요합니다. : )

  • 변경전 : 보통 아래의 예제와 같이 하나의 문자열만을 주지요.
  • 변경후 : 보통 이 예제에서와 같이 하나의 문자열을 제공합니다.

+makeExample('component-styles/ts/src/app/hero-app.component.ts')(format='.')

:marked
컴포넌트 스타일은 전통적이며, 전역적으로 스타일을 작성하는 방법과 몇 가지가 다릅니다.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

문맥상 자연스러운 해석을 위해 아래와 같이 수정하면 좋을 것 같습니다 : )

  • 변경전 : 컴포넌트 스타일은 전통적이며, 전역적으로 스타일을 작성하는 방법과 몇 가지가 다릅니다.
  • 변경후 : 컴포넌트 스타일은 기존의 전역 스타일과는 몇 가지가 다릅니다.

@kesuskim
Copy link
Copy Markdown
Author

수정했습니다. 확인 부탁 바랄게요~!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants