jude-ui

const $slide_wrapper = $('.slide_')
if ($slide_wrapper.length) {
  $slide_wrapper.each(function (idx) {
    const areaSlide = this
    const slide = areaSlide.querySelector('.swiper')
    const prevEl = areaSlide.querySelector('.btn_prev')
    const nextEl = areaSlide.querySelector('.btn_next')
    const pause = areaSlide.querySelector('.pause')
    const play = areaSlide.querySelector('.play')
  

jude-ui

<style>
  :root{
    --none: linear(0, 1);
    --power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
    --power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
    --power1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );
    --power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );
    --power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );
    --power2-in-out: linear( 0, 0.0036 9.62%, 0.0

jude-ui

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.counterUp=t():e.counterUp=t()}(self,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>n,divideNumbers:()=>r});const n=(e,t={})=>{const{action:n="start",duration:i=1e3,delay:u=16}=t;if("stop"===n)return void o(e);if(o(e),!/[0-9]/.test(e.innerHTML))return;const l=r(e.innerHTML,{duration:i||e.getAttribute("data-duration"),delay:u||e.getAttribute("data-delay")});e._countUpOrigInnerHTML=e.innerHTML,e.innerHTML=l[0]||" ",e.style.visibility="visible";const c=function(){e.innerHTML=l.shift()||" ",l.length?(c

jude-ui

const counterUp = window.counterUp.default;
const counterCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      counterUp(entry.target, {
        duration: 1000,
        delay: 16,
      });
      observer.unobserve(entry.target); // 한 번 실행 후 관찰 중지
    }

jude-ui

// 사이드 메뉴 토글 공통 함수
/**
 * 
 * @param {Object} options - 토글 동작에 필요한 옵션 객체
 * @param {JQuery} options.$allClassTargets - 모든, 클래스 타겟 요소 (초기화 대상)
 * @param {JQuery} options.$currentClassTarget - 현재 클릭된, 클래스 타겟 요소
 * @param {JQuery} options.$allSubMenus - 모든, 서브 메뉴 요소 (슬라이드 업/다운 대상)
 * @param {JQuery} options.$currentSubMenu - 현재 타겟의, 서브 메뉴 요소 (슬라이드 업/다운 대상)
 * @param {string} [options.activeClass = 'active'] - 활성화 상태를 나타내는 클래스명 (기본값: 'active')
 * @param {number} [options.duration = 200] - 슬라이드 애니메이션 지속 시간 (밀리초, 기본값: 200)

jude-ui

.tbl td:hover{background-color: #28ae76}
.tbl td:has(~td:hover){color:#fff;background-color: #127d51} /* 좌측 td */
.tbl:has(td:nth-of-type(1):hover) tr:has(~ tr:hover) td:nth-of-type(1){color:#fff;background-color: #127d51} /* 컬럼 */햐

jude-ui

let lastScrollTop = 0;
const delta = 20;
let didScroll = null;

$(window).scroll(function () {
  if (!didScroll) {
    didScroll = setTimeout(function () {
      hasScrolled();
      didScroll = null;
    }, 250);

jude-ui

@keyframes topBtnAni {
  0%   {opacity: .5;transform: translate(-50%, -50%) scale(.8)}
  100% {opacity: 0;transform: translate(-50%, -50%) scale(1.2)}
}
.footer .btn_top{
  --circle-color: #000; /* 원 색상 */
  --arrow-color: #fff; /* 화살표 색상 */
  --outer-circle-opacity: .3; /* 바깥쪽 원 투명도 */
  --circle-gap: 0px; /* 바깥쪽 원과 안쪽 원 사이 간격 */
  --circle-gap-pc: 20px; /* 바깥쪽 원과 안쪽 원 사이 간격(PC) */

jude-ui

<div class="file_comm">
  <input type="text" class="inp_comm" readonly>
  <input type="file" id="inpFile">
  <label for="inpFile" class="btn btn5">File 1</label>
</div>

<div class="file_comm">
  <input type="text" class="inp_comm" readonly>
  <input type="file" id="inpFile2">
  <label for="inpFile2" class="btn btn5">File 2</label>

jude-ui

/**
  * 화면이 줄어들 때 특정 요소가 비율에 맞게 함께 스케일이 줄어들도록 처리하는 기능
  * 이미지 태그처럼 비율대로 줄어들기가 어려운 요소에 적용하기 용이함(ex. 테이블로 작성된 요소들)
  * @param {String} scaleTarget - 스케일이 적용될 요소
  * @param {String} container - 스케일이 적용될 요소를 감싸고 있는 컨테이너 요소
  * @param {Number} breakpoint - 스케일이 적용되기 시작하는 브라우저 창 너비
  * @param {Number} targetOriginWidth - 스케일이 적용될 요소의 원래 너비
  */
function adjustZoom(scaleTarget, container, breakpoint, targetOriginWidth) {
  var screenWidth = $(window).width();