완성품은 여기서 확인 가능!
http://surisurimasuri.com
머 만들만한거 없나 하구 생각하다가
개쩌는 생각이 남!!!!
바로 자숙의 대명사 케인인님을 모티브로 하여서
얼굴을 바꿀수있는 죄송합니다 머신을 만드는 거임
그래서 팝캣처럼 누를때마다 숫자가 올라가는
그런걸 만들기로 함!
제작과정
HTML/CSS
일단 페이지 구성은 워낙 단순해서 html 작성은
오래걸리지 않았음
근디 사진크기 조절하기가 빡세서 반응형에서 시간을 좀 많이씀ㅇㅇ
Javascript
진짜 개힘들었음
힘들었던 이유 첫번째는
- 얼굴을 잘라서 넣을 수 있는걸 만들자!
이런걸 안만들고 그냥 이미지 받아서 넣으면 비율 망가질테니
딱 얼굴에 맞게 정사각형으로 잘라서 넣게 하고 싶었음..
그래서 라이브러리 찾아보니까
https://fengyuanchen.github.io/cropperjs/
Cropper.js 라는걸 찾음
요렇게 사진을 자를 수 있는 라이브러린데
아무래도 처음쓰고 한글로 된 사용법이 많이 없다보니까
내가 원하는 걸 구현하는데 많은 시간이 들었음
글고 힘들었던 이유 두번째는
- PC는 잘되는데 모바일이 안됨!!
배경에 이벤트리스너를 달아서
mousedown 될때 수구리고
mouseup일때 올라가게 했능데
모바일은 안되는거임!!
그래서 찾아보니까 touchstart touchend로 하라고 하더라구
그래서 그것도 추가하니까
이번엔 pc에서 두번씩 클릭되는거임!! 하…
그래서 시간이 오래걸렸음
호스팅
원래는 동아리 친구 서버 썼었는데
중학교 졸업하면서
cafe24에서 웹호스팅
가비아에서 도메인을 구매함
여기서
”그럴꺼면 걍 카페24에서 호스팅, 도메인 둘다사면 되는데 왜그럼?“
답은 간단하다. 도메인이 가비아가 더 쌌다
완성
그래도 일단 완성은 함
근데 급하게 만들거라 좀 오류가 많음
숫자가 1씩 안올라가기도 하고
수구린 상태가 기본이 되기도 하고 소리가 안나오기도 하고ㅠ흑
반응형을 잘못 했는지 숫자가 머리에 가림
하지만 pc는 잘보이쥬?
이렇게 수구릴수도 있고
버튼을 누르면
얼굴도 바꿀 수 있음!!
모두들 죄송함니다 머신을 사용하여
자숙을 체험헤보세요!!
