전체 글

[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으로..

[횡스크롤] 예제모음

https://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs--cms-24215 -> 풀페이지 횡스크롤 https://idiotwu.github.io/smooth-scrollbar/ -> 스크롤 부드럽게 https://www.jqueryscript.net/slider/Horizontal-Content-Scroller-Plugin-with-jQuery-Scroll-Slider.html -> 횡스크롤 제이쿼리 플러그인

파비콘

파비콘은 웹페이지 상단 태베 보여지는 아이콘이다. 이 아이콘은 즐겨찾기 등록시 대표 아이콘으로도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하다. 파비콘은 ico 파일을 쓰지만 요즘엔 png 파일도 지원하고 있어서 나는 png 파일을 주로 쓴다. 즐겨찾기 등록시(주로 모바일) 생기는 아이콘의 화질에 많은 영향을 미치기 때문이다. PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가? Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다. 맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32x32 파비콘을 사용한다. 윈도우즈(Windows) 용 Chrome은 16x16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다. 상기 옵션 중 아무..