웹 페이지에서 여러 개의 버튼을 하나로 묶어 표시하고 싶을 때가 있습니다. 이런 버튼 그룹(Button Group)은 CSS의 float 속성만으로도 아주 간단하게 만들 수 있습니다. 복잡한 JavaScript나 외부 라이브러리 없이 순수 HTML과 CSS만으로 구현해 보겠습니다.
버튼 그룹 예제 코드
아래 코드를 그대로 복사해서 실행하면 가로로 나란히 정렬된 버튼 그룹을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
color: black;
background-color: orange;
width: 120px;
text-align: center;
font-size: 15px;
padding: 20px;
float: left;
}
.mybtn {
background-color: orange;
}
</style>
</head>
<body>
<h2>실행 결과</h2>
<p>아래 버튼 그룹을 확인해 보세요:</p>
<div class="mybtn">
<button class="btn">결과</button>
<button class="btn">결과</button>
<button class="btn">결과</button>
<button class="btn">결과</button>
<button class="btn">결과</button>
</div>
</body>
</html>
코드 핵심 요소 살펴보기
1. .btn 클래스 – 개별 버튼 스타일
.btn 클래스는 그룹 안에 있는 각각의 버튼에 공통으로 적용되는 스타일입니다.
- width: 120px – 모든 버튼의 너비를 동일하게 맞춰 그룹이 깔끔하게 보이도록 합니다.
- padding: 20px – 버튼 내부 여백을 넉넉히 주어 클릭 영역을 키우고 시각적으로 안정감을 줍니다.
- text-align: center – 버튼 안의 텍스트를 가운데 정렬합니다.
- float: left – 이 속성이 핵심입니다. 버튼들이 줄바꿈 없이 왼쪽부터 차례대로 나란히 배치됩니다.
2. .mybtn 클래스 – 버튼 그룹 컨테이너
.mybtn은 버튼들을 감싸는 부모 요소(div)입니다. 배경색을 지정하여 버튼 그룹 전체가 하나의 묶음처럼 보이게 하는 역할을 합니다.
더 나은 방법: Flexbox 활용하기
float는 오래된 기법으로, 부모 요소의 높이가 무너지는(collapse) 문제가 발생할 수 있습니다. 최신 브라우저에서는 Flexbox를 사용하는 것이 권장됩니다.
.mybtn {
display: flex;
}
.btn {
flex: 1;
}
Flexbox를 사용하면 코드가 더 짧아지고, 버튼 사이의 간격 조절(gap)이나 반응형 대응도 훨씬 쉬워집니다.
마무리
이처럼 CSS만으로도 손쉽게 버튼 그룹을 만들 수 있습니다. 실무에서는 위 예제에 마우스 오버(hover) 효과나 활성 상태(active) 스타일을 추가하면 더욱 완성도 높은 UI를 구현할 수 있습니다. 직접 코드를 수정해 가며 다양한 디자인을 실험해 보세요.