CSS의 border 속성을 활용하면 테두리가 있는 버튼 그룹을 간단하게 만들 수 있습니다. 여러 버튼을 하나의 그룹처럼 나란히 배치하려면 float: left를 함께 사용하는 것이 핵심입니다.
주요 CSS 속성 설명
- border: 버튼의 테두리 두께, 스타일, 색상을 지정합니다. 예:
border: 3px solid blue; - float: left: 버튼들을 가로 방향으로 나란히 정렬합니다.
- padding: 버튼 내부 여백으로 클릭 영역과 크기를 조절합니다.
- text-align: 버튼 안의 텍스트를 가운데 정렬합니다.
예제 코드
아래 코드를 실행하면 파란색 테두리가 적용된 노란색 버튼들이 가로로 정렬된 버튼 그룹을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
color: black;
background-color: yellow;
width: 120px;
text-align: center;
font-size: 15px;
padding: 20px;
float: left;
border: 3px solid blue;
}
.mybtn {
background-color: orange;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼 그룹을 확인해 보세요:</p>
<div class = "mybtn">
<button class = "btn">Result</button>
<button class = "btn">Result</button>
<button class = "btn">Result</button>
<button class = "btn">Result</button>
<button class = "btn">Result</button>
</div>
</body>
</html>추가 팁
float: left 대신 최신 CSS 기법인 display: flex를 사용하면 더 깔끔하게 버튼 그룹을 정렬할 수 있습니다. 부모 요소에 display: flex;를 지정하면 별도의 float 해제(clearfix) 없이도 자동으로 가로 배치됩니다.
.mybtn {
display: flex;
}또한 버튼 사이에 간격을 주고 싶다면 gap 속성이나 margin을 활용할 수 있으며, 마지막 버튼의 오른쪽 테두리만 제거해(border-right: none;) 테두리가 겹치지 않는 통일감 있는 디자인도 구현할 수 있습니다.