DSDesignSkill
|

/컴포넌트/요금 비교 매트릭스 — 4열 sticky 헤더

새 창 ↗

컨테이너 폭 그대로 · sandbox 미리보기

설명

모노 그레이 지면에 시안(#06b6d4) 한 색만 얹어 "선택된 열"을 시각적으로 확정하는 비교표다. 표를 세로·가로 양축 스크롤 컨테이너(max-h + overflow-auto)에 넣어 헤더 행이 top-0로, 기능명 열이 left-0로 실제 고정되게 만들었다 — overflow-x-auto만 걸면 sticky가 죽는 흔한 함정을 피한 구조다. 기능은 빌드·협업·데이터·지원 4개 그룹으로 끊고 그룹 라벨도 sticky-left로 붙여 가로 스크롤 중에도 맥락이 남는다. 체크는 시안 원형 배지, 미제공은 중립 대시로 위계를 나눴고 각 아이콘에 sr-only 텍스트를 붙였다. Manrope 800의 넓은 카운터가 숫자 열(tabular-nums)에서 단단하게 읽힌다. 변형 3종 — 풀 매트릭스, 다크 압축형(결정 5행), 표 없이 델타만 보여주는 단계별 스택 — 을 세로로 나열했다.

섹션 구성

  1. 01섹션 인트로 + 체크·대시 범례
  2. 02요금제 요약 카드 4개 (Growth 다크 강조)
  3. 03매트릭스 제목 + 모바일 가로 스크롤 안내
  4. 04기능 매트릭스 — sticky 헤더 행 + 고정 첫 열 (기능 그룹 4단 · 20행)
  5. 05매트릭스 하단 요금제별 CTA 행 (tfoot)
  6. 06초과 과금 각주
  7. 07변형 2 — 다크 압축 매트릭스 (결정 5행)
  8. 08다크 매트릭스 하단 CTA 바
  9. 09변형 3 — 단계별 업그레이드 스택 (표 없는 델타형)
  10. 10인라인 시트 수 문의 폼
  11. 11데모 데이터 고지

변경 이력

v1.0.02026-07-31

최초 등록