[CSS&JSP] 웹브라우저 확대 축소하기 zoom - 손쉽게 코딩하기

[CSS&JSP] zoom 사용하기

화면을 크게 보고 싶거나 작게 보고싶을때 우리는 웹화면크기를 늘렸다 줄였다하는 기능을 구현해야한다.

(당연한 소리!!)

물론

'Ctrl' + '+' 나 'Ctrl' + '-' 를 사용해서 화면을 키웟다 줄였다 하면 정말 편하다.

하지만 우리는 고객의 기능을 만들어 줘야하는 입장이라 alert으로 alert("확대는 Ctrl + +를 눌러주세요"); 라고 할 수도 없는 판...

이랬다간 바로 수정요청이 들어올 것 이다ㅋㅋㅋㅋㅋㅋㅋ

뒷 말 안나오게 쉽게 화면 zoom 기능을 구현해보자

내가 화면 확대하고 줄이고 싶은 부분에

<div> 태그로 감싸서 영역을 만들어 준다던지 <section>태그 밑에 <div> 태그로 감싸던지 자신의 취향껏 영역을 만들어준다.

내가 한 방식은 section 태그 밑에 div로 ul태그를 감싸고 사용.

원하는 이미지를 넣고 a태그로 script로 요청을 보냈다.

이렇게 하면 버튼완성!! 이제 스크립트를 확인해보자.

위에 스크립트는 내가 누르는 버튼에 대해서 계산식을 작성하였다.

기존에 아무것도 누르지 않은 상황은 zoom이 100인 상태

plus 버튼을 눌러서 zoomIn function으로 요청이 오면 zoomIn에서는 +10을 하고 계속눌렀을 때

nowZoom이 500이상이 되면 nowZoom을 500으로 값을 고정.

값 고정후에 zooms라는 친구에게 가서 나 값이 500이야라고 알리면

친구는 너 500이야? 그럼 알려줄게 그만 확대해!!!라는 알림창이 뜨고 더이상 확대가 되지않는다.

여기서 zooms 함수에 document.body.style.zoom을 보면

이 문서내의 body태그 style에 zoom이라는 속성에 nowZoom + '%'라는 값을 넣어줄거야. 라는 것이고

이는 기본적으로 많이 쓰는 Chrome, Explorer에서 사용할 수 있다.

혹시나 Webkit / Mozilla(firefox), Opera 브라우저에서 사용하고 싶다면

body.style.webkitTransform = ;  // Webkit(chrome)

body.style.webkitTransformOrigin = ;

body.style.mozTransform =  ; // Mozilla(firefox)

body.style.mozTransformOrigin = ;

body.style.oTransform = ;  // Opera

body.style.oTransformOrigin = ;

위의 코드를 document.body.style.zoom 밑에 넣어주면 된다.

그리고 혹시나 explorer에서 작동하지않거나 오류가 발생된다면

부모요소의 스타일요소를 확인해보자.

position:relative; 가 있다면 이를 지워줘야 동작한다.

이는 익스에서만 나타나는 버그라서 방법이 없다 저놈을 지우자.