CSS zoom: 요소 확대 및 축소

.target {
  zoom: 2;
  /* zoom: 0.5; */
  /* zoom: 120%; */
}

.circle {
  background-color: #0af;
  border-radius: 50%;
  display: inline-block;
  height: 1em;
  width: 1em;
}

<p>
  이 글의 <b class="target">굵은 글자</b>를 확대 또는 축소해보세요.
  <br>
  오른쪽의 원도 확대 또는 축소됩니다. <span class="circle target"></span>
</p>

/* 키워드 값 */
zoom: normal;

/* <percentage> 값 */
zoom: 50%;
zoom: 200%;

/* <number> 값 */
zoom: 1.1;
zoom: 0.7;

/* 전역 값 */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

<div class="controls">
  <label for="zoom">확대</label>
  <select id="zoom">
    <option selected value="1.0">보통</option>
    <option value="1.5">크게</option>
    <option value="2.0">더 크게</option>
  </select>
</div>

<p class="content">
  유구한 역사와 전통에 빛나는 우리 대한국민은 3ㆍ1운동으로 건립된 대한민국임시정부의 법통과 불의에 항거한 4ㆍ19민주이념을 계승하고, 조국의 민주개혁과 평화적 통일의 사명에 입각하여 정의ㆍ인도와 동포애로써 민족의 단결을 공고히 하고, 모든 사회적 폐습과 불의를 타파하며, 자율과 조화를 바탕으로 자유민주적 기본질서를 더욱 확고히 하여 정치ㆍ경제ㆍ사회ㆍ문화의 모든 영역에 있어서 각인의 기회를 균등히 하고, 능력을 최고도로 발휘하게 하며, 자유와 권리에 따르는 책임과 의무를 완수하게 하여, 안으로는 국민생활의 균등한 향상을 기하고 밖으로는 항구적인 세계평화와 인류공영에 이바지함으로써 우리들과 우리들의 자손의 안전과 자유와 행복을 영원히 확보할 것을 다짐하면서 1948년 7월 12일에 제정되고 8차에 걸쳐 개정된 헌법을 이제 국회의 의결을 거쳐 국민투표에 의하여 개정한다.
</p>

:root {
  --zoom-level: 1.0;
}

.content {
  line-height: 1.5;
  margin: 10px auto 0;
  max-width: 60ch;
  text-indent: 4ch;
  zoom: var(--zoom-level);
}

.controls {
  text-align: center;
}

const zoomControl = document.querySelector('#zoom')
const content = document.querySelector('.content')

zoomControl.addEventListener('change', () => {
  content.style.setProperty('--zoom-level', zoomControl.value)
})