옵시디언 CSS 스니펫

옵시디언 CSS 스니펫 완벽 가이드: 나만의 테마 만들기

옵시디언의 가장 큰 매력 중 하나는 바로 세세한 부분까지 커스터마이징할 수 있다는 점입니다. CSS 스니펫을 활용하면 옵시디언의 외관을 자신의 취향에 맞게 완벽하게 조정할 수 있습니다. 이 가이드에서는 CSS 스니펫을 생성하고 활용하는 방법부터 실용적인 커스터마이징 예시까지 상세히 알아보겠습니다.

1. CSS 스니펫 기초

CSS 스니펫 생성 방법

1. 설정(Settings) 열기
2. 외관(Appearance) 선택
3. CSS 스니펫(CSS snippets) 섹션으로 이동
4. 새 스니펫 생성 또는 기존 스니펫 편집

기본 구조

/* 스니펫 정보 */
/*
@name: 커스텀 테마
@version: 1.0.0
@author: 작성자 이름
@description: 테마 설명
*/

/* 글로벌 변수 설정 */
:root {
    --main-text-color: #333333;
    --background-primary: #ffffff;
    --accent-color: #5b8aff;
}

2. 기본 UI 요소 커스터마이징

기본 폰트 및 텍스트 스타일

/* 전체 폰트 설정 */
.theme-light {
    --font-text-theme: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-monospace-theme: 'JetBrains Mono', monospace;
}

/* 본문 텍스트 스타일 */
.markdown-preview-view {
    font-family: var(--font-text-theme);
    font-size: 16px;
    line-height: 1.6;
    color: var(--main-text-color);
}

/* 코드 블록 스타일 */
.markdown-preview-view code {
    font-family: var(--font-monospace-theme);
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
}

헤더 스타일링

/* 헤더 스타일 */
.markdown-preview-view h1 {
    font-size: 2em;
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

.markdown-preview-view h2 {
    font-size: 1.5em;
    color: #444;
    margin-top: 1.5em;
}

.markdown-preview-view h3 {
    font-size: 1.2em;
    color: #555;
}

3. 사이드바 및 탐색 영역 커스터마이징

파일 탐색기 스타일

/* 사이드바 기본 스타일 */
.nav-folder-title {
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 8px;
}

/* 파일 아이템 스타일 */
.nav-file-title {
    padding: 4px 8px 4px 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.nav-file-title:hover {
    background-color: var(--background-secondary);
}

/* 활성 파일 하이라이트 */
.nav-file-title.is-active {
    background-color: var(--background-modifier-active);
    color: var(--accent-color);
    font-weight: 600;
}

탭 바 스타일링

/* 탭 스타일 */
.workspace-tab-header {
    padding: 4px 16px;
    border-radius: 4px 4px 0 0;
}

.workspace-tab-header.is-active {
    background-color: var(--background-modifier-active);
    border-bottom: 2px solid var(--accent-color);
}

/* 탭 아이콘 스타일 */
.workspace-tab-header-inner-icon {
    color: var(--text-muted);
}

.workspace-tab-header.is-active .workspace-tab-header-inner-icon {
    color: var(--accent-color);
}

4. 마크다운 요소 스타일링

리스트 스타일

/* 글머리 기호 리스트 */
.markdown-preview-view ul {
    padding-left: 1.5em;
}

.markdown-preview-view ul li {
    list-style-type: disc;
    margin: 0.3em 0;
}

/* 순서 있는 리스트 */
.markdown-preview-view ol {
    padding-left: 1.5em;
}

.markdown-preview-view ol li {
    margin: 0.3em 0;
}

블록쿼트 스타일

/* 인용구 스타일 */
.markdown-preview-view blockquote {
    border-left: 4px solid var(--accent-color);
    background-color: var(--background-secondary);
    margin: 1em 0;
    padding: 1em;
    border-radius: 0 4px 4px 0;
}

.markdown-preview-view blockquote p {
    margin: 0;
    color: var(--text-muted);
}

5. 강조 요소 및 링크 스타일

강조 텍스트 스타일

/* 볼드 텍스트 */
.markdown-preview-view strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* 이탤릭 텍스트 */
.markdown-preview-view em {
    color: #666;
    font-style: italic;
}

/* 하이라이트 텍스트 */
.markdown-preview-view mark {
    background-color: rgba(255, 255, 0, 0.3);
    padding: 0 4px;
    border-radius: 2px;
}

링크 스타일링

/* 내부 링크 */
.internal-link {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.internal-link:hover {
    border-bottom-color: var(--accent-color);
}

/* 외부 링크 */
.external-link {
    color: #0077cc;
    text-decoration: none;
}

.external-link:hover {
    text-decoration: underline;
}

6. 테이블 및 코드 블록 스타일링

테이블 스타일

/* 테이블 기본 스타일 */
.markdown-preview-view table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.markdown-preview-view th {
    background-color: var(--background-secondary);
    font-weight: 600;
    text-align: left;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
}

.markdown-preview-view td {
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
}

/* 줄무늬 테이블 */
.markdown-preview-view tr:nth-child(even) {
    background-color: var(--background-secondary);
}

코드 블록 스타일링

/* 코드 블록 컨테이너 */
.markdown-preview-view pre {
    background-color: #2e3440;
    padding: 1em;
    border-radius: 8px;
    margin: 1em 0;
}

/* 코드 블록 내부 */
.markdown-preview-view pre code {
    color: #d8dee9;
    font-family: var(--font-monospace-theme);
    line-height: 1.5;
}

/* 문법 하이라이팅 */
.token.keyword {
    color: #81a1c1;
}

.token.string {
    color: #a3be8c;
}

.token.comment {
    color: #4c566a;
}

7. 다크 모드 지원

다크 모드 변수 설정

/* 다크 모드 테마 변수 */
.theme-dark {
    --background-primary: #2e3440;
    --background-secondary: #3b4252;
    --text-normal: #d8dee9;
    --text-muted: #9fa6b5;
    --accent-color: #88c0d0;
}

/* 다크 모드 특정 스타일 */
.theme-dark .markdown-preview-view {
    color: var(--text-normal);
}

.theme-dark .markdown-preview-view code {
    background-color: var(--background-secondary);
}

8. 반응형 디자인

미디어 쿼리 활용

/* 모바일 디바이스 */
@media screen and (max-width: 768px) {
    .markdown-preview-view {
        font-size: 14px;
    }

    .markdown-preview-view h1 {
        font-size: 1.8em;
    }

    .workspace-split.mod-vertical {
        flex-direction: column;
    }
}

/* 태블릿 디바이스 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .markdown-preview-view {
        font-size: 15px;
    }
}

마무리

CSS 스니펫을 통한 옵시디언 커스터마이징은 단순한 스타일 변경을 넘어서 작업 환경을 완벽하게 개인화할 수 있는 강력한 방법입니다. 이 가이드에서 소개한 다양한 스타일링 예시들을 기반으로 자신만의 독특한 테마를 만들어보세요.

특히 다크 모드 지원과 반응형 디자인을 고려한 스타일링은 현대적인 사용자 경험을 제공하는 데 필수적입니다. 각 요소들의 스타일을 세심하게 조정하고, 일관된 디자인 언어를 유지하면서 자신만의 완벽한 작업 환경을 구축해보세요.

이제 여러분도 옵시디언을 자신만의 스타일로 꾸밀 준비가 되셨나요? 이 가이드를 기반으로 하나씩 적용해보면서, 자신만의 독특한 테마를 만들어보세요.