콘텐츠로 이동
Starlight
Filters

    링크 카드

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

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

    가져오기

    섹션 제목: “가져오기”
    import { LinkCard } from '@astrojs/starlight/components';

    사용

    섹션 제목: “사용”

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

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

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

    링크 설명 추가

    섹션 제목: “링크 설명 추가”

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

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

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

    링크 카드 그룹화

    섹션 제목: “링크 카드 그룹화”

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

    <LinkCard> 속성

    섹션 제목: “<LinkCard> 속성”

    구현: LinkCard.astro

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

    title

    섹션 제목: “title”

    필수
    타입: string

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

    href

    섹션 제목: “href”

    필수
    타입: string

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

    description

    섹션 제목: “description”

    타입: string

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