block-size

block-size (블록 크기)

요소의 블록 방향(위-아래) 크기를 지정하는 유틸리티예요. height와 비슷하지만 쓰기 모드(writing mode)를 따라 방향이 바뀔 수 있다는 점이 달라요.

출처: 문서

본문

ClassStyles

Examples

Basic example

block-24이나 block-64 같은 block-<number> 유틸리티를 사용하면 스페이싱 스케일을 기반으로 요소에 고정된 블록 크기를 지정할 수 있어요.

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

Using a percentage

block-full이나 block-1/2, block-2/5 같은 block-<fraction> 유틸리티를 사용하면 퍼센트 기반 블록 크기를 지정할 수 있어요.

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

Matching viewport

block-screen 유틸리티를 사용하면 요소가 뷰포트의 블록 크기 전체를 채우도록 해요.

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

Matching dynamic viewport

block-dvh 유틸리티를 사용하면 요소가 뷰포트의 블록 크기 전체를 채우되, 브라우저 UI가 늘어나거나 줄어들 때 함께 변하는 크기로 해요.

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

Matching large viewport

block-lvh 유틸리티를 사용하면 요소의 블록 크기를 뷰포트의 가능한 가장 큰 크기로 지정해요.

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

Matching small viewport

block-svh 유틸리티를 사용하면 요소의 블록 크기를 뷰포트의 가능한 가장 작은 크기로 지정해요.

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

Using a custom value

완전히 커스텀한 값으로 블록 크기를 지정하고 싶다면 block-[<value>] 문법을 사용해요.

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

CSS 변수로 지정하고 싶다면 block-(<custom-property>) 문법도 사용할 수 있어요.

<div class="block-(--my-block-size) ...">
  <!-- ... -->
</div>

이것은 block-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

Responsive design

block-size 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

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

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

Customizing your theme

block-<number> 유틸리티는 --spacing 테마 변수에 따라 만들어지며, 이 변수는 사용자 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일 커스터마이즈에 대해 더 자세히 알고 싶다면 theme variable 문서를 참고해 주세요.

더 알아보기 (Learn more)