CSS만으로 분할 버튼 드롭다운 만들기

분할 버튼 드롭다운(Split Button Dropdown)은 하나의 버튼 안에 두 가지 기능을 결합한 UI 요소입니다. 왼쪽 영역은 기본 동작을 실행하는 버튼 역할을 하고, 오른쪽의 화살표(>>) 영역에 마우스를 올리면 추가 선택 옵션이 담긴 메뉴가 펼쳐집니다. 이 글에서는 자바스크립트 없이 순수 CSS만으로 분할 버튼 드롭다운을 구현하는 방법을 소개합니다.

핵심 원리

구현의 핵심은 :hover 가상 클래스와 display 속성 전환입니다. 드롭다운 메뉴는 기본적으로 display: none;으로 숨겨두고, 버튼 영역에 마우스가 올라가면 display: block;으로 변경되어 메뉴가 나타나도록 처리합니다. 또한 position: absolute;를 활용해 메뉴가 버튼 바로 아래에 겹쳐서 표시되도록 배치합니다.

전체 예제 코드

다음은 CSS를 사용해 분할 버튼 드롭다운을 만드는 완전한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
button {
    background-color: rgb(18, 5, 95);
    color: white;
    padding: 16px;
    font-size: 20px;
    font-weight: bolder;
    font-family: monospace, sans-serif;
    border: none;
    outline: none;
}
.dropMenu {
    position: absolute;
    display: inline-block;
}
.dropMenu button {
    border-left: 1px solid #0d8bf2;
}
.dropContent {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 1;
}
.dropContent a {
    color: black;
    background-color: rgb(184, 253, 255);
    font-size: 18px;
    font-weight: bold;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropContent a:hover {
    background-color: rgb(48, 0, 110);
    color: white;
}
.dropMenu:hover .dropContent {
    display: block;
}
.btn:hover,
.dropMenu:hover .btn {
    background-color: #0b7dda;
}
</style>
</head>
<body>
<h1>분할 버튼 드롭다운 예제</h1>
<button>버튼</button>
<div class="dropMenu">
<button>>></button>
<div class="dropContent">
<a href="#">첫 번째 링크</a>
<a href="#">두 번째 링크</a>
<a href="#">세 번째 링크</a>
</div>
</div>
<h1>'>>' 버튼 위에 마우스를 올려 드롭다운 메뉴 열기</h1>
</body>
</html>

코드 핵심 포인트

.dropMenu:hover .dropContent { display: block; } — 마우스를 올렸을 때 숨겨진 메뉴를 표시하는 핵심 규칙입니다.
border-left — 화살표 버튼과 일반 버튼 사이에 경계선을 그려 '분할된' 모양을 만듭니다.
position: absolute + z-index: 1 — 드롭다운 메뉴가 다른 콘텐츠 위로 떠서 나타나도록 합니다.
a:hover 스타일 — 메뉴 항목에 마우스를 올릴 때 배경색과 글자색이 반전되어 시각적 피드백을 제공합니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

CSS만으로 분할 버튼 드롭다운 만들기 – 완전 정복 가이드

오른쪽 화살표(>>) 버튼 위에 마우스를 올리면 아래와 같이 드롭다운 메뉴가 열립니다.

CSS만으로 분할 버튼 드롭다운 만들기 – 완전 정복 가이드

마무리

이처럼 :hover와 display 속성만 활용하면 별도의 자바스크립트 없이도 간단한 분할 버튼 드롭다운을 손쉽게 만들 수 있습니다. 실무에서는 접근성을 고려해 키보드 포커스(:focus-within) 지원을 추가하거나, 클릭 방식의 토글이 필요하다면 약간의 자바스크립트를 함께 사용하는 것이 좋습니다.