웹 페이지에서 여러 버튼을 세로로 나열해 하나의 그룹처럼 보이게 하고 싶다면, CSS만으로도 간단하게 구현할 수 있습니다. 이 글에서는 display: block 속성과 :not(:last-child) 선택자를 활용해 깔끔한 수직 버튼 그룹을 만드는 방법을 단계별로 살펴보겠습니다.
핵심 원리
수직 버튼 그룹을 만드는 핵심은 다음 두 가지입니다.
1. 각 버튼에 display: block과 width: 100%를 적용해 버튼이 세로로 쌓이고 부모 컨테이너의 전체 너비를 차지하도록 합니다.
2. button:not(:last-child) 선택자로 마지막 버튼을 제외한 모든 버튼에 아래쪽 테두리를 추가해 버튼 사이의 경계선을 만들어 줍니다.
예제 코드
아래는 CSS로 수직 버튼 그룹을 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<style>
*,*::before,*::after{
box-sizing: border-box;
}
.btnGroup{
display: inline-block;
font-size: 0;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button{
display: block;
width: 100%;
margin:0px;
border:none;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
}
button:not(:last-child){
border-bottom: 2px solid rgb(6, 134, 49);
}
button:hover{
background:rgb(48, 24, 134);
box-shadow: 5px 10px 18px rgb(41, 39, 173);
color:white;
}
</style>
<body>
<h1>Button Group</h1>
<div class="btnGroup">
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
</div>
<h2>Hover over the above button group to see hover effects</h2>
</body>
</html>실행 결과
위 코드를 실행하면 Facebook, Twitter, LinkedIn 세 개의 버튼이 세로로 정렬된 버튼 그룹이 생성됩니다. 버튼 그룹에는 진한 초록색 테두리와 은은한 초록빛 그림자 효과가 적용되어 입체적인 느낌을 줍니다.
마우스 오버 효과
버튼 위에 마우스를 올리면 :hover 가상 클래스에 의해 배경색이 보라색으로 변경되고, 글자가 흰색으로 바뀌며 파란빛 그림자가 나타나 역동적인 시각 효과를 확인할 수 있습니다.
마무리
이처럼 CSS의 기본 속성만 잘 조합하면 별도의 라이브러리 없이도 세련된 수직 버튼 그룹을 만들 수 있습니다. 색상, 패딩, 그림자 값을 자유롭게 변경해 자신만의 스타일로 응용해 보세요.