콘텐츠 글자 크기를 한번에 조절

<style>
#content { width:100%; }
#content .title { position:relative; margin:0; padding:0; }
#content .title > h2 { font-size:20px; padding-bottom:15px; }
#content .title > p { font-size:16px; line-height:20px; }
 
#content .info { margin-top:35px; }
#content .info > ul { padding:0; }
#content .info > ul > li { font-size:13px; }
</style>

 

<script>
function zoomInOut(obj) {
    var clicklimit = obj.clickLimit || Infinity;
    var clickcount = 0;
    var target = obj.target || document.body;

    function clickWatcher() {
        if (Math.abs(clickcount) > clicklimit) {
            if (clickcount > 0) {
                clickcount--;
            } else {
                clickcount++;
            }

            return false;
        }

        return true;
    }

 

    var seemSize = 1,
         zoomSize = 1,
         browser = navigator.userAgent.toLowerCase();
    function zoomIn()
        {
            clickcount++;
            if (clickWatcher() == false) { return; }

            seemSize += 0.05;
            zoomSize *= 1.2;
            zoom();
        }
        function zoomOut()
        {
            clickcount--;
            if (clickWatcher() == false) { return; }

            clickWatcher();
            seemSize -= 0.05;
            zoomSize /= 1.2;
            zoom();
        }
        function zoom()
        {
           if (browser.indexOf("firefox") != -1) { //브라우저가 firefox일때
            target.style.webkitTransform =    'scale('+seemSize+')';  
            target.style.webkitTransformOrigin = '50% 0 0'; //늘리고 줄였을때위치, 
            target.style.msTransform =   'scale('+seemSize+')'; 
            target.style.msTransformOrigin = '50% 0 0';
            target.style.transform = 'scale('+seemSize+')';
            target.style.transformOrigin='50% 0 0';
            target.style.OTransform = 'scale('+seemSize+')';
            target.style.OTransformOrigin='50% 0 0';
           }else{
            target.style.zoom = zoomSize;
            }
        }

    if (obj.zoomIn != null) {
        obj.zoomIn.addEventListener('click', zoomIn);
    }
    if (obj.zoomOut != null) {
        obj.zoomOut.addEventListener('click', zoomOut);
    }
}

 

document.addEventListener('DOMContentLoaded', function () {
    zoomInOut({
        target: document.querySelector('#content'),
        zoomIn: document.querySelector('.zoomin'),
        zoomOut: document.querySelector('.zoomOut'),
        clickLimit: 5
    });
});
</script>

 

<div class="area-zoom-btn">
  <div class="zoom-btn">
    <button class="zoom zoomin">확대</button>
      <i>글자크기</i>
      <button class="zoom zoomout">축소</button>
  </div>
</div>

<section id="content">
  <div class="title">
    <h2>부동산 컨설팅</h2>
    <p>고객의 부동산 자산 또는 매입 예정 부지 개발 솔루션을 제공합니다.</p>
  </div>
 
<div class="info">
  <ul>
    <li>주거용 부동산</li>
    <li>업무용 부동산</li>
    <li>상업용 부동산</li>
  </ul>
</div>
</section>