본문 바로가기

[IT/Programming]

Getting Data from Google Spreadsheet or Excel Getting Data from Google Spreadsheet or Excel 작성중. Excel 같은 형태로 data를 관리하면 편할때가 많음. 뭐 프로그래밍에 익숙한 분들이라면 SQL 같은걸 이용할수도 있겠지만, 간단한 데이터의 경우 이런것보다 간단하게 excel이나 google spreadsheet 같은 것을 이용하는 것이 훨씬 간편하고 좋음. 그런데 이 data를 인터넷에서 잘 보여주고 싶을때는 excel이 아닌 html / javascript array / JSON (JavaScript Object Notation) 형태로 편집을 해줘야 할텐데... 엑셀이나 google spreadsheet의 데이터를 html로 편집 가능한 형태로 변환해 봅시다. Table of Contents Copy a.. 더보기
HTML event handler # HTML event handler HTML event handler. Javascript/jQuery 로 HTML 에서 일어나는 여러가지 event 들을 처리해서 interactive 한 페이지를 만들 수 있음. 그런데 헷갈리는 것들이 많고, 어떤 event 들이 있는지도 다 기억하기 힘들어서 정리하는 중. ## PH 2016-02-01 : Smart phone touch event 관련 정리. 2015-12-10 : 조금 더 정리. 2014? : First posting. ## TOC ## Mouse and Touch event ### On click event (getting event position) ```[#mouse-event-result.scrollable] mouse-event-resu.. 더보기
Javascript namespace or encapsulation Javascript namespace or encapsulation C, C#, C++, JAVA 등 에서의 "namespace, private variable, private method" 같은 효과들을 javascript에서 어떻게 비슷하게나마 구현할 수 있는지에 관한 이야기. (자세한 정리는 에서 보시길. 제대로 정리하기가 귀찮아서 -ㅇ-;;; 하더라도 천천히 나중에나 할듯.) (예전에 공부하면서 그냥 대충만 정리해 놓은것들이라;;; 여기선 정말 대충, 엉터리로 정리해놨으니 reference들 참고해서 공부하세요.) Closure란 특성을 이용하는 것인데... Garbage collection과도 관련이 있고... Closure란 단어가 너무 추상적인듯도... closure 특성이라고 많이들 이야기.. 더보기
움직이는 사진 gif 만들기 (GifCam.exe) # 움직이는 사진 gif 만들기 (GifCam.exe) 예전에 움직이는 사진 (gif 이미지) 만들고 싶어서, +어떻게 만드는지 궁금해서 검색해봤을때는 포토샾을 사용해야 한다던지 하는 어려운 방법밖에 못찾았어서 귀찮고, 배우기 힘들어서 그만뒀었는데, 최근에 gifCam 이라고 가볍고 사용법이 간단한 프로그램을 찾아서 정리 및 홍보하려고 글 작성. 꿀캠 (Honey cam) 이란 프로그램도 있었구나 . 이건 오래된 프로그램 같은데 왜 예전에 검색할때 못찾았을까나;;; 이건 WebM, WebP 영상 (gif 랑 비슷하지만 img 가 아니라 video. 용량면에서 1/10 정도라는듯? 그런데 다른 video format 도 gif 비해서는 1/10 정도 아닌가??? 이걸 잘 모르겄네;ㅋ 소리없는 영상들도 gi.. 더보기
반응형 웹 만들기 (Responsible/Scalable web design with css media query) # 반응형 웹 만들기 (Responsible/Scalable web design with css media query) 기본적으로 어느 인터넷 브라우저에서든 Ctrl+mouse wheel 을 하면 scale 을 바꿀 수 있음. Chrome 은 site 별로 이 scale 도 저장해놔서 나중에 왔을때도 같은 scale 로 web-page 를 볼 수 있음. 개인적으로 국내 web page 들 90% 이상에서 글씨 크기가 눈나쁜 나한테는 너무 작아서... 항상 scale up 해서 보는 경향이... Chrome 기본 설정에서도 기본 글씨 크기를 바꿀 수 있긴 한듯. 그런데 어차피 사이트 제작자가 그냥 font 에서 layout 을 맞춰놓은 경우가 많아서.. 이걸 바꾸면 overflow 나고 이럴 경우도 많을듯.. 더보기
티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 sidebar에도 표시해 놨음. Posting History 2014-06-20: First Posting. Table of Contents 티스토리 기본 단축키 티스토리 기본 단축키 Q: 관리자 (Admin) A: 이전 글 S: 다음 글 Z: 최근에 올라온 글 X: 최근에 달린 댓글 C: 최근에 받은 트랙백 개인적으로 추가한 단축키 D: Previous Section F: Forward Section L: To the [Lists] 글쓰기에 들어가면 에디터에도 단축키들이 많은것 같지만, 난 HTML로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거.. 더보기
Customized styling of scroll bars in HTML Customized styling of scroll bars in HTML First posting at 2014-05-26 Cross browsing 문제가 심하긴 한듯. Table of Contents in Webkit browser (Chrome, Safari, Opera) 설정들은 참조해서... ▲ default scrollbars. ::-webkit-scrollbar{ /* 1 */ } ::-webkit-scrollbar-button{ /* 2 */ } ::-webkit-scrollbar-track{ /* 3 */ } ::-webkit-scrollbar-track-piece{ /* 4 */ } ::-webkit-scrollbar-thumb{ /* 5 */ } ::-webkit-scrollbar-.. 더보기
Improving web performance Improving web performance 그냥 구글에 "improving web performance" 검색하면 여러가지 잘 정리해놓은 페이지들이 나오는듯. References and Related Articles Six Revisions - 10 Ways to Improve Your Web Page Performance, 2008-12-22, by Jacob Gube.; 꽤나 잘 정리되어 있는듯. pamela fox's blog - Improving front page performance: removing images, 5 ways, 2014-01-30.; TinyPNG로 이미지 용량줄이기, Delay load로 scroll 되기 전의 load 줄이기. tutsplus - Best Practic.. 더보기