부트스트랩 - 배지: 웹 요소에 매력을 더하다

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩 배지의 흥미로운 세계로 접어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 단계별로 안내해 드리겠습니다. 그러니 마음에 드는 음료를 골라, 편안하게 자리 잡고 함께 이 모험을 떠나보세요!

부트스트랩 배지는 무엇인가요?

배지는 작은 개수와 레이블 컴포넌트로, 여러분의 웹 요소에 추가 정보를 제공할 수 있습니다. 배지는 작은 디지털 스티커처럼 여러분의 웹사이트를 더 정보적이고 시각적으로 매력적으로 만들 수 있습니다. 소셜 미디어 플랫폼을 만들고 있으며, 사용자가 읽지 않은 메시지가 몇 개 있는지 보여주고 싶다면 - 이때 배지가 유용하게 쓰입니다!

기본 배지 예제

간단한 예제를 시작해 보겠습니다:

<h1>Welcome to MySpace 2.0 <span class="badge bg-secondary">New</span></h1>

이 예제에서 우리는 헤딩 옆에 배지를 추가했습니다. span 요소에 badge와 bg-secondary 클래스를 추가하여 작은 회색 배지를 만들어 "New"라고 씁니다. 상점에서 제품에 "New!" 스티커를 붙이는 것처럼 - 관심을 끌입니다!

배지를 활용해 보자

버튼과 함께 사용하는 배지

배지는 버튼과 함께 사용하여 추가 정보를 제공할 수 있습니다. 예를 들어:

<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>

이 코드는 "Notifications"라는 버튼에 작은 배지로 숫자 4를 보여줍니다. 사용자가 읽지 않은 알림이 몇 개 있는지 보여주는 데 적합합니다!

알림에 사용하는 배지

알림에 대해 이야기하자면, 배지를 사용하여 알림 아이콘을 만드는 방법을 보겠습니다:

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</i>

이 코드는 벨 아이콘에 "99+"라는 빨간 배지를 추가합니다. visually-hidden span은 화면 읽기기에 의해 읽혀지지 않도록 하여 우리 사이트를 더 접근성 있게 만듭니다.

배지의 위치 지정

배지는 여러 가지 방식으로 위치를 지정할 수 있습니다. 몇 가지 예제를 보겠습니다:

<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>

이 코드는 배지를 버튼의右上 모서리에 위치시킵니다. 책의 모서리에 스티cky 노트를 붙이는 것과 같은 느낌입니다!

배지를 인디케이터로 사용

배지는 인디케이터로도 사용할 수 있습니다:

<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>

이 코드는 버튼에 작은 빨간 점 인디케이터를 만듭니다 - 무언가 새로운 것이 있다고 알리는 데 적합합니다.

배지 색상 커스터마이징

부트스트랩은 배지에 사용할 수 있는 다양한 배경 색상을 제공합니다. 다음은 사용 가능한 클래스 목록입니다:

클래스	설명
bg-primary	파란 배지
bg-secondary	회색 배지
bg-success	초록 배지
bg-danger	빨간 배지
bg-warning	노란 배지
bg-info	연파란 배지
bg-light	하얀 배지
bg-dark	검은 배지

이 클래스들을 다음과 같이 사용할 수 있습니다:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

둥근 배지

배지를 둥근 모양으로 만들고 싶다면 rounded-pill 클래스를 사용할 수 있습니다:

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>

이 둥근 모양의 배지는 태그나 레이블에 매우 적합합니다!

모든 것을 하나로 모아서

이제 우리는 여러 가지 개념을 다루었으니, 여러 배지 유형을 포함한 더 복잡한 예제를 만들어 보겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home
<span class="badge bg-primary rounded-pill">New</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Messages
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
Notifications
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

이 코드는 네비게이션 바에 세 가지 항목을 만듭니다: Home (배지 "New"), Messages (카운트 배지), Notifications (인디케이터 배지). 이는 사용자에게 중요한 정보를 한눈에 제공하는 우주선의 조종실과 같습니다!

그렇다면 여러분! 부트스트랩 배지의 세계를 탐험해 보았습니다. 간단한 레이블에서 복잡한 알림까지, 배지는 매우 유용한 도구입니다. 하지만 웹 개발에서 배지를 사용할 때는 신중하게 사용하는 것이 중요합니다. 관심을 끌기에 적합하지만, 너무 많이 사용하면 사이트가 지저분해질 수 있습니다.

마무리하면서, 한 학생이 한 말을 떠올립니다. "배지는 컵케이크의 스프링클처럼 - 모든 것을 더 재미있게 만듭니다!" 그 말에 동의할 수 없습니다. 그러니 forth, 실험을 해보고, 여러분의 웹사이트에 배지의 매력을 더해보세요!

Credits: Image by storyset