본문 바로가기

BLOG/JavaScript

(16)
자바스크립트 프레임워크, 플러그인 소개 및 사이트 모음 개발하다보면 빠른 개발을 위해 플러그인 사용할 때가 많다. 그럴 때마다 괜찮은 플러그인을 하나하나 검색하고 테스트해보는 것이 쉽지가 않을 뿐더러 소중한 시간을 투자해야하기 때문에 불편함이 있다. 이 사이트는 js 플러그인 점유율과 많은 사용자가 어떤 플러그인을 사용하는지 모아놓은 사이트이다. https://www.javascripting.com/ JavaScripting.com - The Database of JavaScript Libraries Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to..
mobile nativescript site 모바일 네이티브 스크립트 모음 사이트 뷰, 앵귤러 순수 js 한눈에 볼 수 있는 사이트이다. 앱개발할 때 유용할듯하다. 또한 ui/ux 측면에서도 많은 도움이 될 것 같다. https://market.nativescript.org/?tab=samples&framework=all_frameworks&category=all_samples&_ga=2.133246413.2121815515.1549521396-834630839.1549521396 NativeScript Marketplace Discover high quality plugins, templates and tools for your NativeScript app market.nativescript.org
IE9 이하에서 placeholder 보이게하기 2가지 라이브러리 심플하게 디자인 하다보니 placeholder로 많이 input을 나타내곤한다. ie9이하부터는 placeholder가 보이지 않는다. http://jamesallardice.github.io/Placeholders.js/ Placeholders.js - An HTML5 placeholder attribute polyfill jamesallardice.github.io 나는 그냥 가벼운걸로 선택 오른쪽 마우스 - 다른 이름으로 저장 해서 받음 안에 를 넣어주기만하면 ie9이하에서도 보인다. ========= 또 다른 방법은 https://github.com/mathiasbynens/jquery-placeholder mathiasbynens/jquery-placeholder A jQuery plugin t..
input 비밀번호 보기/숨기기 (눈모양) 회사 사이트 만들면서 구글 로그인처럼 '눈모양이 있으면 좋겠다' 라는 이야기를 들었다. 눈모양은 폰트어썸에서 가져왔다. https://fontawesome.com/ 흐음..cdn같이 놓고 싶었는 따로 사이트에 안보이네요... 저는 5.0대 버전을 사용하고 있어요. 다운 받으셨다면 안에 넣어주세요. 다운받기 귀찮으시다면 일단 떠돌아 다니는 4.0버전 가지고 합시다. 비밀번호 html 은 이렇습니다. 4.0버전대는 i 부분의 클래스를 이렇게 변경 해주세요. css는 저는 이렇게 했는데 이쁘게 맞춰서 해주시면 됩니다. .input { position: relative; } .input .eyes { position: absolute; top: 0; bottom: 0; right: 0; margin: auto ..
email input 영어/숫자만 이메일에 유효한 특수문자 입력받게 하기 html코드 jquery 코드 $(function(){ $('"input[name=test]').on('keyup', function(event){ if (!(event.keyCode >=37 && event.keyCode
emailJS로 서버없이 메일전송 만들기3 벌써 마지막 글입니다 정독하느라 고생하셨어요! 템플릿도 만들고, 메일 서버도 연결했으니 이제 전송하는 방법만 알아보면 되겠네요! 지난번 html 파일을 열어보면 위의 이미지처럼 나옵니다. 자 이제 emailJS의 템플릿에 들어가서 보면 여기서의 to_name, from_name, message_html 이렇게 세개가 필요하네요. html 코드에 있는 input의 name을 받아오기 때문에 동일하게 해줍니다. Name From Name Message 이렇게 저는 코드를 수정했습니다. 이렇게 셋팅을 마치고 전송버튼을 누르면 템플릿에 적어놨던 To email로 메일이 전송되었을거예요! 다시한번 더 코드를 봅시다. Name From Name Message 만약에 전송이 안되었다면, document.getElem..
emailJS로 서버없이 메일전송 만들기2 저번 글에서 메일 템플릿 만들었다면 이번 글에서는 코드에 작성하는 방법을 알아볼 것입니다. email Docs를 가서 봅시다. https://www.emailjs.com/docs/ 저는 영알못이므로 구글의 힘을 빌려 봅니다. 유일하게 볼 줄 아는 영어는 코드 뿐... creating a contact form으로 들어가 줍니다. 빨간 박스 안에 있는 아이들이 중요한데요! 텍스트 에디터에 복붙해줍니다. Name Email Message 주석을 좀 달아놨어요! 저렇게 주석단 곳이 중요합니다! (다중요하다는 건가..?) 일단 회원가입하면 유저id를 받아요. 이 유저 id를 저기다 적어주시면 됩니다. 그리고 자바스크립트를 모르시는 분들이 있을 수도 있으니 contact-form은 하단에 태그의 id입니다. 그리..
emailJS로 서버없이 메일전송 만들기1 contact us에 메일전송 받고 싶은데 서버가 없으신 분들에게 많은 도움이 되는 글입니다. 단점은 무료 사용자는 월200건의 메일전송할 수 있다는 점(?)인데요. 그래도 포폴사이트 만드는 분들께는 많은 도움이될 것 같아요! (인기 스타가 아닌 이상은 200건의 메일이 오진 않겠죠..?) php jsp asp, nodejs....등등등 서버 언어를 통해 이메일 전송폼을 만들죠. 하지만.. 서버언어 1도 모르고.. 메일은 받고싶고... 카페24나 고도몰 같은 곳 이용하기는 싫고.. 이 글에는 서버가 없어도! 퍼블리싱으로만 메일 전송 가능하다는 것을 알려주고싶은 글입니다! (희망의 글이죠 ㅎㅎ) 자바스크립트로만 이메일 폼 만들기 emailJS에 회원가입 해주세요. - https://www.emailjs.c..