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

안녕하세요, 미래의 웹 개발자 여러분! 오늘은 깔끔하고 전문적인 웹사이트를 만들어드릴 수 있는 흥미로운 주제에 대해 다룰 예정입니다: 부트스트랩의 텍스트 자르기 기능입니다. 초보자라면 걱정하지 마세요 - 할머니가 손자에게 쿠키 굽히는 것을 가르치는 것처럼 인내심을 가지고 단계별로 안내해드리겠습니다. 시작해보겠습니다!

Bootstrap - Text Truncation

텍스트 자르기는 무엇인가요?

부트스트랩의 구체적인 내용에 들어가기 전에, 텍스트 자르기가 실제로 무엇을 의미하는지 이해해보겠습니다. 디자인에 맞지 않게 긴 문장을 상상해보세요. 텍스트 자르기는 그 문장에 멋진 머리를 자르는 것과 같습니다 - 과도한 부분을 잘라내고, 생략된 부분을 나타내기 위해 이스터라이스(...)를 추가합니다.

예를 들어: "The quick brown fox jumps over the lazy dog"는 "The quick brown fox..."로 변할 수 있습니다.

이제 부트스트랩이 이를 얼마나 간편하게 만들어주는지 살펴보겠습니다!

부트스트랩의 .text-truncate 클래스

우리의 친구이자 인근 CSS 프레임워크인 부트스트랩은 .text-truncate라는 간단한 클래스를 제공합니다. 이 클래스는 텍스트를 자동으로 잘라주는 마법의 지팡이와 같습니다.

.text-truncate 사용법

이 클래스를 사용하려면, 텍스트를 포함하고 있는 HTML 요소에 이 클래스를 추가하시면 됩니다. 기본적인 예제를 보겠습니다:

<div class="text-truncate">
The quick brown fox jumps over the lazy dog.
</div>

이 클래스를 적용하면 부트스트랩이 다음과 같은 CSS 속성을 설정합니다:

display: inline-block 또는 display: block
overflow: hidden
text-overflow: ellipsis
white-space: nowrap

이 CSS 속성들이 함께 작용하여 자르기 효과를 만듭니다.

실제 예제

실제 세계에서 텍스트 자르기를 사용할 수 있는 몇 가지 시나리오를 살펴보겠습니다.

예제 1: 문단 자르기

<p class="text-truncate" style="max-width: 150px;">
이 매우 긴 문단은 부트스트랩의 text-truncate 클래스를 사용하여 잘려질 것입니다.
</p>

이 예제에서는 max-width를 추가하여 자르기가 어떻게 작동하는지 보여줍니다. 텍스트는 150px 지점에서 잘려지고 이스터라이스가 나타납니다.

예제 2: 그리드 시스템 내 텍스트 자르기

부트스트랩의 그리드 시스템은 반응형 레이아웃을 만들기에 완벽합니다. 그리드 내에서 텍스트 자르기를 사용하는 방법을 보겠습니다:

<div class="container">
<div class="row">
<div class="col-md-4">
<h2 class="text-truncate">이 긴 제목은 자를 것입니다</h2>
<p>여기에 내용을 작성합니다</p>
</div>
<div class="col-md-4">
<h2 class="text-truncate">다른 긴 제목을 시연하기 위해</h2>
<p>여기에 더 많은 내용을 작성합니다</p>
</div>
<div class="col-md-4">
<h2 class="text-truncate">또 다른 긴 제목을 자르기 위해</h2>
<p>이제 더 많은 내용을 작성합니다</p>
</div>
</div>
</div>

이 그리드 레이아웃에서 각 열의 제목이 공간이 부족해지면 자릅니다. 이는 특히 화면 크기가 다양한 반응형 디자인에서 유용합니다.

언제 텍스트 자르기를 사용해야 하나요?

텍스트 자르기는 강력한 도구이지만, 어린이 벤이 스파이더맨에게 말한 것처럼, "위대한 힘에는 위대한 책임이 따릅니다." 다음과 같은 상황에서 텍스트 자르기가 빛을 발합니다:

제한된 공간이 있는 카드 레이아웃
잠재적으로 긴 콘텐츠가 있는 표 셀
긴 항목 이름이 있는 사이드 메뉴
뉴스 티커나 스크롤링 헤드라인

기억하시기 바랍니다, 목표는 가독성을 높이고 깨끗한 디자인을 유지하는 것이며, 사용자에게 중요한 정보를 숨기는 것이 아닙니다.

접근성 고려

책임 있는 웹 개발자로서 우리는 항상 접근성을 염두에 두어야 합니다. 텍스트 자르기는 디자인의 시각적 매력을 높일 수 있지만, 스크린 리더기에 중요한 정보를 숨기는 경우도 있습니다.

이를 해결하기 위해 다음을 고려하세요:

title 속성을 사용하여 전체 텍스트를 제공합니다:

<p class="text-truncate" title="hover 시 표시되는 전체 텍스트">
hover 시 표시되는 전체 텍스트
</p>

중요한 잘린 콘텐츠에 "Read More" 링크를 제공합니다:

<div>
<p class="text-truncate">이 정보는 잘려졌지만...</p>
<a href="#full-content">더 읽기</a>
</div>

고급 기술

보다 도전적인 기술을 시도하고 싶다면, 몇 가지 고급 기술을 탐구해보겠습니다!

다중 라인 자르기

부트스트랩의 .text-truncate 클래스는 단일 라인에만 작동합니다. 하지만 두려워하지 마세요! 커스텀 CSS를 사용하여 다중 라인 자르기 효과을 만들 수 있습니다:

<style>
.truncate-3-lines {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>

<p class="truncate-3-lines">
이 긴 문단은 세 줄 후에 자릅니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>

이 CSS는 -webkit-line-clamp 속성을 사용하여 텍스트를 세 줄로 제한합니다. 단, 이는 모든 브라우저에서 완벽하게 지원되지 않으므로 충분히 테스트하세요!

반응형 자르기

occasionally want to apply truncation only at certain screen sizes. We can combine Bootstrap's responsive utilities with our truncation class:

<p class="text-truncate d-none d-md-block">
This text will be truncated only on medium screens and larger.
</p>

In this example, the text will be hidden on small screens and will appear truncated on medium screens and above.

결론

이제 여러분은 부트스트랩 텍스트 자르기의 세계를 여행했습니다. 기본 사용법에서 고급 기술까지 다양한 내용을 다루었습니다. 기억하시기 바랍니다, 웹 개발에서의 모든 도구와 마찬가지로, 텍스트 자르기는 신중하게 사용될 때 가장 효과적입니다.

웹 개발의 여정을 계속하면서 이 개념들을 실험해보세요. 텍스트 자르기를 부트스트랩의 다른 기능과 결합하거나, 자신만의 커스텀 자르기 스타일을 만들어보세요. 웹은 당신의 캔버스이며, 이제 새로운 붓을 손에握고 있습니다!

행복하게 코딩하시고, 텍스트가 항상 완벽하게 잘라지기를 바랍니다! ?✨

방법	설명
`.text-truncate`	단일 라인 자르기에 대한 기본 부트스트랩 클래스
`title` 속성	hover 시 전체 텍스트를 제공하여 접근성을 높입니다
커스텀 CSS 다중 라인	지정된 줄 수 후에 자르기 효과을 만듭니다
반응형 자르기	화면 크기에 따라 특정 자르기를 적용합니다

Credits: Image by storyset