CSS scale 속성

정의와 사용법

scale 속성은 요소 크기를 변경할 수 있습니다.

scale 속성은 요소가 x, y 방향에서 확대 비율 값을 정의합니다. 또한, 요소가 z 방향에서 확대 비율을 정의할 수도 있습니다.

확대 값은 하나, 두 개 또는 세 개의 값일 수 있습니다.

• 한 값이 주어지면, 요소는 x, y 방향에서 같은 비율로 확대됩니다.
• 두 값이 주어지면, 요소는 x, y 방향에서 지정된 비율로 확대됩니다.
• 세 값이 주어지면, 요소는 x, y, z 방향에서 지정된 비율로 확대됩니다.

좋게 이해하기 위해 scale 속성에 대해 더 알고 싶다면, 확인하세요보기.

주의:확대 요소의 또 다른 기술은 CSS 스케일() 함수 의 CSS transform 속성을 설명합니다. 이 웹 페이지에서 설명된 CSS scale 속성은 요소를 확대하는 더 간단하고 직접적인 방법입니다.

예제

예제 1

요소 크기를 변경:

div {
  scale: 2;
}

직접 시도해 보세요

예제 2

이 때 scale 두 값이 설정되었을 때, 각각 x축과 y축에서 크기를 설정합니다. 여기서, 요소의 x축 크기는 두 배, y축 크기는 반으로 줄어듭니다:

div {
  scale: 2 50%;
}

직접 시도해 보세요

CSS 문법

scale: x-axis y-axis z-axis|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

관련 페이지

교육:CSS 2D 변환

교육:CSS 3D 변환

참조:CSS rotate 속성

참조:CSS 트랜스레이트 속성