카카오톡 공유하기 기능 사용 후기 이미지 아래 타이틀과 텍스트만 들어간 깔끔한 형식을 원했는데 타입을 피드(feed)로 선택한 뒤 커스터마이징 하면 된다 공유하는 메시지에서 이미지의 썸네일 교체와 타이틀 및 텍스트 변경은 javaScript에서 커스텀 카카오 썸네일 이미지 크기는 1200*630을 주로 사용하므로 동일한 사이즈로 했다 * 카카오 공유하기 기능 구현 시 유의점 1. 공유하기 기능 사용 전 kakao dev의 내 애플리케이션 플랫폼에 url을 꼭 등록해두어야 한다. 2. 이동하는 url은 내 플랫폼에 등록된 메인 url의 하위 페이지만 가능 3. PC와 모바일 파일을 따로 사용하는 경우 모바일 url도 따로 등록해야 한다 ! 개인 계정으로 테스트해보니 회사 홈페이지 url도 내 플랫폼으로 등..
유튜브 재생 버튼 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 이미..
모바일 시 사용자가 좌우 스크롤 하도록 유도하는 이미지 띄우는 이벤트 모바일에서 터치 또는 영역 스크롤 시 이미지 사라지는 이벤트 // scroll wrap .scroll_wrap{ overflow-x: auto; width: 100%; } // guide image .scroll_guide{ position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; z-index: 10; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .scroll_guide img{ max-width: 100%; } // scroll contents .scroll_content..
*카카오톡 공유하기 Demo https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com https://developers.kakao.com/docs/latest/ko/message/js-link Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 피드 형식으..
countup.js 같은 숫자 카운트 효과 순수 제이쿼리로 구현하기 $('.num').each(function () { var $this = $(this) var regex = /[^0-9]/g; var result = $this.text().replace(regex, ""); $({ countNum: 0 }).animate({ countNum: result }, { duration: 2000, easing: 'linear', step: function () { $this.text(Math.floor(this.countNum).toString() .replace(/\B(?
제이쿼리 풀페이지 플러그인 무료 버전 사용하기 *jQuery $('#fullpage').fullpage({ sectionsColor: ['#fff', '#333', '#fff', '#333', '#fff'], anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], responsiveWidth: 768, keyboardScrolling: true, animateAnchor: true, recordHistory: true, }); *fullpage.js css /*! * fullPage 2.9.7 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) ..
- Total
- Today
- Yesterday
- marquee css
- calendarflipjavascript
- 에러이미지속성
- 인쇄스크립트
- 자동인쇄script
- marquee javascript
- 텍스트플로팅효과
- clockflipanimation
- flipjavascriptanimation
- 이미지맵반응형
- 에러이미지마크업
- 이미지onerror
- 스티키효과
- 경력직웹퍼블리셔이직
- 그리드반응형
- 스크롤커스텀
- 흘러가는텍스트효과
- php조건문축약형
- marquee html
- php조건문
- rwdImageMaps
- phpif조건문
- 스크롤커스텀css
- 2단레이아웃반응형
- sticky제이쿼리
- a태그다운로드
- 퍼블리셔이직
- flipanimation
- flipjavascript
- calendarflipanimation
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |