iframe의 컨텐츠를 확대 축소하기 (transform:scale)

iframe을 사용하다보면 해당 창에 있는 컨텐츠를 확대하거나 축소시켜야할 때가 있다. 이럴 때엔 transform => scale 방법을 쓴다.

* {
	transform : scale(1.0); /*정상적인 크기*/
	transform : scale(0.5); /*축소된 크기*/
	transform : scale(2.0); /*확대된 크기*/
}

 

실제 예시를 보여주겠다.

 

<iframe id="ifrm_left" name="ifrm_left" src="URL주소" style="
	width: 430%;
	height: 900px;
	transform-origin: 0 0;
	transform: scale(0.6);
"></iframe>

 

다음과 같이 나타나는 화면을 확대시키면

<iframe id="ifrm_left" name="ifrm_left" src="URL주소" style="
	width: 430%;
	height: 900px;
	transform-origin: 0 0;
	transform: scale(1.0);
"></iframe>

다음과 같이 나타나며 반대로 축소시키기면

<iframe id="ifrm_left" name="ifrm_left" src="URL주소" style="
	width: 430%;
	height: 900px;
	transform-origin: 0 0;
	transform: scale(0.1);
"></iframe>

이와같이 축소되어 나타난다.