콘텐츠 글자 크기를 한번에 조절 채택완료
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
댓글을 작성하려면 로그인이 필요합니다.
답변 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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인