Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ko-KR): create card-grid.mdx #2353

Merged
merged 2 commits into from
Sep 19, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions docs/src/content/docs/ko/components/card-grids.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
---
title: 카드 그리드
description: Starlight에서 여러 카드를 그리드로 묶는 방법을 알아보세요.
sidebar:
order: 4
---

import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';

여러 개의 [`<Card>`](/ko/components/cards/) 또는 [`<LinkCard>`](/ko/components/link-cards/) 컴포넌트를 그리드에 래핑하려면 `<CardGrid>` 컴포넌트를 사용합니다.

import Preview from '~/components/component-preview.astro';

<Preview>

<CardGrid slot="preview">
<Card title="별" icon="star">
시리우스, 베가, 베텔게우스
</Card>
<Card title="달" icon="moon">
이오, 유로파, 가니메데
</Card>
</CardGrid>

</Preview>

## 가져오기

```tsx
import { CardGrid } from '@astrojs/starlight/components';
```

## 사용

### 카드 그룹화

충분한 공간이 있을 때 여러 개의 [`<Card>`](/ko/components/cards/) 컴포넌트를 `<CardGrid>` 컴포넌트로 그룹화하여 나란히 표시합니다.

<Preview>

```mdx {3,10}
import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
<Card title="확인하세요" icon="open-book">
강조하고 싶은 흥미로운 콘텐츠.
</Card>
<Card title="기타 기능" icon="information">
공유하고 싶은 추가 정보.
</Card>
</CardGrid>
```

<Fragment slot="markdoc">

```markdoc {1,9}
{% cardgrid %}
{% card title="확인하세요" icon="open-book" %}
강조하고 싶은 흥미로운 콘텐츠.
{% /card %}

{% card title="기타 기능" icon="information" %}
공유하고 싶은 추가 정보.
{% /card %}
{% /cardgrid %}
```

</Fragment>

<CardGrid slot="preview">
<Card title="확인하세요" icon="open-book">
강조하고 싶은 흥미로운 콘텐츠.
</Card>
<Card title="기타 기능" icon="information">
공유하고 싶은 추가 정보.
</Card>
</CardGrid>

</Preview>

### 링크 카드 그룹화

충분한 공간이 있을 때 여러 개의 [`<LinkCard>`](/ko/components/link-cards/) 컴포넌트를 `<CardGrid>` 컴포넌트를 사용하여 그룹화하여 나란히 표시합니다.

<Preview>

```mdx {3,6}
import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
<LinkCard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" />
<LinkCard title="컴포넌트" href="/ko/components/using-components/" />
</CardGrid>
```

<Fragment slot="markdoc">

```markdoc {1,5}
{% cardgrid %}
{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%}

{% linkcard title="컴포넌트" href="/ko/components/using-components/" /%}
{% /cardgrid %}
```

</Fragment>

<CardGrid slot="preview">
<LinkCard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" />
<LinkCard title="컴포넌트" href="/ko/components/using-components/" />
</CardGrid>

</Preview>

### 카드를 엇갈리게 배치

그리드의 두 번째 열을 수직으로 이동하여 시각적 흥미를 더하려면 `<CardGrid>` 컴포넌트에 [`stagger`](#stagger) 속성을 추가합니다.

이 속성은 홈 페이지에서 프로젝트의 주요 기능을 표시하는 데 유용합니다.

<Preview>

```mdx "stagger"
import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid stagger>
<Card title="확인하세요" icon="open-book">
강조하고 싶은 흥미로운 콘텐츠.
</Card>
<Card title="기타 기능" icon="information">
공유하고 싶은 추가 정보.
</Card>
</CardGrid>
```

<Fragment slot="markdoc">

```markdoc "stagger=true"
{% cardgrid stagger=true %}
{% card title="확인하세요" icon="open-book" %}
강조하고 싶은 흥미로운 콘텐츠.
{% /card %}

{% card title="기타 기능" icon="information" %}
공유하고 싶은 추가 정보.
{% /card %}
{% /cardgrid %}
```

</Fragment>

<CardGrid slot="preview" stagger>
<Card title="확인하세요" icon="open-book">
강조하고 싶은 흥미로운 콘텐츠.
</Card>
<Card title="기타 기능" icon="information">
공유하고 싶은 추가 정보.
</Card>
</CardGrid>

</Preview>

## `<CardGrid>` 속성

**구현:** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro)

`<CardGrid>` 컴포넌트는 다음과 같은 속성을 허용합니다:

### `stagger`

**타입:** `boolean`

그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다.
Loading