본문 바로가기

전체 글266

email 인증하기 회원가입시 이메일 인증을 위해서 mailgun이라는 서비스를 사용해 보았다.아래는 사용방법에 관련한 동영상이다. https://www.youtube.com/watch?v=KbOF7k6mSRQ 개인적으로 DNS record를 등록하는 인증 과정에서 많은 시간이 걸렸는데,기관 도메인을 사용하는게 아니라 회사가 도메인을 직접 운영하고 있어 담장자와 대화하며 문제를 풀어나가는 시간이 좀 걸렸다.하지만 인증절차만 거치면 매우 좋은 서비스임을 알 수 있었다. 2017. 5. 16.
무료 이미지 사이트 2 이전에 무료 이미지 사이트를 정리해서 올렸었는데, 나보다 더 정리를 잘해놓은 사이트가 있어 공유한다. https://www.typeform.com/blog/ask-awesomely/free-pics/ 2017. 5. 16.
node.js 파일을 업로드하고 해당 파일을 서버에 저장하는 방법 최근 사이트에서 회원들의 프로필 사진을 업로드 하여 서버에 저장하는 기능을 구현하는 작업이 필요했다.조금 부끄럽지만 이전에 업로드 기능을 사용해본적이 없기에 이번에 그 기능을 구현하느라 조금 고생을 하였다.생각외로 방법은 간단하였다. https://www.youtube.com/watch?v=2jwNNFbs4ic 자세한 방법는 본 동영상에 잘 설명되어 있다.물론 방법은 잘 설명되어 있지만 실제 해보게 되면 여러가지 난관에 부딫히게 된다. 첫번째 난관은 어떻게 업로드 파일의 데이터를 받아올 것인가에 대한 문제였다.동영상에서는 form 형식 안에서 submit 이벤트가 발생할때 그에 따라 데이터를 보내주지만나는 따로 만들어준 특정 버튼을 클릭했을때 데이터를 보내주게 만들었다. 문제는 전자는 알아서 데이터 형식.. 2017. 5. 15.
google captcha 반응형 제작방법 google captcha를 쓰면 문제점이 하나 있는데,captcha가 고정형 사이즈라서 스마트 폰에서 그 디자인이 깨지게 된다는 점이다. 그 문제를 해결하기 위해 captcha를 반응형으로 제작해야 한다.하지만 captcha는 iframe으로 불러오는것이기 때문에 % 값을 적용하는 것이 불가능하다.고로 transfrom의 scale 방식을 써서 그 사이즈를 줄여주게 된다. 아래는 그 방법을 자세히 설명한 링크이다. https://geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/ 2017. 5. 12.
div태그 안의 이미지 가운데 정렬하기 div를 hidden으로 설정해 놓고 그 안에 img 태그를 뿌리는 방법은우리가 흔히 섬네일 이미지를 보여주려고 할때 많이 사용한다.이때 이미지를 수평, 수직 가운데 정렬하고 싶은데 그 방법은 간단하다.아래와 같은 CSS 속성을 이미지에 부여해주면 된다. position: absolute;top: 0; bottom: 0;left:0; right: 0;margin: auto; 이 방법은 흔히 콘텐츠를 정 가운데 배치할때 많이 쓰는 방법인데,섬네일 이미지 가운데 정렬에서도 사용 가능함을 최근 알게 되었다. 2017. 5. 1.
cookie를 이용하여 로그인시 아이디 비밀번호 저장 기능 구현 로그인 편의성을 위해 많은 사이트들에서는 사용자의 로그인 아이디와 비번을 쿠키로 기억해 놓았다가 뿌려주게 된다.최근 본 기능을 구현하게 되었는데, 아래의 블로그에 잘 설명되어 있었다. http://kkotkkio.tistory.com/64 2017. 4. 27.
CSS의 background 속성을 통한 반응형 스프라이트 애니메이션 구현 CSS를 통해 스프라이트 애니메이션을 구현하고 싶을때 주로 background 속성을 사용하게 된다.그런데 지금까지 반응형 스프라이트 애니메이션을 본적이 없어서 한번 codepen에서 찾아보게 되었다.그곳에는 여러가지 방법이 있었는데, 그중 가장 좋은 방법인 것을 찾아 애니메이션을 구현해 보았다.예제는 아래 링크를 참고하면 된다. http://codepen.io/tombennet/pen/OPombY 구현하면서 정말 확실히 알아야 했던것은 바로 background 속성의 개념이다.특히나 background-size에 관한 속성이 있는데,본 속성을 제대로 설정해놓고 시작해야 스프라이트 애니메이션을 구현 가능하다.먼저 반응형은 창에 크기에 따라 반응해야 하니까 % 속성을 사용해야 한다. 여기서 우리는 back.. 2017. 4. 24.
jquery로 이벤트 끄고 켜기 가끔 버튼 UI를 비활성화 시켜야 할 순간이 있다.예를 들어 동의서 페이지를 구현할때 스크롤을 다 내릴때까지 버튼을 비활성화 시키는 경우가 있을 것이다.본 기능은 jquery의 on, off 함수로 쉽게 구현할 수 있다.자세한 설명은 아래 링크에 잘 나와 있다. http://makitweb.com/enable-and-disable-event-element-jquery/ 2017. 4. 21.
일러스트에서 svg를 html 형식으로 저장하기 일러스트에서 SVG을 출력시켜서 CSS 조작을 통한 에니메이션을 만들고 싶을때,해당 SVG가 id와 class로 구조화 되어있으면 매우 편리하다.감사하게도 일러스트에서는 그러한 저장 옵션을 지원해주고 있다. https://codingwithspike.wordpress.com/2016/05/01/css-styling-illustrator-svgs/ 위의 링크에서 id와 class를 일러스트에서 설정하고 출력하는 방법이 자세히 소개되어 있다.주의할 점은 class의 이름은 우리가 직접 설정할 수 없다고 한다.(아마 버전업이나 업데이트 되면서 바뀐듯 하다.) 나는 출력할때 형식은 아래와 같이 하였다. 그리고 그것의 코드를 복붙하여 CSS 와 SVG 태그의 영역만 나누어 사용해 주고 나머지는 CSS로 조작하는 .. 2017. 4. 20.

티스토리툴바