Developer2011. 2. 22. 12:04

 

Zoom 이라는 속성이 있습니다.

값은 normal, number(scale), percentage를 받으며 적용은 아래와 같습니다.

 

body {
	/* default : normal, 1.0, 100% */
	zoom:1.25;		/* number(scale) */
	/*zoom:125%;	percentage */
}

script의 경우는 아래와 같습니다.

$(document).ready(function() {
	//document.body.style.zoom = 1.00;
	//document.body.style.zoom = "100%";
	document.body.style.zoom = "normal";
});

 

적용은 간단합니다..

이것은 IE 전용입니다. (하지만 Chrome, Safari4+ 에서도 됩니다.)

 

MSDN 참고하려면 여기를 클릭하세요.

 

CSS3의 Transform을 이용하여, Firefox, Opera도 지원 가능합니다.

 

코드는 아래와 같습니다.

body {
	-webkit-transform:scale(1.50);
	-webkit-transform-origin:0 0;
	-moz-transform:scale(1.50);
	-moz-transform-origin:0 0;
	-o-transform:scale(1.50);
	-o-transform-origin:0 0;
}

 

$('body').css('-webkit-transform','scale(' + (size) + ')');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(' + (size) + ')');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(' + (size) + ')');
$('body').css('-o-transform-origin','0 0');

 

아래는 적용 화면 입니다.

 

 

코드에서 -webkit-, -moz-, -o-에 대한 설명입니다.

  • webkit : 크롬, 사파리(web kit 기반)
  • moz : 파이어폭스
  • o : 오페라

 

에 해당하는 핵이라고 보시면 될 듯 합니다.

지원 버전은 FF 3.5+, Safari 4+, Opera 10.0+ 입니다.

 

transform 의 속성은 더 많은 값들을 가지고 있습니다.

아래 참고 사이트에서 확인하시기 바랍니다.

 

참고 사이트

http://www.w3.org/TR/css3-2d-transforms/

https://developer.mozilla.org/en/CSS/-moz-transform

http://css3.bradshawenterprises.com/#how2transitions

 

 소스 파일 :





감사합니다.





Posted by Angeleyes

Ask me를 이용하시면 댓글보다 빨리 답변 드릴 수 있습니다.

댓글을 달아 주세요

  1. 정우

    감사합니다..^^

    2011.03.08 22:54 [ ADDR : EDIT/ DEL : REPLY ]
  2. 파워유

    감사합니다!

    2011.08.27 22:29 [ ADDR : EDIT/ DEL : REPLY ]
  3. 수정

    소스 잘 작동합니다. 그런데, css에 위의 코드가 들어가면 swf파일이 보이지 않는 현상이 있네요ㅠ 새로고침해야 보이네요. 왜 그럴까요??

    2011.09.02 15:41 [ ADDR : EDIT/ DEL : REPLY ]
  4. 무대광풍

    정말로 도움이 많이 되었습니다.

    깜사합니다.!

    2012.10.26 16:47 [ ADDR : EDIT/ DEL : REPLY ]