HTML5Rocks/KO: [튜토리얼/한글화] Shadow DOM 201: CSS와 스타일링 (Shadow DOM 201: CSS and Styling)

2014년 1월 20일 월요일

[튜토리얼/한글화] Shadow DOM 201: CSS와 스타일링 (Shadow DOM 201: CSS and Styling)

HTML5Rocks의 Shadow DOM 관련 튜토리얼 중 +Eric Bidelman의 'Shadow DOM 201: CSS와 스타일링 (Shadow DOM 201: CSS and Styling)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

웹 컴포넌트 관련 튜토리얼마다 말씀드리는 내용입니다만 Shadow DOM 역시 이전의 Custom Element나 HTML Imports처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM은 DOM에 대한 캡슐화(Encapsulation)와 같은 매우 강력한 기능을 제공합니다. HTML5Rocks에는 다음과 같이 Shadow DOM에 대한 3개의 튜토리얼이 업데이트되어 있습니다.

Shadow DOM 101 - Shadow DOM의 기초적인 개념 및 구조
Shadow DOM 201: CSS and Styling - Shadow DOM의 CSS 규칙 적용 및 스타일화 방법
Shadow DOM 301: Advanced Concepts and DOM API - 다중 ShadowRoot 사용 및 자바스크립트를 통한 삽입 등의 발전된 DOM 동작

이 튜토리얼은 Shadow DOM를 사용할 때 캡슐화된 DOM 내의 스타일과 호스트 문서로부터의 스타일 상속 혹은 상속을 재설정하는 방법 등에 대해 설명합니다.

"Shadow DOM이 컴포넌트를 구성하는 DOM을 감추는 역할(encapsulation)뿐만이 아니라 스타일에 대한 캡슐화를 지원함으로써 여러분은 배포된(혹은 배포한) 웹 컴포넌트에 대해 여러분의 스타일을 유지하거나 반대로 사용자의 페이지의 Look&Feel을 상속받아 위화감 없는 스타일을 구성할 수도 있습니다. 이러한 스타일에 대한 캡슐화는 특히 사이트를 구축하는 UI 요소로써는 매우 중요한 속성이 될 것입니다. 더불어 이러한 캡슐화된 스타일을 어떻게 관리할 것인가도 웹 컴포넌트의 사용자들에게는 중요한 지점이 될 것입니다."

TL;DR;

이 튜토리얼은 Shadow DOM 101에서 다뤘던 개념들을 기초로 하여 Shadow DOM의 외양(Look&Feel)을 다루기 위한 몇가지 방법과 개념에 대해 다룹니다.

Shadow DOM은 DOM 자체에 대한 캡슐화(Encapsulation) 외에도 스타일에 대한 캡슐화를 지원하고 있습니다. 이렇게 스타일에 관련된 Shadow DOM의 핵심 기능 중의 하나는 섀도 경계(shadow boundary)입니다. Shadow DOM이 DOM에 대한 캡슐화만 지원하는 것이 아니라 자유로운 스타일 캡슐화를 제공하여 Shadow DOM 내의 스타일을 외부에서 격리시켜 유지하거나 반대로 외부의 스타일을 그대로 상속받아 위화감 없이 페이지의 Look & Feel을 유지할 수도 있습니다.

특히 :host를 이용하여 호스트가 되는 엘리먼트에 따라서 스타일을 다르게 지정하거나 확장하는 것이 가능하며, ^과 ^^ 연결자를 통해 섀도 경계(Shadow Boundary)를 무효화하는 것처럼 Shadow Tree 내의 스타일에 관여할 수도 있습니다. (^은 Hat, ^^은 Cat이라고 부릅니다.) 이러한 섀도 경계를 가로지르는 스타일링의 경우 Shadow DOM의 사용자가 정의한 스타일을 손쉽게 연결할 수 있도록 CSS Variable을 이용한 스타일 연결을 만들어내거나 .resetStyleInheritance 혹은 .applyAuthorStyles를 이용하여 스타일에 대한 상속 적용 여부를 결정지을 수도 있습니다. 또한 Shadow DOM 내에 배포된 노드들의 경우는 의사 엘리먼트(::content)를 이용하여 유연하게 확장할 수 있습니다.

보다 자세한 내용은 튜토리얼을 참고하시기 바랍니다.