HTML Minimal

따뜻한 뉴트럴 색상, 엄격한 타이포그래피, 선과 여백만으로 구조를 잡는 미니멀 HTML 문서 스타일.

메타 정보

모든 문서 상단에 반드시 표기:

<h1>제목</h1>
<p class="date">YYYY.MM.DD · 정석현</p>

날짜는 문서 생성 당일 실제 날짜. 하드코딩 금지.

색상 (5가지만)

순수 검정(#000000), 순수 흰색(#ffffff) 금지. 차트는 --ink와 --mark 두 색만.

폰트 (3가지만)

Inter, Arial, Roboto, system-ui 금지. 반드시 Google Fonts 로드:

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Sans+KR:wght@300;400;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

타이포그래피 상세

700, 800, 900 웨이트 금지. 300, 400, 600만 사용.

레이아웃

body { max-width: 920px; margin: 0 auto; padding: 3rem; }

여백 규칙:

• h1 아래: 0.25rem (날짜와 붙임)
• 날짜 아래: 2.5rem
• h2 위: 2.5rem / 아래: 1rem
• p 아래: 1rem
• 섹션 간: 2~2.5rem

그리드만 사용. Flexbox 금지.

/* 숫자 요약 행 4단 */
grid-template-columns: repeat(4, 1fr);
/* 비교 2단 */
grid-template-columns: 1fr 1fr; gap: 2rem;
/* 니치 카드 3단 */
grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);

금지 요소

• 카드 UI (border-radius, box-shadow, 배경색 구분) 금지
• 이모지 금지
• Flexbox 금지
• 구조는 선(border)과 여백(padding)으로만

구성 요소

구분선

• 주요: 1px solid var(--ink) (숫자 행 상하)
• 보조: 1px solid var(--rule) (항목 사이, 표 행)
• 섹션 제목: 1px solid var(--rule) (밑줄)
• 판정(verdict): 2px solid var(--ink) (상하)

숫자 요약 행

문서 상단 핵심 수치 3~4개.

<div class="num-row">
  <div class="num-cell">
    <div class="v">13.3조</div>
    <div class="l">장기요양보험 '23</div>
  </div>
</div>

• 상하 --ink 1px 선, 셀 사이 --rule 세로선
• 숫자: JetBrains Mono 1.6rem / 라벨: 대문자 0.7rem, --muted

순위 리스트

<div class="entry">
  <span class="rank">01</span>
  <span class="name">이름</span>
  <span class="figure">수치</span>
  <span class="desc">설명</span>
</div>

3단 그리드: 순위(2rem) | 이름+설명(1fr) | 수치(auto). 순위는 JetBrains Mono, --muted. 항목 사이 --rule 하단선.

비교 표

• th: 대문자, 0.7rem, --muted, 하단 --ink 1px
• td: 하단 --rule 1px
• 첫 열 25%, 나머지 균등

판정(verdict) 블록

문서에서 가장 중요한 결론. 문서당 1번만.

<div class="verdict"><p>결론 텍스트</p></div>

상하 --ink 2px, 패딩 1.25rem, 1.05rem.

니치 블록

3단 그리드. --rule 배경 + 각 셀 --paper로 1px 간격 구분선 효과.

.niche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.niche div { background: var(--paper); padding: .75rem .8rem; }

노란 하이라이트

<mark> 태그 사용. 문서 전체 5~8개 이하. 10초 훑기에 핵심 파악 가능해야 함. 숫자, 결론, 경고에만.

mark { background: var(--mark); padding: 0 2px; font-weight: 400; }

문체 규칙

금지

• 의미 부풀리기: "a pivotal moment", "testament to"
• 홍보 문체: "vibrant", "groundbreaking", "nestled"
• -ing 분석체: "highlighting the importance of"
• 모호한 출처: "experts argue"
• 3개 나열: "innovation, inspiration, and insights"
• 부정 병렬: "It's not just X; it's Y"
• em dash 남용
• 볼드+콜론 리스트: "Speed: faster"
• 이모지
• 서비스 문체: "I hope this helps!"
• 과잉 헤징: "could potentially possibly"
• 밝은 전망 맺음: "the future looks bright"

권장

• 짧은 문장과 긴 문장 섞기. 균일한 리듬은 기계 느낌.
• 의견 넣기. "솔직히", "문제는", "이건 좀".
• 1인칭 가능하면 사용. "내가 보기에" > "it could be argued that".
• 복잡한 감정 인정. "좋아 보이지만 불안한 구석이 있다" > 장단점 나열.
• "is", "are", "has" 사용. "serves as", "stands as" 금지.

푸터

<div class="foot">
  <span>출처 표기</span>
  <span>YYYY.MM</span>
</div>

상단 --rule 1px, 0.7rem, --muted, 좌: 출처 / 우: 연월.

전체 CSS 템플릿

모든 문서에 반드시 포함:

:root {
  --ink: #1a1a17;
  --paper: #fafaf7;
  --muted: #6b6b63;
  --rule: #d4d4cd;
  --mark: #ffe14d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans KR', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  padding: 3rem;
  max-width: 920px;
  margin: 0 auto;
}
mark { background: var(--mark); padding: 0 2px; font-weight: 400; }
h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: .25rem;
}
.date { font-size: .8rem; color: var(--muted); margin-bottom: 2.5rem; }
h2 {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--muted);
  margin: 2.5rem 0 1rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
h3 {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: .5rem;
}
p { margin-bottom: 1rem; }
strong { font-weight: 600; }

/* 숫자 요약 행 */
.num-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 1.5rem 0;
}
.num-cell {
  padding: .75rem 1rem;
  border-right: 1px solid var(--rule);
}
.num-cell:last-child { border-right: none; }
.num-cell .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  line-height: 1.2;
}
.num-cell .l {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: .25rem;
}

/* 순위 리스트 */
.entry {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry .rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--muted);
}
.entry .figure {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
}
.entry .desc {
  font-size: .82rem;
  color: var(--muted);
}

/* 비교 표 */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  text-align: left;
  padding: .5rem 0;
  border-bottom: 1px solid var(--ink);
}
td {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .82rem;
}
td:first-child, th:first-child { width: 25%; }

/* 판정 블록 (문서당 1회) */
.verdict {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 1.25rem 0;
  margin: 2rem 0;
}
.verdict p { font-size: 1.05rem; margin-bottom: 0; }

/* 니치 블록 */
.niche {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: 1rem 0;
}
.niche div {
  background: var(--paper);
  padding: .75rem .8rem;
}

/* 푸터 */
.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
  margin-top: 3rem;
  font-size: .7rem;
  color: var(--muted);
}

완성 체크리스트

문서 작성 후 반드시 확인:

• 작성자(정석현)와 당일 날짜가 제목 아래에 있는가
• 색상 5가지만 사용했는가
• 폰트 3가지만 사용했는가
• 카드 UI, border-radius, box-shadow 없는가
• 노란 하이라이트 8개 이하인가
• 이모지 없는가
• AI 문체("groundbreaking", "vibrant", "nestled", "testament") 없는가
• em dash 없는가
• 볼드+콜론 리스트 패턴 없는가
• 3개 나열 패턴 없는가
• verdict 블록 1회만인가
• 푸터에 출처와 연월 있는가