height

예제

기본 예제

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

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

백분율 사용하기

h-full과 h-<fraction> 유틸리티(예: h-1/2, h-2/5)를 사용해 엘리먼트에 백분율 기반 높이를 지정할 수 있습니다.

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

뷰포트 높이에 맞추기

h-screen 유틸리티를 사용하면 엘리먼트가 뷰포트의 전체 높이를 차지하도록 만들 수 있습니다:

<div class="h-screen">  <!-- ... --></div>

동적 뷰포트 높이 맞추기

브라우저 UI가 확장되거나 축소될 때 뷰포트 높이에 맞춰 요소의 높이를 조정하려면 h-dvh 유틸리티를 사용하세요:

<div class="h-dvh">  <!-- ... --></div>

큰 뷰포트에 맞추기

h-lvh 유틸리티를 사용하면 엘리먼트의 높이를 뷰포트의 가능한 최대 높이로 설정할 수 있습니다:

<div class="h-lvh">  <!-- ... --></div>

작은 뷰포트에 맞추기

h-svh 유틸리티를 사용하면 엘리먼트의 높이를 뷰포트의 가장 작은 높이로 설정할 수 있습니다:

<div class="h-svh">  <!-- ... --></div>

너비와 높이 동시 설정

size-px, size-4, size-full 같은 유틸리티를 사용해 엘리먼트의 너비와 높이를 동시에 설정할 수 있습니다:

<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

커스텀 값 사용하기

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

<div class="h-[32rem] ...">  <!-- ... --></div>

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

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

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

반응형 디자인

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

<div class="h-1/2 md:h-full ...">  <!-- ... --></div>

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

테마 커스텀하기

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

@theme {  --spacing: 1px; }

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