CSS 줌 속성

정의와 사용법

zoom 속성이 요소의 확대 비율을 지정합니다. 요소는 확대되거나 축소될 수 있습니다.

예제

예제 1

텍스트에 사용 zoom 속성:

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

자신이 직접 시도해 보세요

예제 2

사용 zoom 요소 크기를 조정하는 속성:

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

자신이 직접 시도해 보세요

CSS 문법

zoom: normal|%|number|unset|initial|inherit;

속성 값

값 설명
normal 기본 값. 요소는 정상적인 방식으로 렌더링됩니다.
%

백분율로 확대 비율을 지정합니다.

100% = 정상.

확대하려면 100%보다 큰 값을 사용합니다.

축소하려면 100%보다 작은 값을 사용합니다.
number

확대 비율을 숫자로 지정합니다(백분율).

1.0 = 정상.

확대하려면 1.0보다 큰 값을 사용합니다.

축소하려면 1.0보다 작은 값을 사용합니다.
unset 확대 비율을 취소합니다(정상으로 복구).
initial 이 속성을 기본 값으로 설정합니다. 참조 initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조 inherit.

기술 세부 사항

기본 값: normal
상속성: 아니요
애니메이션 제작: 지원됩니다. 참조:애니메이션 관련 속성.
버전: CSS Viewport Module Level 1
JavaScript 문법: object.style.zoom = "3"

브라우저 지원

표中之 수치는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome 에지 파이어폭스 사파리 오페라
1 12 126 3.1 15.0