ScaleX는 기본적으로 X축(수평) 방향의 배율(scale, 확대·축소)을 뜻합니다. 즉 객체나 좌표계의 가로 크기를 얼마나 늘리거나 줄일지를 나타내는 값입니다. 주요 특징과 사용 사례는 다음과 같습니다. - 의미와 동작 - 값은 배율 계수(무차원)로 표현됩니다. 1이면 원래 크기, >1이면 가로로 확대, 0~1이면 가로로 축소, 음수이면 수평 반전(좌우 뒤집기)을 의미합니다. - 보통 scaleY(세로 배율)과 함께 쓰여 가로·세로 비율을 독립적으로 조절할 수 있습니다. - 변환의 기준점(예: transform-origin, pivot)에 따라 확대·축소 위치가 달라집니다. - 웹(CSS, SVG)에서 - CSS: transform: scaleX(2); 는 요소의 가로를 2배로 확대합니다. 이 변환은 시각적 렌더링에 적용되며 일반적으로 문서의 레이아웃 흐름(요소가 차지하는 실제 레이아웃 공간)을 변경하지 않습니다. - SVG도 유사하게 transform 속성으로 적용됩니다. - 캔버스·그래픽 API에서 - 예: HTML5 Canvas의 ctx.scale(x, y)에서 첫 번째 인자가 X축 배율입니다. 이 경우 이후 그려지는 모든 도형의 좌표계가 스케일됩니다. - 모바일/플랫폼 API에서 - Android: View.setScaleX(1.5f) 등으로 뷰의 X축 배율을 설정합니다. 렌더링 시 가로 크기가 변경됩니다(플랫폼에 따라 레이아웃 영향 여부는 구현 차이가 있을 수 있음). - 데이터 시각화(스케일 함수) - d3나 ggplot 같은 라이브러리에서 scaleX는 "데이터 값(domain)을 화면 좌표(range)로 매핑"하는 함수(선형·로그 등)를 의미합니다. 이 경우는 배율 인자라기보다 좌표 변환 함수 자체를 가리킵니다. - 실무 팁 - 음수 값은 반전 효과를 만듭니다. - transform-origin 또는 pivot을 적절히 설정하지 않으면 의도치 않은 위치로 커지거나 이동하는 것처럼 보일 수 있습니다. - 애니메이션이나 GPU 가속과 함께 쓰면 성능상 유리한 경우가 많습니다. 간단한 예 - CSS: transform: scaleX(1.5); /* 가로 1.5배 */ - Canvas: ctx.scale(2, 1); /* X축 2배, Y축 그대로 */ - Android: myView.setScaleX(0.8f); /* 가로 80% */ 요약하면, ScaleX는 대상의 수평 방향 크기를 얼마나 확대·축소(또는 반전)할지 지정하는 배율을 의미합니다.
