높이

간격과 같은 4px 스케일. 핵심은 한 줄에 놓이는 컨트롤(버튼·인풋)의 높이를 통일하는 것.

컨트롤 높이 · control

h-8

32px

작은 버튼·뱃지·컴팩트 컨트롤(sm).

h-9

36px

기본: 인풋·버튼·셀렉트(md).

h-10

40px

큰 버튼·검색창(lg).

h-12

48px

아주 큼·터치 타깃·히어로 입력.

같은 행의 버튼·인풋·셀렉트는 같은 높이로: 기본은 h-9(36px). 높이가 어긋나면 정렬이 무너진다.

h-full

100%

부모 높이를 채움.

min-h-screen

100vh

최소 뷰포트 높이: 페이지 셸. 모바일 주소창 대응엔 min-h-dvh.

max-h-72

288px

드롭다운·리스트: overflow-y-auto와 함께 스크롤 영역 제한.

긴 목록은 max-h-* + overflow-y-auto로 높이를 가두고 스크롤시킨다: 드롭다운·메뉴의 표준.