CSS skew() 함수란?
skew() 함수는 CSS 변형(transform) 속성 중 하나로, 요소를 2D 평면에서 기울이거나 왜곡할 때 사용됩니다. 기울이고 싶은 정도를 skew() 함수의 매개변수로 지정하면 되는데, 첫 번째 값은 X축 방향의 기울임 각도, 두 번째 값은 Y축 방향의 기울임 각도를 의미합니다.
각도 단위로는 deg(도)뿐만 아니라 turn 같은 단위도 사용할 수 있어 다양한 방식으로 표현이 가능합니다.
예제 1: skew() 기본 사용법
다음 예제에서는 이미지에 skew(45deg, 0)을 적용하여 X축 방향으로만 45도 기울인 모습을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(50px, 10%);
}
.skew_img {
transform-origin: top left;
transform: skew(45deg, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>실행 결과
예제 2: turn 단위와 조합된 기울임
이번에는 turn 단위와 음수 값을 활용한 또 다른 예제를 살펴보겠습니다. -0.06turn은 약 -21.6도에 해당하며, X축과 Y축 양방향으로 동시에 기울임이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(50px, 10%);
}
.skew_img {
transform-origin: top left;
transform: skew(-0.06turn, 18deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>실행 결과
핵심 포인트 정리
- skew(x, y): x는 수평(X축) 기울임, y는 수직(Y축) 기울임 각도입니다.
- transform-origin: 기울임이 적용되는 기준점을 설정합니다. 위 예제에서는
top left(좌측 상단)를 기준점으로 사용했습니다. - 다양한 각도 단위:
deg,rad,grad,turn등 여러 단위를 사용할 수 있습니다.