[Obsidian] 옵시디언 읽기 화면 너비 100%로 꽉 채우기 (CSS 설정)

 

 

1. 설정 끄기

CSS를 건드리지 않고 기본 설정만으로 해결하는 가장 간단한 방법

• 경로: 설정(Settings) > 편집기(Editor)
• 동작: '읽기 쉬운 행 길이(Readable line length)' 항목을 OFF로 변경

이것만으로도 에디터 화면이 즉시 넓어짐. 하지만 테마에 따라 적용이 안 되거나, 설정은 켜두되 강제로 넓히고 싶은 경우 아래의 CSS 방법을 사용한다.

---

2. 확실한 방법: CSS 스니펫 적용

설정 여부와 관계없이 강제로 너비를 100%로 고정하거나, 최신 테마의 변수까지 제어하고 싶다면 이 방법을 추천

아래 코드를 복사해서 CSS 파일로 저장하면 됨

 

/* 본문 너비를 100%로 확장 (프레임 너비 전체 사용) */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-line,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer,
.markdown-rendered.is-readable-line-width > div {
    max-width: 100% !important;
}

/* 최신 옵시디언 테마 대응 변수 설정 */
body {
    --file-line-width: 100% !important;
}

코드 작동 원리

1. 클래스 타겟팅: 옵시디언은 '읽기 편한 줄 길이'가 켜져 있으면 .is-readable-line-width라는 클래스를 부여하여 가로 폭을 700~800px로 제한함. 위 코드는 이 제한을 100% !important로 덮어씌워 강제로 해제하는 방식
2. 변수 재정의: 최근 업데이트된 테마들은 --file-line-width라는 CSS 변수로 너비를 관리함. body 태그에서 이 변수를 100%로 고정하여 호환성을 높임

---

3. CSS 스니펫 적용 순서

위 코드를 실제로 적용하는 단계별 가이드

1. 폴더 이동: 내 옵시디언 보관함(Vault) 경로의 .obsidian/snippets/ 폴더 열기
2. 파일 생성: 메모장이나 코드 에디터로 새 파일을 만들고 .css 확장자로 저장 (예: full-width.css)
3. 코드 입력: 위에서 복사한 CSS 코드를 붙여넣고 저장
4. 활성화: 옵시디언 설정 > 외형(Appearance) > CSS 스네펫 목록에서 해당 파일의 토글 스위치를 ON

---