웹 코딩/그 외7 clipboard.js - 클립보드로 복사하기 웹 페이지 개발 중 페이지 내 텍스트를 클립보드로 복사하는 기능이 필요할 때, 간단히 가져다 쓸 수 있는 라이브러리를 소개합니다. 추억을 거슬러 가보면... 웹 초창기엔 플래시를 쓰기도 했고, 한동안 화면밖에 textarea를 만들어 텍스트 선택 후 복사시키는 꼼수를 쓰기도 했고, 요새는 클립보드에 직접 접근하는 방법도 있습니다만... 이게 안되는 걸 되게하는 건 아니지만 별거 아닌 간단한 기능 때문에 코드에 시간을 투자하는 것 보단 깔끔하면서 가볍고 이미 검증된 라이브러리를 쓰는게 속 편하거든요. ^^ 설치 및 사용: 1. 사이트에서 소스를 다운 받거나 cdn 서비스에서 제공되는 js 파일을 페이지의 body 하단에 추가합니다. 2. 복사 기능을 담당할 버튼의 선택자를 전달하며 스크립트를 실행합니다. .. 2020. 10. 7. placeholder - 임시 이미지 제공 서비스 위 이미지는 https://via.placeholder.com/150/FFFF00/000000 로 만들었습니다. 테스트용 이미지가 필요하거나, 기타 웹 작업할 때, placeholder라고 하죠? 임시 이미지들을 제공하는 유용한 서비스입니다. 급히 텍스트를 이미지로 넣어야 할 때도 쓸 수 있습니다. 주소만 기억했다가 2020. 9. 23. 현재 접속자 현황 - whos.amung.us 오늘 얼마나 놀러들 오셨나~ 이번주는 방문자가 몇이나 되나~ 늘 관심이 가는 내용이죠? 그러나 이런것 외에도... 지금 당장 롸잇나우 몇명이나 내 블로그를 보고 있지?!! 이런게 궁금할 때 쓸 수 있는 무료 서비스(위젯)가 있어 소개합니다. whos.amung.us - free real-time stats! Free real-time analytics for your website or blog! No account required. Customize your free widget and get started! See where your visitors are from and what pages are most popular on your website. whos.amung.us 가입도 필요 없고, 설치.. 2020. 9. 14. microlight.js - 독특한 단색 코드 강조 문법 강조계의 이단아!! (아.. 너무 올드한 소개 멘트네요..) 암튼, highlight.js 및 여러 코드 문법 강조 라이브러리들과는 많이 다른! 마이크로라이트! microlight.js 를 소개합니다. 색상은 단색으로 하지만 그림자와 투명도를 이용해 키워드들만 눈에 잘 보이게 강조해줍니다. 코드 언어도 지정해줄 필요 없이 왠만해선 다 알아서 중요 단어들만 강조해줍니다. 그래서 여러 언어가 섞여 있어도 됩니다. 사이트의 디자인 테마에 따라 이런 단색 강조도 필요할 때가 있을 것 같네요. 소스도 엄청 가볍고 CSS도 딱히 필요 없습니다. 제작자 홈: http://asvd.github.io/microlight/ microlight.js (2.2k) Highlights code in any programm.. 2020. 8. 25. pixi.js - 웹에서 쉽게 애니메이션 구현하기 플래시를 대체한다고 해야 할까... 웹에서 Canvas 위에 각종 애니메이션을 쉽게 구현하게 해주는 툴? The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. 나도 아직 많이 써보진 못해서 설명은 조금 어려우나 데모들이나 실제 사용중인 사이트들의 결과물을 보면 대단한 넘인 걸 느낄 수 있음 HTML5로 게임을 만들거나, 애니메이션을 만들거나, 기능성 배너를 만들거나 그 외 여러가지 활용도가 있음 (예전에 플래시로 할 수 있는 건 거의 다 가능한 듯) html + css + js 로 할 수 있는 그 이상의 것들... (꼭 이상이 아니라도 좀 더 편하게...) 구현.. 2020. 8. 10. 스크롤 활용도 극강 UP! - 스크롤매직 (ScrollMagic) 스크롤에 따라 페이지에 다양한 액션을 주고 싶을때! 이게 생각으로 쉬운데 실제 짜다보면 손도 많이가고 은근 복잡해지는 부분도 있다. 그럴땐 그런거 고민하는 시간에 탄탄하고 가벼운 플러그인이 있다면 냉큼 집어 쓰는게 진리! 데모 사이트 한번 둘러보시면 우와~ 하게 되고, 생각보다 훨씬 많은 활용도가 있음을 알게 됨 데모: http://scrollmagic.io/examples/index.html 다운로드 및 안내: http://scrollmagic.io/ (메인 페이지만으로도 데모 그 자체라는..ㅋ) 2020. 8. 7. CodeMirror - 최강 온라인 코드 에디터 내가 예제 만들때 종종쓰는 JSfiddle 이나 CodePen 같은 사이트나 각종 소스 입력이 가능한 곳곳에 쓰이는 에디터 (티스토리 스킨 편집도 이거 쓰고 있음) 예전에 모를때는 우와.. 이런거 어떻게 만들지? 막 궁금했다가 뭔지 알고 써보니 정말 좋더라는... 한때 이걸로 코드 연습 사이트도 만들었었는데 진짜 안정성과 기능에 많이 감탄했던 기억이 남 다운로드 및 사용법: https://codemirror.net/ 모두 영문이라 좀 그렇긴한데.. 옵션만 잘 이해하고 설정해주면 쉽게 사용할 수 있음 혹시 댓글로 질문 남기시면 아는 선에서 답변해 드림 ^^ 2020. 8. 6. 이전 1 다음
