skew
skew
skew 유틸리티는 요소를 기울일 때 사용해요. skew-x, skew-y로 축별로도 기울일 수 있어요.
출처: 문서
본문
클래스 스타일 (ClassStyles)
기울이기 (Skewing)
| 클래스 | CSS |
|---|---|
skew-<number> |
transform: skewX(<number>deg) skewY(<number>deg); |
-skew-<number> |
transform: skewX(-<number>deg) skewY(-<number>deg); |
skew-(<custom-property>) |
transform: skewX(var(<custom-property>)) skewY(var(<custom-property>)); |
skew-[<value>] |
transform: skewX(<value>) skewY(<value>); |
x축 기울이기 (Skewing on x-axis)
| 클래스 | CSS |
|---|---|
skew-x-<number> |
transform: skewX(<number>deg); |
-skew-x-<number> |
transform: skewX(-<number>deg); |
skew-x-(<custom-property>) |
transform: skewX(var(<custom-property>)); |
skew-x-[<value>] |
transform: skewX(<value>); |
y축 기울이기 (Skewing on y-axis)
| 클래스 | CSS |
|---|---|
skew-y-<number> |
transform: skewY(<number>deg); |
-skew-y-<number> |
transform: skewY(-<number>deg); |
skew-y-(<custom-property>) |
transform: skewY(var(<custom-property>)); |
skew-y-[<value>] |
transform: skewY(<value>); |
예시 (Examples)
기본 예시 (Basic example)
skew-<number> 형태의 유틸리티(예: skew-4, skew-10)를 사용하면 요소를 두 축 모두에서 기울일 수 있어요:
<img class="skew-3 ..." src="/img/mountains.jpg" />
<img class="skew-6 ..." src="/img/mountains.jpg" />
<img class="skew-12 ..." src="/img/mountains.jpg" />
음수 값 사용하기 (Using negative values)
-skew-<number> 형태의 유틸리티(예: -skew-4, -skew-10)를 사용하면 요소를 두 축 모두에서 기울일 수 있어요:
<img class="-skew-3 ..." src="/img/mountains.jpg" />
<img class="-skew-6 ..." src="/img/mountains.jpg" />
<img class="-skew-12 ..." src="/img/mountains.jpg" />
x축으로 기울이기 (Skewing on the x-axis)
skew-x-<number> 유틸리티(예: skew-x-4, -skew-x-10)를 사용하면 요소를 x축 방향으로 기울일 수 있어요:
<img class="-skew-x-12 ..." src="/img/mountains.jpg" />
<img class="skew-x-6 ..." src="/img/mountains.jpg" />
<img class="skew-x-12 ..." src="/img/mountains.jpg" />
y축으로 기울이기 (Skewing on the y-axis)
skew-y-<number> 유틸리티(예: skew-y-4, -skew-y-10)를 사용하면 요소를 y축 방향으로 기울일 수 있어요:
<img class="-skew-y-12 ..." src="/img/mountains.jpg" />
<img class="skew-y-6 ..." src="/img/mountains.jpg" />
<img class="skew-y-12 ..." src="/img/mountains.jpg" />
커스텀 값 사용하기 (Using a custom value)
skew-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 기울기를 설정할 수 있어요:
<img class="skew-[3.142rad] ..." src="/img/mountains.jpg" />
CSS 변수의 경우 skew-(<custom-property>) 문법을 사용할 수도 있어요:
<img class="skew-(--my-skew) ..." src="/img/mountains.jpg" />
이것은 skew-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.
반응형 디자인 (Responsive design)
skewX()와 skewY() 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:
<img class="skew-3 md:skew-12 ..." src="/img/mountains.jpg" />
더 알아보기 (Learn more)
변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.