Open Web 짝사랑. iOS Programming.
JavaScript 코딩을 하거나 CSS 디자인을 하다 보면, 웹 문서의 DOM에 위치한 특정 element를 끄집어내기 위해 CSS selector를 지정해 주어야 할 일이 많은데, 복잡한 구조 속에 위치한 특정 element만을 끄집어 내기 위한 맞춤형 selector를 정의하기란 종종 난처할 때가 있다. 이럴 때 SelectorGadget은 안성맞춤의 CSS selector를 생성하는데 도움을 준다.
SelectorGadget bookmarklet을 책갈피 해놓고, 필요할 때마다 실행해서 point and click만으로 족집게 CSS selector를 얻을 수 있으니 아주 요긴한 도구가 될 듯. 아직 IE7에선 약간 문제가 있단다.
지금의 웹 어플리케이션 개발의 추이를 보면, 어떤 동작을 부여하는데 있어서 대부분은 특정 DOM elements를 불러와서 원하는 동작 적용하게 된다. 여기서 특정 DOM elements를 가져오는데 걸리는 시간은 웹 어플리케이션의 동작 속도에 커다란 영향을 끼칠 수도 있다.
현재, 많은 JavaScript library들이 CSS3 selectors를 이용해서 특정 DOM 요소들을 불러오는 기능을 구현하고 있으나, 경쟁적인 속도 단축 노력에도 불구하고, 웹 브라우저가 직접 이런 작업을 지원해 준다면 속도와 효율면에서 커다란 득을 볼 수 있는 것은 당연한 얘기다. 이런 작업의 표준화를 위해 W3C에서는 Selectors API를 제공하고 있는데, 마침 얼마전 WebKit에서도 getElementsByClassName을 지원하기 시작한데 이어서, 이제 특정 DOM 요소들을 끄집어 오는 작업을 위한 querySelector와 guerySelectorAll methods를 지원하기 시작했단다.
사용 예를 보면,
/** Get all the elements with class "hot" (duplicating getElementsByClassName)* A common use for this is as a toggle;* for example, a search feature might tag results with a class*/documentquerySelectorAll".hot";/** Get the currently hovered element*/documentquerySelector":hover";/** Get every other element in the <li> with id "large"* This is mostly useful for doing "zebra stripe" alternating rows.* Once CSS3 becomes more widespread, doing this directly via CSS will be more practical*/documentquerySelectorAll"#large:nth-child(even)";
이제, CSS3 selectors를 이용해서 특정 DOM elements를 손쉬우면서도 빠르게 끄집어 내서 동작을 부여할 수 있게 된 것이다. 앞으로 이 Selectors API가 기타 다른 브라우저들에서도 지원해 준다면, DOM Scripting의 효율도 더 높아질 듯 하다.
조만간 있을 Safari의 갱신 때 이것도 포함되었으면 좋겠군.
IE에게 웹 표준을 잘 인식하도록 최면을 거는 IE7 JavaScript 라이브러리가 2.0(beta) 버전으로 갱신되었다. IE7.js v2.0(beta)의 자세한 갱신 내용은 개발자의 웹 블로그의 글에 올려져 있는데, 주요 내용은 다음과 같다.
간단하게 각각의 IE 6와 IE 7 브라우저를 위한 기능의 분화가 있으면서 파일도 둘로 나뉘게 되었다.
실제 웹 페이지의 적용은 이제, 라이브러리 관련 파일들을 서버에 올려둘 필요없이, 간단하게 <head>에 다음과 같이 써주면 끝.
MSIE5-6 웹 브라우저를 MSIE7처럼 행동하도록 기능을 갱신하려면,
<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script><![endif]-->
또는, MSIE5-7 웹 브라우저를 포함해서 MSIE7가 지원하지 않는 몇몇 CSS selectors와 속성들을 인식하도록 하려면 다음과 같이 써준다.
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script><![endif]-->
아무쪼록, 나중에 IE 8이 발표되면서 또 하나의 IE9.js 파일이 등장하지 않았으면 한다.
CSS 3의 선택자들(selectors) 가운데에는 HTML 요소들이 가지고 있는 특정한 형태의 속성 값에 따라서 선택적으로 모양을 정의해 주는 것이 가능하다.
그래서, CSS 3에 새로 소개된 추가 속성 선택자들 중에서 [att^=val] 형태의 선택자를 이용하면 문서 밖으로의 연결 고리들을 따로 구분해서 꾸며줄 수도 있다. 이렇게 하면, 독자들에게 새로운 창에서 바깥 연결 고리들을 따로 열 수 있게 하는 선택권을 줄 수가 있는 것이다.
실제 사용 예를 보면, 모든 외부 연결 고리들은 http:로 시작하기 때문에, 다음과 같이 정의해 줄 수 있다:
이렇게 하면, 모든 외부 연결 고리들은 externalLink.gif 그림 파일의 배경을 덤으로 갖게 된다. 물론, 내부 문서들로의 연결할 때 상대적 URLs 대신에 절대적인 주소를 사용한 경우도 있기 때문에, 다음과 같은 정의도 필요하다:
이 기술은 Mozilla 계열과 Safari 그리고 IE7을 포함한 대부분의 표준을 지원하는 브라우져들에서 적용 가능하만, 그렇지 않은 경우라도 단지 무시만 해버린다.
물론, 전자 우편이나 AIM 주소 등에도 비슷하게 적용해 줄 수가 있음.