<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* ROOT */ :root { --global-header-height: 100px; } /* common */ .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; /* overflow: hidden; */ } .art-content-inner { position: relative; display: flex; justify-content: center; margin: 0 auto; overflow: hidden; } .art-content-inner img { display: block; width: 100%; } /* main */ @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .art-content-inner.main .obj { position: absolute; top: 16.18%; left: 35.21%; width: 2.24%; animation: rotate 6s infinite linear; } /* nav */ #tabNav { position: sticky; top: var(--global-header-height); display: flex; justify-content: center; font-family: Pretendard, sans-serif !important; color: #fff; background-color: #FFC400; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); z-index: 2; } #tabNav li { font-size: 20px; font-weight: 600; line-height: 50px; width: 25%; max-width: 18.75%; transition: all 0.3s; } #tabNav li span { position: relative; } #tabNav li:hover, #tabNav li.active { color: #000; background-color: #FFCE29; } #tabNav li.active span::after { content: ''; position: absolute; top: -4px; right: -4px; width: 4px; height: 4px; border-radius: 50%; background-color: #000; } #tabNav li a { display: block; width: 100%; height: 100%; } /* sub */ .art-content-inner.sub { color: #fff; font-family: Pretendard, sans-serif !important; font-size: 20px; line-height: 1.8; background-color: #000; padding-top: var(--global-header-height); } /* cnt */ .art-content-inner.cnt { padding-top: var(--global-header-height); background-color: #fff; } #tabpanel1 { background-color: #000; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner main"><img alt="대문자 J의 플랜 A to D" src="https://image.a-rt.com//art/display/webzine/202411/1732264262286.jpg" /> <div class="obj"><img alt="" src="https://image.a-rt.com/art/managing/template/editorial/pc/obj.png" /></div> </div> <!-- 탭버튼 수정 --> <ul id="tabNav" role="tablist"> <li aria-controls="tabpanel1" class="tab" id="tab1" role="tab"><a href="#tabpanel1"><span>PLAN A 도심 속 드라이브</span></a></li> <li aria-controls="tabpanel2" class="tab" id="tab2" role="tab"><a href="#tabpanel2"><span>PLAN B 조용한 아웃도어</span></a></li> <li aria-controls="tabpanel3" class="tab" id="tab3" role="tab"><a href="#tabpanel3"><span>PLAN C 반려견과 조깅</span></a></li> <li aria-controls="tabpanel4" class="tab" id="tab4" role="tab"><a href="#tabpanel4"><span>PLAN D 북카페에서 독서</span></a></li> </ul> <!-- 텍스트 수정 --> <div class="art-content-inner sub"> <p>MBTI는 배신하지 않는다.<br /> 계획적인 J가 첫눈을 기다리며 보낼<br /> 네 가지 일상을 소개합니다.</p> </div> <div aria-labelledby="tab1" class="art-content-inner cnt" id="tabpanel1"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265914028.jpg" style="width: 1920px; height: 2300px;" /></div> <div aria-labelledby="tab2" class="art-content-inner cnt" id="tabpanel2"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265936292.jpg" style="width: 1920px; height: 2454px;" /></div> <div aria-labelledby="tab3" class="art-content-inner cnt" id="tabpanel3"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265972092.jpg" style="width: 1920px; height: 2372px;" /></div> <div aria-labelledby="tab4" class="art-content-inner cnt" id="tabpanel4"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265992465.jpg" style="width: 1920px; height: 2305px;" /></div> <div class="art-content-inner credit"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732262919793.jpg" /></div> <!-- 하단 띠배너 --><br /> &nbsp;</div> <!-- e : art-container-event --><script> $(function () { $(window).on('scroll', function () { const scrollY = Math.ceil($(this).scrollTop()); $('.art-content-inner.cnt').each(function () { const cntTop = Math.floor($(this).offset().top); const cntBtm = cntTop + $(this).height(); if (scrollY >= cntTop) { if (scrollY <= cntBtm) { $(this).addClass('active'); $('#' + $(this).attr('aria-labelledby')).addClass('active'); } else { $(this).removeClass('active'); $('#' + $(this).attr('aria-labelledby')).removeClass('active'); } } else { $(this).removeClass('active'); $('#' + $(this).attr('aria-labelledby')).removeClass('active'); } }); }); }); </script><!-- E : 이벤트 복사영역 여기까지 -->

<img src="https://image.a-rt.com/art/editor/202411/1732266789074.jpg" style="width: 1920px; height: 100px;" />