본문 바로가기

분류 전체보기266

SNS 공유 링크 만들기 요새는 SNS 공유링크가 없는 사이트가 없을정도다.고로 많은 사람들과 활발한 공유가 가능하다.최근 이러한 공유기능을 만들일이 있어 찾아보니 그 방법이 간단함을 알 수 있었다. 아래는 링크에 다양한 SNS에 대한 공유 솔루션이 나와있다. http://dev.epiloum.net/916 카카오톡은 조금더 복잡하기에 아래의 링크를 참조하면 된다. http://cocosoft.kr/350 (참고로 카카오톡 이미지 링크는 앞에 http:// 가 붙어져야 한다.자세한 사항은 아래의 링크를 참조하면 된다.) http://jsp-making.tistory.com/326 2017. 6. 23.
윈도우 팝업창 뛰우기 요즘에는 많이 사라지긴 했지만이전에는 광고를 위해서 팝업창을 많이 사용했었다.생각해보면 지금까지 웹을 사용하면서 팝업창을 구현해본적이 없는것 같다.하지만 최근에 팝업창을 구현할 일이 생겼다. 바로 SNS공유 기능을 만들어야 했는데,링크를 클릭했을때 대부분의 공유 페이지가 팝업형식의 창으로 뜨기 때문이었다.그래서 팝업창을 어떻게 띄우나 찾아보니 그 방법이 쉬웠다.아래의 링크에 팝업창을 어떻게 띄우는지 잘 정리되어 있다. http://it79.egloos.com/v/315528 2017. 6. 23.
webassembly에 대하여 작년 6월부터 webassembly에 대한 관심이 생겨서 지켜보고 있었다.webassembly란 간단하게 말해서 C, C++의 native 언어로 짠 프로그램을 웹에서도 동일한 속도로 돌려보겠다고 하는 프로젝트이다.그래서 순서는 먼저 C, C++로 코딩을 한 다음 컴파일을 통해 최종적으로 바이너리코드 비슷한 wasm 파일을 만든다.그리고 wasm 파일을 js의 함수를 통하여 웹에서 실행시켜준다.이렇게 실행시켜보면 웹에서도 엄청나게 빠르게 돌아가는 것을 볼 수 있다.그 속도차를 확연히 느낄수 있는 예제가 바로 아래 비디오 영상처리 앱 예제이다. https://d2jta7o2zej4pf.cloudfront.net/ 위 예제를 보고 정말 까무러치게 놀랐다.이젠 웹이서도 이런게 가능하구나 하고 말이다.지금 wa.. 2017. 6. 22.
survey.js validation 이벤트 사용하기 survey.js에는 다양한 이벤트 함수들이 존재한다.그중 최근 프로그램을 만드는데 필요할뻔했던 이벤트가 있어 소개하려한다. validation 이벤트인데, 본 이벤트를 통하여 어떠한 필드의 입력조건을 선택할 수 있으며,그 필드가 조건을 만족하지 못했을때 에러문구도 띄울수 있다.이러한 validation 이벤트는 아래의 링크에 예제와 함께 잘 정리되어 있다. http://surveyjs.org/examples/jquery/validators-standard/ (그런데 결론적으로 본 이벤트를 사용 안 하고 다른 방법으로 문제를 쉽게 해결하였다.ㅅ.) 2017. 6. 21.
synaptic.js 사용하기 최근 인공지능을 이용한 시각화를 구현해 보고자 synaptic.js 라이브러리를 이용해보았다.하면서 느낀건 예제가 많이 없다는 점과 뉴럴네트워크에 대한 개념이 약하다는 거였다. 그나마 쉬우면서도 잘 나와있는 예제가 아래의 두 링크다. http://progur.com/2016/09/how-to-create-and-use-neural-networks-in-javascript.html http://progur.com/2016/09/how-to-create-deep-neural-networks-in-javascript.html 하지만 애초에 개념이 없으니 라이브러리를 사용하는것에도 문제가 있다 생각하고,유튜브를 통해 뉴럴네트워크에 대한 강좌를 들어보았다. 아래는 그 강좌의 링크를 정리해 놓은 것이다.(생각보다 .. 2017. 6. 20.
무한스크롤 구현하기 최근 만들고 있는 웹사이트에서 메세지 확인페이지를 만드는 도중 무한스크롤 기능을 사용하고픈 마음이 생겼다.그래서 두려움과 떨리는 마음을 이끌고 구현 방법을 찾아보니 생각보다 어렵지 않아서 감사했다.ㅅ. 아래의 링크에 무한스크롤 구현방법이 간다하면서도 잘 나와있다. https://velopert.com/1890 2017. 6. 19.
GSAP 애니메이션 ease 옵션 GSAP는 ease 애니메이션 효과를 다양하게 쓸 수 있는 옵션을 제공해준다.먼저 아래의 링크를 보면 다양한 ease에 관련한 코드와 이미지를 서비스해주는 것을 볼 수 있다. https://greensock.com/ease-visualizer 본 서비스에서는 Power0, Power1, Power2, Power3, Power4, Back, Elastic, Bounce, Rough, SlowMo, Stepped, Circ, Expo, Sine, Custom의 객체을 제공하고 있으며,각각의 객체의 easeIn, easeOut, easeInOut 들은 각기 다른 결과를 보이게 된다.(결과는 그래프로 확인할 수 있다.) 아마 이러한 다양한 애니메이션 ease 옵션때문에 많은 사람들이 GSAP를 사용하지 않을까 .. 2017. 6. 14.
jquery autocomplete 의 초반 width값 조정 jquery autocomplete을 쓰다보면 초반에 input 텍스트 하고 select box의 길이가 맞지 않는경우가 종종 발생한다.이럴때 jquery를 써서 css를 수정한다 하여도 그 길이가 변하지 않는다.(아마 jquery autocomplete의 js가 우선적으로 적용되는거 같다.) 그래서 jquery autocomplete의 옵션을 쓰지 않고서는 본 select box의 스타일을 변경하기란 쉽지 않은데,다행이도 이 문제를 위해 open이라는 옵션을 제공해주고 있다. 자세한 사용 방법은 아래의 링크를 참고하면 된다. http://jsfiddle.net/salman/gP7Ns/ 2017. 6. 14.
GSAP 예제 사이트 GASP를 처음 접하는 분들은 본 라이브러리를 통해서 무엇을 할 수 있을지 궁금할 것이다.물론 HTML 애니메이션 라이브러리이지만 실질적으로 다른 라이브러리와 비교하여,사용하는 방법이라던지 성능의 차이가 궁금할 것이다. GASP를 쓰면서 동시에 구글링을 하다가 찾게 아래의 링크를 찾게 되었는데,본 링크를 통해서 앞서말한 궁금증을 어느정도 해결할 수 있었다. http://hwaba.nflint.com/lab/tween/ 관심이 있는 사람은 참고하면 좋다.ㅅ. 2017. 6. 12.

티스토리툴바