From 71af91843118910be23e26023ceaeaddac4b711b Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 11:11:25 +0900 Subject: [PATCH] i18n(ko-KR): create `card-grid.mdx` --- .../content/docs/ko/components/card-grids.mdx | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 docs/src/content/docs/ko/components/card-grids.mdx diff --git a/docs/src/content/docs/ko/components/card-grids.mdx b/docs/src/content/docs/ko/components/card-grids.mdx new file mode 100644 index 00000000000..f9775ebd621 --- /dev/null +++ b/docs/src/content/docs/ko/components/card-grids.mdx @@ -0,0 +1,173 @@ +--- +title: 카드 그리드 +description: Starlight에서 여러 카드를 그리드로 묶는 방법을 알아보세요. +sidebar: + order: 4 +--- + +import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +여러 개의 [``](/ko/components/cards/) 또는 [``](/ko/components/link-cards/) 컴포넌트를 그리드에 래핑하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + + 시리우스, 베가, 베텔게우스 + + + 이오, 유로파, 가니메데 + + + + + +## 가져오기 + +```tsx +import { CardGrid } from '@astrojs/starlight/components'; +``` + +## 사용 + +### 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/cards/) 컴포넌트를 `` 컴포넌트로 그룹화하여 나란히 표시합니다. + + + +```mdx {3,10} +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc {1,9} +{% cardgrid %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +### 링크 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/link-cards/) 컴포넌트를 `` 컴포넌트를 사용하여 그룹화하여 나란히 표시합니다. + + + +```mdx {3,6} +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + +``` + + + +```markdoc {1,5} +{% cardgrid %} +{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%} + +{% linkcard title="컴포넌트" href="/ko/components/using-components/" /%} +{% /cardgrid %} +``` + + + + + + + + + + +### 카드를 엇갈리게 배치 + +그리드의 두 번째 열을 수직으로 이동하여 시각적 흥미를 더하려면 `` 컴포넌트에 [`stagger`](#stagger) 속성을 추가합니다. + +이 속성은 홈 페이지에서 프로젝트의 주요 기능을 표시하는 데 유용합니다. + + + +```mdx "stagger" +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc "stagger=true" +{% cardgrid stagger=true %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +## `` 속성 + +**구현:** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro) + +`` 컴포넌트는 다음과 같은 속성을 허용합니다: + +### `stagger` + +**타입:** `boolean` + +그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다. \ No newline at end of file