이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Typography

Previous Next

제목, 단락, 목록 등을 위한 스타일

기본적으로 타이포그래피 스타일은 제공하지 않습니다. 이 페이지는 유틸리티 클래스를 사용하여 텍스트 스타일을 지정하는 방법의 예제입니다.

웃음에 세금을: 농담세 연대기

옛날 옛적, 먼 나라에 하루 종일 왕좌에 앉아 빈둥거리는 매우 게으른 왕이 있었습니다. 어느 날, 신하들이 문제를 가지고 왔습니다. 왕국의 재정이 바닥나고 있다는 것이었습니다.

왕의 계획

왕은 오랫동안 고심한 끝에 마침내 기발한 계획 을 생각해냈습니다. 왕국의 농담에 세금을 부과하기로 한 것입니다.

"결국," 그가 말했다. "모두가 좋은 농담을 즐기니, 그 특권에 대해 대가를 지불하는 것이 공정하다."

농담세

왕의 백성들은 웃기지 않았습니다. 그들은 투덜거리고 불평했지만, 왕은 확고했습니다:

  • 1단계 말장난: 금화 5개
  • 2단계 농담: 금화 10개
  • 3단계 한 줄 개그: 금화 20개

그 결과 사람들은 농담을 멈췄고, 왕국은 우울에 빠졌습니다. 하지만 왕의 어리석음에 굴복하지 않는 한 사람이 있었습니다. 바로 광대 조크스터였습니다.

조크스터의 반란

조크스터는 한밤중에 성에 몰래 들어가 온 곳에 농담을 남겼습니다. 왕의 베개 밑, 수프 속, 심지어 왕실 화장실에까지. 왕은 분노했지만 조크스터를 막을 수 없었습니다.

그러던 어느 날, 왕국의 백성들은 조크스터가 남긴 농담들이 너무 재미있어서 웃지 않을 수 없다는 것을 발견했습니다. 그리고 한번 웃기 시작하자 멈출 수가 없었습니다.

백성들의 반란

웃음으로 기분이 좋아진 왕국의 백성들은 다시 농담과 말장난을 시작했고, 곧 왕국 전체가 농담에 동참했습니다.

왕실 재정백성의 행복
비어있음넘쳐흐름
보통만족
가득참황홀함

왕은 백성들이 얼마나 행복해졌는지 보고 자신의 잘못을 깨달아 농담세를 폐지했습니다. 조크스터는 영웅으로 선언되었고, 왕국은 오래오래 행복하게 살았습니다.

이 이야기의 교훈은 이것입니다. 좋은 웃음의 힘을 결코 과소평가하지 말고, 나쁜 아이디어는 항상 조심하세요.

<div>
  <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
    웃음에 세금을: 농담세 연대기
  </h1>
  <p class="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
    옛날 옛적, 먼 나라에 하루 종일 왕좌에 앉아 빈둥거리는 매우 게으른 왕이
    있었습니다. 어느 날, 신하들이 문제를 가지고 왔습니다. 왕국의 재정이 바닥나고
    있다는 것이었습니다.
  </p>
  <h2
    class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
  >
    왕의 계획
  </h2>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    왕은 오랫동안 고심한 끝에 마침내
    <a href="##" class="text-primary font-medium underline underline-offset-4">
      기발한 계획
    </a>
    을 생각해냈습니다. 왕국의 농담에 세금을 부과하기로 한 것입니다.
  </p>
  <blockquote class="mt-6 border-s-2 ps-6 italic">
    &quot;결국,&quot; 그가 말했다. &quot;모두가 좋은 농담을 즐기니, 그 특권에
    대해 대가를 지불하는 것이 공정하다.&quot;
  </blockquote>
  <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">농담세</h3>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    왕의 백성들은 웃기지 않았습니다. 그들은 투덜거리고 불평했지만, 왕은
    확고했습니다:
  </p>
  <ul class="my-6 ms-6 list-disc [&>li]:mt-2">
    <li>1단계 말장난: 금화 5개</li>
    <li>2단계 농담: 금화 10개</li>
    <li>3단계 한 줄 개그: 금화 20개</li>
  </ul>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    그 결과 사람들은 농담을 멈췄고, 왕국은 우울에 빠졌습니다. 하지만 왕의
    어리석음에 굴복하지 않는 한 사람이 있었습니다. 바로 광대 조크스터였습니다.
  </p>
  <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
    조크스터의 반란
  </h3>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    조크스터는 한밤중에 성에 몰래 들어가 온 곳에 농담을 남겼습니다. 왕의 베개
    밑, 수프 속, 심지어 왕실 화장실에까지. 왕은 분노했지만 조크스터를 막을 수
    없었습니다.
  </p>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    그러던 어느 날, 왕국의 백성들은 조크스터가 남긴 농담들이 너무 재미있어서
    웃지 않을 수 없다는 것을 발견했습니다. 그리고 한번 웃기 시작하자 멈출 수가
    없었습니다.
  </p>
  <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
    백성들의 반란
  </h3>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    웃음으로 기분이 좋아진 왕국의 백성들은 다시 농담과 말장난을 시작했고, 곧
    왕국 전체가 농담에 동참했습니다.
  </p>
  <div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
      <thead>
        <tr class="even:bg-muted m-0 border-t p-0">
          <th
            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            왕실 재정
          </th>
          <th
            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            백성의 행복
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="even:bg-muted m-0 border-t p-0">
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            비어있음
          </td>
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            넘쳐흐름
          </td>
        </tr>
        <tr class="even:bg-muted m-0 border-t p-0">
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            보통
          </td>
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            만족
          </td>
        </tr>
        <tr class="even:bg-muted m-0 border-t p-0">
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            가득참
          </td>
          <td
            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
          >
            황홀함
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    왕은 백성들이 얼마나 행복해졌는지 보고 자신의 잘못을 깨달아 농담세를
    폐지했습니다. 조크스터는 영웅으로 선언되었고, 왕국은 오래오래 행복하게
    살았습니다.
  </p>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    이 이야기의 교훈은 이것입니다. 좋은 웃음의 힘을 결코 과소평가하지 말고, 나쁜
    아이디어는 항상 조심하세요.
  </p>
</div>

h1

웃음에 세금을: 농담세 연대기

<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
  웃음에 세금을: 농담세 연대기
</h1>

h2

왕국의 백성들

<h2
  class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
  왕국의 백성들
</h2>

h3

농담세

<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">농담세</h3>

h4

사람들은 농담을 멈췄습니다

<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
  사람들은 농담을 멈췄습니다
</h4>

p

왕은 백성들이 얼마나 행복해졌는지 보고 자신의 잘못을 깨달아 농담세를 폐지했습니다.

<p class="leading-7 [&:not(:first-child)]:mt-6">
  왕은 백성들이 얼마나 행복해졌는지 보고 자신의 잘못을 깨달아 농담세를
  폐지했습니다.
</p>

blockquote

"결국," 그가 말했다. "모두가 좋은 농담을 즐기니, 그 특권에 대해 대가를 지불하는 것이 공정하다."
<blockquote class="mt-6 border-s-2 ps-6 italic">
  "결국," 그가 말했다. "모두가 좋은 농담을 즐기니, 그 특권에 대해 대가를
  지불하는 것이 공정하다."
</blockquote>

table

왕실 재정백성의 행복
비어있음넘쳐흐름
보통만족
가득참황홀함
<div class="my-6 w-full overflow-y-auto">
  <table class="w-full">
    <thead>
      <tr class="even:bg-muted m-0 border-t p-0">
        <th
          class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          왕실 재정
        </th>
        <th
          class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          백성의 행복
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="even:bg-muted m-0 border-t p-0">
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          비어있음
        </td>
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          넘쳐흐름
        </td>
      </tr>
      <tr class="even:bg-muted m-0 border-t p-0">
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          보통
        </td>
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          만족
        </td>
      </tr>
      <tr class="even:bg-muted m-0 border-t p-0">
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          가득참
        </td>
        <td
          class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-end"
        >
          황홀함
        </td>
      </tr>
    </tbody>
  </table>
</div>

list

  • 1단계 말장난: 금화 5개
  • 2단계 농담: 금화 10개
  • 3단계 한 줄 개그: 금화 20개
<ul class="my-6 ms-6 list-disc [&>li]:mt-2">
  <li>1단계 말장난: 금화 5개</li>
  <li>2단계 농담: 금화 10개</li>
  <li>3단계 한 줄 개그: 금화 20개</li>
</ul>

인라인 코드

@lucide/svelte
<code
  class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
>
  @lucide/svelte
</code>

리드 텍스트

중요한 콘텐츠로 사용자를 중단시키고 응답을 요구하는 모달 다이얼로그입니다.

<p class="text-muted-foreground text-xl">
  중요한 콘텐츠로 사용자를 중단시키고 응답을 요구하는 모달 다이얼로그입니다.
</p>

큰 텍스트

정말로 확실하십니까?
<div class="text-lg font-semibold">정말로 확실하십니까?</div>

작은 텍스트

이메일 주소
<small class="text-sm leading-none font-medium">이메일 주소</small>

흐린 텍스트

이메일 주소를 입력하세요.

<p class="text-muted-foreground text-sm">이메일 주소를 입력하세요.</p>