1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="responsive_viewer">
    <h1>반응형 웹사이트 미리보기</h1>
    <div class="buttons">
        <button id="pcBtn" class="active" data-device="pc">PC <span class="mo_hidden">(1920px)</span></button>
        <button id="tabletBtn" data-device="tablet">태블릿 <span class="mo_hidden">(768px)</span></button>
        <button id="mobileBtn" data-device="mobile">모바일 <span class="mo_hidden">(375px)</span></button>
    </div>
    
    <div class="frame_container">
        <div class="iframe_wrapper">
            <iframe class="preview_frame" src="https://example.com"></iframe>
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.responsive_viewer { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; flex-direction: column; } 
.responsive_viewer h1 { margin-bottom: 20px; font-size: 24px; color: #333; text-align: center; } 
.responsive_viewer .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } 
.responsive_viewer button { padding: 10px 20px; background-color: #485563; border: none; border-radius: 5px; font-size: 16px; color: white; cursor: pointer; transition: background-color 0.3s; } 
.responsive_viewer button:hover { background-color: #3a4654; } 
.responsive_viewer button.active { background-color: #29323c; } 
.responsive_viewer .frame_container { overflow: hidden; display: flex; justify-content: center; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(45, 54, 65, 0.2); transition: all 0.3s ease; } 
.responsive_viewer .iframe_wrapper { overflow: hidden; position: relative; height: calc(100vh - 350px); max-width: 100%; border: 1px solid #cbd2d9; box-shadow: 0 2px 4px rgba(71, 84, 99, 0.1); transition: all 0.3s ease; } 
.responsive_viewer iframe { width: 100%; height: 100%; border: none; transform-origin: 0 0; } 
@media (max-width: 768px){
    .responsive_viewer .mo_hidden { display: none; } 
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// 반응형 웹사이트 미리보기 초기화 및 제어 함수
function handleIframeLoad() {
    // 주요 DOM 요소 캐싱
    const $iframeWrapper = $('.responsive_viewer .iframe_wrapper');
    const $preview = $('.responsive_viewer .preview_frame');
    
    // 디바이스 설정 값
    let currentDevice = 'pc';
    let deviceSizes = {
        'pc': 1920,
        'tablet': 768,
        'mobile': 375
    };
    
    // 디바이스 선택 버튼 이벤트
    $('.responsive_viewer .buttons button').on('click', function() {
        const $this = $(this);
        const device = $this.data('device');
        
        $this.addClass('active').siblings().removeClass('active');
        setDeviceSize(device);
    });

    // 디바이스 크기 설정 및 스케일링 적용
    function setDeviceSize(device) {
        currentDevice = device;
        const deviceWidth = deviceSizes[device];
        const containerWidth = $iframeWrapper.width();
        
        // 프레임 너비 설정
        $preview.css('width', deviceWidth + 'px');
        applyScaling(deviceWidth, containerWidth);
        
        // DOM 업데이트 후 다시 스케일링 적용
        setTimeout(() => {
            applyScaling(deviceWidth, $iframeWrapper.width());
        }, 50);
    }
    
    // 스케일링 적용
    function applyScaling(deviceWidth, containerWidth) {
        let scale = 1;
        if (containerWidth < deviceWidth) {
            scale = containerWidth / deviceWidth;
            $preview.css('transform', `scale(${scale})`);
        } else {
            $preview.css('transform', 'scale(1)');
        }
        
        // 스케일에 맞게 높이 조정
        setTimeout(() => {
            const wrapperHeight = $iframeWrapper.height();
            $preview.css('height', (wrapperHeight / scale) + 'px');
        }, 50);
    }
    
    // 창 크기 변경 시 리사이징 처리
    $(window).on('resize', function() {
        setDeviceSize(currentDevice);
    });
    
    // iframe 로드 완료 시 크기 재조정
    $preview.on('load', function() {
        setDeviceSize(currentDevice);
    });
}

// 페이지 로드 시 초기화
$(document).ready(function() {
    handleIframeLoad();
});