Obsidian 노트 글 너비를 100%로 만들기 (full-width)

알림: 2023. 3. 19. 22:01

---

제가 더 자주 글 너비를 넓히기 위해서는 아래 링크에 있는 방법을 씁니다.

옵시디언 노트 글 너비 100% 만들기 - 읽기 쉬운 행 길이(Readable line length) 설정을 특정 페이지만 사용 안 하도록(기본과 미니멀 테마 둘 다에 적용)  

https://eoureo.tistory.com/entry/옵시디언-노트-글-너비-100-만들기-Readable-line-length-설정을-사용-안하도록

이 방법이 기본 테마와 미니멀 테마에 맞게 적용한 방법입니다. 더 깔끔하다고 생각합니다.

물론 지금 글의 방법도 참고할 만한 것이 있고 나름 쓰임새가 있다고 생각합니다.

전체 노트들의 너비(폭)를 100%로 설정하는 방법은 Obsidian의 설정에서 할 수가 있습니다.

 

Obsidian의 설정 (Settings ＞Appearance ＞Display)

•  Readable Line Length (읽기 쉬운 행 길이)
  • on: 테마에 따라 줄 길이 제한 (너비가 제한됨)
  • off: 100% 너비를 가짐(width)

https://docs.google.com/presentation/d/1Dt-RDdd5jWhBvyksojKDML7Z0IWk-8I3apeXchfq9EQ/edit?usp=sharing 

 

그렇지만 몇몇 특정한 페이지만 너비를 설정하려고 하면 다음과 같이 하면 됩니다.

 

https://docs.google.com/presentation/d/1SejMBD7UiQNwikDY_-_6tW5WwT6-8-DTaB2EqeXj0rI/edit?usp=sharing 

 

Default와 Minimal 테마에서 테스트를 했습니다.
"편집 보기"와 "읽기 보기" 모두에서 되도록 했습니다..

설정하기

1. 노트의 frontmatter에 cssclass 항목 추가

cssclass: my_style_width_100

 

2. "Settings ＞ Appearance ＞ CSS Snippets"에 설정

다음 코드를 my_style.css에 추가합니다.

 

 

 

 

my_style.css 대신에 자신이 지금 쓰고 있는 파일(css)에 넣어도 됩니다.

 

 

참고

Developer Tools에서 탭 안의 노트 구조를  살펴보니 다음과 같습니다.

<div class="view-content"> 
  <div class="markdown-source-view"> ( ☜ Editing View, cssclass가 들어가는 곳 )
    <div class="cm-editor"> 
      <div class="cm-scroller"> 
        <div class="cm-sizer"> 
          <div class="inline-title"> 
          <div class="cm-contentContainer"> 
            <div class="cm-content"> 
              <div class="cm-line"> ( ☜ 노트의 한 줄에 해당한다.  여기에서 Live Preview / Source Mode에 따라 내용이 바뀐다.)
              <div class="cm-line">  
  <div class="markdown-reading-view"> ( ☜ Reading View )
    <div class="markdown-preview-view"> ( ☜ cssclass가 들어가는 곳 )
      <div class="markdown-preview-sizer markdown-preview-section"> 
        <div class="data-tag-name="h2" class="h2" data-heading="My Heading 2">  ( ☜ 헤딩 )
          <h2>
        <div class="data-tag-name="p" class="el-p">  ( ☜ 일반 줄 )
          <p>
        <div class="data-tag-name="pre" class="el-pre code-block-wrap">  ( ☜ 코드 블럭 )
          <pre>