날로 웹 애플리케이션의 UI가 복잡해지고 JavaScript를 이용해서 사용자와 웹 애플리케이션 간의 상호작용에 따른 특정 객체에 대한 접근과 조작이 점점 더 유행을 타게 되면서, 웹 브라우저의 창 속에 존재하는 어떤 한 객체의 정확한 크기와 위치 좌푯값을 얻는 일은 무척이나 중요해졌다. 하지만 객체의 위치를 재는 방법과 그 속성은 헷갈릴 만큼이나 다양하고, 불행히도 웹 브라우저마다 같은 속성도 서로 다른 크기를 돌려준다. 그래서 여기에 DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성값들을 정리하고, 그림으로 나타내 보았다.
DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리(이)란 제목의 글 마저 읽기 →

TextMate와 함께 기본적으로 제공되는 CSS 번들에는 못난 Internet Explorer, 특히 IE 6 만을 위해서 사용될 수 있는 CSS hacks이 들어 있다.

바로 Other 항목 밑에 있는 것들로, 예를 들어 IE 6에게 png 그림의 투명도를 제대로 표시하게 하려고 Microsoft 전용 AlphaImageLoader Filter를 쓴 것이 있는데, background tab trigger로 사용될 수 있다.

.png-transparent {
  background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

또 CSS3의 opacity 속성을 지정할 때는 IE를 위해 MS의 Alpha Filter가 사용된다. -moz-opacity 속성은 오래된 버전의 Mozilla 계열 브라우저들(Mozilla 1.7과 Firefox 0.9 이전) 위한 것으로 지금은 삭제해도 무관하다.

.opacity-div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

그런데, 이것들 말고도 자주 쓰이는 꼼수들이 더 있기 마련인데, 개인적으로 두 가지를 더 추가해서 쓰고 있다.
하나는 IE 6 만을 위한 꼼수로, 이 놈은 CSS의 max-width와 min-width 속성을 전혀 알아듣지 못하는 관계로 할 수 없이 또 MS 전용 expression() 속성을 빌려와서 적용해 주어야 한다.
아래는 IE min-max-width라는 이름으로 저장된 CSS snippet의 내용인데, tab trigger로 iemwidth를 지정해 주었다.

width:expression(document.body.clientWidth > ${1:980} ? "$1px" : (document.body.clientWidth < ${2:480} ? "$2px": "auto" ));

또 하나는 CSS layout을 구성할 때 자주 쓰이는 snippet으로 float된 자식 요소를 감싸주려고 과거에는 CSS의 :after pseudo-element를 써서 float을 clearing하는 벙법이 많이 사용되었으나, IE가 아직까지 CSS 2.1의 :before와 :after pseudo-element를 지원하지도 않거니와, 더 간편한 방법으로 알려진 pseudo-element를 쓰지 않고 float을 clearing하는 방법이 많이 사용되는데, 여기에는 또 IE 6 이하 버전 때문에 꼼수가 들어가야 한다.
그래서 아래는 짧지만 타이핑의 수고를 덜어주기 위해 IE 7까지 고려한 새 float clearing 방법을 참고해서 추가한 아주 간단한 snippet이다.

${1:.clearfix} {
  overflow: hidden;
  ${2:_}height: 1%; /* IE 6 fix */
}

IE의 경우, float된 자식을 감싸려면 부모가 MS 전용 속성인 “hasLayout“이 true 값을 가져야 하는데, 우연히도 IE 7에 와서는 overflow의 속성이 주어질 경우(visible 제외) 자동으로 hasLayout 값을 갖게 되면서 또 다른 꼼수를 사용할 필요가 없다. 하지만, 불행히도 IE 6에서는 여전히 hasLayout 값을 주려면 이미 알려져 있는 여러 hasLayout 값을 갖게 하는 CSS 속성들 가운데 하나를 적용해 주어야 한다. (위에서는 “Holly Hack”이라 일컬어지는 height: 1%를 사용했고, 다른 브라우저들로부터 감추기 위해 underscore hack이 사용되었지만, 부모 요소에 height 값을 지정할 필요가 없다면 밑줄은 필요없다.)

이런 꼼수들의 실제 적용은 나중에 CSS 파일에 따로 모아서 사용하는 것이 사이트 관리하는데 수월할 것이다.

jQuery 1.1.3 버전에 와서는 거의 80개 이상의 버그가 잡혔고 DOM 위를 돌아다니는 속도가 무려 800%나 빨라졌다고 한다.
그리고, 이벤트와 효과 관련 시스템이 다시 쓰여지면서, 키보드 이벤트를 더 효율적으로 처리할 수 있게 되었고 UI 효과의 처리 속도와 호환성이 향상되었다.

그 동안 다른 자바스크립트 라이브러리들과 비교해서 selector 처리 속도에서 약점을 보여왔었는데, 이젠 말끔히 해소된 느낌이다.
또한 눈에 띄는 것은, 새로운 유형의 selector들이 소개되었는데, 그 중 selector로 유니코드를 사용할 수 있게 되면서 $("div.머릿말")처럼 한국어로 된 속성 값을 바로 사용할 수 있게 되었고, 새로 추가된 ‘test suite’은 애니메이션 효과를 실험하는데 있어 버그 탐색에 도움을 줄 듯 하다. 또, event.which 속성으로 눌린 특정 키나 마우스 버튼에 관한 상세한 정보를 얻을 수도 있단다.

이제 더 날렵해지고 활동 범위도 넓어진 jQuery의 다음 버전도 기대되는데, 7월 말에 1.1.4 버전의 발표를 끝으로 더 많은 새로운 기능들을 흡수한 jQuery 1.2로 건너뛸 예정이다.

한편, 그 동안 비밀 프로젝트로 숨겨왔던 jQuery UI 소식을 공개하였는데, 여기에는 Drag & Drop 라이브러리가 포함되어 있고 Draggables, Droppables, Sortables, Resizables, 그리고 Slider 등 여러 UI 효과와 관련된 코드가 포함될 예정이란다. 아마도 이 놈은 Prototype과 Script.aculo.us가 쌍을 이루듯 jQuery의 UI 효과를 위한 대표 plugin으로 자리잡을 듯. 8)

Michael Angeles씨의 OmniGraffle 용 wireframe palette가 갱신되었다.
갱신된 내용을 보면:

• 설명 기호(callout) 모양 추가
• 새로운 forms 요소가 추가됨: contextual help, captcha
• Tabs과 Controls 항목 추가
• 몇몇 자주 쓰이는 아이콘들 추가

내려받으러 가세~

Safari 3에 포함되어 있는 Web Inspector가 새로운 모습으로 또 한 번 탈바꿈 하였다.

바뀐 내용을 보면,

• 완전히 새로 디자인한 인터페이스, 더는 투명한 패널이 아님.
• Safari 뿐만이 아니고, WebView를 사용하는 제 3의 어플리케이션들에서도 사용 가능.
• 탐색 페이지 별 도킹(docking) 지원.
• 페이지에 포함된 모든 리소스들을 종류별로 분류해서 보여줌.
• 글자 기반의 모든 리소스들을 검색할 수 있는 통합 검색.
• 실시간 JavaScript 실행으로 나타나는 오류 및 경고를 보여주는 콘솔 창.
• HTTP 요청과 응답 headers를 포함해서 리소스의 시간대 별 로드 시간을 보여주는 Network 창.
• Network 창 속 리소스 크기와 로드 시간을 요약해서 보여주는 그래프.
• HTML 소스의 문법 구별 색깔 표시 기능(syntax highlighting).
• inline JavaScript과 HTML의 오류 보고 기능.

과연, Web Inspector는 Safari의 Firebug가 되고 싶은 것인가?
이 모든 기능이 Windows에도 그대로 적용된다니 웹 개발자들에게는 또 하나의 좋은 도구로 자리잡겠군. 당장 Mac과 Windows 용 nightly builds에서 사용 가능하다.
설치 유혹이 너무나 크군. 😈