씹어먹는 블로그

자바스크립트 퀵메뉴를 만들어보자. 위 코드는 순수 자바스크립트 코드이지만,jquery를 이용해서 코딩하면 훨씬 간단히 구현할 수 있다.

워드프레스의 장점 중 하나는 ftp 기능이다. 워드프레스의 테마를 설치하거나 워드프레스 자체 버전을 업그레이드 할 때, 업데이트 버튼하나만 눌러주면 자동으로 업데이트 및 설치가 된다. 그러나 이 간편한 기능은 ftp서버가 설치되어 있다면 바로 사용 가능하지만, ssh로 파일전송을 하고있다면 서버에 ssh2 라이브러리를 추가로 설치해줘야만 사용이 가능하다. 빨간박스를 주목하자. 기본적으로 FTP를 사용할 수 있지만, SSH전송은 보이지 않는다. 우리는 이것을 아래 그림처럼 SSH2를 추가시켜서 사용하려 한다. SSH2가 추가되면, 위 그림 처럼 버튼만 눌러주면 자동으로 업데이트가 가능하다. 그럼 php 라이브러리인 libssh2 와 ssh2 를 설치 해 보도록 하자. 1. libssh2 설치다운로드 사이트..

안드로이드 앱을 앱스토어에 등록하려면 keystore 파일이 필요하다. 이 키스토어 파일은 인증서인데, IOS로 치자면 Production Certificate 와 같은거라고 보면 된다. 파일 생성하는 방법은 아주 간단하다. 순서를 알아보자. 1. 실행->cmd 2. key는 두가지 종류가 있다. 아래 설명을 보고 상황에 맞게 생성해서 사용하면 된다..keystore 와 .p12 파일 두가지로 생성 가능하다. .keystore는 일반적으로 네이티브앱으로 개발했을때 앱스토어 등록시 사용하게 되고,.p12 파일은 솔루션을 사용해서 빌드할때 사용된다. 대표적으로 Adobe DPS App Builder를 사용해서 앱을 빌드할 때 사용함. keytool -genkey -alias hi -keyalg RSA -va..

무료 SSL 로 이미 많이 알려진 StartSSL을 발급받고, 설치하는 방법을 알아보자. 조금 복잡할 수 있으나 순서대로 따라하기만 하면 그렇게 어렵진 않을것이다. 거두절미하고 방법을 써내려 가겠다. https://www.startssl.com/ 에 접속한다. No Kidding 100% FREE!!뻥안치고 무료란다. 대단하지 않은가!!하지만 100%라고 하기는 좀 그렇다.왜냐하면, 최초 SSL발급시에는 무료이지만, 해당 도메인을 삭제하려면 약 $30 을 지불해야한다.즉, 발급받은 KEY를 잃어버리거나 하는경우, 도메인을 삭제하고 다시 발급받으려면 $30 을 지불해야 한다는 이야기다.그러니까 실수가 없도록 해야 되겠다. 위 그림의 오른쪽 상단에 열쇠이미지(로그인) 을 눌러서 Sign-Up 을 누르게되면 ..

별도의 확장 프로그램을 설치하지 않고 유튜브 동영상을 다운받을 수 있는 방법이 있어서 소개한다. 어렵지 않으니 아래 순서로 천천히 하나씩 따라해보면 원하는 영상을 득(?) 할 수 있을 것이다. 1. 먼저 다운받고 싶은 유튭 영상으로 접속한다. 2. 해당 주소를 즐겨찾기 한다. 3. 즐겨찾기 된 목록 우클릭 -> 속성 (크롬일때는 우클릭->수정) 4. URL 부분(아래그림 중)에 javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://userscripts.org/scripts/source/25105.user.js'})(); 위 소스를 그대로 복사해서 삽입 후 확인. 5. 해당 유튜브 페이지 새..

기본적으로 자바스크립트에서 number_format 을 지원하지 않기 때문에 사용자 정의 함수를 만들어서 사용할 수 있다. 결과값:

min-width 와 max-width 에 대해 알아보자. - min-width브라우저의 크기가 줄어들어도, min-width 크기의 이하로는 해당 오브젝트가 줄어들지 않게 설정한다. 예제 ) 위 소스를 실행해보면 아래와 같이 500px 에 맞춰서 red line 이 생성될 것이다. 위 이미지를 보면, 브라우저 크기가 해당 오브젝트 크기보다 크기 때문에 스크롤이 생기지 않는다. 위 이미지처럼 브라우저 크기를 줄이게 되면, 해당 오브젝트 크기보다 작아지는 시점부터 스크롤이 생긴다. - max-width해당 오브젝트 안에 들어있는 내용들의 크기가 max-width를 벗어나지 않도록 설정한다. 예제 ) The maximum width of this paragraph is set to 100px.... 위 처럼..

서버를 운영하다 보면 서버의 시간을 설정해야 할 때가 있을 것이다. 현재 시간을 설정하고 동기화 하는 방법을 알아보자. - clock : CMOS 시간 확인 및 설정 # clock -r // CMOS 시간 확인 # clock -w // CMOS 시간을 리눅스 시스템 시간으로 동기화 # clock -s // 리눅스 시스템 시간을 CMOS 시간으로 동기화 - date : 시스템 시간 확인 및 설정 시간 확인 # date // 시스템 시간 확인 시간 설정 # date MMDDhhmmYY // 월 일 시간 분 년도 시간 동기화 # rdate -s time.bora.net // 리눅스 시스템 시간 동기화 보통 # rdate -s time.bora.net # clock -w 위 형식으로 많이 사용함.

외부 사이트의 내용을 가져올떄 사용할 수 있는 클래스가 있다. 바로 snoopy class 이다. 사용법은 이러하다. 위 소스의 결과는 이러하다. 위 소스의 결과는 이러하다. 이외에도 여러가지 기능의 함수를 사용할 수 있다. //링크값만 긁어오기 $snoopy->fetchlinks("http://www.daum.net/"); //폼 submit$submit_url = "http://www.daum.net/submit.html";$submit_vars["a"] = "aValue";$submit_vars["b"] = "bValue";$submit_vars["c"] = "cValue"; $snoopy->submit($submit_url,$submit_vars); //폼 값만 긁어오기$snoopy->fetchf..

jQuery 로 Drop&Down 메뉴를 만들어보자. jquery와, dropdown.js 파일을 참조하면 쉽게 구현할 수 있다. 예제 : 1. 자바스크립트 선택 : 2. CSS/HTML 선택 : 3. 플래시 선택 : 자바스크립트 선택 메뉴/네비게이션 이미지/갤러리 텍스트/링크 날짜/시계/계산 스크롤 CSS / HTML 선택 메뉴 디자인 버튼/링크 레이아웃/박스 폼 디자인 이미지/텍스트 플래시 선택 이미지/갤러리 템플릿 색상/그림그리기 멀티미디어 파티클 파일 다운로드 :

CSS3 에서는 마스크기능도 지원한다.mask속성에 대해 알아보자. -webkit-mask (background)-webkit-mask-attachment (background-attachment)-webkit-mask-box-image-webkit-mask-clip (background-clip)-webkit-mask-composite-webkit-mask-image (background-image)-webkit-mask-origin (background-origin)-webkit-mask-position (background-position)-webkit-mask-position-x-webkit-mask-position-y-webkit-mask-repeat (background-repeat)-webk..

iScroll 은 여러모로 유용하게 사용된다.특히, 요즘 유행하는 parallax scroll 을 쉽게 제작하려면 빼먹을 수 없는 라이브러리이다.본론으로 들어가서, iScroll 을 사용하다 보면 스크롤의 현재 위치를 가져와야 할 때가 있을 것이다.onScrollEnd 메소드처럼 기본적으로 제공하는 getScroll 메소드는 없다.결론은, 메소드를 수동으로 추가해서 사용할 수 있다.방법은 이러하다. iscroll.js 파일에 scrollTo: function (x, y, time, relative) {var that = this,step = x,i, l; that.stop(); if (!step.length) step = [{ x: x, y: y, time: time, relative: relative ..

CSS 커서 종류별 모음 cursor: auto (uses what is set by user) cursor: crosshair (should produce a cross) cursor: default (cursor remains as it is) cursor: e-resize (arrow pointing right) cursor: hand (the traditional pointing hand) cursor: help (a Question Mark should appear) cursor: move (a cross with arrows on the tips) cursor: n-resize (an arrow pointing north or up) cursor: ne-resize (an arrow point..

jquery-ui 에는 많은 기능들이 들어가있다.Draggable, Droppable, Resizable, Selectable, Sortable.. 등등 엄청 많다.이것들을 응용하면 무한하게 결과물을 만들어낼 수 있다. jquery-ui 사이트 : http://jqueryui.com/오.. 캡쳐뜰라고 화면 줄였는데, 반응형웹으로 구성되어 있다. jquery-ui 에서 가장 많이 쓰이는 기능은 Draggable과 Droppable 이라 할 수 있겠다.Droppable 예제 : http://jqueryui.com/droppable/ 이렇게 마우스로 테스트 해볼 수 있게 예제가 마련되어 있다.Droppable 이외에도 많은 기능들에 대한 예제들이 있으니 직접 방문해보기를 권한다. 자, 그러나 요즘은 모바일 기..

기본적으로 페이스북 공유기능을 사용하려면 이렇게 사용하면 된다. 위 형식으로 사용하게 되면 해당페이지 코딩 중, 가장 강조되는 태그를 가져와서 임의로 대표이미지 등을 사용한다. 타이틀이나 설명을 함께 보내고 싶으면 메타태그를 이용하면 된다. 이렇게 페이지에 코딩해주면 share.php로 넘어갈때 위 정보가 함께 넘어간다. 추가로, share 페이지는 캐싱되기 때문에 같은 URL에서는 계속 같은 정보를 불러온다. (이것땜에 테스트할때 고생함 -_-) meta태그 내용 수정을 하고 적용해도 젤 첨에 적용된 내용들이 캐시되어 있어서 처음 내용을 불러온다는 얘기. 이것은 한달에 한번정도 갱신이 된다. 그러나 이렇게만 만들어놓으면 사용자들이 테스트할때 엄청 불편하다. 그래서 찾아보니, 수동으로 갱신하는 서비스도 ..