[obsidian] 커스텀 CSS 사용하기

 

Obsidian 커스텀 CSS 사용하기

obsidian에서 아무리 다양한 테마를 제공한다 하더라도, 내 입맛에 맞지 않는 부분은 있기 마련이다.

그리고, 그 작은 한 부분을 만족시켜주는 다른 테마를 찾는다는 것도 어찌보면 낭비가 될 법하다.

취향에 맞는 테마에 정착했다면, 세부 튜닝은 어느 정도 스스로 할 수 있다.

단, CSS에 대한 이해가 어느정도 뒷받침 되어야 한다.

CSS를 알고 있다면, 쉽게 할 수 있지만 모르더라도 여러 번의 시행착오를 거친다면 입맛에 맞도록 옵시디언을 바꿔갈 수 있을 것이다.

 

커스텀 CSS를 사용하려면?

Settings > Appearance > CSS snippets 메뉴를 찾아보자.

기존에 등록한 사용자 정의 CSS 파일이 없다면, 아래 스크린샷처럼 나타날 것이다.

폴더 버튼을 클릭하면, obsidian에서 인식하는 경로에 CSS 파일을 만들 수 있게 된다.

test.css 라는 파일을 해당 경로에 생성하고 enable 시키면, 아래와 같이 된다.

즉, 이후 커스텀 CSS는 저 파일에 기록해 주면 된다.

폴더가 나타내는 것처럼, obsidian은 해당 경로내 css 관련 파일들을 모두 인식하게 된다.

따라서, 용도에 맞도록 등록하고 관리할 수 있다.

 

적용 샘플

이와 같이 노출되는 것의 제목을 다른 색으로 변경하고자 한다.

헤더를 다음과 같은 색으로 변경한다.

 

화면내 위치 확인 하기

어떤 CSS 요소를 편집하면 좋을지는 어떻게 알 수 있을까?

Obisidan내에도 웹브라우저처럼 개발자 모드 기능이 있고, 이를 활용하여 상세 내용을 확인할 수 있다.

왼도우즈 버전 Obsidian에서는 ctrl + shift + i를, 맥 버전 Obsidian에서는 Option + Command + i키를 누르면 개발자 툴이 활성화 된다.

커서 버튼을 누르고, 본문에 커서를 두고 이동해보자.

그러면, 해당 엘리먼트의 위치가 (1)과 같이 표시될 것이다.

소스상 그 엘리먼트의 위치가 (2)와 같이 마크된다.

동시에, 해당 부분에 관련된 CSS 정보들이 (3)에 표시된다.

 

반응형

 

원하는 대로 CSS 편집하기

이제 (3)에 나타난 정보를 바탕으로 원하는대로 수정하면 된다.

앞서 지정한 커스텀 CSS 파일을 열고, (3)에 표시된 CSS 내용을 복사하자.

h2, .markdown-rendered h2, .HyperMD-header-2, .HyperMD-list-line .cm-header-2 {
    font-variant: var(--h2-variant);
    letter-spacing: -0.015em;
    line-height: var(--h2-line-height);
    font-size: var(--h2-size);
    /* 변경 부분: color */
    color: var(--h5-color);
    font-weight: var(--h2-weight);
    font-style: var(--h2-style);
    font-family: var(--h2-font);
}

.markdown-preview-view h2, .HyperMD-header-2, .cm-header-2 {
    letter-spacing: -0.02em;
    line-height: 1.3;
    font-size: var(--h2) !important;
    /* 변경 부분: color */
    color: var(--h5-color);
    font-weight: var(--h2-weight) !important;
}

위와 같이 변경하면, 기존 테마에서 H2에 해당하는 부분의 색깔을 H5의 색깔로 덮어쓰게 된다.

물론, 다른 색깔을 직접 지정해 줘도 된다.

커스텀 CSS 파일을 저장하고 나면, Preview 모드와 Rendering 모드 모두에 커스텀 CSS가 적용된 것을 확인할 수 있을 것이다.

 

더 보기

[obsidian] 코드로 간트차트(Gantt) 작성하기

[obsidian] templater 플러그인 - 문서 템플릿 도우미

[obsidian] emoji 플러그인 (emoji toolbar)

[obsidian] kanban (칸반) 플러그인

[obsidian] task 플러그인 - 할 일 관리

[obsidian] advanced tables 플러그인 추천

[obsidian] admonition 플러그인 - 위키처럼 꾸미려면?

[obsidian] MindMap 플러그인

[obsidian] PlantUML 플러그인

[obsidian] 즐겨찾기 - starred

[obsidian] URL 복붙을 쉽게 해주는 플러그인 추천

[obsidian] 목차(Table of Contents) 플러그인 사용하기

[obsidian] 아웃라이너(outliner) 플러그인 추천

[책리뷰] 제텔카스텐 - 글 쓰는 인간을 위한 두 번째 뇌

사람이 생각하는 법을 닮은 툴 - Roam Research와 Obsidian

PC/ 모바일에서 obsidian 동시 사용하기

logseq와 obsidian에서 호환되는 마크다운 문법?