분류 전체보기

Pixelart Converter : 일반 그림을 도트 그래픽으로 바꿔주는 사이트

재미있는 사이트가 있어서 찾아왔습니다. 일반 그림을 도트 그래픽으로 바꾸었으면 좋겠다고 생각하시는 분들은 아래의 링크를 통해서 쉽게 그 생각을 이룰 수 있습니다. app.monopro.org/pixel/ ドット絵こんばーた 画像をモザイク化→色をクラスタリングしてドット絵っぽくします。 途切れ途切れの輪郭線とかノイズのドットが気になるときは平滑化するとマシになるかも。 質問とか要望とか言いたい app.monopro.org 처음에 링크를 통해서 들어가면 위와 같은 화면이 나옵니다. 사용법 OPEN IMAGE를 선택하여 사진을 고릅니다. 위의 사진의 옵션을 적당히 골라서 그림을 만들어봅시다. 저는 안드로메다 은하를 픽셀 이미지로 바꾸어 보았는데요. 위의 옵션대로 세팅한게 제일 예쁜것 같습니다. 하지만 picture by pic..

[자바스크립트] Date Range Picker : 기간 날짜 라이브러리

웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by wooncloud (@lomeiskk) on CodePen. 하지만 위의 방법은 첫 날짜가 마지막 날짜보다 이후의 날짜가 될 수 없고, 여러 가지 유효성 검사를 해야 하며, 직관적이지 않고 불편한 부분이 많습니다. 물론 제이쿼리 UI에서 제공하는 Date Picker를 보면 아래와 같이 기간을 설정할 수 있는 기능이 있습니다. 하지만 제 눈엔 예뻐 보이지 않네요. 여러분은 어떤가요? 이 디자인이 예쁘다면 사용하면 되겠지만, 그렇지 않으면 CSS를 싹 바꿔야 할지도 모릅니..

휴먼 픽토그램 2.0 : 이상한 무료 픽토그램 사이트

가끔 디자인 작업을 하면서 픽토그램 자료가 필요한 경우가 많습니다. 하지만 대부분 단순하거나 정형화된 픽토그램 밖에 없어서, 특이한 픽토그램이 필요할 때 "일러스트레이터를 배워야 하나.." 하고 생각하게 됩니다. 이번에 소개해드릴 사이트는 정말 특이한 픽토그램이 많이 있는 이상한 픽토그램 사이트입니다. 1. 사이트 링크 pictogram2.com/ human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) pictogram2.com 일본 웹 사이트입니다만 상단에 일본어 / 영어 중에 원하는 언어로 골라서 사이트를 이용할 수 있습니다. 하지만 한국어가 없으니 구글 번역을 사용하여 쓰시는 것을 추천드립니다. 2. 라이선스 및 금지사항 위의 사이트에서 게시한 라이센스 관련 내용은 여기서 볼 수 있..

어비폰트 : 유튜버 손글씨체를 폰트로 담았다!

유튜브 크리에이터 '어비' 라는 분께서 여러 유튜버 손글씨체를 폰트로 담은 어비폰트입니다. uhbeefont.com/ 어비폰트 : 저작권 무료 폰트 저작권 무료 폰트 끝판왕 by 어비 uhbeefont.com 예쁜 손글씨체를 원하면 이 홈페이지에서 다운받아 사용하면 좋을것 같습니다. 하지만 고딕체를 원하신다면 조용히 뒤로가기 버튼을 눌러주시면 되겠습니다. (손글씨체라 고딕체가 없습니다.) 참고로 어비폰트는 상업적 용도/변형 사용에도 무료입니다.

[자바스크립트] 날짜 형식 yyyy-MM-dd로 변환

function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); } 출처 : stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd Format JavaScript date as yyyy-mm-dd I have a date with the format ..

[웹디자인] 로딩 오버레이 Loading.js

웹사이트를 제작하다 보면 사용자의 요청을 처리하는 동안 사람들의 조작을 잠시 막아둘 필요가 있을 때가 종종 찾아옵니다. 그럴 때 페이지마다 오버레이용 CSS를 만들어두거나 각 컨트롤러에 readonly를 걸어두는 등 복잡한 일을 하죠. 이번에 소개해드릴 loading.js는 로딩 중이라는 표시를 보여주고, 특정 공간의 사용자 조작을 막을 수 있는 플러그인입니다. 1. loading.js 웹사이트 carlosbonetti.github.io/jquery-loading/ jquery-loading Themes and default styles You must include the dist/jquery.loading.css file in your page if you want to use the default ..

[자바스크립트] 날짜에 일수 더하기

자바스크립트 AddDays 문자열로 이루어진 날짜에 더하고 싶은 일 수를 넣으면 그 날만큼 지난 날짜로 반환 매개변수 - date : 예시, '2020-10-15' 매개변수 - days : date에서 더하고 싶은 날짜 (음수 가능) 반환 : date에서 days만큼 더한 날짜 출력 function AddDays(date, days) { // date는 문자열로 받는다 ex, '2020-10-15' var result = new Date(date); result.setDate(result.getDate() + days); return result; }

[자바스크립트] 변수에 빈값인지 체크하기

자바스크립트 IsNullOrWhiteSpace 매개변수에 들어온 값이 undefined나 null인지 빈 string ("")인지 체크합니다 매개변수 : 빈값을 체크하고 싶은 내용 반환 : undefined 이거나 null 이거나 빈 string ("") 이면 true / 내용이 있으면 false // input값이 공백이거나 빈값이 있는지 없는지 체크 function IsNullOrWhiteSpace(input) { if (typeof input === 'undefined' || input === null) return true; return input.replace(/\s/g, '').length < 1; }

Ostagram(오스타그램) 인공지능 사진합성을 해보자!

사진 2개를 주면 자동으로 합성하여 예술작품으로 만들어주는 인공지능이 있다는 것을 아시나요? Ostagram 오스타그램은 이런 재미있는 일을 해줍니다. 아래의 그림이 오스타그램 인공지능이 만든 재미있는 사진들입니다. 1번, 2번 사진이 원본 사진이고 3번이 합성사진입니다. 신기하지 않은가요? 어떻게 인공지능이 이렇게 예쁘게 그림을 합성할 수 있지? 생각이 드실 겁니다. 이 인공지능은 특별한 사람이 쓸 수 있는 것이 아닌 누구나 사용할 수 있습니다. 여러분도 쉽게 예쁜 사진 만들어보시지 않으시겠어요? Ostagram 사용방법을 알려드리겠습니다. 1. 사이트 이동 www.ostagram.me/ Ostagram www.ostagram.me 어마어마한 신이 지키고 있는 느낌의 이 사이트.. 오스타그램 링크입니다..