JSFiddle - React, Tailwind, and code Playground

by Kye Sooryun

HTML

<div id="container">
  <div id="ticket">
    <div id="ticket-wrap">
      디자인은 100%로 작업하고, 화면에 맞게 배율을 줄이기
    </div>
  </div>
</div>

JavaScript

$(document).ready(function (){
  $(window).resize(function (){
    var cnt = document.getElementById('container');
    var tkt = document.getElementById('ticket');
    tkt.removeAttribute('style');
    var element = document.getElementById('container');
    var tktw = document.getElementById('ticket-wrap');
    var scl = document.body.clientWidth / tktw.scrollWidth;
    cnt.style.height = Math.floor(tkt.scrollHeight * scl) + "px";
    tkt.setAttribute('style', 'transform:scale(' + scl + ')');
    window.scrollTo({ left: scrollX, top: scrollY });
})

  var cnt = document.getElementById('container');
  var tkt = document.getElementById('ticket');
  tkt.removeAttribute('style');
  var element = document.getElementById('container');
  var tktw = document.getElementById('ticket-wrap');
  var scl = document.body.clientWidth / tktw.scrollWidth;
  cnt.style.height = Math.floor(tkt.scrollHeight * scl) + "px";
  tkt.setAttribute('style', 'transform:scale(' + scl + ')');
  window.scrollTo({ left: scrollX, top: scrollY });
});