Height
Height
요소의 높이를 정해주는 유틸리티예요. 고정 높이, 비율 기반 높이, 뷰포트 높이 등 다양한 방식으로 요소의 높이를 조절할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
h-<number> |
height: calc(var(--spacing) * <number>); |
h-<fraction> |
height: calc(<fraction> * 100%); |
h-auto |
height: auto; |
h-px |
height: 1px; |
h-full |
height: 100%; |
h-screen |
height: 100vh; |
h-dvh |
height: 100dvh; |
h-dvw |
height: 100dvw; |
h-lvh |
height: 100lvh; |
h-lvw |
height: 100lvw; |
h-svh |
height: 100svh; |
h-svw |
height: 100svw; |
h-min |
height: min-content; |
h-max |
height: max-content; |
h-fit |
height: fit-content; |
h-lh |
height: 1lh; |
h-(<custom-property>) |
height: var(<custom-property>); |
h-[<value>] |
height: <value>; |
size-<number> |
width: calc(var(--spacing) * <number>); + height: calc(var(--spacing) * <number>); |
size-<fraction> |
width: calc(<fraction> * 100%); + height: calc(<fraction> * 100%); |
size-auto |
width: auto; + height: auto; |
size-px |
width: 1px; + height: 1px; |
size-full |
width: 100%; + height: 100%; |
size-dvw |
width: 100dvw; + height: 100dvw; |
size-dvh |
width: 100dvh; + height: 100dvh; |
size-lvw |
width: 100lvw; + height: 100lvw; |
size-lvh |
width: 100lvh; + height: 100lvh; |
size-svw |
width: 100svw; + height: 100svw; |
size-svh |
width: 100svh; + height: 100svh; |
size-min |
width: min-content; + height: min-content; |
size-max |
width: max-content; + height: max-content; |
size-fit |
width: fit-content; + height: fit-content; |
size-(<custom-property>) |
width: var(<custom-property>); + height: var(<custom-property>); |
size-[<value>] |
width: <value>; + height: <value>; |
예시 (Examples)
기본 예시 (Basic example)
h-<number> 유틸리티를 h-24나 h-64처럼 사용하면 스페이싱 스케일(spacing scale)을 기준으로 요소의 고정 높이를 정할 수 있어요.
<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>
백분율 사용하기 (Using a percentage)
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>
뷰포트에 맞추기 (Matching viewport)
h-screen 유틸리티를 사용하면 요소가 뷰포트의 전체 높이를 차지하게 만들 수 있어요.
<div class="h-screen">
<!-- ... -->
</div>
동적 뷰포트에 맞추기 (Matching dynamic viewport)
h-dvh 유틸리티를 사용하면 요소가 브라우저 UI가 늘어나거나 줄어들 때 함께 변하는 뷰포트의 전체 높이를 차지하게 만들 수 있어요.
<div class="h-dvh">
<!-- ... -->
</div>
큰 뷰포트에 맞추기 (Matching large viewport)
h-lvh 유틸리티를 사용하면 요소의 높이를 뷰포트가 가질 수 있는 가장 큰 높이로 설정할 수 있어요.
<div class="h-lvh">
<!-- ... -->
</div>
작은 뷰포트에 맞추기 (Matching small viewport)
h-svh 유틸리티를 사용하면 요소의 높이를 뷰포트가 가질 수 있는 가장 작은 높이로 설정할 수 있어요.
<div class="h-svh">
<!-- ... -->
</div>
너비와 높이를 함께 설정하기 (Setting both width and height)
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>
사용자 정의 값 사용하기 (Using a custom value)
h-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 높이를 정할 수 있어요.
<div class="h-[32rem] ...">
<!-- ... -->
</div>
CSS 변수를 사용할 때는 h-(<custom-property>) 문법도 쓸 수 있어요.
<div class="h-(--my-height) ...">
<!-- ... -->
</div>
이것은 h-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
height 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="h-1/2 md:h-full ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.
테마 커스터마이징 (Customizing your theme)
h-<number>와 size-<number> 유틸리티는 --spacing 테마 변수에 의해 결정돼요. 이 값은 자신의 테마에서 커스터마이징할 수 있어요.
@theme {
--spacing: 1px;
}
스페이싱 스케일을 커스터마이징하는 방법을 더 알아보려면 theme variable 문서를 확인해 보세요.