Obsidian에서 Timeline as Callout CSS 스니펫을 사용하여 타임라인을 구현하려면 아래의 단계를 따라 설치 및 사용법을 설정할 수 있습니다.

설치 방법

1. CSS 스니펫 파일 생성
   • Obsidian Vault 디렉토리 내.obsidian/snippets/폴더로 이동합니다.
   • timeline-callout.css라는 새 파일을 생성합니다.
   • 제공된 CSS 코드를 해당 파일에 복사하여 저장합니다.
2. CSS 스니펫 활성화
   • Obsidian 앱에서설정(Settings)→외형(Appearance)→CSS 스니펫(CSS Snippets)으로 이동합니다.
   • 새로 만든 스니펫 파일이 목록에 표시되지 않으면, 새로 고침(Refresh) 버튼을 클릭합니다.
   • timeline-callout.css를 활성화(Toggle On)합니다.

사용법

1. 기본 Callout 문법
   • 타임라인은 Obsidian의 Callout 기능을 기반으로 작동합니다.
   • 다음과 같은 문법을 사용하여 노트에 타임라인을 추가할 수 있습니다:

     > [!timeline]
Timeline Title
> 내용
2. 타임라인 구성 요소
   • 헤더(H1, H2, H3): 타임라인의 주요 이벤트를 구분하는 데 사용됩니다.
     • H1: 수평선으로 표시됩니다.
     • H2: 박스 형태로 강조됩니다.
     • H3: 점(bullet) 스타일로 표시됩니다.
   • 목록: 번호 매기기 목록(Ordered List) 또는 불릿 목록(Unordered List)을 추가하여 세부 내용을 작성할 수 있습니다.
   • 이미지: 타임라인에 이미지를 삽입하면 자동으로 적절한 여백과 함께 표시됩니다.
3. 예제

   > [!timeline]
프로젝트 일정
> # 2024년 1월
> ## 계획 수립
> ### 팀 미팅
> - 주요 목표 설정
>
> ## 작업 시작
> ### 디자인 초안 작성
> ![디자인 이미지](image-link.png)

커스터마이징

• CSS 코드 내에서 색상, 글꼴 크기 등을 사용자 정의할 수 있습니다:
  • --callout-color: 타임라인의 기본 색상 조정.
  • --callout-icon: 아이콘 변경 (예:clock→ 다른 Lucide 아이콘).
  • 텍스트 스타일, 여백, 선 스타일 등도 필요에 따라 수정 가능합니다.

주의사항

• 다른 테마나 기존 CSS 스니펫과 충돌이 발생할 수 있으므로 테스트 후 적용하세요.
  
  
• Obsidian의 최신 버전을 사용하는 것이 권장됩니다.

이 스니펫은 간단한 설정만으로도 시각적으로 매력적인 타임라인을 생성할 수 있는 강력한 도구입니다.

/*

TIMELINE as Callout

*/

.callout[data-callout="timeline"] {

--callout-color: var(--callout-info);

--callout-icon: clock;

/* links */

& a {

color: inherit;

font-weight: inherit;

text-decoration: none;

font-style: inherit;

background: none;

padding-inline: 0;

/* hashtags */

&[href^="#"]{

text-decoration: none;

padding-inline: .4rem;

}

/* show links on hover */

&:hover {

text-decoration: underline solid;

color: inherit;

}

}

/* content */

& .callout-content {

background-color: none;

padding: 2rem 0;

/* H1 as horizontal line */

& h1 {

font-weight: var(--font-normal);

font-size: var(--font-text-size);

color: var(--text-normal) !important;

padding: 0 !important;

margin-right: 1rem !important;

text-align: right;

border-top: dotted .1rem;

}

/* H2 as box */

& h2 {

font-weight: var(--font-normal) !important;

font-size: var(--font-text-size);

color: var(--text-muted);

text-align: left !important;

margin: 0 1rem;

padding: .2rem 1rem .2rem 1rem;

border: solid .1rem;

border-radius: .4rem;

display: inline-block;

}

/* vertical line */

& :is(h1, h3, p, ul, ol) {

margin: 0 0 0 3.2rem;

border-left: solid .1rem;

padding: 0 1rem;

border-color: var(--text-muted);

font-weight: var(--font-normal);

color: var(--text-normal);

font-size: var(--font-text-size);

/* space before H1 */

&:has(+ h1) {

padding-bottom: 1rem;

}

/* space before H2 */

&:has(+ h2) {

padding-bottom: 1.5rem;

}

}

/* H3 as bullet */

& h3::before {

border: .4rem solid;

border-radius: .4rem;

border-color: var(--text-muted);

content: "";

display: block;

height: 0;

left: -1.45rem;

position: relative;

top: 1rem;

width: 0;

z-index: 1;

}

& h3 {

color: var(--text-normal);

}

/* text */

& :is(p, ol, ul, li) {

color: var(--text-faint);

}

/* images */

& img {

padding: 1rem;

}

}

}