최근 공식 배포된 iOS 5.1에서와 마찬가지로 차기 OS X 10.8 Mountain Lion의 기본 한국어 시스템 서체로 ‘애플 산돌 고딕 네오(AppleSDGothicNeo)’가 추가되었다는 소식은 이미 널리 알려진 사실이다. 그동안 애증의 대상이었던 AppleGothic 글꼴의 새로운 대안으로 떠오르면서 많은 사람이 반가움을 표시하고 있는 상황.

그런데 새로 추가된 글꼴도 비스듬히 누운 이탤릭 스타일을 제대로 표시해주지 못한다는 얘기는 또 아쉬울 수밖에 없다. 비록 이탤릭 스타일로 표시된 한글이 영문 글꼴의 멋스러운 형태를 보일 순 없더라도, 가령 <em> 태그 속에 표시된 한글이 그저 시스템이 일률적으로 눕혀놓아서 밋밋하게 표현된다면 이 또한 차별의 느낌을 지울 수가 없는 것이다.

그렇다면 웹에서라도 예전 한글 고문서에서나 볼 수 있었던 성조를 나타내는 기호인 방점을 흉내 내서 강조점의 형태로 표시해주면 어떨까 하는 생각이 들었다. (물론 강조점으로 굳이 방점을 빌려 와 쓸 필요는 없고 적당한 기호를 선택해서 쓰면 된다.)

오로지 CSS만 써서 표현해 보려 했으나, 아쉽게도 CSS에서 쓸 수 있는 Pseudo Elements 중에 ::every-letter와 같은 것은 존재하지 않기 때문에 JavaScript의 힘을 빌려 jQuery plugin인 Lettering.js를 사용했다. CSS를 써서 옛 한글의 강조점 찍어주기(이)란 제목의 글 마저 읽기 →

jQuery에서 많이 사용되는 이벤트(event) 심는 방법에는 옛 버전부터 최근까지 여러 용법이 소개되고 쓰여왔다. 이런 많은 용법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다.
그래서 최신 1.7 버전부턴 과거부터 축적돼서 사용되던 이런 여러 방법을 통합하려는 시도로 .on() method가 소개되었는데, 이런 여러 용법을 잘 정리해서 비교해 놓은 글. – Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

결국, 전부터 쓰던 .bind(), .live(), .delegate() method는 더 일관된 사용법의 통합된 .on() method를 써서 다음과 같이 적용해 줄 수 있다.

/* The jQuery .bind(), .live(), and .delegate() methods are just one
   line pass throughs to the new jQuery 1.7 .on() method */
 
// Bind 
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
 
// Live 
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
 
// Delegate 
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

jQuery 1.7.x 버전부턴 .on() method가 대세.

덧붙임: jQuery 1.7 버전의 문법을 지원하는 TextMate jQuery Bundle

JavaScript 파일은 페이지 로딩 속도 측면에서 페이지의 body가 닫히기 바로 전에 추가해 주는 것이 가장 좋은데, WordPress에 기본적으로 추가된 jQuery는 꼭대기 head 부분에 붙어 있다.

이놈을 맨 아랫부분에 추가하려면, 테마 파일에 있는 functions.php 파일을 열고 WordPress의 wp_register_script()와 wp_enqueue_script() function을 사용하는 다음과 같은 코드를 추가해 준다.

<?php
function my_scripts_enqueue() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, NULL, true);
  wp_enqueue_script('jquery');
}
 
if (!is_admin()) add_action('wp_enqueue_scripts', 'my_scripts_enqueue', 11);
?> 

여기에 있는 wp_register_script() function의 parameter 중 네 번째와 다섯 번째가 중요한 요소인데, 각각 $ver과 $in_footer 변수를 의미한다.

$ver 변수는 보통 JavaScript 파일 경로의 마지막 부분에 query string처럼 붙으면서 JavaScript 파일이 갱신되었을 때 caching된 것의 사용을 막으려고 사용되는데, jQuery처럼 Google CDN에서 불러올 때는 오히려 방해되므로 NULL 값을 줘서 없애버린다. 그리고 $in_footer 값에 true를 주면 JavaScript가 body 맨 마지막 부분에 붙게 된다.

내용 갱신(2014년 6월 25일): 현재 설치된 WordPress 3.9.1 버전에선 위에서 설명했던 방법이 제대로 적용되질 않아서, 해결책을 검색한 결과 다음 페이지에서 해답을 얻을 수 있었다.: Unable to move wordpress jquery library into the footer – Stack Overflow

그래서, 가령 jQuery를 Google에서 호스팅하고 있는 것으로 바꿔서 페이지 마지막 부분에 추가해 주려면 functions.php 파일에 다음과 같이 등록해 준다.

<?php
function my_footer_enqueue_scripts() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, NULL, true);
    wp_enqueue_script('jquery');
}
 
if (!is_admin()) add_action('wp_enqueue_scripts', 'my_footer_enqueue_scripts');
?> 

나중에, Google에서 호스팅하고 있는 jQuery 버전이 갱신된다면, 위 코드에 작성된 jQuery의 호스팅 주소 중에 버전에 해당되는 부분만 새 것으로 바꿔주면 된다.

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 버전이 발표되었다.

웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(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) 봄나들이 외출.