CSS3 scaleY() 함수란?
CSS3에서 scaleY(y) 메서드는 요소를 y축(세로) 방향으로 확대하거나 축소하는 스케일 변환(scaling transform)에 사용됩니다. 요소의 높이만 변경하고 싶을 때 유용하게 활용할 수 있습니다.
기본 문법
scaleY() 함수의 기본적인 사용 문법은 다음과 같습니다.
scaleY(y)
여기서 y는 각 지점의 세로 좌표(ordinate)에 적용할 배율을 나타내는 숫자 값입니다.
배율 값의 의미
- y > 1: 요소가 세로 방향으로 확대됩니다.
- y = 1: 원래 크기 그대로 유지됩니다.
- 0 < y < 1: 요소가 세로 방향으로 축소됩니다.
사용 예제
다음 예제는 노란색 정사각형 div 요소를 scaleY(0.5)를 적용해 세로 길이가 절반으로 줄어든 검은색 사각형으로 변형하는 코드입니다.
div {
width: 60px;
height: 60px;
background-color: yellow;
}
.scaled {
transform: scaleY(0.5);
background-color: black;
}위 코드에서 .scaled 클래스가 적용된 요소는 원래 높이가 60px였지만, scaleY(0.5) 덕분에 화면상에서는 세로 30px로 표시됩니다. 가로 크기는 변하지 않는다는 점에 주목하세요.
정리
scaleY()는 transform 속성과 함께 사용되며, 요소의 중심점(transform-origin 기준)을 중심으로 세로 방향 크기를 조절합니다. 가로 방향 크기를 조절하려면 scaleX(x), 두 방향을 동시에 조절하려면 scale(x, y) 함수를 사용하면 됩니다.