Obsidian Callout 변환기

브라우저 처리

Obsidian 콜아웃(> [!NOTE] 제목)을 블로그·웹페이지에 넣을 수 있는 HTML aside로 바꾸고, 접는 콜아웃(-/+)은 details 태그로 만듭니다. HTML을 콜아웃으로 되돌릴 수도 있습니다.

사용 전 확인

파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.

도구 실행입력 후 결과 확인

Obsidian Callout 변환기 샘플 실행

Obsidian의 콜아웃은 > [!NOTE], > [!WARNING]처럼 쓰는 강조 상자입니다. 다른 사이트로 옮기면 그냥 인용문으로 보이거나 [!NOTE] 글자가 그대로 드러나는데, 이 변환기는 콜아웃을 HTML 상자로 바꿔 스타일을 입힐 수 있게 해 줍니다.

브라우저 처리

샘플 입력

> [!NOTE] 참고
> **중요한** 내용
> - 항목

> [!warning]- 접힌 경고
> 조심하세요

샘플 결과

<aside class="callout callout-note">
<strong>참고</strong>
<p><strong>중요한</strong> 내용</p>
<ul>
<li>항목</li>
</ul>
</aside>

<details class="callout callout-warning">
<summary>접힌 경고</summary>
<p>조심하세요</p>
</details>

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

Obsidian Callout 변환기 사용 가이드

'Callout → HTML'은 콜아웃마다 <aside class="callout callout-note">로 감싸고 제목을 <strong>으로 넣으며, 안의 내용은 굵게·목록·링크까지 HTML로 바꿉니다. > [!WARNING]- 처럼 접기 표시가 있으면 <details>와 <summary>로 만들어 눌러서 펼치는 상자가 되고, +는 처음부터 펼친 상태(open)입니다.

제목을 적지 않으면 종류 이름(Note, Warning 등)이 제목이 됩니다. 'HTML → Callout'은 이 형식의 HTML을 다시 > [!TYPE] 콜아웃으로 되돌립니다.

사용 방법

'변환할 내용' 칸에 콜아웃이 든 노트를 붙여 넣습니다.
'변환 방향'에서 'Callout → HTML' 또는 'HTML → Callout'을 고릅니다.
'실행'을 누른 뒤 결과를 복사하고, 사이트 CSS에 .callout-note, .callout-warning 같은 스타일을 정의합니다.

예시: 일반 콜아웃과 접힌 콜아웃

입력

> [!NOTE] 참고
> **중요한** 내용
> - 항목

> [!warning]- 접힌 경고
> 조심하세요

결과

<aside class="callout callout-note">
<strong>참고</strong>
<p><strong>중요한</strong> 내용</p>
<ul>
<li>항목</li>
</ul>
</aside>

<details class="callout callout-warning">
<summary>접힌 경고</summary>
<p>조심하세요</p>
</details>

종류 이름은 소문자 클래스(callout-warning)가 되고, 내용 속 Markdown 서식은 HTML로 바뀝니다.

이럴 때 쓰면 좋아요

Obsidian 노트를 블로그에 올리며 강조 상자를 살릴 때
기술 문서의 주의·팁 상자를 웹페이지 HTML로 옮길 때
접는 콜아웃을 펼침 상자(details)로 만들어 긴 내용을 줄일 때
웹페이지에서 복사한 aside 상자를 Obsidian 콜아웃으로 되돌릴 때

문제가 생겼을 때

변환한 상자에 색이 없음

결과는 구조(HTML)만 만듭니다. 사이트 CSS에 .callout { border-left: 4px solid; padding: 12px } 같은 스타일과 종류별 색을 추가하세요.

콜아웃이 변환되지 않음

첫 줄이 '> [!종류]'로 시작해야 하고 내용 줄도 모두 >로 시작해야 합니다. 중간에 > 없는 줄이 있으면 거기서 콜아웃이 끝납니다.

활용 팁

GitHub는 > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] 다섯 가지를 직접 지원합니다. GitHub에만 올릴 문서라면 변환하지 않아도 됩니다.
콜아웃 안에 코드 블록이 있으면 HTML로 바꾼 뒤 코드 모양이 유지되는지 Markdown 소스·렌더링 비교기로 확인하세요.

자주 묻는 질문

어떤 종류 이름을 쓸 수 있나요?

NOTE, TIP, WARNING, INFO처럼 영문·숫자로 된 이름이면 모두 변환하고, 이름은 그대로 클래스에 들어갑니다. 대소문자는 구분하지 않습니다.

중첩 콜아웃도 되나요?

바깥 콜아웃만 상자로 바뀌고, 안쪽 > > 줄은 인용문으로 들어갑니다. 중첩은 직접 다듬어야 합니다.

'HTML → Callout'은 아무 HTML이나 되나요?

아니요. class="callout callout-종류"가 붙은 aside 또는 details 태그만 콜아웃으로 되돌립니다.