hwank1980

안녕하세요.
어제 밤.. 정확히 말하자면 오늘 새벽이죠..
블로그에 글을 올리고 느긋하게 알북이 발바닥 구입해서 부착하고..

이래저래 공부하고 있는데 번뜩 좋은 생각이 있어 낼롬 글을 또 올려드립니다~
ㅎㅎㅎㅎ

보통 20인치 또는 23인치 등 데스크탑의 해상도가 작업하기 좋은 넉넉한 환경이라면 문제는 덜하겠지만..
저처럼 12인치 파워북을 이용하고 있고 Safari의 Window를 여럿 띄어놓고 사용하다보면 일단은 Mac OS X 10.3 부터 추가된 엑스포제 기능을 적극 활용하게 됩니다.

그런데 한가지 아쉬운 것이 Dashboard 라는 데스크탑 악세사리 프로그램이 있지만 Safari에서도 특정 북마크.. 즉 즐겨 찾기 중에도 악세사리 프로그램처럼 쉽게 띄우고 종료할 수 있는 URL이 있기 마련입니다.

간단한 예를 들자면..

주소를 입력하면 영문로 된 주소 및 우편 번호를 찾아주는 검색 html 소스의 경우 Safari에 북마크 해 쓰다보면 새로운 윈도우를 만들고 창 크기도 크고 좀 불편함이 없잖아 있죠. 그리고 메인 Safari 창과 별개로 작동되서 메인 Safari 창에 영향을 주지 않습니다.

그래서 알비레오님 포럼에서본 북마크에 Java script 를 적용해 이런 URL 들을 팝업식으로 창 크기도 지정해서 띄어주게 만들어 봤습니다. 저는 일단 4개의 URL을 이런 방식으로 이용하는데 만족스러운 환경을 만들어 주네요.

먼저 소개해 드릴 URL 은 국내 우편 번호를 검색해주는 것입니다.



URL의 주소는 아래와 같습니다.

javascript:window.open('http://www.koreapost.go.kr/kpfindzip/kpfindzipselect.jsp','',
'toolbar=no,width=580,height=580,resizable=yes,scr ollbars=yes,menubar=no');

위 URL을 북마크로 저장하시면 됩니다.

다음 소개해 드릴 것은 서울 지하철 노선도 입니다.
출발역과 도착역을 지정해주면 시간도 계산해 줍니다.



URL 은 아래와 같습니다.

javascript:window.open('http://www.websubway.co.kr/flash_fscreen.asp?city=','','toolbar=no,resizable= no,scrollbars=yes,menubar=no');

이 지하철 노선도는 이상하게도 일단 띄우편 전체 화면 사이즈로 팝업이 나타납니다. 흠.. 팝업창의 사이즈를 고정해도 풀 사이즈로 변환되네요. 사용하는데 문제는 없습니다~ ㅎㅎㅎ 웹쪽으로 잘 아시는 분이 계시면 한번 보고 고정 윈도우로 띄울 방법이 없나 알려주세요~ ㅎㅎ

다음은 이번에 알비레오님의 포럼에서 찾은 것인데 서울 지역의 교통 상황을 보여주는 것입니다.



각각의 섹션이 색으로 표현되고 녹생은 원활 붉은 색으로 가면 혼잡입니다.
싸이렌 마크가 있는 것은 사고가 있는 것이고 섹션에 마우스 커서를 위차하면 세부 정보도 표시해줍니다.

URL 은 아래와 같습니다.

javascript:window.open('http://www.seoul.npa.go.kr/its2003/servlet/smartway.util.MapServlet?type=MAP','',
'toolbar=no,width=705,height=407,resizable=yes,scr ollbars=yes,menubar=no');

자바로 제작된 듯한데 처음 로딩이 좀 시간 걸리지만 속도는 꽤 괜찮은 편입니다.
운전하시는 분들은 출,퇴근 전에 잠깐 확인하시는 용도로 쓰시면 좋을 듯~

다음은 마지막으로 한일, 일한, 영일, 일중 등의 언어 변환을 해주는 URL??입니다.
이 것은 Safari에서 그냥 http 주소를 넣고 띄어도 보기 좋지만 고정된 크기의 윈도우로 지정해주니 더욱 쓰기 편리하더군요.
일본에 있는 친구에게 장문의 메일을 받으면.. 가끔 모르는 어휘나 한자가 많이 나옵니다.
이때 임시적으로 번역기로 이용하는데 번역 수준은 만족스러운 수준입니다.
그래도 이것에 의존하면 안되죠. 저도 실제 제가 번역하고 모르는 부분만 일단 이걸로 돌리는 수준입니다.



URL은 아래와 같습니다.

javascript:window.open('http://ocn.amikai.com/amitext/indexUTF8.jsp','',
'toolbar=no,width=750,height=500,resizable=yes,scr ollbars=yes,menubar=no');

어떠신가요?

쓸만한 팁이라고 생각하시는지... 전 워낙 게을러서 일단 이렇게 세팅하면 그걸 북마크를 백업해놓고 씁니다.
제 북마크는 Windows 머신이나 Mac OS X머신이나 차이가 없죠.
그래도 12인치라는 최소 환경에서 최대의 작업 환경을 만들어야 되니.. 이런 방법을 이용할 수 밖에 없겠네요.
나중에 15인치 파워북 구입해도 아마 이 방법을 애용할 것 같습니다. ㅎㅎㅎ

마지막으로 제 파워북의 사용 예를 보여드립니다.



위 그림에서 일단 메인 Safari에 제 불로그를 띄우고 메인 Safari 창의 즐겨찾기 항목중 교통 정보 항목을 지정했습니다. 그냥 URL로 되어있다면 블로그 화면이 교통정보 화면으로 바뀌어야 되지만 보시는 것처럼 새로운 팝업창이 생성되며 그곳에 교통정보를 표시해주고 있습니다.

ps : 혹시 위와 같은 방법을 이용할 경우 아주 좋은 자신만이 알고 있는 사이트가 있으면 리플에 올려BoA요~ :P :P :P

peterrkerr

좋은 정보 감사합니다^^

rockfish

우편번호 검색 저에겐 정말 유용합니다.
잘 사용하겠습니다.

macintoy

아주 멋지고 유용한 어플리케이션 팁이군요. 감사드립니다.

__________________

kokodak

저도 12인치 사용중인데, 가려운 곳을 긁어주는 유용한 팁이군요.

감사히 사용하겠습니다.

__________________
오후3시,
무언가를 시작하기엔
너무 늦거나
너무 이른시각이다....

http://www.zonegray.com

iGrin.

^^ 저랑 같은 데스크탑 배경화면이시네요 LORD VADER RISE!!!

__________________
grin.입니다.
http://grinn.tistory.com으로 놀러 오세요..

InDesign CS4을 이용하는 북디자이너입니다.
인디자인 활용 공유를 위해 http://www.indesignkr.com으로 놀러 오세요.

Think Variously

다양하게 생각하고, 합리적으로 세상을 보고,
사람들에 배려하고, 정의가 아니면 일침을 가하고
재치있고, 유쾌하고, 사랑하는 사람들을 많이 만드려고 노력합니다.

rubyless

tab 을 써보시는 것도 좋을 듯....

전 아이북12인치라서 탭 없으면 못살지 싶음.

tjsud82

와.. 지하철시간계산도는 정말 유용하게 쓸께요 ^^

miname^^

저도 여기저기서 모아 놓은 것들을 정리해보면, 아래는 웹 개발 시에 책갈피 형태로 저장해 놓고 필요할 때마다 꺼내어서 유용하게 사용할 수 있을 만한 JavaScript 모음입니다.

JavaScript 관련

Scripts 보기 -- 현재의 페이지에 있거나, 혹은 연결되어 있는 모든 JavaScript들을 포함하고 있는 창을 새로 표시함(Framesets은 지원하지 않음). document.all, document.layers 등과 같은 지원되지 않는 DOM 요청들을 확인할 경우 사용하십시오.:
javascript:var%20jsArray%20=%20document.getElement sByTagName(%22script%22);%20var%20theWinref;%20var %20theHTML;%20var%20scriptObj;%20var%20frameURL;%2 0var%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');%20theWi nref.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);theWinr ef.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20 i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj %20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute (%22src%22))%7B%20frameURL%20=%20scriptObj.getAttr ibute(%22src%22);%20theWinref.document.write(%22%3 Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22%20v ia%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.getE lementById(%22url%22%20+%20i);%20%7D%20else%20%7B% 20theHTML%20=%20scriptObj.innerHTML;%20theWinref.d ocument.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22:%3C br%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%20 0)%20%7B%20theWinref.document.write('%3C/body%3E%3C/html%3E');%20%7D

특정 Scripts 실행 -- 현재의 페이지 안에서 특정 JavaScript를 실행시킬 수 있게 하는 입력 대화상자를 표시함.:
javascript:var%20c='document.location.href',r='';w hile(c=prompt(r+'Enter%20the%20code%20to%20be%20ex ecuted:',c)){try{r='Returned:%20'+eval(c)+'n';}cat ch(err){r='Error:%20'+err.message+'n';}}

배치 관련

테이블 보기 -- 모든 테이블들의 열과 행의 테두리를 표시해 줌. 이것은 테이블들이 적당한 형태로 잘 자리잡고 있는지를 확인할 때 유용합니다.:
javascript:var%20f=function(tt,col){var%20a=docume nt.getElementsByTagName(tt);for(var%20b=0;b%3Ca.le ngth;b++){a[b].style.border='1px%20solid%20%23'+col;}};f('table' ,'00F');f('td','0F0');f('th','0FF');

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;%20funct ion%20recurse(elem,p)%20%7B%20var%20i,%20k,%20cn;% 20if(!elem)%20%7B%20alert(%22null%22);%20return;%2 0%7D%20mark(elem);%20cn%20=%20elem.childNodes;%20i f(cn)%7B%20k%20=%20cn.length;%20for%20(i%20=%200;% 20i%20%3C%20k;%20i++)%20%7B%20recurse(cn%5Bi%5D,%2 0p%20+%20%22.%22%20+%20i);%20%7D%20%7D%7D%20recurs e(document,%22d%22);%20%7D)();

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<%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createEl ement('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%20 0px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;borde r:%201px%20solid%20#C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20#000;text-align:left;display:%20block;');%09%09txtNode%20=%2 0document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}

현재의 페이지안에 포함된 그림들을 새 창에서 보기 -- 현재의 페이지안에 있는 모든 그림들을 새 창을 열어서 따로 보여 줌.:
javascript:if%20(false)void('View%20images%20scrip t%20by%20Tantek%20Celik%20-%20modified%202003.02.11');var%20n%20=%20(window.l ocation.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.%20M ove%20along.');else%20for%20(i=0;i%3Cl;i++){var%20 s%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,resizabl e,scrollbars');w.focus();}}void(20030211);

Web 표준 확인

현재의 페이지 HTML 표준 확인 -- HTML 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.:
javascript:void(document.location='http://validator.w3.org/check?uri='+document.location);

현재의 페이지 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));

위와 비슷한 기능들을 Safari의 메뉴에 따로 추가해서 사용할 수 있게 하는 도구로 Safari WebDevAdditions가 있고, Safari에 표시되어 있는 현 웹 페이지를 해부해서 CSS 분석 및 편집을 용이하게 해 주는 Xyle scope를 더하면 Safari에서 훌륭한 웹 개발 환경을 갖출 수 있을 것 같습니다.

__________________
돼지의 깨달음? 꿀꿀꿀...

 + &hearts; = &infin;&sup2;

lazymale

miname님 좋은 웹툴 소개해주셔서 감사합니다. 정말 유용할 것 같네요..

저도 하나 소개하죠.

miname님이 소개하신 툴에는 좀 못미치지만 유용할 것 같아서요..

사파리에서 소스보기를 하면 모나코(?)체의 못생긴 검정 글씨만 보이죠?

SafariSource라는 플러그인이 있습니다.

이 넘도 WebDevAddions처럼 SIMBL의 plugin으로 설치하면 됩니다.

소스보기에서 태그들이 컬러로 나오고 폰트도 설정해 줄 수 있습니다.

그럼..

__________________
iChat:mgkang21@mac.com
Learn and Learn. Enjoy learning and you will feel alive

hwank1980

앗 감사합니다. 이것은 저에게 정말로 필요한 것 같아요! ^^
10.4 tiger의 safari 2.0인 상태에서 플러그인 패키지를 실행해서 설치했는데...
헙.. 소스 보기에서 작동이 안되네요.. -_-;;;
제가 뭘 잘못 설치한걸까요?

lazymale

To hwank1980

혹시 사파리 종료시켰다가 새로 시작해야 플러그인들이 효력을 발휘하시는 건 아시죠?

만약 그렇게 했는데도 작동이 안된다면...^^ 아직 사파리 2.0을 지원하지 않는 것 같습니다.

전 아직 팬써를 쓰고 있거든요...

더 이상은 잘 모르겠네요.. 죄송..

__________________
iChat:mgkang21@mac.com
Learn and Learn. Enjoy learning and you will feel alive

hwank1980

아.. 그러면 아직 tiger 의 Safari 2.0에선 안되는 듯하네요..
헙헙헙..
괜장히 기대한 것인뎅~

ㅎㅎ
나중에 타이거 버젼으로 업데이트 되면 그때 재 설치 해봐야 겠습니다.

bit_drunken

SafariSource를 타이거 10.4.1, Safari Version 2.0 (412)에서 잘 사용하고 있습니다. 다운로드 받으신 SafariSource 폴더에서 SIMBL.pkg를 실행하시고 SafariSource.bundle 파일을 /Library/Application Support/SIMBL/Plugins에 넣으신 후 Safari를 다시 실행해보세요.

hwank1980

아. 됩니다!
SafariSource.bundle 파일을 잘못 놔뒀었네요.. ㅎㅎ

다시한번 lazymale님과 bit_drunken께 감사드립니다. ^^
이건 저에게 정말로 유용한 것이네요~ ^^

오늘 스타워즈 3보고 왔습니다. 감동이네요.. 오늘밤 4,5,6 복습해야 겠습니다.