북마클릿 만들고 북마크(즐겨찾기)에 올리기(예제 : 브라우저 사이즈 표시)
북마클릿 만들고 북마크(즐겨찾기)에 올리기(예제 : 브라우저 사이즈 표시)
자바스크립트를 어느 정도 이해하고 간단한 스크립트를 작성할 수있다면 브라우저에서 원하는 기능을 구현할 수있는 스크립트를 북마크에 저장하고 활용할 수 있습니다. 본 글은 간단한 스크립트를 사용해 열린 브라우저 창의 화면 크기를 표시하는 북마클릿을 만들고 북마크에 올리는 과정을 기술합니다. 제이퀴리 이용은 생략했습니다.
▶ 북마클릿(bookmarklet)
북마클릿은 URL 주소란에 자바스크립트를 등록해둔 북마크를 말하며 bookmark+applet을 줄여 bookmarklet이라 합니다. 흔히 작은 사이즈를 말하지만 큰 사이즈의 북마클릿도 있습니다.
▶ 북마클릿 만들기 개요**
북마클릿용 자바스크립트
를 만듭니다.- 스크립트는 열려있는 창의 요소에 지장을 주지않기 위해
익명 자동 호출 function(anonymous self invoking function)
형식으로 작성합니다.
--- 작성된 스크립트 ---
})()
- 자바스크립트를 압축합니다.
- 압축된 자바스크립트를
uri 문자
로 인코딩합니다.(%인코딩) - 링크 테그 만들어서 북마크로 드래그합니다.
<a href="자바스크립트"></a>
링크 태그를 만듭니다.- 작성된 링크 태그를 북마크바에 드래그하여 북마크에 추가합니다.
- 또는 수동으로 북마크를 만들고
url 주소란
에 작성된북마클릿 코드
를 붙혀놓고 북마크에 추가 등록합니다.
▶ 위의 내용대로 열려 있는 브러우저의 화면 사이즈를 표시하는 북마클릿을 만들어 보겠습니다.
▶ 브라우저 화면 사이즈 북마클릿 만들기
▶1. 화면사이즈 구하는 자바스크립트
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; alert("inner width: w + " inner height: " + h);
▶2. 익명 자동 호출 function(anonymous self invoking function)
형식에 맞게 수정합니다. 본 란은 textarea입니다. 다른 스크립트를 원하면 function 내에 스크립트를 입력할 수있습니다.
▶3. 스크립트를 압축합니다. 위의 압축 버튼은 줄 바꿈 문자와 해당 줄의 앞, 뒤 공백만 제거하는데 확실한 압축을 원하면 min.js
만드는 이 사이트에서 하시고 복사본을 아래에 붙여 놓으세요. 자바스크립트 compress(mi.js)
여러 줄로 보이지만 실제는 한 줄입니다.
▶4. 압축된 스크립트를 uri 문자로 인코딩
하고 javascript:
문구를 삽입하여 북마클릿용 자바스크립트 코드를 만듭니다.
여러 줄로 보이지만 실제는 한 줄입니다.
▶5. 북마클릿 스크립트로 아래의 링크 코드 주소줄(href
)에 넣어 링크코드를 만듭니다.
(1) 단계에 따라 만든 링크코드입니다 .
[ 브라우저 사이즈 링크 ]
(2) 한 단계로 만드는 링크코드입니다.
위의 (1),(2) 중 실행돼서 만들어진 링크코드를 클릭하면 아래와 같이 브라우저 사이즈 창이 나옵니다.
위의 링크 코드를 아래의 방법으로 북마크에 올립니다.
▶ 북마클릿 코드 북마크에 올리기
자주 쓰는 북마크로 간주하여 북마크바
또는 즐겨찾기 모음(ie)
에 등록하는 것으로 하겠습니다.
- 크롬, 파이어폭스에서 북마크바가 보이지 않으면 설정 메뉴에서
북마크바 표시
를 선택합니다. - ie에서는 상단 메뉴바 여백을 좌클릭하여 나오는 메뉴에서
즐겨찾기 모음
을 선택합니다.
▶ 링크 태그를 마우스 좌클릭한 상태로 북마크바로 드래그
합니다.(크롬, 파이어폭스, ie)
▶ 링크 태그를 마우스 좌클릭
하여 나오는 컨텍스트 메뉴에 따라 북마크에 저장합니다.
-
파이어폭스
링크를 북마크에 추가
: 링크코드를 좌클릭하고 나오는 메뉴에서 링크를 북마크에 추가 선택 후 내용을 확인하고 저장을 합니다.링크 주소 복사
: 링크 주소 복사 후 북마크바 여백을 우클릭 후 새 북마크를 선택 북마크 이름을 변경하고 주소줄에 복사된 링크 주소를 붙혀넣습니다. 또는 붛혀넣기 선택후 표시된 북마크를 우클릭하여 속성에서 북마크 이름을 변경합니다.-
크롬: 링크코드를 우클릭한 후
링크 주소 복사
를 선택한 후 북마크바 여백을 우클릭하고 붙혀넣기 합니다. 표시된 북마크를 우클릭 수정을 선택하고 북마크 이름을 변경합니다. -
인터넷익스플로러(ie)
- 열려 있는 페이지를 상단 매뉴바에서
즐겨 찾기=>즐겨찾기 모음에 추가
하면 즐겨찾기모음에 열려 있는 페이지가 저장됩니다. - 즐겨찾기 모음에 있는 현재 페이지 항목을 마우스 우클릭한 후 나오는 메뉴에서
속성
을 클릭하고웹문서탭의 URL난
에 복사된 바로가기를 붙혀놓고일반탭에서 이름을 변경
하고 확인을 선택합니다.
- 열려 있는 페이지를 상단 매뉴바에서
▶ 모바일 안드로이드에서는 크롬의 경우 북마크된 북마클릿을 주소창에 북마클릿 명을 입력 하고 주소줄 아래 나오는 동명의 검색어를 실행시킵니다.
▶ 아래는 참고한 웹페이지 링크입니다. 내용이 좀 오래된 내용이지만 잘 정리된 것같고 내용 중 북마클릿에 포함하는 Jquery 버전이 낮습니다.
▶ 여러 페이지에서 쓸만한 북마클릿을 소개하는데 오래돼서 그런지 작동이 잘 안되는 북마클릿이 많이 있네요.
* Bookmarklet Creator with Script Includer
* Bookmarklet Generator
* Create Bookmarklets - The Right Way
* Bookmarklet Maker