콘텐츠로 이동
Starlight
Filters

    보조 내용

    페이지의 주요 콘텐츠와 함께 보조 정보를 표시하려면 <Aside> 컴포넌트를 사용합니다.

    미리보기

    가져오기

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

    사용

    섹션 제목: “사용”

    <Aside> 컴포넌트를 사용하여 보조 내용 (“admonitions” 또는 “callouts”이라고도 함)을 표시합니다.

    <Aside>에는 보조 내용의 색상, 아이콘 및 기본 제목을 제어하는 선택적 type 속성이 있을 수 있습니다.

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

    <Aside>보조 내용의 콘텐츠입니다.</Aside>
    

    <Aside type="caution">몇 가지 주의해야 할 내용입니다.</Aside>
    

    <Aside type="tip">
    

    보조 내용에는 다른 콘텐츠도 지원됩니다.
    

    ```js
    // 예시 코드 스니펫.
    ```
    

    </Aside>
    

    <Aside type="danger">비밀번호를 다른 사람에게 알려주지 마세요.</Aside>
    미리보기

    Starlight는 또한 <Aside> 컴포넌트의 대안으로 Markdown 및 MDX에서 보조 내용을 렌더링하기 위한 사용자 정의 구문을 제공합니다. 사용자 정의 구문에 대한 자세한 내용은 “Markdown에서 콘텐츠 작성하기” 가이드를 참조하세요.

    사용자 정의 제목 사용

    섹션 제목: “사용자 정의 제목 사용”

    title 속성을 사용하여 보조 내용의 기본 제목을 재정의합니다.

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

    <Aside type="caution" title="조심하세요!">
      사용자 정의 제목을 *사용하는* 경고 보조 내용입니다.
    </Aside>
    미리보기

    사용자 정의 아이콘 사용

    섹션 제목: “사용자 정의 아이콘 사용”

    Starlight의 기본 제공 아이콘 중 하나의 이름으로 설정된 icon 속성을 사용하여 기본 아이콘을 재정의합니다.

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

    <Aside type="tip" icon="starlight">
      사용자 정의 아이콘을 *사용하는* 보조 팁입니다.
    </Aside>
    미리보기

    <Aside> 속성

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

    구현: Aside.astro

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

    type

    섹션 제목: “type”

    타입: 'note' | 'tip' | 'caution' | 'danger'
    기본값: 'note'

    표시할 보조 내용의 유형입니다:

    • note 보조 내용은 파란색이며 정보 아이콘을 표시합니다 (기본값).
    • tip 보조 내용은 보라색이며 로켓 아이콘을 표시합니다.
    • caution 보조 내용은 노란색이며 삼각형 경고 아이콘을 표시합니다.
    • danger 보조 내용은 빨간색이며 팔각형 경고 아이콘을 표시합니다.

    title

    섹션 제목: “title”

    타입: string

    표시할 보조 내용의 제목입니다. title이 설정되어 있지 않으면 현재 보조 내용의 type이 기본 제목으로 사용됩니다.

    icon

    섹션 제목: “icon”

    타입: StarlightIcon

    보조 내용은 Starlight의 기본 제공 아이콘 중 하나의 이름으로 설정된 icon 속성을 포함할 수 있습니다.