amanda의 공간입니다

자바스크립트로 카운트다운 이벤트 구현하기 HTML DAYS HRS MINS SECS CSS .count_wrap ul{ display: flex; justify-content: center; align-items: center; } .count_wrap ul li{ position: relative; text-align: center; } .count_wrap ul li + li{ margin-left: 40px; padding-left: 40px; } .count_wrap ul li + li:before, .count_wrap ul li + li:after{ display: block; content: ''; position: absolute; top: 20px; left: -4px; width: 8p..

위로 올라가는 텍스트 animation jQuery로 구현하기 jQuery animate 무한 반복은 call back에 함수 이름을 작성해주면 된다 *jQuery animate 사용 방법 (진행 방식과 call back은 생략 가능) .animate({적용되는 속성}, speed, 진행 방식, call back) 진행 방식 값은 linear, swing, null 등이 있음 function scrollTest(){ var scrollRolling = $('.textrolling'), scrollHeight = scrollRolling.height(), scrollTime = scrollHeight * 50; scrollRolling.css('margin-top', '150px'); scrollRolli..

테이블 코딩한 cell의 폰트 사이즈가 특정 iOS 모바일 디바이스에서 들쭉날쭉 크게 보이는 현상이 있었다 iOS는 viewport가 변경되면 자동으로 font size를 조정하는데 그에 따른 현상이라고 한다 이때 필요한 text-size-adjust text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야 한다 html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } text-size-adjust: no..

data-tab 값을 활용해 filter로 해당 data 값 가진 요소 찾는 click event $('.btn_tab').on('click', function(){ var tabData = $(this).data('tab'), tabMenu = $('.tab_menu'), tabConbox = $('.tab_conbox'); tabMenu.children().removeClass('active'); tabMenu.children().filter('[data-tab=' + tabData + ']').addClass('active'); tabConbox.hide(); tabConbox.filter('[data-tab=' + tabData + ']').stop().fadeIn(); })

탭 메뉴에 data-name 값을 각각 부여하고 이동할 섹션에는 ID값으로 같은 값을 부여한 뒤 탭 클릭 시 해당하는 섹션으로 스크롤 이동하도록 구현 HTML menu1 menu2 menu3 jQuery $('.tab_menu li a').on('click', function(){ var targetId = $(this).data('name'), targetSec = $('#' + targetId).offset().top; $('html').animate({ scrollTop : targetSec }, '2000'); return false; })

자바스크립트로 mouse over (mouse enter) 호버 이벤트 구현하기 const wrap = document.getElementById('js_menu_wrap'); const items = wrap.children; for(let i=0; i

카카오톡 공유하기 기능 사용 후기 이미지 아래 타이틀과 텍스트만 들어간 깔끔한 형식을 원했는데 타입을 피드(feed)로 선택한 뒤 커스터마이징 하면 된다 공유하는 메시지에서 이미지의 썸네일 교체와 타이틀 및 텍스트 변경은 javaScript에서 커스텀 카카오 썸네일 이미지 크기는 1200*630을 주로 사용하므로 동일한 사이즈로 했다 * 카카오 공유하기 기능 구현 시 유의점 1. 공유하기 기능 사용 전 kakao dev의 내 애플리케이션 플랫폼에 url을 꼭 등록해두어야 한다. 2. 이동하는 url은 내 플랫폼에 등록된 메인 url의 하위 페이지만 가능 3. PC와 모바일 파일을 따로 사용하는 경우 모바일 url도 따로 등록해야 한다 ! 개인 계정으로 테스트해보니 회사 홈페이지 url도 내 플랫폼으로 등..

자바스크립트 특정일 팝업 띄우기 이벤트 let startDate= new Date("2023/11/10 00:00:00"); let endDate= new Date("2023/11/20 23:59:00"); if(Date.now() >= startDate && Date.now()