amanda의 공간입니다

테이블 코딩한 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()

유튜브 재생 버튼 jquery로 만들기 html css .vod_conbox{ overflow: hidden; position: relative; height: 0; width: 100%; /* padding-top: 30px; */ padding-bottom: 56.25%; } .vod_conbox iframe, .vod_conbox object, .vod_conbox embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vod_thumb{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #000; //intro 이미..

/* Shine */ .hover12 figure { position: relative; } .hover12 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25d..