A4 비율 유지 모달

$$config title: 비율유지 제이쿼리 keywords: - IT - ... $$ ```html A4 비율 유지 모달 ``` ```css /* 모달 스타일 */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; max-width: 100%; max-height: 100%; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* A4 div 스타일 */ .a4-div { width: 21cm; /* A4 가로 길이 */ height: 29cm; /* A4 세로 길이 */ border: 1px solid #000; background-color: #fff; } ``` ```javascript $(document).ready(function () { $("#openModalBtn").click(function () { $("#modal").show(); // A4 비율 유지 함수 호출 maintainAspectRatio(); }); $("#modal").click(function (event) { if (event.target === this) { $("#modal").hide(); } }); $(window).resize(function () { // 창 크기가 변경될 때 A4 비율 유지 함수 호출 maintainAspectRatio(); }); }); function maintainAspectRatio() { var modalContent = $(".modal-content"); var a4Div = $(".a4-div"); var widthRatio = modalContent.width() / a4Div.width(); var heightRatio = modalContent.height() / a4Div.height(); var minRatio = Math.min(widthRatio, heightRatio); a4Div.css({ transform: "scale(" + minRatio + ")" }); } ```

text

게시글 상세