HTML 코드
<div class="tabs"><button class="on">설명</button><button>리뷰 12</button><button>배송</button></div>
<div class="panel">선택한 탭의 내용이 여기 표시됩니다.</div>
<style>
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{font:inherit;border:0;background:none;color:var(--muted);padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .on{color:var(--fg);font-weight:600;border-bottom-color:var(--accent)}
.panel{padding:16px 2px;color:var(--muted)}
</style>AI에게 이렇게 요청하세요
상품 상세에 클릭하면 아래 내용만 바뀌고 선택된 탭은 파란 밑줄로 표시되는 '설명 / 리뷰 / 배송' 탭 만들어줘
<div class="tabs"><button class="on">설명</button><button>리뷰 12</button><button>배송</button></div>
<div class="panel">선택한 탭의 내용이 여기 표시됩니다.</div>
<style>
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{font:inherit;border:0;background:none;color:var(--muted);padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .on{color:var(--fg);font-weight:600;border-bottom-color:var(--accent)}
.panel{padding:16px 2px;color:var(--muted)}
</style>언제 쓰나
한 페이지 안에서 관련 있지만 동시에 볼 필요는 없는 내용을 나눌 때.
비슷한 것과 차이
- 세그먼트 컨트롤: 박스 안에서 버튼처럼 눌리는 형태, 보기 방식(목록/격자) 전환에 주로 씀
- 페이지네이션: 같은 종류 목록을 쪽 번호로 나눔