scale
scale
scale 유틸리티는 요소를 확대하거나 축소할 때 사용해요. 각 축별(scale-x, scale-y, scale-z)로도 조절할 수 있어요.
출처: 문서
본문
클래스 스타일 (ClassStyles)
비율 조정 (Scaling)
| 클래스 | CSS |
|---|---|
scale-none |
scale: none; |
scale-<number> |
scale: <number>% <number>%; |
-scale-<number> |
scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) |
scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] |
scale: <value>; |
x축 비율 조정 (Scaling on x-axis)
| 클래스 | CSS |
|---|---|
scale-x-<number> |
scale: <number>% var(--tw-scale-y); |
-scale-x-<number> |
scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) |
scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] |
scale: <value> var(--tw-scale-y); |
y축 비율 조정 (Scaling on y-axis)
| 클래스 | CSS |
|---|---|
scale-y-<number> |
scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> |
scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) |
scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] |
scale: var(--tw-scale-x) <value>; |
z축 비율 조정 (Scaling on z-axis)
| 클래스 | CSS |
|---|---|
scale-z-<number> |
scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> |
scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) |
scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] |
scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d |
scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
예시 (Examples)
기본 예시 (Basic example)
scale-<number> 형태의 유틸리티(예: scale-75, scale-150)를 사용하면 요소를 원본 크기의 일정 비율로 확대/축소할 수 있어요:
<img class="scale-75 ..." src="/img/mountains.jpg" />
<img class="scale-100 ..." src="/img/mountains.jpg" />
<img class="scale-125 ..." src="/img/mountains.jpg" />
x축으로 확대/축소하기 (Scaling on the x-axis)
scale-x-<number> 유틸리티(예: scale-x-75, -scale-x-150)를 사용하면 요소를 원본 너비의 일정 비율로 x축 방향으로 확대/축소할 수 있어요:
<img class="scale-x-75 ..." src="/img/mountains.jpg" />
<img class="scale-x-100 ..." src="/img/mountains.jpg" />
<img class="scale-x-125 ..." src="/img/mountains.jpg" />
y축으로 확대/축소하기 (Scaling on the y-axis)
scale-y-<number> 유틸리티(예: scale-y-75, scale-y-150)를 사용하면 요소를 원본 높이의 일정 비율로 y축 방향으로 확대/축소할 수 있어요:
<img class="scale-y-75 ..." src="/img/mountains.jpg" />
<img class="scale-y-100 ..." src="/img/mountains.jpg" />
<img class="scale-y-125 ..." src="/img/mountains.jpg" />
음수 값 사용하기 (Using negative values)
-scale-<number>, -scale-x-<number>, -scale-y-<number> 유틸리티(예: -scale-x-75, -scale-125)를 사용하면 요소를 원본 크기의 일정 비율로 뒤집고(mirror) 줄일 수 있어요:
<img class="-scale-x-75 ..." src="/img/mountains.jpg" />
<img class="-scale-100 ..." src="/img/mountains.jpg" />
<img class="-scale-y-125 ..." src="/img/mountains.jpg" />
커스텀 값 사용하기 (Using a custom value)
scale-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 비율을 설정할 수 있어요:
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />
CSS 변수의 경우 scale-(<custom-property>) 문법을 사용할 수도 있어요:
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />
이것은 scale-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.
hover 시 적용하기 (Applying on hover)
scale 유틸리티에 hover:* 같은 변형을 붙이면 해당 상태에서만 유틸리티가 적용돼요:
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />
더 알아보기 (Learn more)
변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.