CSS에서 transform 속성의 skewX() 함수를 사용하면 요소를 X축(가로축)을 기준으로 원하는 각도만큼 기울일 수 있습니다. 이 기법은 버튼, 배너, 로고 등에 역동적인 느낌을 주고 싶을 때 유용하게 활용됩니다.
skewX() 기본 문법
skewX() 함수는 괄호 안에 기울일 각도를 입력합니다. 예를 들어 skewX(20deg)라고 작성하면 요소가 가로 방향으로 20도 기울어집니다. 값이 양수이면 왼쪽 위에서 오른쪽 아래로, 음수이면 반대 방향으로 기울어집니다.
구형 브라우저와의 호환성을 위해 벤더 프리픽스(vendor prefix)를 함께 작성하는 것이 좋습니다. IE 9에는 -ms-, Safari 구버전에는 -webkit- 접두사를 붙입니다.
예제 코드
아래 코드를 실행하면 일반 div와 X축으로 20도 기울어진 div의 차이를 확인할 수 있습니다.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* 표준 문법 */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Qries.com
</div>
<div id = "skewDiv">
Qries.com
</div>
</body>
</html>실행 결과 설명
위 예제에서 첫 번째 div는 변형 없이 그대로 표시되고, 두 번째 div(id가 skewDiv)는 skewX(20deg) 덕분에 가로 방향으로 20도 기울어져 렌더링됩니다. 배경색과 테두리가 있기 때문에 기울어진 형태를 한눈에 확인할 수 있습니다.
참고 사항
요소를 세로축(Y축) 기준으로 기울이고 싶다면 skewY() 함수를 사용하고, 두 축을 동시에 적용하려면 skew(x축 각도, y축 각도) 형태로 작성하면 됩니다. 또한 최신 브라우저에서는 표준 문법인 transform만으로도 충분히 동작하지만, 오래된 브라우저 지원이 필요한 경우 벤더 프리픽스를 유지하는 것이 안전합니다.