티스토리에서 **마크다운 형식으로 깔끔하고 미니멀한 디자인

티스토리에서 마크다운 형식으로 깔끔하고 미니멀한 디자인으로 문서를 작성하려면

---

✅ 1. 마크다운 형식으로 작성하는 기본 원칙

티스토리는 기본적으로 마크다운 지원이 제한적이라서, 마크다운 문법을 사용하되 HTML 블록을 섞어 사용하는 방식이 가장 좋음.
특히 헤더, 구분선, 단락 정렬, 강조, 표 등을 직접 꾸미려면 CSS도 함께 써줘야 해.

---

✅ 2. 기본 구조 템플릿 (모바일 가독성 + 마크다운 스타일)

<!-- 폰트 설정 및 전역 스타일 -->
<style>
body {
  font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
  line-height: 1.7;
  font-size: 16px;
  color: #222;
  padding: 0 1rem;
}
h1, h2, h3 {
  font-weight: 700;
  margin: 2rem 0 1rem;
}
p {
  margin: 1rem 0;
}
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2rem 0;
}
strong {
  font-weight: bold;
}
code {
  background: #f4f4f4;
  padding: 0.2rem 0.4rem;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  border-radius: 4px;
}
pre {
  background: #f9f9f9;
  padding: 1rem;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 6px;
}
</style>

<h1>문서 제목</h1>

<p>이 문서는 티스토리에서 마크다운 스타일로 작성된 예시입니다. 글머리표 없이 깔끔하게 작성되었으며, 모바일 가독성을 고려해 글자 크기와 간격을 조절했습니다.</p>

<hr>

<h2>1. 소개</h2>

<p>이 방법은 HTML과 마크다운을 혼합하여 작성하는 방식으로, 다음과 같은 장점이 있습니다:</p>

<p><strong>장점:</strong></p>
<p>– 모바일에서도 깔끔한 줄 간격</p>
<p>– 폰트, 크기, 코드블럭 자유롭게 설정</p>
<p>– 마크다운 느낌 유지하면서 디자인 제어 가능</p>

<h2>2. 코드 예시</h2>

<pre><code>def hello():
    print("Hello Tistory Markdown Style!")
</code></pre>

<h2>3. 표 예시</h2>

<table>
  <thead>
    <tr>
      <th>항목</th>
      <th>설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>폰트</td>
      <td>Noto Sans KR</td>
    </tr>
    <tr>
      <td>줄간격</td>
      <td>1.7</td>
    </tr>
  </tbody>
</table>

<h2>4. 마무리</h2>

<p>마크다운을 그대로 쓸 수 없을 땐 이렇게 HTML과 함께 사용해보세요. 눈에 확 띄면서도 정돈된 느낌을 줄 수 있습니다.</p>

---

✅ 3. 작성 팁 (모바일 최적화 포인트)

항목	설명
폰트	Noto Sans KR, Pretendard 등 가독성 좋은 글꼴
줄 간격	line-height: 1.6 ~ 1.8
글자 크기	font-size: 15~16px
코드 블럭	<pre><code> 활용, 너무 길지 않게
표	<table> HTML로 직접 작성 (티스토리 에디터 사용 X)
여백	<div style="margin-top: 2rem;"> 활용해도 됨

---