식스샵 블로그 GitHub Pages iframe 공용 템플릿 사용 방법 1. 아래 PAGE_URL에 GitHub Pages 주소 입력 2. 필요할 경우 HEIGHT 숫자만 조절 3. 식스샵 사용자 편집 섹션에 전체 코드 삽입 우측 고정 문의하기 버튼================================ --> style=" position:fixed !important; right:0 !important; top:56% !important; transform:translateY(-50%) !important; z-index:2147483647 !important; display:block !important; visibility:visible !important; opacity:1 !important; width:auto !important; min-width:98px !important; height:52px !important; line-height:52px !important; padding:0 18px 0 22px !important; margin:0 !important; background:#001158 !important; color:#ffffff !important; font-size:17px !important; font-weight:900 !important; letter-spacing:-0.4px !important; text-align:center !important; text-decoration:none !important; font-family:Pretendard, 'Noto Sans KR', Arial, sans-serif !important; border-radius:999px 0 0 999px !important; box-shadow:0 8px 24px rgba(0,0,0,0.24) !important; box-sizing:border-box !important; cursor:pointer !important; pointer-events:auto !important; "> 문의하기 /* 식스샵 게시글 상단 기본 제목·작성정보 영역 숨김 */ [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*="TripleColumnLayout_center-panel"] [class*="Post_title-panel"], /* 실제 식스샵 블로그 제목 */ .blogPost.title.designSettingElement.text-title { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; font-size: 0 !important; overflow: hidden !important; } /* 실제 식스샵 공유하기 영역 제거 확인된 구조: .blogPostShareDiv .snsShareButtonDiv .snsShareButton */ .blogPostShareDiv, .blogPostShareDiv.designSettingElement, .blogPostShareDiv.snsShareButtonDiv, .snsShareButtonDiv, .snsShareButton, .snsShareButton-name, [data-name-kr="공유하기"], [data-name-en="Share"] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; font-size: 0 !important; overflow: hidden !important; } /* 숫자 페이지 영역에 사용될 가능성이 높은 클래스 */ .blogPostPagination, .blogPostPaging, .blogPostPager, .blogPostPageNav, .postPagination, .post-pagination, .postPaging, .post-paging { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 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: 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/carvecoclass/'; /* ================================================== ② 기기별 iframe 높이 ================================================== */ const HEIGHT = { desktop: 9000, tablet: 11000, mobile: 17500, smallMobile: 17500 }; /* ================================================== 아래부터는 수정하지 않아도 됩니다. ================================================== */ const frame = document.getElementById('yc-github-frame'); if (!frame) return; 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 normalizeText(text) { return String(text || '') .replace(/\u00a0/g, ' ') .replace(/\s+/g, ' ') .trim(); } function hideElement(element) { if (!element) return; element.style.setProperty( 'display', 'none', 'important' ); element.style.setProperty( 'visibility', 'hidden', 'important' ); element.style.setProperty( 'width', '0', 'important' ); element.style.setProperty( 'height', '0', 'important' ); element.style.setProperty( 'min-width', '0', 'important' ); element.style.setProperty( 'min-height', '0', 'important' ); element.style.setProperty( 'max-width', '0', 'important' ); element.style.setProperty( 'max-height', '0', 'important' ); element.style.setProperty( 'margin', '0', 'important' ); element.style.setProperty( 'padding', '0', 'important' ); element.style.setProperty( 'border', '0', 'important' ); element.style.setProperty( 'line-height', '0', 'important' ); element.style.setProperty( 'font-size', '0', 'important' ); element.style.setProperty( 'overflow', 'hidden', 'important' ); } /* 블로그 제목과 공유하기 영역 제거 */ function hideSixshopElements() { 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"]', '.blogPost.title.designSettingElement.text-title', '.blogPostShareDiv', '.blogPostShareDiv.designSettingElement', '.blogPostShareDiv.snsShareButtonDiv', '.snsShareButtonDiv', '.snsShareButton', '.snsShareButton-name', '[data-name-kr="공유하기"]', '[data-name-en="Share"]', '.blogPostPagination', '.blogPostPaging', '.blogPostPager', '.blogPostPageNav', '.postPagination', '.post-pagination', '.postPaging', '.post-paging' ]; document .querySelectorAll(selectors.join(',')) .forEach(function (element) { if ( element === frame || element.contains(frame) || frame.contains(element) ) { return; } hideElement(element); }); } /* 공유하기 주변에 별도 클래스 없이 출력되는 숫자 페이지 1 2 영역 제거 */ function hideNumberNavigation() { const shareContainers = document.querySelectorAll( [ '.blogPostShareDiv', '.snsShareButtonDiv', '.snsShareButton' ].join(',') ); shareContainers.forEach(function (shareElement) { let parent = shareElement.parentElement; let depth = 0; while ( parent && parent !== document.body && depth ) { Array.from(parent.children) .forEach(function (child) { if ( child === shareElement || child.contains(shareElement) ) { return; } const text = normalizeText( child.innerText || child.textContent ); /* 숫자만 2개 이상 있는 영역만 제거 예: 1 2 / 1 2 3 */ const isOnlyPageNumbers = /^\d+(?:\s+\d+)+$/.test(text); if (isOnlyPageNumbers) { hideElement(child); } }); parent = parent.parentElement; depth++; } }); /* pagination 계열 클래스인데 클래스명이 일정하지 않은 경우 대응 */ document .querySelectorAll( [ '[class*="pagination"]', '[class*="Pagination"]', '[class*="paging"]', '[class*="Paging"]', '[class*="pager"]', '[class*="Pager"]' ].join(',') ) .forEach(function (element) { if ( element === frame || element.contains(frame) || frame.contains(element) ) { return; } const text = normalizeText( element.innerText || element.textContent ); if (/^\d+(?:\s+\d+)+$/.test(text)) { hideElement(element); } }); } function applySixshopCleanup() { /* 숫자 영역은 공유 영역이 숨겨지기 전에 먼저 탐색 */ hideNumberNavigation(); hideSixshopElements(); } applySixshopCleanup(); setTimeout(applySixshopCleanup, 100); setTimeout(applySixshopCleanup, 300); setTimeout(applySixshopCleanup, 1000); setTimeout(applySixshopCleanup, 2500); if ('MutationObserver' in window) { const observer = new MutationObserver( applySixshopCleanup ); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(function () { observer.disconnect(); }, 10000); }})();