옵시디언 콜아웃 사용법 멀티 칼럼 모듈러 CSS 적용
옵시디언 콜아웃 기능은 노트에서 강조할 부분에 적용하여 사용할 수 있습니다.
콜아웃은 텍스트 상자에 스타일을 적용하여 텍스트의 배경색, 테두리, 아이콘 또는 라벨 등을 커스터마이징하여 내용을 돋보이게 할 수 있습니다. 그리고 대시보드에 적용해서 dataview, tasks 등의 플러그인 기능을 활용하면 더욱 많은 정보를 홈페이지에서 볼 수 있습니다.
이번 글에서는 콜아웃의 기능에 대해 조금 더 자세히 살펴보고, 또 새로운 CSS를 적용해서 대시보드나 일반적인 글에도 활용해보는 시간을 갖도록 하겠습니다.
그리고 이번 글에서 소개드리는 CSS를 적용하면 카드뷰, 멀티 칼럼, 인라인 이미지 등의 기능을 추가적으로 사용할 수 있습니다.
옵시디언 콜아웃 입력 방법
1. 마크다운
마크다운을 활용해서 아래와 같이 입력하면 콜아웃을 입력할 수 있습니다.
> [!note]
>
2. 마우스 우클릭
편집기 화면에서 마우스 오른쪽 버튼을 클릭한 다음 Insert – Callout 을 눌러서 쉽게 입력이 가능합니다.
3. 명령 팔레트
단축키Cmd + P를 눌러서 명령 팔레트를 열고 ‘콜아웃’을 입력한 다음 콜아웃 삽입이 가능합니다.
콜아웃 토글
콜아웃을 토글하여 감추거나 보이게 만드는 방법입니다.
> [!note]뒤에 +또는 -를 추가하면 토글 버튼을 만들 수 있습니다.
-를 입력하면 기본적으로 상자가 닫힌 상태가 되고, +를 입력하면 토글이 열린 상태에서 나타납니다.
콜아웃 중복
기본적으로 콜아웃을 작성해주시고 하위 콜아웃의 앞에는 꺾쇠 괄호를 두 개씩 >>넣어줍니다.
그리고 하위로 들어갈 콜아웃 중간에는 >을 하나씩 넣어줍니다.
> [!note]
>> [!note] 제목
>> 내용
>
>> [!NOTE]- Title
>> Contents
>
>> [!tip]+ Title
>> Contents
모듈 CSS 소개
아래에서 소개시켜드릴 CSS로는 여러가지 기능을 사용할 수 있습니다.
카드뷰
콜아웃 멀티 칼럼
대시보드 만들기
인라인 이미지
콜아웃 사용 방법 및 모듈러 CSS 설명 영상
CSS 다운로드 및 적용
[모듈러 CSS 다운로드](https://github.com/efemkay/obsidian-modular-css-layout/blob/main/MCL Multi Column.css)
CSS 파일을 다운 받으신 다음 CSS 스니펫 폴더에 넣어주고, 옵시디언의 설정 – 테마 – CSS 스니펫에서 새로고침 버튼을 누른 후 활성화 시켜주면 사용이 가능합니다.
List Column/Grid/Card 참조
칼럼, 그리드, 카드를 생성하는데 적용할 수 있는 구문은 아래와 같습니다.
프론트매터나 tag에 적용이 가능한데, 프론트매터에 적용하게 되면 노트의 전체에 적용이 되므로, tag를 사용하여 적용할 범위를 지정해서 나눌 수 있습니다.
인라인 이미지 (float callout)
float를 사용하면 인라인에 이미지를 추가할 수 있습니다.
사용 방법은 예시에서 처럼 콜아웃 뒤에 파이프|를 추가하고 앞에서부터 순서대로 넣을 수 있습니다.
맨 앞에 들어가는 float는 라이브 미리 보기 모드에서도 적용된 모습을 볼 수 있습니다만 간혹 정상적인 동작을 하지 않을 때가 있습니다.
dashboard.css 업데이트
콜아웃에 tasks 플러그인을 적용하는 경우에 리스트 간의 간격이 넓어지는 이슈로 인해 코드를 추가해서 깃허브에 업로드를 하였습니다.
