팁: HTML 각 요소들의 아웃라인을 즉석하여 표시

[Wall-E]

One popular trick for Web designers has been to use a Javascript bookmark to add visible borders to the HTML elements on the current page, making it easier to tell where their margins and padding may be colliding. This works ...

http://www.macosxhints.com/article.php?story=20050517130549424

[albireo]

Safari 상에서 현재 보고 있는 웹페이지 각 구성요소들의 경계를 보이고자 할 때 쓸 수 있는 매우 요긴한 팁입니다 (웹디자이너 분들께 특히 유용할 것 같습니다). Safari 에서 지원하는 "outline" CSS2 attribute 을 활용하는 자바스크립트로서 사용법은 다음과 같습니다.

http://www.macosxhints.com/article.php?story=20050517130549424

위 사이트에서 "this bookmarklet" 링크를 찾아 Safari 의 Bookmarkbar 로 드랙엔드랍한 다음, 필요할 때마다 클릭해 주기만 하면 됩니다. 본 포럼에서 적용하면 첨부 그림과 같이 표시됩니다.

[pix]

비슷한 기능을 하는 플러그인을 하나 소개해 드립니다.

Safari WebDevAdditions (http://www.laszlo.com.pl/webdev/index.php) 입니다.

위에 소개된 방법과는 달리 플러그인 방식으로,
설치하면 사파리의 Edit 메뉴를 통해

CSS Style, JavaScript Console, 테이블, 이미지 영역 표시등 다양한 옵션으로 현재 보고 있는 웹페이지의 레이아웃을 분석해 볼 수 있습니다.

저처럼 남의 홈페이지나, 사이트의 속살을 자주 들여다보는 분들에게는 꽤 유용하게 쓰여질거 같습니다.

개발자가 밝혀놓았듯이 베타 버젼 상태이고 SIMBL이라는 서드파티 플러그인 방식이므로 안정성 부분에 있어서는 100% 보장을 할 수 없습니다. --;

[albireo]

저처럼 남의 홈페이지나, 사이트의 속살을 자주 들여다보는 분들에게는 꽤 유용하게 쓰여질거 같습니다.

멋진 플러그인이로군요! 제게도 애플 웹페이지들을 훔쳐 보는데 무척 유용할 것 같습니다. 감사합니다.
8-)