배지

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 22번째.

배지는 다른 요소 옆에 개수나 상태를 표시하는 데 사용되는 작은 표시기입니다. 예: 읽지 않은 메시지를 보여주는 숫자가 있는 빨간색 원. 이들은 종종 버튼, 아이콘 또는 프로필 사진에 부착됩니다.

중요한 이유:

중요한 정보(예: 알림)를 빠르게 확인할 수 있게 해줍니다.
앱, 소셜 미디어, 이커머스 웹사이트에서 흔히 사용됩니다.

간단한 배지를 만들어 봅시다:

먼저 배지를 담을 기본 HTML 요소를 생성하세요:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

다음으로, 배지의 스타일을 지정하기 위해 몇 가지 기본적인 CSS를 추가합니다:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

이것으로 배지가 버튼의 모서리에 위치하여 메시지 수를 보여줍니다.

챌린지

쉬움

여러 개의 버튼이 포함된 HTML이 제공됩니다. 여러분의 작업은 CSS만을 사용하여 각 버튼의 오른쪽 상단 모서리에 표시되는 배지(badges)를 만드는 것입니다. 작업 내용:

배지 위치 설정: 버튼을 기준으로 배치할 수 있도록 position: absolute를 사용하세요.
오른쪽 상단 모서리에 배치: top과 right에 음수 값을 사용하세요.
색상 및 텍스트 설정: 빨간색 배경과 흰색 텍스트를 사용하세요.
글꼴 및 패딩 조정: font-size: 12px; font-weight: bold; padding: 4px 7px;로 설정하세요.
원형으로 만들고 입체감 추가: border-radius와 작은 박스 그림자(box-shadow: 0 2px 4px rgba(0,0,0,0.2))를 사용하세요.

치트 시트

배지는 다른 요소 옆에 개수나 상태를 표시하기 위해 사용되는 작은 지표로, 일반적으로 버튼, 아이콘 또는 프로필 사진에 부착됩니다.

기본 HTML 구조:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

배지를 위한 CSS 스타일링:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

주요 속성:

position: absolute - 부모 요소를 기준으로 정밀한 위치 지정이 가능하게 함
음수 top 및 right 값 - 배지를 부모 요소 바깥으로 위치시킴
border-radius: 50% - 원형 모양을 생성함
box-shadow - 깊이감과 시각적 분리 효과를 추가함

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>