🧩
CSS 컴포넌트 만들기
뱃지, 토스트, 토글 스위치, 프로그레스 바 등 실무에서 자주 쓰이는 UI 컴포넌트를 만들어보세요.
1뱃지 (Badge)
뱃지는 상태나 카테고리를 표시하는 작은 라벨입니다. 색상으로 의미를 구분합니다.
미리보기HTMLCSS
HTML
<span class="badge badge-blue">New</span>
<span class="badge badge-green">완료</span>
<span class="badge badge-red">긴급</span>
<span class="badge badge-gray">대기중</span>CSS
.badge {
display: inline-block;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
border-radius: 9999px;
}
.badge-blue { background: #eff6ff; color: #2563eb; }
.badge-green { background: #ecfdf5; color: #059669; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-gray { background: #f3f4f6; color: #6b7280; }뱃지는 background와 color만 바꾸면 다양한 변형(variant)을 쉽게 만들 수 있습니다.
2프로그레스 바
프로그레스 바는 진행 상황을 시각적으로 보여줍니다. 두 개의 div를 겹쳐서 만듭니다.
미리보기HTMLCSS
HTML
<div class="progress">
<div class="progress-bar" style="width: 65%"></div>
</div>CSS
.progress {
width: 300px;
height: 10px;
background: #f3f4f6;
border-radius: 9999px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #0066ff, #00c2ff);
border-radius: 9999px;
transition: width 0.5s ease;
}overflow: hidden은 필수입니다. 안 넣으면 안쪽 바의 border-radius가 보이지 않습니다.
3토스트 알림
토스트는 화면 구석에 나타나는 알림 메시지입니다. box-shadow와 position으로 만듭니다.
미리보기HTMLCSS
HTML
<div class="toast">
<span class="toast-icon">✓</span>
<span class="toast-msg">저장되었습니다</span>
</div>CSS
.toast {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: #111827;
color: white;
border-radius: 10px;
font-size: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.toast-icon {
width: 22px; height: 22px;
background: #059669;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
}실제로는 position: fixed와 animation을 조합해서 화면 하단에서 슬라이드 업 되도록 만듭니다.