markdown-viewer/infocard

infocard은(는) 무엇을 하나요?

마크다운에서 HTML/CSS를 사용해 편집 스타일의 정보 카드를 생성합니다. 지식 요약, 데이터 하이라이트, 이벤트 공지, 단일 주제 콘텐츠 카드에 적합하며 매거진 수준의 타이포그래피를 제공합니다.

개요

infocard는 순수 마크다운 환경에서 시각적으로 구분되는 정보 카드를 만들기 위한 스킬입니다. HTML과 CSS를 마크다운 내부에 포함시켜 렌더링함으로써 복잡한 도구 없이도 전문적인 카드 레이아웃을 구현할 수 있습니다.

주요 특징

• 편집 스타일 디자인: 매거진, 뉴스레터에서 볼 수 있는 고품질 타이포그래피와 레이아웃 지원
• 경량형: 외부 라이브러리나 프레임워크 불필요, HTML/CSS만으로 동작
• 유연성: 다양한 콘텐츠 유형(텍스트, 이미지, 표, 코드 블록 등)을 카드 내에 배치 가능
• 호환성: GitHub, GitLab, Notion, Obsidian 등 HTML/CSS를 지원하는 대부분의 마크다운 렌더러에서 동작

사용 방법

다음은 기본적인 정보 카드 템플릿입니다.

<div class="infocard">
  <h2>카드 제목</h2>
  <p>카드 본문 내용입니다. 여기에 설명을 작성합니다.</p>
</div>

위 예제는 infocard 클래스를 가진 <div>로 카드를 감쌉니다. 실제 렌더링을 위해서는 CSS 스타일이 필요합니다.

CSS 스타일 예제

다음 CSS를 마크다운 상단 또는 <style> 태그 내에 포함시킵니다.

.infocard {
  background: #f9f9f9;
  border-left: 4px solid #3498db;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: 'Georgia', serif;
}

.infocard h2 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 1.5em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.infocard p {
  line-height: 1.6;
  color: #333;
}

고급 사용법

다중 섹션 카드

<div class="infocard">
  <div class="card-header">
    <h2>이벤트 공지</h2>
    <p class="date">2025년 3월 15일</p>
  </div>
  <div class="card-body">
    <p>다음 주 워크숍이 열립니다. 자세한 내용은 아래를 참고하세요.</p>
    <ul>
      <li>일시: 2025년 3월 20일 오후 2시</li>
      <li>장소: 온라인 (Zoom)</li>
      <li>등록: <a href="https://example.com">여기</a></li>
    </ul>
  </div>
</div>

데이터 하이라이트 카드

<div class="infocard highlight">
  <h2>📊 분기별 실적</h2>
  <table>
    <thead>
      <tr><th>분기</th><th>매출</th><th>성장률</th></tr>
    </thead>
    <tbody>
      <tr><td>1분기</td><td>$1.2M</td><td>+15%</td></tr>
      <tr><td>2분기</td><td>$1.5M</td><td>+25%</td></tr>
    </tbody>
  </table>
</div>

코드와 설명을 포함한 카드

<div class="infocard code-card">
  <h2>빠른 설치</h2>
  <p>아래 명령어로 패키지를 설치합니다.</p>
  <pre><code>npm install my-package --save</code></pre>
  <p>그런 다음 프로젝트에서 임포트합니다.</p>
  <pre><code>import myModule from 'my-package';</code></pre>
</div>

스타일 커스터마이징

카드의 외관은 CSS를 통해 자유롭게 변경할 수 있습니다. 주요 CSS 변수(선택 사항)를 사용하면 일관된 테마를 유지하는 데 도움이 됩니다.

:root {
  --infocard-bg: #ffffff;
  --infocard-border-color: #3498db;
  --infocard-border-radius: 8px;
  --infocard-shadow: 0 4px 6px rgba(0,0,0,0.1);
  --infocard-font: 'Georgia', serif;
}

.infocard {
  background: var(--infocard-bg);
  border-left: 4px solid var(--infocard-border-color);
  border-radius: var(--infocard-border-radius);
  box-shadow: var(--infocard-shadow);
  font-family: var(--infocard-font);
}

호환성 참고

이 스킬은 HTML과 CSS를 렌더링할 수 있는 모든 마크다운 환경에서 작동합니다. 다만 일부 렌더러(예: 표준 GitHub README)는 <style> 태그를 지원하지 않을 수 있습니다. 이런 경우 외부 CSS 파일을 링크하거나, 인라인 스타일을 사용하는 것이 대안입니다.

예제: 전체 페이지 적용

다음은 마크다운 파일 전체에서 infocard를 사용하는 예입니다.

# 내 문서

일반 단락입니다.

<div class="infocard">
  <h2>중요 공지</h2>
  <p>이것은 중요한 정보입니다.</p>
</div>

계속해서 다른 내용을 작성합니다.

라이선스

이 스킬은 MIT 라이선스 하에 제공됩니다. 자유롭게 수정 및 배포하세요.