CSS의 scale() 함수로 요소 크기(너비·높이) 자유롭게 조절하기

CSS scale() 함수란?

CSS에서는 transform 속성의 scale() 함수를 사용하면 요소의 너비(width)와 높이(height)를 비율 단위로 손쉽게 확대하거나 축소할 수 있습니다. 실제 레이아웃에 지정된 크기 값은 그대로 유지되면서 화면상으로만 크기가 변하기 때문에, 애니메이션이나 반응형 효과를 구현할 때 특히 유용합니다.

scale() 함수 문법

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

scale(x, y);

• x — 가로 방향(횡좌표)의 배율을 나타내는 숫자입니다.
• y — 세로 방향(종좌표)의 배율을 나타내는 숫자입니다.

배율은 1을 기준으로 하며, 1보다 작으면 축소, 1보다 크면 확대됩니다. 예를 들어 scale(0.5)는 원래 크기의 절반으로 줄이고, scale(2)는 두 배로 늘립니다. y 값을 생략하면 x 값과 동일한 배율이 적용되어 가로세로가 균등하게 조절됩니다.

scale() 사용 예제

아래 예제는 검은색 사각형 div를 만들고, 클래스를 적용해 주황색으로 바꾸면서 크기를 0.4배로 축소하는 코드입니다.

div {
    width: 40px;
    height: 50px;
    background-color: black;
}

.myScaled {
    transform: scale(0.4);
    background-color: orange;
}

실행 결과 설명

위 코드에서 일반 div는 40×50px 크기의 검은색 사각형으로 표시됩니다. 반면 .myScaled 클래스가 적용된 요소는 transform: scale(0.4) 덕분에 가로·세로 모두 원래 크기의 40%인 약 16×20px로 화면에 나타나며, 배경색은 주황색으로 변경됩니다.

참고 사항

scale() 함수는 요소의 중심(center)을 기준으로 크기가 변합니다. 기준점을 변경하고 싶다면 transform-origin 속성을 함께 사용하면 됩니다. 또한 가로와 세로 배율을 다르게 지정하고 싶다면 scale(0.5, 1.5)처럼 두 개의 값을 각각 입력하면 됩니다.