옵시디언 가이드
추천 플러그인
노트관리방법론
플러그인 사전

다다

옵시디언 활용, 개인 지식 관리

분류 전체보기 (352)

로그인

로그아웃 글쓰기 관리

Homemade Source 54

[CSS Snippet] 외부 링크 아이콘 표시하기 외부 링크 아이콘 표시하는 CSS Snippet입니다. 예시 CSS 코드 .external-link::before { padding-right: 3px; vertical-align: middle; height: 16px; width: 16px; padding-top: 0px; } .external-link[href*="."]::before { content: url("data:image/svg+xml,%3Csvg t='1631866977643' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='32115' data-darkreader-inline-fill='' width='20' height..
Homemade Source/Css Snippets 2024.02.29 0
[CSS Snippet] 탭 스타일 변경하기 옵시디언의 탭 스타일을 변경하는 CSS Snippet입니다. 예시 CSS 코드 /* Commpact Tabs Cleaner, smaller tabs with hidden buttons https://github.com/replete/obsidian-minimal-theme-css-snippets */ .workspace .mod-root .workspace-tab-header-container-inner { padding:0px 0 0px 5px; margin: 5px 0 2px -2px; } .workspace .mod-root .workspace-tab-header.is-active { background: none; box-shadow: none; } .workspace .mod-root .work..
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 체크박스를 원으로 변경하기 옵시디언의 체크박스 스타일을 원으로 변경하는 CSS snippet입니다. 예시 CSS 코드 input[type="checkbox"], .cm-formatting-task { -webkit-appearance: none; appearance: none; border-radius: 50%; border: 1px solid var(--text-faint); padding: 0; vertical-align: middle; } .cm-s-obsidian span.cm-formatting-task { color: transparent; width: 1.25em !important; height: 1.25em; display: inline-block; } .markdown-preview-view .task-list-..
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] Preview 박스 사이즈 변경하기 Preview 박스 사이즈 변경하는 CSS Snippet입니다. 예시 CSS 코드 .popover.hover-popover > .markdown-embed{ width: 500px; height: 700px; } width와 height의 크기를 원하는대로 변경해서 사용하세요.
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 이미지 정렬하기 이미지 링크에 구분자를 넣어서 이미지 정렬하는 CSS snippet입니다. 예시 CSS .markdown-preview-view .image-embed[src*="#center"] { display: block; margin-left: auto; margin-right: auto; width: 50%; } .markdown-preview-view .image-embed[src*="#left"] { display: block; margin-left: 0; margin-right: auto; width: 50%; } .markdown-preview-view .image-embed[src*="#right"] { display: block; margin-left: auto; margin-right: 0; wid..
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 구분선(---) 스타일 변경하기 구분선(hr) 스타일을 변경하는 CSS Snippet 입니다. 예시 CSS 코드 .markdown-preview-view hr, .markdown-source-view div.hr.cm-line hr { border-top: 1px solid; border-image: linear-gradient(to right, #ef201c, #e96036,#e6ef82, #e09a29, #41e249, #26c6da, #4e5ff2, #7e57c2, #de5fb8) 7; }
Homemade Source/Css Snippets 2024.02.28 0
[CSS Snippet] 클래식 스타일 callout 옵시디언 초기 버전의 callout 스타일입니다. 예시 CSS 코드 .callout { --callout-radius: 2px; padding: 0; background-color:var(--admonition-bg-color); border-left: solid 4px rgb(var(--callout-color)); } .callout .callout-title { padding: 6px; background-color: rgba(var(--callout-color), 0.4); } .callout .callout-content { padding: 5px 15px; background-color: rgba(var(--callout-color), 0.1); }
Homemade Source/Css Snippets 2024.02.26 0
[CSS Snippet] 윈도우 스타일 callout 윈도우 스타일 callout Snippet 입니다. 예시 CSS 코드 .callout { border:none; box-shadow: inset 0 0 0 2px rgba(var(--callout-color), 0.25), 0px 0.5px 1px 0.5px rgba(0, 0, 0, 0.1) !important; padding: 0; background-color:var(--admonition-bg-color); } .callout .callout-title { padding: 6px; background-color: rgba(var(--callout-color), 0.4); } .callout .callout-content { padding: 5px 15px; background-color: rgba(..
Homemade Source/Css Snippets 2024.02.26 0
[CSS Snippet] Vicious 테마 callout Vicious 테마 callout 스타일 CSS Snippet입니다. 예시 CSS 코드 .theme-dark, .theme-light { --callout-title-padding: 4px 12px; --callout-padding: 0; --callout-radius: var(--radius-m); } /*================================================*/ /* Root Colors /*================================================*/ :root { --800: #000000e0; --800-RGB: 8, 9, 14; --700: #17181e; --700-RGB: 23, 24, 30; --600: #292a2f; --60..
Homemade Source/Css Snippets 2024.02.25 0
[CSS Snippet] 단락 앞과 뒤의 간격을 사용자 정의 단락 앞과 뒤의 간격을 Style Settings으로 정의하는 Css snippet입니다. 이 스니펫은 Things 테마의 단락조절부분만 떼내온 것으로 편집모드에서 단락을 조절할 수 있습니다. Style Settings 에서 조절할 수 있다는 장점이 있습니다. 예시 Css Snippet body { --paragraph-margin-top:10px; --paragraph-margin-bottom:5px; } div:not(.HyperMD-header,.HyperMD-list-line).cm-line { padding-top:var(--paragraph-margin-top) !important; padding-bottom:var(--paragraph-margin-bottom) !important; } di..
Homemade Source/Css Snippets 2024.02.24 0
[CSS Snippet] PLN 테마 callout PLN 테마 callout 스타일입니다. 예시 CSS 코드 .theme-light, .theme-dark { --color-red-rgb: 191, 97, 106; --color-orange-rgb: 208, 135, 112; --color-yellow-light-rgb: 235, 203, 139; --color-yellow-dark-rgb: 228, 184, 96; --color-green-rgb: 163, 190, 140; --color-purple-rgb: 180, 142, 173; --color-sea-green-rgb: 143, 188, 187; --color-cyan-rgb: 136, 192, 208; --color-frost-rgb: 129, 161, 193; --color-blue-rgb:..
Homemade Source/Css Snippets 2024.02.24 0
[CSS Snippet] 태그 색상 변경하기 옵시디언의 태그 색상 변경 css snippet입니다. 읽기모드에서만 대응합니다. 예시 CSS 코드 .theme-light { --font-color-1: lch(40 36 125); --font-color-2: lch(40 36 80); --font-color-3: lch(39 36 170); --font-color-4: lch(40 36 35); --font-color-5: lch(40 36 305); --font-color-6: lch(39 36 260); --font-color-7: lch(40 36 350); --background-color-1: lch(87 16 125); --background-color-2: lch(87 16 80); --background-color-3: lch(87 1..
Homemade Source/Css Snippets 2024.02.21 0
[CSS Snippet] Live Preview 모드에서 헤딩 레벨 표시 옵시디언 Live Preview 모드에서 헤딩 레벨을 표시해주는 CSS snippet입니다. 예시 CSS 코드 .is-live-preview div:not(.HyperMD-header.HyperMD-header-1.cm-line.cm-active) > span.cm-header.cm-header-1::before, .is-live-preview div:not(.HyperMD-header.HyperMD-header-2.cm-line.cm-active) > span.cm-header.cm-header-2::before, .is-live-preview div:not(.HyperMD-header.HyperMD-header-3.cm-line.cm-active) > span.cm-header.cm-header-3:..
Homemade Source/Css Snippets 2024.02.21 0
[CSS Snippet] Mermaid를 노트 가로사이즈에 맞게 조정하기 가로사이즈에 맞게 조정하기 Mermaid 다이어그램의 가로 길이가 옵시디언의 노트 가로 사이즈보다 길 경우, 그래프 오른쪽이 짤려나온다. .mermaid svg { max-width: 100%; height: auto; } 위 CSS를 적용하면, 다음과 같이 노트 가로 사이즈에 맞춰진다. 가운데로 정렬 .mermaid svg{ display: block !important; margin: 0 auto !important; } Mermaid 다이어그램의 기본값은 왼쪽 정렬입니다. 위 CSS Snippet은 다이어그램을 가운데 정렬로 변경합니다.
Homemade Source/Css Snippets 2024.02.17 0
[CSS Snippet] 내부링크에 아이콘 넣기 옵시디언 내부링크에 아이콘을 넣는 CSS Snippet입니다. 내부링크에 아이콘 넣기 예시 CSS 코드 .markdown-source-view.mod-cm6 .cm-underline::before, .markdown-preview-view a.internal-link::before { margin-right: 4px; margin-left: 2px; content: ''; background-image: url("data:image/svg+xml,%3Csvg t='1626093724345' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3856' width='200' height='200..
Homemade Source/Css Snippets 2024.02.17 0

1 2 3 4

Obsidian Page

옵시디언 기초 가이드

노트 관리 방법론

플러그인 가이드

플러그인 사전

최근 글

인기 글

© Copyright 2024 Jnik

Uploading...

티스토리툴바