웹 페이지에서 레이블(Label)은 상태나 카테고리를 시각적으로 표시하는 작은 배지 형태의 요소입니다. CSS를 활용하면 성공(Success), 정보(Info), 경고(Warning), 위험(Danger) 등 다양한 유형의 레이블을 손쉽게 만들 수 있습니다.
레이블은 일반적으로 <span> 태그에 클래스를 적용해 구현하며, 배경색과 글자색, 여백(padding)만 잘 조합하면 깔끔하고 직관적인 UI를 완성할 수 있습니다.
CSS 레이블 스타일링 예제
아래 코드는 5가지 색상의 레이블을 만드는 전체 HTML/CSS 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
span {
font-size: 18px;
font-weight: 600;
color: white;
padding: 8px;
}
.success {
background-color: #4caf50;
}
.info {
background-color: #2196f3;
}
.warning {
background-color: #ff9800;
}
.danger {
background-color: #f44336;
}
.other {
background-color: #e7e7e7;
color: black;
}
</style>
</head>
<body>
<h1>Labels Example</h1>
<span class="success">Success</span>
<span class="info">Info</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Other</span>
</body>
</html>코드 설명
- 공통 스타일(span) — 모든 레이블에 글자 크기 18px, 굵기 600, 흰색 글자, 8px의 내부 여백을 적용합니다.
- .success — 초록색(#4caf50) 배경으로 성공 상태를 나타냅니다.
- .info — 파란색(#2196f3) 배경으로 정보성 메시지를 표시합니다.
- .warning — 주황색(#ff9800) 배경으로 주의가 필요한 상태를 알립니다.
- .danger — 빨간색(#f44336) 배경으로 오류나 위험 상태를 강조합니다.
- .other — 연회색(#e7e7e7) 배경에 검정 글자를 사용해 기타 항목을 표현합니다.
실행 결과
위 코드를 브라우저에서 실행하면 초록, 파랑, 주황, 빨강, 회색의 다섯 가지 레이블이 가로로 나열되어 표시됩니다. 각 레이블은 배경색 덕분에 한눈에 구별되며, 흰색 볼드체 텍스트가 가독성을 높여줍니다.
더 발전시키는 팁
실무에서는 레이블에 border-radius 속성을 추가하면 모서리가 둥근 필(pill) 형태의 배지를 만들 수 있습니다. 예를 들어 border-radius: 16px;를 추가하면 훨씬 부드러운 느낌의 현대적인 디자인이 완성됩니다. 또한 display: inline-block;을 함께 사용하면 여백 조절이 더욱 자유로워집니다.