30
8월
2007

XRAY – 박스모델 표시기(Bookmarklet)

자바스크립트에 관련된 소식을 많이 알려주는 해외 블로그 중에 ajaxian 이라는 사이트가 있습니다. 시간이 나면 자주 방문해서 글을 읽으면서 영어를 읽는 연습(?)도 하고 있습니다만, UI개발자로서 흥미있는 소식이 업데이트 되어서 스크랩 해봅니다.

ajaxian’s article : http://ajaxian.com/archives/xray-your-internet-explorer
Original Post : http://westciv.com/xray/

XHTML/CSS 개발을 하다 보면 박스 모델이란 난관에 부딪히게 됩니다. HTML의 각각 Element를 감싸는 요소는 margin, padding, border 등이 있는데, 컨텐츠를 박스 형태로 감싸는 이 요소를 더해서 정리한 것을 박스모델이라고 하죠. 그런데 이 박스모델을 렌더링 하는 방법이 각각의 브라우저들 끼리 차이가 발생합니다.

그래서 HTML 개발 시에는 이 박스 모델을 잘 파악하는 것도 일인데요, 이 작업을 도와주는 툴로는 IE의 플러그인인 Developer Toolbar 라던가 Firefox의 FireBug 같은 툴이 유명합니다.

FireBug 는 박스모델 외에도 여러 편리한 점이 많아서 유용하게 사용하는데 아무래도 문제는 IE 였습니다. IE에서 사용할 수 있는 Developer Toolbar 는 파이어폭스의 그것에 비하면 상당히 부실하죠. 그래도 어쨌든 없는 것보단 낫기 때문에 그럭저럭 사용하고 있었는데요…

XRAY 라는 스크립트가 개발되었다고 하네요.

이 툴은 자바스크립트로 되어 있고, 북마크 형태로 제공됩니다. 사용을 하면 아래 화면처럼 XRAY 안내가 뜨는데요.. 이상태에서 어떤 엘리먼트를 클릭하면 해당 엘리먼트의 정보를 상세히 보여줍니다. 엘리먼트의 이름, ID, class 부터 시작해서 position, border, margin, padding 등의 정보를 비쥬얼하게 보여준답니다.

사실 예전에 발표되었을때는 정작 중요한 IE6 이 지원이 안되서 이게 뭐야! 하면서 그냥 넘어갔었는데 (파이어폭스에선 그냥 FireBug를 쓰는게 훨씬 낫죠) 이번 발표된 XRAY 0.91a 버전의 경우엔 IE6 버전도 지원된다고 합니다!! 그래서 현재 저도 북마크해놓고 유용하게 사용중입니다.
정식으로 사용 가능한 브라우저는 IE6 이후, Webkit & Mozilla 계열 브라우저(Safari, Firebox, Camino, Mozilla)를 지원한다고 하는데 아쉽게 오페라를 지원하지 않는군요.

사용방법은 간단합니다. 사이트에서는 북마크렛(bookmarklet) 형태로 지원한다고 하는데요, 위에서 밝혔듯 북마크로 링크를 저장한 후 필요할 때에 클릭해서 사용하면 됩니다.

아래와 같이 XRAY 버튼에서 오른쪽 마우스버튼을 클릭한 후 즐겨찾기에 추가(F) 를 선택하시고 이걸 “연결” 탭에 추가하시면 됩니다. (IE기준)

그 후 아무 사이트나 열어보시고 저 북마크를 클릭하면 가장 위의 그림처럼 안내 메세지가 뜨구요, 그 후부터 XRAY 툴을 사용할 수 있습니다. 그만 사용할 때는 사이트를 리로드(F5)하거나, X버튼을 클릭하시면 됩니다.

ajaxian.com 은 재미있는게 많이 올라와서 좋아요~ ㅋㅋ

You may also like...

2 Responses

  1. mkyoon 댓글:

    IE Developer Toolbar 만으로 고생하고 있었는데 이런게 있었군요. 당장 북마크 하고 갑니다^^

  2. 아마티 댓글:

    ^^ 잘 사용하세여~ 저도 자주 사용하지는 않는데 쓰면 유용한 툴이더군요.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: