CSS scaleY() 함수로 요소 높이 변경하기 – 문법과 예제 완벽 정리

CSS에서 요소의 높이(세로 크기)를 변경하려면 transform 속성의 scaleY() 함수를 사용하면 됩니다. scaleY()는 요소를 세로 방향으로 확대하거나 축소하는 변형(transform) 함수로, 별도의 JavaScript 없이 순수 CSS만으로 간단하게 적용할 수 있습니다.

scaleY() 함수 기본 문법

scaleY() 함수의 기본 문법은 다음과 같습니다.

scaleY(n);

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

• n = 1: 원래 크기 그대로 유지됩니다.
• n > 1: 요소가 세로 방향으로 확대됩니다. (예: scaleY(1.5) → 높이 150%)
• 0 < n < 1: 요소가 세로 방향으로 축소됩니다. (예: scaleY(0.9) → 높이 90%)

scaleY() 사용 예제

아래 예제에서는 검은색 사각형 div에 scaleY(0.9)를 적용해 높이를 원래 크기의 90%로 줄이고, 주황색 배경으로 구분했습니다.

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

코드 설명

• 기본 div 요소는 너비 40px, 높이 50px의 검은색 사각형입니다.
• .myScaled 클래스가 적용된 요소는 transform: scaleY(0.9)에 의해 세로 길이가 50px → 45px로 축소되어 표시됩니다.
• 배경색을 주황색으로 지정해 변형 전후의 차이를 시각적으로 확인할 수 있습니다.

이처럼 scaleY() 함수 하나만으로 요소의 세로 크기를 자유롭게 조절할 수 있으며, 애니메이션 효과나 반응형 UI 제작에도 유용하게 활용됩니다.