가끔 UI 작업을 하다보면 정해져있는 숫자만큼 0부터 숫자를 올리고 싶을 때가 있는데 이때를 위해 만들어둔 함수이다. function numberCount(element, num, time) { var element = $(element), maxNumber = Number(num), startNumber = 0, spd = time; element.animate({val : maxNumber}, { duration: spd, step: function() { var currentNum = parseInt(this.val); element.text(currentNum); }, complete : function() { var completeNum = parseInt(this.val); element.te..
Youtube 영상을 다중으로 이리저리 제어하는 프로젝트 중이라. 본의 아니게 Youtube API를 열심히 만지고 있다. 지금까지 내가 알게된 바는.. local 작업시, IE에서는 playVideo()와 같은 명령어가 듣지 않는다. - ftp 에 업로드 후 확인 결과 정상으로 나온다. chrome 은 최근 업데이트를 통해 playVideo()를 막아버렸다. - iframe으로 동영상을 추가한 경우, 웹접근성과 관련하여 이번 업데이트가 이뤄진 것으로 추정된다. 무조건 클릭이 되어야만 재생이 되는데. 한가지 꼼수는 mute (음소거) 상태로 재생시에는 playVideo()가 먹힌다. - iframe 으로 넣어서 api를 연결해준 경우가 아닌, api 내에서 iframe을 만들어버린 경우엔 unMute상태..
유튜브 영상을 메인에 거는 일이 많은 편인데 그 유튜브 영상을 제어하기 위해 컨트롤 버튼을 만들어 쓰는 경우가 생겨 정리합니다 . 더 자세히는 유튜브에서 제공하는 API 설명 사이트를 통해 알아보실 수 있습니다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API Embed a YouTube player in your application. developers.google.com 1. 첫번째 방법 - 동영상 js 로 넣기 // 유튜브 영상이 자리 할 곳입니다. html 내에 해당 동영상이 들어갈 자리를 만듭니다. 아이디 값..
instagram API 를 이용해서 내 웹사이트에 피드 로드하기를 구현해볼까합니다. 여기서 전제조건은 해당 인스타그램 계정이 공개계정이여야 한다는 점입니다. 그리고, 아무 계정이나 가져오진 못합니다. 해당 계정의 주인이 계정의 공개 토큰을 가져와야하기 때문입니다. 1. Instagram developer site 로그인 아래 첨부한 사이트에서 인스타 계정 로그인을 합니다. 단, 아무 계정이 아닌 피드를 가져올 해당 계정이여야 합니다. instargraim developer site URL : https://www.instagram.com/developer/ 2. Manage Clients 클릭 예시 캡쳐본에 따라 해당 버튼을 클릭합니다. 3. Register a New Client 클릭 4. 데이터 채..
로그인 /** * 카카오톡 로그인 * response 값으로 유저의 snsKey, snsType는 필수로 form안에 append 처리합니다. */ function kakaoLogin(params) { Kakao.init(params.key); Kakao.isInitialized(); $(params.button).on('click', function() { loginWithKakao(); }); function loginWithKakao() { Kakao.Auth.login({ success : function(response) { Kakao.API.request({ url:'/v2/user/me', success: function(result) { var accessToken = Kakao.Auth...
차근차근 읽고 공부하기 (이 포스팅은 공부를 위해 원문사이트를 정리한 것 입니다.) 원문 사이트 : https://dev.classmethod.jp/articles/html5-x-css3-x-jquery-6-parallax/ 페럴렉스(Parallax)란? 영어 단어 그대로 "시차" 를 뜻한다. 시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것. UX-UI 적인 말이 많지만, 개인적인 소견으로는 UX적으로 짧은시간 가장 큰 효과를 주는 UI 인 것 같다. 1. JavaScript - jQuery 에서 페럴렉스 효과 첫번째 단계. 가장 기본이 되는 함수 알기 $(window).scroll(function(){}) var value = $(this).scrollTop(); // 현재 스크롤 값 ..
IR (Image Replacement) 기법 "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법. "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다. 의미가 포함된 이미지는 전경으로 처리한다. IS (Image Sprite) 기법 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함. *좋아요와 댓글은 힘이 됩니다.
- Total
- Today
- Yesterday
- 웹접근성
- javascript
- 웹퍼블리셔
- 이론공부
- 수영전후기
- jQuery
- curring
- js
- Aria
- 포세이돈되기까지
- 퍼블리싱
- 수영하기전후기
- vue
- css3
- Issue
- 자바스크립트
- vue.js
- 환경설정
- API
- 웹퍼블리싱
- 리액트생명주기
- frontend
- ES5
- 퍼블리셔
- props
- jeonst
- 커리패턴
- youtube
- component
- WAI-ARIA
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |