옵시디언 - 이미지 정렬하는 방법

• 옵시디언(Obsidian)은 마크다운(Markdown)을 지원해서 기본적으로 이미지 정렬을 지원하지 않는다.
• 기본으로 이미지는 왼쪽에 정렬된다.
• 하지만, CSS 스니펫(snippets)을 통해 이미지를 가운데나 오른쪽에 정렬시킬 수 있다.

옵시디언에서 이미지를 정렬하는 방법

1. CSS 스니펫(snippets)에 정렬 코드 추가

CSS 스니펫을 통해 커스텀 폰트, 이미지 정렬 등 마크다운에서 할 수 없는 기능을 스타일 시트 언어인 CSS로 할 수 있다. CSS 파일은 /vault이름/.obsidian/snippets 폴더 아래 저장된다. Notepad, Sublime Text와 같은텍스트 편집기를 이용해서 파일을 만들거나 수정하면 된다.
이미 사용하는 CSS 파일이 있으면, 아래와 같이 사용하고 있던 코드 아래에 이미지를 정렬하는 부분을 추가한다.(/* image center align */와 /* image right align */ 부분)
파일이 없으면 image_align.css 와 같은 이름으로 새로 만들고, 아래 설정에서 CSS 스니펫을 활성화해 준다.

• 설정(Options) → 테마(Appearance) → CSS 스니펫(CSS snippets)

body {
  font-family: Adobe Clean UX, MARU Buri Beta, monospace;;
}

.theme-dark, .theme-light {
  --default-font: Actor, MARU Buri Beta, monospace;
  --font-family-editor: Actor, MARU Buri Beta, monospace;
}
strong{
  font-weight: 900 !important;
}

/* image center align */
img[alt*="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* image right align */
img[alt*="right"] {
  float:right;
  clear:right;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

2. 옵시디언 노트에서 이미지 정렬하기

아래와 같이 방법을 사용해서 가운데나 오른쪽에 정렬한다. 예제에서 400을 추가한 이유는 정렬이 잘 되는지 확인하기 위해 이미지 크기를 줄인 것이다. 크기 조절없이 정렬만 하면, ‘|400’ 부분을 빼준다.

• 방법 1. 아래 코드로 center나 right을 사용하여 정렬

![description|center|400](Obsidian_Logo.jpg)

• 방법 2. 아래 코드로 center나 right을 사용하여 정렬

![description|center|400](Obsidian_Logo.jpg)

• 방법 3. 아래 코드로 center나 right을 사용하여 정렬

<img alt=”center” src=”Obsidian_Logo.jpg”>

References

Centering Images in Reading Mode : r/ObsidianMD (reddit.com)

Links

[[_MOC_1_Obsidian]]