👨‍💻 [HTML] HTML 에서 내용 부분을 확대 / 축소 하는 테그는 어떻게 되나요?

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

HTML 에서 내용 부분을 확대 / 축소 하는 테그는 어떻게 되는지 간략히 알아보았습니다.

---

질문 >

HTML 에서 내용 부분을 확대 / 축소 하는 테그는 어떻게 되나요?

답변 >

HTML에서 콘텐츠를 확대 또는 축소하는 방법은 여러 가지가 있습니다. 기본적으로 <meta> 태그를 사용하거나, CSS 및 JavaScript를 활용할 수 있습니다.

---

1. Meta 태그 활용 (모바일 화면 확대/축소 제어)

모바일 웹에서 사용자가 확대/축소하는 것을 제한하거나 허용할 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.5, user-scalable=yes">

• initial-scale=1.0 : 기본 확대 배율
• maximum-scale=3.0 : 최대 확대 배율
• minimum-scale=0.5 : 최소 확대 배율
• user-scalable=yes : 사용자가 확대/축소 가능 여부 (no로 설정하면 확대/축소 비활성화)

---

2. CSS를 활용한 확대/축소

CSS의 transform: scale() 속성을 사용하여 요소 크기를 조정할 수 있습니다.

<div class="zoom">
    확대/축소할 내용
</div>

<style>
  .zoom {
      transform: scale(1.5); /* 1.5배 확대 */
      transform-origin: center; /* 확대 기준점 */
  }
</style>

---

3. JavaScript를 이용한 동적 확대/축소

버튼을 클릭하면 특정 요소를 확대/축소하도록 설정할 수도 있습니다.

<button onclick="zoomIn()">확대</button>
<button onclick="zoomOut()">축소</button>
<div id="content">확대/축소할 내용</div>

<script>
    let scale = 1;

    function zoomIn() {
        scale += 0.1;
        document.getElementById("content").style.transform = `scale(${scale})`;
    }

    function zoomOut() {
        scale -= 0.1;
        if (scale < 0.5) scale = 0.5; // 최소 배율 제한
        document.getElementById("content").style.transform = `scale(${scale})`;
    }
</script>

---

이 방법들을 활용하면 HTML 요소나 전체 페이지의 확대/축소를 쉽게 조정할 수 있습니다! 😊

---

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---