부트스트랩 - 텍스트: 초보자 가이드

안녕하세요, 웹 개발자 지망생 여러분! 부트스트랩 텍스트 스타일링의 흥미로운 여정에 함께하러 기쁩니다. 컴퓨터 과학을 가르쳐온 지 오래된 저로서는 텍스트 조작을 마스터하는 것은 디지털 캔버스에 글로 그림을 그리는 것과 같다고 말할 수 있습니다. 그럼 이제 웹 페이지를 멋지게 보이게 하기 위해 함께潜入해 보겠습니다!

텍스트 정렬

먼저 배우고 싶을 것 중 하나는 텍스트를 어떻게 정렬하는지입니다. 부트스트랩은 HTML 요소에 적용할 수 있는 클래스 모음을 통해 이를 매우 쉽게 만들어줍니다.

<p class="text-start">왼쪽 정렬된 텍스트.</p>
<p class="text-center">가운데 정렬된 텍스트.</p>
<p class="text-end">오른쪽 정렬된 텍스트.</p>

이 예제에서 우리는 세 가지 다른 클래스를 사용하고 있습니다:

• text-start: 텍스트를 왼쪽으로 정렬합니다 (대부분의 경우 기본값)
• text-center: 텍스트를 가운데로 정렬합니다
• text-end: 텍스트를 오른쪽으로 정렬합니다

정렬은 방에 가구를 배치하는 것과 같습니다. 보기에 균형 잡혀서 예쁜 것 같아야 합니다!

텍스트 wrapping과 오버플로우

때로는 텍스트가 컨테이너보다 길어서 들어맞지 않을 수 있습니다. 부트스트랩은 이를 부드럽게 처리할 수 있는 클래스를 제공합니다.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
이 텍스트는 wrapping되어야 합니다.
</div>

<div class="text-nowrap bg-light" style="width: 8rem;">
이 텍스트는 오버플로우되어야 합니다.
</div>

여기서 우리는 다음을 사용하고 있습니다:

• text-wrap: 긴 텍스트를 다음 줄로 wrapping합니다
• text-nowrap: 텍스트를 wrapping하지 않고 컨테이너를 벗어나게 합니다

text-wrap은 당신을 감싸는 따뜻한毛毯처럼, text-nowrap는 한 치수 작은 옷을 입는 것과 같습니다!

단어 분断

긴 단어나 URL을 다루는 경우, 오버플로우를 방지하기 위해 분断이 필요할 수 있습니다. 부트스트랩은 이를 해결해줍니다:

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

text-break 클래스는 긴 단어를 분断하고 다음 줄로 wrapping할 수 있게 합니다. 이는 긴 단어가 숨을 쉬는 기회를 주는 것과 같습니다!

텍스트 변환

houk을 외치고 싶은지, 조용히 속삭고 싶은지 텍스트 변환 클래스를 통해 톤을 설정할 수 있습니다:

<p class="text-lowercase">소문자로 변환된 텍스트.</p>
<p class="text-uppercase">대문자로 변환된 텍스트.</p>
<p class="text-capitalize">첫 글자 대문자로 변환된 텍스트.</p>

• text-lowercase: 모든 글자를 소문자로 변환합니다
• text-uppercase: 모든 글자를 대문자로 변환합니다
• text-capitalize: 각 단어의 첫 글자를 대문자로 변환합니다

이는 텍스트의 음량을 조절하는 것과 같습니다!

폰트 크기

부트스트랩은 폰트 크기를 강조하거나 약화시키는 다양한 크기 클래스를 제공합니다:

<p class="fs-1">폰트 크기 1 (가장 큼)</p>
<p class="fs-2">폰트 크기 2</p>
<p class="fs-3">폰트 크기 3</p>
<p class="fs-4">폰트 크기 4</p>
<p class="fs-5">폰트 크기 5</p>
<p class="fs-6">폰트 크기 6 (가장 작음)</p>

이 클래스는 fs-1 (가장 큼)에서 fs-6 (가장 작음)까지 범위를 다룹니다. 이는 텍스트에 다양한 크기의 붓을 사용하는 것과 같습니다!

폰트 굵기와 이탤릭

때로는 텍스트에 강조를 더해야 할 수 있습니다. 부트스트랩은 이를 쉽게 할 수 있도록 합니다:

<p class="fw-bold">굵은 텍스트.</p>
<p class="fw-bolder">보다 굵은 텍스트 (부모 요소에 비해 상대적)</p>
<p class="fw-normal">일반 무게의 텍스트.</p>
<p class="fw-light">가벼운 무게의 텍스트.</p>
<p class="fw-lighter">보다 가벼운 무게의 텍스트 (부모 요소에 비해 상대적)</p>
<p class="fst-italic">이탤릭 텍스트.</p>
<p class="fst-normal">일반 폰트 스타일의 텍스트</p>

이 클래스는 텍스트의 무게와 스타일을 조정할 수 있습니다. 이는 텍스트를 운동시키거나 휴식시키는 것과 같습니다!

줄 간격

줄 간격을 조정하면 가독성을 크게 향상시킬 수 있습니다. 부트스트랩은 이를 위한 간단한 클래스를 제공합니다:

<p class="lh-1">이는 줄 간격이 다른 요소와 다른 긴 문단입니다.</p>
<p class="lh-sm">이는 줄 간격이 다른 요소와 다른 긴 문단입니다.</p>
<p class="lh-base">이는 줄 간격이 다른 요소와 다른 긴 문단입니다.</p>
<p class="lh-lg">이는 줄 간격이 다른 요소와 다른 긴 문단입니다.</p>

이 클래스는 줄 사이의 공간을 조정합니다. 이는 책의 간격을 조정하여 더 쉽게 읽히게 하는 것과 같습니다!

모노스페이스

코드나 기술적인 콘텐츠를 표시할 때 모노스페이스 폰트를 사용할 수 있습니다:

<p class="font-monospace">이는 모노스페이스 폰트입니다</p>

font-monospace 클래스는 각 문자가 같은 수평 공간을 차지하는 모노스페이스 폰트로 텍스트를 설정합니다. 이는 코드 스니펫이나 정확한 정렬이 필요한 경우에 완벽합니다!

텍스트 색상 리셋

때로는 텍스트 색상을 기본값으로 리셋해야 할 수 있습니다:

<p class="text-muted">
흐린 텍스트와 <a href="#" class="text-reset">리셋 링크</a>.
</p>

text-reset 클래스는 텍스트 색상을 제거하고 기본값으로 되돌립니다. 이는 텍스트 색상의 리셋 버튼을 누르는 것과 같습니다!

텍스트 장식

마지막으로 텍스트 장식에 대해 이야기해보겠습니다:

<p class="text-decoration-underline">이 텍스트에는 밑줄이 있습니다.</p>
<p class="text-decoration-line-through">이 텍스트에는 가운데선이 있습니다.</p>
<a href="#" class="text-decoration-none">이 링크는 기본 텍스트 장식이 제거되었습니다</a>

이 클래스는 밑줄이나 취소선을 추가하거나 제거할 수 있습니다. 이는 텍스트의 마지막 장식을 추가하는 것과 같습니다!

이제 우리가 다루었던 모든 텍스트 관련 클래스를 요약하는 표를 보여드리겠습니다:

카테고리	클래스
정렬	text-start, text-center, text-end
wrapping	text-wrap, text-nowrap
단어 분断	text-break
변환	text-lowercase, text-uppercase, text-capitalize
폰트 크기	fs-1, fs-2, fs-3, fs-4, fs-5, fs-6
폰트 무게	fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter
폰트 스타일	fst-italic, fst-normal
줄 간격	lh-1, lh-sm, lh-base, lh-lg
모노스페이스	font-monospace
색상 리셋	text-reset
장식	text-decoration-underline, text-decoration-line-through, text-decoration-none

이제 부트스트랩을 사용하여 텍스트를 프로처럼 스타일링할 준비가 되었습니다. 연습이 완벽을 이루는 열쇠이므로, 프로젝트에서 이 클래스들을 실험해 보세요. 행복한 코딩을 기원하며, 텍스트가 항상 멋지게 보이기를 바랍니다!

Credits: Image by storyset