All
[CSS] 벤더 프리픽스
벤더 프리픽스 CSS3 표준으로 확정되기 이전 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다. BrowserVendor PrefixIE or Edge-ms-Chrome-webkit-Firefox-moz-Safari-webkit-Opera-o-iOS Safari-webkit-Android Browser-webkit-Chrome for Android-webkit- Prefix Free 라이브러리 브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다. 사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리(http://leaverou.github.io/prefixf..
[CANVAS] 애니메이션 그리기
★ 사각형을 x축으로 왼쪽에서 오른쪽으로 움직이기★ https://jsfiddle.net/Kimara/w6rjhLqm/10/ ★두 개의 사각형을 만들고 애니메이션을 멈추게 하기★ https://jsfiddle.net/Kimara/gtfskc92/7/ ★백그라운드 이미지 애니메이션 만들기★ https://jsfiddle.net/Kimara/dLceafkz/11/ ★눈내리기★ https://jsfiddle.net/Kimara/2ksjgovb/15/
[CANVAS] 클릭한 곳에 사각형 그리기
https://jsfiddle.net/Kimara/Lo6f4xgh/21/ // HTML // 스크립트 var canvas=$('#myCanvas').get(0); var ctx=canvas.getContext('2d'); $('#myCanvas').click(function(e){ var mouseX = e.clientX - ctx.canvas.offsetLeft; var mouseY = e.clientY - ctx.canvas.offsetTop; ctx.fillStyle="red"; // 마우스 클릭한 곳에서 사각형의 중심이 되어서 생성이 된다. ctx.fillRect(mouseX-10, mouseY-10,20,20) //console.log(mouseX+','+mouseY); });
[제이쿼리] 제이쿼리 selector 정리
@DOM Selectors $('#id')=>document.getElementById('id') // IE 5.5+=>document.querySelector('#id') // IE 8+*두 메서드 모두 단일 요소를 반환합니다. getElementById는 querySelector를 사용하는 것보다 효율적입니다. $('.class')=>document.getElementsByClassName('class')[i] // IE 9+=>document.querySelectorAll('.class')[i] // IE 8+*첫 번째 메서드는 HTMLCollection을 반환하며 두 가지 중에서 가장 효율적입니다. querySelectorAll은 항상 NodeList를 반환합니다. $('tag')=>documen..
[VUE] vue.js 시작하기
https://jsfiddle.net/Kimara/ka8cbyxm/ model : DB / 데이터 view : HTML5, CSS3, JavaScript ... controller : 중간자 MVC ==> MVVM json과 node.js(rest api) 의 발전으로 인해 FED의 영역이 늘어남 -프레임워크 : 앵귤러 -라이브러리 : react, vue(vue 사이트에서는 프레임워크라고 말함) 라이브러리 에서 가상 DOM을 만들어 부하량을 줄임(스크립트가 알아서 변경되는 부분만 찾아서 바꿔줌) ecma script6 - 바벨, 웹팩 - CLI(dos) - let, const - vue.js를 쓸 때 ecma script6와 호환이 가능하지만 ecma6가 아직 브라우저를 타기 때문에 vue만 따로 공부 ..
[CSS] vertical-align
vertical-align은 오로지 inline 또는 table-cell box에서만 수직 정렬을 지정한다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align
[AOS] Animate On Scroll Library
https://michalsnik.github.io/aos/ 차장님이 알려준 플러그인. CSS 기반이란다. 사용법도 매우 간단하고 효과도 부드럽고 예쁘다. 나는 보통 최상위 wrap 바로 밑에 감싸는 div를 따로 만들어서 id와 class를 추가한다.그리고 aos 사이트를 보며 그때 그때 필요한 값을 주고 delay조절하면 나름 괜찮은 UI가 완성된다. 아래 소스는 내 최애 AOS소스이다.스크립트는 function으로 묶은 이유는 tab이 있을 때 클릭 이벤트마다 넣기 편하라고 ㅎㅎ AOS 2019.11.14 추가 1년간 aos를 쓰면서 느낀 점은 aos는 최고라는 것이다. 어떤 브라우저(IE9빼고)에서도 잘되고 모바일에서도 잘된다. 쓰면서 몇가지의 팁들이 생겼다. 1. 최상위 태그에 ☜이거 안넣어도 ..
[YOUTUBE] 유튜브 iframe, api
광고회사에서 유튜브 영상을 사용하는 것은 필수 필수~~~~ 1. iframe 단순하게 재생되는 동영상을 넣을 때. => iframe 자체에 옵션을 준다. showinfo와 rel은 필수. => 나는 주로 감싸는 박스에 해당 이미지를 잘라서 그 이미지 위에 position:absolute를 준 뒤 그 안에서 width:100%;height:100%를 준다. 그러면 감싸는 박스 width, height 값만 조절하면 영상 크기는 알아서 잘~ https://developers.google.com/youtube/youtube_player_demo => 유튜브 iframe 만들어주는 사이트. 근데 난 이거 별로 ㅎ 2. api 동영상에 어떠한 이벤트를 걸고 싶을 때.ex) 동영상이 끝나고 난 뒤 버튼이 생기게, ..
[플러그인] bpopup.js
http://dinbror.dk/bpopup/ 팝업 플러그인이 뭐가 있을까 검색하다가 알게 된 제이쿼리 bpopup커스텀이 쉽고 api설정도 간편하다. 하지만 기존 팝업안에서 버튼 클릭 시 기존 팝업은 사라지고 다른 팝업이 생겼으면 하는데그런 디테일을 api로 잡아주기엔 너무 복잡하고 그냥 제이쿼리로 hide/show 하는 것보다 귀찮아진다. 간단하게 하나의 팝업 안에 유튜브, 슬라이드 같은 걸 넣을때는 괜찮은 것 같다. bg도 바로 정할 수 있고, bg 클릭 시 팝업이 닫히거나, 따로 클래스를 줘서 팝업을 닫게 하거나 등등..활용도가 매우 높은 팝업 플러그인이다. 굿 익스 하위 버전에서도 잘 돌아간다~~
[SNS] 공유 이미지 사이즈
페이스북 파일형식 : jpg, png프로필이미지 사이즈 : 160px*160px커버이미지 사이즈 : 851px*315px (커버이미지 작업시 프로필이미지가 가려지지 않는지 확인하세요.)페이지공유이미지 : 1200px*900px 구글플러스(google+) 파일형식 : jpg, png (해상도가 72dip 이상이어야 선명합니다)프로필이미지 사이즈 : 250px*250px (가장자리가 잘리지 않게하기위하여 이미지여백을 조금 주세요~)커버이미지 사이즈 : 1240px*700px페이지공유이미지 : 497px*@ 트위터(twitter) 파일형식 : jpg, png프로필이미지 사이즈 : 200px*200px( 실제로 올려주실때는 400px*400px으로 업로드 하여야 합니다. 보여지는 크기는 200px*200px으로..