From f81a4a4884aecefddf187cebf61656f895979f24 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 18:41:31 +0900 Subject: [PATCH] i18n(ko-KR): create `link-buttons.mdx` (#2358) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../docs/ko/components/link-buttons.mdx | 145 ++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 docs/src/content/docs/ko/components/link-buttons.mdx diff --git a/docs/src/content/docs/ko/components/link-buttons.mdx b/docs/src/content/docs/ko/components/link-buttons.mdx new file mode 100644 index 00000000000..4de72703b3a --- /dev/null +++ b/docs/src/content/docs/ko/components/link-buttons.mdx @@ -0,0 +1,145 @@ +--- +title: 링크 버튼 +description: 시각적으로 뚜렷한 콜투액션 링크를 위해 Starlight에서 링크 버튼을 만드는 방법을 알아보세요. +--- + +import { LinkButton } from '@astrojs/starlight/components'; + +시각적으로 뚜렷한 콜투액션 링크를 표시하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + 문서 읽기 + + + + +## 가져오기 + +```tsx +import { LinkButton } from '@astrojs/starlight/components'; +``` + +## 사용 + +시각적으로 구분되는 콜투액션 링크를 표시하려면 `` 컴포넌트를 사용합니다. +링크 버튼은 가장 관련성이 높거나 실행 가능한 콘텐츠로 사용자를 안내하는 데 유용하며 랜딩 페이지에서 자주 사용됩니다. + +``에는 [`href`](#href) 속성이 필요합니다. +선택적으로 `primary` (기본값), `secondary`, `minimal`로 설정할 수 있는 [`variant`](#variant) 속성을 사용하여 링크 버튼의 모양을 사용자 정의합니다. + + + +```mdx +import { LinkButton } from '@astrojs/starlight/components'; + +시작하기 + + 구성 참조 + +``` + + + +```markdoc +{% linkbutton href="/ko/getting-started/" %}시작하기{% /linkbutton %} + +{% linkbutton href="/ko/reference/configuration/" variant="secondary" %} +구성 참조 +{% /linkbutton %} +``` + + + + + 시작하기 + + 구성 참조 + + + + + +### 카드에 아이콘 추가 + +[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 링크 버튼에 아이콘을 포함시킵니다. + +텍스트 앞에 아이콘을 배치하기 위해 [`iconPlacement`](#iconplacement) 속성을 `start`로 설정할 수 있습니다 (기본값은 `end`). + + + +```mdx {6-7} +import { LinkButton } from '@astrojs/starlight/components'; + + + 관련: Astro + +``` + + + +```markdoc {4-5} +{% linkbutton + href="https://docs.astro.build/ko" + variant="secondary" + icon="external" + iconPlacement="start" %} +관련: Astro +{% /linkbutton %} +``` + + + + + 관련: Astro + + + + +## `` 속성 + +**구현:** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro) + +`` 컴포넌트는 다음 속성과 [기타 `` 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Element/a)도 허용합니다: + +### `href` + +**필수** +**타입:** `string` + +링크 버튼이 가리키는 URL입니다. + +### `variant` + +**타입:** `'primary' | 'secondary' | 'minimal'` +**기본값:** `'primary'` + +링크 버튼의 모양입니다. +테마 강조 색상을 사용하여 눈에 잘 띄는 콜투액션 링크를 만들려면 `primary`, 덜 눈에 띄는 링크를 만들려면 `secondary`, 최소한의 스타일을 적용한 링크를 만들려면 `minimal`로 설정합니다. + +### `icon` + +**타입:** `string` + +링크 버튼에는 [Starlight의 기본 제공 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함할 수 있습니다. + +### `iconPlacement` + +**타입:** `'start' | 'end'` +**기본값:** `'end'` + +링크 버튼 텍스트에 상대적인 아이콘의 위치를 결정합니다. \ No newline at end of file