From be17f69ad6efab30cd10bf7020c3818ad3d8d590 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 19:43:07 +0200
Subject: [PATCH 01/14] translate to KO; init and introduction

---
 build/index.js                                |   3 +-
 .../docs/ko/elements/action-bar/action-bar.md |  50 +++++++
 .../ko/elements/action-bar/action-item.md     |  56 ++++++++
 .../elements/action-bar/navigation-button.md  |  30 ++++
 .../elements/components/activity-indicator.md |  33 +++++
 content/docs/ko/elements/components/button.md |  35 +++++
 .../ko/elements/components/date-picker.md     |  44 ++++++
 .../docs/ko/elements/components/html-view.md  |  27 ++++
 content/docs/ko/elements/components/image.md  |  47 +++++++
 content/docs/ko/elements/components/label.md  |  47 +++++++
 .../ko/elements/components/list-picker.md     |  41 ++++++
 .../docs/ko/elements/components/list-view.md  |  56 ++++++++
 .../docs/ko/elements/components/progress.md   |  34 +++++
 .../ko/elements/components/scroll-view.md     |  35 +++++
 .../docs/ko/elements/components/search-bar.md |  41 ++++++
 .../ko/elements/components/segmented-bar.md   |  41 ++++++
 content/docs/ko/elements/components/slider.md |  42 ++++++
 content/docs/ko/elements/components/switch.md |  39 ++++++
 .../docs/ko/elements/components/tab-view.md   |  39 ++++++
 .../docs/ko/elements/components/text-field.md |  48 +++++++
 .../docs/ko/elements/components/text-view.md  |  61 +++++++++
 .../ko/elements/components/time-picker.md     |  46 +++++++
 .../docs/ko/elements/components/web-view.md   |  34 +++++
 content/docs/ko/elements/dialogs/action.md    |  24 ++++
 content/docs/ko/elements/dialogs/alert.md     |  36 +++++
 content/docs/ko/elements/dialogs/confirm.md   |  35 +++++
 content/docs/ko/elements/dialogs/login.md     |  24 ++++
 content/docs/ko/elements/dialogs/prompt.md    |  35 +++++
 .../ko/elements/layouts/absolute-layout.md    |  46 +++++++
 .../docs/ko/elements/layouts/dock-layout.md   |  60 ++++++++
 .../ko/elements/layouts/flexbox-layout.md     | 101 ++++++++++++++
 .../docs/ko/elements/layouts/grid-layout.md   |  73 ++++++++++
 .../docs/ko/elements/layouts/stack-layout.md  |  74 ++++++++++
 .../docs/ko/elements/layouts/wrap-layout.md   |  46 +++++++
 .../docs/ko/getting-started/1-quick-start.md  |  27 ++++
 .../docs/ko/getting-started/2-installation.md |  48 +++++++
 .../docs/ko/getting-started/3-templates.md    |  75 ++++++++++
 .../getting-started/4-nativescript-plugins.md |  29 ++++
 .../docs/ko/getting-started/5-vue-plugins.md  |  85 ++++++++++++
 content/docs/ko/introduction.md               |  44 ++++++
 content/docs/ko/routing/manual-routing.md     | 128 ++++++++++++++++++
 content/docs/ko/routing/vue-router.md         |  99 ++++++++++++++
 content/docs/ko/utilities/v-template.md       |  57 ++++++++
 content/docs/ko/utilities/v-view.md           |  56 ++++++++
 44 files changed, 2130 insertions(+), 1 deletion(-)
 create mode 100644 content/docs/ko/elements/action-bar/action-bar.md
 create mode 100644 content/docs/ko/elements/action-bar/action-item.md
 create mode 100644 content/docs/ko/elements/action-bar/navigation-button.md
 create mode 100644 content/docs/ko/elements/components/activity-indicator.md
 create mode 100644 content/docs/ko/elements/components/button.md
 create mode 100644 content/docs/ko/elements/components/date-picker.md
 create mode 100644 content/docs/ko/elements/components/html-view.md
 create mode 100644 content/docs/ko/elements/components/image.md
 create mode 100644 content/docs/ko/elements/components/label.md
 create mode 100644 content/docs/ko/elements/components/list-picker.md
 create mode 100644 content/docs/ko/elements/components/list-view.md
 create mode 100644 content/docs/ko/elements/components/progress.md
 create mode 100644 content/docs/ko/elements/components/scroll-view.md
 create mode 100644 content/docs/ko/elements/components/search-bar.md
 create mode 100644 content/docs/ko/elements/components/segmented-bar.md
 create mode 100644 content/docs/ko/elements/components/slider.md
 create mode 100644 content/docs/ko/elements/components/switch.md
 create mode 100644 content/docs/ko/elements/components/tab-view.md
 create mode 100644 content/docs/ko/elements/components/text-field.md
 create mode 100644 content/docs/ko/elements/components/text-view.md
 create mode 100644 content/docs/ko/elements/components/time-picker.md
 create mode 100644 content/docs/ko/elements/components/web-view.md
 create mode 100644 content/docs/ko/elements/dialogs/action.md
 create mode 100644 content/docs/ko/elements/dialogs/alert.md
 create mode 100644 content/docs/ko/elements/dialogs/confirm.md
 create mode 100644 content/docs/ko/elements/dialogs/login.md
 create mode 100644 content/docs/ko/elements/dialogs/prompt.md
 create mode 100644 content/docs/ko/elements/layouts/absolute-layout.md
 create mode 100644 content/docs/ko/elements/layouts/dock-layout.md
 create mode 100644 content/docs/ko/elements/layouts/flexbox-layout.md
 create mode 100644 content/docs/ko/elements/layouts/grid-layout.md
 create mode 100644 content/docs/ko/elements/layouts/stack-layout.md
 create mode 100644 content/docs/ko/elements/layouts/wrap-layout.md
 create mode 100644 content/docs/ko/getting-started/1-quick-start.md
 create mode 100644 content/docs/ko/getting-started/2-installation.md
 create mode 100644 content/docs/ko/getting-started/3-templates.md
 create mode 100644 content/docs/ko/getting-started/4-nativescript-plugins.md
 create mode 100644 content/docs/ko/getting-started/5-vue-plugins.md
 create mode 100644 content/docs/ko/introduction.md
 create mode 100644 content/docs/ko/routing/manual-routing.md
 create mode 100644 content/docs/ko/routing/vue-router.md
 create mode 100644 content/docs/ko/utilities/v-template.md
 create mode 100644 content/docs/ko/utilities/v-view.md

diff --git a/build/index.js b/build/index.js
index 564bef03..60acf740 100644
--- a/build/index.js
+++ b/build/index.js
@@ -38,6 +38,7 @@ Metalsmith(cwd)
     moment,
     localeMap: {
       'en': 'English',
+      'ko': 'Korean',
     },
     home(current) {
       const locale = current.locale || this.defaultLocale;
@@ -110,7 +111,7 @@ Metalsmith(cwd)
   })
   .use(locales({
     defaultLocale: 'en',
-    locales: ['en']
+    locales: ['en', 'ko']
   }))
   .use(order())
   .use(categories())
diff --git a/content/docs/ko/elements/action-bar/action-bar.md b/content/docs/ko/elements/action-bar/action-bar.md
new file mode 100644
index 00000000..119f4f7d
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/action-bar.md
@@ -0,0 +1,50 @@
+---
+title: ActionBar
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
+contributors: [rigor789, eddyverbruggen]
+---
+
+The ActionBar component is a NativeScript abstraction for the Android ActionBar and iOS NavigationBar.
+
+---
+
+#### Using a title
+
+```html
+<ActionBar title="MyApp" />
+```
+
+#### Using a custom title view
+
+```html
+<ActionBar>
+  <StackLayout orientation="horizontal">
+    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
+    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />
+  </StackLayout>
+</ActionBar>
+```
+
+#### Setting an App Icon for Android
+
+```html
+<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
+```
+
+#### Removing the border
+On iOS and Android a little border is drawn at the bottom of the ActionBar.
+Furthermore, the background color of the ActionBar on iOS is slightly different to what you specify
+because iOS applies a filter. To remove this filter and the border, set `flat` to `true`.
+
+```html
+<ActionBar title="My App" flat="true" />
+```
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `title` | `String` | The title to be shown in the ActionBar.
+| `android.icon` | `String` | The icon to be shown on Android.
+| `android.iconVisibility` | `String` | Sets when the icon is visible.
+| `flat` | `boolean` | Removes the border and iOS color filter. Default `false`.
diff --git a/content/docs/ko/elements/action-bar/action-item.md b/content/docs/ko/elements/action-bar/action-item.md
new file mode 100644
index 00000000..2491bc63
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/action-item.md
@@ -0,0 +1,56 @@
+---
+title: ActionItem
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
+contributors: [rigor789]
+---
+
+The ActionItem component is used to add additional action buttons to the ActionBar.
+
+---
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapShare"
+    ios.systemIcon="9" ios.position="left"
+    android.systemIcon="ic_menu_share" android.position="actionBar" />
+  <ActionItem @tap="onTapDelete"
+    ios.systemIcon="16" ios.position="right"
+    text="delete" android.position="popup" />
+</ActionBar>
+```
+
+#### Conditionally showing action items
+
+ActionItems can be displayed based on a condition using the `v-show` directive.
+
+```html
+<ActionBar title="My App">
+  <ActionItem @tap="onTapEdit"
+    v-show="!isEditing"
+    ios.systemIcon="2" ios.position="right"
+    android.systemIcon="ic_menu_edit" />
+  <ActionItem @tap="onTapSave"
+    v-show="isEditing"
+    ios.systemIcon="3" ios.position="right"
+    android.systemIcon="ic_menu_save" />
+  <ActionItem @tap="onTapCancel"
+    v-show="isEditing"
+    ios.systemIcon="1"
+    android.systemIcon="ic_menu_close_clear_cancel" />
+</ActionBar>
+```
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `ios.systemIcon` | `String` | Sets the icon for iOS.
+| `android.systemIcon` | `String` | Sets the icon for Android.
+| `ios.position` | `String` | Sets the position for iOS.<br>Possible values:<br>- `left` (default): Puts the item on the left side of the ActionBar.<br>- `right`: Puts the item on the right side of the ActionBar.
+| `android.position` | `String` | Sets the position for Android.<br>Possible values:<br>- `actionBar` (default): Puts the item in the ActionBar.<br>- `popup`: Puts the item in the options menu. Items will be rendered as text.<br>- `actionBarIfRoom`: Puts the item in the ActionBar if there is room for it. Otherwise, puts it in the options menu.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `tap`| Emitted when the ActionItem has been tapped.
diff --git a/content/docs/ko/elements/action-bar/navigation-button.md b/content/docs/ko/elements/action-bar/navigation-button.md
new file mode 100644
index 00000000..6077f361
--- /dev/null
+++ b/content/docs/ko/elements/action-bar/navigation-button.md
@@ -0,0 +1,30 @@
+---
+title: NavigationButton
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
+contributors: [rigor789]
+---
+
+The NavigationButton component is a NativeScript abstraction for the Android navigation button, and the iOS back button.
+
+---
+
+```html
+<ActionBar title="My App">
+  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
+</ActionBar>
+```
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `text` | `String` | Sets the text to be shown on iOS.
+| `android.systemIcon` | `String` | The icon to be shown on Android.
+
+*The icon list for Android can be found at <https://developer.android.com/reference/android/R.drawable.html>, and the icons are the ones that start with `ic_` prefix.*
+
+## Events
+
+| name | description |
+|------|-------------|
+| `tap`| Emitted when the NavigationButton has been tapped.
diff --git a/content/docs/ko/elements/components/activity-indicator.md b/content/docs/ko/elements/components/activity-indicator.md
new file mode 100644
index 00000000..ddfd6433
--- /dev/null
+++ b/content/docs/ko/elements/components/activity-indicator.md
@@ -0,0 +1,33 @@
+---
+title: ActivityIndicator
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The ActivityIndicator component adds a progress indicator that indicates that something is running in the background, prompting the user to pause.
+
+---
+
+```html
+<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
+```
+
+[> screenshots for=ActivityIndicator <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `busy` | `Boolean` | When `true`, the indicator is active.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `busyChange`| Emitted when the `busy` property is changed.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ProgressBar (indeterminate = true)	| UIActivityIndicatorView
diff --git a/content/docs/ko/elements/components/button.md b/content/docs/ko/elements/components/button.md
new file mode 100644
index 00000000..bb8eabc0
--- /dev/null
+++ b/content/docs/ko/elements/components/button.md
@@ -0,0 +1,35 @@
+---
+title: Button
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The Button component is used to display a button that can react to a tap event.
+
+The interaction is not limited to the tap event only, [read more about all the available gestures in NativeScript in the official documentation](https://docs.nativescript.org/ui/gestures).
+
+---
+
+```html
+<Button text="Button" />
+```
+
+[> screenshots for=Button <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `text` | `String` | The text to be shown on the button.
+| `textWrap` | `boolean` | Determines whether or not the Button wraps text. Default `false`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `tap` | Emitted when the button is pressed.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.Button | UIButton
diff --git a/content/docs/ko/elements/components/date-picker.md b/content/docs/ko/elements/components/date-picker.md
new file mode 100644
index 00000000..6a6e19b6
--- /dev/null
+++ b/content/docs/ko/elements/components/date-picker.md
@@ -0,0 +1,44 @@
+---
+title: DatePicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The DatePicker component allows the user to pick a date.
+
+---
+
+```html
+<DatePicker @loaded="onDatePickerLoaded" @dateChanged="onDateChanged" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<DatePicker v-model="selectedDate" />
+```
+
+[> screenshots for=DatePicker <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `date` | `Date` | The currently displayed date.
+| `minDate` | `Date` | The minimum selectable date.
+| `maxDate` | `Date` | The maximum selectable date.
+| `day` | `Number` | The currently set day.
+| `month` | `Number` | The currently set month.
+| `year` | `Number` | The currently set year.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `dateChanged` | Emitted when the selected date changes.
+
+## Native Component
+
+| Android |	iOS |
+|---------|-----|
+| android.widget.DatePicker | UIDatePicker
diff --git a/content/docs/ko/elements/components/html-view.md b/content/docs/ko/elements/components/html-view.md
new file mode 100644
index 00000000..cafe5d9d
--- /dev/null
+++ b/content/docs/ko/elements/components/html-view.md
@@ -0,0 +1,27 @@
+---
+title: HtmlView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The HtmlView component allows you to show static html content without the need of a WebView.
+
+---
+
+```html
+<HtmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+[> screenshots for=HtmlView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `html` | `String` | The html content to be shown.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.TextView | UILabel
diff --git a/content/docs/ko/elements/components/image.md b/content/docs/ko/elements/components/image.md
new file mode 100644
index 00000000..cefb20c1
--- /dev/null
+++ b/content/docs/ko/elements/components/image.md
@@ -0,0 +1,47 @@
+---
+title: Image
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_image_.image
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The Image component displays an Image from an [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_), or from a URL.
+
+---
+
+#### Displaying an image relative to the `app` directory
+
+```html
+<Image src="~/logo.png" stretch="none" />
+```
+
+#### Displaying an image from a URL
+
+```html
+<Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />
+```
+
+#### Displaying an image from `App_Resources`
+
+```html
+<Image src="res://icon" stretch="none" />
+```
+
+#### Displaying a `base64` encoded image
+
+```html
+<Image src="data:Image/png;base64,iVBORw..." stretch="none" />
+```
+
+[> screenshots for=Image <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `src` | `String`, [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | Source of the image.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ImageView | UIImageView
diff --git a/content/docs/ko/elements/components/label.md b/content/docs/ko/elements/components/label.md
new file mode 100644
index 00000000..e2ffabde
--- /dev/null
+++ b/content/docs/ko/elements/components/label.md
@@ -0,0 +1,47 @@
+---
+title: Label
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_label_.label
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The Label component is used to display read-only text.
+
+**Note**: This `<Label>` is **not** the same as the HTML `<Label>`.
+
+---
+
+```html
+<Label text="Label" />
+```
+
+[> screenshots for=Label <]
+
+### FormattedString
+
+If you need to style certain parts of the text differently, you can use a combination of a `FormattedString` and `Span` elements.
+
+Example:
+```html
+<Label textWrap="true">
+  <FormattedString>
+    <Span text="This text has a " />
+    <Span text="red " style="color: red" />
+    <Span text="piece of text. " />
+    <Span text="Also, this bit is italic, " fontStyle="italic" />
+    <Span text="and this bit is bold." fontWeight="bold" />
+  </FormattedString>
+</Label>
+```
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `text` | `String` | The text of the label.
+| `textWrap` | `boolean` | Determines whether or not the Label wraps text. Default `false`.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.TextView | UILabel
diff --git a/content/docs/ko/elements/components/list-picker.md b/content/docs/ko/elements/components/list-picker.md
new file mode 100644
index 00000000..e40cc9c6
--- /dev/null
+++ b/content/docs/ko/elements/components/list-picker.md
@@ -0,0 +1,41 @@
+---
+title: ListPicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_picker_.listpicker
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The ListPicker component allows the user to pick a value from a list.
+
+---
+
+```html
+<ListPicker :items="listOfItems" selectedIndex="0"
+    @selectedIndexChange="selectedIndexChanged" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<ListPicker :items="listOfItems" v-model="selectedItem" />
+```
+
+[> screenshots for=ListPicker <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `items` | `Array<String>` | An Array of strings that will be displayed as options in the list picker.
+| `selectedIndex` | `Number` | The index of the currently selected item.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `selectedIndexChange`| Emitted when the selected option (index) of the ListPicker changes.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.NumberPicker | UIPickerView
diff --git a/content/docs/ko/elements/components/list-view.md b/content/docs/ko/elements/components/list-view.md
new file mode 100644
index 00000000..3445c2db
--- /dev/null
+++ b/content/docs/ko/elements/components/list-view.md
@@ -0,0 +1,56 @@
+---
+title: ListView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The ListView component shows items in a vertically scrolling list. You can set different `v-template`'s to specify how each item in the list should be displayed.
+
+---
+
+```html
+<ListView for="item in listOfItems" @itemTap="onItemTap">
+  <v-template>
+    <Label :text="item.text" />
+  </v-template>
+
+  <v-template if="$odd">
+    <Label :text="item.text" color="red" />
+  </v-template>
+</ListView>
+```
+
+In the above example the second template will be used if the item's index is odd.
+For convenience you can use `$index`, `$even` and `$odd` helpers, but as needed you can use any valid javascript expression for a `v-template`'s `if` condition.
+
+To learn more about the `v-template` component, head over to the [`v-template` documentation](/en/docs/utilities/v-template).
+
+The ListView does not loop through the items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead it only creates the necessary views to display the currently visible items on the screen, and when scrolling it reuses the views that are already off-screen. This concept is called view recycling, and is commonly used in mobile applications to improve performance. This is important because you can't rely on event listeners attached inside the `v-template`, instead you should use the `itemTap` event which contains the index of the tapped item, as well as the actual item from the list.
+
+```js
+onItemTap(event) {
+  console.log(event.index)
+  console.log(event.item)
+}
+```
+
+[> screenshots for=ListView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `for` | `String` | The expression for iterating through the items, examples:<br>- `item in listOfItems`<br>- `(item, index) in listOfItems`<br>- `item in [1, 2, 3, 4, 5]`
+| `items` | `Array<any>` | An array of items to be displayed in the ListView. **Note**: This property is only for advanced use, we recommend using the `for` property in most cases.
+| `separatorColor` | `Color` | Set the separator line color. Set to `transparent` to remove it.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `itemTap`| Emitted when an item in the ListView has been tapped. To access the tapped item use `event.item`.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.ListView | UITableView
diff --git a/content/docs/ko/elements/components/progress.md b/content/docs/ko/elements/components/progress.md
new file mode 100644
index 00000000..8785870a
--- /dev/null
+++ b/content/docs/ko/elements/components/progress.md
@@ -0,0 +1,34 @@
+---
+title: Progress
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The Progress component is a bar for visually indicating progress.
+
+---
+
+```html
+<Progress :value="currentProgress" />
+```
+
+[> screenshots for=Progress <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `value` | `Number` | The current value of progress out of max.
+| `maxValue` | `Number` | The maximum value of the progress. Default `100`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `valueChange` | Emitted when the value property changes.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.ProgressBar (indeterminate = false) | UIProgressView
diff --git a/content/docs/ko/elements/components/scroll-view.md b/content/docs/ko/elements/components/scroll-view.md
new file mode 100644
index 00000000..d7158df8
--- /dev/null
+++ b/content/docs/ko/elements/components/scroll-view.md
@@ -0,0 +1,35 @@
+---
+title: ScrollView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview
+contributors: [eddyverbruggen]
+---
+
+The ScrollView component allows you to show scrollable content.
+
+---
+
+```html
+<ScrollView orientation="horizontal">
+  <StackLayout orientation="horizontal">
+    <Label text="this" />
+    <Label text="text" />
+    <Label text="scrolls" />
+    <Label text="horizontally" />
+    <Label text="if necessary" />
+  </StackLayout>
+</ScrollView>
+```
+
+[> screenshots for=ScrollView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `orientation` | `String` | Either `horizontal` or `vertical`. Default `vertical`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `scroll`| Emitted when a scroll event occurs
diff --git a/content/docs/ko/elements/components/search-bar.md b/content/docs/ko/elements/components/search-bar.md
new file mode 100644
index 00000000..45433ecd
--- /dev/null
+++ b/content/docs/ko/elements/components/search-bar.md
@@ -0,0 +1,41 @@
+---
+title: SearchBar
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The SearchBar component provides a user interface for entering search queries and submitting requests to the search provider.
+
+---
+
+```html
+<SearchBar hint="Search hint" :text="searchPhrase" @textChange="onTextChanged" @submit="onSubmit" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<SearchBar v-model="searchQuery" />
+```
+
+[> screenshots for=SearchBar <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `hint` | `String` | Placeholder text for the editable input area.
+| `text` | `String` | The value of the search input.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `textChange`| Emitted when the text is changed.
+| `submit`| Emitted when the search input is submitted.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.SearchView	| UISearchBar
diff --git a/content/docs/ko/elements/components/segmented-bar.md b/content/docs/ko/elements/components/segmented-bar.md
new file mode 100644
index 00000000..fed29301
--- /dev/null
+++ b/content/docs/ko/elements/components/segmented-bar.md
@@ -0,0 +1,41 @@
+---
+title: SegmentedBar
+apiRef: http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The SegementedBar component gives you a simple way to display a collection of tabbed views for discrete selection.
+
+---
+
+```html
+<SegmentedBar :items="listOfItems" selectedIndex="0"
+    @selectedIndexChange="onSelectedIndexChange" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<SegmentedBar :items="listOfItems" v-model="selectedItem" />
+```
+
+[> screenshots for=SegmentedBar <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `items` | `Array<SegmentedBarItem>` | A list of items to be displayed in the segmented bar.
+| `selectedIndex` | `Number` | The index of the selected item.
+| `selectedBackgroundColor` | `Color` | Set the background color of the selected item. To set the background color of the entire bar, use `backgroundColor`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `selectedIndexChange`| Emitted when the an item on the segmented bar is tapped
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.TabHost | UISegmentedControl
diff --git a/content/docs/ko/elements/components/slider.md b/content/docs/ko/elements/components/slider.md
new file mode 100644
index 00000000..72385a18
--- /dev/null
+++ b/content/docs/ko/elements/components/slider.md
@@ -0,0 +1,42 @@
+---
+title: Slider
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_slider_.slider
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+
+---
+
+The Slider component allows the user to input a numeric value from a specified range.
+
+---
+
+```html
+<Slider value="80" @valueChange="onValueChanged" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<Slider v-model="value" />
+```
+
+[> screenshots for=Slider <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `value` | `Number` | The value of the slider.
+| `minValue` | `Number` | The minimum value of the slider. Default `0`.
+| `maxValue` | `Number` | The maximum value of the slider. Default `100`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `valueChange`| Emitted when the value of the slider changes.
+
+## Native Component
+
+| Android | iOS |
+|---------|-----|
+| android.widget.SeekBar | UISlider
diff --git a/content/docs/ko/elements/components/switch.md b/content/docs/ko/elements/components/switch.md
new file mode 100644
index 00000000..4dda3b6a
--- /dev/null
+++ b/content/docs/ko/elements/components/switch.md
@@ -0,0 +1,39 @@
+---
+title: Switch
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_switch_.switch
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The Switch component allows the user to toggle between two states. 
+The default state is `false` or "off".
+
+---
+
+```html
+<Switch checked="true" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<Switch v-model="itemEnabled" />
+```
+
+[> screenshots for=Switch <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `checked` | `Boolean` | A boolean value representing the state of the switch.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `checkedChange`| Emitted when switch checked value changes.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.Switch | UISwitch
diff --git a/content/docs/ko/elements/components/tab-view.md b/content/docs/ko/elements/components/tab-view.md
new file mode 100644
index 00000000..75e7ec37
--- /dev/null
+++ b/content/docs/ko/elements/components/tab-view.md
@@ -0,0 +1,39 @@
+---
+title: TabView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The TabView component allows you to display content grouped into tabs.
+
+---
+
+```html
+<TabView :selectedIndex="selectedIndex">
+  <TabViewItem title="Tab 1">
+    <label text="Content for Tab 1"></label>
+  </TabViewItem>
+  <TabViewItem title="Tab 2">
+    <label text="Content for Tab 2"></label>
+  </TabViewItem>
+</TabView>
+```
+
+[> screenshots for=TabView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `selectedIndex` | `Number` | The currently selected tab. Default is `0`
+
+## Events
+
+| name | description |
+|------|-------------|
+| `selectedIndexChanged`| Emitted when one of the tab-view-item components are tapped
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.support.v4.view.ViewPager | UITabBarController
diff --git a/content/docs/ko/elements/components/text-field.md b/content/docs/ko/elements/components/text-field.md
new file mode 100644
index 00000000..f6b0c47b
--- /dev/null
+++ b/content/docs/ko/elements/components/text-field.md
@@ -0,0 +1,48 @@
+---
+title: TextField
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_text_field_
+contributors: [MisterBrownRSA, rigor789, TheOriginalJosh, eddyverbruggen]
+
+---
+
+The TextField component creates an editable single-line box.
+
+---
+
+```html
+<TextField :text="textFieldValue" hint="Enter text..." />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<TextField v-model="textFieldValue" />
+```
+
+[> screenshots for=TextField <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `text` | `String` | The value of the TextField.
+| `hint` | `String` | The placeholder text.
+| `editable` | `Boolean` | When `true`, the user can edit the value of the TextField.
+| `maxLength` | `Number` | Limits input to a certain number of characters.
+| `secure` | `Boolean` | Hides the entered text when `true`. Default `false`.
+| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input. Can be one of `datetime`, `phone`, `number`, `url`, or `email`.
+| `returnKeyType` | `ReturnKeyType` | The label of the return key. Can be one of `done`, `next`, `go`, `search`, or `send`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `textChange`| Emitted when the text changes.
+| `returnPress`| Emitted when the return key is pressed.
+| `focus`| Emitted when the textfield is in focus.
+| `blur`| Emitted when the textfield loses focus.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.EditText | UITextField
diff --git a/content/docs/ko/elements/components/text-view.md b/content/docs/ko/elements/components/text-view.md
new file mode 100644
index 00000000..eeebb3d4
--- /dev/null
+++ b/content/docs/ko/elements/components/text-view.md
@@ -0,0 +1,61 @@
+---
+title: TextView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview
+contributors: [MisterBrownRSA, rigor789, TheOriginalJosh, eddyverbruggen]
+---
+
+The TextView component represents an editable multi-line box.
+The component can also be used to show any content readonly by setting the `editable` property to `false`.
+
+---
+
+```html
+<TextView text="Multi\nLine\nText" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<TextView v-model="textViewValue" />
+```
+
+### Displaying multi-line text with different styling
+
+```html
+<TextView editable="false">
+  <FormattedString>
+    <Span text="You can use text attributes such as " />
+    <Span text="bold, " fontWeight="Bold" />
+    <Span text="italic " fontStyle="Italic" />
+    <Span text="and " />
+    <Span text="underline." textDecoration="Underline" />
+  </FormattedString>
+</TextView>
+```
+
+[> screenshots for=TextView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `text` | `String` | The value of the TextView.
+| `hint` | `String` | The placeholder text.
+| `editable` | `Boolean` | When `true`, the user can edit the value of the TextView.
+| `maxLength` | `Number` | Limits input to a certain number of characters.
+| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input. Can be one of `datetime`, `phone`, `number`, `url`, or `email`.
+| `returnKeyType` | `ReturnKeyType` | The label of the return key. Can be one of `done`, `next`, `go`, `search`, or `send`.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `textChange`| Emitted when the text changes.
+| `returnPress`| Emitted when the return key is pressed.
+| `focus`| Emitted when the textview is in focus.
+| `blur`| Emitted when the textview leaves focus.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.EditText | UITextView
diff --git a/content/docs/ko/elements/components/time-picker.md b/content/docs/ko/elements/components/time-picker.md
new file mode 100644
index 00000000..c87aa9b7
--- /dev/null
+++ b/content/docs/ko/elements/components/time-picker.md
@@ -0,0 +1,46 @@
+---
+title: TimePicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker
+contributors: [MisterBrownRSA, rigor789]
+
+---
+
+The TimePicker component allows the user to select formatted time.
+
+---
+
+```html
+<TimePicker :hour="selectedHour" :minute="selectedMinute" />
+```
+
+**Note**: This component supports two-way data binding using `v-model`:
+
+```html
+<TimePicker v-model="selectedTime" />
+```
+
+[> screenshots for=TimePicker <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `hour` | `Number` | The hour of the TimePicker.
+| `minute` | `Number` | The minute of the TimePicker.
+| `time` | `Date` | The time of the TimePicker.
+| `minHour` | `Number` | The minimum selectable hour.
+| `maxHour` | `Number` | The maximum selectable hour.
+| `minMinute` | `Number` | The minimum selectable minute.
+| `maxMinute` | `Number` | The maximum selectable minute.
+| `minuteInterval` | `Number` | The interval between selectable minutes.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `timeChanged` | Emitted when the selected time changes.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.widget.TimePicker | UIDatePicker
diff --git a/content/docs/ko/elements/components/web-view.md b/content/docs/ko/elements/components/web-view.md
new file mode 100644
index 00000000..cbde62e0
--- /dev/null
+++ b/content/docs/ko/elements/components/web-view.md
@@ -0,0 +1,34 @@
+---
+title: WebView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_web_view_.webview
+contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+---
+
+The WebView component is used to display web content within your application. 
+You can use the component by providing a `src` attribute that points at a URL or a local HTML file.
+
+---
+
+```html
+<WebView src="http://nativescript-vue.org/" />
+```
+
+[> screenshots for=WebView <]
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `src` | `String` | The source of the displayed page.
+
+## Events
+
+| name | description |
+|------|-------------|
+| `loadStarted`| Emitted when the page has started loading in the WebView.
+| `loadFinished`| Emitted when the page has been loaded in the WebView.
+
+## Native Component
+| Android | iOS |
+|---------|-----|
+| android.webkit.WebView | WKWebView
diff --git a/content/docs/ko/elements/dialogs/action.md b/content/docs/ko/elements/dialogs/action.md
new file mode 100644
index 00000000..5fa61a95
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/action.md
@@ -0,0 +1,24 @@
+---
+title: ActionDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action 
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The ActionDialog allows you to create a dialog with a list of selectable options.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.action('Choose one!', 'Or cancel...', ['cheese', 'wine'])
+    .then(result => {
+      console.log(result);
+    })
+  }
+}
+```
+
+[> screenshots for=ActionDialog <]
\ No newline at end of file
diff --git a/content/docs/ko/elements/dialogs/alert.md b/content/docs/ko/elements/dialogs/alert.md
new file mode 100644
index 00000000..752d6ea5
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/alert.md
@@ -0,0 +1,36 @@
+---
+title: AlertDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#alert
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The AlertDialog will act as a simple modal notification that requires confirmation.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.alert('Hello!')
+    .then(() => {
+      console.log("Dialog closed")
+    })
+  }
+}
+```
+
+The AlertDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
+
+```javascript
+alert('Hello!')
+.then(() => {
+  console.log("Dialog closed")
+})
+```
+
+anywhere in your code.
+
+
+[> screenshots for=AlertDialog <]
\ No newline at end of file
diff --git a/content/docs/ko/elements/dialogs/confirm.md b/content/docs/ko/elements/dialogs/confirm.md
new file mode 100644
index 00000000..578a24f2
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/confirm.md
@@ -0,0 +1,35 @@
+---
+title: ConfirmDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#confirm
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The ConfirmDialog acts as a boolean (Yes/No) input dialog.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.confirm('Are you ready?')
+    .then(result => {
+      console.log(result)
+    })
+  }
+}
+```
+
+The ConfirmDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
+
+```javascript
+confirm('Are you ready?')
+.then(result => {
+  console.log(result)
+})
+```
+
+anywhere in your code.
+
+[> screenshots for=ConfirmDialog <]
\ No newline at end of file
diff --git a/content/docs/ko/elements/dialogs/login.md b/content/docs/ko/elements/dialogs/login.md
new file mode 100644
index 00000000..c0abeb03
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/login.md
@@ -0,0 +1,24 @@
+---
+title: LoginDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#login
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The LoginDialog has two inputs that are used for prompting the user for credentials.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.login('Please log in', 'Username', 'Password')
+    .then(result => {
+      console.log(result)
+    })
+  }
+}
+```
+
+[> screenshots for=LoginDialog <]
\ No newline at end of file
diff --git a/content/docs/ko/elements/dialogs/prompt.md b/content/docs/ko/elements/dialogs/prompt.md
new file mode 100644
index 00000000..3707d02c
--- /dev/null
+++ b/content/docs/ko/elements/dialogs/prompt.md
@@ -0,0 +1,35 @@
+---
+title: PromptDialog
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt
+contributors: [MisterBrownRSA, rigor789]
+---
+
+The PromptDialog allows you to prompt the user for input.
+
+---
+
+```javascript
+const dialogs = require('ui/dialogs')
+
+module.exports = {
+  mounted() {
+    dialogs.prompt('How are you?', 'Amazing!')
+    .then(result => {
+      console.log(`Dialog result: ${result.result}, text: ${result.text}`)
+    })
+  }
+}
+```
+
+The PromptDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
+
+```javascript
+prompt('How are you?', 'Amazing!')
+.then(result => {
+  console.log(`Dialog result: ${result.result}, text: ${result.text}`)
+})
+```
+
+anywhere in your code.
+
+[> screenshots for=PromptDialog <]
\ No newline at end of file
diff --git a/content/docs/ko/elements/layouts/absolute-layout.md b/content/docs/ko/elements/layouts/absolute-layout.md
new file mode 100644
index 00000000..941998f2
--- /dev/null
+++ b/content/docs/ko/elements/layouts/absolute-layout.md
@@ -0,0 +1,46 @@
+---
+title: AbsoluteLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_
+contributors: [rigor789]
+---
+
+The AbsoluteLayout container is the simplest layout container in NativeScript. It uses absolute top-left coordinates to position its children. The AbsoluteLayout will not enforce any layout constraints on its children and will not resize them at runtime when its size changes.
+
+### Samples
+
+#### A grid-like layout
+
+```html
+<AbsoluteLayout backgroundColor="#3c495e">
+  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883"/>
+  <Label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883"/>
+</AbsoluteLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_grid.svg" />
+
+#### Overlapping elements
+
+```html
+<AbsoluteLayout backgroundColor="#3c495e">
+  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#289062"/>
+  <Label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#43b883"/>
+</AbsoluteLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_overlap.svg" />
+
+
+## Props
+
+AbsoluteLayout has no props.
+
+## Additional Children Props
+
+When an element is a direct child of the AbsoluteLayout, the following
+props get a meaning:
+
+| name | type | description |
+|------|------|-------------|
+| `top` | `Number` | A value representing the distance from the top of the parent AbsoluteLayout
+| `left` | `Number` | A value representing the distance from the left of the parent AbsoluteLayout
diff --git a/content/docs/ko/elements/layouts/dock-layout.md b/content/docs/ko/elements/layouts/dock-layout.md
new file mode 100644
index 00000000..07f6c943
--- /dev/null
+++ b/content/docs/ko/elements/layouts/dock-layout.md
@@ -0,0 +1,60 @@
+---
+title: DockLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_
+contributors: [rigor789]
+---
+
+DockLayout is a layout that provides a docking mechanism for child elements to the `left`, `right`, `top`, `bottom` or center of the layout. To define the docking side of a child element, use its `dock` property. To dock a child element to the center of the DockLayout, it must be the **last child** of the DockLayout and the `stretchLastChild` property of the DockLayout must be set to `true`.
+
+### Samples
+
+#### Dock to every side without stretching last child
+
+```html
+<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
+  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
+  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
+  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_no_stretch.svg" />
+
+#### Dock to every side with stretching last child
+
+```html
+<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
+  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
+  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
+  <Label text="bottom" dock="bottom" backgroundColor="#1c6b48"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_stretch.svg" />
+
+#### Multiple children on the same side
+
+```html
+<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
+  <Label text="left 1" dock="left" width="40" backgroundColor="#43b883"/>
+  <Label text="left 2" dock="left" width="40" backgroundColor="#289062"/>
+  <Label text="left 3" dock="left" width="40" backgroundColor="#1c6b48"/>
+  <Label text="last child" backgroundColor="#43b883"/>
+</DockLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_multiple_on_same_side.svg" />
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+`stretchLastChild` | `Boolean` | Enables/Disables stretching the last child to fit the remaining space.
+
+## Additional Children Props
+
+When an element is a direct child of the DockLayout, the following
+props get a meaning:
+
+| name | type | description |
+|------|------|-------------|
+`dock` | `String` | Specifies which side to dock the element to. Values can be: `top`, `right`, `bottom`, `left`
diff --git a/content/docs/ko/elements/layouts/flexbox-layout.md b/content/docs/ko/elements/layouts/flexbox-layout.md
new file mode 100644
index 00000000..24b7e249
--- /dev/null
+++ b/content/docs/ko/elements/layouts/flexbox-layout.md
@@ -0,0 +1,101 @@
+---
+title: FlexboxLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_
+contributors: [rigor789]
+---
+
+The FlexboxLayout container is a non-exact implementation of the [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+
+### Samples
+
+#### Default flex layout
+
+```html
+<FlexboxLayout backgroundColor="#3c495e">
+  <Label text="first" width="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" backgroundColor="#1c6b48"/>
+  <Label text="third" width="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_stretch.svg" />
+
+#### Column flex layout
+
+```html
+<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_stretch.svg" />
+
+#### Row layout with items aligned to flex-start
+
+```html
+<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
+  <Label text="first" width="70" height="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" width="70" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_flex-start.svg" />
+
+#### Row layout with custom order
+
+```html
+<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
+  <Label text="first" order="2" width="70" height="70" backgroundColor="#43b883"/>
+  <Label text="second" order="3" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third" order="1" width="70" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_custom_order.svg" />
+
+#### Wrapping
+
+```html
+<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
+  <Label text="first" width="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_wrap.svg" />
+
+#### Reverse column, with different alignSelf
+
+```html
+<FlexboxLayout flexDirection="column-reverse"
+               justifyContent="space-around" backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" alignSelf="center" width="70" height="70" backgroundColor="#1c6b48"/>
+  <Label text="third\nflex-end" alignSelf="flex-end" width="70" height="70" backgroundColor="#289062"/>
+  <Label text="fourth" height="70" backgroundColor="#289062"/>
+</FlexboxLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_reverse_space_around_align_self.svg" />
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+`flexDirection` | `String` | The direction in which flex items are placed in the flex container. The `flexDirection` property accepts 4 different values: `row` (same as text direction), `row-reverse` (opposite to text direction), `column` (same as row but top to bottom), and `column-reverse` (same as row-reverse top to bottom). The default value is `row`.
+`flexWrap` | `String` | Sets whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. The `flexWrap` property accepts 3 different values: `nowrap` (single-line which may cause the container to overflow), `wrap` (multi-lines, direction is defined by flexDirection), and `wrap-reverse` (multi-lines, opposite to direction defined by flexDirection). The default value is `nowrap`.
+`justifyContent` | `String` |  Sets the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. The justifyContent property accepts 5 different values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward to end line), `center` (items are centered along the line), `space-between` (items are evenly distributed in the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed in the line with equal space around them). The default value is `flex-start`.
+`alignItems` | `String` | Sets how flex items are laid out along the cross axis on the current line. You can think of it as the `justifyContent` version for the cross-axis (perpendicular to the main-axis). The `alignItems` property accepts 5 different values: `flex-start` (cross-start margin edge of the items is placed on the cross-start line), `flex-end` (cross-end margin edge of the items is placed on the cross-end line), `center` (items are centered in the cross-axis), `baseline` (items are aligned such as their baselines align), `stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is `stretch`.
+`alignContent` | `String` | Sets how flex items are aligned in the flex container on the cross-axis, similar to how `justifyContent` aligns individual items within the main-axis. The `alignContent` property accepts 6 different values: `flex-start` (lines packed to the start of the container), `flex-end` (lines packed to the end of the container), `center` (lines packed to the center of the container), `space-between` (lines evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines evenly distributed with equal space between them), and `stretch` (lines stretch to take up the remaining space). The default value is `stretch`. This property has no effect when the flex container has only a single line.
+
+## Additional Children Props
+
+When an element is a direct child of the FlexboxLayout, the following
+props get a meaning:
+
+| name | type | description |
+|------|------|-------------|
+`order` | `Number` | Changes the default ordering of the flex items
+`flexGrow` | `Number` | Unitless value that serves as a proportion indicating whether the flex item is able to grow if necessary. It dictates what amount of the available space inside the flex container the item should take up.
+`flexShrink` | `Number` | A value indicating the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there is not enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
+`alignSelf` | `String` | A value that overrides the `alignItems` value for specific flex items. This property accepts the same 5 values as `alignItems`: `flex-start` (cross-start margin edge of the item is placed on the cross-start line), `flex-end` (cross-end margin edge of the item is placed on the cross-end line), `center` (item is centered in the cross-axis), `baseline` (items are aligned such as their baselines are aligned), and `stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is `stretch`.
+`flexWrapBefore` | `Boolean` | A boolean value controlling item wrapping. Setting it to `true` will force the item to wrap onto a new line. The default value is `false`. (This property is not part of the official flexbox specification.)
diff --git a/content/docs/ko/elements/layouts/grid-layout.md b/content/docs/ko/elements/layouts/grid-layout.md
new file mode 100644
index 00000000..8b932e8e
--- /dev/null
+++ b/content/docs/ko/elements/layouts/grid-layout.md
@@ -0,0 +1,73 @@
+---
+title: GridLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_
+contributors: [rigor789]
+---
+
+The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements, they can span over multiple rows and columns, and even overlap each other. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the `columns` property and row definition items (separated by commas) to the `rows` property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of pixels, as a percentage of the available space or automatically:
+
+- **Absolute**: Fixed size of pixels.
+- **Star (*)**: Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So `3/7` means the same as `30/70`.
+- **Auto**: Takes as much space as needed by the contained child element(s).
+
+### Samples
+
+#### A complex grid layout
+
+```html
+<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
+  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
+  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout.svg" />
+
+#### Grid layout with star sizing
+
+```html
+<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_star_sizing.svg" />
+
+#### Grid layout with fixed and auto sizing
+
+```html
+<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
+  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
+  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
+  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
+  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
+</GridLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_fixed_auto.svg" />
+
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+`columns` | `String` | A string value representing column widths delimited with commas. Column widths can be either an absolute number, `auto` or `*`. A number indicates an absolute column width, `auto` makes the column as wide as its widest child, and `*` makes the column occupy all available horizontal space.
+`rows` | `String` | A string value representing row heights delimited with commas. Row heights can be either an absolute number, `auto` or `*`. A number indicates an absolute row height, `auto` makes the row as high as its highest child, and `*` makes the row occupy all available vertical space.
+
+
+## Additional Children Props
+
+When an element is a direct child of the GridLayout, the following
+props get a meaning:
+
+| name | type | description |
+|------|------|-------------|
+`row` | `Number` | Specifies the row which this element should be in
+`column` | `Number` | Specifies the column which this element should be in
+`rowSpan` | `Number` | Specifies the number of rows which this element should span across
+`columnSpan` | `Number` | Specifies the number of columns which this element should span across
diff --git a/content/docs/ko/elements/layouts/stack-layout.md b/content/docs/ko/elements/layouts/stack-layout.md
new file mode 100644
index 00000000..19056c56
--- /dev/null
+++ b/content/docs/ko/elements/layouts/stack-layout.md
@@ -0,0 +1,74 @@
+---
+title: StackLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_
+contributors: [rigor789]
+---
+
+The StackLayout container stacks the child elements either vertically (default), or horizontally.
+
+### Samples
+
+#### Default StackLayout
+
+```html
+<StackLayout backgroundColor="#3c495e">
+  <Label text="first" height="70" backgroundColor="#43b883"/>
+  <Label text="second" height="70" backgroundColor="#289062"/>
+  <Label text="third" height="70" backgroundColor="#1c6b48"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical.svg" />
+
+#### Horizontal StackLayout
+
+```html
+<StackLayout orientation="horizontal" backgroundColor="#3c495e">
+  <Label text="first" width="70" backgroundColor="#43b883"/>
+  <Label text="second" width="70" backgroundColor="#289062"/>
+  <Label text="third" width="70" backgroundColor="#1c6b48"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal.svg" />
+
+#### StackLayout with horizontally aligned children
+
+```html
+<StackLayout backgroundColor="#3c495e">
+  <Label text="left" horizontalAlignment="left"
+         width="33%" height="70" backgroundColor="#43b883"/>
+  <Label text="center" horizontalAlignment="center"
+         width="33%" height="70" backgroundColor="#289062"/>
+  <Label text="right" horizontalAlignment="right"
+         width="33%" height="70" backgroundColor="#1c6b48"/>
+  <Label text="stretch" horizontalAlignment="stretch"
+         height="70" backgroundColor="#43b883"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical_align_children.svg" />
+
+#### Horizontal StackLayout with vertically aligned children
+
+```html
+<StackLayout orientation="horizontal" backgroundColor="#3c495e">
+  <Label text="top" verticalAlignment="top"
+         width="70" height="33%" backgroundColor="#43b883"/>
+  <Label text="center" verticalAlignment="center"
+         width="70" height="33%" backgroundColor="#289062"/>
+  <Label text="bottom" verticalAlignment="bottom"
+         width="70" height="33%" backgroundColor="#1c6b48"/>
+  <Label text="stretch" verticalAlignment="stretch"
+         width="70" backgroundColor="#43b883"/>
+</StackLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal_align_children.svg" />
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+`orientation` | `String` | Specifies the direction of the stacking. Possible values are `vertical` and `horizontal`. The default value is `vertical`.
+
+
+## Additional Children Props
+
+There are no additional properties for child elements.
diff --git a/content/docs/ko/elements/layouts/wrap-layout.md b/content/docs/ko/elements/layouts/wrap-layout.md
new file mode 100644
index 00000000..6fc1f163
--- /dev/null
+++ b/content/docs/ko/elements/layouts/wrap-layout.md
@@ -0,0 +1,46 @@
+---
+title: WrapLayout
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_
+contributors: [rigor789]
+---
+
+The WrapLayout container positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them onto a new row or column.
+
+### Samples
+
+#### Default WrapLayout
+
+```html
+<WrapLayout backgroundColor="#3c495e">
+  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
+</WrapLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_horizontal.svg" />
+
+#### Vertical WrapLayout
+
+```html
+<WrapLayout orientation="vertical" backgroundColor="#3c495e">
+  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
+  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
+  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
+  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
+</WrapLayout>
+```
+<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_vertical.svg" />
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+`orientation` | `String` | A value indicating the flow direction. If orientation is `horizontal`, items are arranged in rows. If orientation is `vertical`, items are arranged in columns. The default value is `horizontal`.
+`itemWidth` | `Number` | The width used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children.
+`itemHeight` | `Number` | The height used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children.
+
+
+## Additional Children Props
+
+There are no additional properties for child elements.
diff --git a/content/docs/ko/getting-started/1-quick-start.md b/content/docs/ko/getting-started/1-quick-start.md
new file mode 100644
index 00000000..41122d86
--- /dev/null
+++ b/content/docs/ko/getting-started/1-quick-start.md
@@ -0,0 +1,27 @@
+---
+title: Quick Start
+contributors: [rigor789, eddyverbruggen]
+---
+
+If you want to easily try NativeScript-Vue, we strongly recommend trying
+it in the [NativeScript Playground](https://play.nativescript.org?template=play-vue). It is the easiest introduction you can get into NativeScript-Vue.
+
+If you are ready to move on and work locally on your machine, and [you
+have your system ready for native development](/en/docs/getting-started/installation), you can start by using a template:
+
+```shell
+$ tns create my-app --template nativescript-vue-template
+$ cd my-app
+```
+
+and then run your app using:
+
+```shell
+$ tns run android # for android
+```
+
+```shell
+$ tns run ios # for ios
+```
+
+To learn more about the available templates head over to the [templates documentation](/en/docs/getting-started/templates).
diff --git a/content/docs/ko/getting-started/2-installation.md b/content/docs/ko/getting-started/2-installation.md
new file mode 100644
index 00000000..b48ce7da
--- /dev/null
+++ b/content/docs/ko/getting-started/2-installation.md
@@ -0,0 +1,48 @@
+---
+title: Installation
+contributors: [rigor789 , TheOriginalJosh, eddyverbruggen]
+---
+
+In order to use NativeScript-Vue, your system will need to be set up properly
+so that your applications can compile.
+
+## Prerequisites
+
+- [Node.js](#nodejs)
+- [NativeScript CLI](#nativescript-cli)
+- [Windows](#windows) (for developing Android applications on Windows)
+- [macOS](#macos) (for developing iOS and Android applications on macOS)
+- [Linux](#linux) (for developing Android applications on Linux)
+
+### Node.js
+
+Download and install the latest "LTS" version of Node.js from [https://nodejs.org/](https://nodejs.org/). Restart your terminal and verify the installation was successful with the command `node --version`.
+
+### NativeScript CLI
+
+To install the NativeScript CLI open your terminal and run the command
+
+```shell
+$ npm install -g nativescript
+```
+
+You can verify the installation was successful by running `tns` in your terminal. You should see a list of all the available commands.
+
+
+### Windows
+
+System Requirements and setup instructions for the Android SDK on Windows:
+
+[Advanced setup: Windows](https://docs.nativescript.org/start/ns-setup-win)
+
+### macOS
+
+System Requirements and setup instructions to setup Xcode and the Android SDK development environments for your Mac:
+
+[Advanced setup: macOS](https://docs.nativescript.org/start/ns-setup-os-x)
+
+### Linux
+
+System Requirements and setup instructions for the Android SDK on Linux:
+
+[Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux)
diff --git a/content/docs/ko/getting-started/3-templates.md b/content/docs/ko/getting-started/3-templates.md
new file mode 100644
index 00000000..d3f9e06b
--- /dev/null
+++ b/content/docs/ko/getting-started/3-templates.md
@@ -0,0 +1,75 @@
+---
+title: Templates
+contributors: [rigor789, tralves]
+outdated: true
+---
+
+You can use NativeScript's [template system](https://docs.nativescript.org/tooling/app-templates) to bootstrap your `nativescript-vue` app. All these templates generate a NativeScript app that uses the `nativescript-vue` plugin. Some templates are equipped with more features such as support for Vue.js Single File Components (`.vue`) and livereload.
+
+## nativescript-vue-template
+
+#### Project link
+
+[](https://github.com/tralves/nativescript-vue-template)
+
+#### Description
+
+This one the most basic template. It contains a number of app samples that you can use as the starting point of your app. To try them, copy and paste the code from `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, or `app-with-vmodel.js` into your app’s `app.js` file.
+
+#### Installation
+
+```shell
+$ tns create sample-app --template nativescript-vue-template
+```
+
+*Follow the [project link](https://github.com/tralves/nativescript-vue-template) for further instructions.*
+
+## nativescript-vue-rollup-template
+
+#### Project link
+
+[](https://github.com/tralves/nativescript-vue-rollup-template)
+
+#### Description
+Originally a [fork from rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template), this template is currently the most stable and feature complete. You can see it in action in the [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) app.
+It supports:
+
+- livereload;
+- .vue Single-File Components;
+- scss imports and scss inside `<style>` tags in .vue files;
+- root imports (imports starting with `/ `refer to the root of the app folder);
+- babel with `es2015` and `stage-2` presets;
+
+#### Installation
+
+```shell
+$ tns create sample-app --template nativescript-vue-rollup-template
+```
+
+*Follow the [project link](https://github.com/tralves/nativescript-vue-rollup-template) for further instructions.*
+
+## nativescript-vue-webpack-template
+
+#### Project link
+
+[](https://github.com/tralves/nativescript-vue-webpack-template)
+
+#### Description
+
+The webpack template leverages webpack to provide the same functionality as the rollup counterpart. It is evolving to support code sharing, i.e., create projects that share as much of the logic as possible between a web build and the native (android/iOS) builds.
+
+ Features:
+
+- livereload;
+- .vue Single-File Components;
+- scss imports and scss inside `<style>` tags in .vue files;
+- babel with `es2015` and `stage-2` presets;
+- (soon) native/web code sharing;
+
+#### Installation
+
+```shell
+$ tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template
+```
+
+*Follow the [project link](https://github.com/tralves/nativescript-vue-webpack-template) for further instructions.*
diff --git a/content/docs/ko/getting-started/4-nativescript-plugins.md b/content/docs/ko/getting-started/4-nativescript-plugins.md
new file mode 100644
index 00000000..bf645fe9
--- /dev/null
+++ b/content/docs/ko/getting-started/4-nativescript-plugins.md
@@ -0,0 +1,29 @@
+---
+title: Using NativeScript Plugins
+contributors: [EddyVerbruggen, naderio, rigor789]
+---
+
+Plugins work as in any other NativeScript app, but you may wonder how *UI* plugins would work with Vue.
+
+UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app. For instance consider this example usage of [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient) which is used in the [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js):
+
+Install the plugin using the NativeScript CLI:
+
+```shell
+$ tns plugin add nativescript-gradient
+```
+
+Open your app entry file and add the following to the top:
+
+```js
+Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)
+```
+
+Then in your template, you can use the newly registered element:
+
+```html
+<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
+  <Label text="Best gradient." horizontalAlignment="center"
+         style="color: white; padding: 20" />
+</Gradient>
+```
diff --git a/content/docs/ko/getting-started/5-vue-plugins.md b/content/docs/ko/getting-started/5-vue-plugins.md
new file mode 100644
index 00000000..087935d8
--- /dev/null
+++ b/content/docs/ko/getting-started/5-vue-plugins.md
@@ -0,0 +1,85 @@
+---
+title: Using Vue Plugins
+contributors: [jlooper]
+---
+
+## vue-router
+
+Coming soon...
+
+## Vuex
+
+Vuex is Vue.js's state management pattern and library. It serves as a store for all the components in an application and implements rules to ensure that state is mutated in a predictable fashion. Vuex can be used in NativeScript apps; for an example, see the [NativeScript Groceries Vue sample](https://github.com/tralves/groceries-ns-vue). 
+
+### Install
+
+Install Vuex as you would normally in your Vue.js app. With npm, for example:
+
+```shell
+$ npm install vuex --save
+```
+
+The most recent version of Vuex will be added to your package.json file.
+
+### Import
+
+In your app's `main.js` file, import Vuex at the top:
+
+```js
+import Vuex from 'vuex'
+Vue.use(Vuex)
+```
+Now you can use Vuex in the app similar to how you would use it in a standard Vue app for the web to manage your app's state.
+
+### Create a Store
+
+Above your creation of a new Vue instance, or in a separate folder (for example `/store` in your app folder), create a new constant to store your state. This is where you will invoke Vuex API calls. A simple store constant would include the state of a counter whose state you control throughout your app by means of tracking its mutations:
+
+```js
+const store = new Vuex.Store({
+    state: {
+      count: 0
+    },
+    mutations: {
+      increment: state => state.count++,
+      decrement: state => state.count--
+    }
+})
+```
+
+### Use the Store
+
+Now you can manage state by calling the store you just created. In the example below, the app tracks the count value as you press a '+' or '-' button. Note that you don't manipulate the state itself, but rather call mutations to increment and decrement its value.
+
+```js
+new Vue({
+  computed: {
+    count(){
+      return store.state.count
+    }
+  },
+
+  template: `
+    <Page>
+      <ScrollView>
+        <StackLayout>
+          <Button @tap="increment" text="+" />
+          <Button @tap="decrement" text="-" />
+          <Label :text="count" />
+        </StackLayout>
+      </ScrollView>
+    </Page>
+  `,
+
+  methods: {
+    increment() {
+      store.commit('increment')
+    },
+    decrement() {
+      store.commit('decrement')
+    }
+  }
+}).$start()
+```
+
+More information about Vuex and how to manage state can be found in [the Vuex documentation](https://vuex.vuejs.org/en/core-concepts.html). A good architecture to manage the various elements of Vuex can be found in the Groceries app in the [`/store` folder](https://github.com/tralves/groceries-ns-vue/tree/master/app/store).
diff --git a/content/docs/ko/introduction.md b/content/docs/ko/introduction.md
new file mode 100644
index 00000000..cbb14cb6
--- /dev/null
+++ b/content/docs/ko/introduction.md
@@ -0,0 +1,44 @@
+---
+title: 소개
+contributors: [rigor789, tjvantoll, qgp9]
+---
+
+## [네이티브스크립트](https://www.nativescript.org/)가 무엇인가요?
+
+NativeScript는 자바스크립트로 실제 네이티브 모바일 어플리케이션을 만들기 위한 오픈소스 프레임워크입니다.
+
+## [Vue.js](https://vuejs.org/)는 무엇인가요?
+
+Vue(view/뷰 처럼 /vjuː/로 발음합니다) 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 핵심 라이브러리는 뷰  계층(view layer)에 집중하고 있고 다른 라이브러리나 기존의 프로젝트와의 통합이 매우 쉽습니다.
+
+## NativeScript-Vue는 무엇인가요?
+
+NativeScript-Vue는 Vue.js 를 이용해 모바일 어플리케이션을 만들도록 도와주는 네이티브-스크립트 플러그인입니다. 이미 Vue.js를 사용해 보신 분이라면 NativeScript-Vue가 집처럼 편한하게 느끼실 겁니다.
+
+## 왜 NativeScript-Vue를 사용해야 할까요?
+
+모바일앱을 만들기 위한 다양한 옵션들이 있습니다. 여기에 NativeScript-Vue가 잘 맞을 상황들이 있습니다.
+
+* **진짜 네이티브 iOS와 안드로이드 앱이 필요할 경우**: 네이티브-스크립트는 iOS와 안드로이드의 네이티브 사용자 인터페이스 구성요소를 이용하여 앱을 만듭니다. 이렇게 만들어진 앱은 웹베이스가 아니기때문에 웹뷰기반(WebView-based) 프레임워크들이 가지는 한계를 따르지 않습니다. 네이티브-스크립트는 또한 [다양한 플러그인](http://market.nativescript.org/)을 통해 네이티브 장치의 기능들과 연결됩니다. 만약 여러분의 앱이 iOS나 안드로이드의 API나 기능들을 사용해야 한다면, 네이티브-스크립트로 그렇게 할 수 있습니다.
+* **자바스크립트를 좋아한다면**: 네이티브-스크립트와 함께라면 Object-C나 Swift, Java가 아니라 자바스크립트로 여러분의 모바일앱을 작성할 수 있습니다. 만약 자바스크립트를 좋아하신다면, 여러분의 웹이나 노드 앱을 만들때와 같은 언어로 네이티브 iOS와 안드로이드 앱을 작성하는 이 방법을 좋아하실 겁니다.
+* **Vue를 좋아한다면**: Vue 뷰계층에 대한 간단하고 간편한 접근으로 유명합니다. 웹앱을 Vue로 만드는 것을 좋아한다면 같은 데이터 바인딩이나 이벤트 핸들링처럼 공통된 작업을 같은 문법으로 작성할 수 있는 NativeScript-Vue가 집처럼 편안하게 느껴지실 겁니다.
+
+## 무엇을 배워야 하나요?
+
+Vue에 이미 경험이 있다면 성공적으로 NativeScript-Vue를 배우기 위해 다음 두 가지를 중요하게 고려해야 합니다.
+
+* **네이티브-스크립트 CLI로 작업하기**: 네이티브-스크립트는 웹앱이 아닌 iOS와 안드로이드 앱을 만들기 위한 프레임워크입니다. 여러분은 네이티브-스클비트 CLI 의 몇가지 명령어와 iOS 시뮬레이터, 안드로이드 가상장치의 작동방식에 대해서 배울 필요가 있습니다.
+* **네이티브-스크립트 UI 컴포넌트 배우기**: 네이티브-스크립트는 네이티브 사용자 인터페이스 컴포넌트를 사용하기 때문에 `<div>` 나 `<span>` 같은 HTML 태그가 존재하지 않습니다. 대신 여러분의 인터페이스를 렌더링하기 위해 필요한 [새로운 컴포넌트](https://docs.nativescript.org/ui/components)들을 배워야 합니다.
+
+하지만 걱정하지 마세요. NativeScript-vue를 사용하기 위한 러닝커브가 있는 건 사실이지만, iOS 나 안드로이드 개발을 처음부터 배우는 것 보다는 훨씬 쉽습니다. 어쨌든 여러분은 이미 익숙한 자바스크립트와 Vue로 소스코드를 쓰는 것이니까요.
+
+## 참여하고 싶으세요?
+
+NativeScript-Vue는 오픈소스 프레임워크이고 기여(컨트리뷰션)는 매우 권장됩니다. [프로젝트 컨트리뷰션 가이드](https://github.com/nativescript-vue/nativescript-vue/blob/master/CONTRIBUTING.md)를 확인하시고 **[네이티브-스크립트 커뮤니티 슬랙](https://developer.telerik.com/wp-login.php?action=slack-invitation)의 #vue 채널에 참여하세요**
+
+## 이 프로젝트는 얼마나 안정적인가요?
+
+NativeScript-Vue는 비교적 기능적으로 완벽합니다. 현재 우리는 다음 두가지에 집중하고 있습니다:
+
+* **문서화**: 이 사이트에 NativeScript-Vue로 할 수 있는 모든 것이 문서화 되지는 않았습니다. 샘플과 유즈케이스들이 적극적으로 추가되고 있습니다. 또한 여러분의 기여도 환영합니다.
+* **예제앱**: 우리는 사람들이 이 플러긴을 사용해 보고 피드백을 주기를 바랍니다. 관심이 있으시면 [네이티브-스크립트 커뮤니티 슬랙](https://developer.telerik.com/wp-login.php?action=slack-invitation) 에 참여하시고 #vue 채널에서 알려주세요.
diff --git a/content/docs/ko/routing/manual-routing.md b/content/docs/ko/routing/manual-routing.md
new file mode 100644
index 00000000..39f05f75
--- /dev/null
+++ b/content/docs/ko/routing/manual-routing.md
@@ -0,0 +1,128 @@
+---
+title: Manual Routing
+contributors: [eddyverbruggen]
+---
+
+The easiest way to do routing in NativeScript-Vue is using the convenience functions
+`$navigateTo`, `$navigateBack`, and `$showModal`.
+
+### `$navigateTo`
+Suppose you have components `Master` and `Detail` and want to navigate from `Master` to `Detail`,
+then you have two ways to call `$navigateTo`: in the view, or in a method:
+
+#### In the view
+Expose the `Detail` component through a `data` property in the `Master` component and invoke `$navigateTo(<propertyName>)` in the view directly. 
+
+```vue
+const Vue = require('nativescript-vue');
+
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="To Details directly" @tap="$navigateTo(detailPage)" />
+      </StackLayout>
+    </Page>
+  `,
+
+  data() {
+    return {
+      detailPage: Detail
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+    </Page>
+  `
+};
+
+new Vue({
+  render: h => h(Master)
+}).$start()
+```
+
+#### In a method
+Bind a button to a method and use `this.$navigateTo(Detail)` to navigate to the `Detail` component in that method,
+
+```vue
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="To Details via method" @tap="goToDetailPage" />
+      </StackLayout>
+    </Page>
+  `,
+
+  methods: {
+    goToDetailPage() {
+      this.$navigateTo(Detail);
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+    </Page>
+  `
+};
+```
+
+### `$navigateBack`
+Add a button to the `Detail` component, which simply triggers the globally exposed `$navigateBack` function.
+
+```vue
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+      <StackLayout>
+        <Button text="Back to Master" @tap="$navigateBack" />
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+### `$showModal`
+If you want to show the `Detail` page modally, simply replace `$navigateTo` by `$showModal`.
+As before, you can call this method either from the view or a function.
+
+To close the modal, call `$modal.close`.
+
+```vue
+const Master = {
+  template: `
+    <Page>
+      <ActionBar title="Master" />
+      <StackLayout>
+        <Button text="Show Details modally" @tap="showDetailPageModally" />
+      </StackLayout>
+    </Page>
+  `,
+
+  methods: {
+    showDetailPageModally() {
+      this.$showModal(Detail);
+    }
+  }
+};
+
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar title="Detail"/>
+      <StackLayout>
+        <Button @tap="$modal.close" text="Close" />                    
+      </StackLayout>
+    </Page>
+  `
+};
diff --git a/content/docs/ko/routing/vue-router.md b/content/docs/ko/routing/vue-router.md
new file mode 100644
index 00000000..dc4fb488
--- /dev/null
+++ b/content/docs/ko/routing/vue-router.md
@@ -0,0 +1,99 @@
+---
+title: Vue Router
+contributors: [eddyverbruggen]
+---
+
+If [Manual Routing](/en/docs/routing/manual-routing) doesn't cut it for your use-case,
+then you'll be happy to learn [the Vue router](https://router.vuejs.org/en/) is fully supported.
+
+## Installation
+From a command prompt, run:
+```bash
+npm i vue-router --save
+```
+
+## Usage
+Let's show a full example, broken down in a few pieces so we can provide some comments.
+Note that the Vue Router has more tricks up its sleeve, so be sure to visit
+[the official documentation](https://router.vuejs.org/en/).
+
+---
+Require Vue, VueRouter, and let them shake hands 🤝
+```js
+const Vue = require('nativescript-vue');
+const VueRouter = require('vue-router');
+
+Vue.use(VueRouter);
+```
+
+---
+Define a `Master` page with the current router as its title (`$route.path`)
+and a button with a `@tap="$router.push('/detail')"` so a new page is pushed on the stack and navigated to.
+
+Also, a button to the same page with a query param `user`.
+```html
+const Master = {
+  template: `
+    <Page>
+      <ActionBar :title="$route.path" />
+      <StackLayout>
+        <Button text="To Details" @tap="$router.push('/detail')" />
+        <Button text="To Details (with query param)" @tap="$router.push('/detail?user=John+Appleseed')"></Button>
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+---
+Define a `Detail` page with a `NavigationButton`. On iOS this will automatically bring you back to the
+previous page in the stack, but for Android `tap` handler is required (which is ignored on iOS).
+So add `@tap="$router.back()"`.
+
+Remember that `user` query param we passed from the second button of the `Master` page? You can use it in the `Details`
+page like this: `<Label :text="$route.query.user">`
+
+Lastly, you can navigate back (and forth) with `$router.go(<number-of-pages>)` as demonstrated below.
+
+```html
+const Detail = {
+  template: `
+    <Page>
+      <ActionBar :title="$route.path">
+        <NavigationButton text="Back!" android.systemIcon="ic_menu_back" @tap="$router.back()" />
+      </ActionBar>
+      <StackLayout>
+        <Label :text="$route.query.user" v-if="$route.query.user" />
+        <Button text="Back to Master" @tap="$router.go(-1)" />
+      </StackLayout>
+    </Page>
+  `
+};
+```
+
+---
+Define all the pages of your application as follows:
+```js
+const router = new VueRouter({
+  pageRouting: true,
+  routes: [
+    {path: '/master', component: Master},
+    {path: '/detail', component: Detail},
+    {path: '*', redirect: '/master'}
+  ]
+});
+```
+
+---
+And load one of those routes when the app starts:
+```js
+router.replace('/master');
+```
+
+---
+Oh, and don't forget to tell `Vue` about your routes:
+```js
+new Vue({
+  router
+}).$start();
+```
diff --git a/content/docs/ko/utilities/v-template.md b/content/docs/ko/utilities/v-template.md
new file mode 100644
index 00000000..88861734
--- /dev/null
+++ b/content/docs/ko/utilities/v-template.md
@@ -0,0 +1,57 @@
+---
+title: v-template component
+contributors: [rigor789]
+---
+
+The `v-template` component is used for defining markup that can be reused as a template.
+
+It is utilized internally by the [ListView Component](/en/docs/elements/components/list-view).
+
+## Props
+
+| name | type | description |
+|------|------|-------------|
+| `if` | `String` | The condition for using this template.
+| `name` | `String` | The name of the template, auto-generated if omitted.
+
+# Advanced usage
+
+The rest of this document is meant for advanced users implementing their own components that require a template or multiple templates.
+
+`v-template` does not render anything when placed into the template, instead it adds a `$templates` property to the parent element or component, which is a [`TemplateBag`](https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/components/v-template.js#L36) instance, and then registers itself as an available template.
+
+### TemplateBag
+
+The `TemplateBag` class is useful for registering multiple templates, and provides a function for selecting the correct template based on the item and the conditions provided for each template.
+
+Templates are stored as objects conforming to the [`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate) interface.
+
+#### The `selectorFn` property
+
+The `selectorFn` property returns a function that accepts a single parameter which should be an item whose template should be selected. It will go through all the templates registered in the `TemplateBag` and return the first one where the `if` condition returns a truthy value, and if none of the templates match it will return `default`.
+
+#### Available Methods
+
+##### registerTemplate(name: String, condition: String?, scopedFn: Function): void
+
+ This method is used to register templates into the `TemplateBag` instance, it is mainly used internally. The `scopedFn` should be a render function of a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
+ 
+##### getConditionFn(condition: String): Function
+ 
+ This method builds a function that evaluates the given condition. This methods is used internally.
+
+##### getKeyedTemplate(name: String): [KeyedTemplate](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)
+ 
+This method returns the `KeyedTemplate` with the given name.
+
+##### patchTemplate(name: String, context: any, oldVnode: VNode?): View
+
+This method will patch an existing `VNode` using the provided `context`. If no `oldVnode` is provided, it will create a new View instance for the given template.
+
+##### getAvailable(): Array<String>
+
+Returns an array of available `KeyedTemplates` (returns an array of template names)
+
+##### getKeyedTemplates(): Array<KeyedTemplate>
+
+Returns an array of all the `KeyedTemplates` registered in the `TemplateBag`
diff --git a/content/docs/ko/utilities/v-view.md b/content/docs/ko/utilities/v-view.md
new file mode 100644
index 00000000..292f235b
--- /dev/null
+++ b/content/docs/ko/utilities/v-view.md
@@ -0,0 +1,56 @@
+---
+title: v-view directive
+contributors: [rigor789, eddyverbruggen]
+---
+
+The `v-view` directive is used to set the current elements `View` as a parent property.
+
+### Usage
+
+```html
+<Child v-view:parentPropertyName />
+<!-- same as: -->
+<Child ~parentPropertyName />
+```
+
+```html
+<Child v-view:parentArrayPropertyName.array />
+<!-- same as: -->
+<Child ~parentArrayPropertyName.array />
+```
+
+---
+
+There are many `NativeScript` components that require setting a property to a valid `View` instance, which is not possible using a template. Using this directive saves time by not having to register new directives / references to parent elements, and setting the parent properties manually.
+
+To better illustrate what this directive does, let's take a look at the `RadSideDrawer` component from the [Progress NativeScript UI](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started) package:
+
+The `RadSideDrawer` component expects the `drawerContent` and `mainContent` properties to be set to `View` instances,
+using the `v-view` directive it would look like this:
+
+```html
+<RadSideDrawer>
+  <StackLayout ~drawerContent />
+  <StackLayout ~mainContent />
+</RadSideDrawer>
+```
+
+Without this directive you would have to do something like:
+
+```html
+<RadSideDrawer ref="drawer">
+  <StackLayout ref="drawerContent" />
+  <StackLayout ref="mainContent" />
+</RadSideDrawer>
+```
+
+```javascript
+{
+  mounted() {
+    this.$refs.drawer.drawerContent = this.$refs.drawerContent.nativeView
+    this.$refs.drawer.mainContent = this.$refs.mainContent.nativeView
+  }
+}
+```
+
+Which can get tedious and is very error prone.

From 3027c7b602b2c41d5ae9a74922aa040145ba6483 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 20:40:51 +0200
Subject: [PATCH 02/14] translate to KO; remove original contributors from
 introduction

---
 content/docs/ko/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/ko/introduction.md b/content/docs/ko/introduction.md
index cbb14cb6..dcf02d6c 100644
--- a/content/docs/ko/introduction.md
+++ b/content/docs/ko/introduction.md
@@ -1,6 +1,6 @@
 ---
 title: 소개
-contributors: [rigor789, tjvantoll, qgp9]
+contributors: [qgp9]
 ---
 
 ## [네이티브스크립트](https://www.nativescript.org/)가 무엇인가요?

From 26ae18fbc6736af2e2db27942675b230ea8073a5 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 21:01:19 +0200
Subject: [PATCH 03/14] translate to KO; add index_ko.ejs

---
 content/index_ko.ejs | 58 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 content/index_ko.ejs

diff --git a/content/index_ko.ejs b/content/index_ko.ejs
new file mode 100644
index 00000000..dfa4d6ef
--- /dev/null
+++ b/content/index_ko.ejs
@@ -0,0 +1,58 @@
+---
+layout: landing.ejs
+dest: ko/index.html
+---
+
+<div class="bg-blue-light">
+    <div class="container mx-auto py-8 px-4 md:px-0">
+        <div class="flex flex-wrap">
+            <div class="w-full md:w-1/2 my-8">
+                <h1 class="text-5xl leading-tight text-white">Vue.js 와 네이티브-스크립트를 이용한 진짜 네이티브 앱</h1>
+
+                <p class="w-4/5 leading-loose text-white mt-4">
+                    새로운 언어를 배우는 번거로움 없이 꿈꾸던 앱을 만들고 싶습니까?
+
+                    NativeScript-Vue가 바로 당신을 위한 바른 선택입니다!
+                </p>
+
+                <a href="<%= meta.lang(current, null, 'docs/introduction') %>"
+                   class="px-8 py-4 inline-block bg-green text-white font-bold text-lg no-underline mt-8">
+                    시작하기
+                </a>
+            </div>
+
+            <div class="hidden md:block md:w-1/2 my-8">
+                <img class="w-auto" src="https://art.nativescript-vue.org/misc/phone.svg" alt="phone">
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="container mx-auto py-8 px-4 md:px-0">
+    <div class="flex flex-wrap -mx-3">
+        <div class="w-full md:w-1/3 px-4">
+            <h2 class="text-blue-dark">쉽게 시작하기.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                NativeScript-Vue은 npm 으로 설치할 수 있는 하나의 의존성만을 가지고 있기 때문에 쉽게 시작할 수 있습니다.
+            </p>
+        </div>
+
+        <div class="w-full md:w-1/3 mt-8 md:mt-0 px-4">
+            <h2 class="text-blue-dark">익숙한 문법.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                NativeScript-Vue 는 Vue.js 사용자라면 익숙한 문법을 사용하도록 디자인되었습니다.
+            </p>
+        </div>
+
+        <div class="w-full md:w-1/3 mt-8 md:mt-0 px-4">
+            <h2 class="text-blue-dark">빠른 워크플로우.</h2>
+
+            <p class="text-blue-dark leading-normal">
+                새로운 언어를 배울 필요가 없기 때문에, NativeScript-vue를 사용하면 빠르게 앱을 만들 수 있습니다.
+            </p>
+        </div>
+    </div>
+</div>

From e355f79ac11eb098e50d13baa82e4012ba223617 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 21:18:02 +0200
Subject: [PATCH 04/14] translate to KO; modify a language name as native

---
 build/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/index.js b/build/index.js
index 60acf740..606fdf50 100644
--- a/build/index.js
+++ b/build/index.js
@@ -38,7 +38,7 @@ Metalsmith(cwd)
     moment,
     localeMap: {
       'en': 'English',
-      'ko': 'Korean',
+      'ko': '한국어',
     },
     home(current) {
       const locale = current.locale || this.defaultLocale;

From dd2a8c60f4b701716e66edb8787336ee944fca65 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 21:55:12 +0200
Subject: [PATCH 05/14] translate to KO; quick-start

---
 .../docs/ko/getting-started/1-quick-start.md   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/content/docs/ko/getting-started/1-quick-start.md b/content/docs/ko/getting-started/1-quick-start.md
index 41122d86..1dda73ae 100644
--- a/content/docs/ko/getting-started/1-quick-start.md
+++ b/content/docs/ko/getting-started/1-quick-start.md
@@ -1,27 +1,25 @@
 ---
-title: Quick Start
-contributors: [rigor789, eddyverbruggen]
+title: 빨리 시작하기
+contributors: [qgp9]
 ---
 
-If you want to easily try NativeScript-Vue, we strongly recommend trying
-it in the [NativeScript Playground](https://play.nativescript.org?template=play-vue). It is the easiest introduction you can get into NativeScript-Vue.
+NativeScript-Vue를 쉽게 사용해보고 싶다면, [NativeScript Playground](https://play.nativescript.org?template=play-vue)를 사용해보시기를 강력하게 추천합니다. 그것이 NativeScript-Vue를 사용해 볼 수 있는 가장 쉬운 시작입니다.
 
-If you are ready to move on and work locally on your machine, and [you
-have your system ready for native development](/en/docs/getting-started/installation), you can start by using a template:
+이미 여러분의 로컬 머신에서 작업할 준비가 되었고, [네이티브 개발을 위한 시스템](/ko/docs/getting-started/installation)이 준비되었다면 템플릿을 사용하여 시작할 수 있습니다.
 
 ```shell
 $ tns create my-app --template nativescript-vue-template
 $ cd my-app
 ```
 
-and then run your app using:
+그리고나면 당신의 앱을 다음처럼 열 수 있습니다.
 
 ```shell
-$ tns run android # for android
+$ tns run android # 안드로이드의 경우
 ```
 
 ```shell
-$ tns run ios # for ios
+$ tns run ios # iOS의 경우
 ```
 
-To learn more about the available templates head over to the [templates documentation](/en/docs/getting-started/templates).
+사용가능한 템플릿의 더 자세한 정보는 [템플릿 문서](/ko/docs/getting-started/templates)를 참고하세요.

From 58c780514900c9a81cc6b75d2f0c9c00b2c808ad Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 22:04:03 +0200
Subject: [PATCH 06/14] translate to KO; installation

---
 .../docs/ko/getting-started/2-installation.md | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/content/docs/ko/getting-started/2-installation.md b/content/docs/ko/getting-started/2-installation.md
index b48ce7da..f1230dd5 100644
--- a/content/docs/ko/getting-started/2-installation.md
+++ b/content/docs/ko/getting-started/2-installation.md
@@ -1,48 +1,47 @@
 ---
-title: Installation
-contributors: [rigor789 , TheOriginalJosh, eddyverbruggen]
+title: 설치
+contributors: [qgp9]
 ---
 
-In order to use NativeScript-Vue, your system will need to be set up properly
-so that your applications can compile.
+NativeScript-Vue를 사용하기 위해서, 어플리케이션을 컴팔할 수 있도록 시스템이 적절히 설정되어야 합니다.
 
-## Prerequisites
+## 먼저 필요한 것들(Prerequisites)
 
 - [Node.js](#nodejs)
 - [NativeScript CLI](#nativescript-cli)
-- [Windows](#windows) (for developing Android applications on Windows)
-- [macOS](#macos) (for developing iOS and Android applications on macOS)
-- [Linux](#linux) (for developing Android applications on Linux)
+- [윈도우즈](#windows) (윈도우에서 안드로이드 앱을 개발할 경우)
+- [맥OS](#macos) (맥에서 안드로이드/iOS 앱을 개발할 경우)
+- [리눅스](#linux) (리눅스에서 안드로이드 앱을 개발할 경우)
 
 ### Node.js
 
-Download and install the latest "LTS" version of Node.js from [https://nodejs.org/](https://nodejs.org/). Restart your terminal and verify the installation was successful with the command `node --version`.
+최신 "LTS" 버젼의 Node.js를 [https://nodejs.org/](https://nodejs.org/)에서 다운받아 설치하세요. 설치 후 터미널을 재 시작 하고나서 `node --version` 명령어로 Node.js 가 잘 설치되어 있는지 확인하세요.
 
 ### NativeScript CLI
 
-To install the NativeScript CLI open your terminal and run the command
+네이티브-스크립트 CLI 를 설치하려면 터미널을 열고 다음 명령어를 실행합니다.
 
 ```shell
 $ npm install -g nativescript
 ```
 
-You can verify the installation was successful by running `tns` in your terminal. You should see a list of all the available commands.
+터미널에서 `tns` 명령어를 실행해 보면 잘 설치되었는지 확인할 수 있습니다. 명령어를 실행하면 가능한 명령들이 출력되어야 합니다.
 
 
-### Windows
+### 윈도우즈 (windows)
 
-System Requirements and setup instructions for the Android SDK on Windows:
+윈도우 시스템 필요조건과 안드로이드 SDK 설정 방법:
 
 [Advanced setup: Windows](https://docs.nativescript.org/start/ns-setup-win)
 
-### macOS
+### 맥OS (macOS)
 
-System Requirements and setup instructions to setup Xcode and the Android SDK development environments for your Mac:
+맥 시스템의 필요조건과 Xcode, 안드로이드 SDK 개발환경 설정 방법:
 
 [Advanced setup: macOS](https://docs.nativescript.org/start/ns-setup-os-x)
 
-### Linux
+### 리눅스 (Linux)
 
-System Requirements and setup instructions for the Android SDK on Linux:
+리눅스 시스템 필요조건과 안드로이드 SDK 설정 방법:
 
 [Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux)

From 4d3c2b2c884210526f46fa726c9130391c9311e2 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 22:33:16 +0200
Subject: [PATCH 07/14] translate to KO; getting-started

---
 .../docs/ko/getting-started/3-templates.md    | 59 ++++++++++---------
 .../getting-started/4-nativescript-plugins.md | 15 ++---
 .../docs/ko/getting-started/5-vue-plugins.md  | 28 ++++-----
 3 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/content/docs/ko/getting-started/3-templates.md b/content/docs/ko/getting-started/3-templates.md
index d3f9e06b..479d180d 100644
--- a/content/docs/ko/getting-started/3-templates.md
+++ b/content/docs/ko/getting-started/3-templates.md
@@ -1,75 +1,78 @@
 ---
-title: Templates
-contributors: [rigor789, tralves]
+title: 템플릿
+contributors: [qgp9]
 outdated: true
 ---
 
-You can use NativeScript's [template system](https://docs.nativescript.org/tooling/app-templates) to bootstrap your `nativescript-vue` app. All these templates generate a NativeScript app that uses the `nativescript-vue` plugin. Some templates are equipped with more features such as support for Vue.js Single File Components (`.vue`) and livereload.
+여러분의 `nativescript-vue` 앱을 시작하기 위해 네이티브-스크립트의 [템플릿 시스템](https://docs.nativescript.org/tooling/app-templates)을 사용할 수 있습니다. 이 템플릿들은 `nativescript-vue` 플러그인을 사용하는 네이티브-스크립트 앱을 생성합니다. 어떤 템플릿들은 Vue.js 단일 파일 컴포넌트(`.vue`) 와 라이브-리로드(livereload) 지원과 같은 추가 기능이 내장되어 있습니다.
 
 ## nativescript-vue-template
 
-#### Project link
+#### 프로젝트 링크
 
 [](https://github.com/tralves/nativescript-vue-template)
 
-#### Description
+#### 설명
 
-This one the most basic template. It contains a number of app samples that you can use as the starting point of your app. To try them, copy and paste the code from `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, or `app-with-vmodel.js` into your app’s `app.js` file.
+이 것은 가장 기본적인 템플릿입니다. 이 템플릿은 여러분의 앱의 시작점으로 사용될 수 있는 몇개의 앱 샘플을 포함하고 있습니다. 그것들을 시도해 보려면, `app-with-list-view.js`, `app-with-router.js`, `app-with-tab-view.js`, 또는 `app-with-vmodel.js` 의 코드들을 복사해서 여러분의 앱의 `app.js` 파일에 붙여 넣으면 됩니다.
 
-#### Installation
+#### 설치
 
 ```shell
 $ tns create sample-app --template nativescript-vue-template
 ```
 
-*Follow the [project link](https://github.com/tralves/nativescript-vue-template) for further instructions.*
+*더 자세한 설명은 [프로젝트 링크](https://github.com/tralves/nativescript-vue-template) 를 참조하세요.*
 
 ## nativescript-vue-rollup-template
 
-#### Project link
+#### 프로젝트 링크
 
 [](https://github.com/tralves/nativescript-vue-rollup-template)
 
-#### Description
-Originally a [fork from rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template), this template is currently the most stable and feature complete. You can see it in action in the [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) app.
-It supports:
+#### 설명
+원래의 [rigor789's](https://github.com/rigor789/nativescript-vue-rollup-template)에서 포크된 이 프로젝트는 현재 가장 안정되고 기능적으로 완벽합니다. [🍏 🍍 🍓 Groceries Vue](https://github.com/tralves/groceries-ns-vue) 에서 어떻게 사용되는지 볼 수 있습니다.
+
+이 템플릿은 다음을 지원합니다:
 
 - livereload;
-- .vue Single-File Components;
-- scss imports and scss inside `<style>` tags in .vue files;
-- root imports (imports starting with `/ `refer to the root of the app folder);
-- babel with `es2015` and `stage-2` presets;
+- .vue 단일파일 컴포넌트;
+- scss 임포트와 .vue 파일의 `<style>` 태그 내에서의 사용;
+- root imports (앱 폴더의 최상단을 의미하는 `/` 으로 시작하는 임포트);
+- 바벨 (`es2015`  `stage-2` presets);
 
-#### Installation
+#### 설치
 
 ```shell
 $ tns create sample-app --template nativescript-vue-rollup-template
 ```
 
-*Follow the [project link](https://github.com/tralves/nativescript-vue-rollup-template) for further instructions.*
+*더 자세한 정보는 [프로젝트 링크](https://github.com/tralves/nativescript-vue-rollup-template) 를 참조하세요*
 
 ## nativescript-vue-webpack-template
 
-#### Project link
+#### 프로젝트 링크
 
 [](https://github.com/tralves/nativescript-vue-webpack-template)
 
-#### Description
+#### 설명
+
+웹팩 템플릿은 rollup 과 같은 기능을 가진 웹팩(webpack)을 이용합니다.
+이 템플릿은 코드공유 즉, 웹 빌드와 네이티브(안드로이드/iOS) 빌드간에 최대한 많은 로직을 공유하는 프로젝트를 만들수 있는 기능을 지원하기 위해 발전하고 있습니다.
 
-The webpack template leverages webpack to provide the same functionality as the rollup counterpart. It is evolving to support code sharing, i.e., create projects that share as much of the logic as possible between a web build and the native (android/iOS) builds.
 
- Features:
+ 기능:
 
 - livereload;
-- .vue Single-File Components;
-- scss imports and scss inside `<style>` tags in .vue files;
-- babel with `es2015` and `stage-2` presets;
-- (soon) native/web code sharing;
+- .vue 단일파일 컴포넌트;
+- scss 임포트와 .vue 파일의 `<style>` 태그 내에서의 사용;
+- 바벨 (`es2015`  `stage-2` presets);
+- (곧) 네이티브/웹 코드공유;
 
-#### Installation
+#### 설치
 
 ```shell
 $ tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template
 ```
 
-*Follow the [project link](https://github.com/tralves/nativescript-vue-webpack-template) for further instructions.*
+*더 자세한 정보는 [프로젝트 링크](https://github.com/tralves/nativescript-vue-webpack-template) 를 참조하세요.*
diff --git a/content/docs/ko/getting-started/4-nativescript-plugins.md b/content/docs/ko/getting-started/4-nativescript-plugins.md
index bf645fe9..864c9842 100644
--- a/content/docs/ko/getting-started/4-nativescript-plugins.md
+++ b/content/docs/ko/getting-started/4-nativescript-plugins.md
@@ -1,25 +1,26 @@
 ---
-title: Using NativeScript Plugins
-contributors: [EddyVerbruggen, naderio, rigor789]
+title: 네이티브-스크립트 플러그인 사용하기
+contributors: [qgp9]
 ---
 
-Plugins work as in any other NativeScript app, but you may wonder how *UI* plugins would work with Vue.
+플러그인들은 어떤 네이티브-스크립트 앱에서도 작동하지만, 아마도 *UI* 플러그인들이 어떻게 Vue와 함께 작동하시는지 궁금할 겁니다.
 
-UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app. For instance consider this example usage of [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient) which is used in the [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js):
+UI 플러그인은 네이트브스크립트 UI 플러그인이 앵귤러앱에서 사용되던 것과 거의 똑같이 작동합니다.
+예를 들면, [listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js)에 사용되는 [nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient)가 있습니다.
 
-Install the plugin using the NativeScript CLI:
+네이티브-스크립트 CLI를 사용해서 플러그인을 설치하세요.
 
 ```shell
 $ tns plugin add nativescript-gradient
 ```
 
-Open your app entry file and add the following to the top:
+앱의 엔트리 파일을 열고 다음 내용을 제일 위에 추가합니다.:
 
 ```js
 Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)
 ```
 
-Then in your template, you can use the newly registered element:
+이제 템플릿에서 새로 등록된 요소를 사용할 수 있습니다:
 
 ```html
 <Gradient direction="to right" colors="#FF0077, red, #FF00FF">
diff --git a/content/docs/ko/getting-started/5-vue-plugins.md b/content/docs/ko/getting-started/5-vue-plugins.md
index 087935d8..dceff656 100644
--- a/content/docs/ko/getting-started/5-vue-plugins.md
+++ b/content/docs/ko/getting-started/5-vue-plugins.md
@@ -1,6 +1,6 @@
 ---
-title: Using Vue Plugins
-contributors: [jlooper]
+title: Vue 플러그인 사용하기
+contributors: [qgp9]
 ---
 
 ## vue-router
@@ -9,31 +9,31 @@ Coming soon...
 
 ## Vuex
 
-Vuex is Vue.js's state management pattern and library. It serves as a store for all the components in an application and implements rules to ensure that state is mutated in a predictable fashion. Vuex can be used in NativeScript apps; for an example, see the [NativeScript Groceries Vue sample](https://github.com/tralves/groceries-ns-vue). 
+Vuex 는 Vue.js의 상태 관리 패턴이자 라이브러리입니다. Vuex 는 어플리케이션 내의 모든 컴포넌트를 위한 저장소로 사용되고 상태들이 예측 가능한 방법으로 변화되도록 확신할 수 있는 룰을 제공합니다. Vuex는 네이티브-스크립트 앱에서도 사용될수 있습니다; 그 예로 [NativeScript Groceries Vue sample](https://github.com/tralves/groceries-ns-vue)를 확인하세요.
 
-### Install
+### 설치
 
-Install Vuex as you would normally in your Vue.js app. With npm, for example:
+Vue.js 앱에 설치했던 것과 같은 방법으로 Vuex를 설치합니다. npm 의 경우는 다음과 같습니다:
 
 ```shell
 $ npm install vuex --save
 ```
 
-The most recent version of Vuex will be added to your package.json file.
+최신 버젼의 Vuex가 당신의 package.json 파일에 추가될 것입니다.
 
-### Import
+### 임포트 (Import)
 
-In your app's `main.js` file, import Vuex at the top:
+앱의 `main.js`파일의 제일 위에서 Vuex를 임포트합니다:
 
 ```js
 import Vuex from 'vuex'
 Vue.use(Vuex)
 ```
-Now you can use Vuex in the app similar to how you would use it in a standard Vue app for the web to manage your app's state.
+이제 일반적인 웹을 위한 Vue 앱에서 앱의 상태를 관리하던 것 처럼 Vuex를 사용할 수 있습니다.
 
-### Create a Store
+### 저장소 만들기
 
-Above your creation of a new Vue instance, or in a separate folder (for example `/store` in your app folder), create a new constant to store your state. This is where you will invoke Vuex API calls. A simple store constant would include the state of a counter whose state you control throughout your app by means of tracking its mutations:
+새로운 Vue 인스턴스 생성 위쪽에 혹은 별도의 폴더에 (예를 들어 앱 폴더 안의 `/store`) 상태를 저장하기 위한 새로운 const 변수를 만드세요. 이 것이 Vuex API를 호출하기 위한 장소입니다. 간단한 저장소 constant는 카운터의 상태를 포함합니다. 당신은 앱 전체에서 이 카운터의 상태의 변화를 추적할 수 있습니다:
 
 ```js
 const store = new Vuex.Store({
@@ -47,9 +47,9 @@ const store = new Vuex.Store({
 })
 ```
 
-### Use the Store
+### 저장소 사용하기
 
-Now you can manage state by calling the store you just created. In the example below, the app tracks the count value as you press a '+' or '-' button. Note that you don't manipulate the state itself, but rather call mutations to increment and decrement its value.
+이제 방금 생성한 저장소를 호출하여 상태를 관리할 수 있습니다. 아래의 예에서 앱은 당신이 '+'나 '-' 버튼을 누를 때 카운터의 상태를 추적합니다. 상태 자체를 조작하는 것이 아니라 값의 증가나 감소를 위한 mutation 을 호출한다는 점을 기억하세요..
 
 ```js
 new Vue({
@@ -82,4 +82,4 @@ new Vue({
 }).$start()
 ```
 
-More information about Vuex and how to manage state can be found in [the Vuex documentation](https://vuex.vuejs.org/en/core-concepts.html). A good architecture to manage the various elements of Vuex can be found in the Groceries app in the [`/store` folder](https://github.com/tralves/groceries-ns-vue/tree/master/app/store).
+Vuex에 대한 더 자세한 정보와 상태 관리 방법은 [Vuex 문서](https://vuex.vuejs.org/en/core-concepts.html)를 참조하세요. Vuex 다양한 요소를 관리하는 좋은 아키텍쳐는 Groceries 앱의 [`/store` 폴더](https://github.com/tralves/groceries-ns-vue/tree/master/app/store)의 에서 볼 수 있습니다.

From 674c33f277c34642ad6c3a5f3078b298fe8cf986 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 22:46:59 +0200
Subject: [PATCH 08/14] translate to KO; routing

---
 content/docs/ko/routing/manual-routing.md | 26 +++++++-------
 content/docs/ko/routing/vue-router.md     | 44 +++++++++++------------
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/content/docs/ko/routing/manual-routing.md b/content/docs/ko/routing/manual-routing.md
index 39f05f75..a2179025 100644
--- a/content/docs/ko/routing/manual-routing.md
+++ b/content/docs/ko/routing/manual-routing.md
@@ -1,17 +1,15 @@
 ---
-title: Manual Routing
-contributors: [eddyverbruggen]
+title: 수동 라우팅
+contributors: [qgp9]
 ---
 
-The easiest way to do routing in NativeScript-Vue is using the convenience functions
-`$navigateTo`, `$navigateBack`, and `$showModal`.
+NativeScript-Vue 에서 라우팅을 하는 가장 쉬운 방법은 `$navigateTo`, `$navigateBack`, `$showModal` 과 같은 편리한 함수를 사용하는 것입니다.
 
 ### `$navigateTo`
-Suppose you have components `Master` and `Detail` and want to navigate from `Master` to `Detail`,
-then you have two ways to call `$navigateTo`: in the view, or in a method:
+`Master` 와 `Detail` 이라는 컴포넌트들이 있다고 가정하고, `Master` 에서 `Detail` 로 이동하기를 원할때 `$navigateTo` 를 호출하기 위한 두가지 방법이 있습니다: 뷰(view)에서 혹은 메소드에서:
 
-#### In the view
-Expose the `Detail` component through a `data` property in the `Master` component and invoke `$navigateTo(<propertyName>)` in the view directly. 
+#### 뷰(view) 에서
+`Master` 컴포넌트의 `data` 프로퍼티를 통해 `Detail` 컴포넌트를 노출시키고 view 에서 바로 `$navigateTo(<프로퍼티 이름>)` 을 호출합니다.
 
 ```vue
 const Vue = require('nativescript-vue');
@@ -46,8 +44,8 @@ new Vue({
 }).$start()
 ```
 
-#### In a method
-Bind a button to a method and use `this.$navigateTo(Detail)` to navigate to the `Detail` component in that method,
+#### 메소드에서
+버튼을 메소드에 연결하고 이 메소드에서 `this.$navigateTo(Detail)` 을 사용하여 `Detail` 컴포넌트로 이동합니다.
 
 ```vue
 const Master = {
@@ -77,7 +75,7 @@ const Detail = {
 ```
 
 ### `$navigateBack`
-Add a button to the `Detail` component, which simply triggers the globally exposed `$navigateBack` function.
+`Detail` 에 전역적으로 노출된 `$navigateBack` 함수를 호출하는 버튼을 추가합니다.
 
 ```vue
 const Detail = {
@@ -93,10 +91,10 @@ const Detail = {
 ```
 
 ### `$showModal`
-If you want to show the `Detail` page modally, simply replace `$navigateTo` by `$showModal`.
-As before, you can call this method either from the view or a function.
+`Detail` 페이지를 모달 페이지로 보여주고 싶다면, 간단히 `$navigateTo` 를 `$showModal`로 바꾸면 됩니다.
+앞에서 처럼 이 메소드는 view 나 함수에서 호출
 
-To close the modal, call `$modal.close`.
+모달을 닫으려면 `$modal.close` 을 호출하면 됩니다.
 
 ```vue
 const Master = {
diff --git a/content/docs/ko/routing/vue-router.md b/content/docs/ko/routing/vue-router.md
index dc4fb488..bf73a410 100644
--- a/content/docs/ko/routing/vue-router.md
+++ b/content/docs/ko/routing/vue-router.md
@@ -1,24 +1,22 @@
 ---
 title: Vue Router
-contributors: [eddyverbruggen]
+contributors: [qgp9]
 ---
 
-If [Manual Routing](/en/docs/routing/manual-routing) doesn't cut it for your use-case,
-then you'll be happy to learn [the Vue router](https://router.vuejs.org/en/) is fully supported.
+[수동 라우팅](/ko/docs/routing/manual-routing) 이 당신의 유스-케이스와 잘 맞지 않는다면, 완전히 지원되는 [Vue Router](https://router.vuejs.org/ko) 를 배워보세요.
 
-## Installation
-From a command prompt, run:
+## 설치
+명령줄에서 다음을 실행합니다:
 ```bash
 npm i vue-router --save
 ```
 
-## Usage
-Let's show a full example, broken down in a few pieces so we can provide some comments.
-Note that the Vue Router has more tricks up its sleeve, so be sure to visit
-[the official documentation](https://router.vuejs.org/en/).
+## 사용법
+전체 예제를 설명과 함께 잘라서 봅시다.
+Vue Router에는 더 다양한 트릭들이 있기 때문에 [공식문서](https://router.vuejs.org/ko/)를 꼭 방문해 보세요.
 
 ---
-Require Vue, VueRouter, and let them shake hands 🤝
+Vue, VueRouter 를 require 하고, 서로 악수하게 합니다 🤝
 ```js
 const Vue = require('nativescript-vue');
 const VueRouter = require('vue-router');
@@ -27,10 +25,10 @@ Vue.use(VueRouter);
 ```
 
 ---
-Define a `Master` page with the current router as its title (`$route.path`)
-and a button with a `@tap="$router.push('/detail')"` so a new page is pushed on the stack and navigated to.
+현재 라우터를 제목(`$route.path`)으로 `Master` 페이지를 정의합니다.
+그리고 `@tap="$router.push('/detail')"` 과 함께 버튼을  만들어서 새 페이지가 스택에 추가되고 그 페이지로 이동할 수 있게 합니다.
 
-Also, a button to the same page with a query param `user`.
+또한 `user` 쿼리 파라미터(query param)와 함께 같은 페이지로 향하는 버튼도 만듭니다.
 ```html
 const Master = {
   template: `
@@ -46,14 +44,16 @@ const Master = {
 ```
 
 ---
-Define a `Detail` page with a `NavigationButton`. On iOS this will automatically bring you back to the
-previous page in the stack, but for Android `tap` handler is required (which is ignored on iOS).
-So add `@tap="$router.back()"`.
+`Detail` 페이지를 `NavigationButton` 과 함께 정의합니다.
+iOS 에서 이 것은 자동으로 스택의 전페이지로 이동하게 만듭니다.
+하지만 안드로이드에선 `tap` 핸들러가 필요합니다.(iOS에서는 무시됩니다.)
+따라서  `@tap="$router.back()"` 를 추가합니다.
 
-Remember that `user` query param we passed from the second button of the `Master` page? You can use it in the `Details`
-page like this: `<Label :text="$route.query.user">`
+`Master` 페이지의 두번째 버튼에서 `user` query param을 썼던걸 기억하시나요?
+`Details` 페이지에서 다음처럼 그것을 참조할 수 있습니다:
+`<Label :text="$route.query.user">`
 
-Lastly, you can navigate back (and forth) with `$router.go(<number-of-pages>)` as demonstrated below.
+마지막으로, 아래 예제처럼 `$router.go(<number-of-pages>)` 이용해 뒤로 (혹은 앞으로) 이동할 수 있습니다.
 
 ```html
 const Detail = {
@@ -72,7 +72,7 @@ const Detail = {
 ```
 
 ---
-Define all the pages of your application as follows:
+아래처럼 어플리케이션의 모든 페이지를 정의합니다.
 ```js
 const router = new VueRouter({
   pageRouting: true,
@@ -85,13 +85,13 @@ const router = new VueRouter({
 ```
 
 ---
-And load one of those routes when the app starts:
+그리고 앱이 시작할때 라우트들 중 하나를 로드합니다:
 ```js
 router.replace('/master');
 ```
 
 ---
-Oh, and don't forget to tell `Vue` about your routes:
+오, 그리고 `Vue` 에가 당신의 라우트들에 대해 알려주는 걸 잊지 마세요:
 ```js
 new Vue({
   router

From 167f444a2b14df010b5989ee0c7339f7b5726516 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Tue, 27 Feb 2018 22:55:50 +0200
Subject: [PATCH 09/14] translate to KO; partial of utilities

---
 content/docs/ko/utilities/v-template.md | 34 ++++++++++++-------------
 content/docs/ko/utilities/v-view.md     | 21 +++++++--------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/content/docs/ko/utilities/v-template.md b/content/docs/ko/utilities/v-template.md
index 88861734..b037c239 100644
--- a/content/docs/ko/utilities/v-template.md
+++ b/content/docs/ko/utilities/v-template.md
@@ -1,47 +1,47 @@
 ---
-title: v-template component
-contributors: [rigor789]
+title: v-template 컴포넌트
+contributors: [qgp9]
 ---
 
-The `v-template` component is used for defining markup that can be reused as a template.
+`v-template` 컴포넌트는 템플릿으로 재사용될 수 있는 마크업을 정의하는데 사용됩니다.
 
-It is utilized internally by the [ListView Component](/en/docs/elements/components/list-view).
+이 것은 [ListView 컴포넌트](/ko/docs/elements/components/list-view) 에 의해 내부적으로 활용됩니다.
 
 ## Props
 
-| name | type | description |
+|이름   | 타입  | 설명 |
 |------|------|-------------|
-| `if` | `String` | The condition for using this template.
-| `name` | `String` | The name of the template, auto-generated if omitted.
+| `if` | `String` | 이 템플릿이 사용되는 컨디션(condition)
+| `name` | `String` | 템플릿 이름. 생략되면 자동 생성됨.
 
-# Advanced usage
+# 고급 사용법 (Advanced usage)
 
-The rest of this document is meant for advanced users implementing their own components that require a template or multiple templates.
+이 문서의 나머지 부분은 하나 혹은 복수의 템플릿을 필요로 하는 자신의 컴포넌트를 만들기를 원하는 고금사용자를 위한 내용입니다.
 
-`v-template` does not render anything when placed into the template, instead it adds a `$templates` property to the parent element or component, which is a [`TemplateBag`](https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/components/v-template.js#L36) instance, and then registers itself as an available template.
+`v-template` 는 템플릿 안에 위치할때 아무것도 렌더링하지 않습니다. 대신 [`TemplateBag`](https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/components/v-template.js#L36) 인스턴스인 `$templates` 프로퍼티를 부모 요소나 컴포넌트에 추가하고 자신을 사용가능한 템플릿으로 등록합니다.
 
 ### TemplateBag
 
-The `TemplateBag` class is useful for registering multiple templates, and provides a function for selecting the correct template based on the item and the conditions provided for each template.
+`TemplateBag` 클래스는 여러 템플릿을 등록할때 유용하며 아이템과 각 템플릿에 제공되는 조건들에 기초하여 올바른 템플릿을 선택하기 위한 함수를 제공합니다.
 
-Templates are stored as objects conforming to the [`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate) interface.
+템플릿들은 [`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate) 인터페이스를 따르는 객체로 저장됩니다.
 
-#### The `selectorFn` property
+#### `selectorFn` 프로퍼티
 
 The `selectorFn` property returns a function that accepts a single parameter which should be an item whose template should be selected. It will go through all the templates registered in the `TemplateBag` and return the first one where the `if` condition returns a truthy value, and if none of the templates match it will return `default`.
 
-#### Available Methods
+#### 가능한 메소드
 
 ##### registerTemplate(name: String, condition: String?, scopedFn: Function): void
 
  This method is used to register templates into the `TemplateBag` instance, it is mainly used internally. The `scopedFn` should be a render function of a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
- 
+
 ##### getConditionFn(condition: String): Function
- 
+
  This method builds a function that evaluates the given condition. This methods is used internally.
 
 ##### getKeyedTemplate(name: String): [KeyedTemplate](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)
- 
+
 This method returns the `KeyedTemplate` with the given name.
 
 ##### patchTemplate(name: String, context: any, oldVnode: VNode?): View
diff --git a/content/docs/ko/utilities/v-view.md b/content/docs/ko/utilities/v-view.md
index 292f235b..df149fa8 100644
--- a/content/docs/ko/utilities/v-view.md
+++ b/content/docs/ko/utilities/v-view.md
@@ -1,11 +1,11 @@
 ---
-title: v-view directive
-contributors: [rigor789, eddyverbruggen]
+title: v-view 디렉티브
+contributors: [qgp9]
 ---
 
-The `v-view` directive is used to set the current elements `View` as a parent property.
+`v-view` 디렉티브는 현재 요소 `View` 를 부모 프로퍼티로 지정하는데 사용됩니다.
 
-### Usage
+### 사용법
 
 ```html
 <Child v-view:parentPropertyName />
@@ -21,12 +21,13 @@ The `v-view` directive is used to set the current elements `View` as a parent pr
 
 ---
 
-There are many `NativeScript` components that require setting a property to a valid `View` instance, which is not possible using a template. Using this directive saves time by not having to register new directives / references to parent elements, and setting the parent properties manually.
+많은 `NativeScript` 컴포넌트들은 유효한 `View` 인스턴스를 프로퍼티로 설정해야합니다. 이는 템플릿으로는 불가능 합니다.
+이 디렉티브를 사용하면 부모 요소에 대한 새로운 디렉티브나 참조를 추가할 필요가 없이 부모 프로퍼티를 수동으로 설정하여 시간을 절약할 수 있습니다.
 
-To better illustrate what this directive does, let's take a look at the `RadSideDrawer` component from the [Progress NativeScript UI](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started) package:
+이 디렉티브의 작동방식에 대한 더 이해하기 위해  [Progress NativeScript UI](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started) 패키지의 `RadSideDraw` 컴포넌트를 살펴봅시다.
 
-The `RadSideDrawer` component expects the `drawerContent` and `mainContent` properties to be set to `View` instances,
-using the `v-view` directive it would look like this:
+`RadSideDrawer` 컴포넌트는 `drawContent` 와 `mainContent` 프로퍼티들이 `View` 인스턴스로 설정될 것이라고 예상합니다.
+`v-view` 디렉티브를 사용하면 다음과 같습니다.
 
 ```html
 <RadSideDrawer>
@@ -35,7 +36,7 @@ using the `v-view` directive it would look like this:
 </RadSideDrawer>
 ```
 
-Without this directive you would have to do something like:
+`v-view` 디렉티브를 사용하지 않으면 다음 처럼 해야 합니다.
 
 ```html
 <RadSideDrawer ref="drawer">
@@ -53,4 +54,4 @@ Without this directive you would have to do something like:
 }
 ```
 
-Which can get tedious and is very error prone.
+이는 지루하기도 하고 쉽게 실수로 에러를 만들기도 합니다.

From a73741d6ef6a3141d93a927772b85c3f4e4c99c3 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Wed, 28 Feb 2018 09:08:14 +0200
Subject: [PATCH 10/14] translate to KO; layout

---
 .../ko/elements/layouts/absolute-layout.md    | 26 +++++-----
 .../docs/ko/elements/layouts/dock-layout.md   | 29 ++++++-----
 .../ko/elements/layouts/flexbox-layout.md     | 51 +++++++++----------
 .../docs/ko/elements/layouts/grid-layout.md   | 45 ++++++++--------
 .../docs/ko/elements/layouts/stack-layout.md  | 25 +++++----
 .../docs/ko/elements/layouts/wrap-layout.md   | 24 ++++-----
 6 files changed, 101 insertions(+), 99 deletions(-)

diff --git a/content/docs/ko/elements/layouts/absolute-layout.md b/content/docs/ko/elements/layouts/absolute-layout.md
index 941998f2..33b5b738 100644
--- a/content/docs/ko/elements/layouts/absolute-layout.md
+++ b/content/docs/ko/elements/layouts/absolute-layout.md
@@ -1,14 +1,15 @@
 ---
-title: AbsoluteLayout
+title: 고정 (AbsoluteLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-The AbsoluteLayout container is the simplest layout container in NativeScript. It uses absolute top-left coordinates to position its children. The AbsoluteLayout will not enforce any layout constraints on its children and will not resize them at runtime when its size changes.
+AbsoluteLayout 컨테이너는 네이티브-스크립트에서 가장 간단한 레이아웃 컨테이너입니다. 이 컨테이너는 자식들의 위치로 절대 top-left 좌표를 사용합니다.
+AbsoluteLayout은 자식들의 레이아웃을 제안하지 않고 런타임에 자신의 크기가 변경될때 자식들의 크기를 변경하지 않습니다.
 
-### Samples
+### 예제
 
-#### A grid-like layout
+#### 그리드 같은(grid-like) 레이아웃
 
 ```html
 <AbsoluteLayout backgroundColor="#3c495e">
@@ -20,7 +21,7 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_grid.svg" />
 
-#### Overlapping elements
+#### 요소 겹침 (Overlapping elements)
 
 ```html
 <AbsoluteLayout backgroundColor="#3c495e">
@@ -33,14 +34,13 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I
 
 ## Props
 
-AbsoluteLayout has no props.
+AbsoluteLayout은 prop이 없습니다.
 
-## Additional Children Props
+## 추가적인 자식들의 Props (Additional Children Props)
 
-When an element is a direct child of the AbsoluteLayout, the following
-props get a meaning:
+요소가 AbsoluteLayout의 바로 아래 자식일때, 다음 prop들을 사용할 수 있습니다:
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `top` | `Number` | A value representing the distance from the top of the parent AbsoluteLayout
-| `left` | `Number` | A value representing the distance from the left of the parent AbsoluteLayout
+| `top` | `Number` | 부모 AbsoluteLayout의 top으로 부터 거리
+| `left` | `Number` | 부모 AbsoluteLayout의 left로 부터 거리
diff --git a/content/docs/ko/elements/layouts/dock-layout.md b/content/docs/ko/elements/layouts/dock-layout.md
index 07f6c943..540b76b0 100644
--- a/content/docs/ko/elements/layouts/dock-layout.md
+++ b/content/docs/ko/elements/layouts/dock-layout.md
@@ -1,14 +1,16 @@
 ---
-title: DockLayout
+title: 독 (DockLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-DockLayout is a layout that provides a docking mechanism for child elements to the `left`, `right`, `top`, `bottom` or center of the layout. To define the docking side of a child element, use its `dock` property. To dock a child element to the center of the DockLayout, it must be the **last child** of the DockLayout and the `stretchLastChild` property of the DockLayout must be set to `true`.
+DockLayout는 도킹 메커니즘을 제공하는 레이아웃입니다. 자식 요소들은 레이아웃의 `left`, `right`, `top`, `bottom` 혹은 center 에 도킹될 수 있습니다. 자식 요소의 도킹 방향을 정의하려면 `dock` 프로퍼티를 사용합니다.
+자식 요소를 DockLayout의 중간(center)에 위치시킬때, 자식요소는 반드시 DockLayout의 **마지막 자식** 이어야 하고
+DockLayout의 `stretchLastChild` 프로퍼티가 반드시 `true` 여야 합니다.
 
-### Samples
+### 샘플
 
-#### Dock to every side without stretching last child
+#### 마지막 자식을 늘리지(stretch)않고 모든 방향으로 도킹
 
 ```html
 <DockLayout stretchLastChild="false" backgroundColor="#3c495e">
@@ -20,7 +22,7 @@ DockLayout is a layout that provides a docking mechanism for child elements to t
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_no_stretch.svg" />
 
-#### Dock to every side with stretching last child
+#### 마지막 자식을 늘리면서(stretch) 모든 방향으로 도킹
 
 ```html
 <DockLayout stretchLastChild="true" backgroundColor="#3c495e">
@@ -32,7 +34,7 @@ DockLayout is a layout that provides a docking mechanism for child elements to t
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_stretch.svg" />
 
-#### Multiple children on the same side
+#### 한 방향의 여러 자식들
 
 ```html
 <DockLayout stretchLastChild="true" backgroundColor="#3c495e">
@@ -46,15 +48,14 @@ DockLayout is a layout that provides a docking mechanism for child elements to t
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`stretchLastChild` | `Boolean` | Enables/Disables stretching the last child to fit the remaining space.
+`stretchLastChild` | `Boolean` | 마지막 자식을 남은 공간에 맞추는 늘이기(stretching)의 활성/비활성화
 
-## Additional Children Props
+## 추가적인 자식 Props
 
-When an element is a direct child of the DockLayout, the following
-props get a meaning:
+요소가 DockLayout의 직접적인 자식일때 다음 Prop들이 가능:
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`dock` | `String` | Specifies which side to dock the element to. Values can be: `top`, `right`, `bottom`, `left`
+`dock` | `String` | 요소의 도킹 방향을 지정. 가능한 값: `top`, `right`, `bottom`, `left`
diff --git a/content/docs/ko/elements/layouts/flexbox-layout.md b/content/docs/ko/elements/layouts/flexbox-layout.md
index 24b7e249..6be50e7a 100644
--- a/content/docs/ko/elements/layouts/flexbox-layout.md
+++ b/content/docs/ko/elements/layouts/flexbox-layout.md
@@ -1,14 +1,14 @@
 ---
-title: FlexboxLayout
+title: 플렉스박스 (FlexboxLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-The FlexboxLayout container is a non-exact implementation of the [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+FlexboxLayout 컨테이너는 [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)의 유사 구현입니다.
 
-### Samples
+### 샘플
 
-#### Default flex layout
+#### 기본 플렉스 레이아웃
 
 ```html
 <FlexboxLayout backgroundColor="#3c495e">
@@ -19,7 +19,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_stretch.svg" />
 
-#### Column flex layout
+#### 컬럼 플렉스 레이아웃
 
 ```html
 <FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
@@ -30,7 +30,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_stretch.svg" />
 
-#### Row layout with items aligned to flex-start
+#### 행 레이아웃과 flex-start 로 아이템 정렬(align)
 
 ```html
 <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
@@ -41,7 +41,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_flex-start.svg" />
 
-#### Row layout with custom order
+#### 행 레이아웃과 사용자 순서
 
 ```html
 <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
@@ -52,7 +52,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_custom_order.svg" />
 
-#### Wrapping
+#### 랩핑 (Wrapping)
 
 ```html
 <FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
@@ -64,7 +64,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_wrap.svg" />
 
-#### Reverse column, with different alignSelf
+#### 리버스 컬럼과 여러가지 alignSelf
 
 ```html
 <FlexboxLayout flexDirection="column-reverse"
@@ -79,23 +79,22 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
 
 ## Props
 
-| name | type | description |
-|------|------|-------------|
-`flexDirection` | `String` | The direction in which flex items are placed in the flex container. The `flexDirection` property accepts 4 different values: `row` (same as text direction), `row-reverse` (opposite to text direction), `column` (same as row but top to bottom), and `column-reverse` (same as row-reverse top to bottom). The default value is `row`.
-`flexWrap` | `String` | Sets whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. The `flexWrap` property accepts 3 different values: `nowrap` (single-line which may cause the container to overflow), `wrap` (multi-lines, direction is defined by flexDirection), and `wrap-reverse` (multi-lines, opposite to direction defined by flexDirection). The default value is `nowrap`.
-`justifyContent` | `String` |  Sets the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. The justifyContent property accepts 5 different values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward to end line), `center` (items are centered along the line), `space-between` (items are evenly distributed in the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed in the line with equal space around them). The default value is `flex-start`.
-`alignItems` | `String` | Sets how flex items are laid out along the cross axis on the current line. You can think of it as the `justifyContent` version for the cross-axis (perpendicular to the main-axis). The `alignItems` property accepts 5 different values: `flex-start` (cross-start margin edge of the items is placed on the cross-start line), `flex-end` (cross-end margin edge of the items is placed on the cross-end line), `center` (items are centered in the cross-axis), `baseline` (items are aligned such as their baselines align), `stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is `stretch`.
-`alignContent` | `String` | Sets how flex items are aligned in the flex container on the cross-axis, similar to how `justifyContent` aligns individual items within the main-axis. The `alignContent` property accepts 6 different values: `flex-start` (lines packed to the start of the container), `flex-end` (lines packed to the end of the container), `center` (lines packed to the center of the container), `space-between` (lines evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines evenly distributed with equal space between them), and `stretch` (lines stretch to take up the remaining space). The default value is `stretch`. This property has no effect when the flex container has only a single line.
+| 이름 | 타입 | 설명 |
+|-----|-----|-----|
+`flexDirection` | `String` | flex 컨테이너 안에서 flex 아이템들이 위치하는 방향. 다음 4가지 값이 가능: `row` (텍스트 방향과 같음), `row-reverse` (텍스트 방향과 반대), `column` (row와 같지만 위에서 아래), and `column-reverse` (row-reverse와 같지만 위에서 아래). 기본값은 `row`.
+`flexWrap` | `String` | flex 아이템이 한 줄로 강제될지 여러 줄이 가능할지 설정. 여러 줄로 설정되면, 새로운 줄이 쌓이는 방향을 결정하는 교차축(cross-axis)도 정의됨. 3가지 다른 값이 가능:  `nowrap` (한줄. 컨텐츠는 오버플로우 될 수 있음), `wrap` (여러줄. 방향은 flexDirection), `wrap-reverse` (여러 줄. flexDirection 반대방향). 기본값은  `nowrap`.
+`justifyContent` | `String` |  메인 축을 따라 정렬. 줄 위의 모든 플렉스 아이템들이 융통성이 없을때 혹은 융통성은 있지만 최대 크기에 도달했을때, 남은 공간을 분배하는데 유용합니다. 또한 아이템들이 줄을 넘어갈 때(overflow), 아이템들의 정렬을 제어합니다. 가능한 5가지 값: `flex-start` (아이템들이 줄의 시작쪽으로 뭉쳐짐(pack)), `flex-end` (아이템들이 줄의 끝쪽으로 뭉쳐짐), `center` (아이템들이 줄의 중간에 위치), `space-between` (아이템들이 줄위에 균등하게 배치됨; 첫번째 아이템의 줄의 시작 부분에, 마지막 아이템의 줄의 끝에 배치), `space-around` (아이템들이 그들ㅇ르 둘러싸는 일정한 공간을 가지며 중위에 균등하게 배치됨.). 기본값은 `flex-start`.
+`alignItems` | `String` | 플렉스 항목들이 교차축(cross axis)을 따라 배치되는 방법을 설정. `justifyContent` 의 교차축(주축의 수직) 버젼으로 생각할 수 있습니다. 5가지 가능한 값: `flex-start` (아이템의 교차-시작 여백(margin) 가장자리가 줄의 교차-시작에 위치), `flex-end` (교차-끝 여백 가장자리가 줄의 교차-끝 부분에 놓임), `center` (아이템들이 교차축의 중앙에 위치), `baseline` (기준선 정렬(baseline align) 처럼 정렬됨), `stretch` (아이템들을 늘려서 컨테이너를 채움. 하지만 `min-width`/`max-width` 는 유지됨). 기본 값은 `stretch`.
+`alignContent` | `String` | `justifyContent` 가 주축 내의 각 아이템들을 배치하는 것 처럼, `alignContent`sms 교차축 상에서 아이템들을 배치. 가능한 6가지 값: `flex-start` (라인들이 컨테이너의 시작부분으로 뭉쳐짐), `flex-end` (라인들이 컨테이너의 끝 부분으로 뭉쳐짐), `center` (라인들이 컨테이너의 중앙으로 뭉쳐짐), `space-between` (라인들이 균등하게 배포치됨. 첫번째 라인은 컨테이너의 시작 부분에, 마지막 라인은 컨테이너의 끝 부분에 배치.), `space-around` (라인들이 일정한 간격으로 균등하게 배치됨), `stretch` (라인들이 남은 공간을 채우도록 늘려짐). 기본값은 `stretch`. 이 프로퍼티는 플렉스 컨테이너가 하나의 라인만 가지고 있을때는 아무런 효과가 없음.
 
-## Additional Children Props
+## 추가적인 자식 Props
 
-When an element is a direct child of the FlexboxLayout, the following
-props get a meaning:
+요소가 FlexboxLayout의 직접적인 자식일때 다음 prop들이 가능합니다:
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`order` | `Number` | Changes the default ordering of the flex items
-`flexGrow` | `Number` | Unitless value that serves as a proportion indicating whether the flex item is able to grow if necessary. It dictates what amount of the available space inside the flex container the item should take up.
-`flexShrink` | `Number` | A value indicating the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there is not enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
-`alignSelf` | `String` | A value that overrides the `alignItems` value for specific flex items. This property accepts the same 5 values as `alignItems`: `flex-start` (cross-start margin edge of the item is placed on the cross-start line), `flex-end` (cross-end margin edge of the item is placed on the cross-end line), `center` (item is centered in the cross-axis), `baseline` (items are aligned such as their baselines are aligned), and `stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is `stretch`.
-`flexWrapBefore` | `Boolean` | A boolean value controlling item wrapping. Setting it to `true` will force the item to wrap onto a new line. The default value is `false`. (This property is not part of the official flexbox specification.)
+`order` | `Number` | 플렉스 아이템의 기본 순서를 변경
+`flexGrow` | `Number` | 플렉스 아이템이 필요한 경우 커질수 (grow) 있는지 나타내는 단위 없는 비율. 이 값은 아이템이 차지해야 하는 플렉스 컨테이너의 사용가능한 공간의 크기를 결정.
+`flexShrink` | `Number` | "flex shrink factor" 값. 행(row)에 충분한 공간이 없을때 플렉스 아이템이 다른 플렉스아이템들에대해 상대적으로 얼마나 줄어들어야햐는지 결정. 생략될 경우, 1이 설정되고 음수 공간을 분배할땐 flex basis 가 곱해집니다.
+`alignSelf` | `String` | `alignItems`를 오버라이드. `alignItems` 처럼 5가지 값이 가능:`flex-start` (아이템의 교차-시작 여백(margin) 가장자리가 줄의 교차-시작에 위치), `flex-end` (교차-끝 여백 가장자리가 줄의 교차-끝 부분에 놓임), `center` (아이템들이 교차축의 중앙에 위치), `baseline` (기준선 정렬(baseline align) 처럼 정렬됨), `stretch` (아이템들을 늘려서 컨테이너를 채움. 하지만 `min-width`/`max-width` 는 유지됨). 기본 값은 `stretch`.
+`flexWrapBefore` | `Boolean` | 아이템 래핑을 제어하는 부울값. `true` 로 설정되면 아이템의 새로운 라인으로 래핑 되도록 강제. 기본값은 `false`. (이 프로퍼티는 공식 flexbox 스펙에는 없습니다.)
diff --git a/content/docs/ko/elements/layouts/grid-layout.md b/content/docs/ko/elements/layouts/grid-layout.md
index 8b932e8e..414bb327 100644
--- a/content/docs/ko/elements/layouts/grid-layout.md
+++ b/content/docs/ko/elements/layouts/grid-layout.md
@@ -1,18 +1,22 @@
 ---
-title: GridLayout
+title: 그리드 (GridLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements, they can span over multiple rows and columns, and even overlap each other. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the `columns` property and row definition items (separated by commas) to the `rows` property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of pixels, as a percentage of the available space or automatically:
+GridLayout은 자식 요소들을 행과 열의 테이블 구조로 배치합니다.
+하나의 셀(cell)은 여러 자식 요소를 가질 수 있고, 여러 행/열로 확장(span)되거나 겹쳐질(overlap) 수 있습니다.
+GridLayout은 기본값으로 하나의 행과 하나의 열을 가지고 있습니다.
+행/열을 추가하려면,  열의 정의를(쉼표로 분리) `columns` 프로퍼티에, 행의 정의를(쉼표로 분리) `rows` 프로퍼티에 명시해야 합니다.
+열의 너비와 행의 높이는  픽셀의 절대량, 사용 가능한 공간의 퍼센티지, 혹은 자동으로 지정할 수 있습니다.:
 
-- **Absolute**: Fixed size of pixels.
-- **Star (*)**: Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So `3/7` means the same as `30/70`.
-- **Auto**: Takes as much space as needed by the contained child element(s).
+- **Absolute**: 고정된 픽셀 크기.
+- **Star (*)**: 가능한 최대 값(모든 auto 와, 고정 크기 열이 채워진 후), 모든 star-sized 열 크기에 비례하여 나누어짐. 따라서 `3/7` 은 `30/70` 과 같음.
+- **Auto**: 포함된 자식 요소들에 필요한 최대한의 공간을 차지.
 
-### Samples
+### 예제
 
-#### A complex grid layout
+#### 복잡한 그리드 레이아웃
 
 ```html
 <GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
@@ -27,7 +31,7 @@ The GridLayout is a layout that arranges its child elements in a table structure
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout.svg" />
 
-#### Grid layout with star sizing
+#### 그리드 레이아웃과 별-크기(star sizing)
 
 ```html
 <GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
@@ -39,7 +43,7 @@ The GridLayout is a layout that arranges its child elements in a table structure
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_star_sizing.svg" />
 
-#### Grid layout with fixed and auto sizing
+#### 그리드 레이아웃과 고정/자동 크기
 
 ```html
 <GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
@@ -54,20 +58,19 @@ The GridLayout is a layout that arranges its child elements in a table structure
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`columns` | `String` | A string value representing column widths delimited with commas. Column widths can be either an absolute number, `auto` or `*`. A number indicates an absolute column width, `auto` makes the column as wide as its widest child, and `*` makes the column occupy all available horizontal space.
-`rows` | `String` | A string value representing row heights delimited with commas. Row heights can be either an absolute number, `auto` or `*`. A number indicates an absolute row height, `auto` makes the row as high as its highest child, and `*` makes the row occupy all available vertical space.
+`columns` | `String` | 열의 너비를 나타내는 쉼표로 나누어진 문자열 값. 열의 너비는 절대값이나 `auto`, `*`가 가능. 숫자는 고정된 절대값 너비를 의미하고, `auto`는 가장 넓은 자식의 너비, `*` 는 컬럼이 가능한 모든 가로공간을 차지하도록 만듬.
+`rows` | `String` | 행의 높이를 나타내는 쉼표로 나누어진 문자열 값. 행의 높이는 절대값이나 `auto`, `*`가 가능. 숫자는 고정된 절대값 높이를 의미하고, `auto`는 가장 높은 자식의 높이, `*` 는 행이 가능한 모든 세로 공간을 차지하도록 만듬.
 
 
-## Additional Children Props
+## 추가적인 자식 Props
 
-When an element is a direct child of the GridLayout, the following
-props get a meaning:
+요소가 GridLayout의 직접적인 자식일때 다음 prop들이 가능합니다:
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`row` | `Number` | Specifies the row which this element should be in
-`column` | `Number` | Specifies the column which this element should be in
-`rowSpan` | `Number` | Specifies the number of rows which this element should span across
-`columnSpan` | `Number` | Specifies the number of columns which this element should span across
+`row` | `Number` | 요소의 행
+`column` | `Number` | 요소의 열
+`rowSpan` | `Number` | 요소가 확장되는 행의 수
+`columnSpan` | `Number` | 요소가 확장되는 열의 수
diff --git a/content/docs/ko/elements/layouts/stack-layout.md b/content/docs/ko/elements/layouts/stack-layout.md
index 19056c56..361e6551 100644
--- a/content/docs/ko/elements/layouts/stack-layout.md
+++ b/content/docs/ko/elements/layouts/stack-layout.md
@@ -1,14 +1,14 @@
 ---
-title: StackLayout
+title: 스택 (StackLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-The StackLayout container stacks the child elements either vertically (default), or horizontally.
+StackLayout 컨테이너는 자식 요소들을 세로(기본값)나 가로로 쌓음(stack)
 
-### Samples
+### 예제
 
-#### Default StackLayout
+#### 기본 StackLayout
 
 ```html
 <StackLayout backgroundColor="#3c495e">
@@ -19,7 +19,7 @@ The StackLayout container stacks the child elements either vertically (default),
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical.svg" />
 
-#### Horizontal StackLayout
+#### 가로방향 StackLayout
 
 ```html
 <StackLayout orientation="horizontal" backgroundColor="#3c495e">
@@ -30,7 +30,7 @@ The StackLayout container stacks the child elements either vertically (default),
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal.svg" />
 
-#### StackLayout with horizontally aligned children
+#### 가로로 자식들이 정렬된 StackLayout
 
 ```html
 <StackLayout backgroundColor="#3c495e">
@@ -46,7 +46,7 @@ The StackLayout container stacks the child elements either vertically (default),
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical_align_children.svg" />
 
-#### Horizontal StackLayout with vertically aligned children
+#### 수직으로 자식들이 정렬된 가로방향 StackLayout
 
 ```html
 <StackLayout orientation="horizontal" backgroundColor="#3c495e">
@@ -64,11 +64,10 @@ The StackLayout container stacks the child elements either vertically (default),
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`orientation` | `String` | Specifies the direction of the stacking. Possible values are `vertical` and `horizontal`. The default value is `vertical`.
+`orientation` | `String` | 쌓이는 방향을 지정. 2가지 값이 가능: `verticla`, `horizontal`. 기본값은 `verticla`
 
+## 추가적인 자식 Props
 
-## Additional Children Props
-
-There are no additional properties for child elements.
+없음.
diff --git a/content/docs/ko/elements/layouts/wrap-layout.md b/content/docs/ko/elements/layouts/wrap-layout.md
index 6fc1f163..e5e34561 100644
--- a/content/docs/ko/elements/layouts/wrap-layout.md
+++ b/content/docs/ko/elements/layouts/wrap-layout.md
@@ -1,14 +1,14 @@
 ---
-title: WrapLayout
+title: 랩핑 (WrapLayout)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_
-contributors: [rigor789]
+contributors: [qgp9]
 ---
 
-The WrapLayout container positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them onto a new row or column.
+WrapLayout 컨테이너는 orientation 프로퍼티에 기초하여 공간이 다 찰때까지 자식들을 행이나 열에 위치시키고 그들을 새로운 행이나 열로 래핑합니다.
 
-### Samples
+### 예제
 
-#### Default WrapLayout
+#### 기본 WrapLayout
 
 ```html
 <WrapLayout backgroundColor="#3c495e">
@@ -20,7 +20,7 @@ The WrapLayout container positions its children in rows or columns, based on the
 ```
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_horizontal.svg" />
 
-#### Vertical WrapLayout
+#### 수직 WrapLayout
 
 ```html
 <WrapLayout orientation="vertical" backgroundColor="#3c495e">
@@ -34,13 +34,13 @@ The WrapLayout container positions its children in rows or columns, based on the
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-`orientation` | `String` | A value indicating the flow direction. If orientation is `horizontal`, items are arranged in rows. If orientation is `vertical`, items are arranged in columns. The default value is `horizontal`.
-`itemWidth` | `Number` | The width used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children.
-`itemHeight` | `Number` | The height used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children.
+`orientation` | `String` | 흐름의 방향. `horizontal` 이면 아이템이 행들에 배치됨. `vertical` 이면 아이템들이 열들에 배치됨. 기본값은 `horizontal`.
+`itemWidth` | `Number` | 각 자식을 측정하고 위치시키는데 쓰이는 너비. 기본값은 `Number.NaN`. 이 값은 자식들을 제한하지 않음.
+`itemHeight` | `Number` | 각 자식을 측정하고 위치시키는데 쓰이는 높이. 기본값은 `Number.NaN`. 이 값은 자식들을 제한하지 않음.
 
 
-## Additional Children Props
+## 추가적인 자식 Props
 
-There are no additional properties for child elements.
+없음

From d32a7ba29fa8f4370185cba27ae0ece1236386ac Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Wed, 28 Feb 2018 18:23:42 +0200
Subject: [PATCH 11/14] translate to KO; action-bar

---
 .../docs/ko/elements/action-bar/action-bar.md | 28 +++++++++----------
 .../ko/elements/action-bar/action-item.md     | 26 ++++++++---------
 .../elements/action-bar/navigation-button.md  | 16 +++++------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/content/docs/ko/elements/action-bar/action-bar.md b/content/docs/ko/elements/action-bar/action-bar.md
index 119f4f7d..891d1ec6 100644
--- a/content/docs/ko/elements/action-bar/action-bar.md
+++ b/content/docs/ko/elements/action-bar/action-bar.md
@@ -1,20 +1,20 @@
 ---
-title: ActionBar
+title: 액션바 (ActionBar)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
 contributors: [rigor789, eddyverbruggen]
 ---
 
-The ActionBar component is a NativeScript abstraction for the Android ActionBar and iOS NavigationBar.
+액션바 컴포넌트는 안드로이드 액션바와 iOS NavigationBar의 네이티브-스크립트 추상화 입니다.
 
 ---
 
-#### Using a title
+#### 제목 사용
 
 ```html
 <ActionBar title="MyApp" />
 ```
 
-#### Using a custom title view
+#### 커스텀 제목 view
 
 ```html
 <ActionBar>
@@ -25,16 +25,16 @@ The ActionBar component is a NativeScript abstraction for the Android ActionBar
 </ActionBar>
 ```
 
-#### Setting an App Icon for Android
+#### 안드로이드에서 앱 아이콘 설정
 
 ```html
 <ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
 ```
 
-#### Removing the border
-On iOS and Android a little border is drawn at the bottom of the ActionBar.
-Furthermore, the background color of the ActionBar on iOS is slightly different to what you specify
-because iOS applies a filter. To remove this filter and the border, set `flat` to `true`.
+#### 가장자리 경계(border) 없애기
+iOS와 안드로이드에서 작은 보더가 액션바 바닥에 그려집니다.
+추가로 iOS에서 액션바의 배경색은 iOS가 적용하는 필터때문에 지정한 값과 약간 달라집니다.
+이 필터와 보더를 제거하려면 `flat` 을 `true` 로 설정하세요
 
 ```html
 <ActionBar title="My App" flat="true" />
@@ -42,9 +42,9 @@ because iOS applies a filter. To remove this filter and the border, set `flat` t
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `title` | `String` | The title to be shown in the ActionBar.
-| `android.icon` | `String` | The icon to be shown on Android.
-| `android.iconVisibility` | `String` | Sets when the icon is visible.
-| `flat` | `boolean` | Removes the border and iOS color filter. Default `false`.
+| `title` | `String` | 액션바에 나타나는 제목.
+| `android.icon` | `String` | 안드로이드에서 보여지는 아이콘.
+| `android.iconVisibility` | `String` | 아이콘이 보여질지 지정.
+| `flat` | `boolean` | 보더와 iOS 컬러 필터를 제거. 기본값은 `false`.
diff --git a/content/docs/ko/elements/action-bar/action-item.md b/content/docs/ko/elements/action-bar/action-item.md
index 2491bc63..0cb22b9c 100644
--- a/content/docs/ko/elements/action-bar/action-item.md
+++ b/content/docs/ko/elements/action-bar/action-item.md
@@ -1,10 +1,10 @@
 ---
-title: ActionItem
+title: 액션아이템 (ActionItem)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
 contributors: [rigor789]
 ---
 
-The ActionItem component is used to add additional action buttons to the ActionBar.
+ActionItem 컴포넌트는 액션바에 추가적인 액션 버턴을 추가하는데 쓰임
 
 ---
 
@@ -19,9 +19,9 @@ The ActionItem component is used to add additional action buttons to the ActionB
 </ActionBar>
 ```
 
-#### Conditionally showing action items
+#### 액션 아이템의 조건부 표시
 
-ActionItems can be displayed based on a condition using the `v-show` directive.
+ActionItems 은 `v-show` 디렉티브를 이용하여 조건부로 표시할 수 있습니다.
 
 ```html
 <ActionBar title="My App">
@@ -42,15 +42,15 @@ ActionItems can be displayed based on a condition using the `v-show` directive.
 
 ## Props
 
-| name | type | description |
-|------|------|-------------|
-| `ios.systemIcon` | `String` | Sets the icon for iOS.
-| `android.systemIcon` | `String` | Sets the icon for Android.
-| `ios.position` | `String` | Sets the position for iOS.<br>Possible values:<br>- `left` (default): Puts the item on the left side of the ActionBar.<br>- `right`: Puts the item on the right side of the ActionBar.
-| `android.position` | `String` | Sets the position for Android.<br>Possible values:<br>- `actionBar` (default): Puts the item in the ActionBar.<br>- `popup`: Puts the item in the options menu. Items will be rendered as text.<br>- `actionBarIfRoom`: Puts the item in the ActionBar if there is room for it. Otherwise, puts it in the options menu.
+| 이름 | 타입 | 설명 |
+|------|------|------------|
+| `ios.systemIcon` | `String` | iOS용 아이콘.
+| `android.systemIcon` | `String` | 안드로이드용 아이콘.
+| `ios.position` | `String` | iOS용 위치 설정.<br>가능한 값:<br>- `left` (기본값): 아이템을 액션바의 왼쪽에 위치.<br>- `right`: 아이템을 액션바의 오른쪽에 위치.
+| `android.position` | `String` | 안드로이드용 위치설정.<br>가능한 값:<br>- `actionBar` (기본값): 아이템을 액션바 내에 위치.<br>- `popup`: 아이템을 옵션 메뉴에 위치. 아이템은 텍스트로 렌더링됨. .<br>- `actionBarIfRoom`: 공간이 있을 경우 아이템을 액션바 내에 위치. 아니면 옵션 메뉴에 둠.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `tap`| Emitted when the ActionItem has been tapped.
+| `tap`| 액션 아이템이 탭(tap)되었을때 호출(Emit)
diff --git a/content/docs/ko/elements/action-bar/navigation-button.md b/content/docs/ko/elements/action-bar/navigation-button.md
index 6077f361..fb649dca 100644
--- a/content/docs/ko/elements/action-bar/navigation-button.md
+++ b/content/docs/ko/elements/action-bar/navigation-button.md
@@ -1,10 +1,10 @@
 ---
-title: NavigationButton
+title: 네비게이션 버튼 (NavigationButton)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
 contributors: [rigor789]
 ---
 
-The NavigationButton component is a NativeScript abstraction for the Android navigation button, and the iOS back button.
+NavigationButton 컴포넌트는 안드로이드 네비게이션 버튼과 iOS 백버튼(back  button)의 네이티브-스크립트 추상화입니다.
 
 ---
 
@@ -16,15 +16,15 @@ The NavigationButton component is a NativeScript abstraction for the Android nav
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `text` | `String` | Sets the text to be shown on iOS.
-| `android.systemIcon` | `String` | The icon to be shown on Android.
+| `text` | `String` | 텍스트를 iOS 에서 보여주도록 설정.
+| `android.systemIcon` | `String` | 해당 아이콘이 안드로이드에서 보입니다.
 
-*The icon list for Android can be found at <https://developer.android.com/reference/android/R.drawable.html>, and the icons are the ones that start with `ic_` prefix.*
+*안드로이드의 아이콘 리스트는 다음 페이지에서 찾을 수 있습니다. <https://developer.android.com/reference/android/R.drawable.html>. 아이콘은 `ic_` 접두어와 함께 시작하는 것들입니다.*
 
 ## Events
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `tap`| Emitted when the NavigationButton has been tapped.
+| `tap`| 네비게이션 버튼을 탭(tab) 했을때 발생(Emit).

From a5a97906262e2e14fb360c0b6244b2aa1857e3f9 Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Wed, 28 Feb 2018 19:51:19 +0200
Subject: [PATCH 12/14] translate to KO; partial of components

---
 .../elements/components/activity-indicator.md | 16 ++++-----
 content/docs/ko/elements/components/button.md | 23 ++++++------
 .../ko/elements/components/date-picker.md     | 30 ++++++++--------
 .../docs/ko/elements/components/html-view.md  | 12 +++----
 content/docs/ko/elements/components/image.md  | 20 +++++------
 content/docs/ko/elements/components/label.md  | 20 +++++------
 .../ko/elements/components/list-picker.md     | 20 +++++------
 .../docs/ko/elements/components/list-view.md  | 36 +++++++++++--------
 .../docs/ko/elements/components/progress.md   | 20 +++++------
 .../ko/elements/components/scroll-view.md     | 16 ++++-----
 .../docs/ko/elements/components/search-bar.md | 22 ++++++------
 .../ko/elements/components/segmented-bar.md   | 22 ++++++------
 content/docs/ko/elements/components/slider.md | 22 ++++++------
 content/docs/ko/elements/components/switch.md | 20 +++++------
 .../docs/ko/elements/components/tab-view.md   | 16 ++++-----
 .../docs/ko/elements/components/text-field.md | 36 +++++++++----------
 16 files changed, 179 insertions(+), 172 deletions(-)

diff --git a/content/docs/ko/elements/components/activity-indicator.md b/content/docs/ko/elements/components/activity-indicator.md
index ddfd6433..0ee32a4a 100644
--- a/content/docs/ko/elements/components/activity-indicator.md
+++ b/content/docs/ko/elements/components/activity-indicator.md
@@ -1,10 +1,10 @@
 ---
 title: ActivityIndicator
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The ActivityIndicator component adds a progress indicator that indicates that something is running in the background, prompting the user to pause.
+ActivityIndicator 컴포넌트는 백그라운드에서 동작하는 것을 표시하는 프로그레스 인디케이터를 추가하고 사용자가 일시중지(pause) 할수 있게 도와줍니다.
 
 ---
 
@@ -16,17 +16,17 @@ The ActivityIndicator component adds a progress indicator that indicates that so
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `busy` | `Boolean` | When `true`, the indicator is active.
+| `busy` | `Boolean` | `true` 일때 인디케이터가 활성화됨.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `busyChange`| Emitted when the `busy` property is changed.
+| `busyChange`| `busy` 프로퍼티가 바뀔때 발생(Emit)
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/button.md b/content/docs/ko/elements/components/button.md
index bb8eabc0..78359dd7 100644
--- a/content/docs/ko/elements/components/button.md
+++ b/content/docs/ko/elements/components/button.md
@@ -1,12 +1,13 @@
 ---
-title: Button
+title: 버튼 (Button)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The Button component is used to display a button that can react to a tap event.
+버튼(Button) 컴포넌트는 탭(tab) 이벤트에 반응하는 버튼을 표시하는데 사용됩니다.
 
-The interaction is not limited to the tap event only, [read more about all the available gestures in NativeScript in the official documentation](https://docs.nativescript.org/ui/gestures).
+상호작용이 탭(tab) 이벤트로만 제한되는 것은 아닙니다.
+[네이티브-스크립트에서 사용가능한 모든 제스쳐에대하여 공식 문서를 읽어보세요](https://docs.nativescript.org/ui/gestures).
 
 ---
 
@@ -18,18 +19,18 @@ The interaction is not limited to the tap event only, [read more about all the a
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `text` | `String` | The text to be shown on the button.
-| `textWrap` | `boolean` | Determines whether or not the Button wraps text. Default `false`.
+| `text` | `String` | 버튼에 보이는 텍스트.
+| `textWrap` | `boolean` | 버튼의 텍스트가 래핑될지 결정. 기본값은 `false`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `tap` | Emitted when the button is pressed.
+| `tap` | 버튼이 눌릴때 발생(Emit)
 
-## Native Component
+## 네이티브 컴포넌트
 | Android | iOS |
 |---------|-----|
 | android.widget.Button | UIButton
diff --git a/content/docs/ko/elements/components/date-picker.md b/content/docs/ko/elements/components/date-picker.md
index 6a6e19b6..a0503d96 100644
--- a/content/docs/ko/elements/components/date-picker.md
+++ b/content/docs/ko/elements/components/date-picker.md
@@ -1,10 +1,10 @@
 ---
-title: DatePicker
+title: 날짜선택 (DatePicker)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The DatePicker component allows the user to pick a date.
+DatePicker 컴포넌트는 사용자가 날짜를 선택할 수 있도록 합니다.
 
 ---
 
@@ -12,7 +12,7 @@ The DatePicker component allows the user to pick a date.
 <DatePicker @loaded="onDatePickerLoaded" @dateChanged="onDateChanged" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <DatePicker v-model="selectedDate" />
@@ -22,22 +22,22 @@ The DatePicker component allows the user to pick a date.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `date` | `Date` | The currently displayed date.
-| `minDate` | `Date` | The minimum selectable date.
-| `maxDate` | `Date` | The maximum selectable date.
-| `day` | `Number` | The currently set day.
-| `month` | `Number` | The currently set month.
-| `year` | `Number` | The currently set year.
+| `date` | `Date` | 현재 표시되는 날짜.
+| `minDate` | `Date` | 최소 선택 가능 날짜.
+| `maxDate` | `Date` | 최대 선택 가능 날짜.
+| `day` | `Number` | 현재 선택된 날.
+| `month` | `Number` | 현재 선택된 달.
+| `year` | `Number` | 현재 선택된 년.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `dateChanged` | Emitted when the selected date changes.
+| `dateChanged` | 선택된 날짜가 바뀔때 발생(Emit)
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android |	iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/html-view.md b/content/docs/ko/elements/components/html-view.md
index cafe5d9d..dd76e9dc 100644
--- a/content/docs/ko/elements/components/html-view.md
+++ b/content/docs/ko/elements/components/html-view.md
@@ -1,10 +1,10 @@
 ---
-title: HtmlView
+title: HTML뷰 (HtmlView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The HtmlView component allows you to show static html content without the need of a WebView.
+HtmlView 컴포넌트는 정적인 html 컨텐츠를 웹뷰(WebView) 없이 보여줄 수 있도록 해줍니다.
 
 ---
 
@@ -16,11 +16,11 @@ The HtmlView component allows you to show static html content without the need o
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `html` | `String` | The html content to be shown.
+| `html` | `String` | 보여줄 html 컨텐츠.
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/image.md b/content/docs/ko/elements/components/image.md
index cefb20c1..a22c1e96 100644
--- a/content/docs/ko/elements/components/image.md
+++ b/content/docs/ko/elements/components/image.md
@@ -1,32 +1,32 @@
 ---
-title: Image
+title: 이미지 (Image)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_image_.image
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The Image component displays an Image from an [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_), or from a URL.
+이미지(Image) 컴포넌트는 [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_) 나 URL 로부터 이미지를 표시합니다.
 
 ---
 
-#### Displaying an image relative to the `app` directory
+#### `app` 디렉토리로부터 상대경로로 이미지 표시
 
 ```html
 <Image src="~/logo.png" stretch="none" />
 ```
 
-#### Displaying an image from a URL
+#### URL 로 부터 이미지 표시
 
 ```html
 <Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />
 ```
 
-#### Displaying an image from `App_Resources`
+#### `App_Resources` 로 부터 이미지 표시
 
 ```html
 <Image src="res://icon" stretch="none" />
 ```
 
-#### Displaying a `base64` encoded image
+#### `base64` 인코딩 이미지
 
 ```html
 <Image src="data:Image/png;base64,iVBORw..." stretch="none" />
@@ -36,11 +36,11 @@ The Image component displays an Image from an [ImageSource](https://docs.natives
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `src` | `String`, [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | Source of the image.
+| `src` | `String`, [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | 이미지 소스.
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/label.md b/content/docs/ko/elements/components/label.md
index e2ffabde..c89096b9 100644
--- a/content/docs/ko/elements/components/label.md
+++ b/content/docs/ko/elements/components/label.md
@@ -1,12 +1,12 @@
 ---
-title: Label
+title: 레이블 (Label)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_label_.label
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The Label component is used to display read-only text.
+레이블(Label) 컴포넌트는 읽기전용 텍스트를 표시하는데 사용됩니다.
 
-**Note**: This `<Label>` is **not** the same as the HTML `<Label>`.
+**노트**: `<Label>` HTML의 `<Label>` 과 **다릅니다**.
 
 ---
 
@@ -18,9 +18,9 @@ The Label component is used to display read-only text.
 
 ### FormattedString
 
-If you need to style certain parts of the text differently, you can use a combination of a `FormattedString` and `Span` elements.
+특정 부분의 텍스트를 다르게 스타일링해야 한다면 `FormattedString` `Span` 요소를 결합하여 사용할 수 있습니다.
 
-Example:
+예:
 ```html
 <Label textWrap="true">
   <FormattedString>
@@ -35,12 +35,12 @@ Example:
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `text` | `String` | The text of the label.
-| `textWrap` | `boolean` | Determines whether or not the Label wraps text. Default `false`.
+| `text` | `String` | 레이블의 텍트스.
+| `textWrap` | `boolean` | 레이블의 텍스트가 래핑될것 인지 지정. 기본값은 `false`.
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/list-picker.md b/content/docs/ko/elements/components/list-picker.md
index e40cc9c6..9e52c135 100644
--- a/content/docs/ko/elements/components/list-picker.md
+++ b/content/docs/ko/elements/components/list-picker.md
@@ -1,10 +1,10 @@
 ---
 title: ListPicker
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_picker_.listpicker
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The ListPicker component allows the user to pick a value from a list.
+ListPicker 컴포넌트는 사용자가 리스트로 부터 값을 선택할 수 있도록 해줍니다.
 
 ---
 
@@ -13,7 +13,7 @@ The ListPicker component allows the user to pick a value from a list.
     @selectedIndexChange="selectedIndexChanged" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <ListPicker :items="listOfItems" v-model="selectedItem" />
@@ -23,18 +23,18 @@ The ListPicker component allows the user to pick a value from a list.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `items` | `Array<String>` | An Array of strings that will be displayed as options in the list picker.
-| `selectedIndex` | `Number` | The index of the currently selected item.
+| `items` | `Array<String>` | 리스트 선택기에 표시되는 옵션들의 스트링 배열.
+| `selectedIndex` | `Number` | 현재 선택된 아이템의 인덱스.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `selectedIndexChange`| Emitted when the selected option (index) of the ListPicker changes.
+| `selectedIndexChange`| 리스트 선택기에서 선택된 옵션(인덱스)가 바뀔때 발생(Emit)
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/list-view.md b/content/docs/ko/elements/components/list-view.md
index 3445c2db..d107f3e3 100644
--- a/content/docs/ko/elements/components/list-view.md
+++ b/content/docs/ko/elements/components/list-view.md
@@ -1,10 +1,11 @@
 ---
-title: ListView
+title: 리스트뷰 (ListView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The ListView component shows items in a vertically scrolling list. You can set different `v-template`'s to specify how each item in the list should be displayed.
+리스트뷰(ListView) 컴포넌트는 수직 스크롤 리스트에 아이템을 보여줍니다.  
+리스트에서 각 아이템이 어떻게 표시되는지를 지정하기 위해 다른 `v-template`를 설정할 수 있습니다.
 
 ---
 
@@ -20,12 +21,17 @@ The ListView component shows items in a vertically scrolling list. You can set d
 </ListView>
 ```
 
-In the above example the second template will be used if the item's index is odd.
-For convenience you can use `$index`, `$even` and `$odd` helpers, but as needed you can use any valid javascript expression for a `v-template`'s `if` condition.
+위 예에서 두번째 템플릿은 아이템의 인덱스가 홀수일때 사용됩니다.
+편의를 위해 `$index`, `$even`, `$odd` 헬퍼를 사용할 수 있습니다.
+그러나 필요하다면 임의의 유효한 자바스크립트 표현식과 함께 `v-template`의 `if` 조건을 사용할 수 있습니다.
 
-To learn more about the `v-template` component, head over to the [`v-template` documentation](/en/docs/utilities/v-template).
+`v-template` 컴포넌트에 대해 더 자세이 배우려면 [`v-template` 문서](/ko/docs/utilities/v-template) 를 확인하세요.
 
-The ListView does not loop through the items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead it only creates the necessary views to display the currently visible items on the screen, and when scrolling it reuses the views that are already off-screen. This concept is called view recycling, and is commonly used in mobile applications to improve performance. This is important because you can't rely on event listeners attached inside the `v-template`, instead you should use the `itemTap` event which contains the index of the tapped item, as well as the actual item from the list.
+리스트뷰는 당신의 예상과 다르게 [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) 처럼 아이템들의 룹을 돌지 않습니다.
+대신 리스트뷰는 단지 현재 스크린에 보일 수 있는 아이템을 표시하기 위해 필요한 뷰를 만들고 스크롤이 발생할 경우 이미 off-screen 되었던 뷰를 재사용합니다.
+이 컨셉은 뷰 재활용(recycling)이라고 불리며 모바일 어플리케이션에서 퍼포먼스를 향상시키기 위해 흔히 사용됩니다.
+이는 당신이 `v-template` 안에서  결합된 이벤트리스너에 의존할 수 없고 대신 탭된 아이템(리스트의 실제 아이템도 마찬가지)의 인덱스를 포함하는 `itemTap` 이벤트를 사용해야 하기때문에 중요합니다.
+(역자: 솔직히 뭔소린지 모르고 번역했습니다.)
 
 ```js
 onItemTap(event) {
@@ -38,19 +44,19 @@ onItemTap(event) {
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `for` | `String` | The expression for iterating through the items, examples:<br>- `item in listOfItems`<br>- `(item, index) in listOfItems`<br>- `item in [1, 2, 3, 4, 5]`
-| `items` | `Array<any>` | An array of items to be displayed in the ListView. **Note**: This property is only for advanced use, we recommend using the `for` property in most cases.
-| `separatorColor` | `Color` | Set the separator line color. Set to `transparent` to remove it.
+| `for` | `String` | 아이템 이터레이팅을 위한 표현식. 예:<br>- `item in listOfItems`<br>- `(item, index) in listOfItems`<br>- `item in [1, 2, 3, 4, 5]`
+| `items` | `Array<any>` | 리스트뷰에 표시될 아이템 배열. **노트**: 이 프로퍼티는 오직 고급 사용을 위한 것입니다. 대부분의 경우 `for` 프로퍼티를 사용하기를 권장합니다.
+| `separatorColor` | `Color` | 구분라인의 컬러. `transparent` 를 사용하여 제거할 수 있습니다.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `itemTap`| Emitted when an item in the ListView has been tapped. To access the tapped item use `event.item`.
+| `itemTap`| 리스트뷰 내의 아이템이 탭되었을때 발생. 탭된 아이템에 접근하려면 `event.item`을 사용하세요
 
-## Native Component
+## 네이티브 컴포넌트
 | Android | iOS |
 |---------|-----|
 | android.widget.ListView | UITableView
diff --git a/content/docs/ko/elements/components/progress.md b/content/docs/ko/elements/components/progress.md
index 8785870a..d7dc0b59 100644
--- a/content/docs/ko/elements/components/progress.md
+++ b/content/docs/ko/elements/components/progress.md
@@ -1,10 +1,10 @@
 ---
-title: Progress
+title: 프로그레스 (Progress)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The Progress component is a bar for visually indicating progress.
+프로그레스(Progress) 컴포넌트는 진행상태를 시각적으로 보여주는 바(막대)입니다.
 
 ---
 
@@ -16,18 +16,18 @@ The Progress component is a bar for visually indicating progress.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `value` | `Number` | The current value of progress out of max.
-| `maxValue` | `Number` | The maximum value of the progress. Default `100`.
+| `value` | `Number` | 최대값을 기준으로한 현재 진행 상태.
+| `maxValue` | `Number` | 진행상태의 최대값. 기본값은 `100`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `valueChange` | Emitted when the value property changes.
+| `valueChange` | value 프로퍼티가 바뀔때 발생
 
-## Native Component
+## 네이티브 컴포넌트
 
 | Android | iOS |
 |---------|-----|
diff --git a/content/docs/ko/elements/components/scroll-view.md b/content/docs/ko/elements/components/scroll-view.md
index d7158df8..83077a5c 100644
--- a/content/docs/ko/elements/components/scroll-view.md
+++ b/content/docs/ko/elements/components/scroll-view.md
@@ -1,10 +1,10 @@
 ---
-title: ScrollView
+title: 스크롤뷰 (ScrollView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview
-contributors: [eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The ScrollView component allows you to show scrollable content.
+스크롤뷰(ScrollView) 컴포넌트는 스크롤 가능한 컨텐츠를 표시할 수 있게 해줍니다.
 
 ---
 
@@ -24,12 +24,12 @@ The ScrollView component allows you to show scrollable content.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `orientation` | `String` | Either `horizontal` or `vertical`. Default `vertical`.
+| `orientation` | `String` | `horizontal` 혹은 `vertical`. 기본값은 `vertical`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `scroll`| Emitted when a scroll event occurs
+| `scroll`| 스크롤 이벤트가 발생했을때 발생(Emit)
diff --git a/content/docs/ko/elements/components/search-bar.md b/content/docs/ko/elements/components/search-bar.md
index 45433ecd..8d5735e0 100644
--- a/content/docs/ko/elements/components/search-bar.md
+++ b/content/docs/ko/elements/components/search-bar.md
@@ -1,10 +1,10 @@
 ---
-title: SearchBar
+title: 검색바 (SearchBar)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The SearchBar component provides a user interface for entering search queries and submitting requests to the search provider.
+검색바(SearchBar) 는 검색 커리를 입력하고 검색 제공자에게 요청을 보낼수 있는 사용자 인터페이스를 제공합니다.
 
 ---
 
@@ -12,7 +12,7 @@ The SearchBar component provides a user interface for entering search queries an
 <SearchBar hint="Search hint" :text="searchPhrase" @textChange="onTextChanged" @submit="onSubmit" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <SearchBar v-model="searchQuery" />
@@ -22,17 +22,17 @@ The SearchBar component provides a user interface for entering search queries an
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `hint` | `String` | Placeholder text for the editable input area.
-| `text` | `String` | The value of the search input.
+| `hint` | `String` | 편집가능한 인풋 영역의 텍스트 플레이스홀더
+| `text` | `String` | 검색 인풋의 value
 
-## Events
+## ## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `textChange`| Emitted when the text is changed.
-| `submit`| Emitted when the search input is submitted.
+| `textChange`| 텍스트가 바뀔때 발생.
+| `submit`| 검색 인풋이 submit 될때 발생
 
 ## Native Component
 
diff --git a/content/docs/ko/elements/components/segmented-bar.md b/content/docs/ko/elements/components/segmented-bar.md
index fed29301..a600987e 100644
--- a/content/docs/ko/elements/components/segmented-bar.md
+++ b/content/docs/ko/elements/components/segmented-bar.md
@@ -1,10 +1,10 @@
 ---
-title: SegmentedBar
+title: 세그먼트바 (SegmentedBar)
 apiRef: http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The SegementedBar component gives you a simple way to display a collection of tabbed views for discrete selection.
+세그먼트바(SegmentedBar) 컴포넌트는 불연속적인 선택을 위해 탭형태의 뷰 컬랙션을 보여주는 간단한 방법을 제공합니다.
 
 ---
 
@@ -13,7 +13,7 @@ The SegementedBar component gives you a simple way to display a collection of ta
     @selectedIndexChange="onSelectedIndexChange" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <SegmentedBar :items="listOfItems" v-model="selectedItem" />
@@ -23,17 +23,17 @@ The SegementedBar component gives you a simple way to display a collection of ta
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `items` | `Array<SegmentedBarItem>` | A list of items to be displayed in the segmented bar.
-| `selectedIndex` | `Number` | The index of the selected item.
-| `selectedBackgroundColor` | `Color` | Set the background color of the selected item. To set the background color of the entire bar, use `backgroundColor`.
+| `items` | `Array<SegmentedBarItem>` | 세그먼트바에 표시될 아이템 리스트.
+| `selectedIndex` | `Number` | 선택된 아이템들의 인덱스
+| `selectedBackgroundColor` | `Color` | 선텍된 아이템들의 배경색. 전체 바에 배경색을 적용하려면 `backgroundColor`를 사용하세요.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `selectedIndexChange`| Emitted when the an item on the segmented bar is tapped
+| `selectedIndexChange`| 세그멘트 바의 아이템이 탭될때 발생.
 
 ## Native Component
 | Android | iOS |
diff --git a/content/docs/ko/elements/components/slider.md b/content/docs/ko/elements/components/slider.md
index 72385a18..9ddf80c9 100644
--- a/content/docs/ko/elements/components/slider.md
+++ b/content/docs/ko/elements/components/slider.md
@@ -1,11 +1,11 @@
 ---
-title: Slider
+title: 슬라이더 (Slider)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_slider_.slider
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 
 ---
 
-The Slider component allows the user to input a numeric value from a specified range.
+슬라이더(Slider) 컴포넌트는 사용자가 특정 범위의 숫자 값을 입력할 수 있도록 해줍니다.
 
 ---
 
@@ -13,7 +13,7 @@ The Slider component allows the user to input a numeric value from a specified r
 <Slider value="80" @valueChange="onValueChanged" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <Slider v-model="value" />
@@ -23,17 +23,17 @@ The Slider component allows the user to input a numeric value from a specified r
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `value` | `Number` | The value of the slider.
-| `minValue` | `Number` | The minimum value of the slider. Default `0`.
-| `maxValue` | `Number` | The maximum value of the slider. Default `100`.
+| `value` | `Number` | 슬라이더의 값
+| `minValue` | `Number` | 슬라이더 최소값. 기본값은 `0`.
+| `maxValue` | `Number` | 슬라이더 최대값. 기본값은 `100`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `valueChange`| Emitted when the value of the slider changes.
+| `valueChange`| 슬라이더 값이 바뀔때 발생.
 
 ## Native Component
 
diff --git a/content/docs/ko/elements/components/switch.md b/content/docs/ko/elements/components/switch.md
index 4dda3b6a..865216fb 100644
--- a/content/docs/ko/elements/components/switch.md
+++ b/content/docs/ko/elements/components/switch.md
@@ -1,11 +1,11 @@
 ---
-title: Switch
+title: 스위치 (Switch)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_switch_.switch
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The Switch component allows the user to toggle between two states. 
-The default state is `false` or "off".
+스위치(Switch) 컴포넌트는 사용자가 두개의 상태를 토글 할수 있도록 해줍니다.
+기본 상태는 `false` 나 "off" 입니다.
 
 ---
 
@@ -13,7 +13,7 @@ The default state is `false` or "off".
 <Switch checked="true" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <Switch v-model="itemEnabled" />
@@ -23,15 +23,15 @@ The default state is `false` or "off".
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `checked` | `Boolean` | A boolean value representing the state of the switch.
+| `checked` | `Boolean` | 스위치의 상태를 나타네는 부울값
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `checkedChange`| Emitted when switch checked value changes.
+| `checkedChange`| 스위치의 값이 바뀔때 발생
 
 ## Native Component
 | Android | iOS |
diff --git a/content/docs/ko/elements/components/tab-view.md b/content/docs/ko/elements/components/tab-view.md
index 75e7ec37..148042eb 100644
--- a/content/docs/ko/elements/components/tab-view.md
+++ b/content/docs/ko/elements/components/tab-view.md
@@ -1,10 +1,10 @@
 ---
-title: TabView
+title: 탭뷰 (TabView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The TabView component allows you to display content grouped into tabs.
+탭뷰(TabView) 컴포넌트는 탭으로 그룹화된 컨텐츠를  표시할 수 있도록 해줍니다.
 
 ---
 
@@ -23,15 +23,15 @@ The TabView component allows you to display content grouped into tabs.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `selectedIndex` | `Number` | The currently selected tab. Default is `0`
+| `selectedIndex` | `Number` | 현재 선택된 탭. 기본값은 `0`
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `selectedIndexChanged`| Emitted when one of the tab-view-item components are tapped
+| `selectedIndexChanged`| tab-view-item 컴포넌트중 하나가 탭되었을때 발생
 
 ## Native Component
 | Android | iOS |
diff --git a/content/docs/ko/elements/components/text-field.md b/content/docs/ko/elements/components/text-field.md
index f6b0c47b..c2c9764c 100644
--- a/content/docs/ko/elements/components/text-field.md
+++ b/content/docs/ko/elements/components/text-field.md
@@ -1,11 +1,11 @@
 ---
-title: TextField
+title: 텍스트필드 (TextField)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_text_field_
-contributors: [MisterBrownRSA, rigor789, TheOriginalJosh, eddyverbruggen]
+contributors: [qgp9]
 
 ---
 
-The TextField component creates an editable single-line box.
+텍스트필드(TextField) 컴포넌트는 편집가능한 한줄짜리 박스를 만듭니다.
 
 ---
 
@@ -13,7 +13,7 @@ The TextField component creates an editable single-line box.
 <TextField :text="textFieldValue" hint="Enter text..." />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <TextField v-model="textFieldValue" />
@@ -23,24 +23,24 @@ The TextField component creates an editable single-line box.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `text` | `String` | The value of the TextField.
-| `hint` | `String` | The placeholder text.
-| `editable` | `Boolean` | When `true`, the user can edit the value of the TextField.
-| `maxLength` | `Number` | Limits input to a certain number of characters.
-| `secure` | `Boolean` | Hides the entered text when `true`. Default `false`.
-| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input. Can be one of `datetime`, `phone`, `number`, `url`, or `email`.
-| `returnKeyType` | `ReturnKeyType` | The label of the return key. Can be one of `done`, `next`, `go`, `search`, or `send`.
+| `text` | `String` | 텍스트필드의 값
+| `hint` | `String` | 플레이스홀더 텍스트
+| `editable` | `Boolean` | `true` 면 사용자가 텍스트필드의 값을 수정할 수 있음
+| `maxLength` | `Number` | 입력 가능한 글자수를 제한
+| `secure` | `Boolean` | `true` 면 입력된 텍스트를 숨깁니다. 기본값은 `false`.
+| `keyboardType` | `KeyboardType` | 쉬운 텍스트 입력을위해 커스텀 키워드를 보여줍니다. 가능한 값: `datetime`, `phone`, `number`, `url`, `email`.
+| `returnKeyType` | `ReturnKeyType` | 리턴키의 레이블. 가능한 값: `done`, `next`, `go`, `search`, `send`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `textChange`| Emitted when the text changes.
-| `returnPress`| Emitted when the return key is pressed.
-| `focus`| Emitted when the textfield is in focus.
-| `blur`| Emitted when the textfield loses focus.
+| `textChange`| 텍스트가 바뀌면 발생
+| `returnPress`| 리턴키가 눌리면 발생
+| `focus`| 텍스트필드가 포커스되면 발생
+| `blur`| 텍스트필드가 포커스를 잃으면 발생
 
 ## Native Component
 | Android | iOS |

From 25c6d2f9157397ca08cb5b4a251def88041cc1be Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Wed, 28 Feb 2018 20:57:55 +0200
Subject: [PATCH 13/14] translate to KO; components

---
 .../docs/ko/elements/components/text-view.md  | 38 +++++++++----------
 .../ko/elements/components/time-picker.md     | 28 +++++++-------
 .../docs/ko/elements/components/web-view.md   | 16 ++++----
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/content/docs/ko/elements/components/text-view.md b/content/docs/ko/elements/components/text-view.md
index eeebb3d4..22067ba9 100644
--- a/content/docs/ko/elements/components/text-view.md
+++ b/content/docs/ko/elements/components/text-view.md
@@ -1,11 +1,11 @@
 ---
-title: TextView
+title: 텍스트뷰 (TextView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview
-contributors: [MisterBrownRSA, rigor789, TheOriginalJosh, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The TextView component represents an editable multi-line box.
-The component can also be used to show any content readonly by setting the `editable` property to `false`.
+텍스트뷰(TextView) 컴포넌트는 편집가능한 여러 줄 박스를 나타냅니다.
+이 컴포넌트는 `editable` 프로퍼티를 `false` 로 설정함으로써 읽기전용 컨텐츠를 표시하는 데도 사용할 수 있습니다.
 
 ---
 
@@ -13,13 +13,13 @@ The component can also be used to show any content readonly by setting the `edit
 <TextView text="Multi\nLine\nText" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <TextView v-model="textViewValue" />
 ```
 
-### Displaying multi-line text with different styling
+### 다른 스타일의 여러 줄 텍스트를 표시
 
 ```html
 <TextView editable="false">
@@ -37,23 +37,23 @@ The component can also be used to show any content readonly by setting the `edit
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `text` | `String` | The value of the TextView.
-| `hint` | `String` | The placeholder text.
-| `editable` | `Boolean` | When `true`, the user can edit the value of the TextView.
-| `maxLength` | `Number` | Limits input to a certain number of characters.
-| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input. Can be one of `datetime`, `phone`, `number`, `url`, or `email`.
-| `returnKeyType` | `ReturnKeyType` | The label of the return key. Can be one of `done`, `next`, `go`, `search`, or `send`.
+| `text` | `String` | 텍스트 뷰의 값.
+| `hint` | `String` | 텍스트 플레이스홀더.
+| `editable` | `Boolean` | `true`로 설정되면 사용자가 텍스트뷰의 값을 변경할 수 있음.
+| `maxLength` | `Number` | 글자수를 제한.
+| `keyboardType` | `KeyboardType` | 쉬운 입력을 위한 커스텀 키보드를 보여줌. 가능한 값: `datetime`, `phone`, `number`, `url`, `email`.
+| `returnKeyType` | `ReturnKeyType` | 리턴키의 레이블. 가능한 값: `done`, `next`, `go`, `search`, `send`.
 
-## Events
+## 이벤트
 
-| name | description |
+| 이름 | 설명 |
 |------|-------------|
-| `textChange`| Emitted when the text changes.
-| `returnPress`| Emitted when the return key is pressed.
-| `focus`| Emitted when the textview is in focus.
-| `blur`| Emitted when the textview leaves focus.
+| `textChange`| 텍스트가 바뀌면 발생.
+| `returnPress`| 리턴키가 눌리면 발생
+| `focus`| 텍스트뷰가 포커스되면 발생
+| `blur`| 텍스트뷰가 포커스를 잃으면 발생
 
 ## Native Component
 | Android | iOS |
diff --git a/content/docs/ko/elements/components/time-picker.md b/content/docs/ko/elements/components/time-picker.md
index c87aa9b7..def8bc4c 100644
--- a/content/docs/ko/elements/components/time-picker.md
+++ b/content/docs/ko/elements/components/time-picker.md
@@ -1,11 +1,11 @@
 ---
-title: TimePicker
+title: 시간 선택 (TimePicker)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 
 ---
 
-The TimePicker component allows the user to select formatted time.
+시간선택(TimePicker) 컴포넌트는 사용자가 형식을 가진 시간을 선택할 수 있게 해줍니다.
 
 ---
 
@@ -13,7 +13,7 @@ The TimePicker component allows the user to select formatted time.
 <TimePicker :hour="selectedHour" :minute="selectedMinute" />
 ```
 
-**Note**: This component supports two-way data binding using `v-model`:
+**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
 
 ```html
 <TimePicker v-model="selectedTime" />
@@ -23,22 +23,22 @@ The TimePicker component allows the user to select formatted time.
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `hour` | `Number` | The hour of the TimePicker.
-| `minute` | `Number` | The minute of the TimePicker.
-| `time` | `Date` | The time of the TimePicker.
-| `minHour` | `Number` | The minimum selectable hour.
-| `maxHour` | `Number` | The maximum selectable hour.
-| `minMinute` | `Number` | The minimum selectable minute.
-| `maxMinute` | `Number` | The maximum selectable minute.
-| `minuteInterval` | `Number` | The interval between selectable minutes.
+| `hour` | `Number` | 시간 선택기의 시
+| `minute` | `Number` | 시간 선택기의 분
+| `time` | `Date` | 시간 선택기의 시간
+| `minHour` | `Number` | 선택 가능한 최소 시
+| `maxHour` | `Number` | 선택 가능한 최대 시
+| `minMinute` | `Number` | 선택 가능한 최소 분
+| `maxMinute` | `Number` | 선택 가능한 최대 분
+| `minuteInterval` | `Number` | 선택된 분들의 간격
 
 ## Events
 
 | name | description |
 |------|-------------|
-| `timeChanged` | Emitted when the selected time changes.
+| `timeChanged` | 선택된 시간이 바뀌면 발생
 
 ## Native Component
 | Android | iOS |
diff --git a/content/docs/ko/elements/components/web-view.md b/content/docs/ko/elements/components/web-view.md
index cbde62e0..d0332096 100644
--- a/content/docs/ko/elements/components/web-view.md
+++ b/content/docs/ko/elements/components/web-view.md
@@ -1,11 +1,11 @@
 ---
-title: WebView
+title: 웹뷰 (WebView)
 apiRef: https://docs.nativescript.org/api-reference/classes/_ui_web_view_.webview
-contributors: [MisterBrownRSA, rigor789, eddyverbruggen]
+contributors: [qgp9]
 ---
 
-The WebView component is used to display web content within your application. 
-You can use the component by providing a `src` attribute that points at a URL or a local HTML file.
+웹뷰(WebView) 컴포넌트는 어플리케이션 안에 웹 컨텐츠를 표시하기 위해 사용됩니다.
+Url 이나 로컬 HTML 파일을 가리키는 `src` 속성과 함께 컴포넌트를 사용할 수 있습니다.
 
 ---
 
@@ -17,16 +17,16 @@ You can use the component by providing a `src` attribute that points at a URL or
 
 ## Props
 
-| name | type | description |
+| 이름 | 타입 | 설명 |
 |------|------|-------------|
-| `src` | `String` | The source of the displayed page.
+| `src` | `String` | 표시되는 페이지의 소스
 
 ## Events
 
 | name | description |
 |------|-------------|
-| `loadStarted`| Emitted when the page has started loading in the WebView.
-| `loadFinished`| Emitted when the page has been loaded in the WebView.
+| `loadStarted`| 웹뷰에서 페이지가 로딩되기 시작할때 발생
+| `loadFinished`| 웹뷰의 페이지가 다 로딩되었을때 발생
 
 ## Native Component
 | Android | iOS |

From 00f52100a5ff58b8e1e8a54d9beb8da1ea33fd9a Mon Sep 17 00:00:00 2001
From: qgp9 <pauljang9@gmail.com>
Date: Wed, 28 Feb 2018 21:07:56 +0200
Subject: [PATCH 14/14] translate to KO; dialogs

---
 content/docs/ko/elements/dialogs/action.md  | 10 +++++-----
 content/docs/ko/elements/dialogs/alert.md   | 12 ++++++------
 content/docs/ko/elements/dialogs/confirm.md | 13 +++++++------
 content/docs/ko/elements/dialogs/login.md   |  8 ++++----
 content/docs/ko/elements/dialogs/prompt.md  | 11 +++++------
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/content/docs/ko/elements/dialogs/action.md b/content/docs/ko/elements/dialogs/action.md
index 5fa61a95..14fa4cce 100644
--- a/content/docs/ko/elements/dialogs/action.md
+++ b/content/docs/ko/elements/dialogs/action.md
@@ -1,10 +1,10 @@
 ---
-title: ActionDialog
-apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action 
-contributors: [MisterBrownRSA, rigor789]
+title: 액션다이얼로그 (ActionDialog)
+apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action
+contributors: [qgp9]
 ---
 
-The ActionDialog allows you to create a dialog with a list of selectable options.
+액션 다이얼로그(ActionDialog)로 선택가능한 옵션들의 리스트를 가진  다이얼로그를 만들 수 있습니다. selectable options.
 
 ---
 
@@ -21,4 +21,4 @@ module.exports = {
 }
 ```
 
-[> screenshots for=ActionDialog <]
\ No newline at end of file
+[> screenshots for=ActionDialog <]
diff --git a/content/docs/ko/elements/dialogs/alert.md b/content/docs/ko/elements/dialogs/alert.md
index 752d6ea5..be10df96 100644
--- a/content/docs/ko/elements/dialogs/alert.md
+++ b/content/docs/ko/elements/dialogs/alert.md
@@ -1,10 +1,10 @@
 ---
-title: AlertDialog
+title: 경고창 (AlertDialog)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#alert
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The AlertDialog will act as a simple modal notification that requires confirmation.
+경고창(AlertDialog)는 확인을 요청하는 간단한 모달 알림창으로 작동합니다.
 
 ---
 
@@ -21,7 +21,7 @@ module.exports = {
 }
 ```
 
-The AlertDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
+AlertDialog는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
 
 ```javascript
 alert('Hello!')
@@ -30,7 +30,7 @@ alert('Hello!')
 })
 ```
 
-anywhere in your code.
+여러분의 코드 어디에서라도 말이죠.
 
 
-[> screenshots for=AlertDialog <]
\ No newline at end of file
+[> screenshots for=AlertDialog <]
diff --git a/content/docs/ko/elements/dialogs/confirm.md b/content/docs/ko/elements/dialogs/confirm.md
index 578a24f2..6a6beb81 100644
--- a/content/docs/ko/elements/dialogs/confirm.md
+++ b/content/docs/ko/elements/dialogs/confirm.md
@@ -1,10 +1,10 @@
 ---
-title: ConfirmDialog
+title: 확인창 (ConfirmDialog)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#confirm
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The ConfirmDialog acts as a boolean (Yes/No) input dialog.
+확인창(ConfirmDialog) 는 부울값(예/아니오, Yes/No) 를 입력하는 다이얼로그입니다.
 
 ---
 
@@ -21,7 +21,8 @@ module.exports = {
 }
 ```
 
-The ConfirmDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
+ConfirmDialog는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
+
 
 ```javascript
 confirm('Are you ready?')
@@ -30,6 +31,6 @@ confirm('Are you ready?')
 })
 ```
 
-anywhere in your code.
+여러분의 코드 어디에서라도 말이죠.
 
-[> screenshots for=ConfirmDialog <]
\ No newline at end of file
+[> screenshots for=ConfirmDialog <]
diff --git a/content/docs/ko/elements/dialogs/login.md b/content/docs/ko/elements/dialogs/login.md
index c0abeb03..dd0de541 100644
--- a/content/docs/ko/elements/dialogs/login.md
+++ b/content/docs/ko/elements/dialogs/login.md
@@ -1,10 +1,10 @@
 ---
-title: LoginDialog
+title: 로그인창 (LoginDialog)
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#login
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The LoginDialog has two inputs that are used for prompting the user for credentials.
+로그인창(LoginDialog)는 사용자 인증에 사용되는 두개의 인풋을 가집니다.
 
 ---
 
@@ -21,4 +21,4 @@ module.exports = {
 }
 ```
 
-[> screenshots for=LoginDialog <]
\ No newline at end of file
+[> screenshots for=LoginDialog <]
diff --git a/content/docs/ko/elements/dialogs/prompt.md b/content/docs/ko/elements/dialogs/prompt.md
index 3707d02c..630d8dc5 100644
--- a/content/docs/ko/elements/dialogs/prompt.md
+++ b/content/docs/ko/elements/dialogs/prompt.md
@@ -1,10 +1,10 @@
 ---
 title: PromptDialog
 apiRef: https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt
-contributors: [MisterBrownRSA, rigor789]
+contributors: [qgp9]
 ---
 
-The PromptDialog allows you to prompt the user for input.
+PromptDialog는 사용자의 인풋을 요구할 수 있게 해줍니다.
 
 ---
 
@@ -21,8 +21,7 @@ module.exports = {
 }
 ```
 
-The PromptDialog is also available globally, so instead of importing it from the dialogs module, you can simply call
-
+PromptDialog 는 전역적으로 사용할 수 있기 때문에, 다이얼로그 모듈에서 임포트하는 대신, 다음과 같이 간단히 호출할 수 있습니다.
 ```javascript
 prompt('How are you?', 'Amazing!')
 .then(result => {
@@ -30,6 +29,6 @@ prompt('How are you?', 'Amazing!')
 })
 ```
 
-anywhere in your code.
+여러분의 코드 어디에서라도 말이죠.
 
-[> screenshots for=PromptDialog <]
\ No newline at end of file
+[> screenshots for=PromptDialog <]