min-height

예제

기본 예제

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

<div class="h-20 ...">  <div class="min-h-80 ...">min-h-80</div>  <div class="min-h-64 ...">min-h-64</div>  <div class="min-h-48 ...">min-h-48</div>  <div class="min-h-40 ...">min-h-40</div>  <div class="min-h-32 ...">min-h-32</div>  <div class="min-h-24 ...">min-h-24</div></div>

백분율 사용하기

min-h-full과 min-h-<fraction> 유틸리티를 사용해 요소에 백분율 기반의 최소 높이를 지정할 수 있습니다. 예를 들어 min-h-1/2, min-h-2/5 등을 사용할 수 있습니다.

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

커스텀 값 사용하기

min-h-[<value>] 구문을 사용하세요 minimum height를 완전히 커스텀한 값으로 설정하려면:

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

CSS 변수를 사용하려면 min-h-(<custom-property>) 구문을 사용할 수도 있습니다:

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

이는 min-h-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

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

<div class="h-24 min-h-0 md:min-h-full ...">  <!-- ... --></div>

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

테마 커스텀하기

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

@theme {  --spacing: 1px; }

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