4. 문서 처리를 지원하기 위해 문서에 추가되는 정보. 마크업 정보는 문서의 논리적 구성이나
체제와 같은 문서의 포맷을 지정하거나, 문서 내용의 찾아보기 또는 찾아보기 작업(indexing)
방법을 지정하거나, 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른 요소와의
연결(link)을 지정한다. 마크업 정보를 표현하는 언어를 마크업 언어라고 한다. 마크업 정보를
문서 중에 삽입하는 작업을 말한다.
출처 : [네이버 지식백과] 마크업 [markup] (IT용어사전, 한국정보통신기술협회)
5. 마크업 [markup]
1. 문서 처리를 지원하기 위해 문서에 추가되는 정보.
• 마크업 정보는 문서의 논리적 구성이나 체제와 같은 문서의 포맷을 지정하거나,
• 문서 내용의 찾아보기 또는 찾아보기 작업(indexing) 방법을 지정하거나,
• 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른 요소와의 연결(link)을
지정한다.
• 마크업 정보를 표현하는 언어를 마크업 언어라고 한다.
2. 마크업 정보를 문서 중에 삽입하는 작업.
출처 : [네이버 지식백과] 마크업 [markup] (IT용어사전, 한국정보통신기술협회)
26. 1. DOM 트리의 캡슐화 문제를 다루고 있음.
- Style
- Script
2. 크롬 25 버전 이상에서 prefix 붙여 사용 가능함.
(설정하기 > 실험용 웹 플랫폼 기능 사용일 경우 prefix 필요 없음)
27. Shadow DOM can be applied to an element by calling the createShadowRoot method.
This returns a ShadowRoot node which can then be populated with DOM nodes.
28. An element with shadow DOM is called a shadow host. When an element has shadow DOM,
the element's children are not rendered; the content of the shadow DOM is rendered instead.
32. 스타일의 상속 및 재설정
• .resetStyleInheritance
false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지
true - 경계에서 상속가능한 속성들을 initial으로 재설정
• .applyAuthorStyles
true - 저작자의 문서 내에 정의된 속성을 적용.
false - 디폴트. 저작 스타일은 섀도 트리에 적용되지 않음.
33. 배포된 노드들의 스타일링
• ::content 의사 엘리먼트(pseudo element)
• 삽입지점들에서 스타일을 재설정하기
이벤트
Shadow Boundary를 넘지 못하는 이벤트
abort, error, select, change, load, reset, resize, scroll,
selectstart
36. Template
특별한 어플리케이션을 위한 시작점으로 사용되는
미리 작성된 형식을 가진 문서나 파일.
즉, 형식(Format)은 사용될 때마다 매번 재생성하지 않아도 됨.
37. 1. 이것의 컨텐츠는 활성화가 될 때까지 효과적으로 비활성화됩니다.
기본적으로 여러분의 마크업 숨겨진 DOM이며 렌더링되지 않습니다.
2. 템플릿 안의 어떠한 컨텐츠라도 부작용을 가지지 않습니다.
템플릿이 사용될 때까지 스크립트는 실행되지 않으며 이미지는 로딩되지 않고 오디오는 재생되지 않는 등
3. 컨텐츠는 문서 내에 있지 않도록 고려되어야 합니다.
메인 페이지에서 document.getElementById()나 querySelector()의 사용은
템플릿의 자식 노드들을 반환하지 않을 것입니다.
4. 템플릿은 <head>, <body> 혹은 <frameset> 내의 어느 곳에도 위치할 수 있습니다.
"어느 곳에서도"는 <template>가 content model의 자식들을 제외한...
HTML 파서가 허가하지 않는 모든 위치에서도 안전하게 사용될 수 있다는 것을 의미한다는데
주의하시기 바랍니다.
또한 아래에서 보시다시피 <table>이나 <select>의 자식처럼 둘 수도 있습니다.
41. 1. 새로운 엘리먼트를 개발자가 정의할 수 있음
• 하나의 태그에 사용자 지정 기능을 함께 논리적으로 제공하기
• 새 HTML/DOM elements 정의하기
• 다른 elements로부터 확장된 element 만들기
• 존재하는 DOM element의 API 확장하기
2. 주의사항
• 엘리먼트 이름은 반드시 dash(-)를 포함해야 함.
42. 새로운 엘리먼트를 등록하는 방법
기본적으로 HTMLElement 를 상속받으나, 변경 가능함.
네이티브 엘리먼트를 확장하는 방법
- prototype을 반드시 상속받아야 함
- 지원하지 않는 브라우저에서는 HTMLUnknownElement 이다.
43. Unresolved elements
그들의 정의가 브라우저에 등록되기 전엔 선언되거나 만들어 질 수 없다.
이름 상속받은 parent 예
Unresolved element HTMLElement <x-tabs>, <my-element>,
<my-awesome-app>
Unknown element HTMLUnknownElement <tabs>, <foo_bar>
44. Lifecycle callback methods
element가 존재하는 시간 중 흥미로운 시간의 활용을 위한 방법을 정의할 수 있다.
Callback 이름 호출되는 시기
createdCallback element의 인스턴스가 생성되었을 때
attachedCallback document에 인스턴스가 삽입되었을 때
detachedCallback document에서 인스턴스가 삭제되었을 때
attributeChangedCallback
(attrName, oldVal, newVal)
속성이 추가되거나, 삭제되거나, 갱신되었을 때
47. 선언하기.
<link rel="import" href=“xxx.html">
사용하기.
Chrome ver.31 이상부터 지원됨.
다른 도메인일 경우 CORS(Cross-Origin Resource Sharing)가 되어야 함
지원 여부를 확인할 수 있음.
onload, onerror 이벤트 사용할 수 있음.
import 를 동적으로 변경할 수 있음.
import 된 페이지의 DOM에 접근 가능함.
48. Shadow DOM
• 컴포넌트를 구성하는 DOM과 스타일을 캡슐화.
HTML Template
• DOM의 복제를 통한 재사용.
Custom Element
• 사용할 엘리먼트를 개발자가 직접 등록할 수 있음.
• 컴포넌트의 명시적인 Alias를 선언.
HTML Imports
• 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공
50. • [튜토리얼/MashUp] 웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문
(Web Component: the Gate of Next Front-end Web Developments)
http://html5rocksko.blogspot.kr/2014/02/mashup-web-component-evolution-of-web-development.html
• Web Components: A Tectonic Shift for Web Development
https://html5-demos.appspot.com/static/webcomponents/index.html
https://developers.google.com/events/io/sessions/318907648
• Introduction to Web Components
http://www.w3.org/TR/components-intro/
• WebComponents.org
http://webcomponents.github.io/
• The Chromium Projects > Blink > Web Components
http://www.chromium.org/blink/web-components
• 웹 컴포넌트
http://helloworld.naver.com/helloworld/188655
끝.
element들은 전체적으로 의미가 있습니다. 의미가 있으며, 이해하기 쉬우며, 그리고 무엇보다도 유지보수가 가능합니다.
이 제한 조건은 parser가 일반 element 들로부터 custom element를 구별할 수 있도록 하며 HTML 에 새 태그가 추가 될 때 앞으로의 호환성을 보장합니다.
element B로부터 확장하여 element A를 만들기 위해서 element A는 반드시element B의 prototype으로부터 상속 받아야 합니다.
타입 확장 custom elements 가 됨.
HTMLUnknownElement interface는 현재 specification에 정의 되지 않은 HTML element에서 사용되기 위해 제공된다.
모든 lifecycle callbacks는 optional입니다만 그것이 의미를 갖거나 필요한 때에 정의 됩니다.
예를 들면, 여러분의 element가 충분히 복잡하거나 leftViewCallback()에서 IndexedDB에 연결을 여는 경우 입니다.
DOM으로부터 제거되기 전에detachedCallback()에서 필요한 정리작업을 합니다.
Note: 여러분은 사용자가 탭을 닫을 경우, 예를 들어, 이에 의존하지만 이것을 가능한 최적화된 훅으로 생각해서는 안됩니다.
lifecycle callbacks의 또 다른 사용 예는 element에 기본 이벤트 리스너를 생성하는 경우입니다:
Shadow DOM의 내부에 캡슐화
template으로부터 element 만들기
Import 에 예전엔 이렇게도 쓰임.
<link rel="components" href=“xxx.html">