링크 카드

다른 페이지로 연결되는 링크를 눈에 잘 띄게 표시하려면 <LinkCard> 컴포넌트를 사용하세요.

미리보기

Starlight 사용자 정의 사용자 정의 스타일, 글꼴 등을 사용하여 스타라이트 사이트를 나만의 사이트로 만드는 방법을 알아보세요.

가져오기

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

사용

<LinkCard> 컴포넌트를 사용하여 링크를 눈에 잘 띄게 표시합니다. 각 <LinkCard>에는 title 및 href 속성이 필요합니다.

MDX

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

<LinkCard
  title="Markdown으로 콘텐츠 작성"
  href="/ko/guides/authoring-content/"
/>

Markdoc

{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%}

미리보기

Markdown으로 콘텐츠 작성

링크 설명 추가

description 속성을 사용하여 링크 카드에 간단한 설명을 추가합니다.

MDX

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

<LinkCard
  title="국제화"
  href="/ko/guides/i18n/"
  description="여러 언어를 지원하도록 Starlight를 구성합니다."
/>

Markdoc

{% linkcard
   title="국제화"
   href="/ko/guides/i18n/"
   description="여러 언어를 지원하도록 Starlight를 구성합니다." /%}

미리보기

국제화 여러 언어를 지원하도록 Starlight를 구성합니다.

링크 카드 그룹화

<CardGrid> 컴포넌트를 사용해 여러 개의 링크 카드를 그룹화하여 충분한 공간이 있을 때 나란히 표시합니다. 예시는 “링크 카드 그룹화” 가이드를 참조하세요.

<LinkCard> 속성

구현: LinkCard.astro

<LinkCard> 컴포넌트는 다음 속성과 기타 <a> 요소의 속성도 허용합니다:

title

필수
타입: string

표시할 링크 카드의 제목입니다.

href

필수
타입: string

카드와 상호 작용할 때 연결할 URL입니다.

description

타입: string

제목 아래에 표시할 설명 (선택 사항)입니다.