테스트 사이트 - 개발 중인 베타 버전입니다

콘텐츠 글자 크기를 한번에 조절 채택완료

myfree 10개월 전 조회 1,830

</p>

<p>#content { width:100%; }</p>

<p>#content .title { position:relative; margin:0; padding:0; }</p>

<p>#content .title > h2 { font-size:20px; padding-bottom:15px; }</p>

<p>#content .title > p { font-size:16px; line-height:20px; }</p>

<p> </p>

<p>#content .info { margin-top:35px; }</p>

<p>#content .info > ul { padding:0; }</p>

<p>#content .info > ul > li { font-size:13px; }</p>

<p>

 

</p>

<p><section id="content"></p>

<p>  <div class="title"></p>

<p>    <h2>부동산 컨설팅</h2></p>

<p>    <p>고객의 부동산 자산 또는 매입 예정 부지 개발 솔루션을 제공합니다.</p></p>

<p>  </div></p>

<p> </p>

<p><div class="info"></p>

<p>  <ul></p>

<p>    <li>주거용 부동산</li></p>

<p>    <li>업무용 부동산</li></p>

<p>    <li>상업용 부동산</li></p>

<p>  </ul></p>

<p></div></p>

<p></section></p>

<p>

 

 

위와 같이 h1은 20px , p는 16px, li는 13px 인데,

 

http://sir.kr/data/editor/2501/237506203_1736390303.6812.jpg" />

 

 

이런 버튼을 통해 + 를 클릭할때마다 h1, p, li 글자 크기가 +2씩 최대 5번 클릭이내로 올라갈 수 없을까요?

 

 

구글링 중에 비슷한걸 찾았는데 확대 축소 버튼까지 같이 커지네요.

https://codepen.io/eunjin10914/pen/KZaRqJ

 

https://codepen.io/jamesbarnett/pen/QWjYRe

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
10개월 전

다음 코드가 도움이 될지 모르겠습니다.

 

</p>

<p><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></p>

<p> </p>

<p><script>

function zoomInOut(obj) {

    var clicklimit = obj.clickLimit || Infinity;

    var clickcount = 0;

    var target = obj.target || document.body;</p>

<p>    function clickWatcher() {

        if (Math.abs(clickcount) > clicklimit) {

            if (clickcount > 0) {

                clickcount--;

            } else {

                clickcount++;

            }</p>

<p>            return false;

        }</p>

<p>        return true;

    }</p>

<p> </p>

<p>    var seemSize = 1,

         zoomSize = 1,

         browser = navigator.userAgent.toLowerCase();

    function zoomIn()

        {

            clickcount++;

            if (clickWatcher() == false) { return; }</p>

<p>            seemSize += 0.05;

            zoomSize *= 1.2;

            zoom();

        }

        function zoomOut()

        {

            clickcount--;

            if (clickWatcher() == false) { return; }</p>

<p>            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;

            }

        }</p>

<p>    if (obj.zoomIn != null) {

        obj.zoomIn.addEventListener('click', zoomIn);

    }

    if (obj.zoomOut != null) {

        obj.zoomOut.addEventListener('click', zoomOut);

    }

}</p>

<p> </p>

<p>document.addEventListener('DOMContentLoaded', function () {

    zoomInOut({

        target: document.querySelector('#content'),

        zoomIn: document.querySelector('.zoomin'),

        zoomOut: document.querySelector('.zoomOut'),

        clickLimit: 5

    });

});

</script></p>

<p> </p>

<p><div class="area-zoom-btn">

  <div class="zoom-btn">

    <button class="zoom zoomin">확대</button>

      <i>글자크기</i>

      <button class="zoom zoomout">축소</button>

  </div>

</div></p>

<p><section id="content">

  <div class="title">

    <h2>부동산 컨설팅</h2>

    <p>고객의 부동산 자산 또는 매입 예정 부지 개발 솔루션을 제공합니다.</p>

  </div>

 

<div class="info">

  <ul>

    <li>주거용 부동산</li>

    <li>업무용 부동산</li>

    <li>상업용 부동산</li>

  </ul>

</div>

</section></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인