IT

    [제플린] 퍼블리셔가 제플린 사용하기

    사용환경 : window10 제플린을 쓰는 이유 - 이미지 슬라이스 사용이 편리하다. - 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을 추천. - 좌표값을 다 알려준다. 제플린의 특징 - 프로젝트 1개는 무료 - 스케치와 psd를 활용할 수 있다. - 개발자가 스케치를 활용 할 수 없을때 사용한다. - 프로젝트 디바이스 선택이 중요하다 - IOS선택 - Untitle에 프로젝트 이름 입력 - 스케치, XD, 피그마, 포토샵을 볼 수 있다. - 모래시계는 작업 히스토리다. - 안드로이드 선택 > 우측 프로젝트 명 아래에 안드로이드 클릭하면 해상도 설정할 수 있다. 제플린 쓰는 법 - 제플린 다운 https://zeplin.io/ Zeplin Connected..

    [플러그인] 이미지 확대 플러그인 Zoomer

    https://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/ jQuery Zoomer Plugin Examples www.jqueryscript.net 이미지를 확대, 축소 하고 마우스로 드래그하면 이동이 가능한 플러그인. 간단한 지도 이미지에 사용하면 좋다. 간단한 예약 사이트를 작업 하는데 썸네일을 클릭하면 팝업이 뜨고, 버튼을 클릭하면 팝업 내 이미지가 확대되고 축소도 되면서 드래그도 가능해야 했다. 처음에는 백그라운드 이미지를 넣어서 +버튼을 누르면 백그라운드 이미지 사이즈를 늘리고 -버튼을 누르면 백그라운드 이미지 사이즈가 줄어드는 식으로 생각을 해서 스크립트를 짰다. 하지만 이런저런 변수로 인해 플러그인을 찾아 보았고 그 ..

    [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) 동영상이 끝나고 난 뒤 버튼이 생기게, ..

    [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 -> 횡스크롤 제이쿼리 플러그인

    [스터디] 2018.03.22 GIT 스터디1

    git강의https://backlog.com/git-tutorial/kr/intro/intro1_1.html git 사용법https://nolboo.kim/blog/2013/10/06/github-for-beginner/ git명령어http://noritersand.tistory.com/86 git설치http://library1008.tistory.com/51 git hub사용법http://blog.naver.com/PostView.nhn?blogId=nicecoding&logNo=220590027939&categoryNo=32&parentCategoryNo=23&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView ----------------..

    [플러그인] 탭안에 슬라이드, 영역 밖의 화살표 => slick

    https://github.com/OwlCarousel2/OwlCarousel2/issues/1139 2018.03.14 탭안에 슬라이드를 넣는중 사용한 OwlCarousel탭을 클릭할때마다 위드값을 이상하게 받아온다.반응형이라 창 크기를 줄이면 제 값을 가져오는데 첫 화면에서 탭을 클릭하면 이상하다.그래서 swiper로 바꿨다. swiper는 잘된다.안되는 플러그인은 에러사항을 메모해두고 다른걸로 갈아타자.다음에 업데이트 되겠지. 2018.03.15 하단 이미지와 같이 스와이퍼 영역을 벗어난 화살표가 필요했다. swiper는 화살표 마크업이 따로 필요하기 때문에, 해당 영역을 벗어나는 화살표는swiper 밖으로 화살표 마크업을 빼고, swiper와 화살표를 감싸는 박스에 position:relative..

    handlebars.js[jsfiddle]

    출처 : http://programmingsummaries.tistory.com/381 https://jsfiddle.net/Kimara/fmt4yftp/

    [반응형] 반응형 웹 디자인

    ★ 반응형을 위한 기본 HTML 설정 => 문서의 인코딩은 utf-8로 설정하고, 부포트는 간단하게 가로값(width)을 디바이스의 기본 가로값(device-width)으로 유지하고 비율은 1.0으로 설정해 디바이스로 접속했을 때 디바이스의 웹 브라우저 해상도로 보이게 한다. ★ 파비콘 http://www.favicon.cc/=> 파비콘 사이트 ★ 해상도 1. 대형 모니터2. 와이드 모니터3. 일반 모니터4. 태블릿 PC5. 소형 태블릿 PC6. 스마트폰 모니터 해상도(스크롤 포함) 1024*7681280*9601920*12002560*1600 모바일 해상도(최저)아이폰 - 320갤럭시S3 - 360갤럭시 노트 - 400 https://en.wikipedia.org/wiki/Lists_of_display..