세그먼트 컨트롤 Segmented control
붙어 있는 버튼 2~5개 중 하나를 고르는 입력 (목록/격자 전환 등)
다른 이름: 세그먼트 버튼, 버튼 그룹, Button group, Toggle group
HTML 코드
<div class="seg"><button class="on">일</button><button>주</button><button>월</button></div>
<div class="seg"><button>목록</button><button class="on">격자</button></div>
<style>
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px;margin:0 8px 8px 0}
.seg button{font:inherit;border:0;background:none;color:var(--muted);padding:6px 14px;border-radius:7px;cursor:pointer}
.seg .on{background:var(--bg);color:var(--fg);font-weight:600;box-shadow:var(--shadow)}
</style>AI에게 이렇게 요청하세요
목록 위 오른쪽에 회색 배경 안에서 선택된 쪽만 흰 버튼처럼 떠 보이는 '목록 | 격자' 세그먼트 컨트롤 넣어줘
<div class="seg"><button class="on">일</button><button>주</button><button>월</button></div>
<div class="seg"><button>목록</button><button class="on">격자</button></div>
<style>
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px;margin:0 8px 8px 0}
.seg button{font:inherit;border:0;background:none;color:var(--muted);padding:6px 14px;border-radius:7px;cursor:pointer}
.seg .on{background:var(--bg);color:var(--fg);font-weight:600;box-shadow:var(--shadow)}
</style>언제 쓰나
보기 방식·기간·단위 전환처럼 선택지가 적고 하나만 고를 때.
비슷한 것과 차이
- 탭: 아래 콘텐츠 영역 자체를 바꿈 (다른 내용). 세그먼트는 같은 내용을 다르게 보거나 값을 고름
- 토글 스위치: 켜기/끄기 두 상태만