Webi Blog

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

Web/Plugin 3

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