| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 1 | 제목 레벨. h1~h5 태그와 typo_title-* 클래스 |
color | 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'error' | — | 공통 color_* 클래스 |
label | string | — | 제목 텍스트. default 슬롯으로 대체 가능 |
Typography
제목·본문·강조·링크·코드 등 텍스트의 의미와 시각적 위계를 표현하는 Vue 컴포넌트입니다. 시맨틱 태그와 타이포그래피 클래스를 props로 함께 적용합니다.
제목
typo_title-1 ~ typo_title-5 클래스로 5단계 제목 스케일을 적용합니다. 시맨틱 heading 태그와 함께 사용합니다.
h1. 제목 레벨 1
h2. 제목 레벨 2
h3. 제목 레벨 3
h4. 제목 레벨 4
h5. 제목 레벨 5
본문
기본 본문은 별도 클래스 없이 p 태그를 사용합니다. 단락 간격이 필요하면 typo_paragraph를 사용합니다.
기본 본문 텍스트입니다. 인라인으로 보조 설명을 함께 쓸 수 있습니다.
typo_paragraph — 첫 번째 단락입니다. 단락 사이에 일정한 간격이 적용됩니다.
두 번째 단락입니다. 마지막 단락은 하단 여백이 제거됩니다.
색상 타입
color_muted, color_success 등 공통 색상 클래스를 적용합니다. 버튼·배지·알림 등 모든 컴포넌트에서 동일한 클래스명을 사용합니다.
기본 텍스트 (Default)
보조 텍스트 (Muted)
성공 메시지 (Success)
주의 메시지 (Warning)
오류 메시지 (Danger)
강조 텍스트 (Primary)
크기
base(0.875rem)는 클래스 없이 기본 적용됩니다. xs, sm, lg, xl만 size_* 클래스를 사용합니다.
Extra Small — 0.75rem
Small — 0.8125rem
Base — 0.875rem (기본)
Large — 1rem
Extra Large — 1.125rem
텍스트 스타일
strong · em · del · mark 등 의미 있는 태그와 밑줄·인라인 코드 스타일을 조합합니다.
굵은 텍스트와 기울임 텍스트, 밑줄 텍스트, 취소선 텍스트를 함께 사용할 수 있습니다.
형광펜 강조와 inline code 표현도 지원합니다.
조합 예시: 중요 경고, 강조 설명, 삭제된 항목
아래첨자 · 위첨자 · 소문자
sub · sup · small 시맨틱 태그에 typo_sub · typo_sup · typo_small 클래스를 적용합니다.
화학식 H2O, 수식 x2 + y2 = z2처럼 아래·위첨자를 표현합니다.
각주1나 제곱미터 m2 단위에도 활용합니다.
※ 본 안내는 참고용이며, 법적 효력은 약관을 따릅니다.
말줄임
label 또는 default 슬롯으로 전달한 콘텐츠에 1~3줄 말줄임을 적용합니다. 부모에 너비 제한이 필요합니다.
1줄 말줄임 — default 슬롯으로 전달한 긴 텍스트가 영역을 넘으면 말줄임표로 표시됩니다. Lorem ipsum dolor sit amet.
2줄 말줄임 — 두 줄까지 표시한 뒤 넘치는 내용은 말줄임표로 처리합니다. UXKM 가이드는 컴포넌트 문서와 데모를 제공합니다.
3줄 말줄임 — 세 줄까지 표시합니다. 디자인 시스템의 타이포그래피는 일관된 위계와 가독성을 유지하는 데 중요한 역할을 합니다. 제목·본문·캡션의 크기와 색상을 체계적으로 정의하세요.
인용
blockquote 태그에 typo_blockquote 클래스를 적용합니다.
좋은 타이포그래피는 읽기 쉬운 콘텐츠의 기반입니다. 위계, 대비, 여백을 일관되게 유지하세요.
목록
본문 prose 목록은 ul · ol에 typo_list · typo_list-ordered 클래스를 적용합니다. UI 리스트(아바타, 인터랙티브 항목 등)는 List 컴포넌트를 사용하세요.
링크
variant=link는 a 태그와 typo_link 클래스를 사용합니다. 실제 이동할 href를 함께 지정하세요.
리드 · 캡션 · 레이블
typo_lead · typo_caption · typo_label · typo_overline로 보조 텍스트 위계를 표현합니다.
가이드 소개
Vue Components
Vue와 SCSS로 구성된 UI 컴포넌트 가이드입니다. 접근성과 일관성을 기준으로 설계되었습니다.
마지막 업데이트: 2026-07-31
가입 시 사용한 이메일 주소를 입력하세요.
제목 색상
제목에도 공통 color_* 클래스를 조합할 수 있습니다.
Primary 제목
Success 제목
Danger 제목
Muted 제목
키보드 · 코드 블록
typo_kbd · typo_pre · typo_code로 단축키와 코드를 표시합니다.
저장하려면 ⌘ + S를 누르세요. 검색은 Ctrl + K입니다.
<button class="btn btn_filled color_primary">
<span class="btn_label">저장</span>
</button>중첩 목록
typo_list · typo_list-ordered에 하위 ul · ol을 중첩할 수 있습니다.
- 레이아웃
- Container
- Grid
- 기본 요소
- Button
- Typography
제목 + 본문 조합
typo_stack, typo_stack-lg로 제목과 본문을 묶어 간격을 맞춥니다.
섹션 제목
typo_stack-lg는 제목과 본문 사이 간격을 넓게 유지합니다. 카드 헤더, 모달 제목, 폼 섹션 등에 활용합니다.
마지막 업데이트: 2026-07-31
작은 스택
typo_stack은 좁은 간격으로 제목·설명을 묶습니다.
API · TypoTitle Props
API · TypoText Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant | 'text' | 'paragraph' | 'lead' | 'caption' | 'label' | 'overline' | 'code' | 'kbd' | 'pre' | 'strong' | 'italic' | 'underline' | 'delete' | 'mark' | 'sub' | 'sup' | 'small' | 'link' | 'blockquote' | text | 텍스트 스타일·시맨틱 태그 매핑 |
tag | 'p' | 'span' | 'div' | 'label' | 'code' | 'kbd' | 'pre' | 'strong' | 'em' | 'del' | 'mark' | 'sub' | 'sup' | 'small' | 'a' | 'blockquote' | … | — | 루트 HTML 태그 수동 지정 (variant 기본 태그 대체) |
color | 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'error' | — | 공통 color_* 클래스 |
size | 'xs' | 'sm' | 'lg' | 'xl' | — | 공통 size_* 클래스 |
ellipsis | 1 | 2 | 3 | — | 말줄임 줄 수. 미지정 시 말줄임 없음. 1~3은 text_ellipsis · text_ellipsis-2 · text_ellipsis-3 |
href | string | — | a 태그로 렌더링될 때 링크 목적지 |
html-for | string | — | label 태그로 렌더링될 때 연결할 폼 컨트롤 id |
cite | string | — | blockquote 태그로 렌더링될 때 인용 출처 URL |
label | string | — | 텍스트 내용. default 슬롯으로 대체 가능 |
API · TypoTitle Slots
| 슬롯 | 설명 |
|---|---|
default | 제목 텍스트 (label prop 대체) |
API · TypoText Slots
| 슬롯 | 설명 |
|---|---|
default | 텍스트 내용 (label prop 대체) |
클래스 · 속성
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
typo_title-1 ~ typo_title-5 | 제목 스케일 |
typo_paragraph · typo_lead · typo_caption · typo_label · typo_overline | 본문·보조 텍스트 |
typo_strong · typo_italic · typo_underline · typo_delete · typo_mark | strong · em · span · del · mark 기반 인라인 강조 |
typo_sub · typo_sup · typo_small | 아래첨자 · 위첨자 · 보조 소문자 (sub · sup · small 태그) |
typo_link | 본문 안 인라인 링크 |
typo_code · typo_kbd · typo_pre | 코드·키보드·코드 블록 |
typo_blockquote | 인용 블록 |
typo_list · typo_list-ordered | 본문 prose 목록 (ul · ol + li). UI 목록은 List 컴포넌트 |
typo_stack · typo_stack-lg | 제목+본문 수직 간격 |
text_ellipsis · text_ellipsis-2 · text_ellipsis-3 | 말줄임 |
size_xs · size_sm · size_lg · size_xl | 텍스트 크기 |
color_* | 공통 색상 유틸 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--typo-title-1-size · … · --typo-title-5-size | 2.375rem · 1.875rem · 1.5rem · 1.25rem · 1rem | 제목 레벨별 크기 |
--typo-title-1-weight · … · --typo-title-5-weight | 700 · 700 · 600 · 600 · 600 | 제목 레벨별 굵기 |
--typo-title-1-line-height · … · --typo-title-5-line-height | 1.2 · 1.25 · 1.3 · 1.35 · 1.4 | 제목 레벨별 줄높이 |
--typo-title-1-letter-spacing · --typo-title-2-letter-spacing · --typo-title-3-letter-spacing | -0.02em · -0.015em · -0.01em | h1~h3 자간 |
--typo-text-line-height | 1.6 | 단락·목록·인용문 줄높이 |
--typo-paragraph-gap · --typo-list-gap | var(--space-md) · var(--space-xs) | 단락·목록 항목 간격 |
--typo-mark-bg | rgba(250, 219, 20, 0.35) | 형광펜 배경 |
--typo-code-padding-y · --typo-code-padding-x · --typo-code-radius | 0.1em · 0.35em · 4px | 인라인 코드·mark 패딩과 모서리 |
--typo-blockquote-border-width | 3px | 인용문 왼쪽 테두리 |
--typo-sub-sup-size · --typo-sub-offset · --typo-sup-offset | 0.75em · -0.25em · -0.5em | 아래·위첨자 크기·오프셋 |
--typo-small-size | var(--text-size-sm) | small 태그 보조 텍스트 크기 |
--typo-lead-size · --typo-lead-line-height | var(--text-size-lg) · 1.6 | 리드 텍스트 |
--typo-caption-size · --typo-label-size · --typo-label-weight | var(--text-size-xs) · var(--text-size-sm) · 600 | 캡션·레이블 |
--typo-overline-size · --typo-overline-weight · --typo-overline-spacing | var(--text-size-xs) · 600 · 0.06em | 오버라인 텍스트 |
--typo-kbd-padding-y · --typo-kbd-padding-x | 0.15em · 0.4em | 키보드 키 패딩 |
--typo-pre-padding · --typo-pre-radius | var(--space-md) · var(--radius-md) | 코드 블록 |