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

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

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

단계:

1. Obsidian을 열고 왼쪽 하단의 설정 톱니바퀴 아이콘을 클릭하여 '설정(Settings)' 메뉴로 이동합니다.

2. '커뮤니티 플러그인(Community plugins)' 섹션을 클릭합니다.

3. '플러그인 탐색(Browse)'을 선택하고 'Style Settings'를 검색합니다.

4. 플러그인 목록에서 'Style Settings'를 찾아 설치하고 활성화합니다.

2. CSS 스니펫 생성 및 추가

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

단계:

1. 텍스트 편집기(예: Notepad, VSCode 등)를 사용하여 원하는 CSS 코드를 작성합니다.

2. 파일을 .css 확장자를 가진 이름으로 저장합니다 (예: MyStyleSettings.css).

(예시)

/* @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);
}

1. Obsidian을 열고 '설정'으로 이동한 다음 '외모(Appearance)' 섹션을 선택합니다.

1. 'CSS 스니펫' 탭을 선택하고 '스니펫 폴더 열기'를 클릭합니다.

1. 생성한 CSS 파일을 스니펫 폴더로 복사합니다.

2. 'CSS 스니펫' 페이지를 새로 고침하고, 추가한 스니펫 옆의 토글을 클릭하여 활성화합니다.

3. 스니펫 설정 조정

목표: Style Settings 플러그인을 통해 추가한 CSS 스니펫의 세부 설정을 조정합니다.

단계:

1. 설정으로 돌아가 'Style Settings' 섹션을 찾습니다.

1. 이 섹션에서 여러 설정을 조정할 수 있습니다. 예를 들어, 색상, 폰트, 간격 등을 변경할 수 있습니다.

정리

이 과정을 통해 Obsidian에서 Style Settings 플러그인을 설치하고, CSS 스니펫을 만들어 추가하며, 스니펫 설정을 조정하는 방법을 학습하였습니다. 이제 각자의 필요에 맞게 Obsidian의 스타일을 커스터마이징할 수 있습니다.