CSS로 Markdown 꾸미기

Markdown은 텍스트를 포맷팅하기 위한 간결한 구문을 제공하지만, CSS 스타일을 사용하면 문서를 더욱 아름답고 전문적으로 만들 수 있습니다.

기본 스타일

인라인 스타일

Markdown 문서에서 HTML과 인라인 CSS를 직접 사용할 수 있습니다:

# 내 문서

<style>
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}
</style>

<div class="highlight">
이것은 중요한 단락을 강조 표시한 것입니다.
</div>

일반적인 Markdown 요소 스타일

제목 스타일

/* 모든 제목의 기본 스타일 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 16px;
}

h1 {
  font-size: 2.5em;
  border-bottom: 2px solid #eaecef;
  padding-bottom: 10px;
}

링크 스타일

a {
  color: #0366d6;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  border-bottom: 1px solid #0366d6;
}

코드 스타일

code {
  background-color: #f6f8fa;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: #d73a49;
}

pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
}

결론

잘 설계된 CSS를 통해 간단한 Markdown 문서를 아름답고 전문적인 웹 콘텐츠로 변환할 수 있습니다. 단순성, 가독성 및 반응형 디자인의 균형을 유지하는 것이 중요합니다.

추가 리소스

• MDN CSS 문서
• CSS Tricks
• Can I Use - CSS 호환성 확인