최대 높이

최대 높이 (Max Height)

요소의 최대 높이를 정하는 유틸리티예요. CSS의 max-height 속성을 조절해 요소가 특정 높이 이상으로 커지지 않도록 제한해요.

출처: 문서

본문

클래스와 스타일

max-h-<number> — max-height: calc(var(--spacing) * <number>);
max-h-<fraction> — max-height: calc(<fraction> * 100%);
max-h-none — max-height: none;
max-h-px — max-height: 1px;
max-h-full — max-height: 100%;
max-h-screen — max-height: 100vh;
max-h-dvh — max-height: 100dvh;
max-h-dvw — max-height: 100dvw;
max-h-lvh — max-height: 100lvh;
max-h-lvw — max-height: 100lvw;
max-h-svh — max-height: 100svh;
max-h-svw — max-height: 100svw;
max-h-min — max-height: min-content;
max-h-max — max-height: max-content;
max-h-fit — max-height: fit-content;
max-h-lh — max-height: 1lh;
max-h-(<custom-property>) — max-height: var(<custom-property>);
max-h-[<value>] — max-height: <value>;

기본 예제

max-h-<number> 유틸리티(예: max-h-24, max-h-64)를 쓰면 스페이싱 스케일(spacing scale)에 기반해 요소의 최대 높이를 고정값으로 정할 수 있어요.

<div class="h-96 ...">
  <div class="h-full max-h-80 ...">max-h-80</div>
  <div class="h-full max-h-64 ...">max-h-64</div>
  <div class="h-full max-h-48 ...">max-h-48</div>
  <div class="h-full max-h-40 ...">max-h-40</div>
  <div class="h-full max-h-32 ...">max-h-32</div>
  <div class="h-full max-h-24 ...">max-h-24</div>
</div>

백분율 사용하기

max-h-full 또는 max-h-<fraction> 유틸리티(예: max-h-1/2, max-h-2/5)를 쓰면 요소의 최대 높이를 백분율 기반으로 정할 수 있어요.

<div class="h-96 ...">
  <div class="h-full max-h-9/10 ...">max-h-9/10</div>
  <div class="h-full max-h-3/4 ...">max-h-3/4</div>
  <div class="h-full max-h-1/2 ...">max-h-1/2</div>
  <div class="h-full max-h-1/4 ...">max-h-1/4</div>
  <div class="h-full max-h-full ...">max-h-full</div>
</div>

커스텀 값 사용하기

max-h-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 최대 높이를 정할 수 있어요.

<div class="max-h-[220px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 max-h-(<custom-property>) 문법도 사용할 수 있어요.

<div class="max-h-(--my-max-height) ...">
  <!-- ... -->
</div>

이건 max-h-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

max-height 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="h-48 max-h-full md:max-h-screen ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

테마 커스터마이징

max-h-<number> 유틸리티는 --spacing 테마 변수에 의해 제어되며, 이 변수는 자신의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일을 커스터마이즈하는 방법은 theme variable 문서에서 더 알아보세요.