Callout

---

💬 Callout이란

info

강조가 필요한 추가 콘텐츠를 보여주거나, 내용을 그룹화할 때 사용하는 문법이다.

🛠 사용법

제목 변경

• 식별자 뒤에 제목을 추가하면 표시되는 제목을 바꿀 수 있다.

> **제목명**  
>
> 내용 
{: .notice--info}  

접기 펼치기

• 식별자 뒤에 + 또는 -를 추가하면 접기 기능을 사용할 수 있다.

> [!faq]-
> Are callouts foldable?
> Yes! In a foldable callout, the contents are hidden when the callout is collapsed. 
{: .notice--info}  

중첩

• 여러 수준으로 중첩할 수 있다.

> **question**
>
> Can callouts be nested?
>> **todo**
>
>> Yes!, they can.
>>> **example**
>
>>> You can even use multiple layers of nesting. 
{: .notice--info}  

Custom Callout

• CSS 스니펫을 수정하면 사용자 정의 callout을 만들 수 있다.

.callout[data-callout="custom-question-type"] {
	--callout-color: <rgb 값으로 된 컬러>;
	--callout-icon: <lucide icon id>;
	/*--callout-icon: '<svg>...custom svg...</svg>';*/
}

📚 지원 유형

메모

> **note**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

추상

> **abstract**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

정보

> **info**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

할 일

> **todo**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

팁

> **tip**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

성공

> **success**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

질문

> **question**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

경고

> **warning**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

실패

> **failure**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

위험

> **danger**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

버그

> **bug**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

예시

> **example**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

인용

> **quote**
>
> Lorem ipsum dolor sit amet 
{: .notice--info}  

📌 정리

• Callout은 내용 강조와 정보 분리에 유용하다.
• 제목 변경, 접기, 중첩을 조합하면 가독성을 높일 수 있다.
• CSS 스니펫으로 사용자 정의 callout도 만들 수 있다.

---

연결문서

• lucide icons