max-height

예제

기본 예제

max-h-<number> 유틸리티를 사용해 요소의 최대 높이를 설정할 수 있습니다. 예를 들어 max-h-24와 max-h-64는 간격 스케일에 기반한 고정된 최대 높이를 지정합니다.

<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() 함수를 추가해 줍니다.

반응형 디자인

접두사 a max-height 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스텀하기

max-h-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:

@theme {  --spacing: 1px; }

스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.