콜아웃을 사용하여 노트의 흐름을 깨지 않으면서 추가 콘텐츠를 포함할 수 있어요. 콜아웃을 만들려면 인용 블록의 첫 번째 줄에 `[!info]`를 추가해요. 여기서 `info`는 _유형 식별자_예요. 유형 식별자에 따라 콜아웃의 외관과 느낌이 결정돼요. 사용 가능한 모든 유형을 확인하려면 [[#지원 유형]]을 참조하세요. 콜아웃은 [[Obsidian Publish 소개|Obsidian Publish]]에서도 기본적으로 지원돼요. ```markdown > [!info] 콜아웃 제목이에요 > 콜아웃 블록이에요. > **Markdown**, [[내부 링크|위키 링크]], [[파일 임베드|임베드]]를 지원해요! > ![[Engelbart.jpg]] ``` > [!info] 콜아웃 제목이에요 > 콜아웃 블록이에요. > **Markdown**, [[내부 링크|위키 링크]], [[파일 임베드|임베드]]를 지원해요! > ![[Engelbart.jpg]] [[명령어 팔레트|명령]]을 사용하여 `콜아웃 삽입`으로 기본 `[!note]` 콜아웃을 삽입할 수 있어요. 커서가 자동으로 콜아웃 이름 필드에 위치하므로, 기본 이름을 삭제하고 새 이름을 입력한 후 콘텐츠를 편집할 수 있어요. 기존 콘텐츠를 콜아웃으로 감싸려면 텍스트(목록, 코드 블록 등 포함)를 선택한 후 `콜아웃 삽입` 명령을 실행해요. 선택한 콘텐츠가 자동으로 콜아웃 안에 포함돼요. [[뷰와 편집 모드#실시간 미리보기|실시간 미리보기]]에서는 콜아웃 이름을 마우스 오른쪽 버튼으로 클릭하여 콜아웃 유형을 변경할 수도 있어요. ### 제목 변경 기본적으로 콜아웃의 제목은 유형 식별자를 제목 형식(Title Case)으로 표시해요. 유형 식별자 뒤에 텍스트를 추가하여 변경할 수 있어요: ```markdown > [!tip] 콜아웃은 사용자 지정 제목을 가질 수 있어요 > 이것처럼요. ``` > [!tip] 콜아웃은 사용자 지정 제목을 가질 수 있어요 > 이것처럼요. 본문을 생략하여 제목만 있는 콜아웃을 만들 수도 있어요: ```markdown > [!tip] 제목만 있는 콜아웃 ``` > [!tip] 제목만 있는 콜아웃 ### 접을 수 있는 콜아웃 유형 식별자 바로 뒤에 플러스(`+`) 또는 마이너스(`-`)를 추가하여 콜아웃을 접을 수 있게 만들 수 있어요. 플러스 기호는 기본적으로 콜아웃을 펼치고, 마이너스 기호는 접힌 상태로 표시해요. ```markdown > [!faq]- 콜아웃을 접을 수 있나요? > 네! 접을 수 있는 콜아웃에서는 콜아웃이 접히면 내용이 숨겨져요. ``` > [!faq]- 콜아웃을 접을 수 있나요? > 네! 접을 수 있는 콜아웃에서는 콜아웃이 접히면 내용이 숨겨져요. ### 중첩 콜아웃 콜아웃을 여러 단계로 중첩할 수 있어요. ```markdown > [!question] 콜아웃을 중첩할 수 있나요? > > [!todo] 네!, 가능해요. > > > [!example] 여러 단계의 중첩도 사용할 수 있어요. ``` > [!question] 콜아웃을 중첩할 수 있나요? > > [!todo] 네!, 가능해요. > > > [!example] 여러 단계의 중첩도 사용할 수 있어요. ### 콜아웃 사용자 지정 [[CSS 스니펫]]과 [[커뮤니티 플러그인]]을 사용하여 사용자 지정 콜아웃을 정의하거나 기본 설정을 덮어쓸 수 있어요. 사용자 지정 콜아웃을 정의하려면 다음 CSS 블록을 생성해요: ```css .callout[data-callout="custom-question-type"] { --callout-color: 0, 0, 0; --callout-icon: lucide-alert-circle; } ``` `data-callout` 속성의 값은 사용하려는 유형 식별자예요. 예를 들어 `[!custom-question-type]`과 같아요. - `--callout-color`는 빨강, 초록, 파랑에 대한 숫자(0–255)를 사용하여 배경색을 정의해요. - `--callout-icon`은 [lucide.dev](https://lucide.dev)의 아이콘 ID 또는 SVG 요소를 사용할 수 있어요. > [!warning] Lucide 아이콘 버전에 대한 참고 사항 > Obsidian은 주기적으로 Lucide 아이콘을 업데이트해요. 현재 포함된 버전은 아래에 표시되어 있어요. 사용자 지정 콜아웃에서는 이 버전 또는 이전 아이콘을 사용하세요. > ![[크레딧#^lucide]] > [!tip] SVG 아이콘 > Lucide 아이콘 대신 SVG 요소를 콜아웃 아이콘으로 사용할 수도 있어요. > > ```css > --callout-icon: '<svg>...custom svg...</svg>'; > ``` ### 지원 유형 여러 콜아웃 유형과 별칭을 사용할 수 있어요. 각 유형에는 서로 다른 배경색과 아이콘이 있어요. 이 기본 스타일을 사용하려면 예시에서 `info`를 `[!tip]` 또는 `[!warning]`과 같은 유형으로 바꾸세요. 콜아웃 유형은 실시간 미리보기 모드에서 콜아웃을 마우스 오른쪽 버튼으로 클릭하여 변경할 수도 있어요. [[#콜아웃 사용자 지정|콜아웃을 사용자 지정]]하지 않는 한, 지원되지 않는 유형은 기본적으로 `note` 유형으로 표시돼요. 유형 식별자는 대소문자를 구분하지 않아요. > [!note] > ```md > > [!note] > > Lorem ipsum dolor sit amet > ``` --- > [!abstract]- > ```md > > [!abstract] > > Lorem ipsum dolor sit amet > ``` 별칭: `summary`, `tldr` --- > [!info]- > ```md > > [!info] > > Lorem ipsum dolor sit amet > ``` --- > [!todo]- > ```md > > [!todo] > > Lorem ipsum dolor sit amet > ``` --- > [!tip]- > ```md > > [!tip] > > Lorem ipsum dolor sit amet > ``` 별칭: `hint`, `important` --- > [!success]- > ```md > > [!success] > > Lorem ipsum dolor sit amet > ``` 별칭: `check`, `done` --- > [!question]- > ```md > > [!question] > > Lorem ipsum dolor sit amet > ``` 별칭: `help`, `faq` --- > [!warning]- > ```md > > [!warning] > > Lorem ipsum dolor sit amet > ``` 별칭: `caution`, `attention` --- > [!failure]- > ```md > > [!failure] > > Lorem ipsum dolor sit amet > ``` 별칭: `fail`, `missing` --- > [!danger]- > ```md > > [!danger] > > Lorem ipsum dolor sit amet > ``` 별칭: `error` --- > [!bug]- > ```md > > [!bug] > > Lorem ipsum dolor sit amet > ``` --- > [!example]- > ```md > > [!example] > > Lorem ipsum dolor sit amet > ``` --- > [!quote]- > ```md > > [!quote] > > Lorem ipsum dolor sit amet > ``` 별칭: `cite`