미남이의 이러쿵저러쿵 iPhone에서 보는 미남이의 이러쿵저러쿵

jQuery가 네 번째 생일을 맞아 새 버전(1.4)을 발표했다.

지금 당장 jQuery Minified 버전과 jQuery Regular 버전을 내려받아 둘러보고 자신의 사이트에 바로 적용시킬 수가 있다. 물론 Google에서 호스팅하고 있는 놈을 자신의 사이트에 직접 추가놓는 것이 여러모로 유리할 것이다.

참고로, WordPress에 새로운 버전의 jQuery를 추가할 때는 plugin들의 중복 loading을 막기위한 약간의 주의가 필요한데, 사용하고 있는 테마 디렉토리 밑에 있는 functions.php 파일에 다음과 같이 추가해 준다.

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"), false, '1.4.0');
   wp_enqueue_script('jquery');
}

새 버전에서는 자주 쓰이는 method들의 function calls 횟수를 줄이면서 실행 속도가 무척 빨라졌다고 하니 반가운 일이다.

다음은 코드로 본 새로운 기능들 중 눈에 띄는 것들:

// Easy Setter Functions
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

// Quick Element Construction
jQuery("<div/>", {
    id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

// Per-property Easing
$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("<div>Animation complete.</div>");
  });
});

// Event Multi-binding
$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

더불어서, jQuery API도 자기만의 sub-domain에 자리잡게 되었다: http://api.jquery.com/
PDF 혹은 JPEG 형식의 jQuery 1.4 API Cheat Sheet과 jQuery 1.4 iPhone reference app도 챙겨놓고 볼 일.

추가 참고 문서: jQuery 1.4 Resources For Developers | W3Avenue

갱신: 과거 전통(?)에 어긋나지 않게 일주일여 만에 버그를 잡은 jQuery 1.4.1 버전이 발표되었다.

꼬리표: jQuery

웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(alternative text)를 꼭 입력해 주라는 말이 있다. 이 alt 속성으로서의 올바른 사용 유형이라면, 그림의 성격에 따라 글자 형태의 로고 파일의 경우에는 간단하게 읽히는대로 써주면 될 것이고, 사진일 경우 전달하고자 하는 내용이나 상황을 설명해 주면 될 것이다.

원래 이 alt 속성에 지정되어 있는 텍스트는 브라우저의 그림 파일 표시 기능을 꺼주지 않는 한 그림 밖으로 보여질 수가 없는 운명이다. 하지만, 그림 밑에 주석을 달고자 할 경우, 이 대체 텍스트가 그 자리에 안성맞춤이 될 수 있지 않을까? 그래서, jQuery를 이용한 간단한 구현 방법을 소개하고자 한다.

먼저, 글에 올려진 주석을 달고자 하는 img를 찾고나서, alt 속성에 있는 대체 텍스트를 구해야 한다.

var targetImg = $('.entry img');
var altText = targetImg.attr('alt');

차후 CSS로 스타일의 정의를 쉽게 하기 위해서 특정 class 값이 주어진 div으로 감싸주는 것이 편할 것이다. 그리고 나서, 그림 밑에 달릴 주석을 위한 공간을 마련해준다. 여기에는 다음과 같은 방법이 사용될 수 있다:

targetImg.wrap('<div class="img-with-description"></div>').after('<span class="img-description">' + altText+'</span>');

여기서 하나 고려해봐야 할 것이, 만약 그림이 글 내용 중에서 float되어 있는 상태라면, 이를 감싸고 있는 div도 같이 float되게 해주어야만 원래 의도한 그림 표시 스타일을 유지할 수 있다. 그래서, img의 float 속성과 너비값을 알아내야 한다.

var imgWidth = targetImg.width();
var floatProperty = targetImg.css('float');

이렇게 해서 얻어진 float 속성을 가지고 그대로 이 속성값을 감싸는 div에도 적용해 준다. 만약, float 속성이 'none'이라면 그림 파일은 중앙 정렬된 상태라고 가정할 수 있고, 따라서 감싸는 div도 margin 값으로 중앙 정렬해준다.

var descriptionImage = $('div.img-with-description');
if(floatProperty == 'none') // aligned center
    descriptionImage.width(imgWidth).css('margin', '0 auto');
else
    descriptionImage.width(imgWidth).css('float', floatProperty);

마지막으로, 감싸주는 div과 주석 부분을 위한 적당한 CSS를 정의해주면 되겠다.

이렇게 해서 완성된 코드는 아래의 페이지에서 확인할 수 있다:
img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주는 본보기 페이지

alt 속성의 색다른(alternative) 봄나들이 외출.

꼬리표: Alt Text, jQuery

jQuery 1.3 버전 발표로 언제나 반가운 새로운 기능들과 성능 향상의 소식을 알려왔다.

발표 내용을 요약해 보면,

• 속도 빠르기로 소문난 CSS selector engine인 Sizzle의 채용으로 DOM querying과 관련된 전반적인 속도 향상. (이전 버전보다 거의 49% 속도 개선이 있었다고 함.)
• Event delegation을 위한 "live events" 기능을 지원. 이미 적용된 live event를 없애려면 die method를 써야 함.
• jQuery의 event 시스템을 W3C standards에 맞게 다시 손보면서, event handling이 훨씬 손쉬워졌으며 모든 브라우저들에서 부드럽게 돌아가도록 했다.
• HTML Injection 코드를 다시 작성해서, HTML injecting 작업이 더 빨라짐. (전반적으로 6배 정도의 속도 향상이 있었음.)
• offset method가 재작성되면서, 3배 더 빨라졌음.
• 더 이상 Browser/userAgent Sniffing 질을 그만두고, 대신 Feature Detection 기술을 사용하면서 앞으로 더 긴 미래를 대비하게 됨. 당분간 jQuery.browser 속성은 plugins 호환성을 위해 계속 남겨둔다고 한다.

더불어서, 새로운 모습의 jQuery 1.3 API browser도 소개되었는데, API 탐색이 훨씬 세련되고 간편해졌다. 여기에, AIR를 이용한 offline browser도 같이 제공.

언제나 느끼지만, jQuery와 같은 JavaScript 라이브러리가 없었다면, 황량한 무법천지에 떨구어진 맨살을 드러낸 웹 개발자들의 어깨에 얼마나 더 무거운 짐이 억세게 짓눌러졌을까를 상상해보며, 다시한번 jQuery 탄생 3주년을 축하하고 Software Freedom Conservancy의 일원으로서 앞으로도 든든하게 오랫동안 개발자 곁에 함께하기를 바란다.

웹 페이지에 jQuery를 추가할 때, 이왕이면 Google 서버에서 빠르게 전송해주는 놈을 애용하자.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

꼬리표: jQuery

개인적으로 함께 작업하기 가장 편안한 JavaScript 라이브러리인 jQuery가 벌써 공개 2주년을 맞이하였다.
이를 기념해서 새로운 버전 1.2.2가 발표되었는데, 바뀐 주요 내용으로 몇몇 버그 수정과 함께 가장 많이 사용되는 DOM element를 jQuery 함수로 전달하는 과정이, 예를 들어 $(DOMElement), 3 배나 더 빨라졌다고 한다.

이 밖에도, .ready() 함수의 경우 Internet Explorer에서의 기능 구현이 개선되었고, 이젠 모든 브라우저가 DOM을 다 읽어들일 때까지 기다리는 것이 아니라 CSS까지 마저 읽어올 때까지 기다려 준단다. 이것은 보통 특정 요소의 스타일을 변경하고 싶을 떄, 어차피 웹 브라우저가 CSS 파일을 먼저 해석해야 하기 때문에 바뀐 변화인 듯.
그리고, .hover()는 이제 새로운 mouseenter와 mouseleave 이벤트로 분리되었다. 참고로, 이놈들은 하위 요소들에도 함께 적용되는 mouseover와 mouseout과는 차별되서, 해당 요소에만 적용된다.
또, 새로 추가된 Mouse Wheel plugin이 소개되었다. 사용 예:

$("div").bind("mousewheel", function(event, delta){
  if ( delta < 0 )
    $(this).append("up");
  else
    $(this).append("down");
});

:not() selector의 사용 용법도 다양해져서, 다음과 같은 작업도 가능해졌다:

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

무척 복잡해 보이지만, 그 사용 목적은 아주 명확하고 세밀해졌다.

일반 jQuery Ajax 작업에도 변화가 있어서, 덤으로 서버에 Accept header 정보도 함께 전달하면서, 원하는 종류의 데이타를 선택적으로 불러올 수 있게 되었다.

매번 생각하지만, jQuery는 개발자들을 위한 두통 완화제일지도.

꼬리표: jQuery

웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.

개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 "page4" tab trigger로 지정된 HTML snippet이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>${1:Title}</title>
        ${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
        <!--[lt IE 7]><link rel="stylesheet" href="$3lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
        }<style type="text/css" media="screen">
        /* <![CDATA[ */

        /* ]]> */
        </style>
        ${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        }<script type="text/javascript">
        // <![CDATA[
            $0
        // ]]>
        </script>
    </head>
    <body id="${5:page}">
        <div class="container">
            <div class="column span-${6:24}">
                <h1>${7:Header}</h1>
            </div>
            <div class="column span-${8:20}">
                ${9:Main content}
            </div>
            <div class="column span-${10:4} last">
                ${11:Right sidebar}
            </div>
            ${12:<div class="column span-24">
                ${13:Footer}
            </div>}
        </div>
    </body>
</html>

기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.

다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 "page"가 지정되어 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2  ml:lang="ko"}${3: lang="ko"}} dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
        <title>${5:Title}</title>
        ${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
        <!--[lt IE 7]><link rel="stylesheet" href="$7lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
        }<style type="text/css" media="screen">
        /* <![CDATA[ */

        /* ]]> */
        </style>
        ${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        }<script type="text/javascript">
        // <![CDATA[
            $0
        // ]]>
        </script>
    </head>
    <body id="${9:page}">
       <div class="container">
            <div class="column span-${10:24}">
                <h1>${11:Header}</h1>
            </div>
            <div class="column span-${12:20}">
                ${13:Main content}
            </div>
            <div class="column span-${14:4} last">
                ${15:Right sidebar}
            </div>
            ${16:<div class="column span-24">
                ${17:Footer}
            </div>}
        </div>
    </body>
</html>

간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.

꼬리표: blueprintcss, HTML snippet, jQuery, TextMate