zoom & transform-scale] 확대/축소의 법칙을 표준화하고 싶었습니다.

1)
한동안 zoom in 과 zoom out 의 조절을
img 태그의 width, height 값을 바꿔 조정해왔는데요,

특정(?)블로그의 경우 가로 width 값이 가로 최대값 이상이 되면
자동으로 최대값으로 줄이는 문제가 있었거든요.

.. 그러던 차에,
IE6 의 지원이 중단(?)되고,
HTML5 지원 브라우져가 많아져서

이참에 style:zoom 을 맘껏 쓸 수 있겠다..싶어 시작을 해봤습니다..만,

2)
safari 나 chrome 처럼 zoom 을 지원하는 경우가 있는가하면,
firefox 나 opera 처럼 transform:scale 을 지원하는 경우도 있더라구요.

.. 어쩔 수 없이, 섞어서(?) 사용을 하는 방법으로 진행을 하기로 했습니다.
그런데.. 그 와중에도 걸리는 문제가 있더라구요..

...

3)

<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
  <div style="width:100px; height:100px; overflow:hidden; background-color:green; zoom:0.5;">
  </div>
</div>
IE8, safari, chrome : 왼쪽위 구석에 사각형 생성<br/>
그 외 : 녹색
<br/><br/>
 
<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
  <div style="width:100px; height:100px; overflow:hidden; background-color:green; -webkit-transform:scale(0.5);">
  </div>
</div>
safari, chrome : 가운데 사각형 생성<br/>
그외 : 녹색
<br/><br/>
  
<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
  <div style="width:100px; height:100px; overflow:hidden; background-color:green; zoom:0.2; -webkit-transform:scale(0.5);">
  </div>
</div>
IE : 왼쪽위 구석에 작은 사각형 생성<br/>
safari, chrome : 왼쪽위 구석에 더(?) 작은사각형, 더 작은 사각형 반 크기의 간격 생성<br/>
그외 : 녹색
<br/><br/>
 
<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
  <div style="width:100px; height:100px; overflow:hidden; background-color:green; -moz-transform:scale(0.5); -o-transform:scale(0.5);">
  </div>
</div>
firefox, opera : 가운데 사각형 생성<br/>
그외 : 녹색
<br/><br/>
 
<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
  <table border=0 cellpadding=0 cellspacing=0 width=100 heigiht=100><tr><td align=center width=100 height=100>
    <div style="width:100px; height:100px; overflow:hidden; background-color:green; zoom:0.5; -moz-transform:scale(0.5); -o-transform:scale(0.5);">
    </div>
  </td></tr></table>
</div>
IE8, safari, chrome, firefox, opera : 가운데 사각형 생성
<br/>
<br/>
...<br/>
<br/>
이후.. transform-origin 을 이용해서 table 없이 처리함OTL..

...

4)

IE8, safari, chrome : 왼쪽위 구석에 사각형 생성
그 외 : 녹색

safari, chrome : 가운데 사각형 생성
그외 : 녹색

IE : 왼쪽위 구석에 작은 사각형 생성
safari, chrome : 왼쪽위 구석에 더(?) 작은사각형, 더 작은 사각형 반 크기의 간격 생성
그외 : 녹색

firefox, opera : 가운데 사각형 생성
그외 : 녹색

IE8, safari, chrome, firefox, opera : 가운데 사각형 생성

...

이후.. transform-origin 을 이용해서 table 없이 처리함OTL..

...

5)
찬찬히 설명하자면,

zoom 을 쓰는 경우 적용되는 브라우져에서는
크기가 작아진 효과를 봅니다.

transform:scale 종류가 적용되는 브라우져에서는
가운데로 작아지는 효과를 보구요,

zoom 과 transform:scale 이 쓰는 경우,
transform:scale 이 적용된 후, zoom 이 적용됩니다. 아마도 abc 순인가보네요.

.. 대략 이런 설명입니다.

이런 과정을 거쳐서(?), 간신히 나온 결론은

6)
-webkit-transform:scale 대신 (chrome, safari)
zoom 을 쓰자는 것이고, (IE~8, chrome, safari)

zoom 이 적용되지 않는 브라우져를 대상으로
-o-transform:scale 과 -moz-transform:scale 을 쓰자는 것이었죠. (Opera, FireFox)

7)
그런데.. 마지막 항목 보면, 다른 것들과 조금 다른 것이 있습니다.

<div 태그를 쓰다가 갑자기 <table 을 쓰게 되는데요

transform:scale 계열이 가운데로 몰리는 현상을
zoom 을 써도 받아내게 하기 위한 방편입니다.

하지만, 사람 맘이란게 그런가요.. 모두 일반화 시켜서 쓰고 싶은거죠..
몇번씩 시도는 해봤지만, 가운데 맞추기 위해서 계산도 해보고..했거든요..

하다하다 안되서(?) 최소한(?),
기본위치라도 맞춰내기 위해 찾은 것이 transform-origin 입니다.

...

8)

<div style="width:100px; height:100px; overflow:hidden; background-color:yellow;">
    <div style="width:100px; height:100px; overflow:hidden; background-color:green; zoom:0.5; -moz-transform:scale(0.5); -o-transform:scale(0.5); -moz-transform-origin:0 0; -o-transform-origin:0 0;">
    </div>
</div>
IE8, safari, chrome, firefox, opera : 왼쪽위 구석에 사각형 생성
<br/>
<br/>

...

9)

IE8, safari, chrome, firefox, opera : 왼쪽위 구석에 사각형 생성

...

10)
간단히 얘기하자면, transform 이 적용하는 zoom in / zoom out 의  중심을 맞춰주는 겁니다.
지금은 [ 0 0 ] 값이니 왼쪽 위를 기준으로 zoom 하게 되는 거죠.

저도 검색을 통해 간신히 찾긴 했습니다만..

참고 :
http://stackoverflow.com/questions/9441557/how-to-increase-browser-zoom-level-on-page-load 
( = http://cyw.do/03gG9 )

이 결과를 정리하고 나서야 한발 나아갈 수 있었습니다.

easyBow killofki@.

ps.. IE9, IE10 의 이야기는 저에겐 아직 먼 이야기입니다. 시험할 수 있는 PC 가 없어서요..