식스샵 블로그 GitHub Pages iframe 공용 템플릿 사용 방법 1. 아래 PAGE_URL에 GitHub Pages 주소 입력 2. 필요할 경우 HEIGHT 숫자만 조절 3. 식스샵 사용자 편집 섹션에 전체 코드 삽입========================================================== --> /* 식스샵 게시글 상단 카테고리·제목·작성정보·공유 영역 숨김 */ [class*="PostT01_wrapper"] > h1, [class*="PostT01_wrapper"] > h2, [class*="PostT01_wrapper"] [class*="post-header"], [class*="PostT01_wrapper"] [class*="Post_header"], [class*="PostT01_wrapper"] [class*="title-panel"], [class*="Post_wrapper"] > h1, [class*="Post_wrapper"] > h2, [class*="Post_wrapper"] [class*="post-header"], [class*="Post_wrapper"] [class*="Post_header"], [class*="Post_wrapper"] [class*="title-panel"], [class*="Post_wrapper"] [class*="AuthorDateTime"], [class*="Post_wrapper"] [class*="Share"], [class*="Post_wrapper"] [class*="share"], [class*="TripleColumnLayout_center-panel"] [class*="Post_title-panel"] { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 식스샵 본문 영역의 폭과 여백 제한 해제 */ [class*="PostT01_post-contents-wrapper"], [class*="Post_post-contents-wrapper"], [class*="Post_post-panel"], [class*="post-contents"], [class*="contents-wrapper"] { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #yc-github-fullbleed, #yc-github-fullbleed * { box-sizing: border-box !important; } /* 브라우저 화면 양쪽 끝까지 확장 기존에 정상적으로 작동했던 방식을 그대로 유지합니다. */ #yc-github-fullbleed { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; overflow: hidden !important; line-height: 0 !important; font-size: 0 !important; background: #ffffff !important; } #yc-github-frame { display: block !important; width: 100vw !important; min-width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; background: #ffffff !important; /* 자바스크립트 실행 전 임시 높이입니다. 실제 높이는 아래 HEIGHT 설정으로 적용됩니다. */ height: 9000px; } id="yc-github-fullbleed" style=" position:relative!important; width:100vw!important; max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; padding:0!important; overflow:hidden!important; line-height:0!important; font-size:0!important; background:#ffffff!important; "> id="yc-github-frame" title="GitHub 콘텐츠" width="100%" scrolling="no" loading="eager" allowfullscreen style=" display:block!important; width:100vw!important; min-width:100vw!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; overflow:hidden!important; background:#ffffff!important; " >(function () { /* ================================================== ① GitHub 링크 입력 영역 앞으로는 아래 주소 한 줄만 교체하면 됩니다. ================================================== */ const PAGE_URL = 'https://ycgroupcwsong-cmd.github.io/1-day-fusion/'; /* ================================================== ② 기기별 iframe 높이 같은 구조와 길이의 페이지라면 수정하지 않아도 됩니다. 다른 길이의 페이지라면 숫자만 조절하세요. ================================================== */ const HEIGHT = { desktop: 9000, // 화면 폭 1101px 이상 tablet: 11000, // 화면 폭 761px~1100px mobile: 17500, // 화면 폭 481px~760px smallMobile: 17500, // 화면 폭 480px 이하 }; /* ================================================== 아래부터는 수정하지 않아도 됩니다. ================================================== */ const frame = document.getElementById('yc-github-frame'); if (!frame) return; /* 입력한 GitHub 주소 적용 */ frame.src = PAGE_URL; function applyIframeHeight() { const screenWidth = window.innerWidth || document.documentElement.clientWidth; let selectedHeight; if (screenWidth selectedHeight = HEIGHT.smallMobile; } else if (screenWidth selectedHeight = HEIGHT.mobile; } else if (screenWidth selectedHeight = HEIGHT.tablet; } else { selectedHeight = HEIGHT.desktop; } frame.style.setProperty( 'height', selectedHeight + 'px', 'important' ); frame.setAttribute( 'height', String(selectedHeight) ); } applyIframeHeight(); window.addEventListener( 'resize', applyIframeHeight, { passive: true } ); window.addEventListener( 'orientationchange', function () { setTimeout(applyIframeHeight, 300); }, { passive: true } ); /* 식스샵이 페이지 로딩 후 다시 생성하는 제목·작성정보·공유 영역 제거 */ function hideSixshopHeader() { const selectors = [ '[class*="PostT01_wrapper"] [class*="post-header"]', '[class*="PostT01_wrapper"] [class*="Post_header"]', '[class*="PostT01_wrapper"] [class*="title-panel"]', '[class*="Post_wrapper"] [class*="post-header"]', '[class*="Post_wrapper"] [class*="Post_header"]', '[class*="Post_wrapper"] [class*="title-panel"]', '[class*="Post_wrapper"] [class*="AuthorDateTime"]', '[class*="Post_wrapper"] [class*="Share"]', '[class*="Post_wrapper"] [class*="share"]' ]; document .querySelectorAll(selectors.join(',')) .forEach(function (element) { if ( element === frame || element.contains(frame) || frame.contains(element) ) { return; } element.style.setProperty( 'display', 'none', 'important' ); element.style.setProperty( 'height', '0', 'important' ); element.style.setProperty( 'margin', '0', 'important' ); element.style.setProperty( 'padding', '0', 'important' ); }); } hideSixshopHeader(); setTimeout(hideSixshopHeader, 300); setTimeout(hideSixshopHeader, 1000); setTimeout(hideSixshopHeader, 2500); if ('MutationObserver' in window) { const observer = new MutationObserver(hideSixshopHeader); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(function () { observer.disconnect(); }, 10000); }})();
