Text
Text (텍스트)
정렬, 줄바꿈, 굵기 등을 제어하는 일반적인 텍스트 유틸리티에 대한 문서와 예시입니다.
출처: 문서
본문
텍스트 정렬 (Text alignment)
텍스트 정렬 클래스로 요소의 텍스트를 쉽게 다시 정렬할 수 있습니다. start, end, center 정렬에는 그리드 시스템과 동일한 뷰포트 폭 브레이크포인트를 사용하는 반응형 클래스가 제공됩니다.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
참고: 양쪽 정렬(justified) 텍스트를 위한 유틸리티 클래스는 제공하지 않습니다. 미학적으로 양쪽 정렬이 더 보기 좋아 보일 수 있지만, 단어 사이 간격이 더 불규칙해져 읽기가 어려워집니다.
텍스트 줄바꿈과 넘침 (Text wrapping and overflow)
.text-wrap 클래스로 텍스트를 줄바꿈합니다.
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
.text-nowrap 클래스로 텍스트 줄바꿈을 방지합니다.
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>
단어 줄바꿈 (Word break)
.text-break를 사용해 word-wrap: break-word와 word-break: break-word를 설정하면 긴 문자열이 컴포넌트 레이아웃을 깨뜨리는 것을 방지할 수 있습니다. 더 넓은 브라우저 지원을 위해 흔히 쓰는 overflow-wrap 대신 word-wrap을 사용하며, flex 컨테이너 문제를 피하기 위해 구식인 word-break: break-word도 추가합니다.
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
참고: 아랍어에서는 단어 줄바꿈이 불가능하며, 아랍어는 가장 널리 쓰이는 RTL 언어입니다. 따라서
.text-break는 RTL로 컴파일된 CSS에서는 제거됩니다.
텍스트 변환 (Text transform)
text-lowercase, text-uppercase, text-capitalize 같은 텍스트 대/소문자 변환 클래스로 컴포넌트의 텍스트를 변환합니다.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
.text-capitalize는 각 단어의 첫 글자만 바꾸고 나머지 글자의 대소문자는 그대로 둔다는 점을 알아두세요.
글꼴 크기 (Font size)
텍스트의 font-size를 빠르게 변경합니다. 헤딩 클래스(예: .h1–.h6)가 font-size, font-weight, line-height를 모두 적용하는 반면, 이 유틸리티는 오직 font-size만 적용합니다. 이 유틸리티의 크기는 HTML 헤딩 요소와 일치하므로, 숫자가 커질수록 크기는 작아집니다.
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
$font-sizes Sass map을 수정해 사용 가능한 글꼴 크기를 사용자 정의할 수 있습니다.
굵기와 이탤릭 (Font weight and italics)
이 유틸리티들로 텍스트의 font-weight 또는 font-style을 빠르게 변경합니다. font-style 유틸리티는 .fst-*로, font-weight 유틸리티는 .fw-*로 축약됩니다.
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
줄 높이 (Line height)
.lh-* 유틸리티로 줄 높이를 변경합니다.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Monospace
.font-monospace로 선택 영역을 고정폭(monospace) 글꼴 스택으로 변경합니다.
<p class="font-monospace">This is in monospace</p>
색상 초기화 (Reset color)
.text-reset로 텍스트나 링크의 색상을 초기화해 부모로부터 색상을 상속받게 합니다.
<p class="text-body-secondary">
Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>
텍스트 장식 (Text decoration)
텍스트 장식 클래스로 컴포넌트의 텍스트를 장식합니다.
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
CSS
Sass 변수 (Sass variables)
기본 타이포그래피와 글꼴 관련 Sass 변수입니다.
scss/_variables.scss
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-sans-serif);
$font-family-code: var(--#{$prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
Sass map (Sass maps)
font-size 유틸리티는 이 map을 utilities API와 함께 사용해 생성합니다.
scss/_variables.scss
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
scss/_maps.scss
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
Sass utilities API
font와 text 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.
scss/_utilities.scss
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),