🎨 Tailwind Advanced 3장: 타이포그래피 심화 — 가독성과 시각 위계의 기술

<!-- truncate: 1줄 강제 + overflow 숨김 + ... 표시 -->
<!-- 사용하는 CSS:
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  ← 이게 핵심! 줄바꿈을 완전히 막음
-->
<p class="truncate w-64">
  이 텍스트는 무조건 1줄로만 표시되고 나머지는 ...으로 잘려
</p>
 
<!-- line-clamp-N: N줄까지만 허용 + overflow 숨김 + ... 표시 -->
<!-- 사용하는 CSS:
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: N;  ← N줄까지 허용!
-->
<p class="line-clamp-2 w-64">
  이 텍스트는 2줄까지는 보여줘.
  3번째 줄부터는 숨기고 ...으로 표시해.
  긴 텍스트가 계속되어도 2줄에서 멈춰.
</p>

// components/StudyCard.tsx
 
// ❌ 영철이의 초기 코드: 제목 길이에 따라 카드 높이가 달라짐
export function NaiveStudyCard({ title, description }) {
  return (
    <div className="bg-white rounded-xl p-4 shadow">
      {/* 🐣 영철: 제목이 1줄일 때는 카드가 작고, 3줄일 때는 커서 그리드가 깨짐 */}
      <h3 className="font-semibold text-gray-900">{title}</h3>
      <p className="text-gray-600 text-sm mt-2">{description}</p>
    </div>
  );
}
 
// ✅ 영호의 리팩토링: line-clamp으로 카드 높이 고정
export function StudyCard({ title, description, memberCount, topic }) {
  return (
    <div className="bg-white rounded-xl p-4 shadow flex flex-col">
      {/* 토픽 태그 */}
      <span className="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full w-fit">
        {topic}
      </span>
 
      {/* 제목: 최대 2줄, 넘으면 ... */}
      <h3 className="
        font-semibold text-gray-900 mt-2
        line-clamp-2      /* 2줄 이후 말줄임표 */
        /* 내부적으로: display: -webkit-box + -webkit-line-clamp: 2 */
      ">
        {title}
      </h3>
 
      {/* 설명: 최대 3줄 */}
      <p className="text-gray-600 text-sm mt-2 line-clamp-3 flex-1">
        {description}
      </p>
 
      {/* 하단 메타 정보 (항상 카드 하단에 고정) */}
      <div className="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
        <span className="text-sm text-gray-500">멤버 {memberCount}명</span>
        <button className="text-sm font-medium text-indigo-600 hover:text-indigo-700">
          참여하기 →
        </button>
      </div>
    </div>
  );
}

<!-- 모바일에서는 3줄, 데스크톱에서는 제한 없음 -->
<p class="line-clamp-3 lg:line-clamp-none">
  모바일에서는 3줄만 보이지만, lg 이상에서는 전체 텍스트가 보여.
</p>
 
<!-- 상태 기반 토글 (React) -->
export function ExpandableText({ text }: { text: string }) {
  const [expanded, setExpanded] = useState(false);
  return (
    <div>
      <p className={expanded ? 'line-clamp-none' : 'line-clamp-3'}>
        {text}
      </p>
      <button onClick={() => setExpanded(!expanded)} className="text-indigo-600 text-sm mt-1">
        {expanded ? '접기' : '더 보기'}
      </button>
    </div>
  );
}

<!-- 기본 제공: line-clamp-1 ~ line-clamp-6 -->
<p class="line-clamp-1">...</p>  <!-- 1줄 -->
<p class="line-clamp-2">...</p>  <!-- 2줄 -->
<p class="line-clamp-6">...</p>  <!-- 6줄 -->
 
<!-- 커스텀 값 -->
<p class="line-clamp-[10]">10줄까지</p>
<p class="line-clamp-[--my-line-count]">CSS 변수로 제어</p>

<!-- ❌ 기본 동작: 첫 줄을 최대한 채우고 나머지가 2번째 줄로 -->
<h1 class="text-4xl font-bold max-w-sm">
  개발자 스터디 매칭 플랫폼 — 함께 성장하는 커뮤니티
  <!-- 렌더링:
    "개발자 스터디 매칭 플랫폼 — 함께 성장하는"  ← 꽉 참
    "커뮤니티"  ← 고아 단어! -->
</h1>
 
<!-- ✅ text-balance: 각 줄의 길이를 최대한 균등하게 -->
<h1 class="text-4xl font-bold max-w-sm text-balance">
  개발자 스터디 매칭 플랫폼 — 함께 성장하는 커뮤니티
  <!-- 렌더링:
    "개발자 스터디 매칭"  ← 균등
    "플랫폼 — 함께 성장하는 커뮤니티"  ← 균등 -->
</h1>

<!-- 올바른 사용 패턴 -->
<h1 class="text-balance">짧은 히어로 제목</h1>  <!-- ✅ -->
<h2 class="text-balance">카드 섹션 제목</h2>    <!-- ✅ -->
<p class="text-balance">긴 본문 텍스트...</p>   <!-- ❌ 성능 이슈 -->

<!-- text-pretty: 마지막 줄에만 orphan 방지 최적화 -->
<!-- 본문 텍스트처럼 길어도 성능 이슈 없음 -->
<p class="text-pretty">
  영수네 커뮤니티는 개발자들이 함께 모여 성장하는 공간이에요.
  React, TypeScript, 알고리즘 등 다양한 주제의 스터디를 자유롭게
  만들고 참여할 수 있어요. 지금 바로 시작해보세요.
  <!-- 마지막 줄에 단어 1개만 남는 상황 자동 방지 -->
</p>

<!-- ❌ 기본 숫자 폰트: 각 숫자의 폭이 다름 (proportional) -->
<!-- 1은 좁고, 0은 넓어서 소수점 정렬이 안 됨 -->
<table>
  <tr><td>1,234</td></tr>
  <tr><td>89,012</td></tr>
</table>
 
<!-- ✅ tabular-nums: 모든 숫자(0~9)의 폭이 동일 -->
<table class="tabular-nums">
  <tr><td class="text-right">1,234</td></tr>   <!-- '1' 폭 = '9' 폭 → 정렬 맞음! -->
  <tr><td class="text-right">89,012</td></tr>
</table>

<!-- 개발자 ID나 코드 표시에 유용 -->
<code class="slashed-zero font-mono text-sm bg-gray-100 px-1 rounded">
  O0oO0  <!-- 0은 가운데 사선, O는 없어서 구분 명확 -->
</code>

<!-- 스터디 순위 표시 -->
<span class="ordinal font-semibold text-indigo-600">1st</span>
<span class="ordinal font-semibold text-indigo-600">2nd</span>
<span class="ordinal font-semibold text-indigo-600">3rd</span>
<!-- ordinal: 폰트에서 제공하는 특수 서수 글리프 사용 -->

<!-- 금액 표시 테이블 - slashed-zero + tabular-nums 조합 -->
<dl class="space-y-2">
  <div class="flex justify-between">
    <dt>스터디 참여비</dt>
    <dd class="tabular-nums slashed-zero font-mono">₩50,000</dd>
  </div>
  <div class="flex justify-between">
    <dt>플랫폼 수수료</dt>
    <dd class="tabular-nums slashed-zero font-mono">₩5,000</dd>
  </div>
  <div class="flex justify-between font-bold border-t pt-2">
    <dt>합계</dt>
    <dd class="tabular-nums slashed-zero font-mono">₩55,000</dd>
  </div>
</dl>

<!-- 기본 font-feature-settings 활성화 -->
<p class="font-features-['smcp']">Small Caps: ABC → ᴀʙᴄ</p>
<!-- smcp: Small Caps - 소문자를 소형 대문자로 변환 -->
 
<p class="font-features-['onum']">Oldstyle Nums: 1234 → 클래식 스타일 숫자</p>
<!-- onum: Oldstyle numerals - 클래식 편집 스타일 숫자 -->
 
<p class="font-features-['liga']">Standard Ligatures: fi, fl → 합자</p>
<!-- liga: Ligatures - fi, fl 같은 글자가 자연스럽게 연결됨 -->
 
<!-- 여러 feature 동시 활성화 -->
<p class="font-features-['smcp','tnum','onum']">
  복합 OpenType 기능 활성화
</p>

// Markdown을 HTML로 변환한 결과를 dangerouslySetInnerHTML로 삽입
export default function PostContent({ htmlContent }: { htmlContent: string }) {
  return (
    // ❌ 스타일 없음: h1, h2, p, ul, code 등이 모두 기본 브라우저 스타일
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    // 결과: 볼품없는 날 HTML. 제목도 본문도 다 같은 크기처럼 보임
  );
}

# 설치
npm install @tailwindcss/typography

/* tailwind.css - Tailwind v4 방식 */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

// tailwind.config.js - Tailwind v3 방식
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

// components/PostContent.tsx
// 🦁 영호: "마크다운 렌더링 영역에 prose 클래스 하나만 추가하면 끝이야"
 
export default function PostContent({ htmlContent }: { htmlContent: string }) {
  return (
    // prose: 모든 하위 HTML 요소에 읽기 좋은 타이포그래피 스타일 자동 적용
    <div
      className="prose"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
    // 결과:
    // h1 → 큰 제목 (2.25em, 굵게, 여백 포함)
    // h2 → 중간 제목 (1.5em, 굵게)
    // p → 적절한 line-height와 여백
    // ul/ol → 들여쓰기와 마커
    // code → 모노스페이스, 배경색
    // blockquote → 왼쪽 보더, 이탤릭
    // img → 자동 max-width
    // a → 색상과 밑줄
  );
}

<!-- 크기 수식어: prose-sm, prose-base, prose-lg, prose-xl, prose-2xl -->
<div class="prose prose-sm">소형 타이포그래피 (블로그 메모, 부연 설명)</div>
<div class="prose">기본 (prose-base)</div>
<div class="prose prose-lg">대형 타이포그래피 (주요 블로그 포스트)</div>
<div class="prose prose-xl">특대형 (뉴스레터, 매거진 스타일)</div>
<div class="prose prose-2xl">최대형 (히어로 텍스트 영역)</div>

<!-- prose-invert: 어두운 배경에 맞는 밝은 색상으로 전환 -->
<div class="prose dark:prose-invert">
  다크 모드에서 자동으로 텍스트와 요소 색상이 밝은 톤으로 바뀜
</div>

<!-- prose-{color}: 링크, 강조 등의 포인트 색상 변경 -->
<div class="prose prose-indigo">인디고 포인트 색상</div>
<div class="prose prose-violet">보라 포인트 색상</div>
<div class="prose prose-emerald">에메랄드 포인트 색상</div>

<!-- prose-h2:text-indigo-600: h2 제목 색상만 인디고로 -->
<!-- prose-a:no-underline: 링크 밑줄 제거 -->
<!-- prose-code:text-pink-500: 인라인 코드 색상 변경 -->
<div class="prose
  prose-h2:text-indigo-600
  prose-a:no-underline
  prose-a:font-medium
  prose-code:text-pink-500
  prose-code:bg-pink-50
  prose-code:px-1.5
  prose-code:rounded
">
  <!-- 세밀하게 커스터마이즈된 prose 영역 -->
</div>

// app/studies/[id]/notice/[noticeId]/page.tsx
// 🦁 영호: "공지사항 마크다운을 prose로 렌더링해. 다크 모드까지 한 방에."
 
import { marked } from 'marked';  // 또는 next-mdx-remote 등
 
async function getNotice(noticeId: string) {
  // ... DB에서 공지사항 가져오기
  return { title: "React 스터디 1회차 공지", content: "## 시간 안내\n..." };
}
 
export default async function NoticePage({ params }) {
  const notice = await getNotice(params.noticeId);
  const htmlContent = marked(notice.content);  // Markdown → HTML 변환
 
  return (
    <article className="max-w-3xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-gray-900 mb-2">{notice.title}</h1>
      <time className="text-sm text-gray-500 mb-8 block">2025년 1월 15일</time>
 
      {/* prose로 마크다운 렌더링 영역 스타일링 */}
      <div
        className="
          prose prose-lg           /* 기본 + 큰 크기 */
          dark:prose-invert        /* 다크 모드 */
          prose-indigo             /* 링크, 강조색 인디고 */
          prose-headings:font-bold  /* 모든 헤딩 굵게 */
          prose-code:text-sm       /* 코드 폰트 작게 */
          max-w-none               /* prose의 max-width 제한 해제 */
        "
        dangerouslySetInnerHTML={{ __html: htmlContent }}
      />
    </article>
  );
}

<!-- ❌ 기존 반응형 방식: 브레이크포인트에서 갑자기 크기가 바뀜 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  모바일: 24px → 768px에서 갑자기 36px → 1024px에서 갑자기 60px
  (중간 크기 기기에서 어색한 크기)
</h1>

/* 개념: font-size가 뷰포트에 비례해 부드럽게 변함 */
font-size: clamp(1.5rem, 4vw, 4rem);
/*
  뷰포트 375px (모바일):
    4vw = 15px < 24px(1.5rem) → 24px 사용 (최소)
  뷰포트 600px:
    4vw = 24px → 24px 사용
  뷰포트 1200px:
    4vw = 48px < 64px(4rem) → 48px 사용
  뷰포트 2000px:
    4vw = 80px > 64px(4rem) → 64px 사용 (최대)
*/

<!-- Tailwind 임의값 문법으로 clamp() 사용 -->
<h1 class="text-[clamp(1.5rem,4vw,4rem)]">
  뷰포트에 비례해 부드럽게 커지는 제목
</h1>
 
<!-- 더 정교한 계산: calc()와 vw 조합 -->
<h2 class="text-[clamp(1.25rem,_2.5vw_+_1rem,_3rem)]">
  <!-- _는 공백 대신 사용 (Tailwind 임의값에서 공백 허용 안 함) -->
  최소 1.25rem, 최대 3rem, 중간은 선형 보간
</h2>

/* tailwind.css - 프로젝트 전체에서 쓸 fluid 크기 등록 */
@theme {
  /* Fluid Typography Tokens */
  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
  --text-fluid-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3.5rem);
  --text-fluid-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 4.5rem);
}

<!-- 등록된 fluid 크기 사용 -->
<h1 class="text-(length:--text-fluid-4xl) font-black">
  어떤 기기에서도 자연스럽게 크기가 조정되는 히어로 타이틀
</h1>
<p class="text-(length:--text-fluid-base)">
  읽기 편한 유동적 본문 텍스트
</p>

// components/StudyCard.tsx — 타이포그래피 심화 버전
 
interface StudyCardProps {
  title: string;
  description: string;
  topic: string;
  memberCount: number;
  rating: number;
  rank: number;
}
 
export default function StudyCard({ title, description, topic, memberCount, rating, rank }: StudyCardProps) {
  return (
    <div className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-5 flex flex-col">
 
      {/* 순위 표시 - ordinal + tabular-nums */}
      <div className="flex items-center justify-between mb-3">
        <span className="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">
          {topic}
        </span>
        <span className="text-sm font-bold text-amber-500 ordinal tabular-nums">
          {rank}위  {/* ordinal: 순위 표기 최적화 */}
        </span>
      </div>
 
      {/* 제목 - line-clamp + text-balance */}
      <h3 className="
        font-semibold text-gray-900 text-lg
        line-clamp-2         /* 2줄 고정 */
        text-balance         /* 줄 균형 최적화 */
        mb-2
      ">
        {title}
      </h3>
 
      {/* 설명 - line-clamp + text-pretty */}
      <p className="
        text-gray-600 text-sm leading-relaxed
        line-clamp-3          /* 3줄 고정 */
        text-pretty           /* orphan 단어 방지 */
        flex-1
      ">
        {description}
      </p>
 
      {/* 메타 정보 - tabular-nums */}
      <div className="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
        <div className="text-sm text-gray-500">
          <span className="tabular-nums font-medium text-gray-900">{memberCount}</span>명 참여
        </div>
 
        {/* 평점 - tabular-nums + slashed-zero */}
        <div className="flex items-center gap-1">
          <span className="text-amber-400 text-sm">★</span>
          <span className="text-sm font-medium tabular-nums slashed-zero">
            {rating.toFixed(1)}  {/* 소수점 자리 정렬 */}
          </span>
        </div>
      </div>
    </div>
  );
}

// app/studies/[id]/posts/[postId]/page.tsx
 
export default async function PostDetailPage({ params }) {
  const post = await getPost(params.postId);
  const htmlContent = marked(post.content);
 
  return (
    <div className="max-w-4xl mx-auto px-4 py-10">
      {/* 포스트 헤더 - fluid typography */}
      <header className="mb-8">
        <span className="text-sm font-medium text-indigo-600 mb-3 block">
          React 심화 스터디
        </span>
 
        {/* 제목 - fluid + balance */}
        <h1 className="
          text-[clamp(1.75rem,3vw,3rem)]
          font-black text-gray-900
          text-balance
          leading-tight mb-4
        ">
          {post.title}
        </h1>
 
        {/* 메타 정보 */}
        <div className="flex items-center gap-4 text-sm text-gray-500">
          <time className="tabular-nums">{formatDate(post.createdAt)}</time>
          <span className="tabular-nums">조회 {post.viewCount.toLocaleString()}회</span>
          <span className="tabular-nums">댓글 {post.commentCount}개</span>
        </div>
      </header>
 
      {/* 본문 - prose */}
      <div
        className="
          prose prose-lg
          dark:prose-invert
          prose-indigo
          prose-headings:text-balance
          prose-p:text-pretty
          prose-code:text-sm
          prose-pre:bg-gray-900
          max-w-none
        "
        dangerouslySetInnerHTML={{ __html: htmlContent }}
      />
 
      {/* 통계 테이블 - tabular-nums */}
      {post.stats && (
        <div className="mt-10 p-6 bg-gray-50 rounded-2xl">
          <h3 className="font-bold text-gray-900 mb-4">스터디 참여 현황</h3>
          <dl className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            {[
              { label: '총 참여자', value: post.stats.members },
              { label: '출석률', value: `${post.stats.attendanceRate}%` },
              { label: '과제 완료', value: post.stats.homeworkDone },
              { label: '평균 점수', value: post.stats.avgScore.toFixed(1) },
            ].map(({ label, value }) => (
              <div key={label} className="text-center">
                <dd className="text-2xl font-bold text-indigo-600 tabular-nums slashed-zero">
                  {value}
                </dd>
                <dt className="text-xs text-gray-500 mt-1">{label}</dt>
              </div>
            ))}
          </dl>
        </div>
      )}
    </div>
  );
}

<div className="prose prose-lg dark:prose-invert prose-indigo max-w-none"
     dangerouslySetInnerHTML={{ __html: htmlContent }} />