Upload
-
View
865
Download
0
Embed Size (px)
DESCRIPTION
HTML5 규격 문서의 내용 중 3장에 해당하는 내용을 정리한 것입니다. 허접... ㅠ.ㅠ
Citation preview
Confidential and proprietary material for authorized persons only. 1
2011/09/19 권우일([email protected], @bitroid) 인프라웨어(http://www.infraware.co.kr)
Copyright ©2010 Infraware Inc. All rights reserved.
Confidential and proprietary material for authorized persons only. 2
목차
• Introduction • Documents • Elements • APIs in HTML Documents • Interactions with Xpath and XSLT* • Dynamic markup insertion • Conclusion
Confidential and proprietary material for authorized persons only. 3
Introduction
Documents����������� ������������������ 객체����������� ������������������ 구조����������� ������������������
HTML����������� ������������������ elements����������� ������������������ 별����������� ������������������ 의미����������� ������������������ 및����������� ������������������ 속성과����������� ������������������ 적합한����������� ������������������ 사용����������� ������������������
Web����������� ������������������ Accessibility����������� ������������������ Initiative����������� ������������������ Accessible����������� ������������������ Rich����������� ������������������ Internet����������� ������������������ Applications����������� ������������������ 관련����������� ������������������ sementics����������� ������������������
HTML����������� ������������������ elements에����������� ������������������ 적용되는����������� ������������������ 속성����������� ������������������ 정의����������� ������������������
Element별����������� ������������������ content����������� ������������������ model과����������� ������������������ 의미����������� ������������������ ����������� ������������������
동적����������� ������������������ 마크업����������� ������������������ APIs����������� ������������������ ����������� ������������������
Confidential and proprietary material for authorized persons only. 4
Documents����������� ������������������
Confidential and proprietary material for authorized persons only. 5
Documents
• document 객체(DOM)
§ 브라우저에서 모든 XML, HTML 문서는 document
객체에 의해 기술
§ 브라우저에 출력되는 URL에 해당하는 문서 자체
§ HTML or XML
• HTML로 명시되지 않을 경우는 XML로 간주
Confidential and proprietary material for authorized persons only. 6
Documents | HTMLDocument interface [OverrideBuiltins] interface HTMLDocument { // resource metadata management [PutForwards=href] readonly attribute Location location; readonly attribute DOMString URL; attribute DOMString domain; readonly attribute DOMString referrer; attribute DOMString cookie; readonly attribute DOMString lastModified; readonly attribute DOMString compatMode; attribute DOMString charset; readonly attribute DOMString characterSet; readonly attribute DOMString defaultCharset; readonly attribute DOMString readyState; // DOM tree accessors getter any (in DOMString name); attribute DOMString title; attribute DOMString dir; attribute HTMLElement body; readonly attribute HTMLHeadElement head; readonly attribute HTMLCollection images; readonly attribute HTMLCollection embeds; readonly attribute HTMLCollection plugins; readonly attribute HTMLCollection links; readonly attribute HTMLCollection forms; readonly attribute HTMLCollection scripts; NodeList getElementsByName(in DOMString elementName); NodeList getElementsByClassName(in DOMString classNames); // dynamic markup insertion attribute DOMString innerHTML; HTMLDocument open(in optional DOMString type, in optional DOMString replace); WindowProxy open(in DOMString url, in DOMString name, in DOMString features, in optional boolean replace); void close(); void write(in DOMString... text); void writeln(in DOMString... text);
// user interaction readonly attribute WindowProxy defaultView; readonly attribute Element activeElement; boolean hasFocus(); attribute DOMString designMode; boolean execCommand(in DOMString commandId); boolean execCommand(in DOMString commandId, in boolean showUI); boolean execCommand(in DOMString commandId, in boolean showUI, in DOMString value); boolean queryCommandEnabled(in DOMString commandId); boolean queryCommandIndeterm(in DOMString commandId); boolean queryCommandState(in DOMString commandId); boolean queryCommandSupported(in DOMString commandId); DOMString queryCommandValue(in DOMString commandId); readonly attribute HTMLCollection commands; // event handler IDL attributes attribute Function onabort; attribute Function onblur; attribute Function oncanplay; attribute Function oncanplaythrough; attribute Function onchange; attribute Function onclick; attribute Function oncontextmenu; attribute Function oncuechange; attribute Function ondblclick; attribute Function ondrag; attribute Function ondragend; attribute Function ondragenter; attribute Function ondragleave; attribute Function ondragover; … attribute Function onreset; attribute Function onscroll; attribute Function onseeked; attribute Function onseeking; attribute Function onselect; attribute Function onshow; attribute Function onstalled; attribute Function onsubmit; attribute Function onsuspend; attribute Function ontimeupdate; attribute Function onvolumechange; attribute Function onwaiting; }; Document implements HTMLDocument;
Confidential and proprietary material for authorized persons only. 7
Documents | Other interfaces
• 브라우저는 다른 이름 공간에 대한 문서 인터페이스도 구현 § SVGDocument
§ MathML
§ ...
• 보안을 고려
Confidential and proprietary material for authorized persons only. 8
Documents | metadata
• document.URL : 문서의 주소
• referrer : 해당 문서로 넘어오기 전 Document의 주소
• cookie : Document에 적용되는 http 쿠키 값
• lastModified
• compatMode : 문서가 올바르다면 “CSS1Compat” 반환
• charset : 동적 변경 가능
• characterSet
• defaultCharset : 브라우저의 기본 인코딩 반환
• readyState § readystatechange -> loading || complete
Confidential and proprietary material for authorized persons only. 9
Documents | DOM tree accessors
• document.head
• title : 문서 제목, 첫 번째 title element, namespace별로 우선권 있음
• body
• images
• embeds
• plugins
• links
• forms
• scripts
• APIs § collection = document.getElementsByName(name)
§ collection = document.getElementsByClassName(classes)
§ collection = element. getElementsByClassName(classes)
각����������� ������������������ element별����������� ������������������ HTMLCollection����������� ������������������ 반환����������� ������������������
<div����������� ������������������ id="example">����������� ������������������ ����������� ������������������ ����������� ������������������ <p����������� ������������������ id="p1"����������� ������������������ class="aaa����������� ������������������ bbb"/>����������� ������������������ ����������� ������������������ ����������� ������������������ <p����������� ������������������ id="p2"����������� ������������������ class="aaa����������� ������������������ ccc"/>����������� ������������������ ����������� ������������������ ����������� ������������������ <p����������� ������������������ id="p3"����������� ������������������ class="bbb����������� ������������������ ccc"/>����������� ������������������ </div>����������� ������������������
Confidential and proprietary material for authorized persons only. 10
Documents | Creating documents
• createDocument() method
§ document = document.implementation.createHTMLDocument(title)
[Supplemental,����������� ������������������ NoInterfaceObject]����������� ������������������ interface����������� ������������������ DOMHTMLImplementation����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ Document����������� ������������������ createHTMLDocument(in����������� ������������������ DOMString����������� ������������������ title);����������� ������������������ };����������� ������������������ DOMImplementation����������� ������������������ implements����������� ������������������ DOMHTMLImplementation;����������� ������������������
Confidential and proprietary material for authorized persons only. 11
Elements����������� ������������������
Confidential and proprietary material for authorized persons only. 12
Elements | HTMLElement interface
• DOM 내부의 모든 element는 고유한 semantic을 가짐
§ 각 element는 주어진 의미와 목적에 맞게 사용되어야 함
§ 문서의 의미는 동적으로 변화
§ eg. progress element
• 모든 HTML element는 HTMLElement 객체를 기본
인터페이스로 상속
Confidential and proprietary material for authorized persons only. 13
Elements | HTMLElement interface interface HTMLElement : Element { // DOM tree accessors NodeList getElementsByClassName(in DOMString classNames); // dynamic markup insertion attribute DOMString innerHTML; attribute DOMString outerHTML; void insertAdjacentHTML(in DOMString position, in DOMString text); // metadata attributes attribute DOMString id; attribute DOMString title; attribute DOMString lang; attribute DOMString dir; attribute DOMString className; readonly attribute DOMTokenList classList; readonly attribute DOMStringMap dataset; // user interaction attribute boolean hidden; void click(); attribute long tabIndex; void focus(); void blur(); attribute DOMString accessKey; readonly attribute DOMString accessKeyLabel; attribute boolean draggable; [PutForwards=value] attribute DOMSettableTokenList dropzone; attribute DOMString contentEditable; readonly attribute boolean isContentEditable; attribute HTMLMenuElement contextMenu; attribute boolean spellcheck; // command API readonly attribute DOMString commandType; readonly attribute DOMString label; readonly attribute DOMString icon; readonly attribute boolean disabled; readonly attribute boolean checked; // styling readonly attribute CSSStyleDeclaration style;
// event handler IDL attributes attribute Function onabort; attribute Function onblur; attribute Function oncanplay; attribute Function oncanplaythrough; attribute Function onchange; attribute Function onclick; attribute Function oncontextmenu; attribute Function oncuechange; attribute Function ondblclick; attribute Function ondrag; attribute Function ondragend; attribute Function ondragenter; attribute Function ondragleave; attribute Function ondragover; attribute Function ondragstart; attribute Function ondrop; attribute Function ondurationchange; attribute Function onemptied; attribute Function onended; attribute Function onerror; attribute Function onfocus; attribute Function oninput; attribute Function oninvalid; attribute Function onkeydown; attribute Function onkeypress; attribute Function onkeyup; attribute Function onload; attribute Function onloadeddata; attribute Function onloadedmetadata; attribute Function onloadstart; attribute Function onmousedown; attribute Function onmousemove; attribute Function onmouseout; attribute Function onmouseover; attribute Function onmouseup; attribute Function onmousewheel; attribute Function onpause; attribute Function onplay; attribute Function onplaying; attribute Function onprogress; … }; interface HTMLUnknownElement : HTMLElement { };
Confidential and proprietary material for authorized persons only. 14
Elements | Global attributes
• accesskey • class • contenteditable • contextmenu • dir(ltr, rtl, or auto) • draggable • dropzone • hidden • id • lang • spellcheck • style • tabindex • title
• 아래 속성은 모든 HTML element에서 사용 가능
• onabort • onblur* • oncanplay • oncanplaythrough • onchange • onclick • oncontextmenu • oncuechange • ondblclick • ondrag • ondragend … • onvolumechange • onwaiting
Confidential and proprietary material for authorized persons only. 15
Elements | Global attributes
• data-* attribute § *는 최소 한문자 이상의 XML 호환 문자
§ 이름 공간을 가지지 않음
§ 페이지, 또는 응용 프로그램에 종속적인 데이터 저장 용도 • 적절한 데이터 타입이 없을 경우
• element.dataset – DOMStringMap 객체 반환
– eg. data-foo-bar=“” -> element.dataset.fooBar 로 변환
<ol>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <li����������� ������������������ data-length="2m11s">Beyond����������� ������������������ The����������� ������������������ Sea</li>����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ...����������� ������������������ </ol>����������� ������������������
범용성����������� ������������������ 없는����������� ������������������ 데이터����������� ������������������ 타입����������� ������������������
Confidential and proprietary material for authorized persons only. 16
Elements | Element definitions
• Categories § Element가 속한 범주의 목록
• Contexts in which this element can be used § Element가 어떤 문맥에서 사용될 수 있는지, content
model과 관련
• Content model
• Content attributes
• DOM interface
Confidential and proprietary material for authorized persons only. 17
Elements | Content model
• HTML element가 가질 수 있는 컨텐트의 속성
body와����������� ������������������ 응용����������� ������������������ 프로그램에서����������� ������������������ 사용되는����������� ������������������ 대부분의����������� ������������������ element����������� ������������������ 포함����������� ������������������
미분류����������� ������������������ 데이터����������� ������������������ 포함(eg.����������� ������������������ RDF)����������� ������������������
Confidential and proprietary material for authorized persons only. 18
Elements | Content model
heading과����������� ������������������ footer의����������� ������������������ 범위����������� ������������������ 정의����������� ������������������
섹션(sectioning����������� ������������������ content����������� ������������������ 등)의����������� ������������������ 헤더����������� ������������������ 정의����������� ������������������
Confidential and proprietary material for authorized persons only. 19
Elements | Content model
문서����������� ������������������ 텍스트,����������� ������������������ 또는����������� ������������������ 텍스트����������� ������������������ 내부����������� ������������������ 마크업����������� ������������������ 요소들����������� ������������������
다른����������� ������������������ 자원을����������� ������������������ 문서에����������� ������������������ 삽입하는����������� ������������������ 컨텐트,����������� ������������������ HTML����������� ������������������ 이름����������� ������������������ 공간에����������� ������������������ 속하지����������� ������������������ 않으면서����������� ������������������ 내용을����������� ������������������ 포함하는����������� ������������������ 것들����������� ������������������
Confidential and proprietary material for authorized persons only. 20
Elements | Content model
사용자와����������� ������������������ 상호작용을����������� ������������������ 위한����������� ������������������ 것.����������� ������������������ 이벤트를����������� ������������������ 발생할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 것����������� ������������������
• Transparent content model § 부모 element의 content model을 따르는 element
§ eg. <p><object><param><ins><map><a����������� ������������������ href="/">Apples</a></map></ins></object></p>����������� ������������������
Phrasing����������� ������������������ content����������� ������������������ Phrasing����������� ������������������ content����������� ������������������ transparent����������� ������������������ content����������� ������������������
Confidential and proprietary material for authorized persons only. 21
APIs in HTML documents
• Element.tagname, Node.nodename § Element 이름을 ASCII 대문자로 반환
• Document.createElement(arg) § 먼저 아규먼트를 소문자로 변환
• Element.[set|get]Attribute()
• Element.[set|get]setAttributeNode() § Attribute 이름을 소문자로 치환
• Document.getElementsByTagName(arg)
• Element.getElementsByTagName(arg) § 아규먼트는 소문자로 치환
• DOM 코어 정의에 따라 API 반환 값의 형태가 변경될 수 있음
Confidential and proprietary material for authorized persons only. 22
Interactions����������� ������������������ with����������� ������������������ ����������� ������������������ Xpath����������� ������������������ and����������� ������������������ XSLT����������� ������������������
• Xpath와의 상호작용???
• XSLT 처리기는 메서드가 html
이라면 DOM을 출력해야 한
다는 의미
Confidential and proprietary material for authorized persons only. 23
Dynamic����������� ������������������ markup����������� ������������������ insertion����������� ������������������
Confidential and proprietary material for authorized persons only. 24
Dynamic markup insertion
• Opening the input stream § document = document.open([type[, replace]])
• if type이 생략되거나 “text/html” 이면, – then, document는 HTML파서와 연결
– else, 평범한 텍스트로 간주
§ window = document.open(url, name, features [, replace]) • window.open() 메서드와 동일
• Closing the input stream § document.close()
• document.write(text…)
• 동적으로 문서에 markup 삽입하는 APIs
Confidential and proprietary material for authorized persons only. 25
Dynamic markup insertion
• innerHTML § innerHTML 노드 내용의 마크업 표시 § document.innerHTML
§ element.innerHTML
• outerHTML § Element와 그 내용의 마크업 표시
§ element.outerHTML
• insertAdjacentHTML § element.insertAdjacentHTML(position, text)
• 주어진 문자열, text를 HTML, XML로 파싱하고 그 결과로 생성된 노드를 position 아규먼트가 지정하는 위치에 삽입
Confidential and proprietary material for authorized persons only. 26
Conclusion
• Web과 검색엔진의 관계
• Web이 우선인가? 검색엔진이 우선인가?
Confidential and proprietary material for authorized persons only. 27
Thank you Headquarter and Research Institute: Bando B/D 2,3,4,8F, 48-1 Banpo-dong, Seocho-gu, Seoul, KOREA. 137-040 Tel. +82 2 537 0538 Fax. +82 2 535 0534
Beijing Office: Room908, Building 16, China Central Place, No.89, Jian Guo lu Chaoyang District, Beijing, CHINA. Tel. +86 10 65331556/7 Fax. +86 10 65331559 U.S. Office: 3003 North First Street San Jose, CA 95134, U.S.A