부트스트랩 - 배지 데모

배지는 무엇인가요?

안녕하세요, 미래의 웹 개발자 여러분! 오늘은 부트스트랩 배지의 흥미로운 세상으로 함께 뛰어보겠습니다. 네 이웃의 친절한 컴퓨터 교사로서, 저는 여러분이 코드 한 줄도 적지 않은 상태에서도 이 여정을 안내해 드릴 것입니다. 그러니 가상의 등짐을 챙기고, 함께 모험을 떠나보겠습니다!

Bootstrap - Badges Demo

부트스트랩의 배지는 웹 페이지에 추가할 수 있는 디지털 스티커입니다. 이는 작고, 대부분 원형이나 태정형의 요소로, 추가 정보를 강조하거나 표시하는 데 사용됩니다. 이를 통해 핸드폰 앱에서 볼 수 있는 작은 알림 버블과 같은 역할을 합니다 - 시선을 사로잡고, 정보를 제공합니다!

현실 세계의 비유

Thought experiment: 상상해 보세요, 스카우트 제복을 입고 있다고요. 소맨에 달린 배지는 여러분의 성과를 나타내는 것이죠? 부트스트랩 배지도 디지털 세계에서 비슷한 방식으로 작동합니다. unread messages, status (new, sale 등)를 표시하거나, 단순히 웹 페이지에 시각적인 흥미를 더하는 데 사용할 수 있습니다.

부트스트랩 배지 시작하기

코드로 들어가기 전에, 부트스트랩을 설정했는지 확인해 보겠습니다. 걱정 마세요! 캠핑 텐트 설치하는 것보다 쉽습니다!

부트스트랩 설정

부트스트랩을 사용하려면 CSS와 JavaScript 파일을 HTML에 포함시켜야 합니다. 다음은 그 방법입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Badges Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 여러분의 콘텐츠가 여기 들어갑니다 -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이렇게 하면 배지 공연의 무대를 설정한 것입니다. 부트스트랩의 CSS와 JavaScript 파일을 링크하여, 배지 포함한 모든 부트스트랩 기능에 접근할 수 있습니다.

기본 배지 사용

이제 모든 준비가 끝났으니, 첫 번째 배지를 만들어 보겠습니다!

간단한 배지 예제

<h1>Welcome to my blog <span class="badge bg-secondary">New</span></h1>

이 예제에서 우리는 제목 옆에 배지를 추가했습니다. span 요소에 badge와 bg-secondary 클래스를 추가하여 간단한 회색 배지를 생성합니다.

설명

<span>: 텍스트의 일부를 마킹하는 인라인 컨테이너입니다.
class="badge": 이 부트스트랩 클래스는 우리의 span을 배지로 만듭니다.
bg-secondary: 배지에 회색 배경색을 추가합니다.

배지 색상

부트스트랩은 배지에 다양한 색상을 제공합니다. 함께 살펴보겠습니다!

<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>

이 배지들은 각각 다른 색상을 가지고 있으며, 다양한 의미를 전달하거나 페이지에 색채를 더하는 데 적합합니다!

색상 의미 표

색상	일반적인 사용
Primary	주요 동작이나 정보
Secondary	덜 중요한 정보
Success	긍정적인 동작이나 메시지
Danger	경고나 오류 메시지
Warning	주의 정보
Info	중립적인 정보 메시지
Light	미묘한 배경이나 덜 강조
Dark	높은 대비나 중요한 정보

태정형 배지

배지를 약간 더 둥글게 만들고 싶다면, 태정형 배지를 사용해 보세요!

<span class="badge rounded-pill bg-primary">Pill Badge</span>

rounded-pill 클래스를 추가하여 일반 배지를 태정형으로 변환합니다. 배지에 마이크로 메이크오버를 시키는 것입니다!

버튼 내 배지

배지를 버튼 내에 사용하여 멋진 효과를 만들 수 있습니다. 함께 시도해 보겠습니다:

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

이렇게 하면 "Messages"라는 버튼 옆에 작은 배지로 숫자 4를 표시합니다. unread message counts와 같은 것을 표시하는 데 적합합니다!

위치 지정 배지

때로는 배지를 다른 요소에 상대적으로 위치시키고 싶을 때가 있습니다. 부트스트랩은 위치 지정 배지를 쉽게 만들 수 있도록 합니다:

<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>

이렇게 하면 버튼의 상단 오른쪽 모서리에 배지를 위치시키며, 버튼과 약간 겹쳐 보입니다. 버튼 디저트의 체리처럼입니다!

설명

position-relative: 버튼을 배지의 위치 지정 컨텍스트로 만듭니다.
position-absolute: 배지를 버튼 내에서 절대적으로 위치시킵니다.
top-0 start-100: 배지를 상단 오른쪽 모서리에 위치시킵니다.
translate-middle: 배지를 시각적으로 더 잘 정렬하기 위해 이동시킵니다.
visually-hidden: 시각적으로 표시되지 않지만, 화면 리더기에 의해 읽혀지는 텍스트를 제공합니다.

결론

그렇습니다, 여러분! 우리는 부트스트랩 배지의 세상을 여행했습니다. 간단한 색상 배지에서 태정형 배지, 버튼에 위치한 배지까지! 배지는 웹 디자인 레시피의 양념처럼, 지혜롭게 사용하면 됩니다. 너무 많이 사용하면 맛이 깨질 수 있습니다!

연습이 완벽을 이루는 열쇠입니다. 다양한 조합을 실험해 보지 마세요. 누가 알략니까? 배지를 창의적으로 사용하면 다음 큰 웹 디자인 트렌드를 만들 수도 있습니다!

Happy coding, and may your badges always be bright and your tooltips always informative!

Credits: Image by storyset

이전 튜토리얼:

부트스트랩 - 모달 데모

다음 튜토리얼:

Bootstrap - 크리켓 사导航 Demo