포럼 내용이 있는 곳으로 건너뜀

사과나무 이야기 마당

Mac 사용자 정보 교류 마당 - AppleTree forums for Korean Mac users

로그인하지 않으셨습니다. 로그인 또는 가입해 주세요.

이곳은 Mac 관련 유용한 정보들을 모아 많은 분과 함께 공유하기 위해 운영되고 있습니다. 잠깐 들르시는 나그네라도 자유롭게 글을 올리시고 의견을 나누실 수 있습니다.

새 댓글 작성

새 댓글 작성

새 댓글을 작성합니다.

사용 가능: BBCode 이미지 그림 문자

양식을 전송하기 전에 (필수)라고 표시된 모든 항목을 입력해야만 합니다.

손님인 경우 필수로 요구되는 정보


필수 정보
글 설정 선택사항

글타래 내용 (최신 글 먼저)

8

Weekly Freebies: 15+ Useful Bookmarklets for Designers | Design Shack
쓸모가 있는 게 많군요.

7

YouTube에서 고해상도 HD 영상의 재생을 지원하기 시작했군요.
발빠르게도 재생되는 해당 HD 영상을 자동으로 내려받게 해주는 bookmarklet이 등장했습니다.

YouTube HD DL :

javascript:(function(){var%20myframe=document.createElement('iframe');var%20myurl='http://www.youtube.com/get_video?fmt=22&video_id='+swfArgs['video_id']+'&t='+swfArgs['t'];myframe.src=myurl;myframe.style.display='none';document.body.appendChild(myframe);})();void(0);

참고로 모든 YouTube 영상이 HD를 지원하는 것이 아니라서, 지원되는 영상만 내려받을 수 있습니다.
이럴 경우, 비교적 고해상도 영상을 아래의 bookmarklet으로 내려받을 수도 있습니다.

YouTube SD DL:

javascript:(function(){var%20myframe=document.createElement('iframe');var%20myurl='http://www.youtube.com/get_video?fmt=18&video_id='+swfArgs['video_id']+'&t='+swfArgs['t'];myframe.src=myurl;myframe.style.display='none';document.body.appendChild(myframe);})();void(0);

6

Web Development Bookmarklets - 웹 개발에 유용하게 쓰일 알짜배기 책갈피들이 모여있군요. 물론, 요샌 Firebug나 Web Inspector에서 대부분의 기능들을 사용할 수 있습니다만, 간단한 일에는 클릭만으로 원하는 기능을 수행할 수 있는 장점도 있겠지요.

5

jQuery JavaScript Library를 원하는 웹 페이지에다가 심어넣는 책갈피입니다.

javascript:var%20s=document.createElement('script');s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');document.body.appendChild(s);s.onload=function(){/*Your%20Code%20Here*/};void(s);

특정 웹 페이지에 심어놓고 Firefox 용 웹 개발 도구인 Firebug의 Console에서 원하는 jQuery 기능을 불러와서 바로 적용시켜 볼 수 있습니다.
사용 요령은 위 책갈피를 공개한 John Resig씨의 블로그에 있는 Hacking Digg With Firebug and jQuery라는 제목의 글에 있는 screencast에서 확인하실 수 있습니다.

위 책갈피는 jQuery를 불러온 후에 이를 비러 특정 웹 페이지에서 구현하고자 하는 자기만의 특정 Javascript 코드를 실행시킬 수 있게 수정할 수도 있답니다.

책갈피 속에 포함된 Javascript 라이브러리의 주소를 jQuery 말고 다른 Javascript 라이브러리들의 주소로 대치하면 더 손에 익은 개발 환경을 구현할 수도 있겠군요.

4

Microformats Bookmarklet - 선택하면 현 페이지에 있는 모든 hCardshCalendars를 포함하는 창이 나탸나고, 여기서 특정 항목을 선택하면.vcf 혹은 .ics 파일로 저장할 수 있게 됨.

del.icio.us에 현재 보이는 페이지를 책갈피 해두기 (코드에 있는 계정이름은 자기의 것으로 대신 넣어주어야 합니다) :

javascript:location.href='http://del.icio.us/계정이름?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)

3

Safari를 위한 유용한 도구들을 소개해 놓은 PimpMySafari에도 이 곳에 소개된 것들을 포함해서 추가로 여러 유용한 bookmarklet들이 소개되어 있군요. wink

2

RSS 신호에 걸린 글들을 읽다가 아주 기발한 아이디어에서 출발한 FormTextResizer bookmarklet 소개의 글이 눈에 띄어서 여기에도 달아둡니다.

가끔가다 댓글을 달거나 폼(forms) 항목들을 채울 때, 글자 항목들의 빈 칸이 입력 내용에 비해 너무 작게 느껴질 때가 있을 겁니다. 이럴 때 책갈피에 등록해 둔 FormTextResizer bookmarklet을 선택하면 실시간으로 원하는 textarea나 text field의 크기를 조절할 수 있게 됩니다. textarea의 경우, 상하좌우로 크기로 조절할 수 있고, text field의 경우에는 좌우 크기만 조절 가능합니다. 그리고 Safari에서는 커서가 폼 요소의 테두리 위에 위치할 때에만 크기 조절 커서로 바뀌게 된답니다.

bookmarklet으로의 사용은 아래의 코드를 복사해서 FormTextResizer의 이름으로 추가한 새로운 책갈피 항목의 주소 부분에 붙여두면 됩니다.

javascript:TxtRsz={formEl:null,adEv:function(t,ev,fn){if(typeof%20document.addEventListener!='undefined'){t.addEventListener(ev,fn,false)}else{t.attachEvent('on'+ev,fn)}},rmEv:function(t,ev,fn){if(typeof%20document.removeEventListener!='undefined'){t.removeEventListener(ev,fn,false)}else{t.detachEvent('on'+ev,fn)}},init:function(){var%20textareas=document.getElementsByTagName('textarea');for(var%20i=0;i%3Ctextareas.length;i++){textareas[i].style.cursor='se-resize'}var%20inputs=document.getElementsByTagName('input');for(var%20i=0;i%3Cinputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='e-resize'}}TxtRsz.adEv(document,'mousedown',TxtRsz.initResize)},initResize:function(event){if(typeof%20event=='undefined'){event=window.event}var%20target=event.target||event.srcElement;if(target.nodeName.toLowerCase()=='textarea'||(target.nodeName.toLowerCase()=='input'&&target.type=='text')){TxtRsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz.formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRsz.formEl.clientHeight;TxtRsz.formEl.startX=event.clientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.adEv(document,'mousemove',TxtRsz.resize);TxtRsz.adEv(document,'mouseup',TxtRsz.stopResize);try{event.preventDefault()}catch(e){}}},resize:function(event){if(typeof%20event=='undefined'){event=window.event}try{TxtRsz.formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+'px'}catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase()=='textarea'){TxtRsz.formEl.style.height=event.clientY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+'px'}},stopResize:function(event){TxtRsz.rmEv(document,'mousedown',TxtRsz.initResize);TxtRsz.rmEv(document,'mousemove',TxtRsz.resize);var%20textareas=document.getElementsByTagName('textarea');for(var%20i=0;i%3Ctextareas.length;i++){textareas[i].style.cursor='text'}var%20inputs=document.getElementsByTagName('input');for(var%20i=0;i%3Cinputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='text'}}}};TxtRsz.init();

자주 사용할 일은 없겠지만, 그래도 기발한 아이디어를 시작으로 해서 여러 적용 가능성들 중 하나의 훌륭한 본보기를 보는 것 같군요. cool

1

아래의 javescript들은 Safari 책갈피 막대의 책갈피 링크 주소에 저장해 놓고, 웹 페이지를 개발하는 데 유용하게 사용될 수 있는 작은 JavaScript로 된 책갈피 도구들(bookmarklets)입니다.

JavaScript 관련
Scripts 보기 - 현재의 페이지에 있거나, 혹은 연결되어 있는 모든 JavaScript들을 포함하고 있는 창을 새로 표시함(Framesets은 지원 안함).  document.all, document.layers 등과 같은 지원되지 않는 DOM 요청들을 확인할 경우 사용하십시오.

javascript:var%20jsArray%20=%20document.getElementsByTagName(%22script%22);%20var%20theWinref;%20var%20theHTML;%20var%20scriptObj;%20var%20frameURL;%20var%20frameObj;if(jsArray.length%20%3E%200)%20%7B%20theWinref%20=%20window.open('','_blank','width=320,height=255,toolbar=no,location=no,directories=no,status=yes,menubar=no,resizeable=yes');%20theWinref.document.write('%3Chtml%3E%3Chead%3E%3Ctitle%3E'%20+%20window.location.href%20+%20'%3C/title%3E%3C/head%3E%3Cbody%3E'+%20jsArray.length+'%20Script(s)%20Found:');%20theWinref.resizeTo(600,200);theWinref.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj%20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute(%22src%22))%7B%20frameURL%20=%20scriptObj.getAttribute(%22src%22);%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22%20via%20%22%20+%20frameURL%20+%20%22%3Cbr%3E%3Ciframe%20height='100%25'%20width='100%25'%20id='url%22+%20i%20+%20%22'%20src='%22%20+%20frameURL%20+%20%22'%3E%3C/iframe%3E%3C/p%3E%22);%20frameObj%20=%20theWinref.document.getElementById(%22url%22%20+%20i);%20%7D%20else%20%7B%20theHTML%20=%20scriptObj.innerHTML;%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22:%3Cbr%3E%3Cpre%3E%22%20+%20theHTML%20+%20%22%3C/pre%3E%3C/p%3E%22);%20%7D%20%7D%20if(jsArray.length%20%3E%200)%20%7B%20theWinref.document.write('%3C/body%3E%3C/html%3E');%20%7D

특정 Scripts 실행 - 현재의 페이지 안에서 특정 JavaScript를 실행시킬 수 있게 하는 입력 대화상자를 표시함.

javascript:var%20c='document.location.href',r='';while(c=prompt(r+'Enter%20the%20code%20to%20be%20executed:',c)){try{r='Returned:%20'+eval(c)+'n';}catch(err){r='Error:%20'+err.message+'n';}}

배치 관련
테이블 보기 - 모든 테이블들의 열과 행의 테두리를 표시해 줌. 이것은 테이블들이 적당한 형태로 잘 자리잡고 있는지를 확인할 때 유용합니다.

javascript:var%20f=function(tt,col){var%20a=document.getElementsByTagName(tt);for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23'+col;}};f('table','00F');f('td','0F0');f('th','0FF');

DIV 테두리 보기 - 현재의 페이지에 있는 DIV 요소들 주위에 테두리를 표시해 줌.

javascript:var%20a=document.getElementsByTagName('div');for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23F00';}

DIV 테두리와 해당 ID 보기 - 현재의 페이지에 있는 DIV 요소들 주위에, 테두리와 함께 해당 ID를 표시해 줌.

javascript:var%20a=document.getElementsByTagName('div');var%20aspan;var%20txtNode;for(var%20b=0;%20b%20%3C%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createElement('span');%09%09aspan.setAttribute('id',%20't_ttp'%20+%20a[b].id);%09%09aspan.setAttribute('style',%20'position:relative;top:1px;left:1px;%20margin:10px%200px%200px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;border:%201px%20solid%20%23C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20%23000;text-align:left;display:%20block;');%09%09txtNode%20=%20document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}

Outline 테두리 보기 - 현재의 페이지에 있는 HTML 요소들의 Outline을 표시해 줌. 여기서 보여지는 테두리(CSS Outline)는 일반 테두리(Border)와 달리 공간을 차지하지 않고 객체들의 테두리 위에 그려지게 됩니다.

javascript:(function()%7B%20function%20mark(elem)%20%7B%20if(elem.style)%20%7B%20elem.style.outline=%221px%20solid%20green%22;%20%7D%20%7D%20;%20function%20recurse(elem,p)%20%7B%20var%20i,%20k,%20cn;%20if(!elem)%20%7B%20alert(%22null%22);%20return;%20%7D%20mark(elem);%20cn%20=%20elem.childNodes;%20if(cn)%7B%20k%20=%20cn.length;%20for%20(i%20=%200;%20i%20%3C%20k;%20i++)%20%7B%20recurse(cn%5Bi%5D,%20p%20+%20%22.%22%20+%20i);%20%7D%20%7D%7D%20recurse(document,%22d%22);%20%7D)();

현재의 페이지안에 포함된 그림들을 새 창에서 보기 - 현재의 페이지안에 있는 모든 그림들을 새 창을 열어서 따로 보여 줌.

javascript:if%20(false)void('View%20images%20script%20by%20Tantek%20Celik%20-%20modified%202003.02.11');var%20n%20=%20(window.location.toString().replace(/[^a-z0-9]/gi,'_'))+'_im';var%20sn%20=%200,ud,i=0,r='/r';var%20ss%20=%20r;l=document.images.length;if%20(l==0)%20alert('No%20images%20to%20see%20here.%20Move%20along.');else%20for%20(i=0;i%3Cl;i++){var%20s%20=%20document.images[i];var%20u%20=%20s.src;if%20(u!=''%20&&%20u!=ud%20&&%20ss.indexOf(r+u+r)==-1){%20ss+=u+r;sn++;var%20w=window.open(s.src,n+sn,'height='+Math.max(s.height,32)+',width='+Math.max(s.width,32)+',status=no,location,menubar,resizable,scrollbars');w.focus();}}void(20030211);

Web 표준 확인
현재의 페이지 HTML 표준 확인 - HTML 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://validator.w3.org/check?uri='+document.location);

현재의 전체 웹 사이트 HTML 표준 확인 - 전체 웹 사이트의 HTML 표준을 확인함.

javascript:void(document.location='http://htmlhelp.com/cgi-bin/validate.cgi?url='+document.location+'&warnings=yes&spider=yes');

현재의 페이지 CSS 표준 확인 - CSS 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://jigsaw.w3.org/css-validator/validator?uri='+document.location);

현재 페이지의 Links (HREFs) 표준 확인 - Link 표준 확인을 위해 현재의 URL을 W3로 보냄. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://validator.w3.org/checklink?url='+document.location);

Feed(ATOM, RSS) 표준 확인 - Feed를 Feed Validator에서 표준 확인. 여기서 Feed URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:window.open('http://feedvalidator.org/');

창 크기 조절
PocketPC iPaq 240x320 - 창 크기를 230x320 pixels 크기로 조절.

javascript:void(window.resizeTo(240,320));

TV safe 544x372 - 창 크기를 544x372 pixels 크기로 조절.

javascript:void(window.resizeTo(544,372));

VGA 640x480 - 창 크기를 640x480 pixels 크기로 조절.

javascript:void(window.resizeTo(640,480));

SVGA 800x600 - 창 크기를 800x600 pixels 크기로 조절.

javascript:void(window.resizeTo(800,600));

XGA 1024x768 - 창 크기를 1024x768 pixels 크기로 조절.

javascript:void(window.resizeTo(1024,768));

SXGA 1280x1024 - 창 크기를 1280x1024 pixels 크기로 조절.

javascript:void(window.resizeTo(1280,1024));

UXGA 1600x1200 - 창 크기를 1600x1200 pixels 크기로 조절.

javascript:void(window.resizeTo(1600,1200));

이것들 외에도 Web 개발에 도움이 될 만한 Safari 관련 유용한 정보들을 아래의 곳에서 얻으실 수 있습니다.
Apple 개발 문서 - Safari에 대해 자주 묻게 되는 질문들과 답변

위와 비슷한 기능들을 Safari의 메뉴에 따로 추가해서 사용할 수 있게 하는 도구로 Safari WebDevAdditions 그리고, Safari에 표시되어 있는 현 웹 페이지를 해부해서 CSS 분석 및 편집을 용이하게 해 주는 Xyle scope를 추가하면 Safari에서 훌륭한 웹 개발 환경을 갖출 수 있을 것 같습니다.
또한, Mozilla Firefox를 사용하시는 분들은 비숫한 기능의 도구 막대를 추가해 주는 Web Developer Extension도 있네요. 이것도 CSS의 실시간 편집이 가능합니다.



Mac으로 운영됩니다