[옵시디언 플러그인 ] Style Settings (CSS 스닛펫 설정)

1. Style Settings 플러그인 설치 및 설정

목표: Obsidian에서 Style Settings 플러그인을 설치하여 CSS 스니펫을 관리할 수 있도록 합니다.

단계:

Obsidian을 열고 왼쪽 하단의 설정 톱니바퀴 아이콘을 클릭하여 '설정(Settings)' 메뉴로 이동합니다.
'커뮤니티 플러그인(Community plugins)' 섹션을 클릭합니다.
'플러그인 탐색(Browse)'을 선택하고 'Style Settings'를 검색합니다.
플러그인 목록에서 'Style Settings'를 찾아 설치하고 활성화합니다.

[옵시디언 플러그인 ] Style Settings (CSS 스닛펫 설정) image 1

2. CSS 스니펫 생성 및 추가

목표: 원하는 스타일의 CSS 스니펫을 생성하고 Obsidian에 추가합니다.

단계:

텍스트 편집기(예: Notepad, VSCode 등)를 사용하여 원하는 CSS 코드를 작성합니다.
파일을 .css 확장자를 가진 이름으로 저장합니다 (예: MyStyleSettings.css).

[옵시디언 플러그인 ] Style Settings (CSS 스닛펫 설정) image 2

(예시)

/* @settings
name: Elegant Theme Settings
id: elegant-theme-settings
settings:
    - 
        id: primary-color
        title: Primary Color
        description: Main color used throughout the UI.
        type: variable-color
        format: hex
        default: '#336699'
    - 
        id: base-font
        title: Base Font
        description: Font used for regular text.
        type: variable-text
        default: 'Georgia, serif'
    - 
        id: header-font
        title: Header Font
        description: Font used for headings.
        type: variable-text
        default: 'Helvetica, Arial, sans-serif'
    - 
        id: font-size
        title: Base Font Size
        description: The base font size for the text.
        type: variable-number-slider
        default: 16
        min: 12
        max: 24
        step: 1
    - 
        id: spacing-base
        title: Base Spacing
        description: The base spacing used for layout margins and paddings.
        type: variable-number-slider
        default: 8
        min: 4
        max: 20
        step: 2
*/

:root {
    --primary-color: var(--primary-color, #336699);
    --base-font: var(--base-font, 'Georgia, serif');
    --header-font: var(--header-font, 'Helvetica, Arial, sans-serif');
    --font-size: var(--font-size, 16px);
    --spacing-base: var(--spacing-base, 8px);
}

body {
    background-color: var(--primary-color);
    font-family: var(--base-font);
    font-size: var(--font-size);
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    margin-top: calc(var(--spacing-base) * 2);
    margin-bottom: var(--spacing-base);
}

p, ul, ol, dl {
    margin-top: 0;
    margin-bottom: var(--spacing-base);
}