Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/Plugin 5

웹페이지 화면 이미지로 저장하기 | html2cavas 플러그인

웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다. 스크린 캡처를 이용하시는게 좋을 듯 합니다. 캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다. 중요한건 추가적인 개발 비용도 안든다 하지만 스크린 캡쳐만으로 해결할 수 없고 이미지로 저장해야 할 수밖에 없는 상황이 왔다. 나 : 영수증 프린트 출력이 PC버전에는 되는데 모바일에서는 안돼요. 뺄까요? 클라이언트 : 음..모바일에서는 이미지 저장으로 하면 안 될까요? 나 : 네.... 잘 사용하지 않는 플러그인이지만 어쩔 ..

Web/Plugin 2022.05.11

스팸글은 이제 그만!! PHP로 구글 reCaptcha v3 사용하기

상담 신청 혹은 문의를 받기 위해 홈페이지에 간단하게 폼을 만들어 놓으면 지긋지긋하게 스팸글이 올라오곤 합니다. 그래서 캡챠 기능을 많이 이용합니다. 캡챠 기능이 너무 불편해요. 저는 캡챠 기능이 사실 너무 싫어요ㅠ 스팸글을 막기 위해서는 어쩔 수 없다는 생각도 합니다. 글자를 보고 입력을 해야하는데 그나마 보기 편한 곳은 한 번에 통과하는 경우도 있지만 보기 힘들게 해 놓은 곳은 5번 이상을 시도해도 실패한 적이 많아요. 하지만 구글에서 서비스 중인 reCaptcha v3를 사용하면 이런 문제를 해결할 수 있습니다. 어떠한 입력도 없이 구글이 판단하는 사용자의 점수를 기준으로 스팸글인지 판단해서 막아주는 서비스 입니다. 점수가 어떻게 계산되는지는 모르겠지만 작동 방식을 보면 구글이 보내주는 키값을 함께..

Web/Plugin 2022.02.16

OWL Carousel로 슬라이드를 간편하게 만들기

안녕하세요 :) 오늘은 오픈소스인 그누보드에 기본적으로 내장되어 있는 "owlcarousel" 플러그인 사용법을 알아보도록 하겠습니다. 만약에 그누보드에 없거나 별도로 개발을 하실 경우는 https://owlcarousel2.github.io/OwlCarousel2/ 사이트에서 직접 다운로드를 받아 사용하실 수 있습니다. :) 우선 그누보드 기준으로 플러그인의 JS 위치와 소스 위치를 알려드리겠습니다. 위에 보이는 사진처럼 owl 플러그인은 js 폴더안에 "owlcarousel" 이름으로 있습니다. 그누보드에서는 "head.sub.php"파일에태그안에서 확인해보시면 됩니다. 만약 구버전이거나 적용이 되어 있지 않다면 위 사진과 같이 적용을 하시면 되겠습니다. 모든 준비가 완료되었다면 실제 슬라이드를 적용..

Web/Plugin 2021.08.30

jQuery의 Datepicker는 뭔가 아쉬워, 시간이 필요해 | DateTimePicker

jQuery의 datepicker를 아시나요? jQueryui에서 input form에서 날짜를 아주 쉽게 선택할 수 있도록 해주는 아주 고마운 녀석이죠..... 바로 이건데요~ 저기 input 박스를 클릭하면 이렇게 날짜를 선택할수 있게 나옵니다. 하지만...이름 그대로 날짜만 선택할 수 있어요.... 가끔 시간도 같이 선택해줘야 할때가 있는데.... 그래서 다른 플러그인을 써야합니다~ 바로 datetimepicker 죠~ 이름에서부터 알 수 있듯이 날짜와 시간을 선택할 수 있게 해주는 플러그인 입니다~ https://xdsoft.net/jqplugins/datetimepicker/ datetimepicker 플러그인을 다운로드 받을수 있는 사이트 주소입니다. 상단에 보이는 download (zip) ..

Web/Plugin 2021.08.27

구글 코드 하이라이터 prettyfy를 이용해 코드를 컬러풀하게 바꿔보아요~

저처럼 개발, 코딩 블로그 운영하시는 분들이나 사이트 운영하시는 분들 많으시죠? 특히 요즘은 티스토리, 블로거 같은 HTML 편집이 자유로운 블로그를 운영하시는 분들이 많은데 소스코드를 입력하실 때 어떻게 쓰시나요?? 그냥 텍스트로 입력하시나요? 위처럼 그냥 텍스트로만 입력하게 되면 너무 가독성도 떨어지고 뭔가 딱딱해 보이지 않나요?? 어렵고 힘들게 느껴질 수 있는 프로그램인데 그래도 컬러감 있게 넣어주면 보기라도 좋잖아요? 😂 제가 소개할 코드 하이라이터는 구글의 Prettify입니다. 구글의 Prettify를 소개하기 전에 몇 개만 소개해드리겠습니다. 1. 제일 많이 알려져 있는 SyntaxHighlighter http:// http://alexgorbatchev.com/SyntaxHighlighte..

Web/Plugin 2021.08.26