얼마전에훈스님 블로그에서넥슨 사이트의 성능튜닝 - #3 HTTP 요청 줄이기라는 글을 보았습니다.

글 내용중에 HTTP요청을 줄이기 위한 하나의 방법으로 CSS Sprite 라는 기능을 설명하셨는데

그냥 보고 넘어가다가 태오사이트에서 어떤 분이 구글 메인페이지 하단의 아이콘들의 움직임을 궁금해 하시기에 저도 한번 테스트 해보기로 맘 먹고 코드를 분석하기 시작했습니다.

CSS Sprite 기능을 구글의 경우로 설명을 드리면 구글 하단에 쓰이는 이미지를 보면 하나의 통 이미지 입니다.

이 이미지를 해당 div의 background로 넣고 position의 값을 변경하면 원하는 부분의 이미지 즉 메일, 캘린더, 노트 부분만 나오게 하는 기능입니다.

그래서 IE Developer Toolbar를 이용하여 그 부분의 스타일과 HTML 코드를 보니 마우스를 올리는 순간
마우스가 가르키는 div style의 position값을 setInterval로 변경 해 주는 방법으로 보였습니다.

그 방법으로 간단하게 코딩을 해 봤습니다. 아래의 소스를 복사해서 테스트를 해 보세요.

이 기능을 모르셨던 분들은 언젠간 유용하게 사용하실 수 있겠죠? ^^;

파이어폭스나오페라로 웹사이트를 이용하다 보면 레이어가 플래시 뒤로 숨어버리는 경우를 종종 발견합니다.

물론 IE에서는 제대로 표현이 됩니다.
레이어의 z-index속성 값을 높여도 소용 없고... 평소에 IE에서 잘 되니 문제 없이 그냥 넘겨버린 제가 미워요;;
앞으로는 제대로 테스트를 해 봐야 겠습니다.

해결 방법은

object 태그에는
<param name="wmode" value="transparent">

embed 태그에는
<embed wmode="transparent" ...

이렇게 추가를 하면 해결 됩니다.

앞으로는windowless와 windowed 문제가 없어지길 바랍니다.

사실 이 글은 나중에 혹시 잊어 버릴까 염려되어 간단하게 남겨 봅니다. ㅋ

요즘 들어 JavaScript의 문법들이 다양하고 어렵다는 걸 알게 됩니다.
아무래도 여러 자바스크립트 라이브러리나 ajax의 활성화등이 이유가 아닌가 싶습니다.
저도 개발하면서 조금이라도 복잡한 로직을 요하는 기능이 있다면 가차 없이 함수로 따로 만들고 그것을 불러서 사용합니다.

예를 들면, 아래의 함수는 select박스(DropDownList)의 모든 option을 제거하는 함수입니다.
clearOptions =function(_arg)
{
 var_obj =document.getElementById(_arg);
 if(typeof(_obj) != "undefined")
 {
  while(_obj.options.length> 0)
  {
   _obj.remove(0);
   if(_obj.options.length== 0)
    break;
  }
 }
};

뭐... JavaScript에서 저런 기능을 아예 지원해주면 좋겠지만 있을 법 한데 분명 있을 것 같은데 없는
그런 기능들이 있습니다. 바로 trim, ltrim, rtrim 등...
다른 언어로 개발해 보신 분들이라면 아시겠지만 좌,우 공백을 제거해주는 함수죠.
왜... 없을까요? 물론 정규식을 이용하여 replace함수를 이용하면 가능해 집니다.
또, 이 replace함수도 문제 입니다. 보통 다른 언어에서는 replace(찾을값, 바꿀값) 이렇게 하면 해당 문자열에
있는 모든 값들을 찾아서 값을 변경하는데 JavaScript의 replace함수는 그렇지 않습니다.
varstr = "abcabac";
alert(str.replace("a","A");

이렇게 하면 맨 처음 나오는 a만 A로 변경이 됩니다. 즉, 처음 나오는 찾고자 하는 값을 바꾸고 끝입니다.
그래서 저 replace함수도 정규식을 사용해서 이용하는 경우가 많습니다.

str.replace(/a/g,"A");

a라는 값을 처음부터 끝까지 찾아서 A로 바꿔라 하는 명령입니다. 정규식은 /패턴/flag 형식으로 사용하는데요.
/g라고 하면 패턴을 전역 검색을 하라는 의미가 됩니다.
http://koxo.com/lang/js/object/RegularExpression.html요기를 참고 해 보세요.

자.. 이제 원하는대로 됐습니다. 그러나 문제인 것이 매번 replace를 쓸 때 마다 정규식을 계속 타이핑을 해야 합니다.
위에서 예제로 제시했던 clearOptions처럼 함수로 만들어서 사용해도 되지만 JavaScript의 prototype을 이용하면
JavaScript의 기본객체의 함수나 속성을 정의하거나 재정의 할 수 있습니다.

String은 JavaScript의 기본객체이므로 저 replace함수를 prototype을 통해 재정의 할 수 있지만
그렇게 할 수 없지요...왜냐 아래의 예문을 보세요.

String.prototype.replace = function(_findValue, _replaceValue) {
 return this.replace(new RegExp(_findValue,"g"), _replaceValue);
};

왜 그럴까요?? 실행을 해보시고 생각을 해 보세요.

결과를 말씀드리면 String객체의 replace함수를 재정의하기가 어렵습니다. 재정의하는게 아니라 replaceAll이란
이름으로 새로운 정의를 하여 사용하면 문제가 없겠죠..

아래는 위에서 설명한 방식으로 생각하면 나올 수 있는 trim, rtrim, ltrim 함수 입니다.

String.prototype.trim = function() {
    return this.replace(/(^ *)|( *$)/g, "");
};
String.prototype.ltrim = function() {
    return this.replace(/(^ *)/g, "");
};
String.prototype.rtrim = function() {
    return this.replace(/( *$)/g, "");
};