jQuery에서 DOM elements에 직접 접근하는 방법

JavaScript, Notes 3개의 댓글 »

jQuery에서 selector 선언이나 jQuery 함수(method)를 사용하면 되돌려받는 것은 항상 jQuery object이다.
대부분은 이 오브젝트에 직접 여러 method들을 묶어서(chaining) 사용하거나 기본적으로 제공되는 모든 object들의 자동적인 접근의 용이함도 장점이겠지만 가끔은 DOM element를 직접 만져야 할 때가 있다.

이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 할 수 있다:

var tag = $('#some-element').get(0).tagName;

여기에는 .get()을 쓰느 대신 더 간단한 방법이 있는데, $('#some-element').get(0) 대신에 바로 $('#some-element')[0]처럼 사용할 수도 있다.
바로 DOM elements의 array처럼 사용될 수 있는 것이다.

공식 jQuery 문서에는 설명이 안 되어 있는 것 같아서 적어놓는다.

꼬리표:

DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리

HTML, JavaScript, Notes 3개의 댓글 »

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

꼬리표:

웹 접근성을 고려한 TextMate의 table snippet

Apple, Mac & iOS, HTML, Notes, Web Accessibility, Web Standards 댓글이 없음 »

아래는 TextMate에서 제공하는 HTML의 기본 table snippet에 의해 삽입되는 코드이다.

<table border="0" cellspacing="5" cellpadding="5">
  <tr><th>Header</th></tr>
  <tr><td>Data</td></tr>
</table>

무척이나 단출하고 접근성을 염두에 둔 최소한의 요소들이 빠져있기 때문에 데이타 테이블을 짤 때 무심코 그냥 지나칠 수가 있다.
간단한 데이타 테이블이라도 접근성을 고려한다면 최소한 테이블 안에 caption 요소와 summary 속성을 추가하고 th 혹은 간혹 td 요소에는 scope 속성이 포함되어 있어야 한다.
그래서, 나름대로 수정한 table snippet (행의 갯수가 최소 4, 최대 7 기준):

<table id="${1}" summary="${2}"${4:${5: border="${6:0}"}${7: cellspacing="${8:5}" cellpadding="${9:5}"}}>
  <caption>${10}</caption>
  <thead>
    <tr>
      ${11:<td></td>
      }<th scope="col">${12:Table Header}</th>
      <th scope="col">${13:Table Header}</th>
      <th scope="col">${14:Table Header}</th>
      <th scope="col">${15:Table Header}</th>
      ${16:<th scope="col">${17:Table Header}</th>
      ${18:<th scope="col">${19:Table Header}</th>
    }}</tr>
  </thead>
  ${20:<tfoot>
    <tr>
      <th scope="row">${21:Table Footer}</th>
      <td colspan="${22:}">${23:Footer Data}</td>
    </tr>
  </tfoot>
  }<tbody>
    ${35:<tr>
      ${24:<th scope="row">${25:Header}</th>
      }<td>${26:Data}</td>
      <td>${27:Data}</td>
      <td>${28:Data}</td>
      ${29:<td>${30:Data}</td>
      ${31:<td>${32:Data}</td>
      ${33:<td>${34:Data}</td>
    }}}</tr>}
    ${0:}
  </tbody>
</table>

간혹 구조가 복잡한 데이타 테이블일 경우 scope 속성으로는 테이타 셀과 테이블 제목들과의 관계를 제대로 표현할 수가 없기 때문에 대신에 headers 속성을 써야 할 경우가 있는데, 현재 논의되고 있는 HTML 5.0의 표준 초고 문안에는 headers 속성이 포함되지 않을 예정이라서 개발자들 사이에 많은 논란이 되고 있다.

앞으로 headers 속성의 운명은 알 수가 없지만, 분명한 것은 지금 바로 적용될 수 있는 올바른 데이타 테이블의 구현 방법을 숙지하는 것이리라. W3C의 HTML 문서에 나와있는 화면 해독기를 고려한 Table 표현 방법이나 한 번 더 훑어보자.
데이타 테이블의 디자인 아이디어를 얻고 싶을 땐 Data Tables and Cascading Style Sheets Gallery가 도움이 된다.

꼬리표:

XHTML & HTML 문서에서의 언어 지정

HTML, Notes, Web Standards 댓글이 없음 »

W3C의 Internationalization Core Working Group에서 Internationalization Best Practices: Specifying Language in XHTML & HTML Content라는 제목의 문서를 새로 갱신해서 올려놓았다.

이 문서는 HTML 문서 내용을 다루는 저자나 프로그램 개발자들에게 세계 각국 언어에 맞는 현지화를 위한 일종의 안내서로 사용될 수 있도록 관련 권고 사항들을 전해주고 있다.
문서 내용을 요약하면 먼저 HTML 문서에 사용 언어를 선언할 때 주의할 사항으로 character encoding과 글이 읽히는 방향(direction of text)을 언어 선언과 혼동해서 쓰지 말라고 경고하고 있다. Character encoding 값과 사용 언어는 일대일로 바로 적용될 수가 없는데, 그 이유로 어떤 하나의 인코딩 값이 여러 다양한 언어를 대표할 수도 있기 때문이다. 글이 읽히는 방향도 한 언어 안에서 문서 내의 문맥에 따라 서로 다른 방향으로 읽히고 해석되어야 할 필요가 생길 수도 있고, 대표 언어를 선언하는 것만으로는 이런 상황을 제대로 표현해 줄 수가 없게 된다.

위 문서에는 웹 브라우저나 화면 해독기와 같은 user agents가 문서에 쓰인 언어를 올바로 해석할 수 있게 하려고 (X)HTML 문서 안에 사용 언어를 선언해 주는 대표적 방법들을 다음과 같이 소개하고 있다.

첫 번째 방법으로는 XHTML 요소에 lang과 xml:lang 속성을 사용하는 방법으로, 문서 전체의 언어를 지정할 땐 html 태그에 정의해 준다. 물론 문서 안에 포함된 특정 요소에 다른 언어가 사용되었을 땐 해당 요소에 따로 적당한 언어 속성을 지정해 줄 수도 있다.

<!-- 보기 1: text/html mime type으로 전달되는 XHTML 1.0 문서 안에 언어 속성을 사용해서 선언해 준 예.-->
<html lang="ko" xml:lang="ko" xmlns= "http://www.w3.org/1999/xhtml">

여기서 주의할 것은, HTML일 경우 lang 속성만 사용되며, XML로 전달되는 XHTML의 경우에는 xml:lang 속성만 사용한다.

두 번째 방법은 아래처럼 meta 요소의 http-equiv를 Content-Language로 지정해 주는 방법이 있다.

<!-- 보기 2: meta 요소의 Content-Language 선언. -->
<meta http-equiv="Content-Language" content="ko" />

여기서 문서에 사용된 언어와 의도된 독자의 사용 언어가 여럿일 경우 각 언어를 모두 나열해 줄 수도 있지만, 문서의 언어 해석을 위한 용도로는 적절치 않거니와 아직 이곳에 지정된 정보의 이용 상황은 극히 낮은 수준이다.

마지막으로, 언어 해석 정보는 문서와 함께 전달되는 HTTP header에서도 얻을 수 있는데, 이것도 대부분의 웹 브라우저들은 문서의 올바른 언어 해석을 위해서 이 곳의 정보를 참고하지는 않고 있다.

결과적으로, 지금까지는 첫 번째로 소개된 html 언어 속성을 이용한 방법이 HTML 문서의 언어 해석을 위해 가장 일관성 있고 효과적인 방법이라 할 수 있다.

추가 참고 문서: W3C I18N FAQ: Why use the language attribute?

꼬리표:

자주 쓰이는 정규식(Regular Expression) 유형

Notes, Web Development 3개의 댓글 »

아래는 어느 프로그래밍 언어에서든 아주 유용하게 쓰일 수 있는 정규 표현식 유형들(Reqular Expression Patterns)을 모아봤다.

// 전자우편 주소: 
/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/
 
// URL: 
/^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/
 
// HTML 태그 - HTML tags: 
/\<(\/?[^\>]+)\>/
 
// 전화 번호 - 예, 123-123-2344 혹은 123-1234-1234: 
/(\d{3}).*(\d{3}).*(\d{4})/
 
// 날짜 - 예, 3/28/2007 혹은 3/28/07: 
/^\d{1,2}\/\d{1,2}\/\d{2,4}$/
 
// jpg, gif 또는 png 확장자를 가진 그림 파일명: 
/([^\s]+(?=\.(jpg|gif|png))\.\2)/
 
// 1부터 50 사이의 번호 - 1과 50 포함: 
/^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$/
 
// 16 진수로 된 색깔 번호: 
/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/
 
// 적어도 소문자 하나, 대문자 하나, 숫자 하나가 포함되어 있는 문자열(8글자 이상 15글자 이하) - 올바른 암호 형식을 확인할 때 사용될 수 있음: 
/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/

정규식과 관련해서, 완성된 정규식 유형을 특정 예문을 놓고 제대로 된 것인지 바로 확인해 보고 싶을 때는 Mac OS X 용 어플리케이션으로 Reggy가 쓸만하고, 또 위젯 형태의 Regex Widget라는 놈과 Firefox Extension인 Regular Expressions Tester도 있다. 물론 자주 사용되는 정규식 유형의 경우 이미 다른 사람들이 쓰고 있는 것이 있을 테니 Regular Expression Library에 공개되어 있는 것 중에서 알맞은 것을 찾아볼 수도 있을 것이다.

다음은 쓸만한 온라인 정규식 테스트 도구:

꼬리표: