# 배경
![[옵시디언 모바일 화면.png|w50|center]]
### 문제점
이미지 크기를 고정값으로 설정했더니 모바일 화면에서 레이아웃이 깨짐.
HTML 태그로 화면 크기에 맞는 이미지 비율을 설정하려 했으나, 옵시디언 마크다운에서는 HTML 태그가 제대로 작동하지 않아 이미지가 표시되지 않음.
```
![[image.png|center|200]]
```
<br>
### 해결 방법
CSS 파일에 이미지 비율을 미리 정의해두고 이를 적용하는 방식으로 해결.
<br>
# CSS 적용 방법
1. **옵시디언 폴더 열기**
- **Windows**: `C:\Users\<사용자명>\AppData\Roaming\Obsidian`
- **macOS**: `/Users/<사용자명>/Library/Application Support/Obsidian`
- 아이클라우드에 저장한 경우, iCloud Drive 내 위치 확인
<br>
2. **CSS를 적용할 볼트 폴더 열기**
- CSS를 적용할 옵시디언 볼트 폴더를 엽니다.
<br>
3. **숨겨진 폴더 열기**
- **Windows**: 파일 탐색기에서 **보기 > 숨긴 항목**을 체크해서 `obsidian` 폴더를 표시
- **MacOS:** `command + shift + .` 을 눌러 `obsidian` 폴더를 표시
<br>
4. CSS 스니펫 파일 복사
- `.obsidian > snippets` 폴더로 이동한 후, 준비한 CSS 스니펫 파일을 해당 폴더에 복사합니다.
<br>
5. **옵시디언에서 스니펫 활성화**
- 옵시디언 설정(Settings) > **테마** 메뉴로 이동한 후,
- **CSS 스니펫** 섹션에서 복사한 스니펫 파일을 활성화합니다.
![[옵시디언 설정 화면 캡쳐.png|w90|center]]
<br>
# CSS 파일 예시
```css
/* 특정 비율을 alt 속성으로 처리 */
img[alt*="w90"] {
width: 90%;
}
img[alt*="w85"] {
width: 85%;
}
img[alt*="w80"] {
width: 80%;
}
img[alt*="w75"] {
width: 75%;
}
img[alt*="w70"] {
width: 70%;
}
img[alt*="w65"] {
width: 65%;
}
img[alt*="w60"] {
width: 60%;
}
img[alt*="w55"] {
width: 55%;
}
img[alt*="w50"] {
width: 50%;
}
img[alt*="w45"] {
width: 45%;
}
img[alt*="w40"] {
width: 40%;
}
img[alt*="w35"] {
width: 35%;
}
img[alt*="w30"] {
width: 30%;
}
img[alt*="w25"] {
width: 25%;
}
img[alt*="w20"] {
width: 20%;
}
```
<br>
# 사용 방법
```
![[image.png|w25|center]]
```
publish 한 블로그에도 똑같은 css를 적용하려면 다음 게시글을 참고하면 된다.
[[Obsidian Publish에 커스텀 CSS 적용하기]]
<br><br><br>