[JAVASCRIPT] 브라우저 zoom in / zoom out 기능

 
<style>

    a {text-decoration:none;color:#333;}
    ul {list-style:none;}
    ul.zoom_btn li {display:inline-block;border:1px solid #ccc;text-align:center;}
    ul.zoom_btn li a {display:block;width:40px;height:40px;line-height:40px;}
 
</style>
 
<header>
    <ul class="zoom_btn">
        <li><a href="javascript:;" id="zoomOut">-</a></li>
        <li><a href="javascript:;" id="zoomInit">기본</a></li>
        <li><a href="javascript:;" id="zoomIn">+</a></li>
    </ul>
</header>
<!--//header-->
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis delectus, libero porro. Voluptate autem mollitia delectus. Voluptate consectetur, provident nam, facilis ea mollitia rerum animi pariatur illo suscipit, eos autem!</p>
 
<script type="text/javascript"> 
 
var zoomsVal = 100;
var zoomsInterval = 10;
var zoomsInit = document.getElementById("zoomInit");
var zoomsIn = document.getElementById("zoomIn");
var zoomsOut = document.getElementById("zoomOut");
    
zoomsInit.addEventListener("click", zoomInit);
zoomsIn.addEventListener("click", zoomIn);
zoomsOut.addEventListener("click", zoomOut);
 
    function zoomInit(){ 
 
        zoomsVal = 100;
        zoomCalc();
        //console.log("zoom init");
 
    }
 
    function zoomCalc(){
 
        document.body.style.zoom = zoomsVal + '%';
 
    }
 
    function zoomIn() { 
 
        zoomsVal += zoomsInterval;
        zoomCalc();
        //console.log("zoom In");
 
    }
 
    function zoomOut() { 
 
        zoomsVal -= zoomsInterval;
        zoomCalc();
        //console.log("zoom out");
 
    }    
 
</script>