$(function(){ fn_widthResize(); }) function fn_widthResize() { if (window.matchMedia('(max-width: 1024px)').matches) { // 태블릿 $('.branch').off().click(function() { $('.branch > div').css({ height: "auto" }); $('.branch > div').slideToggle(); $('.lang > ul').slideUp(); $('.remote').toggleClass('hide'); }); $('.lang').off().click(function() { $('.lang > ul').slideToggle(); $('.branch > div').slide..

// pc, 모바일 구분 const isMobile = () => { const user = navigator.userAgent; let isCheck = 'PC'; if ( user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1 ) { isCheck = 'MO'; } return isCheck; } $(window).resize(function (){ mainNavSize(); }); function mainNavSize() { if(isMobile() == 'PC') { var windowWidth = $(window).width(); //요소의 너비를 반환 // 768 if(windowWidth < 769) { // 모바일 $('main nav u..

HTML TEXT1 TEXT2 TEXT3 TEXT4 TEXT5 CSS ul, li {list-style: none;} .flow_banner {overflow: hidden;display: flex;max-width: 1180px;margin: 30px auto;background: #000;} .flow_banner .list {display: flex;} .flow_banner .list > li {font-size: 18px;color: #fff;padding: 20px;} @keyframes flowRolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* 반응형 스타일 */ @media (max-wi..

새로 고침 p > span.spin {animation:spin .5s ease-in;} @keyframes spin{ to { transform: rotate(360deg) } } $('.refresh_js').click(function(){ $('.refreshIcon_js').addClass('spin'); setTimeout(function(){ $('.refreshIcon_js').removeClass('spin'); }, 500); }); 참고사이트 https://jsfiddle.net/dimlucas/5f8vyx2x/1/ CSS Refresh Animation Trigger - JSFiddle - Code Playground jsfiddle.net

*이미지를 감싸는 버튼 혹은 div등의 부모 태그가 있어야 함 *바뀌는 이미지들의 파일명은 규칙성을 가지고 있어야 함 동일한 구조의 버튼이 여러개가 있고 각각의 버튼을 눌렀을 때, 이미지가 바뀌는(토글) 기능 var pinBtn = document.querySelectorAll(".pinBtn_js"); var click = true; function pinClick(element) { var btnTarget = element.currentTarget; var iconImg = btnTarget.querySelector(".pin_js"); if (btnTarget.click) { iconImg.src = iconImg.src.replace("off.png", "on.png"); } else { ico..

text1 text2 text3 text4 text5 *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;} .chat-container {display:flex; flex-direction:column-reverse; position:relative; width:500px; height:300px; margin:50px auto 0; overflow:hidden; border:1px solid red;} .chat-container::before {content:''; position:absolute; top:0; width:100%; height:10%; z-index:1; background:linear-gradient(to bot..