보조 내용

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

미리보기

노트

필수적이지 않은 보충 정보는 <Aside>에 포함하세요.

가져오기

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

사용

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

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

MDX

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

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

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

<Aside type="tip">

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

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

</Aside>

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

Markdoc

{% aside %}
보조 내용의 콘텐츠입니다.
{% /aside %}

{% aside type="caution" %}
몇 가지 주의해야 할 내용입니다.
{% /aside %}

{% aside type="tip" %}
보조 내용에는 다른 콘텐츠도 지원됩니다.

```js
// 예시 코드 스니펫.
```
{% /aside %}

{% aside type="danger" %}
비밀번호를 다른 사람에게 알려주지 마세요.
{% /aside %}

미리보기

노트

보조 내용의 콘텐츠입니다.

주의

몇 가지 주의해야 할 내용입니다.

팁

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

// 예시 코드 스니펫.

위험

비밀번호를 다른 사람에게 알려주지 마세요.

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

사용자 정의 제목 사용

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

MDX

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

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

Markdoc

{% aside type="caution" title="조심하세요!" %}
사용자 정의 제목을 *사용하는* 경고 보조 내용입니다.
{% /aside %}

미리보기

조심하세요!

사용자 정의 제목을 사용하는 경고 보조 내용입니다.

<Aside> 속성

구현: Aside.astro

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

type

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

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

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

title

타입: string

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