CSS scale() 함수 완벽 정리 – 요소 크기 조절 방법

CSS scale() 함수란?

CSS의 scale() 함수는 2D 평면에서 요소의 크기를 확대하거나 축소하는 변형(transformation)을 정의할 때 사용합니다. 이 함수는 transform 속성과 함께 사용되며, 각 방향(가로·세로)별 배율을 매개변수로 지정합니다.

배율 값이 1보다 크면 요소가 확대되고, 1보다 작으면 축소됩니다. 예를 들어 scale(1.2)는 요소를 원래 크기의 120%로 확대하며, scale(0.3)은 원래 크기의 30%로 축소합니다.

기본 문법

scale(sx)
scale(sx, sy)

sx: 가로 방향(X축)의 배율
sy: 세로 방향(Y축)의 배율 — 생략하면 sx와 동일한 값이 적용됩니다.

예제 1: 요소 확대하기

다음 예제에서는 이미지에 scale(1.2)를 적용하여 원본보다 20% 크게 표시합니다.

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
    transform: translate(100px, 10%);
}
.scale_img {
    transform: scale(1.2);
    background-color: yellow;
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

위 코드를 실행하면 오른쪽 이미지가 노란색 배경 위에서 원본보다 약간 더 크게 렌더링되는 것을 확인할 수 있습니다.

예제 2: 요소 축소하기

이번에는 scale(0.3)을 적용하여 이미지를 원본 크기의 30%로 축소해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
    transform: translate(100px, 10%);
}
.scale_img {
    transform: scale(0.3);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

실행 결과, 두 번째 이미지가 첫 번째 이미지보다 훨씬 작게 표시됩니다.

참고 사항

scale() 변형은 요소의 실제 레이아웃 크기에는 영향을 주지 않으며, 화면상으로만 크기가 변경됩니다.
음수 값을 사용하면 요소가 해당 축을 기준으로 뒤집히면서(flipped) 크기가 조절됩니다.
가로와 세로 배율을 다르게 적용하려면 scale(1.5, 0.5)처럼 두 개의 값을 전달하면 됩니다.