확대/축소

확대/축소 (Zoom)

CSS zoom 속성을 사용해 요소를 확대하거나 축소하는 유틸리티예요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

zoom-<number> zoom: <number>%;

zoom-(<custom-property>) zoom: var(<custom-property>);

zoom-[<value>] zoom: <value>;

예시 (Examples)

기본 예제 (Basic example)

zoom-75, zoom-125 같은 zoom-<number> 유틸리티를 사용하면 CSS zoom 속성으로 요소를 확대/축소할 수 있어요.

<div class="zoom-75 ...">
  <!-- ... -->
</div><div class="zoom-100 ...">
  <!-- ... -->
</div><div class="zoom-125 ...">
  <!-- ... -->
</div>

커스텀 값 사용하기 (Using a custom value)

zoom-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 zoom을 설정할 수 있어요.

<div class="zoom-[1.1] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 zoom-(<custom-property>) 문법을 사용할 수도 있어요.

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

이것은 zoom-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

호버 시 적용하기 (Applying on hover)

zoom 유틸리티 앞에 hover:* 같은 변형을 붙이면 해당 상태에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="zoom-100 hover:zoom-125 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

반응형 디자인 (Responsive design)

zoom 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="zoom-100 md:zoom-125 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)