CSS로 세로 버튼 그룹 만들기
웹 페이지에서 여러 개의 버튼을 세로 방향으로 나란히 배치하고 싶다면, 별도의 라이브러리 없이 순수 CSS만으로 간단하게 구현할 수 있습니다. 핵심은 버튼 요소에 display: block; 속성을 적용하는 것입니다. 버튼은 기본적으로 인라인(inline) 요소처럼 동작하기 때문에 가로로 나열되지만, 블록(block)으로 변경하면 각 버튼이 한 줄을 모두 차지하며 자동으로 아래로 쌓이게 됩니다.
아래 예제 코드를 실행하면 주황색 배경에 초록색 테두리가 적용된 버튼 4개가 세로로 정렬된 버튼 그룹을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div class = "mybtn">
<button class = "button">결과</button>
<button class = "button">결과</button>
<button class = "button">결과</button>
<button class = "button">결과</button>
</div>
</body>
</html>코드 설명
- background-color: orange; — 버튼의 배경색을 주황색으로 지정합니다.
- border: 1px solid green; — 초록색 실선 테두리를 추가해 버튼 사이의 경계를 명확하게 합니다.
- width: 120px; — 버튼의 너비를 고정하여 그룹 전체가 일관된 폭을 유지하도록 합니다.
- padding: 10px; — 버튼 내부 여백을 주어 텍스트가 답답하지 않게 배치됩니다.
- text-align: center; — 버튼 안의 텍스트를 가운데 정렬합니다.
- display: block; — 이 속성이 세로 정렬의 핵심입니다. 각 버튼이 블록 요소가 되어 줄바꿈되며 위에서 아래로 차곡차곡 쌓입니다.
활용 팁
버튼 사이에 간격을 두고 싶다면 .button { margin-bottom: 8px; } 스타일을 추가하면 됩니다. 또한 마지막 버튼에는 :last-child { margin-bottom: 0; }를 적용하면 불필요한 하단 여백을 제거할 수 있습니다. 마우스를 올렸을 때 색상이 변하는 :hover 효과를 추가하면 사용자 경험도 한층 향상됩니다.