CSS transform의 scaleX()로 요소 너비 조절하는 방법

CSS scaleX() 메서드란?

CSS에서 요소의 가로 너비를 변경하려면 scaleX() 메서드를 사용하면 됩니다. 이 메서드는 transform 속성과 함께 사용되며, 요소를 X축(가로 방향) 기준으로 확대하거나 축소할 수 있습니다.

기본 문법

scaleX()의 기본적인 사용 문법은 다음과 같습니다.

transform: scaleX(n);

여기서 n은 배율(scaling factor)을 나타내는 숫자입니다.

• n = 1: 원본 크기 그대로 유지
• n > 1: 가로 방향으로 확대 (예: 1.5는 150% 확대)
• 0 < n < 1: 가로 방향으로 축소 (예: 0.9는 90%로 축소)

사용 예제

다음 예제는 검은색 div 요소에 scaleX(0.9)를 적용하여 가로 너비를 90%로 줄이고, 배경색을 주황색으로 변경한 모습입니다.

div {
   width: 40px;
   height: 50px;
   background-color: black;
}
.myScaled {
   transform: scaleX(0.9);
   background-color: orange;
}

참고 사항

scaleX()는 요소의 실제 레이아웃 크기(width 값)를 변경하지 않고 시각적으로만 크기를 조절합니다. 따라서 주변 요소의 배치에는 영향을 주지 않으며, 변형의 기준점은 기본적으로 요소의 중심입니다. 기준점을 변경하고 싶다면 transform-origin 속성을 함께 활용하면 좋습니다.