2013년 11월 12일 화요일

[튜토리얼/한글화] HTML에서 Custom Element를 통한 새로운 엘리먼트 정의하기(Custom Elements defining new elements in HTML)

HTML5Rocks의 'HTML에서 커스텀 엘리먼트를 이용한 새 엘리먼트를 정의하기(Custom Elements defining new elements in HTML)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

Custom Element는 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM이 컴포넌트의 DOM, CSS, JS 등을 감추는 역할(encapsulation)을 하고, HTML Template가 DOM의 복제 및 재사용성을 제공하고, HTML Imports가 웹 문서 내에 외부 HTML 문서 리소스를 포함(Import)하기 위한 기능을 제공한다면 Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 합니다.

이번 번역은 '신현진'님께서 진행하셨습니다. html5rocks.com 관련한 contribution 가이드도 번역을 해놓으셨네요. 관심있으신 분들은 방문해보시기 바랍니다. :)



TL;DR;


웹은 문서의 구조적인 형식을 가지고 있지만 HTML 엘리먼트가 미리 정의된 엘리먼트에 대해서만 사용 가능하다는 문제로 현재에도 웹앱을 구축하는데 있어서는 많은 이슈를 안고 있습니다. <div>가 끝도 없이 중첩되어 나타나는 <div> Soup가 대표적인 예입니다.

Custom Element는 HTML의 엘리먼트를 사용자가 문서에서 확장하여 사용할 수 있도록 기능을 제공하고 있으며 Web Components에서 가장 중요한 기본 API입니다. Web Components는 다음과 Custom Element에 의한 확장이 반드시 필요합니다.

이 글에서는 아래 내용에 대한 개념 설명과 구현 예제를 설명하고 있습니다.

  1. 새로운 HTML/DOM 엘리먼트 정의
  2. 다른 엘리먼트로부터 엘리먼트 확장
  3. 태그에 대한 사용자 기능의 확장
  4. 기존 DOM 엘리먼트 API 확장

참고 글