현행 표준 — 마지막 업데이트 2024년 10월 1일
a
요소
em
요소
strong
요소
small
요소
s
요소
cite
요소
q
요소
dfn
요소
abbr
요소
ruby
요소
rt
요소
rp
요소
data
요소
time
요소
code
요소
var
요소
samp
요소
kbd
요소
sub
및
sup
요소
i
요소
b
요소
u
요소
mark
요소
bdi
요소
bdo
요소
span
요소
br
요소
wbr
요소
a
및 area
요소가 생성하는 링크
a
및
area
요소를 위한 API
alternate
"
author
"
bookmark
"
canonical
"
dns-prefetch
"
expect
"
external
"
help
"
icon
"
license
"
manifest
"
modulepreload
"
nofollow
"
noopener
"
noreferrer
"
opener
"
pingback
"
preconnect
"
prefetch
"
preload
"
privacy-policy
"
search
"
stylesheet
"
tag
"
terms-of-service
"
picture
요소
source
요소
img
요소
source
, img
및
link
요소에 공통된 속성
iframe
요소
embed
요소
object
요소
video
요소
audio
요소
track
요소
TrackEvent
인터페이스
map
요소
area
요소
form
요소
label
요소
input
요소
type
속성의 상태
type=hidden
)
type=text
) 상태 및 검색
상태 (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
input
요소 속성
input
요소 API
button
요소
select
요소
datalist
요소
optgroup
요소
option
요소
textarea
요소
output
요소
progress
요소
meter
요소
fieldset
요소
legend
요소
script
요소
noscript
요소
template
요소
slot
요소
canvas
요소
Path2D
객체
ImageBitmap
렌더링 컨텍스트
OffscreenCanvas
인터페이스
canvas
요소의 보안
Window
,
WindowProxy
, Location
객체에 대한 보안 인프라
Window
객체
WindowProxy
이색 객체
Location
인터페이스
History
인터페이스
NotRestoredReasons
인터페이스
X-Frame-Options
헤더
Refresh
헤더
WindowOrWorkerGlobalScope
믹스인
button
요소
details
및 summary
요소
input
요소를 텍스트 입력 위젯으로 사용
input
요소를 도메인 특정 위젯으로 사용
input
요소를 범위 컨트롤로 사용
input
요소를 색상 선택 도구로 사용
input
요소를 체크박스 및 라디오 버튼 위젯으로 사용
input
요소를 파일 업로드 컨트롤로 사용
input
요소를 버튼으로 사용
marquee
요소
meter
요소
progress
요소
select
요소
textarea
요소
이 명세는 웹 플랫폼의 큰 부분을 상세하게 정의합니다. 다른 명세들과의 관계에서 이 명세의 위치를 다음과 같이 요약할 수 있습니다:
이 섹션은 비규범적입니다.
간단히 말하면: 네.
좀 더 길게 설명하자면: "HTML5"라는 용어는 현대 웹 기술을 지칭하는 유행어로 널리 사용됩니다. 이들 중 많은 부분이 (물론 전부는 아니지만) WHATWG에서 개발되었습니다. 이 문서는 그런 문서 중 하나입니다. 다른 문서는 WHATWG 표준 개요에서 확인할 수 있습니다.
이 섹션은 비규범적입니다.
HTML은 월드 와이드 웹의 핵심 마크업 언어입니다. 원래 HTML은 과학 문서를 의미론적으로 설명하기 위한 언어로 설계되었습니다. 그러나 그 일반적인 설계는 시간이 지나면서 여러 종류의 문서 및 심지어 응용 프로그램을 설명할 수 있도록 적응되었습니다.
이 섹션은 비규범적입니다.
이 명세서는 이 명세서에 정의된 기능을 사용하는 문서와 스크립트의 작성자, 이 명세서에 정의된 기능을 사용하는 페이지에서 작동하는 도구의 구현자, 그리고 이 명세서의 요구 사항에 따라 문서 또는 구현의 정확성을 확인하려는 사람들을 대상으로 합니다.
이 문서는 웹 기술에 대한 최소한의 기본 지식이 없는 독자에게는 적합하지 않을 수 있습니다. 일부 내용은 명확성을 희생하고 정확성을 위해, 또는 완전성을 위해 간결성을 희생하기 때문입니다. 더 다가가기 쉬운 튜토리얼과 저술 가이드가 주제를 더 부드럽게 소개할 수 있습니다.
특히, 이 명세서의 기술적인 부분을 완전히 이해하려면 DOM 기본에 대한 친숙함이 필요합니다. Web IDL, HTTP, XML, 유니코드, 문자 인코딩, 자바스크립트, CSS에 대한 이해도 일부에서는 도움이 되지만 필수는 아닙니다.
이 섹션은 비규범적입니다.
이 명세서는 정적 문서부터 동적 응용 프로그램에 이르는 접근 가능한 페이지를 작성하기 위한 의미 수준의 마크업 언어 및 관련 의미 수준의 스크립팅 API를 제공하는 것으로 제한됩니다.
이 명세서의 범위에는 프레젠테이션의 매체별 사용자 정의를 제공하는 메커니즘이 포함되지 않습니다(웹 브라우저의 기본 렌더링 규칙은 이 명세서의 끝에 포함되어 있으며, 언어의 일부로서 CSS에 연결하는 몇 가지 메커니즘이 제공됩니다).
이 명세서의 범위는 전체 운영 체제를 설명하는 것이 아닙니다. 특히, 하드웨어 구성 소프트웨어, 이미지 편집 도구, 고급 워크스테이션에서 사용자가 매일 사용하는 응용 프로그램은 범위에 포함되지 않습니다. 응용 프로그램의 경우, 이 명세서는 사용자가 가끔 또는 다양한 위치에서 정기적으로 사용할 것으로 예상되며, 낮은 CPU 요구 사항을 가지는 응용 프로그램을 대상으로 합니다. 이러한 응용 프로그램의 예로는 온라인 구매 시스템, 검색 시스템, 게임(특히 멀티플레이어 온라인 게임), 공개 전화번호부 또는 주소록, 통신 소프트웨어(이메일 클라이언트, 인스턴트 메시징 클라이언트, 토론 소프트웨어), 문서 편집 소프트웨어 등이 있습니다.
이 섹션은 비규범적입니다.
HTML은 첫 5년(1990-1995) 동안 여러 번의 개정을 거쳤고, 주로 처음에는 CERN에서, 이후에는 IETF에서 여러 확장을 경험했습니다.
W3C의 창립과 함께, HTML의 개발은 다시 장소를 옮겼습니다. 1995년 HTML 3.0으로 알려진 HTML 확장의 첫 시도가 중단된 후, 1997년에 완료된 보다 실용적인 접근 방식인 HTML 3.2로 이어졌습니다. 같은 해 말 HTML4가 빠르게 뒤따랐습니다.
그 다음 해, W3C 회원들은 HTML의 진화를 중단하고 XML 기반의 동등한 표현인 XHTML의 작업을 시작하기로 결정했습니다. 이 작업은 새 직렬화만 추가된 HTML4의 XML 재구성인 XHTML 1.0으로 시작되었으며, 2000년에 완료되었습니다. XHTML 1.0 이후, W3C는 XHTML 모듈화라는 배너 아래 다른 작업 그룹이 XHTML을 확장하기 쉽게 만드는 데 초점을 맞추었습니다. 이와 동시에, W3C는 이전의 HTML 및 XHTML 언어와 호환되지 않는 새로운 언어를 개발하는 작업도 진행했으며, 이를 XHTML2라고 불렀습니다.
1998년 HTML의 진화가 중단된 시점에, 브라우저 벤더에 의해 개발된 HTML의 일부 API가 DOM Level 1(1998년)이라는 이름으로 지정되어 공개되었고, DOM Level 2 Core 및 DOM Level 2 HTML(2000년 시작하여 2003년에 완성됨)로 이어졌습니다. 이러한 노력은 이후 일부 DOM Level 3 명세가 2004년에 발표되었지만, Level 3 초안이 모두 완료되기 전에 작업 그룹이 종료되면서 점차 사라졌습니다.
2003년, 차세대 웹 양식으로 자리 잡은 기술인 XForms의 발표는 HTML 자체를 발전시키려는 새로운 관심을 불러일으켰습니다. 이 관심은 XML이 웹 기술로서 기존 배포된 기술(예: HTML)을 대체하기보다는 완전히 새로운 기술(예: RSS 및 이후의 Atom)로서만 제한적으로 배포된다는 인식에서 비롯되었습니다.
XForms 1.0이 도입한 많은 기능을 브라우저가 기존 HTML 웹 페이지와 호환되지 않는 렌더링 엔진을 구현하지 않고도 제공할 수 있도록 HTML4의 양식을 확장할 수 있다는 것을 보여주는 개념 증명이 이 새로운 관심의 첫 결과였습니다. 이 초기 단계에서 초안은 이미 공개적으로 사용 가능했으며, 모든 출처로부터 입력을 이미 요청받고 있었지만, 명세는 오페라 소프트웨어의 저작권 하에 있었습니다.
HTML의 진화가 다시 열려야 한다는 생각은 2004년 W3C 워크숍에서 테스트되었으며, 그 자리에서 HTML5 작업을 뒷받침하는 몇 가지 원칙(아래에 설명됨)과 이전에 언급된 양식 관련 기능만을 다룬 초기 초안 제안서가 모질라와 오페라에 의해 W3C에 공동으로 제시되었습니다. 제안서는 웹의 진화에 대해 이전에 선택된 방향과 충돌한다는 이유로 거부되었습니다. W3C 직원과 회원들은 XML 기반 대체 기술을 계속 개발하기로 투표했습니다.
그 후 얼마 지나지 않아 Apple, Mozilla, Opera는 WHATWG라는 새로운 장소에서 작업을 계속할 의도를 공동으로 발표했습니다. 공개 메일링 리스트가 만들어졌고, 초안은 WHATWG 사이트로 이동되었습니다. 저작권은 이후 세 벤더가 공동으로 소유하고, 명세의 재사용을 허용하도록 수정되었습니다.
WHATWG는 특히 기술이 이전 버전과 호환되어야 한다는 원칙, 명세와 구현이 일치해야 하며 이를 위해 명세를 변경해야 한다면 그렇게 해야 한다는 원칙, 그리고 명세가 구현이 상호 운용성을 완전히 달성할 수 있도록 충분히 상세해야 한다는 원칙에 기반을 두고 있었습니다.
특히 마지막 요구 사항은 HTML5 명세의 범위에 이전에 세 개의 별도 문서로 지정되었던 HTML4, XHTML1, DOM2 HTML이 포함되어야 한다는 것을 의미했습니다. 또한 이전에는 표준으로 간주되지 않았던 것보다 훨씬 더 많은 세부 사항을 포함해야 한다는 것을 의미했습니다.
2006년 W3C는 결국 HTML5 개발에 참여할 의향을 나타냈고, 2007년 WHATWG와 협력하여 HTML5 명세를 개발하기 위해 작업 그룹을 구성했습니다. Apple, Mozilla, Opera는 W3C가 W3C 저작권 하에 명세를 게시할 수 있도록 허용하면서도, WHATWG 사이트에 제한이 적은 라이선스를 가진 버전을 유지했습니다.
수년간 두 그룹은 함께 작업했습니다. 그러나 2011년, 두 그룹은 목표가 다르다는 결론에 도달했습니다: W3C는 "완성된" 버전의 "HTML5"를 발표하기를 원했지만, WHATWG는 계속해서 HTML의 현행 표준을 작업하여 명세를 동결하지 않고, 문제를 수정하며, 필요에 따라 새로운 기능을 추가하여 플랫폼을 발전시키고자 했습니다.
2019년 WHATWG와 W3C는 협력 계약을 체결하여 앞으로 HTML의 단일 버전으로 협력하기로 합의했습니다: 이 문서가 그것입니다.
이 섹션은 비규범적입니다.
HTML의 많은 측면이 처음에는 비합리적이고 일관성이 없는 것처럼 보인다는 점을 인정해야 합니다.
HTML, 이를 지원하는 DOM API, 그리고 많은 지원 기술들은 여러 우선순위를 가진 다양한 사람들이 수십 년에 걸쳐 개발한 것이며, 많은 경우 서로의 존재를 알지 못했습니다.
따라서 여러 출처에서 기능이 발생했으며, 항상 일관되게 설계된 것은 아닙니다. 더욱이 웹의 독특한 특성으로 인해, 구현 버그가 실제로 사실상의 표준이 되었고, 이제는 공식적인 표준이 되었으며, 이는 콘텐츠가 수정되기 전에 의도치 않게 이러한 버그에 의존하여 작성되었기 때문입니다.
이 모든 것에도 불구하고 특정 설계 목표를 준수하려는 노력이 있었습니다. 이들은 다음 몇 개의 하위 섹션에서 설명됩니다.
이 섹션은 비규범적입니다.
웹 저자가 멀티스레딩의 복잡성에 노출되지 않도록 HTML과 DOM API는 어떤 스크립트도 다른 스크립트의 동시 실행을 감지할 수 없도록 설계되었습니다. 심지어 워커와 함께 사용하더라도, 모든 글로벌에서 모든 스크립트의 실행을 완전히 직렬화하는 것으로 구현의 동작을 생각할 수 있습니다.
이 일반적인 설계 원칙의 예외는 JavaScript SharedArrayBuffer
클래스입니다. SharedArrayBuffer
객체를 사용하면 다른 에이전트에서 스크립트가 동시에 실행되고 있음을 관찰할 수 있습니다. 또한, JavaScript 메모리 모델로 인해 이러한 스크립트
간의 직렬화된 스크립트 실행뿐만 아니라 직렬화된 문 실행을 통해서도 나타낼 수 없는 상황이 발생할 수 있습니다.
이 섹션은 비규범적입니다.
이 명세서는 다양한 다른 명세와 상호작용하고 이를 기반으로 합니다. 불행히도, 특정 상황에서는 상충되는 요구로 인해 이 명세서가 다른 명세서의 요구 사항을 위반하게 되었습니다. 이러한 경우, 위반 사항은 각각 "의도적 위반"으로 표시되었으며, 위반 이유가 기록되었습니다.
이 섹션은 비규범적입니다.
HTML에는 안전한 방식으로 의미를 추가할 수 있는 다양한 확장 메커니즘이 있습니다:
작성자는 class
속성을 사용하여 요소를 확장할 수 있으며, 가장
적절한 기존의 "실제" HTML 요소를 사용하면서 자신의 요소를 효과적으로 생성할 수 있습니다. 이 확장 기능을 알지 못하는 브라우저와 다른 도구도 어느 정도 지원할 수
있습니다. 예를 들어, 이 방법은 마이크로포맷에서 사용됩니다.
작성자는 인라인 클라이언트 측 스크립트 또는 서버 측 사이트 전체 스크립트가 처리할 데이터를 data-*=""
속성을 사용하여 포함할 수 있습니다.
이 속성은 브라우저에 의해 절대 건드려지지 않으며, 스크립트가 HTML 요소에서 데이터를 찾아 처리할 수 있도록 합니다.
작성자는 <meta name="" content="">
메커니즘을 사용하여 페이지 전체 메타데이터를 포함할 수 있습니다.
작성자는 rel=""
메커니즘을 사용하여 링크에 특정 의미를 주석으로 달 수 있으며, 이는 링크 유형의 사전 정의된 집합에 대한 확장으로 등록할 수 있습니다. 이 또한
마이크로포맷에서 사용됩니다.
작성자는 <script type="">
메커니즘을 사용하여 인라인 또는 서버 측 스크립트로 추가 처리할 사용자 정의 유형의 데이터를 임베드할 수 있습니다.
작성자는 JavaScript 프로토타이핑 메커니즘을 사용하여 API를 확장할 수 있습니다. 예를 들어, 이것은 스크립트 라이브러리에서 널리 사용됩니다.
작성자는 마이크로데이터 기능(itemscope=""
및
itemprop=""
속성)을 사용하여 다른 응용 프로그램 및 사이트와 공유할 중첩된 이름-값 쌍의 데이터를 임베드할 수 있습니다.
작성자는 커스텀 요소를 정의, 공유 및 사용하여 HTML의 어휘를 확장할 수 있습니다. 유효한 사용자 정의 요소 이름의 요구 사항은 미래에 하이픈이 포함된 로컬 이름을 가진 요소가 HTML, SVG 또는 MathML에 추가되지 않도록 보장합니다.
이 섹션은 비규범적입니다.
이 명세서는 문서와 응용 프로그램을 설명하는 추상 언어와 이 언어를 사용하는 리소스의 메모리 내 표현과 상호작용하기 위한 일부 API를 정의합니다.
메모리 내 표현은 "DOM HTML" 또는 간단히 "DOM"으로 알려져 있습니다.
이 추상 언어를 사용하는 리소스를 전송하는 데 사용할 수 있는 다양한 구체적인 문법이 있으며, 이 명세서에서는 그중 두 가지를 정의합니다.
첫 번째 구체적인 문법은 HTML 문법입니다. 이것은 대부분의 작성자에게 권장되는 형식입니다. 이는 대부분의 기존 웹 브라우저와 호환됩니다. 문서가 text/html
MIME 유형으로 전송되면 웹
브라우저에서 HTML 문서로 처리됩니다. 이 명세서는 단순히 "HTML"로 알려진 최신 HTML 문법을 정의합니다.
두 번째 구체적인 문법은 XML입니다. 문서가 XML MIME
유형으로, 예를 들어 application/xhtml+xml
로
전송되면, 웹 브라우저에서 XML 문서로 처리되어 XML 프로세서에 의해 파싱됩니다. 작성자는 XML과 HTML의 처리가 다르다는 점을 상기해야 합니다. 특히, 사소한 구문 오류라도
XML로 레이블이 지정된 문서가 완전히 렌더링되는 것을 방지할 수 있지만, HTML 문법에서는 무시될 수 있습니다.
HTML의 XML 문법은 이전에 "XHTML"로 불렸지만, 이 명세서는 이 용어를 사용하지 않습니다(다른 이유 중 하나는 MathML 및 SVG의 HTML 문법에 대해 이러한 용어가 사용되지 않기 때문입니다).
DOM, HTML 문법 및 XML 문법은 동일한 콘텐츠를 모두 표현할 수 없습니다. 예를 들어, 네임스페이스는 HTML 문법을 사용하여 표현할 수 없지만, DOM 및 XML 문법에서는
지원됩니다. 유사하게, noscript
기능을
사용하는 문서는
HTML 문법을 사용하여 표현할 수 있지만, DOM이나 XML 문법으로는 표현할 수 없습니다. "-->
" 문자열을 포함하는 주석은 HTML 및 XML 문법에서는
표현할 수 없지만, DOM에서는 표현할 수 있습니다.
이 섹션은 비규범적입니다.
이 명세서는 다음과 같은 주요 섹션으로 나뉩니다:
EventSource
와 Web
Sockets로 알려진 스크립트를 위한 양방향 풀 듀플렉스 소켓 프로토콜을 소개합니다.또한 폐기된 기능 및 IANA 고려사항을 나열한 부록과 여러 색인이 있습니다.
이 명세서는 다른 모든 명세서와 마찬가지로 읽어야 합니다. 먼저, 처음부터 끝까지 여러 번 읽어야 합니다. 그런 다음, 최소한 한 번은 거꾸로 읽어야 합니다. 그 후에는 목차에서 무작위로 섹션을 선택하고 모든 교차 참조를 따라 읽어야 합니다.
아래의 준수 요구 사항 섹션에 설명된 것처럼, 이 명세서는 다양한 준수 클래스에 대한 준수 기준을 설명합니다. 특히, 작성자와 작성된 문서와 같은 생산자에게 적용되는 준수 요구 사항과 웹 브라우저와 같은 소비자에게 적용되는 준수 요구 사항이 있습니다. 이들은 무엇을 요구하는지에 따라 구별할 수 있습니다: 생산자에 대한 요구 사항은 허용되는 것을 명시하고, 소비자에 대한 요구 사항은 소프트웨어가 어떻게 작동해야 하는지를 명시합니다.
예를 들어, "the foo
속성의 값은 유효한 정수여야 한다"는 생산자에 대한 요구 사항입니다. 이는 허용된 값을
명시하기 때문입니다. 반면, "the foo
속성의 값은 정수를 파싱하는 규칙을 사용하여 파싱되어야 한다"는
소비자에 대한 요구 사항입니다. 이는 콘텐츠를 처리하는 방법을 설명합니다.
생산자에 대한 요구 사항은 소비자에게 전혀 영향을 미치지 않습니다.
위의 예를 계속해서, 특정 속성의 값이 유효한 정수로 제한된다는 요구 사항은 소비자에 대한 요구 사항과 전혀 관련이 없습니다. 실제로 소비자는 값이 요구 사항을 준수하는지 여부에 전혀 영향을 받지 않는 불투명한 문자열로 해당 속성을 처리해야 할 수도 있습니다. 또는 (이전 예와 같이) 소비자가 유효하지 않은(이 경우 비숫자) 값을 처리하는 방법을 정의하는 특정 규칙을 사용하여 값을 파싱해야 할 수도 있습니다.
이것은 정의, 요구 사항 또는 설명입니다.
이것은 주석입니다.
이것은 예제입니다.
이것은 열려 있는 이슈입니다.
이것은 경고입니다.
[Exposed =Window ]
interface Example {
// this is an IDL definition
};
variable = object.method([optionalArgument])
이것은 인터페이스의 사용법을 설명하는 작성자에게 주는 참고 사항입니다.
/* this is a CSS fragment */
용어의 정의 인스턴스는 이와 같이 표시됩니다. 해당 용어의 사용은 이와 같이 또는 이와 같이 표시됩니다.
요소, 속성 또는 API의 정의 인스턴스는 이와 같이
표시됩니다. 해당 요소, 속성 또는 API에 대한 참조는 이와 같이
표시됩니다.
다른 코드 조각은 이와 같이
표시됩니다.
변수는 이와 같이 표시됩니다.
알고리즘에서 동기화 섹션의 단계는 ⌛로 표시됩니다.
일부 경우에는 조건과 해당 조건에 적용되는 요구 사항을 포함한 목록의 형태로 요구 사항이 제공됩니다. 이러한 경우 조건에 적용되는 요구 사항은 항상 조건 다음에 나오는 첫 번째 요구 사항 집합이며, 해당 요구 사항에 대해 여러 조건 집합이 있는 경우에도 마찬가지입니다. 이러한 경우는 다음과 같이 표시됩니다:
이 섹션은 비규범적입니다.
기본적인 HTML 문서는 다음과 같습니다:
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Sample page</ title >
</ head >
< body >
< h1 > Sample page</ h1 >
< p > This is a < a href = "demo.html" > simple</ a > sample.</ p >
<!-- this is a comment -->
</ body >
</ html >
HTML 문서는 요소와 텍스트로 구성된 트리로 이루어져 있습니다. 각 요소는 "<body>
"와 같은 시작 태그와 "</body>
"와 같은 종료 태그로 소스에서 표시됩니다. (특정 상황에서는
일부 시작 태그와 종료 태그를 생략할 수 있으며,
다른 태그에 의해 암시될 수 있습니다.)
태그는 요소가 서로 겹치지 않고 완전히 다른 요소 안에 포함되도록 중첩되어야 합니다:
< p > This is < em > very < strong > wrong</ em > !</ strong ></ p >
< p > This < em > is < strong > correct</ strong > .</ em ></ p >
이 명세서는 HTML에서 사용할 수 있는 요소 집합과 요소를 중첩할 수 있는 방법에 대한 규칙을 정의합니다.
요소는 작동 방식을 제어하는 속성을 가질 수 있습니다. 아래 예에서는 하이퍼링크가
a
요소와 해당 href
속성을
사용하여 생성되었습니다:
< a href = "demo.html" > simple</ a >
속성은 시작 태그 안에 배치되며, 이름과 값으로 구성되며,
"=
" 문자로 구분됩니다. 속성 값에 ASCII 공백 문자나 "
, '
,
`
, =
, <
, >
가 포함되지 않은 경우에는 따옴표를 사용하지 않아도 됩니다. 그렇지
않은 경우, 단일 또는 이중 따옴표를 사용하여 값을 따옴표로 묶어야 합니다. 값이 빈 문자열인 경우 "=
" 문자와 함께 값을 생략할 수 있습니다.
<!-- 빈 속성 -->
< input name = address disabled >
< input name = address disabled = "" >
<!-- 값이 있는 속성 -->
< input name = address maxlength = 200 >
< input name = address maxlength = '200' >
< input name = address maxlength = "200" >
HTML 사용자 에이전트(예: 웹 브라우저)는 이 마크업을 파싱하여 이를 DOM(문서 객체 모델) 트리로 변환합니다. DOM 트리는 문서의 메모리 내 표현입니다.
DOM 트리는 여러 종류의 노드를 포함하며, 특히 DocumentType
노드, Element
노드, Text
노드, Comment
노드 및 경우에 따라 ProcessingInstruction
노드를 포함합니다.
이 섹션의 위쪽에 있는 마크업 스니펫은 다음과 같은 DOM 트리로 변환됩니다:
이 트리의 문서 요소는 html
요소이며,
HTML 문서에서 항상 이 위치에 나타납니다. 이 요소는 head
요소와
body
요소,
그리고 그 사이의 텍스트
노드를 포함합니다.
DOM 트리에는 예상보다 많은 텍스트
노드가 포함되어 있으며, 소스에는 여러 개의 공백 문자(여기서는 "␣"로 표시)와 줄 바꿈("⏎")이 포함되어 있으며, 이들은 모두 DOM에서 텍스트
노드로 나타납니다. 그러나 역사적 이유로 인해 원본 마크업의 모든 공백 문자와 줄 바꿈이 DOM에 나타나지는 않습니다. 특히 head
시작 태그
이전의 모든 공백 문자는 조용히 삭제되고, body
종료 태그
이후의 모든 공백 문자는 body
의 끝에
배치됩니다.
head
요소에는
title
요소가 포함되어 있으며, 이 요소에는 "Sample page"라는 텍스트가 있는 텍스트
노드가 포함되어 있습니다. 유사하게, body
요소에는
h1
요소, p
요소 및 주석이
포함되어 있습니다.
이 DOM 트리는 페이지의 스크립트에서 조작할 수 있습니다. 스크립트(일반적으로 JavaScript로 작성됨)는 script
요소를
사용하거나 이벤트 핸들러 콘텐츠 속성을 사용하여 포함할 수 있는
작은 프로그램입니다. 예를 들어, 여기에서 폼의 output
요소의
값을 "Hello World"로 설정하는 스크립트가 포함된 폼이 있습니다:
< form name = "main" >
Result: < output name = "result" ></ output >
< script >
document. forms. main. elements. result. value = 'Hello World' ;
</ script >
</ form >
DOM 트리의 각 요소는 객체로 표현되며, 이러한 객체에는 조작할 수 있는 API가 있습니다. 예를 들어, 링크(예: 위 트리의 a
요소)는 "href
"
속성을 여러 가지 방법으로 변경할 수 있습니다:
var a = document. links[ 0 ]; // 문서에서 첫 번째 링크를 얻습니다
a. href = 'sample.html' ; // 링크의 대상 URL을 변경합니다
a. protocol = 'https' ; // URL의 스킴 부분만 변경합니다
a. setAttribute( 'href' , 'https://example.com/' ); // 콘텐츠 속성을 직접 변경합니다
DOM 트리는 구현이 처리하고 표시할 때(특히 웹 브라우저와 같은 상호작용형 구현에서) HTML 문서를 표현하는 방식으로 사용되기 때문에, 이 명세서는 주로 위에서 설명한 마크업 대신 DOM 트리를 기준으로 작성되었습니다.
HTML 문서는 상호작용 콘텐츠의 매체 독립적인 설명을 나타냅니다. HTML 문서는 화면에 렌더링되거나, 음성 합성기를 통해 읽히거나, 점자 디스플레이에 표시될 수 있습니다. 이러한 렌더링이 정확히 어떻게 이루어지는지에 영향을 미치기 위해, 작성자는 CSS와 같은 스타일링 언어를 사용할 수 있습니다.
다음 예에서는 CSS를 사용하여 페이지가 노란색 배경에 파란색 텍스트로 설정되었습니다.
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Sample styled page</ title >
< style >
body { background : navy ; color : yellow ; }
</ style >
</ head >
< body >
< h1 > Sample styled page</ h1 >
< p > This page is just a demo.</ p >
</ body >
</ html >
HTML을 사용하는 방법에 대한 자세한 내용은 작성자가 튜토리얼과 가이드를 참조할 것을 권장합니다. 이 명세서에 포함된 일부 예제도 유용할 수 있지만, 초보 작성자는 이 명세서가 필요에 따라 정의된 언어를 처음에는 이해하기 어려울 수 있는 수준의 세부 사항으로 정의하고 있다는 점을 유의해야 합니다.
이 섹션은 비규범적입니다.
HTML을 사용하여 상호작용 사이트를 만들 때, 공격자가 사이트 자체 또는 사이트 사용자의 무결성을 손상시킬 수 있는 취약점을 도입하지 않도록 주의해야 합니다.
이 문제에 대한 포괄적인 연구는 이 문서의 범위를 벗어나며, 작성자는 이 문제를 더 자세히 연구할 것을 강력히 권장합니다. 그러나 이 섹션에서는 HTML 애플리케이션 개발에서 흔히 발생하는 몇 가지 함정을 간단히 소개하려고 합니다.
웹의 보안 모델은 "출처" 개념을 기반으로 하며, 따라서 웹에서 발생할 수 있는 많은 공격은 교차 출처 작업과 관련이 있습니다. [ORIGIN]
신뢰할 수 없는 입력(예: 텍스트 댓글, URL 매개변수의 값, 타사 사이트의 메시지 등과 같은 사용자 생성 콘텐츠)을 수락할 때는 사용하기 전에 데이터를 검증하고 표시할 때 적절히 이스케이프해야 합니다. 이를 수행하지 않으면 악의적인 사용자가 거짓 사용자 정보 제공(예: 음수 나이와 같은 사소한 것에서부터)부터 정보를 포함하는 페이지를 볼 때마다 스크립트를 실행하여 공격을 전파하는 등의 심각한 공격, 서버의 모든 데이터를 삭제하는 등의 치명적인 공격에 이르기까지 다양한 공격을 수행할 수 있습니다.
사용자 입력을 검증하는 필터를 작성할 때는 항상 허용 목록 기반 필터를 사용하여 알려진 안전한 구문만 허용하고 모든 다른 입력을 허용하지 않도록 해야 합니다. 블랙리스트 기반 필터는 알려진 나쁜 입력을 차단하고 나머지는 모두 허용하는 방식으로는 보안이 보장되지 않습니다. 나쁜 입력 중 일부는 아직 알려지지 않았을 수 있기 때문입니다(예: 미래에 새로운 공격 방식이 발명될 수 있습니다).
예를 들어, URL의 쿼리 문자열을 확인하여 표시할 내용을 결정한 다음, 사이트가 해당 페이지로 사용자를 리디렉션하여 메시지를 표시한다고 가정해 보겠습니다:
< ul >
< li >< a href = "message.cgi?say=Hello" > Say Hello</ a >
</ ul >
메시지가 이스케이프 처리 없이 사용자에게 표시되면, 공격자가 스크립트 요소를 포함하는 URL을 생성할 수 있습니다:
https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E
공격자가 피해자인 사용자가 이 페이지를 방문하도록 설득하면, 공격자가 선택한 스크립트가 페이지에서 실행됩니다. 이러한 스크립트는 사이트가 제공하는 것에 따라 무수히 많은 악의적인 작업을 수행할 수 있습니다. 예를 들어, 사이트가 전자 상거래 사이트인 경우, 이러한 스크립트는 사용자가 인지하지 못한 상태에서 임의의 원치 않는 구매를 하도록 만들 수 있습니다.
이것을 크로스 사이트 스크립팅 공격이라고 합니다.
사이트에 코드를 실행하도록 속이기 위해 사용할 수 있는 여러 구문이 있습니다. 작성자는 허용 목록 필터를 작성할 때 다음과 같은 항목을 고려할 것을 권장합니다:
img
와
같은 무해해 보이는 요소를 허용할 때 제공된 속성도 허용 목록에 포함하는 것이 중요합니다. 모든 속성을 허용하면 공격자는 예를 들어 onload
속성을 사용하여 임의의 스크립트를 실행할 수 있습니다.javascript:
"이지만,
사용자 에이전트는 다른 스킴도 구현할 수 있으며 실제로 역사적으로 구현한 적도 있습니다.base
요소를 삽입할 수 있도록 허용하면 페이지의 script
요소가 상대 링크를 사용하는 경우 하이재킹당할 수 있으며, 마찬가지로 모든 폼 제출이 악의적인 사이트로 리디렉션될 수 있습니다.사용자가 사용자별 부작용이 있는 폼 제출을 할 수 있는 사이트, 예를 들어 사용자의 이름으로 포럼에 메시지를 게시하거나, 구매를 하거나, 여권을 신청하는 등의 사이트에서는 요청이 사용자가 의도적으로 한 것인지, 아니면 다른 사이트가 사용자를 속여 알지 못하게 요청을 수행하게 한 것인지를 확인하는 것이 중요합니다.
이 문제는 HTML 폼이 다른 출처로 제출될 수 있기 때문에 발생합니다.
사이트는 사용자별 숨겨진 토큰으로 폼을 채우거나 모든 요청에 대해 `Origin
`
헤더를 확인하여 이러한 공격을 방지할 수 있습니다.
사용자가 원하지 않는 작업을 수행하는 인터페이스를 제공하는 페이지는 사용자가 인터페이스를 활성화하도록 속일 수 있는 가능성을 방지하도록 설계해야 합니다.
사용자가 이러한 속임수에 넘어갈 수 있는 한 가지 방법은 악성 사이트가 피해자 사이트를 작은 iframe
에
배치한 다음, 사용자가 반응 게임을 하도록 설득하는 것입니다. 사용자가 게임을 하고 있으면 악성 사이트는 사용자가 클릭하려는 순간 iframe을 마우스 커서 아래에 빠르게
위치시켜 사용자가 피해자 사이트의 인터페이스를 클릭하도록 속일 수 있습니다.
이를 방지하기 위해 프레임에서 사용될 것으로 예상하지 않는 사이트는 프레임에 있지 않음을 감지한 경우에만 인터페이스를 활성화하는 것이 좋습니다(예: window
객체를 top
속성의
값과 비교하여 확인).
이 섹션은 비규범적입니다.
HTML에서 스크립트는 "완료될 때까지 실행"되는 의미를 가지며, 이는 브라우저가 다른 작업(예: 추가 이벤트 발생 또는 문서 파싱 지속)을 수행하기 전에 일반적으로 스크립트를 중단 없이 실행한다는 것을 의미합니다.
반면에 HTML 파일의 파싱은 점진적으로 발생하므로, 파서가 언제든지 중단되어 스크립트를 실행할 수 있습니다. 이는 일반적으로 좋은 일이지만, 작성자는 이벤트 핸들러를 이벤트가 발생할 수 있는 시점 이후에 연결하지 않도록 주의해야 합니다.
이를 안정적으로 수행하는 두 가지 방법은 이벤트 핸들러 콘텐츠 속성을 사용하거나, 동일한 스크립트에서 요소를 생성하고 이벤트 핸들러를 추가하는 것입니다. 후자의 방법은 앞서 언급한 것처럼, 스크립트가 추가 이벤트가 발생하기 전에 완료될 때까지 실행되므로 안전합니다.
이것이 발생할 수 있는 한 가지 방법은 img
요소와 load
이벤트와 관련된 것입니다. 특히 이미지가 이미 캐시된 경우(이는 흔한 일입니다) 요소가 파싱되자마자 이벤트가 발생할 수 있습니다.
여기에서 작성자는 onload
핸들러를 img
요소에 사용하여 load
이벤트를 포착합니다:
< img src = "games.png" alt = "Games" onload = "gamesLogoHasLoaded(event)" >
스크립트로 요소를 추가하는 경우, 이벤트 핸들러가 동일한 스크립트에서 추가되기만 하면 이벤트가 여전히 누락되지 않습니다:
< script >
var img = new Image();
img. src = 'games.png' ;
img. alt = 'Games' ;
img. onload = gamesLogoHasLoaded;
// img.addEventListener('load', gamesLogoHasLoaded, false); // 이 방법도 작동합니다
</ script >
그러나 작성자가 먼저 img
요소를 생성하고, 별도의 스크립트에서 이벤트 리스너를 추가하면 load
이벤트가 그 사이에 발생하여 이벤트를 놓칠 수 있습니다:
<!-- 이 스타일을 사용하지 마십시오, 경합 상태가 발생할 수 있습니다! -->
< img id = "games" src = "games.png" alt = "Games" >
<!-- 파서가 잠시 멈추는 동안 'load' 이벤트가 여기서 발생할 수 있으며,
이 경우 이벤트를 볼 수 없게 됩니다! -->
< script >
var img = document. getElementById( 'games' );
img. onload = gamesLogoHasLoaded; // 이벤트가 절대 발생하지 않을 수 있습니다!
</ script >
이 섹션은 비규범적입니다.
작성자는 일반적인 실수를 잡기 위해 적합성 검사기(검증기라고도 함)를 사용하는 것이 좋습니다. WHATWG에서는 이러한 도구의 목록을 유지 관리하고 있습니다: https://whatwg.org/validator/
이 섹션은 비규범적입니다.
이전 버전의 HTML 명세서와 달리, 이 명세서는 유효한 문서뿐만 아니라 유효하지 않은 문서의 처리에 대한 요구사항도 일부 자세히 정의하고 있습니다.
그러나 유효하지 않은 콘텐츠의 처리가 대부분의 경우 잘 정의되어 있지만, 문서 적합성 요구사항은 여전히 중요합니다. 실제로, 상호 운용성(특정 콘텐츠를 신뢰할 수 있고 동일하거나 동등한 방식으로 모든 구현이 처리하는 상황)은 문서 적합성 요구사항의 유일한 목표가 아닙니다. 이 섹션에서는 여전히 적합한 문서와 오류가 있는 문서를 구별해야 하는 일반적인 이유를 설명합니다.
이 섹션은 비규범적입니다.
이전 버전의 HTML에서 대부분의 표현적 기능은 더 이상 허용되지 않습니다. 일반적으로 표현 마크업은 여러 가지 문제가 있는 것으로 나타났습니다:
표현 마크업을 사용하여 보조 기술(AT) 사용자에게 수용 가능한 경험을 제공하는 것은 가능하지만(예: ARIA 사용), 이는 의미적으로 적절한 마크업을 사용할 때보다 훨씬 더 어렵습니다. 게다가, 이러한 기술을 사용하더라도 텍스트 모드 브라우저 사용자와 같은 비-AT 비-그래픽 사용자에게 페이지를 접근 가능하게 만드는 데 도움이 되지 않습니다.
반면, 미디어 독립적인 마크업을 사용하면 텍스트 브라우저 사용자 등 더 많은 사용자에게 작동하는 방식으로 문서를 작성할 수 있는 쉬운 방법을 제공합니다.
스타일에 독립적인 방식으로 작성된 사이트를 유지 보수하는 것이 훨씬 더 쉽습니다. 예를 들어, <font color="">
를 사용하는 사이트의 색상을 변경하는
경우, 사이트 전체에 걸쳐 변경해야 하지만, CSS를 기반으로 한 사이트의 유사한 변경은 단일 파일을 변경하여 수행할 수 있습니다.
표현 마크업은 일반적으로 훨씬 더 중복되므로 문서 크기가 커집니다.
이러한 이유로 이 버전의 HTML에서 표현 마크업이 제거되었습니다. 이 변경은 놀라운 일이 아닙니다. HTML4는 많은 해 전에 표현 마크업을 더 이상 사용하지 않도록 하고, 작성자가 표현 마크업에서 벗어나도록 돕기 위해 모드(HTML4 Transitional)를 제공했습니다. 나중에 XHTML 1.1은 이러한 기능을 완전히 폐기했습니다.
HTML에 남아 있는 유일한 표현 마크업 기능은 style
속성과
style
요소입니다. style
속성의 사용은 프로덕션 환경에서 다소 권장되지 않지만,
나중에 별도의 스타일 시트로 직접 이동할 수 있는 규칙을 신속하게 프로토타입화하는 데 유용할 수 있으며, 별도의 스타일 시트가 불편한 경우 특정 스타일을 제공하는 데 유용할 수 있습니다. 유사하게,
style
요소는 배포 또는 페이지별
스타일에 유용할 수 있지만, 스타일이 여러 페이지에 적용되는 경우 일반적으로 외부 스타일 시트가 더 편리합니다.
또한 이전에 표현적이었던 일부 요소가 이 명세서에서 미디어 독립적으로 재정의되었다는 점도 주목할 가치가 있습니다: b
, i
, hr
, s
, small
, u
.
이 섹션은 비규범적입니다.
HTML의 문법은 다양한 문제를 피하기 위해 제한됩니다.
특정 잘못된 문법 구조는 파싱될 때 매우 직관적이지 않은 DOM 트리를 생성할 수 있습니다.
사용자 에이전트를 제어된 환경에서 사용할 수 있도록, 더 기괴하고 복잡한 오류 처리 규칙을 구현하지 않고도 사용자 에이전트가 파싱 오류를 만날 때마다 실패할 수 있습니다.
위에서 언급한 <table><hr>...
예와 같은 일부 오류 처리 동작은 상태를 저장하지 않고 한 번의 통과로 HTML 파일을 처리하는 스트리밍 사용자
에이전트와 호환되지 않습니다. 이러한 사용자 에이전트와의 상호 운용성 문제를 피하기 위해, 이러한 동작을 초래하는 모든 문법은 유효하지 않은 것으로 간주됩니다.
XML을 기반으로 하는 사용자 에이전트가 HTML 파서에 연결될 때, 요소 또는 속성 이름에 여러 개의 콜론이 포함되지 않는 것과 같은 XML이 강제하는 특정 불변성이 HTML 파일에 의해 위반될 수 있습니다. 이를 처리하려면 파서가 HTML DOM을 XML 호환 정보 집합으로 강제해야 할 수 있습니다. 이러한 처리가 필요한 대부분의 문법 구조는 유효하지 않은 것으로 간주됩니다. (연속된 두 개의 하이픈을 포함하거나 하이픈으로 끝나는 주석은 HTML 문법에서 허용되는 예외입니다.)
특정 문법 구조는 불균형적으로 성능이 저하될 수 있습니다. 이러한 구조의 사용을 방지하기 위해, 이들은 일반적으로 적합하지 않은 것으로 만들어집니다.
역사적 이유로 상대적으로 취약한 문법 구조가 있습니다. 이러한 문제에 우연히 부딪히는 사용자의 수를 줄이기 위해, 이러한 구조는 비적합한 것으로 만들어집니다.
예를 들어, 속성에서 특정 명명된 문자 참조의 파싱은 종결 세미콜론이 생략되더라도 발생합니다. 따옴표로 닫히지 않은 속성에서 따옴표 없이 앰퍼샌드(&)와 글자를 포함하는 경우, 그 글자가 명명된 문자 참조가 아닌 경우에는 안전하지만, 명명된 문자 참조로 해석되는 경우 그 문자로 해석됩니다.
이 조각에서, 속성 값은 "?bill&ted
"입니다:
< a href = "?bill&ted" > Bill and Ted</ a >
그러나 다음 조각에서, 속성 값은 실제로 "?art©
"입니다. 의도된 "?art©
"가 아닌
"©
"로 해석됩니다.
< a href = "?art©" > Art and Copy</ a >
이 문제를 피하기 위해, 모든 명명된 문자 참조는 세미콜론으로 끝나야 하며, 세미콜론 없이 명명된 문자 참조를 사용하는 경우 오류로 표시됩니다.
따라서 위의 경우를 올바르게 표현하는 방법은 다음과 같습니다:
< a href = "?bill&ted" > Bill and Ted</ a > <!-- &ted는 명명된 문자 참조가 아니므로 괜찮습니다. -->
< a href = "?art&copy" > Art and Copy</ a > <!-- ©는 명명된 문자 참조이므로 &가 이스케이프되어야 합니다. -->
특정 문법 구조는 레거시 사용자 에이전트에서 특히 미묘하거나 심각한 문제를 일으키는 것으로 알려져 있으며, 작성자가 이러한 문제를 피할 수 있도록 비적합한 것으로 표시됩니다.
예를 들어, U+0060 그레이브 악센트(`) 문자가 따옴표로 닫히지 않은 속성에서 허용되지 않는 이유는 특정 레거시 사용자 에이전트에서 때때로 따옴표 문자로 처리되기 때문입니다.
특정 제한은 알려진 보안 문제를 피하기 위해 존재합니다.
예를 들어, UTF-7의 사용 제한은 UTF-7을 사용한 알려진 크로스 사이트 스크립팅 공격으로 인해 작성자가 피해를 입지 않도록 순전히 존재합니다. [UTF7]
작성자의 의도가 매우 불분명한 마크업은 종종 비적합한 것으로 간주됩니다. 이러한 오류를 조기에 수정하면 나중에 유지보수가 더 쉬워집니다.
사용자가 간단한 오타를 범했을 때, 이 오류를 조기에 잡아내면 작성자가 많은 디버깅 시간을 절약할 수 있습니다. 따라서 이 명세서는 일반적으로 이 명세서에 정의된 이름과 일치하지 않는 요소 이름, 속성 이름 등을 사용하는 것을 오류로 간주합니다.
예를 들어, 작성자가 <capton>
대신 <caption>
을 입력한 경우, 이는 오류로 표시되어 작성자가 즉시 오타를
수정할 수 있습니다.
미래에 언어 문법을 확장할 수 있도록 하기 위해, 그렇지 않으면 무해한 기능들이 허용되지 않습니다.
예를 들어, 현재는 "속성"이 종료 태그에서 무시되지만, 이들은 무효이며, 미래에 해당 문법 기능을 사용하여 배포된(및 유효한!) 콘텐츠와 충돌하지 않도록 하기 위해 비적합합니다.
일부 작성자는 모든 속성을 항상 따옴표로 묶고 모든 선택적 태그를 항상 포함하는 관행을 따르는 것이 유용하다고 생각하며, HTML 문법의 유연성을 활용하여 제공되는 간결성의 사소한 이점보다 이러한 관습에서 얻는 일관성을 선호합니다. 이러한 작성자를 돕기 위해, 적합성 검사기는 그러한 관습이 강제되는 운영 모드를 제공할 수 있습니다.
이 섹션은 비규범적입니다.
언어의 문법을 넘어서, 이 명세서는 요소와 속성을 지정하는 방법에 대한 제한도 둡니다. 이러한 제한은 비슷한 이유로 존재합니다:
정의된 의미를 가진 요소의 오용을 피하기 위해, 이러한 중첩이 의심스러운 가치가 있을 경우 요소를 중첩하는 방법을 제한하는 콘텐츠 모델이 정의됩니다.
예를 들어, 이 명세서는 section
요소를 kbd
요소 내부에 중첩하는 것을 허용하지 않는데, 이는 저자가 전체 섹션을 입력해야 한다고 표시할 가능성이 매우 낮기 때문입니다.
마찬가지로, 요소 사용의 실수를 저자의 주목을 끌기 위해, 표현된 의미에서의 명백한 모순은 적합성 오류로 간주됩니다.
예를 들어, 아래의 조각에서는 의미가 말이 되지 않습니다: 구분자는 동시에 셀일 수 없으며, 라디오 버튼은 진행 표시줄이 될 수 없습니다.
< hr role = "cell" >
< input type = radio role = progressbar >
또 다른 예는 ul
요소의 콘텐츠 모델에 대한 제한입니다. 이 요소는 li
요소 자식만을 허용합니다. 리스트는 정의상 0개 이상의 리스트 항목으로만 구성되므로, ul
요소에 li
요소 이외의 것이 포함된 경우, 무엇을 의미하는지 명확하지 않습니다.
일부 요소는 기본 스타일이나 동작으로 인해 특정 조합이 혼란을 초래할 가능성이 있습니다. 이 문제를 피할 수 있는 동등한 대체 요소가 있는 경우, 혼란스러운 조합은 허용되지 않습니다.
예를 들어, div
요소는 블록
박스로 렌더링되며, span
요소는 인라인
박스로 렌더링됩니다. 블록 박스를 인라인 박스에 넣는 것은 불필요하게
혼란스럽습니다. div
요소를 중첩하거나, span
요소를 중첩하거나, span
요소를 div
요소 안에 중첩하는 것은 모두 div
요소를 span
요소 안에 중첩하는 것과 동일한 목적을 수행하지만, 후자는 블록 박스를 인라인 박스에 넣는 것을 포함하기 때문에
후자 조합은 허용되지 않습니다.
또 다른 예는 인터랙티브 콘텐츠가 중첩될 수
없는 방식입니다. 예를 들어, button
요소는 textarea
요소를 포함할 수 없습니다. 이는 이러한 중첩된 인터랙티브 요소의 기본 동작이 사용자에게 매우 혼란스러울 수 있기 때문입니다. 이러한 요소를 중첩하는 대신 나란히 배치할 수 있습니다.
때때로, 무언가가 허용되지 않는 이유는 이를 허용하는 것이 저자의 혼란을 야기할 가능성이 높기 때문입니다.
예를 들어, disabled
속성을 "false
" 값으로 설정하는 것은 허용되지 않으며, 이는 요소가 활성화된다는 의미로 보일 수 있지만 실제로는 요소가 비활성화됨을 의미하기
때문입니다. (구현에서 중요한 것은 속성의 값이 아니라 속성의 존재입니다).
일부 적합성 오류는 저자가 배워야 할 언어를 단순화합니다.
예를 들어, area
요소의 shape
속성은 실습에서 동의어로 circ
및 circle
값을 허용하지만, circ
값을 허용하지 않으므로 자습서 및 기타 학습 도구를 단순화할 수 있습니다. 둘 다 허용하는 데는 이점이 없지만 언어를 가르치는 데 혼란을 초래할 수 있습니다.
일부 요소는 다소 독특한 방식으로 구문 분석되며(주로 역사적 이유로), 이러한 콘텐츠 모델 제한은 저자가 이러한 문제에 노출되는 것을 방지하기 위한 것입니다.
일부 오류는 디버깅하기 어려운 스크립트 문제를 방지하기 위해 의도되었습니다.
예를 들어, 동일한 값을 가진 두 개의 id
속성을 갖는 것이 비적합한 이유는 중복된 ID가 잘못된 요소가 선택되도록 하여, 때로는 원인을 파악하기 어려운 재앙적인 영향을 미칠 수 있기 때문입니다.
일부 구조는 역사적으로 많은 저작 시간 낭비의 원인이 되었기 때문에 금지되었으며, 이를 피함으로써 저자는 미래의 작업에서 시간을 절약할 수 있습니다.
예를 들어, script
요소의 src
속성은 요소의 내용을 무시하게 합니다. 그러나 이는 명확하지 않으며, 특히 요소의 내용이 실행 가능한 스크립트처럼 보이는 경우 저자는 실행되지 않는 인라인 스크립트를 디버깅하려고 시간을
낭비할 수 있습니다. 이러한 문제를 줄이기 위해, 이 명세서는 script
요소의 src
속성이 존재할 때 실행 가능한 스크립트를 포함하는 것을 비적합하게 만듭니다. 이를 통해 문서를 검증하는 작성자는 이러한 실수로 시간을 낭비할 가능성이 줄어듭니다.
일부 저자는 XML 및 HTML로 유사한 결과를 해석할 수 있는 파일을 작성하는 것을 좋아합니다. 이 실습은 일반적으로 스크립팅, 스타일링 또는 자동화된 직렬화와 관련된 미묘한 복잡성으로 인해 권장되지 않지만, 이 명세서는 이러한 어려움을 어느 정도 완화하기 위한 몇 가지 제한을 두고 있습니다. 이는 작성자가 HTML 및 XML 문법 간의 전환 시 이를 임시 단계로 사용할 수 있도록 합니다.
예를 들어, lang
및 xml:lang
속성을 동기화 상태로 유지하기 위한 다소 복잡한 규칙이 존재합니다.
또 다른 예는 HTML 직렬화에서 xmlns
속성 값에 대한 제한입니다. 이러한 제한은 문서를 HTML 또는 XML로 처리할 때 요소가
동일한 네임스페이스에 속하도록 보장하기 위해 마련되었습니다.
언어의 미래 수정에서 새로운 구문을 허용하기 위한 구문 제한과 마찬가지로, 요소의 콘텐츠 모델 및 속성 값에 대한 일부 제한은 HTML 어휘의 미래 확장을 허용하기 위한 것입니다.
예를 들어, U+005F LOW LINE 문자(_)로 시작하는 target
속성 값이 특정 미리 정의된 값만 허용되도록 제한함으로써, 작성자가 정의한 값과 충돌하지 않고 나중에 새로운 미리 정의된 값을 도입할 수 있습니다.
일부 제한은 다른 명세서에 의해 설정된 제한을 지원하기 위한 것입니다.
예를 들어, 미디어 쿼리 목록을 사용하는 속성은 유효한 미디어 쿼리 목록만을 사용하도록 요구함으로써 해당 명세서의 적합성 규칙을 따르는 것의 중요성을 강조합니다.
이 섹션은 비규범적입니다.
다음 문서는 이 사양의 독자에게 흥미로울 수 있습니다.
이 아키텍처 사양은 사양 작성자, 소프트웨어 개발자 및 콘텐츠 개발자에게 유니코드 표준과 ISO/IEC 10646에 의해 공동으로 정의된 유니버설 문자 세트를 기반으로 웹에서 상호 운용 가능한 텍스트 처리를 위한 공통 참조를 제공합니다. 다루는 주제는 '문자', '인코딩' 및 '문자열' 용어의 사용, 참조 처리 모델, 문자 인코딩의 선택 및 식별, 문자 이스케이프 및 문자열 인덱싱을 포함합니다.
유니코드는 매우 많은 수의 문자를 포함하고 있으며 세계의 다양한 문자 체계를 통합하고 있기 때문에 잘못된 사용은 프로그램이나 시스템을 보안 공격에 노출시킬 수 있습니다. 특히 더 많은 제품이 국제화됨에 따라 이것은 매우 중요합니다. 이 문서는 프로그래머, 시스템 분석가, 표준 개발자 및 사용자가 고려해야 할 보안 고려 사항 중 일부를 설명하고, 문제의 위험을 줄이기 위한 구체적인 권장 사항을 제공합니다.
웹 콘텐츠 접근성 지침 (WCAG)은 웹 콘텐츠를 더 접근 가능하게 만드는 방법에 대한 다양한 권장 사항을 다룹니다. 이 지침을 따르면 시각 장애, 청각 장애, 학습 장애, 인지적 제한, 운동 제한, 언어 장애, 광 과민성 및 이들의 조합을 포함한 다양한 장애를 가진 사람들에게 콘텐츠를 접근 가능하게 할 수 있습니다. 이 지침을 따르면 일반 사용자를 포함하여 더 많은 사용자가 웹 콘텐츠를 더 쉽게 이용할 수 있게 됩니다.
이 사양은 장애인을 위한 더 접근 가능한 웹 콘텐츠 저작 도구를 설계하기 위한 지침을 제공합니다. 이 지침을 준수하는 저작 도구는 장애인을 위한 접근 가능한 사용자 인터페이스를 제공할 뿐만 아니라 모든 저자가 접근 가능한 웹 콘텐츠를 제작할 수 있도록 지원하고 촉진할 것입니다.
이 문서는 장애인을 위한 웹 접근성을 향상시키기 위한 사용자 에이전트를 설계하는 지침을 제공합니다. 사용자 에이전트에는 웹 콘텐츠를 검색하고 렌더링하는 브라우저 및 기타 유형의 소프트웨어가 포함됩니다. 이 지침을 준수하는 사용자 에이전트는 자체 사용자 인터페이스와 기타 내부 기능을 통해 접근성을 촉진할 것이며, 특히 보조 기술과의 통신 능력을 포함합니다. 또한 장애인뿐만 아니라 모든 사용자가 준수하는 사용자 에이전트를 더 사용하기 쉽게 느낄 것입니다.
이 사양은 Infra에 의존합니다. [INFRA]
이 사양은 HTML 및 XML 속성과 IDL 속성을 모두 참조하며, 종종 동일한 맥락에서 사용됩니다. 어떤 것을 참조하는지 명확하지 않을 때는 HTML 및 XML 속성을 콘텐츠 속성이라고 하고, IDL 인터페이스에 정의된 속성은 IDL 속성이라고 합니다. 유사하게, "속성"이라는 용어는 자바스크립트 객체 속성과 CSS 속성 모두에 사용됩니다. 이러한 경우 모호함을 피하기 위해 객체 속성과 CSS 속성으로 명확히 구분합니다.
일반적으로, 사양에서 특정 기능이 HTML 구문 또는 XML 구문에 적용된다고 명시할 때, 다른 하나에도 적용됩니다. 특정 기능이 두 언어 중 하나에만 적용될 경우, "HTML의 경우, ... (이는 XML에는 적용되지 않음)"과 같이 명확하게 언급하여 다른 형식에는 적용되지 않음을 명시합니다.
이 사양은 문서라는 용어를 HTML의 모든 사용 사례를 참조하는 데 사용합니다. 이에는 짧은 정적 문서부터 멀티미디어가 풍부한 긴 에세이 또는 보고서, 완전한 인터랙티브
애플리케이션까지 포함됩니다. 이 용어는 Document
객체 및 그 하위 DOM 트리와, HTML 구문 또는 XML 구문을 사용하여 직렬화된 바이트 스트림을 참조하는 데 사용됩니다. 어떤 맥락에서 사용되는지에 따라 다릅니다.
DOM 구조의 맥락에서 HTML 문서 및 XML 문서라는 용어는 DOM에서 정의된 대로 사용되며,
Document
객체가 처할 수 있는 두 가지 다른 모드를 구체적으로 나타냅니다. [DOM] (이러한 용어 사용 시 항상 정의로 하이퍼링크됩니다.)
바이트 스트림의 맥락에서, HTML 문서는 text/html
로 라벨이 지정된 리소스를, XML
문서는 XML MIME 타입으로 라벨이 지정된 리소스를 의미합니다.
간단히 하기 위해, 문서가 사용자에게 렌더링되는 방식과 관련하여 표시됨, 디스플레이됨, 보임과 같은 용어를 사용할 수 있습니다. 이러한 용어는 시각적 매체를 암시하는 것이 아니며, 다른 매체에도 동등하게 적용되어야 합니다.
단계를 병렬로 실행한다는 것은 해당 단계들이 표준의 다른 로직(예: 이벤트 루프)과 동시에 실행되어야 함을 의미합니다. 이 표준은 이를 달성하는 정확한 메커니즘, 예를 들어 타임셰어링 협동 멀티태스킹, 파이버, 스레드, 프로세스, 다른 하이퍼스레드, 코어, CPU, 머신 등을 정의하지 않습니다. 반면, 즉시 실행되어야 하는 작업은 현재 실행 중인 작업을 중단하고, 자신을 실행한 후 이전에 실행 중이던 작업을 다시 시작해야 합니다.
병렬 처리를 활용하는 사양을 작성하는 방법에 대한 지침은 다른 사양에서 이벤트 루프 처리를 참조하십시오.
동일한 데이터에서 작동하는 여러 병렬 알고리즘 간의 경쟁 조건을 피하기 위해 병렬 큐를 사용할 수 있습니다.
병렬 큐는 일련의 알고리즘 단계를 순차적으로 실행해야 하는 큐를 나타냅니다.
병렬 큐는 알고리즘 큐(큐)를 가지며, 초기에는 비어 있습니다.
병렬 큐에 단계를 큐에 추가하려면, 알고리즘 단계를 병렬 큐의 알고리즘 큐에 추가합니다.
새로운 병렬 큐를 시작하려면 다음 단계를 실행합니다:
병렬로 실행되는 단계들은 자체적으로 다른 단계를 병렬로 실행할 수 있습니다. 예를 들어, 병렬 큐 내에서 일련의 단계를 큐와 병렬로 실행하는 것이 유용할 수 있습니다.
어떤 표준이 nameList(리스트)를 정의하고, nameList에 name을 추가하는 메서드를 정의하는데, nameList에 이미 name이 포함되어 있는 경우 거부하는 것으로 가정합니다.
아래 솔루션은 경쟁 조건이 발생할 수 있습니다:
다음 단계를 병렬로 실행합니다:
nameList가 포함된 name이라면,
글로벌 작업을 큐에 추가하고 이의 관련 글로벌 객체에 TypeError
로
p를 거부하도록 하고, 이 단계를 중단합니다.
잠재적으로 긴 작업을 수행합니다.
이름을 nameList에 추가합니다.
글로벌 작업을 큐에 추가하고 이의 관련 글로벌 객체에 p를 undefined로 해결하도록 합니다.
p를 반환합니다.
위의 두 가지 호출은 동시에 실행될 수 있으며, name이 2.1 단계 동안 nameList에 없지만, 2.3 단계를 실행하기 전에 추가될 수 있으므로 name이 nameList에 두 번 추가됩니다.
병렬 큐는 이 문제를 해결합니다. 표준은 nameListQueue를 새로운 병렬 큐를 시작한 결과로 정의하고, 다음 과 같이 합니다:
다음 단계를 큐에 추가하여 nameListQueue에 추가합니다:
nameList가 포함된 name이라면,
글로벌 작업을 큐에 추가하고 이의 관련 글로벌 객체에 TypeError
로
p를 거부하도록 하고, 이 단계를 중단합니다.
잠재적으로 긴 작업을 수행합니다.
이름을 nameList에 추가합니다.
전역 작업을 대기열에 추가합니다, DOM 조작 작업 소스에서 this의 관련 전역 객체를 사용하여 p를 undefined로 해결합니다.
p를 반환합니다.
이제 단계들이 큐에 추가되고 경쟁 상태가 발생하지 않습니다.
본 명세서에서는 외부 리소스의 의미를 해석할 수 있는 구현이 있는지 여부를 나타낼 때 지원됨이라는 용어를 사용합니다. 특정 형식 또는 유형의 외부 리소스를 처리할 수 있고 해당 리소스의 중요한 측면이 무시되지 않으면 해당 형식 또는 유형이 지원됨으로 간주됩니다. 특정 리소스가 지원됨인지 여부는 리소스 형식의 기능이 어떻게 사용되는지에 따라 달라질 수 있습니다.
예를 들어, PNG 이미지는 해당 픽셀 데이터를 해독하고 렌더링할 수 있다면, 구현이 알지 못하더라도 이미지에 애니메이션 데이터가 포함되어 있어도 지원되는 형식으로 간주됩니다.
MPEG-4 비디오 파일은 압축 형식이 지원되지 않는다면 해당 구현이 파일의 메타데이터에서 영화의 크기를 결정할 수 있더라도 지원되는 형식으로 간주되지 않습니다.
일부 명세서, 특히 HTTP 명세서에서 표현이라고 하는 것을 이 명세서에서는 리소스라고 합니다. [HTTP]
리소스의 중요 하위 리소스는 리소스를 올바르게 처리하기 위해 필요한 리소스입니다. 어떤 리소스가 중요한지 아닌지는 리소스 형식을 정의하는 명세서에서 정의됩니다.
예를 들어, CSS 스타일 시트의 경우, 여기에서는 임시로 이들의 중요한 하위 리소스를 @import
규칙을 통해 가져온 다른 스타일 시트들로 정의합니다. 다른 가져온 스타일 시트들에 의해 간접적으로 가져온 스타일 시트들도 포함됩니다.
이 정의는 완전히 상호 운용 가능한 것은 아닙니다. 또한 일부 사용자 에이전트는 배경 이미지나 웹 폰트와 같은 리소스를 중요한 하위 리소스로 간주하는 것 같습니다. 이상적으로는 CSS 워킹 그룹이 이것을 정의해야 합니다. 이 문제에 대한 진행 상황을 추적하려면 w3c/csswg-drafts issue #1088를 참조하십시오.
HTML에서 XML로의 마이그레이션을 용이하게 하기 위해, 이 명세서를 준수하는 사용자 에이전트는 HTML의 요소를 http://www.w3.org/1999/xhtml
네임스페이스에 배치합니다. 적어도 DOM과
CSS의 목적을 위해서라도 그렇습니다. "HTML 요소"라는 용어는 XML 문서에서도 해당 네임스페이스에 있는 모든 요소를
지칭합니다.
달리 명시되지 않는 한, 이 명세서에서 정의되거나 언급된 모든 요소는 HTML 네임스페이스
("http://www.w3.org/1999/xhtml
")에 있으며, 이 명세서에서 정의되거나 언급된 모든 속성은 네임스페이스가 없습니다.
요소 타입이라는 용어는 특정 로컬 이름과 네임스페이스를 가진 요소의 집합을 지칭하는 데 사용됩니다. 예를 들어, button
요소는 button
요소 타입의 요소로, 로컬 이름이
"button
"이며 (위에서 정의한 대로 암묵적으로) HTML 네임스페이스에 속합니다.
속성 이름은 XML에서 정의된 Name
생성 규칙을
준수하고 U+003A 콜론 문자 (:)를 포함하지 않는 경우 XML 호환이라고 합니다. [XML]
어떤 요소나 속성이 무시됨, 또는 다른 값으로 처리됨, 또는 다른 것으로 취급됨이라고 명시된 경우, 이는 해당 노드가 DOM에 삽입된 후 처리에만 해당됩니다. 이러한 상황에서 사용자 에이전트는 DOM을 변경해서는 안 됩니다.
콘텐츠 속성의 값이 이전 값과 다를 때만 값이 변경됨이라고 합니다. 이미 가진 값으로 속성을 설정하는 것은 변경으로 간주되지 않습니다.
비어 있음이라는 용어는 속성 값, 텍스트
노드
또는 문자열에 사용될 때, 텍스트의 길이가 0임을 의미합니다 (즉, 제어 문자 또는 U+0020 SPACE를 포함하지 않음).
HTML 요소는 특정 HTML 요소 삽입 단계, HTML 요소 연결 후 단계, 및 HTML 요소 제거 단계를 가질 수 있으며, 이는 요소의 로컬 이름에 대해 정의됩니다.
HTML 표준의 삽입 단계는 insertedNode가 주어졌을 때 다음과 같이 정의됩니다:
insertedNode가 네임스페이스가 HTML 네임스페이스인 요소이며, 이 표준이 insertedNode의 로컬 이름에 대한 HTML 요소 삽입 단계를 정의하는 경우, insertedNode에 대해 해당하는 HTML 요소 삽입 단계를 실행합니다.
insertedNode가 Element이지만 열린 요소 스택에 없을 경우, 내부 리소스 링크 처리를 insertedNode의 노드 문서로 실행합니다.
HTML 표준의 연결 후 단계는 insertedNode에 대해 다음과 같이 정의됩니다:
insertedNode가 네임스페이스가 HTML 네임스페이스인 요소이며, 이 표준이 insertedNode의 로컬 이름에 대한 HTML 요소 연결 후 단계를 정의하는 경우, insertedNode에 대해 해당하는 HTML 요소 연결 후 단계를 실행합니다.
HTML 표준의 제거 단계는 removedNode와 oldParent가 주어졌을 때 다음과 같이 정의됩니다:
document를 removedNode의 노드 문서로 설정합니다.
만약 document의 포커스된 영역이 removedNode라면, document의 포커스된 영역을 document의 뷰포트로 설정하고, document의 관련 글로벌 객체의 네비게이션 API에서 네비게이션 중 포커스 변경됨을 false로 설정합니다.
이는 포커스 해제 단계, 포커스 설정 단계 또는 포커스 업데이트 단계를 수행하지 않으므로 blur
또는 change
이벤트가 발생하지 않습니다.
removedNode가 네임스페이스가 HTML 네임스페이스인 요소이고, 이 표준이 removedNode의 로컬 이름에 대한 HTML 요소 제거 단계를 정의하는 경우, removedNode와 oldParent에 대해 해당하는 HTML 요소 제거 단계를 실행합니다.
removedNode의 popover
속성이 팝오버 없음 상태에 있지 않다면, 팝오버 숨기기 알고리즘을
removedNode, false, false, false를 인수로 실행합니다.
노드가 문서에 삽입됨은 삽입 단계가 해당 노드를 인수로 호출하고 이제 문서 트리에 포함되었을 때를 의미합니다. 마찬가지로, 노드가 문서에서 제거됨은 제거 단계가 해당 노드를 인수로 호출하고 이제 더 이상 문서 트리에 포함되지 않았을 때를 의미합니다.
노드가 연결됨은 삽입 단계가 해당 노드를 인수로 호출하고 이제 연결됨을 의미합니다. 마찬가지로, 노드가 연결 해제됨은 제거 단계가 해당 노드를 인수로 호출하고 이제 더 이상 연결됨이 아닌 경우를 의미합니다.
노드가 탐색 문맥에 연결됨은 해당 노드가 연결됨이고, 해당 노드의 섀도우 포함 루트의 탐색 문맥이 null이 아닐 때를 의미합니다. 노드가 탐색 문맥에 연결됨은 삽입 단계가 해당 노드를 인수로 호출하고 이제 탐색 문맥에 연결됨을 의미합니다. 노드가 탐색 문맥에서 연결 해제됨은 제거 단계가 해당 노드를 인수로 호출하고 이제 더 이상 탐색 문맥에 연결됨이 아니거나, 해당 노드의 섀도우 포함 루트의 탐색 문맥이 null이 된 경우를 의미합니다.
Foo
가 실제로는 인터페이스인 경우에도 "a Foo
object"라는 표현이 사용되며, 이는 더 정확한 "인터페이스 Foo
를 구현하는
객체" 대신 사용되기도 합니다.
IDL 속성이 얻어짐이라고 할 때는 해당 속성의 값이 조회되고 있을 때(예: 저자 스크립트에 의해), 설정됨이라고 할 때는 새 값이 할당될 때를 의미합니다.
DOM 객체가 라이브라고 할 때, 해당 객체의 속성과 메서드는 스냅샷이 아닌 실제 기본 데이터에 대해 작동해야 합니다.
플러그인이라는 용어는 사용자 에이전트가 사용하는 구현 정의된
콘텐츠 핸들러 집합을 의미하며, 이는 document
객체의 렌더링에 참여할 수 있지만, document
의 하위 탐색 가능 요소로 작동하지 않으며, 노드
객체를
document
의 DOM에 추가하지 않습니다.
일반적으로 이러한 콘텐츠 핸들러는 서드파티에 의해 제공되지만, 사용자 에이전트가 내장된 콘텐츠 핸들러를 플러그인으로 지정할 수도 있습니다.
사용자 에이전트는 text/plain
및 application/octet-stream
유형을 등록된 플러그인으로 간주해서는 안 됩니다.
플러그인의 한 예로, 사용자가 PDF 파일로 이동할 때 탐색 가능 요소에서 인스턴스화되는 PDF 뷰어를 들 수 있습니다. 이는 PDF 뷰어 구성 요소를 구현한 당사자가 사용자 에이전트를 구현한 당사자와 동일한지 여부와 관계없이 플러그인으로 간주됩니다. 그러나 사용자 에이전트와 별도로 실행되는 PDF 뷰어 애플리케이션(동일한 인터페이스를 사용하지 않는 경우)은 이 정의에 따른 플러그인이 아닙니다.
이 명세서는 플러그인과 상호 작용하는 메커니즘을 정의하지 않습니다. 이는 사용자 에이전트 및 플랫폼에 따라 다를 것으로 예상되기 때문입니다. 일부 사용자 에이전트는 Netscape 플러그인 API와 같은 플러그인 메커니즘을 지원할 수 있으며, 다른 사용자 에이전트는 원격 콘텐츠 변환기를 사용하거나 특정 유형에 대한 내장 지원을 가질 수 있습니다. 실제로 이 명세서는 사용자 에이전트가 플러그인을 지원해야 한다고 요구하지 않습니다. [NPAPI]
브라우저는 플러그인을 위해 의도된 외부 콘텐츠와 상호 작용할 때 극도로 주의해야 합니다. 서드파티 소프트웨어가 사용자 에이전트 자체와 동일한 권한으로 실행될 때, 서드파티 소프트웨어의 취약점은 사용자 에이전트의 취약점만큼 위험해질 수 있습니다.
서로 다른 사용자가 서로 다른 플러그인 집합을 가지는 것이 사용자가 고유하게 식별될 가능성을 높이는 추적 벡터를 제공하기 때문에,
사용자 에이전트는 각 사용자에 대해 동일한 플러그인 집합을 지원하도록 권장됩니다.
문자 인코딩은, 또는 모호하지 않은 경우 인코딩은 인코딩에서 정의된 바와 같이 바이트 스트림과 유니코드 문자열 간의 변환을 정의하는 방법입니다. 인코딩은 인코딩 이름과 하나 이상의 인코딩 레이블을 가지며, 인코딩 표준에서는 이를 인코딩의 이름과 레이블이라고 합니다. [ENCODING]
이 명세서는 사용자 에이전트(구현자에게 관련)와 문서(저자 및 저작 도구 구현자에게 관련)에 대한 준수 기준을 설명합니다.
준수 문서는 문서에 대한 모든 준수 기준을 준수하는 문서입니다. 가독성을 위해 이러한 준수 요구 사항 중 일부는 저자에 대한 준수 요구 사항으로 표현됩니다. 이러한 요구 사항은 암묵적으로 문서에 대한 요구 사항입니다. 정의상, 모든 문서는 저자가 있는 것으로 가정됩니다. (일부 경우에는 그 저자가 사용자 에이전트일 수도 있으며, 이러한 사용자 에이전트는 아래에서 설명하는 추가 규칙의 적용을 받습니다.)
예를 들어, "저자는 foobar
요소를 사용해서는 안 됩니다."라는 요구 사항이 있으면 문서에 foobar
라는 이름의 요소가
포함될 수 없음을 의미합니다.
문서 준수 요구 사항과 구현 준수 요구 사항 간에는 암묵적인 관계가 없습니다. 사용자 에이전트는 비준수 문서를 자유롭게 처리할 수 없습니다. 이 명세서에서 설명하는 처리 모델은 입력 문서의 준수 여부와 관계없이 구현에 적용됩니다.
사용자 에이전트는 여러 (중첩된) 범주로 나뉘며, 각각 다른 준수 요구 사항이 있습니다.
XML 구문을 지원하는 웹 브라우저는 XML 문서에서 발견된 HTML 네임스페이스의 요소와 속성을 이 명세서에서 설명한 대로 처리하여 사용자가 상호작용할 수 있도록 해야 합니다. 단, 이러한 요소의 의미가 다른 명세서에 의해 재정의된 경우는 제외합니다.
준수 웹 브라우저는 XML 문서에서 스크립트
요소를 발견하면 해당
요소에 포함된 스크립트를 실행해야 합니다. 그러나, XSLT로 표현된 변환 내에서 이 요소가 발견되면 (사용자 에이전트가 XSLT도 지원한다고 가정할 때) 프로세서는 대신 스크립트
요소를 변환의 일부를
형성하는 불투명한 요소로 취급해야 합니다.
HTML 구문을 지원하는 웹 브라우저는 이 명세서에서 설명한 대로 HTML MIME 유형으로 레이블된 문서를 처리하여 사용자가 상호작용할 수 있도록 해야 합니다.
스크립팅을 지원하는 사용자 에이전트는 또한 이 명세서의 IDL 조각의 준수 구현이어야 합니다. Web IDL에서 설명한 대로. [WEBIDL]
명시적으로 명시되지 않는 한, HTML 요소의 의미를 재정의하는 명세서는 해당 요소를 나타내는 DOM 객체에 대한 요구 사항을 재정의하지 않습니다. 예를 들어, 위
예에서 스크립트
요소는
여전히 HTMLScriptElement
인터페이스를 구현해야 합니다.
HTML 및 XML 문서를 처리하여 비상호작용 버전으로 렌더링하는 사용자 에이전트는 사용자 상호작용에 대한 요구 사항을 제외하고 웹 브라우저와 동일한 준수 기준을 준수해야 합니다.
비상호작용 프레젠테이션 사용자 에이전트의 전형적인 예로는 프린터(정적 UA) 및 오버헤드 디스플레이(동적 UA)가 있습니다. 대부분의 정적 비상호작용 프레젠테이션 사용자 에이전트는 스크립팅 지원이 없도록 선택할 것으로 예상됩니다.
비상호작용이지만 동적인 프레젠테이션 UA는 여전히 스크립트를 실행하여 양식을 동적으로 제출할 수 있도록 해야 합니다. 그러나 사용자가 문서와 상호작용할 수 없는 경우 "포커스"라는 개념은 관련이 없으므로 UA는 포커스 관련 DOM API를 지원할 필요가 없습니다.
사용자 에이전트는 상호작용 여부와 관계없이 이 명세서에서 정의된 권장 기본 렌더링을 지원하는 것으로 지정될 수 있습니다(사용자 옵션으로 지정될 수 있음).
이는 필수 사항은 아닙니다. 특히, 권장 기본 렌더링을 구현하는 사용자 에이전트라도 기본 설정을 덮어써서 사용자 경험을 개선할 수 있는 설정을 제공하는 것이 좋습니다. 예를 들어 색상 대비를 변경하거나, 다른 포커스 스타일을 사용하거나, 사용자가 더 접근 가능하고 사용하기 쉽도록 하는 등의 방법이 있습니다.
권장 기본 렌더링을 지원하도록 지정된 사용자 에이전트는 그러한 상태에서 렌더링 섹션에서 정의된 대로 사용자 에이전트가 구현할 것으로 기대되는 동작 규칙을 구현해야 합니다.
스크립팅을 지원하지 않거나 스크립팅 기능이 완전히 비활성화된 구현은 이 명세서에서 언급된 이벤트 및 DOM 인터페이스를 지원할 필요가 없습니다. 이벤트 모델이나 DOM 측면에서 정의된 명세서의 부분에 대해서는 그러한 사용자 에이전트가 이벤트와 DOM이 지원되는 것처럼 행동해야 합니다.
스크립팅은 애플리케이션의 필수적인 부분을 형성할 수 있습니다. 스크립팅을 지원하지 않거나 스크립팅이 비활성화된 웹 브라우저는 저자의 의도를 완전히 전달하지 못할 수 있습니다.
준수 검사기는 문서가 이 명세서에서 설명하는 해당 준수 기준을 준수하는지 확인해야 합니다. 자동화된 준수 검사기는 저자의 의도를 해석해야 하는 오류(예: 인용 블록
요소의
내용이 인용이 아닌 경우 문서는 비준수이지만, 인간의 판단 입력 없이 실행되는 준수 검사기는 인용 블록
요소에
인용된 자료만 포함되어 있는지 확인할 필요는 없습니다.)를 감지하는 것을 면제받습니다.
준수 검사기는 입력 문서가 탐색 문맥 없이 파싱될 때(스크립트가 실행되지 않으며 파서의 스크립팅 플래그가 비활성화됨) 문서가 준수하는지 확인해야 하며, 입력 문서가 스크립트가 실행되는 탐색 문맥에서 파싱될 때도 준수하는지 확인해야 합니다. 스크립트가 실행 중에만 발생하는 일시적인 상태를 제외하고는 스크립트가 비준수 상태를 일으키지 않아야 합니다. (이는 불가능한 것으로 입증되었기 때문에 "해야 한다"가 아닌 "권장 사항"입니다. [COMPUTABLE])
"HTML 유효성 검사기"라는 용어는 이 명세서의 해당 요구 사항을 준수하는 준수 검사기를 나타내는 데 사용할 수 있습니다.
XML DTD는 이 명세서의 모든 준수 요구 사항을 표현할 수 없습니다. 따라서 유효성 검사 XML 프로세서와 DTD는 준수 검사기를 구성할 수 없습니다. 또한, 이 명세서에서 정의한 두 가지 저작 형식 중 어느 것도 SGML의 응용 프로그램이 아니기 때문에 유효성 검사 SGML 시스템도 준수 검사기를 구성할 수 없습니다.
달리 표현하자면, 세 가지 유형의 준수 기준이 있습니다:
준수 검사기는 첫 번째와 두 번째를 검사해야 합니다. 단순 DTD 기반 유효성 검사기는 오류의 첫 번째 클래스를 검사할 뿐이므로 이 명세서에 따라 준수 검사기로 간주되지 않습니다.
문서를 렌더링하거나 준수 여부를 검사하기 위해서가 아닌 다른 이유로 HTML 및 XML 문서를 처리하는 애플리케이션 및 도구는 처리하는 문서의 의미에 따라 행동해야 합니다.
단락마다 중첩 수준을 증가시키고 헤딩에 대해서는 중첩 수준을 증가시키지 않는 문서 개요를 생성하는 도구는 준수하지 않는 것입니다.
저작 도구 및 마크업 생성기는 준수 문서를 생성해야 합니다. 저자에게 적용되는 준수 기준은 적절한 경우 저작 도구에도 적용됩니다.
저작 도구는 요소를 지정된 용도로만 사용하는 것에 대한 엄격한 요구 사항에서 제외되지만, 저작 도구가 아직 저자의 의도를 결정할 수 없는 범위 내에서만 해당됩니다. 그러나 저작 도구는 요소를 자동으로 오용하거나 사용자가 그렇게 하도록 유도해서는 안 됩니다.
예를 들어, 주소
요소를 임의의 연락처
정보에 사용하는 것은 준수하지 않는 것입니다. 해당 요소는 가장 가까운 아티클
또는 본문
요소 상위 요소에 대한 연락처 정보를
표시하는 데만 사용할 수 있습니다. 그러나 저작 도구는 차이를 결정할 수 없을 가능성이 높기 때문에 저작 도구는 해당 요구 사항에서 제외됩니다. 그러나 이것이 저작 도구가 주소
요소를 임의의 이탤릭체
텍스트 블록에 사용할 수 있음을 의미하는 것은 아닙니다. 이것은 단지 사용자가 아티클
요소에 대한 연락처
정보를 삽입하기 위한 도구를 사용할 때, 사용자가 실제로 그렇게 하고 다른 것을 삽입하지 않는다는 것을 확인할 필요가 없다는 것을 의미합니다.
준수 검사와 관련하여, 편집기는 준수 검사기가 확인할 것과 동일한 정도로 문서를 출력해야 합니다.
비준수 문서를 편집하기 위해 저작 도구를 사용하는 경우, 편집 세션 중에 편집되지 않은 문서의 섹션에서 준수 오류를 유지할 수 있습니다(즉, 편집 도구는 잘못된 콘텐츠를 라운드트립하는 것이 허용됩니다). 그러나 오류가 그렇게 유지된 경우 저작 도구는 출력이 준수한다고 주장해서는 안 됩니다.
저작 도구는 구조 또는 의미 데이터에서 작동하는 도구와 미디어별 편집 기반(WYSIWYG)에서 작동하는 도구의 두 가지 광범위한 종류로 나뉠 것으로 예상됩니다.
전자는 HTML을 작성하는 도구에 권장되는 메커니즘입니다. 소스 정보의 구조를 사용하여 어느 HTML 요소와 속성이 가장 적합한지에 대해 정보에 입각한 선택을 할 수 있기 때문입니다.
그러나 WYSIWYG 도구도 정당합니다. WYSIWYG 도구는 적절하다고 판단되는 요소를 사용해야 하며, 적절하지 않은 요소는 사용하지 않아야 합니다. 이는 극단적인 경우에 div
, b
, i
, span
과 같은 몇 가지 요소로 흐름
요소의 사용을 제한하고 스타일
속성을 자유롭게 사용하는 것을
의미할 수 있습니다.
WYSIWYG 여부와 관계없이 모든 저작 도구는 사용자가 구조가 잘 갖춰져 있고, 의미가 풍부하며, 미디어에 독립적인 콘텐츠를 만들 수 있도록 최선을 다해야 합니다.
기존 콘텐츠 및 이전 명세서와의 호환성을 위해 이 명세서는 두 가지 저작 형식을 설명합니다: 하나는 XML을 기반으로 하며, 하나는 SGML에서 영감을 받은 사용자 정의 형식을 사용합니다(HTML 구문이라고 함). 구현은 이 두 형식 중 하나 이상을 지원해야 하지만, 둘 다 지원하는 것이 좋습니다.
일부 준수 요구 사항은 요소, 속성, 메서드 또는 객체에 대한 요구 사항으로 표현됩니다. 이러한 요구 사항은 콘텐츠 모델 제한을 설명하는 것과 구현 동작을 설명하는 두 가지 범주로 나뉩니다. 전자는 문서 및 저작 도구에 대한 요구 사항이고, 후자는 사용자 에이전트에 대한 요구 사항입니다. 마찬가지로 일부 준수 요구 사항은 저자에 대한 요구 사항으로 표현됩니다. 이러한 요구 사항은 저자가 작성한 문서에 대한 준수 요구 사항으로 해석되어야 합니다. (즉, 이 명세서는 저자에 대한 준수 기준과 문서에 대한 준수 기준을 구분하지 않습니다.)
이 명세서는 여러 다른 기본 명세서에 의존합니다.
다음 용어는 Infra에서 정의됩니다: [INFRA]
유니코드 문자 집합은 텍스트 데이터를 나타내는 데 사용되며, 인코딩은 문자 인코딩과 관련된 요구 사항을 정의합니다. [UNICODE]
이 명세서는 용어를 이러한 명세서에서 정의된 용어를 기반으로 도입합니다.
다음 용어는 인코딩에서 정의된 대로 사용됩니다: [ENCODING]
HTML에 대해 XML 구문을 지원하는 구현은 XML의 일부 버전과 해당 네임스페이스 명세서를 지원해야 합니다. 왜냐하면 해당 구문은 네임스페이스가 있는 XML 직렬화를 사용하기 때문입니다. [XML] [XMLNS]
스크립트를 실행하지 않고 CSS나 XPath 표현식을 평가하지 않으며, 또는 결과 DOM을 임의의 콘텐츠에 노출하지 않고 콘텐츠에 대해 작업을 수행하는 데이터 마이닝 도구 및 기타 사용자 에이전트는 DOM 노드 유사체가 특정 네임스페이스에 있음을 주장하는 것으로 "네임스페이스 지원"을 할 수 있으며, 실제로 네임스페이스 문자열을 노출하지 않아도 됩니다.
HTML 구문에서는 네임스페이스 접두사 및 네임스페이스 선언이 XML에서와 동일한 효과를 가지지 않습니다. 예를 들어, 콜론은 HTML 요소 이름에서 특별한 의미를 가지지 않습니다.
XML 네임스페이스의 space
이름을 가진 속성은
확장 가능 마크업 언어 (XML)에서 정의됩니다. [XML]
이 명세서는 또한 XML 문서와 스타일 시트를 연결하는 명세서에서 정의된 <?xml-stylesheet?>
처리 지침을 참조합니다. [XMLSSPI]
이 명세서는 또한 XSLTProcessor
인터페이스와 transformToFragment()
, transformToDocument()
메서드를 비규범적으로
언급합니다. [XSLTP]
다음 용어는 URL에서 정의됩니다: [URL]
application/x-www-form-urlencoded
형식
application/x-www-form-urlencoded
직렬화
이 명세서는 또한 다음과 같은 스키마 및 프로토콜을 참조합니다:
about:
스키마
[ABOUT]
blob:
스키마
[FILEAPI]
data:
스키마
[RFC2397]
http:
스키마 [HTTP]
https:
스키마
[HTTP]
mailto:
스키마
[MAILTO]
sms:
스키마 [SMS]
urn:
스키마 [URN]
미디어 프래그먼트 구문은 미디어 프래그먼트 URI에서 정의됩니다. [MEDIAFRAG]
다음 용어는 HTTP 명세서에서 정의됩니다: [HTTP]
Accept
`
헤더
Accept-Language
`
헤더
Cache-Control
`
헤더
Content-Disposition
`
헤더
Content-Language
`
헤더
Content-Range
`
헤더
Last-Modified
`
헤더
Range
` 헤더
Referer
`
헤더
다음 용어는 HTTP 상태 관리 메커니즘에서 정의됩니다: [COOKIES]
Cookie
` 헤더
다음 용어는 웹 링크에서 정의됩니다: [WEBLINK]
Link
` 헤더
다음 용어는 HTTP를 위한 구조화된 필드 값에서 정의됩니다: [STRUCTURED-FIELDS]
다음 용어는 MIME 스니핑에서 정의됩니다: [MIMESNIFF]
다음 용어는 Fetch에서 정의됩니다: [FETCH]
about:blank
User-Agent
` 값
Origin
` 헤더
Cross-Origin-Resource-Policy
`
헤더
RequestCredentials
열거형
RequestDestination
열거형
fetch()
메서드
Paint Timing에서 다음 용어가 정의되었습니다: [PAINTTIMING]
Navigation Timing에서 다음 용어가 정의되었습니다: [NAVIGATIONTIMING]
NavigationTimingType
및 그 값들:
"navigate
",
"reload
",
"back_forward
".
Resource Timing에서 다음 용어가 정의되었습니다: [RESOURCETIMING]
Performance Timeline에서 다음 용어가 정의되었습니다: [PERFORMANCETIMELINE]
PerformanceEntry
및 그 속성들:
name
,
entryType
,
startTime
,
duration
.
Long Animation Frames에서 다음 용어가 정의되었습니다: [LONGANIMATIONFRAMES]
Long Tasks에서 다음 용어가 정의되었습니다: [LONGTASKS]
이 명세서의 IDL 조각은 Web IDL에 설명된 대로 IDL 조각을 준수하기 위해 해석되어야 합니다. [WEBIDL]
Web IDL에서 다음 용어가 정의되었습니다:
[Global]
[LegacyFactoryFunction]
[LegacyLenientThis]
[LegacyNullToEmptyString]
[LegacyOverrideBuiltIns]
[LegacyTreatNonObjectAsNull]
[LegacyUnenumerableNamedProperties]
[LegacyUnforgeable]
Web IDL 또한 이 명세서의 Web IDL 조각에서 사용되는 다음 타입을 정의합니다:
ArrayBuffer
ArrayBufferView
boolean
DOMString
double
Function
long
object
Promise
Uint8ClampedArray
unrestricted double
unsigned long
USVString
VoidFunction
이 명세서에서 throw라는 용어는
Web IDL에 정의된 대로 사용됩니다. DOMException
타입
및 다음 예외 이름은 Web IDL에 의해 정의되고 이 명세서에서 사용됩니다:
IndexSizeError
"
HierarchyRequestError
"
InvalidCharacterError
"
NoModificationAllowedError
"
NotFoundError
"
NotSupportedError
"
InvalidStateError
"
SyntaxError
"
InvalidAccessError
"
SecurityError
"
NetworkError
"
AbortError
"
QuotaExceededError
"
DataCloneError
"
EncodingError
"
NotAllowedError
"
이 명세서가 특정 시간을 나타내는 Date
객체를 생성해야 하는 경우(특별 값
Not-a-Number 포함), 해당 시간이 있다면 그 밀리초 구성요소는 정수로 잘려야 하며, 새로 생성된 Date
객체의 시간 값은 잘린 결과를 나타내야 합니다.
예를 들어, 2000년 1월 1일 01:00 UTC 이후 23045만분의 1초인 2000-01-01T00:00:00.023045Z의 경우, 해당 시간을
나타내는 객체는 45만분의 1초 이전의 2000-01-01T00:00:00.023Z 시간을 나타내는 객체와 동일한 시간을 나타냅니다. 주어진 시간이 NaN인 경우, 결과는 특정
시간을 나타내지 않는 시간을 나타내는 Date
객체가 됩니다.
이 명세서에서 설명하는 언어의 일부는 JavaScript를 기본 스크립팅 언어로만 지원합니다. [JAVASCRIPT]
"JavaScript"라는 용어는 ECMAScript라는 공식 용어 대신 ECMA-262를 지칭하는 데 사용되며, 이는 JavaScript가 더 널리 알려져 있기 때문입니다.
다음 용어는 JavaScript 명세서에 정의되어 있으며, 이 명세서에서 사용됩니다:
Atomics
객체
Atomics.waitAsync
객체
Date
클래스
FinalizationRegistry
클래스
RegExp
클래스
SharedArrayBuffer
클래스
SyntaxError
클래스
TypeError
클래스
RangeError
클래스
WeakRef
클래스
eval()
함수
WeakRef.prototype.deref()
함수
import()
import.meta
typeof
연산자
delete
연산자
JavaScript를 지원하는 사용자 에이전트는 동적 코드 브랜드 체크 제안을 구현해야 합니다. 이 명세서에서 사용하는 다음 용어가 해당 제안에 정의되어 있습니다: [JSDYNAMICCODEBRANDCHECKS]
JavaScript를 지원하는 사용자 에이전트는 또한 ECMAScript 국제화 API를 구현해야 합니다. [JSINTL]
JavaScript를 지원하는 사용자 에이전트는 또한 Import Attributes 제안을 구현해야 합니다. 이 명세서에서 사용하는 다음 용어가 해당 제안에 정의되어 있습니다: [JSIMPORTATTRIBUTES]
JavaScript를 지원하는 사용자 에이전트는 또한 JSON 모듈 제안을 구현해야 합니다. 이 명세서에서 사용하는 다음 용어가 해당 제안에 정의되어 있습니다: [JSJSONMODULES]
JavaScript를 지원하는 사용자 에이전트는 또한 크기 조정 가능한 ArrayBuffer 및 확장 가능한 SharedArrayBuffer 제안을 구현해야 합니다. 이 명세서에서 사용하는 다음 용어가 해당 제안에 정의되어 있습니다: [JSRESIZABLEBUFFERS]
JavaScript를 지원하는 사용자 에이전트는 또한 Temporal 제안을 구현해야 합니다. 이 명세서에서 사용하는 다음 용어가 해당 제안에 정의되어 있습니다: [JSTEMPORAL]
WebAssembly JavaScript Interface에서 정의된 용어는 다음과 같습니다: [WASMJS]
문서 객체 모델(DOM)은 문서와 그 내용의 표현입니다. DOM은 단순한 API가 아니라, HTML 구현의 적합성 기준이 이 명세서에서 DOM 작업의 관점에서 정의됩니다. [DOM]
이 명세서는 DOM을 통해 정의되며, 일부 기능은 DOM 인터페이스의 확장으로 정의되므로 구현체는 DOM과 UI 이벤트에서 정의된 이벤트를 지원해야 합니다. [DOM] [UIEVENTS]
특히, DOM에서 정의된 기능은 다음과 같습니다: [DOM]
Attr
인터페이스
CharacterData
인터페이스
Comment
인터페이스
DOMImplementation
인터페이스
Document
인터페이스 및 그
doctype
속성
DocumentOrShadowRoot
인터페이스
DocumentFragment
인터페이스
DocumentType
인터페이스
ChildNode
인터페이스
Element
인터페이스
attachShadow()
메서드.
Node
인터페이스
NodeList
인터페이스
ProcessingInstruction
인터페이스
ShadowRoot
인터페이스
Text
인터페이스
Range
인터페이스
HTMLCollection
인터페이스, 그
length
속성 및 그
item()
및
namedItem()
메서드
DOMTokenList
인터페이스, 그
value
속성과 supports
작업
createDocument()
메서드
createHTMLDocument()
메서드
createElement()
메서드
createElementNS()
메서드
getElementById()
메서드
getElementsByClassName()
메서드
append()
메서드
appendChild()
메서드
cloneNode()
메서드
importNode()
메서드
preventDefault()
메서드
id
속성
setAttribute()
메서드
textContent
속성
slotchange
이벤트
CharacterData
노드의 개념과 그
데이터 교체
알고리즘
Event
인터페이스
Event
및 파생된
인터페이스의 생성자 동작
EventTarget
인터페이스
EventInit
딕셔너리 유형
type
속성
currentTarget
속성
bubbles
속성
cancelable
속성
composed
속성
isTrusted
속성
initEvent()
메서드
addEventListener()
메서드
EventListener
콜백 인터페이스
Document
의
is
값
MutationObserver
인터페이스와 일반적으로 변이 관찰자
AbortController
및
그 신호
AbortSignal
다음 기능은 UI Events에 정의되어 있습니다: [UIEVENTS]
MouseEvent
인터페이스
MouseEvent
인터페이스의 relatedTarget
속성
MouseEventInit
사전형 타입
FocusEvent
인터페이스
FocusEvent
인터페이스의 relatedTarget
속성
UIEvent
인터페이스
UIEvent
인터페이스의 view
속성
auxclick
이벤트
beforeinput
이벤트
click
이벤트
contextmenu
이벤트
dblclick
이벤트
input
이벤트
mousedown
이벤트
mouseenter
이벤트
mouseleave
이벤트
mousemove
이벤트
mouseout
이벤트
mouseover
이벤트
mouseup
이벤트
wheel
이벤트
keydown
이벤트
keypress
이벤트
keyup
이벤트
다음 기능은 Touch Events에 정의되어 있습니다: [TOUCH]
다음 기능은 Pointer Events에 정의되어 있습니다: [POINTEREVENTS]
PointerEvent
인터페이스
PointerEvent
인터페이스의 pointerType
속성
pointerdown
이벤트
pointerup
이벤트
pointercancel
이벤트
다음 이벤트는 Clipboard API and events에 정의되어 있습니다: [CLIPBOARD-APIS]
이 사양에서는 때때로 이벤트의 타입을 참조하여
이름이라는 용어를 사용합니다. 예를 들어 "이름이 click
인 이벤트" 또는 "이벤트 이름이 keypress
인
경우"와 같이 사용됩니다. 이벤트의 "이름"과 "타입"은 동의어입니다.
다음 기능은 DOM Parsing and Serialization에 정의되어 있습니다: [DOMPARSING]
다음 기능은 Selection API에 정의되어 있습니다: [SELECTION]
사용자 에이전트는 execCommand에서 설명한 기능을 구현하는 것이 권장됩니다. [EXECCOMMAND]
다음 기능은 Fullscreen API에 정의되어 있습니다: [FULLSCREEN]
High Resolution Time는 다음 기능을 제공합니다: [HRT]
이 명세서는 파일 API에 정의된 다음 기능들을 사용합니다: [FILEAPI]
Blob
인터페이스와 그
type
속성
File
인터페이스와 그
name
및
lastModified
속성들
FileList
인터페이스
Blob
의
스냅샷 상태
개념
이 명세서는 인덱스된 데이터베이스 API에 정의된 인덱스된 데이터베이스 트랜잭션 정리 을 사용합니다. [INDEXEDDB]
다음 용어들은 미디어 소스 확장에 정의되어 있습니다: [MEDIASOURCE]
MediaSource
인터페이스
다음 용어들은 미디어 캡처 및 스트림에 정의되어 있습니다: [MEDIASTREAM]
MediaStream
인터페이스
다음 용어들은 리포팅에 정의되어 있습니다: [REPORTING]
다음 기능들과 용어들은 XMLHttpRequest에 정의되어 있습니다: [XHR]
XMLHttpRequest
인터페이스와 그
responseXML
속성
ProgressEvent
인터페이스와 그
lengthComputable
,
loaded
,
및
total
속성들
FormData
인터페이스와 그 연관된
엔트리
목록
다음 기능들은 배터리 상태 API에 정의되어 있습니다: [BATTERY]
getBattery()
메서드
구현체는 미디어 쿼리를 지원해야 합니다. <media-condition> 기능이 그곳에 정의되어 있습니다. [MQ]
이 명세서의 구현에 CSS 전체에 대한 지원이 필수는 아니지만(특히 웹 브라우저의 경우 지원을 권장함), 일부 기능은 특정 CSS 요구 사항에 따라 정의됩니다.
이 명세서에서 무언가를 특정 CSS 문법에 따라 구문 분석해야 한다고 요구할 때, CSS 구문의 관련 알고리즘을 따라야 하며, 오류 처리 규칙도 포함됩니다. [CSSSYNTAX]
예를 들어, 사용자 에이전트는 스타일 시트의 끝을 예상치 못하게 발견할 때 모든 열린 구문을 닫아야 합니다. 따라서 색상 값으로 문자열
"rgb(0,0,0
"(닫는 괄호가 누락된 경우)을 구문 분석할 때 이 오류 처리 규칙에 따라 닫는 괄호가 암시되어 검은색이 얻어집니다. 그러나
"rgb(0,0,
"(괄호와 "blue" 값이 모두 누락된 경우)와 같은 유사한 구문은 열린 구문을 닫아도 적절한 값을 얻을 수 없으므로 구문 분석할 수
없습니다.
다음 용어와 기능은 CSS에서 정의됩니다: [CSS]
'display' 속성의 기본 버전은 CSS에 정의되어 있으며, 이 속성은 다른 CSS 모듈에 의해 확장됩니다. [CSS] [CSSRUBY] [CSSTABLE]
다음 용어와 기능은 CSS 박스 모델에 정의되어 있습니다: [CSSBOX]
다음 기능들은 CSS 논리적 속성에 정의되어 있습니다: [CSSLOGICAL]
다음 용어와 기능들은 CSS 색상에 정의되어 있습니다: [CSSCOLOR]
다음 용어는 CSS 이미지에 정의되어 있습니다: [CSSIMAGES]
페인트 소스 용어는 CSS 이미지 레벨 4에서 정의되었으며, CSS 'element()' 함수와 특정 HTML 요소 간의 상호작용을 정의하는 데 사용됩니다. [CSSIMAGES4]
다음 기능들은 CSS 배경 및 테두리에 정의되어 있습니다: [CSSBG]
CSS 배경 및 테두리는 다음과 같은 테두리 속성도 정의합니다: [CSSBG]
다음 기능들은 CSS 박스 정렬에 정의되어 있습니다: [CSSALIGN]
다음 용어와 기능들은 CSS 디스플레이에 정의되어 있습니다: [CSSDISPLAY]
다음 기능들은 CSS 플렉서블 박스 레이아웃에 정의되어 있습니다: [CSSFLEXBOX]
다음 용어와 기능들은 CSS 폰트에 정의되어 있습니다: [CSSFONTS]
다음 기능들은 CSS 그리드 레이아웃에 정의되어 있습니다: [CSSGRID]
다음 용어는 CSS 인라인 레이아웃에 정의되어 있습니다: [CSSINLINE]
다음 용어와 기능들은 CSS 박스 사이징에 정의되어 있습니다: [CSSSIZING]
다음 기능들은 CSS 목록 및 카운터에 정의되어 있습니다. [CSSLISTS]
다음 기능들은 CSS 오버플로우에 정의되어 있습니다. [CSSOVERFLOW]
다음 용어와 기능들은 CSS 위치 지정 레이아웃에 정의되어 있습니다: [CSSPOSITION]
다음 기능들은 CSS 멀티컬럼 레이아웃에 정의되어 있습니다. [CSSMULTICOL]
'ruby-base' 값은 'display' 속성의 값으로 CSS 루비 레이아웃에 정의되어 있습니다. [CSSRUBY]
다음 기능들은 CSS 테이블에 정의되어 있습니다: [CSSTABLE]
다음 기능들은 CSS 텍스트에 정의되어 있습니다: [CSSTEXT]
다음 기능들은 CSS 쓰기 모드에 정의되어 있습니다: [CSSWM]
다음 기능들은 CSS 기본 사용자 인터페이스에 정의되어 있습니다: [CSSUI]
애니메이션을 업데이트하고 이벤트를 전송하는 알고리즘은 웹 애니메이션에 정의되어 있습니다. [WEBANIMATIONS]
스크립팅을 지원하는 구현은 CSS 객체 모델을 지원해야 합니다. 다음 기능과 용어는 CSSOM 명세에서 정의되어 있습니다: [CSSOM] [CSSOMVIEW]
Screen
인터페이스
LinkStyle
인터페이스
CSSStyleDeclaration
인터페이스
style
IDL 속성
cssText
속성 CSSStyleDeclaration
StyleSheet
인터페이스
CSSStyleSheet
인터페이스
CSSStyleSheet
생성
CSSStyleSheet
규칙을 교체
resize
이벤트
scroll
이벤트
scrollend
이벤트
다음 기능들과 용어들은 CSS Syntax에 정의되어 있습니다: [CSSSYNTAX]
다음 용어들은 Selectors에 정의되어 있습니다: [SELECTORS]
다음 기능들은 CSS Values and Units에 정의되어 있습니다: [CSSVALUES]
다음 기능들은 CSS View Transitions에 정의되어 있습니다: [CSSVIEWTRANSITIONS]
ViewTransition
스타일 속성 용어는 CSS Style Attributes에 정의되어 있습니다. [CSSATTR]
다음 용어들은 CSS Cascading and Inheritance에 정의되어 있습니다: [CSSCASCADE]
CanvasRenderingContext2D
객체의 글꼴 사용은 CSS Fonts 및 Font Loading 명세에서 설명된 기능들에 따라 달라집니다. 특히 FontFace
객체와 글꼴 소스 개념에 의존합니다. [CSSFONTS] [CSSFONTLOAD]
다음 인터페이스들과 용어들은 Geometry Interfaces에 정의되어 있습니다: [GEOMETRY]
DOMMatrix
인터페이스,
그리고 관련된
m11
요소,
m12
요소,
m21
요소,
m22
요소,
m41
요소,
m42
요소
DOMMatrix2DInit
및 DOMMatrixInit
사전 정의
DOMMatrix
생성 및 2D 사전에서
DOMMatrix
생성 알고리즘은 DOMMatrix2DInit
또는 DOMMatrixInit
을
사용합니다.
DOMPointInit
사전 정의, 그리고 관련된 x 및 y 멤버들
다음 용어들은 CSS Scoping에 정의되어 있습니다: [CSSSCOPING]
다음 용어들과 기능들은 CSS Color Adjustment에 정의되어 있습니다: [CSSCOLORADJUST]
다음 용어들은 CSS Pseudo-Elements에 정의되어 있습니다: [CSSPSEUDO]
다음 용어들은 CSS Containment에 정의되어 있습니다: [CSSCONTAIN]
다음 용어는 Intersection Observer에 정의되어 있습니다: [INTERSECTIONOBSERVER]
다음 용어들은 Resize Observer에 정의되어 있습니다: [RESIZEOBSERVER]
다음 인터페이스들은 WebGL 명세서에 정의되어 있습니다: [WEBGL]
WebGLRenderingContext
인터페이스
WebGL2RenderingContext
인터페이스
WebGLContextAttributes
사전 정의
다음 인터페이스들은 WebGPU에 정의되어 있습니다: [WEBGPU]
GPUCanvasContext
인터페이스
구현체들은 WebVTT를 자막, 캡션, 메타데이터 등의 텍스트 트랙 형식으로 지원할 수 있습니다. [WEBVTT]
이 명세서에서 사용된 다음 용어들은 WebVTT에 정의되어 있습니다:
role
속성은
Accessible Rich Internet Applications (ARIA)에 정의되어 있으며, 다음 역할들도 포함됩니다: [ARIA]
또한, 다음 aria-*
콘텐츠 속성들도 ARIA에 정의되어 있습니다: [ARIA]
마지막으로, 다음 용어들은 ARIA에 정의되어 있습니다: [ARIA]
ARIAMixin
인터페이스,
그리고 관련된
ARIAMixin
getter 단계와
ARIAMixin
setter 단계 훅
다음 용어들은 콘텐츠 보안 정책에 정의되어 있습니다: [CSP]
report-uri
지침
frame-ancestors
지침
sandbox
지침
SecurityPolicyViolationEvent
인터페이스
securitypolicyviolation
이벤트
다음 용어들은 Service Workers에 정의되어 있습니다: [SW]
다음 알고리즘들은 보안 컨텍스트에 정의되어 있습니다: [SECURE-CONTEXTS]
다음 용어들은 권한 정책에 정의되어 있습니다: [PERMISSIONSPOLICY]
다음 기능은 결제 요청 API에서 정의되었습니다: [PAYMENTREQUEST]
PaymentRequest
인터페이스
이 규격에서는 MathML 전체를 지원할 필요는 없지만 (웹 브라우저에서는 권장됨), 특정 기능은 MathML의 일부 요소 구현에 의존합니다. [MATHML]
다음 기능은 수학적 마크업 언어 (MathML)에서 정의됩니다:
annotation-xml
요소
math
요소
merror
요소
mi
요소
mn
요소
mo
요소
ms
요소
mtext
요소
이 규격에서는 SVG 전체를 지원할 필요는 없지만 (웹 브라우저에서는 권장됨), 특정 기능은 SVG의 일부 요소 구현에 의존합니다.
SVG를 구현하는 사용자 에이전트는 SVG 2 사양을 구현해야 하며, 이전 버전은 지원하지 않습니다.
다음 기능은 SVG 2 사양에서 정의됩니다: [SVG]
SVGElement
인터페이스
SVGImageElement
인터페이스
SVGScriptElement
인터페이스
SVGSVGElement
인터페이스
a
요소
desc
요소
foreignObject
요소
image
요소
script
요소
svg
요소
title
요소
use
요소
text-rendering
속성
다음 기능은 필터 효과에서 정의됩니다: [FILTERS]
다음 기능은 합성 및 혼합에서 정의됩니다: [COMPOSITE]
다음 기능은 백그라운드 작업의 협력적 스케줄링에서 정의됩니다: [REQUESTIDLECALLBACK]
다음 용어는 화면 방향에서 정의됩니다: [SCREENORIENTATION]
다음 용어는 저장소에서 정의됩니다: [STORAGE]
다음 기능은 웹 앱 매니페스트에서 정의됩니다: [MANIFEST]
다음 용어들은 WebAssembly 자바스크립트 인터페이스: ESM 통합에서 정의됩니다: [WASMESM]
다음 기능은 WebCodecs에서 정의됩니다: [WEBCODECS]
다음 용어는 WebDriver에서 정의됩니다: [WEBDRIVER]
다음 용어는 WebDriver BiDi에서 정의됩니다: [WEBDRIVERBIDI]
다음 용어는 웹 암호화 API에서 정의됩니다: [WEBCRYPTO]
다음 용어는 웹소켓에서 정의됩니다: [WEBSOCKETS]
다음 용어는 웹 전송에서 정의됩니다: [WEBTRANSPORT]
다음 용어는 웹 인증: 공개 키 자격 증명에 액세스하기 위한 API에서 정의됩니다: [WEBAUTHN]
다음 용어는 자격 증명 관리에서 정의됩니다: [CREDMAN]
다음 용어는 콘솔에서 정의됩니다: [CONSOLE]
다음 용어는 웹 잠금 API에서 정의됩니다: [WEBLOCKS]
이 사양은 신뢰된 유형에서 정의된 다음 기능을 사용합니다: [TRUSTED-TYPES]
이 명세는 특정 네트워크 프로토콜, 스타일 시트 언어, 스크립팅 언어, 또는 위에 나열된 것들 외의 DOM 명세를 필수적으로 지원해야 하는 것은 아닙니다. 그러나 이 명세에서 설명하는 언어는 CSS를 스타일링 언어로, JavaScript를 스크립팅 언어로, HTTP를 네트워크 프로토콜로 편향되어 있으며, 여러 기능이 이러한 언어와 프로토콜이 사용되고 있음을 전제로 합니다.
HTTP 프로토콜을 구현하는 사용자 에이전트는 HTTP 상태 관리 메커니즘 (쿠키)도 구현해야 합니다. [HTTP] [COOKIES]
이 명세는 각 섹션에서 문자 인코딩, 이미지 형식, 오디오 형식 및 비디오 형식에 대한 추가적인 요구 사항이 있을 수 있습니다.
이 사양에 대한 공급업체별 독점 사용자 에이전트 확장은 강력히 권장되지 않습니다. 문서에서 이러한 확장을 사용해서는 안 되며, 그렇게 하면 상호 운용성이 감소하고 사용자 기반이 분열되어 특정 사용자 에이전트만 콘텐츠에 접근할 수 있게 됩니다.
모든 확장은 이 사양에서 정의된 기능을 모순되거나 비준수로 만들지 않도록 정의되어야 합니다.
예를 들어, 권장되지 않지만, 구현에서 사용자에게 현재 제어값을 선택하는 데 걸린 시간을 반환하는 "typeTime
"이라는 새로운 IDL 속성을 컨트롤에 추가할 수
있습니다. 반면, 양식의 elements
배열에
나타나는 새로운 컨트롤을 정의하는 것은 위의 요구 사항을 위반하는 것으로, 이 사양에서 제공된 elements
의 정의를 위반하는 것입니다.
이 사양에 대한 공급업체 중립적인 확장이 필요할 때, 이 사양을 적절히 업데이트하거나 이 사양의 요구 사항을 무효화하는 확장 사양을 작성할 수 있습니다. 이 사양을 적용하는 사람이 해당 확장 사양의 요구 사항을 인정하기로 결정하면, 해당 확장 사양은 이 사양의 준수 요구 사항의 목적에 대해 적용 가능한 사양이 됩니다.
누군가는 임의의 바이트 스트림을 준수하는 것으로 정의하는 사양을 작성한 후, 자신이 만든 무작위 데이터가 준수한다고 주장할 수 있습니다. 그러나 이것이 모든 목적에서 실제로 준수된다는 의미는 아닙니다. 다른 사람이 해당 사양이 자신의 작업에 적용되지 않는다고 결정하면, 해당 무작위 데이터가 단지 쓰레기일 뿐이며 전혀 준수되지 않는다고 정당하게 말할 수 있습니다. 준수에 관한 한, 특정 커뮤니티에서 중요한 것은 그 커뮤니티가 적용 가능한 것으로 동의하는 것입니다.
사용자 에이전트는 이해하지 못하는 요소와 속성을 의미적으로 중립적으로 취급해야 하며, 이를 DOM에 남겨두고(CSS 프로세서의 경우 CSS에 따라 스타일을 지정) 의미를 유추해서는 안 됩니다.
기능에 대한 지원이 비활성화된 경우(예: 보안 문제를 완화하기 위한 긴급 조치, 개발 지원, 성능 문제 등), 사용자 에이전트는 해당 기능에 대한 지원이 전혀 없었던 것처럼 행동해야 하며, 해당 기능이 이 사양에서 언급되지 않은 것처럼 행동해야 합니다. 예를 들어, 특정 기능이 Web IDL 인터페이스의 속성을 통해 접근되는 경우, 해당 속성 자체는 해당 인터페이스를 구현하는 객체에서 생략되어야 하며, 속성을 객체에 남겨두고 null을 반환하거나 예외를 발생시키는 것은 충분하지 않습니다.
이 사양에 설명된 방식으로 파싱되거나 생성된 HTML 문서에서 작동하는 XPath 1.0의 구현은 다음 편집이 XPath 1.0 사양에 적용된 것처럼 작동해야 합니다.
먼저, 다음 단락을 제거합니다:
노드 테스트의 QName은 표현 컨텍스트에서 네임스페이스 선언을 사용하여 확장된 이름으로 확장됩니다. 이는 시작 및 종료 태그의 요소 유형 이름에 대해 확장이 수행되는 방식과 동일하지만,
xmlns
로 선언된 기본 네임스페이스는 사용되지 않습니다: QName에 접두사가 없으면 네임스페이스 URI는 null입니다 (속성 이름이 확장되는 방식과 동일합니다). QName에 표현 컨텍스트에서 네임스페이스 선언이 없는 접두사가 있는 경우 오류가 발생합니다.
그런 다음, 다음 내용으로 대체합니다:
노드 테스트의 QName은 표현 컨텍스트에서 네임스페이스 선언을 사용하여 확장된 이름으로 확장됩니다. QName에 접두사가 있는 경우, 이 접두사에 대한 네임스페이스 선언이 표현 컨텍스트에 있어야 하며, 해당 네임스페이스 URI는 이 접두사와 연결된 URI입니다. QName에 표현 컨텍스트에서 네임스페이스 선언이 없는 접두사가 있는 경우 오류가 발생합니다.
QName에 접두사가 없고 축의 주요 노드 유형이 요소인 경우 기본 요소 네임스페이스가 사용됩니다. 그렇지 않고 QName에 접두사가 없는 경우 네임스페이스 URI는 null입니다. 기본 요소 네임스페이스는 XPath 표현식의 컨텍스트 구성원입니다. DOM3 XPath API를 통해 XPath 표현식을 실행할 때 기본 요소 네임스페이스의 값은 다음과 같이 결정됩니다:
- 컨텍스트 노드가 HTML DOM에서 온 경우 기본 요소 네임스페이스는 "http://www.w3.org/1999/xhtml"입니다.
- 그 외의 경우 기본 요소 네임스페이스 URI는 null입니다.
이는 XPath 2.0의 기본 요소 네임스페이스 기능을 XPath 1.0에 추가하고, HTML 문서에 대해 HTML 네임스페이스를 기본 요소 네임스페이스로 사용하는 것과 동일합니다. 이는 이 사양이 HTML 요소에 사용되는 네임스페이스에 도입하는 변경 사항을 지원하면서도 기존 HTML 콘텐츠와 호환되도록 구현하려는 욕구에서 비롯되었으며, XPath 2.0보다는 XPath 1.0을 사용하려는 욕구에서 비롯되었습니다.
이 변경 사항은 HTML 요소에 사용되는 네임스페이스와 관련하여 이 사양이 도입하는 변경 사항을 지원하면서도 기존 콘텐츠와 호환되도록 구현하려는 욕구에서 비롯된 XPath 1.0 사양의 의도적인 위반입니다. [XPATH10]
XSLT 1.0 프로세서가 출력 메서드가 "html"인 경우(DOM으로 출력하는 경우 XSLT 1.0에서의 기본 규칙을 통해 명시적으로 또는 기본 규칙을 통해) 다음과 같이 영향을 받습니다:
변환 프로그램이 네임스페이스가 없는 요소를 출력하는 경우, 프로세서는 해당 DOM 요소 노드를 구성하기 전에 요소의 네임스페이스를 HTML 네임스페이스로 변경하고, 요소의 로컬 이름을 ASCII 소문자로 변환하며, 요소의 비네임스페이스 속성의 이름도 ASCII 소문자로 변환해야 합니다.
이 요구 사항은 DOM 기반 XSLT 변환과 호환되지 않을 수 있는 방식으로 HTML의 네임스페이스 및 대소문자 구분 규칙을 변경하기 때문에 필요합니다. (출력을 직렬화하는 프로세서는 영향을 받지 않습니다.) [XSLT10]
이 사양은 XSLT 처리와 HTML 파서 인프라가 상호작용하는 방식을
정확히 명시하지 않습니다
(예: XSLT 프로세서가 모든 요소를 열린 요소의 스택에 넣는 것처럼 작동하는지 여부).
그러나 XSLT 프로세서는 성공적으로 완료된 경우 파싱을 중지해야
하며, 중단된 경우 먼저 "interactive
"로, 그 다음 "complete
"로
현재 문서 준비 상태를 업데이트해야 합니다.
이 사양은 XSLT가 탐색 알고리즘과 상호작용하는 방식, 이벤트 루프와의 연관성, 또는 오류 페이지가 처리되는 방식(XSLT 오류가 증분 XSLT 출력을 대체하는지, 인라인으로 렌더링되는지 등)을 명시하지 않습니다.
XSLT와 HTML 간의 상호작용에 관한 추가적인 비규범적 설명이 script
요소 섹션에 있으며,
XSLT, XPath, HTML 간의 상호작용에 관한 설명이 template
요소 섹션에 있습니다.
Headers/Permissions-Policy/document-domain
하나의 엔진에서만 지원됩니다.
이 문서는 다음과 같은 정책으로 제어되는 기능을 정의합니다:
Headers/Feature-Policy/autoplay
Headers/Permissions-Policy/autoplay
하나의 엔진에서만 지원됩니다.
HTML에서는 날짜나 숫자와 같은 특정 데이터 유형을 허용하는 다양한 위치가 있습니다. 이 섹션에서는 해당 형식의 콘텐츠에 대한 적합성 기준과 이를 파싱하는 방법을 설명합니다.
구현자들은 아래 설명된 구문을 파싱하기 위해 사용할 수 있는 서드파티 라이브러리를 신중하게 검토할 것을 강력히 권장합니다. 예를 들어, 날짜 라이브러리는 이 사양에서 요구하는 것과 다른 오류 처리 동작을 구현할 가능성이 큽니다. 이는 유사한 날짜 구문을 설명하는 사양에서는 오류 처리 동작이 자주 정의되지 않기 때문에, 구현에 따라 오류를 처리하는 방식이 크게 다를 수 있기 때문입니다.
아래에 설명된 일부 마이크로 파서는 파싱할 문자열을 저장하는 input 변수와 input에서 다음에 파싱할 문자를 가리키는 position 변수를 가지는 패턴을 따릅니다.
많은 속성이 불리언 속성입니다. 요소에 불리언 속성이 존재하면 true 값을 나타내고, 속성이 없으면 false 값을 나타냅니다.
속성이 존재하는 경우, 그 값은 빈 문자열이거나 속성의 표준 이름과 ASCII 대소문자 구분 없이 일치하는 값이어야 하며, 앞뒤에 공백이 없어야 합니다.
불리언 속성에는 "true"와 "false" 값을 사용할 수 없습니다. false 값을 나타내려면 속성을 완전히 생략해야 합니다.
다음은 체크되어 있고 비활성화된 체크박스의 예입니다. checked
와
disabled
속성이 불리언 속성입니다.
< label >< input type = checkbox checked name = cheese disabled > Cheese</ label >
이 코드는 다음과 같이 동일하게 작성할 수 있습니다:
< label >< input type = checkbox checked = checked name = cheese disabled = disabled > Cheese</ label >
스타일을 혼합해서 사용하는 것도 가능하며, 다음과 같이 작성해도 여전히 동일한 의미를 갖습니다:
< label >< input type = 'checkbox' checked name = cheese disabled = "" > Cheese</ label >
일부 속성은 열거형 속성이라 하며, 유한한 상태 집합을 가집니다. 이러한 속성의 상태는 속성의 값, 각 속성의 사양에 명시된 키워드/상태 매핑 세트, 그리고 속성의 사양에 명시될 수 있는 두 가지 특수 상태를 조합하여 도출됩니다. 이 특수 상태는 유효하지 않은 값의 기본값과 누락된 값의 기본값입니다.
여러 키워드가 동일한 상태에 매핑될 수 있습니다.
빈 문자열도 유효한 키워드일 수 있습니다. 누락된 값의 기본값은 속성이 존재하지 않을 때만 적용되며, 빈 문자열 값이 있는 경우에는 적용되지 않음을 유의하십시오.
속성의 상태를 결정하려면 다음 단계를 따르십시오:
속성이 지정되지 않은 경우:
속성에 누락된 값의 기본값 상태가 정의되어 있으면, 해당 누락된 값의 기본값 상태를 반환합니다.
그렇지 않으면 상태를 반환하지 않습니다.
속성의 값이 속성에 대해 정의된 키워드 중 하나와 ASCII 대소문자 구분 없이 일치하는 경우, 해당 키워드가 나타내는 상태를 반환합니다.
속성에 유효하지 않은 값의 기본값 상태가 정의되어 있으면, 해당 유효하지 않은 값의 기본값 상태를 반환합니다.
상태를 반환하지 않습니다.
작성 적합성 기준을 위해, 열거형 속성이 지정된 경우 해당 속성의 값은 해당 속성의 적합한 키워드 중 하나와 ASCII 대소문자 구분 없이 일치해야 하며, 앞뒤에 공백이 없어야 합니다.
반영 목적으로, 키워드가 매핑되는 상태는 표준 키워드를 가진다고 합니다. 이는 다음과 같이 결정됩니다:
주어진 상태에 매핑되는 키워드가 하나만 있는 경우, 그 키워드가 표준 키워드입니다.
해당 상태에 매핑되는 적합한 키워드가 하나만 있는 경우, 그 적합한 키워드가 표준 키워드입니다.
그렇지 않은 경우, 해당 상태의 표준 키워드는 속성의 사양에 명시됩니다.
문자열이 하나 이상의 ASCII 숫자로 구성되고, 선택적으로 U+002D 하이픈-마이너스 문자(-)로 시작하는 경우, 그 문자열은 유효한 정수입니다.
U+002D 하이픈-마이너스(-) 접두사가 없는 유효한 정수는 해당 숫자 문자열로 나타낸 10진수 숫자를 나타냅니다. U+002D 하이픈-마이너스(-) 접두사가 있는 유효한 정수는 하이픈-마이너스 뒤에 나오는 숫자 문자열로 나타낸 10진수 숫자에서 0을 뺀 값을 나타냅니다.
정수 파싱 규칙은 다음 알고리즘에 제시된 대로입니다. 호출될 때, 주어진 순서대로 단계를 따라야 하며, 값을 반환하는 첫 번째 단계에서 중단합니다. 이 알고리즘은 정수 또는 오류를 반환합니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
sign을(를) "positive"로 설정합니다.
ASCII 공백을 건너뜁니다 position이 가리키는 input 내에서.
position이 input의 끝을 지난 경우, 오류를 반환합니다.
position이 가리키는 문자(첫 번째 문자)가 U+002D 하이픈-마이너스 문자(-)인 경우:
그렇지 않고 position이 가리키는 문자(첫 번째 문자)가 U+002B 플러스 기호(+)인 경우:
+
"는 무시되지만, 이는 적합하지 않습니다.)
position이 가리키는 문자가 ASCII 숫자가 아니면, 오류를 반환합니다.
코드 포인트 시퀀스를 수집합니다 position이 가리키는 input에서 ASCII 숫자로 구성된 시퀀스를 수집하고, 결과 시퀀스를 10진수 정수로 해석합니다. value을(를) 그 정수로 설정합니다.
sign이 "positive"이면 value를 반환하고, 그렇지 않으면 value에서 0을 뺀 결과를 반환합니다.
문자열이 하나 이상의 ASCII 숫자로 구성된 경우, 그 문자열은 유효한 음이 아닌 정수입니다.
유효한 음이 아닌 정수는 해당 숫자 문자열로 나타낸 10진수 숫자를 나타냅니다.
음이 아닌 정수를 파싱하는 규칙은 다음 알고리즘에 제시된 대로입니다. 호출될 때, 주어진 순서대로 단계를 따라야 하며, 값을 반환하는 첫 번째 단계에서 중단합니다. 이 알고리즘은 0, 양의 정수 또는 오류를 반환합니다.
input을(를) 파싱 중인 문자열로 설정합니다.
value을(를) 정수 파싱 규칙을 사용하여 input을 파싱한 결과로 설정합니다.
value가 오류이면, 오류를 반환합니다.
value가 0보다 작으면, 오류를 반환합니다.
value을(를) 반환합니다.
문자열이 다음으로 구성된 경우, 그 문자열은 유효한 부동 소수점 숫자입니다:
선택적으로, U+002D 하이픈-마이너스 문자(-).
다음 중 하나 또는 둘 다, 주어진 순서대로:
선택적으로:
U+0065 라틴 소문자 e (e) 또는 U+0045 라틴 대문자 E (E).
선택적으로, U+002D 하이픈-마이너스 문자(-) 또는 U+002B 플러스 기호(+).
하나 이상의 ASCII 숫자.
유효한 부동 소수점 숫자는 유효숫자(significand)를 10의 지수승(exponent)으로 곱한 값으로 나타낸 숫자입니다. 여기서 유효숫자는 첫 번째 숫자로, 10진수로 해석됩니다(소수점 및 소수점 이후 숫자가 있을 경우 포함하며, 문자열 전체가 U+002D 하이픈-마이너스 문자(-)로 시작하고 숫자가 0이 아닌 경우 유효숫자를 음수로 해석). 지수는 E 뒤에 나오는 숫자입니다(숫자가 0이 아닌 경우, E와 숫자 사이에 U+002D 하이픈-마이너스 문자(-)가 있으면 지수를 음수로 해석하며, 그렇지 않으면 E와 숫자 사이에 U+002B 플러스 기호(+)가 있을 경우 이를 무시합니다). E가 없으면 지수는 0으로 처리됩니다.
Infinity 및 NaN(숫자가 아님) 값은 유효한 부동 소수점 숫자가 아닙니다.
유효한 부동
소수점 숫자 개념은 일반적으로 저자가 사용할 수 있는 것을 제한하는 데만 사용되며, 사용자 에이전트 요구사항은 아래의 부동 소수점 숫자 값을 파싱하는 규칙을 사용합니다(예:
max
속성이 progress
요소에 있는 경우).
그러나 일부 경우에는 사용자 에이전트 요구사항에 문자열이 유효한 부동 소수점 숫자인지 확인하는 것이 포함됩니다(예: 값 정화 알고리즘에서 Number 상태가
input
요소에 있는 경우, 또는 srcset 속성 파싱 알고리즘에서).
부동 소수점 숫자로서 숫자 n의 최적 표현은 ToString(n)을 실행하여 얻은 문자열입니다. ToString 추상 연산은 고유하게 결정되지 않습니다. 특정 값에 대해 ToString에서 얻을 수 있는 여러 문자열이 있을 때, 사용자 에이전트는 항상 해당 값에 대해 동일한 문자열을 반환해야 합니다(다른 사용자 에이전트에서 사용된 값과 다를 수 있음에도 불구하고).
부동 소수점 숫자 값을 파싱하는 규칙은 다음 알고리즘에 제시된 대로입니다. 이 알고리즘은 반환하는 단계에서 즉시 중단해야 합니다. 이 알고리즘은 숫자 또는 오류를 반환합니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
value를 1로 설정합니다.
divisor를 1로 설정합니다.
exponent를 1로 설정합니다.
ASCII 공백을 건너뜁니다 position이 가리키는 input 내에서.
position이 input의 끝을 지난 경우, 오류를 반환합니다.
position이 가리키는 문자가 U+002D 하이픈-마이너스 문자(-)인 경우:
그렇지 않고 position이 가리키는 문자(첫 번째 문자)가 U+002B 플러스 기호(+)인 경우:
+
"는 무시되지만, 이는 적합하지 않습니다.)
position이 가리키는 문자가 U+002E 풀 스톱 문자(.)이고, 그 다음 문자가 ASCII 숫자인 경우, value를 0으로 설정하고 fraction 단계로 이동합니다.
position이 가리키는 문자가 ASCII 숫자가 아니면, 오류를 반환합니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집하고, 이를 10진수 정수로 해석하여 value에 곱합니다.
Fraction: position이 가리키는 문자가 U+002E 풀 스톱(.)인 경우, 다음 단계를 실행합니다:
position이 input의 끝을 지나거나, position이 가리키는 문자가 ASCII 숫자, U+0065 라틴 소문자 e (e), 또는 U+0045 라틴 대문자 E (E)가 아닌 경우, conversion 단계로 이동합니다.
position이 가리키는 문자가 U+0065 라틴 소문자 e 또는 U+0045 라틴 대문자 E이면, 이 단계의 나머지를 건너뜁니다.
Fraction loop: divisor에 10을 곱합니다.
position이 input의 끝을 지난 경우, conversion 단계로 이동합니다.
position이 가리키는 문자가 ASCII 숫자인 경우, 이 단계의 fraction loop로 돌아갑니다.
position이 가리키는 문자가 U+0065 (e) 또는 U+0045 (E)인 경우, 다음을 실행합니다:
position이 input의 끝을 지난 경우, conversion 단계로 이동합니다.
position이 가리키는 문자가 U+002D 하이픈-마이너스 문자(-)인 경우:
그렇지 않고 position이 가리키는 문자가 U+002B 플러스 기호(+)인 경우:
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집하고, 이를 10진수 정수로 해석하여 exponent에 곱합니다.
Conversion: S를 유한한 IEEE 754 배정밀도 부동 소수점 값 집합(−0 제외)으로 설정하되, 21024 및 −21024를 추가합니다.
rounded-value를 value에 가장 가까운 S의 숫자로 설정하되, 두 개의 값이 동일하게 가까운 경우 유효숫자가 짝수인 숫자를 선택합니다(이 목적을 위해 21024 및 −21024는 유효숫자가 짝수로 간주됨).
rounded-value가 21024 또는 −21024인 경우, 오류를 반환합니다.
rounded-value을(를) 반환합니다.
차원 값을 파싱하는 규칙은 다음 알고리즘에 제시된 대로입니다. 호출될 때, 주어진 순서대로 단계를 따라야 하며, 값을 반환하는 첫 번째 단계에서 중단합니다. 이 알고리즘은 0.0 이상인 숫자 또는 실패를 반환합니다. 숫자가 반환된 경우, 이는 백분율 또는 길이로 추가로 분류됩니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) 위치 변수로 설정하며, 초기값은 input의 시작 위치입니다.
ASCII 공백을 건너뜁니다 position이 가리키는 input 내에서.
position이 input의 끝을 지나거나 input 내에서 position이 가리키는 코드 포인트가 ASCII 숫자가 아닌 경우, 실패를 반환합니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집하고, 이를 10진수 정수로 해석하여 value에 설정합니다.
position이 input의 끝을 지난 경우, value을(를) 길이로 반환합니다.
position이 가리키는 코드 포인트가 U+002E (.)인 경우, 다음을 실행합니다:
현재 차원 값을 value, input, position과 함께 반환합니다.
현재 차원 값은 value, input, position이 주어진 경우, 다음과 같이 결정됩니다:
position이 input의 끝을 지난 경우, value를 길이로 반환합니다.
position이 가리키는 코드 포인트가 U+0025 (%)인 경우, value를 백분율로 반환합니다.
value를 길이로 반환합니다.
0이 아닌 차원 값을 파싱하는 규칙은 다음 알고리즘에 제시된 대로입니다. 호출될 때, 주어진 순서대로 단계를 따라야 하며, 값을 반환하는 첫 번째 단계에서 중단합니다. 이 알고리즘은 0.0보다 큰 숫자 또는 오류를 반환합니다. 숫자가 반환된 경우, 이는 백분율 또는 길이로 추가로 분류됩니다.
input을(를) 파싱 중인 문자열로 설정합니다.
value를 차원 값을 파싱하는 규칙을 사용하여 input을 파싱한 결과로 설정합니다.
value가 오류이면, 오류를 반환합니다.
value가 0이면, 오류를 반환합니다.
value가 백분율인 경우, value를 백분율로 반환합니다.
value를 길이로 반환합니다.
유효한 부동 소수점 숫자 목록은 유효한 부동 소수점 숫자가 U+002C 콤마 문자로 구분된 것입니다. 다른 문자가 없어야 합니다(예: ASCII 공백이 없어야 함). 또한, 부동 소수점 숫자의 개수나 허용되는 값의 범위에 제한이 있을 수 있습니다.
부동 소수점 숫자 목록을 파싱하는 규칙은 다음과 같습니다:
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
numbers를 초기에는 비어 있는 부동 소수점 숫자 목록으로 설정합니다. 이 목록이 이 알고리즘의 결과가 됩니다.
코드 포인트 시퀀스를 수집합니다 position이 가리키는 input 내에서 ASCII 공백, U+002C 콤마, U+003B 세미콜론 문자를 수집합니다. 이는 앞부분의 구분 문자를 건너뜁니다.
position이 input의 끝을 지나지 않았을 때:
코드 포인트 시퀀스를 수집합니다 position이 가리키는 input 내에서 ASCII 공백, U+002C 콤마, U+003B 세미콜론, ASCII 숫자, U+002E 풀 스톱, U+002D 하이픈-마이너스 문자가 아닌 코드 포인트를 수집합니다. 이는 앞부분의 쓰레기를 건너뜁니다.
코드 포인트 시퀀스를 수집합니다 position이 가리키는 input 내에서 ASCII 공백, U+002C 콤마, U+003B 세미콜론이 아닌 코드 포인트를 수집하고, 이를 unparsed number로 설정합니다.
number를 부동 소수점 숫자 값을 파싱하는 규칙을 사용하여 unparsed number를 파싱한 결과로 설정합니다.
number가 오류이면, number를 0으로 설정합니다.
number를 numbers에 추가합니다.
코드 포인트 시퀀스를 수집합니다 position이 가리키는 input 내에서 ASCII 공백, U+002C 콤마, U+003B 세미콜론 문자를 수집합니다. 이는 구분 문자를 건너뜁니다.
numbers을(를) 반환합니다.
차원 목록을 파싱하는 규칙은 다음과 같습니다. 이 규칙은 0개 이상의 숫자와 단위로 구성된 쌍의 목록을 반환합니다. 단위는 백분율, 상대적인, 절대적인 중 하나입니다.
raw input을(를) 파싱 중인 문자열로 설정합니다.
만약 raw input의 마지막 문자가 U+002C 콤마 문자(,)인 경우, 해당 문자를 raw input에서 제거합니다.
문자열 raw input을 콤마로 나눕니다. raw tokens을(를) 생성된 토큰 목록으로 설정합니다.
result을(를) 비어 있는 숫자/단위 쌍 목록으로 설정합니다.
raw tokens의 각 토큰에 대해 다음 하위 단계를 실행합니다:
input을(를) 해당 토큰으로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
value를 0으로 설정합니다.
unit을(를) 절대적인으로 설정합니다.
position이 input의 끝을 지난 경우, unit을(를) 상대적인으로 설정하고 마지막 하위 단계로 이동합니다.
position이 가리키는 문자가 ASCII 숫자인 경우, 코드 포인트 시퀀스를 수집합니다 input에서, 결과 시퀀스를 10진수 정수로 해석하여 value에 추가합니다.
position이 가리키는 문자가 U+002E (.)인 경우:
코드 포인트 시퀀스를 수집합니다 ASCII 공백과 ASCII 숫자로 구성된 시퀀스를 input에서 수집합니다. s을(를) 생성된 시퀀스로 설정합니다.
s에서 모든 ASCII 공백을 제거합니다.
s이(가) 빈 문자열이 아닌 경우:
length를 s의 문자 수로 설정합니다.
fraction을(를) s을(를) 10진수 정수로 해석한 결과로 설정하고, 그 숫자를 10length로 나눕니다.
value에 fraction을(를) 추가합니다.
ASCII 공백을 건너뜁니다 input 내에서 position이 가리키는 위치에 따라.
position이 가리키는 문자가 U+0025 퍼센트 기호(%)인 경우, unit을(를) 백분율로 설정합니다.
그렇지 않고, position이 가리키는 문자가 U+002A 별표 문자(*)인 경우, unit을(를) 상대적인으로 설정합니다.
result에 value와 unit으로 구성된 항목을 추가합니다.
result 목록을 반환합니다.
다음 알고리즘에서는, 해당 year의 month에 있는 일수는 다음과 같습니다: month이 1, 3, 5, 7, 8, 10, 또는 12이면 31일, month이 4, 6, 9, 또는 11이면 30일, year가 400으로 나누어 떨어지거나, 4로 나누어 떨어지지만 100으로 나누어 떨어지지 않는 경우 month이 2이면 29일, 그렇지 않으면 28일. 이는 그레고리력의 윤년을 고려한 것입니다. [GREGORIAN]
이 섹션에서 정의된 날짜와 시간 구문에서 ASCII 숫자가 사용되는 경우, 이들은 10진수로 숫자를 나타냅니다.
여기서 설명하는 형식은 해당 ISO8601 형식의 하위 집합을 의도하고 있지만, 이 명세서는 ISO8601보다 훨씬 자세하게 파싱 규칙을 정의합니다. 따라서 구현자는 아래에 설명된 파싱 규칙을 구현하기 위해 날짜 파싱 라이브러리를 사용하기 전에 주의 깊게 검토해야 합니다. ISO8601 라이브러리가 날짜와 시간을 정확히 동일한 방식으로 파싱하지 않을 수 있습니다. [ISO8601]
이 명세서가 프롤렙틱 그레고리력을 참조하는 경우, 이는 현대 그레고리력을 의미하며, 연도 1로 소급하여 적용한 것입니다. 프롤렙틱 그레고리력에 있는 날짜는 이 명세서가 언급한 대로 해당 달력으로 설명된 것입니다. 그 당시(또는 장소)에 그 달력이 사용되지 않았더라도 마찬가지입니다. [GREGORIAN]
이 명세서에서 그레고리력을 와이어 형식으로 사용하는 것은 의사 결정에 참여한 사람들의 문화적 편향에서 비롯된 임의의 선택입니다. 저자를 위한 양식에서 날짜, 시간, 숫자 형식에 대해 논의하는 섹션과 양식 컨트롤의 지역화와 관련된 구현 참고 사항을 참고하십시오. time
요소도 참조하십시오.
월은 특정 프롤렙틱 그레고리력 날짜로 구성되며, 시간대 정보가 없고 연도와 월 이상의 날짜 정보가 없는 것입니다. [GREGORIAN]
문자열이 year와 month을 나타내는 유효한 월 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
월 문자열을 파싱하는 규칙은 다음과 같습니다. 이는 연도와 월을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
월 구성 요소를 파싱하여 year와 month을 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
position이 input의 끝을 넘지 않는 경우, 실패합니다.
year와 month을 반환합니다.
월 구성 요소를 파싱하는 규칙은 주어진 input 문자열과 position을 사용합니다. 이는 연도와 월을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 최소한 네 글자가 되지 않으면, 알고리즘이 실패합니다. 그렇지 않으면, 생성된 시퀀스를 10진수 정수로 해석하여 해당 숫자를 year로 설정합니다.
year가 0보다 큰 숫자가 아니면, 알고리즘이 실패합니다.
position이 input의 끝을 넘거나, position이 가리키는 문자가 U+002D 하이픈-마이너스 문자가 아닌 경우, 알고리즘이 실패합니다. 그렇지 않으면, position을 한 문자 앞으로 이동시킵니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 정확히 두 글자가 아니면, 알고리즘이 실패합니다. 그렇지 않으면, 생성된 시퀀스를 10진수 정수로 해석하여 해당 숫자를 month로 설정합니다.
month이 1 ≤ month ≤ 12 범위 내 숫자가 아니면, 알고리즘이 실패합니다.
year와 month을 반환합니다.
날짜는 특정 프롤렙틱 그레고리력 날짜로 구성되며, 시간대 정보가 없고 연도, 월, 일로 구성됩니다. [GREGORIAN]
문자열이 year, month, day을 나타내는 유효한 날짜 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
날짜 문자열을 파싱하는 규칙은 다음과 같습니다. 이는 날짜를 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
날짜 구성 요소를 파싱하여 year, month, day을 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
position이 input의 끝을 넘지 않는 경우, 실패합니다.
date을(를) year, month, day을 가진 날짜로 설정합니다.
date를 반환합니다.
날짜 구성 요소를 파싱하는 규칙은 주어진 input 문자열과 position을 사용합니다. 이는 연도, 월, 일 또는 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
월 구성 요소를 파싱하여 year와 month을 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
maxday을(를) 해당 월과 연도에 있는 일수로 설정합니다.
position이 input의 끝을 넘거나, position이 가리키는 문자가 U+002D 하이픈-마이너스 문자가 아닌 경우, 알고리즘이 실패합니다. 그렇지 않으면, position을 한 문자 앞으로 이동시킵니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 정확히 두 글자가 아니면, 알고리즘이 실패합니다. 그렇지 않으면, 생성된 시퀀스를 10진수 정수로 해석하여 해당 숫자를 day로 설정합니다.
day이 1 ≤ day ≤ maxday 범위 내 숫자가 아니면, 알고리즘이 실패합니다.
year, month, day을 반환합니다.
연도 없는 날짜는 그레고리력의 특정 월과 해당 월 내의 특정 일로 구성되며, 연도는 포함되지 않습니다. [GREGORIAN]
문자열이 month과 day을 나타내는 유효한 연도 없는 날짜 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
다시 말해, month이 "02
"(2월)인 경우, 윤년으로 가정하여 day은 29일이 될 수 있습니다.
연도 없는 날짜 문자열을 파싱하는 규칙은 다음과 같습니다. 이는 월과 일을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
input을(를) 파싱 중인 문자열로 설정합니다.
position을(를) input의 시작을 가리키는 포인터로 설정합니다.
연도 없는 날짜 구성 요소를 파싱하여 month과 day을 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
position이 input의 끝을 넘지 않는 경우, 실패합니다.
month과 day을 반환합니다.
연도 없는 날짜 구성 요소를 파싱하는 규칙은 주어진 input 문자열과 position을 사용합니다. 이는 월과 일을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
코드 포인트 시퀀스를 수집합니다 input에서 U+002D 하이픈-마이너스 문자(-)로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 정확히 0 또는 2 글자가 되지 않으면, 알고리즘이 실패합니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 정확히 두 글자가 아니면, 알고리즘이 실패합니다. 그렇지 않으면, 생성된 시퀀스를 10진수 정수로 해석하여 해당 숫자를 month로 설정합니다.
month이 1 ≤ month ≤ 12 범위 내 숫자가 아니면, 알고리즘이 실패합니다.
maxday을(를) 해당 월의 임의의 윤년(예: 4 또는 2000년) 기준 일수로 설정합니다.
position이 input의 끝을 넘거나, position이 가리키는 문자가 U+002D 하이픈-마이너스 문자가 아닌 경우, 알고리즘이 실패합니다. 그렇지 않으면, position을 한 문자 앞으로 이동시킵니다.
코드 포인트 시퀀스를 수집합니다 input에서 ASCII 숫자로 구성된 시퀀스를 수집합니다. 수집된 시퀀스가 정확히 두 글자가 아니면, 알고리즘이 실패합니다. 그렇지 않으면, 생성된 시퀀스를 10진수 정수로 해석하여 해당 숫자를 day로 설정합니다.
day이 1 ≤ day ≤ maxday 범위 내 숫자가 아니면, 알고리즘이 실패합니다.
month과 day을 반환합니다.
시간은 시간대 정보가 없는 특정 시간으로, 시간, 분, 초, 초의 일부로 구성됩니다.
문자열이 hour(시간), minute(분), second(초)을 나타내는 유효한 시간 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
second 구성 요소는 60 또는 61이 될 수 없습니다. 윤초는 표현할 수 없습니다.
시간 문자열을 파싱하는 규칙은 다음과 같습니다. 이는 시간 또는 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
시간 구성 요소를 파싱하는 규칙은 주어진 input 문자열과 position을 사용합니다. 이는 시간, 분, 초를 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
로컬 날짜와 시간은 특정 프로렙틱 그레고리력 날짜로, 연도, 월, 일로 구성되며, 시간은 시, 분, 초 및 초의 일부로 구성되지만, 시간대 정보는 포함되지 않습니다. [GREGORIAN]
문자열이 날짜와 시간을 나타내는 유효한 로컬 날짜 및 시간 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
문자열이 날짜와 시간을 나타내는 유효한 정규화된 로컬 날짜 및 시간 문자열인 경우, 이는 주어진 순서로 다음 구성 요소로 구성됩니다:
로컬 날짜 및 시간 문자열을 파싱하는 규칙은 다음과 같습니다. 이 규칙은 날짜와 시간을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
날짜 구성 요소를 파싱하여 year, month, day를 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
시간 구성 요소를 파싱하여 hour, minute, second을(를) 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
시간대 오프셋은 시간과 분으로 이루어진 부호 있는 숫자를 의미합니다.
문자열이 시간대 오프셋을 나타내는 유효한 시간대 오프셋 문자열인 경우, 이는 다음 중 하나로 구성됩니다:
U+005A 라틴 대문자 Z 문자(Z), 이는 시간대가 UTC일 때만 허용됩니다.
또는, 다음 구성 요소들로 주어진 순서대로 구성됩니다:
이 형식은 -23:59에서 +23:59까지의 시간대 오프셋을 허용합니다. 현재 실제 시간대의 오프셋 범위는 -12:00에서 +14:00까지이며, 실제 시간대의 오프셋의 분 구성 요소는 항상 00, 30 또는 45입니다. 그러나 시간대는 정치적 이유로 변동될 수 있기 때문에, 이 범위가 영원히 유지될 것이라는 보장은 없습니다.
역사적인 시간과 관련된 시간대 오프셋 사용에 대한 자세한 내용은 아래 전역 날짜 및 시간 섹션의 사용 설명 및 예제를 참조하십시오.
시간대 오프셋 문자열을 파싱하는 규칙은 다음과 같습니다. 이 규칙은 시간대 오프셋을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
시간대 오프셋 구성 요소를 파싱하여 timezonehours와 timezoneminutes를 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
시간대 오프셋 구성 요소를 파싱하는 규칙은 다음과 같습니다. 이 규칙은 시간대 오프셋의 시간과 분을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
position이 가리키는 문자가 U+005A 라틴 대문자 Z 문자(Z)인 경우:
position이 가리키는 문자가 U+002B 플러스 문자(+) 또는 U+002D 하이픈-마이너스 문자(-)인 경우:
s이 정확히 두 문자 길이인 경우:
s이 정확히 네 문자 길이인 경우:
전역 날짜 및 시간은 특정한 프롤렙틱 그레고리력 날짜로 구성되며, 연도, 월, 일, 시간(시간, 분, 초, 소수 초) 및 시간대 오프셋(부호 있는 시간 및 분 수)을 포함합니다. [GREGORIAN]
문자열이 날짜, 시간, 그리고 시간대 오프셋을 나타내는 유효한 전역 날짜 및 시간 문자열인 경우, 이는 다음 구성 요소들로 주어진 순서대로 구성됩니다:
UTC가 형성되기 전의 날짜의 시간은 UTC가 아닌 UT1(0° 경도의 현대 지구 태양 시간) 기준으로 표현하고 해석해야 하며, 시간대가 형성되기 전의 시간은 그리니치 런던에서 관측된 시간과 적절한 현지 시간 간의 차이를 대략적으로 나타내는 명시적인 시간대 오프셋과 함께 UT1 시간으로 표현하고 해석해야 합니다.
다음은 유효한 전역 날짜 및 시간 문자열로 작성된 날짜의 몇 가지 예입니다.
0037-12-13 00:00Z
"
1979-10-14T12:00:00.001-04:00
"
8592-01-01T02:09+02:09
"
이 날짜들에서 주목할 점은 다음과 같습니다:
T
"를 공백으로 대체하는 경우, 반드시 하나의 공백 문자여야 합니다. "2001-12-21 12:00Z
" (두 개의 공백이 있는
경우)는 성공적으로 파싱되지 않습니다.
전역 날짜 및 시간 문자열을 파싱하는 규칙은 다음과 같습니다. 이 규칙은 UTC 시간과 표시 또는 라운드 트립을 위한 관련 시간대 오프셋 정보를 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
날짜 구성 요소를 파싱하여 year, month, day를 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
시간 구성 요소를 파싱하여 hour, minute, second를 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
시간대 오프셋 구성 요소를 파싱하여 timezonehours와 timezoneminutes를 얻습니다. 이 과정에서 실패하면, 알고리즘이 실패합니다.
주는 주-연도 번호와 월요일부터 시작하는 7일 기간을 나타내는 주 번호로 구성됩니다. 이 달력 시스템에서 각 주-연도는 아래 정의된 대로 52주 또는 53주의 7일 기간을 포함합니다. 1969년 12월 29일 월요일(1969-12-29)에 시작하는 7일 기간은 1970년 주-연도에서 주 번호 1로 정의됩니다. 연속적인 주는 순차적으로 번호가 매겨집니다. 주-연도에서 번호 1 이전의 주는 이전 주-연도의 마지막 주이며, 그 반대의 경우도 마찬가지입니다. [GREGORIAN]
숫자 year로 된 주-연도는 프롤렙틱 그레고리력의 첫 번째 날(1월 1일)이 목요일인 경우, 또는 year가 400으로 나누어 떨어지거나 100으로 나누어 떨어지지 않는 4로 나누어 떨어지는 숫자이며, 첫 번째 날(1월 1일)이 수요일인 경우 53주를 포함합니다. 다른 모든 주-연도는 52주를 갖습니다.
마지막 날의 주 번호는 53주를 가진 주-연도의 경우 53이며, 52주를 가진 주-연도의 마지막 날의 주 번호는 52입니다.
특정 날의 주-연도 번호는 프롤렙틱 그레고리력에서 그 날을 포함하는 연도의 번호와 다를 수 있습니다. 주-연도 y의 첫 번째 주는 y년의 그레고리력의 첫 번째 목요일을 포함하는 주입니다.
현대적 목적에서는, 여기서 정의된 주는 ISO 8601에서 정의된 ISO 주와 동일합니다. [ISO8601]
문자열이 주-연도 year와 주 week를 나타내는 유효한 주 문자열인 경우, 이는 다음 구성 요소들로 주어진 순서대로 구성됩니다:
주 문자열을 파싱하는 규칙은 다음과 같습니다. 이 규칙은 주-연도 번호와 주 번호를 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 지점에서는 알고리즘이 중단되고 아무것도 반환되지 않습니다.
지속 시간은 초 단위로 구성됩니다.
달과 초는 비교할 수 없습니다(달은 정확한 초의 수가 아니라 측정되는 특정 날짜에 따라 길이가 달라지는 기간이기 때문에). 따라서 이 사양에서 정의된 지속 시간에는 달(또는 12개월에 해당하는 연도)을 포함할 수 없습니다. 오직 특정 초의 수를 나타내는 지속 시간만 설명할 수 있습니다.
문자열이 지속 시간 t을 나타내는 유효한 지속 시간 문자열이라면, 다음 중 하나로 구성됩니다:
문자 그대로의 U+0050 라틴 대문자 P 문자와 다음 하위 구성 요소 중 하나 이상으로 구성되며, 지정된 순서대로 t와 동일한 초 수에 해당하는 일수, 시간, 분, 초의 수를 나타냅니다:
하나 이상의 ASCII 숫자 뒤에 U+0044 라틴 대문자 D 문자가 따라오는 경우, 이는 일 수를 나타냅니다.
U+0054 라틴 대문자 T 문자 뒤에 다음 하위 구성 요소 중 하나 이상이 따라오는 경우, 지정된 순서대로:
이 사양에 정의된 다른 여러 날짜 및 시간 관련 미세 구문과 마찬가지로, 이는 ISO 8601에서 정의된 형식 중 하나를 기반으로 합니다. [ISO8601]
하나 이상의 지속 시간 구성 요소와 각기 다른 지속 시간 구성 요소 척도로 구성되며, 지정된 순서대로 t에 해당하는 초의 합계를 나타냅니다.
지속 시간 구성 요소는 다음 구성 요소로 이루어진 문자열입니다:
0개 이상의 ASCII 공백 문자.
하나 이상의 ASCII 숫자, 시간 단위를 나타내며, 지정된 지속 시간 구성 요소 척도로 조정되어 초 수를 나타냅니다.
지정된 지속 시간 구성 요소 척도가 1(즉, 단위가 초인 경우)일 때, 선택적으로 U+002E 온점 문자(.) 뒤에 하나, 둘 또는 셋의 ASCII 숫자, 초의 일부분을 나타냅니다.
0개 이상의 ASCII 공백 문자.
숫자 부분에서 사용된 시간 단위의 지속 시간 구성 요소의 지속 시간 구성 요소 척도를 나타내는 다음 문자 중 하나:
0개 이상의 ASCII 공백 문자.
이는 ISO 8601 형식에 기반한 것이 아닙니다. 이는 ISO 8601 지속 시간 형식에 대한 보다 인간 친화적인 대안으로 의도되었습니다.
지속 시간 문자열을 구문 분석하는 규칙은 다음과 같습니다. 이 규칙은 지속 시간을 반환하거나 아무것도 반환하지 않습니다. 알고리즘이 "실패"했다고 말하면, 이는 그 시점에서 중단되고 아무것도 반환되지 않음을 의미합니다.
input이 구문 분석 중인 문자열이라고 가정합니다.
position을 input의 시작 부분을 가리키는 포인터로 가정합니다.
months, seconds, component count를 모두 0으로 설정합니다.
M-disambiguator를 minutes로 설정합니다.
이 플래그의 다른 값은 months입니다. 이 플래그는 ISO8601 지속 시간에서 "M" 단위를 분과 월을 구분하기 위해 사용됩니다. 월은 허용되지 않지만, 미래의 호환성을 위해 그리고 다른 컨텍스트에서 유효할 수 있는 ISO8601 지속 시간을 오해하지 않기 위해 구문 분석됩니다.
ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로.
만약 position이 input의 끝을 넘어섰다면, 실패합니다.
만약 input 내의 position이 가리키는 문자가 U+0050 라틴 대문자 P 문자라면, position을 다음 문자로 이동시키고, M-disambiguator를 months로 설정하고 ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로.
다음의 과정을 반복합니다:
units을 정의되지 않은 상태로 둡니다. 이것은 다음 값 중 하나로 설정됩니다: years, months, weeks, days, hours, minutes, seconds.
next character를 정의되지 않은 상태로 둡니다. 이것은 input에서 문자를 처리하는 데 사용됩니다.
만약 position이 input의 끝을 넘어섰다면, 중단합니다.
만약 position이 가리키는 문자가 U+0054 라틴 대문자 T 문자라면, position을 다음 문자로 이동시키고, M-disambiguator를 minutes로 설정하고, ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로, 그리고 계속합니다.
next character를 input 내의 position이 가리키는 문자로 설정합니다.
만약 next character가 U+002E 온점 문자(.)라면, N을 0으로 설정합니다. (position을 이동시키지 마십시오. 이것은 아래에서 처리됩니다.)
그렇지 않다면, 만약 next character가 ASCII 숫자라면, 코드 포인트 시퀀스를 수집합니다 position을 기준으로 input에서. 이 시퀀스를 10진수로 해석하고, 그 숫자를 N으로 설정합니다.
그렇지 않다면, next character는 숫자가 아니므로 실패합니다.
만약 position이 input의 끝을 넘어섰다면, 실패합니다.
next character를 input 내의 position이 가리키는 문자로 설정하고, 이번에는 position을 다음 문자로 이동시킵니다. (만약 next character가 이전에 U+002E 온점 문자(.)였다면, 이번에도 동일한 문자일 것입니다.)
만약 next character가 U+002E(.)이라면:
코드 포인트 시퀀스를 수집합니다 position을 기준으로 input에서 ASCII 숫자. s를 결과 시퀀스로 설정합니다.
만약 s가 빈 문자열이라면, 실패합니다.
length를 s의 문자 수로 설정합니다.
fraction을 10length으로 나눈 후 s를 10진수로 해석한 결과로 설정합니다.
N을 fraction만큼 증가시킵니다.
ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로.
만약 position이 input의 끝을 넘어섰다면, 실패합니다.
next character를 input 내의 position이 가리키는 문자로 설정하고, position을 다음 문자로 이동시킵니다.
만약 next character가 U+0053 라틴 대문자 S 문자나 U+0073 라틴 소문자 S 문자가 아니라면, 실패합니다.
units를 seconds로 설정합니다.
그렇지 않다면:
만약 next character가 ASCII 공백 문자라면, ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로, next character를 position이 가리키는 문자로 설정하고, position을 다음 문자로 이동시킵니다.
만약 next character가 U+0059 라틴 대문자 Y 문자이거나 U+0079 라틴 소문자 Y 문자라면, units를 years로 설정하고 M-disambiguator를 months로 설정합니다.
만약 next character가 U+004D 라틴 대문자 M 문자이거나 U+006D 라틴 소문자 M 문자이고, M-disambiguator가 months라면, units를 months로 설정합니다.
만약 next character가 U+0057 라틴 대문자 W 문자이거나 U+0077 라틴 소문자 W 문자라면, units를 weeks로 설정하고 M-disambiguator를 minutes로 설정합니다.
만약 next character가 U+0044 라틴 대문자 D 문자이거나 U+0064 라틴 소문자 D 문자라면, units를 days로 설정하고 M-disambiguator를 minutes로 설정합니다.
만약 next character가 U+0048 라틴 대문자 H 문자이거나 U+0068 라틴 소문자 H 문자라면, units를 hours로 설정하고 M-disambiguator를 minutes로 설정합니다.
만약 next character가 U+004D 라틴 대문자 M 문자이거나 U+006D 라틴 소문자 M 문자이고, M-disambiguator가 minutes라면, units를 minutes로 설정합니다.
만약 next character가 U+0053 라틴 대문자 S 문자이거나 U+0073 라틴 소문자 S 문자라면, units를 seconds로 설정하고 M-disambiguator를 minutes로 설정합니다.
그렇지 않다면, 만약 next character가 위의 문자들 중 어느 것도 아니라면, 실패합니다.
component count를 증가시킵니다.
multiplier를 1로 설정합니다.
만약 units가 years라면, multiplier를 12로 곱하고 units를 months로 설정합니다.
만약 units가 months라면, months에 N과 multiplier의 곱을 더합니다.
그렇지 않다면:
만약 units가 weeks라면, multiplier를 7로 곱하고 units를 days로 설정합니다.
만약 units가 days라면, multiplier를 24로 곱하고 units를 hours로 설정합니다.
만약 units가 hours라면, multiplier를 60으로 곱하고 units를 minutes로 설정합니다.
만약 units가 minutes라면, multiplier를 60으로 곱하고 units를 seconds로 설정합니다.
강제로, units는 이제 seconds입니다. N과 multiplier의 곱을 seconds에 더합니다.
ASCII 공백 문자를 건너뛰십시오 input 내에서 position을 기준으로.
만약 component count가 0이라면, 실패합니다.
만약 months가 0이 아니라면, 실패합니다.
seconds 초로 구성된 지속 시간을 반환합니다.
문자열이 다음 중 하나일 경우 유효한 선택적 시간 포함 날짜 문자열입니다:
날짜 또는 시간 문자열을 구문 분석하는 규칙은 다음과 같습니다. 이 알고리즘은 날짜, 시간, 전역 날짜 및 시간 또는 아무것도 반환하지 않습니다. 알고리즘이 "실패"한다고 말하는 경우, 이 시점에서 중단되고 아무것도 반환하지 않습니다.
input을 구문 분석 중인 문자열로 설정합니다.
position을 input의 시작을 가리키는 포인터로 설정합니다.
start position을 position과 동일한 위치로 설정합니다.
date present 및 time present 플래그를 true로 설정합니다.
날짜 구성 요소를 구문 분석하여 year, month, 및 day를 얻습니다. 실패할 경우, date present 플래그를 false로 설정합니다.
date present가 true이고 position이 input의 끝을 넘지 않았으며 position의 문자가 U+0054 라틴 대문자 T 문자(T) 또는 U+0020 공백 문자인 경우 position을 input에서 다음 문자로 이동시킵니다.
그렇지 않다면, date present가 true이고 position이 input의 끝을 넘었거나 position의 문자가 U+0054 라틴 대문자 T 문자(T)도 U+0020 공백 문자도 아닌 경우 time present를 false로 설정합니다.
그렇지 않다면, date present가 false일 경우 position을 start position과 동일한 위치로 되돌립니다.
만약 time present 플래그가 true라면 시간 구성 요소를 구문 분석하여 hour, minute, 및 second를 얻습니다. 만약 실패하면, 중단합니다.
date present와 time present 플래그가 모두 true이고 position이 input의 끝을 넘은 경우, 실패합니다.
date present와 time present 플래그가 모두 true일 경우 시간대 오프셋 구성 요소를 구문 분석하여 timezonehours와 timezoneminutes를 얻습니다. 실패할 경우, 중단합니다.
position이 input의 끝을 넘지 않았다면, 실패합니다.
date present 플래그가 true이고 time present 플래그가 false인 경우 year, month, day로 구성된 date를 설정하고 date를 반환합니다.
그렇지 않다면 time present 플래그가 true이고 date present 플래그가 false인 경우 hour, minute, second로 구성된 time을 설정하고 time을 반환합니다.
그렇지 않다면, year, month, day, hour, minute, second로 구성된 시간을 설정하고 timezonehours와 timezoneminutes를 빼서 UTC 시간대에서 해당 시간을 계산합니다. timezone을 timezonehours와 timezoneminutes로 설정하고 time과 timezone을 반환합니다.
단순 색상은 'srgb' 색상 공간에서 각각 색상의 빨강, 녹색 및 파랑 구성 요소를 나타내는 0부터 255까지의 범위에 있는 세 개의 8비트 숫자로 구성됩니다.
문자열이 정확히 7자 길이이며 첫 번째 문자가 U+0023 번호 기호 문자(#)이고 나머지 6문자가 모두 ASCII 16진수 숫자라면, 유효한 단순 색상 문자열(valid simple color)입니다. 첫 두 자리 숫자는 빨간색 구성 요소를, 중간 두 자리 숫자는 녹색 구성 요소를, 마지막 두 자리 숫자는 파란색 구성 요소를 나타내며, 이 값들은 16진수로 나타냅니다.
문자열이 유효한 단순 색상이며 U+0041부터 U+0046 사이의 문자(A에서 F까지의 라틴 대문자)를 사용하지 않는다면, 이는 유효한 소문자 단순 색상(valid lowercase simple color)입니다.
단순 색상 값을 구문 분석하는 규칙은 다음 알고리즘에서 주어진 순서대로 따라야 합니다. 이 알고리즘은 단순 색상 또는 오류를 반환합니다.
input을 구문 분석 중인 문자열로 설정합니다.
input이 정확히 7자 길이가 아니면 오류를 반환합니다.
input의 첫 번째 문자가 U+0023 번호 기호 문자(#)가 아니면 오류를 반환합니다.
input의 마지막 6문자가 모두 ASCII 16진수 숫자가 아니라면 오류를 반환합니다.
result를 단순 색상으로 설정합니다.
두 번째와 세 번째 문자를 16진수 숫자로 해석하고 그 결과를 result의 빨간색 구성 요소로 설정합니다.
네 번째와 다섯 번째 문자를 16진수 숫자로 해석하고 그 결과를 result의 녹색 구성 요소로 설정합니다.
여섯 번째와 일곱 번째 문자를 16진수 숫자로 해석하고 그 결과를 result의 파란색 구성 요소로 설정합니다.
result를 반환합니다.
단순 색상 값을 직렬화하는 규칙은 다음 알고리즘에 주어집니다:
result를 U+0023 번호 기호 문자(#) 하나로 구성된 문자열로 설정합니다.
빨강, 녹색, 파랑 구성 요소를 차례대로 16진수 숫자 두 자리로 변환하고, 필요하면 0으로 채워 result에 이 숫자들을 빨강, 녹색, 파랑 순서로 추가합니다.
result를 반환합니다. 이 값은 유효한 소문자 단순 색상이 됩니다.
몇몇 오래된 레거시 속성들은 더 복잡한 방식으로 색상을 구문 분석하며, 레거시 색상 값을 구문 분석하는 규칙을 사용합니다. 이 알고리즘은 단순 색상 또는 오류를 반환합니다.
input을 구문 분석 중인 문자열로 설정합니다.
input이 빈 문자열이면 오류를 반환합니다.
선행 및 후행 ASCII 공백을 input에서 제거합니다.
input이 "transparent
" 문자열과 ASCII 대소문자 구분 없이 일치한다면 오류를 반환합니다.
input이 이름이 지정된 색상 중 하나와 ASCII 대소문자 구분 없이 일치하면 해당 키워드에 해당하는 단순 색상을 반환합니다. [CSSCOLOR]
CSS2 시스템 색상은 인식되지 않습니다.
input의 코드 포인트 길이가 4이고, input의 첫 번째 문자가 U+0023(#)이며 마지막 세 문자가 모두 ASCII 16진수 숫자인 경우:
result를 단순 색상으로 설정합니다.
input의 두 번째 문자를 16진수 숫자로 해석하고 그 결과에 17을 곱하여 result의 빨강 구성 요소로 설정합니다.
input의 세 번째 문자를 16진수 숫자로 해석하고 그 결과에 17을 곱하여 result의 녹색 구성 요소로 설정합니다.
input의 네 번째 문자를 16진수 숫자로 해석하고 그 결과에 17을 곱하여 result의 파랑 구성 요소로 설정합니다.
result를 반환합니다.
코드
포인트가 U+FFFF를 초과하는 경우, 즉 기본 다국어 평면에 속하지 않는 문자는 "00
"이라는 두 문자 문자열로 대체합니다.
input의 코드 포인트 길이가 128보다 크면 input의 처음 128자만 남겨두고 나머지를 잘라냅니다.
input의 첫 번째 문자가 U+0023 번호 기호 문자(#)이면 이를 제거합니다.
input에 ASCII 16진수 숫자가 아닌 문자가 있으면 U+0030 숫자 0 문자로 대체합니다.
input의 코드 포인트 길이가 0이거나 3의 배수가 아닐 경우, input에 U+0030 숫자 0 문자를 추가합니다.
input을 동일한 코드 포인트 길이를 가진 세 문자열로 나누어 세 개의 구성 요소를 얻습니다. length는 각 구성 요소가 가지는 코드 포인트 길이로 설정합니다(input의 코드 포인트 길이의 3분의 1).
length가 8을 초과하면 각 구성 요소의 앞에서 length-8자리를 제거하고 length를 8로 설정합니다.
length가 2보다 클 때 각 구성 요소의 첫 번째 문자가 U+0030 숫자 0 문자이면, 그 문자를 제거하고 length를 1 줄입니다.
length가 여전히 2보다 크면 각 구성 요소를 잘라 처음 두 글자만 남겨둡니다.
result를 단순 색상으로 설정합니다.
첫 번째 구성 요소를 16진수 숫자로 해석하고 그 결과를 result의 빨강 구성 요소로 설정합니다.
두 번째 구성 요소를 16진수 숫자로 해석하고 그 결과를 result의 녹색 구성 요소로 설정합니다.
세 번째 구성 요소를 16진수 숫자로 해석하고 그 결과를 result의 파랑 구성 요소로 설정합니다.
result를 반환합니다.
2D 그래픽 컨텍스트에는 불투명도를 처리하는 별도의 색상 구문이 있습니다.
공백으로 구분된 토큰 세트는 하나 이상의 ASCII 공백으로 구분된 0개 이상의 단어(토큰으로 알려짐)를 포함하는 문자열입니다. 여기서 단어는 ASCII 공백이 아닌 하나 이상의 문자로 구성됩니다.
공백으로 구분된 토큰 세트를 포함하는 문자열은 선행 또는 후행 ASCII 공백을 가질 수 있습니다.
순서가 없는 고유한 공백으로 구분된 토큰 세트는 토큰이 중복되지 않는 공백으로 구분된 토큰 세트입니다.
순서가 있는 고유한 공백으로 구분된 토큰 세트는 토큰의 순서가 의미가 있으며, 토큰이 중복되지 않는 공백으로 구분된 토큰 세트입니다.
공백으로 구분된 토큰 세트는 때때로 허용된 값의 정의된 세트를 가집니다. 허용된 값의 세트가 정의된 경우, 토큰은 모두 해당 허용된 값 목록에서 가져와야 합니다. 다른 값은 비준수 값입니다. 그러한 허용된 값의 세트가 제공되지 않으면, 모든 값은 준수합니다.
공백으로 구분된 토큰 세트의 토큰을 비교하는 방법(예: 대소문자 구분 여부)은 세트별로 정의됩니다.
쉼표로 구분된 토큰 세트는 0개 이상의 토큰이 포함된 문자열로, 각 토큰은 다음 토큰과 U+002C 쉼표 문자(,)로 구분되며, 토큰은 ASCII 공백으로 시작하거나 끝나지 않으며, U+002C 쉼표 문자(,)를 포함하지 않고, 선택적으로 ASCII 공백으로 둘러싸일 수 있습니다.
예를 들어, 문자열 " a ,b,,d d
"는 "a", "b", 빈 문자열, "d d"의 네 개의 토큰으로 구성됩니다. 각 토큰의 앞뒤 공백은
토큰의 일부로 간주되지 않으며, 빈 문자열도 토큰이 될 수 있습니다.
쉼표로 구분된 토큰 세트는 때때로 유효한 토큰을 구성하는 것에 대한 추가 제한이 있습니다. 이러한 제한이 정의된 경우, 토큰은 모두 해당 제한 내에 있어야 합니다. 그렇지 않은 값은 비준수입니다. 그러한 제한이 명시되지 않은 경우, 모든 값이 준수합니다.
type 유형의 요소에 대한 유효한 해시 이름 참조는 U+0023 번호 기호 문자(#)로 시작하고,
동일한 트리
내에서 type 유형의 요소의 name
속성 값과 정확히 일치하는 문자열로 구성된 문자열입니다.
scope라는 컨텍스트 노드를 사용하여 type 유형의 요소에 대한 해시 이름 참조를 구문 분석하는 규칙은 다음과 같습니다:
구문 분석 중인 문자열에 U+0023 번호 기호 문자가 포함되지 않거나, 문자열 내 첫 번째 해당 문자가 문자열의 마지막 문자라면 null을 반환합니다.
구문 분석 중인 문자열에서 첫 번째 U+0023 번호 기호 문자 바로 다음 문자부터 해당 문자열의 끝까지의 문자열을 s라고 합니다.
scope의 트리에서 type 유형의 첫 번째 요소를 트리 순서로 반환하며,
이 요소는 s와 동일한 값을 가진 id
또는
name
속성을 가지고 있어야 합니다. 해당 요소가 없으면 null을 반환합니다.
id
속성은 구문 분석 시
고려되지만, 값이 유효한 해시
이름 참조인지 여부를 결정할 때는 사용되지 않습니다. 즉, id
를 기준으로 요소를 참조하는 해시 이름 참조는
적합성 오류입니다(해당 요소에 동일한 값의 name
속성이 없는 경우).
<media-query-list>
규칙과 일치하는 문자열은 유효한 미디어 쿼리 목록입니다. [MQ]
문자열이 비어 있거나, ASCII 공백 문자로만 이루어져 있거나, Media Queries에 정의된 대로 사용자의 환경과 일치하는 미디어 쿼리 목록이라면, 해당 문자열은 사용자의 환경과 일치합니다. [MQ]
고유 내부 값은 직렬화 가능하고, 값으로 비교할 수 있으며, 스크립트에 노출되지 않는 값입니다.
새로운 고유 내부 값을 생성하려면 이 알고리즘에 의해 이전에 반환된 적이 없는 고유 내부 값을 반환합니다.
문자열이 유효한 비어 있지 않은 URL인 경우, 이는 유효한 URL 문자열이지만, 비어 있는 문자열은 아닙니다.
문자열이 공백으로 둘러싸인 유효한 URL인 경우, 이는 앞뒤 ASCII 공백 제거 후에 유효한 URL 문자열이 됩니다.
문자열이 공백으로 둘러싸인 유효한 비어 있지 않은 URL인 경우, 이는 앞뒤 ASCII 공백 제거 후에 유효한 비어 있지 않은 URL이 됩니다.
이 명세는 URL about:legacy-compat
을 예약된, 그러나 해석 불가능한 about:
URL로 정의하며, 이는 XML 도구와의 호환성을 위해 DOCTYPE의 HTML 문서에서 사용됩니다. [ABOUT]
이 명세는 URL about:html-kind
을 예약된, 그러나 해석 불가능한 about:
URL로 정의하며, 이는 미디어 트랙의 종류를 식별하는 데 사용됩니다. [ABOUT]
이 명세는 URL about:srcdoc
을 예약된, 그러나 해석 불가능한 about:
URL로 정의하며, 이는 URL로 사용됩니다. 이는 iframe
srcdoc
문서의 [ABOUT]
document
객체 document의 대체 기본 URL은 다음 단계들을 실행하여 얻어진 URL 레코드입니다:
document가
iframe
srcdoc
문서인 경우:
document의 about 기본 URL이 null이 아님을 단언하십시오.
document의 about 기본 URL을 반환하십시오.
document의 URL이 about:blank
와 일치하고
document의 about 기본 URL이 null이 아닌 경우,
document의 about 기본 URL을 반환하십시오.
document의 URL을 반환하십시오.
document
객체의 문서
기본 URL은 다음 단계들을 실행하여 얻어진 URL 레코드입니다:
URL이 다음과 일치하면
about:blank
와 일치한다고 합니다: 스킴이 "about
"이고, 경로에 "blank
"라는 문자열이 하나만 포함되어 있으며, 사용자 이름과 비밀번호는 빈 문자열이고, 호스트는 null입니다.
이러한 URL의 쿼리와 프래그먼트는 null이 아닐 수 있습니다.
예를 들어, "about:blank?foo#bar
"를 파싱하여 생성된 URL 레코드는 about:blank
와 일치합니다.
URL이 다음과 일치하면
about:srcdoc
와 일치한다고 합니다: 스킴이 "about
"이고, 경로에 "srcdoc
"라는 문자열이 하나만 포함되어 있으며, 쿼리는 null이고, 사용자 이름과 비밀번호는 빈 문자열이며, 호스트는 null입니다.
about:srcdoc
와
일치하는 URL이
쿼리가 null이어야 하는 이유는, URL에 쿼리가 있는 iframe
srcdoc
문서를 생성할 수 없기 때문입니다. 반면, about:blank
와 일치하는 Document
는 이와 다릅니다. 즉, about:srcdoc
와 일치하는
모든 URL은
프래그먼트에서만 다릅니다.
URL을 파싱하는 것은 문자열을 가져와서 이를 나타내는 URL 레코드를 얻는 과정입니다. 이 과정은 URL에서 정의되지만, HTML 표준에서는 기본 URL과 인코딩을 추상화하기 위해 몇 가지 래퍼를 정의합니다. [URL]
대부분의 새로운 API는 URL 파싱을 사용해야 합니다. 오래된 API와 HTML 요소는 인코딩-URL 파싱을 사용할 이유가 있을 수 있습니다. 사용자 지정 기본 URL이 필요하거나 기본 URL이 필요하지 않은 경우에는 URL 파서를 직접 사용할 수도 있습니다.
주어진 문자열 url을 Document
객체 또는 환경 설정 객체
environment를 기준으로 URL을 파싱하려면, 다음 단계를 수행합니다. 이들은 실패 또는 URL을 반환합니다.
environment가 Document
객체인
경우, environment의 기본
URL을 baseURL로 설정하고, 그렇지 않은 경우 environment의 API 기본 URL을 baseURL로 설정합니다.
url에 baseURL을 사용하여 URL 파서를 적용한 결과를 반환합니다.
주어진 문자열 url을 Document
객체 또는 환경 설정 객체
environment를 기준으로 인코딩-URL 파싱하려면, 다음 단계를
수행합니다. 이들은 실패 또는 URL을 반환합니다.
encoding을 UTF-8로 설정합니다.
environment가 Document
객체인
경우, encoding을 environment의 문서의 문자 인코딩으로 설정합니다.
그렇지 않고, environment의 관련 글로벌 객체가 Window
객체인 경우, encoding을
environment의 관련
글로벌 객체의 관련
Document
의 문자 인코딩으로 설정합니다.
environment가 Document
객체인
경우, environment의 기본
URL을 baseURL로 설정하고, 그렇지 않은 경우 environment의 API 기본 URL을 baseURL로 설정합니다.
url에 baseURL과 encoding을 사용하여 URL 파서를 적용한 결과를 반환합니다.
주어진 문자열 url을 Document
객체 또는 환경 설정 객체
environment를 기준으로 인코딩-URL 파싱 및 직렬화하려면, 다음
단계를 수행합니다. 이들은 실패 또는 문자열을 반환합니다.
environment를 기준으로 주어진 url에 대해 인코딩-URL 파싱의 결과를 url로 설정합니다.
url이 실패인 경우, 실패를 반환합니다.
url에 대해 URL 직렬화기를 적용한 결과를 반환합니다.
문서의 문서 기본 URL이 변경되면, 해당 문서의 모든 요소는 기본 URL 변경의 영향을 받습니다.
다음은 기본 URL 변경 단계로, 요소가 기본 URL 변경의 영향을 받을 때 실행됩니다(DOM에 정의된 대로).
하이퍼링크로 식별된 URL이 사용자에게 표시되고 있거나 해당 URL에서 파생된 데이터가 표시를 영향을 미치는
경우, href
속성의 값이 요소의 노드 문서를
기준으로 다시
파싱되고 UI가 적절하게 업데이트되어야 합니다.
예를 들어, CSS의 :link
/:visited
의사 클래스가 영향을 받을 수
있습니다.
하이퍼링크에 ping
속성이 있고 그 URL(들)이 사용자에게 표시되는 경우, ping
속성의 토큰이 요소의 노드 문서를
기준으로 다시
파싱되고 UI가 적절하게 업데이트되어야 합니다.
q
, blockquote
,
ins
또는 del
요소이고
cite
속성이 있는 경우
cite
속성으로 식별된 URL이 사용자에게 표시되거나, 해당 URL에서 파생된 데이터가 표시를 영향을 미치는 경우, cite
속성의 값이 요소의 노드 문서를
기준으로 다시
파싱되고 UI가 적절하게 업데이트되어야 합니다.
해당 요소는 직접적으로 영향을 받지 않습니다.
예를 들어, 기본 URL을 변경해도 img
요소에 표시된
이미지에는 영향을 미치지 않지만, 이후 스크립트에서 src
IDL 속성에 접근하면 더
이상 표시된 이미지와 일치하지 않을 수 있는 새로운 절대 URL을
반환합니다.
응답의 유형이
"basic
", "cors
", 또는
"default
"인 경우, 이를 CORS-동일 출처라고 합니다.
[FETCH]
응답의 유형이
"opaque
" 또는 "opaqueredirect
"인 경우, 이를 CORS-교차 출처라고
합니다.
응답의 안전하지 않은 응답은 내부 응답이 존재할 경우 이를 따르며, 그렇지 않으면 해당 응답 자체를 의미합니다.
잠재적인 CORS 요청을 생성하려면, url, destination, corsAttributeState, 및 선택적 동일 출처 대체 플래그를 사용하여 다음 단계를 수행하십시오:
corsAttributeState가 아무것도
아님일 경우, mode를 "no-cors
"로
설정하고, 그렇지 않으면 "cors
"로 설정합니다.
동일 출처 대체 플래그가 설정되어 있고 mode가 "no-cors
"인 경우, mode를
"same-origin
"으로 설정합니다.
credentialsMode를 "include
"로 설정합니다.
corsAttributeState가 익명인 경우, credentialsMode를
"same-origin
"으로 설정합니다.
request를 url을 URL로 하고, destination을 목적지로 하고, mode을 모드로 하고, credentialsMode을 자격 증명 모드로 하고, URL 자격 증명 플래그를 설정한 새로운 요청으로 정의하십시오.
리소스의 Content-Type 메타데이터는 MIME Sniffing의 요구 사항과 일치하는 방식으로 획득하고 해석해야 합니다. [MIMESNIFF]
리소스의 계산된 MIME 유형은 MIME Sniffing의 요구 사항에 따라 찾아야 합니다. [MIMESNIFF]
이미지 전용 스니핑 규칙, 텍스트 또는 바이너리 리소스를 구분하는 규칙, 그리고 오디오 및 비디오 전용 스니핑 규칙도 MIME Sniffing에서 정의됩니다. 이러한 규칙은 결과로 MIME 유형을 반환합니다. [MIMESNIFF]
사용자 에이전트가 서버가 예상하는 것과 다른 콘텐츠 유형 감지 휴리스틱을 사용할 때 보안 문제가 발생할 수 있으므로, MIME Sniffing의 규칙을 정확하게 따라야 합니다. 자세한 내용은 MIME Sniffing을 참조하십시오. [MIMESNIFF]
meta
요소에서
문자 인코딩 추출s 문자열을 주어진 meta
요소에서 문자 인코딩을 추출하기 위한 알고리즘은 다음과 같습니다. 이 알고리즘은 문자
인코딩 또는 아무것도 반환하지 않습니다.
position을 s의 시작을 가리키는 포인터로 설정합니다.
반복: position 이후 s에서 "charset"이라는 단어와 일치하는 ASCII 대소문자 구분 없이 일치하는 첫 번째 7자를 찾습니다. 일치하는 단어를 찾지 못하면 아무것도 반환하지 않습니다.
"charset" 단어 뒤에 바로 나오는 ASCII 공백 문자를 건너뜁니다(공백이 없을 수도 있음).
다음 문자가 U+003D EQUALS SIGN(=)이 아니면 position을 다음 문자 바로 앞으로 이동시키고, 반복으로 돌아갑니다.
등호(=) 뒤에 오는 ASCII 공백 문자를 건너뜁니다(공백이 없을 수도 있음).
다음 문자를 다음과 같이 처리합니다:
이 알고리즘은 HTTP 명세의 알고리즘과 다릅니다(예: HTTP는 작은 따옴표 사용을 허용하지 않으며, 이 알고리즘에서는 지원되지 않는 백슬래시 이스케이프 메커니즘을 지원해야 합니다). 이 알고리즘은 역사적으로 HTTP와 관련된 맥락에서 사용되었지만, 구현에 따른 구문은 오래 전에 달라졌습니다. [HTTP]
모든 최신 엔진에서 지원됩니다.
CORS 설정 속성은 다음 키워드와 상태를 가진 열거된 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
anonymous
| 익명 | 요청 모드는
"cors "로 설정되며, 자격 증명 모드는 "same-origin "으로
설정됩니다.
|
(빈 문자열) | ||
use-credentials
| 자격 증명 사용 | 요청 모드는
"cors "로 설정되며, 자격 증명 모드는 "include "로
설정됩니다.
|
속성의 누락된 값 기본값은
CORS 없음 상태이며, 잘못된 값 기본값은 익명 상태입니다. 반영의 목적을 위해 표준 키워드는 익명 상태에 대한 anonymous
키워드입니다.
대부분의 CORS 설정 속성에 의해 관리되는 페치는 잠재적인 CORS 요청 만들기 알고리즘을 통해 이루어집니다.
보다 현대적인 기능에서는 요청의 모드가 항상
"cors
"로 설정되며,
특정 CORS 설정 속성은 약간
다른 의미를 가지도록
재정의되었으며, 이는 요청의 자격 증명 모드에만 영향을 미칩니다. 이 변환을 수행하기 위해, 우리는 주어진 CORS
설정 속성에 대한 CORS 설정 속성 자격 증명 모드를
다음 상태에 따라 결정합니다:
same-origin
"
include
"
리퍼러 정책 속성은 열거된 속성입니다. 이 속성의 각 리퍼러 정책(빈 문자열 포함)은 이 속성의 키워드이며, 동일한 이름의 상태와 매핑됩니다.
속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 빈 문자열 상태입니다.
이 상태들이 다양한 페치의 처리 모델에 미치는 영향은 이 명세서 전체와 Fetch, Referrer Policy에서 자세히 정의되어 있습니다. [FETCH] [REFERRERPOLICY]
여러 신호들이 주어진 페치에 대해 사용되는 처리 모델에 기여할 수 있으며, 리퍼러 정책 속성은 그 중 하나일 뿐입니다. 일반적으로 이러한 신호들이 처리되는 순서는 다음과 같습니다:
첫 번째로, `noreferrer
`
링크 타입의 존재;
그 다음으로, 리퍼러 정책 속성의 값;
마지막으로, `Referrer-Policy
`
HTTP 헤더.
모든 현재 엔진에서 지원됨.
nonce
콘텐츠 속성은
Content Security Policy에서 주어진 fetch가 진행될 수 있는지를 결정하기 위해 사용할 수 있는 암호화 넌스("한 번 사용된 숫자")를 나타냅니다. 값은 텍스트입니다. [CSP]
nonce
콘텐츠 속성이 있는 요소는 암호화 넌스가 스크립트에만
노출되고(CSS 속성 선택자와 같은 사이드 채널에는 노출되지 않음) 콘텐츠 속성에서 값을 가져와 [[CryptographicNonce]]라는 내부 슬롯에 넣고, HTMLOrSVGElement
인터페이스 믹스인을 통해
스크립트에 노출하며, 콘텐츠 속성을 빈 문자열로 설정합니다. 별도로 명시되지 않은 한, 슬롯의 값은 빈 문자열입니다.
element.nonce
element의 암호화 넌스에 설정된 값을 반환합니다. 세터가 사용되지 않았다면, 이는 nonce
콘텐츠 속성에서 원래 찾은 값이 될 것입니다.
element.nonce = value
element의 암호화 넌스 값을 업데이트합니다.
nonce
IDL 속성은 가져올 때 이 요소의 [[CryptographicNonce]]의 값을 반환해야 하며, 설정할 때 이 요소의 [[CryptographicNonce]]를 주어진 값으로
설정해야 합니다.
nonce
IDL 속성의
세터가 해당하는 콘텐츠 속성을 업데이트하지 않는다는 점에 주목하십시오. 이는 요소가 탐색 컨텍스트에 연결될 때 nonce
콘텐츠 속성을 빈 문자열로 설정하는 것과 함께, 콘텐츠 속성을
쉽게 읽을 수 있는 메커니즘(예: 선택자)을 통해 넌스 값이 유출되는 것을 방지하기 위한 것입니다. 이 동작은 issue #2369에서 도입되었습니다.
다음 속성 변경 단계는 nonce
콘텐츠 속성에 사용됩니다:
element가 HTMLOrSVGElement
를
포함하지 않는다면, 반환합니다.
localName이 nonce
가
아니거나 namespace가 null이 아니라면, 반환합니다.
value가 null이라면, element의 [[CryptographicNonce]]를 빈 문자열로 설정합니다.
그렇지 않으면, element의 [[CryptographicNonce]]를 value로 설정합니다.
HTMLOrSVGElement를 포함하는 요소가 탐색 컨텍스트에 연결될 때, 사용자 에이전트는 element에 대해 다음 단계를 실행해야 합니다:
CSP list에 nonce
콘텐츠
속성이 포함되어 있고 attr의 값이 빈 문자열이 아니라면, 다음 단계를 실행합니다:
nonce를 element의 [[CryptographicNonce]]로 설정합니다.
element에 대해 "nonce
"와 빈 문자열을 사용하여 속성 값을 설정합니다.
element의 [[CryptographicNonce]]를 nonce로 설정합니다.
element의 [[CryptographicNonce]]가 복원되지 않으면 이 시점에서 빈 문자열이 됩니다.
HTMLOrSVGElement
를 복제하는 단계는 복제된 요소의 [[CryptographicNonce]] 슬롯을 복제되는 요소의 슬롯 값으로 설정해야 합니다.
모든 현재 엔진에서 지원됨.
지연 로딩 속성은 다음과 같은 키워드 및 상태를 가지는 열거형 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
lazy
| 지연 | 일부 조건이 충족될 때까지 리소스 가져오기를 연기하는 데 사용됩니다. |
eager
| 즉시 | 리소스를 즉시 가져오도록 사용됩니다. 기본 상태입니다. |
이 속성은 사용자 에이전트가 리소스를 즉시 가져오도록 지시하거나, 속성의 현재 상태에 따라 요소와 관련된 일부 조건이 충족될 때까지 가져오기를 연기하도록 지시합니다.
속성의 누락된 값 기본값과 유효하지 않은 값 기본값은 모두 즉시 상태입니다.
지연 로딩 요소 단계는 요소 element가 주어졌을 때 다음과 같은 단계로 진행됩니다:
element에 대해 스크립팅이 비활성화된 경우, false를 반환합니다.
이것은 추적 방지 조치입니다. 스크립팅이 비활성화된 경우에도 사용자 에이전트가 지연 로딩을 지원하면, 페이지의 마크업에 이미지를 전략적으로 배치하여 서버가 이미지 요청의 수와 시점을 추적함으로써 사용자의 대략적인 스크롤 위치를 추적할 수 있기 때문입니다.
false를 반환합니다.
각 img
및 iframe
요소는 초기에는
null로 설정된 지연 로드 재개 단계를 가집니다.
지연
로드될 img
및
iframe
요소에 대해,
이러한 단계는 지연
로드 교차 관찰자의 콜백에서 실행되거나, 지연 로딩 속성이 즉시 상태로 설정될 때
실행됩니다. 이는 요소가 계속 로드되도록 합니다.
각 document
는 초기에는 null로 설정된 지연 로드 교차 관찰자를 가지며, IntersectionObserver
인스턴스로 설정될 수 있습니다.
element를 지연 로딩 요소로 교차 관찰을 시작하기 위해, 다음 단계를 실행합니다:
doc을 element의 노드 문서로 설정합니다.
만약 doc의 지연 로드 교차 관찰자가 null이라면, 이를 다음과
같이 초기화된 새 IntersectionObserver
인스턴스로 설정합니다:
이 스펙에서는 JavaScript로 노출된 생성자를 사용할 수밖에 없지만, 원래의 IntersectionObserver
생성자를 사용하려고 합니다. Intersection Observer가 스펙에 사용할 수 있는 저수준의 훅을 노출할 때까지, 이 방식으로 진행합니다. 관련
이슈는 w3c/IntersectionObserver#464에서
확인할 수 있습니다. [INTERSECTIONOBSERVER]
callback은 entries 및 observer 인수를 사용하여 다음 단계로 구성됩니다:
각 entry에 대해, 개발자가 수정 가능한 배열 접근자나 반복 훅을 트리거하지 않는 방법을 사용하여:
resumptionSteps를 null로 설정합니다.
만약 entry.isIntersecting
이
true라면, entry.target
의
지연 로드 재개 단계로
resumptionSteps를 설정합니다.
만약 resumptionSteps가 null이라면, 반환합니다.
지연
로딩 요소의 교차 관찰 중지를 entry.target
에
대해 수행합니다.
entry.target
의
지연 로드 재개 단계를
null로 설정합니다.
resumptionSteps을 실행합니다.
원래 isIntersecting
및 target
getter를 사용하려고 합니다. 자세한 내용은 w3c/IntersectionObserver#464를
참조하십시오. [INTERSECTIONOBSERVER]
options은 «[ "scrollMargin
" → 지연 로드 스크롤 여백 ]»을 포함하는 IntersectionObserverInit
사전 형식입니다.
이것은 이미지가 뷰포트를 교차하기 직전에, 스크롤 중에 이미지를 가져오도록 합니다.
지연 로드
스크롤 여백 제안은 값의 동적 변경을 암시하지만,
IntersectionObserver
API는 스크롤 여백의 변경을 지원하지 않습니다. 관련 이슈는 w3c/IntersectionObserver#428에서
확인할 수 있습니다.
doc의 지연 로드 교차 관찰자의 observe
메서드를 element를 인수로 하여 호출합니다.
원래의 observe
메서드를 사용하려고 합니다. 자세한 내용은 w3c/IntersectionObserver#464를
참조하십시오. [INTERSECTIONOBSERVER]
지연 로딩 요소의 교차 관찰을 중지하기 위해 element에 대해 다음 단계를 실행합니다:
doc을 element의 노드 문서로 설정합니다.
확인: doc의 지연 로드 교차 관찰자가 null이 아님을 확인합니다.
doc의 지연 로드 교차 관찰자의 unobserve
메서드를 element를 인수로 하여 호출합니다.
원래의 unobserve
메서드를 사용하려고 합니다. 자세한 내용은 w3c/IntersectionObserver#464를
참조하십시오. [INTERSECTIONOBSERVER]
지연 로드 스크롤 여백은 구현
정의된 값이지만, 다음과 같은 고려 사항이 있습니다:
일반적인 장치 사용 패턴에서 뷰포트를 교차하기 전에 리소스가 로드되도록 하는 최소 값을 설정하십시오.
일반적인 스크롤 속도: 스크롤 속도가 더 빠른 장치의 경우 값을 증가시킵니다.
현재 스크롤 속도나 관성: 사용자 에이전트는 스크롤이 멈출 가능성이 있는 위치를 예측하고 이에 따라 값을 조정할 수 있습니다.
네트워크 품질: 느리거나 지연이 긴 연결의 경우 값을 증가시킵니다.
사용자 선호도는 값에 영향을 줄 수 있습니다.
개인정보 보호를 위해 지연 로드 스크롤 여백이 추가적인 정보를 유출하지 않도록 하는 것이 중요합니다. 예를 들어, 현재 장치에서의 일반적인 스크롤 속도가 새로운 지문 생성 벡터를 도입하지 않도록 부정확할 수 있습니다.
차단 속성은 외부 리소스를 가져오는 작업을 차단해야 함을 명시적으로 나타냅니다. 차단할 수 있는 작업은 다음 표에 나열된 문자열인 가능한 차단 토큰으로 표시됩니다:
가능한 차단 토큰 | 설명 |
---|---|
"render "
| 이 요소는 렌더링을 차단할 가능성이 있습니다. |
미래에는 더 많은 가능한 차단 토큰이 추가될 수 있습니다.
차단 속성은 정렬되지 않은 고유한 공백으로 구분된 토큰의 집합이어야 하며, 각 토큰은 가능한 차단 토큰 중 하나여야 합니다. 지원되는 토큰은 가능한 차단 토큰입니다. 하나의 요소는 최대 하나의 차단 속성만 가질 수 있습니다.
요소 el의 차단 토큰 집합은 다음 단계의 결과입니다:
el의 차단 속성의 값을 value로 설정하거나, 해당 속성이 없으면 빈 문자열로 설정합니다.
value를 ASCII 소문자로 변환된 value로 설정합니다.
rawTokens를 value를 ASCII 공백으로 분할한 결과로 설정합니다.
rawTokens의 요소 중에서 가능한 차단 토큰에 해당하는 요소를 포함하는 집합을 반환합니다.
요소가 렌더링을 차단할 가능성이 있는 경우는 해당 요소의 차단 토큰 집합에 "render
"가 포함된
경우이며, 또는 개별 요소에서 정의될 암묵적으로 렌더링을 차단할 가능성이 있는 경우입니다.
기본적으로 요소는 암묵적으로 렌더링을 차단할 가능성이 없습니다.
가져오기 우선순위 속성은 다음과 같은 키워드와 상태를 가진 열거형 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
high
| high | 동일한 목적지를 가진 다른 리소스에 비해 높은 우선순위를 나타냅니다. |
low
| low | 동일한 목적지를 가진 다른 리소스에 비해 낮은 우선순위를 나타냅니다. |
auto
| auto | 동일한 목적지를 가진 다른 리소스에 비해 가져오기 우선순위를 자동으로 결정합니다. |
이 속성의 값이 없는 경우의 기본값과 유효하지 않은 값의 기본값은 모두 auto 상태입니다.
반영의 구성 요소는 다음과 같습니다:
반영된 대상은 요소 또는 ElementInternals
객체입니다.
이는 일반적으로 문맥에서 명확하며 반영된 IDL 속성의
인터페이스와 동일합니다.
ElementInternals
객체일 때 항상 해당 인터페이스와 동일합니다.
반영된 IDL 속성은 속성 인터페이스 멤버입니다.
반영된 콘텐츠 속성 이름은 문자열입니다.
반영된
대상이 요소일 때,
이는 네임스페이스가 null인 콘텐츠 속성의 로컬 이름을 나타냅니다.
반영된
대상이
ElementInternals
객체일 때,
이는 반영된
대상의
대상
요소의
내부 콘텐츠 속성
맵의 키를 나타냅니다.
반영된 IDL 속성은 반영하도록 정의될 수 있습니다. 반영된 콘텐츠 속성 이름을 가진 반영된 대상입니다. 일반적으로 이는 IDL 속성 getter가 콘텐츠 속성의 현재 값을 반환하고, setter는 콘텐츠 속성의 값을 주어진 값으로 변경함을 의미합니다.
반영된 대상이
요소인 경우,
반영된 IDL 속성은 추가로
ElementInternals
를 지원하도록 선언할 수 있습니다.
이는 ElementInternals
인터페이스도 동일한 식별자를 가진 반영된 IDL 속성을 가지며,
반영된 IDL 속성이
동일한 반영된 콘텐츠 속성 이름을
반영함을 의미합니다.
fooBar
IDL 속성은 반영해야 하며,
foobar
콘텐츠 속성을 지원해야 합니다.
ElementInternals
.
반영된 대상은 다음과 같은 관련 알고리즘을 가집니다:
반영된 대상이 요소 element인 경우, 다음과 같이 정의됩니다:
element를 반환합니다.
attribute는 네임스페이스 및 로컬 이름으로 속성 가져오기를 실행한 결과이며, null, 반영된 콘텐츠 속성 이름, element이 주어집니다.
attribute가 null인 경우 null을 반환합니다.
attribute의 값을 반환합니다.
속성 값을 설정하고, element, 반영된 콘텐츠 속성 이름, value를 줍니다.
네임스페이스 및 로컬 이름으로 속성 제거를 실행하며, null, 반영된 콘텐츠 속성 이름, element이 주어집니다.
반영된 대상이
ElementInternals
객체
elementInternals인 경우, 다음과 같이 정의됩니다:
elementInternals의 대상 요소를 반환합니다.
만약 elementInternals의 대상 요소의 내부 콘텐츠 속성 맵[ 반영된 콘텐츠 속성 이름]이 존재하지 않는다면, null을 반환합니다.
elementInternals의 대상 요소의 내부 콘텐츠 속성 맵[ 반영된 콘텐츠 속성 이름]을 반환합니다.
설정하고, elementInternals의 대상 요소의 내부 콘텐츠 속성 맵[ 반영된 콘텐츠 속성 이름]을 value로 설정합니다.
제거하고, elementInternals의 대상 요소의 내부 콘텐츠 속성 맵[ 반영된 콘텐츠 속성 이름]을 제거합니다.
이는 ElementInternals
객체의 데이터 구조가 다소 중복되는 결과를 낳습니다.
이는 대상
요소의
내부 콘텐츠 속성 맵이 직접
조작될 수 없으며,
이로 인해 반영이 단일 방향으로만 이루어지기 때문입니다.
그럼에도 불구하고 이는 반영된
대상 간에 공유되는 IDL 속성을 정의할 때
발생할 수 있는 오류를 줄이고,
공통 API 시맨틱의 이점을 얻기 위해 선택된 접근 방식입니다.
IDL 속성 타입이 DOMString
또는
DOMString?
이며,
반영된 열거된
콘텐츠 속성을 가지는 경우,
알려진 값으로만 제한될 수 있습니다.
아래의 처리 모델에 따라, 이러한 IDL 속성의 getter는 해당 열거된 속성에 대한 키워드만 반환하거나, 빈 문자열 또는 null을 반환하게 됩니다.
반영된
IDL 속성이
DOMString
타입을 가지고 있는 경우:
getter 단계는 다음과 같습니다:
element는 this의 get the element를 실행한 결과로 얻습니다.
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
attributeDefinition은 element의 네임스페이스가 null이고 로컬 이름이 반영된 콘텐츠 속성 이름인 콘텐츠 속성의 속성 정의입니다.
attributeDefinition이 열거된 속성임을 나타내고, 반영된 IDL 속성이 알려진 값으로만 제한되도록 정의된 경우:
contentAttributeValue가 null인 경우, 빈 문자열을 반환합니다.
contentAttributeValue를 반환합니다.
setter 단계는 주어진 값으로 this의 set the content attribute를 실행하는 것입니다.
반영된
IDL 속성이
DOMString?
타입을 가지고 있는 경우:
getter 단계는 다음과 같습니다:
element는 this의 get the element를 실행한 결과로 얻습니다.
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
attributeDefinition은 element의 네임스페이스가 null이고 로컬 이름이 반영된 콘텐츠 속성 이름인 콘텐츠 속성의 속성 정의입니다.
Assert: 반영된 IDL 속성이 알려진 값으로만 제한됨을 나타냅니다.
Assert: contentAttributeValue가 attributeDefinition의 상태와 일치함을 나타냅니다.
contentAttributeValue가 attributeDefinition의 상태와 일치하지만 관련된 키워드 값이 없는 경우, null을 반환합니다.
attributeDefinition의 상태와 일치하는 contentAttributeValue의 정식 키워드를 반환합니다.
setter 단계는 주어진 값이 null인 경우, this의 delete the content attribute를 실행하는 것입니다.
그렇지 않은 경우, 주어진 값으로 this의 set the content attribute를 실행합니다.
반영된 IDL 속성이
USVString
타입을 가지고 있는 경우:
getter 단계는 다음과 같습니다:
element는 this의 get the element를 실행한 결과로 얻습니다.
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
attributeDefinition은 element의 네임스페이스가 null이고 로컬 이름이 반영된 콘텐츠 속성 이름인 콘텐츠 속성의 속성 정의입니다.
attributeDefinition이 URL을 포함한다고 나타내는 경우:
contentAttributeValue가 null인 경우, 빈 문자열을 반환합니다.
urlString은 element의 노드 문서를 기준으로 contentAttributeValue를 주어진 값으로 URL 인코딩, 파싱 및 직렬화의 결과입니다.
urlString이 실패하지 않으면 urlString을 반환합니다.
contentAttributeValue를 반환하며, 이를 스칼라 값 문자열로 변환합니다.
setter 단계는 주어진 값으로 this의 set the content attribute를 실행하는 것입니다.
반영된 IDL 속성이
boolean
타입을 가지고 있는 경우:
getter 단계는 다음과 같습니다:
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
contentAttributeValue가 null인 경우, false를 반환합니다.
true를 반환합니다.
setter 단계는 주어진 값이 false인 경우, this의 delete the content attribute를 실행하는 것입니다.
주어진 값이 true인 경우, 빈 문자열로 this의 set the content attribute를 실행합니다.
이는 부울 콘텐츠 속성에 대한 규칙에 해당합니다.
만약 반영된 IDL 속성이
long
타입을 가지고 있으며,
선택적으로 음수가 아닌 숫자만으로 제한된 경우,
또는 선택적으로 기본 값 defaultValue를 가진 경우:
getter 단계는 다음과 같습니다:
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
contentAttributeValue가 null이 아닌 경우:
parsedValue는 정수 파싱 contentAttributeValue의 결과입니다. 만약 반영된 IDL 속성이 음수가 아닌 숫자만으로 제한된 경우, 음수가 아닌 정수 파싱의 결과입니다.
parsedValue가 오류가 아니고 long
범위 내에 있다면 parsedValue를 반환합니다.
만약 반영된 IDL 속성이 기본 값을 가진 경우, defaultValue를 반환합니다.
만약 반영된 IDL 속성이 음수가 아닌 숫자만으로 제한된 경우, -1을 반환합니다.
0을 반환합니다.
setter 단계는 다음과 같습니다:
만약 반영된 IDL
속성이
음수가
아닌 숫자만으로 제한된 경우,
주어진 값이 음수라면 "IndexSizeError
"
DOMException
을
던집니다.
this의 set the content attribute를 실행하여 주어진 값을 가장 짧은 가능한 문자열로 변환합니다.
만약 반영된 IDL 속성이
unsigned long
타입을 가지고 있으며,
선택적으로 양수로만 제한된, 양수로만 제한되고 폴백이 있는, 또는 범위로 제한된
[clampedMin,
clampedMax] 경우, 그리고 선택적으로 기본 값
defaultValue을 가진 경우:
getter 단계는 다음과 같습니다:
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
minimum을 0으로 설정합니다.
만약 반영된 IDL 속성이 양수로만 제한된 경우, 또는 양수로만 제한되고 폴백이 있는 경우, minimum을 1로 설정합니다.
만약 반영된 IDL 속성이 범위로 제한된 경우, minimum을 clampedMin으로 설정합니다.
만약 contentAttributeValue가 null이 아닌 경우:
parsedValue는 음수가 아닌 정수 파싱 contentAttributeValue의 결과입니다.
parsedValue가 오류가 아니며 minimum에서 maximum 범위 내에 포함된다면 parsedValue를 반환합니다.
만약 parsedValue가 오류가 아니며 반영된 IDL 속성이 범위로 제한된 경우:
parsedValue가 minimum보다 작다면 minimum을 반환합니다.
maximum을 반환합니다.
만약 반영된 IDL 속성이 기본 값을 가지고 있다면 defaultValue를 반환합니다.
minimum을 반환합니다.
setter 단계는 다음과 같습니다:
만약 반영된 IDL
속성이
양수로만
제한된 경우,
주어진 값이 0이라면 "IndexSizeError
"
DOMException
을
던집니다.
minimum을 0으로 설정합니다.
만약 반영된 IDL 속성이 양수로만 제한된 경우, 또는 양수로만 제한되고 폴백이 있는 경우, minimum을 1로 설정합니다.
newValue를 minimum으로 설정합니다.
만약 반영된 IDL 속성이 기본 값을 가지고 있다면, newValue를 defaultValue로 설정합니다.
주어진 값이 minimum에서 2147483647 범위 내에 있다면, newValue를 그 값으로 설정합니다.
this의 set the content attribute를 실행하여 newValue를 가장 짧은 가능한 문자열로 변환합니다.
범위로 제한됨은 setter 단계에 영향을 미치지 않습니다.
만약 반영된 IDL 속성이
double
타입을 가지고 있으며,
선택적으로 양수로만 제한된 경우, 그리고 선택적으로 기본 값
defaultValue을 가진 경우:
getter 단계는 다음과 같습니다:
contentAttributeValue는 this의 get the content attribute를 실행한 결과로 얻습니다.
만약 contentAttributeValue가 null이 아닌 경우:
parsedValue는 부동 소수점 수 파싱 contentAttributeValue의 결과입니다.
parsedValue가 오류가 아니며 0보다 크다면 parsedValue를 반환합니다.
parsedValue가 오류가 아니며 반영된 IDL 속성이 양수로만 제한되지 않은 경우, parsedValue를 반환합니다.
만약 반영된 IDL 속성이 기본 값을 가지고 있다면 defaultValue를 반환합니다.
0을 반환합니다.
setter 단계는 다음과 같습니다:
만약 반영된 IDL 속성이 양수로만 제한된 경우, 주어진 값이 0보다 크지 않으면 반환합니다.
this의 set the content attribute를 실행하여 주어진 값을 변환된 부동 소수점 수의 최적 표현으로 설정합니다.
무한대(Infinity) 및 숫자가 아님(NaN) 값들은 Web IDL에 정의된 대로 설정 시 예외를 발생시킵니다. [WEBIDL]
만약 반영된 IDL 속성이
DOMTokenList
타입을 가지고 있다면,
해당 속성의 getter 단계는 DOMTokenList
객체를 반환하는 것입니다. 이 객체의 관련된 요소는 this이며,
관련된 속성의 로컬 이름은 반영된 콘텐츠 속성
이름입니다.
사양 작성자는 이 유형의 IDL 속성에 대해 ElementInternals 지원을
사용할 수 없습니다.
만약 반영된 IDL 속성이
T?
타입을 가지고 있고, 여기서 T가
Element
또는
Element
를
상속하는 인터페이스인 경우,
attr은 반영된 콘텐츠 속성
이름이 됩니다:
해당 반영된 대상은 요소 또는 null에 대한 약한 참조인 명시적으로 설정된 attr 요소를 가집니다. 초기값은 null입니다.
해당 반영된 대상 reflectedTarget은 다음 단계들을 실행하는 attr 관련 요소 가져오기 알고리즘을 가집니다:
reflectedTarget의 요소 가져오기를 실행하여 element를 얻습니다.
reflectedTarget의 콘텐츠 속성 가져오기를 실행하여 contentAttributeValue를 얻습니다.
만약 reflectedTarget의 명시적으로 설정된 attr 요소가 null이 아닌 경우:
만약 reflectedTarget의 명시적으로 설정된 attr 요소가 element의 그림자 포함 조상 중 하나의 하위 요소인 경우, reflectedTarget의 명시적으로 설정된 attr 요소를 반환합니다.
null을 반환합니다.
그렇지 않고, contentAttributeValue가 null이 아닌 경우, 다음 조건을 충족하는 첫 번째 요소 candidate를 반환합니다. 이 요소는 트리 순서에서 다음 기준을 충족해야 합니다:
해당 요소가 없다면 null을 반환합니다.
null을 반환합니다.
getter 단계는 this의 attr 관련 요소 가져오기를 실행한 결과를 반환하는 것입니다.
setter 단계는 다음과 같습니다:
주어진 값이 null인 경우:
this의 명시적으로 설정된 attr 요소를 null로 설정합니다.
반환합니다.
this의 명시적으로 설정된 attr 요소를 주어진 값에 대한 약한 참조로 설정합니다.
요소 반영된 대상에만 해당하는 단계입니다: 주어진 element, localName, oldValue, value, 및 namespace에 대해 다음 속성 변경 단계가 콘텐츠 속성과 IDL 속성 간의 동기화에 사용됩니다:
localName이 attr가 아니거나 namespace가 null이 아닌 경우 반환합니다.
element의 명시적으로 설정된 attr 요소를 null로 설정합니다.
이 유형의 반영된 IDL 속성은
일관성을 위해 식별자가 "Element
"로 끝나도록 강력히 권장됩니다.
만약 반영된 IDL 속성이
FrozenArray<T>?
타입을 가지고 있고, 여기서 T가
Element
또는
Element
를
상속하는 인터페이스인 경우,
attr은 반영된 콘텐츠 속성
이름이 됩니다:
해당 반영된 대상은 요소에 대한 약한 참조들의 목록이거나 null인 명시적으로 설정된 attr 요소들을 가집니다. 초기값은 null입니다.
해당 반영된 대상은 캐시된 attr 관련 요소들을 가집니다. 이는 요소들의 목록입니다. 초기값은 « »입니다.
해당 반영된
대상은
캐시된 attr 관련 요소 객체를 가집니다. 이는
FrozenArray<T>?
입니다. 초기값은 null입니다.
해당 반영된 대상 reflectedTarget은 다음 단계들을 실행하는 attr 관련 요소들 가져오기 알고리즘을 가집니다:
elements를 빈 목록으로 설정합니다.
reflectedTarget의 요소 가져오기를 실행하여 element를 얻습니다.
만약 reflectedTarget의 명시적으로 설정된 attr 요소들이 null이 아닌 경우:
각 attrElement에 대해 reflectedTarget의 명시적으로 설정된 attr 요소들에서:
만약 attrElement가 element의 그림자 포함 조상 중 하나의 하위 요소가 아니라면 계속 진행합니다.
attrElement를 elements에 추가합니다.
그렇지 않은 경우:
reflectedTarget의 콘텐츠 속성 가져오기를 실행하여 contentAttributeValue를 얻습니다.
만약 contentAttributeValue가 null이라면 null을 반환합니다.
contentAttributeValue를 ASCII 공백으로 분할한 tokens로 설정합니다.
각 id에 대해 tokens에서:
elements를 반환합니다.
Getter 단계는 다음과 같습니다:
this의 attr 관련 요소들 가져오기를 실행하여 elements를 얻습니다.
elements의 내용이 this의 캐시된 attr 관련 요소들의 내용과 동일하다면 this의 캐시된 attr 관련 요소 객체를 반환합니다.
elements를 FrozenArray<T>?
로 변환하여
elementsAsFrozenArray로 설정합니다.
this의 캐시된 attr 관련 요소들을 elements로 설정합니다.
this의 캐시된 attr 관련 요소 객체를 elementsAsFrozenArray로 설정합니다.
elementsAsFrozenArray를 반환합니다.
이 추가 캐싱 계층은 element.reflectedElements === element.reflectedElements
라는 불변성을
유지하기 위해 필요합니다.
Setter 단계는 다음과 같습니다:
주어진 값이 null인 경우:
this의 명시적으로 설정된 attr 요소들을 null로 설정합니다.
반환합니다.
elements를 빈 목록으로 설정합니다.
주어진 값에 있는 각 element에 대해:
element에 대한 약한 참조를 elements에 추가합니다.
this의 명시적으로 설정된 attr 요소들을 elements로 설정합니다.
요소 반영된 대상에만 해당하는 단계입니다: 주어진 element, localName, oldValue, value, 및 namespace에 대해 다음 속성 변경 단계가 콘텐츠 속성과 IDL 속성 간의 동기화에 사용됩니다:
localName이 attr가 아니거나 namespace가 null이 아닌 경우 반환합니다.
element의 명시적으로 설정된 attr 요소들을 null로 설정합니다.
이 유형의 반영된 IDL 속성은
일관성을 위해 식별자가 "Elements
"로 끝나도록 강력히 권장됩니다.
Reflection은 주로 웹 개발자의 작업 효율성을 높이기 위해 반영된 IDL 속성을 통해 콘텐츠 속성에 타입이 지정된 접근을 제공하는 것입니다. 웹 플랫폼이 기반을 두고 있는 궁극적인 진실의 출처는 바로 콘텐츠 속성들 자체입니다. 즉, 명세 작성자는 반영된 IDL 속성의 getter나 setter 단계를 사용해서는 안 되며, 대신 콘텐츠 속성의 존재 여부와 값을 사용해야 합니다. (또는 열거된 속성과 같은 추상화를 사용할 수 있습니다.)
이와 관련하여 두 가지 중요한 예외는 다음과 같은 타입의 반영된 IDL 속성입니다:
이러한 경우, 명세 작성자는 해당 반영된 대상의 attr 관련 요소 가져오기 및 attr 관련 요소들 가져오기를 각각 사용해야 합니다. 콘텐츠 속성의 존재 여부와 값은 완전히 동기화될 수 없기 때문에 사용해서는 안 됩니다.
반영된 대상의 명시적으로 설정된 attr 요소, 명시적으로 설정된 attr 요소들, 캐시된 attr 관련 요소들, 및 캐시된 attr 관련 요소 객체는 내부 구현 세부 사항으로 간주되며, 이를 기반으로 구축해서는 안 됩니다.
HTMLFormControlsCollection
및 HTMLOptionsCollection
인터페이스는 HTMLCollection
인터페이스에서 파생된 컬렉션입니다.
HTMLAllCollection
인터페이스도
컬렉션이지만,
이와 같이 파생된 것은 아닙니다.
HTMLAllCollection
인터페이스HTMLAllCollection
인터페이스는 레거시 document.all
속성을 위해 사용됩니다. 이 인터페이스는 HTMLCollection
과
유사하게 동작합니다. 주요 차이점은 메서드의 다양한 (남용된) 사용이 항상 어떤 결과를 반환하도록 허용하며, 속성 접근 외에도 함수로 호출할 수 있다는 점입니다.
모든 HTMLAllCollection
객체는 Document
에 루팅되며, 모든 요소와
일치하는 필터를 가지므로 HTMLAllCollection
객체의 컬렉션에 의해 표현된 요소들은 루트 Document
의 모든 하위 요소로 구성됩니다.
HTMLAllCollection
인터페이스를 구현하는 객체들은 추가 [[Call]] 내부 메서드가 포함된 레거시 플랫폼
객체이며, [[IsHTMLDDA]] 내부
슬롯도 가집니다.
HTMLAllCollection
인터페이스를 구현하는 객체들은 [[IsHTMLDDA]] 내부
슬롯을 가지기 때문에 몇 가지 특이한 동작을 합니다:
HTMLAllCollection
인터페이스를 구현하는 객체들에 대해 false를 반환합니다.HTMLAllCollection
인터페이스를 구현하는 객체들을 undefined
와 null
값과 비교할 때 true를 반환합니다. (문자열 또는 객체와의
IsStrictlyEqual 비교 및 IsLooselyEqual 비교는 영향을 받지 않습니다.)typeof
연산자는 HTMLAllCollection
인터페이스를 구현하는 객체들에 대해 "undefined" 문자열을 반환합니다.이 특수 동작들은 레거시 콘텐츠와의 호환성을 유지하기 위해 설계되었습니다: 한 쪽은 document.all
객체의 존재를 사용하여 레거시 사용자 에이전트를 감지하고, 다른 한 쪽은 이러한 레거시 사용자 에이전트만 지원하며 document.all
객체의 존재를 확인하지 않고도 이를 사용합니다. [JAVASCRIPT]
[Exposed =Window ,
LegacyUnenumerableNamedProperties ]
interface HTMLAllCollection {
readonly attribute unsigned long length ;
getter Element (unsigned long index );
getter (HTMLCollection or Element )? namedItem (DOMString name );
(HTMLCollection or Element )? item (optional DOMString nameOrIndex );
// Note: HTMLAllCollection objects have a custom [[Call]] internal method and an [[IsHTMLDDA]] internal slot.
};
객체의 지원되는 속성 인덱스는 HTMLCollection
객체들에 대해 정의된 대로입니다.
지원되는 속성 이름은 컬렉션에 의해 표현된 모든 요소의 id
속성의 비어있지 않은
값들, 그리고 컬렉션에 의해 표현된 모든 "all"-명명된 요소들의 name
속성의 비어있지 않은 값들로 구성됩니다. 이 값들은 트리 순서에 따라 정렬되며, 중복된 이후 항목들은 무시되고, 요소의 id
가
name
을 앞서며, 두 값이 다르고 둘 중 어느 것도 이전 항목의 중복이 아닐 때 그 순서대로 정렬됩니다.
length
게터 단계는 컬렉션에 의해 표현된 노드의 수를 반환하는 것입니다.
인덱스 속성 게터는 전달된 인덱스를 주어진 this에서 모든 인덱스 요소를 가져오는 것의 결과를 반환해야 합니다.
namedItem(name)
메서드 단계는 주어진 name에 대해 모든 명명된 요소를 가져오는
것의 결과를 this에서 반환하는 것입니다.
item(nameOrIndex)
메서드 단계는 다음과 같습니다:
nameOrIndex가 제공되지 않은 경우 null을 반환합니다.
주어진 nameOrIndex에 대해 모든 인덱스 또는 명명된 요소를 가져오는 것의 결과를 반환합니다.
다음 요소들은 "all"-명명된 요소들입니다:
a
,
button
,
embed
,
form
,
frame
,
frameset
,
iframe
,
img
,
input
,
map
,
meta
,
object
,
select
,
그리고 textarea
"모든 인덱스 요소를 가져오기"란
HTMLAllCollection
collection에서 주어진 인덱스 index의 요소를 반환하거나, 그런 index 번째 요소가 없는 경우 null을 반환하는 것을
의미합니다.
"모든 명명된 요소를 가져오기"란
HTMLAllCollection
collection에서 주어진 이름 name의 요소를 가져오는 것을 의미합니다.
name이 빈 문자열인 경우 null을 반환합니다.
subCollection을 collection과 같은 Document
에 루팅된 HTMLCollection
객체로 정의하고, 이 객체의 필터는 다음 조건을 만족하는 요소들만 일치하도록 합니다:
"all"-명명된
요소들이 name과 동일한 name
속성을 가진 경우
요소가 ID가 name과 동일한 경우
만약 subCollection에 요소가 하나만 있다면, 그 요소를 반환합니다.
그렇지 않고, subCollection이 비어있다면 null을 반환합니다.
그렇지 않은 경우, subCollection을 반환합니다.
"모든 인덱스 또는 명명된 요소를 가져오기"란 HTMLAllCollection
collection에서 nameOrIndex에 따라 요소를 가져오는 것을 의미합니다:
nameOrIndex가 JavaScript 문자열로 배열 인덱스 속성 이름으로 변환된 경우, 주어진 nameOrIndex에 대해 모든 인덱스 요소를 가져오는 것의 결과를 반환합니다.
그렇지 않은 경우, 주어진 nameOrIndex에 대해 모든 명명된 요소를 가져오는 것의 결과를 반환합니다.
만약 argumentsList의 크기가 0이거나, argumentsList[0]이 undefined라면 null을 반환합니다.
nameOrIndex를 변환하는 것의
결과로 설정합니다.
argumentsList[0]을 DOMString
으로
변환합니다.
result를 모든 인덱스 또는 명명된 요소를 가져오는 것의 결과로
설정합니다.
이 HTMLAllCollection
에서
nameOrIndex에 대해 실행합니다.
result를 ECMAScript 값으로 변환하는 것의 결과를 반환합니다.
thisArgument는 무시되며, 따라서
Function.prototype.call.call(document.all, null, "x")
와 같은 코드는 여전히
요소를 검색합니다. (document.all.call
은 존재하지 않으며, document.all
이
Function.prototype
에서 상속되지 않기 때문입니다.)
HTMLFormControlsCollection
interfaceThe HTMLFormControlsCollection
인터페이스는 form
요소 내의 컬렉션인
리스트된
요소들을 위해 사용됩니다.
현재 모든 엔진에서 지원합니다.
현재 모든 엔진에서 지원합니다.
[Exposed =Window ]
interface HTMLFormControlsCollection : HTMLCollection {
// inherits length and item()
getter (RadioNodeList or Element )? namedItem (DOMString name ); // shadows inherited namedItem()
};
[Exposed =Window ]
interface RadioNodeList : NodeList {
attribute DOMString value ;
};
collection.length
collection 내 요소의 수를 반환합니다.
element = collection.item(index)
element = collection[index]
collection 내 index에 위치한 항목을 반환합니다. 항목들은 트리 순서로 정렬됩니다.
element = collection.namedItem(name)
HTMLFormControlsCollection/namedItem
현재 모든 엔진에서 지원합니다.
radioNodeList = collection.namedItem(name)
element = collection[name]
radioNodeList = collection[name]
collection에서 ID 또는
name
name을 가진 항목을 반환합니다.
여러 개의 일치하는 항목이 있는 경우, 그러한 모든 요소들을 포함하는 RadioNodeList
객체를 반환합니다.
radioNodeList.value
radioNodeList에 의해 표현된 첫 번째 선택된 라디오 버튼의 값을 반환합니다.
radioNodeList.value = value
value와 일치하는 값을 가진 radioNodeList에 의해 표현된 첫 번째 라디오 버튼을 선택합니다.
객체의 지원되는 속성 인덱스는
HTMLCollection
객체에 대해 정의된 것과 동일합니다.
지원되는 속성 이름은 컬렉션에 의해 표현된 모든 요소의 빈 값이 아닌
id
및 name
속성 값으로 구성됩니다. 이러한 속성 이름들은 트리 순서에 따라
정렬되며, 이후의 중복 항목은 무시됩니다. 요소의 id
가
name
보다
우선하여 기여되며, 서로 다르고 이전 항목의 중복이 아닌 경우에 한합니다.
namedItem(name)
메서드는 다음 알고리즘에 따라
동작해야 합니다:
id
또는 name
속성을 가진 노드가 정확히 하나만 있는 경우, 해당 노드를 반환하고 알고리즘을 중지합니다.
id
또는 name
속성을 가진 노드가 없는 경우 null을 반환하고 알고리즘을 중지합니다.
RadioNodeList
객체를 생성하여 HTMLFormControlsCollection
객체의 뷰를 필터링합니다. 이 RadioNodeList
객체 내 노드는 name과 일치하는 id
또는 name
속성을 가진 노드들로만 구성됩니다. 이 RadioNodeList
객체 내 노드는 트리 순서에
따라 정렬되어야 합니다.
RadioNodeList
객체를 반환합니다.
RadioNodeList
인터페이스의 멤버는 NodeList
인터페이스로부터 상속된 동작을 수행해야 합니다.
현재 모든 엔진에서 지원합니다.
value
IDL 속성은 RadioNodeList
객체에 대해 다음과 같은 단계를 실행하여 값을 반환해야 합니다:
element를 input
요소 중 라디오
버튼 상태에 있는
첫 번째 요소로 설정하고 checkedness가 true인
요소를 RadioNodeList
객체로 반환합니다. 그렇지 않으면 null로 설정합니다.
element가 null인 경우 빈 문자열을 반환합니다.
element가 value
속성이 없는 요소인 경우 문자열 "on
"을 반환합니다.
그렇지 않으면 element의 value
속성의 값을 반환합니다.
value
IDL 속성을 설정할 때 다음과 같은 단계를 실행해야 합니다:
새 값이 "on
" 문자열인 경우: element를 input
요소 중 라디오
버튼 상태에 있고 새 값이 일치하거나 속성이 없는 첫 번째 요소로 설정합니다. 해당 요소가 없으면
대신 element를 null로 설정합니다.
그렇지 않은 경우: element를 input
요소 중 라디오
버튼 상태에 있으며, 새 값이 일치하는 속성이 있는 첫 번째 요소로 설정합니다. 해당 요소가 없으면
대신 element를 null로 설정합니다.
element가 null이 아닌 경우 checkedness를 true로 설정합니다.
HTMLOptionsCollection
인터페이스현재 모든 엔진에서 지원합니다.
HTMLOptionsCollection
인터페이스는 option
요소의 컬렉션을
나타내며, 항상 select
요소에 루팅되며 해당 요소의 하위 요소를 조작하는 속성과 메서드를 가집니다.
[Exposed =Window ]
interface HTMLOptionsCollection : HTMLCollection {
// 상속받은 item(), namedItem()
[CEReactions ] attribute unsigned long length ; // 상속받은 length()를 덮어씁니다.
[CEReactions ] setter undefined (unsigned long index , HTMLOptionElement ? option );
[CEReactions ] undefined add ((HTMLOptionElement or HTMLOptGroupElement ) element , optional (HTMLElement or long )? before = null );
[CEReactions ] undefined remove (long index );
attribute long selectedIndex ;
};
collection.length
collection에 있는 요소의 수를 반환합니다.
collection.length = value
기존 길이보다 작은 숫자로 설정하면 collection에 해당하는 컨테이너에 있는 option
요소의 수를 줄입니다.
기존 길이보다 큰 숫자로 설정하면 100000 이하일 경우, collection에 해당하는 컨테이너에 빈 option
요소를 추가합니다.
element = collection.item(index)
element = collection[index]
collection에서 인덱스 index에 있는 항목을 반환합니다. 항목들은 트리 순서로 정렬됩니다.
collection[index] = element
index가 collection에 있는 항목 수보다 큰 숫자인 경우, 해당 컨테이너에 빈 option
요소를 추가합니다.
null로 설정하면 collection에서 인덱스 index에 있는 항목을 제거합니다.
option
요소로 설정하면 collection의 index에 해당 요소를 추가하거나 교체합니다.
element = collection.namedItem(name)
element = collection[name]
collection에서 name과 일치하는 ID 또는 name
을
가진 항목을 반환합니다.
일치하는 항목이 여러 개 있을 경우, 첫 번째 항목이 반환됩니다.
collection.add(element[, before])
element를 before로 지정된 노드 앞에 삽입합니다.
before 인수는 숫자일 수 있으며, 이 경우 element가 해당 숫자의 항목 앞에 삽입됩니다. 또는 collection의 요소인 경우, element가 해당 요소 앞에 삽입됩니다.
before이 생략되거나 null이거나 범위를 벗어난 숫자인 경우 element는 목록의 끝에 추가됩니다.
element가 삽입될 요소의 상위 요소인 경우 "HierarchyRequestError
" DOMException
을
던집니다.
collection.remove(index)
collection에서 인덱스 index에 있는 항목을 제거합니다.
collection.selectedIndex
선택된 첫 번째 항목의 인덱스를 반환하거나, 선택된 항목이 없으면 −1을 반환합니다.
collection.selectedIndex = index
collection에서 인덱스 index에 있는 option
요소를 선택으로 변경합니다.
이 객체의 지원되는 속성 인덱스는 HTMLCollection
객체에 대해 정의된 것과 동일합니다.
length
getter 단계는 컬렉션이 컬렉션으로 표현된 노드 수를 반환합니다.
length
setter 단계는 다음과 같습니다:
current를 컬렉션이 컬렉션으로 표현된 노드 수로 설정합니다.
주어진 값이 current보다 크면:
주어진 값이 current보다 작으면:
n을 current − value로 설정합니다.
컬렉션에서 마지막 n 개의 노드를 부모 노드에서 제거합니다.
length
를
설정해도 optgroup
요소를 제거하거나 추가하지 않으며, 기존 optgroup
요소에 새로운 자식을 추가하지 않습니다(자식을 제거할 수는 있습니다).
지원되는 속성 이름은 모든 요소의 비어 있지 않은 id
및 name
속성 값으로
구성됩니다. 이 요소들은 컬렉션으로 표현된 요소들이며, 트리 순서에 따라 배열됩니다. 나중에 중복된 항목은 무시되며, 요소의 id
가 name
보다 우선하여
적용됩니다. 이 두 속성이 다르며, 어느 것도 이전 항목의 중복이 아닌 경우에 한합니다.
사용자가 새로운 인덱스 속성의 값을 설정하거나 기존 인덱스 속성의 값을 설정해야 할 때, 다음 알고리즘을 실행해야 합니다:
value가 null이면 remove
메서드의 단계를 index를 인수로 실행하고 반환합니다.
length를 컬렉션이 컬렉션으로 표현된 노드 수로 설정합니다.
n을 index 마이너스 length로 설정합니다.
만약 n이 0보다 크면, 속성과 자식 노드가 없는 option
요소 n-1개로 구성된 DocumentFragment
를
select
요소에 추가합니다. 이 요소는 HTMLOptionsCollection
의
루트입니다.
만약 n이 0보다 크거나 같다면, value를 select
요소에 추가합니다. 그렇지 않으면, index번째 요소를 value로 교체합니다.
add(element, before)
메서드는 다음 알고리즘에 따라 작동해야
합니다:
element가 컬렉션이 루팅된 select
요소의 상위 요소이면 "HierarchyRequestError
" DOMException
을
던져야 합니다.
before가 요소인 경우, 해당 요소가 컬렉션이 루팅된 select
요소의 하위 요소가 아니라면 "NotFoundError
" DOMException
을
던져야 합니다.
element와 before가 동일한 요소인 경우, 반환합니다.
before가 노드인 경우 reference를 해당 노드로 설정합니다. 그렇지 않으면, before가 정수이며 컬렉션에 before번째 노드가 있으면 reference를 해당 노드로 설정합니다. 그렇지 않으면 reference를 null로 설정합니다.
reference가 null이 아닌 경우 parent를 reference의 부모 노드로 설정합니다. 그렇지 않으면
parent를 컬렉션이 루팅된 select
요소로 설정합니다.
삽입 전 element를 parent 노드에 reference 앞에 삽입합니다.
remove(index)
메서드는 다음 알고리즘에 따라 작동해야 합니다:
컬렉션이 컬렉션으로 표현된 노드 수가 0이면 반환합니다.
index가 0 이상이며 컬렉션이 컬렉션으로 표현된 노드 수보다 작은 수가 아니면 반환합니다.
element를 컬렉션에서 index번째 요소로 설정합니다.
element를 부모 노드에서 제거합니다.
selectedIndex
IDL 속성은 select
요소에서 동일한 이름의 속성과 동일하게 동작해야 합니다. 이 속성은 컬렉션이 HTMLOptionsCollection
에
루팅된 요소입니다.
DOMStringList
인터페이스모든 현재 엔진에서 지원됨.
DOMStringList
인터페이스는
문자열 목록을 나타내는 구식 레트로 방식입니다.
[Exposed =(Window ,Worker )]
interface DOMStringList {
readonly attribute unsigned long length ;
getter DOMString ? item (unsigned long index );
boolean contains (DOMString string );
};
새 API는 sequence<DOMString>
또는 그에 상응하는 것을 사용해야 하며, DOMStringList
를 사용해서는 안
됩니다.
strings.length
strings에 있는 문자열의 수를 반환합니다.
strings[index]
strings.item(index)
strings에서 index에 해당하는 문자열을 반환합니다.
strings.contains(string)
strings에 string이 포함되어 있으면 true를, 그렇지 않으면 false를 반환합니다.
각 DOMStringList
객체는 리스트와
연결되어 있습니다.
DOMStringList
인터페이스는
인덱스 속성을 지원합니다. 지원되는 속성 인덱스는 인덱스입니다. this의
연결된 리스트의 인덱스입니다.
모든 현재 엔진에서 지원됨.
length
getter 단계는 연결된 리스트의 this의 크기를 반환하는 것입니다.
모든 현재 엔진에서 지원됨.
item(index)
메서드 단계는 연결된 리스트에서 index번째 항목을
반환하거나, index가 리스트의 크기보다 클 경우 null을 반환하는 것입니다.
모든 현재 엔진에서 지원됨.
contains(string)
메서드 단계는 연결된 리스트에 string이
포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환하는 것입니다.
JavaScript 객체(예: 플랫폼 객체 포함)를 Realm 경계를 넘어 전달하기 위해, 이 명세는 객체를 직렬화
및 역직렬화하기 위한 다음과 같은 인프라를 정의합니다. 일부 경우에는
데이터를 복사하는 대신 기본 데이터를 전송하기도 합니다. 이 직렬화/역직렬화 프로세스는 "구조화된 복제"라고 통칭되지만, 대부분의 API는 별도의 직렬화 및 역직렬화 단계를 수행합니다. (주목할
예외는 structuredClone()
메서드입니다.)
이 섹션에서는 JavaScript 명세의 용어 및 서체 표기법을 사용합니다. [JAVASCRIPT]
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
직렬화 가능한 객체는 특정 realm에 독립적으로 직렬화되고 나중에 역직렬화될 수 있습니다. 이렇게 하면 디스크에 저장되었다가 나중에 복원되거나, agent 및 심지어 agent cluster 경계를 넘어 복제될 수 있습니다.
모든 객체가 직렬화 가능한 객체는 아니며, 직렬화 가능한 객체인 모든 객체의 모든 측면이 직렬화될 때 반드시 보존되는 것은 아닙니다.
플랫폼 객체는 직렬화 가능한 객체일 수 있으며, 그 주 인터페이스가 [Serializable]
IDL 확장
속성으로 장식된 경우에만 가능합니다. 이러한 인터페이스는 또한 다음 알고리즘을 정의해야 합니다:
value의 데이터를 serialized 필드로 직렬화하는 단계입니다. serialized에 직렬화된 결과 데이터는 realm에 독립적이어야 합니다.
이 단계는 직렬화가 불가능한 경우 예외를 발생시킬 수 있습니다.
이 단계는 중첩된 데이터 구조를 직렬화하기 위해 하위 직렬화를 수행할 수 있습니다. memory 인수를 생략하게 되므로 StructuredSerialize를 직접 호출해서는 안 됩니다.
이 단계의 도입에서 forStorage 인수가 알고리즘과 관련이 없는 경우 언급을 생략해야 합니다.
serialized의 데이터를 역직렬화하여 value를 적절하게 설정하는 단계입니다. value는 해당 플랫폼 객체 유형의 새로 생성된 인스턴스가 되며, 내부 데이터가 설정되지 않습니다. 이러한 설정은 이 단계의 작업입니다.
이 단계는 역직렬화가 불가능한 경우 예외를 발생시킬 수 있습니다.
이 단계는 중첩된 데이터 구조를 역직렬화하기 위해 하위 역직렬화를 수행할 수 있습니다. targetRealm 및 memory 인수를 생략하게 되므로 StructuredDeserialize를 직접 호출해서는 안 됩니다.
개별 플랫폼 객체의 정의에 따라 이러한 단계에서 직렬화 및 역직렬화되는 데이터가 결정됩니다. 일반적으로 단계는 매우 대칭적입니다.
[Serializable]
확장 속성은 인수를 받아들이지
않아야 하며, 인터페이스에만 나타나야 합니다. 인터페이스에 한 번 이상 나타나서는 안 됩니다.
주어진 플랫폼 객체의 경우 (역)직렬화 프로세스에서 고려되는 것은 객체의 주 인터페이스뿐입니다. 따라서 상속이 인터페이스 정의에 관여하는 경우 상속 체인의 각 [Serializable]
-주석 인터페이스는 독립적인 직렬화 단계 및 역직렬화 단계를 정의해야 하며, 상속된
인터페이스에서 올 수 있는 중요한 데이터를 고려해야 합니다.
Person
이라는 플랫폼 객체를 정의하고, 이에 두 개의 연관된 데이터를 연결한다고 가정해 봅시다:
이름 값, 문자열입니다.
최고의 친구 값, 다른 Person
인스턴스 또는 null일 수 있습니다.
그런 다음 Person
인스턴스를 직렬화 가능한 객체로 정의할 수 있으며, [Serializable]
확장
속성으로 Person
인터페이스에 주석을 달고, 다음 동반 알고리즘을 정의합니다:
serialized.[[Name]]에 value의 연결된 이름 값을 설정합니다.
serializedBestFriend를 value의 연결된 최고의 친구 값을 하위 직렬화합니다.
serialized.[[BestFriend]]에 serializedBestFriend를 설정합니다.
value의 연결된 이름 값을 serialized.[[Name]]으로 설정합니다.
deserializedBestFriend를 serialized.[[BestFriend]]를 하위 역직렬화합니다.
value의 연결된 최고의 친구 값을 deserializedBestFriend로 설정합니다.
JavaScript 사양에서 정의된 객체는 StructuredSerialize 추상 작업에 의해 직접 처리됩니다.
원래 이 사양은 한 realm에서 다른 realm으로 복제할 수 있는 "복제 가능한 객체" 개념을 정의했습니다. 그러나 더 복잡한 상황에서의 동작을 더 잘 명시하기 위해 모델이 업데이트되어 직렬화 및 역직렬화가 명시적으로 이루어졌습니다.
전송 가능한 객체는 agent 간에 전송되는 것을 지원합니다. 전송은 기본 데이터를 공유하면서 객체를 다시 생성한 다음 전송된 객체를 분리하는 것입니다. 이는 비용이 많이 드는 리소스의 소유권을 이전하는 데 유용합니다. 모든 객체가 전송 가능한 객체인 것은 아니며, 전송 가능한 객체의 모든 측면이 전송될 때 반드시 보존되는 것은 아닙니다.
전송은 되돌릴 수 없는 비멱등 연산입니다. 한 번 객체가 전송되면 다시 전송하거나 사용될 수 없습니다.
플랫폼 객체는 전송 가능한 객체일 수 있으며, 그 주 인터페이스가 [Transferable]
IDL 확장
속성으로 장식된 경우에만 가능합니다. 이러한 인터페이스는 또한 다음 알고리즘을 정의해야 합니다:
value의 데이터를 dataHolder의 필드로 전송하는 단계입니다. dataHolder에 보관된 결과 데이터는 realm에 독립적이어야 합니다.
이 단계는 전송이 불가능한 경우 예외를 발생시킬 수 있습니다.
dataHolder의 데이터를 수신하여 value를 적절하게 설정하는 단계입니다. value는 해당 플랫폼 객체 유형의 새로 생성된 인스턴스가 되며, 내부 데이터가 설정되지 않습니다. 이러한 설정은 이 단계의 작업입니다.
이 단계는 전송 수신이 불가능한 경우 예외를 발생시킬 수 있습니다.
개별 플랫폼 객체의 정의에 따라 이 단계에서 전송되는 데이터가 결정됩니다. 일반적으로 단계는 매우 대칭적입니다.
[Transferable]
확장 속성은 인수를 받아들이지
않아야 하며, 인터페이스에만 나타나야 합니다. 인터페이스에 한 번 이상 나타나서는 안 됩니다.
주어진 플랫폼 객체의 경우 전송 프로세스에서 고려되는 것은 객체의 주 인터페이스뿐입니다. 따라서 상속이 인터페이스 정의에 관여하는 경우 상속 체인의 각 [Transferable]
-주석 인터페이스는 독립적인 전송 단계 및 전송 수신 단계를 정의해야 하며,
상속된 인터페이스에서 올 수 있는 중요한 데이터를 고려해야 합니다.
플랫폼 객체가 전송 가능한 객체인 경우 내부 슬롯 [[Detached]]를 가집니다. 이를 통해 한 번 전송된 플랫폼 객체가 다시 전송되지 않도록 보장합니다.
JavaScript 사양에서 정의된 객체는 StructuredSerializeWithTransfer 추상 작업에 의해 직접 처리됩니다.
StructuredSerializeInternal 추상 연산은 JavaScript 값 value를 입력으로 받아 이를 realm에 독립적인 형태로 직렬화합니다. 여기서는 이를 레코드(Record)로 나타냅니다. 이 직렬화된 형식에는 나중에 다른 realm에서 새 JavaScript 값으로 역직렬화하는 데 필요한 모든 정보가 포함되어 있습니다.
이 과정은 예를 들어 직렬화할 수 없는 객체를 직렬화하려고 할 때 예외를 발생시킬 수 있습니다.
만약 memory가 제공되지 않았다면, memory를 빈 맵으로 설정합니다.
memory 맵의 목적은 객체를 두 번 직렬화하는 것을 방지하는 것입니다. 이는 사이클을 유지하고 그래프 내 중복 객체의 동일성을 유지하게 됩니다.
만약 memory[value]가 존재한다면 memory[value]를 반환합니다.
deep를 false로 설정합니다.
만약 Type(value)이 Undefined, Null, Boolean, Number, BigInt, 또는 String인 경우, { [[Type]]: "primitive", [[Value]]: value }를 반환합니다.
만약 Type(value)이
Symbol인 경우, "DataCloneError
" DOMException
을
발생시킵니다.
serialized를 초기화되지 않은 값으로 설정합니다.
만약 value가 [[BooleanData]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[NumberData]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[BigIntData]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "BigInt", [[BigIntData]]: value.[[BigIntData]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[StringData]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "String", [[StringData]]: value.[[StringData]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[DateValue]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[RegExpMatcher]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[ArrayBufferData]] 내부 슬롯을 가지고 있다면:
만약 IsSharedArrayBuffer(value)이 true라면:
만약 현재 설정 객체의
교차
출처 고립성 기능이 false라면, "DataCloneError
" DOMException
을
발생시킵니다.
이 확인은 직렬화 시에만 필요하며, 역직렬화 시에는 필요하지 않습니다. 이는 교차
출처 고립성 기능은 시간이 지나도 변하지 않으며, SharedArrayBuffer
는
에이전트
클러스터를 벗어날 수 없기 때문입니다.
만약 forStorage가 true라면, "DataCloneError
" DOMException
을
발생시킵니다.
만약 value가 [[ArrayBufferMaxByteLength]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 주변 에이전트의 에이전트 클러스터 }로 설정합니다.
그렇지 않다면, serialized를 { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 주변 에이전트의 에이전트 클러스터 }로 설정합니다.
그렇지 않다면:
만약 IsDetachedBuffer(value)이 true라면,
"DataCloneError
" DOMException
을
발생시킵니다.
size를 value.[[ArrayBufferByteLength]]로 설정합니다.
dataCopy를 ? CreateByteDataBlock(size)으로 설정합니다.
이는 할당 실패 시 RangeError
예외를 발생시킬 수 있습니다.
CopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size)를 수행합니다.
만약 value가 [[ArrayBufferMaxByteLength]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "ResizableArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size, [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]] }로 설정합니다.
그렇지 않다면, serialized를 { [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size }로 설정합니다.
그렇지 않다면, 만약 value가 [[ViewedArrayBuffer]] 내부 슬롯을 가지고 있다면:
만약 IsArrayBufferViewOutOfBounds(value)이
true라면,
"DataCloneError
" DOMException
을
발생시킵니다.
buffer를 value의 [[ViewedArrayBuffer]] 내부 슬롯 값으로 설정합니다.
bufferSerialized를 ? StructuredSerializeInternal(buffer, forStorage, memory)로 설정합니다.
Assert: bufferSerialized.[[Type]]이 "ArrayBuffer", "ResizableArrayBuffer", "SharedArrayBuffer", 또는 "GrowableSharedArrayBuffer"입니다.
만약 value가 [[DataView]] 내부 슬롯을 가지고 있다면, serialized를 { [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] }로 설정합니다.
그렇지 않다면:
Assert: value가 [[TypedArrayName]] 내부 슬롯을 가지고 있습니다.
serialized를 { [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] }로 설정합니다.
그렇지 않다면, 만약 value가 [[MapData]] 내부 슬롯을 가지고 있다면:
serialized를 { [[Type]]: "Map", [[MapData]]: 새 빈 리스트(List) }로 설정합니다.
deep을 true로 설정합니다.
그렇지 않다면, 만약 value가 [[SetData]] 내부 슬롯을 가지고 있다면:
serialized를 { [[Type]]: "Set", [[SetData]]: 새 빈 리스트(List) }로 설정합니다.
deep을 true로 설정합니다.
그렇지 않다면, value가 [[ErrorData]] 내부 슬롯을 가지고 있으며 value가 플랫폼 객체가 아니라면:
name을 ? Get(value, "name")으로 설정합니다.
만약 name이 "Error", "EvalError", "RangeError", "ReferenceError", "SyntaxError", "TypeError", 또는 "URIError" 중 하나가 아니라면, name을 "Error"로 설정합니다.
valueMessageDesc을 ? value.[[GetOwnProperty]]("message
")로
설정합니다.
만약 IsDataDescriptor(valueMessageDesc)이 false라면, message를 undefined로 설정하고, 그렇지 않다면 ? ToString(valueMessageDesc.[[Value]])으로 설정합니다.
serialized를 { [[Type]]: "Error", [[Name]]: name, [[Message]]: message }로 설정합니다.
사용자 에이전트는 serialized에 현재 명시되지 않은, 특히 stack
속성과 같은 흥미로운 동반 데이터를 직렬화된
표현으로 추가해야 합니다.
이 데이터에 대한 명세 작업이 진행 중인 Error Stacks 제안을 참조하십시오. [JSERRORSTACKS]
그렇지 않다면, value가 배열 이국 객체인 경우:
valueLenDescriptor을 ? OrdinaryGetOwnProperty(value,
"length
")으로 설정합니다.
valueLen을 valueLenDescriptor.[[Value]]로 설정합니다.
serialized를 { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 새 빈 리스트(List) }로 설정합니다.
deep을 true로 설정합니다.
그렇지 않다면, value가 플랫폼 객체이며 직렬화 가능한 객체라면:
만약 value가 [[Detached]] 내부 슬롯이 true인 경우, "DataCloneError
" DOMException
을
발생시킵니다.
typeString을 value의 기본 인터페이스의 식별자로 설정합니다.
serialized를 { [[Type]]: typeString }로 설정합니다.
deep을 true로 설정합니다.
그렇지 않다면, value가 플랫폼
객체라면,
"DataCloneError
" DOMException
을
발생시킵니다.
그렇지 않다면, IsCallable(value)이 true라면,
"DataCloneError
" DOMException
을
발생시킵니다.
그렇지 않다면, value가 [[Prototype]], [[Extensible]], 또는 [[PrivateElements]]를 제외한 내부 슬롯을 가지고 있다면,
"DataCloneError
"
DOMException
을
발생시킵니다.
예를 들어, [[PromiseState]] 또는 [[WeakMapData]] 내부 슬롯이 있습니다.
그렇지 않다면, value가 이국 객체이며 value가
%Object.prototype%와 관련된 어떤 realm의 본질적인 객체가 아니라면,
"DataCloneError
" DOMException
을
발생시킵니다.
예를 들어, 프록시 객체입니다.
그렇지 않다면:
serialized를 { [[Type]]: "Object", [[Properties]]: 새 빈 리스트(List) }로 설정합니다.
deep을 true로 설정합니다.
%Object.prototype%는 이 단계와 후속 단계를 통해 처리됩니다. 최종 결과는 이국 객체 특성이 무시되며, 역직렬화 후 결과는 빈 객체가 될 것입니다( 불변 프로토타입 이국 객체는 아님).
Set memory[value]을 serialized로 설정합니다.
만약 deep이 true라면:
만약 value가 [[MapData]] 내부 슬롯을 가지고 있다면:
copiedList를 새 빈 리스트(List)로 설정합니다.
각각에 대해 레코드(Record) { [[Key]], [[Value]] } entry가 value.[[MapData]]에 포함된 경우:
copiedEntry를 새 레코드(Record) { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }로 설정합니다.
만약 copiedEntry.[[Key]]가 특별한 값 empty가 아니라면, append copiedEntry를 copiedList에 추가합니다.
각각에 대해 레코드(Record) { [[Key]], [[Value]] } entry가 copiedList에 포함된 경우:
serializedKey를 ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory)으로 설정합니다.
serializedValue를 ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory)으로 설정합니다.
Append { [[Key]]: serializedKey, [[Value]]: serializedValue }를 serialized.[[MapData]]에 추가합니다.
그렇지 않다면, value가 [[SetData]] 내부 슬롯을 가지고 있다면:
copiedList를 새 빈 리스트(List)로 설정합니다.
각각에 대해 entry가 value.[[SetData]]에 포함된 경우:
만약 entry가 특별한 값 empty가 아니라면, append entry를 copiedList에 추가합니다.
각각에 대해 entry가 copiedList에 포함된 경우:
serializedEntry를 ? StructuredSerializeInternal(entry, forStorage, memory)으로 설정합니다.
append serializedEntry를 serialized.[[SetData]]에 추가합니다.
그렇지 않다면, value가 플랫폼 객체이며 직렬화 가능한 객체라면, 직렬화 단계를 수행하여 value의 기본 인터페이스를 주어진 value, serialized, 및 forStorage에 대해 직렬화합니다.
직렬화 단계는 하위 직렬화를 수행해야 할 수 있습니다. 이는 값을 입력으로 받아, StructuredSerializeInternal(subValue, forStorage, memory)을 반환하는 연산입니다. (즉, 하위 직렬화는 이 호출 내에서 일관성을 유지하기 위해 StructuredSerializeInternal의 특수화입니다.)
그렇지 않다면, ! EnumerableOwnProperties(value, key) 내의 각각의 key에 대해:
! HasOwnProperty(value, key)이 true라면:
inputValue를 ? value.[[Get]](key, value)으로 설정합니다.
outputValue를 ? StructuredSerializeInternal(inputValue, forStorage, memory)으로 설정합니다.
append { [[Key]]: key, [[Value]]: outputValue }를 serialized.[[Properties]]에 추가합니다.
serialized를 반환합니다.
StructuredSerializeInternal에 의해 생성된 레코드(Record)는 다른 레코드로의 "포인터"를 포함하여 순환 참조를 생성할 수 있다는 점을 인식하는 것이 중요합니다. 예를 들어, 다음 JavaScript 객체를 StructuredSerializeInternal에 전달하면:
const o = {};
o. myself = o;
다음과 같은 결과가 생성됩니다:
{ [[Type]]: "Object", [[Properties]]: « { [[Key]]: "myself", [[Value]]: <a pointer to this whole structure> } » }
? StructuredSerializeInternal(value, false)를 반환합니다.
? StructuredSerializeInternal(value, true)를 반환합니다.
StructuredDeserialize 추상 연산은 입력으로 레코드(Record) serialized를 사용하며, 이는 이전에 StructuredSerialize 또는 StructuredSerializeForStorage에 의해 생성되었으며, 이를 사용하여 targetRealm에 새로운 JavaScript 값을 역직렬화합니다.
이 과정은 예를 들어 새로운 객체(특히 ArrayBuffer
객체)의 메모리 할당을 시도할 때 예외를 던질 수 있습니다.
만약 memory가 제공되지 않았다면, memory를 빈 맵으로 설정합니다.
memory 맵의 목적은 객체를 두 번 역직렬화하지 않도록 하는 것입니다. 이는 그래프에서 중복 객체의 순환과 아이덴티티를 유지하게 됩니다.
만약 memory[serialized]가 존재한다면, memory[serialized]을 반환합니다.
deep을 false로 설정합니다.
value를 초기화되지 않은 값으로 설정합니다.
만약 serialized.[[Type]]이 "primitive"라면, value를 serialized.[[Value]]로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Boolean"인 경우, value를 targetRealm에서 [[BooleanData]] 내부 슬롯 값이 serialized.[[BooleanData]]인 새로운 Boolean 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Number"인 경우, value를 targetRealm에서 [[NumberData]] 내부 슬롯 값이 serialized.[[NumberData]]인 새로운 Number 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "BigInt"인 경우, value를 targetRealm에서 [[BigIntData]] 내부 슬롯 값이 serialized.[[BigIntData]]인 새로운 BigInt 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "String"인 경우, value를 targetRealm에서 [[StringData]] 내부 슬롯 값이 serialized.[[StringData]]인 새로운 String 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Date"인 경우, value를 targetRealm에서 [[DateValue]] 내부 슬롯 값이 serialized.[[DateValue]]인 새로운 Date 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "RegExp"인 경우, value를 targetRealm에서 [[RegExpMatcher]] 내부 슬롯 값이 serialized.[[RegExpMatcher]]이며, [[OriginalSource]] 내부 슬롯 값이 serialized.[[OriginalSource]]이고, [[OriginalFlags]] 내부 슬롯 값이 serialized.[[OriginalFlags]]인 새로운 RegExp 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "SharedArrayBuffer"인 경우:
만약 targetRealm의 대응하는 에이전트
클러스터가
serialized.[[AgentCluster]]가 아니라면,
"DataCloneError
" DOMException
을
던집니다.
그렇지 않으면, value를 targetRealm에서 [[ArrayBufferData]] 내부 슬롯 값이 serialized.[[ArrayBufferData]]이며, [[ArrayBufferByteLength]] 내부 슬롯 값이 serialized.[[ArrayBufferByteLength]]인 새로운 SharedArrayBuffer 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "GrowableSharedArrayBuffer"인 경우:
만약 targetRealm의 대응하는 에이전트
클러스터가
serialized.[[AgentCluster]]가 아니라면,
"DataCloneError
" DOMException
을
던집니다.
그렇지 않으면, value를 targetRealm에서 [[ArrayBufferData]] 내부 슬롯 값이 serialized.[[ArrayBufferData]]이며, [[ArrayBufferByteLengthData]] 내부 슬롯 값이 serialized.[[ArrayBufferByteLengthData]]이고, [[ArrayBufferMaxByteLength]] 내부 슬롯 값이 serialized.[[ArrayBufferMaxByteLength]]인 새로운 SharedArrayBuffer 객체로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "ArrayBuffer"인 경우, value를 targetRealm에서 [[ArrayBufferData]] 내부 슬롯 값이 serialized.[[ArrayBufferData]]이며, [[ArrayBufferByteLength]] 내부 슬롯 값이 serialized.[[ArrayBufferByteLength]]인 새로운 ArrayBuffer 객체로 설정합니다.
이 단계에서 예외가 발생하면, 이를 catch한 다음, "DataCloneError
" DOMException
을
던집니다.
이 단계에서는 메모리가 부족하여 해당 ArrayBuffer 객체를 생성할 수 없는 경우 예외가 발생할 수 있습니다.
그렇지 않으면, serialized.[[Type]]이 "ResizableArrayBuffer"인 경우, value를 targetRealm에서 [[ArrayBufferData]] 내부 슬롯 값이 serialized.[[ArrayBufferData]]이며, [[ArrayBufferByteLength]] 내부 슬롯 값이 serialized.[[ArrayBufferByteLength]]이고, [[ArrayBufferMaxByteLength]] 내부 슬롯 값이 serialized.[[ArrayBufferMaxByteLength]]인 새로운 ArrayBuffer 객체로 설정합니다.
이 단계에서 예외가 발생하면, 이를 catch한 다음, "DataCloneError
" DOMException
을
던집니다.
이 단계에서는 메모리가 부족하여 해당 ArrayBuffer 객체를 생성할 수 없는 경우 예외가 발생할 수 있습니다.
그렇지 않으면, serialized.[[Type]]이 "ArrayBufferView"인 경우:
deserializedArrayBuffer를 ? StructuredDeserialize(serialized.[[ArrayBufferSerialized]], targetRealm, memory)로 설정합니다.
만약 serialized.[[Constructor]]가 "DataView"라면, value를 targetRealm에서 [[ViewedArrayBuffer]] 내부 슬롯 값이 deserializedArrayBuffer이고, [[ByteLength]] 내부 슬롯 값이 serialized.[[ByteLength]]이며, [[ByteOffset]] 내부 슬롯 값이 serialized.[[ByteOffset]]인 새로운 DataView 객체로 설정합니다.
그렇지 않으면, value를 targetRealm에서 생성자 serialized.[[Constructor]]을 사용하여 생성된 새로운 타입 배열 객체로 설정합니다. 이 객체의 [[ViewedArrayBuffer]] 내부 슬롯 값은 deserializedArrayBuffer, [[TypedArrayName]] 내부 슬롯 값은 serialized.[[Constructor]], [[ByteLength]] 내부 슬롯 값은 serialized.[[ByteLength]], [[ByteOffset]] 내부 슬롯 값은 serialized.[[ByteOffset]], 그리고 [[ArrayLength]] 내부 슬롯 값은 serialized.[[ArrayLength]]입니다.
그렇지 않으면, serialized.[[Type]]이 "Map"인 경우:
value를 targetRealm에서 [[MapData]] 내부 슬롯 값이 빈 리스트인 새로운 Map 객체로 설정합니다.
deep을 true로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Set"인 경우:
value를 targetRealm에서 [[SetData]] 내부 슬롯 값이 빈 리스트인 새로운 Set 객체로 설정합니다.
deep을 true로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Array"인 경우:
outputProto를 targetRealm.[[Intrinsics]].[[%Array.prototype%]]로 설정합니다.
value를 ! ArrayCreate(serialized.[[Length]], outputProto)로 설정합니다.
deep을 true로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Object"인 경우:
value를 targetRealm에서 새로운 객체로 설정합니다.
deep을 true로 설정합니다.
그렇지 않으면, serialized.[[Type]]이 "Error"인 경우:
prototype을 %Error.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "EvalError"라면, prototype을 %EvalError.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "RangeError"라면, prototype을 %RangeError.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "ReferenceError"라면, prototype을 %ReferenceError.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "SyntaxError"라면, prototype을 %SyntaxError.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "TypeError"라면, prototype을 %TypeError.prototype%로 설정합니다.
만약 serialized.[[Name]]이 "URIError"라면, prototype을 %URIError.prototype%로 설정합니다.
message를 serialized.[[Message]]로 설정합니다.
value를 OrdinaryObjectCreate(prototype, « [[ErrorData]] »)로 설정합니다.
messageDesc를 PropertyDescriptor{ [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true }로 설정합니다.
만약 message가 undefined가 아니라면, ! OrdinaryDefineOwnProperty(value,
"message
", messageDesc)을 수행합니다.
serialized에 연결된 중요한 동반 데이터는 역직렬화되어 value에 연결되어야 합니다.
그렇지 않으면:
interfaceName을 serialized.[[Type]]으로 설정합니다.
만약 interfaceName으로 식별된 인터페이스가 targetRealm에서 노출되지 않았다면,
"DataCloneError
" DOMException
을
던집니다.
value를 interfaceName으로 식별된 인터페이스의 새로운 인스턴스로 설정합니다. 이 인스턴스는 targetRealm에서 생성됩니다.
deep을 true로 설정합니다.
Set memory[serialized]를 value로 설정합니다.
만약 deep이 true라면:
만약 serialized.[[Type]]이 "Map"이라면:
각각의 레코드(Record) { [[Key]], [[Value]] } entry에 대해, serialized.[[MapData]]를 반복합니다:
deserializedKey를 ? StructuredDeserialize(entry.[[Key]], targetRealm, memory)로 설정합니다.
deserializedValue를 ? StructuredDeserialize(entry.[[Value]], targetRealm, memory)로 설정합니다.
Append { [[Key]]: deserializedKey, [[Value]]: deserializedValue }를 value.[[MapData]]에 추가합니다.
그렇지 않으면, serialized.[[Type]]이 "Set"인 경우:
각각의 entry에 대해, serialized.[[SetData]]를 반복합니다:
deserializedEntry를 ? StructuredDeserialize(entry, targetRealm, memory)로 설정합니다.
Append deserializedEntry를 value.[[SetData]]에 추가합니다.
그렇지 않으면, serialized.[[Type]]이 "Array" 또는 "Object"인 경우:
각각의 레코드(Record) { [[Key]], [[Value]] } entry에 대해, serialized.[[Properties]]를 반복합니다:
deserializedValue를 ? StructuredDeserialize(entry.[[Value]], targetRealm, memory)로 설정합니다.
result를 ! CreateDataProperty(value, entry.[[Key]], deserializedValue)로 설정합니다.
Assert: result가 true임을 확인합니다.
그렇지 않으면:
적절한 역직렬화 단계를 수행합니다. 이 인터페이스는 serialized.[[Type]]으로 식별되며, serialized, value 및 targetRealm을 입력으로 받습니다.
역직렬화 단계는 하위 역직렬화를 수행해야 할 수 있습니다. 이는 이전에 직렬화된 레코드(Record) subSerialized을 입력으로 받아 StructuredDeserialize(subSerialized, targetRealm, memory)를 반환합니다. (즉, 하위 역직렬화는 이 호출 내에서 일관성을 유지하기 위해 StructuredDeserialize의 특수화된 버전입니다.)
value를 반환합니다.
memory를 빈 맵(map)으로 설정합니다.
StructuredSerializeInternal에 의해 사용되는 일반적인 방식 외에도, 이 알고리즘에서는 memory를 사용하여 transferList의 항목을 무시하게 하고, 직접 처리할 수 있도록 합니다.
각각의 transferable에 대해 transferList를 반복합니다:
만약 transferable이 [[ArrayBufferData]] 내부 슬롯이나 [[Detached]] 내부 슬롯을 가지고 있지 않다면, "DataCloneError
" DOMException
을
던집니다.
만약 transferable이 [[ArrayBufferData]] 내부 슬롯을 가지고 있고 IsSharedArrayBuffer(transferable)가
true라면, "DataCloneError
" DOMException
을
던집니다.
만약 memory[transferable]가 존재한다면, "DataCloneError
" DOMException
을
던집니다.
Set memory[transferable]을 { [[Type]]: 초기화되지 않은 값 }으로 설정합니다.
transferable은 아직 전송되지 않았습니다. 왜냐하면 전송에는 부작용이 있으며 StructuredSerializeInternal이 먼저 예외를 던질 수 있어야 하기 때문입니다.
serialized를 ? StructuredSerializeInternal(value, false, memory)로 설정합니다.
transferDataHolders를 빈 리스트(List)로 설정합니다.
각각의 transferable에 대해 transferList를 반복합니다:
만약 transferable이 [[ArrayBufferData]] 내부 슬롯을 가지고 있고, IsDetachedBuffer(transferable)가 true라면,
"DataCloneError
" DOMException
을
던집니다.
만약 transferable이 [[Detached]] 내부 슬롯을 가지고 있고,
transferable.[[Detached]]가 true라면, "DataCloneError
" DOMException
을
던집니다.
dataHolder를 memory[transferable]로 설정합니다.
만약 transferable이 [[ArrayBufferData]] 내부 슬롯을 가지고 있다면:
만약 transferable이 [[ArrayBufferMaxByteLength]] 내부 슬롯을 가지고 있다면:
dataHolder.[[Type]]을 "ResizableArrayBuffer"로 설정합니다.
dataHolder.[[ArrayBufferData]]를 transferable.[[ArrayBufferData]]로 설정합니다.
dataHolder.[[ArrayBufferByteLength]]를 transferable.[[ArrayBufferByteLength]]로 설정합니다.
dataHolder.[[ArrayBufferMaxByteLength]]를 transferable.[[ArrayBufferMaxByteLength]]로 설정합니다.
그렇지 않다면:
dataHolder.[[Type]]을 "ArrayBuffer"로 설정합니다.
dataHolder.[[ArrayBufferData]]를 transferable.[[ArrayBufferData]]로 설정합니다.
dataHolder.[[ArrayBufferByteLength]]를 transferable.[[ArrayBufferByteLength]]로 설정합니다.
? DetachArrayBuffer(transferable)을 수행합니다.
명세서는 [[ArrayBufferDetachKey]] 내부 슬롯을 사용하여 ArrayBuffer
가
분리되지 않도록 할 수 있습니다. 예를 들어, WebAssembly JavaScript Interface에서 사용됩니다. [WASMJS]
그렇지 않다면:
Assert: transferable이 플랫폼 객체(platform object)이며 전송 가능한 객체(transferable object)라는 것을 확인합니다.
interfaceName을 transferable의 주 인터페이스(primary interface)의 식별자로 설정합니다.
dataHolder.[[Type]]을 interfaceName으로 설정합니다.
식별된 인터페이스에 대해 적절한 전송 단계(transfer steps)를 수행합니다.
transferable.[[Detached]]를 true로 설정합니다.
Append dataHolder를 transferDataHolders에 추가합니다.
{ [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }을 반환합니다.
memory를 빈 맵(map)으로 설정합니다.
StructuredSerializeWithTransfer와 유사하게, StructuredDeserialize에서 일반적으로 사용되는 방식 외에도, 이 알고리즘에서 memory를 사용하여 serializeWithTransferResult.[[TransferDataHolders]]의 항목을 무시하게 하고, 직접 처리할 수 있도록 합니다.
transferredValues를 새로운 빈 리스트(List)로 설정합니다.
각각의 transferDataHolder에 대해 serializeWithTransferResult.[[TransferDataHolders]]를 반복합니다:
value를 초기화되지 않은 값으로 설정합니다.
만약 transferDataHolder.[[Type]]이 "ArrayBuffer"라면, value를 targetRealm의 새로운 ArrayBuffer 객체로 설정하고, 이 객체의 [[ArrayBufferData]] 내부 슬롯 값은 transferDataHolder.[[ArrayBufferData]]로, [[ArrayBufferByteLength]] 내부 슬롯 값은 transferDataHolder.[[ArrayBufferByteLength]]로 설정합니다.
[[ArrayBufferData]]에 의해 점유된 원래 메모리가 역직렬화 동안 접근 가능하다면, 이 단계에서 예외가 발생할 가능성은 낮습니다. 이는 새 메모리를 할당할 필요가 없기 때문이며, 대신 [[ArrayBufferData]]에 의해 점유된 메모리가 새 ArrayBuffer로 전송됩니다. 예를 들어, 소스와 대상 realm이 동일한 프로세스 내에 있을 때 이럴 수 있습니다.
그렇지 않고, 만약 transferDataHolder.[[Type]]이 "ResizableArrayBuffer"라면, value를 targetRealm의 새로운 ArrayBuffer 객체로 설정하고, 이 객체의 [[ArrayBufferData]] 내부 슬롯 값은 transferDataHolder.[[ArrayBufferData]], [[ArrayBufferByteLength]] 내부 슬롯 값은 transferDataHolder.[[ArrayBufferByteLength]], 그리고 [[ArrayBufferMaxByteLength]] 내부 슬롯 값은 transferDataHolder.[[ArrayBufferMaxByteLength]]로 설정합니다.
이전 단계와 같은 이유로, 이 단계에서도 예외가 발생할 가능성은 낮습니다.
그렇지 않다면:
interfaceName을 transferDataHolder.[[Type]]으로 설정합니다.
만약 interfaceName으로 식별된 인터페이스가 targetRealm에서 노출되지 않은 경우, "DataCloneError
" DOMException
을
던집니다.
value를 interfaceName으로 식별된 인터페이스의 targetRealm에 생성된 새로운 인스턴스로 설정합니다.
interfaceName으로 식별된 인터페이스에 대해 적절한 전송 수신 단계를 transferDataHolder와 value에 대해 수행합니다.
Set memory[transferDataHolder]를 value로 설정합니다.
Append value를 transferredValues에 추가합니다.
deserialized를 ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory)로 설정합니다.
{ [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues }을 반환합니다.
다른 명세에서 여기에 정의된 추상 연산을 사용할 수 있습니다. 다음은 각 추상 연산이 일반적으로 언제 유용한지, 예제와 함께 제공된 가이드입니다.
전송 목록과 함께 값을 다른 realm으로 복제하지만, 대상 realm이 미리 알려지지 않은 경우입니다. 이 경우 직렬화 단계는 즉시 수행할 수 있으며, 역직렬화 단계는 대상 realm이 알려질 때까지 지연될 수 있습니다.
messagePort.postMessage()
는
이러한 추상 연산 쌍을 사용하며, 대상 realm은 MessagePort
가
전송된 후에야 알 수 있습니다.
주어진 값의 realm 독립적인 스냅샷을 생성하여 무기한 저장할 수 있으며, 나중에 JavaScript 값으로 다시 구현할 수 있고, 이를 여러 번 수행할 수 있습니다.
StructuredSerializeForStorage는
직렬화가 realms 간에 전달되는 대신 영구적으로 저장될 것으로 예상되는 상황에 사용할 수 있습니다. 공유 메모리를 저장하는 것은 의미가 없으므로 SharedArrayBuffer
객체를 직렬화하려고 할 때 예외를 발생시킵니다. 마찬가지로, forStorage 인수가 true일 때 사용자 정의 직렬화 단계를 가진 플랫폼
객체가 주어지면 예외를 발생시키거나 다른 동작을 할 수 있습니다.
history.pushState()
와
history.replaceState()
는
작성자 제공 상태 객체에 대해 StructuredSerializeForStorage를
사용하여 직렬화된 상태로 저장하고,
적절한 세션 기록 항목에
저장합니다. 그런 다음 StructuredDeserialize를
사용하여 history.state
속성이 원래 제공된 상태 객체의 복제본을 반환할 수 있도록 합니다.
broadcastChannel.postMessage()
는
입력에 대해 StructuredSerialize를
사용한 다음, 결과에 대해 StructuredDeserialize를
여러 번 사용하여 각 대상에 브로드캐스트될 새 복제본을 생성합니다. 여러 대상이 있는 상황에서는 전송이 의미가 없습니다.
JavaScript 값을 파일 시스템에 영구 저장하는 모든 API는 입력에 대해 StructuredSerializeForStorage를 사용하고, 출력에 대해 StructuredDeserialize를 사용합니다.
일반적으로 호출 위치는 JavaScript 값 대신 Web IDL 값을 전달할 수 있습니다. 이는 이러한 알고리즘을 호출하기 전에 JavaScript 값으로 암묵적인 변환을 수행하는 것으로 이해해야 합니다.
작성자 코드가 사용자 에이전트 메서드에 동기적으로 호출되는 결과로 호출되지 않는 호출 위치는 임의의 객체에 대해 StructuredSerialize, StructuredSerializeForStorage, 또는 StructuredSerializeWithTransfer 추상 연산을 호출하기 전에 스크립트를 실행할 준비를 하고 콜백을 실행할 준비를 제대로 해야 합니다. 이는 직렬화 프로세스가 최종 깊은 직렬화 단계의 일부로 작성자 정의 접근자를 호출할 수 있으며, 이러한 접근자는 entry 및 incumbent 개념이 적절히 설정되는 작업에 의존할 수 있기 때문에 필요합니다.
window.postMessage()
는
인수에 대해 StructuredSerializeWithTransfer를
수행하지만, 알고리즘의 동기화된 부분 내에서 즉시 수행하여 스크립트를 실행할 준비를 하고 콜백을 실행할 준비를 할 필요 없이 이 알고리즘을 사용할 수 있습니다.
대조적으로, 작성자 제공 객체를 주기적으로 직렬화하기 위해 StructuredSerialize를 사용한 가상 API가 작업(task)에서 직접 이벤트 루프에서 수행되었다면, 적절한 준비를 수행해야 합니다. 현재로서는 플랫폼에 이러한 API가 없으며, 일반적으로 직렬화를 작성자 코드의 동기적 결과로 미리 수행하는 것이 더 간단합니다.
result = self.structuredClone(value[, { transfer }])
입력 값을 받아 구조화된 클론 알고리즘을 수행하여 깊은 복사를 반환합니다. 전송 가능한 객체가 전송
배열에 나열된 경우, 단순히 복제되는 것이 아니라 전송되어 입력 값에서 더 이상 사용할 수 없게 됩니다.
입력 값의 일부가 직렬화 가능하지 않은 경우
"DataCloneError
" DOMException
을
발생시킵니다.
모든 현재 엔진에서 지원합니다.
structuredClone(value, options)
메서드의 단계는
다음과 같습니다:
serialized를 ? StructuredSerializeWithTransfer(value,
options["transfer
"])로
설정합니다.
deserializeRecord를 ? StructuredDeserializeWithTransfer(serialized, this의 관련 realm)로 설정합니다.
deserializeRecord.[[Deserialized]]를 반환합니다.
HTML UA에서의 모든 XML 및 HTML 문서는 Document
객체로 표현됩니다.
[DOM]
Document
객체의 URL은
DOM에서 정의됩니다. 이는 Document
객체가 생성될 때 초기
설정되지만,
Document
객체의 수명 동안 변경될 수 있습니다. 예를 들어, 사용자가 페이지에서
네비게이트하여 프래그먼트로 이동할 때나,
pushState()
메서드가 새로운 URL로 호출될 때 변경됩니다. [DOM]
인터랙티브 사용자 에이전트는 일반적으로 사용자 인터페이스에서 Document
객체의
URL을 노출합니다.
이는 사용자가 사이트가 다른 사이트로 가장하려고 하는지 여부를 확인할 수 있는 주요 메커니즘입니다.
Document
객체의 원본(origin)은 DOM에서 정의되어
있습니다. 이는 Document
객체가 생성될 때 초기 설정되며, document.domain
을 설정할 때만 Document
의 수명 동안 변경될 수 있습니다. Document
의 원본(origin)은 URL의 원본(origin)과 다를 수 있습니다. 예를 들어, 하위 내비게이블이 생성될 때, 해당 활성
문서의 원본(origin)은 부모의
활성 문서의 원본(origin)을 상속받습니다. 비록 해당 활성 문서의 URL이 about:blank
일지라도 그렇습니다. [DOM]
Document
가 스크립트에 의해
createDocument()
또는
createHTMLDocument()
메서드를 사용하여 생성될 때,
Document
는 즉시 로드 후 작업 준비가 됩니다.
문서의 리퍼러는 URL을 나타내는 문자열로서,
Document
가 생성될 때 설정될 수 있습니다. 명시적으로 설정되지 않은 경우, 그 값은 빈
문자열입니다.
Document
객체모든 최신 엔진에서 지원됩니다.
DOM은 Document
인터페이스를 정의하며, 이 사양은 이를 상당히 확장합니다.
enum DocumentReadyState { "loading" , "interactive" , "complete" };
enum DocumentVisibilityState { "visible" , "hidden" };
typedef (HTMLScriptElement or SVGScriptElement ) HTMLOrSVGScriptElement ;
[LegacyOverrideBuiltIns ]
partial interface Document {
static Document
parseHTMLUnsafe ((TrustedHTML
or DOMString ) html );
// resource metadata management
[PutForwards =href , LegacyUnforgeable ] readonly attribute Location ? location ;
attribute USVString domain ;
readonly attribute USVString referrer ;
attribute USVString cookie ;
readonly attribute DOMString lastModified ;
readonly attribute DocumentReadyState readyState ;
// DOM tree accessors
getter object (DOMString name );
[CEReactions ] attribute DOMString title ;
[CEReactions ] attribute DOMString dir ;
[CEReactions ] attribute HTMLElement ? body ;
readonly attribute HTMLHeadElement ? head ;
[SameObject ] readonly attribute HTMLCollection images ;
[SameObject ] readonly attribute HTMLCollection embeds ;
[SameObject ] readonly attribute HTMLCollection plugins ;
[SameObject ] readonly attribute HTMLCollection links ;
[SameObject ] readonly attribute HTMLCollection forms ;
[SameObject ] readonly attribute HTMLCollection scripts ;
NodeList getElementsByName (DOMString elementName );
readonly attribute HTMLOrSVGScriptElement ? currentScript ; // classic scripts in a document tree only
// dynamic markup insertion
[CEReactions ] Document open (optional DOMString unused1 , optional DOMString unused2 ); // both arguments are ignored
WindowProxy ? open (USVString url , DOMString name , DOMString features );
[CEReactions ] undefined close ();
[CEReactions ] undefined write ((TrustedHTML
or DOMString )... text );
[CEReactions ] undefined writeln ((TrustedHTML
or DOMString )... text );
// user interaction
readonly attribute WindowProxy ? defaultView ;
boolean hasFocus ();
[CEReactions ] attribute DOMString designMode ;
[CEReactions ] boolean execCommand (DOMString commandId , optional boolean showUI = false , optional DOMString value = "");
boolean queryCommandEnabled (DOMString commandId );
boolean queryCommandIndeterm (DOMString commandId );
boolean queryCommandState (DOMString commandId );
boolean queryCommandSupported (DOMString commandId );
DOMString queryCommandValue (DOMString commandId );
readonly attribute boolean hidden ;
readonly attribute DocumentVisibilityState visibilityState ;
// special event handler IDL attributes that only apply to Document objects
[LegacyLenientThis ] attribute EventHandler onreadystatechange ;
attribute EventHandler onvisibilitychange ;
// also has obsolete members
};
Document includes GlobalEventHandlers ;
각 Document
에는 정책 컨테이너(정책 컨테이너)가 있으며, 초기 상태는 새로운 정책 컨테이너로, Document
에 적용되는 정책들을 포함합니다.
각 Document
에는 권한 정책이 있으며, 이는 초기에는 비어 있는 권한 정책입니다.
각 Document
에는 모듈 맵이 있으며, 이는 초기에는 비어 있는 모듈 맵입니다.
각 Document
에는 출처 열기 정책이 있으며, 초기에는 새로운 출처 열기 정책인 열기 정책입니다.
각 Document
에는 초기 about:blank
여부라는 불리언 값이 있으며, 초기 값은 false입니다.
각 Document
에는 WebDriver BiDi용 로딩 중 탐색 ID가 있으며, 이는 초기에는 null인 탐색 ID 또는 null입니다.
이 이름이 나타내듯, 이는 WebDriver BiDi 사양과 인터페이스하기 위해 사용되며, 이 사양은 Document
의 생명 주기 초기에 발생하는 특정 사건에 대해 원래 탐색을
생성한 탐색 ID와 연관된 정보를 필요로 합니다. WebDriver
BiDi가 로딩 프로세스가 완료되었다고 간주하면 이 값은 다시 null로 설정됩니다. [BIDI]
각 Document
에는 about 기본 URL이 있으며, 이는 초기에는 null인 URL 또는 null입니다.
이 값은 "about:
" 스킴이 있는 Document
에만 채워집니다.
각 Document
에는 bfcache 차단 세부 정보가 있으며, 이는 초기에는 비어 있는 순서가 지정된
집합인 복원되지 않은 이유의 세부 정보입니다.
DocumentOrShadowRoot
인터페이스DOM은 이 사양이 확장하는 DocumentOrShadowRoot
믹스인을 정의합니다.
partial interface mixin DocumentOrShadowRoot {
readonly attribute Element ? activeElement ;
};
document.referrer
모든 최신 엔진에서 지원됨.
사용자가 이 문서로 이동한 출발지 문서의 URL을 반환합니다. 다만, 차단되었거나 그런 문서가 없었던 경우에는 빈 문자열을 반환합니다.
noreferrer
링크 유형을 사용하여 참조자를 차단할 수 있습니다.
referrer
속성은 문서의 참조자를 반환해야
합니다.
document.cookie [ = value ]
document
에 적용되는 HTTP 쿠키를
반환합니다.
쿠키가 없거나 이 리소스에 쿠키를 적용할 수 없는 경우 빈 문자열이 반환됩니다.
새 쿠키를 추가하기 위해 설정할 수 있습니다.
내용이 iframe
에
sandbox
속성을 사용하여 불투명한 출처로 샌드박스화된 경우 "SecurityError
" DOMException
이
발생합니다.
모든 최신 엔진에서 지원됨.
cookie
속성은 문서의 URL로
식별된 리소스의 쿠키를 나타냅니다.
다음 조건 중 하나에 해당하는 document
객체는 쿠키 비호환 문서
객체입니다:
가져올 때, 문서가 쿠키 비호환
문서
객체이면 사용자 에이전트는 빈
문자열을 반환해야 합니다. 그렇지 않은 경우 문서의 기원이 불투명한 기원이면 사용자 에이전트는 "SecurityError
" DOMException
을
발생시켜야 합니다. 그렇지 않으면 사용자 에이전트는 문서의 URL에
대한 "비-HTTP" API로 쿠키 문자열을 반환해야
하며, BOM
없이 UTF-8로 디코딩하여 반환해야 합니다. [COOKIES]
설정할 때, 문서가 쿠키 비호환 문서
객체이면 사용자 에이전트는
아무것도 하지 않아야 합니다. 그렇지 않은 경우 문서의 기원이 불투명한 기원이면 사용자 에이전트는
"SecurityError
" DOMException
을
발생시켜야 합니다. 그렇지 않으면 사용자 에이전트는 새 값을 포함하여 문서의 URL에
대해 "비-HTTP" API로 UTF-8로 인코딩된 set-cookie 문자열을
수신할 때처럼 작동해야 합니다. [COOKIES] [ENCODING]
cookie
속성은 프레임 간
접근 가능하므로, 쿠키에 대한 경로 제한은 사이트의 어떤 부분에 쿠키를 전송할지 관리하기 위한 도구일 뿐, 보안 기능은 아닙니다.
cookie
속성의
getter와 setter는 공유 상태에 동기적으로 접근합니다. 잠금 메커니즘이 없기 때문에, 멀티프로세스 사용자 에이전트의 다른 탐색 맥락은 스크립트가 실행되는 동안 쿠키를 수정할 수 있습니다. 예를
들어, 사이트가 쿠키를 읽고 값을 증가시킨 다음 다시 기록하여 쿠키의 새 값을 세션의 고유 식별자로 사용하는 경우, 동일한 "고유" 식별자를 두 개의 다른 브라우저 창에서 동시에 두 번 사용할 수
있으며, 이는 잠재적으로 치명적인 영향을 미칠 수 있습니다.
document.lastModified
모든 최신 엔진에서 지원됨.
서버에서 보고한 대로 사용자의 로컬 시간대로 "MM/DD/YYYY hh:mm:ss
" 형식으로 문서의 마지막 수정 날짜를 반환합니다.
마지막 수정 날짜를 알 수 없는 경우 현재 시간이 대신 반환됩니다.
lastModified
속성은 사용자의 로컬 시간대로 document
소스 파일의
마지막 수정
날짜와 시간을 반환해야 합니다. 반환 형식은 다음과 같습니다:
날짜의 월 구성 요소.
U+002F SOLIDUS 문자 (/).
날짜의 일 구성 요소.
U+002F SOLIDUS 문자 (/).
날짜의 년 구성 요소.
U+0020 SPACE 문자.
시간의 시 구성 요소.
U+003A COLON 문자 (:).
시간의 분 구성 요소.
U+003A COLON 문자 (:).
시간의 초 구성 요소.
위의 모든 숫자 구성 요소는 년도를 제외하고는 필요할 경우 0으로 패딩하여 두 자리의 ASCII 숫자로 주어져야 합니다. 년도는 필요할 경우 0으로 패딩된 네 자리 이상의 ASCII 숫자로 주어져야 합니다.
document
소스 파일의 마지막 수정 날짜와 시간은 사용된
네트워킹
프로토콜의 관련 기능에서 파생되어야 합니다. 예를 들어, 문서의 HTTP `Last-Modified
`
헤더의 값 또는 로컬 파일의 파일 시스템 메타데이터에서 파생될 수 있습니다. 마지막 수정 날짜와 시간을 알 수 없는 경우 이 속성은 위의 형식으로 현재 날짜와 시간을 반환해야 합니다.
document.readyState
document
가 로딩 중일 때는
"loading
"을 반환하고, 파싱이 완료되었지만 하위 리소스를 여전히 로딩 중일 때는 "interactive
"을 반환하며, 로딩이 완료되면
"complete
"을 반환합니다.
이 값이 변경되면 readystatechange
이벤트가 document
객체에서
발생합니다.
DOMContentLoaded
이벤트는 "interactive
"로 전환된 후, "complete
"로 전환되기 전에 모든 async
스크립트
요소를 제외한 모든 하위 리소스가 로드된 시점에 발생합니다.
모든 최신 엔진에서 지원됨.
각 document
는 초기값이
"complete
"인 현재 문서 준비 상태를 가집니다.
Document
객체는 Document 객체 생성 및 초기화 알고리즘에 의해 생성된
경우, document.readyState
값이 스크립트에 의해 관찰되기 전에 즉시 "loading
"으로 재설정됩니다. 이 기본 동작은 초기 about:blank
Document
또는 탐색 컨텍스트가 없는 Document
의 경우에도 적용됩니다.
readyState
getter는 현재
문서 준비 상태를 반환해야 합니다.
document
의 현재 문서 준비 상태 업데이트를 readinessValue으로 수행하려면:
만약 document의 현재 문서 준비 상태가 readinessValue과 같다면 반환합니다.
document의 현재 문서 준비 상태를 readinessValue으로 설정합니다.
document가 HTML 파서와 연결되어 있다면:
now를 현재 고해상도 시간으로 설정하며, document의 관련 글로벌 객체를 기준으로 합니다.
만약 readinessValue이 "complete
"이고 document의 로드 타이밍 정보의
DOM 완료
시간이 0이라면, document의 로드 타이밍 정보의 DOM 완료
시간을 now로 설정합니다.
그렇지 않고 readinessValue이 "interactive
"이고 document의 로드 타이밍
정보의 DOM
상호작용 시간이 0이라면, document의 로드 타이밍 정보의 DOM
상호작용 시간을 now로 설정합니다.
이벤트를
document에 대해 readystatechange
이름으로 발생시킵니다.
document
는 HTML 파서 또는 XML 파서와 연결되어 있으며, 아직 중지 또는 중단되지 않은 경우 활성 파서를 가지고
있다고 합니다.
document
는 문서 로드 타이밍
정보라는 로드 타이밍 정보를 가지고 있습니다.
document
는 문서 언로드
타이밍 정보라는 이전 문서 언로드
타이밍을 가지고 있습니다.
document
는 크로스 오리진 리디렉션을 통해 생성됨이라는 부울 값을 가지며, 초기값은
false입니다.
문서 로드 타이밍 정보 구조체에는 다음과 같은 항목이 있습니다:
DOMHighResTimeStamp
값들
문서 언로드 타이밍 정보 구조체에는 다음과 같은 항목이 있습니다:
DOMHighResTimeStamp
값들
각 document
는 렌더링 차단 요소 집합을 가지며, 이는 초기에는 비어 있는 집합입니다.
document
document는 렌더링 차단 요소 추가를 허용하며, document의 콘텐츠
유형이 "text/html
"이고,
document의 body 요소가
null인
경우에 해당합니다.
document
document는 다음 두 조건이
모두 참일
때
렌더링 차단 상태가 됩니다:
document의 렌더링 차단 요소 집합이 비어 있지 않거나, document가 렌더링 차단 요소 추가를 허용하는 경우.
document의 현재 고해상도 시간이 document의 관련 글로벌 객체에 따라 구현 정의된 타임아웃 값을 초과하지 않은 경우.
요소 el은 el의 노드 문서 document가 렌더링 차단 상태이며, el이 document의 렌더링 차단 요소 집합에 포함되어 있을 때 렌더링 차단 요소로 간주됩니다.
요소 el에 대해 렌더링 차단을 수행하려면:
el의 노드 문서를 document로 설정합니다.
만약 document가 렌더링 차단 요소 추가를 허용한다면, append를 사용하여 el을 document의 렌더링 차단 요소 집합에 추가합니다.
요소 el에 대해 렌더링 차단 해제를 수행하려면:
el의 노드 문서를 document로 설정합니다.
제거를 사용하여 el을 document의 렌더링 차단 요소 집합에서 제거합니다.
렌더링 차단 요소 el이 탐색 컨텍스트에서 분리되거나, el의 차단 속성의 값이 변경되어 el이 더 이상 잠재적 렌더링 차단 요소가 아닌 경우, 렌더링 차단을 해제해야 합니다.
문서의 html
요소는 해당 문서의 문서 요소이며, html
요소일 경우에 해당하며, 그렇지 않으면 null입니다.
document.head
모든 최신 엔진에서 지원됩니다.
head
요소를 반환합니다.
문서의 head
요소는 html 요소의 자식인 첫 번째 head
요소이며, 그렇지 않으면 null입니다.
head
속성은, 가져올 때 문서의 head 요소를 반환해야 합니다 (head
요소 또는 null).
document.title [ = value ]
HTML에서는 title 요소에 의해, SVG에서는
SVG title
요소에 의해 문서의 제목이 반환됩니다.
설정할 때, 문서의 제목을 업데이트합니다. 적절한 요소가 없는 경우 새 값은 무시됩니다.
문서의 title
요소는 문서 내의 첫 번째 title
요소입니다 (트리 순서로), 그렇지 않으면 null입니다.
모든 최신 엔진에서 지원됩니다.
다음 알고리즘을 실행할 때 title
속성은
반환되어야 합니다:
만약 문서 요소가 SVG
svg
요소라면, value를 첫 번째
자식 텍스트 내용으로 설정합니다.
그 외의 경우, value를 title 요소의 자식 텍스트 내용으로 설정하거나, title 요소가 null이면 빈 문자열로 설정합니다.
ASCII 공백을 제거하고 축소한 다음 value를 반환합니다.
설정할 때, 다음 목록에서 첫 번째 일치 조건에 해당하는 단계를 실행해야 합니다:
svg
요소라면
그렇지 않은 경우:
문자열을 전체 대체하여 주어진 값으로 element 내에서 바꿉니다.
그렇지 않은 경우:
element를 요소를
생성하여 문서 요소의 노드 문서로 설정하고, title
및 HTML 네임스페이스를 사용합니다.
element를 head 요소에 추가합니다.
문자열을 전체 대체하여 주어진 값으로 element 내에서 바꿉니다.
아무 것도 하지 않습니다.
document.body [ = value ]
모든 최신 엔진에서 지원됩니다.
body 요소를 반환합니다.
새 값을 설정하여 body 요소를 교체할 수 있습니다.
새로운 값이 body
또는 frameset
요소가 아닌 경우, 이는 "HierarchyRequestError
" DOMException
을
발생시킵니다.
문서의 body 요소는 html 요소의 자식 중 첫 번째 body
요소 또는 frameset
요소이며, 그런 요소가 없다면 null입니다.
body
속성은 가져올 때 문서의 body 요소를 반환해야 하며 (이는 body
요소, frameset
요소 또는 null일 수 있음), 설정 시에는 다음
알고리즘을 실행해야 합니다:
body
또는 frameset
요소가 아닌 경우, "HierarchyRequestError
" DOMException
을
발생시킵니다.
HierarchyRequestError
" DOMException
을
발생시킵니다.
body
getter에 의해
반환된 값이 setter에 전달된 값과 항상 일치하는 것은 아닙니다.
이 예제에서, setter는 body
요소를
성공적으로 삽입합니다
(그러나 이는 비표준으로, SVG에서는 SVG
svg
요소의 자식으로 body
요소를 허용하지 않음). 그러나
getter는 문서 요소가 html
이 아니기
때문에 null을 반환합니다.
< svg xmlns = "http://www.w3.org/2000/svg" >
< script >
document. body = document. createElementNS( "http://www.w3.org/1999/xhtml" , "body" );
console. assert( document. body === null );
</ script >
</ svg >
document.images
모든 최신 엔진에서 지원됩니다.
HTMLCollection
을
반환하며, 이는 document
의 img
요소를 포함합니다.
document.embeds
모든 최신 엔진에서 지원됩니다.
HTMLCollection
을
반환하며, 이는 document
의 embed
요소를 포함합니다.
document.plugins
모든 최신 엔진에서 지원됩니다.
HTMLCollection
을
반환하며, 이는 document
의 a
및 area
요소 중 href
속성이 있는 요소를
포함합니다.
document.forms
모든 최신 엔진에서 지원됩니다.
HTMLCollection
을
반환하며, 이는 document
의 form
요소를 포함합니다.
document.scripts
모든 최신 엔진에서 지원됩니다.
HTMLCollection
을
반환하며, 이는 document
의 script
요소를 포함합니다.
images
속성은 HTMLCollection
을
반환해야 하며, document
노드에서 루팅되고 필터는 img
요소만 일치해야 합니다.
embeds
속성은 HTMLCollection
을
반환해야 하며, document
노드에서 루팅되고 필터는 embed
요소만 일치해야 합니다.
plugins
속성은 embeds
속성이 반환하는 것과
동일한 객체를 반환해야 합니다.
links
속성은 HTMLCollection
을
반환해야 하며, document
노드에서 루팅되고 필터는 a
요소 중 href
속성이 있는 요소 및 area
요소 중 href
속성이 있는 요소만 일치해야
합니다.
forms
속성은 HTMLCollection
을
반환해야 하며, document
노드에서 루팅되고 필터는 form
요소만 일치해야 합니다.
scripts
속성은 HTMLCollection
을
반환해야 하며, document
노드에서 루팅되고 필터는 script
요소만 일치해야 합니다.
collection = document.getElementsByName(name)
모든 최신 엔진에서 지원됩니다.
getElementsByName(elementName)
메서드 단계는 다음과 같이 live NodeList
를
반환합니다. 이 컬렉션은 document
에서
elementName
인수와 동일한 값을 가진 name
속성이 있는 모든 HTML
요소를 포함하며, 트리 순서에 따라 정렬됩니다. 동일한 인수를 사용하여 메서드가 다시 호출될 경우, 사용자 에이전트는 이전 호출에서 반환된 것과 동일한
객체를 반환할 수 있습니다. 다른 경우에는 새로운 NodeList
객체를 반환해야 합니다.
document.currentScript
모든 최신 엔진에서 지원됩니다.
현재 실행 중인 script
요소 또는 SVG script
요소를 반환합니다. 이 요소가 클래식 스크립트를 나타내는 경우에만 해당됩니다. 재진입 스크립트 실행의 경우, 아직 실행이 완료되지 않은
스크립트 중 가장 최근에 시작된 스크립트를 반환합니다.
현재 document
에서 스크립트
또는 SVG 스크립트
요소가 실행 중이 아니거나, 현재 실행 중인 스크립트
또는 SVG 스크립트
요소가 모듈 스크립트를 나타내는 경우 null을 반환합니다.
currentScript
속성은 가장 최근에 설정된 값을 반환해야 합니다. document
가 생성될
때,
currentScript
는
null로 초기화되어야 합니다.
이 API는 스크립트
또는
SVG 스크립트
요소를 전역적으로 노출하므로, 구현자 및 표준 커뮤니티에서 더 이상 선호되지 않습니다. 따라서,
모듈 스크립트 실행 시나 섀도우 트리 내에서 스크립트를 실행할 때는 사용할 수 없습니다. 이러한 컨텍스트에서 실행 중인 스크립트를 식별하기 위한 새로운 솔루션을
찾고 있습니다. 이는 전역적으로 노출되지 않으며, 이슈 #1013를 참조하십시오.
Document
인터페이스는 이름 있는 속성을 지원합니다.
document
객체 document의 지원되는 속성 이름은 특정 시점에서 다음과 같으며, 요소가 기여한 순서에 따라 트리 순서에 따라 정렬되고, 나중에 중복된 값은 무시되며, 동일한 요소가 id
속성에서 나오는 값이 name
속성에서 나오는 값보다 먼저 나타납니다:
모든 name
콘텐츠 속성의 값은
노출된 embed
, form
, iframe
,
img
, 및 노출된 object
요소에 대해
비어 있지 않은 name
콘텐츠 속성을 가지며, document를
문서 트리 안에 있는
루트로 가지는 경우;
모든 id
콘텐츠 속성의 값은
노출된 object
요소에 대해
비어 있지 않은 id
콘텐츠 속성을 가지며 document를 문서 트리 안에
있는
루트로 가지는 경우; 그리고
모든 id
콘텐츠 속성의 값은
비어 있지 않은 id
콘텐츠 속성과
비어 있지 않은 name
콘텐츠 속성을 모두 가지며, document를
문서 트리 안에 있는 img
요소에 대해
루트로 가지는 경우.
이름 있는 속성의 값을 결정하기 위해 name을 document
객체에서 반환하기 위해 사용자는 다음 단계를 사용하여 얻은 값을
반환해야
합니다:
elements를 name 이름을 가진 이름이 지정된 요소들의 목록으로 설정하되,
문서 트리 안에 있으며,
문서
가 루트로 있는 요소들로 설정하십시오.
이 알고리즘이 그렇지 않다면 Web IDL에 의해 호출되지 않았을 것이므로, 적어도 하나의 이러한 요소가 존재할 것입니다.
만약 elements에 하나의 요소만 있고, 그 요소가 iframe
요소이며, 그 iframe
요소의 content navigable이 null이
아니라면, 그 요소의 content navigable의
활성 WindowProxy
를 반환하십시오.
그렇지 않고 elements에 하나의 요소만 있으면, 그 요소를 반환하십시오.
그 외의 경우, name 이름이 지정된 요소들만 필터로 일치하는 HTMLCollection
을,
문서
노드를 루트로 하여 반환하십시오.
name을 가진 이름 있는 요소는 위 알고리즘의 목적에 따라 다음 중 하나에 해당하는 요소입니다:
embed
, form
, iframe
, img
또는 노출된 object
요소가
name
콘텐츠 속성에 name 값을 가진 경우, 또는
object
요소가 id
콘텐츠 속성에 name
값을 가진 경우, 또는img
요소가 id
콘텐츠 속성에 name
값을 가지고, 동시에 비어 있지 않은 name
콘텐츠 속성을 가진 경우.embed
또는 object
요소는 상위에 노출된 object
조상이 없고, object
요소의 경우 대체 콘텐츠를 표시하지 않거나 object
또는 embed
하위 요소가 없을 때 노출된 것으로 간주됩니다.
dir
속성은 Document
인터페이스에 dir
콘텐츠 속성과 함께 정의됩니다.
HTML의 요소, 속성 및 속성 값은 특정 의미(시맨틱)를 가지도록 정의되어 있습니다(이 명세서에 의해). 예를 들어, ol
요소는 순서가 있는 목록을 나타내며, lang
속성은 콘텐츠의 언어를 나타냅니다.
이러한 정의는 웹 브라우저나 검색 엔진과 같은 HTML 프로세서가 저자가 고려하지 않았을 수도 있는 다양한 맥락에서 문서와 애플리케이션을 표시하고 사용할 수 있도록 합니다.
간단한 예로, 데스크탑 웹 브라우저만을 고려하여 작성된 웹 페이지를 생각해 보십시오:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > My Page</ title >
</ head >
< body >
< h1 > Welcome to my page</ h1 >
< p > I like cars and lorries and have a big Jeep!</ p >
< h2 > Where I live</ h2 >
< p > I live in a small hut on a mountain!</ p >
</ body >
</ html >
HTML이 의미를 전달하기 때문에 프레젠테이션이 아닌 동일한 페이지는 모바일 폰의 작은 브라우저에서도 변경 없이 사용할 수 있습니다. 예를 들어, 데스크탑에서처럼 헤딩이 큰 글자로 표시되는 대신, 모바일 폰의 브라우저는 페이지 전체에 동일한 크기의 텍스트를 사용하지만 헤딩은 굵게 표시할 수 있습니다.
하지만 이는 화면 크기의 차이만을 의미하지 않습니다. 동일한 페이지는 음성 합성 기반 브라우저를 사용하는 시각 장애 사용자에게도 사용할 수 있습니다. 이 경우 페이지는 화면에 표시되는 대신 사용자의 이어폰을 통해 음성으로 읽어줍니다. 헤딩이 큰 글자로 표시되는 대신, 음성 브라우저는 다른 음량이나 더 느린 목소리를 사용할 수 있습니다.
그것뿐만이 아닙니다. 브라우저가 페이지의 어느 부분이 헤딩인지 알고 있기 때문에, 사용자가 문서 내에서 빠르게 탐색할 수 있도록 문서 개요를 생성할 수 있습니다. "다음 헤딩으로 이동" 또는 "이전 헤딩으로 이동"과 같은 키를 사용하여 쉽게 탐색할 수 있는 기능은 특히 음성 브라우저에서 매우 유용하며, 그렇지 않으면 사용자가 페이지를 빠르게 탐색하기 어렵습니다.
브라우저를 넘어서는 소프트웨어도 이 정보를 활용할 수 있습니다. 검색 엔진은 헤딩을 사용하여 페이지를 더 효과적으로 인덱싱하거나 검색 결과에서 페이지의 하위 섹션으로 빠르게 이동할 수 있는 링크를 제공할 수 있습니다. 도구는 이 헤딩을 사용하여 목차를 생성할 수 있으며, 이 명세서의 목차도 이러한 방식으로 생성됩니다.
이 예시는 헤딩에 집중했지만, HTML의 모든 시맨틱에도 동일한 원칙이 적용됩니다.
저자는 요소, 속성 또는 속성 값을 그들이 의도된 시맨틱 목적 외의 용도로 사용해서는 안 됩니다. 그렇게 하면 소프트웨어가 페이지를 올바르게 처리하는 것을 방해합니다.
예를 들어, 다음 코드 조각은 기업 사이트의 헤딩을 나타내기 위해 작성된 것으로, 두 번째 줄이 하위 섹션의 헤딩이 아니라 단순히 부제목이므로 비표준적입니다(같은 섹션의 보조 헤딩).
< body >
< h1 > ACME Corporation</ h1 >
< h2 > The leaders in arbitrary fast delivery since 1920</ h2 >
...
hgroup
요소는 이러한 상황에 사용할 수 있습니다:
< body >
< hgroup >
< h1 > ACME Corporation</ h1 >
< p > The leaders in arbitrary fast delivery since 1920</ p >
</ hgroup >
...
다음 예시의 문서도 구문상 올바르더라도 표 형식의 데이터가 명확히 아닌 데이터를 셀에 배치했기 때문에 유사하게 비표준적이며, cite
요소가 잘못 사용되었습니다:
<!DOCTYPE HTML>
< html lang = "en-GB" >
< head > < title > Demonstration </ title > </ head >
< body >
< table >
< tr > < td > My favourite animal is the cat. </ td > </ tr >
< tr >
< td >
—< a href = "https://example.org/~ernest/" >< cite > Ernest</ cite ></ a > ,
in an essay from 1992
</ td >
</ tr >
</ table >
</ body >
</ html >
이렇게 하면 이러한 시맨틱에 의존하는 소프트웨어가 실패할 수 있습니다. 예를 들어, 시각 장애 사용자가 문서의 표를 탐색할 수 있도록 하는 음성 브라우저는 위 인용문을 표로 보고하여 사용자를 혼란스럽게 할 수 있으며, 페이지에서 작업 제목을 추출하는 도구는 "Ernest"를 작업 제목으로 잘못 추출할 수 있습니다. 실제로 이는 사람의 이름일 뿐 제목이 아닙니다.
이 문서의 수정된 버전은 다음과 같을 수 있습니다:
<!DOCTYPE HTML>
< html lang = "en-GB" >
< head > < title > Demonstration </ title > </ head >
< body >
< blockquote >
< p > My favourite animal is the cat. </ p >
</ blockquote >
< p >
—< a href = "https://example.org/~ernest/" > Ernest</ a > ,
in an essay from 1992
</ p >
</ body >
</ html >
저자는 이 명세서 또는 다른 적용 가능한 명세서에 의해 허용되지 않은 요소, 속성 또는 속성 값을 사용해서는 안 됩니다. 그렇게 하면 언어를 미래에 확장하는 것이 상당히 어려워집니다.
다음 예시에서는 비표준 속성 값("carpet")과 이 명세서에서 허용되지 않는 비표준 속성("texture")이 있습니다:
< label > Carpet: < input type = "carpet" name = "c" texture = "deep pile" ></ label >
다음은 이를 수정한 올바른 마크업입니다:
< label > Carpet: < input type = "text" class = "carpet" name = "c" data-texture = "deep pile" ></ label >
DOM 노드의 노드 문서의 브라우징 컨텍스트가 null인 경우, 문서 적합성 요구 사항에서 HTML 구문 요구 사항 및 XML 구문 요구 사항을 제외한 모든 문서 적합성 요구 사항에서 면제됩니다.
특히, template
요소의 템플릿 내용의 노드 문서의 브라우징 컨텍스트는 null입니다. 예를 들어, 콘텐츠 모델 요구 사항과 속성 값
마이크로 구문 요구 사항은 template
요소의 템플릿 내용에 적용되지 않습니다. 이 예시에서 img
요소는 template
요소
외부에서는 유효하지 않은 플레이스홀더 값을 가지고 있습니다.
< template >
< article >
< img src = "{{src}}" alt = "{{alt}}" >
< h1 ></ h1 >
</ article >
</ template >
그러나 위의 마크업에서 </h1>
종료 태그를 생략하면 HTML 구문을 위반한 것이 되며, 적합성 검사 도구에서 오류로 플래그를
지정합니다.
스크립팅 및 기타 메커니즘을 통해 속성 값, 텍스트 및 문서의 전체 구조가 사용자 에이전트가 처리하는 동안 동적으로 변경될 수 있습니다. 특정 시점에서 문서의 의미는 그 시점에서 문서의 상태에 의해 표현되며, 따라서 문서의 의미는 시간이 지남에 따라 변경될 수 있습니다. 사용자 에이전트는 이러한 변화가 발생할 때마다 문서의 프레젠테이션을 업데이트해야 합니다.
HTML에는 진행 바를 설명하는 progress
요소가 있습니다. 이 요소의
"value" 속성이 스크립트에 의해 동적으로 업데이트되면 사용자 에이전트는 렌더링을 업데이트하여 진행 상황이 변경되는 것을 표시합니다.
DOM에서 HTML 요소를 나타내는 노드는 이 명세서의 관련 섹션에 나열된 인터페이스를 구현하고 스크립트에 노출해야 합니다. 여기에는 HTML 요소가 포함되며, XML 문서에서도, 이 문서들이 다른 컨텍스트에 있을 때 (예: XSLT 변환 내)도 마찬가지입니다.
DOM의 요소는 무언가를 나타냅니다. 즉, 요소는 내재적인 의미를 가지며, 이는 시맨틱스라고도 불립니다.
예를 들어, ol
요소는 순서가 있는
목록을 나타냅니다.
요소는 명시적이거나 암시적인 방식으로 참조될 수 있습니다. DOM의 요소가 명시적으로 참조될 수 있는 한 가지 방법은 요소에 id
속성을 부여한 다음, 해당 id
속성 값을 프래그먼트로 사용하는 하이퍼링크를 생성하는 것입니다. 그러나 참조를 위해 하이퍼링크가 반드시 필요한 것은 아닙니다. 해당 요소를 참조하는 어떤 방식도
충분합니다.
다음 figure
요소를 고려해보세요.
이 요소에는 id
속성이 부여되어
있습니다:
< figure id = "module-script-graph" >
< img src = "module-script-graph.svg"
alt = "Module A depends on module B, which depends
on modules C and D." >
< figcaption > Figure 27: a simple module graph</ figcaption >
</ figure >
하이퍼링크 기반 참조는 a
요소를 사용하여 다음과 같이 생성될 수 있습니다:
As we can see in < a href = "#module-script-graph" > figure 27</ a > , ...
그러나, figure
요소를 참조하는 다른 방법들도 많이 있습니다. 예를 들어:
"모듈 A, B, C, D를 나타낸 그림에서..."
"Figure 27에서..." (하이퍼링크 없이)
"'단순 모듈 그래프' 그림의 내용에서..."
"아래 그림에서..." (하지만 이것은 권장되지 않습니다)
모든 HTML 요소의 인터페이스가 상속받아야 하는 기본 인터페이스는 HTMLElement
인터페이스이며, 추가 요구 사항이 없는 요소들은 이
인터페이스를 사용해야 합니다.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
[Exposed =Window ]
interface HTMLElement : Element {
[HTMLConstructor ] constructor ();
// metadata attributes
[CEReactions ] attribute DOMString title ;
[CEReactions ] attribute DOMString lang ;
[CEReactions ] attribute boolean translate ;
[CEReactions ] attribute DOMString dir ;
// user interaction
[CEReactions ] attribute (boolean or unrestricted double or DOMString )? hidden ;
[CEReactions ] attribute boolean inert ;
undefined click ();
[CEReactions ] attribute DOMString accessKey ;
readonly attribute DOMString accessKeyLabel ;
[CEReactions ] attribute boolean draggable ;
[CEReactions ] attribute boolean spellcheck ;
[CEReactions ] attribute DOMString writingSuggestions ;
[CEReactions ] attribute DOMString autocapitalize ;
[CEReactions ] attribute boolean autocorrect ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString innerText ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString outerText ;
ElementInternals attachInternals ();
// The popover API
undefined showPopover ();
undefined hidePopover ();
boolean togglePopover (optional boolean force );
[CEReactions ] attribute DOMString ? popover ;
};
HTMLElement includes GlobalEventHandlers ;
HTMLElement includes ElementContentEditable ;
HTMLElement includes HTMLOrSVGElement ;
[Exposed =Window ]
interface HTMLUnknownElement : HTMLElement {
// Note: intentionally no [HTMLConstructor]
};
HTMLElement
인터페이스는 여러 가지 다양한 기능과 관련된
메서드 및 속성을 포함하고 있으며, 이 인터페이스의 구성원들은 이 명세서의 여러 다른 섹션에서 설명됩니다.
name을 가진 요소에 대한 요소 인터페이스는 다음과 같이 결정됩니다:
name이 applet
, bgsound
, blink
, isindex
, keygen
, multicol
, nextid
, 또는 spacer
인 경우, HTMLUnknownElement
를
반환합니다.
name이 acronym
, basefont
, big
, center
, nobr
, noembed
, noframes
, plaintext
, rb
, rtc
, strike
, 또는 tt
인 경우, HTMLElement
를 반환합니다.
name이 listing
또는 xmp
인 경우, HTMLPreElement
를 반환합니다.
이 명세서가 name에 대응하는 요소 유형에 적합한 인터페이스를 정의한 경우, 해당 인터페이스를 반환합니다.
다른 관련 명세서가 name에 적합한 인터페이스를 정의한 경우, 그 인터페이스를 반환합니다.
name이 유효한
커스텀 요소 이름인 경우, HTMLElement
를 반환합니다.
HTMLUnknownElement
를
반환합니다.
유효한 커스텀 요소
이름의 경우 HTMLUnknownElement
대신
HTMLElement
를 사용하는 이유는, 잠재적인 미래 업그레이드가 HTMLUnknownElement
에서 관련
없는 서브클래스로의 수평적 전환 대신 HTMLElement
에서
서브클래스로의 선형 전환만을 초래하도록 보장하기 위해서입니다.
HTML과 SVG 요소가 공유하는 기능들은 HTMLOrSVGElement
인터페이스 믹스인을
사용합니다: [SVG]
interface mixin HTMLOrSVGElement {
[SameObject ] readonly attribute DOMStringMap dataset ;
attribute DOMString nonce ; // intentionally no [CEReactions]
[CEReactions ] attribute boolean autofocus ;
[CEReactions ] attribute long tabIndex ;
undefined focus (optional FocusOptions options = {});
undefined blur ();
};
HTML 또는 SVG 요소가 아닌 요소의 예는 다음과 같이 생성된 요소입니다:
const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);
커스텀 요소 기능을 지원하기 위해, 모든 HTML 요소는 특별한 생성자 동작을 가집니다. 이는 [HTMLConstructor]
IDL 확장 속성을 통해 표시됩니다. 이 확장 속성은 주어진 인터페이스 객체가 호출될 때 특정 동작을 가지게 된다는 것을 나타내며,
아래에 자세히 정의되어 있습니다.
[HTMLConstructor]
확장 속성은
인수를 받을 수 없으며, 생성자 작업에서만 나타나야
합니다. 이는 생성자 작업에 단 한 번만 나타나야 하며, 해당 인터페이스는 단일 주석이 달린 생성자 작업만을 포함하고, 그 외에는 아무 것도 포함하지 않아야 합니다. 주석이 달린 생성자 작업은 인수를
받지 않도록 선언되어야 합니다.
[HTMLConstructor]
확장
속성으로 주석이 달린 생성자 작업이 선언된 인터페이스는 다음과 같은 재정의된 생성자 단계를 가집니다:
registry를 현재
전역 객체의 CustomElementRegistry
객체로 설정합니다.
NewTarget이 활성 함수
객체와 동일한 경우, TypeError
를
발생시킵니다.
이러한 상황은 생성자를 요소 인터페이스로 정의한 커스텀 요소를 사용할 때 발생할 수 있습니다:
customElements.define("bad-1", HTMLButtonElement);
new HTMLButtonElement(); // (1)
document.createElement("bad-1"); // (2)
이 경우, HTMLButtonElement
의
실행 중 (1번과 같이 명시적으로 또는 2번과 같이 암시적으로) 활성
함수 객체와 NewTarget이 모두 HTMLButtonElement
이
됩니다. 이 검사가 없으면 로컬 이름이 bad-1
인 HTMLButtonElement
인스턴스를 생성할 수 있게 됩니다.
definition을 registry에서 생성자가 NewTarget과 동일한 항목으로 설정합니다. 그러한 정의가 없으면 TypeError
를
발생시킵니다.
이는 registry에 생성자가 정의되지 않은 경우에도 적용되며, 이는 HTML 요소 생성자가 함수로 호출될 때도 발생합니다 (이 경우 NewTarget이 정의되지 않기 때문에).
is value를 null로 설정합니다.
definition의 로컬 이름이 definition의 이름과 동일한 경우 (즉, definition이 독립 커스텀 요소인 경우), 다음을 수행합니다:
활성 함수 객체가 HTMLElement
가 아닌 경우,
TypeError
를
발생시킵니다.
이러한 상황은 커스텀 요소가 로컬 이름을 확장하지 않지만, HTMLElement
클래스가 아닌 클래스를 상속하는 경우에 발생할 수 있습니다:
customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});
이 경우, Bad2
인스턴스를 생성할 때 발생하는 (암시적인) super()
호출 중에 활성 함수 객체는 HTMLParagraphElement
이며,
HTMLElement
가
아닙니다.
그 외의 경우 (즉, definition이 맞춤형 내장 요소인 경우):
valid local names을 이 명세서나 다른 관련 명세서에 정의된 로컬 이름 목록으로 설정합니다. 이 목록은 활성 함수 객체를 요소 인터페이스로 사용하는 요소를 포함합니다.
valid local names에 definition의 로컬 이름이 포함되어
있지 않은 경우, TypeError
를
발생시킵니다.
이 상황은 커스텀 요소가 주어진 로컬 이름을 확장하지만, 잘못된 클래스를 상속하는 경우에 발생할 수 있습니다:
customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });
이 경우, Bad3
인스턴스를 생성할 때 발생하는 (암시적인) super()
호출 중에 유효한 로컬
이름 목록은 q
및 blockquote
를
포함하지만, definition의 로컬 이름은 그
목록에 포함되지 않은 p
입니다.
is value를 definition의 이름으로 설정합니다.
definition의 생성 스택이 비어 있는 경우:
인터페이스를 구현하는 새로운 객체를 내부적으로 생성한 결과를 element로 설정합니다.
element의 네임스페이스를 HTML 네임스페이스로 설정합니다.
element의 네임스페이스 접두사를 null로 설정합니다.
element의 커스텀 요소 상태를 "custom
"으로 설정합니다.
element의 커스텀 요소 정의를 definition으로 설정합니다.
element의 is
값을 is value로 설정합니다.
element를 반환합니다.
이 단계는 저자 스크립트가 예를 들어 new MyCustomElement()
와 같이 커스텀 요소를 직접 생성할 때 일반적으로
도달합니다.
Type(prototype)이 Object가 아닌 경우:
realm을 ? GetFunctionRealm(NewTarget)으로 설정합니다.
prototype을 realm의 인터페이스가 활성 함수 객체와 동일한 인터페이스인 인터페이스 프로토타입 객체로 설정합니다.
활성 함수 객체의 realm이 realm이 아닐 수도 있으므로, 우리는 realms 간에 "동일한 인터페이스"의 일반적인 개념을 사용하고 있습니다. 이는 인터페이스 객체의 동등성을 찾는 것이 아닙니다. 이러한 백업 동작은 인터페이스를 구현하는 새로운 객체를 내부적으로 생성 알고리즘과 일치하도록 설계되었습니다.
element를 definition의 생성 스택의 마지막 항목으로 설정합니다.
element가 이미 생성된 마커인 경우, TypeError
를
발생시킵니다.
이 경우는 작성자가 커스텀 요소 생성자 내에서
비준수하게 super()
를 호출하기 전에
생성 중인 클래스의 다른 인스턴스를 생성할 때 발생할 수 있습니다:
let doSillyThing = true ;
class DontDoThis extends HTMLElement {
constructor() {
if ( doSillyThing) {
doSillyThing = false ;
new DontDoThis();
// 이제 생성 스택에 이미 생성된 마커가 포함됩니다.
}
// 그러면 TypeError가 발생합니다:
super ();
}
}
또한 사용자 코드가 커스텀 요소 생성자 내부에서
super()
를 두 번 호출하는 경우에도 발생할 수 있습니다. 이는 JavaScript 명세에 따라 이 알고리즘을 두 번 실행하게 되며, 오류를 발생시키기
전에 수퍼클래스 생성자를 두 번 호출하기 때문입니다:
class DontDoThisEither extends HTMLElement {
constructor() {
super ();
// This will throw, but not until it has already called into the HTMLElement constructor
super ();
}
}
? element.[[SetPrototypeOf]](prototype)를 수행합니다.
definition의 생성 스택의 마지막 항목을 이미 생성됨 표시자로 교체합니다.
element를 반환합니다.
이 단계는 일반적으로 업그레이드 중에 기존 요소를 반환하는
경우 도달합니다. 이는 커스텀 요소 생성자 내부에서
super()
호출이 해당 기존 요소를 this로 할당하도록 하기 위함입니다.
[HTMLConstructor]
로 암시된
생성자 동작 외에도, 일부 요소는 명명된 생성자(실제로는 수정된
prototype
속성을 가진 팩토리 함수)를 가질 수 있습니다.
HTML 요소에 대한 명명된 생성자는 또한 커스텀 요소 생성자를 정의할 때 extends
절에서도 사용할 수 있습니다:
class AutoEmbiggenedImage extends Image {
constructor( width, height) {
super ( width * 10 , height * 10 );
}
}
customElements. define( "auto-embiggened" , AutoEmbiggenedImage, { extends : "img" });
const image = new AutoEmbiggenedImage( 15 , 20 );
console. assert( image. width === 150 );
console. assert( image. height === 200 );
이 명세서의 각 요소는 다음 정보를 포함하는 정의를 가지고 있습니다:
요소를 사용할 수 있는 위치에 대한 비규범적인 설명입니다. 이 정보는 이 요소를 자식으로 허용하는 요소들의 콘텐츠 모델과 중복되며, 단지 편의성을 위해 제공됩니다.
요소의 자식 및 후손으로 포함되어야 하는 콘텐츠에 대한 규범적인 설명입니다.
text/html
구문에서 시작 및 끝 태그를 생략할 수 있는지에 대한 비규범적인 설명입니다. 이 정보는 선택적 태그 섹션에 주어진 규범적인 요구 사항과
중복되며, 요소 정의에 편의성만을 위해 제공됩니다.
요소에 지정될 수 있는 속성(달리 금지되지 않은 경우) 목록과 그 속성에 대한 비규범적인 설명이 포함된 규범적인 목록입니다. (대시 왼쪽의 콘텐츠는 규범적이며, 오른쪽의 콘텐츠는 비규범적입니다.)
작성자용: ARIA role
및 aria-*
속성 사용에 대한 적합성 요구 사항은
ARIA in HTML에 정의되어 있습니다. [ARIA] [ARIAHTML]
구현자용: 접근성 API 시맨틱 구현에 대한 사용자 에이전트 요구 사항은 HTML 접근성 API 매핑에 정의되어 있습니다. [HTMLAAM]
요소가 구현해야 하는 DOM 인터페이스의 규범적인 정의입니다.
이후 요소가 표현하는 내용에 대한 설명과 저자 및 구현에 적용될 수 있는 추가적인 규범적인 적합성 기준이 따라옵니다. 경우에 따라 예제가 포함될 수 있습니다.
속성 값은 문자열입니다. 별도로 명시되지 않는 한, HTML 요소의 속성 값은 빈 문자열을 포함한 모든 문자열 값일 수 있으며, 해당 속성 값에 어떤 텍스트가 지정될 수 있는지에 대한 제한은 없습니다.
이 명세서에서 정의된 각 요소는 콘텐츠 모델을 가지고 있습니다: 요소의 예상 내용물에 대한 설명입니다. HTML 요소는 해당 요소의 콘텐츠 모델에 설명된 요구 사항과 일치하는 내용물을 가져야 합니다. 요소의 내용물은 DOM에서 그 자식들입니다.
ASCII 공백 문자는 항상 요소 사이에 허용됩니다. 사용자 에이전트는 소스 마크업의 요소 사이에 있는 이 문자를 DOM에서
텍스트
노드로 표시합니다. 빈 텍스트
노드 및 이러한 문자들의 시퀀스로만 구성된 텍스트
노드는 요소 간 공백으로 간주됩니다.
요소 간 공백, 주석 노드 및 처리 명령 노드는 요소의 내용물이 그 요소의 콘텐츠 모델과 일치하는지 여부를 결정할 때 무시해야 하며, 문서 및 요소의 시맨틱을 정의하는 알고리즘을 따를 때도 무시해야 합니다.
따라서, 요소 A는 두 번째 요소 B가 같은 부모 노드를 가지며 그들 사이에 다른 요소 노드 또는 텍스트
노드(다만 요소 간 공백은 제외)가 없는 경우
선행되거나 후행된다고 할 수 있습니다. 마찬가지로, 어떤 노드가 그 요소의 유일한 자식인 경우, 그 요소가 요소 간 공백, 주석 노드 및 처리 명령 노드 외에는 다른 노드를 포함하지 않는 경우입니다.
작성자는 HTML 요소를 각 요소에 대해 정의된 대로 명시적으로 허용된 곳 이외에는 사용해서는 안 되며, 다른 명세서에 의해 명시적으로 요구되는 경우를 제외하고는 사용해서는 안 됩니다. XML 복합 문서의 경우, 이러한 맥락은 관련 맥락을 제공하도록 정의된 다른 네임스페이스의 요소 내에 있을 수 있습니다.
Atom Syndication Format은 content
요소를 정의합니다. 그 type
속성에
xhtml
값이 있을 때, Atom Syndication Format은 해당 요소가 단일 HTML div
요소를 포함하도록 요구합니다. 따라서 이 맥락에서는 div
요소가 허용되며, 이는 이 명세서에 명시적으로 규범적으로
명시된 것은 아닙니다. [ATOM]
또한, HTML 요소는 고아 노드(즉, 부모 노드가 없는 상태)일 수 있습니다.
예를 들어, td
요소를 생성하고 스크립트에서 전역 변수에
저장하는 것은 규범적이며, td
요소가 tr
요소 내에서만 사용되어야 함에도 불구하고 이를 벗어날 수
있습니다.
var data = {
name: "Banana" ,
cell: document. createElement( 'td' ),
};
요소의 콘텐츠 모델이 nothing일 때, 해당 요소는 텍스트
노드( 요소 간 공백 제외) 및 요소
노드를 포함해서는 안 됩니다.
콘텐츠 모델이 "nothing"인 대부분의 HTML 요소는 편의상 빈 요소(종료 태그가 없는 요소)인 경우가 많습니다. 그러나, 이는 완전히 별개의 개념입니다.
HTML의 각 요소는 유사한 특성을 가진 요소들을 함께 그룹화하는 하나 이상의 카테고리에 속합니다. 이 명세서에서는 다음과 같은 광범위한 카테고리를 사용합니다:
일부 요소는 또한 이 명세서의 다른 부분에서 정의된 다른 카테고리에 속할 수 있습니다.
이 카테고리들은 다음과 같이 관련됩니다:
섹셔닝 콘텐츠, 헤딩 콘텐츠, 문장 콘텐츠, 임베디드 콘텐츠 및 인터랙티브 콘텐츠는 모두 흐름 콘텐츠의 유형입니다. 메타데이터는 때때로 흐름 콘텐츠이기도 합니다. 메타데이터와 인터랙티브 콘텐츠는 때때로 문장 콘텐츠이기도 합니다. 임베디드 콘텐츠는 또한 문장 콘텐츠의 한 유형이며, 때때로 인터랙티브 콘텐츠이기도 합니다.
다른 카테고리들은 특정 목적을 위해 사용되며, 예를 들어 폼 컨트롤은 공통 요구 사항을 정의하기 위해 여러 카테고리를 사용하여 지정됩니다. 일부 요소는 고유한 요구 사항을 가지며 특정 카테고리에 맞지 않을 수 있습니다.
메타데이터 콘텐츠는 나머지 콘텐츠의 표현이나 동작을 설정하거나, 문서와 다른 문서들 사이의 관계를 설정하거나, 다른 "대역 외" 정보를 전달하는 콘텐츠입니다.
주로 메타데이터와 관련된 의미론을 가진 다른 네임스페이스의 요소들(예: RDF)도 메타데이터 콘텐츠입니다.
따라서, XML 직렬화에서 다음과 같이 RDF를 사용할 수 있습니다:
< html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:r = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang = "en" >
< head >
< title > Hedral's Home Page</ title >
< r:RDF >
< Person xmlns = "http://www.w3.org/2000/10/swap/pim/contact#"
r:about = "https://hedral.example.com/#" >
< fullName > Cat Hedral</ fullName >
< mailbox r:resource = "mailto:hedral@damowmow.com" />
< personalTitle > Sir</ personalTitle >
</ Person >
</ r:RDF >
</ head >
< body >
< h1 > My home page</ h1 >
< p > I like playing with string, I guess. Sister says squirrels are fun
too so sometimes I follow her to play with them.</ p >
</ body >
</ html >
그러나, HTML 직렬화에서는 이것이 불가능합니다.
문서 및 애플리케이션 본문에서 사용되는 대부분의 요소는 플로우 콘텐츠로 분류됩니다.
a
abbr
address
area
(만약 map
요소의 자손인 경우)
article
aside
audio
b
bdi
bdo
blockquote
br
button
canvas
cite
code
data
datalist
del
details
dfn
dialog
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
label
link
(만약 본문에서 허용되는 경우)
main
(만약 계층적으로 올바른
main
요소인 경우)
map
mark
math
menu
meta
(만약 itemprop
속성이 존재하는 경우)
meter
nav
noscript
object
ol
output
p
picture
pre
progress
q
ruby
s
samp
script
search
section
select
slot
small
span
strong
sub
sup
svg
table
template
textarea
time
u
ul
var
video
wbr
구획 콘텐츠는 header
와 footer
요소의 범위를 정의하는 콘텐츠입니다.
제목 콘텐츠는 섹션의 제목을 정의합니다(섹션화 콘텐츠 요소를 사용하여 명시적으로 표시하거나 제목 콘텐츠 자체에 의해 암시됩니다).
구문 콘텐츠는 문서의 텍스트와 그 텍스트를 단락 내부에서 마크업하는 요소들입니다. 구문 콘텐츠의 연속은 단락을 형성합니다.
a
abbr
area
(만약 map
요소의 자손인 경우)
audio
b
bdi
bdo
br
button
canvas
cite
code
data
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
label
link
(만약 본문에서 허용되는 경우)
map
mark
math
meta
(만약 itemprop
속성이 있는 경우)
meter
noscript
object
output
picture
progress
q
ruby
s
samp
script
select
slot
small
span
strong
sub
sup
svg
template
textarea
time
u
var
video
wbr
구문 콘텐츠로 분류되는 대부분의 요소는 구문 콘텐츠로 분류된 요소들만 포함할 수 있으며, 흐름 콘텐츠를 포함할 수 없습니다.
텍스트는 콘텐츠 모델의 맥락에서 아무것도 아니거나 텍스트
노드입니다. 텍스트는 때때로 독자적인 콘텐츠 모델로 사용되지만, 구문 콘텐츠이기도 하며, 요소 간 공백이 될 수 있습니다(텍스트 노드가 비어
있거나 단순히 ASCII 공백 문자만 포함하는 경우).
텍스트
노드와 속성 값은 스칼라 값으로 구성되어야 하며, 비문자 및 제어 문자(ASCII 공백 문자 제외)를 제외합니다.
이 명세서는 텍스트 노드와 속성 값의 정확한 값에 대한 추가 제약을 포함합니다.
임베디드 콘텐츠는 문서에 다른 리소스를 가져오거나, 다른 어휘의 콘텐츠를 문서에 삽입하는 콘텐츠입니다.
HTML 네임스페이스 외의 네임스페이스에서 온 요소로, 콘텐츠를 전달하지만 메타데이터는 아닌 요소들은 이 명세서에서 정의된 콘텐츠 모델의 목적상 임베디드 콘텐츠로 간주됩니다. (예: MathML 또는 SVG)
일부 임베디드 콘텐츠 요소는 대체 콘텐츠를 가질 수 있습니다. 이는 외부 리소스를 사용할 수 없을 때(예: 지원되지 않는 형식일 때) 사용되는 콘텐츠입니다. 요소 정의는 대체 콘텐츠가 있는 경우 그 내용을 명시합니다.
인터랙티브 콘텐츠는 사용자의 상호작용을 위해 특별히 의도된 콘텐츠입니다.
a
(만약 href
속성이 존재하는 경우)
audio
(만약 controls
속성이 존재하는 경우)
button
details
embed
iframe
img
(만약 usemap
속성이 존재하는
경우)
input
(만약 type
속성이 숨김 상태가 아닌
경우)
label
select
textarea
video
(만약 controls
속성이 존재하는
경우)
일반적으로, 콘텐츠 모델이 flow content 또는 phrasing content를 허용하는 요소는 contents에 palpable content가 하나 이상 포함되어야 하며, 속성이 지정되지 않아야 합니다.
Palpable content는 요소를 비어 있지 않게
만들어 주며, 후손에 비어 있지 않은 text를 제공하거나, 사용자가 들을 수 있는
것(audio
요소) 또는 볼 수 있는 것(video
, img
, 또는 canvas
요소) 또는 다른 방식으로 상호작용할 수
있는 것(예: 인터랙티브 폼 컨트롤)을 제공합니다.
이 요구 사항은 엄격한 요구 사항은 아니며, 요소가 비어 있어도 정당한 경우가 많이 있습니다. 예를 들어, 나중에 스크립트로 채워질 자리 표시자로 사용되는 경우나 템플릿의 일부로 요소가 있으며 대부분의 페이지에서는 채워지지만 일부 페이지에서는 관련이 없는 경우가 있습니다.
적합성 검사기는 작성자 보조 도구로서 이 요구 사항을 충족하지 않는 요소를 찾을 수 있는 메커니즘을 제공하는 것이 좋습니다.
다음 요소들은 palpable content입니다:
a
abbr
address
article
aside
audio
(if the
controls
속성이
존재하는 경우)
b
bdi
bdo
blockquote
button
canvas
cite
code
data
del
details
dfn
div
dl
(요소의 자식 요소에 하나 이상의 이름-값 그룹이
포함된 경우)
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
i
iframe
img
input
(type
속성이 상태에 있지 않은
경우)
ins
kbd
label
main
map
mark
math
menu
(요소의 자식에 적어도 하나의 li
요소가 포함된 경우)
meter
nav
object
ol
(요소의 자식에 적어도 하나의 li
요소가 포함된 경우)
output
p
picture
pre
progress
q
ruby
s
samp
search
section
select
small
span
strong
sub
sup
svg
table
textarea
time
u
ul
(요소의 자식에 적어도 하나의 li
요소가 포함된 경우)
var
video
스크립트 지원 요소는 자체적으로 아무것도 나타내지 않지만(즉, 렌더링되지 않음), 스크립트를 지원하기 위해 사용되는 요소들입니다. 예를 들어, 사용자에게 기능을 제공하기 위해 사용됩니다.
다음 요소들이 스크립트 지원 요소입니다:
일부 요소는 투명하다고 설명되며, 콘텐츠 모델 설명에 "투명"이라는 용어가 포함됩니다. 투명 요소의 콘텐츠 모델은 부모 요소의 콘텐츠 모델에서 파생됩니다. 투명한 요소가 포함된 부모 요소의 콘텐츠 모델 부분에서 필요한 요소는 투명한 요소의 콘텐츠 모델에서도 동일하게 요구됩니다.
예를 들어, ins
요소가 ruby
요소 안에 있는 경우,
rt
요소를 포함할 수 없습니다. 이는
ruby
요소의 콘텐츠
모델에서 ins
요소를 허용하는
부분이 phrasing content를 허용하는
부분이고, rt
요소는 phrasing content가 아니기
때문입니다.
일부 경우 투명한 요소가 서로 중첩된 경우, 이 과정을 반복적으로 적용해야 합니다.
다음 마크업 조각을 고려하십시오:
< p >< object >< param >< ins >< map >< a href = "/" > Apples</ a ></ map ></ ins ></ object ></ p >
"Apples"가 a
요소 안에 허용되는지
확인하기 위해 콘텐츠 모델을 검사합니다. a
요소의 콘텐츠 모델은 투명하며,
map
요소의 콘텐츠 모델도
투명하고, ins
요소의 콘텐츠
모델도 투명하며, object
요소의 투명한
부분에 ins
요소가 포함됩니다.
object
요소는
p
요소 안에 있으며, 이 요소의 콘텐츠
모델은 phrasing content입니다.
따라서 "Apples"는 텍스트가 phrasing content이므로 허용됩니다.
투명한 요소에 부모가 없을 때, 그 콘텐츠 모델의 "투명한" 부분은 대신에 어떤 flow content라도 허용되는 것으로 취급해야 합니다.
이 섹션에서 정의된 문단 용어는 p
요소의 정의에만 사용되는 것이 아니라, 여기서 정의된 문단 개념은 문서를 해석하는 방법을 설명하는 데 사용됩니다. p
요소는 문단을 마크업하는 여러 가지 방법 중 하나일 뿐입니다.
문단은 일반적으로 특정 주제를 다루는 하나 이상의 문장으로 구성된 텍스트 블록을 형성하는 phrasing content의 연속이지만, 보다 일반적인 주제별 그룹화에도 사용할 수 있습니다. 예를 들어, 주소도 문단이고, 양식의 일부, 서명, 또는 시의 연도 문단으로 간주될 수 있습니다.
다음 예제에서는 섹션에 두 개의 문단이 있습니다. 또한 문단이 아닌 phrasing content를 포함하는 제목도 있습니다. 주석과 inter-element whitespace가 문단을 형성하지 않는 것에 유의하십시오.
< section >
< h2 > Example of paragraphs</ h2 >
This is the < em > first</ em > paragraph in this example.
< p > This is the second.</ p >
<!-- This is not a paragraph. -->
</ section >
flow content의 문단은 문서가 a
, ins
, del
, map
요소가 없는 상태로 표시되는 것과 관련하여 정의됩니다. 이러한
요소들은 하이브리드 콘텐츠 모델을 가지고 있어서 문단 경계를 가로지를 수 있기 때문입니다. 아래 첫 번째 두 예제에서 보여주듯이 말입니다.
일반적으로 요소가 문단 경계를 가로지르지 않도록 하는 것이 좋습니다. 이러한 마크업을 유지하는 것은 어렵습니다.
다음 예제는 앞서 예제에서 사용한 마크업에 ins
및 del
요소를 추가하여 일부 마크업이 변경되었음을 나타냅니다(이
경우 변경 사항이 별 의미가 없음을 인정합니다). 이 예제는 ins
요소와 del
요소에도 불구하고 이전 예제와 동일한 문단을 가지고
있습니다. ins
요소는 제목과 첫 번째 문단을 가로지르고,
del
요소는 두 문단 사이의 경계를 가로지릅니다.
< section >
< ins >< h2 > Example of paragraphs</ h2 >
This is the < em > first</ em > paragraph in</ ins > this example< del > .
< p > This is the second.</ p ></ del >
<!-- This is not a paragraph. -->
</ section >
뷰 view가 DOM의 모든 a
, ins
, del
, map
요소를 해당 contents로 대체한 뷰라고 가정하십시오. 그러면
view에서, 문단을 허용하는 요소의 모든 형제 phrasing
content 노드들 사이에서 다른 유형의 콘텐츠가 끼어들지 않은 연속된 노드들 중 첫 번째 노드를 first라 하고 마지막 노드를 last라
합니다. 임베디드 콘텐츠(embedded content)나
inter-element whitespace가 아닌 노드로
구성된 각 연속 구간에는 원래 DOM에서 first 바로 앞부터 last 바로 뒤까지 문단이 존재합니다. (따라서 문단은 a
, ins
, del
, map
요소를 가로지를 수 있습니다.)
준수 검사기는 문단이 서로 겹치는 경우 저자에게 경고할 수 있습니다 (이것은 object
, video
, audio
, canvas
요소와 같은 요소를 사용할 때, 또는 HTML을
추가로 포함할 수 있도록 허용하는 다른 네임스페이스의 요소를 통해 간접적으로 발생할 수 있습니다. 예를 들어 SVG svg
또는
MathML math
와 같은 요소입니다).
p
요소는 개별 문단을 감싸기 위해 사용할 수 있으며,
그렇지 않으면 각 문단을 서로 구분할 phrasing content 이외의 콘텐츠가 없을 경우에 사용됩니다.
다음 예제에서는 링크가 첫 번째 문단의 절반, 두 문단을 구분하는 제목 전체, 두 번째 문단의 절반을 가로지릅니다. 링크가 문단과 제목을 가로지릅니다.
< header >
Welcome!
< a href = "about.html" >
This is home of...
< h1 > The Falcons!</ h1 >
The Lockheed Martin multirole jet fighter aircraft!
</ a >
This page discusses the F-16 Fighting Falcon's innermost secrets.
</ header >
이 예제를 문단을 명시적으로 표시하고, 하나의 링크 요소를 세 개로 나누어 다시 마크업한 예제는 다음과 같습니다:
< header >
< p > Welcome! < a href = "about.html" > This is home of...</ a ></ p >
< h1 >< a href = "about.html" > The Falcons!</ a ></ h1 >
< p >< a href = "about.html" > The Lockheed Martin multirole jet
fighter aircraft!</ a > This page discusses the F-16 Fighting
Falcon's innermost secrets.</ p >
</ header >
일부 요소가 대체 콘텐츠를 정의할 때 문단이 중첩될 수 있습니다. 예를 들어 다음 섹션에서:
< section >
< h2 > My Cats</ h2 >
You can play with my cat simulator.
< object data = "cats.sim" >
To see the cat simulator, use one of the following links:
< ul >
< li >< a href = "cats.sim" > Download simulator file</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > Use online simulator</ a >
</ ul >
Alternatively, upgrade to the Mellblom Browser.
</ object >
I'm quite proud of it.
</ section >
여기에 다섯 개의 문단이 있습니다:
object
요소입니다.
첫 번째 문단은 다른 네 문단과 중첩되어 있습니다. "cats.sim" 리소스를 지원하는 사용자 에이전트는 첫 번째 문단만 표시할 것입니다. 하지만 대체 콘텐츠를 보여주는 사용자 에이전트는 첫 번째 문단의 첫 번째 문장을 두 번째 문단과 같은 문단으로 표시하고, 마지막 문단은 첫 번째 문단의 두 번째 문장의 시작 부분처럼 혼란스럽게 표시할 것입니다.
이러한 혼동을 피하기 위해 명시적 p
요소를 사용할 수 있습니다. 예를
들어:
< section >
< h2 > My Cats</ h2 >
< p > You can play with my cat simulator.</ p >
< object data = "cats.sim" >
< p > To see the cat simulator, use one of the following links:</ p >
< ul >
< li >< a href = "cats.sim" > Download simulator file</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > Use online simulator</ a >
</ ul >
< p > Alternatively, upgrade to the Mellblom Browser.</ p >
</ object >
< p > I'm quite proud of it.</ p >
</ section >
다음 속성들은 모든 HTML 요소에 공통적으로 지정될 수 있습니다(이 사양에서 정의되지 않은 요소들까지 포함하여):
accesskey
autocapitalize
autocorrect
autofocus
contenteditable
dir
draggable
enterkeyhint
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
popover
spellcheck
style
tabindex
title
translate
writingsuggestions
이 속성들은 오직 이 사양에서 정의된 HTML 요소에 대한 속성으로만 정의됩니다. 이 사양에서 이러한 속성을 가진 것으로 언급된 요소들은, 이 속성들을 가진 것으로 정의되지 않은 네임스페이스의 요소들은 이 속성들을 가진 요소로 간주되어서는 안 됩니다.
예를 들어, 다음 XML 조각에서, "bogus
" 요소는 이 사양에서 정의된 dir
속성을 가지고 있지 않습니다, 비록
"dir
"이라는 이름을 가진 속성을 가지고 있음에도 불구하고. 따라서, 내부 가장 안쪽의 span
요소의 방향성은 'rtl'로, "bogus
" 요소를 통해 간접적으로 div
요소에서 상속받은 것입니다.
< div xmlns = "http://www.w3.org/1999/xhtml" dir = "rtl" >
< bogus xmlns = "https://example.net/ns" dir = "ltr" >
< span xmlns = "http://www.w3.org/1999/xhtml" >
</ span >
</ bogus >
</ div >
모든 최신 엔진에서 지원됩니다.
DOM은 모든 네임스페이스에서 어떤 요소의 class
, id
, 그리고 slot
속성에 대한 사용자 에이전트 요구 사항을 정의합니다.
[DOM]
class
, id
, 및 slot
속성은 모든 HTML elements에 지정될 수 있습니다.
HTML elements에 지정될 때, class
속성은 요소가 속하는 여러 클래스를
나타내는 공백으로
구분된 토큰 집합의 값을 가져야 합니다.
요소에 클래스를 지정하면 CSS에서 셀렉터의 클래스 매칭, DOM에서 getElementsByClassName()
메서드 및 기타 기능에 영향을 미칩니다.
저자들이 class
속성에 사용할 수 있는
토큰에는 추가적인 제한이 없지만, 저자들은 콘텐츠의 성격을 설명하는 값 대신, 콘텐츠의 원하는
프레젠테이션을 설명하는 값을 사용하도록 권장됩니다.
HTML elements에 지정될 때, id
속성 값은 요소의 IDs
중에서 고유해야 하며, 하나 이상의 문자를 포함해야 합니다. 값에는 ASCII
공백이 포함되지 않아야 합니다.
id
속성은 해당
요소의 고유 식별자(ID)를 지정합니다.
ID가 어떤 형식을 취할 수 있는지에 대한 다른 제한은 없습니다. 특히, ID는 숫자로만 구성될 수 있으며, 숫자로 시작하거나 밑줄로 시작하거나, 단순히 구두점으로 구성될 수도 있습니다.
요소의 고유 식별자는 특정 문서의 특정 부분에 링크하기 위한 방법, 스크립팅 시 요소를 타겟팅하기 위한 방법, CSS에서 특정 요소를 스타일링하는 방법 등 다양한 목적으로 사용할 수 있습니다.
식별자는 불투명한 문자열입니다. id
속성의 값에서 특정 의미를 유추해서는 안 됩니다.
HTML elements에 특정된 slot
속성에 대한 적합성 요구 사항은
없습니다.
slot
속성은 요소에 슬롯을 할당하는 데 사용됩니다. slot
속성이 있는 요소는 slot
요소에 의해
생성된 슬롯에 할당됩니다. 이때 슬롯 요소는 쉐도우 트리 내에서
찾을 수 있어야 하며, 해당 트리의 루트가 호스트를
가지고 있어야 합니다. 이 호스트는 해당하는 slot
속성 값을 가지고 있습니다.
접근성 기술 제품이 HTML 요소와 속성으로는 노출하기 어려운 세분화된 인터페이스를 제공할 수 있도록, 접근성
기술 제품을 위한 주석(annotations) 세트를 지정할 수 있습니다. 이 주석 세트에는
ARIA role
및 aria-*
속성이 포함됩니다.
[ARIA]
다음 이벤트 핸들러 콘텐츠 속성은 모든 HTML 요소에 지정될 수 있습니다:
onauxclick
onbeforeinput
onbeforematch
onbeforetoggle
onblur
*
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextlost
oncontextmenu
oncontextrestored
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
*
onfocus
*
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
*
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
*
onscroll
*
onscrollend
*
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel
별표로 표시된 속성은 body
요소에
지정될 때 다른 의미를 가집니다. 이러한 요소들은 동일한 이름의 Window
객체의 이벤트 핸들러를 노출하기 때문입니다.
이 속성들은 모든 요소에 적용되지만, 모든 요소에서 유용하지는 않습니다. 예를 들어, 오직 미디어 요소만이 사용자 에이전트에 의해 발생된 volumechange
이벤트를
받을 수 있습니다.
사용자 정의 데이터 속성
(예: data-foldername
또는 data-msgid
)은 모든 HTML 요소에 지정될 수 있으며, 페이지에 특정한 사용자 데이터, 상태, 주석 등을 저장하는 데 사용됩니다.
HTML 문서에서, HTML 네임스페이스 내의 요소는
"http://www.w3.org/1999/xhtml
" 값을 정확히 가질 경우에만 xmlns
속성을 가질 수 있습니다. 이는 XML 문서에는 적용되지 않습니다.
HTML에서 xmlns
속성은 전혀 영향을 미치지 않습니다. 이 속성은 XML로의 이동을 약간 더 쉽게 하기 위해 허용되는 일종의 부적입니다. HTML 파서에 의해 구문 분석될 때 이 속성은 XML에서 네임스페이스 선언 속성들이 속하는
"http://www.w3.org/2000/xmlns/
" 네임스페이스가 아닌, 네임스페이스에 속하지 않습니다.
XML에서 xmlns
속성은 네임스페이스 선언 메커니즘의 일부이며, 실제로 네임스페이스에 속하지 않는 xmlns
속성을 지정할 수
없습니다.
XML은 또한 XML 네임스페이스 내의 모든 요소에 대해 xml:space
속성의 사용을 허용합니다. 이 속성은 HTML 요소에는 영향을 미치지 않으며,
HTML의 기본 동작은 공백을 유지하는 것입니다. [XML]
HTML 요소에서 xml:space
속성을 text/html
구문에서 직렬화할 수 있는 방법은 없습니다.
title
속성모든 현재 엔진에서 지원됩니다.
title
속성은
요소에 대한 권고 정보를 나타냅니다. 예를 들어, 링크에서는 대상 리소스의 제목이나 설명이 될 수 있으며, 이미지에서는 이미지 설명이나 크레딧이 될 수 있습니다. 문단에서는 주석이나 텍스트에 대한
설명이 될 수 있으며, 인용에서는 출처에 대한 추가 정보가 될 수 있습니다. 대화형 콘텐츠에서는 요소의 사용에 대한 라벨이나 지침이 될 수 있습니다. 이 속성의 값은 텍스트입니다.
title
속성에 의존하는 것은 현재 권장되지
않습니다. 많은 사용자 에이전트가 이 명세서에서 요구하는 대로 속성을 접근 가능한 방식으로 노출하지 않기 때문입니다 (예: 마우스와 같은 포인팅 장치를 필요로 하여 툴팁을 나타내는 경우, 이는 키보드
전용 사용자와 현대적인 휴대폰이나 태블릿을 사용하는 터치 전용 사용자에게 제외됩니다).
이 속성이 요소에 생략된 경우, 이는 HTML 요소의 가장 가까운 상위 요소에 설정된
title
속성의 권고 정보가 이 요소에도 관련이 있음을 암시합니다.
이 속성을 설정하면 이러한 암시가 무시되며, 상위 요소의 권고 정보가 이 요소와 관련이 없음을 명시적으로 나타냅니다. 속성을 빈 문자열로 설정하면 해당 요소에 권고 정보가 없음을 나타냅니다.
속성의 값에 U+000A 줄 바꿈(LF) 문자가 포함된 경우, 내용이 여러 줄로 나뉩니다. 각 U+000A 줄 바꿈(LF) 문자는 줄 바꿈을 나타냅니다.
title
속성에 줄 바꿈을 사용하는 것에 대해 주의가
필요합니다.
예를 들어, 다음 스니펫은 실제로 줄 바꿈이 포함된 약어의 확장을 정의합니다:
< p > My logs show that there was some interest in < abbr title = "Hypertext
Transport Protocol" > HTTP</ abbr > today.</ p >
일부 요소(예: link
, abbr
, input
)는 위에 설명된 의미 외에 title
속성에 대한 추가적인 의미를 정의합니다.
요소의 권고 정보는 다음 알고리즘이 반환하는 값입니다. 알고리즘이 값을 반환하면 즉시 종료됩니다. 알고리즘이 빈 문자열을 반환하면 권고 정보가 없습니다.
요소에 상위 요소가 있으면, 상위 요소의 권고 정보를 반환합니다.
빈 문자열을 반환합니다.
사용자 에이전트는 요소에 권고 정보가 있는 경우 사용자가 이를 인지할 수 있도록 해야 합니다. 그렇지 않으면 정보가 발견되지 않을 것입니다.
모든 현재 엔진에서 지원됩니다.
title
IDL 속성은 title
콘텐츠 속성을 반영해야 합니다.
lang
및 xml:lang
속성모든 현재 엔진에서 지원됩니다.
lang
속성
(네임스페이스 없음)은 요소의 콘텐츠와 텍스트가 포함된 모든 속성에 대해 기본 언어를 지정합니다. 이 값은 유효한 BCP 47 언어 태그 또는 빈 문자열이어야 합니다. 속성을 빈 문자열로 설정하면 기본
언어가 알 수 없음을 나타냅니다. [BCP47]
lang
속성은 XML 네임스페이스에 정의되어 있습니다.
[XML]
이 속성들이 요소에서 생략되면, 이 요소의 언어는 부모 요소의 언어와 동일합니다(부모 요소가 있는 경우). 다만 slot 요소는 쉐도우 트리에서 예외입니다.
네임스페이스 없는 lang
속성은 모든 HTML 요소에서 사용할 수 있습니다.
lang
속성은 HTML 요소에서 XML 문서뿐만 아니라 관련 사양에서 허용하는 경우 다른 네임스페이스의 요소에도 사용할 수 있습니다 (특히, MathML과 SVG는
lang
속성을 해당 요소에 지정하는 것을 허용합니다). 만약 동일한 요소에 네임스페이스가 없는 lang
속성과 lang
속성이 지정된 경우, 이들은 ASCII 대소문자
구분 없이 비교할 때 정확히 동일한 값을 가져야 합니다.
작성자는 lang
속성(예: XML 네임스페이스)을 HTML 요소에서 사용해서는 안 됩니다. XML로의 마이그레이션을 쉽게 하기 위해, 작성자는
xml:lang
이라는 리터럴 로컬 이름을 가진 네임스페이스가 없는 속성을 HTML 요소에서 명시할 수 있지만, 이러한 속성은 lang
속성이 네임스페이스 없이 함께 지정된 경우에만
명시해야 하며, 두 속성은 ASCII 대소문자
구분 없이 동일한 값을 가져야 합니다.
네임스페이스가 없고 접두사가 없으며 리터럴 로컬 이름이 "xml:lang
"인 속성은 언어 처리에 영향을 미치지 않습니다.
노드의 언어를 결정하기 위해, 사용자 에이전트는 다음 목록에서 적합한 첫 번째 단계를 사용해야 합니다:
lang
속성(예: XML 네임스페이스)이 설정된 요소일 경우
해당 속성의 값을 사용합니다.
lang
속성이 설정된 경우
해당 속성의 값을 사용합니다.
설정된 프래그마 설정 기본 언어가 있다면, 그것이 노드의 언어입니다. 설정된 프래그마 설정 기본 언어가 없다면, 더 높은 수준의 프로토콜(예: HTTP)에서 제공되는 언어 정보를 최종적인 대체 언어로 사용해야 합니다. 이러한 언어 정보가 없는 경우, 그리고 더 높은 수준의 프로토콜에서 여러 언어를 보고하는 경우, 노드의 언어는 알 수 없으며, 해당 언어 태그는 빈 문자열입니다.
결과 값이 인식되지 않는 언어 태그인 경우, 이는 주어진 언어 태그를 가진 알 수 없는 언어로 처리되어야 하며, 다른 모든 언어와 구분됩니다. 라운드트립이나 언어 태그를 기대하는 다른 서비스와의 통신을 위해, 사용자 에이전트는 알려지지 않은 언어 태그를 수정하지 않고 그대로 전달하고, BCP 47 언어 태그로 태그를 지정해야 하며, 이를 통해 이후 서비스가 데이터를 다른 유형의 언어 설명으로 해석하지 않도록 해야 합니다. [BCP47]
따라서, 예를 들어, lang="xyzzy"
가 있는 요소는 선택자 :lang(xyzzy)
(예: CSS)로 일치되지만,
:lang(abcde)
로는 일치하지 않습니다. 둘 다 똑같이 잘못되었더라도 말입니다. 마찬가지로, 웹 브라우저와 스크린 리더가 협력하여 요소의 언어를 전달하는 경우, 브라우저는
해당 언어가 잘못되었음을 알고 있더라도 스크린 리더에 "xyzzy" 언어로 알려주어야 합니다. 다른 구문으로 언어 이름을 인코딩할 수 있는 BCP 47 이외의 구문을 지원하는 스크린 리더가 있으며, 그
다른 구문에서 "xyzzy" 문자열이 벨라루스어를 나타내는 방법이라면, 벨라루스어로 텍스트를 처리하기 시작하는 것은 **잘못된** 일입니다. BCP 47 코드에서 벨라루스어는 "be" 코드로 설명되기
때문입니다.
결과 값이 빈 문자열인 경우, 이는 노드의 언어가 명시적으로 알 수 없음을 의미합니다.
사용자 에이전트는 요소의 언어를 사용하여 적절한 처리나 렌더링(예: 적절한 글꼴이나 발음 선택, 사전 선택 또는 날짜 선택기와 같은 폼 컨트롤의 사용자 인터페이스)을 결정할 수 있습니다.
모든 현재 엔진에서 지원됩니다.
lang
IDL 속성은 네임스페이스가 없는
lang
콘텐츠 속성을 반영해야 합니다.
translate
속성모든 현재 엔진에서 지원됩니다.
translate
속성은 페이지가
로컬라이즈될 때 요소의 속성 값과 텍스트
노드 자식들의 값이 번역되어야 하는지 아니면 변경 없이 유지되어야 하는지를 지정하는 데 사용됩니다. 이 속성은 열거형 속성이며, 다음 키워드와 상태를 가집니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
yes
| yes | 번역 모드를 번역 가능 상태로 설정합니다. |
(빈 문자열) | ||
no
| no | 번역 모드를 번역하지 않음 상태로 설정합니다. |
이 속성의 누락된 값의 기본값과 유효하지 않은 값의 기본값은 모두 상속 상태입니다.
모든 요소(비HTML 요소 포함)는 번역 모드를 가지며, 이는 번역 가능 상태 또는 번역하지 않음 상태 중 하나입니다. 요소의 translate
속성이 yes 상태에 있으면, 해당 요소의
번역 모드는 번역 가능 상태에 있습니다. 그렇지 않으면 요소의 translate
속성이 no 상태에 있으면, 해당 요소의 번역 모드는 번역하지 않음 상태에 있습니다. 그렇지 않은 경우, 요소의 translate
속성이 상속 상태에 있거나
요소가 HTML 요소가 아니므로 translate
속성이 없습니다. 이 두 경우
모두, 요소의 번역 모드는 요소의 부모 요소의 상태와 동일하거나, 요소의 부모 요소가 null이면 번역 가능 상태에 있습니다.
요소가 번역 가능 상태에 있으면, 페이지가 로컬라이즈될 때 요소의 번역 가능한 속성과 텍스트
노드 자식들의 값이 번역됩니다.
요소가 번역하지 않음 상태에 있으면, 페이지가 로컬라이즈될 때 요소의 속성 값과 텍스트
노드 자식들의 값은 그대로 유지됩니다. 예를 들어, 요소에 사람의 이름이나 컴퓨터 프로그램의 이름이 포함된 경우입니다.
다음 속성들은 번역 가능한 속성입니다:
abbr
th
요소에 있는 경우
alt
area
,
img
, input
요소에 있는 경우
content
meta
요소에 있는 경우, name
속성이 번역 가능한 메타데이터 이름을
지정하는 경우
download
a
및 area
요소에 있는 경우
label
optgroup
, option
, track
요소에 있는 경우
lang
HTML 요소에 있는 경우; 번역에서 사용되는 언어와 일치하도록 "번역"되어야 합니다.
placeholder
input
및
textarea
요소에 있는 경우
srcdoc
iframe
요소에 있는 경우;
구문 분석되고 재귀적으로 처리되어야 합니다.
style
HTML 요소에 있는 경우; 구문 분석되고 재귀적으로 처리되어야 합니다(예: 'content' 속성의 값에 대해).
title
모든 HTML 요소에 있는 경우
value
input
요소에 있는 경우,
type
속성이 버튼 상태 또는
리셋
버튼 상태에 있는 경우
다른 명세서에서는 번역 가능한 속성으로
정의될 수 있는 다른 속성들을 정의할 수 있습니다. 예를 들어, ARIA는 aria-label
속성을 번역 가능으로 정의할 수 있습니다.
translate
IDL 속성은 가져올
때, 요소의 번역 모드가 번역 가능 상태인 경우 true를 반환하고, 그렇지 않은
경우 false를 반환해야 합니다. 설정할 때, 콘텐츠 속성의 값을 새 값이 true인 경우 "yes
"로, 그렇지 않은 경우 "no
"로 설정해야 합니다.
이 예제에서는 페이지가 로컬라이즈될 때 문서의 모든 내용이 번역되어야 하지만, 샘플 키보드 입력과 샘플 프로그램 출력은 번역되지 않아야 합니다:
<!DOCTYPE HTML>
< html lang = en > <!-- default on the document element is translate=yes -->
< head >
< title > The Bee Game</ title > <!-- implied translate=yes inherited from ancestors -->
</ head >
< body >
< p > The Bee Game is a text adventure game in English.</ p >
< p > When the game launches, the first thing you should do is type
< kbd translate = no > eat honey</ kbd > . The game will respond with:</ p >
< pre >< samp translate = no > Yum yum! That was some good honey!</ samp ></ pre >
</ body >
</ html >
dir
속성모든 현재 엔진에서 지원됩니다.
dir
속성은 열거형 속성이며 다음과 같은 키워드와 상태가 있습니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
ltr
| ltr | 요소의 내용이 명시적으로 좌에서 우로 방향이 고립된 텍스트입니다. |
rtl
| rtl | 요소의 내용이 명시적으로 우에서 좌로 방향이 고립된 텍스트입니다. |
auto
| auto | 요소의 내용이 명시적으로 방향이 고립된 텍스트이지만, 방향은 요소의 내용을 사용하여 프로그래밍 방식으로 결정됩니다 (아래에 설명되어 있습니다). |
auto 상태에서 사용되는 휴리스틱은 매우 단순합니다 (양방향 알고리즘에서 단락 수준 결정과 유사하게 강한 방향성을 가진 첫 번째 문자를 참조합니다). 작성자는 텍스트의 방향이 정말로 알려지지 않았고 더 나은 서버 측 휴리스틱을 적용할 수 없을 때만 이 값을 최후의 수단으로 사용하는 것이 좋습니다. [BIDI]
이 속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 정의되지 않은 상태입니다.
요소(HTML 요소뿐만 아니라 HTML 요소)의 방향성은 'ltr' 또는 'rtl' 중 하나입니다.
요소 element에 대해 방향성을 계산하려면
element의 dir
속성 상태를 기반으로 합니다:
dir
속성은 HTML 요소에 대해서만 정의되므로 다른 네임스페이스의 요소에는 존재할 수 없습니다. 따라서 다른 네임스페이스의 요소는
항상 부모 방향성을 사용하게 됩니다.
자동 방향성 양식 연관 요소는 다음과 같습니다:
input
요소로, 그 type
속성은 , Text, Search, Telephone, URL, Email, Password, Submit Button, Reset
Button, 또는 Button 상태에 있습니다.
textarea
요소입니다.
요소 element에 대한 자동 방향성을 계산하려면:
element가 자동 방향성 양식 관련 요소인 경우:
element가 slot
요소이고, root가
shadow root이며 element의 할당된 노드가 비어 있지 않은 경우:
각 노드 child에 대해 element의 할당된 노드 중:
childDirection을 null로 설정합니다.
child가 Text
노드인 경우, childDirection을
텍스트 노드
방향성으로 설정합니다.
그 외의 경우:
childDirection을 child의 포함된 텍스트 자동 방향성으로 설정하고, canExcludeRoot을 true로 설정합니다.
childDirection이 null이 아닌 경우, childDirection을 반환합니다.
null을 반환합니다.
element의 포함된 텍스트 자동 방향성을 반환합니다. canExcludeRoot가 false로 설정된 경우.
element의 포함된 텍스트 자동 방향성을 계산하려면, canExcludeRoot라는 불리언 값을 사용합니다:
각 노드 descendant에 대해 element의 하위 요소에서 트리 순서대로:
다음 중 하나인 경우
다음 중 하나인 경우:
그렇다면 계속.
descendant가 slot
요소이고, 그 root가
shadow root인 경우, 해당 shadow root의 방향성을 반환합니다. shadow root의 host.
descendant의 텍스트 노드 방향성을 result로 설정합니다.
result가 null이 아닌 경우, result를 반환합니다.
null을 반환합니다.
텍스트 노드 text의 텍스트 노드 방향성을 계산하려면:
text의 데이터에 이중 방향 문자 유형이 L, AL, 또는 R인 코드 포인트가 포함되어 있지 않으면 null을 반환합니다. [BIDI]
text의 데이터에서 이중 방향 문자 유형이 L, AL, 또는 R인 첫 번째 코드 포인트를 codePoint로 설정합니다.
codePoint가 AL 또는 R 유형의 이중 방향 문자 유형이면 'rtl'을 반환합니다.
codePoint가 L 유형의 이중 방향 문자 유형이면 'ltr'을 반환합니다.
element의 부모 방향성을 계산하려면:
element의 부모 노드 parentNode를 설정합니다.
parentNode가 shadow root인 경우, parentNode의 방향성을 반환합니다. parentNode의 host.
parentNode가 요소인 경우, parentNode의 방향성을 반환합니다.
'ltr'을 반환합니다.
이 속성은 양방향 알고리즘과 관련된 렌더링 요구 사항을 포함합니다.
어떤 HTML 요소의 속성의 방향성은 텍스트가 렌더링에 포함될 때 사용되며, 다음 목록에서 첫 번째 적절한 단계를 기준으로 결정됩니다:
dir
속성이 auto 상태에 있는 경우
속성 값의 논리 순서에서 양방향 문자 유형이 L, AL 또는 R인 첫 번째 문자를 찾습니다. [BIDI]
다음 속성들은 방향성 지원 속성입니다:
abbr
는 th
요소에 있습니다.
alt
는 area
, img
, 그리고 input
요소에 있습니다.
content
는 meta
요소에 있습니다. 단, name
속성이 주로 사람 읽기 용도로 의도된 메타데이터
이름을 지정하는 경우입니다.
label
은 optgroup
, option
, 그리고 track
요소에 있습니다.
placeholder
는 input
그리고 textarea
요소에 있습니다.
title
는 모든 HTML 요소에 있습니다.
document.dir [ = value ]
ltr
, rtl
, 또는 auto
를 설정하여 html 요소의 dir
속성 값을 변경할 수 있습니다.
해당 요소가 없으면 빈 문자열을 반환하고 새 값을 무시합니다.
모든 현재 엔진에서 지원됩니다.
dir
IDL 속성은 해당 요소의 dir
내용 속성을 반영해야 하며, 알려진 값만으로 제한됩니다.
모든 현재 엔진에서 지원됩니다.
dir
IDL 속성은 Document
객체의 dir
내용 속성을 반영해야 하며, 알려진 값만으로 제한됩니다. 해당 요소가 없으면 속성은 빈 문자열을 반환하고 설정 시 아무것도
하지 않아야 합니다.
작성자는 CSS를 사용하는 대신 dir
속성을 사용하여 텍스트
방향을 표시하는 것이 권장됩니다. 이렇게 하면 CSS가 없는 경우에도 (예: 검색 엔진에 의해 해석될 때) 문서가 올바르게 렌더링됩니다.
이 마크업 조각은 IM 대화의 일부입니다.
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > How do you write "What's your name?" in Arabic?</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > ما اسمك؟</ p >
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > Thanks.</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > That's written "شكرًا".</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > Do you know how to write "Please"?</ p >
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > "من فضلك", right?</ p >
적절한 스타일 시트와 p
요소에 대한 기본 정렬 스타일, 즉
단락의 시작 가장자리에 텍스트를 정렬하는 스타일을 사용하면, 렌더링 결과는 다음과 같이 될 수 있습니다:
앞서 언급한 것처럼, auto
값이 만능은 아닙니다. 이
예시에서 마지막 단락은 아랍어 문자로 시작하기 때문에 오른쪽에서 왼쪽으로 쓰여진 텍스트로 오해되어 "right?"가 아랍어 텍스트의 왼쪽에 위치하게 됩니다.
style
속성모든 현재 엔진에서 지원됩니다.
모든 HTML 요소에는 style
내용 속성이 설정될 수 있습니다. 이는 스타일 속성으로, CSS Style Attributes에 정의되어 있습니다. [CSSATTR]
CSS를 지원하는 사용자 에이전트에서는, 속성이 추가되거나 값이 변경될 때, 스타일 속성에 대한 규칙에 따라 속성의 값을 파싱해야 합니다. [CSSATTR]
그러나, 속성의 콘텐츠 보안 정책에 의해 요소의
인라인 동작이 차단되어야 하는지 여부 알고리즘이 속성의 요소에 대해
"Blocked
"를 반환하는 경우, 속성의 값에 정의된 스타일 규칙은 해당 요소에 적용되지 않아야 합니다. [CSP]
어떠한 요소에 style
속성을 사용하는 문서라도, 해당 속성이 제거된
경우에도 문서는 이해 가능하고 사용할 수 있어야 합니다.
특히, 콘텐츠를 숨기거나 표시하기 위해 또는 문서에 포함되지 않은 의미를 전달하기 위해 style
속성을 사용하는 것은 비표준입니다. (콘텐츠를 숨기거나
표시하려면 속성을 사용하십시오.)
element.style
해당 요소의 CSSStyleDeclaration
객체를 반환합니다.
style
IDL 속성은 CSS Object Model에 정의되어 있습니다. [CSSOM]
다음 예제에서 색상을 나타내는 단어들은 span
요소와 style
속성을 사용하여 시각적 매체에서 관련 색상으로
표시되도록 마크업되었습니다.
< p > My sweat suit is < span style = "color: green; background:
transparent" > green</ span > and my eyes are < span style = "color: blue;
background: transparent" > blue</ span > .</ p >
data-*
속성을 사용하여비가시적 데이터를 포함하기
모든 현재 엔진에서 지원됩니다.
사용자 정의 데이터 속성은 네임스페이스에 속하지 않는 속성으로, 이름이 "data-
"로 시작하고 하이픈 뒤에 적어도 한 글자가 있으며, XML 호환되고, ASCII 대문자가 포함되지 않은 속성입니다.
HTML 요소의 모든 속성 이름은 HTML 문서에서 자동으로 ASCII 소문자로 변환되므로, 이 규칙은 그러한 문서에 영향을 미치지 않습니다.
사용자 정의 데이터 속성은 페이지나 애플리케이션에 적절한 속성이나 요소가 없는 경우에만 사용자 정의 데이터, 상태, 주석 등을 저장하기 위해 의도되었습니다.
이러한 속성은 속성을 사용하는 사이트의 관리자가 알지 못하는 소프트웨어가 사용하는 것을 의도하지 않았습니다. 여러 독립적인 도구가 사용하는 일반적인 확장 기능의 경우, 이 사양이 기능을 명시적으로 제공하도록 확장되거나 마이크로데이터와 같은 기술(표준화된 어휘와 함께)을 사용해야 합니다.
예를 들어, 음악에 대한 사이트는 앨범의 트랙을 나타내는 목록 항목을 사용자 정의 데이터 속성으로 주석을 달아 각 트랙의 길이를 포함할 수 있습니다. 이 정보는 사이트 자체에서 트랙 길이로 목록을 정렬하거나 특정 길이의 트랙을 필터링하는 데 사용할 수 있습니다.
< ol >
< li data-length = "2m11s" > Beyond The Sea</ li >
...
</ ol >
그러나, 사용자가 해당 음악 사이트와 관련이 없는 일반 소프트웨어를 사용하여 이 데이터를 통해 특정 길이의 트랙을 검색하는 것은 부적절합니다.
이 속성들은 사이트 자체의 스크립트에서 사용하기 위한 것이며, 공용 메타데이터를 위한 일반 확장 메커니즘이 아닙니다.
유사하게, 페이지 작성자는 자신이 사용하려는 번역 도구에 대한 정보를 제공하는 마크업을 작성할 수 있습니다:
< p > The third < span data-mytrans-de = "Anspruch" > claim</ span > covers the case of < span
translate = "no" > HTML</ span > markup.</ p >
이 예에서 "data-mytrans-de
" 속성은 MyTrans 제품이 "claim"이라는 문구를 독일어로 번역할 때 사용할 특정 텍스트를 제공합니다. 그러나, 모든
언어에서 "HTML"은 변경되지 않도록 translate
표준 속성이 사용됩니다. 표준 속성이 제공될 때는 사용자 정의 데이터 속성을 사용할 필요가 없습니다.
이 예에서, 사용자 정의 데이터 속성은 PaymentRequest
에
대한 기능 검출 결과를 저장하는 데 사용됩니다. 이는 체크아웃 페이지를 다르게 스타일링하기 위해 CSS에서 사용될 수 있습니다.
< script >
if ( 'PaymentRequest' in window) {
document. documentElement. dataset. hasPaymentRequest = '' ;
}
</ script >
여기서 "data-has-payment-request
" 속성은 효과적으로 불리언 속성으로 사용됩니다.
속성의 존재를 확인하는 것만으로도 충분합니다. 그러나 작성자가 원한다면 나중에 일부 값을 포함시켜 기능의 제한된 기능을 나타낼 수 있습니다.
모든 HTML 요소는 임의의 값으로 사용자 정의 데이터 속성을 지정할 수 있습니다.
작성자는 이러한 확장을 설계할 때 속성이 무시되고 관련 CSS가 제거되더라도 페이지가 여전히 사용 가능하도록 신중하게 설계해야 합니다.
사용자 에이전트는 이러한 속성이나 값에서 구현 동작을 파생해서는 안 됩니다. 사용자 에이전트를 위한 사양에서는 이러한 속성이 의미 있는 값을 갖도록 정의해서는 안 됩니다.
JavaScript 라이브러리는 페이지의 일부로 간주되므로 사용자 정의 데이터 속성을 사용할 수 있습니다. 많은 작성자가 재사용하는 라이브러리 작성자는 충돌 위험을 줄이기 위해 속성 이름에 자신의 이름을 포함하는 것이 좋습니다. 적절한 경우, 라이브러리 작성자는 또한 속성 이름에 사용되는 정확한 이름을 사용자 정의할 수 있는 API를 제공하는 것이 좋습니다. 이렇게 하면 라이브러리 작성자가 모르게 동일한 이름을 선택한 경우 동일한 페이지에서 라이브러리를 사용할 수 있으며, 상호 호환되지 않는 경우에도 특정 라이브러리의 여러 버전을 동일한 페이지에서 사용할 수 있습니다.
예를 들어, "DoQuery"라는 라이브러리는 data-doquery-range
와 같은 속성 이름을 사용할 수 있으며, "jJo"라는 라이브러리는
data-jjo-range
와 같은 속성 이름을 사용할 수 있습니다. jJo 라이브러리는 또한 J.setDataPrefix('j2')
와 같이 속성
이름에 사용할 접두사를 설정하는 API를 제공하여 data-j2-range
와 같은 이름을 갖게 할 수 있습니다.
element.dataset
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
요소의 DOMStringMap
객체를 반환합니다.
하이픈으로 연결된 이름은 camel-case로 변환됩니다. 예를 들어, data-foo-bar=""
는
element.dataset.fooBar
로 변환됩니다.
dataset
IDL 속성은 요소의
모든 data-*
속성에 대해 편리한 접근자를 제공합니다. 가져올 때, dataset
IDL 속성은 이 요소와 연결된 DOMStringMap
을
반환해야 합니다.
DOMStringMap
인터페이스는 dataset
속성에 사용됩니다. 각 DOMStringMap
에는
연결된 요소가 있습니다.
[Exposed =Window ,
LegacyOverrideBuiltIns ]
interface DOMStringMap {
getter DOMString (DOMString name );
[CEReactions ] setter undefined (DOMString name , DOMString value );
[CEReactions ] deleter undefined (DOMString name );
};
DOMStringMap
의 이름-값 쌍을 가져오기 위해 다음 알고리즘을 실행합니다:
list를 빈 이름-값 쌍 목록으로 설정합니다.
연결된 요소의 첫 다섯 문자가 "data-
"이고, 나머지 문자가 ASCII 대문자를 포함하지 않는 각 내용 속성에 대해, list에 이름-값 쌍을
추가합니다. 이 때 이름은 속성의 이름에서 첫 다섯 문자를 제거한 것이며, 값은 속성의 값입니다.
list에 있는 각 이름에 대해, 이름의 U+002D 하이픈-마이너스 문자(-) 뒤에 ASCII 소문자가 따라오는 경우, U+002D 하이픈-마이너스 문자(-)를 제거하고 뒤따르는 문자를 동일한 문자로 ASCII 대문자로 변환합니다.
list를 반환합니다.
DOMStringMap 객체의 지원되는 속성 이름은 언제나 이 시점에서 DOMStringMap의 이름-값 쌍을 가져올 때 반환된 이름 목록입니다.
이름이 지정된 속성의 값을 결정하려면 name을 DOMStringMap
에서
반환된 DOMStringMap의
이름-값 쌍을 가져와 이름 구성 요소가 name인 쌍의 값 구성 요소를 반환합니다.
새 이름이 지정된 속성의 값을 설정하려면 또는 기존 이름이 지정된 속성의 값을 설정하려면 name과 새로운 값 value를 가지고 다음 단계를 실행합니다:
name에 U+002D 하이픈-마이너스 문자(-) 뒤에 ASCII
소문자가 포함되어 있으면, "SyntaxError
" DOMException
을
발생시킵니다.
name의 각 ASCII 대문자 앞에 U+002D 하이픈-마이너스 문자(-)를 삽입하고, 문자를 동일한 문자로 ASCII 소문자로 변환합니다.
name의 앞에 "data-" 문자열을 삽입합니다.
name이 XML Name
생산 규칙과 일치하지 않으면 "InvalidCharacterError
" DOMException
을
발생시킵니다.
속성 값을 설정합니다 DOMStringMap
의
연결된
요소에 name과 value를 사용합니다.
기존 이름이 지정된 속성을 삭제하려면 name을 사용하여 DOMStringMap
의
연결된 요소에서
속성을 삭제합니다.
이 알고리즘은 DOMStringMap의 이름-값 쌍을 가져오는 이전 알고리즘에서 제공한 이름에 대해서만 Web IDL에 의해 호출됩니다. [WEBIDL]
웹 페이지에서 예를 들어 게임의 일부로서 요소가 우주선을 나타내려면 class
속성과 함께 data-*
속성을 사용해야 합니다:
< div class = "spaceship" data-ship-id = "92432"
data-weapons = "laser 2" data-shields = "50%" data- x = "30" data-y = "10" data-z = "90" >
< button class = "fire"
onclick = "spaceships[this.parentNode.dataset.shipId].fire()" >
Fire
</ button >
하이픈이 있는 속성 이름이 API에서 카멜 케이스로 변환되는 방식을 주목하세요.
다음 조각과 유사한 구조의 요소가 있는 경우:
< img class = "tower" id = "tower5" data- x = "12" data-y = "5"
data-ai = "robotarget" data-hp = "46" data-ability = "flames"
src = "towers/rocket.png" alt = "Rocket Tower" >
...누군가는 첫 번째 인수로 처리할 요소를 받아들이는 splashDamage()
함수를 상상할 수 있습니다:
function splashDamage( node, x, y, damage) {
if ( node. classList. contains( 'tower' ) && // checking the 'class' attribute
node. dataset. x == x && // reading the 'data-x' attribute
node. dataset. y == y) { // reading the 'data-y' attribute
var hp = parseInt( node. dataset. hp); // reading the 'data-hp' attribute
hp = hp - damage;
if ( hp < 0 ) {
hp = 0 ;
node. dataset. ai = 'dead' ; // setting the 'data-ai' attribute
delete node. dataset. ability; // removing the 'data-ability' attribute
}
node. dataset. hp = hp; // setting the 'data-hp' attribute
}
}
innerText
및 outerText
속성모든 최신 엔진에서 지원됨.
element.innerText [ = value ]
요소의 "렌더링된" 텍스트 콘텐츠를 반환합니다.
지정된 값으로 요소의 자식을 대체할 수 있지만, 줄 바꿈은 br
요소로 변환됩니다.
element.outerText [ = value ]
요소의 "렌더링된" 텍스트 콘텐츠를 반환합니다.
지정된 값으로 요소를 대체할 수 있지만, 줄 바꿈은
br
요소로 변환됩니다.
HTMLElement element를 주어진 텍스트 가져오기 단계는 다음과 같습니다:
element가 렌더링되지 않는 경우 또는 사용자 에이전트가 비CSS 사용자 에이전트인 경우, element의 하위 텍스트 콘텐츠를 반환합니다.
이 단계는 예상치 못한 결과를 초래할 수 있습니다. 예를 들어, innerText
getter가
렌더링되지 않은 요소에서 호출되면 텍스트 콘텐츠가 반환되지만, 렌더링된 요소에서 호출되면 렌더링되지 않은 모든 자식 요소의 텍스트 콘텐츠는 무시됩니다.
results를 새로 비어있는 목록으로 만듭니다.
element의 각 자식 노드 node에 대해:
current를 목록으로 설정하고, node에 대해 렌더링된 텍스트 수집 단계를 실행한 결과로 설정합니다. results의 각 항목은 문자열이거나 양의 정수(필수 줄 바꿈 수)입니다.
직관적으로, 필수 줄 바꿈 수 항목은 해당 지점에 특정 수의 줄 바꿈이 나타남을 의미하지만, 인접한 필수 줄 바꿈 수 항목에 의해 유도된 줄 바꿈과 함께 축소될 수 있습니다. 이는 CSS의 여백 축소와 유사합니다.
current의 각 항목 item을 results에 추가합니다.
비어있는 문자열 항목을 results에서 제거합니다.
연속된 필수 줄 바꿈 수 항목을 results의 시작이나 끝에서 제거합니다.
남아있는 연속된 필수 줄 바꿈 수 항목을 해당 항목의 값의 최대값만큼의 U+000A LF 코드 포인트로 이루어진 문자열로 대체합니다.
results의 문자열 항목을 연결하여 반환합니다.
모든 최신 엔진에서 지원됩니다.
innerText
및
outerText
getter 단계는
텍스트 가져오기 단계를 this로
실행한 결과를 반환하는 것입니다.
주어진 렌더링된 텍스트 수집 단계에서 노드 node는 다음과 같습니다:
node의 각 자식 노드에 대해 렌더링된 텍스트 수집 단계를 실행하여 items를 설정하고, node의 각 자식 노드에서 트리 순서로 실행된 결과를 연결하여 단일 목록으로 설정합니다.
node의 계산된 값이 'visibility'가 'visible'이 아닌 경우 items를 반환합니다.
node가 렌더링되지 않는 경우 items를 반환합니다. 이 단계의 목적은 계산된 값이 'display' 속성이 'none'이 아닌 경우, 다음과 같은 요소들이 설명된 대로 동작해야 합니다:
items는 'display:contents'로 인해 비어있지 않을 수 있습니다.
node가 텍스트
노드인 경우, 콘텐츠 순서에 따라 node가 생성한 각 CSS 텍스트 박스에 대해 CSS 'white-space' 처리 규칙과 'text-transform' 규칙이 적용된 후의 텍스트를 계산하고, items를 해당
문자열 목록으로 설정한 후 items를 반환합니다. CSS 'white-space' 처리 규칙은 약간 수정되었습니다: 줄 끝의 축소 가능한 공백은 항상 축소되지만, 줄이
블록의 마지막 줄이거나 br
요소로 끝날 때만 제거됩니다. 소프트 하이픈은 유지되어야 합니다.
[CSSTEXT]
node가 br
요소인 경우, 단일 U+000A LF 코드 포인트가 포함된 문자열을 items에 추가합니다.
node의 계산된 값이 'display' 속성이 'table-cell'이고, node의 CSS 박스가 포함하는 'table-row' 박스의 마지막 'table-cell' 박스가 아닌 경우, 단일 U+0009 TAB 코드 포인트가 포함된 문자열을 items에 추가합니다.
node의 계산된 값이 'display' 속성이 'table-row'이고, node의 CSS 박스가 포함하는 가장 가까운 조상 'table' 박스의 마지막 'table-row' 박스가 아닌 경우, 단일 U+000A LF 코드 포인트가 포함된 문자열을 items에 추가합니다.
node가 p
요소인 경우, items의 시작과 끝에 2(필수 줄 바꿈 수)를 추가합니다.
node의 사용된 값이 'display' 속성이 블록 수준 또는 'table-caption'인 경우, items의 시작과 끝에 1(필수 줄 바꿈 수)을 추가합니다. [CSSDISPLAY]
부동 요소와 절대 위치 요소는 이 범주에 속합니다.
items를 반환합니다.
대부분의 대체 요소(예: textarea
, input
, video
— button
은 제외)의 하위 노드는
엄밀히 말하면 CSS에 의해 렌더링되지 않으며, 따라서 이 알고리즘의 목적을 위해 CSS 상자가 없습니다.
이 알고리즘은 범위에서 작동하도록 일반화될 수 있습니다. 그런 다음 이를 Selection
의
문자열화기 및 범위에 직접 노출시키는 기반으로 사용할 수 있습니다. Bugzilla 버그 10583를 참조하십시오.
HTMLElement element와 문자열 value가 주어진 경우, inner text 설정 단계는 다음과 같습니다:
fragment를 value에 대한 렌더링된 텍스트 조각으로 설정하고, element의 노드 문서를 사용합니다.
element 내에서 fragment로 모두 교체합니다.
innerText
setter 단계는 inner text 설정 단계를
실행하는 것입니다.
outerText
setter 단계는 다음과
같습니다:
this의 부모가 null인 경우, "NoModificationAllowedError
" DOMException을 던집니다.
fragment를 주어진 값에 대한 렌더링된 텍스트 조각으로, this의 노드 문서를 기준으로 설정합니다.
fragment에 자식이 없는 경우,
fragment에 빈 문자열을 가진 새 Text
노드를 추가합니다. 노드
문서는 this의 노드 문서입니다.
next가 null이 아니고 next의 이전
형제가 Text
노드인 경우, 다음 텍스트 노드와 병합합니다.
previous가 Text
노드인 경우, 다음 텍스트 노드와 병합합니다.
렌더링된 텍스트 조각은 document 문서에 대해 주어진 문자열 input을 사용하여 다음 단계들을 실행한 결과입니다:
fragment를 document 문서를 가진 새로운 DocumentFragment
로
설정합니다.
position을 input에 대한 위치 변수로 설정하고, 초기에는 input의 시작을 가리키도록 합니다.
text를 빈 문자열로 설정합니다.
position이 input의 끝을 지나지 않을 때까지 다음을 반복합니다:
U+000A LF 또는 U+000D CR이 아닌 코드 포인트의 시퀀스를 수집하고, 그 결과를 text로 설정합니다.
text가 빈 문자열이 아닌 경우, document 문서의 새로운 Text
노드를 text를 가진 상태로 fragment에 추가합니다.
position이 input의 끝을 지나지 않았고, position에서의 코드 포인트가 U+000A LF 또는 U+000D CR인 동안:
position에서의 코드 포인트가 U+000D CR이고 다음 코드 포인트가 U+000A LF인 경우, position을 input의 다음 코드 포인트로 이동합니다.
position을 input의 다음 코드 포인트로 이동합니다.
document, br
요소, 그리고 HTML 네임스페이스를 사용하여 요소를 생성한 결과를 fragment에 추가합니다.
fragment를 반환합니다.
주어진 Text
노드 node를 사용하여 다음 텍스트 노드와 병합하는 방법:
텍스트
콘텐츠는 HTML
요소 내의 텍스트
노드에 포함될 수 있으며,
컨텐츠에
존재하며 자유 형식 텍스트를 허용하는 HTML
요소의 속성에서 U+202A에서 U+202E와 U+2066에서 U+2069 사이의 문자(양방향 알고리즘 형식화 문자)를 포함할 수 있습니다. [BIDI]
작성자는 dir
속성, bdo
요소, bdi
요소를 사용하는 것이 권장되며, 양방향 알고리즘 형식화 문자를 수동으로 관리하지 않는 것이 좋습니다. 양방향 알고리즘 형식화 문자는 CSS와 잘 어울리지 않습니다.
사용자 에이전트는 문서 및 문서의 일부를 렌더링할 때 올바른 문자 순서를 결정하기 위해 유니코드 양방향 알고리즘을 구현해야 합니다. [BIDI]
HTML을 유니코드 양방향 알고리즘에 매핑하는 작업은 세 가지 방법 중 하나로 수행되어야 합니다. 사용자 에이전트는 CSS를 구현해야 하며, 특히 CSS 'unicode-bidi', 'direction', 'content' 속성을 포함해야 하며, 사용자 에이전트 스타일 시트에 이 명세서의 렌더링 섹션에서 제공된 속성을 사용한 규칙이 포함되어 있어야 합니다. 또는, 사용자 에이전트는 문서에서 지정된 스타일 시트가 이를 재정의하지 않도록 하면서, 상기 언급된 속성들만 구현하고 상기 언급된 모든 규칙이 포함된 사용자 에이전트 스타일 시트가 있는 것처럼 작동해야 하며, 또는 사용자가 동일한 의미를 가진 다른 스타일 언어를 구현해야 합니다. [CSSGC]
다음 요소 및 속성에는 렌더링 섹션에서 정의된 요구사항이 있으며, 이 섹션의 요구사항에 따라 모든 사용자 에이전트에 적용됩니다(제안된 기본 렌더링을 지원하는 사용자 에이전트에만 적용되는 것이 아닙니다):
HTML 요소에서 접근성 API 의미를 구현하기 위한 사용자 에이전트 요구사항은 HTML Accessibility API Mappings에 정의되어 있습니다. 여기서 제시된 규칙 외에도, 커스텀 요소 element의 기본 ARIA 역할 의미는 다음과 같이 결정됩니다: [HTMLAAM]
map을 element의 내부 콘텐츠 속성 맵으로 설정합니다.
만약 map["role
"]이 존재한다면 이를 반환합니다.
역할이 없음을 반환합니다.
유사하게, 커스텀 요소 element에 대해, stateOrProperty라는 상태 또는 속성의 기본 ARIA 상태 및 속성 의미는 다음과 같이 결정됩니다:
만약 element의 부착된 내부 요소가 null이 아니라면:
만약 element의 부착된 내부 요소의 stateOrProperty와 연관된 요소 가져오기가 존재한다면, 이를 실행한 결과를 반환합니다.
만약 element의 부착된 내부 요소의 stateOrProperty와 연관된 요소들 가져오기가 존재한다면, 이를 실행한 결과를 반환합니다.
만약 element의 내부 콘텐츠 속성 맵[stateOrProperty]이 존재한다면 이를 반환합니다.
stateOrProperty의 기본값을 반환합니다.
여기서 언급된 "기본 의미"는 ARIA에서 가끔 "네이티브", "암시적", 또는 "호스트 언어" 의미라고도 불립니다. [ARIA]
이 정의의 한 가지 의미는 기본 의미가 시간이 지남에 따라 변경될 수 있다는 것입니다. 이는 커스텀 요소가 내장된 요소와 동일한 표현력을 가질 수 있도록 합니다. 예를 들어,
a
요소의 기본 ARIA 역할 의미가 href
속성이 추가되거나 제거됨에 따라 변경되는 방식과 비교해
보십시오.
이 기능의 예를 보려면 커스텀 요소 섹션을 참조하십시오.
HTML 요소에서 ARIA role
및 aria-*
속성 사용을 확인하기 위한 적합성 검사 요구사항은 ARIA in
HTML에 정의되어 있습니다. [ARIAHTML]
html
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
head
요소 뒤에 body
요소가 옵니다.
html
요소의 시작 태그는 html
요소 안에 있는 첫 번째 내용이 주석이 아닌 경우 생략할 수 있습니다.
html
요소의 종료 태그는 html
요소 바로 뒤에 주석이 오지 않는 경우 생략할 수 있습니다.
[Exposed =Window ]
interface HTMLHtmlElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 또한 사용되지 않는 멤버도 포함되어 있습니다
};
작성자는 루트 html
요소에 문서의 언어를 제공하는
lang
속성을 지정하는 것이 권장됩니다. 이는 음성 합성 도구가 사용할 발음을
결정하는 데 도움이 되며, 번역 도구가 사용할 규칙을 결정하는 데에도 도움이 됩니다.
다음 예제의 html
요소는 문서의 언어가
영어임을 선언합니다.
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Swapping Songs</ title >
</ head >
< body >
< h1 > Swapping Songs</ h1 >
< p > Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</ p >
</ body >
</ html >
head
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
html
요소의 첫 번째 요소로서.
iframe
srcdoc
문서이거나 상위 프로토콜에서 제목 정보가 제공되는 경우: 최대 하나의 title
요소와 최대 하나의 base
요소를 포함하는 하나 이상의 메타데이터 콘텐츠 요소.
title
요소이고,
최대 하나는 base
요소여야 합니다.
head
요소의 시작 태그는 요소가 비어 있거나 head
요소 안의 첫 번째 내용이 요소인 경우
생략할 수 있습니다.
head
요소의 종료 태그는 head
요소 바로 뒤에 ASCII 공백 또는 주석이 오지 않는 경우 생략할 수 있습니다.
[Exposed =Window ]
interface HTMLHeadElement : HTMLElement {
[HTMLConstructor ] constructor ();
};
head
요소는 document
에 대한 메타데이터 모음을 나타냅니다.
head
요소의 메타데이터 모음은 클 수도 있고
작을 수도 있습니다. 다음은 매우 짧은 예제입니다:
<!doctype html>
< html lang = en >
< head >
< title > A document with a short head</ title >
</ head >
< body >
...
다음은 더 긴 예제입니다:
<!DOCTYPE HTML>
< HTML LANG = "EN" >
< HEAD >
< META CHARSET = "UTF-8" >
< BASE HREF = "https://www.example.com/" >
< TITLE > An application with a long head</ TITLE >
< LINK REL = "STYLESHEET" HREF = "default.css" >
< LINK REL = "STYLESHEET ALTERNATE" HREF = "big.css" TITLE = "Big Text" >
< SCRIPT SRC = "support.js" ></ SCRIPT >
< META NAME = "APPLICATION-NAME" CONTENT = "Long headed application" >
</ HEAD >
< BODY >
...
title
요소는 대부분의
상황에서 필수 자식 요소이지만, 상위 프로토콜이 제목 정보를 제공하는 경우, 예를 들어 HTML이 이메일 작성 형식으로 사용될 때 이메일의 제목 줄에서 title
요소를 생략할 수 있습니다.
title
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
title
요소가 포함되지 않은
head
요소 안에서.
[Exposed =Window ]
interface HTMLTitleElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] 속성 DOMString text ;
};
title
요소는 문서의 제목 또는 이름을 나타냅니다. 작성자는 사용자의 기록, 북마크 또는 검색 결과와 같이 문서가 문맥에서 벗어났을 때에도
문서를 식별할 수 있는 제목을 사용해야 합니다. 문서의 제목은 종종 첫 번째 제목과 다릅니다. 첫 번째 제목은 문맥에서 벗어났을 때도 단독으로 존재할 필요가 없기 때문입니다.
문서당 하나 이상의 title
요소가 있어서는 안
됩니다.
문서에 제목이 없을 가능성이 있는 경우, Document
에 대해
title
요소가 필요하지 않을 수 있습니다.
요소가 필요한 경우에 대한 설명은 head
요소의
콘텐츠 모델을 참조하십시오.
title.text [ = value ]
요소의 자식 텍스트 콘텐츠를 반환합니다.
값을 설정하여 요소의 자식을 주어진 값으로 교체할 수 있습니다.
text
속성의 getter는
이 title
요소의 자식 텍스트 콘텐츠를 반환해야 합니다.
text
속성의 setter는 이 title
요소 내에서 주어진 값으로 모두 대체해야 합니다.
적절한 제목의 예와 같은 페이지에 사용될 수 있는 최상위 제목과의 대조를 아래에 설명합니다.
< title > Introduction to The Mating Rituals of Bees</ title >
...
< h1 > Introduction</ h1 >
< p > This companion guide to the highly successful
< cite > Introduction to Medieval Bee-Keeping</ cite > book is...
다음 페이지는 동일한 사이트의 일부일 수 있습니다. 제목이 주제를 명확하게 설명하는 반면 첫 번째 제목은 독자가 상황을 알고 있다고 가정하고 있으며, 따라서 춤이 살사인지 왈츠인지 궁금해하지 않을 것이라는 점을 주목하십시오:
< title > Dances used during bee mating rituals</ title >
...
< h1 > The Dances</ h1 >
문서 제목으로 사용할 문자열은 document.title
IDL
속성에서 제공합니다.
사용자 에이전트는 사용자 인터페이스에서 문서를 참조할 때 문서의 제목을 사용해야 합니다. title
요소의 내용이 이와 같이 사용될 때, 그
title
요소의 방향성을 사용하여 사용자 인터페이스에서 문서 제목의 방향성을 설정해야
합니다.
base
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
base
요소가 없는
head
요소 내.
href
— 문서 기본 URL
target
— 탐색 가능한 기본 대상 하이퍼링크 탐색 및 폼 제출에 대해.
[Exposed =Window ]
interface HTMLBaseElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString href ;
[CEReactions ] attribute DOMString target ;
};
base
요소는 작성자가 문서 기본 URL을 지정하고, URL을
파싱하는 목적으로 사용하며, 기본적으로 탐색 가능한 대상으로 하이퍼링크를 따르는 것과 같은
작업을 수행할 때 사용합니다. 이 요소는 이 정보 외의 콘텐츠를 나타내지 않습니다.
문서당 하나의 base
요소만
존재해야 합니다.
base
요소는 href
속성, target
속성 또는 둘 다를
가져야 합니다.
href
콘텐츠 속성은, 지정된 경우, 공백으로 둘러싸일 수 있는 유효한 URL을 포함해야 합니다.
base
요소가 href
속성을 가지고 있는 경우,
이 요소는 html
요소(해당 manifest
속성은 base
요소에 의해 영향을 받지
않습니다.)를 제외한 URL을 사용하는 다른 요소들보다 앞에 와야 합니다.
href 속성을 가진 여러 base
요소가 있는 경우, 첫 번째를 제외한 모든 요소는 무시됩니다.
target
속성은, 지정된 경우, 유효한
탐색 대상 이름 또는 키워드를 포함해야 하며, 이는 document
내에서 하이퍼링크와 폼이 탐색을 유발할 때
기본으로 사용할 탐색 가능 대상을 지정합니다.
base
요소는 target
속성을 가지고
있는 경우, 하이퍼링크를 나타내는 요소보다 앞에 와야 합니다.
target 속성을 가진 여러 base
요소가 있는 경우, 첫 번째를 제외한 모든 요소는 무시됩니다.
a
, area
또는 폼
요소 element
및 선택적 문자열 또는 null target(기본값 null)이 주어졌을 때, 요소의 target을
가져옵니다:
만약 target이 null이라면:
만약 target이 null이 아니고 ASCII
탭 또는 개행 문자와 U+003C (<)을 포함하고 있다면, target을 "_blank
"로
설정합니다.
target을 반환합니다.
첫 번째 base
요소가
href
콘텐츠 속성을 가지고
있는 경우, 문서 트리 내에 동결된 기본 URL이
있습니다. 동결된 기본 URL은 다음 상황이 발생할 때마다 설정되어야 합니다:
동결된 기본 URL을 설정합니다 element에 대해:
document를 element의 노드 문서로 설정합니다.
urlRecord를 document의 파싱을 통해 element의 href
콘텐츠 속성 값을
document의 대체 기본 URL 및
document의 문서 문자 인코딩과 함께
(따라서 base
요소는 자체적으로 영향을 받지 않습니다.)
다음 중 하나가 참이면:
urlRecord이 실패인 경우;
urlRecord의 스킴이
"data
" 또는 "javascript
"인 경우; 또는
urlRecord와 document에 대해 문서에 대해 base가 허용됩니까?를 실행한 결과
"차단됨
"이 반환되는 경우,
element의 동결된 기본 URL을 document의 대체 기본 URL로 설정하고 반환합니다.
element의 동결된 기본 URL을 urlRecord로 설정합니다.
IDL 속성 href
는, 가져올 때
다음 알고리즘을 실행하여 반환되어야 합니다:
document를 element의 노드 문서로 설정합니다.
url을, 이 요소가 href
속성을 가지고 있는 경우 해당 속성의
값으로, 그렇지 않은 경우에는 빈 문자열로 설정합니다.
urlRecord를 document의 파싱을 통해 url을 대체 기본 URL 및 document의 문서 문자 인코딩과 함께 파싱한 결과로 설정합니다.
urlRecord이 실패인 경우, url을 반환합니다.
urlRecord의 직렬화를 반환합니다.
IDL 속성 href
는, 설정 시, 주어진 새 값으로 href
콘텐츠 속성을 설정해야 합니다.
IDL 속성 target
는
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
이 예제에서 base
요소는 문서 기본 URL을 설정하는 데 사용됩니다:
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > This is an example for the < base> element</ title >
< base href = "https://www.example.com/news/index.html" >
</ head >
< body >
< p > Visit the < a href = "archives.html" > archives</ a > .</ p >
</ body >
</ html >
위 예제의 링크는 "https://www.example.com/news/archives.html
"로 연결되는 링크가 될 것입니다.
link
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
noscript
요소가 head
요소의 자식 요소인 경우.
href
— 하이퍼링크의 주소
crossorigin
— 이
요소가 crossorigin 요청을 처리하는 방법
rel
— 문서와 하이퍼링크 목적지 리소스 간의 관계
media
— 적용 가능한 미디어
integrity
—
서브리소스 무결성 검사에서 사용되는 무결성 메타데이터 [SRI]
hreflang
— 링크된 리소스의 언어
type
— 참조된 리소스의 유형에 대한 힌트
referrerpolicy
— 이 요소가 시작한 참조
정책 페치에 대해
sizes
— 아이콘의 크기 (rel
="icon
"일 때)
imagesrcset
— 다양한
상황에서 사용할 이미지, 예를 들어 고해상도 디스플레이, 작은 모니터 등 (rel
="preload
"일 때)
imagesizes
— 다양한 페이지
레이아웃에 대한 이미지 크기 (rel
="preload
"일 때)
as
— 프리로드 요청에 대한 잠재적
목적지 (rel
="preload
" 및 rel
="modulepreload
"일
때)
blocking
— 이 요소가 잠재적 렌더링 차단인지 여부
color
— 사이트 아이콘을 사용자 정의할 때 사용할
색상 (rel
="mask-icon
"일 때)
disabled
— 링크가 비활성화되었는지
여부
fetchpriority
— 이 요소가 시작한 우선 순위 설정 페치에 대해
title
속성 특수한 의미를 가집니다: 링크의 제목; CSS 스타일 시트 세트 이름
[Exposed =Window ]
interface HTMLLinkElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString href ;
[CEReactions ] attribute DOMString ? crossOrigin ;
[CEReactions ] attribute DOMString rel ;
[CEReactions ] attribute DOMString as ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[CEReactions ] attribute DOMString media ;
[CEReactions ] attribute DOMString integrity ;
[CEReactions ] attribute DOMString hreflang ;
[CEReactions ] attribute DOMString type ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList sizes ;
[CEReactions ] attribute USVString imageSrcset ;
[CEReactions ] attribute DOMString imageSizes ;
[CEReactions ] attribute DOMString referrerPolicy ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList blocking ;
[CEReactions ] attribute boolean disabled ;
[CEReactions ] attribute DOMString fetchPriority ;
// also has obsolete members
};
HTMLLinkElement includes LinkStyle ;
link
요소는 작성자가 문서를 다른 리소스와 연결할 수
있게 해줍니다.
링크의 주소는 href
속성에 의해 제공됩니다.
href
속성이 존재하는 경우, 그 값은 유효한 비어 있지 않은 URL(공백으로 둘러싸일 수
있음)이어야 합니다. href
속성이나
imagesrcset
속성 중 하나
또는 둘 다 존재해야 합니다.
href
속성과 imagesrcset
속성이 모두
없으면, 이 요소는 링크를 정의하지 않습니다.
지정된 링크 유형(관계)은 rel
속성의 값으로
제공되며, 이 속성이 존재하는 경우 그 값은 순서가 없는 고유한 공백으로 구분된 토큰 집합이어야 합니다. 허용된
키워드와 그 의미는 후속 섹션에서 정의됩니다. rel
속성이
없거나, 키워드가 없거나, 또는 사용된 키워드가 이 사양에 정의된 대로 허용되지 않는 경우, 이 요소는 링크를 생성하지 않습니다.
rel
의 지원되는 토큰은 HTML 링크 유형에 정의된 키워드로, link
요소에서 허용되며, 처리 모델에 영향을 미치고
사용자 에이전트에서 지원됩니다. 가능한 지원되는 토큰은 alternate
, dns-prefetch
, expect
, icon
, manifest
, modulepreload
,
next
, pingback
, preconnect
, prefetch
, preload
, search
, 그리고 stylesheet
입니다. rel
의 지원되는 토큰은 사용자 에이전트가 처리 모델을 구현하는 이 목록의 토큰만 포함해야 합니다.
이론적으로는 사용자 에이전트가 canonical
키워드에 대한 처리 모델을 지원할
수 있습니다. 만약 그 에이전트가 자바스크립트를 실행하는 검색 엔진이라면요. 하지만 실제로는 매우 드뭅니다. 따라서 대부분의 경우, canonical
은 rel
의 지원되는 토큰에 포함되지 않아야 합니다.
link
요소는 rel
속성 또는 itemprop
속성을 가져야 하며, 둘 다 가져서는 안 됩니다.
link
요소에 itemprop
속성이 있거나, rel
속성에 body-ok 키워드만 포함되어 있는 경우, 이 요소는 본문에서 허용됨이라고
합니다. 이는 요소가 구문 콘텐츠가 예상되는 곳에 사용될 수 있음을
의미합니다.
rel
속성이 사용되는 경우, 이 요소는
페이지의 body
에서 가끔만 사용할 수 있습니다.
itemprop
속성이 사용되는 경우, 이 요소는 head
요소와
body
요소에서 모두 사용할 수 있으며, 이는
마이크로데이터 모델의 제약을 받습니다.
link
요소를 사용하여 두 가지 종류의 링크를 생성할
수 있습니다: 외부 리소스 링크와 하이퍼링크. 링크 유형 섹션에서는 특정 링크 유형
이 외부 리소스인지 하이퍼링크인지 정의합니다. 하나의 link
요소가 여러 개의 링크를 생성할 수 있으며(일부는
외부 리소스 링크일 수 있고, 일부는 하이퍼링크일 수 있음), 생성되는 링크의 정확한 종류와 수는 rel
속성에 제공된 키워드에 따라 다릅니다. 사용자 에이전트는
요소별로가 아니라 링크별로 링크를 처리해야 합니다.
각 link
요소에 대해 생성된 각
링크는 별도로 처리됩니다. 예를 들어, rel="stylesheet"
가 있는 두 개의 link
요소가 있다면, 각각은 별개의 외부 리소스로
간주되며, 각 링크는 독립적으로 속성에 의해 영향을 받습니다. 마찬가지로, rel
속성이 next stylesheet
값을 가진 단일 link
요소는 next
키워드에 대한 하이퍼링크와 stylesheet
키워드에 대한 외부 리소스 링크를 생성하며, 이들은 다른
속성(media
또는 title
와 같은)에 의해 다르게 영향을 받습니다.
예를 들어, 다음 link
요소는 두 개의 하이퍼링크(동일한 페이지로)를 생성합니다:
< link rel = "author license" href = "/about" >
이 요소에 의해 생성된 두 개의 링크는 하나는 현재 페이지의 작성자에 대한 정보를 가지고 있다는 의미를 가지며, 다른 하나는 현재 페이지가 제공되는 라이선스에 대한 정보를 가지고 있다는 의미를 가집니다.
하이퍼링크는 link
요소와 그 rel
속성으로 생성된 경우 문서 전체에 적용됩니다. 이는
rel
속성이 a
및 area
요소에 사용되어 문서 내에서 링크의 위치에 따라
링크의 컨텍스트를 나타내는 것과 대조됩니다.
a
요소와 area
요소로 생성된 하이퍼링크와 달리, link
요소로 생성된 하이퍼링크는 기본적으로 사용자 에이전트가 제안된 기본 렌더링을 지원하는 경우 문서의
일부로 표시되지 않습니다. 그리고 CSS를 사용하여 강제로 표시하더라도 활성화
동작이 없습니다. 대신, 이들은 주로 페이지 또는 페이지의 콘텐츠를 소비하는 다른 소프트웨어에 의해 사용될 수 있는 의미론적 정보를 제공합니다. 추가적으로, 사용자 에이전트는 이러한 하이퍼링크를 따를 수 있는
UI를 제공할 수 있습니다.
외부 리소스 링크의 정확한 동작은 관련 링크 유형에 정의된 정확한 관계에 따라 달라집니다.
crossorigin
속성은 CORS 설정 속성입니다. 이는 외부 리소스 링크에서 사용하도록 설계되었습니다.
media
속성은 리소스가 적용되는 미디어를
지정합니다. 값은 유효한 미디어 쿼리 리스트이어야 합니다.
모든 현재 엔진에서 지원됩니다.
integrity
속성은 이 요소가
담당하는 요청에 대한 무결성 메타데이터를 나타냅니다. 값은 텍스트입니다. 이 속성은 rel
속성에 stylesheet
, preload
, 또는 modulepreload
키워드가
포함된 link
요소에서만 지정되어야 합니다. [SRI]
hreflang
속성은 link
요소에서
hreflang
속성이
a
요소에서 동일한 의미를 가집니다.
type
속성은 링크된 리소스의 MIME 유형을 제공합니다. 이는 순전히 권고사항입니다. 값은 유효한 MIME 유형 문자열이어야 합니다.
외부 리소스 링크의 경우, type
속성은 사용자 에이전트가 지원하지 않는 리소스를 가져오지
않도록 힌트를 제공하는 데 사용됩니다.
referrerpolicy
속성은 참조 정책 속성입니다. 이는 외부 리소스 링크에서 사용하도록 설계되었으며, 참조 정책을 설정하는 데 도움이 됩니다. [REFERRERPOLICY]
title
속성은 링크의 제목을 제공합니다.
하나의 예외를 제외하고는 순전히 권고사항입니다. 값은 텍스트입니다. 예외는 문서 트리에 포함된 스타일 시트 링크에
해당하며, 이 경우 title
속성은 CSS 스타일 시트 세트를 정의합니다.
title
속성은 대부분의 다른 요소에
대한 전역 title
속성과 달리 link
요소에서 링크에 제목이 없으면 상위 요소의
제목을 상속받지 않습니다. 단순히 제목이 없는 것입니다.
imagesrcset
속성은 존재할
수 있으며, srcset 속성입니다.
imagesrcset
및 href
속성(너비 설명자가 사용되지 않는 경우)은 함께 이미지 소스를 소스 세트에
기여합니다.
imagesrcset
속성이 존재하고
이미지 후보 문자열 중 너비 설명자를 사용하는 것이 있는 경우, imagesizes
속성도 존재해야
하며, 이는 sizes 속성입니다. imagesizes
속성은 소스 크기를 소스 세트에 기여합니다.
imagesrcset
및 imagesizes
속성은 link
요소에서만 지정되어야 하며, rel
속성에 preload
키워드가 지정되어 있으며,
"image
" 상태에서 as
속성을 가지고
있어야 합니다.
이 속성들은 나중에 img
요소가 해당하는 srcset
및 sizes
속성 값을 가진 리소스를 미리 로드할 수 있도록
허용합니다:
< link rel = "preload" as = "image"
imagesrcset = "wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes = "50vw" >
<!-- ... later, or perhaps inserted dynamically ... -->
< img src = "wolf.jpg" alt = "A rad wolf"
srcset = "wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes = "50vw" >
href
속성을 생략하는 방법에 주목하세요. 이 속성은
imagesrcset
을
지원하지 않는 브라우저에만 관련이 있으며, 이러한 경우 잘못된 이미지가 미리 로드될 가능성이 높기 때문입니다.
imagesrcset
속성은
media
속성과 결합하여 아트 디렉션을 위한 picture
요소의 소스에서 선택된 적절한
리소스를 미리 로드할 수 있습니다:
< link rel = "preload" as = "image"
imagesrcset = "dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media = "(max-width: 800px)" >
< link rel = "preload" as = "image"
imagesrcset = "dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media = "(min-width: 801px)" >
<!-- ... later, or perhaps inserted dynamically ... -->
< picture >
< source srcset = "dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media = "(max-width: 800px)" >
< img src = "dog-wide-1x.jpg" srcset = "dog-wide-2x.jpg 2x"
alt = "An awesome dog" >
</ picture >
sizes
속성은 시각 매체용 아이콘의 크기를
제공합니다. 이 속성이 존재하는 경우, 그 값은 단순히 권고 사항일 뿐입니다. 사용자 에이전트는 여러 아이콘이 사용 가능한 경우 어떤 아이콘을 사용할지 결정하기 위해 이 값을 사용할 수 있습니다.
지정된 경우, 이 속성의 값은 순서 없는 고유한 공백으로 구분된 토큰 집합이어야 하며, 이는
ASCII 대소문자 구분 없이 매치되어야 합니다. 각 값은 문자열 "any
"와 ASCII 대소문자 구분 없이 일치하거나, U+0030 숫자 0(0) 문자가 앞에 오지 않고, U+0078 라틴
소문자 X 또는 U+0058 라틴 대문자 X 문자로 구분된 두 개의 유효한 음수가 아닌 정수로 구성되어야 합니다. 이 속성은 link
요소에만 지정되어야 하며, rel
속성에 icon
키워드나 apple-touch-icon
키워드가 지정된
경우에만 사용해야 합니다.
apple-touch-icon
키워드는 미리 정의된 링크 유형 세트에 대한 확장으로 등록된 키워드이지만, 사용자 에이전트가 이를 지원해야 할 의무는
없습니다.
as
속성은 href
속성에 의해 제공된 리소스를 미리 로드할 때의 잠재적
목적지를 지정합니다. 이는 열거형 속성입니다. 각
잠재적
목적지는 이 속성에 대한 키워드로, 동일한 이름의 상태에 매핑됩니다. 이 속성은 link
요소에 지정되어야 하며, rel
속성에 preload
키워드가 포함되어 있어야 합니다. 이
속성은 link
요소에 지정될 수 있으며, rel
속성에 modulepreload
키워드가
포함된 경우, 이 속성은 스크립트와
유사한 목적지를 나타내는 값을 가져야 합니다. 다른 link
요소에 대해서는 이 속성을 지정해서는 안
됩니다.
as
속성이 사용되는 방법에 대한 처리 모델은 각 링크 유형의 리소스
가져오기 및 처리 알고리즘에 제공됩니다.
이 속성은 누락된 값 기본값이나
유효하지 않은 값 기본값을 가지지 않으며, 이는
유효하지 않거나 누락된 속성 값이 상태에 매핑되지 않음을 의미합니다. 이는 처리 모델에서 고려됩니다. preload
링크의 경우, 두 조건 모두 오류로
간주되며, modulepreload
링크의
경우, 누락된 값은 "스크립트
"로 처리됩니다.
blocking
속성은 차단 속성입니다. 이 속성은 stylesheet
및 expect
링크 유형에서 사용되며, 이러한 키워드를
포함하는 rel
속성을 가진 링크 요소에서만 지정되어야 합니다.
color
속성은
mask-icon
링크 유형에서 사용됩니다. 이 속성은 rel
속성에 mask-icon
키워드가
포함된 link
요소에서만 지정되어야 합니다. 이
값은 사용자가 사이트를 고정할 때 사용자 에이전트가 아이콘의 표시를 사용자 정의하는 데 사용할 수 있는 권장 색상을 정의하는 CSS <color> 프로덕션과 일치하는
문자열이어야 합니다.
이 사양에서는 color
속성에 대한
사용자 에이전트 요구 사항이 없습니다.
mask-icon
키워드는 미리 정의된 링크 유형 세트에 대한 확장으로 등록된 키워드이지만, 사용자 에이전트가 이를 지원해야 할
의무는 없습니다.
link
요소에는 관련된 명시적으로 활성화됨 부울이 있습니다. 초기 값은 false입니다.
disabled
속성은 부울 속성이며, stylesheet
링크 유형에서
사용됩니다. 이 속성은 rel
속성에 stylesheet
키워드가 포함된
link
요소에서만 지정되어야 합니다.
disabled
속성이 제거될 때마다 link
요소의 명시적으로 활성화됨 속성을 true로 설정합니다.
예를 들어, disabled
속성을
동적으로 제거하면, 예를 들어 document.querySelector("link").removeAttribute("disabled")
을 사용하여 스타일 시트를 가져오고
적용합니다:
< link disabled rel = "alternate stylesheet" href = "css/pooh" >
fetchpriority
속성은
가져오기 우선 순위 속성으로, 외부 리소스 링크에서 사용되며, 가져오기 및 리소스 처리 시 사용됩니다.
모든 현재 엔진에서 지원됩니다.
IDL 속성 href
, hreflang
, integrity
,
media
, rel
, sizes
, type
, blocking
, 그리고
disabled
은 각
속성과 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
color
속성에 대한 반영 IDL
속성은 없지만, 나중에 추가될 수 있습니다.
모든 현재 엔진에서 지원됩니다.
as
IDL 속성은 as
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
crossOrigin
IDL 속성은 crossorigin
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
HTMLLinkElement/referrerPolicy
모든 현재 엔진에서 지원됩니다.
referrerPolicy
IDL 속성은 referrerpolicy
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
fetchPriority
IDL 속성은 fetchpriority
콘텐츠
속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
imageSrcset
IDL 속성은 imagesrcset
콘텐츠 속성을 반영해야 합니다.
imageSizes
IDL 속성은 imagesizes
콘텐츠
속성을 반영해야 합니다.
모든 현재 엔진에서 지원됩니다.
IDL 속성 relList
는
rel
콘텐츠 속성을 반영해야 합니다.
relList
속성은 그 supports()
메서드를 호출하여 지원되는 링크 유형을 확인함으로써 기능 감지에 사용할 수 있습니다.
media
속성 처리링크가 하이퍼링크인 경우, media
속성은 순전히 권고
사항이며, 해당 문서가 어떤 미디어를 위해 설계되었는지를 설명합니다.
그러나 링크가 외부 리소스 링크인
경우, media
속성은
규정적입니다. 사용자 에이전트는 media
속성의 값이 환경과 일치하고 기타 관련
조건이 적용될 때 외부 리소스를 적용해야 하며, 그렇지 않은 경우에는 적용하지 않아야 합니다.
media
속성이 생략된 경우
기본값은 "all
"이며, 이는 기본적으로 모든 미디어에 링크가 적용됨을 의미합니다.
외부 리소스는 적용 가능성을 제한하는 추가 제한 사항이 정의되어 있을 수 있습니다. 예를 들어, CSS 스타일 시트는 일부 @media
블록을 포함할 수
있습니다. 이 사양은 이러한 추가 제한 사항이나 요구 사항을 무시하지 않습니다.
type
속성 처리type
속성이 존재하는 경우, 사용자
에이전트는 해당 리소스가 지정된 유형(예: 빈 문자열과 같이 유효한 MIME 타입
문자열이 아닐 수도 있음)이라고 가정해야 합니다. 속성이 생략되었지만 외부 리소스 링크 유형에 기본 유형이 정의된 경우, 사용자 에이전트는 해당 리소스가
해당 유형이라고 가정해야 합니다. UA가 지정된 링크 관계에 대해 주어진 MIME 타입을 지원하지 않는 경우, UA는 링크된
리소스를 가져오고 처리해서는 안 됩니다. UA가 지정된 링크 관계에
대해 주어진 MIME 타입을 지원하는 경우, UA는 링크된 리소스를 가져와서 처리해야 하며, 적절한 시점에 외부 리소스 링크의 특정 유형에
대해 지정된 대로 처리해야 합니다. 속성이 생략되고 외부 리소스 링크 유형에 기본 유형이 정의되어 있지 않지만, 유형이 알려져 있고
지원된다고 가정할 경우 사용자 에이전트가 링크된 리소스를 가져와서 처리할 것이라면, 사용자 에이전트는 이를
지원된다고 가정하고 링크된 리소스를 가져와서 처리해야 합니다.
사용자 에이전트는 type
속성을
권위적으로 간주해서는 안 됩니다. 리소스를 가져온 후, 사용자 에이전트는 리소스의 실제 유형을 결정하기 위해 type
속성을 사용해서는 안 됩니다.
실제 유형만이 리소스를 적용할지 여부를 결정하는 데 사용되며, 이는 이전에 가정한 유형과는 다릅니다.
외부 리소스 링크 유형이 리소스의 Content-Type 메타데이터를 처리하기 위한 규칙을 정의하는 경우, 해당 규칙이 적용됩니다. 그렇지 않은 경우, 리소스가 이미지로 예상될 때 사용자 에이전트는 이미지 스니핑 규칙을 적용할 수 있으며, official type은 리소스의 Content-Type 메타데이터에서 결정된 유형으로 간주되고, 결과적으로 계산된 리소스 유형이 실제 유형으로 사용됩니다. 그렇지 않은 경우, 또는 사용자 에이전트가 이미지 스니핑 규칙을 적용하지 않기로 결정한 경우, 사용자 에이전트는 리소스의 Content-Type 메타데이터를 사용하여 리소스의 유형을 결정해야 합니다. 유형 메타데이터가 없지만 외부 리소스 링크 유형에 기본 유형이 정의된 경우, 사용자 에이전트는 해당 리소스가 해당 유형이라고 가정해야 합니다.
스타일시트
링크 유형은
리소스의 Content-Type 메타데이터를 처리하기 위한 규칙을
정의합니다.
사용자 에이전트가 리소스의 유형을 확인한 후, 해당 리소스가 지원되는 유형이고 기타 관련 조건이 적용되는 경우 리소스를 적용해야 하며, 그렇지 않은 경우 리소스를 무시해야 합니다.
문서에 다음과 같이 레이블이 지정된 스타일시트 링크가 포함된 경우:
< link rel = "stylesheet" href = "A" type = "text/plain" >
< link rel = "stylesheet" href = "B" type = "text/css" >
< link rel = "stylesheet" href = "C" >
...그러면 CSS 스타일시트만 지원하는 준수하는 UA는 B 및 C 파일을 가져오고, A 파일은 건너뜁니다(이유: text/plain
은
CSS 스타일시트의 MIME 타입이 아니기 때문입니다).
B 및 C 파일에 대해서는 서버에서 반환된 실제 유형을 확인합니다. text/css
로 전송된 경우 스타일을 적용하지만,
text/plain
또는 기타 다른 유형으로 라벨이 지정된 경우 스타일을 적용하지 않습니다.
두 파일 중 하나가 Content-Type 메타데이터 없이
반환되거나 Content-Type: "null"
과 같은 구문적으로 잘못된 유형으로 반환된 경우, 스타일시트
링크에 대한 기본 유형이 적용됩니다. 기본 유형이 text/css
이므로 스타일시트는 여전히 적용됩니다.
link
요소에서 리소스를 가져오고 처리하기모든 외부 리소스 링크에는 링크된 리소스를 가져와서 처리하는 알고리즘이 있으며, 이는 link
요소 el을 가져옵니다. 또한 링크된 리소스 가져오기 설정 단계도 있으며, 이는 link
요소 el과 요청 request을 가져옵니다. 개별 링크 유형은 자체 링크된 리소스를
가져와서 처리하는 알고리즘을 제공할 수 있지만, 명시적으로 언급되지 않은 경우 기본
링크된 리소스를 가져와서 처리하는 알고리즘을 사용합니다. 마찬가지로, 개별 링크 유형은 자체 링크된 리소스 가져오기 설정
단계를 제공할 수 있지만, 명시적으로 언급되지 않은 경우 이 단계는 단순히 true를 반환합니다.
기본 링크된 리소스를 가져와서 처리하는 알고리즘은 link
요소 el을 받았을 때 다음과 같습니다:
options을 el에서 링크 옵션을 생성한 결과로 설정합니다.
request을 options에서 링크 요청을 생성한 결과로 설정합니다.
request가 null이면, 반환합니다.
request의 동기 플래그를 설정합니다.
el과 request를 사용하여 링크된 리소스 가져오기 설정 단계를 실행합니다. 결과가 false이면, 반환합니다.
el의 rel
속성에 stylesheet
키워드가 포함된 경우, request의 요청 개시자 유형을 "css
"로 설정합니다. 그렇지 않으면
"link
"로 설정합니다.
요청 request를 processResponseConsumeBody를 사용하여 응답 response와 null, 실패 또는 바이트 시퀀스 bodyBytes에 설정합니다:
success를 true로 설정합니다.
다음 중 하나라도 참인 경우:
그렇다면 success를 false로 설정합니다.
콘텐츠별 오류, 예: CSS 구문 오류 또는 PNG 디코딩 오류는 success에 영향을 미치지 않습니다.
그렇지 않으면 링크 리소스의 중요한 하위 리소스가 로드될 때까지 기다립니다.
링크 유형의 중요한 하위 리소스를 정의하는 사양(예: CSS)은 이러한 하위 리소스를 가져오고 처리하는 방법을 설명할 것으로 예상됩니다. 그러나 현재 이 부분이 명확하지 않기 때문에 이 사양에서는 링크 리소스의 중요한 하위 리소스를 가져오고 처리하는 방법을 설명하고 있으며, 올바르게 수행될 것이라고 기대합니다.
el, success, response 및 bodyBytes을 사용하여 링크된 리소스를 처리합니다.
링크 처리 옵션 options을 받아서 링크 요청을 생성합니다:
options의 목적지가 null이면, null을 반환합니다.
url을 options의 href와 상대적으로 URL 인코딩-파싱의 결과로 설정합니다.
문서나 환경 대신 기본 URL을 전달하는 것은 이슈 #9715에서 추적됩니다.
url이 실패이면, null을 반환합니다.
request을 url, options의 목적지 및 options의 교차 출처를 사용하여 잠재적 CORS 요청을 생성한 결과로 설정합니다.
request의 암호화 논스 메타데이터를 options의 암호화 논스 메타데이터로 설정합니다.
request을 반환합니다.
사용자 에이전트는 필요할 때 이러한 리소스를 가져와서 처리하도록 선택할 수 있으며, 모든 적용되지 않은 외부 리소스를 미리 가져오는 대신에 이 방법을 사용할 수 있습니다.
링크된 리소스를
가져와서 처리하는 알고리즘과 유사하게, 모든 외부 리소스 링크에는 링크된 리소스를 처리하는 알고리즘이 있으며, 이는 link
요소 el, boolean success, 응답 response, 그리고 바이트 시퀀스
bodyBytes를 가져옵니다. 개별 링크 유형은 자체 링크된 리소스를 처리하는
알고리즘을 제공할 수 있지만, 명시적으로 언급되지 않은 경우 해당 알고리즘은 아무 작업도 하지 않습니다.
주어진 rel
키워드에 대해 달리 명시되지 않은 경우, 요소는 요소의 노드 문서의 로드
이벤트를 지연시켜야 하며, 모든 시도가 완료될 때까지 기다립니다. 사용자 에이전트가 리소스를 가져와서 처리하려고 시도하지 않은 경우(예: 리소스가 필요할 때까지 기다리는 경우) 로드
이벤트를 지연시키지 않습니다.
Link
`
헤더 처리외부 리소스 링크가 될 수 있는 모든 링크 유형은
`Link
`
응답 헤더에 나타나는 경우에 반응 여부 및 방법을 정의하는 링크 헤더 처리 알고리즘을 정의합니다.
대부분의 링크 유형에서는 이 알고리즘이 아무 작업도 수행하지 않습니다. 링크 유형이 링크 헤더 처리 단계를 정의했는지 빠르게 알 수 있는 좋은 참조는 요약 표입니다.
링크 처리 옵션은 구조체입니다. 다음과 같은 항목을 포함합니다:
link
")
document
document
를 수락하는 알고리즘
auto
)
링크 처리 옵션에는 파싱된 URL 대신 기본 URL과 href가 있습니다. 왜냐하면 URL이 옵션의 소스 세트 결과일 수 있기 때문입니다.
link
요소 el을 받아서
링크 옵션을 생성합니다:
document를 el의 노드 문서로 설정합니다.
options을 다음을 사용하여 새 링크 처리 옵션으로 설정합니다:
as
속성
상태를 변환한 결과.
crossorigin
콘텐츠 속성 상태.
referrerpolicy
콘텐츠 속성 상태.
fetchpriority
콘텐츠 속성 상태.
el이 integrity
속성을
가지고 있다면, options의 무결성을 el의 integrity
콘텐츠 속성 값으로 설정합니다.
단언: options의 href가 빈 문자열이 아니거나 options의 소스 세트가 null이 아닙니다.
link
요소에 href
또는 imagesrcset
이
없으면 링크를 나타내지 않습니다.
options을 반환합니다.
헤더 목록headers이 주어졌을 때 헤더에서 링크를 추출합니다:
새 리스트로 links를 설정합니다.
얻고, 디코딩하고, 분할하는 작업의 결과로
rawLinkHeaders를 설정합니다. response의 헤더 목록에서 `Link
`을 얻습니다.
각 rawLinkHeaders의 linkHeader에 대해 다음을 수행합니다:
links를 반환합니다.
doc 문서Document,
response 응답, 그리고
"pre-media
" 또는 "media
" phase가 주어졌을 때 링크 헤더를
처리합니다:
각 links의 linkObject에 대해 다음을 수행합니다:
rel을 linkObject["relation_type
"]로 설정합니다.
attribs을 linkObject["target_attributes
"]로 설정합니다.
만약 "srcset
",
"imagesrcset
",
또는 "media
"가
attribs에 존재한다면
expectedPhase를 "media
"로 설정합니다. 그렇지 않으면 "pre-media
"로 설정합니다.
만약 expectedPhase가 phase와 일치하지 않으면, 계속 진행합니다.
만약 attribs["media
"]가 존재하고, attribs["media
"]가 환경과 일치하지
않으면, 계속
진행합니다.
다음으로 링크 처리 옵션으로 options을 새로 생성합니다:
파싱된 헤더 속성에서 링크 옵션 적용을 options에 대해 수행하고 attribs를 사용합니다.
만약 attribs["imagesrcset
"]이
존재하고 attribs["imagesizes
"]이
존재한다면, options의 소스 세트를 다음에 따라 설정합니다:
linkObject["target_uri
"], attribs["imagesrcset
"],
attribs["imagesizes
"],
그리고 null로 소스 세트
생성을 수행합니다.
링크 헤더 처리 단계를 rel에 대해 options를 사용하여 실행합니다.
파싱된 헤더 속성에서 링크 처리 옵션link processing options options을 적용하려면, 다음 단계를 수행합니다:
만약 attribs["as
"]가 존재한다면, options의 destination을 attribs["as
"]를 번역한 결과로 설정합니다.
만약 attribs["crossorigin
"]이
존재하고 이 값이 ASCII 대소문자 구분 없음과 일치하는 경우, CORS 설정 속성 키워드 중 하나와 일치하는 경우,
options의 crossorigin을 해당 키워드에 해당하는 CORS 설정 속성
상태로 설정합니다.
만약 attribs["integrity
"]이
존재한다면, options의 무결성을 attribs["integrity
"]로
설정합니다.
만약 attribs["referrerpolicy
"]가
존재하고 ASCII 대소문자 구분 없음과 일치하는 경우, 리퍼러 정책에 해당하는 경우, options의 리퍼러
정책을 해당 리퍼러 정책으로 설정합니다.
만약 attribs["nonce
"]이 존재한다면, options의 nonce를 attribs["nonce
"]로 설정합니다.
만약 attribs["type
"]이 존재한다면, options의 type을 attribs["type
"]으로 설정합니다.
만약 attribs["fetchpriority
"]가
존재하고 이 값이 ASCII 대소문자 구분 없음과 일치하는 경우, 가져오기 우선순위
속성 키워드 중 하나와 일치하는 경우, options의 fetch priority를 해당 fetch
priority 키워드로 설정합니다.
사전 힌트는 사용자 에이전트가 탐색 요청이 서버에 의해 완전히 처리되고 응답 코드가 제공되기 전에 문서에서 사용할 가능성이 높은 리소스를 사전 로드하는 등의 작업을 수행할 수 있게 합니다. 서버는 최종 응답을 제공하기 전에 103 상태 코드가 포함된 응답을 제공함으로써 사전 힌트를 나타낼 수 있습니다.[RFC8297]
호환성 문제로 인해 사전 힌트는 일반적으로 HTTP/2 이상에서 제공됩니다, 하지만 가독성을 위해 아래에서 HTTP/1.1 스타일 표기법을 사용합니다.
예를 들어, 다음과 같은 응답 순서가 주어졌을 때:
103 Early Hint Link: </image.png>; rel=preload; as=image
200 OK Content-Type: text/html <!DOCTYPE html> ... <img src="/image.png">
이미지는 HTML 콘텐츠가 도착하기 전에 로드되기 시작할 것입니다.
탐색 중 제공된 첫 번째 사전 힌트 응답만 처리되며, 교차 출처 리디렉션이 뒤따를 경우 폐기됩니다.
103 응답에는 Link
헤더 외에도 콘텐츠 보안 정책 헤더가 포함될 수 있으며, 이는 사전 힌트를 처리할 때 강제됩니다.
예를 들어, 다음과 같은 응답 순서가 주어졌을 때:
103 Early Hint Content-Security-Policy: style-src: self; Link: </style.css>; rel=preload; as=style
103 Early Hint Link: </image.png>; rel=preload; as=image
302 Redirect Location: /alternate.html
200 OK Content-Security-Policy: style-src: none; Link: </font.ttf>; rel=preload; as=font
글꼴과 스타일이 로드되지만, 이미지는 무시됩니다. 최종 리디렉션 체인에서 첫 번째 사전 힌트 응답만 존중되기 때문입니다. 늦게 도착한 콘텐츠 보안 정책 헤더는 스타일을 가져오는 요청이 이미 수행된 후에 도착하지만, 스타일은 문서에서 접근할 수 없습니다.
사전 힌트 헤더를 처리하기 위해, 응답 response와 환경 reservedEnvironment이 주어졌을 때:
사전 힌트 Link
헤더는 항상 최종 Link
헤더보다 먼저 처리되며, 그 다음으로 link
요소가 처리됩니다.
이는 사전 및 최종 Link
헤더의 내용을 각각 document
의 head
요소에 미리 추가하는 것과 동일합니다.
earlyPolicyContainer를 생성하기 위한 결과를 response와 reservedEnvironment에 대해 패치 응답에서 정책 컨테이너 생성으로 설정합니다.
이 작업은 사전 힌트 응답에 콘텐츠 보안 정책이 포함되어, 사전 힌트 요청을 가져올 때 적용될 수 있게 합니다.
links를 response의 헤더 목록에서 헤더에서 링크 추출의 결과로 설정합니다.
earlyHints를 빈 목록으로 설정합니다.
각각의 linkObject에 대해 links에서:
사전 힌트 링크 헤더를 수신하는 순간 earlyRequest를 가져오기를 시작합니다. document
가 생성되기 전에 응답이 반환되면, 이를
earlyResponse로 설정합니다. document
가
생성되면
이를 커밋하고, 사전 로드된 리소스의
맵에 추가합니다. 문서가 먼저 생성되면, 응답이 사용 가능해지자마자 커밋됩니다.
rel을 linkObject["relation_type
"]로 설정합니다.
options를 새로운 링크 처리 옵션으로 설정합니다. 해당 옵션에:
attribs를 linkObject["target_attributes
"]로 설정합니다.
사전 힌트 처리에서는 as
,
crossorigin
,
integrity
,
type
속성만 처리됩니다. 나머지, 특히
blocking
, imagesrcset
,
imagesizes
,
media
속성은 document
가 생성된 후에만 적용됩니다.
파싱된 헤더 속성에서 링크 옵션 적용을 attribs를 준 options에 수행합니다.
링크 헤더 처리 단계를 rel에 대해 options을 주어 실행합니다.
추가 options을 earlyHints에 추가합니다.
document
doc이 주어졌을 때, 다음 하위 단계를
반환합니다:
각각의 earlyHints에서 options에 대해:
link
요소를 사용하여 생성된 하이퍼링크를 따라갈 수 있는 방법을 사용자에게 제공
인터랙티브 사용자 에이전트는 사용자에게 link
요소를 사용하여 생성된 하이퍼링크를
따라갈 수 있는 방법을 사용자 인터페이스 내에서 제공할 수 있습니다. 이러한 하이퍼링크를 따르는 알고리즘을 호출할 때는 userInvolvement 인자를 "브라우저 UI
"로
설정해야 합니다. 이 명세서는 정확한 인터페이스를 정의하지 않지만, 문서 내의 각 link
요소로 생성된 각 하이퍼링크에 대해
다음과 같은 정보를 (아래 정의된 요소의 속성에서 얻은) 어떤 형태로든 포함할 수 있습니다.
rel
속성으로 제공됨)title
속성으로 제공됨)href
속성으로 제공됨)hreflang
속성으로 제공됨)media
속성으로 제공됨)사용자 에이전트는 리소스의 유형(type
속성으로 제공됨)과 같은 다른 정보도 포함할 수 있습니다.
meta
요소모든 현재 엔진에서 지원.
모든 현재 엔진에서 지원.
itemprop
속성이 있는 경우: 흐름 콘텐츠.
itemprop
속성이 있는 경우: 구문 콘텐츠.
charset
속성이 있거나, 요소의 http-equiv
속성이 인코딩 선언
상태에 있는 경우: head
요소
내.
http-equiv
속성이 있지만
인코딩 선언
상태에 있지 않은 경우: head
요소 내.
http-equiv
속성이 있지만
인코딩 선언
상태에 있지 않은 경우: noscript
요소의 자식 요소인
head
요소 내.
name
속성이 있는 경우: 메타데이터 콘텐츠가 예상되는 곳.
itemprop
속성이 있는 경우: 메타데이터 콘텐츠가 예상되는 곳.
itemprop
속성이 있는 경우: 구문 콘텐츠가 예상되는 곳.
name
— 메타데이터 이름
http-equiv
— 프래그마
지시어
content
— 요소의 값
charset
— 문자 인코딩 선언
media
— 적용 가능한 미디어
[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString httpEquiv;
[CEReactions] attribute DOMString content;
[CEReactions] attribute DOMString media;
// 구식 멤버도 포함
};
meta
요소는 title
, base
, link
, style
, 그리고 script
요소로 표현할 수 없는 다양한 종류의
메타데이터를 나타냅니다.
meta
요소는 name
속성을 사용하여 문서 수준의 메타데이터를 나타낼 수
있고, http-equiv
속성을
사용하여 프래그마 지시어를 나타낼 수 있으며, HTML 문서를 문자열 형태로 직렬화할 때(예: 네트워크를 통해 전송하거나 디스크에 저장할 때) charset
속성을 사용하여 파일의 문자 인코딩 선언을 나타낼
수 있습니다.
name
, http-equiv
, charset
및 itemprop
속성 중 정확히 하나가 지정되어야 합니다.
name
, http-equiv
, 또는 itemprop
중 하나가 지정된 경우 content
속성도
지정되어야 합니다. 그렇지 않으면 생략해야 합니다.
charset
속성은 문서에 사용된 문자
인코딩을 지정합니다. 이것은 문자 인코딩 선언입니다. 속성이 존재하는 경우 그 값은 문자열
"utf-8
"과 ASCII 대소문자
구분 없이 일치해야 합니다.
charset
속성은 XML
문서에서 아무런 효과가 없지만, XML 문서 간의 마이그레이션을 용이하게 하기 위해 XML 문서에서도 허용됩니다.
charset
속성이 있는 meta
요소는 문서당 하나만 있어야 합니다.
content
속성은 문서 메타데이터나
프래그마 지시어로 사용될 때 요소의 값을 제공합니다. 허용되는 값은 이 명세서의 후속 섹션에서 설명된 대로 정확한 맥락에 따라 다릅니다.
meta
요소에 name
속성이 있는 경우, 문서 메타데이터를 설정합니다. 문서 메타데이터는
이름-값 쌍으로 표현되며, name
속성은 이름을, 동일한
요소의 content
속성은 값을 나타냅니다.
이름은 메타데이터의 어느 측면이 설정되고 있는지를 지정합니다. 유효한 이름과 값의 의미는 다음 섹션에서 설명됩니다. meta
요소에 content
속성이 없는 경우 메타데이터 이름-값
쌍의 값 부분은 빈 문자열입니다.
media
속성은 메타데이터가 적용되는
미디어를 나타냅니다. 값은 유효한 미디어 쿼리 목록이어야
합니다. name
이 theme-color
가 아닌 한, media
속성은 처리 모델에 영향을 미치지 않으며, 저자에
의해 사용되지 않아야 합니다.
name
, content
, 및 media
IDL 속성은 동일한
이름의 해당 콘텐츠 속성을 반영해야 합니다. IDL 속성 httpEquiv
은 해당 콘텐츠 속성을 http-equiv
에 반영해야 합니다.
모든 현재 엔진에서 지원됩니다.
이 명세는 name
속성에 대한 몇 가지 이름을 정의합니다.
이름은 대소문자를 구분하지 않으며, ASCII 대소문자 구분 없이 비교되어야 합니다.
application-name
값은 페이지가 나타내는 웹 애플리케이션의 이름을 나타내는 짧은 자유 형식의 문자열이어야 합니다. 페이지가 웹 애플리케이션이 아닌 경우, application-name
메타데이터 이름을 사용해서는 안 됩니다.
웹 애플리케이션의 이름 번역은 lang
속성을 사용하여
각 이름의 언어를 지정할 수 있습니다.
문서 내에서 동일한 언어와
name
속성 값이 ASCII 대소문자 구분 없이 일치하는 application-name
메타 요소는 하나 이상 존재할 수 없습니다.
사용자 에이전트는 페이지의 title
대신
UI에서 애플리케이션 이름을 사용할 수 있습니다. 제목은 특정 순간에 페이지 상태와 관련된 상태 메시지 등을 포함할 수 있기 때문입니다.
언어 목록이 주어졌을 때 애플리케이션 이름을 찾기 위해 사용자 에이전트는 다음 단계를 수행해야 합니다:
languages 목록을 만듭니다.
default language를 document
의 문서
요소의 언어로 설정합니다(언어가 알려져 있는 경우).
default language가 존재하고, languages의 다른 언어와 동일하지 않은 경우, languages에 추가합니다.
languages에서 meta
요소가 있는 첫 번째 언어를 winning language로 설정합니다. 여기서 name
속성 값이 ASCII 대소문자 구분 없이 일치하고, 언어가 일치하는 문서에서 application-name
인지 확인합니다.
이 언어에 해당하는 meta
요소가
없으면, 반환합니다. 애플리케이션 이름이 제공되지 않은 것입니다.
winning language에 대해, content
속성의 값을 반환합니다.
이 알고리즘은 브라우저가 예를 들어 북마크에 레이블을 붙일 때 페이지 이름이 필요할 때 사용됩니다. 브라우저는 사용자의 선호 언어를 이 알고리즘에 제공합니다.
author
값은 페이지의 저자 중 한 명의 이름을 나타내는 자유 형식의 문자열이어야 합니다.
description
값은 페이지를 설명하는 자유 형식의 문자열이어야 합니다. 값은 예를 들어 검색 엔진과 같은 페이지 디렉토리에 사용하기에 적합해야 합니다. meta
요소는 name
속성 값이 ASCII 대소문자 구분 없이 일치하는 description
요소는 문서에
하나만 존재해야 합니다.
generator
값은 문서를 생성하는 데 사용된 소프트웨어 패키지 중 하나를 식별하는 자유 형식의 문자열이어야 합니다. 이 값은 소프트웨어에 의해 생성되지 않은 페이지에 사용되어서는 안 됩니다. 예를 들어 텍스트 편집기에서 사용자가 직접 작성한 마크업이 있는 페이지에는 사용하지 않습니다.
"Frontweaver"라는 도구가 페이지의 head
요소에 다음과 같이
포함될 수 있습니다. 이를 통해 페이지를 생성하는 데 사용된 도구를 식별할 수 있습니다:
< meta name = generator content = "Frontweaver 8.2" >
keywords
값은 페이지와 관련된 쉼표로 구분된 토큰 세트여야 합니다.
이 페이지는 영국 고속도로의 서체에 대해 설명하며, 검색을 위한 몇 가지 키워드를 meta
요소에
지정합니다:
<!DOCTYPE HTML>
< html lang = "en-GB" >
< head >
< title > Typefaces on UK motorways</ title >
< meta name = "keywords" content = "british,type face,font,fonts,highway,highways" >
많은 검색 엔진이 이와 같은 키워드를 고려하지 않습니다. 이는 역사적으로 검색 엔진 결과를 스팸으로 채우는 데 사용되었으며 사용자에게 도움이 되지 않는 방식으로 사용되었기 때문입니다.
페이지에 적용 가능한 키워드 목록을 얻으려면, 사용자 에이전트는 다음 단계를 수행해야 합니다:
keywords 목록을 비웁니다.
속성 이름이 name
이고, content
속성이 있으며, 속성 값이 keywords
와 ASCII 대소문자 구분 없이 일치하는 모든 meta
요소에
대해:
요소의 content
속성 값을 쉼표로 분리합니다.
결과 토큰을 keywords에 추가합니다.
중복된 키워드를 제거합니다.
keywords를 반환합니다. 이것이 저자가 페이지에 적용했다고 지정한 키워드 목록입니다.
사용자 에이전트는 값의 신뢰성이 불충분하다고 판단되면 이 정보를 사용해서는 안 됩니다.
예를 들어, 콘텐츠 관리 시스템은 시스템 내 페이지의 키워드 정보를 사용하여 사이트 내 검색 엔진의 인덱스를 채울 수 있지만, 대규모 콘텐츠 집계자는 부적절한 키워드를 사용하여 순위를 조작하려는 사용자가 있을 수 있습니다.
referrer
값은 referrer 정책이어야 하며, 이는 document
의 기본 referrer 정책을 정의합니다. [REFERRERPOLICY]
어떠한 meta
요소가 문서에 삽입되거나,
name
또는
content
속성이 변경된 경우, 사용자 에이전트는 다음 알고리즘을 실행해야 합니다:
해당 요소가 문서 트리 내에 있지 않으면 반환합니다.
해당 요소에 name
속성이 없고, 그 값이 "referrer
"와 ASCII 대소문자 구분 없이 일치하지 않으면 반환합니다.
해당 요소에 content
속성이 없거나, 그 속성 값이 비어 있으면 반환합니다.
value가 다음 표의 첫 번째 열에 있는 값 중 하나인 경우, value를 두 번째 열에 주어진 값으로 설정합니다:
레거시 값 | referrer 정책 |
---|---|
never
| no-referrer
|
default
| 기본 referrer 정책 |
always
| unsafe-url
|
origin-when-crossorigin
| origin-when-cross-origin
|
value가 referrer 정책인 경우, element의 노드 문서의 정책 컨테이너의 referrer 정책을 policy로 설정합니다.
역사적인 이유로, 다른 표준 메타데이터 이름과 달리, referrer
의 처리 모델은 요소 제거에
응답하지 않으며, 트리 순서를 사용하지
않습니다. 이 상태에서 가장 최근에 삽입되었거나 가장 최근에 수정된 meta
요소만 효과를
미칩니다.
theme-color
값은 CSS <color> 프로덕션과 일치하는 문자열이어야 하며, 페이지나 주변 사용자 인터페이스의 표시를 사용자 지정하는 데 사용자 에이전트가 사용해야 하는 제안된 색상을 정의합니다. 예를 들어, 브라우저는 페이지의 제목 표시줄을 지정된 값으로 색칠하거나 탭 표시줄 또는 작업 전환기에 색상 하이라이트로 사용할 수 있습니다.
HTML 문서 내에서, media
속성 값은
meta
요소의 name
속성 값이 ASCII 대소문자 구분 없이 theme-color
와 일치하는
경우, 고유해야 합니다.
이 표준 자체는 "WHATWG 그린"을 테마 색상으로 사용합니다:
<!DOCTYPE HTML>
< title > HTML Standard</ title >
< meta name = "theme-color" content = "#3c790a" >
media
속성은 제공된 색상이 사용되어야 하는 컨텍스트를 설명하는 데 사용될 수 있습니다.
이 표준의 테마 색상으로 "WHATWG 그린"을 다크 모드에서만 사용하고자 할 경우, prefers-color-scheme
미디어 기능을 사용할 수 있습니다:
<!DOCTYPE HTML>
< title > HTML Standard</ title >
< meta name = "theme-color" content = "#3c790a" media = "(prefers-color-scheme: dark)" >
페이지의 테마 색상을 얻으려면, 사용자 에이전트는 다음 단계를 수행해야 합니다:
candidate elements를 다음 기준을 충족하는 모든 meta
요소 목록으로 설정합니다. 이 목록은 트리 순서로
작성됩니다:
해당 요소가 문서 트리 내에 있습니다.
해당 요소에 name
속성이 있으며, 그 값이 ASCII 대소문자 구분 없이 theme-color
와
일치합니다.
그리고
해당 요소에 content
속성이 있습니다.
candidate elements 목록의 각 element에 대해:
element에 media
속성이 있고, element의 media
속성 값이 환경과 일치하지 않는다면, 계속 진행합니다.
element의 content
속성 값에서 앞뒤의 ASCII 공백을 제거한
결과를 value으로 설정합니다.
value을 CSS 색상 값으로 파싱한 결과를 color으로 설정합니다.
color이 실패하지 않았다면, color을 반환합니다.
아무 것도 반환하지 않습니다 (페이지에 테마 색상이 없음).
어떠한 meta
요소가 문서에 삽입되거나 문서에서 제거되거나,
기존 meta
요소의 name
,
content
또는
media
속성이 변경되거나, 환경이 변경되어 meta
요소의 media
속성 값이 환경과 일치할
수도 있고 일치하지 않을 수도 있는 경우, 사용자 에이전트는 위의 알고리즘을 다시 실행하고 결과를 관련 UI에 적용해야 합니다.
UI에서 테마 색상을 사용할 때, 사용자 에이전트는 이를 구현에 특정한 방식으로 조정하여 해당 UI에 더 적합하게 만들 수 있습니다. 예를 들어, 사용자 에이전트가 테마 색상을 배경으로 사용하고 그 위에 흰색 텍스트를 표시하려는 경우, 충분한 대비를 보장하기 위해 해당 UI 부분에서 테마 색상의 어두운 변형을 사용할 수 있습니다.
color-scheme
사용자 에이전트가 페이지의 모든 CSS를 로드하기 전에 원하는 색상 체계를 즉시 렌더링할 수 있도록 돕기 위해, 'color-scheme' 값을 meta
요소에 제공할 수
있습니다.
값은 CSS 'color-scheme' 속성 값 구문과 일치하는 문자열이어야 합니다. 이는 페이지가 지원하는 색상 체계를 결정합니다.
문서당 meta
요소에 대해 name
속성 값이 color-scheme
와 ASCII 대소문자 구분 없이 일치하는 속성이 하나 이상 존재할 수 없습니다.
다음 선언은 페이지가 어두운 배경 색상과 밝은 전경 색상을 가진 색상 체계를 처리할 수 있음을 나타냅니다:
< meta name = "color-scheme" content = "dark" >
페이지가 지원하는 색상 체계를 얻으려면, 사용자 에이전트는 다음 단계를 수행해야 합니다:
candidate elements를 다음 기준을 충족하는 모든 meta
요소 목록으로 설정합니다. 이 목록은 트리 순서로
작성됩니다:
해당 요소가 문서 트리 내에 있습니다.
해당 요소에 name
속성이 있으며, 그 값이 ASCII 대소문자 구분 없이 color-scheme
와
일치합니다.
그리고
해당 요소에 content
속성이 있습니다.
candidate elements 목록의 각 element에 대해:
content
속성 값을 주어진 구성 요소 목록을 파싱하여 parsed으로
설정합니다.
아무 것도 반환하지 않습니다 (페이지에 지원되는 색상 체계가 없음).
어떠한 meta
요소가 문서에 삽입되거나 문서에서 제거되거나,
기존 meta
요소의 name
또는 content
속성이 변경된 경우, 사용자 에이전트는 위의 알고리즘을 다시 실행해야 합니다.
이 규칙은 연속적인 요소를 검사하여 일치하는 것을 찾을 때까지 적용되므로, 저자는 레거시 사용자 에이전트를 처리하기 위해 여러 값을 제공할 수 있습니다. CSS 속성의 폴백이 작동하는 방식과 반대로, 레거시 값은 새로운 값 이후에 배치해야 합니다.
누구나 미리 정의된 메타데이터 이름 집합에 대한 확장을 생성하고 사용할 수 있습니다. 이러한 확장을 등록할 필요는 없습니다.
그러나 다음의 경우에는 새로운 메타데이터 이름을 생성하지 않아야 합니다:
이름이 URL이거나, 해당 이름의 동반 content
속성 값이 URL인 경우에는, 새로운 메타데이터 이름을 만드는 것보다는 미리 정의된
링크 유형 집합에 대한 확장으로
등록하는 것이 권장됩니다.
이름이 사용자 에이전트에서 처리 요구 사항이 있을 것으로 예상되는 경우; 이러한 경우 표준화되어야 합니다.
또한, 새로운 메타데이터 이름을 생성하고 사용하기 전에 WHATWG Wiki MetaExtensions 페이지를 참고하여 이미 사용 중인 이름을 선택하지 않도록 하고, 이미 사용 중인 메타데이터 이름의 목적을 복제하지 않도록 하며, 새로운 표준화된 이름과 충돌하지 않도록 하는 것이 좋습니다. [WHATWGWIKI]
누구나 언제든지 WHATWG Wiki MetaExtensions 페이지를 편집하여 메타데이터 이름을 추가할 수 있습니다. 새로운 메타데이터 이름은 다음 정보를 사용하여 지정할 수 있습니다:
정의된 실제 이름입니다. 이름은 다른 정의된 이름과 혼동되지 않도록 해야 합니다 (예: 대소문자만 다른 경우 등).
메타데이터 이름의 의미에 대한 간단한 비표준 설명으로, 값이 필요한 형식도 포함합니다.
처리 요구 사항이 정확히 동일한 다른 이름 목록입니다. 저자는 동의어로 정의된 이름을 사용해서는 안 됩니다 (이는 구식 콘텐츠와의 호환성을 위해 사용자 에이전트가 지원해야 하는 이름을 의미합니다). 실제로 사용되지 않는 동의어는 누구든지 제거할 수 있습니다. 호환성을 위해 동의어로 처리해야 하는 이름만 이 방식으로 등록해야 합니다.
다음 중 하나입니다:
메타데이터 이름이 기존 값과 중복된 것으로 판명되면 제거하고 기존 값의 동의어로 나열해야 합니다.
메타데이터 이름이 "제안됨" 상태로 한 달 이상 추가되었으나 사용되거나 명세화되지 않은 경우, WHATWG Wiki MetaExtensions 페이지에서 제거될 수 있습니다.
메타데이터 이름이 "제안됨" 상태로 추가되었으나 기존 값과 중복된 것으로 판명된 경우, 제거하고 기존 값의 동의어로 나열해야 합니다. 메타데이터 이름이 "제안됨" 상태로 추가되었으나 유해한 것으로 판명된 경우, "중단됨" 상태로 변경해야 합니다.
누구나 언제든지 상태를 변경할 수 있지만, 위의 정의에 따라 변경해야 합니다.
meta
요소에 http-equiv
속성이 지정된 경우, 해당 요소는 프래그마
지시문이 됩니다.
http-equiv
속성은 다음과 같은
키워드 및 상태를 갖는 열거된 속성입니다:
키워드 | 적합 여부 | 상태 | 간단한 설명 |
---|---|---|---|
content-language
| 아니오 | 콘텐츠 언어 | 프래그마 설정 기본 언어를 설정합니다. |
content-type
| 인코딩 선언 | charset 을 설정하는 대체
형태입니다.
| |
default-style
| 기본 스타일 | 기본 CSS 스타일 시트 집합의 이름을 설정합니다. | |
refresh
| 새로고침 | 타이머가 설정된 리디렉트 역할을 합니다. | |
set-cookie
| 아니오 | Set-Cookie | 효과가 없습니다. |
x-ua-compatible
| X-UA-Compatible | 실제로는 Internet Explorer가 표준에 더 가깝게 따르도록 권장합니다. | |
content-security-policy
| 콘텐츠 보안 정책 | 콘텐츠 보안 정책을 document 에 적용합니다.
|
meta
요소가 문서에 삽입될
때, 만약 그 요소에 http-equiv
속성이 존재하고 위의
상태 중 하나를 나타내는 경우, 사용자 에이전트는 해당 상태에 맞는 알고리즘을 실행해야 합니다. 이 알고리즘은 아래 목록에 설명되어 있습니다:
http-equiv="content-language
"
)
이 기능은 비표준입니다. 저자들은 대신 lang
속성을 사용하는 것이 권장됩니다.
이 프래그마는 프래그마 설정 기본 언어를 설정합니다. 이 프래그마가 성공적으로 처리될 때까지는 프래그마 설정 기본 언어가 없습니다.
만약 요소의 content
속성이
U+002C 콤마(,) 문자를 포함하고 있다면, 반환합니다.
input을 요소의 content
속성
값으로 설정합니다.
position을 input의 첫 번째 문자로 설정합니다.
ASCII 공백을 input에서 position으로 건너뜁니다.
코드 포인트 시퀀스 수집을 input에서 position으로 수행하여 ASCII 공백이 아닌 시퀀스를 수집합니다.
candidate를 이전 단계에서 생성된 문자열로 설정합니다.
만약 candidate가 빈 문자열이라면, 반환합니다.
프래그마 설정 기본 언어를 candidate로 설정합니다.
값이 여러 공백으로 구분된 토큰으로 구성된 경우, 첫 번째 토큰 이후의 토큰은 무시됩니다.
이 프래그마는 HTTP `Content-Language
`
헤더와 거의 비슷하지만, 완전히 같지는 않습니다.
[HTTP]
http-equiv="content-type
"
)
인코딩
선언 상태는 charset
속성을 설정하는 대체
형태로, 문자 인코딩
선언입니다. 이 상태의 사용자 에이전트 요구 사항은 모두 명세서의 파싱 섹션에서 처리됩니다.
meta
요소에 인코딩
선언 상태로 http-equiv
속성이
지정된 경우, content
속성은
다음과 같은 ASCII 대소문자 구분 없이 일치하는 문자열 값을 가져야 합니다: "text/html;
", 선택적으로 뒤따르는 모든 수의 ASCII 공백, 뒤따라 "charset=utf-8
"이 포함됩니다.
문서에는 meta
요소에 인코딩
선언 상태로 http-equiv
속성이
지정된 요소와 meta
요소에
charset
속성이 함께
존재해서는 안 됩니다.
인코딩
선언 상태는 HTML 문서에서 사용할 수 있지만, 해당 상태로 http-equiv
속성이
있는 요소는 XML 문서에서 사용해서는 안 됩니다.
http-equiv="default-style
"
)
하나의 엔진에서만 지원됩니다.
이 프래그마는 기본 CSS 스타일 시트 집합의 이름을 설정합니다.
선호하는 CSS 스타일 시트 집합 이름 변경을
요소의 content
속성 값으로 설정합니다.
[CSSOM]
http-equiv="refresh
"
)
이 프래그마는 타이머가 설정된 리디렉트 역할을 합니다.
document
객체는 선언적으로 새로고침을 수행합니다 (부울 값)과 연관됩니다. 초기 값은
false입니다.
input을 요소의 content
속성
값으로 설정합니다.
공유 선언적 새로고침 단계를 meta
요소의 노드 문서, input, 및 meta
요소와 함께
실행합니다.
공유 선언적 새로고침 단계는 document
객체 document, 문자열
input 및 선택적으로 meta
요소
meta를 인수로 하여 다음과 같이 진행됩니다:
만약 document의 선언적으로 새로고침을 수행이 true인 경우, 반환합니다.
position을 input의 첫 번째 코드 포인트로 설정합니다.
ASCII 공백을 input에서 position으로 건너뜁니다.
time을 0으로 설정합니다.
코드 포인트 시퀀스 수집을 input에서 position으로 수행하여 ASCII 숫자 시퀀스를 수집하고, 결과를 timeString으로 설정합니다.
만약 timeString이 빈 문자열인 경우:
만약 input에서 position이 가리키는 코드 포인트가 U+002E (.)가 아닌 경우, 반환합니다.
그렇지 않으면, time을 timeString을 사용하여 음수가 아닌 정수를 구문 분석하는 규칙에 따라 구문 분석한 결과로 설정합니다.
코드 포인트 시퀀스 수집을 input에서 position으로 수행하여 ASCII 숫자 및 U+002E FULL STOP 문자를 수집합니다. 수집된 문자는 무시합니다.
urlRecord를 document의 URL로 설정합니다.
만약 position이 input의 끝을 지나지 않은 경우:
만약 position이 input의 끝을 지나지 않은 경우:
urlString을 position에서 input의 끝까지의 하위 문자열로 설정합니다.
만약 position에서 input의 코드 포인트가 U+0055 (U) 또는 U+0075 (u)인 경우, position을 다음 코드 포인트로 이동합니다. 그렇지 않으면, 따옴표 건너뛰기로 이동합니다.
만약 position에서 input의 코드 포인트가 U+0052 (R) 또는 U+0072 (r)인 경우, position을 다음 코드 포인트로 이동합니다. 그렇지 않으면, 구문 분석 단계로 이동합니다.
만약 position에서 input의 코드 포인트가 U+004C (L) 또는 U+006C (l)인 경우, position을 다음 코드 포인트로 이동합니다. 그렇지 않으면, 구문 분석 단계로 이동합니다.
ASCII 공백을 input에서 position으로 건너뜁니다.
만약 position에서 input의 코드 포인트가 U+003D (=)인 경우, position을 다음 코드 포인트로 이동합니다. 그렇지 않으면, 구문 분석 단계로 이동합니다.
ASCII 공백을 input에서 position으로 건너뜁니다.
따옴표 건너뛰기: 만약 position에서 input의 코드 포인트가 U+0027 (') 또는 U+0022 (")인 경우, quote를 해당 코드 포인트로 설정하고, position을 다음 코드 포인트로 이동합니다. 그렇지 않으면, quote를 빈 문자열로 설정합니다.
urlString을 position에서 input의 끝까지의 하위 문자열로 설정합니다.
만약 quote가 빈 문자열이 아니고, urlString에 quote와 동일한 코드 포인트가 있는 경우, urlString을 해당 코드 포인트 이후의 모든 코드 포인트가 제거되도록 잘라냅니다.
구문 분석: urlRecord를 urlString을 사용하여 URL을 인코딩하여 구문 분석한 결과로 설정합니다. document를 기준으로 합니다.
만약 urlRecord가 실패인 경우, 반환합니다.
document의 선언적으로 새로고침을 수행을 true로 설정합니다.
다음 단계 중 하나 이상을 수행합니다:
새로고침이 완료된 후(아래에서 정의됨), 사용자가 리디렉트를 취소하지 않았고, meta가 지정된 경우 document의
활성
샌드박싱 플래그 세트가 샌드박스된 자동 기능
브라우징 컨텍스트 플래그를 설정하지 않은 경우, document의 노드 네비게이블을 사용하여 urlRecord로 탐색합니다. 이때, historyHandling은
"replace
"로
설정됩니다.
이전 단락의 목적을 위해, 새로고침은 다음 두 조건 중 더 나중에 발생한 시점에서 완료된 것으로 간주됩니다:
여기서 meta의 노드 문서가 새로고침이 완료되기 전 단계와는 다를 수 있으므로,
document를 사용해야 하며, meta는 항상 지정되는 것은 아닙니다(HTTP `새로고침
` 헤더의 경우).
사용자가 선택할 수 있는 인터페이스를 제공하여, document의 노드 네비게이블을 urlRecord로 document를 사용하여 탐색합니다.
아무것도 하지 않습니다.
또한, 사용자 에이전트는 타이머 상태, 타이머가 설정된 리디렉트의 목적지 등을 포함한 작동의 모든 측면을 사용자에게 알릴 수 있습니다.
meta
요소에 http-equiv
속성이
새로고침 상태로
지정된 경우, content
속성의
값은 다음 중 하나로 구성되어야 합니다:
URL
" 문자열, 그 뒤에
U+003D 이퀄 기호(=), 그리고 유효한 URL
문자열이 따라오며, U+0027 아포스트로피(')나 U+0022 인용부호(")로 시작해서는 안 됩니다.첫 번째 경우, 정수는 페이지가 다시 로드되기 전의 시간을 초 단위로 나타냅니다. 두 번째 경우, 정수는 페이지가 지정된 URL로 교체되기 전의 시간을 초 단위로 나타냅니다.
뉴스 조직의 첫 페이지는 페이지의 head
요소에 다음과 같은 마크업을
포함시켜, 페이지가 5분마다 자동으로 서버에서 다시 로드되도록 할 수 있습니다:
< meta http-equiv = "Refresh" content = "300" >
일련의 페이지를 사용하여 각 페이지가 일정 시간 후에 다음 페이지로 새로고침되는 자동 슬라이드 쇼를 만들 수 있습니다. 이를 위해 다음과 같은 마크업을 사용할 수 있습니다:
< meta http-equiv = "Refresh" content = "20; URL=page4.html" >
http-equiv="set-cookie
"
)
이 프래그마는 비표준이며, 효과가 없습니다.
사용자 에이전트는 이 프래그마를 무시해야 합니다.
http-equiv="x-ua-compatible
"
)
실제로, 이 프래그마는 Internet Explorer가 표준을 더 잘 따르도록 권장합니다.
meta
요소에 X-UA-Compatible 상태로 http-equiv
속성이
지정된 경우, content
속성의 값은 "IE=edge
"와 ASCII 대소문자 구분 없이 일치해야 합니다.
사용자 에이전트는 이 프래그마를 무시해야 합니다.
http-equiv="content-security-policy
"
)
이 프래그마는 정책을 강제하고, 콘텐츠 보안 정책을 document
에 적용합니다. [CSP]
정책을 meta
요소의
content
속성
값을 사용하여 콘텐츠 보안 정책의 직렬화된 콘텐츠 보안 정책 구문 분석 알고리즘을
실행한 결과로 설정합니다. 소스는 "meta"로, 배치(disposition)는 "enforce"로 설정합니다.
정책에서 report-uri
,
frame-ancestors
,
sandbox
지시문을 모두 제거합니다.
정책을 강제합니다.
meta
요소에 콘텐츠 보안 정책 상태로 http-equiv
속성이
지정된 경우, content
속성의 값은 유효한 콘텐츠 보안 정책으로 구성되어야 하지만, report-uri
,
frame-ancestors
,
sandbox
지시문을 포함해서는 안 됩니다. content
속성에 지정된 콘텐츠 보안
정책이 현재 문서에 적용됩니다. [CSP]
meta
요소를
문서에 삽입할 때, 일부 리소스는 이미 가져왔을 수 있습니다. 예를 들어, 이미지가 meta
요소가 강제될 수 있는 상태가 되기 전에 사용 가능한 이미지 목록에 저장될 수 있습니다. 이미 가져온 리소스는 나중에 강제된 콘텐츠 보안 정책에 의해 차단되지 않을 수 있습니다.
페이지는 다음과 같은 정책을 사용하여 교차 사이트 스크립팅 공격의 위험을 줄이고, 모든 플러그인 콘텐츠를 차단할 수 있습니다:
< meta http-equiv = "Content-Security-Policy" content = "script-src 'self'; object-src 'none'" >
문서에 동시에 특정 상태와 일치하는 meta
요소는
하나만 있어야 합니다.
문자 인코딩 선언은 문서를 저장하거나 전송할 때 사용되는 문자 인코딩을 지정하는 메커니즘입니다.
Encoding 표준에서는 UTF-8
문자 인코딩의
사용을 요구하며, "utf-8
" 인코딩 레이블을 사용하여 이를 식별하도록 요구합니다. 이러한 요구 사항은 문서의 문자 인코딩 선언이 존재하는 경우, ASCII
대소문자 구분 없이 "utf-8
"와 일치하는 인코딩 레이블을 지정해야 함을 의미합니다. 문자 인코딩 선언이 존재하든지 않든지
간에, 문서 인코딩에 사용되는 실제 문자 인코딩은 UTF-8이어야 합니다. [ENCODING]
위의 규칙을 적용하기 위해 저작 도구는 새로 생성된 문서에 대해 기본적으로 UTF-8을 사용해야 합니다.
다음 제한 사항도 적용됩니다:
또한, meta
요소에 대한 여러 제한 사항 때문에, 문서당 하나의
meta
기반 문자 인코딩 선언만 허용됩니다.
만약 HTML 문서가 BOM으로 시작하지 않고, 인코딩이 Content-Type 메타데이터에 명시되지 않으며, 문서가 iframe
srcdoc
문서가 아닌 경우, meta
요소와 charset
속성을 사용하여 인코딩을 지정해야 하며, 또는 meta
요소와 http-equiv
속성을 사용하여 인코딩 선언 상태에서 인코딩을
지정해야 합니다.
모든 문자가 ASCII 범위 내에 있더라도 Content-Type 메타데이터 또는 파일에 명시적으로 문서 인코딩 선언이 필요합니다. 왜냐하면, 사용자 입력 양식에서 비-ASCII 문자를 처리하거나, 스크립트에 의해 생성된 URL을 처리하는 데 문자 인코딩이 필요하기 때문입니다.
비-UTF-8 인코딩을 사용하는 경우, 양식 제출 및 URL 인코딩에서 예상치 못한 결과를 초래할 수 있습니다. 이러한 경우 기본적으로 문서의 문자 인코딩이 사용되기 때문입니다.
문서가 iframe
srcdoc
문서인 경우, 해당 문서에는 문자 인코딩 선언이 없어야 합니다. (이 경우, 소스는 이미 디코딩되어 있으며, iframe
을 포함하는 문서의 일부로서 제공됩니다.)
XML에서는 필요한 경우, 인라인 문자 인코딩 정보를 위해 XML 선언을 사용해야 합니다.
HTML에서 UTF-8 문자
인코딩을 선언하기 위해, 작성자는 문서의 상단 근처에 다음과 같은 마크업을 포함시킬 수 있습니다. (즉, head
요소 안에):
< meta charset = "utf-8" >
XML에서는, XML 선언을 대신 사용하여 다음과 같이 마크업의 가장 상단에 선언합니다:
<?xml version="1.0" encoding="utf-8"?>
style
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
noscript
요소 내에서,
head
요소의 자식인 경우.
media
— 적용 가능한 미디어
blocking
— 요소가 렌더링을 차단할 가능성이 있는지
여부
title
속성은 이 요소에서 특별한 의미를 가집니다:
CSS 스타일 시트 세트 이름
[Exposed =Window ]
interface HTMLStyleElement : HTMLElement {
[HTMLConstructor ] constructor ();
attribute boolean disabled ;
[CEReactions ] attribute DOMString media ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList blocking ;
// 구식 멤버도 포함합니다
};
HTMLStyleElement includes LinkStyle ;
style
요소를 사용하면 저자가 문서에 CSS 스타일
시트를 포함할 수 있습니다. style
요소는
스타일 처리 모델에 대한 여러 입력 중 하나입니다. 이 요소는 사용자에게 콘텐츠를 표시하지 않습니다.
모든 현재 엔진에서 지원됨.
disabled
게터
단계는 다음과 같습니다:
this가 연결된 CSS 스타일 시트가 없으면 false를 반환합니다.
this의 연결된 CSS 스타일 시트의 비활성화 플래그가 설정된 경우 true를 반환합니다.
false를 반환합니다.
disabled
세터 단계는 다음과 같습니다:
this가 연결된 CSS 스타일 시트가 없는 경우, return.
주어진 값이 true이면 this의 연결된 CSS 스타일 시트의 비활성화 플래그를 설정합니다. 그렇지 않으면 this의 연결된 CSS 스타일 시트의 비활성화 플래그를 해제합니다.
중요하게도, disabled
속성 할당은
style
요소가 연결된 CSS 스타일 시트를 가지고 있을 때만 적용됩니다:
const style = document. createElement( 'style' );
style. disabled = true ;
style. textContent = 'body { background-color: red; }' ;
document. body. append( style);
console. log( style. disabled); // false
media
속성은 스타일이 적용될 미디어를
지정합니다. 이 값은 유효한 미디어 쿼리 목록이어야
합니다. 사용자 에이전트는 media
속성의 값이
환경에 맞는 경우 및 기타 관련 조건이 적용될 때
스타일을 적용해야 하며, 그렇지 않은 경우 스타일을 적용하지 않아야 합니다.
스타일은 예를 들어 CSS의 @media
블록을 사용하여 범위가 더 제한될 수 있습니다. 이 사양은 이러한 추가 제한이나 요구사항을 무효화하지 않습니다.
기본값은 media
속성이 생략된 경우
"all
"이며, 이는 기본적으로 모든 미디어에 스타일이 적용된다는 의미입니다.
blocking
속성은 차단 속성입니다.
하나의 엔진에서만 지원됨.
title
속성이 style
요소에 있으면 CSS 스타일 시트 세트가 정의됩니다. style
요소에 title
속성이 없으면 제목이 없습니다. 조상 요소의
title
속성은 style
요소에 적용되지 않습니다. style
요소가 문서 트리에 없으면 title
속성은 무시됩니다. [CSSOM]
title
속성은 style
요소에 있으며, title
속성은 link
요소에 있으며, 전역 title
속성과 다릅니다. 제목이 없는 style
블록은 부모 요소의 제목을 상속하지 않고,
제목이 없습니다.
style
요소의 자식 텍스트 내용은 준수하는 스타일
시트이어야 합니다.
style
요소는 암묵적으로 렌더링을 차단할 가능성이 있는 요소입니다. 이 요소는 노드 문서의 파서에 의해 생성된 경우 암묵적으로 렌더링을 차단할 가능성이 있습니다.
사용자 에이전트는 다음 조건 중 하나가 발생할 때마다 style
블록 업데이트 알고리즘을 실행해야 합니다:
요소의 자식이 변경된 단계가 실행될 때.
style
블록 업데이트 알고리즘은 다음과 같습니다:
element를 style
요소로 지정합니다.
element에 연결된 CSS 스타일 시트가 있으면 해당 CSS 스타일 시트를 제거합니다.
element가 연결되지 않은 경우, 반환합니다.
element의 type
속성이 존재하며 값이 빈 문자열이 아니거나 ASCII 대소문자 구분을 하지 않는 "text/css
"와 일치하지 않는 경우, 반환합니다.
특히 "text/css; charset=utf-8
"과 같은 매개변수가 있는 type
값은 이 알고리즘을 일찍 반환하게
만듭니다.
요소의 인라인 동작이
콘텐츠 보안 정책에 의해 차단되어야 하는지 여부 알고리즘이 style
요소,
"style
", 및 style
요소의 자식
텍스트 내용을 대상으로 실행할 때 "차단됨
"을 반환하는 경우, 반환합니다. [CSP]
다음 속성으로 CSS 스타일 시트를 만듭니다:
element
element의 media
속성.
이는 속성의 현재 값을 복사한 것이 아닌, (이 시점에서 부재할 수 있는) 속성에 대한 참조입니다. CSSOM은 속성이 동적으로 설정, 변경 또는 제거될 때 어떻게 되는지를 정의합니다.
element가 문서
트리에 있으면 element의 title
속성, 그렇지
않으면 빈 문자열.
다시 말하지만, 이것은 속성에 대한 참조입니다.
설정하지 않음.
설정됨.
null
기본값으로 유지.
초기화되지 않음.
이것은 맞지 않습니다. 아마도 요소의 자식 텍스트 내용을 사용해야 할 것입니다? 문제 #2997로 추적되었습니다.
element이 스크립트 차단 스타일 시트를 기여하는 경우, element를 추가하고, element의 노드 문서의 스크립트 차단 스타일 시트 세트에 추가합니다.
element의 media
속성 값이 환경에 맞는 경우이며
element가 렌더링을 차단할 가능성이 있는 경우, element에서 렌더링을 차단합니다.
스타일 시트의 중요한 하위 리소스(있는 경우)를 얻으려는 시도가 완료되거나, 스타일 시트에 중요한 하위 리소스가 없으면 스타일 시트가 구문 분석되고 처리된 후에 사용자 에이전트는 다음 단계를 실행해야 합니다:
중요한 하위 리소스를 가져오는 것은
명확하지 않으며, 아마도 문제 #968가 가장 좋은 해결책일 것입니다. 그동안, 중요한 하위 리소스 요청은 style
요소가 현재 렌더링을 차단하는지 여부에 따라 설정되어야 합니다.
element를 스타일 시트와 연결된 style
요소로 지정합니다.
success를 true로 설정합니다.
스타일 시트의 중요한 하위 리소스를 얻으려는 시도가 어떤 이유로든 실패한 경우(DNS 오류, HTTP 404 응답, 연결이 조기에 닫힌 경우, 지원되지 않는 콘텐츠 유형 등), success를 false로 설정합니다.
CSS 구문 분석 오류나 PNG 디코딩 오류와 같은 콘텐츠 관련 오류는 success에 영향을 미치지 않습니다.
element와 다음 단계를 주어진 요소 작업을 큐에 추가합니다:
element가 스크립트 차단 스타일 시트를 기여하는 경우:
element의 노드 문서의 스크립트 차단 스타일 시트 세트가 element를 포함하고 있는지 확인합니다.
element를 제거하고, element의 노드 문서의 스크립트 차단 스타일 시트 세트에서 제거합니다.
element에서 렌더링 차단 해제를 수행합니다.
이 요소는 해당 요소의 로드 이벤트를 지연 시켜야 하며, 스타일 시트의 노드 문서의 중요 하위 리소스를 모두 가져올 때까지 기다려야 합니다.
이 사양은 스타일 시스템을 명시하지 않지만 대부분의 웹 브라우저에서 CSS가 지원될 것으로 예상됩니다. [CSS]
모든 현재 엔진에서 지원됨.
media
및 blocking
IDL
속성은 각각 동일한 이름의 해당 내용 속성을 반영해야 합니다.
LinkStyle
인터페이스도 이 요소에 의해 구현됩니다. [CSSOM]
다음 문서는 스트레스 강조 표시가 기울임체 텍스트 대신 밝은 빨간색 텍스트로 스타일링되며, 제목과 라틴어 단어는 기본 기울임체로 유지됩니다. 이는 적절한 요소를 사용하여 문서를 쉽게 다시 스타일링하는 방법을 보여줍니다.
<!DOCTYPE html>
< html lang = "en-US" >
< head >
< title > My favorite book</ title >
< style >
body { color : black ; background : white ; }
em { font-style : normal ; color : red ; }
</ style >
</ head >
< body >
< p > My < em > favorite</ em > book of all time has < em > got</ em > to be
< cite > A Cat's Life</ cite > . It is a book by P. Rahmel that talks
about the < i lang = "la" > Felis catus</ i > in modern human society.</ p >
</ body >
</ html >
스타일 시트가 다른 리소스를 참조하지 않은 경우(예: style
요소에
의해 제공된 내부 스타일 시트로 @import
규칙이 없는 경우), 스타일 규칙은 스크립트에서 즉시 사용할 수 있어야 합니다. 그렇지 않은 경우, 스타일 규칙은 이벤트 루프가 렌더링 업데이트 단계에
도달한 후에만 스크립트에서 사용할 수 있어야 합니다.
HTML 파서 또는 XML 파서의 문맥에서 document
에 있는 요소
el이 다음
조건이 모두 참일 때 스크립트를 차단하는 스타일 시트에 기여합니다:
el이 해당 document
의 파서에 의해
생성되었습니다.
el이 style
요소이거나, 해당 파서에 의해 생성되었을 때 el이 스타일링 처리 모델에 기여하는 외부 리소스 링크였던 link
요소입니다.
el의 media
속성 값이 환경과 일치합니다.
el의 스타일 시트가 해당 요소가 파서에 의해 생성되었을 때 활성화되어 있었습니다.
사용자 에이전트가 해당 스타일 시트를 로드하는 것을 아직 포기하지 않았습니다. 사용자 에이전트는 언제든지 스타일 시트 로드를 포기할 수 있습니다.
스타일 시트 로드 전에 스타일 시트 로드를 포기하는 경우, 스타일 시트가 나중에 여전히 로드되면 스크립트가 잘못된 정보를 기반으로 작동할 수 있습니다. 예를 들어, 스타일 시트가 요소의 색상을 녹색으로 설정하지만, 시트가 로드되기 전에 결과 스타일을 검사하는 스크립트가 실행되면 스크립트는 요소가 검정색(또는 기본 색상)이라고 판단하여 잘못된 선택을 할 수 있습니다(예: 페이지의 다른 부분에서 검정색을 사용하도록 결정하는 등). 구현자는 잘못된 정보를 사용하는 스크립트의 가능성과 느린 네트워크 요청이 완료될 때까지 기다리는 동안 아무것도 하지 않는 것의 성능 영향을 균형 있게 고려해야 합니다.
위의 규칙에 상응하는 규칙이 <?xml-stylesheet?>
PI에도 적용될 것으로 예상됩니다. 그러나 이것은 아직 철저히 조사되지 않았습니다.
document
는 초기에는 비어 있는 순서가 지정된 세트인 스크립트 차단 스타일 시트 세트를 가지고
있습니다.
document
document가 다음
단계가 참이면 스크립트를 차단하는 스타일 시트가 있는 것으로 간주됩니다:
만약 document의 스크립트 차단 스타일 시트 세트가 비어 있지 않다면 true를 반환합니다.
만약 document의 탐색 가능한 노드가 null이라면 false를 반환합니다.
만약 containerDocument가 null이 아니고 containerDocument의 스크립트 차단 스타일 시트 세트가 비어 있지 않다면 true를 반환합니다.
false를 반환합니다.
document
는 스크립트를 차단하는 스타일 시트가
없는 경우에 스크립트를 차단하는 스타일 시트가 없는 것으로 간주됩니다.
Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
모든 최신 엔진에서 지원됩니다.
body
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
html
요소의 두 번째 요소로.
body
요소 안의 첫 번째
내용이 ASCII 공백 또는 주석이 아닌 경우, body
요소의 시작 태그를 생략할 수 있습니다. 단, meta
, noscript
, link
, script
, style
, 또는 template
요소가 첫 번째 내용인
경우는 제외됩니다.
body
요소의 종료 태그는 body
요소 바로 뒤에 주석이 없는 경우 생략할 수 있습니다.
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpageswap
onpagehide
onpagereveal
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
[Exposed =Window ]
interface HTMLBodyElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 더 이상 사용되지 않는 멤버도 포함합니다.
};
HTMLBodyElement 포함합니다 WindowEventHandlers ;
준수 문서에는 하나의 body
요소만 존재합니다.
document.body
IDL 속성은 스크립트에
문서의 body
요소에 쉽게 접근할 수 있게 해줍니다.
일부 DOM 작업(예: 드래그 앤 드롭 모델의 일부)은 "body 요소"로 정의됩니다. 이는 용어의 정의에 따라 DOM의 특정 요소를 참조하며, 임의의 body
요소를 의미하지 않습니다.
body
요소는 이벤트 핸들러 콘텐츠
속성으로 Window
객체의 여러 이벤트 핸들러를 노출합니다. 또한 이러한 이벤트 핸들러는 이벤트 핸들러 IDL 속성을 반영합니다.
이벤트 핸들러는 Window
객체에서 Window
-반영 body 요소 이벤트 핸들러
세트로 명명된 이벤트 핸들러를 body
요소에 노출하며, 일반적인 이벤트 핸들러를 대체합니다.
따라서, 예를 들어, 오류
이벤트가 document
의 body 요소의 자식에서 버블링되면, 먼저 해당 요소의 onerror
이벤트 핸들러 콘텐츠
속성이 트리거되고, 그 다음으로 루트 html
요소의 해당 속성이 트리거됩니다. 이 이벤트는
타겟에서 body
로, html
로, document
로, Window
로 버블링되며, 이벤트 핸들러는 Window
가 아닌 body
에서 이를 감지합니다. 그러나 body
에
addEventListener()
를 사용하여 추가된 일반 이벤트 리스너는 이벤트가 body
를 통해 버블링할 때 실행되며, Window
객체에 도달할 때는 실행되지 않습니다.
이 페이지는 사용자가 온라인 상태인지 여부를 표시하는 표시기를 업데이트합니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Online or offline?</ title >
< script >
function update( online) {
document. getElementById( 'status' ). textContent =
online ? 'Online' : 'Offline' ;
}
</ script >
</ head >
< body ononline = "update(true)"
onoffline = "update(false)"
onload = "update(navigator.onLine)" >
< p > You are: < span id = "status" > (Unknown)</ span ></ p >
</ body >
</ html >
article
요소모든 최신 엔진에서 지원됨.
HTMLElement
사용.
article
요소는 문서, 페이지,
애플리케이션 또는 사이트 내에서 완결된 또는 자립적인 구성을 나타내며, 원칙적으로 독립적으로 배포되거나 재사용될 수 있습니다. 예시로는 포럼 게시물, 잡지나 신문 기사, 블로그 글, 사용자 제출 댓글,
대화형 위젯 또는 장치, 또는 기타 독립적인 콘텐츠 항목이 있습니다.
article
요소가 중첩될 때, 내부
article
요소는 원칙적으로 외부
기사와 관련된 기사를 나타냅니다. 예를 들어, 사용자 제출 댓글을 허용하는 사이트의 블로그 글은 댓글을 블로그 글에 대한 article
요소 내에 중첩된 article
요소로 나타낼 수 있습니다.
article
요소와 관련된 저자
정보(예를 들어 address
요소)는
중첩된 article
요소에는 적용되지
않습니다.
특히 콘텐츠를 배포하려는 경우 article
요소는 Atom의
entry
요소와 목적이 유사합니다. [ATOM]
schema.org 마이크로데이터 어휘를 사용하여 article
요소에 대한 출판 날짜를
제공할 수 있습니다. CreativeWork 서브타입 중 하나를 사용하여 제공합니다.
페이지의 주요 콘텐츠(푸터, 헤더, 탐색 블록 및 사이드바 제외)가 하나의 자립적인 구성인 경우, 해당 콘텐츠는 article
로 표시될 수 있지만, 이
경우 기술적으로 중복됩니다(단일 문서이므로 페이지가 단일 구성임이 자명하기 때문입니다).
이 예제는 article
요소를
사용하는 블로그 게시물과 몇 가지 schema.org 주석을 보여줍니다:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< footer >
< a itemprop = "discussionUrl" href = "?comments=1" > Show comments...</ a >
</ footer >
</ article >
다음은 동일한 블로그 게시물이지만 일부 댓글을 표시한 것입니다:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< section >
< h1 > Comments</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c1" >
< link itemprop = "url" href = "#c1" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Washington</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 15 minutes ago</ time ></ p >
</ footer >
< p > Yeah! Especially when talking about your lobbyist friends!</ p >
</ article >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c2" >
< link itemprop = "url" href = "#c2" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Hammond</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 5 minutes ago</ time ></ p >
</ footer >
< p > Hey, you have the same first name as me.</ p >
</ article >
</ section >
</ article >
각 댓글에 대한 정보(작성자와 작성 시간 등)를 제공하기 위해 footer
요소를 사용하는 것을
주목하세요.
footer
요소는
적절한 경우, 이 예시에서처럼 해당 섹션의 시작 부분에 나타날 수도 있습니다. (이 경우에
header
를 사용하는 것도 잘못된
것은 아닙니다.
이는 주로 작성자의 선호에 따라 다릅니다.)
이 예시에서는 article
요소들이 포털 페이지에 위젯을 호스팅하기 위해 사용됩니다.
위젯은 특정 스타일링과 스크립팅된 동작을 얻기 위해 커스텀 내장 요소로 구현되었습니다.
<!DOCTYPE HTML>
< html lang = en >
< title > eHome Portal</ title >
< script src = "/scripts/widgets.js" ></ script >
< link rel = stylesheet href = "/styles/main.css" >
< article is = "stock-widget" >
< h2 > Stocks</ h2 >
< table >
< thead > < tr > < th > Stock < th > Value < th > Delta
< tbody > < template > < tr > < td > < td > < td > </ template >
</ table >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
< article is = "news-widget" >
< h2 > News</ h2 >
< ul >
< template >
< li >
< p >< img > < strong ></ strong >
< p >
</ template >
</ ul >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
section
요소모든 최신 엔진에서 지원됩니다.
section
요소는 문서나 애플리케이션의
일반적인 섹션을 나타냅니다. 이 컨텍스트에서 섹션은 일반적으로 제목이 있는 콘텐츠의 주제별 그룹화입니다.
섹션의 예로는 챕터, 탭이 있는 대화 상자의 여러 탭 페이지 또는 논문의 번호가 매겨진 섹션이 있습니다. 웹사이트의 홈페이지는 소개, 뉴스 항목, 연락처 정보 등으로 나눌 수 있습니다.
작성자는 article
요소의 콘텐츠를 배포하는 것이 합리적일 때 section
요소 대신 사용할 것을
권장합니다.
section
요소는 일반적인 컨테이너
요소가 아닙니다. 요소가 스타일링 목적이나 스크립팅 편의를 위해서만 필요한 경우, 작성자는 div
요소를 사용하는 것이 좋습니다. 일반적인 규칙은
section
요소가 적합한 경우는
해당 요소의 콘텐츠가 문서의 개요에 명시적으로 나열되는 경우에만 해당된다는 것입니다.
다음 예시는 사과에 관한 기사(더 큰 웹 페이지의 일부)로, 두 개의 짧은 섹션을 포함하고 있습니다.
< article >
< hgroup >
< h2 > Apples</ h2 >
< p > Tasty, delicious fruit!</ p >
</ hgroup >
< p > The apple is the pomaceous fruit of the apple tree.</ p >
< section >
< h3 > Red Delicious</ h3 >
< p > These bright red apples are the most common found in many
supermarkets.</ p >
</ section >
< section >
< h3 > Granny Smith</ h3 >
< p > These juicy, green apples make a great filling for
apple pies.</ p >
</ section >
</ article >
다음은 졸업 프로그램의 예로, 졸업자 명단과 행사 설명 두 개의 섹션으로 구성되어 있습니다. (이 예시의 마크업은 요소 간 공백을 최소화하기 위해 가끔 사용되는 비정형 스타일을 포함하고 있습니다.)
<!DOCTYPE Html>
< Html Lang = En
>< Head
>< Title
> Graduation Ceremony Summer 2022</ Title
></ Head
>< Body
>< H1
> Graduation</ H1
>< Section
>< H2
> Ceremony</ H2
>< P
> Opening Procession</ P
>< P
> Speech by Valedictorian</ P
>< P
> Speech by Class President</ P
>< P
> Presentation of Diplomas</ P
>< P
> Closing Speech by Headmaster</ P
></ Section
>< Section
>< H2
> Graduates</ H2
>< Ul
>< Li
> Molly Carpenter</ Li
>< Li
> Anastasia Luccio</ Li
>< Li
> Ebenezar McCoy</ Li
>< Li
> Karrin Murphy</ Li
>< Li
> Thomas Raith</ Li
>< Li
> Susan Rodriguez</ Li
></ Ul
></ Section
></ Body
></ Html >
이 예시에서는 책 저자가 몇몇 섹션을 장(chapters)으로, 몇몇을 부록(appendices)으로 표시하였으며, CSS를 사용하여 이 두 종류의 섹션에 속하는 헤더를 다르게 스타일링하고 있습니다.
< style >
section { border : double medium ; margin : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em Roboto , Helvetica Neue , sans-serif ; }
</ style >
< header >
< hgroup >
< h1 > My Book</ h1 >
< p > A sample with not much content</ p >
</ hgroup >
< p >< small > Published by Dummy Publicorp Ltd.</ small ></ p >
</ header >
< section class = "chapter" >
< h2 > My First Chapter</ h2 >
< p > This is the first of my chapters. It doesn't say much.</ p >
< p > But it has two paragraphs!</ p >
</ section >
< section class = "chapter" >
< h2 > It Continues: The Second Chapter</ h2 >
< p > Bla dee bla, dee bla dee bla. Boom.</ p >
</ section >
< section class = "chapter" >
< h2 > Chapter Three: A Further Example</ h2 >
< p > It's not like a battle between brightness and earthtones would go
unnoticed.</ p >
< p > But it might ruin my story.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix A: Overview of Examples</ h2 >
< p > These are demonstrations.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix B: Some Closing Remarks</ h2 >
< p > Hopefully this long example shows that you < em > can</ em > style
sections, so long as they are used to indicate actual sections.</ p >
</ section >
nav
요소현재 모든 엔진에서 지원됩니다.
HTMLElement
을 사용함.
nav
요소는 페이지 내에서 다른 페이지로
또는 페이지 내 다른 부분으로 연결하는 링크가 포함된 섹션을 나타냅니다.
모든 링크 그룹이 nav
요소 내에 있을
필요는 없습니다.
이 요소는 주로 주요 탐색 블록을 포함하는 섹션을 대상으로 합니다. 특히, 사이트의 푸터에 서비스 약관, 홈페이지, 저작권 페이지 등의 짧은 링크 목록이 있는 경우가 일반적입니다. 이러한 경우에는
footer
요소만으로도 충분하며, nav
요소를 사용할 수는 있지만,
보통은 불필요합니다.
화면 읽기 장치와 같은 사용자 에이전트는 내비게이션 정보를 초기 렌더링에서 생략하거나 요청 시 제공할 수 있습니다. 이러한 요소는 페이지에서 건너뛸 콘텐츠를 식별하거나 필요에 따라 정보를 즉시 제공하는 데 도움이 될 수 있습니다.
다음 예에서 두 개의 nav
요소가 있습니다. 하나는
사이트의 주요 탐색을 위한 것이고, 다른 하나는 페이지 자체의 부차적인 탐색을 위한 것입니다.
< body >
< h1 > The Wiki Center Of Exampland</ h1 >
< nav >
< ul >
< li >< a href = "/" > Home</ a ></ li >
< li >< a href = "/events" > Current Events</ a ></ li >
...more...
</ ul >
</ nav >
< article >
< header >
< h2 > Demos in Exampland</ h2 >
< p > Written by A. N. Other.</ p >
</ header >
< nav >
< ul >
< li >< a href = "#public" > Public demonstrations</ a ></ li >
< li >< a href = "#destroy" > Demolitions</ a ></ li >
...more...
</ ul >
</ nav >
< div >
< section id = "public" >
< h2 > Public demonstrations</ h2 >
< p > ...more...</ p >
</ section >
< section id = "destroy" >
< h2 > Demolitions</ h2 >
< p > ...more...</ p >
</ section >
...more...
</ div >
< footer >
< p >< a href = "?edit" > Edit</ a > | < a href = "?delete" > Delete</ a > | < a href = "?Rename" > Rename</ a ></ p >
</ footer >
</ article >
< footer >
< p >< small > © copyright 1998 Exampland Emperor</ small ></ p >
</ footer >
</ body >
다음 예에서는 페이지에 여러 링크가 있지만, 그중 하나만 내비게이션 섹션으로 간주됩니다.
< body itemscope itemtype = "http://schema.org/Blog" >
< header >
< h1 > Wake up sheeple!</ h1 >
< p >< a href = "news.html" > News</ a > -
< a href = "blog.html" > Blog</ a > -
< a href = "forums.html" > Forums</ a ></ p >
< p > Last Modified: < span itemprop = "dateModified" > 2009-04-01</ span ></ p >
< nav >
< h2 > Navigation</ h2 >
< ul >
< li >< a href = "articles.html" > Index of all articles</ a ></ li >
< li >< a href = "today.html" > Things sheeple need to wake up for today</ a ></ li >
< li >< a href = "successes.html" > Sheeple we have managed to wake</ a ></ li >
</ ul >
</ nav >
</ header >
< main >
< article itemprop = "blogPosts" itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > My Day at the Beach</ h2 >
</ header >
< div itemprop = "articleBody" >
< p > Today I went to the beach and had a lot of fun.</ p >
...more content...
</ div >
< footer >
< p > Posted < time itemprop = "datePublished" datetime = "2009-10-10" > Thursday</ time > .</ p >
</ footer >
</ article >
...more blog posts...
</ main >
< footer >
< p > Copyright ©
< span itemprop = "copyrightYear" > 2010</ span >
< span itemprop = "copyrightHolder" > The Example Company</ span >
</ p >
< p >< a href = "about.html" > About</ a > -
< a href = "policy.html" > Privacy Policy</ a > -
< a href = "contact.html" > Contact Us</ a ></ p >
</ footer >
</ body >
위 예에서 블로그 게시물의 발행 날짜와 기타 메타데이터를 제공하기 위해 schema.org 어휘를 사용하는 마이크로데이터 주석도 볼 수 있습니다.
nav
요소는 반드시 목록을 포함해야 하는 것은
아니며, 다른 종류의 콘텐츠도 포함할 수 있습니다. 이 내비게이션 블록에서는 링크가 산문 형태로 제공됩니다:
< nav >
< h1 > Navigation</ h1 >
< p > You are on my home page. To the north lies < a href = "/blog" > my
blog</ a > , from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many < a
href = "/school" > school papers</ a > are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a < a href = "/school/thesis" > thesis</ a > .</ p >
< p > To the west are several exits. One fun-looking exit is labeled < a
href = "https://games.example.com/" > "games"</ a > . Another more
boring-looking exit is labeled < a
href = "https://isp.example.net/" > ISP™</ a > .</ p >
< p > To the south lies a dark and dank < a href = "/about" > contacts
page</ a > . Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</ p >
</ nav >
이 예시에서는 nav
가 이메일 애플리케이션에서 사용되어
사용자가 폴더를 전환할 수 있도록 합니다:
< p >< input type = button value = "Compose" onclick = "compose()" ></ p >
< nav >
< h1 > Folders</ h1 >
< ul >
< li > < a href = "/inbox" onclick = "return openFolder(this.href)" > Inbox</ a > < span class = count ></ span >
< li > < a href = "/sent" onclick = "return openFolder(this.href)" > Sent</ a >
< li > < a href = "/drafts" onclick = "return openFolder(this.href)" > Drafts</ a >
< li > < a href = "/trash" onclick = "return openFolder(this.href)" > Trash</ a >
< li > < a href = "/customers" onclick = "return openFolder(this.href)" > Customers</ a >
</ ul >
</ nav >
aside
요소모든 최신 엔진에서 지원됩니다.
HTMLElement
사용.
aside
요소는 페이지의 일부분을 나타내며, 해당
요소 주위의 콘텐츠와 간접적으로 관련된 콘텐츠로 구성되며, 해당 콘텐츠와는 분리된 것으로 간주될 수 있습니다. 이러한 구획은 인쇄된 타이포그래피에서 종종 사이드바로 표현됩니다.
이 요소는 인용구나 사이드바와 같은 타이포그래피 효과, 광고, nav
요소 그룹, 페이지의 주요 콘텐츠와 별개로 간주되는 기타
콘텐츠에 사용할 수 있습니다.
단순히 괄호 안의 내용을 나타내기 위해 aside
요소를 사용하는 것은 적절하지 않습니다.
이들은 문서의 주요 흐름의 일부로 간주되기 때문입니다.
다음 예시는 유럽에 대한 훨씬 긴 뉴스 기사에서 스위스에 대한 배경 정보를 표시하기 위해 aside가 사용되는 방식을 보여줍니다.
< aside >
< h2 > Switzerland</ h2 >
< p > Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</ p >
</ aside >
다음 예시는 더 긴 기사에서 인용문을 마크업하기 위해 aside가 사용되는 방식을 보여줍니다.
...
< p > He later joined a large company, continuing on the same work.
< q > I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</ q ></ p >
< aside >
< q > People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer.</ q >
</ aside >
< p > Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</ p >
...
다음 발췌문은 블로그롤과 블로그의 기타 사이드 콘텐츠에 대해 aside
를 사용하는 방법을 보여줍니다:
< body >
< header >
< h1 > My wonderful blog</ h1 >
< p > My tagline</ p >
</ header >
< aside >
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
< nav >
< h2 > My blogroll</ h2 >
< ul >
< li >< a href = "https://blog.example.com/" > Example Blog</ a >
</ ul >
</ nav >
< nav >
< h2 > Archives</ h2 >
< ol reversed >
< li >< a href = "/last-post" > My last post</ a >
< li >< a href = "/first-post" > My first post</ a >
</ ol >
</ nav >
</ aside >
< aside >
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
< h1 > Twitter Feed</ h1 >
< blockquote cite = "https://twitter.example.net/t31351234" >
I'm on vacation, writing my blog.
</ blockquote >
< blockquote cite = "https://twitter.example.net/t31219752" >
I'm going to go on vacation soon.
</ blockquote >
</ aside >
< article >
<!-- this is a blog post -->
< h2 > My last post</ h2 >
< p > This is my last post.</ p >
< footer >
< p >< a href = "/last-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< article >
<!-- this is also a blog post -->
< h2 > My first post</ h2 >
< p > This is my first post.</ p >
< aside >
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
< h2 > Posting</ h2 >
< p > While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</ p >
</ aside >
< footer >
< p >< a href = "/first-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< footer >
< p >< a href = "/archives" > Archives</ a > -
< a href = "/about" > About me</ a > -
< a href = "/copyright" > Copyright</ a ></ p >
</ footer >
</ body >
h1
, h2
,
h3
, h4
, h5
, 및 h6
요소들
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
hgroup
요소의 자식으로.
[Exposed =Window ]
interface HTMLHeadingElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 구식 멤버도 포함됨
};
이 요소들은 그들의 섹션에 대한 제목을 나타냅니다.
이 요소들의 의미와 정의는 제목과 개요 섹션에서 정의됩니다.
이 요소들은 이름에 있는 숫자로 주어진 제목 수준을
가지고 있습니다.
제목 수준은 중첩된 섹션의 레벨과 대응됩니다.
h1
요소는 최상위 섹션을 위한 것이고,
h2
는 하위 섹션을 위한 것이며,
h3
는 하위의 하위 섹션을 위한 것이며, 계속해서 이어집니다.
각각의 문서 개요(제목 및 섹션 구조)와 관련하여, 이 두 스니펫은 의미적으로 동일합니다:
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< h2 > Diving in</ h2 >
< h2 > Simple shapes</ h2 >
< h2 > Canvas coordinates</ h2 >
< h3 > Canvas coordinates diagram</ h3 >
< h2 > Paths</ h2 >
</ body >
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h2 > Diving in</ h2 >
</ section >
< section >
< h2 > Simple shapes</ h2 >
</ section >
< section >
< h2 > Canvas coordinates</ h2 >
< section >
< h3 > Canvas coordinates diagram</ h3 >
</ section >
</ section >
< section >
< h2 > Paths</ h2 >
</ section >
</ body >
작성자는 전자의 스타일을 간결함 때문에 선호할 수 있고, 후자의 스타일을 추가적인 스타일링 훅 때문에 선호할 수 있습니다. 어느 것이 더 좋은지는 순전히 선호하는 작성 스타일의 문제입니다.
hgroup
요소모든 현재 엔진에서 지원됩니다.
p
요소들로 시작하고, 그 다음에 하나의
h1
,
h2
,
h3
,
h4
,
h5
,
또는 h6
요소가 있으며,
그 다음에 선택적으로 스크립트 지원
요소와 섞일 수 있는 하나 이상의 p
요소들이 옵니다.
HTMLElement
을 사용.
hgroup
요소는 제목과 관련된 콘텐츠를 나타냅니다.
이 요소는 h1
–h6
요소를 하나 이상의
p
요소와 함께 그룹화하여, 부제목, 대체 제목 또는
태그라인을 나타내는 콘텐츠를 포함할 수 있습니다.
hgroup
요소에 포함된 유효한
제목의 예가 있습니다.
< hgroup >
< h1 > The reality dysfunction</ h1 >
< p > Space is not the only void</ p >
</ hgroup >
< hgroup >
< h1 > Dr. Strangelove</ h1 >
< p > Or: How I Learned to Stop Worrying and Love the Bomb</ p >
</ hgroup >
header
요소모든 현재 엔진에서 지원됩니다.
header
또는 footer
요소가 없어야 합니다.
HTMLElement
을 사용.
header
요소는 소개 또는 탐색 도구의
그룹을 나타냅니다.
header
요소는
일반적으로 제목
(h1
–h6
요소 또는 hgroup
요소)을 포함하도록 되어
있지만, 이는 필수가 아닙니다.
header
요소는 또한 섹션의 목차, 검색
양식 또는 관련 로고를 감싸는 데 사용할 수 있습니다.
다음은 몇 가지 샘플 헤더입니다. 첫 번째 예시는 게임용 헤더입니다:
< header >
< p > Welcome to...</ p >
< h1 > Voidwars!</ h1 >
</ header >
다음 스니펫은 요소가 사양의 헤더를 마크업하는 데 어떻게 사용될 수 있는지를 보여줍니다:
< header >
< hgroup >
< h1 > Fullscreen API</ h1 >
< p > Living Standard — Last Updated 19 October 2015< p >
</ hgroup >
< dl >
< dt > Participate:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > Commits:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ dd >
</ dl >
</ header >
header
요소는 섹션 콘텐츠가 아닙니다. 이 요소는 새로운 섹션을 도입하지
않습니다.
이 예에서, 페이지는 h1
요소에 의해 주어진 페이지 제목과, h2
요소들에 의해 주어진 두 개의 하위 섹션을 가지고 있습니다.
header
요소 이후의 콘텐츠는
여전히
header
요소에서 시작된 마지막
하위 섹션의 일부입니다.
이는 header
요소가
개요 알고리즘에 참여하지 않기 때문입니다.
< body >
< header >
< h1 > Little Green Guys With Guns</ h1 >
< nav >
< ul >
< li >< a href = "/games" > Games</ a >
< li >< a href = "/forum" > Forum</ a >
< li >< a href = "/download" > Download</ a >
</ ul >
</ nav >
< h2 > Important News</ h2 > <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
< p > To play today's games you will need to update your client.</ p >
< h2 > Games</ h2 > <!-- this starts a third subsection -->
</ header >
< p > You have three active games:</ p >
<!-- this is still part of the subsection entitled "Games" -->
...
footer
요소모든 현재 엔진에서 지원됩니다.
header
또는 footer
요소가 없어야 합니다.
HTMLElement
을 사용.
footer
요소는 가장 가까운 상위 섹션 콘텐츠 요소나 그러한 상위 요소가 없을 경우 body 요소에 대한 푸터를 나타냅니다. 푸터에는 일반적으로 섹션의 작성자에 대한 정보, 관련 문서 링크, 저작권 정보 등이 포함됩니다.
footer
요소가 전체 섹션을 포함하는
경우, 그것은 부록, 인덱스, 긴 판권 페이지, 상세한 라이선스 계약서, 또는 이와 유사한
내용을 나타냅니다.
섹션의 작성자 또는 편집자에 대한 연락처 정보는 address
요소에 속하며, 이는 footer
내부에 있을 수 있습니다. 작성자에
대한 정보나 기타 정보는 header
또는
footer
에 배치할 수 있습니다(또는 그
어느 곳에도 배치하지 않을 수 있습니다). 이 요소들의 주요 목적은 단지 작성자가 유지 관리 및 스타일링하기 쉬운 자기 설명적인 마크업을 작성할 수 있도록 돕는 것입니다. 이 요소들은 작성자에게 특정한
구조를 강요하려는 의도가 아닙니다.
푸터는 보통 섹션의 끝에 나타나지만, 반드시 그렇게 해야 하는 것은 아닙니다.
상위에 섹션 콘텐츠 요소가 없을 경우, 페이지 전체에 적용됩니다.
footer
요소는
자체적으로 섹션 콘텐츠가 아닙니다. 이 요소는 새로운 섹션을
도입하지 않습니다.
여기에 동일한 내용으로 상단과 하단에 두 개의 푸터가 있는 페이지가 있습니다:
< body >
< footer >< a href = "../" > Back to index...</ a ></ footer >
< hgroup >
< h1 > Lorem ipsum</ h1 >
< p > The ipsum of all lorems</ p >
</ hgroup >
< p > A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</ p >
< footer >< a href = "../" > Back to index...</ a ></ footer >
</ body >
다음은 footer
요소가 사이트
전체의 푸터와 섹션 푸터 모두에 사용된 예시입니다.
<!DOCTYPE HTML>
< HTML LANG = "en" >< HEAD >
< TITLE > The Ramblings of a Scientist</ TITLE >
< BODY >
< H1 > The Ramblings of a Scientist</ H1 >
< ARTICLE >
< H1 > Episode 15</ H1 >
< VIDEO SRC = "/fm/015.ogv" CONTROLS PRELOAD >
< P >< A HREF = "/fm/015.ogv" > Download video</ A > .</ P >
</ VIDEO >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-10-21T18:26-07:00" > on 2009/10/21 at 6:26pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< ARTICLE >
< H1 > My Favorite Trains</ H1 >
< P > I love my trains. My favorite train of all time is a Köf.</ P >
< P > It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</ P >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-09-15T14:54-07:00" > on 2009/09/15 at 2:54pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< FOOTER > <!-- site wide footer -->
< NAV >
< P >< A HREF = "/credits.html" > Credits</ A > —
< A HREF = "/tos.html" > Terms of Service</ A > —
< A HREF = "/index.html" > Blog Index</ A ></ P >
</ NAV >
< P > Copyright © 2009 Gordon Freeman</ P >
</ FOOTER >
</ BODY >
</ HTML >
일부 사이트 디자인에는 "fat footers"라고 불리는 푸터가 포함되어 있습니다. 이러한 푸터는 이미지, 다른 기사로의 링크, 피드백을 보낼 수 있는 페이지로의 링크, 특별 제안 등 많은 자료를 포함하고 있어, 어떤 면에서는 푸터에 "전체 첫 페이지"가 있는 것과 같습니다.
이 조각은 "fat footer"가 있는 사이트 페이지의 하단을 보여줍니다:
...
< footer >
< nav >
< section >
< h1 > Articles</ h1 >
< p >< img src = "images/somersaults.jpeg" alt = "" > Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. < a href = "articles/somersaults/1" > Part
1</ a > · < a href = "articles/somersaults/2" > Part 2</ a ></ p >
< p >< img src = "images/kindplus.jpeg" > Tired of walking on the edge of
a clif<!-- sic --> ? Our guest writer Lara shows you how to bumble
your way through the bars. < a href = "articles/kindplus/1" > Read
more...</ a ></ p >
< p >< img src = "images/crisps.jpeg" > The chips are down, now all
that's left is a potato. What can you do with it? < a
href = "articles/crisps/1" > Read more...</ a ></ p >
</ section >
< ul >
< li > < a href = "/about" > About us...</ a >
< li > < a href = "/feedback" > Send feedback!</ a >
< li > < a href = "/sitemap" > Sitemap</ a >
</ ul >
</ nav >
< p >< small > Copyright © 2015 The Snacker —
< a href = "/tos" > Terms of Service</ a ></ small ></ p >
</ footer >
</ body >
address
요소모든 현재 엔진에서 지원됩니다.
header
, footer
, 또는 address
요소가 없어야 합니다.
HTMLElement
을 사용.
address
요소는 가장 가까운 상위
article
또는 body
요소의 연락처 정보를 나타냅니다. 만약 그것이 body 요소라면, 이 연락처 정보는 문서 전체에 적용됩니다.
예를 들어, W3C 웹사이트의 HTML 관련 페이지에는 다음과 같은 연락처 정보가 포함될 수 있습니다:
< ADDRESS >
< A href = "../People/Raggett/" > Dave Raggett</ A > ,
< A href = "../People/Arnaud/" > Arnaud Le Hors</ A > ,
contact persons for the < A href = "Activity" > W3C HTML Activity</ A >
</ ADDRESS >
address
요소는 그 주소가 실제로
관련된 연락처 정보가 아닌 경우 임의의 주소(예: 우편 주소)를 나타내는 데 사용해서는 안 됩니다. (우편 주소를 마크업하는 데는 p
요소가 적절한 요소입니다.)
address
요소에는 연락처 정보
이외의 정보가 포함되어서는 안 됩니다.
예를 들어, 다음은 address
요소의 비준수 사용 사례입니다:
< ADDRESS > Last Modified: 1999/12/24 23:37:50</ ADDRESS >
일반적으로 address
요소는 다른
정보와 함께 footer
요소에
포함됩니다.
노드 node의 연락처 정보는 다음 목록에서 처음 해당하는 항목으로 정의된 address
요소들의 집합입니다:
article
요소라면
body
요소라면
연락처 정보는 node를 상위 요소로 가지며 node의 하위 요소가 아닌 다른 body
또는 article
요소를 상위
요소로 가지지 않는 모든 address
요소들로
구성됩니다.
article
요소를 상위 요소로
가진다면
body
요소를 상위 요소로 가진다면
node의 연락처 정보는 가장 가까운 article
또는
body
요소 상위 요소의 연락처
정보와 동일합니다.
node에 대한 연락처 정보가 없습니다.
사용자 에이전트는 사용자가 노드의 연락처 정보를 노출하거나, 섹션의 연락처 정보를 기반으로 섹션을 인덱싱하는 등의 다른 목적으로 사용할 수 있습니다.
이 예제에서는 푸터에 연락처 정보와 저작권 고지가 포함되어 있습니다.
< footer >
< address >
For more details, contact
< a href = "mailto:js@example.com" > John Smith</ a > .
</ address >
< p >< small > © copyright 2038 Example Corp.</ small ></ p >
</ footer >
h1
–h6
요소는 요소 이름의 숫자에 의해 주어지는 제목 수준을 가집니다.
이 요소들은 제목을 나타냅니다. 제목의 제목 수준이 낮을수록, 해당 제목이 갖는 상위 섹션의 수가 적습니다.
개요는 예를 들어, 목차를 생성할 때와 같이 문서 개요를 생성하는 데 사용되어야 합니다. 인터랙티브한 목차를 만들 때, 항목은 사용자를 관련 제목으로 이동시켜야 합니다.
문서에 하나 이상의 제목이 있는 경우, 개요 내의 적어도 하나의 제목은 1의 제목 수준을 가져야 합니다.
또한, 개요에서 다른 제목을 따르는 각 제목은 선행 lead의 제목 수준보다 낮거나, 같거나, 1만큼 높은 제목 수준을 가져야 합니다.
다음 예시는 비준수 사례입니다:
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h3 > Taste</ h3 >
< p > They taste lovely.</ p >
</ section >
</ body >
다음과 같이 작성하면 준수하게 됩니다:
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< p > They taste lovely.</ p >
</ section >
</ body >
다음 마크업 조각:
< body >
< hgroup id = "document-title" >
< h1 > HTML: Living Standard</ h1 >
< p > Last Updated 12 August 2016</ p >
</ hgroup >
< p > Some intro to the document.</ p >
< h2 > Table of contents</ h2 >
< ol id = toc > ...</ ol >
< h2 > First section</ h2 >
< p > Some intro to the first section.</ p >
</ body >
...는 3개의 문서 제목을 생성합니다:
<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2>
.
<h2>First section</h2>
.
개요의 렌더링된 뷰는 다음과 같이 보일 수 있습니다:
먼저, 다음은 장과 하위 섹션이 매우 짧은 책으로 구성된 문서입니다:
<!DOCTYPE HTML>
< html lang = en >
< title > The Tax Book (all in one page)</ title >
< h1 > The Tax Book</ h1 >
< h2 > Earning money</ h2 >
< p > Earning money is good.</ p >
< h3 > Getting a job</ h3 >
< p > To earn money you typically need a job.</ p >
< h2 > Spending money</ h2 >
< p > Spending is what money is mainly used for.</ p >
< h3 > Cheap things</ h3 >
< p > Buying cheap things often not cost-effective.</ p >
< h3 > Expensive things</ h3 >
< p > The most expensive thing is often not the most cost-effective either.</ p >
< h2 > Investing money</ h2 >
< p > You can lend your money to other people.</ p >
< h2 > Losing money</ h2 >
< p > If you spend money or invest money, sooner or later you will lose money.
< h3 > Poor judgement</ h3 >
< p > Usually if you lose money it's because you made a mistake.</ p >
그 개요는 다음과 같이 표현될 수 있습니다:
문서에는 여러 개의 최상위 제목이 포함될 수 있습니다:
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< h1 > Apples</ h1 >
< p > Pomaceous.</ p >
< h1 > Bananas</ h1 >
< p > Edible.</ p >
< h1 > Carambola</ h1 >
< p > Star.</ p >
문서의 개요는 다음과 같이 표현될 수 있습니다:
header
요소는 문서의 개요에 영향을 주지 않습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< title > We're adopting a child! — Ray's blog</ title >
< h1 > Ray's blog</ h1 >
< article >
< header >
< nav >
< a href = "?t=-1d" > Yesterday</ a > ;
< a href = "?t=-7d" > Last week</ a > ;
< a href = "?t=-1m" > Last month</ a >
</ nav >
< h2 > We're adopting a child!</ h2 >
</ header >
< p > As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.</ p >
</ article >
</ html >
문서의 개요는 다음과 같이 표현될 수 있습니다:
다음 예제는 준수하지만, 제목 수준이 1인 제목이 없기 때문에 권장되지는 않습니다:
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< section >
< h2 > Apples</ h2 >
< p > Pomaceous.</ p >
</ section >
< section >
< h2 > Bananas</ h2 >
< p > Edible.</ p >
</ section >
< section >
< h2 > Carambola</ h2 >
< p > Star.</ p >
</ section >
문서의 개요는 다음과 같이 표현될 수 있습니다:
다음 예제는 준수하지만, 첫 번째 제목의 제목 수준이 1이 아니기 때문에 권장되지는 않습니다:
<!DOCTYPE HTML>
< html lang = en >
< title > Feathers on The Site of Encyclopedic Knowledge</ title >
< h2 > A plea from our caretakers</ h2 >
< p > Please, we beg of you, send help! We're stuck in the server room!</ p >
< h1 > Feathers</ h1 >
< p > Epidermal growths.</ p >
문서의 개요는 다음과 같이 표현될 수 있습니다:
사용자 에이전트는 페이지 개요를 사용자에게 노출하여 탐색을 돕도록 권장됩니다. 이는 특히 스크린 리더와 같은 비시각적 미디어에 해당됩니다.
예를 들어, 사용자 에이전트는 화살표 키를 다음과 같이 매핑할 수 있습니다:
이 섹션은 규범적이지 않습니다.
요소 | 목적 |
---|---|
예시 | |
body
| 문서의 내용. |
| |
article
| 문서, 페이지, 애플리케이션 또는 사이트 내에서 완전하거나 독립적인 구성을 가지며 원칙적으로 독립적으로 배포되거나 재사용될 수 있는 콘텐츠, 예를 들어 배포용으로 사용될 수 있는 포럼 게시물, 잡지 또는 신문 기사, 블로그 게시물, 사용자가 제출한 댓글, 인터랙티브 위젯 또는 도구, 또는 기타 독립적인 콘텐츠 항목을 의미합니다. |
| |
section
| 문서 또는 애플리케이션의 일반적인 섹션. 이 문맥에서 섹션은 일반적으로 제목이 있는 내용의 주제별 그룹화를 의미합니다. |
| |
nav
| 다른 페이지 또는 페이지 내의 부분으로 연결되는 섹션: 내비게이션 링크가 있는 섹션. |
| |
aside
| 페이지의 섹션으로, 주변 콘텐츠와 간접적으로 관련된 콘텐츠로 구성되며, 해당 콘텐츠와 분리될 수 있는 섹션입니다. 이러한 섹션은 인쇄된 활자에서 사이드바로 자주 표현됩니다. |
| |
h1 –h6
| 제목 |
| |
hgroup
| 제목 및 관련 콘텐츠. 이 요소는 h1 –h6
요소와 하나 이상의 p 요소를 그룹화하여 하위
제목, 대체 제목 또는 태그라인을 나타내는 콘텐츠를 포함할 수 있습니다.
|
| |
header
| 소개 또는 내비게이션 요소의 그룹. |
| |
footer
| 가장 가까운 상위 섹션 콘텐츠 요소나, 그러한 상위 요소가 없을 경우 body 요소에 대한 푸터입니다. 푸터에는 보통 해당 섹션에 대한 정보, 작성자 정보, 관련 문서로의 링크, 저작권 데이터 등이 포함됩니다. |
|
이 섹션은 비규범적입니다.
섹션
은 다른 것의 일부를 형성합니다.
아티클
은 그 자체로 독립된 것입니다. 하지만
어떤 것이 섹션이고 어떤 것이 아티클인지 어떻게 알 수 있을까요? 대부분의 경우, 진짜 답은 "작성자의 의도에 달려 있다"입니다.
예를 들어, "이 즙이 많은 녹색 사과는 애플 파이 속을 채우기에 좋습니다."라고만 적힌 "그래니 스미스" 챕터가 있는 책을 상상해볼 수 있습니다. 이 경우 다른 종류의 사과에 대한 여러 챕터가 있을
것이므로 이는 섹션
입니다.
반면에 "그래니 스미스. 이 즙이 많은 녹색 사과는 애플 파이 속을 채우기에 좋습니다."라고만 적힌 트윗이나 레딧 댓글, 텀블러 게시물, 신문 광고를 상상할 수도 있습니다. 이 경우 이는 전체 내용을
담고 있기 때문에 아티클
이 됩니다.
아티클에 대한 댓글은 그 아티클의 일부가 아니므로, 이는 독립된 아티클
입니다.
p
요소모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
p
요소의 끝 태그는 address
, article
, aside
, blockquote
, details
, div
, dl
, fieldset
, figcaption
, figure
, footer
, form
, h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
header
, hgroup
, hr
, main
, menu
, nav
, ol
, p
, pre
, search
, section
, table
, 또는 ul
요소가 바로 뒤따라오거나, 부모 요소에 더 이상 콘텐츠가 없고
부모 요소가 a
, audio
, del
, ins
, map
, noscript
, 또는 video
요소가 아닌 HTML 요소일 경우 생략될 수
있습니다.
[Exposed =Window ]
interface HTMLParagraphElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 더 이상 사용되지 않는 멤버가 있습니다.
};
단락은 일반적으로 인접한 블록과 빈 줄 또는 첫 줄 들여쓰기로 물리적으로 구분된 텍스트 블록으로 시각적 매체에서 표현되지만, 스타일 시트나 사용자 에이전트는 예를 들어 줄바꿈 기호(¶)를 사용하여 단락 구분을 다르게 표시하는 것도 가능합니다.
다음 예시는 적합한 HTML 조각입니다:
< p > 작은 새끼 고양이가 조심스럽게 카펫 조각 위에 앉았습니다. 나중에 이 순간은 고양이가 매트 위에 앉아 있었던 시간으로 기억될 것입니다.</ p >
< fieldset >
< legend > 개인 정보</ legend >
< p >
< label > 이름: < input name = "n" ></ label >
< label >< input name = "anon" type = "checkbox" > 다른 사용자로부터 숨기기</ label >
</ p >
< p >< label > 주소: < textarea name = "a" ></ textarea ></ label ></ p >
</ fieldset >
< p > 한때 펨리에서 나온 예제가 있었는데, < br >
마크업의 품질이 의심스러웠다. < br >
검증기는 불평했고, < br >
저자는 고통을 겪었다, < br >
오류를 마크업에서 운율로 이동시키는 것에 대해. </ p >
p
요소는 더 적합한 요소가 있을 때 사용하지 않아야 합니다.
다음 예제는 기술적으로는 맞지만:
< section >
<!-- ... -->
< p > 마지막 수정일: 2001-04-23</ p >
< p > 저자: fred@example.com</ p >
</ section >
더 좋은 마크업은 다음과 같습니다:
< section >
<!-- ... -->
< footer > 마지막 수정일: 2001-04-23</ footer >
< address > 저자: fred@example.com</ address >
</ section >
또는:
< section >
<!-- ... -->
< footer >
< p > 마지막 수정일: 2001-04-23</ p >
< address > 저자: fred@example.com</ address >
</ footer >
</ section >
리스트 요소(특히 ol
및 ul
요소)는 p
요소의 자식이 될 수 없습니다. 따라서 문장에 불릿 목록이
포함될 경우, 어떻게 마크업해야 할지 궁금할 수 있습니다.
예를 들어, 이 환상적인 문장은 다음과 관련된 불릿을 포함합니다:
그리고 아래에서 더 자세히 설명됩니다.
해결책은 단락이 HTML 용어에서는 논리적 개념이 아니라 구조적 개념이라는 점을 이해하는 것입니다. 위의 환상적인 예에서, 실제로는 다섯 개의 단락이 이 사양에 따라 정의됩니다: 목록 전 하나, 각 불릿마다 하나씩, 그리고 목록 후 하나.
위의 예제에 대한 마크업은 다음과 같습니다:
< p > 예를 들어, 이 환상적인 문장은 다음과 관련된 불릿을 포함합니다:</ p >
< ul >
< li > 마법사,
< li > 광속 여행, 및
< li > 텔레파시,
</ ul >
< p > 그리고 아래에서 더 자세히 설명됩니다.</ p >
이와 같은 "논리적" 단락을 여러 개의 "구조적" 단락으로 간편하게 스타일링하려는 저자는 div
요소를 p
요소 대신 사용할 수 있습니다.
따라서 예를 들어 위의 예제는 다음과 같이 변환될 수 있습니다:
< div > 예를 들어, 이 환상적인 문장은 다음과 관련된 불릿을 포함합니다.
< ul >
< li > 마법사,
< li > 광속 여행, 및
< li > 텔레파시,
</ ul >
그리고 아래에서 더 자세히 설명됩니다.</ div >
이 예제는 여전히 다섯 개의 구조적 단락을 가지고 있지만, 이제 저자는 예제를 개별적으로 고려할 필요 없이 div
만 스타일링할 수 있습니다.
hr
요소현재 모든 엔진에서 지원됩니다.
select
요소의 자식으로 사용될 수
있습니다.[Exposed =Window ]
interface HTMLHRElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 더 이상 사용되지 않는 멤버가 있습니다.
};
hr
요소는 단락 수준의 주제적 구분을 나타냅니다.
예를 들어, 이야기에서 장면 전환, 참고 서적의 섹션 내에서 주제 전환 등을 나타낼 수 있습니다. 또는 select
요소의 옵션 집합 사이의 구분선 역할을 할
수도 있습니다.
다음 가상의 프로젝트 매뉴얼 발췌는 섹션 내에서 주제를 구분하기 위해 hr
요소를 사용하는 두 개의 섹션을 보여줍니다.
< section >
< h1 > Communication</ h1 >
< p > There are various methods of communication. This section
covers a few of the important ones used by the project.</ p >
< hr >
< p > Communication stones seem to come in pairs and have mysterious
properties:</ p >
< ul >
< li > They can transfer thoughts in two directions once activated
if used alone.</ li >
< li > If used with another device, they can transfer one's
consciousness to another body.</ li >
< li > If both stones are used with another device, the
consciousnesses switch bodies.</ li >
</ ul >
< hr >
< p > Radios use the electromagnetic spectrum in the meter range and
longer.</ p >
< hr >
< p > Signal flares use the electromagnetic spectrum in the
nanometer range.</ p >
</ section >
< section >
< h1 > Food</ h1 >
< p > All food at the project is rationed:</ p >
< dl >
< dt > Potatoes</ dt >
< dd > Two per day</ dd >
< dt > Soup</ dt >
< dd > One bowl per day</ dd >
</ dl >
< hr >
< p > Cooking is done by the chefs on a set rotation.</ p >
</ section >
섹션들 자체 사이에는 hr
요소가 필요하지 않습니다.
section
요소와 h1
요소가 자체적으로 주제 변화를 암시하기 때문입니다.
Peter F. Hamilton의 Pandora's Star에서 발췌한 다음 내용은 장면 전환을 앞두고 있는 두 개의 단락과 전환 이후의 단락을 보여줍니다. 장면 전환은
인쇄된 책에서 두 번째와 세 번째 단락 사이에 별 하나가 중앙에 배치된 공백으로 표현되며, 여기서는 hr
요소를 사용해 표현되었습니다.
< p > Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</ p >
< p >< i > Maybe it won't be that bad</ i > , he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</ p >
< hr >
< p > The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</ p >
pre
요소현재 모든 엔진에서 지원됩니다.
[Exposed =Window ]
interface HTMLPreElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 더 이상 사용되지 않는 멤버가 있습니다.
};
pre
요소는 미리 서식화된 텍스트의 블록을 나타내며, 이 텍스트는 요소 대신 전형적인 타이포그래픽 관습에 의해 구조화됩니다.
HTML 구문에서, pre
요소 시작 태그 바로 뒤에 오는 선행 개행 문자는
제거됩니다.
다음은 pre
요소를 사용할 수 있는 몇 가지 사례입니다:
저자들은 서식이 손실될 때(예: 음성 합성기, 점자 디스플레이 등 사용자에게) 미리 서식화된 텍스트가 어떻게 표시될지 고려하는 것이 좋습니다. ASCII 아트와 같은 경우에는 텍스트 설명과 같은 대체 표현이 문서의 독자들에게 더 보편적으로 접근 가능할 수 있습니다.
컴퓨터 코드 블록을 나타내기 위해 pre
요소와 code
요소를 함께 사용할 수 있으며, 컴퓨터 출력 블록을
나타내기 위해서는 pre
요소와 samp
요소를 함께 사용할 수 있습니다. 마찬가지로, 사용자가
입력해야 하는 텍스트를 표시하기 위해 kbd
요소를 pre
요소 내에 사용할 수 있습니다.
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항을 포함합니다.
다음 스니펫에서는 컴퓨터 코드 샘플이 제시됩니다.
< p > This is the < code > Panel</ code > constructor:</ p >
< pre >< code > function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</ code ></ pre >
다음 스니펫에서는 samp
와 kbd
요소가 pre
요소의 내용에 섞여서 Zork I 세션을
보여줍니다.
< pre >< samp > You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.
></ samp > < kbd > open mailbox</ kbd >
< samp > Opening the mailbox reveals:
A leaflet.
></ samp ></ pre >
다음 예시는 pre
요소를 사용하여 특이한 서식이 본래
시 자체의 일부를 이루는 현대 시를 보여줍니다.
< pre > maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</ pre >
blockquote
요소
현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
cite
— 인용문의 출처
또는 수정에 대한 추가 정보를 연결[Exposed =Window ]
interface HTMLQuoteElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString cite ;
};
HTMLQuoteElement
인터페이스는 q
요소에서도 사용됩니다.
blockquote
요소는
다른 출처에서 인용된 섹션을 나타냅니다.
blockquote
내의
콘텐츠는 다른 출처에서 인용된 것이어야 하며, 해당 출처의 주소가 있는 경우 cite
속성에서 인용할 수 있습니다.
cite 속성이 존재하는 경우, 유효한 URL이어야 합니다. 해당 속성 값은 요소의 노드 문서에 상대적으로 구문 분석되어야 합니다. 사용자 에이전트는 사용자가 이러한 인용 링크를 따라가도록 허용할 수 있지만, 이는 주로 개인적인 용도(예: 사이트의 인용문 사용 통계 수집을 위한 서버 측 스크립트)로 사용되며, 독자를 위한 것이 아닙니다.
blockquote
의
내용은 생략되거나 해당 언어의 전통적인 방식으로 문맥이 추가될 수 있습니다.
예를 들어, 영어에서는 일반적으로 대괄호를 사용합니다. "Jane ate the cracker. She then said she liked apples and fish."라는 문장이 있는 페이지가 있다고 가정하면 다음과 같이 인용될 수 있습니다:
< blockquote >
< p > [Jane] then said she liked [...] fish.</ p >
</ blockquote >
인용문의 출처는 blockquote
요소
외부에 배치해야 합니다.
예를 들어, 인용문 뒤에 단락으로 출처가 제공되는 예시입니다:
< blockquote >
< p > I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.</ p >
</ blockquote >
< p > — Stephen Roberts</ p >
아래의 다른 예시에서는 출처를 표시하는 다양한 방법을 보여줍니다.
cite
IDL 속성은 요소의
cite
콘텐츠 속성을 반영해야 합니다.
여기서는 blockquote
요소가 figure
요소 및
figcaption
과
함께 사용되어, 인용문을 그 출처와 명확하게 연결하는 방법을 보여줍니다(이는 인용문의 일부가 아니므로 blockquote
내부에 포함되지 않아야 합니다):
< figure >
< blockquote >
< p > The truth may be puzzling. It may take some work to grapple with.
It may be counterintuitive. It may contradict deeply held
prejudices. It may not be consonant with what we desperately want to
be true. But our preferences do not determine what's true. We have a
method, and that method helps us to reach not absolute truth, only
asymptotic approaches to the truth — never there, just closer
and closer, always finding vast new oceans of undiscovered
possibilities. Cleverly designed experiments are the key.</ p >
</ blockquote >
< figcaption > Carl Sagan, in "< cite > Wonder and Skepticism</ cite > ", from
the < cite > Skeptical Inquirer</ cite > Volume 19, Issue 1 (January-February
1995)</ figcaption >
</ figure >
다음 예시에서는 cite
와 blockquote
를
함께 사용하는 방법을 보여줍니다:
< p > His next piece was the aptly named < cite > Sonnet 130</ cite > :</ p >
< blockquote cite = "https://quotes.example.org/s/sonnet130.html" >
< p > My mistress' eyes are nothing like the sun,< br >
Coral is far more red, than her lips red,< br >
...
이 예시는 포럼 게시물에서 사용자가 응답하는 게시물을 보여주는 blockquote
의
사용 방법을 보여줍니다. article
요소는 각 게시물을
나타내는 데 사용되어 스레드를 마크업합니다.
< article >
< h1 >< a href = "https://bacon.example.com/?blog=109431" > Bacon on a crowbar</ a ></ h1 >
< article >
< header >< strong > t3yw</ strong > 12 포인트 1시간 전</ header >
< p > 저것을 보고 나르왈이 참 좋아할 거야.</ p >
< footer >< a href = "?pid=29578" > 퍼머링크</ a ></ footer >
< article >
< header >< strong > greg</ strong > 8 포인트 1시간 전</ header >
< blockquote >< p > 저것을 보고 나르왈이 참 좋아할 거야.</ p ></ blockquote >
< p > 나르왈은 베이컨을 먹지 않아.</ p >
< footer >< a href = "?pid=29579" > 퍼머링크</ a ></ footer >
</ article >
< header >< strong > t3yw</ strong > 15 포인트 1시간 전</ header >
< blockquote >
< blockquote >< p > 저것을 보고 나르왈이 참 좋아할 거야.</ p ></ blockquote >
< p > 나르왈은 베이컨을 먹지 않아.</ p >
</ blockquote >
< p > 다음으로 그들은 바나나를 깠다고 할 것 같아!</ p >
< footer >< a href = "?pid=29580" > 퍼머링크</ a ></ footer >
</ article >
</ article >
</ article >
</ article >
< header >< strong > fred</ strong > 1 포인트 23분 전</ header >
< blockquote >< p > 저것을 보고 나르왈이 참 좋아할 거야.</ p ></ blockquote >
< p > 그들은 아마도 바나나를 까는 것도 좋아할 거야.</ p >
< footer >< a href = "?pid=29582" > 퍼머링크</ a ></ footer >
</ article >
</ article >
다음 예시는 짧은 인용문을 보여주는 blockquote
의
사용 방법을 보여줍니다. 이 예시는 p
요소를
blockquote
요소 안에 넣을 필요가 없음을 보여줍니다:
< p > He began his list of "lessons" with the following:</ p >
< blockquote > One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.</ blockquote >
< p > He continued with a number of similar points, ending with:</ p >
< blockquote > Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possibility.</ blockquote >
< p > We shall now discuss these points...
대화 표현 방법 예시가 후반부 섹션에 나와 있으며, 이를 위해 cite
및 blockquote
요소를 사용하는 것은 적절하지 않습니다.
ol
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
li
요소가 포함되어 있는 경우:
만져질 수 있는 콘텐츠.
li
및 스크립트 지원 요소.
reversed
— 리스트를 역순으로 번호 매기기
start
— 리스트의 시작 값
type
— 리스트 마커의 종류
[Exposed =Window ]
interface HTMLOListElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean reversed ;
[CEReactions ] attribute long start ;
[CEReactions ] attribute DOMString type ;
// 폐기된 멤버도 있습니다
};
ol
요소는 문서의 의미를 변경할 정도로 항목의 순서가 의도적으로
정해진 목록을 나타냅니다.
목록의 항목들은 li
요소 자식 노드이며, ol
요소의 트리 순서에 따라 정렬됩니다.
ol
요소는 시작
값을 가지며, 이는 다음과 같이 결정됩니다:
해당 속성 값을 정수로 파싱한 결과를 parsed로 정의합니다.
만약 parsed가 오류가 아닌 경우, parsed를 반환합니다.
ol
요소에 reversed
속성이 있는 경우, 소유된 li
요소들의 수를 반환합니다.
1을 반환합니다.
목록에서 사용할 마커 종류를 지정해야 하는 경우(예: 항목이 숫자/문자로 참조될 수 있기 때문에) type
속성을 사용할 수 있습니다. 지정된 경우,
속성 값은 아래 표의 첫 번째 열에 주어진 문자 중 하나와 일치해야 합니다. type
속성은 첫 번째 셀이 속성 값과 일치하는 행의 두 번째 열에 표시된
상태를 나타냅니다. 셀이 일치하지 않거나 속성이 생략된 경우, 속성은 십진수 상태를 나타냅니다.
키워드 | 상태 | 설명 | 값 1-3 및 3999-4001의 예 | |||||||
---|---|---|---|---|---|---|---|---|---|---|
1 (U+0031)
| 십진법 | 십진수 | 1. | 2. | 3. | ... | 3999. | 4000. | 4001. | ... |
a (U+0061)
| 소문자 알파벳 | 소문자 라틴 알파벳 | a. | b. | c. | ... | ewu. | ewv. | eww. | ... |
A (U+0041)
| 대문자 알파벳 | 대문자 라틴 알파벳 | A. | B. | C. | ... | EWU. | EWV. | EWW. | ... |
i (U+0069)
| 소문자 로마 숫자 | 소문자 로마 숫자 | i. | ii. | iii. | ... | mmmcmxcix. | i̅v̅. | i̅v̅i. | ... |
I (U+0049)
| 대문자 로마 숫자 | 대문자 로마 숫자 | I. | II. | III. | ... | MMMCMXCIX. | I̅V̅. | I̅V̅I. | ... |
사용자 에이전트는 type
속성의 상태와 일치하는 방식으로 목록 항목을
렌더링해야 합니다. 0 이하의 숫자는 type
속성과 상관없이 항상
십진법을 사용해야 합니다.
CSS 사용자 에이전트를 위한 이 속성의 매핑은 'list-style-type' CSS 속성에 대한 매핑이 렌더링 섹션에 제공됩니다(매핑은 간단합니다: 위의 상태는 해당하는 CSS 값과 동일한 이름을 가집니다).
이 속성을 구현하는 기본 CSS 목록 스타일을 재정의할 수 있으며, 이를 통해 목록 항목이 렌더링되는 방식을 변경할 수 있습니다.
reversed
및 type
IDL 속성은 동일한 이름의
콘텐츠 속성을 반영해야 합니다.
start
IDL 속성은 동일한
이름의 콘텐츠 속성을 반영해야 하며, 기본 값은 1입니다.
이는 start
IDL 속성이 start
콘텐츠 속성이 생략된 경우 및 reversed
콘텐츠 속성이 지정된 경우, 목록의 시작 값과 반드시 일치하지 않는다는 것을 의미합니다.
다음 마크업은 순서가 중요한 목록을 보여주며, ol
요소가
적절하게 사용된 예입니다. 이 목록을 ul
섹션의 동일한
항목으로 구성된 목록과 비교하여, ul
요소를 사용하는
예를 볼 수 있습니다.
< p > 나는 다음 나라에 살았었다 (거주 시작 순서대로 나열됨):</ p >
< ol >
< li > 스위스
< li > 영국
< li > 미국
< li > 노르웨이
</ ol >
목록의 순서를 변경하면 문서의 의미가 어떻게 달라지는지 주목하십시오. 다음 예에서는 첫 두 항목의 순서를 바꿈으로써 작성자의 출생지가 바뀌었습니다:
< p > 나는 다음 나라에 살았었다 (거주 시작 순서대로 나열됨):</ p >
< ol >
< li > 영국
< li > 스위스
< li > 미국
< li > 노르웨이
</ ol >
ul
요소모든 최신 엔진에서 지원됩니다.
li
요소를 포함하고 있다면:
Palpable content.
li
요소들과 스크립트 지원 요소들.
[Exposed =Window ]
interface HTMLUListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 폐기된 멤버도 있습니다
};
ul
요소는 항목의 순서가 중요하지 않은 목록을 나타냅니다 — 즉, 순서를 변경해도 문서의 의미에 큰 영향을 주지 않는 경우입니다.
목록의 항목들은 li
요소 자식 노드이며, ul
요소의 자식 노드입니다.
다음 마크업은 순서가 중요하지 않은 목록을 보여주며, ul
요소가 적절하게 사용된 예입니다. 이 목록을 ol
섹션의
동일한 항목으로 구성된 목록과 비교하여, ol
요소를
사용하는 예를 볼 수 있습니다.
< p > 나는 다음 나라에 살았었다:</ p >
< ul >
< li > 노르웨이
< li > 스위스
< li > 영국
< li > 미국
</ ul >
목록의 순서를 변경해도 문서의 의미가 변하지 않는다는 점에 주목하십시오. 위의 예에서는 항목들이 알파벳 순으로 나열되어 있지만, 아래의 예에서는 2007년 현재 계좌 잔고 크기 순으로 나열되어 있으며, 문서의 의미에는 전혀 변화가 없습니다:
< p > 나는 다음 나라에 살았었다:</ p >
< ul >
< li > 스위스
< li > 노르웨이
< li > 영국
< li > 미국
</ ul >
menu
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
li
요소를 포함하고
있다면: Palpable content.
li
요소들과 스크립트 지원 요소들.
[Exposed =Window ]
interface HTMLMenuElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 폐기된 멤버도 있습니다
};
menu
요소는 그 안에 포함된 항목들로 이루어진 툴바를
나타냅니다. 이 항목들은 li
요소들로 표현되며, 각 항목은 사용자가 수행하거나 활성화할
수 있는 명령을 나타냅니다.
menu
요소는 명령 목록을 표현하기
위해 ul
의 의미적 대안일 뿐입니다(즉, "툴바"를 나타냅니다).
이 예에서는 텍스트 편집 애플리케이션이 menu
요소를 사용하여 일련의 편집 명령을 제공합니다:
< menu >
< li >< button onclick = "copy()" >< img src = "copy.svg" alt = "Copy" ></ button ></ li >
< li >< button onclick = "cut()" >< img src = "cut.svg" alt = "Cut" ></ button ></ li >
< li >< button onclick = "paste()" >< img src = "paste.svg" alt = "Paste" ></ button ></ li >
</ menu >
이것을 전통적인 툴바 메뉴로 보이도록 스타일링하는 것은 애플리케이션에 달려 있습니다.
li
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
ol
요소 내부.
ul
요소 내부.
menu
요소 내부.
li
요소의 끝 태그는 li
요소가 즉시 다음 li
요소나 부모 요소의 더 이상의 컨텐츠가 없을 때 생략할
수 있습니다.
ul
또는 menu
요소의 자식이 아닌 경우: value
— 목록 항목의 순번 값.
[Exposed =Window ]
interface HTMLLIElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute long value ;
// 폐기된 멤버도 있습니다
};
li
요소는 목록 항목을 표현합니다. 부모 요소가 ol
, ul
, 또는 menu
요소인 경우, 이 요소는 정의된 대로 부모 요소의
목록 항목입니다. 그렇지 않으면 목록 항목은 다른 li
요소와
정의된 목록 관련 관계가 없습니다.
value
속성이 존재하는 경우, 이는 유효한 정수여야 하며, 목록 항목의 순번 값을 결정하는 데 사용됩니다. 이는 li
의 목록 소유자가 ol
요소일 때 적용됩니다.
‘display’ 속성의 계산된 값이 ‘list-item’인 요소는 다음과 같이 결정되는 목록 소유자를 가집니다:
ancestor를 요소의 부모로 설정합니다.
요소에 ol
, ul
, 또는 menu
조상이 있는 경우,
ancestor를 가장 가까운 조상 요소로 설정합니다.
가장 가까운 포함 조상인 ancestor를 반환하고, 이 요소는 CSS 상자를 생성합니다.
주어진 목록 소유자 owner에 의해 소유된 각 요소의 순번 값을 결정하려면 다음 단계를 수행합니다:
i를 1로 설정합니다.
owner가 ol
요소인 경우,
numbering을 owner의 시작
값으로 설정합니다. 그렇지 않으면 numbering을 1로 설정합니다.
반복: i가 목록 소유자가 소유한 owner의 목록 항목 수를 초과하면 종료합니다; owner의 모든 소유 목록 항목이 순번 값을 할당받았습니다.
item이 li
요소이며
value
속성을 가지고 있다면:
parsed를 정수로 속성 값을 구문 분석한 결과로 설정합니다.
parsed가 오류가 아니라면 numbering을 parsed로 설정합니다.
item의 순번 값은 numbering입니다.
owner가 ol
요소이고,
owner에 reversed
속성이 있으면 numbering을 1 감소시키고, 그렇지 않으면 numbering을 1 증가시킵니다.
i를 1 증가시킵니다.
‘반복’으로 이동합니다.
value
IDL 속성은 value
내용 속성의 값을 반영해야 합니다.
요소의 value
IDL 속성은 순번 값과 직접적으로 일치하지 않으며, 단순히 내용 속성을 반영합니다. 예를 들어, 다음 목록을 보면:
< ol >
< li > Item 1
< li value = "3" > Item 3
< li > Item 4
</ ol >
다음 예에서는, 역순으로 상위 10개의 영화가 나열됩니다. 목록은 figure
요소와 그 figcaption
요소를 사용하여
제목을 부여받습니다.
< figure >
< figcaption > 역대 최고의 영화 10편</ figcaption >
< ol >
< li value = "10" >< cite > Josie and the Pussycats</ cite > , 2001</ li >
< li value = "9" >< cite lang = "sh" > Црна мачка, бели мачор</ cite > , 1998</ li >
< li value = "8" >< cite > A Bug's Life</ cite > , 1998</ li >
< li value = "7" >< cite > Toy Story</ cite > , 1995</ li >
< li value = "6" >< cite > Monsters, Inc</ cite > , 2001</ li >
< li value = "5" >< cite > Cars</ cite > , 2006</ li >
< li value = "4" >< cite > Toy Story 2</ cite > , 1999</ li >
< li value = "3" >< cite > Finding Nemo</ cite > , 2003</ li >
< li value = "2" >< cite > The Incredibles</ cite > , 2004</ li >
< li value = "1" >< cite > Ratatouille</ cite > , 2007</ li >
</ ol >
</ figure >
마크업은 또한 reversed
속성을 사용하여 다음과
같이 작성될 수 있습니다:
< figure >
< figcaption > 역대 최고의 영화 10편</ figcaption >
< ol reversed >
< li >< cite > Josie and the Pussycats</ cite > , 2001</ li >
< li >< cite lang = "sh" > Црна мачка, бели мачор</ cite > , 1998</ li >
< li >< cite > A Bug's Life</ cite > , 1998</ li >
< li >< cite > Toy Story</ cite > , 1995</ li >
< li >< cite > Monsters, Inc</ cite > , 2001</ li >
< li >< cite > Cars</ cite > , 2006</ li >
< li >< cite > Toy Story 2</ cite > , 1999</ li >
< li >< cite > Finding Nemo</ cite > , 2003</ li >
< li >< cite > The Incredibles</ cite > , 2004</ li >
< li >< cite > Ratatouille</ cite > , 2007</ li >
</ ol >
</ figure >
li
요소 내부에 제목 요소(e.g. h1
)를
포함하는 것이 합법적이지만, 이는 저자가 의도한 의미를 전달하지 않을 수 있습니다. 제목은 새로운 섹션을 시작하므로, 목록의 제목이 목록을 여러 섹션으로 암묵적으로 분할합니다.
dl
요소
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
dt
요소에 이어 하나 이상의
dd
요소로 구성된 그룹, 스크립트 지원 요소와 혼합 가능.
div
요소, 스크립트 지원 요소와 혼합
가능.
[Exposed =Window ]
interface HTMLDListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 이전 멤버도 포함
};
dl
요소는 하나 이상의 이름-값 그룹(설명 목록)으로 구성된 연관
목록을 나타냅니다. 이름-값 그룹은 하나 이상의 이름(dt
요소로, 자식 div
요소일 수 있음)과 하나 이상의
값(dd
요소로, 자식 div
요소일 수 있음)으로 구성되며, dt
및 dd
요소 외에는 모든 노드를 무시합니다. 하나의 dl
요소 내에서 각 이름에 대해 하나 이상의 dt
요소가 존재해서는 안 됩니다.
이름-값 그룹은 용어와 정의, 메타데이터 주제와 값, 질문과 답변 또는 기타 이름-값 데이터의 그룹일 수 있습니다.
그룹 내의 값은 대안입니다. 같은 값을 구성하는 여러 단락은 동일한 dd
요소 내에 모두 포함되어야 합니다.
그룹 목록의 순서와 각 그룹 내의 이름과 값의 순서가 중요할 수 있습니다.
마이크로데이터 속성 또는 그룹 전체에 적용되는 다른 전역 속성을 주석으로 달거나 스타일링 목적으로 dl
요소의 각 그룹을 div
요소로 감쌀 수 있습니다. 이것은 dl
요소의 의미를 변경하지 않습니다.
dl
요소의 이름-값 그룹 dl은 다음
알고리즘을 사용하여 결정됩니다. 이름-값 그룹은 이름(처음에는 비어 있는 dt
요소 목록)과 값(처음에는 비어 있는 dd
요소 목록)으로 구성됩니다.
groups를 비어 있는 이름-값 그룹 목록으로 설정합니다.
current를 새로운 이름-값 그룹으로 설정합니다.
seenDd를 false로 설정합니다.
child를 dl의 첫 번째 자식으로 설정합니다.
grandchild를 null로 설정합니다.
child가 null이 아닐 때까지:
current가 비어 있지 않으면, current를 groups에 추가합니다.
groups를 반환합니다.
dt
또는 dd
를 node에 대해 처리하는 것은 다음 단계를 따릅니다:
groups, current, 및 seenDd는 이 단계를 호출한 알고리즘에서 같은 이름을 가진 변수와 동일합니다.
node가 dt
요소인 경우:
seenDd가 true이면, current를 groups에 추가하고, current를 새로운 이름-값 그룹으로 설정하며, seenDd를 false로 설정합니다.
node를 current의 이름에 추가합니다.
그렇지 않고, node가 dd
요소인 경우, node를 current의 값에 추가하고 seenDd를 true로 설정합니다.
이름 또는 값이 빈 목록인 이름-값 그룹은 dd
요소를 dt
요소로 잘못 사용했거나 그 반대의 경우가 많습니다.
적합성 검사기는 이러한 실수를 발견할 수 있으며 저자에게 올바른 마크업 사용 방법을 조언할 수 있습니다.
다음 예에서는 하나의 항목("저자")이 두 개의 값("John"과 "Luke")에 연결됩니다.
< dl >
< dt > 저자
< dd > John
< dd > Luke
< dt > 편집자
< dd > Frank
</ dl >
다음 예에서는 하나의 정의가 두 개의 용어에 연결됩니다.
< dl >
< dt lang = "en-US" > < dfn > color</ dfn > </ dt >
< dt lang = "en-GB" > < dfn > colour</ dfn > </ dt >
< dd > 인간의 경우, 눈의 정밀한 구조가 시야를 세 가지 다른 필터로 분석하여 구별할 수 있는 능력에서 파생된 감각. </ dd >
</ dl >
다음 예는 dl
요소를 사용하여 일종의 메타데이터를
마크업하는 방법을 보여줍니다. 예제 끝에는 하나의 그룹에 두 개의 메타데이터 레이블("저자"와 "편집자")과 두 개의 값("Robert Rothman"과 "Daniel Jackson")이
있습니다. 이 예제는 또한 스타일링을 돕기 위해 div
요소를 dt
및 dd
요소 그룹 주위에 사용합니다.
< dl >
< div >
< dt > 마지막 수정 시간 </ dt >
< dd > 2004-12-23T23:33Z </ dd >
</ div >
< div >
< dt > 권장 업데이트 간격 </ dt >
< dd > 60초 </ dd >
</ div >
< div >
< dt > 저자 </ dt >
< dt > 편집자 </ dt >
< dd > Robert Rothman </ dd >
< dd > Daniel Jackson </ dd >
</ div >
</ dl >
다음 예는 dl
요소를 사용하여 지시 사항 집합을
제공합니다. 여기서 지시 사항의 순서는 중요합니다(다른 예에서는 블록의 순서가 중요하지 않았습니다).
< p > 다음과 같이 승리 포인트를 결정하십시오(일치하는 첫 번째 경우를 사용):</ p >
< dl >
< dt > 금화가 정확히 다섯 개 있는 경우 </ dt >
< dd > 다섯 개의 승리 포인트를 얻습니다 </ dd >
< dt > 금화가 하나 이상 있고 은화도 하나 이상 있는 경우 </ dt >
< dd > 두 개의 승리 포인트를 얻습니다 </ dd >
< dt > 은화가 하나 이상 있는 경우 </ dt >
< dd > 하나의 승리 포인트를 얻습니다 </ dd >
< dt > 그렇지 않은 경우 </ dt >
< dd > 승리 포인트를 얻지 못합니다 </ dd >
</ dl >
다음 코드 스니펫은 dl
요소가 용어집으로 사용되는 모습을
보여줍니다. 정의된 단어를 나타내기 위해 dfn
이 사용된
점에 주목하십시오.
< dl >
< dt >< dfn > 아파트</ dfn > , 명사.</ dt >
< dd > 하나 이상의 스레드와 하나 이상의 COM 개체를 그룹화하는 실행 컨텍스트.</ dd >
< dt >< dfn > 평평함</ dfn > , 명사.</ dt >
< dd > 공기가 빠진 타이어.</ dd >
< dt >< dfn > 홈</ dfn > , 명사.</ dt >
< dd > 사용자의 로그인 디렉터리.</ dd >
</ dl >
이 예제는 dl
요소와 함께 div
요소를 사용하여 프랑스 레스토랑에서 아이스크림
디저트를 주석으로 다는 마이크로데이터 속성을 사용합니다.
< dl >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > Café ou Chocolat Liégeois
< dd itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd itemprop = "description" > 2개의 카페 또는 초콜릿, 1개의 바닐라, 카페 또는 초콜릿 소스, 휘핑 크림
</ div >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > Américaine
< dd itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
< data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd itemprop = "description" > 1개의 크렘 브륄레, 1개의 바닐라, 1개의 카라멜, 휘핑 크림
</ div >
</ dl >
div
요소가 없으면 마크업은 itemref
속성을 사용하여 dd
요소의 데이터를 항목과 연결해야 합니다. 다음과 같이
됩니다.
< dl >
< dt itemscope itemtype = "http://schema.org/Product" itemref = "1-offer 1-description" >
< span itemprop = "name" > Café ou Chocolat Liégeois</ span >
< dd id = "1-offer" itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
</ data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd id = "1-description" itemprop = "description" >
2개의 카페 또는 초콜릿, 1개의 바닐라, 카페 또는 초콜릿 소스, 휘핑 크림
< dt itemscope itemtype = "http://schema.org/Product" itemref = "2-offer 2-description" >
< span itemprop = "name" > Américaine</ span >
< dd id = "2-offer" itemprop = "offers" itemscope itemtype = "http://schema.org/Offer" >
< span itemprop = "price" > 3.50</ span >
</ data itemprop = "priceCurrency" value = "EUR" > €</ data >
< dd id = "2-description" itemprop = "description" > 1개의 크렘 브륄레, 1개의 바닐라, 1개의 카라멜, 휘핑 크림
</ dl >
dl
요소는 대화를 마크업하는 데 적합하지
않습니다. 대화 마크업 예제를 참조하세요.
dt
요소
모든 현재 엔진에서 지원.
dd
또는 dt
요소들 앞에, dl
요소 내에서 사용됩니다.
dd
또는 dt
요소들 앞에, div
요소 내에서, dl
요소의 자식으로 사용됩니다.
header
, footer
, 섹셔닝 콘텐츠 또는 헤딩 콘텐츠 자손을 포함하지 않습니다.
dt
요소의 끝 태그는 dt
요소 바로 뒤에 다른 dt
요소 또는 dd
요소가 있을 경우 생략할 수 있습니다.
HTMLElement
를 사용합니다.
dt
요소는 설명 목록(dl
요소)에서 용어 또는 이름 부분을 나타냅니다.
dt
요소 자체는 dl
요소 내에서 사용될 때 그 내용이 정의된 용어임을 나타내지
않지만, 이는 dfn
요소를 사용하여 나타낼 수 있습니다.
이 예제는 dt
요소를 질문에 사용하고 dd
요소를 답변에 사용하여 마크업된 자주 묻는 질문(FAQ)
목록을 보여줍니다.
< article >
< h1 > FAQ</ h1 >
< dl >
< dt > 우리가 원하는 것은 무엇입니까?</ dt >
< dd > 우리의 데이터입니다.</ dd >
< dt > 언제 그것을 원합니까?</ dt >
< dd > 지금.</ dd >
< dt > 그것은 어디에 있습니까?</ dt >
< dd > 우리는 확신할 수 없습니다.</ dd >
</ dl >
</ article >
dd
요소
모든 현재 엔진에서 지원.
dt
또는 dd
요소들 뒤에, dl
요소 내에서 사용됩니다.
dt
또는 dd
요소들 뒤에, div
요소 내에서, dl
요소의 자식으로 사용됩니다.
dd
요소의 끝 태그는 dd
요소 바로 뒤에 다른 dd
요소 또는 dt
요소가 있을 경우, 또는 부모 요소에 더 이상 콘텐츠가
없을 경우 생략할 수 있습니다.
HTMLElement
를 사용합니다.
dd
요소는 설명 목록(dl
요소)에서 용어-설명 그룹의 설명, 정의 또는 값을 나타냅니다.
dl
은 사전과 같은 어휘 목록을 정의하는 데 사용될 수
있습니다. 다음 예제에서, dt
와 dfn
에 의해 주어진 각 항목에는 여러 개의 dd
가 있어 정의의 다양한 부분을 보여줍니다.
< dl >
< dt >< dfn > 행복</ dfn ></ dt >
< dd class = "발음" > /ˈhæpinəs/</ dd >
< dd class = "품사" >< i >< abbr > n.</ abbr ></ i ></ dd >
< dd > 행복한 상태.</ dd >
< dd > 행운; 성공. < q > 오 < b > 행복</ b > 이여! 그것이 성공했습니다!</ q ></ dd >
< dt >< dfn > 기쁨</ dfn ></ dt >
< dd class = "발음" > /rɪˈdʒɔɪs/</ dd >
< dd >< i class = "품사" >< abbr > v.intr.</ abbr ></ i > 스스로 기뻐하다.</ dd >
< dd >< i class = "품사" >< abbr > v.tr.</ abbr ></ i > 남을 기쁘게 하다.</ dd >
</ dl >
figure
요소모든 현재 엔진에서 지원.
figcaption
요소가 뒤따르는 플로우 콘텐츠.
figcaption
요소.
HTMLElement
를 사용합니다.
figure
요소는 플로우 콘텐츠를 나타내며, 선택적으로 캡션과 함께 자체적으로 포함된 콘텐츠를
나타내며(완전한 문장과 같은) 문서의 주 흐름에서 단일 단위로 참조됩니다.
이 문맥에서 "자체 포함"이 반드시 독립적이라는 것을 의미하는 것은 아닙니다. 예를 들어, 단락의 각 문장은 자체 포함되어 있습니다. 문장의 일부인 이미지는 figure
에 적합하지 않지만, 이미지로 구성된
전체 문장은 적합할 수 있습니다.
이 요소는 따라서 일러스트레이션, 다이어그램, 사진, 코드 목록 등을 주석으로 달 때 사용할 수 있습니다.
figure
가 문서의 주요 콘텐츠에서
캡션(예: 그림 번호)으로 식별되어 참조되는 경우, 이러한 콘텐츠를 페이지의 측면, 전용 페이지 또는 부록으로 이동시켜도 문서의 흐름에 영향을 미치지 않고 쉽게 이동할 수 있습니다.
figure
요소가 상대적인 위치로
참조되는 경우, 예를 들어 "위의 사진에서" 또는 "다음 그림에서 보여주는 것처럼"이라면, 그림을 이동하면 페이지의 의미가 혼란스러워집니다. 작성자는 페이지를 쉽게 다시 스타일링할 수 있도록
상대적 참조 대신 라벨을 사용하여 그림을 참조하는 것을 고려해야 합니다.
첫 번째 figcaption
요소 자식 요소는, 만약 있다면, figure
요소의 콘텐츠의 캡션을 나타냅니다.
자식 figcaption
요소가 없는 경우 캡션은 존재하지 않습니다.
figure
요소의 내용은 주변 흐름의
일부입니다. 예를 들어 이미지 공유 사이트에서 사진을 표시하는 것이 페이지의 목적이라면, figure
및 figcaption
요소를
사용하여 해당 figure에 대한 캡션을 명시적으로 제공할 수 있습니다. 주변 흐름과는 관련이 없거나 별도의 목적을 가지는 콘텐츠의 경우, aside
요소를 사용해야 하며(그리고 figure
를 감쌀 수 있습니다). 예를 들어,
article
에서 내용을 반복하는 인용문은
콘텐츠의 일부가 아니라 독자를 유도하거나 주요 주제를 강조하기 위한 반복이므로 figure
보다는 aside
에 포함하는 것이 더 적절합니다.
이 예제는 코드 목록을 마크업하는 데 사용된 figure
요소를 보여줍니다.
< p > < a href = "#l4" > 리스트 4</ a > 에서 우리는 기본 핵심 인터페이스 API 선언을 봅니다.</ p >
< figure id = "l4" >
< figcaption > 리스트 4. 기본 핵심 인터페이스 API 선언.</ figcaption >
< pre >< code > interface PrimaryCore {
boolean verifyDataLine();
undefined sendData(sequence< byte> data);
undefined initSelfDestruct();
}</ code ></ pre >
</ figure >
< p > API는 UTF-8을 사용하도록 설계되었습니다.</ p >
여기에서 우리는 페이지의 주요 콘텐츠인 사진을 마크업하는 데 사용된 figure
요소를 봅니다(갤러리와
같은).
<!DOCTYPE HTML>
< html lang = "en" >
< title > 일하는 거품들 — 내 갤러리™</ title >
< figure >
< img src = "bubbles-work.jpeg"
alt = "거품이 사무실 의자에 앉아 그의 최신 프로젝트에 열중하고 있습니다." >
< figcaption > 일하는 거품들</ figcaption >
</ figure >
< nav >< a href = "19414.html" > 이전</ a > — < a href = "19416.html" > 다음</ a ></ nav >
이 예에서 우리는 figure가 아닌 이미지와 figure 요소로 마크업된 이미지 및 비디오를 봅니다. 첫 번째 이미지는 예제의 두 번째 문장의 일부이므로 독립된 단위가 아니며
figure
에 적합하지 않습니다.
< h2 > Malinko의 만화</ h2 >
< p > 이 사건은 만화와 관련된 어떤 "지적 재산권" 침해에 중점을 두었습니다 (참조: Exhibit A). 이 소송은 이러한 말로 끝나는 예고편 이후 시작되었습니다:
< blockquote >
< img src = "promblem-packed-action.png" alt = "ROUGH COPY! Promblem-Packed Action!" >
</ blockquote >
< p > ...방영되었습니다. 더 큰 노트북을 들고 있는 변호사가 눈덩이를 사용하여 선제공격을 시작했습니다. 예고편의 전체 사본은 Exhibit B와 함께 포함되어 있습니다.
< figure >
< img src = "ex-a.png" alt = "더러운 종이에 그려진 두 개의 낙서." >
< figcaption > Exhibit A. 소위 < cite > rough copy</ cite > 만화.</ figcaption >
</ figure >
< figure >
< video src = "ex-b.mov" ></ video >
< figcaption > Exhibit B. < cite > Rough Copy</ cite > 예고편.</ figcaption >
</ figure >
< p > 이 사건은 법정 밖에서 해결되었습니다.
여기서 시의 일부가 figure
를
사용하여 마크업되었습니다.
< figure >
< p > 'Twas brillig, and the slithy toves< br >
Did gyre and gimble in the wabe;< br >
All mimsy were the borogoves,< br >
And the mome raths outgrabe.</ p >
< figcaption >< cite > Jabberwocky</ cite > (첫 번째 절). 루이스 캐롤, 1832-98</ figcaption >
</ figure >
이 예제에서는, 더 큰 작업의 일부일 수 있는 예로서, 성을 다루는 텍스트에서 중첩된 figure
요소들이 그룹 캡션과 각
figure에 대한 개별 캡션을 제공합니다:
< figure >
< figcaption > 세월에 따른 성의 모습: 각각 1423년, 1858년, 1999년.</ figcaption >
< figure >
< figcaption > 에칭. 익명, 약 1423년.</ figcaption >
< img src = "castle1423.jpeg" alt = "성에는 하나의 탑과 그 주위를 둘러싼 높은 벽이 있습니다." >
</ figure >
< figure >
< figcaption > 유화. 마리아 타울, 1858년.</ figcaption >
< img src = "castle1858.jpeg" alt = "성에는 이제 두 개의 탑과 두 개의 벽이 있습니다." >
</ figure >
< figure >
< figcaption > 필름 사진. 피터 얀클, 1999년.</ figcaption >
< img src = "castle1999.jpeg" alt = "성은 폐허가 되었고, 원래의 탑만이 온전하게 남아 있습니다." >
</ figure >
</ figure >
이전 예제는 다음과 같이 더 간결하게 작성될 수 있습니다 (중첩된 figure
/figcaption
쌍
대신 title
속성을 사용하여):
< figure >
< img src = "castle1423.jpeg" title = "에칭. 익명, 약 1423년."
alt = "성에는 하나의 탑과 그 주위를 둘러싼 높은 벽이 있습니다." >
< img src = "castle1858.jpeg" title = "유화. 마리아 타울, 1858년."
alt = "성에는 이제 두 개의 탑과 두 개의 벽이 있습니다." >
< img src = "castle1999.jpeg" title = "필름 사진. 피터 얀클, 1999년."
alt = "성은 폐허가 되었고, 원래의 탑만이 온전하게 남아 있습니다." >
< figcaption > 세월에 따른 성의 모습: 각각 1423년, 1858년, 1999년.</ figcaption >
</ figure >
때때로 figure는 콘텐츠에서 암시적으로만 참조됩니다:
< article >
< h1 > 의회에서 재정 협상이 난항을 겪으며 기한이 다가옵니다</ h1 >
< figure >
< img src = "obama-reid.jpeg" alt = "오바마와 리드가 함께 앉아 웃고 있는 모습입니다." >
< figcaption > 바락 오바마와 해리 리드. 백악관 언론 사진.</ figcaption >
</ figure >
< p > 의회에서 재정 교착 상태를 해결하기 위한 협상이 화요일에 중단되어 양쪽 의회 모두 정부를 재개하고 국가의 차입 권한을 확장하기 위한 방법을 모색하고 있습니다. 기한은 목요일로 다가오고 있습니다.</ p >
...
</ article >
figcaption
요소
모든 현재 엔진에서 지원됩니다.
figure
요소의 첫 번째 또는
마지막 자식 요소로 사용될 수 있습니다.
HTMLElement
를 사용합니다.
figcaption
요소는
figure
요소의 나머지 내용을
설명하는 캡션이나 레전드를 나타냅니다.
이 요소는 소스에 대한 추가 정보를 포함할 수 있습니다:
< figcaption >
< p > 오리입니다.</ p >
< p >< small > 사진 제공: 🌟 뉴스.</ small ></ p >
</ figcaption >
< figcaption >
< p > 3룸 아파트의 평균 임대료, 비영리 아파트 제외</ p >
< p > 취리히 통계청 — < time datetime = 2017-11-14 > 2017년 11월 14일</ time ></ p >
</ figcaption >
main
요소모든 현재 엔진에서 지원됩니다.
main
요소여야 합니다.
HTMLElement
를 사용합니다.
main
요소는 문서의 주요 콘텐츠를 나타냅니다.
문서에는 main
요소가 속성이 지정되지 않은 경우 하나만 있어야 합니다.
계층적으로 올바른 main
요소는 조상 요소가 html
, body
, div
, form
(접근 가능한 이름이 없는 경우), 및 자율 커스텀 요소로 제한된 요소입니다. 각
main
요소는 계층적으로
올바른 main
요소여야 합니다.
이 예에서 작성자는 페이지의 각 구성 요소가 상자에 렌더링되는 프레젠테이션을 사용했습니다. 페이지의 주요 콘텐츠를 감싸기 위해 (헤더, 푸터, 탐색 표시줄 및 사이드바와는 반대로), main
요소가 사용됩니다.
<!DOCTYPE html>
< html lang = "en" >
< title > RPG System 17</ title >
< style >
header , nav , aside , main , footer {
margin : 0.5 em ; border : thin solid ; padding : 0.5 em ;
background : #EFF ; color : black ; box-shadow : 0 0 0.25 em #033 ;
}
h1 , h2 , p { margin : 0 ; }
nav , main { float : left ; }
aside { float : right ; }
footer { clear : both ; }
</ style >
< header >
< h1 > System Eighteen</ h1 >
</ header >
< nav >
< a href = "../16/" > ← System 17</ a >
< a href = "../18/" > RPXIX →</ a >
</ nav >
< aside >
< p > 이 시스템에는 HP 메커니즘이 없으므로 치유가 없습니다.</ p >
</ aside >
< main >
< h2 > 캐릭터 생성</ h2 >
< p > 속성(마법, 힘, 민첩성)은 레벨당 한 포인트의 비용으로 구매할 수 있습니다.</ p >
< h2 > 주사위 굴리기</ h2 >
< p > 각 만남 시 모든 스킬에 대해 주사위를 굴리세요. 상대보다 높은 수를 굴리면 승리합니다.</ p >
</ main >
< footer >
< p > Copyright © 2013</ footer >
</ html >
다음 예에서 여러 main
요소가 사용되며
스크립트가 사용되어 탐색이 서버 라운드트립 없이 작동하고 현재가 아닌 요소에 속성을 설정합니다:
<!doctype html>
< html lang = en-CA >
< meta charset = utf-8 >
< title > … </ title >
< link rel = stylesheet href = spa.css >
< script src = spa.js async ></ script >
< nav >
< a href = / > Home</ a >
< a href = /about > About</ a >
< a href = /contact > Contact</ a >
</ nav >
< main >
< h1 > Home</ h1 >
…
</ main >
< main hidden >
< h1 > About</ h1 >
…
</ main >
< main hidden >
< h1 > Contact</ h1 >
…
</ main >
< footer > Made with ❤️ by < a href = https://example.com/ > Example 👻</ a > .</ footer >
search
요소현재 엔진에서 지원되지 않음.
HTMLElement
을 사용합니다.
search
요소는 검색 또는 필터링 작업과
관련된 양식 제어나 기타 콘텐츠를 포함하는 문서 또는 애플리케이션의 일부를 나타냅니다. 이는 웹사이트나 애플리케이션에 대한 검색, 현재 웹 페이지에서의 검색 또는 필터링 방법, 또는 전체 인터넷 또는
그 하위 섹션에 대한 전역 검색 기능일 수 있습니다.
search
요소는 검색
결과를 단순히 표시하는 데 사용하는 것이 적절하지 않지만, '빠른 검색' 결과의 일부로서 제안 및 링크를 포함할 수 있습니다. 반면에 검색 결과가 포함된 웹 페이지는 해당 웹 페이지의 주요 콘텐츠로
제시될 것으로 예상됩니다.
다음 예에서 작성자는 웹 페이지의 header
에 검색 양식을 포함하고
있습니다:
< header >
< h1 >< a href = "/" > 내 멋진 블로그</ a ></ h1 >
...
< search >
< form action = "search.php" >
< label for = "query" > 기사 찾기</ label >
< input id = "query" name = "q" type = "search" >
< button type = "submit" > 검색</ button >
</ form >
</ search >
</ header >
이 예에서 작성자는 웹 애플리케이션의 검색 기능을 JavaScript만으로 구현했습니다. 서버 측 제출을 수행하기 위해 form
요소를 사용하지 않았지만, 포함된
search
요소는 하위 콘텐츠의
목적이 검색 기능을 나타낸다고 의미적으로 식별합니다.
< search >
< label >
검색 및 필터링
< input type = "search" id = "query" >
</ label >
< label >
< input type = "checkbox" id = "exact-only" >
정확한 일치만 검색
</ label >
< section >
< h3 > 검색 결과:</ h3 >
< ul id = "results" >
< li >
< p >< a href = "services/consulting" > 컨설팅 서비스</ a ></ p >
< p >
당사의 통합 컨설턴트 Bob과 Bob을 통해 비즈니스를 개선할 수 있는 방법을 알아보세요.
</ p >
</ li >
...
</ ul >
<!--
쿼리 결과가 없거나 모든 결과가 필터링된 경우
여기에 결과 없음 메시지를 렌더링합니다.
-->
< output id = "no-results" ></ output >
</ section >
</ search >
다음 예에서 페이지에는 두 가지 검색 기능이 있습니다. 첫 번째는 웹 페이지의 header
에 위치하여 웹사이트의
콘텐츠를 검색하는 전역 메커니즘 역할을 합니다. 그 목적은 지정된 title
속성으로 표시됩니다. 두 번째는 현재
페이지의 콘텐츠를 검색 및 필터링하는 메커니즘으로, 페이지의 주요 콘텐츠의 일부로 포함됩니다. 이 메커니즘의 목적을 나타내기 위해 헤딩을 포함하고 있습니다.
< body >
< header >
...
< search title = "Website" >
...
</ search >
</ header >
< main >
< h1 > 귀하의 위치 근처 호텔</ h1 >
< search >
< h2 > 결과 필터링</ h2 >
...
</ search >
< article >
<!-- 검색 결과 콘텐츠 -->
</ article >
</ main >
</ body >
div
요소모든 최신 엔진에서 지원됩니다.
dl
요소의 자식으로.
dl
요소의 자식인 경우: 하나 이상의 dt
요소와 하나 이상의 dd
요소, 스크립트 지원 요소와 혼합될 수 있음.
dl
요소의 자식이 아닌 경우: 플로우 콘텐츠.
[Exposed =Window ]
interface HTMLDivElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 또한 사용되지 않는 멤버 포함
};
div
요소는 특별한 의미가 없습니다. 자식 요소를 나타냅니다.
class
, lang
, title
속성을 사용하여 연속된 요소 그룹에 공통적인 의미를 마크업하는 데 사용할
수 있습니다. 또한 dl
요소 내에서 dt
및 dd
요소 그룹을 감싸는 데 사용할 수 있습니다.
작성자는 div
요소를 최후의 수단으로
생각하고, 다른 적합한 요소가 없을 때만 사용하는 것이 좋습니다. 더 적합한 요소를 사용하면 독자의 접근성이 향상되고 작성자가 더 쉽게 유지 관리할 수 있습니다.
예를 들어, 블로그 게시물은 article
요소로 마크업되고, 장은 section
요소로 마크업되며, 페이지의 내비게이션 도구는 nav
요소로, 양식 컨트롤 그룹은 fieldset
요소로 마크업됩니다.
반면, div
요소는 스타일 목적이나 섹션 내에서 여러
단락을 동일한 방식으로 주석을 달기 위해 유용할 수 있습니다. 다음 예에서는 div
요소를 사용하여 두 단락의 언어를 설정하는 방법을
보여줍니다.
< article lang = "en-US" >
< h1 > 나의 언어 사용과 나의 고양이들</ h1 >
< p > 내 고양이의 행동은 그녀의 부재 이후 크게 변하지 않았지만, 그녀는 이웃들에게 종종 새로운 외모를 자랑합니다.</ p >
< div lang = "en-GB" >
< p > 내 다른 고양이는 검정색과 흰색으로, 매우 귀엽습니다. 오늘 우리는 그와 함께 도로를 걸어 수영장으로 갔습니다. 어제는 이웃을 방문했다고 합니다. 아마도 우리의 아파트가 그들의 아파트와 거울 이미지라는 것을 인식하고 있는 것 같습니다.</ p >
< p > 음, 방금 전 단락에서 영국 영어를 사용한 것을 눈치챘습니다. 하지만 저는 미국 영어로 작성해야 합니다. 그래서 "pavement"나 "flat" 또는 "colour"라고 말해서는 안 됩니다...</ p >
</ div >
< p > "sidewalk", "apartment", "color"라고 말해야겠네요!</ p >
</ article >
a
요소현재 모든 엔진에서 지원됨.
현재 모든 엔진에서 지원됨.
href
속성이 있는 경우: Interactive content.
a
요소의 하위 요소,
또는 tabindex
속성이 지정된
하위 요소가 없어야 함.
href
— 하이퍼링크의 주소
target
— 내비게이블이 하이퍼링크 내비게이션을 위해
download
— 리소스를 탐색 대신 다운로드할 것인지 여부와 이 경우 파일 이름
ping
— 핑할 URL
rel
— 문서 내의 하이퍼링크와 목적지 리소스 사이의 관계
hreflang
— 링크된 리소스의 언어
type
— 참조된 리소스 유형에 대한 힌트
referrerpolicy
— 요소가 시작한 가리키는 정책의 fetches
href
속성이 있는 경우: 작성자용; 구현자용.
[Exposed =Window ]
interface HTMLAnchorElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString download ;
[CEReactions ] attribute USVString ping ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[CEReactions ] attribute DOMString hreflang ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString text ;
[CEReactions ] attribute DOMString referrerPolicy ;
// obsolete한 멤버도 포함함
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils ;
a
요소에 href
속성이 있다면, 이는 다음을 나타냅니다. 하이퍼링크 (하이퍼텍스트 앵커)로, 요소의 내용에 의해 레이블이 지정됩니다.
a
요소에 href
속성이 없다면, 해당 요소는 링크가 있을
경우를 위해 자리 표시자를 나타냅니다. 이 자리 표시자는 요소의 내용으로만 구성됩니다.
target
,
download
,
ping
,
rel
, hreflang
,
type
,
및 referrerpolicy
속성은 href
속성이 없는 경우 생략해야
합니다.
itemprop
속성이 a
요소에 지정된 경우, href
속성도 반드시 지정되어야 합니다.
사이트가 모든 페이지에 일관된 탐색 툴바를 사용하는 경우, 해당 페이지로 연결되는 링크는 a
요소를 사용하여 표시할 수 있습니다:
< nav >
< ul >
< li > < a href = "/" > 홈</ a > </ li >
< li > < a href = "/news" > 뉴스</ a > </ li >
< li > < a > 예제</ a > </ li >
< li > < a href = "/legal" > 법률</ a > </ li >
</ ul >
</ nav >
href
, target
, download
,
ping
,
및 referrerpolicy
속성은 사용자가 하이퍼링크를 따라갈 때 또는 하이퍼링크를 다운로드할 때
생성된 a
요소의 동작에 영향을 미칩니다. rel
,
hreflang
,
및 type
속성은 사용자가 링크를 따라가기 전에 대상 리소스의 성격을 사용자에게 나타내는 데 사용할 수 있습니다.
a.text
textContent
와
동일.
현재 모든 엔진에서 지원됨.
현재 모든 엔진에서 지원됨.
IDL 속성 download
,
ping
, target
, rel
, hreflang
, 및 type
은 해당 이름의 콘텐츠 속성을
반영해야 합니다.
현재 모든 엔진에서 지원됨.
IDL 속성 relList
은
rel
콘텐츠 속성을 반영해야 합니다.
HTMLAnchorElement/referrerPolicy
현재 모든 엔진에서 지원됨.
IDL 속성 referrerPolicy
은 referrerpolicy
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
속성 text
의 getter는 이
요소의 하위
텍스트 콘텐츠를 반환해야 합니다.
text
속성의 setter는 주어진 값으로 이 요소 내부의 모든 문자열을 교체해야 합니다.
a
요소는 전체 문단, 목록, 표 등으로 감쌀 수 있으며, 다른
링크나 버튼과 같은 인터랙티브 콘텐츠가 없을 경우 전체 섹션을 포함할 수도 있습니다. 이 예제는 광고 블록 전체를 링크로 만들 수 있는 방법을 보여줍니다:
< aside class = "광고" >
< h1 > 광고</ h1 >
< a href = "https://ad.example.com/?adid=1929&pubid=1422" >
< section >
< h1 > Mellblomatic 9000!</ h1 >
< p > 모든 위젯을 멜블롬으로 변환하십시오!</ p >
< p > 배송비 별도 9.99달러에 구매할 수 있습니다.</ p >
</ section >
</ a >
< a href = "https://ad.example.com/?adid=375&pubid=1422" >
< section >
< h1 > Mellblom 브라우저</ h1 >
< p > 빛의 속도로 웹 브라우징을 즐기세요.</ p >
</ p > 다른 어떤 브라우저도 더 빠르지 않습니다!</ p >
</ section >
</ a >
</ aside >
다음 예제는 스크립트를 사용하여 구직 공고 표의 전체 행을 효과적으로 하이퍼링크로 만드는 방법을 보여줍니다:
< table >
< tr >
< th > 직위
< th > 팀
< th > 위치
</ tr >
< td >< a href = "/jobs/manager" > 매니저</ a >
< td > 원격
< td > 원격
</ tr >
< td >< a href = "/jobs/director" > 디렉터</ a >
< td > 원격
< td > 원격
</ tr >
< td >< a href = "/jobs/astronaut" > 우주비행사</ a >
< td > 건축
< td > 원격
</ table >
< script >
document. querySelector( "table" ). onclick = ({ target }) => {
if ( target. parentElement. localName === "tr" ) {
const link = target. parentElement. querySelector( "a" );
if ( link) {
link. click();
}
}
}
</ script >
em
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
특정 내용이 가지는 강도의 수준은 상위 em
요소의 수에 따라
결정됩니다.
강조의 위치는 문장의 의미를 바꿉니다. 따라서 이 요소는 콘텐츠의 중요한 부분을 형성합니다. 이러한 방식으로 강조가 사용되는 정확한 방법은 언어에 따라 다릅니다.
다음 예제는 강조의 위치를 변경하면 의미가 어떻게 달라지는지를 보여줍니다. 먼저, 아무런 강조가 없는 일반적인 사실을 나타내는 문장입니다:
< p > 고양이는 귀여운 동물입니다.</ p >
첫 단어를 강조함으로써 논의되고 있는 동물의 종류가 의문임을 암시합니다 (아마도 누군가가 개가 귀엽다고 주장하고 있을 때):
< p >< em > 고양이</ em > 는 귀여운 동물입니다.</ p >
강조를 동사로 옮기면 전체 문장의 진실성이 의문임을 강조합니다 (아마도 누군가가 고양이가 귀엽지 않다고 말하고 있을 때):
< p > 고양이는 < em > 귀엽습니다</ em > .</ p >
강조를 형용사로 옮기면 고양이의 정확한 성격이 재확인됩니다 (아마도 누군가가 고양이가 사나운 동물이라고 제안했을 때):
< p > 고양이는 < em > 귀여운</ em > 동물입니다.</ p >
마찬가지로, 누군가가 고양이가 채소라고 주장했다면, 이를 수정하려는 사람은 마지막 단어를 강조할 것입니다:
< p > 고양이는 귀여운 < em > 동물입니다</ em > .</ p >
문장 전체를 강조함으로써 화자가 주장을 강하게 펼치려는 것이 명확해집니다. 이와 같은 유형의 강조는 일반적으로 구두점에도 영향을 미치며, 여기서도 느낌표를 사용한 이유가 바로 그것입니다.
< p >< em > 고양이는 귀여운 동물입니다!</ em ></ p >
분노와 함께 귀여움을 강조하려면 다음과 같은 마크업을 사용할 수 있습니다:
< p >< em > 고양이는 < em > 귀여운</ em > 동물입니다!</ em ></ p >
em
요소는 일반적인 "이탤릭체" 요소가 아닙니다. 때로는
텍스트가 다른 단락과 차별화되어야 할 때가 있으며, 마치 다른 분위기나 목소리를 가진 것처럼 보이도록 합니다. 이러한 경우 i
요소가 더 적합합니다.
strong
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
strong
요소는 내용의 강한 중요성, 진지함
또는 긴급성을 나타냅니다.
중요성: strong
요소는 제목, 캡션, 또는 문단에서
다른 부분에 비해 정말로 중요한 부분을 구별하기 위해 사용할 수 있습니다. (이는 hgroup
요소로 마크업할 수 있는 하위 제목과는
다릅니다.)
예를 들어, 이전 문단의 첫 번째 단어는 나머지 세부 내용보다 중요성을 구별하기 위해 strong
으로 마크업되어 있습니다.
진지함: strong
요소는 경고나 주의 문구를
마크업하는 데 사용할 수 있습니다.
긴급성: strong
요소는 사용자가 문서의 다른
부분보다 먼저 보아야 하는 내용을 나타내는 데 사용할 수 있습니다.
콘텐츠의 상대적 중요도는 상위 strong
요소의 수에 따라 결정됩니다. 각 strong
요소는 그 내용의 중요성을
증가시킵니다.
strong
요소로 텍스트의 중요성을 변경해도
문장의 의미는 바뀌지 않습니다.
여기서 "장"이라는 단어와 실제 장 번호는 일반적인 텍스트일 뿐이며, 실제 장의 이름은 strong
으로 마크업되어 있습니다:
< h1 > 1장: < strong > 프락시스</ strong ></ h1 >
다음 예제에서, 캡션에 있는 다이어그램의 이름은 strong
으로 마크업되어 있어, 일반
텍스트(이전) 및 설명(이후)과 구별됩니다:
< figcaption > 그림 1. < strong > 개미 군집의 역학</ strong > . 이 군집의 개미들은 열원(왼쪽 상단)과 음식원(오른쪽 하단)에 영향을 받습니다.</ figcaption >
이 예제에서, 제목은 실제로 "꽃, 벌, 그리고 꿀"이지만, 저자는 제목에 가벼운 추가 내용을 포함시켰습니다. strong
요소는 따라서 첫 번째
부분을 나머지와 구별하기 위해 사용되었습니다.
< h1 >< strong > 꽃, 벌, 그리고 꿀</ strong > 및 이해할 수 없는 다른 것들</ h1 >
여기 게임에서 경고 문구의 예가 있으며, 각 부분은 중요도에 따라 마크업되어 있습니다:
< p >< strong > 경고.</ strong > 이 던전은 위험합니다.
< strong > 오리를 피하세요.</ strong > 발견한 금은 가져가세요.
< strong >< strong > 다이아몬드는 절대 가져가지 마세요</ strong > ,
그것들은 폭발하며 < strong > 10미터 이내의 모든 것을 파괴할 것입니다.</ strong ></ strong > 경고를 받았습니다.</ p >
이 예제에서, strong
요소는
사용자가 먼저 읽어야 할 부분을 나타내기 위해 사용되었습니다.
< p > Remy에 오신 것을 환영합니다, 알림 시스템입니다.</ p >
< p > 오늘의 작업:</ p >
< ul >
< li >< p >< strong > 오븐을 끄세요.</ strong ></ p ></ li >
< li >< p > 쓰레기를 내놓으세요.</ p ></ li >
< li >< p > 세탁을 하세요.</ p ></ li >
</ ul >
small
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
small
요소는 작은 글씨로 부가 설명을 나타냅니다.
작은 글씨는 일반적으로 면책 조항, 주의사항, 법적 제한 또는 저작권에 사용됩니다. 또한, 저작권 표시나 라이센스 요구사항을 충족시키기 위해 사용되기도 합니다.
small
요소는 em
요소로 강조된 텍스트나 strong
요소로 중요한 것으로 표시된 텍스트의
중요성을 "감소시키지" 않습니다. 강조되지 않거나 중요한 것으로 표시되지 않은 텍스트를 표시하려면 em
또는 strong
요소로 마크업하지 마십시오.
small
요소는 여러 단락, 목록, 또는 텍스트
섹션과 같은 확장된 텍스트에 사용되어서는 안 됩니다. 이 요소는 짧은 텍스트에만 사용하도록 설계되었습니다. 예를 들어, 이용 약관을 나열하는 페이지의 텍스트는 small
요소에 적합하지 않습니다. 이러한 경우,
텍스트는 부가 설명이 아니라 페이지의 주요 내용입니다.
small
요소는 소제목에 사용되어서는 안 됩니다.
소제목에는 hgroup
요소를 사용하십시오.
이 예제에서는 small
요소를 사용하여
호텔 객실의 가격에 부가가치세가 포함되지 않았음을 나타냅니다:
< dl >
< dt > 싱글 룸
< dd > 199 € < small > 조식 포함, VAT 미포함</ small >
< dt > 더블 룸
< dd > 239 € < small > 조식 포함, VAT 미포함</ small >
</ dl >
두 번째 예제에서는 small
요소가 기사
내의 부가 설명에 사용되었습니다.
< p > Example Corp은 오늘 2분기 실적이 사상 최고치를 기록했다고 발표했습니다 < small > (전체 공시: Foo News는 Example Corp의 자회사입니다)</ small > , 이는 3분기 Demo Group과의 합병에 대한 추측을 낳고 있습니다.</ p >
이는 사이드바와는 다릅니다. 사이드바는 여러 단락 길이일 수 있으며, 본문 텍스트의 주 흐름에서 벗어난 것입니다. 다음 예제에서는 동일한 기사에서 사이드바를 볼 수 있습니다. 이 사이드바에는 사이드바의 정보 출처를 나타내는 작은 글씨가 포함되어 있습니다.
< aside >
< h1 > Example Corp</ h1 >
< p > 이 회사는 주로 소프트웨어 및 웹사이트를 만듭니다.</ p >
< p > Example Corp의 회사 미션은 "샘플을 기반으로 한 엔터테인먼트 및 뉴스를 제공하는 것"입니다.</ p >
< p >< small > 정보는 < a
href = "https://example.com/about.html" > example.com</ a > 홈페이지에서 얻었습니다.</ small ></ p >
</ aside >
마지막 예제에서는 small
요소가
중요한 작은 글씨로 마크업되었습니다.
< p >< strong >< small > 이 서비스를 계속 사용하면 키스가 발생합니다.</ small ></ strong ></ p >
s
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
s
요소는 더 이상 정확하지 않거나 유효하지 않은 내용을 나타냅니다.
s
요소는 문서 편집을 나타낼 때 적절하지 않습니다.
문서에서 텍스트를 삭제된 것으로 표시하려면 del
요소를
사용하십시오.
이 예제에서는 특정 제품의 새로운 판매 가격이 책정되면서 권장 소매 가격이 더 이상 유효하지 않게 표시되었습니다.
< p > 우리의 아이스 티와 레모네이드를 구매하세요!</ p >
< p >< s > 권장 소매 가격: 병당 $3.99</ s ></ p >
< p >< strong > 이제 병당 단 $2.99에 판매 중!</ strong ></ p >
cite
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
cite
요소는 작품의 제목을 나타냅니다(예: 책, 논문, 에세이, 시, 악보, 노래, 대본, 영화, TV 프로그램, 게임, 조각, 회화, 연극
공연, 오페라, 뮤지컬, 전시회, 법적 사건 보고서, 컴퓨터 프로그램 등). 이것은 인용되거나 상세히
참조된 작품일 수도 있고, 혹은 그냥 지나가며 언급된 작품일 수도 있습니다.
사람의 이름은 작품의 제목이 아니며 — 사람을 "작품"이라고 부르는 경우가 있더라도 — 따라서 이 요소를 사람의 이름을 마크업하는 데 사용해서는 안 됩니다. (어떤 경우에는 b
요소가 이름을 마크업하는 데 적합할 수 있습니다; 예를 들어
유명인들의 이름이 키워드로서 스타일을 달리하여 눈에 띄도록 표시되는 가십 기사에서. 다른 경우에는 정말로 요소가 필요하다면 span
요소를 사용할 수 있습니다.)
다음 예제는 cite
요소의 일반적인 사용 예를
보여줍니다:
< p > 내가 가장 좋아하는 책은 Peter F. Hamilton의 < cite > The Reality Dysfunction</ cite > 입니다. 내가 가장 좋아하는 만화는 Stephan Pastis의 < cite > Pearls Before Swine</ cite > 입니다. 내가 가장 좋아하는 곡은 Cannonball Adderley Sextet의 < cite > Jive Samba</ cite > 입니다.</ p >
이것은 올바른 사용 예입니다:
< p > Wikipedia의 < cite > HTML</ cite > 문서에 따르면, 2008년 2월 중순 기준으로, 속성 값을 따옴표 없이 남겨두는 것은 안전하지 않습니다. 이는 분명히 지나치게 단순화된 설명입니다.</ p >
그러나 다음은 잘못된 사용 예입니다. 여기서 cite
요소는 작품의 제목보다 훨씬 많은 내용을
포함하고 있습니다:
<!-- 이 예제는 잘못된 사용 예를 보여주는 것으로, 복사하지 마세요! -->
< p > According to < cite > the Wikipedia article on HTML</ cite > , as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</ p >
cite
요소는 서지 정보의 인용에서 중요한
부분이지만, 제목만을 마크업하는 데 사용됩니다:
< p >< cite > Universal Declaration of Human Rights</ cite > , United Nations,
1948년 12월. 총회 결의 217 A (III)에서 채택됨.</ p >
인용은 인용문과 다릅니다(인용문에는 q
요소가 적합합니다).
이것은 잘못된 사용 예입니다, 왜냐하면 cite
요소는 인용문을 위한 것이 아니기 때문입니다:
< p >< cite > 이것은 잘못되었습니다!</ cite > , 이안이 말했습니다.</ p >
이것도 잘못된 사용 예입니다, 왜냐하면 사람이 작품이 아니기 때문입니다:
< p >< q > 이것도 잘못되었습니다!</ q > , < cite > 이안</ cite > 이 말했습니다.</ p >
올바른 사용 예에서는 cite
요소를 사용하지
않습니다:
< p >< q > 이것이 맞습니다</ q > , 이안이 말했습니다.</ p >
위에서 언급한 것처럼, b
요소가 특정 유형의 문서에서
이름을 키워드로 표시하는 데 유용할 수 있습니다:
< p > 그리고 나서 < b > 이안</ b > 이 < q > 이것이 가십 칼럼에서는 맞을 수도 있다고 말했습니다.</ q > .</ p >
q
요소현재 모든 엔진에서 지원됨.
cite
— 인용문의 출처나 편집에 대한 추가 정보에 대한 링크
HTMLQuoteElement
를 사용.
q
요소는 다른 출처에서 인용된 phrasing content를 나타냅니다.
요소의 내용을 인용하는 인용 구두점(따옴표 등)은 q
요소 바로 앞,
뒤, 또는 내부에 나타나지 않아야 하며, 사용자 에이전트가 렌더링 시 삽입합니다.
q
요소 내부의 콘텐츠는 다른 출처에서 인용된 것이어야 하며, 그 출처의
주소가 있는 경우 cite
속성에 명시될 수 있습니다.
출처는 소설이나 대본에서 인용된 가상의 것일 수도 있습니다.
cite
속성이 존재하는 경우, 그것은 유효한 URL이어야 합니다. 해당 속성의 값은 요소의 노드 문서에 상대적으로 파싱되어야 합니다. 사용자 에이전트는 사용자가 이러한 인용 링크를 따를 수 있도록 허용할 수 있지만, 이러한 링크는
주로 개인적인 용도(예: 사이트의 인용문 사용 통계를 수집하는 서버 측 스크립트 등)를 위한 것이며, 독자를 위한 것은 아닙니다.
q
요소는 인용문을 나타내지 않는 따옴표 대신 사용되어서는 안 됩니다.
예를 들어, q
요소를 사용하여 비꼬는 말을 마크업하는 것은
부적절합니다.
q
요소를 사용하여 인용문을 마크업하는 것은 전적으로 선택 사항이며,
q
요소 없이 명시적인 인용 구두점을 사용하는 것도 마찬가지로
올바릅니다.
다음은 q
요소를 사용한 간단한 예제입니다:
< p > 그 남자는 < q > 불가능한 일은 시간이 더 걸린다</ q > 고 말했다. 나는 그와 동의하지 않았다.</ p >
다음은 q
요소 내에 명시적 인용 링크와 외부 인용을 모두 포함한
예제입니다:
< p > W3C 페이지 < cite > About W3C</ cite > 에서는 W3C의
미션이 < q cite = "https://www.w3.org/Consortium/" > 웹의 장기적인 성장을 보장하는 프로토콜과
지침을 개발하여 월드 와이드 웹을 최대한으로 발전시키는 것</ q > 이라고 말합니다. 나는 이 미션에 동의하지 않습니다.</ p >
다음 예제에서는 인용문 자체에 인용문이 포함된 경우를 보여줍니다:
< p > < cite > Example One</ cite > 에서 그는 < q > 그 남자는
불가능한 일은 시간이 더 걸린다고 말했다</ q > 고 썼습니다. 나는 그와 더 동의하지 않았습니다</ q > . 음, 나는 더 동의하지 않습니다!</ p >
다음 예제에서는 q
요소 대신 따옴표가 사용되었습니다:
< p > 그의 가장 좋은 주장은 ❝나는 동의하지 않는다❞였고,
나는 그것이 웃기다고 생각했습니다.</ p >
다음 예제에서는 인용문이 없으며, 따옴표는 단어를 지칭하는 데 사용됩니다. 이 경우 q
요소를 사용하는 것은 부적절합니다.
< p > "ineffable"이라는 단어는 그 캠페인의 잘못된 관리로 인한
재난을 묘사하는 데 사용될 수 있었습니다.</ p >
dfn
요소현재 모든 엔진에서 지원됨.
dfn
요소가 없어야 합니다.
title
속성이 특별한 의미를 가집니다: 약어의 전체 용어 또는 확장
HTMLElement
를 사용.
dfn
요소는 용어의 정의 인스턴스를 나타냅니다. dfn
요소의 가장 가까운 상위 요소인 단락, 설명 목록 그룹, 또는 섹션은 dfn
요소에 의해 정의된 용어의 정의를 포함해야 합니다.
정의 용어: dfn
요소에 title
속성이 있으면, 그 속성의 정확한 값이 정의되는 용어입니다. 그렇지
않고 요소에 정확히 하나의 자식 요소 노드만 있고 텍스트
노드가 없으며, 그 자식 요소가 abbr
요소이고 title
속성이 있는 경우, 그 속성의 정확한 값이 정의되는
용어입니다. 그렇지 않으면, dfn
요소의 하위 텍스트 콘텐츠가 정의되는 용어를 제공합니다.
title
속성이 dfn
요소에 존재하는 경우, 그것은 정의되는 용어만을 포함해야
합니다.
title
속성은 상위 요소에서 dfn
요소에 영향을 미치지 않습니다.
a
요소가 dfn
요소로 연결될 때, 그것은 dfn
요소에 의해 정의된 용어의 인스턴스를 나타냅니다.
다음 조각에서는 "Garage Door Opener" 용어가 첫 번째 단락에서 처음 정의된 후, 두 번째 단락에서 사용됩니다. 두 경우 모두 실제로 표시되는 것은 그 약어입니다.
< p > The < dfn >< abbr title = "Garage Door Opener" > GDO</ abbr ></ dfn >
is a device that allows off-world teams to open the iris.</ p >
<!-- ... later in the document: -->
< p > Teal'c activated his < abbr title = "Garage Door Opener" > GDO</ abbr >
and so Hammond ordered the iris to be opened.</ p >
a
요소를 추가하면, 참조를 명시적으로 할 수 있습니다:
< p > The < dfn id = gdo >< abbr title = "Garage Door Opener" > GDO</ abbr ></ dfn >
is a device that allows off-world teams to open the iris.</ p >
<!-- ... later in the document: -->
< p > Teal'c activated his < a href = #gdo > < abbr title = "Garage Door Opener" > GDO</ abbr > </ a >
and so Hammond ordered the iris to be opened.</ p >
abbr
요소현재 모든 엔진에서 지원됨.
title
속성이 특별한 의미를 가집니다: 약어의 전체 용어 또는 확장
HTMLElement
를 사용.
abbr
요소는 약어 또는 두문자어를 나타내며, 선택적으로 그 확장을 포함할 수 있습니다. title
속성은 약어의 확장을 제공하는 데 사용될 수 있습니다. 이 속성이
지정된 경우, 약어의 확장을 포함해야 하며, 다른 내용은 포함할 수 없습니다.
아래 단락에는 abbr
요소로 표시된 약어가
포함되어 있습니다. 이 단락은 "Web Hypertext Application Technology Working Group"이라는 용어를 정의합니다.
< p > The < dfn id = whatwg >< abbr
title = "Web Hypertext Application Technology Working Group" > WHATWG</ abbr ></ dfn >
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</ p >
이를 다르게 작성하는 방법은 다음과 같습니다:
< p > The < dfn id = whatwg > Web Hypertext Application Technology
Working Group</ dfn > (< abbr
title = "Web Hypertext Application Technology Working Group" > WHATWG</ abbr > )
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</ p >
이 단락에는 두 개의 약어가 있습니다. 한 개의 약어만 정의되었으며, 확장이 지정되지 않은 다른 약어는 abbr
요소를 사용하지 않았습니다.
< p > The
< abbr title = "Web Hypertext Application Technology Working Group" > WHATWG</ abbr >
started working on HTML5 in 2004.</ p >
이 단락은 약어를 정의에 연결합니다.
< p > The < a href = "#whatwg" >< abbr
title = "Web Hypertext Application Technology Working Group" > WHATWG</ abbr ></ a >
community does not have much representation from Asia.</ p >
이 단락은 확장을 제공하지 않고 약어를 표시하며, 약어에 스타일을 적용하기 위한 후크로 사용될 수 있습니다(예: 소문자 대문자 변환).
< p > Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the < abbr > WHATWG</ abbr > issue graph.</ p >
약어가 복수형일 경우, 확장의 문법적 수(복수 vs 단수)는 요소 내용의 문법적 수와 일치해야 합니다.
여기서 복수형은 요소 밖에 있으므로 확장은 단수입니다:
< p > Two < abbr title = "Working Group" > WG</ abbr > s worked on
this specification: the < abbr > WHATWG</ abbr > and the
< abbr > HTMLWG</ abbr > .</ p >
여기서 복수형은 요소 안에 있으므로 확장은 복수형입니다:
< p > Two < abbr title = "Working Groups" > WGs</ abbr > worked on
this specification: the < abbr > WHATWG</ abbr > and the
< abbr > HTMLWG</ abbr > .</ p >
약어는 반드시 이 요소를 사용해 표시할 필요는 없습니다. 다음과 같은 경우에 유용할 것으로 예상됩니다:
abbr
요소와 title
속성을 사용하는 것이 확장을 인라인으로 포함하는 것(예: 괄호로
묶기)보다 대안이 될 수 있습니다.
abbr
요소와 title
속성을 사용해 마크업하거나 인라인으로 확장을 포함하는 것이
권장됩니다.
abbr
요소를 title
속성 없이 사용할 수 있습니다.
한 번 title
속성에 확장을 제공한다고 해서 동일한
내용을 가진 다른
abbr
요소가 동일한 확장을 가진 것처럼 동작하지는
않을 것입니다. 각 abbr
요소는 독립적입니다.
ruby
요소현재 모든 엔진에서 지원됨.
HTMLElement
를 사용.
ruby
요소는 하나 이상의 phrasing content를
루비 주석과 함께 표시할 수 있도록 합니다. 루비 주석은 주로 동아시아 타이포그래피에서 발음을 안내하거나 다른 주석을 추가하기 위해 기본 텍스트 옆에 표시되는 짧은 텍스트입니다. 일본어에서는 이 형태의
타이포그래피를 후리가나라고도 합니다.
ruby
요소의 콘텐츠 모델은 다음과 같은 시퀀스 중
하나 이상으로 구성됩니다:
다음 중 하나:
phrasing content, 그러나
ruby
요소와 그 하위
요소는 포함하지 않음
다음 중 하나:
ruby
및 rt
요소는 다양한 종류의 주석에 사용할 수 있으며, 특히
(하지만 이에 국한되지 않음) 아래에 설명된 주석에 사용됩니다. 일본어 루비에 관한 자세한 내용과 일본어 루비를 렌더링하는 방법은 일본어 텍스트 레이아웃 요구 사항을 참조하세요.
[JLREQ]
이 글을 작성할 당시, CSS는 HTML ruby
요소의 렌더링을 완전히 제어할 수 있는 방법을
아직 제공하지 않습니다. CSS가 아래에 설명된 스타일을 지원하도록 확장되기를 기대합니다.
하나 이상의 히라가나 또는 가타카나 문자(루비 주석)가 각 한자 문자(기본 텍스트)에 배치됩니다. 이는 한자 문자의 읽는 법을 제공하기 위해 사용됩니다.
< ruby > B< rt > annotation</ ruby >
이 예에서, 각 주석이 개별 기본 문자와 어떻게 일치하는지 확인할 수 있습니다.
< ruby > 君< rt > くん</ ruby >< ruby > 子< rt > し</ ruby > は< ruby > 和< rt > わ</ ruby > して< ruby > 同< rt > どう</ ruby > ぜず。
君子は和して同ぜず。
이 예는 다음과 같이 쓸 수도 있습니다. 두 개의 기본 텍스트 세그먼트와 두 개의 주석이 포함된 하나의 ruby
요소를 사용하여 각각 하나의
기본 텍스트 세그먼트와 주석을 포함한 두 개의 연속 ruby
요소로 마크업한 것 대신
다음과 같이 쓸 수 있습니다:
< ruby > 君< rt > くん</ rt > 子< rt > し</ ruby > は< ruby > 和< rt > わ</ ruby > して< ruby > 同< rt > どう</ ruby > ぜず。
이는 이전 사례와 유사합니다. 복합어(기본 텍스트)의 각 한자 문자에는 히라가나 또는 가타카나 문자(루비 주석)가 읽는 법으로 제공됩니다. 차이점은 기본 텍스트 세그먼트가 서로 분리되지 않고 복합어를 형성한다는 것입니다.
< ruby > B< rt > annotation</ rt > B< rt > annotation</ ruby >
이 예에서, 각 주석이 개별 기본 문자와 다시 일치하는지 확인할 수 있습니다. 이 예에서는 각 복합어(주쿠고)가 단일 ruby
요소에 해당합니다.
여기에서 예상되는 렌더링은 각 주석이 해당하는 기본 문자 위(또는 수직 텍스트의 경우 옆)에 배치되고, 주석이 인접한 문자와 겹치지 않도록 하는 것입니다.
< ruby > 鬼< rt > き</ rt > 門< rt > もん</ rt ></ ruby > の< ruby > 方< rt > ほう</ rt > 角< rt > がく</ rt ></ ruby > を< ruby > 凝< rt > ぎょう</ rt > 視</ rt > し</ ruby > する
鬼門の方角を凝視する
이는 이전 사례와 의미적으로 동일합니다(기본 복합어의 각 한자 문자에 히라가나 또는 가타카나 문자로 읽는 법을 주석으로 제공). 그러나 렌더링은 더 복잡한 주쿠고 루비 렌더링입니다.
이는 복합어에 대한 단일 루비의 이전 예제와 동일합니다. 다른 렌더링은 다른 스타일링(예: CSS)을 사용하여 달성할 것으로 예상되며, 여기서는 표시되지 않습니다.
< ruby > 鬼< rt > き</ rt > 門< rt > もん</ rt ></ ruby > の< ruby > 方< rt > ほう</ rt > 角</ rt > がく</ rt ></ ruby > を< ruby > 凝< rt > ぎょう</ rt > 視</ rt ></ ruby > する
주쿠고 루비 렌더링에 대한 자세한 내용은 Jukugo Ruby 렌더링을 참조하세요. 일본어 텍스트 레이아웃 요구 사항의 부록 F를 참조하세요. [JLREQ]
주석은 발음보다는 (또는 발음과 함께) 기본 텍스트의 의미를 설명합니다. 따라서 기본 텍스트와 주석 모두 여러 문자로 구성될 수 있습니다.
< ruby > BASE< rt > annotation</ ruby >
여기서 복합 한자 단어는 주석으로 해당 가타카나를 가지고 있습니다.
< ruby > 境界面< rt > インターフェース</ ruby >
境界面
여기서 복합 한자 단어는 주석으로 영어 번역을 가지고 있습니다.
< ruby lang = "ja" > 編集者< rt lang = "en" > editor</ ruby >
編集者
일대일 대응이 어려운 경우, 여러 기본 문자에 해당하는 발음 읽기가 있습니다. (영어에서는 "Colonel"과 "Lieutenant"라는 단어가 발음과 개별 문자 간의 직접적인 대응이 다소 불분명한 예입니다.)
이 예에서는 꽃 종 이름에 그룹 루비를 사용하여 발음 읽기가 제공됩니다.
< ruby > 紫陽花< rt > あじさい</ ruby >
紫陽花
때로는 위에서 설명한 루비 스타일이 결합됩니다.
이로 인해 동일한 기본 세그먼트를 커버하는 두 개의 주석이 생성되면, 주석을 연달아 배치할 수 있습니다.
< ruby > BASE< rt > annotation 1</ rt > annotation 2</ ruby >
< ruby > B< rt > a</ rt > a</ ruby >< ruby > A< rt > a</ rt > a</ ruby >< ruby > S< rt > a</ rt > a</ ruby >< ruby > E< rt > a</ rt > a</ ruby >
이 예시에서는 몇 가지 기호에 영어와 프랑스어로 이름이 지정되어 있습니다.
< ruby >
♥ < rt > Heart < rt lang = fr > Cœur </ rt >
☘ < rt > Shamrock < rt lang = fr > Trèfle </ rt >
✶ < rt > Star < rt lang = fr > Étoile </ rt >
</ ruby >
다음과 같은 더 복잡한 상황에서는, 내부 주석을 제공하기 위해 중첩된 ruby
요소를 사용하고, 그런 다음 전체
ruby
에 "외부" 수준에서 주석을
추가합니다.
< ruby >< ruby > B< rt > a</ rt > A< rt > n</ rt > S< rt > t</ rt > E</ rt > n</ rt ></ ruby >< rt > annotation</ ruby >
여기서는 발음과 의미가 루비 주석으로 제공됩니다. 중첩된 ruby
요소의 주석은 각 기본
문자를 위한 단일 루비 발음 주석을 제공하며, 외부 ruby
요소의 자식 요소인
rt
요소의 주석은 히라가나로 의미를
제공합니다.
< ruby >< ruby > 東< rt > とう</ rt > 南< rt > なん</ rt ></ ruby >< rt > たつみ</ rt ></ ruby >
東南 の方角
이것은 동일한 예이지만, 의미가 일본어 대신 영어로 제공됩니다:
< ruby >< ruby > 東< rt > とう</ rt > 南< rt > なん</ rt ></ ruby >< rt lang = en > Southeast</ rt ></ ruby >
東南 の方角
루비 요소 조상이 없는 루비
요소 내에서는 콘텐츠가 세
가지 범주로 분할됩니다: 기본 텍스트 세그먼트, 주석 세그먼트, 무시된 세그먼트. 무시된 세그먼트는 문서의 의미론에 포함되지 않으며, 일부 요소 간 공백 및 rp
요소로 구성됩니다. 후자는 루비를 전혀 지원하지 않는 레거시
사용자 에이전트를 위해 사용됩니다. 기본 텍스트 세그먼트는 중첩될 수 있으며(하나의 위치에서 두 개의 세그먼트만 중첩될 수 있으며, 중첩된 세그먼트는 겹치는 세그먼트보다 시작점이 앞서거나 종료점이
같거나 늦어야 하고, 종료점이 늦어야 하는 세그먼트는 시작점이 같거나 앞서야 합니다). 주석 세그먼트는 rt
요소와 대응됩니다. 각 주석 세그먼트는 기본 텍스트
세그먼트와 연결될 수 있으며, 각 기본 텍스트 세그먼트는 주석 세그먼트와 연결될 수 있습니다. (적합한 문서에서 각 기본 텍스트 세그먼트는 적어도 하나의 주석 세그먼트와 연결되어 있으며, 각 주석
세그먼트는 하나의 기본 텍스트 세그먼트와 연결되어 있습니다.) 루비
요소는 포함된 기본 텍스트 세그먼트의 집합과 그
기본 텍스트 세그먼트와 주석 세그먼트 간의 매핑을 나타냅니다. 세그먼트는 DOM 범위로 설명되며, 주석 세그먼트 범위는 항상 정확히 하나의 요소로 구성됩니다. [DOM]
특정 시점에서 루비
요소의 콘텐츠 분할 및 범주화는
다음 알고리즘을 실행하여 얻은 결과입니다:
base text segments를 빈 기본 텍스트 세그먼트 목록으로 설정하며, 각 세그먼트는 잠재적으로 기본 텍스트 하위 세그먼트 목록을 가질 수 있습니다.
annotation segments를 빈 주석 세그먼트 목록으로 설정하며, 각 세그먼트는 잠재적으로 기본 텍스트 세그먼트나 하위 세그먼트와 연결될 수 있습니다.
root를 알고리즘이 실행되는 루비
요소로 설정합니다.
root에 루비
요소
조상이 있는 경우, end로 레이블된 단계로 건너뜁니다.
current parent를 root로 설정합니다.
index를 0으로 설정합니다.
start index를 null로 설정합니다.
parent start index를 null로 설정합니다.
current base text를 null로 설정합니다.
시작 모드: index가 current parent의 자식 노드 수보다 크거나 같은 경우, end mode로 레이블된 단계로 건너뜁니다.
index 번째 노드가 current parent에서 rt
또는 rp
요소인 경우, 주석 모드로
레이블된 단계로 건너뜁니다.
start index에 index 값을 설정합니다.
기본 모드: index 번째 노드가 current parent에서 루비
요소이며, current
parent가 root와 동일한 요소인 경우, 루비 레벨을 추가한 후 시작 모드로 레이블된 단계로 건너뜁니다.
index 번째 노드가 current parent에서 rt
또는 rp
요소인 경우, 현재 기본 텍스트를 설정한 후
주석 모드로 레이블된 단계로 건너뜁니다.
index 값을 1 증가시킵니다.
기본 모드 후 증가: index가 current parent의 자식 노드 수보다 크거나 같은 경우, end mode로 레이블된 단계로 건너뜁니다.
기본 모드로 레이블된 단계로 돌아갑니다.
주석 모드: index 번째 노드가 current parent에서 rt
요소인 경우, 루비 주석 추가한 후 주석 모드
증가로 레이블된 단계로 건너뜁니다.
index 번째 노드가 current parent에서 rp
요소인 경우, 주석 모드 증가로
레이블된 단계로 건너뜁니다.
index 번째 노드가 current parent에서 Text
노드가 아니거나, Text
노드이지만 요소 간 공백이 아닌
경우, 기본 모드로 레이블된 단계로 건너뜁니다.
주석 모드 증가: lookahead index에 index 더하기 1의 값을 설정합니다.
주석 모드 공백 건너뛰기: lookahead index가 current parent의 자식 노드 수와 같은 경우, end mode로 레이블된 단계로 건너뜁니다.
lookahead index 번째 노드가 current parent에서 rt
요소 또는 rp
요소인 경우, index에
lookahead index 값을 설정한 후 주석 모드로 레이블된 단계로 건너뜁니다.
lookahead index 번째 노드가 current parent에서 Text
노드가 아니거나, Text
노드이지만 요소 간 공백이 아닌
경우, index를 더 이상 증가시키지 않고 기본 모드로 레이블된 단계로 건너뜁니다(지금까지 본 요소 간 공백이 다음 기본 텍스트
세그먼트의 일부가 됩니다).
lookahead index 값을 1 증가시킵니다.
주석 모드 공백 건너뛰기로 레이블된 단계로 건너뜁니다.
end 모드: current parent가 root와 동일한 요소가 아닌 경우, 루비 레벨을 팝한 후 기본 모드 후 증가로 레이블된 단계로 건너뜁니다.
종료: base text segments와 annotation segments를 반환합니다. 루비
요소의 설명되지 않은 콘텐츠는
암묵적으로 무시된 세그먼트에 포함됩니다.
위 단계에서 현재 기본 텍스트를 설정하라는 지시는 알고리즘의 해당 시점에서 다음 단계를 실행함을 의미합니다:
text range는 시작이 current parent, start index의 경계점이고, 종료가 current parent, index의 경계점인 DOM 범위입니다.
new text segment는 annotation range 범위로 설명된 기본 텍스트 세그먼트입니다.
new text segment를 base text segments에 추가합니다.
current base text를 new text segment로 설정합니다.
start index를 null로 설정합니다.
위 단계에서 루비 레벨을 추가하라는 지시는 알고리즘의 해당 시점에서 다음 단계를 실행함을 의미합니다:
current parent를 current parent의 index 번째 노드로 설정합니다.
index를 0으로 설정합니다.
saved start index에 start index 값을 설정합니다.
start index를 null로 설정합니다.
위 단계에서 루비 레벨을 팝하라는 지시는 알고리즘의 해당 시점에서 다음 단계를 실행함을 의미합니다:
index를 current parent의 root에서의 위치로 설정합니다.
current parent를 root로 설정합니다.
index 값을 1 증가시킵니다.
start index에 saved start index 값을 설정합니다.
saved start index를 null로 설정합니다.
위 단계에서 루비 주석 추가하라는 지시는 알고리즘의 해당 시점에서 다음 단계를 실행함을 의미합니다:
rt를 current parent의 index 번째 노드인 rt
요소로 설정합니다.
annotation range는 current parent, index의 경계점이며, current parent, index 더하기 1의 경계점인 DOM 범위입니다(i.e. rt만 포함합니다).
new annotation segment는 annotation range 범위로 설명된 주석 세그먼트입니다.
current base text가 null이 아닌 경우, new annotation segment를 current base text와 연결합니다.
new annotation segment를 annotation segments에 추가합니다.
이 예제에서는 일본어 텍스트 漢字의 각 한자가 히라가나로 읽기가 주석으로 추가됩니다.
...
< ruby > 漢< rt > かん</ rt > 字< rt > じ</ rt ></ ruby >
...
이는 다음과 같이 렌더링될 수 있습니다:
이 예제에서는 전통 중국어 텍스트 漢字의 각 한자가 보포모포로 읽기가 주석으로 추가됩니다.
< ruby > 漢< rt > ㄏㄢˋ</ rt > 字< rt > ㄗˋ</ rt ></ ruby >
이는 다음과 같이 렌더링될 수 있습니다:
이 예제에서는 간체 중국어 텍스트 汉字의 각 한자가 병음으로 읽기가 주석으로 추가됩니다.
...< ruby > 汉< rt > hàn</ rt > 字< rt > zì</ rt ></ ruby > ...
이는 다음과 같이 렌더링될 수 있습니다:
이 예제에서는 "HTML" 약어에 네 가지 주석이 있습니다: 전체 약어에 대한 주석으로, 그 의미를 간략히 설명한 것입니다. "HT" 문자는 "Hypertext"로 확장되고, "M" 문자는 "Markup"으로, "L" 문자는 "Language"로 확장됩니다.
< ruby >
< ruby > HT< rt > Hypertext</ rt > M< rt > Markup</ rt > L< rt > Language</ rt ></ ruby >
< rt > 문서 및 애플리케이션을 설명하는 추상적 언어입니다
</ ruby >
rt
요소모든 최신 엔진에서 지원됨.
루비
요소의 자식으로.
rt
요소의 종료 태그는 rt
요소가 바로 뒤따르거나 rp
요소가 뒤따르거나, 부모 요소에 더 이상 콘텐츠가 없는 경우
생략할 수 있습니다.
HTMLElement
를 사용합니다.
rt
요소는 루비 주석의 루비 텍스트 구성 요소를 표시합니다.
루비
요소의 자식인 경우, 루비
요소가 그것을 결정하는 데 사용하는 일부로서만 존재하며,
자체적으로는 아무것도 표현하지 않습니다.
rt
요소가 루비
요소의 자식이 아닌 경우, 자식 요소와 동일한 것을 표현합니다.
rp
요소모든 최신 엔진에서 지원됨.
루비
요소의 자식으로, rt
요소 바로 전이나 바로 후에 사용될 수 있습니다.
rp
요소의 종료 태그는 rp
요소가 rt
또는 rp
요소 바로 뒤따르거나, 부모 요소에 더 이상 콘텐츠가
없는 경우 생략할 수 있습니다.
HTMLElement
를 사용합니다.
rp
요소는 루비 주석의 루비 텍스트 구성 요소 주위에 괄호나 다른
콘텐츠를 제공하여 루비 주석을 지원하지 않는 사용자 에이전트에 표시할 수 있습니다.
rp
요소가 루비
요소의 자식인 경우, 아무것도 표현하지 않습니다. rp
요소의 부모 요소가 루비
요소가 아닌 경우, 자식 요소를 표현합니다.
위의 예제에서 텍스트 漢字의 각 한자에 대해 발음이 주석으로 추가된 경우, rp
를 사용하여 레거시 사용자 에이전트에서 괄호 안에 읽기가
표시되도록 확장할 수 있습니다:
...
< ruby > 漢< rp > (</ rp >< rt > かん</ rt >< rp > )</ rp > 字< rp > (</ rp >< rt > じ</ rt >< rp > )</ rp ></ ruby >
...
적합한 사용자 에이전트에서는 렌더링이 위와 같이 되겠지만, 루비를 지원하지 않는 사용자 에이전트에서는 다음과 같이 렌더링됩니다:
... 漢(かん)字(じ)...
세그먼트에 여러 주석이 있는 경우, rp
요소는 주석 사이에
배치될 수도 있습니다. 다음은 이전에 만든 예제를 다시 보여주는 것으로, 영어와 프랑스어로 이름이 주어진 몇 가지 기호를 포함하고 있습니다. 이번에는 rp
요소도 포함되었습니다:
< ruby >
♥< rp > : </ rp >< rt > Heart</ rt >< rp > , </ rp >< rt lang = fr > Cœur</ rt >< rp > .</ rp >
☘< rp > : </ rp >< rt > Shamrock</ rt >< rp > , </ rp >< rt lang = fr > Trèfle</ rt >< rp > .</ rp >
✶< rp > : </ rp >< rt > Star</ rt >< rp > , </ rp >< rt lang = fr > Étoile</ rt >< rp > .</ rp >
</ ruby >
이 예제는 루비를 지원하지 않는 사용자 에이전트에서 다음과 같이 렌더링됩니다:
♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.
data
요소모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
value
— 기계가 읽을 수 있는 값
[Exposed =Window ]
interface HTMLDataElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString value ;
};
data
요소는 콘텐츠와 함께 value
속성에 있는 해당 콘텐츠의 기계가 읽을 수 있는
형태를 표현합니다.
value
속성은 반드시 있어야 합니다. 이
속성의 값은 요소의 콘텐츠를 기계가 읽을 수 있는 형식으로 나타내야 합니다.
값이 날짜 또는 시간과 관련된 경우, 더 구체적인 time
요소를 대신 사용할 수 있습니다.
이 요소는 여러 용도로 사용될 수 있습니다.
마이크로포맷 또는 이 명세서에서 정의된 마이크로데이터 속성과 결합된 경우, 이 요소는 데이터 처리기용 기계가 읽을 수 있는 값과 웹 브라우저에서 렌더링하기 위한
사람이 읽을 수 있는 값을 모두 제공합니다. 이 경우 value
속성에 사용할 형식은 사용 중인 마이크로포맷 또는
마이크로데이터 어휘에 의해 결정됩니다.
그러나 이 요소는 페이지의 스크립트와 함께 사용될 수도 있으며, 스크립트가 사람이 읽을 수 있는 값과 함께 저장할 리터럴 값을 가지고 있을 때 유용합니다. 이러한 경우 사용해야 할 형식은 스크립트의
필요에만 따릅니다. (data-*
속성도 이러한 상황에서 유용할 수
있습니다.)
모든 최신 엔진에서 지원됨.
value
IDL 속성은 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
여기에는 짧은 테이블이 있으며, 각 열에 대해 텍스트 형식으로 숫자가 표시되고 다른 열에는 분해된 형식으로 표시되지만, data
요소를 사용하여 테이블 정렬 자바스크립트
라이브러리가 각 열에 대해 정렬 메커니즘을 제공할 수 있도록 숫자 값이 인코딩되었습니다.
< script src = "sortable.js" ></ script >
< table class = "sortable" >
< thead > < tr > < th > 게임 < th > 회사 < th > 맵 크기
< tbody >
< tr > < td > 1830 < td > < data value = "8" > 여덟</ data > < td > < data value = "93" > 19+74 헥스 (총 93개)</ data >
< tr > < td > 1856 < td > < data value = "11" > 열하나</ data > < td > < data value = "99" > 12+87 헥스 (총 99개)</ data >
< tr > < td > 1870 < td > < data value = "10" > 열</ data > < td > < data value = "149" > 4+145 헥스 (총 149개)</ data >
</ table >
time
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
datetime
속성이 있는 경우: 구문
콘텐츠.
datetime
—
기계가 읽을 수 있는 값
[Exposed =Window ]
interface HTMLTimeElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString dateTime ;
};
time
요소는 그 내용을 표현하며,
datetime
속성에 해당하는 기계가 읽을 수 있는 형식으로 변환된 형태를 포함합니다. 내용의 종류는 아래에 설명된 다양한 날짜, 시간, 시간대 오프셋 및 기간으로 제한됩니다.
datetime
속성은 있을 수 있습니다. 있는 경우, 그 값은 요소 내용의 기계가 읽을 수 있는 형식의 표현이어야 합니다.
time
요소에
datetime
속성이 없으면 어떤 요소 자손도 포함할 수 없습니다.
datetime 값
이 time
요소의
datetime
속성 값이며, 속성이 없는 경우
자식 텍스트 내용을 통해 얻습니다.
datetime 값은 다음 구문 중 하나와 일치해야 합니다.
< time > 2011-11</ time >
< time > 2011-11-18</ time >
< time > 11-18</ time >
< time > 14:54</ time >
< time > 14:54:39</ time >
< time > 14:54:39.929</ time >
< time > 2011-11-18T14:54</ time >
< time > 2011-11-18T14:54:39</ time >
< time > 2011-11-18T14:54:39.929</ time >
< time > 2011-11-18 14:54</ time >
< time > 2011-11-18 14:54:39</ time >
< time > 2011-11-18 14:54:39.929</ time >
날짜는 있으나 시간대 오프셋이 없는 시간은 하루 동안 각 시간대에서 동일한 특정 시간에 관찰되는 이벤트를 지정하는 데 유용합니다. 예를 들어, 2020년 새해는 모든 시간대에서 2020-01-01 00:00에 축하되며, 전 세계 시간대에서 같은 순간에 축하되지 않습니다. 모든 시간대에서 동일한 시간에 발생하는 이벤트의 경우, 예를 들어 화상회의, 유효한 글로벌 날짜 및 시간 문자열이 더 유용할 수 있습니다.
< time > Z</ time >
< time > +0000</ time >
< time > +00:00</ time >
< time > -0800</ time >
< time > -08:00</ time >
날짜가 없는 시간(또는 여러 날짜에 걸쳐 발생하는 이벤트를 나타내는 시간)의 경우 시간대 오프셋을 지정하는 것보다 시간을 제어하는 지리적 위치를 지정하는 것이 더 유용합니다. 이는 지리적 위치가 일광 절약 시간제로 인해 시간대 오프셋을 변경하기 때문입니다. 경우에 따라 지리적 위치가 시간대를 변경하기도 합니다. 예를 들어, 2011년 말 사모아에서 일어난 일과 같이 시간대 경계가 재조정되는 경우가 있습니다. 이러한 시간대의 경계를 설명하고 각 시간대 내에서 적용되는 규칙을 설명하는 데이터베이스가 있으며, 이는 시간대 데이터베이스로 알려져 있습니다. [TZDATABASE] 참조
< time > 2011-11-18T14:54Z</ time >
< time > 2011-11-18T14:54:39Z</ time >
< time > 2011-11-18T14:54:39.929Z</ time >
< time > 2011-11-18T14:54+0000</ time >
< time > 2011-11-18T14:54:39+0000</ time >
< time > 2011-11-18T14:54:39.929+0000</ time >
< time > 2011-11-18T14:54+00:00</ time >
< time > 2011-11-18T14:54:39+00:00</ time >
< time > 2011-11-18T14:54:39.929+00:00</ time >
< time > 2011-11-18T06:54-0800</ time >
< time > 2011-11-18T06:54:39-0800</ time >
< time > 2011-11-18T06:54:39.929-0800</ time >
< time > 2011-11-18T06:54-08:00</ time >
< time > 2011-11-18T06:54:39-08:00</ time >
< time > 2011-11-18T06:54:39.929-08:00</ time >
날짜 및 시간대 오프셋이 있는 시간은 특정 이벤트나 시간대에 고정되지 않은 반복적인 가상 이벤트를 지정하는 데 유용합니다. 예를 들어 소행성 충돌의 정확한 시간이나 일광 절약 시간제에 관계없이 매일 1400 UTC에 열리는 회의의 특정 시간 등을 지정할 수 있습니다. 시간대 오프셋이 특정 지리적 위치의 현지 시간대 오프셋에 따라 달라지는 이벤트의 경우, 지리적 위치와 결합된 유효한 로컬 날짜 및 시간 문자열이 더 유용할 수 있습니다.
< time > 2011-W47</ time >
< time > 2011</ time >
< time > 0001</ time >
< time > PT4H18M3S</ time >
< time > 4h 18m 3s</ time >
요소 내용의 기계가 읽을 수 있는 동등 항목은 요소의 datetime 값을 사용하여 다음 알고리즘으로 얻어야 합니다:
요소의 월 문자열을 파싱하여 datetime 값이 월을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 날짜 문자열을 파싱하여 datetime 값이 날짜를 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 연도 없는 날짜 문자열을 파싱하여 datetime 값이 연도 없는 날짜를 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 시간 문자열을 파싱하여 datetime 값이 시간을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 로컬 날짜 및 시간 문자열을 파싱하여 datetime 값이 로컬 날짜 및 시간을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 시간대 오프셋 문자열을 파싱하여 datetime 값이 시간대 오프셋을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 글로벌 날짜 및 시간 문자열을 파싱하여 datetime 값이 글로벌 날짜 및 시간을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 주 문자열을 파싱하여 datetime 값이 주를 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
요소의 ASCII 숫자만으로 구성되어 있고, 그중 하나가 U+0030 숫자 0(0)이 아닌 경우, 기계가 읽을 수 있는 동등 항목은 이러한 숫자의 십진수 해석으로, 연도를 나타냅니다. 반환하십시오.
요소의 기간 문자열을 파싱하여 datetime 값이 기간을 반환하면, 그것이 기계가 읽을 수 있는 동등 항목입니다. 반환하십시오.
기계가 읽을 수 있는 동등 항목이 없습니다.
위 알고리즘은 임의의 문자열 s에 대해 오직 하나의 알고리즘만이 값을 반환하도록 설계되어야 합니다. 더 효율적인 접근 방식은 이러한 데이터 유형을 한 번에 파싱하는 단일 알고리즘을 만드는 것일 수 있습니다. 그러한 알고리즘 개발은 독자에게 맡겨져 있습니다.
모든 현재 엔진에서 지원됨.
dateTime
IDL 속성은 요소의 datetime
콘텐츠
속성을 반영해야 합니다.
time
요소는
예를 들어 마이크로포맷에서 날짜를 인코딩하는 데 사용할 수 있습니다. 아래는 time
요소를 사용하는 hCalendar 변형을
사용하여 이벤트를 인코딩하는 가상의 방법을 보여줍니다:
< div class = "vevent" >
< a class = "url" href = "http://www.web2con.com/" > http://www.web2con.com/</ a >
< span class = "summary" > Web 2.0 Conference</ span > :
< time class = "dtstart" datetime = "2005-10-05" > October 5</ time > -
< time class = "dtend" datetime = "2005-10-07" > 7</ time > ,
at the < span class = "location" > Argent Hotel, San Francisco, CA</ span >
</ div >
여기서는 Atom 어휘를 기반으로 한 가상의 마이크로데이터 어휘가 사용되어 time
요소와 함께 블로그 게시물의 게시 날짜를
표시합니다.
< article itemscope itemtype = "https://n.example.org/rfc4287" >
< h1 itemprop = "title" > Big tasks</ h1 >
< footer > Published < time itemprop = "published" datetime = "2009-08-29" > 이틀 전</ time > .</ footer >
< p itemprop = "content" > 오늘, 나는 내 아이를 위해 자전거를 사러 나갔다.</ p >
</ article >
이 예제에서는 time
요소를 사용하여 다른 기사
게시 날짜를 schema.org 마이크로데이터 어휘를 사용하여 표시합니다:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< h1 itemprop = "headline" > Small tasks</ h1 >
< footer > Published < time itemprop = "datePublished" datetime = "2009-08-30" > 어제</ time > .</ footer >
< p itemprop = "articleBody" > 나는 자전거에 자전거 벨을 달았다.</ p >
</ article >
다음 스니펫에서는 time
요소를 사용하여
ISO8601 형식으로 날짜를 인코딩하여 나중에 스크립트로 처리합니다:
< p > Our first date was < time datetime = "2006-09-23" > a Saturday</ time > .</ p >
이 두 번째 스니펫에서는 값에 시간이 포함되어 있습니다:
< p > We stopped talking at < time datetime = "2006-09-24T05:00-07:00" > 5am the next morning</ time > .</ p >
페이지에 로드된 스크립트(따라서 time
요소를
사용하여 날짜와 시간을 표시하는 페이지의 내부 규칙을 따름)는 페이지를 스캔하여 time
요소를 모두 찾아 날짜와 시간의 인덱스를
생성할 수 있습니다.
예를 들어, 이 요소는 "금요일"이라는 문자열과 함께 2011년 11월 18일이 "금요일"에 해당한다는 추가 의미를 전달합니다:
Today is < time datetime = "2011-11-18" > 금요일</ time > .
이 예제에서는 태평양 표준시 시간대를 지정하여 특정 시간을 나타냅니다:
Your next meeting is at < time datetime = "2011-11-18T15:00-08:00" > 3pm</ time > .
code
요소모든 현재 엔진에서 지원됨.
HTMLElement
를 사용합니다.
code
요소는 컴퓨터 코드 조각을 나타냅니다. 이는 XML 요소 이름, 파일 이름, 컴퓨터 프로그램 또는 컴퓨터가 인식할 수 있는 기타 문자열일
수 있습니다.
컴퓨터 코드의 언어를 표시하는 공식적인 방법은 없습니다. 문법 강조 스크립트가 올바른 규칙을 사용할 수 있도록 예를 들어 code
요소에 사용된 언어를 표시하고자 하는 저자는
class
속성을 사용할 수 있으며, 예를 들어 요소에
"language-
"로 시작하는 클래스를 추가할 수 있습니다.
다음 예제는 요소 이름과 컴퓨터 코드를 포함한 구두점 등을 문단 내에서 마크업하는 방법을 보여줍니다.
< p > The < code > code</ code > 요소는 컴퓨터
코드 조각을 나타냅니다.</ p >
< p > When you call the < code > activate()</ code > 메서드를
< code > robotSnowman</ code > 객체에서 호출하면 눈이 빛납니다.</ p >
< p > The example below uses the < code > begin</ code > 키워드를 사용하여
문장 블록의 시작을 나타냅니다. 이 키워드는 < code > end</ code > 키워드와 쌍을 이루며, 그 뒤에는 프로그램의 끝을 나타내는 < code > .</ code > 구두점 문자가 옵니다.</ p >
다음 예제는 pre
및 code
요소를 사용하여 코드 블록을
마크업하는 방법을 보여줍니다.
< pre >< code class = "language-pascal" > var i: Integer;
begin
i := 1;
end.</ code ></ pre >
이 예제에서는 사용된 언어를 표시하기 위해 클래스를 사용합니다.
자세한 내용은 pre
요소를
참조하십시오.
var
요소모든 현재 엔진에서 지원됨.
HTMLElement
를 사용합니다.
var
요소는 변수를 나타냅니다. 이는 수학적 표현식이나 프로그래밍 문맥에서 실제 변수일 수 있으며, 상수를 나타내는 식별자, 물리적 양을 나타내는
기호, 함수 매개변수, 또는 산문에서 사용되는 대체 용어일 수 있습니다.
아래 문단에서는 문자 "n"이 산문에서 변수로 사용되고 있습니다:
< p > If there are < var > n</ var > pipes leading to the ice
cream factory then I expect at < em > least</ em > < var > n</ var >
flavors of ice cream to be available for purchase!</ p >
수학에서는, 특히 가장 간단한 표현식 이상에서는 MathML이 더 적합합니다. 그러나 var
요소는 여전히 MathML 표현식에서 언급된 특정 변수를
참조하는 데 사용할 수 있습니다.
이 예제에서는 방정식과 그 방정식에서 변수들을 참조하는 범례를 보여줍니다. 표현식 자체는 MathML로 마크업되었지만, 변수는 var
요소를 사용하여 그림의 범례에서 언급됩니다.
< figure >
< math >
< mi > a</ mi >
< mo > =</ mo >
< msqrt >
< msup >< mi > b</ mi >< mn > 2</ mn ></ msup >
< mi > +</ mi >
< msup >< mi > c</ mi >< mn > 2</ mn ></ msup >
</ msqrt >
</ math >
< figcaption >
Using Pythagoras' theorem to solve for the hypotenuse < var > a</ var > of
a triangle with sides < var > b</ var > and < var > c</ var >
</ figcaption >
</ figure >
여기서 질량-에너지 등가를 설명하는 방정식이 문장에서 사용되었으며, 그 방정식의 변수와 상수를 표시하기 위해 var
요소가 사용되었습니다:
< p > Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote < var > E</ var > = < var > m</ var > < var > c</ var >< sup > 2</ sup > . The teacher
looked pleased.</ p >
samp
요소모든 현재 엔진에서 지원됨.
HTMLElement
를 사용합니다.
samp
요소는 다른 프로그램이나 컴퓨팅 시스템에서의 샘플
또는 인용된 출력을 표현합니다.
pre
및
kbd
요소에 대한 자세한 내용은 참고하십시오.
이 요소는 웹 애플리케이션에서 즉시 출력을 제공할 수 있는 output
요소와 대조될 수 있습니다.
이 예제는 samp
요소를
인라인으로 사용하는 것을 보여줍니다:
< p > The computer said < samp > Too much cheese in tray
two</ samp > but I didn't know what that meant.</ p >
두 번째 예제는 콘솔 프로그램에서 샘플 출력을 보여줍니다. 중첩된
samp
및 kbd
요소는
스타일 시트로 샘플 출력의 특정 요소를 스타일링할 수 있게 합니다. samp
의 몇몇 부분은 더욱 정밀한 스타일링을 위해
추가적인 마크업이 되어 있습니다. 이를 위해 span
요소가 사용되었습니다.
< pre >< samp >< span class = "prompt" > jdoe@mowmow:~$</ span > < kbd > ssh demo.example.com</ kbd >
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
< span class = "prompt" > jdoe@demo:~$</ span > < span class = "cursor" > _</ span ></ samp ></ pre >
세 번째 예제는 입력과 해당 출력을 보여줍니다. 이 예제에서는 code
및 samp
요소를 사용합니다.
< pre >
< code class = "language-javascript" > console.log(2.3 + 2.4)</ code >
< samp > 4.699999999999999</ samp >
</ pre >
kbd
요소모든 현재 엔진에서 지원됨.
HTMLElement
를 사용합니다.
kbd
요소는 사용자 입력을 나타냅니다(일반적으로 키보드 입력이지만 음성 명령과 같은 다른 입력을 나타내는 데에도 사용할 수 있습니다).
kbd
요소가 samp
요소 안에 중첩되어 있는 경우, 시스템에서 반향된
입력을 나타냅니다.
kbd
요소가 samp
요소를 포함할 때, 이는 시스템 출력에 기반한
입력을 나타냅니다. 예를 들어 메뉴 항목을 호출할 때 사용됩니다.
kbd
요소가 다른 kbd
요소 안에 중첩되어 있는 경우, 이는 입력 메커니즘에
적합한 실제 키 또는 기타 단일 입력 단위를 나타냅니다.
여기서 kbd
요소는 눌러야 할 키를 나타내는 데
사용됩니다:
< p > To make George eat an apple, press < kbd >< kbd > Shift</ kbd > + < kbd > F3</ kbd ></ kbd ></ p >
두 번째 예제에서는 특정 메뉴 항목을 선택하라고 지시합니다. 외부의 kbd
요소는 입력의 블록을 나타내며, 내부의 kbd
요소는 입력의 각 단계를 나타내고, 그 안에 있는
samp
요소는 이 단계들이 시스템에 의해 표시된
내용을 기반으로 한 것임을 나타냅니다. 이 경우 메뉴 레이블을 나타냅니다:
< p > To make George eat an apple, select
< kbd >< kbd >< samp > File</ samp ></ kbd > |< kbd >< samp > Eat Apple...</ samp ></ kbd ></ kbd >
</ p >
이러한 정확성은 필수적이지 않으며, 다음과 같이 작성해도 무방합니다:
< p > To make George eat an apple, select < kbd > File | Eat Apple...</ kbd ></ p >
sub
및 sup
요소
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
sub
요소: 저자를 위한 정보; 구현자를 위한 정보.
sup
요소: 저자를 위한 정보; 구현자를 위한 정보.
HTMLElement
를 사용합니다.
sup
요소는 윗첨자를 나타내고,
sub
요소는 하첨자를 나타냅니다.
이 요소들은 특정 의미를 가진 타이포그래피적 관례를 마크업하기 위해서만 사용해야 하며, 단순한 타이포그래피적 표현을 위해 사용해서는 안 됩니다. 예를 들어, sub
및
sup
요소를 LaTeX 문서 준비 시스템의 이름에 사용하는 것은 부적절합니다. 일반적으로, 이러한 요소들은 이 요소들이 없으면 콘텐츠의 의미가 변하는 경우에만 사용해야 합니다.
특정 언어에서는 윗첨자가 일부 약어의 타이포그래피적 관례의 일부입니다.
< p > 그들의 이름은
< span lang = "fr" >< abbr > M</ sup > lle</ sup ></ abbr > Gwendoline</ span > 그리고
< span lang = "fr" >< abbr > M</ sup > me</ sup ></ abbr > Denise</ span > 입니다.</ p >
sub
요소는 하첨자가 있는 변수를 나타내기 위해 var
요소 내에서 사용될 수 있습니다.
여기서, sub
요소는 변수의 집합에서 변수를 식별하는 하첨자를 나타내는 데 사용됩니다:
< p > i번째 점의 좌표는
(< var > x</ var > < sub >< var > i</ var ></ sub ></ var > , < var > y</ var > < sub >< var > i</ var ></ sub ></ var > ).
예를 들어, 10번째 점의 좌표는
(< var > x</ sub > 10</ sub ></ var > , < var > y</ sub > 10</ sub ></ var > )입니다.</ p >
수학 표현은 종종 하첨자와 윗첨자를 사용합니다. 저자들은 수학을 마크업할 때 MathML을 사용하는 것이 권장되지만, 세부적인 수학적 마크업이 필요하지 않은 경우 sub
및
sup
을
사용할 수 있습니다. [MATHML]
< var > E</ var > =< var > m</ var >< var > c</ var >< sup > 2</ sup >
f(< var > x</ var > , < var > n</ var > ) = log< sub > 4</ sub >< var > x</ var ></ sup >< var > n</ var ></ sup >
i
요소모든 최신 엔진에서 지원됨.
HTMLElement
사용.
i
요소는 일반적인 산문에서 벗어난 텍스트 범위를 표현합니다. 이는 대체 목소리 또는 분위기의 텍스트 범위를 나타내거나, 분류학적 명칭, 기술 용어, 다른
언어의 관용구, 음역, 생각 또는 서양 텍스트에서의 선박 이름과 같은 다른 품질의 텍스트를 나타낼 수 있습니다.
주 텍스트와 다른 언어로 된 용어는 lang
속성(또는 XML의 경우 lang
속성, XML 네임스페이스)으로 주석을 달아야 합니다.
아래의 예시는 i
요소의 사용 예를 보여줍니다:
< p > The < i class = "taxonomy" > Felis silvestris catus</ i > is cute.</ p >
< p > The term < i > prose content</ i > is defined above.</ p >
< p > There is a certain < i lang = "fr" > je ne sais quoi</ i > in the air.</ p >
다음 예에서는 i
요소를 사용하여 꿈 시퀀스를 표시합니다.
< p > Raymond tried to sleep.</ p >
< p >< i > The ship sailed away on Thursday</ i > , he
dreamt. < i > The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</ i ></ p >
< p >< i > Finally one night he picked up the courage to speak with
her—</ i ></ p >
< p > Raymond woke with a start as the fire alarm rang out.</ p >
저자는 class
속성을 i
요소에 사용하여 요소가 사용된 이유를 식별할 수 있습니다. 이를 통해
나중에 특정 사용 스타일(예: 꿈 시퀀스와 분류학적 용어의 차이)을 변경하려 할 때, 저자는 문서 전체(또는 관련 문서 일련)의 각 사용 예를 주석 처리할 필요가 없습니다.
저자는 i
요소보다 더 적합한 요소가 있을 수 있는지 고려해야 합니다.
예를 들어 강조 표시를 위해 em
요소나 용어의 정의 인스턴스를
마크업하기 위해 dfn
요소를 사용할 수 있습니다.
스타일 시트는 i
요소를 다른 요소와 마찬가지로
재스타일링할 수 있습니다. 따라서 i
요소의 콘텐츠가 반드시 기울임꼴로
표시되는 것은 아닙니다.
b
요소모든 현재 엔진에서 지원됩니다.
HTMLElement
을 사용합니다.
b
요소는 추가적인 중요성을 전달하지 않으면서 기능적인 목적을 위해 주의가
필요하다는 텍스트 범위를 나타냅니다. 예를 들어 문서 요약의 주요 단어, 리뷰의 제품 이름, 상호작용하는 텍스트 기반 소프트웨어의 실행 가능한 단어 또는 기사 리드 등이 해당될 수 있습니다.
다음 예제는 중요한 단어를 표시하기 위해 b
요소를 사용하는
방법을 보여줍니다.
< p > The < b > frobonitor</ b > and < b > barbinator</ b > components are fried.</ p >
다음 예제에서는 텍스트 어드벤처에서 b
요소를 사용하여 객체가
특별하다는 것을 강조하는 방법을 보여줍니다.
< p > You enter a small room. Your < b > sword</ b > glows brighter. A < b > rat</ b > scurries past the corner wall.</ p >
b
요소가 적절하게 사용될 수 있는 또 다른 경우는 리드 문장
또는 단락을 표시할 때입니다. 다음 예제는 토끼를 어미로
받아들인 새끼 고양이들에 대한 BBC 기사가 어떻게 표시될 수 있는지를 보여줍니다:
< article >
< h2 > Kittens 'adopted' by pet rabbit</ h2 >
< p >< b class = "lede" > Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</ b ></ p >
< p > Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</ p >
[...]
i
요소와 마찬가지로, 저자는 class
속성을 b
요소에 사용하여 요소의 사용 목적을 식별할 수 있습니다. 이를 통해
특정 사용 스타일을 나중에 변경해야 할 경우, 모든 사용 예를 일일이 주석 달지 않아도 됩니다.
b
요소는 다른 요소가 더 적절하지 않은 경우에만 최후의 수단으로
사용해야 합니다. 특히, 제목은 h1
에서
h6
요소를 사용해야 하고, 강조된 부분은 em
요소를 사용하여 강조하고,
중요성은 strong
요소로 표시하며, 표시되거나 강조된
텍스트는 mark
요소를 사용해야 합니다.
다음은 잘못된 사용 사례입니다:
< p >< b > WARNING!</ b > Do not frob the barbinator!</ p >
스타일 시트를 사용하여 b
요소를 다른 요소처럼
스타일을 변경할 수 있습니다. 따라서 b
요소의 내용이 반드시 굵게
표시되는 것은 아닙니다.
u
요소모든 현재 엔진에서 지원됩니다.
HTMLElement
을 사용합니다.
u
요소는 비텍스트 주석이 명시적으로 렌더링되도록 표시되어야 하는 텍스트
범위를 나타냅니다. 예를 들어 중국어 텍스트에서 고유명사로 표시되거나, 철자가 잘못된 단어로 표시됩니다.
대부분의 경우, 다른 요소가 더 적절할 수 있습니다: 강조 표시를 위해 em
요소를 사용해야 하며, 키워드나 구를 표시하기 위해서는 맥락에 따라
b
요소 또는 mark
요소를 사용해야 합니다. 책 제목을 표시하기 위해서는
cite
요소를 사용해야 하며, 텍스트에 명시적인 주석을
표시하기 위해서는 ruby
요소를 사용해야 합니다. 기술 용어,
분류학적 명칭, 음역, 생각, 또는 서양 텍스트에서 배 이름을 표시하기 위해서는 i
요소를 사용해야 합니다.
시각적 프레젠테이션에서 u
요소의 기본 렌더링은
하이퍼링크(밑줄)의 기존 렌더링과 충돌합니다. 저자는 u
요소가
하이퍼링크로 오해될 수 있는 경우 사용을 피하는 것이 좋습니다.
이 예제에서는 u
요소를 사용하여 철자가 잘못된 단어를
표시합니다:
< p > The < u > see</ u > is full of fish.</ p >
mark
요소모든 현재 엔진에서 지원됩니다.
HTMLElement
을 사용합니다.
mark
요소는 하나의 문서에서 참조 목적으로 표시되거나
강조된 텍스트 구간을 나타냅니다. 강조된 구절은 포함된 문맥에서의 관련성 때문에 강조됩니다. 인용문이나 본문의 다른 블록에서 사용될 때, 이는 원래는 강조되지 않았으나 독자의 주의를 끌기 위해 추가된
부분을 나타냅니다. 이는 본문이 처음 작성되었을 때 원저자가 중요하게 여기지 않았을 수도 있는 부분일 수 있으며, 지금은 예상치 못한 관심의 대상이 된 부분일 수 있습니다. 문서의 주요 본문에서 사용될
때, 이는 사용자의 현재 활동과 관련성이 높다고 판단되어 강조된 부분을 나타냅니다.
이 예제는 mark
요소를 사용하여 인용문의 특정
부분에 주의를 환기하는 방법을 보여줍니다:
< p lang = "en-US" > Consider the following quote:</ p >
< blockquote lang = "en-GB" >
< p > Look around and you will find, no-one's really
< mark > colour</ mark > blind.</ p >
</ blockquote >
< p lang = "en-US" > As we can tell from the < em > spelling</ em > of the word,
the person writing this quote is clearly not American.</ p >
(만약 단어의 철자가 잘못된 것을 표시하는 것이 목적이라면, u
요소가 클래스와 함께 사용되어야 할 것입니다.)
mark
요소의 또 다른 예는 문서의 일부를 검색
문자열과 일치하는 부분으로 강조하는 것입니다. 예를 들어 사용자가 "kitten"이라는 단어를 검색하고 서버가 그에 맞춰 문서를 반환하면, 서버는 문서의 일부 단락을 다음과 같이 수정할 수
있습니다:
< p > I also have some < mark > kitten</ mark > s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a < mark > kitten</ mark > .</ p >
다음 코드 조각에서는 텍스트 단락이 코드 조각의 특정 부분을 참조합니다.
< p > The highlighted part below is where the error lies:</ p >
< pre >< code > var i: Integer;
begin
i := < mark > 1.1</ mark > ;
end.</ code ></ pre >
이는 구문 강조와는 별개의 문제로, 구문 강조를 위해서는 span
요소가 더 적합합니다. 두 가지를 결합하면
다음과 같습니다:
< p > The highlighted part below is where the error lies:</ p >
< pre >< code >< span class = keyword > var</ span > < span class = ident > i</ span > : < span class = type > Integer</ span > ;
< span class = keyword > begin</ span >
< span class = ident > i</ span > := < span class = literal >< mark > 1.1</ mark ></ span > ;
< span class = keyword > end</ span > .</ code ></ pre >
이 예제는 원래 강조되지 않았던 인용문 텍스트의 일부를 강조하기 위해 mark
를 사용하는 또 다른 예를 보여줍니다. 이
예에서, 일반적인 타이포그래피 규칙에 따라 저자는 인용문에서 mark
요소를 명시적으로 스타일링하여 이탤릭체로
렌더링하도록 설정했습니다.
< style >
blockquote mark , q mark {
font : inherit ; font-style : italic ;
text-decoration : none ;
background : transparent ; color : inherit ;
}
. bubble em {
font : inherit ; font-size : larger ;
text-decoration : underline ;
}
</ style >
< article >
< h1 > She knew</ h1 >
< p > Did you notice the subtle joke in the joke on panel 4?</ p >
< blockquote >
< p class = "bubble" > I didn't < em > want</ em > to believe. < mark > Of course
on some level I realized it was a known-plaintext attack.</ mark > But I
couldn't admit it until I saw for myself.</ p >
</ blockquote >
< p > (강조는 저자의 것입니다.) 저는 이 부분이 정말 좋았습니다. 매우 학문적이면서도 모든 것을 깔끔하게 설명해 줍니다.</ p >
</ article >
이 예에서 em
요소는 인용된 원본 텍스트의 일부로,
mark
요소는 주석을 위해 강조된 부분을
나타내는 것입니다.
다음 예제는 텍스트의 중요성을 나타내는 것 (strong
요소)과 텍스트의 관련성을 나타내는
것 (mark
요소)의 차이를 보여줍니다. 이
예제는 교과서에서 발췌한 것으로, 시험과 관련된 부분이 강조되어 있습니다. 안전 경고는 중요할 수 있지만 시험과 관련이 없기 때문에 강조되지 않았습니다.
< h3 > 웜홀 물리학 소개</ h3 >
< p >< mark > 웜홀은 일반적인 조건에서 최대 39분 동안 열려 있을 수 있습니다.</ mark > 시간 연장을 위해서는 하나 또는 두 개의 게이트에 강력한 에너지원을 연결하거나, 블랙홀과 같은 큰 중력장을 활용할 수 있습니다.</ p >
< p >< mark > 웜홀을 통해 모멘텀이 보존됩니다. 전자기 방사선은 웜홀을 통해 양방향으로 이동할 수 있지만, 물질은 이동할 수 없습니다.</ mark ></ p >
< p > 웜홀이 생성될 때, 일반적으로 소용돌이가 형성됩니다.
< strong > 경고: 웜홀이 열릴 때 발생하는 소용돌이는 경로에 있는 모든 것을 파괴합니다.</ strong > 소용돌이는 충분히 고급화된 다이얼링 기술을 사용하면 피할 수 있습니다.</ p >
< p >< mark > 게이트에 장애물이 있으면 웜홀 연결을 방해할 수 있습니다.</ mark ></ p >
bdi
요소모든 현재 엔진에서 지원됩니다.
dir
전역 속성은 특별한 의미를 가집니다.
HTMLElement
를 사용합니다.
bdi
요소는 양방향 텍스트 서식을 위한 목적으로 주변과 격리된 텍스트 범위를 나타냅니다. [BIDI]
이 요소에서 dir
전역 속성은 auto
로 기본 설정되며, 다른 요소처럼 부모 요소로부터 상속되지
않습니다.
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항을 가지고 있습니다.
이 요소는 방향성이 알려지지 않은 사용자 생성 콘텐츠를 삽입할 때 특히 유용합니다.
이 예제에서는 사용자 이름과 함께 해당 사용자가 제출한 게시물 수를 표시합니다. bdi
요소를 사용하지 않으면 아랍어 사용자의 사용자
이름이 텍스트를 혼란스럽게 만들 것입니다 (양방향 알고리즘은 콜론과 숫자 "3"을 "User"라는 단어 옆에 배치하는 대신 "posts"라는 단어 옆에 배치할 것입니다).
< ul >
< li > User < bdi > jcranmer</ bdi > : 12 posts.
< li > User < bdi > hober</ bdi > : 5 posts.
< li > User < bdi > إيان</ bdi > : 3 posts.
</ ul >
bdi
요소를 사용할 때,
사용자 이름이 예상대로 동작합니다.bdi
요소를 b
요소로 대체할 경우, 사용자 이름이 양방향 알고리즘을
혼란스럽게 만들어 세 번째 목록 항목이 "User 3 :"라고 표시되고, 그 다음에 아랍어 이름(오른쪽에서 왼쪽)이 오며, 그 뒤에 "posts"와 마침표가 옵니다.
bdo
요소모든 현재 엔진에서 지원됩니다.
dir
전역 속성은 특별한 의미를 가집니다.
HTMLElement
를 사용합니다.
bdo
요소는 자식 요소에 대한 명시적 텍스트 방향성 서식 지정을
나타냅니다. 이 요소는 작성자가 명시적으로 방향을 지정하여 Unicode 양방향 알고리즘을 무시할 수 있게 해줍니다. [BIDI]
작성자는 이 요소에서 dir
속성을 지정해야 하며, ltr
값을 사용하여 왼쪽에서 오른쪽으로의 방향을 지정하거나 rtl
값을 사용하여 오른쪽에서 왼쪽으로의 방향을 지정할 수 있습니다.
auto
값은 지정할 수 없습니다.
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항을 가지고 있습니다.
span
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface HTMLSpanElement : HTMLElement {
[HTMLConstructor ] constructor ();
};
span
요소 자체는 아무 의미가 없지만, 전역 속성과 함께 사용하면 유용할 수 있습니다. 예를 들어, class
, lang
, 또는 dir
속성과 함께 사용될 수 있습니다. 이는 자식 요소를 나타냅니다.
이 예에서는 span
요소와 class
속성을 사용하여 키워드와 식별자를 색상으로 구분할 수 있도록 코드 조각을
마크업합니다:
< pre >< code class = "lang-c" >< span class = "keyword" > for</ span > (< span class = "ident" > j</ span > = 0; < span class = "ident" > j</ span > < 256; < span class = "ident" > j</ span > ++) {
< span class = "ident" > i_t3</ span > = (< span class = "ident" > i_t3</ span > & 0x1ffff) | (< span class = "ident" > j</ span > << 17);
< span class = "ident" > i_t6</ span > = (((((((< span class = "ident" > i_t3</ span > >> 3) ^ < span class = "ident" > i_t3</ span > ) >> 1) ^ < span class = "ident" > i_t3</ span > ) >> 8) ^ < span class = "ident" > i_t3</ span > ) >> 5) & 0xff;
< span class = "keyword" > if</ span > (< span class = "ident" > i_t6</ span > == < span class = "ident" > i_t1</ span > )
< span class = "keyword" > break</ span > ;
}</ code ></ pre >
br
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface HTMLBRElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 구식 멤버도 있습니다.
};
줄바꿈은 시각적 매체에서 보통 다음 텍스트를 새로운 줄로 이동시켜 표시되지만, 스타일 시트나 사용자 에이전트는 줄바꿈을 다른 방식으로 렌더링하도록 결정할 수 있습니다. 예를 들어, 녹색 점으로 표시하거나 추가 간격을 줄 수도 있습니다.
br
요소는 시구나 주소 등에서 실제로 콘텐츠의 일부인 줄바꿈에만
사용해야 합니다.
다음 예는 br
요소의 올바른 사용 예입니다:
< p > P. Sherman< br >
42 Wallaby Way< br >
Sydney</ p >
br
요소는 단락 내에서 주제별 그룹을 구분하는 데 사용해서는 안
됩니다.
다음 예는 br
요소를 잘못 사용한 비준수 사례입니다:
< p >< a ...> 34 comments.</ a >< br >
< a ...> Add a comment.</ a ></ p >
< p >< label > Name: < input name = "name" ></ label >< br >
< label > Address: < input name = "address" ></ label ></ p >
다음은 위의 예에 대한 대안으로 올바른 사용법입니다:
< p >< a ...> 34 comments.</ a ></ p >
< p >< a ...> Add a comment.</ a ></ p >
< p >< label > Name: < input name = "name" ></ label ></ p >
< p >< label > Address: < input name = "address" ></ label ></ p >
단락이 br
요소 하나만으로 구성된 경우, 빈 줄(예:
템플릿으로)이 됩니다. 이러한 빈 줄은 프레젠테이션 목적으로 사용해서는 안 됩니다.
모든 콘텐츠는 br
요소 내에서 주변 텍스트의 일부로 간주되어서는
안 됩니다.
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항이 있습니다.
wbr
요소모든 현재 엔진에서 지원됩니다.
HTMLElement
을 사용합니다.
다음 예에서는, 효과를 위해 한 사람이 말한 내용을 한 단어로 작성한 인용구를 보여줍니다. 그러나 텍스트가 읽기 쉬운 방식으로 줄을 나눌 수 있도록 하기 위해 인용구의 개별 단어는 wbr
요소를 사용하여 구분되었습니다.
< p > So then she pointed at the tiger and screamed
"there< wbr > is< wbr > no< wbr > way< wbr > you< wbr > are< wbr > ever< wbr > going< wbr > to< wbr > catch< wbr > me"!</ p >
wbr
요소 내의 모든 콘텐츠는 주변 텍스트의 일부로
간주되어서는 안 됩니다.
var wbr = document. createElement( "wbr" );
wbr. textContent = "This is wrong" ;
document. body. appendChild( wbr);
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항이 있습니다.
이 섹션은 비규범적입니다.
요소 | 목적 | 예시 |
---|---|---|
a
| 하이퍼링크 |
|
em
| 강조 |
|
strong
| 중요성 |
|
small
| 부가 설명 |
|
s
| 부정확한 텍스트 |
|
cite
| 작품의 제목 |
|
q
| 인용구 |
|
dfn
| 정의 인스턴스 |
|
abbr
| 약어 |
|
ruby , rt , rp
| 루비 주석 |
|
data
| 기계 판독 가능한 동등성 |
|
time
| 날짜 또는 시간 관련 데이터의 기계 판독 가능한 동등성 |
|
code
| 컴퓨터 코드 |
|
var
| 변수 |
|
samp
| 컴퓨터 출력 |
|
kbd
| 사용자 입력 |
|
sub
| 아래 첨자 |
|
sup
| 위 첨자 |
|
i
| 대체 음성 |
|
b
| 키워드 |
|
u
| 주석 |
|
mark
| 하이라이트 |
|
bdi
| 텍스트 방향성 격리 |
|
bdo
| 텍스트 방향성 포맷 |
|
span
| 기타 |
|
br
| 줄바꿈 |
|
wbr
| 줄바꿈 기회 |
|
링크는 a
, area
, form
및 link
요소에 의해 생성된 개념적 구조로, 하나는 현재
document
이고 다른 하나는 리소스 간의 연결을 표현합니다. HTML에는 세 가지 종류의 링크가 있습니다:
이들은 현재 문서를 보완하기 위해 사용될 리소스에 대한 링크로, 일반적으로 사용자 에이전트에 의해 자동으로 처리됩니다. 모든 외부 리소스 링크는 리소스를 가져오는 방법을 설명하는 링크된 리소스를 가져와 처리하는 알고리즘을 가지고 있습니다.
이들은 일반적으로 사용자에게 노출되어 사용자가 네비게이트할 수 있는 리소스에 대한 링크입니다. 예를 들어 브라우저에서 방문하거나 다운로드할 수 있습니다.
이들은 현재 문서 내의 리소스에 대한 링크로, 해당 리소스에 특별한 의미나 동작을 부여하기 위해 사용됩니다.
link
요소가 href
속성과 rel
속성을 가지고 있는 경우, 링크는 링크 유형 섹션에서 정의된 대로 rel
속성의 키워드에 대해 생성되어야 합니다.
유사하게, a
및 area
요소가 href
속성과 rel
속성을 가지고 있는 경우, 링크 유형 섹션에서 정의된 대로 rel
속성의 키워드에 대해 링크가 생성되어야 합니다.
그러나 link
요소와 달리, a
및 area
요소가 href
속성을 가지고 있지만 rel
속성이 없거나, rel
속성이 하이퍼링크를 지정하는 키워드를 포함하지
않는 경우에도 하이퍼링크를 생성해야 합니다. 이 암시된 하이퍼링크는 그 이상의 특별한 의미가 없으며(즉, 링크 유형이 없음) 해당 요소의 href
속성에 의해 주어진 리소스와 요소의 노드 문서를 연결합니다.
유사하게, form
요소가 rel
속성을 가지고 있는 경우, 링크
유형 섹션에서 정의된 대로 rel
속성의 키워드에 대해
링크가 생성되어야 합니다. form
요소에 rel
속성이 없거나, rel
속성이 하이퍼링크를 지정하는 키워드를 포함하지 않는 경우에도 하이퍼링크를 생성해야 합니다.
하이퍼링크에는 해당 하이퍼링크의 처리 의미를 수정하는 하나 이상의 하이퍼링크 주석이 있을 수 있습니다.
a
및 area
요소가 생성하는
링크href
속성이 a
및 area
요소에 있는
경우, 이 속성의 값은 공백으로 둘러싸일 수 있는 유효한
URL이어야 합니다.
href
속성이
a
및 area
요소에 없어도
됩니다. 이러한 요소에 href
속성이 없으면 하이퍼링크가 생성되지 않습니다.
target
속성이 있는 경우, 이 속성은 유효한 내비게이션 대상 이름 또는 키워드여야
합니다. 이 속성은 사용될 내비게이션 가능한 객체의 이름을 지정합니다.
사용자 에이전트는 하이퍼링크를
따를 때 이 이름을 사용합니다.
download
속성이 있는 경우, 저자는 이 하이퍼링크가 리소스를 다운로드하는 데 사용되기를 원함을 나타냅니다. 이 속성은 값을
가질 수 있으며, 값이 있는 경우, 이는 저자가 로컬 파일 시스템에서 리소스를 레이블링하는 데 사용할 것을 권장하는 기본 파일 이름을 지정합니다. 허용되는 값에 제한은 없지만, 대부분의 파일 시스템은
파일 이름에 사용할 수 있는 구두점에 제한이 있으므로 저자는 주의해야 하며, 사용자 에이전트는 파일 이름을 적절히 조정할 가능성이 있습니다.
모든 최신 엔진에서 지원됩니다.
ping
속성이 있는 경우, 사용자가 하이퍼링크를 따를 때 알림을 받고자 하는 리소스의 URL을 제공합니다. 이 값은 공백으로 구분된 토큰 집합이어야 하며, 각 토큰은 유효한 비어 있지 않은
URL이어야 하며, 이 URL의 스킴은 HTTP(S) 스킴이어야 합니다. 이 값은 사용자 에이전트에 의해 하이퍼링크 감사에 사용됩니다.
rel
속성이 a
및 area
요소에 있는
경우, 이 속성은 요소가 생성하는 링크의 종류를 제어합니다. 이 속성의 값은 순서가 없는 고유한 공백으로 구분된
토큰 집합이어야 합니다. 허용된 키워드와 그 의미는 아래에 정의되어 있습니다.
rel
의 지원되는 토큰은 HTML 링크 유형에서 정의된 키워드로, a
및 area
요소에
허용되며, 처리 모델에 영향을 미치고 사용자 에이전트에서 지원됩니다. 가능한 지원되는 토큰은 noreferrer
,
noopener
,
그리고 opener
입니다.
rel
의
지원되는 토큰은 사용자 에이전트가 처리 모델을 구현하는 이 목록의 토큰만 포함해야 합니다.
rel
속성은
기본값이 없습니다. 속성이 생략되거나 속성의 값이 사용자 에이전트에서 인식되지 않으면 문서와 대상 리소스 간에는 하이퍼링크 외에 특별한 관계가 없습니다.
hreflang
속성이 a
요소에 있는 경우, 이 속성은
연결된 리소스의 언어를 지정합니다. 이 속성은 순수하게 권고 사항입니다. 값은 유효한 BCP 47 언어 태그여야 합니다. 사용자 에이전트는 이 속성을 권위적으로 간주해서는 안 되며, 리소스를 가져온
후에는 리소스의 언어를 결정하기 위해 링크된 리소스의 메타데이터가 아니라 리소스에 연결된 언어 정보를 사용해야 합니다.
type
속성이 있는 경우, 이 속성은 연결된 리소스의 MIME 유형을 제공합니다. 이 속성은 순수하게
권고 사항입니다. 값은 유효한 MIME 유형
문자열이어야 합니다. 사용자 에이전트는 type
속성을
권위적으로 간주해서는 안 되며, 리소스를 가져온 후에는 링크된 리소스의 메타데이터를 사용하여 유형을 결정해서는 안 됩니다.
referrerpolicy
속성은 리퍼러 정책 속성입니다. 이 속성의 목적은 리퍼러
정책을 설정하는 것입니다.
a
또는 area
요소의 활성화
동작이 호출되면 사용자 에이전트는 사용자가 하이퍼링크를 탐색하는 데 사용할지, 아니면 지정된 리소스를 다운로드할지에 대한 선호를 표시하도록 허용할 수
있습니다.
사용자 환경 설정이 없는 경우, 요소에 download
속성이 없으면 기본값은 탐색이어야 하며, 해당 속성이 있으면 지정된 리소스를 다운로드하는 것이어야 합니다.
이벤트 event가 주어진 element에 대해 a
또는 area
요소의 활성화
동작은 다음과 같습니다:
element에 href
속성이 없으면 반환합니다.
hyperlinkSuffix를 null로 설정합니다.
element가 a
요소이고
event의 대상이 img
이며
ismap
속성이 지정된 경우:
x와 y를 0으로 설정합니다.
event의 isTrusted
속성이 true로 초기화된 경우, x를 클릭 위치에서 이미지의 왼쪽 가장자리까지의 거리( CSS 픽셀 단위)로 설정하고, y를 클릭 위치에서 이미지의 위쪽 가장자리까지의 거리( CSS 픽셀 단위)로
설정합니다.
x가 음수인 경우, x를 0으로 설정합니다.
y가 음수인 경우, y를 0으로 설정합니다.
hyperlinkSuffix를 U+003F(?)와 x의 값을 ASCII 숫자를 사용하여 10진수로 표현한 값으로, U+002C(,)와 y의 값을 ASCII 숫자를 사용하여 10진수로 표현한 값으로 설정합니다.
userInvolvement를 event의 사용자 내비게이션 개입으로 설정합니다.
사용자가 하이퍼링크 다운로드를 선호한다고 표시한 경우, userInvolvement를 "브라우저 UI
"로
설정합니다.
즉, 사용자가 다운로드를 선호한다고 명시적으로 표시한 경우, 이는 더 이상 단순히 "활성화
"로 간주되지
않습니다.
element에 download
속성이 있거나, 사용자가 하이퍼링크 다운로드를 선호한다고 표시한 경우, element에 의해 생성된 하이퍼링크를 hyperlinkSuffix를 hyperlinkSuffix로 설정하고, userInvolvement를 userInvolvement로 설정하여 하이퍼링크를 다운로드합니다.
그렇지 않은 경우, element에 의해 생성된 하이퍼링크를 hyperlinkSuffix를 hyperlinkSuffix로 설정하고, userInvolvement를 userInvolvement로 설정하여 하이퍼링크를 따릅니다.
a
및 area
요소를 위한 APIinterface mixin HTMLHyperlinkElementUtils {
[CEReactions ] stringifier attribute USVString href ;
readonly attribute USVString origin ;
[CEReactions ] attribute USVString protocol ;
[CEReactions ] attribute USVString username ;
[CEReactions ] attribute USVString password ;
[CEReactions ] attribute USVString host ;
[CEReactions ] attribute USVString hostname ;
[CEReactions ] attribute USVString port ;
[CEReactions ] attribute USVString pathname ;
[CEReactions ] attribute USVString search ;
[CEReactions ] attribute USVString hash ;
};
hyperlink.toString()
hyperlink.href
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL을 반환합니다.
설정할 수 있으며, 이를 통해 URL을 변경할 수 있습니다.
hyperlink.origin
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 출처를 반환합니다.
hyperlink.protocol
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 스킴을 반환합니다.
URL 스킴을 변경하려면 설정할 수 있습니다.
hyperlink.username
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 사용자 이름을 반환합니다.
URL의 사용자 이름을 변경하려면 설정할 수 있습니다.
hyperlink.password
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 비밀번호를 반환합니다.
URL의 비밀번호를 변경하려면 설정할 수 있습니다.
hyperlink.host
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL의 호스트와 포트를 반환합니다(스킴의 기본 포트와 다른 경우).
URL의 호스트와 포트를 변경하려면 설정할 수 있습니다.
hyperlink.hostname
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL의 호스트를 반환합니다.
URL의 호스트를 변경하려면 설정할 수 있습니다.
hyperlink.port
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL의 포트를 반환합니다.
URL의 포트를 변경하려면 설정할 수 있습니다.
hyperlink.pathname
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 경로를 반환합니다.
URL 경로를 변경하려면 설정할 수 있습니다.
hyperlink.search
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL 매개변수 문자열을 반환합니다(비어 있지 않으면 앞에 "?
" 포함).
URL의 매개변수 문자열을 변경하려면 설정할 수 있습니다(앞의 "?
"는 무시됨).
hyperlink.hash
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
하이퍼링크의 URL의 fragment를 반환합니다(비어 있지 않으면 앞에 "#
" 포함).
URL의 fragment를 변경하려면 설정할 수 있습니다(앞의 "#
"는 무시됨).
HTMLHyperlinkElementUtils
믹스를 구현하는 요소에는 관련된 url(null 또는 URL)이 있습니다. 이 값은 처음에 null입니다.
HTMLHyperlinkElementUtils
믹스를 구현하는 요소에는 관련된 URL 설정 알고리즘이 있으며, 다음 단계가 실행됩니다:
이 요소의 url을 null로 설정합니다.
이 요소의 href
콘텐츠
속성이 없으면, 반환합니다.
이 요소의 href
콘텐츠 속성 값을 기준으로 URL
인코딩 및 파싱의 결과로 url을 설정합니다.
url이 실패가 아니라면, 이 요소의 url을 url로 설정합니다.
HTMLHyperlinkElementUtils
믹스를 구현하는 요소가 생성될 때 및 이 요소들의 href
콘텐츠 속성이
설정, 변경 또는 제거될 때마다 사용자 에이전트는 URL을 설정해야 합니다.
이는 blob:
URL에 대해서만 관찰할 수 있습니다. URL 파싱은 Blob URL 저장소 조회를 포함하기 때문입니다.
HTMLHyperlinkElementUtils
믹스를 구현하는 요소에는 관련된 URL 재초기화 알고리즘이 있으며, 다음 단계가 실행됩니다:
href
업데이트하기 위해, 요소의 href
콘텐츠 속성 값을
요소의 url에 따라 직렬화된 값으로
설정합니다.
href
가져오기 단계는 다음과 같습니다:
href
설정 단계는 다음과
같습니다:
origin
가져오기 단계는 다음과 같습니다:
URL 재초기화합니다.
원본의 ASCII 직렬화를 반환합니다.
protocol
가져오기 단계는 다음과 같습니다:
protocol
설정 단계는 다음과 같습니다:
URL 파서는 연속된 콜론을 무시하기 때문에, "https:
" 또는 "https::::
" 값을 제공하는 것은
"https
" 값을 제공하는 것과 동일합니다.
href 업데이트를 수행합니다.
username
가져오기 단계는 다음과 같습니다:
username
설정 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이거나 url이 username/password/port를 가질 수 없으면, 반환합니다.
주어진 값에 따라 url의 username을 설정합니다.
href 업데이트를 수행합니다.
password
가져오기 단계는 다음과 같습니다:
password
설정 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이거나 url이 username/password/port를 가질 수 없으면, 반환합니다.
주어진 값에 따라 url의 password를 설정합니다.
href 업데이트를 수행합니다.
host
가져오기 단계는 다음과 같습니다:
host
설정 단계는 다음과
같습니다:
URL 재초기화합니다.
url이 null이거나 url에 불투명 경로가 있으면, 반환합니다.
주어진 값을 기준으로 기본 URL 파싱을 수행하고, url을 url로 설정하며, 호스트 상태를 상태 재정의로 설정합니다.
href 업데이트를 수행합니다.
hostname
가져오기 단계는 다음과 같습니다:
hostname
설정 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이거나 url에 불투명 경로가 있으면, 반환합니다.
주어진 값을 기준으로 기본 URL 파싱을 수행하고, url을 url로 설정하며, 호스트 이름 상태를 상태 재정의로 설정합니다.
href 업데이트를 수행합니다.
port
가져오기 단계는 다음과 같습니다:
port
설정 단계는 다음과
같습니다:
URL 재초기화합니다.
url이 null이거나 url이 username/password/port를 가질 수 없으면, 반환합니다.
주어진 값이 빈 문자열이면, url의 port를 null로 설정합니다.
그렇지 않으면, 주어진 값을 기준으로 기본 URL 파싱을 수행하고, url을 url로 설정하며, 포트 상태를 상태 재정의로 설정합니다.
href 업데이트를 수행합니다.
pathname
가져오기 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이면, 빈 문자열을 반환합니다.
URL 경로 직렬화 결과를 반환합니다.
pathname
설정 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이거나 url에 불투명 경로가 있으면, 반환합니다.
url의 경로를 빈 목록으로 설정합니다.
주어진 값을 기준으로 기본 URL 파싱을 수행하고, url을 url로 설정하며, 경로 시작 상태를 상태 재정의로 설정합니다.
href 업데이트를 수행합니다.
search
가져오기 단계는 다음과 같습니다:
search
설정
단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이면, 이 단계를 종료합니다.
주어진 값이 빈 문자열이면, url의 쿼리를 null로 설정합니다.
그렇지 않으면:
href 업데이트를 수행합니다.
hash
가져오기 단계는 다음과 같습니다:
URL 재초기화합니다.
url이 null이거나 url의 fragment가 null이거나 빈 문자열이면, 빈 문자열을 반환합니다.
"#
" 뒤에 url의 fragment를 반환합니다.
hash
설정 단계는 다음과
같습니다:
URL 재초기화합니다.
url이 null이면, 반환합니다.
주어진 값이 빈 문자열이면, url의 fragment를 null로 설정합니다.
그렇지 않으면:
href 업데이트를 수행합니다.
element 요소가 다음 중 하나라도 해당하면 이동할 수 없습니다:
element의 노드 문서가 완전히 활성화된 상태가 아니거나;
이것은 또한 form
요소의 폼 제출에서도 사용됩니다. a
요소에 대한 예외는 웹 콘텐츠와의 호환성을 위해
존재합니다.
요소의 noopener 얻기 방법은 다음과 같습니다. a
, area
, 또는 form
요소 element와
문자열 target이 주어진 경우:
element의 링크 유형에 noopener
또는 noreferrer
키워드가 포함되어 있으면, true를 반환합니다.
element의 링크 유형에 opener
키워드가 포함되어 있지
않으며 target이 "_blank
"와 ASCII 대소문자 구분 없이 일치하는 경우, true를 반환합니다.
false를 반환합니다.
하이퍼링크를 따르기 위해 subject 요소가 주어졌을 때, 선택적으로 hyperlinkSuffix (기본값 null)와 userInvolvement (기본값 "none
")가 주어질 수 있습니다:
subject가 이동할 수 없는 경우, 반환합니다.
replace를 false로 설정합니다.
targetAttributeValue를 빈 문자열로 설정합니다.
subject가 a
또는
area
요소인 경우,
subject를 사용하여 요소의 대상 얻기 결과를 targetAttributeValue로
설정합니다.
요소의 noopener 얻기 결과를 subject와 targetAttributeValue로 noopener에 설정합니다.
targetNavigable을 탐색 가능한 객체 선택 규칙을 적용하여 targetAttributeValue, subject의 노드 탐색 가능 객체 및 noopener를 사용하여 첫 번째 반환값으로 설정합니다.
targetNavigable이 null인 경우, 반환합니다.
urlString을 subject의 href
속성 값을
subject의 노드 문서에
상대적으로 URL 인코딩-파싱-직렬화 결과로 설정합니다.
urlString이 실패인 경우, 반환합니다.
hyperlinkSuffix가 null이 아닌 경우, 이를 urlString에 추가합니다.
referrerPolicy를 subject의 referrerpolicy
속성의 현재 상태로 설정합니다.
subject의 링크 유형에 noreferrer
키워드가 포함된 경우, referrerPolicy를 "no-referrer
"로 설정합니다.
탐색 targetNavigable을 urlString으로 subject의 노드 문서를 사용하여 수행하며, referrerPolicy를 referrerPolicy로 설정하고, userInvolvement를 userInvolvement로 설정합니다.
다른 유형의 탐색과 달리, 하이퍼링크를 따를 때 문서가 완전히 로드되지 않았을 때 특별한 "대체
"
동작이 없습니다. 이는 사용자에 의해 시작된 하이퍼링크 추적뿐만 아니라 aElement.click()
와 같은 스크립트로 트리거된 경우에도 동일합니다.
현재 모든 엔진에서 지원됩니다.
일부 경우 리소스는 즉시 보기보다는 나중에 사용하기 위해 다운로드할 수 있도록 의도됩니다. 리소스가 즉시 사용되는 대신 나중에 사용하기 위해 다운로드하도록 지정하려면, 해당 리소스에 대한 download
속성을
a
또는 area
요소에 지정할 수 있습니다.
속성에는 또한 값이 주어질 수 있으며, 이는 사용자 에이전트가 리소스를 파일 시스템에 저장할 때 사용할 파일 이름을 지정합니다. 이 값은 `Content-Disposition
`
HTTP 헤더의 파일 이름 매개변수로 재정의될 수 있습니다.
[RFC6266]
교차 출처 상황에서는, download
속성을
`Content-Disposition
`
HTTP 헤더, 특히 attachment
디스포지션 타입과 결합해야 합니다. 이는 사용자가 민감한 개인 정보나 기밀 정보를 충분히 이해하지 못한 상태에서 다운로드하지 않도록
보호하기 위한 것입니다.
요소 subject가 생성한 하이퍼링크를 주어진 선택적 hyperlinkSuffix(기본값 null) 및 선택적 userInvolvement(기본값 "없음
")과 함께 다운로드하려면:
subject가 탐색할 수 없는 경우, 종료합니다.
subject의 노드 문서의 활성 샌드박싱 플래그 세트에 샌드박스화된 다운로드 브라우징 컨텍스트 플래그가 설정되어 있으면, 종료합니다.
urlString을 URL 인코딩, 파싱 및 직렬화의 결과로 설정합니다. 이
때 subject의 href
속성 값을
사용하고, subject의 노드 문서를
기준으로 합니다.
urlString이 실패하면, 종료합니다.
hyperlinkSuffix가 null이 아닌 경우, 이를 urlString에 추가합니다.
userInvolvement가 "브라우저 UI
"가 아닌 경우:
filename을 subject의 download
속성의 값으로 설정합니다.
continue를 다운로드 요청 탐색
이벤트
발사의 결과로 설정하고, 이 때 목적지 URL을 urlString으로
설정하고, userInvolvement을
userInvolvement로 설정하고, filename을 filename으로 설정합니다.
continue가 false이면, 종료합니다.
다음 단계를 병렬로 실행합니다:
사용자 에이전트가 fetch로부터 얻은 리소스를 다운로드로 처리해야 하는 경우, 리소스를 성공적으로 얻으면 나중에 사용할 수 있도록 저장하는 방법을 사용자에게 제공해야 합니다. 그렇지 않으면 파일 다운로드 시 발생한 문제를 사용자에게 보고해야 합니다.
사용자 에이전트가 다운로드로 처리 중인 리소스의 파일 이름이 필요할 경우, 다음 알고리즘을 사용하여 선택해야 합니다.
이 알고리즘은 신뢰할 수 없는 사이트에서 파일을 다운로드하는 데 따른 보안 위험을 완화하기 위한 것으로, 사용자 에이전트는 이를 준수할 것을 강력히 권장합니다.
filename을 정의되지 않은 값으로 설정합니다.
리소스에 `Content-Disposition
`
헤더가 있으며, 해당 헤더가 attachment
디스포지션 타입을 지정하고, 헤더에 파일 이름 정보가 포함되어 있으면, filename을
헤더에서 지정한 값으로 설정하고, 아래의 sanitize 단계로 이동합니다. [RFC6266]
interface origin을 문서의 출처로
설정합니다. 이 문서는 다운로드 작업이나 다운로드로 이어진 탐색 작업이 시작된 document
입니다.
resource origin을 다운로드 중인 리소스의 URL의 스킴이
data
가 아닌 경우 리소스의 출처로 설정합니다. 스킴이 data
인 경우, resource origin을
interface origin과 동일하게 설정합니다.
interface origin이 없으면, trusted operation을 true로 설정합니다. 그렇지 않으면, resource origin이 interface origin과 동일 출처인 경우 trusted operation을 true로, 그렇지 않은 경우 false로 설정합니다.
trusted operation이 true이고 리소스에 `Content-Disposition
`
헤더가 있으며, 해당 헤더에 파일 이름 정보가 포함되어 있으면, filename을 헤더에서 지정한 값으로 설정하고, 아래의 sanitize 단계로
이동합니다. [RFC6266]
다운로드가 a
또는 area
요소가 생성한 하이퍼링크에서 시작되지 않았거나, 하이퍼링크가 시작된 하이퍼링크의 요소에 다운로드가 시작될 때 download
속성이 없었거나, 속성이 있었지만 다운로드가 시작될 때 그 값이 빈 문자열이었으면, 아래의 no proposed filename 단계로 이동합니다.
proposed filename을 다운로드가 시작된 시점에서 하이퍼링크의 요소의 download
속성 값으로 설정합니다.
trusted operation이 true이면, filename을 proposed filename 값으로 설정하고, 아래의 sanitize 단계로 이동합니다.
리소스에 `Content-Disposition
`
헤더가 있으며, 해당 헤더가 attachment
디스포지션 타입을 지정한 경우, filename을 proposed
filename 값으로 설정하고, 아래의 sanitize 단계로 이동합니다. [RFC6266]
no proposed filename: trusted operation이 true이거나, 사용자가 해당 리소스를 다운로드하도록 선호했음을 나타내면, filename을 리소스의 URL에서 파생된 값으로 설정하고, 아래의 sanitize 단계로 이동합니다.
filename을 사용자가 선호하는 파일 이름이나 사용자 에이전트가 선택한 파일 이름으로 설정하고, 아래의 sanitize 단계로 이동합니다.
알고리즘이 이 단계에 도달하면, 다운로드는 다운로드 중인 리소스와 다른 출처에서 시작되었으며, 해당 출처는 파일을 다운로드에 적합하다고 표시하지 않았고, 다운로드는 사용자가 시작하지
않은 것입니다. 이는 download
속성이 다운로드를 트리거하거나, 해당 리소스가 사용자 에이전트가 지원하지 않는 유형일 수 있기 때문일 수 있습니다.
이로 인해 위험할 수 있습니다. 예를 들어, 적대적인 서버가 사용자가 해당 데이터가 적대적인 서버에서 나온 것이라고 착각하게 만들어 개인 정보를 모르게 다운로드하고 다시 업로드하도록 속일 수 있기 때문입니다.
따라서, 사용자가 해당 리소스가 매우 다른 출처에서 왔음을 어느 정도 인지하도록 알리고, 혼동을 방지하기 위해 잠재적으로 적대적인 interface origin에서 제안된 파일 이름은 무시하는 것이 사용자에게 유리합니다.
sanitize: 선택적으로, filename에 대해 사용자가 영향을 미칠 수 있게 허용합니다. 예를 들어, 사용자 에이전트는 사용자가 파일 이름을 입력하도록 요청할 수 있으며, 위에서 결정된 filename 값을 기본값으로 제공할 수 있습니다.
filename을 로컬 파일 시스템에 적합하게 조정합니다.
예를 들어, 이는 파일 이름에 유효하지 않은 문자를 제거하거나, 앞뒤 공백을 제거하는 것일 수 있습니다.
플랫폼 규칙이 파일 시스템의 파일 유형을 결정하는 데 확장자를 전혀 사용하지 않는 경우, filename을 파일 이름으로 반환합니다.
claimed type을 리소스의 콘텐츠 유형 메타데이터에서 제공되는 유형으로 설정합니다. named type을 filename의 확장자로 설정합니다. 이 단계에서는 유형이 MIME 유형을 확장자에 매핑하는 것으로 정의됩니다.
named type이 사용자의 선호와 일치하는 경우(예: filename 값이 사용자에게 묻는 방식으로 결정된 경우), filename을 파일 이름으로 반환합니다.
claimed type과 named type이 동일한 유형인 경우(즉, 리소스의 콘텐츠 유형 메타데이터에서 제공되는 유형이 filename의 확장자와 일치하는 경우), filename을 파일 이름으로 반환합니다.
claimed type이 알려진 경우, filename을 해당 유형에 해당하는 확장자를 추가하도록 변경합니다.
그렇지 않으면, named type이 잠재적으로 위험한 것으로 알려진 경우(예: 플랫폼 규칙에 따라 네이티브 실행 파일, 셸 스크립트, HTML 애플리케이션 또는 실행
가능한 매크로 문서로 처리될 수 있음), 선택적으로 filename을 안전한 확장자를 추가하여 변경할 수 있습니다(예: ".txt
").
이 마지막 단계는 실행 파일을 다운로드하는 것을 불가능하게 만들 수 있으며, 이는 바람직하지 않을 수 있습니다. 항상 그렇듯이 구현자는 이 문제에서 보안과 사용성 사이의 균형을 맞춰야 합니다.
filename을 파일 이름으로 반환합니다.
이 알고리즘의 목적을 위해, 파일 확장자는 플랫폼 규칙이 파일의 유형을 식별하는 데 사용하도록 지정한 파일 이름의 모든 부분을 포함합니다. 예를
들어, 많은 운영 체제는 파일 이름의 마지막 점(".
") 뒤의 부분을 사용하여 파일의 유형을 결정하고, 이를 바탕으로 파일을 열거나 실행하는 방식을 결정합니다.
사용자 에이전트는 리소스 자체, 해당 URL 및 download
속성에서
제공된 디렉토리 또는 경로 정보를 무시하고, 사용자의 파일 시스템에서 결과 파일을 저장할 위치를 결정해야 합니다.
만약 a
또는 area
요소에 의해 생성된 하이퍼링크에 ping
속성이 있고, 사용자가 하이퍼링크를 따라가며, 해당 요소의 href
속성의 값이 해당 요소의 노드 문서를 기준으로 파싱될 수 있고, 실패 없이 파싱될 수 있다면, 사용자 에이전트는 ping
속성의 값을 가져와 해당 문자열을 ASCII 공백으로 분할하고, 각 결과 토큰을 해당 요소의 노드 문서를 기준으로 파싱한 후, 파싱이 실패한 경우를 무시하고, 각 결과 URL
ping URL에 대해 다음 단계를 실행합니다:
ping URL의 스킴이 HTTP(S) 스킴이 아니라면, 종료합니다.
선택적으로, 종료할 수 있습니다. (예를 들어, 사용자 에이전트는 사용자의 명시적인 선호에 따라 모든 ping URL을 무시할 수 있습니다.)
request를 새 요청으로 설정합니다. 이 요청의 URL은 ping URL, 메서드는
`POST
`, 헤더
목록은 « (`Content-Type
`,
`text/ping
`) », 본문은 `PING
`, 클라이언트는
settingsObject, 목적지는 빈 문자열로 설정하며, 자격 증명 모드는 "include
", 리퍼러는
"no-referrer
"로 설정하며, URL 자격 증명 플래그를 설정하고, 요청자 유형은 "ping
"로 설정합니다.
target URL을 요소의 href
속성 값을 기준으로
인코딩-파싱-직렬화 URL의 결과로 설정한 후, 다음을
수행합니다:
document
의 URL과
ping URL의 동일 출처인지 확인합니다.
document
의
스킴이 "https
"가 아닌 경우
Ping-From
`
헤더와 하이퍼링크를 포함하는 문서의 URL이 값으로 포함되어야 하며, `Ping-To
` HTTP 헤더와 target
URL이 값으로 포함되어야 합니다.
Ping-To
` HTTP 헤더가 포함되어야 합니다. request에는 `Ping-From
` 헤더가 포함되지
않습니다.Fetch request.
이 작업은 기본 fetch와 병렬로 수행될 수 있으며, 해당 fetch의 결과와 독립적입니다.
사용자 에이전트는 예를 들어 HTTP `Referer
`
(원문) 헤더를 보내는 설정과 함께 이 동작을 조정할 수 있도록 해야 합니다. 사용자의 선호에 따라 UAs는 ping 속성을 완전히 무시하거나 목록의 URL을 선택적으로 무시할 수 있습니다(예: 타사 URL을 무시). 이는 위의 단계에서
명시적으로 고려되었습니다.
사용자 에이전트는 응답에서 반환된 엔터티 본문을 무시해야 합니다. 사용자 에이전트는 응답 본문을 수신하기 시작하면 조기 연결을 종료할 수 있습니다.
ping
속성이 있는 경우, 사용자 에이전트는 하이퍼링크를 따라가는 것이 백그라운드에서 2차
요청을 보내는 것도 포함된다는 사실을 사용자에게 명확히 표시해야 하며, 실제 대상 URL 목록을 포함할 수 있습니다.
예를 들어, 시각적인 사용자 에이전트는 상태 표시줄이나 툴팁에서 하이퍼링크의 실제 URL과 함께 대상 ping URL의 호스트 이름을 포함할 수 있습니다.
ping
속성은 HTTP 리디렉션 및 자바스크립트와 같은 기존 기술과 중복되어 웹
페이지가 가장 인기 있는 외부 링크를 추적하거나 광고주가 클릭률을 추적할 수 있게 합니다.
그러나 ping
속성은 다음과 같은 이점을 사용자에게 제공합니다:
따라서 이 기능 없이도 사용자를 추적할 수 있지만, 작성자들은 사용자 경험을 더욱 투명하게 만들 수 있도록 사용자 에이전트가 ping
속성을 사용하도록 권장됩니다.
Ping-From
` 및 `Ping-To
` 헤더`Ping-From
` 및 `Ping-To
` HTTP 요청 헤더는 하이퍼링크 감사 요청에 포함됩니다. 이들의 값은 URL이며, 직렬화된 값입니다.
모든 현재 엔진에서 지원됩니다.
다음 표는 이 명세서에 정의된 링크 유형을 해당 키워드별로 요약한 것입니다. 이 표는 비규범적입니다. 링크 유형의 실제 정의는 다음 몇 섹션에서 설명합니다.
이 섹션에서는 참조된 문서라는 용어는 링크를 나타내는 요소에 의해 식별된 리소스를 나타내며, 현재 문서라는 용어는 링크를 나타내는 요소가 있는 리소스를 나타냅니다.
link
, a
, area
또는 form
요소에 적용되는 링크 유형을 결정하려면, 해당 요소의
rel
속성을 ASCII 공백으로 분할해야 합니다. 결과로
나온 토큰이 해당 요소에 적용되는 링크 유형의 키워드입니다.
특별히 명시된 경우를 제외하고, 키워드는 rel
속성당 한 번만
지정할 수 있습니다.
다음 표 아래에 나오는 일부 섹션에서는 특정 키워드의 동의어를 나열합니다. 표시된 동의어는 사용자 에이전트에서 명시된 대로 처리되어야 하지만, 문서에서 사용되어서는 안 됩니다(예:
"copyright
" 키워드).
키워드는 항상 ASCII 대소문자 구분 없이 비교해야 하며, 반드시 그렇게 비교되어야 합니다.
따라서, rel="next"
는 rel="NEXT"
와 동일합니다.
body-ok 키워드는 link
요소가 본문에 허용되는지 여부에 영향을 미칩니다. body-ok 키워드는 dns-prefetch
, modulepreload
, pingback
, preconnect
, prefetch
, preload
, 그리고 stylesheet
입니다.
웹 브라우저에 의해 구현될 새로운 링크 유형은 이 표준에 추가되어야 합니다. 나머지는 확장으로 등록될 수 있습니다.
링크 유형 | ...에 미치는 영향 | body-ok | `Link `
처리 포함
| 간단한 설명 | ||
---|---|---|---|---|---|---|
link
| a 및 area
| form
| ||||
alternate
| 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서의 대체 표현을 제공합니다. | |
canonical
| 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서의 선호 URL을 제공합니다. | |
author
| 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서 또는 기사의 작성자로의 링크를 제공합니다. | |
bookmark
| 허용되지 않음 | 하이퍼링크 | 허용되지 않음 | · | · | 가장 가까운 상위 섹션의 영구 링크를 제공합니다. |
dns-prefetch
| 외부 리소스 | 허용되지 않음 | 예 | · | 사용자 에이전트가 대상 리소스의 원본에 대해 DNS 해석을 사전 수행해야 함을 지정합니다. | |
expect
| 내부 리소스 | 허용되지 않음 | · | · | 대상 ID를 가진 요소가 현재 문서에 나타날 것으로 예상합니다. | |
external
| 허용되지 않음 | 주석 | · | · | 참조된 문서가 현재 문서와 동일한 사이트의 일부가 아님을 나타냅니다. | |
help
| 하이퍼링크 | · | · | 상황별 도움말로 연결되는 링크를 제공합니다. | ||
icon
| 외부 리소스 | 허용되지 않음 | · | · | 현재 문서를 나타내는 아이콘을 가져옵니다. | |
manifest
| 외부 리소스 | 허용되지 않음 | · | · | 애플리케이션 매니페스트를 가져오거나 연결합니다. [MANIFEST] | |
modulepreload
| 외부 리소스 | 허용되지 않음 | 예 | · | 사용자 에이전트가 모듈 스크립트를 사전 가져와 문서의 모듈 맵에 저장하고 나중에 평가할 수 있도록 지정합니다. 선택적으로 모듈의 종속성도 가져올 수 있습니다. | |
license
| 하이퍼링크 | · | · | 현재 문서의 주요 콘텐츠가 참조된 문서에서 설명된 저작권 라이선스에 의해 보호됨을 나타냅니다. | ||
next
| 하이퍼링크 | · | · | 현재 문서가 시리즈의 일부임을 나타내며, 시리즈의 다음 문서는 참조된 문서입니다. | ||
nofollow
| 허용되지 않음 | 주석 | · | · | 현재 문서의 원 저자 또는 발행자가 참조된 문서를 승인하지 않음을 나타냅니다. | |
noopener
| 허용되지 않음 | 주석 | · | · | 하이퍼링크가 보조 브라우징 컨텍스트를 생성하는 경우, 최상위 트래버서블과 비보조 브라우징 컨텍스트를 생성합니다. | |
noreferrer
| 허용되지 않음 | 주석 | · | · | `Referer `
(sic) 헤더가 포함되지 않습니다. 또한 noopener 와 동일한 효과가 있습니다.
| |
opener
| 허용되지 않음 | 주석 | · | · | 하이퍼링크가 보조 브라우징 컨텍스트를 생성하지 않는 경우, 보조 브라우징 컨텍스트를 생성합니다. | |
pingback
| 외부 리소스 | 허용되지 않음 | 예 | · | 현재 문서에 대한 핑백을 처리하는 핑백 서버의 주소를 제공합니다. | |
preconnect
| 외부 리소스 | 허용되지 않음 | 예 | 예 | 사용자 에이전트가 대상 리소스의 원본에 사전 연결해야 함을 지정합니다. | |
prefetch
| 외부 리소스 | 허용되지 않음 | 예 | · | 사용자 에이전트가 대상 리소스를 사전 가져와 캐시해야 함을 지정하며, 이는 후속 탐색에 필요할 가능성이 큽니다. | |
preload
| 외부 리소스 | 허용되지 않음 | 예 | 예 | 사용자 에이전트가 현재 탐색을 위해 사전 가져와 캐시해야 함을 지정하며, 이는 잠재적
목적지에 따라 as 속성에 의해 제공됩니다(및
우선순위에 따라).
| |
prev
| 하이퍼링크 | · | · | 현재 문서가 시리즈의 일부임을 나타내며, 시리즈의 이전 문서는 참조된 문서입니다. | ||
privacy-policy
| 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서에 적용되는 데이터 수집 및 사용 관행에 대한 정보를 제공하는 링크를 제공합니다. | |
search
| 하이퍼링크 | · | · | 현재 문서와 관련 페이지를 검색할 수 있는 리소스로 연결되는 링크를 제공합니다. | ||
stylesheet
| 외부 리소스 | 허용되지 않음 | 예 | · | 스타일 시트를 가져옵니다. | |
tag
| 허용되지 않음 | 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서에 적용되는 태그를 제공합니다(지정된 주소로 식별됨). |
terms-of-service
| 하이퍼링크 | 허용되지 않음 | · | · | 현재 문서의 제공자와 사용자가 현재 문서를 사용하기 위해 동의한 계약에 대한 정보를 제공하는 링크를 제공합니다. |
alternate
"현재 엔진 하나에서만 지원됩니다.
alternate
키워드는 link
, a
, 및 area
요소에서 사용할 수 있습니다.
이 키워드의 의미는 다른 속성의 값에 따라 달라집니다.
link
요소이고 rel
속성에 stylesheet
키워드도 포함된 경우
alternate
키워드는 stylesheet
키워드의 의미를
해당 키워드에 대해 설명된 방식으로 수정합니다. alternate
키워드는 자체 링크를 생성하지 않습니다.
다음과 같이, link
요소 세트가
스타일 시트를 제공합니다:
<!-- 지속적인 스타일 시트 -->
< link rel = "stylesheet" href = "default.css" >
<!-- 선호하는 대체 스타일 시트 -->
< link rel = "stylesheet" href = "green.css" title = "Green styles" >
<!-- 일부 대체 스타일 시트 -->
< link rel = "alternate stylesheet" href = "contrast.css" title = "High contrast" >
< link rel = "alternate stylesheet" href = "big.css" title = "Big fonts" >
< link rel = "alternate stylesheet" href = "wide.css" title = "Wide screen" >
alternate
키워드가 type
속성이
application/rss+xml
값 또는 application/atom+xml
값을 가질 때 사용된 경우
이 키워드는 현재 페이지와 반드시 동일한 콘텐츠를 포함하지는 않지만, syndication 피드를 참조하는 하이퍼링크를 생성합니다.
피드 자동 발견을 위해 사용자 에이전트는 문서 내의 모든 link
요소에서 alternate
키워드가 사용되고 type
속성이
application/rss+xml
또는 application/atom+xml
값으로 설정된 경우 모두 고려해야 합니다. 사용자 에이전트에
기본 syndication 피드 개념이 있는 경우, 첫 번째 요소가 (적용 가능한 경우) 기본으로 사용되어야 합니다.
다음 link
요소들은 블로그의
syndication 피드를 제공합니다:
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml" title = "Cool Stuff Blog" >
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml?category=robots" title = "Cool Stuff Blog: robots category" >
< link rel = "alternate" type = "application/atom+xml" href = "comments.xml" title = "Cool Stuff Blog: Comments" >
이러한 link
요소들은 피드 자동
발견에 사용되며, 첫 번째 요소가 (적용 가능한 경우) 기본으로 사용됩니다.
다음 예제는 a
요소를 사용하여 사용자에게 다양한
syndication 피드를 제공하는 방법을 보여줍니다:
< p > 원하는 Atom 피드를 선택하세요:</ p >
< ul >
< li >< a href = "recently-visited-planets.xml" rel = "alternate" type = "application/atom+xml" > Recently Visited Planets</ a ></ li >
< li >< a href = "known-bad-planets.xml" rel = "alternate" type = "application/atom+xml" > Known Bad Planets</ a ></ li >
< li >< a href = "unexplored-planets.xml" rel = "alternate" type = "application/atom+xml" > Unexplored Planets</ a ></ li >
</ ul >
이러한 링크들은 피드 자동 발견에 사용되지 않습니다.
이 키워드는 현재 문서의 대체 표현을 참조하는 하이퍼링크를 생성합니다.
참조된 문서의 성격은 hreflang
및
type
속성에 의해 결정됩니다.
alternate
키워드가 hreflang
속성과
함께 사용되고, 해당 속성의 값이 문서 요소의 언어와 다를 경우, 참조된 문서가 번역본임을 나타냅니다.
alternate
키워드가 type
속성과 함께 사용될 경우,
이는 참조된 문서가 지정된 형식으로 현재 문서를 재구성한 것임을 나타냅니다.
hreflang
및
type
속성은 alternate
키워드와 함께 지정될 때 결합하여 사용할
수 있습니다.
다음 예제는 페이지의 대체 형식을 사용하는 버전, 다른 언어를 대상으로 하는 버전 및 다른 미디어를 대상으로 하는 버전을 지정하는 방법을 보여줍니다:
< link rel = alternate href = "/en/html" hreflang = en type = text/html title = "English HTML" >
< link rel = alternate href = "/fr/html" hreflang = fr type = text/html title = "French HTML" >
< link rel = alternate href = "/en/html/print" hreflang = en type = text/html media = print title = "English HTML (for printing)" >
< link rel = alternate href = "/fr/html/print" hreflang = fr type = text/html media = print title = "French HTML (for printing)" >
< link rel = alternate href = "/en/pdf" hreflang = en type = application/pdf title = "English PDF" >
< link rel = alternate href = "/fr/pdf" hreflang = fr type = application/pdf title = "French PDF" >
이 관계는 전이적입니다 — 즉, 문서가 "alternate
" 링크 유형으로 두 다른 문서에 링크를
걸면, 그 문서들이 첫 번째 문서의 대체 표현이라는 것을 암시할 뿐만 아니라, 그 두 문서도 서로의 대체 표현이라는 것을 암시합니다.
author
"author
키워드는 link
, a
및 area
요소와 함께 사용할 수 있습니다. 이 키워드는 하이퍼링크를 생성합니다.
a
및 area
요소의 경우, author
키워드는 참조된 문서가 하이퍼링크를 정의하는
요소의 가장 가까운 article
요소의
작성자에 대한 추가 정보를 제공하거나, 해당 요소가 없을 경우 페이지 전체에 대한 정보를 제공한다는 것을 나타냅니다.
link
요소의 경우, author
키워드는 참조된 문서가 페이지 전체의 작성자에
대한 추가 정보를 제공한다는 것을 나타냅니다.
"참조된 문서"는 mailto:
URL을 통해 작성자의 이메일 주소를 제공할 수 있으며, 이는 종종 실제로 그렇습니다. [MAILTO]
동의어: 역사적 이유로, 사용자 에이전트는 link
, a
및 area
요소에 rev
속성이
"made
" 값으로 지정된 경우 author
키워드가 링크 관계로 지정된 것으로 처리해야
합니다.
bookmark
"
bookmark
키워드는 a
및 area
요소와 함께 사용할 수 있습니다. 이 키워드는
하이퍼링크를 생성합니다.
bookmark
키워드는 링크된 요소의 가장
가까운 상위 article
요소에 대한 고정
링크(permalink)를 제공합니다. 상위 article
요소가 없을 경우, 링크된 요소와 가장 밀접하게 연관된 섹션에 대한 고정 링크를 제공합니다.
다음 코드 조각에는 세 개의 고정 링크가 있습니다. 사용자 에이전트는 고정 링크가 제공되는 위치를 보고 각 부분에 어떤 고정 링크가 적용되는지 결정할 수 있습니다.
...
< body >
< h1 > Example of permalinks</ h1 >
< div id = "a" >
< h2 > First example</ h2 >
< p >< a href = "a.html" rel = "bookmark" > This permalink applies to
only the content from the first H2 to the second H2</ a > . The DIV isn't
exactly that section, but it roughly corresponds to it.</ p >
</ div >
< h2 > Second example</ h2 >
< article id = "b" >
< p >< a href = "b.html" rel = "bookmark" > This permalink applies to
the outer ARTICLE element</ a > (which could be, e.g., a blog post).</ p >
< article id = "c" >
< p >< a href = "c.html" rel = "bookmark" > This permalink applies to
the inner ARTICLE element</ a > (which could be, e.g., a blog comment).</ p >
</ article >
</ article >
</ body >
...
canonical
"
canonical
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는
하이퍼링크를 생성합니다.
canonical
키워드는 href
속성에 의해 제공되는 URL이 현재 문서의 선호
URL임을 나타냅니다. 이는 The Canonical Link Relation에서 더 자세히 설명된 것처럼 검색 엔진이 중복 콘텐츠를 줄이는 데 도움을 줍니다. [RFC6596]
dns-prefetch
"dns-prefetch
키워드는 link
요소와 함께 사용할 수
있습니다. 이 키워드는 외부 자원 링크를
생성합니다. 이 키워드는 body-ok입니다.
dns-prefetch
키워드는 지정된 자원의 origin에 대해 사전에 DNS 해석을 수행하는 것이
사용자에게 유리할 가능성이 높으며, 사용자가 해당 origin에 위치한
자원을 필요로 할 가능성이 높아 DNS 해석과 관련된 지연 시간을 미리 줄여 사용자 경험을 향상시킬 수 있음을 나타냅니다.
dns-prefetch
키워드에 의해 제공되는 자원의 기본 유형은 없습니다.
이 유형의 링크된 자원을 가져와 처리해야 할 적절한 시기는 다음과 같습니다:
외부 자원 링크가 이미 브라우징 컨텍스트에
연결된 link
요소에서 생성될 때
외부 자원 링크의 link
요소가 브라우징 컨텍스트에 연결될 때
이미 브라우징 컨텍스트에
연결된 외부 자원
링크의 link
요소의 href
속성이 변경될 때
이 유형의 링크된 자원을 가져와 처리하는 단계는 link
요소 el이 주어질
때 다음과 같습니다:
el의 href
속성 값을 기준으로 URL
인코딩-파싱을 수행하여 url을 설정합니다.
만약 url이 실패라면, 종료합니다.
el의 노드 문서의 관련 설정 객체를 기반으로 네트워크 파티션 키 결정의 결과로 partitionKey를 설정합니다.
사용자 에이전트는 partitionKey와 url의 origin을 주어 origin을 해석해야 합니다.
이 알고리즘의 결과는 캐시될 수 있으므로, 이후의 가져오기가 더 빨라질 수 있습니다.
expect
"
expect
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 내부 자원 링크를 생성합니다.
expect
키워드로 생성된 내부 자원 링크는 해당 요소가 문서에 연결되고 완전히
구문 분석될 때까지 렌더링을 차단하는 데 사용할 수 있습니다.
expect
키워드로 제공된 자원의 기본 유형은
없습니다.
다음 조건 중 하나라도 link
요소
el에 해당하는 경우:
expect
내부 자원 링크가 이미 브라우징 컨텍스트에 연결된
el에서 생성된 경우
expect
내부 자원 링크가 생성된 후
el이 브라우징
컨텍스트에 연결된 경우
expect
내부 자원 링크가 이미 브라우징 컨텍스트에 연결된
el에서 생성되고 el의 href
속성이 설정, 변경, 또는 제거된 경우
expect
내부 자원 링크가 생성된 후
el이 이미 브라우징 컨텍스트에 연결된 상태에서 el의 media
속성이 설정, 변경, 또는 제거된 경우
그런 다음 처리 el을 실행합니다.
link
요소 el이 주어질 때,
내부 자원 링크 처리를 실행하려면 다음 단계를 수행합니다:
el의 노드 문서를 doc으로 설정합니다.
el의 href
속성 값을
기준으로 URL 인코딩-파싱의 결과를
url로 설정합니다.
이 작업이 실패하거나, url이 프래그먼트를 제외한 설정 없이 doc의 URL과 일치하지 않으면 렌더링을 차단 해제하고 종료합니다.
doc과 url을 사용하여 지정된 부분 선택의 결과를 indicatedElement로 설정합니다.
다음 조건이 모두 참이면:
doc의 현재 문서 준비 상태가 "loading
"인 경우
el이 내부 자원 링크를 생성하는 경우
el이 브라우징 컨텍스트에 연결된 경우
el이 렌더링을 잠재적으로 차단할 수 있는 경우
indicatedElement가 요소가 아니거나, 열린 요소의 스택에 있는 경우
그런 다음 렌더링을 차단합니다.
그렇지 않으면 렌더링을 차단 해제합니다.
document
doc에 대해 내부 자원 링크 처리를 실행하려면:
각 expect
link
요소 link에
대해
doc의 렌더링
차단 요소 집합에서, 처리합니다
link.
다음 속성 변경 단계는 expect
link
요소가 동적 id
및 name
변경에 대응하도록 보장하는 데 사용됩니다:
namespace가 null이 아니면 반환합니다.
element가 열린 요소의 스택에 있으면 반환합니다.
다음 중 하나가 참이면:
그런 다음 내부 자원 링크 처리를 element의 노드 문서에서 실행합니다.
external
"external
키워드는 a
, area
, 그리고 form
요소와 함께 사용할 수 있습니다. 이 키워드는
하이퍼링크를 생성하지 않지만, 요소에 의해 생성된 다른 하이퍼링크(다른 키워드가 생성하지 않는 경우
암시된 하이퍼링크)에 대해 주석을 달아줍니다.
external
키워드는 링크가 현재 문서가
속한 사이트의 일부가 아닌 문서로 연결된다는 것을 나타냅니다.
help
"help
키워드는 link
, a
, area
, 그리고 form
요소와 함께 사용할 수 있습니다. 이 키워드는 하이퍼링크를 생성합니다.
a
, area
, 그리고 form
요소의 경우, help
키워드는 부모 요소와 그 자식 요소에 대한 추가 도움말
정보를 제공하는 문서를 참조한다고 나타냅니다.
다음 예제에서, 폼 컨트롤에는 문맥에 따라 관련된 도움말이 있습니다. 사용자 에이전트는 이 정보를 사용하여, 예를 들어 사용자가 "도움말" 또는 "F1" 키를 누르면 참조된 문서를 표시할 수 있습니다.
< p >< label > Topic: < input name = topic > < a href = "help/topic.html" rel = "help" > (Help)</ a ></ label ></ p >
link
요소의 경우, help
키워드는 참조된 문서가 페이지 전체에 대한 도움말을
제공한다고 나타냅니다.
a
및 area
요소의 경우, 일부 브라우저에서는 help
키워드가 링크가 다른 커서를 사용하도록 합니다.
icon
"모든 현재 엔진에서 지원.
icon
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 외부 리소스 링크를 생성합니다.
지정된 리소스는 페이지 또는 사이트를 나타내는 아이콘이며, 사용자 에이전트가 사용자 인터페이스에서 페이지를 나타낼 때 사용해야 합니다.
아이콘은 청각적 아이콘, 시각적 아이콘 또는 다른 종류의 아이콘일 수 있습니다. 여러 아이콘이 제공되는 경우, 사용자 에이전트는 type
, media
, sizes
속성에 따라 가장 적합한 아이콘을 선택해야 합니다. 여러 개의
동일하게 적합한 아이콘이 있을 경우, 사용자 에이전트는 사용자가 아이콘 목록을 수집할 당시 트리 순서에서 마지막으로 선언된 아이콘을 사용해야 합니다. 사용자 에이전트가 아이콘을 사용하려 했으나,
실제로는 지원되지 않는 형식을 사용하는 등 부적절한 것으로 판단되면, 사용자 에이전트는 속성에 따라 다음으로 적합한 아이콘을 시도해야 합니다.
사용자 에이전트는 아이콘 목록이 변경될 때 아이콘을 업데이트할 필요는 없지만, 업데이트하는 것이 권장됩니다.
icon
키워드로 제공된 리소스에 대한 기본 유형은 없습니다. 그러나 리소스의 유형을 결정하는 목적을 위해, 사용자 에이전트는 리소스가 이미지일 것으로 예상해야 합니다.
sizes
키워드는 아이콘 크기를 원시 픽셀로 나타냅니다(CSS 픽셀과 대조적으로).
장치 픽셀 밀도가 CSS 픽셀당 두 장치 픽셀(2x, 192dpi)인 디스플레이를 위해 50 CSS 픽셀 너비의 아이콘은 100 원시 픽셀의 너비를 갖게 됩니다. 이 기능은 작은 고해상도 아이콘과 큰 저해상도 아이콘에 대해 다른 리소스를 사용해야 함을 나타내는 것은 지원하지 않습니다(예: 50×50 2x 대 100×100 1x).
속성의 값을 구문 분석하고 처리하기 위해, 사용자 에이전트는 먼저 속성의 값을 ASCII 공백으로 분할한 다음, 각 결과 키워드를 구문 분석하여 그것이 나타내는 바를 결정해야 합니다.
any
키워드는 리소스가 SVG 이미지와 같이 확장 가능한 아이콘을 포함하고 있음을 나타냅니다.
다른 키워드는 다음과 같이 추가로 구문 분석하여 무엇을 나타내는지 결정해야 합니다:
키워드에 U+0078 라틴 소문자 X 또는 U+0058 라틴 대문자 X 문자가 정확히 하나 포함되지 않은 경우, 이 키워드는 아무 것도 나타내지 않습니다. 해당 키워드에 대해 반환합니다.
width string을 "x
" 또는 "X
" 앞의 문자열로 설정합니다.
height string을 "x
" 또는 "X
" 뒤의 문자열로 설정합니다.
width string 또는 height string이 U+0030 숫자 0(0) 문자로 시작하거나, ASCII 숫자 이외의 문자를 포함하는 경우, 이 키워드는 아무 것도 나타내지 않습니다. 해당 키워드에 대해 반환합니다.
width을 얻기 위해 음수가 아닌 정수를 구문 분석하는 규칙을 width string에 적용합니다.
height을 얻기 위해 음수가 아닌 정수를 구문 분석하는 규칙을 height string에 적용합니다.
해당 키워드는 리소스가 width 장치 픽셀 너비와 height 장치 픽셀 높이를 가진 비트맵 아이콘을 포함하고 있음을 나타냅니다.
sizes
속성에 지정된 키워드는 링크된 리소스에서 실제로 사용 가능한
아이콘 크기를 나타내지 않아야 합니다.
link
요소 el과 요청 request이 주어졌을 때, 이 유형의 링크된 리소스에 대한 링크된 리소스 페치 설정 단계는
다음과 같습니다:
request의 목적지를
"image
"로 설정합니다.
true를 반환합니다.
이 유형의 링크된 리소스에 대한 링크 헤더 처리 단계는 아무 것도 하지 않습니다.
만약 link
요소와 icon
키워드가 없는 경우, Document
객체의 URL의 스킴이 HTTP(S) 스킴인 경우, 사용자 에이전트는
대신 이러한 단계를 병렬로 실행할 수 있습니다:
request가 요청이며, URL은 URL
레코드로, Document
객체의 URL에 대해 "/favicon.ico
"를 해결하여 얻은 URL이며, 클라이언트는 Document
객체의 관련 설정 객체, 목적지는
"image
", 동기 플래그가
설정되고, 자격 증명
모드는 "include
", URL 자격 증명 사용 플래그가 설정된 새 요청을 만들고.
response는 페치 request의 결과입니다.
response의 안전하지 않은 응답을 아이콘으로 사용하며, 마치
icon
키워드를 사용하여 선언된 것처럼 합니다.
다음 스니펫은 여러 아이콘이 있는 애플리케이션의 상단 부분을 보여줍니다.
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > lsForums — Inbox</ title >
< link rel = icon href = favicon.png sizes = "16x16" type = "image/png" >
< link rel = icon href = windows.ico sizes = "32x32 48x48" type = "image/vnd.microsoft.icon" >
< link rel = icon href = mac.icns sizes = "128x128 512x512 8192x8192 32768x32768" >
< link rel = icon href = iphone.png sizes = "57x57" type = "image/png" >
< link rel = icon href = gnome.svg sizes = "any" type = "image/svg+xml" >
< link rel = stylesheet href = lsforums.css >
< script src = lsforums.js ></ script >
< meta name = application-name content = "lsForums" >
</ head >
< body >
...
역사적 이유로, icon
키워드는 "shortcut
" 키워드 앞에 있을 수
있습니다. "shortcut
" 키워드가 있는 경우, rel
속성의 전체 값은
"shortcut icon
" 문자열에 대해 ASCII 대소문자 구분 없이 일치해야 합니다(토큰 사이에 U+0020 공백 문자 하나와 다른 ASCII 공백이 없어야 합니다).
license
"license
키워드는 link
, a
, area
및 form
요소와 함께 사용할 수 있습니다. 이 키워드는 하이퍼링크를 만듭니다.
license
키워드는 참조된 문서가 현재 문서의
주요 콘텐츠가 제공되는 저작권 라이선스 조건을 제공함을 나타냅니다.
이 사양은 문서의 주요 콘텐츠와 주요 콘텐츠로 간주되지 않는 콘텐츠를 구분하는 방법을 지정하지 않습니다. 구분은 사용자에게 명확해야 합니다.
사진 공유 사이트를 고려해 보십시오. 해당 사이트의 페이지는 사진을 설명하고 표시할 수 있으며, 페이지는 다음과 같이 마크업될 수 있습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Exampl Pictures: Kissat</ title >
< link rel = "stylesheet" href = "/style/default" >
</ head >
< body >
< h1 > Kissat</ h1 >
< nav >
< a href = "../" > Return to photo index</ a >
</ nav >
< figure >
< img src = "/pix/39627052_fd8dcd98b5.jpg" >
< figcaption > Kissat</ figcaption >
</ figure >
< p > One of them has six toes!</ p >
< p >< small >< a rel = "license" href = "http://www.opensource.org/licenses/mit-license.php" > MIT Licensed</ a ></ small ></ p >
< footer >
< a href = "/" > Home</ a > | < a href = "../" > Photo index</ a >
< p >< small > © copyright 2009 Exampl Pictures. All Rights Reserved.</ small ></ p >
</ footer >
</ body >
</ html >
이 경우 license
는 문서의 주요
콘텐츠인 사진에만 적용되며, 문서 전체에는 적용되지 않습니다. 특히 문서 하단에 명시된 저작권이 적용되는 페이지 디자인에는 적용되지 않습니다. 이 점은 스타일링을 통해 더 명확하게 할 수
있습니다(예: 라이선스 링크를 사진 근처에 눈에 띄게 배치하고, 페이지 저작권은 페이지 하단에 작은 글씨로 표시).
동의어: 역사적 이유로, 사용자 에이전트는 "copyright
" 키워드를 license
키워드처럼 처리해야 합니다.
manifest
"
하나의 엔진에서만 지원됩니다.
manifest
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는
외부 리소스 링크를 만듭니다.
manifest
키워드는 현재 문서와 관련된
메타데이터를 제공하는 매니페스트 파일을 나타냅니다.
manifest
키워드로 제공되는 리소스에
대해 기본 유형이 없습니다.
웹 애플리케이션이 설치된 웹 애플리케이션이 아닌 경우, 이 링크 유형에 대해 링크된 리소스를 가져오고 처리하는 적절한 시기는 사용자 에이전트가 필요하다고 판단할 때입니다. 예를 들어, 사용자가 웹 애플리케이션을 설치하기로 선택했을 때가 적절한 시기가 될 수 있습니다.
설치된 웹 애플리케이션의 경우, 이 링크 유형에 대해 링크된 리소스를 가져오고 처리하는 적절한 시기는 다음과 같습니다:
외부 리소스 링크가 이미 브라우징 컨텍스트에 연결된
link
요소에서 생성될 때.
이미 브라우징 컨텍스트에
연결된 외부 리소스
링크의 href
속성이 설정,
변경 또는 제거될 때.
어떤 경우든, 트리 순서(tree order)에서 rel
속성이 manifest
토큰을 포함하는 첫 번째
link
요소만 사용할 수 있습니다.
사용자 에이전트는 이 링크 유형에 대해 로드 이벤트를 지연시켜서는 안 됩니다.
이 유형의 링크된 리소스에 대해 link
요소
el과 요청 request를 고려하여 링크된 리소스 가져오기 설정 단계는 다음과 같습니다:
navigable이 null이면 false를 반환합니다.
navigable이 최상위 탐색 가능이 아니면 false를 반환합니다.
request의 initiator를 "manifest
"로 설정합니다.
request의 destination을 "manifest
"로 설정합니다.
request의 mode를
"cors
"로 설정합니다.
request의 credentials mode를 crossorigin
콘텐츠 속성에 대한 CORS 설정 속성 자격 증명 모드로 설정합니다.
true를 반환합니다.
link
요소 el,
boolean success, 응답 response, 및 바이트 시퀀스 bodyBytes를 고려하여 이 유형의 링크된 리소스를 처리하는 방법은 다음과 같습니다:
response의 Content-Type 메타데이터가 JSON MIME 타입이 아닌 경우, success를 false로 설정합니다.
success가 true인 경우:
response의 URL을 manifest URL로 설정합니다.
document URL, manifest URL, 및 bodyBytes를 고려하여 매니페스트를 처리합니다. [MANIFEST]
이 유형의 링크된 리소스에 대한 링크 헤더 처리 단계는 아무 작업도 하지 않습니다.
modulepreload
"modulepreload
키워드는 link
요소와 함께 사용할 수
있습니다. 이 키워드는 외부 리소스 링크를
만듭니다. 이 키워드는 body-ok입니다.
modulepreload
키워드는 preload
키워드의 특수화된
대안으로, 모듈 스크립트의 사전 로드에 초점을 맞춘 처리 모델을 사용합니다.
특히, 모듈 스크립트의 특정한 가져오기 동작을 사용하며 (예: crossorigin
속성의
다른 해석 등), 결과를 나중에 평가하기 위해 적절한 모듈 맵에 저장합니다. 반면, preload
키워드를 사용하는 유사한
외부 리소스 링크는 결과를 프리로드 캐시에
저장하며, 문서의 모듈
맵에는 영향을 미치지 않습니다.
또한, 구현체는 모듈 스크립트가 의존성을 선언한다는 사실을 활용하여 지정된
모듈의 의존성을 가져올 수도 있습니다. 이는 최적화 기회로 의도된 것으로, 사용자 에이전트는 그 의존성이 나중에 필요할 가능성이 높다는 것을 알고 있기 때문입니다. 일반적으로는 서비스 워커 같은 기술을
사용하지 않는 한 이를 관찰하기는 어렵습니다. 특히, 적절한 load
또는 error
이벤트는 지정된 모듈이 가져와진 후에 발생하며, 의존성을
기다리지 않습니다.
사용자 에이전트는 이 링크 유형에 대해 로드 이벤트를 지연해서는 안 됩니다.
이 링크 유형에 대해 링크된 리소스를 가져오고 처리하기에 적절한 시기는 다음과 같습니다:
외부 리소스 링크가 이미 브라우징 컨텍스트에
연결된 link
요소에서 생성될 때.
이미 브라우징 컨텍스트에
연결된 외부 리소스
링크의 href
속성이
설정, 변경 또는 제거될 때.
일부 다른 링크 관계와 달리, link
요소의 관련 속성 (예: as
, crossorigin
,
referrerpolicy
)을
변경해도 새로운 가져오기를 트리거하지 않습니다. 이는 문서의 모듈 맵이 이미 이전에 가져온 결과로 채워져 있으므로, 다시 가져오는 것이 의미가
없기 때문입니다.
modulepreload
링크에 대한 리소스 가져오기 및 처리 알고리즘은 link
요소 el을
기준으로 다음과 같이 진행됩니다:
만약 el의 href
속성의 값이 빈 문자열이라면,
반환합니다.
el의 as
속성의 현재
상태를 destination으로 설정합니다 (이는 destination입니다), 또는 상태가 없다면 "script
"로
설정합니다.
만약 destination이 스크립트와 유사한 목적지가 아니라면, 요소 작업을 대기열에 추가하고 네트워킹 작업 소스를 사용하여
el에서 이벤트를 발생시켜 error
를 반환합니다.
el의 href
속성의 값을 기준으로 URL
인코딩-파싱의 결과를 url로 설정합니다.
url이 실패인 경우, 반환합니다.
el의 crossorigin
속성에 대한 CORS 설정 속성 자격 증명 모드를
credentials mode로 설정합니다.
el의 [[CryptographicNonce]]를 cryptographic nonce로 설정합니다.
속성이 지정된 경우 el의 무결성
속성 값을
integrity metadata로 설정하고, 그렇지 않은 경우 빈 문자열로 설정합니다.
el이 무결성
속성을 가지고
있지 않다면, 모듈 무결성 메타데이터를 해결한 결과를
url과 settings object로 설정하여 integrity metadata를 설정합니다.
el의 referrerpolicy
속성의 현재 상태를 referrer policy로 설정합니다.
el의 fetchpriority
속성의 현재 상태를 fetch priority로 설정합니다.
스크립트 가져오기 옵션을
cryptographic nonce, integrity metadata, "not-parser-inserted
"의 파서
메타데이터, credentials mode, referrer policy, 및 fetch priority로 설정합니다.
url, destination, settings object, options을 기준으로 modulepreload 모듈 스크립트 그래프 가져오기를 실행하고, result를 기준으로 다음 단계를 수행합니다:
이 유형의 링크된 리소스에 대한 링크 헤더 처리 단계는 아무 작업도 하지 않습니다.
다음 스니펫은 여러 모듈이 사전 로드된 애플리케이션의 상단 부분을 보여줍니다:
<!DOCTYPE html>
< html lang = "en" >
< title > IRCFog</ title >
< link rel = "modulepreload" href = "app.mjs" >
< link rel = "modulepreload" href = "helpers.mjs" >
< link rel = "modulepreload" href = "irc.mjs" >
< link rel = "modulepreload" href = "fog-machine.mjs" >
< script type = "module" src = "app.mjs" >
...
애플리케이션의 모듈 그래프가 다음과 같다고 가정합니다:
여기에서 애플리케이션 개발자는 모듈 그래프의 모든 모듈을 선언하기 위해 modulepreload
를
사용하여 사용자 에이전트가 이를 모두 가져오도록 합니다. 이러한 사전 로드 없이, 사용자 에이전트는 HTTP/2 서버 푸시 같은 기술이 작동하지 않는 경우
helpers.mjs
를 찾기 위해 여러 네트워크 라운드 트립을 거쳐야 할 수도 있습니다. 이와 같이, modulepreload
link
요소는 애플리케이션의
모듈을 일종의 "매니페스트"처럼 사용할 수 있습니다.
다음 코드는 modulepreload
링크가 import()
와
함께 사용되어 네트워크 가져오기를 미리 수행하도록 하고, import()
가
호출될 때 모듈이 이미 준비되어 모듈 맵에서 준비된 상태에 있게 하는 방법을
보여줍니다:
< link rel = "modulepreload" href = "awesome-viewer.mjs" >
< button onclick = "import('./awesome-viewer.mjs').then(m => m.view())" >
멋진 항목 보기
</ button >
nofollow
"
nofollow
키워드는 a
,
area
및 form
요소와 함께
사용될 수 있습니다. 이 키워드는
하이퍼링크를 생성하지 않지만, 요소에 의해 생성된 다른 하이퍼링크들(다른 키워드가 생성하지 않는 경우
암시적인 하이퍼링크)을 주석으로 달 수 있습니다.
nofollow
키워드는 링크가 페이지의 원래 작성자 또는 발행자에 의해 승인되지 않았거나, 두 페이지에 관련된 사람들 간의 상업적 관계 때문에 주로 포함된 링크임을 나타냅니다.
noopener
"
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
noopener
키워드는
a
,
area
및
form
요소와 함께 사용할 수 있습니다. 이 키워드는
하이퍼링크를 생성하지 않지만, 요소가 생성하는 하이퍼링크(다른 키워드가 하이퍼링크를 생성하지 않는 경우
내포된 하이퍼링크)를 주석 처리합니다.
이 키워드는 하이퍼링크를 따라 열리는 새 최상위 탐색 가능
항목이
보조 브라우징 컨텍스트를 포함하지 않음을
나타냅니다.
예를 들어, 생성된 Window
의
opener
속성의 getter는 null을 반환합니다.
또한 처리 모델도 참조하십시오.
이것은 일반적으로 최상위 탐색 가능 항목과
보조 브라우징 컨텍스트(기존
탐색 가능 항목의
대상 이름이 "example
"이 아닌 경우)와 함께 생성됩니다:
< a href = help.html target = example > Help!</ a >
이것은 동일한 경우에 최상위 탐색 가능 항목과 비보조 브라우징 컨텍스트와 함께 생성됩니다:
< a href = help.html target = example rel = noopener > Help!</ a >
이들은 동등하며 오직 부모 탐색 가능 항목만 탐색합니다:
< a href = index.html target = _parent > Home</ a >
< a href = index.html target = _parent rel = noopener > Home</ a >
noreferrer
"
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
noreferrer
키워드는
a
,
area
및
form
요소와 함께 사용할 수 있습니다.
이 키워드는 하이퍼링크를 생성하지 않지만,
요소가 생성하는 하이퍼링크(다른 키워드가 하이퍼링크를 생성하지 않는 경우 내포된 하이퍼링크)를 주석 처리합니다.
이 키워드는 링크를 따를 때 참조자 정보가 유출되지 않음을 나타내며, 또한 동일한 조건에서
noopener
키워드의 동작을 의미합니다.
참조자가 직접 조작되는 처리 모델도 참조하십시오.
<a href="..." rel="noreferrer" target="_blank">
는
<a href="..." rel="noreferrer noopener" target="_blank">
와 동일한 동작을 합니다.
opener
"opener
키워드는
a
,
area
및
form
요소와 함께 사용할 수 있습니다.
이 키워드는 하이퍼링크를 생성하지 않지만,
요소가 생성하는 다른 모든 하이퍼링크(다른 키워드가 하이퍼링크를 생성하지 않는 경우 내포된 하이퍼링크)를
주석 처리합니다.
이 키워드는 하이퍼링크를 따를 때 생성된 모든 새로운 최상위 탐색 가능 객체가 보조 브라우징 컨텍스트를 포함하게 됨을 나타냅니다.
처리 모델에 대해서는 처리 모델을 참조하십시오.
다음 예제에서는 사용자가 찾고 있는 내용이 다른 곳에서 발견될 수 있는 경우를 대비하여 도움말 페이지 팝업이
그 오프너를 탐색할 수 있도록 opener
가
사용됩니다.
대안으로는 _blank
대신 이름이 지정된 대상을 사용하는 방법이 있을 수 있지만,
이는 기존 이름과 충돌할 가능성이 있습니다.
< a href = "..." rel = opener target = _blank > Help!</ a >
pingback
"
pingback
키워드는
link
요소와 함께 사용할 수 있습니다.
이 키워드는 외부 리소스 링크를 생성합니다.
이 키워드는 본문-허용입니다.
pingback
키워드의 의미는
Pingback 1.0를 참조하십시오. [PINGBACK]
preconnect
"
모든 현재 엔진에서 지원됩니다.
preconnect
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 외부 리소스
링크를 생성합니다. 이 키워드는 본문-허용입니다.
preconnect
키워드는 특정 리소스의 출처로의 연결을 선제적으로 시작하는 것이 유익할 가능성이
높으며,
사용자가 해당 출처에 있는 리소스를 필요로 할 가능성이 높기 때문에
연결을 설정하는 데 관련된 지연 시간을 미리 해결함으로써 사용자 경험이 향상될 것임을 나타냅니다.
preconnect
키워드로 제공되는 리소스에는 기본 유형이 없습니다.
사용자 에이전트는 이 링크 유형에 대해 로드 이벤트를 지연해서는 안 됩니다.
이 링크 유형에 대해 링크된 리소스를 가져오고 처리할 적절한 시점은 다음과 같습니다:
외부 리소스 링크가 이미 탐색
문맥에 연결된 link
요소에 생성되었을 때.
외부 리소스 링크의 link
요소가
탐색 문맥에 연결될 때.
이미 탐색 문맥에
연결된 외부 리소스 링크의
href
속성이 변경될 때.
이미 탐색 문맥에
연결된 외부 리소스 링크의
crossorigin
속성이 설정, 변경 또는 제거될 때.
이 링크 유형에 대해 링크된 리소스를 가져오고 처리하는 단계는
link
요소 el을
사용하여
링크 옵션을
생성하고
해당 결과를 사용하여 preconnect하는 것입니다.
이 링크 유형에 대해 링크 헤더를 처리하는 단계는 링크 처리 옵션 options를 사용하여 preconnect하는 것입니다.
Preconnect 하기 위해 링크 처리 옵션 options를 주어진 경우:
만약 options의 href가 빈 문자열이면, 반환합니다.
상대적으로 options의 href를 기준으로 URL을 인코딩-파싱한 결과를 url로 둡니다.
문서나 환경 대신 기본 URL을 전달하는 문제는 이슈 #9715에 의해 추적됩니다.
만약 url이 실패라면, 반환합니다.
만약 url의 스킴이 HTTP(S) 스킴이 아니라면, 반환합니다.
options의 환경을 기준으로 네트워크 파티션 키를 결정한 결과를 partitionKey로 둡니다.
useCredentials를 true로 둡니다.
만약 options의 crossorigin이 익명이고 options의 출처가 url의 출처와 동일하지 않다면, useCredentials를 false로 설정합니다.
사용자 에이전트는 partitionKey, url의 출처 및 useCredentials를 기준으로 연결을 확보해야 합니다.
이 연결은 직접적으로 사용되지 않으며, 이후 사용을 위해 연결 풀에 남아 있습니다.
사용자 에이전트는 가능한 한 선제적으로 preconnect를 시작하고 전체 연결 핸드셰이크(DNS+TCP, HTTPS 출처의 경우 DNS+TCP+TLS)를 수행하려고 해야 합니다. 하지만 자원 제약이나 기타 이유로 인해 부분 핸드셰이크(DNS만, HTTPS 출처의 경우 DNS 또는 DNS+TCP)만 수행하거나 완전히 건너뛸 수 있습니다.
출처별 최적의 연결 수는 협상된 프로토콜, 사용자의 현재 연결 상태, 사용 가능한 장치 자원, 전역 연결 제한 및 기타 상황에 따라 다릅니다. 따라서 몇 개의 연결을 열어야 할지는 사용자 에이전트에 의해 결정됩니다.
prefetch
"
prefetch
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 외부 리소스
링크를 생성합니다. 이 키워드는 본문-허용입니다.
prefetch
키워드는 지정된 리소스나 동일 사이트 문서를 선제적으로 가져오고 캐시하는 것이
유익할 가능성이 높음을 나타내며, 사용자가 향후 탐색을 위해 이 리소스를 필요로 할 가능성이 높습니다.
prefetch
키워드로 제공되는 리소스에는 기본 유형이 없습니다.
이 링크 유형에 대해 링크된 리소스를 가져오고 처리할 적절한 시점은 다음과 같습니다:
외부 리소스 링크가 이미 탐색 문맥에
연결된 link
요소에
생성되었을 때.
외부 리소스 링크의 link
요소가
탐색
문맥에 연결될 때.
이미 탐색 문맥에 연결된
외부 리소스 링크의
href
속성이 변경될 때.
이미 탐색 문맥에 연결된
외부 리소스 링크의
crossorigin
속성이 설정, 변경 또는 제거될 때.
prefetch
링크에 대해
link
요소 el을 사용하여
링크된
리소스를 가져오고 처리하는 알고리즘은 다음과 같습니다:
만약 el의 href
속성
값이
빈 문자열이라면, 반환합니다.
el에서 링크 옵션을 생성한 결과를 options로 둡니다.
options의 목적지를 빈 문자열로 설정합니다.
options을 기준으로 링크 요청을 생성한 결과를 request로 둡니다.
만약 request가 null이라면, 반환합니다.
request의 initiator를 "prefetch
"로 설정합니다.
다음 단계에 따라 응답 response와 null, 실패 또는 바이트 시퀀스 bytesOrNull을 지정하여 processPrefetchResponse를 설정합니다:
사용자 에이전트는 request를 가져오고, processResponseConsumeBody를 processPrefetchResponse로 설정합니다. 사용자 에이전트는 현재 문서에 필요한 다른 요청을 우선시하기 위해 request의 가져오기를 지연시킬 수 있습니다.
이 유형의 링크된 리소스에 대해 링크 헤더를 처리하는 단계는 아무 작업도 수행하지 않습니다.
preload
"
한 개의 엔진에서만 지원됩니다.
preload
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 외부 리소스 링크를 생성합니다. 이 키워드는 body-ok입니다.
preload
키워드는 사용자 에이전트가 사전 fetch하고 캐시된 리소스를 잠재적인
목적지에 따라 캐시할 것을 나타냅니다. 이 목적지는 as
속성과 우선순위에 따라 지정됩니다. 사용자 에이전트는 현재 탐색에 이 리소스가 필요할 가능성이 높습니다.
사용자 에이전트는 리소스를 로드할 때 이미지의 사전 디코딩 또는 스타일시트 생성과 같은 추가 작업을 수행할 수 있습니다. 그러나 이러한 추가 작업은 관찰 가능한 영향을 미치지 않습니다.
preload
키워드에 의해 지정된 리소스에는 기본
유형이 없습니다.
사용자 에이전트는 이 링크 유형에 대해 로드 이벤트를 지연시켜서는 안 됩니다.
이 링크와 관련된 리소스를 fetch 및 처리할 적절한 시점은 다음과 같습니다:
외부 리소스 링크가 이미 link
요소에 생성되었고 이 요소가 이미
브라우징 컨텍스트에 연결된
경우.
외부 리소스 링크의 link
요소가 브라우징 컨텍스트에 연결되는 경우.
외부 리소스 링크의 link
요소의 href
속성이 변경된 경우. 이 요소가 이미 브라우징 컨텍스트에 연결된
경우.
외부 리소스 링크의 link
요소의 as
속성이 변경된 경우. 이 요소가 이미 브라우징 컨텍스트에 연결된
경우.
외부 리소스 링크의 link
요소의 type
속성이 지정된 경우, 이전에는 지원되지 않는
유형이 지정된 요청
목적지로 인해 요청이 처리되지 않았던 경우. 이 요소가 이미 브라우징 컨텍스트에 연결된 경우에도 불구하고 속성이 설정, 제거 또는 변경됩니다.
외부 리소스 링크의 link
요소의 media
속성이 환경과 일치하지 않아 리소스가 얻어지지 않은
경우, 이 요소가 이미 브라우징
컨텍스트에 연결된 경우에 속성이 변경 또는 제거됩니다.
Document
에는 사전
로드된 리소스의 맵이 있습니다. 이 맵은 처음에는 비어 있는 순서가 있는 맵입니다.
사전 로드 키는 구조체입니다. 이 구조체에는 다음과 같은 항목이 포함됩니다:
same-origin
", "cors
" 또는
"no-cors
" 중 하나사전 로드 항목은 구조체입니다. 이 구조체에는 다음과 같은 항목이 포함됩니다:
사전 로드된 리소스 소비를 Window
window에 대해 수행하고, URL
url, 문자열 destination, 문자열 mode, 문자열 credentialsMode, 문자열
integrityMetadata 및 onResponseAvailable을 제공합니다. 이때 응답을 받아들이는 알고리즘이 사용됩니다:
key를 사전 로드 키로 설정합니다. 이 키의 URL은 url, 목적지는 destination, 모드는 mode, 자격 증명 모드는 credentialsMode입니다.
preloads를 window의 관련된 Document
의 사전 로드된 리소스의 맵으로
설정합니다.
key가 preloads에 존재하지 않으면 false를 반환합니다.
entry를 preloads[key]으로 설정합니다.
consumerIntegrityMetadata를 integrityMetadata를 구문 분석한 결과로 설정합니다.
preloadIntegrityMetadata를 entry의 무결성 메타데이터를 구문 분석한 결과로 설정합니다.
다음 조건 중 하나도 적용되지 않으면:
consumerIntegrityMetadata가 메타데이터 없음
인 경우;
consumerIntegrityMetadata가 preloadIntegrityMetadata와 동일한 경우;
이 비교는 알 수 없는 무결성 옵션을 무시합니다. 문제 #116을 참조하세요.
false를 반환합니다.
사전 로드와 소비자 간의 무결성 메타데이터 불일치, 설령 데이터가 일치하더라도 추가 네트워크 요청을 초래할 수 있습니다.
사전 로드 요청이 오류로 인해 실패하는 경우, 잘못된 응답이 나중에 네트워크에서 다시 요청되지 않도록 사전 로드 캐시에 네트워크 오류를 추가하는 것이 중요합니다. 이는 보안 문제와도 관련이 있습니다. 예를 들어, 개발자가 사전 로드 요청에 대해 하위 리소스 무결성 메타데이터를 지정했지만 이후 리소스 요청에서는 이를 지정하지 않은 경우를 고려해보십시오. 사전 로드 요청이 하위 리소스 무결성 검증에서 실패하고 버려지면, 리소스 요청은 네트워크에서 잠재적으로 악의적인 응답을 가져와 무결성 검증 없이 이를 소비할 수 있습니다. [SRI]를 참조하십시오.
entry의 응답이 null이면, entry의 응답 사용 가능 시를 onResponseAvailable로 설정합니다.
그렇지 않으면, entry의 응답으로 onResponseAvailable을 호출합니다.
true를 반환합니다.
이 섹션의 목적을 위해 문자열 type이 문자열 destination과 일치하는지 여부를 다음 알고리즘을 통해 확인할 수 있습니다:
만약 type이 빈 문자열이라면, true를 반환합니다.
만약 destination이 "fetch
"라면, true를 반환합니다.
mimeTypeRecord를 구문 분석한 결과로 설정합니다.
mimeTypeRecord가 실패로 설정되면, false를 반환합니다.
mimeTypeRecord가 사용자 에이전트에서 지원되지 않으면, false를 반환합니다.
다음 중 하나가 true인 경우:
destination이 "audio
" 또는 "video
"이며,
mimeTypeRecord가 오디오 또는 비디오 MIME 유형인 경우;
destination이 스크립트와 유사한 목적지이며, mimeTypeRecord가 JavaScript MIME 유형인 경우;
destination이 "image
"이며, mimeTypeRecord가 이미지 MIME 유형인 경우;
destination이 "font
"이며, mimeTypeRecord가 폰트 MIME 유형인 경우;
destination이 "json
"이며, mimeTypeRecord가 JSON MIME 유형인 경우;
그러면 true를 반환합니다.
false를 반환합니다.
사전 로드 키 생성을 요청 request에 대해 수행하고, 새 사전 로드 키를 반환합니다. 이 키의 URL은 request의 URL, 목적지는 request의 목적지, 모드는 request의 모드, 자격 증명 모드는 request의 자격 증명 모드입니다.
사전 로드 목적지 변환을 문자열 destination을 주어진 상태에서 수행합니다:
destination이 "fetch
", "font
", "image
",
"script
", "style
", 또는 "track
"가 아니면 null을 반환합니다.
destination을 변환한 결과를 반환합니다.
사전 로드를 링크 처리 옵션 options 및 응답을 허용하는 선택적 processResponse와 함께 수행합니다:
options의 유형이 options의 유형과 일치하지 않으면, 리턴합니다.
options의 목적지가 "image
"이며, options의
소스 세트가 null이 아닌 경우,
options의 href를 소스 세트에서 이미지 소스를 선택하는 것의 결과로 설정합니다.
request를 링크 요청 생성의 결과로 설정합니다.
request가 null이면 리턴합니다.
unsafeEndTime을 0으로 설정합니다.
entry를 새 사전 로드 항목으로 설정합니다. 이 항목의 무결성 메타데이터는 options의 무결성입니다.
key를 사전 로드 키 생성의 결과로 설정합니다.
options의 문서가
"pending
"이면, request의 initiator 유형을 "early hint
"로 설정합니다.
controller를 null로 설정합니다.
reportTiming을 타이밍을 보고하기로 설정합니다. 이때 controller는 document의 관련된 전역 객체를 기준으로 합니다.
controller를 요청을 fetch한 결과로 설정합니다. processResponseConsumeBody는 응답 response 및 null, 실패 또는 바이트 시퀀스 bodyBytes를 받아들이는 알고리즘으로 설정합니다:
bodyBytes가 바이트 시퀀스인 경우, response의 바디를 바디로 설정합니다.
processResponseConsumeBody를 사용하여 전체 바디를 추출했습니다. 이는 사전 로더가 네트워크에서 전체 바디를 로드하도록 보장하는 데 필요합니다. 사전 로드가 소비될지 여부는 이 시점에서 불확실합니다. 그런 다음, 우리는 이미 한 번 이를 수행했음에도 불구하고, 요청의 바디를 동일한 바이트를 포함하는 새 바디로 재설정하여 다른 명세가 실제 소비 시점에 이를 읽을 수 있도록 합니다.
그렇지 않으면, response를 네트워크 오류로 설정합니다.
unsafeEndTime을 unsafe shared current time으로 설정합니다.
options의 문서가 null이 아니면, options의 문서를 주어진 상태로 reportTiming을 호출합니다.
entry의 응답 사용 가능 시가 null이면, entry의 응답을 response로 설정합니다. 그렇지 않으면, entry의 응답 사용 가능 시를 주어진 상태로 response로 호출합니다.
processResponse가 주어진 경우, response와 함께 processResponse를 호출합니다.
commit을 Document
document에 주어진 상태로 다음 단계로 설정합니다:
entry의 응답이 null이 아니면, document를 주어진 상태로 reportTiming을 호출합니다.
document의 사전 로드된 리소스의 맵[key]을 entry로 설정합니다.
options의 문서가 null이면, options의 문서 준비 시를 commit으로 설정합니다. 그렇지 않으면, options의 문서와 함께 commit을 호출합니다.
연결된
리소스를 fetch하고 처리하는 단계는, 주어진 link
요소 el에 대해
수행됩니다:
소스 세트 업데이트를 el에 대해 수행합니다.
options을 요소에서 링크 옵션 생성의 결과로 설정합니다.
사전 로드를 options에 대해 수행합니다. 이때, 주어진 응답 response와 함께 다음 단계로 수행됩니다:
링크 헤더를 처리하는 단계는, 주어진 링크 처리 옵션 options에 대해 사전 로드를 수행하는 것입니다.
privacy-policy
"privacy-policy
키워드는
link
, a
, 그리고 area
요소와 함께 사용할 수 있습니다.
이 키워드는
하이퍼링크를 만듭니다.
privacy-policy
키워드는 참조된 문서가 현재 문서에 적용되는 데이터 수집 및 사용 관행에 대한 정보를 포함하고 있음을 나타냅니다. 자세한 내용은 추가 링크 관계 유형에서 설명되어 있습니다.
참조된 문서는 독립적인 개인정보 보호 정책이거나, 보다 일반적인 문서의 특정 섹션일 수 있습니다. [RFC6903]
search
"search
키워드는
link
,
a
, area
, 그리고 form
요소와 함께 사용할 수 있습니다. 이
키워드는
하이퍼링크를 만듭니다.
search
키워드는 참조된 문서가
문서 및 관련 리소스를 검색하기 위한 인터페이스를 제공함을 나타냅니다.
OpenSearch 설명 문서는 link
요소와
search
링크 유형과 함께 사용하여
사용자 에이전트가 검색 인터페이스를 자동으로 검색할 수 있도록 할 수 있습니다. [OPENSEARCH]
stylesheet
"
stylesheet
키워드는 link
요소와 함께 사용할 수 있습니다. 이 키워드는 스타일링 처리 모델에 기여하는 외부 리소스 링크를 만듭니다. 이 키워드는
body-ok입니다.
지정된 리소스는 문서의 표현 방법을 설명하는 CSS 스타일 시트입니다.
하나의 엔진에서만 지원됨.
만약 대체
키워드가 또한
link
요소에 지정된 경우,
해당 링크는 대체 스타일 시트입니다; 이 경우, title
속성이
link
요소에 비어 있지 않은 값으로
지정되어야 합니다.
stylesheet
키워드에 의해 제공된 리소스의 기본 유형은 text/css
입니다.
이 유형의 link
요소는
해당 요소가 노드 문서의 파서에 의해 생성된 경우, 암묵적으로 잠재적으로 렌더링 차단될 수 있습니다.
키워드 비활성화
가 있는
link
요소의 stylesheet
키워드가 설정되면, CSS 스타일 시트를
비활성화합니다.
이 유형의 링크를 가져오고 처리하는 적절한 시간은 다음과 같습니다:
외부 리소스 링크가 이미 탐색 컨텍스트에 연결된
link
요소에 생성된 경우.
외부 리소스 링크의 link
요소가 탐색 컨텍스트에 연결되는 경우.
이미 탐색 컨텍스트에
연결된 외부 리소스
링크의 link
요소의 href
속성이 변경된 경우.
이미 탐색 컨텍스트에
연결된 외부 리소스
링크의 link
요소의 비활성화
속성이
설정, 변경 또는 제거된 경우.
이미 탐색 컨텍스트에
연결된 외부 리소스
링크의 link
요소의 crossorigin
속성이 설정, 변경 또는 제거된 경우.
이미 탐색 컨텍스트에
연결된 외부 리소스
링크의 link
요소의 type
속성이 이전에 얻은 외부
리소스의 콘텐츠 유형 메타데이터와 일치하지 않는 값으로 설정되거나 변경된
경우.
이미 탐색 컨텍스트에
연결된 외부 리소스
링크의 link
요소의 type
속성이 지원되지 않는
유형을 지정하여 리소스를 얻지 못했지만, 속성이 제거되거나 변경된 경우.
이미 탐색 컨텍스트에 연결된 외부 리소스 링크가 대체 스타일 시트에서 그렇지 않은 상태로, 또는 그 반대로 변경된 경우.
특이 사항: 문서가 퀴크 모드로 설정되어 있으며,
외부 리소스의 동일 출처와 URL이 동일하고, 외부 리소스의 콘텐츠 유형 메타데이터가 지원되는 스타일 시트 유형이 아닌 경우, 사용자 에이전트는
대신 이를 text/css
로 가정해야 합니다.
이 유형의 링크된 리소스에 대해 링크된 리소스 가져오기 설정 단계는 link
요소 el 및 요청 request가 주어진 경우 다음과 같습니다:
만약 el의 비활성화
속성이 설정되어 있으면, false를 반환합니다.
만약 el이 스크립트 차단 스타일 시트에 기여하는 경우, el을 노드 문서의 스크립트 차단 스타일 시트 세트에 추가합니다.
만약 el의 미디어
속성의 값이 환경과 일치하며,
el이 잠재적으로 렌더링을 차단할 수 있는 경우, 렌더링을 차단합니다.
true를 반환합니다.
이슈 #968에서는 CSSOM CSS 스타일 시트 가져오기 알고리즘을 사용하여 기본 가져오기 및 처리 알고리즘을 대체할 계획을 설명합니다.
이와 동시에, 중요한 하위 리소스 요청은 link
요소가 현재 렌더링 차단 중인지 여부에 따라 렌더링 차단으로 설정되어야 합니다.
이 유형의 링크된 리소스를 처리하려면, link
요소 el,
boolean success, 응답 response, 그리고 바이트 시퀀스 bodyBytes가 주어집니다.
리소스의 콘텐츠 유형 메타데이터가 text/css
가 아닌 경우, success를
false로 설정합니다.
만약 el이 더 이상 스타일링 처리 모델에 기여하는 외부 리소스 링크를 생성하지 않거나, 해당 리소스를 가져온 이후에 해당 리소스를 다시 가져오는 것이 적절해진 경우, 다음 단계를 수행합니다:
제거 el을 el의 노드 문서의 스크립트 차단 스타일 시트 세트에서 제거합니다.
반환합니다.
만약 el이 연관된 CSS 스타일 시트를 가지고 있다면, CSS 스타일 시트를 제거합니다.
만약 success가 true인 경우, 다음 단계를 수행합니다:
CSS 스타일 시트를 생성합니다, 다음 속성으로:
response의 URL 목록[0]
우리는 w3c/csswg-drafts 이슈 #9316이 해결될 것이라는 가정 하에 URL을 제공합니다.
el
el의 미디어
속성.
이것은 현재 속성의 값이 아니라, (이 시점에 있을 수도 있는) 속성에 대한 참조입니다. CSSOM은 속성이 동적으로 설정, 변경 또는 제거될 때 발생하는 일을 정의합니다.
el이 문서 트리 안에 있는 경우에는 el의 title
속성. 그렇지 않으면 빈 문자열.
이것도 역시 속성의 현재 값이 아닌 속성에 대한 참조입니다.
설정된 경우 링크는 대체 스타일 시트입니다 및 el의 명시적으로 활성화됨이 false인 경우; 그렇지 않으면 설정되지 않음.
리소스가 CORS-동일 출처인 경우 설정됨; 그렇지 않으면 설정되지 않음.
null
기본값으로 설정됨.
초기화되지 않음.
이것은 옳지 않은 것 같습니다. 아마도 bodyBytes를 사용해야 할 것입니다? 이슈 #2997에서 추적됩니다.
CSS 환경 인코딩은 다음 단계를 수행하여 실행된 결과입니다: [CSSSYNTAX]
만약 el에 charset
속성이 있다면,
해당 속성 값에서 인코딩을
가져옵니다. 만약 성공하면, 해당 결과 인코딩을 반환합니다. [ENCODING]
그렇지 않으면 문서의 문자 인코딩을 반환합니다. [DOM]
만약 el이 스크립트 차단 스타일 시트에 기여하는 경우:
단언: el의 노드 문서의 스크립트 차단 스타일 시트 세트에 el이 포함되어 있습니다.
제거합니다. el을 el의 노드 문서의 스크립트 차단 스타일 시트 세트에서.
렌더링 차단 해제합니다. el에서.
이 유형의 링크된 리소스에 대한 링크 헤더 처리 단계는 아무 것도 하지 않는 것입니다.
tag
"tag
키워드는
a
및
area
요소와 함께 사용할 수 있습니다. 이 키워드는
하이퍼링크를 생성합니다.
tag
키워드는 참조된 문서가 표현하는
tag가 현재 문서에 적용됨을 나타냅니다.
태그가 현재 문서에 적용됨을 나타내기 때문에, 여러 페이지에 걸쳐 인기 태그를 나열하는 tag cloud의 마크업에서는 이 키워드를 사용하는 것이 부적절할 수 있습니다.
이 문서는 보석에 관한 것이므로
"https://en.wikipedia.org/wiki/Gemstone
"와 같은 태그로 태그되어 있으며, 이는 이 문서가
미국의 도시들, 루비 패키지 형식, 또는 스위스 기관차 클래스가 아닌 "보석" 종류의 보석에 적용됨을 명확하게 분류합니다.
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > My Precious</ title >
</ head >
< body >
< header >< h1 > My precious</ h1 > < p > Summer 2012</ p ></ header >
< p > Recently I managed to dispose of a red gem that had been
bothering me. I now have a much nicer blue sapphire.</ p >
< p > The red gem had been found in a bauxite stone while I was digging
out the office level, but nobody was willing to haul it away. The
same red gem stayed there for literally years.</ p >
< footer >
Tags: < a rel = tag href = "https://en.wikipedia.org/wiki/Gemstone" > Gemstone</ a >
</ footer >
</ body >
</ html >
이 문서에는 두 개의 기사(articles)가 있습니다. 그러나 "tag
" 링크는 페이지 전체에 적용됩니다 (기사
article
요소 안에
위치하더라도 동일하게 적용됩니다).
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Gem 4/4</ title >
</ head >
< body >
< article >
< h1 > 801: Steinbock</ h1 >
< p > The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</ p >
</ article >
< article >
< h1 > 802: Murmeltier</ h1 >
< figure >
< img src = "https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg" alt = "The 802 was red with pantographs and tall vents on the side." >
< figcaption > The 802 in the 1980s, above Lago Bianco.</ figcaption >
</ figure >
< p > The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</ p >
</ article >
</ p class = "topic" >< a rel = tag href = "https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4" > Gem 4/4</ a ></ p >
</ body >
</ html >
terms-of-service
"terms-of-service
키워드는
link
,
a
,
및 area
요소와 함께 사용할 수
있습니다.
이 키워드는 하이퍼링크를 생성합니다.
terms-of-service
키워드는 참조된 문서에 현재 문서의 제공자와 해당 문서를 사용하려는 사용자 간의 계약에 대한 정보가 포함되어 있음을 나타냅니다.
자세한 내용은 추가 링크 관계 유형에서 설명되어 있습니다. [RFC6903]
일부 문서는 문서 시퀀스의 일부를 형성합니다.
문서 시퀀스는 각 문서가 이전 형제 문서와 다음 형제 문서를 가질 수 있는 경우입니다. 이전 형제 문서가 없는 문서는 시퀀스의 시작이며, 다음 형제 문서가 없는 문서는 시퀀스의 끝입니다.
문서는 여러 시퀀스의 일부일 수 있습니다.
next
"next
키워드는
link
,
a
,
area
,
및 form
요소와 함께 사용할 수 있습니다.
이 키워드는 하이퍼링크를 생성합니다.
next
키워드는 문서가 시퀀스의 일부이며,
링크가 시퀀스에서 다음 논리적 문서로 연결된다는 것을 나타냅니다.
next
키워드가
link
요소와 함께 사용될 때,
사용자 에이전트는 이러한 링크를
dns-prefetch
,
preconnect
, 또는
prefetch
키워드를 사용하는 것처럼 처리해야
합니다.
사용자 에이전트가 사용할 키워드는 구현에 따라 다릅니다.
예를 들어, 사용자 에이전트는 데이터, 배터리 전력, 또는 처리 능력을 절약하려고 할 때
비용이 적게 드는 preconnect
처리 모델을 사용하려고 하거나,
비슷한 상황에서 과거 사용자 행동에 대한 휴리스틱 분석에 따라 키워드를 선택할 수 있습니다.
prev
"prev
키워드는
link
,
a
,
area
,
및 form
요소와 함께 사용할 수 있습니다.
이 키워드는 하이퍼링크를 생성합니다.
prev
키워드는 문서가 시퀀스의 일부이며,
링크가 시퀀스에서 이전 논리적 문서로 연결된다는 것을 나타냅니다.
동의어: 역사적인 이유로, 사용자 에이전트는 "previous
" 키워드를
prev
키워드와 동일하게 처리해야 합니다.
사전 정의된 링크 유형 세트의 확장은 기존 rel 값에 대한 마이크로포맷 페이지에 등록될 수 있습니다. [MFREL]
누구나 언제든지 기존 rel 값에 대한 마이크로포맷 페이지를 편집하여 유형을 추가할 수 있습니다. 확장 유형은 다음 정보를 포함하여 지정해야 합니다:
정의된 실제 값. 값은 다른 정의된 값과 혼동되지 않도록 해야 합니다(예: 대소문자만 다른 경우).
값에 U+003A COLON 문자(:)가 포함된 경우, 절대 URL이어야 합니다. 절대 URL을 참조하십시오.
link
에 미치는 영향
다음 중 하나:
link
요소에
지정되어서는 안 됩니다.
link
요소에 지정될
수 있으며,
하이퍼링크를 생성합니다.
link
요소에 지정될
수 있으며,
외부 리소스 링크를 생성합니다.
a
및 area
에 미치는 영향
다음 중 하나:
a
및 area
요소에 지정되어서는 안
됩니다.
a
및 area
요소에 지정될 수 있으며,
하이퍼링크를 생성합니다.
a
및 area
요소에 지정될 수 있으며,
외부 리소스 링크를 생성합니다.
a
및 area
요소에 지정될 수 있으며,
해당 요소에 의해 생성된 다른 하이퍼링크를 주석으로 추가합니다.
form
에 미치는 영향
다음 중 하나:
form
요소에
지정되어서는 안 됩니다.
form
요소에 지정될
수 있으며,
하이퍼링크를 생성합니다.
form
요소에 지정될
수 있으며,
외부 리소스 링크를 생성합니다.
form
요소에 지정될
수 있으며,
해당 요소에 의해 생성된 다른 하이퍼링크를 주석으로 추가합니다.
키워드의 의미를 비규범적으로 짧게 설명합니다.
키워드의 의미와 요구사항에 대한 자세한 설명을 링크합니다. 이는 위키의 다른 페이지일 수 있으며, 외부 페이지에 대한 링크일 수 있습니다.
처리 요구사항이 완전히 동일한 다른 키워드 값의 목록입니다. 작성자는 동의어로 정의된 값을 사용해서는 안 되며, 이는 레거시 콘텐츠 지원을 위해서만 사용됩니다. 실사용되지 않는 동의어는 누구나 제거할 수 있습니다. 레거시 콘텐츠와의 호환성을 위해 동의어로 처리해야 하는 값만 등록되어야 합니다.
다음 중 하나:
키워드가 기존 값과 중복되는 것으로 판단되면 제거하고 기존 값의 동의어로 나열해야 합니다.
키워드가 "제안됨" 상태로 한 달 이상 등록되었지만 사용되지 않거나 명세되지 않은 경우, 레지스트리에서 제거될 수 있습니다.
키워드가 "제안됨" 상태로 추가되었으며 기존 값과 중복되는 것으로 판단되면 제거하고 기존 값의 동의어로 나열해야 합니다. 키워드가 "제안됨" 상태로 추가되었으며 해롭다고 판단되면 "중단됨" 상태로 변경해야 합니다.
누구나 언제든지 상태를 변경할 수 있지만, 위에서 설명한 정의에 따라야 합니다.
적합성 검사 도구는 기존 rel 값에 대한 마이크로포맷 페이지에서 제공된 정보를 사용하여 값이 허용되는지 여부를 판단해야 합니다. 이 명세서에서 정의된 값 또는 "제안됨" 또는 "비준됨"으로 표시된 값은 "Effect on..." 필드에서 설명한 대로 적용할 수 있는 요소에서 사용될 때 수락되어야 하며, "중단됨"으로 표시되거나 이 명세서 또는 위의 페이지에 나열되지 않은 값은 유효하지 않은 것으로 거부되어야 합니다. 적합성 검사 도구는 성능 향상 또는 신뢰할 수 없는 네트워크 연결을 피하기 위해 이 정보를 캐시할 수 있습니다.
작성자가 이 명세서 또는 위키 페이지에서 정의되지 않은 새 유형을 사용하는 경우, 적합성 검사 도구는 위에서 설명한 세부 사항을 포함하여 값을 "제안됨" 상태로 위키에 추가하도록 제안해야 합니다.
"제안됨" 또는 "비준됨" 상태로 "기존 rel 값에 대한 마이크로포맷 페이지"에서 확장으로 정의된 유형은 "Effect on..." 필드에 따라 rel
속성을 사용하여 link
, a
, 및 area
요소와 함께 사용할 수 있습니다. [MFREL]
ins
및 del
요소는 문서에 대한 수정을 나타냅니다.
ins
요소모든 최신 엔진에서 지원됩니다.
cite
— 인용문의 출처 또는 수정에 대한 추가 정보로
연결되는 링크
datetime
— 변경의 날짜 및 (선택적)
시간
HTMLModElement
를 사용합니다.
다음은 단일 단락의 추가를 나타냅니다:
< aside >
< ins >
< p > I like fruit. </ p >
</ ins >
</ aside >
다음과 같이 aside
요소 안에 있는 모든 것이
프레이징 콘텐츠로 간주되므로 하나의 단락만 포함됩니다:
< aside >
< ins >
Apples are < em > tasty</ em > .
</ ins >
< ins >
So are pears.
</ ins >
</ aside >
ins
요소는 암시된 단락 경계를 넘어서는 안 됩니다.
다음 예는 두 개의 단락 추가를 나타내며, 두 번째 단락은 두 부분으로 삽입되었습니다. 이 예에서 첫 번째 ins
요소는 단락 경계를 넘기 때문에 좋지 않은
형식으로 간주됩니다.
< aside >
<!-- 이렇게 하지 마세요 -->
< ins datetime = "2005-03-16 00:00Z" >
< p > I like fruit. </ p >
Apples are < em > tasty</ em > .
</ ins >
< ins datetime = "2007-12-19 00:00Z" >
So are pears.
</ ins >
</ aside >
여기에서 더 나은 마크업 방식입니다. 더 많은 요소를 사용하지만, 요소가 암시된 단락 경계를 넘지 않습니다.
< aside >
< ins datetime = "2005-03-16 00:00Z" >
< p > I like fruit. </ p >
</ ins >
< ins datetime = "2005-03-16 00:00Z" >
Apples are < em > tasty</ em > .
</ ins >
< ins datetime = "2007-12-19 00:00Z" >
So are pears.
</ ins >
</ aside >
del
요소모든 최신 엔진에서 지원됩니다.
cite
— 인용문의 출처 또는 수정에 대한 추가 정보로
연결되는 링크
datetime
— 변경의 날짜 및 (선택적)
시간
HTMLModElement
를 사용합니다.
del
요소는 암시된 단락 경계를 넘어서는 안 됩니다.
다음은 완료된 항목들이 완료 시간과 함께 취소선으로 표시된 '할 일' 목록을 보여줍니다.
< h1 > 할 일</ h1 >
< ul >
< li > 식기세척기 비우기</ li >
< li >< del datetime = "2009-10-11T01:25-07:00" > Walter Lewin의 강의 시청</ del ></ li >
< li >< del datetime = "2009-10-10T23:38-07:00" > 더 많은 트랙 다운로드</ del ></ li >
< li > 프린터 구매</ li >
</ ul >
ins
및 del
요소에 공통된
속성cite
속성은 변경 사항을 설명하는 문서의
URL을 지정하는 데 사용할 수 있습니다. 예를 들어 회의록과 같은 긴 문서일 경우, 저자들은 변경 사항을 논의한
문서의 특정 부분을 가리키는 조각(fragment)을 포함하는 것이 권장됩니다.
cite
속성이 존재하는
경우, 이는 변경 사항을 설명하는 유효한 URL(주변에 공백이 있을 수
있음)이어야 합니다. 해당 속성의 값을 얻으려면, 속성의 값은 요소의 노드 문서에 상대적으로 구문
분석되어야 합니다. 사용자 에이전트는 사용자가 이러한 인용 링크를 따를 수 있도록 허용할 수 있지만, 주로 개인적인 용도(예: 사이트 수정 사항에 대한 통계를 수집하는 서버 측 스크립트
등)를 위한 것이지, 독자를 위한 것이 아닙니다.
datetime
속성은 변경의 날짜와
시간을 지정하는 데 사용할 수 있습니다.
존재하는 경우, datetime
속성의 값은 선택적으로 시간이 포함된 유효한 날짜
문자열이어야 합니다.
사용자 에이전트는 datetime
속성을 날짜 또는 시간 문자열을 구문 분석 알고리즘에 따라 구문
분석해야 합니다. 만약 이 알고리즘이 날짜 또는
전역 날짜와 시간을 반환하지 않으면,
해당 수정에는 관련된 타임스탬프가 없는 것으로 간주됩니다(값이 비표준적임; 유효한 날짜 문자열이 아님). 그렇지 않으면, 수정이 주어진 날짜 또는 전역 날짜와 시간에 이루어진 것으로 표시됩니다. 만약 주어진 값이 전역 날짜와 시간이라면, 사용자
에이전트는 주어진 datetime을 표시할 시간대를 결정하기 위해 관련된 시간대 오프셋 정보를 사용해야 합니다.
이 값은 사용자에게 표시될 수 있지만, 주로 개인적인 용도를 위한 것입니다.
ins
및
del
요소는
HTMLModElement
인터페이스를 구현해야 합니다:
모든 최신 엔진에서 지원됩니다.
[Exposed =Window ]
interface HTMLModElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString cite ;
[CEReactions ] attribute DOMString dateTime ;
};
cite
IDL 속성은 요소의
cite
콘텐츠
속성을 반영해야 합니다. dateTime
IDL 속성은
요소의 datetime
콘텐츠 속성을 반영해야 합니다.
이 섹션은 비규범적입니다.
ins
및 del
요소는 단락에 영향을 미치지 않으므로, p
요소 없이 암시된 단락이 있는 경우, ins
또는 del
요소가 전체 단락 또는 다른 프레이징 콘텐츠 요소와 다른 단락의 일부를 포함할 수 있습니다.
예를 들어:
< section >
< ins >
< p >
This is a paragraph that was inserted.
</ p >
This is another paragraph whose first sentence was inserted
at the same time as the paragraph above.
</ ins >
This is a second sentence, which was there all along.
</ section >
일부 단락만 p
요소로 감싸면, 동일한 ins
또는 del
요소로 첫 번째 단락의 끝, 전체 두 번째
단락, 세 번째 단락의 시작을 포함할 수도 있습니다(그러나 이는 매우 혼란스러우며, 좋은 관행으로 간주되지 않습니다):
< section >
This is the first paragraph. < ins > This sentence was inserted.
< p > This second paragraph was inserted.</ p >
This sentence was inserted too.</ ins > This is the
third paragraph in this example.
<!-- (이렇게 하지 마세요) -->
</ section >
그러나 암시된 단락이 정의되는 방식 때문에, 동일한 ins
또는 del
요소를 사용하여 한 단락의 끝과 다음 단락의
시작을 동시에 표시하는 것은 불가능합니다. 대신에, p
요소 하나(또는 두 개)와 ins
또는 del
요소 두 개를 사용해야 합니다. 예를 들어:
< section >
< p > This is the first paragraph. < del > This sentence was deleted.</ del ></ p >
< p >< del > This sentence was deleted too.</ del > That
sentence needed a separate < del> element.</ p >
</ section >
위에서 설명한 혼란스러움 때문에, 저자들은 모든 단락을 암시된 단락 경계를 넘지 않는 p
요소로 항상 마크업할 것을 강력히 권장합니다.
이 섹션은 비규범적입니다.
ol
및 ul
요소의 콘텐츠 모델은 ins
및 del
요소를 자식 요소로 허용하지 않습니다. 목록은 삭제된 것으로
표시될 항목을 포함하여 모든 항목을 항상 나타냅니다.
항목이 삽입되었거나 삭제되었음을 나타내기 위해 ins
또는
del
요소를 li
요소의 내용 주위에 감쌀 수 있습니다. 항목이 다른 항목으로
교체되었음을 나타내기 위해 단일 li
요소에 하나 이상의
del
요소와 하나 이상의 ins
요소를 사용할 수 있습니다.
다음 예에서, 처음에는 비어 있던 목록에 시간이 지남에 따라 항목이 추가되고 제거되었습니다. 강조된 예제의 부분들은 목록의 '현재' 상태를 보여줍니다. 그러나 목록 항목 번호는 수정 사항을 고려하지 않습니다.
< h1 > 출하 정지 버그</ h1 >
< ol >
< li >< ins datetime = "2008-02-12T15:20Z" > 버그 225: 눈이 올 때 우비 감지기가 작동하지 않음</ ins ></ li >
< li >< del datetime = "2008-03-01T20:22Z" >< ins datetime = "2008-02-14T12:02Z" > 버그 228: 4월에 물 버퍼 오버플로우 발생</ ins ></ del ></ li >
< li >< ins datetime = "2008-02-16T13:50Z" > 버그 230: 온수기가 재생 가능한 연료를 사용하지 않음</ ins ></ li >
< li >< del datetime = "2008-02-20T21:15Z" >< ins datetime = "2008-02-16T14:25Z" > 버그 232: 시동 후 이산화탄소 배출 감지됨</ ins ></ del ></ li >
</ ol >
다음 예에서, 처음에는 과일만 있던 목록이 색상만 있는 목록으로 교체되었습니다.
< h1 > List of < del > fruits</ del >< ins > colors</ ins ></ h1 >
< ul >
< li >< del > Lime</ del >< ins > Green</ ins ></ li >
< li >< del > Apple</ del ></ li >
< li > Orange</ li >
< li >< del > Pear</ del ></ li >
< li >< ins > Teal</ ins ></ li >
< li >< del > Lemon</ del >< ins > Yellow</ ins ></ li >
< li > Olive</ li >
< li >< ins > Purple</ ins ></ li >
</ ul >
이 섹션은 비규범적입니다.
표 모델의 일부를 구성하는 요소들은 복잡한 콘텐츠 모델 요구 사항을 가지고 있어 ins
및 del
요소를 허용하지 않으므로 표에 대한 수정을 나타내는 것이
어려울 수 있습니다.
전체 행이나 열이 추가되거나 제거되었음을 나타내기 위해 해당 행이나 열의 각 셀의 내용을 ins
또는 del
요소로 감쌀 수 있습니다.
여기에서 표의 행이 추가되었습니다:
< table >
< thead >
< tr > < th > 게임 이름 < th > 게임 배급사 < th > 평가
</ thead >
< tbody >
< tr > < td > 디아블로 2 < td > 블리자드 < td > 8/10
</ tr > < td > 포탈 < td > 밸브 < td > 10/10
< tr > < td > < ins > 포탈 2</ ins > < td > < ins > 밸브</ ins > < td > < ins > 10/10</ ins >
</ tbody >
</ table >
여기에서 열이 제거되었습니다 (제거된 시간과 이유를 설명하는 페이지에 대한 링크도 포함되어 있습니다):
< table >
< thead >
< tr > < th > 게임 이름 < th > 게임 배급사 < th > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 평가</ del >
</ thead >
< tbody >
< tr > < td > 디아블로 2 < td > 블리자드 < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 8/10</ del >
</ tr > < td > 포탈 < td > 밸브 < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 10/10</ del >
</ tr > < td > 포탈 2 < td > 밸브 < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 10/10</ del >
</ tbody >
</ table >
일반적으로 말해서, 더 복잡한 수정을 나타내는 좋은 방법은 없습니다 (예: 셀이 제거되고 모든 후속 셀이 위로 또는 왼쪽으로 이동하는 경우).
picture
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
source
요소, 그
뒤에 1개의 img
요소가 옵니다. 선택적으로
스크립트 지원 요소와
혼합될 수 있습니다.
[Exposed =Window ]
interface HTMLPictureElement : HTMLElement {
[HTMLConstructor ] constructor ();
};
picture
요소는 그 안에 포함된
img
요소에 여러 소스를 제공하는 컨테이너로,
화면의 픽셀 밀도, 뷰포트 크기, 이미지 형식, 기타 요인에 따라 어떤 이미지 리소스를 사용할지 사용자 에이전트에 힌트를 주거나 선언적으로 제어할 수 있도록
해줍니다. 이 요소는 그 자식을 나타냅니다.
picture
요소는
비슷해 보이는 video
및 audio
요소와는 다소 다릅니다. 이들 모두
source
요소를 포함하지만, source
요소의 src
속성은 picture
요소 내에 중첩될 때 의미가
없으며, 리소스 선택 알고리즘도 다릅니다. 또한, picture
요소 자체는 아무것도
표시하지 않으며, 단지 포함된 img
요소가 여러
URL 중에서 선택할
수 있는 컨텍스트를 제공합니다.
source
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
picture
요소의 자식으로,
img
요소 앞에 사용됩니다.
track
요소 앞에 사용됩니다.
type
— 임베디드 리소스의 유형
media
— 적용 가능한 미디어
src
(audio
또는 video
에서) — 리소스의 주소
srcset
(picture
에서) — 고해상도
디스플레이, 작은 모니터 등 다양한 상황에서 사용할 이미지
sizes
(picture
에서) — 다양한 페이지
레이아웃에 맞는 이미지 크기
width
(picture
에서) — 가로 크기
height
(picture
에서) — 세로 크기
[Exposed =Window ]
interface HTMLSourceElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute USVString srcset ;
[CEReactions ] attribute DOMString sizes ;
[CEReactions ] attribute DOMString media ;
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
};
source
요소는 img
요소를 위해 여러 개의 대체 소스 세트를 지정하거나 미디어 요소를 위해 여러 개의 대체 미디어 리소스를 지정할 수 있도록 합니다. 이 요소는 자체적으로는 어떠한 것도 나타내지 않습니다.
type
속성은 선택적으로 포함될 수
있습니다. 포함된 경우 값은 유효한 MIME 유형
문자열이어야 합니다.
media
속성도 포함될 수 있습니다.
포함된 경우 값은 유효한 미디어 쿼리 목록을 포함해야
합니다. 사용자는 이 값이 환경과 일치하지 않으면
다음 source
요소로 건너뜁니다.
media
속성은 리소스 선택 알고리즘 동안 한
번만 평가됩니다. 미디어 요소에 대해서는 다르게 평가되지만, picture
요소를 사용하는 경우, 사용자
에이전트는 환경의 변화에 따라 반응합니다.
나머지 요구 사항은 부모 요소가 picture
요소인지, 미디어 요소인지에 따라 달라집니다:
source
요소의 부모가 picture
요소인 경우
srcset
속성이
반드시 포함되어야 하며, 이는 srcset 속성입니다.
srcset
속성은 이미지 소스를 소스 세트에 기여하며, source
요소가 선택되면 해당
속성이 기여합니다.
만약 srcset
속성이 이미지 후보 문자열을 포함하고 있으며,
이 문자열이 너비 설명자를 사용하는 경우, sizes
속성이 포함될 수
있습니다. 또한, img
요소가 자동 크기 조정을 허용하지 않으면, sizes
속성이 반드시 포함되어야
합니다. sizes
속성은 sizes 속성으로, source
요소가 선택되면 소스 크기에 기여합니다.
만약 img
요소가
자동 크기 조정을 허용하는 경우, 이전 형제 source
요소에서는 sizes
속성을 생략할 수
있습니다. 이 경우, 이는 auto
를
지정하는 것과 동일합니다.
source
요소는 크기 속성을 지원합니다. img
요소는 width
및 height
속성을 source
요소에서 사용할 수
있으며, 해당 요소를 사용하여 렌더링 크기와 종횡비를 결정합니다. 이는 렌더링 섹션에 정의된 대로입니다.
type
속성은 이미지 유형을
제공하며, 사용자 에이전트가 이 유형을 지원하지 않는 경우 다음 source
요소로 건너뛸 수
있습니다.
만약 type
속성이 지정되지 않은 경우, 사용자 에이전트는 해당 이미지를 가져온 후에 이미지 형식을 지원하지 않는 것을 발견하더라도 다른 source
요소를 선택하지
않습니다.
만약 source
요소가 다음
형제 source
요소 또는
img
요소를 가지며, srcset
속성이 지정된 경우, 다음 중 하나
이상을 포함해야 합니다:
media
속성이
지정되어 있으며, 이 값은 앞뒤의 ASCII 공백을 제거한 후 빈 문자열이
아니며, "all" 문자열과 ASCII
대소문자 무시 비교로 일치하지 않습니다.
type
속성이 지정되어
있습니다.
src
속성은 포함되지 않아야 합니다.
source
요소의 부모가 미디어 요소인 경우
src
속성은 URL을
지정하며, 이 값은 유효한 비어 있지 않은 URL이어야
합니다. 이 속성은 반드시 포함되어야 합니다.
type
속성은 미디어 리소스의 유형을 제공하며, 사용자 에이전트가 이 미디어 리소스를 가져오기 전에 재생할 수 있는지 확인하는 데
도움이 됩니다. 특정 MIME 유형이 정의한 코덱
매개변수가 리소스의 인코딩 방식을 정확히 지정해야 할 수도 있습니다. [RFC6381]
source
요소의 src
또는 type
속성을 요소가 이미 video
또는 audio
요소에 삽입된 상태에서
동적으로 수정해도 효과가 없습니다. 재생 중인 내용을 변경하려면 해당 미디어
요소의 src
속성을 직접
사용하십시오. 이때 사용할 수 있는 리소스를 선택하기 위해 canPlayType()
메서드를 사용할 수 있습니다. 일반적으로 source
요소를 문서가 구문
분석된 후 수동으로 조작하는 것은 불필요하게 복잡한 접근 방식입니다.
다음 목록은 codecs=
MIME 매개변수를 type
속성에서 사용하는 방법의
예를 보여줍니다.
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.58A01E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.64001E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"' >
< source src = 'video.3gp' type = 'video/3gpp; codecs="mp4v.20.8, samr"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, speex"' >
< source src = 'audio.ogg' type = 'audio/ogg; codecs=vorbis"' >
< source src = 'audio.spx' type = 'audio/ogg; codecs=speex"' >
< source src = 'audio.oga' type = 'audio/ogg; codecs=flac"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="dirac, vorbis"' >
source
HTML 요소 삽입 단계는
insertedNode가 주어졌을 때 다음과 같습니다:
insertedNode의 부모가 미디어 요소이고,
해당 요소에 src
속성이 없으며 networkState
가
NETWORK_EMPTY
값을 가지고 있는 경우, 해당 미디어 요소의 리소스 선택
알고리즘을 호출합니다.
insertedNode의 다음 형제가 img
요소이고, 부모 요소가 picture
요소인 경우,
이를 관련 변형으로 간주하여 img
요소에 적용합니다.
source
HTML 요소 제거 단계는
removedNode와 oldParent가 주어졌을 때 다음과 같습니다:
src
, type
, srcset
, sizes
, 그리고
media
와 같은 IDL
속성은 동일한 이름의 해당 콘텐츠 속성을 반영해야 합니다.
저자가 제공한 미디어 리소스를 모든 사용자 에이전트가 렌더링할 수 있는지 확신하지 못할 경우, 저자는 마지막 source
요소에서 error
이벤트를 수신하고 대체 동작을 트리거할 수 있습니다:
< script >
function fallback( video) {
// <video> 요소를 그 내용으로 대체
while ( video. hasChildNodes()) {
if ( video. firstChild instanceof HTMLSourceElement)
video. removeChild( video. firstChild);
else
video. parentNode. insertBefore( video. firstChild, video);
}
video. parentNode. removeChild( video);
}
</ script >
< video controls autoplay >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"' onerror = "fallback(parentNode)" >
...
</ video >
img
요소모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
usemap
속성이 있는
경우: Interactive content.
picture
요소의 자식으로, 모든
source
요소 뒤에.
alt
— 이미지가 사용 불가능할 때 사용할 대체 텍스트
src
— 리소스의 주소
srcset
— 다른 상황에서 사용할 이미지, 예를 들어
고해상도 디스플레이, 작은 모니터 등
sizes
— 다양한 페이지 레이아웃에 대한 이미지 크기
crossorigin
— 요소가 교차
출처 요청을 처리하는 방법
usemap
— 사용할 이미지 맵의 이름
ismap
— 이미지가 서버 측 이미지 맵인지 여부
width
— 가로 치수
height
— 세로 치수
referrerpolicy
— 요소가 시작한 리퍼러 정책 페치를 위해
decoding
— 이 이미지를 프레젠테이션에
처리할 때 사용할 디코딩 힌트
loading
— 로딩 지연을 결정할 때 사용됨
fetchpriority
—
요소가 시작한 우선 순위를 설정함 페치.
alt
속성이 있는 경우: 작성자용; 구현자용.
[Exposed =Window ,
LegacyFactoryFunction =Image (optional unsigned long width , optional unsigned long height )]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute USVString srcset ;
[CEReactions ] attribute DOMString sizes ;
[CEReactions ] attribute DOMString ? crossOrigin ;
[CEReactions ] attribute DOMString useMap ;
[CEReactions ] attribute boolean isMap ;
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
readonly attribute unsigned long naturalWidth ;
readonly attribute unsigned long naturalHeight ;
readonly attribute boolean complete ;
readonly attribute USVString currentSrc ;
[CEReactions ] attribute DOMString referrerPolicy ;
[CEReactions ] attribute DOMString decoding ;
[CEReactions ] attribute DOMString loading ;
[CEReactions ] attribute DOMString fetchPriority ;
Promise <undefined > decode ();
// 또한 폐기된 멤버도 포함되어 있습니다
};
img
요소는 이미지를 나타냅니다.
img
요소는 크기 속성 소스를 가지며, 초기에는 요소 자체로 설정됩니다.
모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
src
및 srcset
속성과, 부모가 picture
요소인 경우, 이전 형제 source
요소의 srcset
속성에서 주어진 이미지는 포함된
콘텐츠입니다. alt
속성의 값은 이미지를 처리할
수 없거나 이미지 로딩이 비활성화된 사람들을 위한 대체 콘텐츠를 제공합니다 (즉, img
요소의 폴백 콘텐츠입니다).
alt
속성 값에 대한 요구 사항은 별도의
섹션에서 설명됩니다.
src
속성은 반드시 존재해야 하며, 비상호작용적이고, 선택적으로
애니메이션된 이미지 리소스를 참조하는 유효한 비어 있지 않은 URL을 포함해야 합니다.
위의 요구 사항은 이미지가 정적 비트맵 (예: PNG, GIF, JPEG), 단일 페이지 벡터 문서 (단일 페이지 PDF, SVG 문서 요소가 있는 XML 파일), 애니메이션 비트맵 (APNG, 애니메이션 GIF), 애니메이션 벡터 그래픽 (선언적 SMIL 애니메이션을 사용하는 SVG 문서 요소가 있는 XML 파일) 등을 의미합니다. 그러나 이러한 정의는 스크립트가 포함된 SVG 파일, 다중 페이지 PDF 파일, 상호작용 MNG 파일, HTML 문서, 일반 텍스트 문서 등을 제외합니다. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]
srcset
속성도 존재할 수 있으며, 이는 srcset 속성입니다.
srcset
속성과 src
속성은 (만약 너비 설명자가 사용되지 않은 경우) 이미지 소스를 소스 세트에
기여합니다 (선택된 source
요소가 없는
경우).
srcset
속성이 존재하고 이미지 후보 문자열에 너비 설명자를 사용하는 경우, sizes
속성도 반드시 존재해야 합니다. srcset
속성이 지정되지 않았고, loading
속성이 지연 상태에 있는 경우, sizes
속성은 "auto" 값을 가질 수 있습니다 (ASCII 대소문자 구분 없음). sizes
속성은 sizes 속성이며, 이는 소스 크기를 소스 세트에
기여합니다 (선택된 source
요소가 없는
경우).
img
요소는 다음 조건을 만족할 경우 자동 크기 조정을 허용합니다:
loading
속성이 지연 상태에 있을 때,
sizes
속성의 값이
"auto
" (ASCII
대소문자 구분 없음), 또는 "auto,
"로 시작할 때 (ASCII
대소문자 구분 없음).
모든 최신 엔진에서 지원됨.
crossorigin
속성은 CORS 설정 속성입니다. 이 속성의 목적은 교차 출처
액세스를 허용하는 타사 사이트의 이미지를 canvas
에서
사용할 수 있도록 하는 것입니다.
referrerpolicy
속성은
참조 정책 속성입니다. 이 속성의 목적은 이미지를
가져올 때 사용되는 참조
정책을 설정하는 것입니다. [REFERRERPOLICY]
decoding
속성은 이 이미지를 디코딩하는 데 선호되는 방법을 나타냅니다. 이 속성이 존재할 경우,
이는 이미지 디코딩 힌트여야 합니다. 이 속성의 값 누락 기본값과 잘못된 값 기본값은 모두 자동 상태입니다.
HTMLImageElement/fetchPriority
fetchpriority
속성은
가져오기 우선 순위 속성입니다. 이 속성의 목적은
이미지를 가져올 때 사용되는 우선 순위를 설정하는 것입니다.
loading
속성은 지연 로딩 속성입니다. 이 속성의 목적은 뷰포트 외부에 있는
이미지의 로딩 정책을 나타내는 것입니다.
loading
속성의 상태가 즉시 상태로 변경되면, 사용자 에이전트는 다음 단계를
수행해야 합니다:
resumptionSteps을 img
요소의 지연 로드 재개 단계로
설정합니다.
resumptionSteps이 null이면, 반환합니다.
img
의 지연 로드 재개 단계를
null로 설정합니다.
resumptionSteps을 호출합니다.
< img src = "1.jpeg" alt = "1" >
< img src = "2.jpeg" loading = eager alt = "2" >
< img src = "3.jpeg" loading = lazy alt = "3" >
< div id = very-large ></ div > <!-- 이 div 이후의 모든 내용은 뷰포트 아래에 있습니다 -->
< img src = "4.jpeg" alt = "4" >
< img src = "5.jpeg" loading = lazy alt = "5" >
위 예시에서, 이미지는 다음과 같이 로드됩니다:
1.jpeg
, 2.jpeg
,
4.jpeg
이미지는 즉시 로드되며, 창의 로드 이벤트를 지연시킵니다.
3.jpeg
이미지는 뷰포트 내에 있어 레이아웃이 알려질 때 로드되지만, 창의 로드 이벤트를 지연시키지 않습니다.
5.jpeg
이미지는 뷰포트로 스크롤될 때만 로드되며, 창의 로드 이벤트를 지연시키지 않습니다.
개발자는 CSS가 이미지의 너비와 높이 속성을 설정하더라도 페이지 레이아웃이 이미지 로드 후 이동하지 않도록 지연 로드된 이미지에 width
및 height
속성을 통해 선호하는 종횡비를 지정하는 것이
권장됩니다.
img
HTML 요소 삽입 단계는
insertedNode가 주어졌을 때 다음과 같습니다:
img
HTML 요소 제거 단계는
removedNode 및 oldParent가 주어졌을 때 다음과 같습니다:
img
요소는 레이아웃 도구로 사용되어서는 안 됩니다. 특히,
img
요소는 투명 이미지를 표시하는 데 사용되어서는 안
됩니다. 그러한 이미지는 의미를 전달하는 경우가 드물며, 문서에 유용한 정보를 추가하는 경우가 거의 없습니다.
img
요소가 무엇을 나타내는지는 src
속성과 alt
속성에 따라 다릅니다.
src
속성이 설정되어 있고, alt
속성이 빈 문자열로 설정되어 있다면,
이미지는 장식적이거나 나머지 콘텐츠의 보조적 역할을 하며, 문서의 다른 정보와 중복됩니다.
이미지가 사용 가능하고, 사용자 에이전트가 해당 이미지를 표시하도록 설정되어 있다면, 해당 요소는 요소의 이미지 데이터를 나타냅니다.
그렇지 않으면, 해당 요소는 아무것도 나타내지 않으며, 렌더링에서 완전히 생략될 수 있습니다. 사용자 에이전트는 이미지가 존재하지만 렌더링에서 생략되었다는 알림을 사용자에게 제공할 수 있습니다.
src
속성이 설정되어 있고, alt
속성이 빈 문자열이 아닌 값으로 설정되어 있다면,
이미지는 콘텐츠의 중요한 부분이며, alt
속성은 이미지의
텍스트적 등가물이나 대체물을 제공합니다.
이미지가 사용 가능하고, 사용자 에이전트가 해당 이미지를 표시하도록 설정되어 있다면, 해당 요소는 요소의 이미지 데이터를 나타냅니다.
그렇지 않으면, 해당 요소는 alt
속성에 지정된 텍스트를
나타냅니다. 사용자 에이전트는 이미지가 존재하지만 렌더링에서 생략되었다는 알림을
사용자에게 제공할 수 있습니다.
src
속성이 설정되어 있고, alt
속성이 설정되어 있지 않다면,
이미지는 콘텐츠의 중요한 부분일 수 있으며, 해당 이미지의 텍스트적 등가물이 존재하지 않습니다.
적합한 문서에서, alt
속성이 없는
것은 이미지가 콘텐츠의 중요한 부분이지만 이미지 생성 시 텍스트 대체물이 제공되지 않았음을 나타냅니다.
이미지가 사용 가능하고, 사용자 에이전트가 해당 이미지를 표시하도록 설정되어 있다면, 해당 요소는 요소의 이미지 데이터를 나타냅니다.
만약 src
속성의 값이 빈 문자열이라면, 해당 요소는
아무것도 나타내지 않습니다.
그렇지 않으면, 사용자 에이전트는 렌더링되지 않은 이미지가 있음을 나타내는 어떤 표시를 제공해야 하며, 사용자가 요청하거나, 그렇게 구성되었거나, 탐색 시 상황 정보를 제공하기 위해 필요한 경우, 다음과 같이 이미지에 대한 캡션 정보를 제공할 수 있습니다:
이미지가 빈 문자열이 아닌 title
속성을 가지고
있다면, 해당 속성의 값을 반환합니다.
이미지가 figure
요소의 자손이고, 해당 요소가 자식 figcaption
요소를 포함하며, figcaption
요소와 그 자손들을 무시했을 때, figure
요소가 플로우 콘텐츠 자손을 가지지 않고 요소 간 공백과
img
요소만 있는 경우, 첫
번째 figcaption
요소의 내용을 반환합니다.
아무것도 반환하지 않습니다. (캡션 정보가 없습니다.)
src
속성이 설정되지 않았고, alt
속성이 빈 문자열로 설정되어 있거나, alt
속성이 전혀 설정되지 않은 경우,
해당 요소는 아무것도 나타내지 않습니다.
alt
속성은 조언 정보를 나타내지 않습니다. 사용자 에이전트는
alt
속성의 내용을 title
속성의 내용과 동일하게 표시해서는 안 됩니다.
사용자 에이전트는 언제나 사용자가 모든 이미지를 표시하거나 표시하지 않도록 선택할 수 있는 옵션을 제공할 수 있습니다. 또한, 시각 장애로 인해 이미지가 보이지 않거나 그래픽 기능이 없는 텍스트 터미널을 사용하는 경우와 같이, 사용자가 이미지를 볼 수 없을 때 이미지를 활용할 수 있도록 돕는 휴리스틱을 적용할 수 있습니다. 예를 들어, 이미지 내에서 발견된 텍스트의 광학 문자 인식(OCR)과 같은 기술이 포함될 수 있습니다.
사용자 에이전트가 누락된 alt
속성을
수정하는 것을 권장하지만, 작성자는 이러한 동작에 의존해서는 안 됩니다. 이미지에 대한 대체 텍스트를 제공하기 위한 요구 사항은 아래에서 자세히 설명됩니다. 이미지의 대체 텍스트
제공 요구 사항
img
요소의 내용이 있다면, 렌더링을 위한
목적으로는 무시됩니다.
usemap
속성은 존재하는 경우 이미지에 관련된 이미지 맵이 있음을 나타낼 수 있습니다.
ismap
속성은 a
요소의 하위 요소이며, href
속성을 가진 요소에서 사용될 때, 해당
요소가 서버 측 이미지 맵에 접근할 수 있음을 나타냅니다. 이는 해당 a
요소에서 이벤트를 처리하는 방법에 영향을 줍니다.
ismap
속성은 부울 속성입니다. 이 속성은 a
요소의 상위 요소가 href
속성을 가지고 있지 않은 경우에는 지정할
수 없습니다.
usemap
및
ismap
속성은 source
요소와 media
속성이 지정된 picture
요소와 함께 사용될 때 혼란스러운
동작을 초래할 수 있습니다.
현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
alt
, src
, srcset
및 sizes
IDL 속성은 각각
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
현재 모든 엔진에서 지원됩니다.
crossOrigin
IDL 속성은 crossorigin
콘텐츠
속성을 반영해야 하며, 알려진 값만 제한적으로 허용됩니다.
현재 모든 엔진에서 지원됩니다.
useMap
IDL 속성은
usemap
콘텐츠 속성을 반영해야 합니다.
현재 모든 엔진에서 지원됩니다.
isMap
IDL 속성은
ismap
콘텐츠 속성을 반영해야 합니다.
HTMLImageElement/referrerPolicy
현재 모든 엔진에서 지원됩니다.
referrerPolicy
IDL 속성은 referrerpolicy
콘텐츠
속성을 반영해야 하며, 알려진 값만 제한적으로 허용됩니다.
현재 모든 엔진에서 지원됩니다.
decoding
IDL
속성은 decoding
콘텐츠 속성을 반영해야 하며, 알려진 값만 제한적으로 허용됩니다.
현재 모든 엔진에서 지원됩니다.
loading
IDL 속성은
loading
콘텐츠 속성을 반영해야 하며, 알려진 값만 제한적으로 허용됩니다.
fetchPriority
IDL 속성은 fetchpriority
콘텐츠 속성을
반영해야 하며, 알려진 값만 제한적으로 허용됩니다.
image.width [ = value ]
모든 현재 엔진에서 지원합니다.
image.height [ = value ]
모든 현재 엔진에서 지원합니다.
이 속성들은 이미지의 실제 렌더링된 크기를 반환하거나 크기가 알려지지 않은 경우 0을 반환합니다.
이 속성들을 설정하면 해당 콘텐츠 속성을 변경할 수 있습니다.
image.naturalWidth
모든 현재 엔진에서 지원합니다.
image.naturalHeight
HTMLImageElement/naturalHeight
모든 현재 엔진에서 지원합니다.
이 속성들은 이미지의 고유 크기(자연 크기)를 반환하거나 크기가 알려지지 않은 경우 0을 반환합니다.
image.complete
모든 현재 엔진에서 지원합니다.
이미지가 완전히 다운로드되었거나 이미지가 지정되지 않은 경우 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
image.currentSrc
모든 현재 엔진에서 지원합니다.
이미지의 절대 URL을 반환합니다.
image.decode()
모든 현재 엔진에서 지원합니다.
이 메서드는 사용자 에이전트가 이미지를 병렬로 디코딩하게 하여 디코딩이 완료되면 이행되는 프라미스를 반환합니다.
이미지를 디코딩할 수 없는 경우 이 프라미스는 "EncodingError
"
DOMException
으로
거부됩니다.
image = new Image([ width [, height ] ])
모든 현재 엔진에서 지원합니다.
새로운 img
요소를 반환하며, 관련 인수에 값이 적용되는 경우 width
및 height
속성이 설정됩니다.
IDL 속성 width
및
height
는 이미지가 렌더링되는 경우
CSS 픽셀 단위로 렌더링된 너비와 높이를 반환해야 합니다.
그렇지 않으면 이미지가 밀도 보정 자연 너비 및 높이를 가지고 있고 사용 가능하지만
렌더링되지 않은 경우 CSS 픽셀 단위로 밀도 보정 자연 너비와 높이를 반환하거나,
이미지가 사용 가능하지 않거나 밀도 보정 자연 너비와 높이를 가지지 않은 경우
0을 반환해야 합니다. [CSS]
설정할 때, 이들은 동일한 이름의 해당 콘텐츠 속성을 반영하는 것처럼 작동해야 합니다.
IDL 속성 naturalWidth
및 naturalHeight
는 이미지가 밀도 보정 자연 너비와 높이를 가지고 있고 사용 가능한 경우 CSS 픽셀 단위로 밀도 보정 자연 너비와 높이를 반환해야
하며, 그렇지 않으면 0을 반환해야 합니다.
[CSS]
이미지의 밀도 보정 자연 너비와 높이는 메타데이터에 지정된 방향을 고려하기
때문에, naturalWidth
및
naturalHeight
는 이미지
방향을 올바르게 맞추기 위해 필요한 회전을 적용한 후의 크기를 반영하며, 'image-orientation' 속성의 값에 상관없이 반영됩니다.
complete
속성의
getter 단계는 다음과 같습니다:
다음 중 하나라도 true인 경우:
그러면 true를 반환합니다.
false를 반환합니다.
currentSrc
IDL 속성은 img
요소의 현재 요청의 현재 URL을 반환해야 합니다.
decode()
메서드는 호출될 때 다음 단계를 수행해야 합니다:
promise를 새 프라미스로 설정합니다.
다음 단계를 수행하기 위해 마이크로 태스크를 대기열에 추가합니다:
이 작업은 이미지 데이터를 업데이트하는 것도 마이크로 태스크에서 수행되기 때문에 수행됩니다. 따라서 다음과 같은 코드를 작성하려면
img. src = "stars.jpg" ;
img. decode();
stars.jpg
를 적절히 디코딩하려면 처리를 한 마이크로 태스크만큼 지연해야 합니다.
다음 중 하나라도 true인 경우:
그러면 promise를 "EncodingError
" DOMException
으로
거부합니다.
그렇지 않으면 병렬로 대기하여 다음 중 하나가 발생하고 해당 작업을 수행할 때까지 기다립니다:
img
요소의 노드
문서가 완전히 활성화되지 않음
img
요소의 현재 요청이
변경되거나 변형됨
img
요소의 현재 요청의 상태가 손상됨으로 변경됨
promise를 "EncodingError
" DOMException
으로
거부합니다.
img
요소의 현재 요청의 상태가 완전히 사용 가능으로 변경됨
이미지를 디코딩합니다.
이 이미지에 대해 디코딩을 수행할 필요가 없는 경우(예: 벡터 그래픽이기 때문에) promise를 undefined로 해결합니다.
디코딩이 실패한 경우(예: 잘못된 이미지 데이터 때문에) promise를 "EncodingError
" DOMException
으로
거부합니다.
디코딩 프로세스가 성공적으로 완료되면 promise를 undefined로 해결합니다.
사용자 에이전트는 디코딩된 미디어 데이터가 다음 성공적인 렌더링 업데이트 단계가 완료될 때까지 쉽게 접근할 수 있도록 보장해야 합니다. 이것은 API 계약의 중요한 부분이며, 가능한 한 위반되어서는 안 됩니다. (일반적으로 이는 메모리가 부족하여 디코딩된 이미지 데이터를 삭제해야 하는 상황이나 이미지가 너무 커서 이 기간 동안 디코딩된 상태로 유지할 수 없는 경우에만 위반될 수 있습니다.)
애니메이션 이미지는 모든 프레임이 로드된 후에만 완전히 사용 가능 상태가 됩니다. 따라서 구현이 첫 번째 프레임을 그 시점 이전에 디코딩할 수 있지만 위의 단계는 그렇게 하지 않고 모든 프레임이 사용 가능해질 때까지 기다립니다.
promise를 반환합니다.
decode()
메서드가 없는 경우,
img
요소를 로드한 다음
표시하는 과정은 다음과 같이 나타날 수 있습니다:
const img = new Image();
img. src = "nebula.jpg" ;
img. onload = () => {
document. body. appendChild( img);
};
img. onerror = () => {
document. body. appendChild( new Text( "Could not load the nebula :(" ));
};
그러나 이렇게 하면 이미지를 DOM에 삽입한 후 발생하는 페인트가 메인 스레드에서 동기 디코드를 유발하기 때문에 눈에 띄는 프레임 손실이 발생할 수 있습니다.
이것은 decode()
메서드를 사용하여 다음과 같이 다시 작성할 수 있습니다:
const img = new Image();
img. src = "nebula.jpg" ;
img. decode(). then(() => {
document. body. appendChild( img);
}). catch (() => {
document. body. appendChild( new Text( "Could not load the nebula :(" ));
});
이 후자의 형태는 사용자 에이전트가 이미지를 병렬로 디코딩하고 디코딩 과정이 완료된 후에만 DOM에 삽입하여(따라서 페인트가 발생하게 함으로써) 원본의 프레임 손실을 피할 수 있습니다.
decode()
메서드는 디코딩된 이미지 데이터를 최소한 한 프레임 동안 사용할 수 있도록 보장하려고 시도하므로, requestAnimationFrame()
API와 결합될 수 있습니다.
이는 모든 DOM 수정을 애니메이션 프레임 콜백으로 일괄 처리하도록 보장하는 코딩 스타일이나 프레임워크와 함께
사용할 수 있음을 의미합니다:
const container = document. querySelector( "#container" );
const { containerWidth, containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
container. style. width = containerWidth;
container. style. height = containerHeight;
});
// ...
const img = new Image();
img. src = "supernova.jpg" ;
img. decode(). then(() => {
requestAnimationFrame(() => container. appendChild( img));
});
구식 팩토리 함수는 HTMLImageElement
객체를
생성하기 위해 제공됩니다
(DOM의 createElement()
과
같은 팩토리 메서드 외에도):
Image(width, height)
. 이 구식 팩토리 함수가 호출되면,
다음 단계를 수행해야 합니다:
document를 현재 전역
객체의 관련된
Document
로 설정합니다.
img를 document, img
, 그리고 HTML
네임스페이스를 사용하여 요소를 생성한 결과로 설정합니다.
height가 주어진 경우, 속성 값을 설정하여
img에 대해 "height
"
와
height를 사용합니다.
img를 반환합니다.
단일 이미지는 상황에 따라 다른 적절한 대체 텍스트를 가질 수 있습니다.
다음 각 예에서는 동일한 이미지가 사용되지만, 매번 alt
텍스트가 다릅니다.
이 이미지는 스위스 제네바 주의
카루즈 시의 문장입니다.
여기에서는 보조 아이콘으로 사용됩니다:
< p > 나는 < img src = "carouge.svg" alt = "" > 카루즈에서 살았습니다.</ p >
여기에서는 도시를 나타내는 아이콘으로 사용됩니다:
< p > 고향: < img src = "carouge.svg" alt = "카루즈" ></ p >
여기에서는 도시에 관한 텍스트의 일부로 사용됩니다:
< p > 카루즈에는 문장이 있습니다.</ p >
< p >< img src = "carouge.svg" alt = "문장에는 사자가 나무 앞에 앉아 있는 모습이 그려져 있습니다." ></ p >
< p > 이 문장은 도시 곳곳에서 장식으로 사용됩니다.</ p >
여기에서는 이미지에 대한 대안이 아닌 설명을 제공하는 유사한 텍스트를 지원하는 방법으로 사용됩니다:
< p > 카루즈에는 문장이 있습니다.</ p >
< p >< img src = "carouge.svg" alt = "" ></ p >
< p > 문장에는 사자가 나무 앞에 앉아 있는 모습이 그려져 있습니다.
이 문장은 도시 곳곳에서 장식으로 사용됩니다.</ p >
여기에서는 이야기의 일부로 사용됩니다:
< p > 그녀는 폴더를 집어들고 종이 한 장이 떨어졌습니다.</ p >
< p >< img src = "carouge.svg" alt = "방패 모양의 종이는
빨간 배경에, 초록색 나무, 그리고 혀를 내민
황색 사자가 그려져 있으며, 꼬리가 S자 모양으로 되어 있었습니다." ></ p >
< p > 그녀는 폴더를 응시했습니다. S! 그녀가 그토록 찾고 있던 해답은 단순히 S라는 글자였습니다! 그녀는 왜 그동안 그것을 알아차리지 못했을까요? 이제 모든 것이 맞아떨어졌습니다. 헥터가 사자의 꼬리를 언급했던 전화 통화, 마리아가 혀를 내밀었던 그 순간...</ p >
여기에서는 출판 당시 이미지가 무엇인지 알 수 없었고, 단지 문장 이미지일 뿐이라는 것만 알았기 때문에 대체 텍스트를 제공할 수 없었고, 대신 title
속성에 이미지에 대한 간단한 캡션만 제공되었습니다:
< p > 마지막으로 문장을 업로드한 사용자가 이 문장을 업로드했습니다:</ p >
< p >< img src = "last-uploaded-coat-of-arms.cgi" title = "사용자 업로드 문장." ></ p >
이 경우에도 저자가 실제 대체 텍스트를 제공할 수 있는 방법을 찾는 것이 이상적입니다. 예를 들어 이전 사용자에게 요청하는 방법이 있습니다. 대체 텍스트를 제공하지 않으면 이미지 보기 불가능한 사람들, 예를 들어 시각 장애인 사용자, 매우 낮은 대역폭 연결을 사용하는 사용자, 또는 바이트 단위로 요금이 부과되는 사용자, 또는 텍스트 전용 웹 브라우저를 사용해야 하는 사용자에게 문서 사용이 더 어려워집니다.
여기에는 동일한 이미지가 다양한 상황에서 사용되며, 매번 다른 적절한 대체 텍스트가 제공되는 몇 가지 추가 예가 있습니다.
< article >
< h1 > 나의 고양이들</ h1 >
< h2 > 플러피</ h2 >
< p > 플러피는 내가 가장 좋아하는 고양이입니다.</ p >
< img src = "fluffy.jpg" alt = "그녀는 실타래와 노는 것을 좋아합니다." >
< p > 그녀는 너무 귀엽습니다.</ p >
< h2 > 마일스</ h2 >
< p > 내 다른 고양이 마일스는 먹고 자는 것만 합니다.</ p >
</ article >
< article >
< h1 > 사진 촬영</ h1 >
< h2 > 실내에서 움직이는 대상을 촬영하기</ h2 >
< p > 여기서의 요령은 대상을 어떤 속도로, 어떤 거리에서 지나갈지 예측하는 것입니다.</ p >
< img src = "fluffy.jpg" alt = "실타래를 쫓는 고양이가 이 기술로 꽤 잘 촬영될 수 있습니다." >
< h2 > 밤의 자연</ h2 >
< p > 이것을 달성하려면 극도로 민감한 필름이 필요하거나 엄청난 플래시가 필요할 것입니다.</ p >
</ article >
< article >
< h1 > 나에 대하여</ h1 >
< h2 > 내 애완동물들</ h2 >
< p > 나는 플러피라는 이름의 고양이와 마일스라는 이름의 개를 키우고 있습니다.</ p >
< img src = "fluffy.jpg" alt = "플러피, 내 고양이는 항상 바쁩니다." >
< p > 내 개 마일스와 나는 함께 긴 산책을 즐깁니다.</ p >
< h2 > 음악</ h2 >
< p > 산책 후, 마음을 비우고 바흐의 음악을 듣는 것을 좋아합니다.</ p >
</ article >
< article >
< h1 > 플러피와 실타래</ h1 >
< p > 플러피는 실타래로 노는 것을 좋아하는 고양이였습니다. 그녀는 또한 점프하는 것을 좋아했습니다.</ p >
< aside >< img src = "fluffy.jpg" alt = "" title = "플러피" ></ aside >
< p > 그녀는 아침에 놀고, 저녁에도 놀았습니다.</ p >
</ article >
이 섹션은 비규범적입니다.
HTML에서 단일 이미지 리소스가 있을 때 이미지를 포함하려면 img
요소와 src
속성을 사용하십시오.
< h2 > 오늘의 추천 기사</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
는 영국의 </ a href = "/wiki/Music_hall" > 뮤직 홀</ a > 가수였습니다...
그러나 작가가 사용자 에이전트가 선택할 수 있는 여러 이미지 리소스를 사용하고자 하는 경우가 있습니다:
다양한 사용자가 서로 다른 환경 특성을 가질 수 있습니다:
사용자의 물리적 화면 크기가 서로 다를 수 있습니다.
휴대전화의 화면은 대각선으로 4인치일 수 있으며, 노트북의 화면은 대각선으로 14인치일 수 있습니다.
이미지의 렌더링된 크기가 뷰포트 크기에 따라 달라질 때만 관련이 있습니다.
사용자의 화면 픽셀 밀도가 서로 다를 수 있습니다.
휴대전화의 화면이 다른 휴대전화의 화면에 비해 물리적인 크기와 상관없이 인치당 세 배 더 많은 물리적 픽셀을 가질 수 있습니다.
사용자의 확대/축소 수준이 서로 다를 수 있거나 시간이 지남에 따라 단일 사용자가 변경될 수 있습니다.
사용자는 특정 이미지를 확대하여 자세히 살펴볼 수 있습니다.
확대/축소 수준과 화면 픽셀 밀도(이전 항목)는 CSS 픽셀당 물리적 화면 픽셀 수에 영향을 미칠 수 있습니다. 이 비율은 일반적으로 장치-픽셀-비율로 불립니다.
사용자의 화면 방향이 서로 다를 수 있거나 시간이 지남에 따라 단일 사용자가 변경될 수 있습니다.
태블릿은 직립하거나 90도 회전시켜 화면을 세로 또는 가로로 할 수 있습니다.
사용자의 네트워크 속도, 네트워크 대기 시간 및 대역폭 비용이 서로 다를 수 있거나 시간이 지남에 따라 단일 사용자가 변경될 수 있습니다.
사용자는 직장에서 빠르고 낮은 대기 시간의 고정 비용 연결을 사용할 수 있으며, 집에서는 느리지만 낮은 대기 시간의 고정 비용 연결을 사용할 수 있으며, 그 외 장소에서는 가변 속도, 높은 대기 시간 및 가변 비용 연결을 사용할 수 있습니다.
작가는 일반적으로 뷰포트의 너비에 따라 다르게 렌더링된 크기를 가진 동일한 이미지 콘텐츠를 표시하고자 할 수 있습니다. 이를 일반적으로 뷰포트 기반 선택이라고 합니다.
웹 페이지는 상단에 항상 전체 뷰포트 너비를 차지하는 배너가 있을 수 있습니다. 이 경우, 이미지의 렌더링된 크기는 화면의 물리적 크기에 따라 다릅니다(브라우저 창이 최대화된 것으로 가정).
또 다른 웹 페이지에는 작은 물리적 크기를 가진 화면의 경우 단일 열, 중간 크기를 가진 화면의 경우 두 개의 열, 큰 물리적 크기를 가진 화면의 경우 세 개의 열이 있는 이미지가 포함될 수 있으며, 각 경우에 이미지는 뷰포트를 채우기 위해 렌더링된 크기가 다를 수 있습니다. 이 경우, 단일 열 레이아웃에서의 이미지 크기가 두 개의 열 레이아웃보다 클 수 있으며, 화면이 더 작음에도 불구하고 이미지가 더 커질 수 있습니다.
작가는 렌더링된 이미지 크기에 따라 다른 이미지 콘텐츠를 표시하고자 할 수 있습니다. 이를 일반적으로 아트 디렉션이라고 합니다.
웹 페이지가 큰 물리적 크기를 가진 화면에서 볼 때(브라우저 창이 최대화된 것으로 가정), 작가는 이미지의 중요한 부분을 둘러싼 덜 관련된 부분을 포함하고자 할 수 있습니다. 동일한 웹 페이지가 작은 물리적 크기를 가진 화면에서 볼 때, 작가는 이미지의 중요한 부분만 표시하고자 할 수 있습니다.
작가는 사용자 에이전트가 지원하는 이미지 형식에 따라 동일한 이미지 콘텐츠를 서로 다른 이미지 형식을 사용하여 표시하고자 할 수 있습니다. 이를 일반적으로 이미지 형식 기반 선택이라고 합니다.
웹 페이지에는 JPEG, WebP 및 JPEG XR 이미지 형식의 일부 이미지가 있을 수 있으며, 후자의 두 형식은 JPEG에 비해 더 나은 압축 기능을 제공합니다. 다양한 사용자 에이전트가 서로 다른 이미지 형식을 지원할 수 있으며, 일부 형식은 더 나은 압축 비율을 제공합니다. 작가는 이를 지원하는 사용자 에이전트에게 더 나은 형식을 제공하고, 지원하지 않는 사용자 에이전트에게는 JPEG 대체를 제공하고자 합니다.
위의 상황은 상호 배타적이지 않습니다. 예를 들어, 장치-픽셀-비율에 따른 다른 리소스와 아트 디렉션에 따른 다른 리소스를 결합하는 것이 합리적입니다.
이 문제를 스크립팅을 사용하여 해결할 수 있지만, 그렇게 하면 다른 문제가 발생할 수 있습니다:
일부 사용자 에이전트는 스크립트가 실행되기 전에 HTML 마크업에서 지정된 이미지를 적극적으로 다운로드하여 웹 페이지 로딩을 더 빨리 완료합니다. 스크립트가 다운로드할 이미지를 변경하면, 사용자 에이전트가 별도로 두 개의 다운로드를 시작하여 페이지 로딩 성능이 오히려 나빠질 수 있습니다.
작가가 위에서 설명한 이중 다운로드 문제를 피하기 위해 HTML 마크업에서 이미지를 전혀 지정하지 않고 대신 스크립트에서 단일 다운로드를 인스턴스화하면, 스크립팅이 비활성화된 사용자에게는 전혀 이미지가 다운로드되지 않으며 적극적인 이미지 다운로드 최적화도 비활성화됩니다.
이를 염두에 두고, 이 사양은 위의 문제를 선언적으로 해결하기 위한 여러 기능을 소개합니다.
이미지의 렌더링된 크기가 고정되어 있을 때 src
및
srcset
속성을 x
지시자와 함께 사용하여 크기만 다른 여러 이미지를 제공할 수 있습니다(작은 이미지는 큰 이미지의 축소된 버전입니다).
x
지시자는 이미지의 렌더링된 크기가 뷰포트 너비에 따라 달라질 때(뷰포트 기반 선택)는 적합하지 않지만,
아트 디렉션과 함께 사용할 수 있습니다.
< h2 > 오늘의 추천 기사</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg"
srcset = "/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
는 영국의 </ a href = "/wiki/Music_hall" > 뮤직 홀</ a > 가수였습니다...
사용자 에이전트는 사용자의 화면 픽셀 밀도, 확대/축소 수준, 그리고 사용자의 네트워크 조건과 같은 다른 요인에 따라 제공된 리소스 중에서 선택할 수 있습니다.
이전 사용자 에이전트와의 하위 호환성을 위해 srcset
속성을 아직 이해하지 못하는
경우를 대비하여 URL 중 하나가 img
요소의 src
속성에 지정됩니다. 이는 이전 사용자
에이전트에서도 유용한(사용자가 원하는 것보다 해상도가 낮을 수 있지만) 콘텐츠가 표시되도록 합니다. 새로운 사용자 에이전트의 경우 src
속성은 1x
지시자가
있는 srcset
에 지정된 것처럼 리소스
선택에 참여합니다.
이미지의 렌더링된 크기는 width
및 height
속성에 지정되어 사용자 에이전트가
이미지를 다운로드하기 전에 공간을 할당할 수 있습니다.
srcset
및 sizes
속성을 w
지시자와 함께
사용하여 크기만 다른 여러 이미지를 제공할 수 있습니다(작은 이미지는 큰 이미지의 축소된 버전입니다).
이 예에서는 배너 이미지가 전체 뷰포트 너비를 차지합니다(적절한 CSS를 사용).
< h1 >< img sizes = "100vw" srcset = "wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src = "wolf-400.jpg" alt = "멋진 늑대" ></ h1 >
사용자 에이전트는 지정된 w
지시자와 sizes
속성에 지정된 렌더링된 크기에서 각
이미지의 효과적인 픽셀 밀도를 계산할 수 있습니다. 그런 다음 사용자의 화면 픽셀 밀도, 확대/축소 수준, 그리고 사용자의 네트워크 조건과 같은 다른 요인에 따라 제공된 리소스
중에서 선택할 수 있습니다.
사용자의 화면이 320 CSS 픽셀 너비인 경우, 이는
wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x
을 지정하는 것과 같습니다. 반면, 사용자의 화면이
1200 CSS 픽셀 너비인 경우, 이는
wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x
을 지정하는 것과 같습니다.
w
지시자와 sizes
속성을 사용함으로써 사용자 에이전트는
사용자의 장치 크기에 상관없이 올바른 이미지 소스를 다운로드할 수 있습니다.
이전 사용자 에이전트와의 하위 호환성을 위해, URL 중 하나가 img
요소의 src
속성에 지정됩니다. 새로운 사용자 에이전트에서는
src
속성이 srcset
속성이
w
지시자를 사용하는 경우 무시됩니다.
이 예에서는 웹 페이지가 뷰포트 너비에 따라 세 가지 레이아웃을 가집니다. 좁은 레이아웃에서는 이미지가 단일 열로 표시되며(각 이미지의 너비는 약 100%), 중간 레이아웃에서는 두
개의 열로 표시되며(각 이미지의 너비는 약 50%), 가장 넓은 레이아웃에서는 세 개의 열로 표시되며 페이지 여백이 있습니다(각 이미지의 너비는 약 33%). 이 레이아웃은
뷰포트가 30em
너비 및 50em
너비일 때 변경됩니다.
< img sizes = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "케틀벨 스윙" >
sizes
속성은
30em
및 50em
에서 레이아웃 브레이크포인트를 설정하고, 이 브레이크포인트 사이에서 이미지 크기를
100vw
, 50vw
, 또는 calc(33vw - 100px)
로 선언합니다. 이러한 크기는 반드시 CSS에서
지정된 실제 이미지 너비와 정확히 일치할 필요는 없습니다.
사용자 에이전트는 sizes
속성에서 참으로
평가되는 <미디어 조건>(괄호 안의 부분)을 가진 첫 번째 항목을 사용하거나, 모두 거짓으로 평가되면 마지막
항목(calc(33vw - 100px)
)을 사용합니다.
예를 들어, 뷰포트 너비가 29em
인 경우, (max-width: 30em)
은 참으로 평가되며 100vw
가
사용되므로 리소스 선택을 위해 이미지 크기는 29em
가 됩니다. 반면, 뷰포트 너비가 32em
인 경우,
(max-width: 30em)
은 거짓으로 평가되지만, (max-width: 50em)
은 참으로 평가되며
50vw
가 사용되므로 리소스 선택을 위해 이미지 크기는 16em
(뷰포트 너비의 절반)이 됩니다. 약간 더 넓은 뷰포트는 다른
레이아웃으로 인해 더 작은 이미지를 결과로 나타냅니다.
사용자 에이전트는 그런 다음 효과적인 픽셀 밀도를 계산하고 이전 예와 유사하게 적절한 리소스를 선택할 수 있습니다.
이 예는 이전 예와 동일하지만 이미지는 지연
로드됩니다. 이 경우 sizes
속성은 auto
키워드를 사용할 수 있으며,
사용자 에이전트는 width
속성(또는
CSS에서 지정된 너비)을 사용하여 소스 크기를 계산합니다.
< img loading = "lazy" width = "200" height = "200" sizes = "auto"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "케틀벨 스윙" >
레거시 사용자 에이전트와의 더 나은 하위 호환성을 위해, 필요할 경우 폴백 크기를 지정할 수 있습니다.
< img loading = "lazy" width = "200" height = "200"
sizes = "auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "케틀벨 스윙" >
picture
요소와 source
요소, 그리고 media
속성을 함께 사용하여 이미지 콘텐츠가
달라지는 여러 이미지를 제공할 수 있습니다(예를 들어, 작은 이미지는 큰 이미지의 잘린 버전일 수 있습니다).
< picture >
< source media = "(min-width: 45em)" srcset = "large.jpg" >
< source media = "(min-width: 32em)" srcset = "med.jpg" >
< img src = "small.jpg" alt = "늑대가 눈 속을 달리고 있습니다." >
</ picture >
사용자 에이전트는 source
요소의 media
속성에 있는
미디어 쿼리가 일치하는 첫 번째 요소를 선택한 후, 해당 srcset
속성에서 적절한 URL을
선택합니다.
선택된 리소스에 따라 이미지의 렌더링된 크기가 달라집니다. 다운로드 전에 사용자 에이전트가 사용할 수 있는 크기를 지정하려면 CSS를 사용할 수 있습니다.
img { width : 300 px ; height : 300 px }
@media ( min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }
type
속성을 source
요소에 사용하여 서로 다른
형식의 여러 이미지를 제공할 수 있습니다.
< h2 > 오늘의 추천 기사</ h2 >
< picture >
< source srcset = "/uploads/100-marie-lloyd.webp" type = "image/webp" >
< source srcset = "/uploads/100-marie-lloyd.jxr" type = "image/vnd.ms-photo" >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
</ picture >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
는 영국의 </ a href = "/wiki/Music_hall" > 뮤직 홀</ a > 가수였습니다...
이 예에서, 사용자 에이전트는 지원되는 MIME 타입을 가진 type
속성이 있는 첫 번째 소스를
선택합니다. 만약 사용자 에이전트가 WebP 이미지를 지원한다면, 첫 번째 source
요소가 선택될
것입니다. 만약 그렇지 않고, 사용자 에이전트가 JPEG XR 이미지를 지원한다면, 두 번째 source
요소가 선택됩니다.
이 두 포맷 중 어느 것도 지원되지 않는 경우, img
요소가 선택됩니다.
이 섹션은 비규범적입니다.
CSS와 미디어 쿼리를 사용하여 사용자의 환경, 특히 서로 다른 뷰포트 크기와 픽셀 밀도에 맞춰 동적으로 적응하는 그래픽 페이지 레이아웃을 구성할 수 있습니다. 그러나 콘텐츠의 경우 CSS가 도움이 되지
않으므로, 대신 img
요소의
srcset
속성과
picture
요소를 사용해야 합니다.
이 섹션에서는 이러한 기능을 사용하는 예제를 보여줍니다.
예를 들어, 너비가 600 CSS
픽셀보다 넓은 화면에서는 a-rectangle.png
라는 300×150 이미지를 사용하고,
600 CSS
픽셀 이하의 작은 화면에서는 a-square.png
라는 100×100 이미지를 사용하고자 한다고 가정해 봅시다.
이 마크업은 다음과 같이 작성할 수 있습니다:
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." >
</ picture >
</ figcaption > Barney Frank, 2011</ figcaption >
</ figure >
alt
속성에 어떤 내용을 넣어야 하는지에 대한 자세한 내용은 이미지 대체 텍스트 제공 요구 사항 섹션을 참조하십시오.
이 예제의 문제점은 이미지가 로드될 때 사용자 에이전트가 이미지의 크기를 미리 알지 못한다는 것입니다. 페이지 로드 중에 레이아웃이 여러 번 리플로우되지 않도록 하려면 CSS와 CSS 미디어 쿼리를 사용하여 크기를 제공할 수 있습니다:
< style >
# a { width : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
</ figcaption > Barney Frank, 2011</ figcaption >
</ figure >
또는 width
및 height
속성을 사용하여 구형 사용자 에이전트를 위해 너비와
높이를 제공하고, CSS는 picture
를
지원하는 사용자 에이전트에서만 사용하도록 할 수 있습니다:
< style media = "(max-width: 600px)" >
# a { width : 100 px ; height : 100 px ; }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" width = "300" height = "150"
alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
</ figcaption > Barney Frank, 2011</ figcaption >
</ figure >
img
요소는 src
속성과 함께 사용됩니다. 이 속성은 picture
요소를 지원하지 않는 구형 사용자
에이전트를 위해 사용할 이미지의 URL을 제공합니다.
이는 src
속성에 어떤 이미지를 제공해야 하는지에 대한 질문으로
이어집니다.
저자가 구형 사용자 에이전트에서 가장 큰 이미지를 원한다면, 마크업은 다음과 같이 작성할 수 있습니다:
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< img src = "pear-desktop.jpeg" alt = "The pear is juicy." >
</ picture >
그러나 구형 모바일 사용자 에이전트가 더 중요하다면, 세 개의 이미지를 모두 source
요소에 나열하여 src
속성을 완전히 무시할 수 있습니다.
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture >
이 시점에서 src
속성이 picture
요소를 지원하는 사용자 에이전트에
의해 완전히 무시되고 있으므로, src
속성은 가장 작은 이미지도,
가장 큰 이미지도 아닌 이미지로 기본 설정할 수 있습니다:
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-tablet.jpeg" alt = "The pear is juicy." >
</ picture >
위 예제에서는 max-width
미디어 기능을 사용하여 이미지가 의도된 최대 뷰포트 크기를 지정합니다. 대신
min-width
를 사용할 수도 있습니다.
< picture >
< source srcset = "pear-desktop.jpeg" media = "(min-width: 1281px)" >
< source srcset = "pear-tablet.jpeg" media = "(min-width: 721px)" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture >
srcset 속성은 이 섹션에서 정의된 요구사항을 가진 속성입니다.
존재하는 경우, 그 값은 하나 이상의 이미지 후보 문자열로 구성되어야 하며, 각 문자열은 U+002C 콤마 문자(,)로 구분됩니다. 만약 이미지 후보 문자열이 URL 뒤에 설명자나 ASCII 공백 문자가 없으면, 다음 이미지 후보 문자열은 하나 이상의 ASCII 공백 문자로 시작해야 합니다.
이미지 후보 문자열은 다음 구성 요소로 이루어지며, 아래 목록에 추가로 설명된 제한사항이 적용됩니다:
하나 이상의 ASCII 공백 문자.
유효한 비어있지 않은 URL, U+002C 콤마 문자로 시작하거나 끝나지 않으며, 비상호작용적이고 선택적으로 애니메이션 되는 이미지 리소스를 참조하며, 페이징 되거나 스크립트화 되지 않은 리소스여야 합니다.
하나 이상의 ASCII 공백 문자.
다음 중 하나:
너비 설명자, ASCII 공백 문자, 유효한 0 이상의 정수, 그 뒤에 U+0077 라틴 소문자 W가 위치합니다.
픽셀 밀도 설명자, ASCII 공백 문자, 유효한 부동소수점 수, 그 뒤에 U+0078 라틴 소문자 X가 위치합니다.
하나 이상의 ASCII 공백 문자.
동일한 요소에 대해 동일한 너비 설명자 값을 가진 이미지 후보 문자열이 존재해서는 안 됩니다.
동일한 요소에 대해 동일한 픽셀 밀도
설명자 값을 가진 이미지 후보 문자열이
존재해서는 안 됩니다. 이 요구사항을 충족하기 위해 설명자가 없는 이미지 후보 문자열은 1x
설명자를 가진 문자열과 동일한 것으로 간주됩니다.
만약 요소에 크기 속성이 존재한다면, 해당 요소의 모든 이미지 후보 문자열에는 너비 설명자가 지정되어야 합니다.
sizes 속성은 이 섹션에서 정의된 요구 사항을 가진 속성입니다.
존재하는 경우, 그 값은 유효한 소스 크기 목록이어야 합니다.
유효한 소스 크기 목록은 다음 문법과 일치하는 문자열입니다: [CSSVALUES] [MQ]
< source-size-list > = < source-size > #? , < source-size-value >
< source-size > = < media-condition > < source-size-value > | auto
< source-size-value > = < length > | auto
<source-size-value>이(가) <length>인 경우, 음수일 수 없으며, 수학 함수 외의 CSS 함수를 사용할 수 없습니다.
auto
키워드는 sizes 속성 구문 분석에서 계산되는 너비입니다. 존재하는 경우, 첫 번째 항목이어야 하며 전체 <source-size-list> 값은 "auto
"
문자열(ASCII 대소문자 구분 없음)이거나 "auto,
" 문자열(ASCII 대소문자 구분 없음)로 시작해야 합니다.
이미지 로드를 시작한 img
요소가 자동 크기 허용을 허용하고 렌더링 중인 경우, auto
는 구체적인 객체 크기 너비입니다. 그렇지 않은 경우, auto
값은 무시되며 대신 다음 소스 크기가 사용됩니다.
auto
키워드는 다음 조건이 충족되는 경우
sizes
속성의 source
요소와 sizes
속성의 img
요소에 지정할 수 있습니다. 그렇지 않으면, auto
를 지정해서는 안 됩니다.
또한 width
및 height
속성 또는 CSS를 사용하여 크기를 지정하는 것이
강력하게 권장됩니다. 지정된 크기가 없으면 sizes="auto"
는 렌더링 섹션에서
contain-intrinsic-size: 300px 150px
을 의미하기 때문에 이미지가 300x150 크기로 렌더링될 가능성이 높습니다.
<source-size-value>는 이미지의 의도된 레이아웃 너비를 제공합니다. 작성자는 <media-condition>을 사용하여 다양한 환경에 대해 다른 너비를 지정할 수 있습니다.
<source-size-value>에는 퍼센트가 허용되지 않습니다. 'vw' 단위는 뷰포트 너비에 상대적인 크기를 나타내는 데 사용할 수 있습니다.
img
요소는 현재 요청과 대기 중인 요청을 가지고 있습니다. 현재 요청은 처음에 새로운 이미지 요청으로 설정됩니다. 대기 중인 요청은 처음에 null로 설정됩니다.
이미지 요청은 상태, 현재 URL, 그리고 이미지 데이터를 가집니다.
이미지 요청의 현재 URL은 처음에 빈 문자열로 설정됩니다.
이미지 요청의 이미지 데이터는 디코딩된 이미지 데이터입니다.
이미지 요청의 상태가 부분적으로 사용 가능 또는 완전히 사용 가능일 때, 이미지 요청은 사용 가능하다고 합니다.
img
요소의 현재 요청의 상태가 완전히
사용 가능하고 사용자가 미디어 데이터를 오류 없이 디코딩할 수 있다면, img
요소는 완전히 디코딩 가능하다고 합니다.
img
요소의 현재 요청이 사용 가능할 때, img
요소는 너비가 이미지의 밀도 보정된 자연 너비(있다면)이고, 높이가 이미지의 밀도 보정된 자연 높이(있다면)이며, 외형이 이미지의
자연스러운 외형인 그리기 소스를 제공합니다.
img
요소는 srcset
속성이 지정되었거나 부모가 picture
요소인 경우 srcset
또는 picture
를 사용한다고 합니다.
각 img
요소는 마지막으로 선택된 소스를 가지며, 이는 처음에 null로 설정되어야 합니다.
이미지 요청마다 현재 픽셀 밀도가 있으며, 이는 처음에 1로 설정되어야 합니다.
이미지 요청마다 선호하는 밀도 보정된 크기가 있으며, 이는 너비와 높이로 구성된 구조체 또는 null입니다. 처음에는 null로 설정되어야 합니다.
이미지 요소 img의 밀도 보정된 자연 너비와 높이를 결정하려면:
dim을 img의 현재 요청의 선호하는 밀도 보정된 크기로 설정합니다.
선호하는 밀도 보정된 크기는 이미지의 메타 정보에 기반하여 이미지 프레젠테이션 준비 알고리즘에서 설정됩니다.
dim이 null이면 dim을 img의 자연 크기로 설정합니다.
dim을 반환합니다.
예를 들어, 현재 픽셀 밀도가 3.125인 경우, 이는 1인치 당 300개의 디바이스 픽셀이 있다는 의미이며, 따라서 이미지 데이터가 300x600이면 밀도 보정된 자연 너비와 높이는 96 CSS 픽셀 x 192 CSS 픽셀입니다.
모든 img
및 link
요소는 소스 세트와 연결됩니다.
소스 세트는 하나 이상의 이미지 소스와 소스 크기로 구성된 정렬된 집합입니다.
이미지 소스는 URL이며, 선택적으로 픽셀 밀도 서술자 또는 너비 서술자를 포함할 수 있습니다.
소스 크기는 <소스
크기 값>입니다. 소스 크기가 뷰포트에 상대적인 단위를 가지면, 이는 img
요소의 노드 문서의 뷰포트에 상대적으로 해석되어야 합니다. 다른 단위는 미디어
쿼리와 동일하게 해석되어야 합니다. [MQ]
파싱 오류는 이 섹션의 알고리즘에서 입력과 요구사항 사이의 치명적이지 않은 불일치를 나타냅니다. 사용자는 파싱 오류를 노출하도록 권장됩니다.
이미지가 성공적으로 가져왔는지 여부 (예: 응답 상태가 OK 상태였는지 여부)는 이미지의 유형과 유효한 이미지인지 여부를 결정할 때 무시되어야 합니다.
이렇게 하면 서버가 오류 응답을 반환하더라도 이미지가 표시될 수 있습니다.
사용자는 이미지의 이미지 스니핑 규칙을 적용하여 이미지 유형을 결정해야 하며, 이미지의 관련된 콘텐츠 유형 헤더가 official type을 제공합니다. 이러한 규칙이 적용되지 않는 경우, 이미지의 유형은 이미지의 관련된 콘텐츠 유형 헤더에 의해 제공되는 유형이어야 합니다.
사용자는 img
요소에서 비이미지 리소스를
지원해서는 안 됩니다 (예: 문서 요소가 HTML 요소인 XML 파일). 사용자는 이미지 리소스에 포함된 실행 가능한 코드 (예: 스크립트)를 실행해서는 안 됩니다. 사용자는 멀티페이지 리소스의 첫
번째 페이지만 표시해야 하며 (예: PDF 파일), 리소스가 상호작용 방식으로 동작하지 않도록 해야 하지만, 리소스의 애니메이션은 존중해야 합니다.
이 명세서는 어떤 이미지 유형을 지원해야 하는지에 대해서는 명시하지 않습니다.
기본적으로 이미지는 즉시 로드됩니다. 사용자 에이전트는 사용자에게 필요한 경우에만 이미지를 로드하는 옵션을 제공할 수 있습니다. (예를 들어, 대역폭이 제한된 사용자는 이러한 옵션을 사용할 수 있습니다.)
이미지를 즉시 로드할 때, 사용자 에이전트는 해당 요소가 생성되었거나 관련
변형을 겪을 때마다, 애니메이션 재시작 플래그가 설정된 경우, img
요소의 이미지 데이터를 동기적으로 업데이트해야 합니다.
필요한 경우에만 이미지를 로드할 때, 사용자 에이전트는 img
요소의 현재 요청의 상태가 사용
불가일 때만 이미지 데이터를
업데이트해야 합니다. img
요소가
관련 변형을 겪을 때, 사용자 에이전트가 필요한 경우에만
이미지를 로드한다면, img
요소의 현재 요청의 상태는 사용
불가로 돌아가야 합니다.
img
요소의 관련 변형은 다음과 같습니다:
요소의 src
속성이 이전 값과 동일한
값으로 설정됩니다. 이는 이미지 데이터를
업데이트하는 알고리즘에서 애니메이션 재시작 플래그를 설정해야 합니다.
요소의 crossorigin
속성의 상태가 변경됩니다.
요소의 referrerpolicy
속성의 상태가 변경됩니다.
img
또는 source
요소가 HTML 요소
삽입 단계 또는 HTML 요소 제거 단계를 거쳤다면, 이는 관련 변형으로 간주됩니다.
요소의 부모가 picture
요소이고, 이전 형제 요소인 source
요소의
srcset
,
sizes
, media
, type
, width
, 또는 height
속성이 설정,
변경되거나 제거됩니다.
요소의 채택 단계가 실행됩니다.
요소가 자동 크기 조정을 허용하는 경우: 요소가 렌더링되기 시작하거나 중지하거나, 구체적인 객체 크기의 너비가 변경됩니다. 이는 이미지 데이터를 업데이트하는 알고리즘에서 이벤트 생략 여부 결정 플래그를 설정해야 합니다.
각 document
객체는 사용 가능한 이미지 목록을 가져야 합니다. 이 목록의 각 이미지는 절대 URL, CORS 설정 속성 모드, 그리고 모드가 비 CORS가 아닌 경우 출처로 구성된 튜플로 식별됩니다. 각 이미지는 또한 상위 레이어 캐싱 무시 플래그를 가집니다. 사용자 에이전트는 언제든지 한 document
객체의 사용 가능한 이미지 목록에서
다른 객체로 항목을 복사할 수 있지만(예: document
가
생성될 때,
다른 document
에서 로드된 모든 이미지를 추가할 수
있습니다.),
이 방식으로 복사된 항목의 키를 변경해서는 안 되며, 복사된 항목에 대해 상위 레이어 캐싱 무시 플래그를 해제해야 합니다. 사용자 에이전트는 또한
메모리를 절약하기 위해 언제든지 이러한 목록에서 이미지를 제거할 수 있습니다. 사용자 에이전트는 상위 레이어 캐싱 의미에 따라 적절하게 사용 가능한 이미지 목록의 항목을 제거해야 합니다(예: HTTP `Cache-Control
`
응답 헤더가 있는 경우).
사용 가능한
이미지 목록은 src
속성을 이전에
로드된 URL로 변경할 때 동기적 전환을 가능하게 하고, 같은 문서에서 이미지를 다시 다운로드하지 않도록 하기 위한 것입니다. 이 목록은 이전 이미지가 여전히 로드 중일 때 같은 이미지를 다시
다운로드하는 것을 방지하는 데 사용되지 않습니다.
사용자 에이전트는 사용 가능한 이미지 목록과 별도로 이미지 데이터를 저장할 수도 있습니다.
예를 들어, 리소스에 HTTP 응답 헤더 `Cache-Control: must-revalidate
`가 있는 경우, 상위 레이어 캐싱
무시 플래그가 해제되면 사용자 에이전트는 사용 가능한 이미지 목록에서 해당 이미지를 제거하지만, 이미지 데이터를 별도로
보관하고 서버가 304 Not Modified
상태로 응답할 경우 이를 사용할 수 있습니다.
이미지 데이터는 일반적으로 파일 크기를 줄이기 위해 인코딩됩니다. 이는 사용자 에이전트가 이미지를 화면에 표시하기 위해 데이터를 디코딩해야 한다는 것을 의미합니다. 디코딩은 이미지의 미디어 데이터를 화면에 표시하기에 적합한 비트맵 형태로 변환하는 과정입니다. 이 과정은 콘텐츠를 표시하는 다른 과정에 비해 상대적으로 느릴 수 있습니다. 따라서 사용자 에이전트는 최상의 사용자 경험을 제공하기 위해 언제 디코딩을 수행할지 선택할 수 있습니다.
이미지 디코딩이 다른 콘텐츠의 표시를 완료될 때까지 지연시키는 경우, 이를 동기적 디코딩이라고 합니다. 일반적으로 이 방법은 이미지를 다른 콘텐츠와 동시에 원자적으로 표시하는 효과가 있습니다. 그러나 이 디코딩을 수행하는 데 소요되는 시간만큼 표시가 지연됩니다.
이미지 디코딩이 다른 콘텐츠의 표시를 지연시키지 않는 경우, 이를 비동기적 디코딩이라고 합니다. 이 방법은 비이미지 콘텐츠를 더 빠르게 표시할 수 있는 효과가 있습니다. 그러나 디코딩이 완료될 때까지 화면에 이미지 콘텐츠가 표시되지 않습니다. 디코딩이 완료되면 화면이 이미지로 업데이트됩니다.
동기 및 비동기 디코딩 모드 모두에서 최종 콘텐츠는 동일한 시간이 경과한 후 화면에 표시됩니다. 주요 차이점은 사용자 에이전트가 비이미지 콘텐츠를 최종 콘텐츠보다 먼저 표시할지 여부입니다.
사용자 에이전트가 동기적 또는 비동기적 디코딩을 수행할지 결정하는 데 도움을 주기 위해, decoding
속성을 img
요소에 설정할 수 있습니다. decoding
속성의 가능한 값은 다음과 같은 이미지 디코딩 힌트 키워드입니다:
키워드 | 상태 | 설명 |
---|---|---|
sync
| 동기적 | 이 이미지를 다른 콘텐츠와 원자적으로 표시하기 위해 동기적으로 디코딩하도록 설정합니다. |
async
| 비동기적 | 다른 콘텐츠의 표시를 지연시키지 않기 위해 비동기적으로 디코딩하도록 설정합니다. |
auto
| 자동 | 디코딩 모드에 대한 특별한 설정이 없음을 나타냅니다(기본값). |
이미지를 디코딩할 때, 사용자 에이전트는 decoding
속성의 상태에 의해 나타난 선호를
존중해야 합니다. 상태가 자동으로 설정된
경우, 사용자 에이전트는 임의의 디코딩 동작을 선택할 수 있습니다.
decode()
메서드를 사용하여 디코딩 동작을
제어할 수도 있습니다. decode()
메서드는 화면에 콘텐츠를
표시하는 프로세스와 독립적으로 디코딩을 수행하므로, decoding
속성에 영향을 받지 않습니다.
이 알고리즘은 병렬로 실행 중인 단계에서 호출될 수 없습니다. 사용자 에이전트가 병렬로 실행 중인 단계에서 이 알고리즘을 호출해야 하는 경우, 태스크를 대기열에 추가해야 합니다.
사용자 에이전트가 img
요소의 이미지 데이터를 업데이트할 때, 선택적으로 애니메이션 재시작 플래그가 설정된 상태로, 또는 이벤트 생략 가능
플래그가 설정된 상태로, 다음 단계를 실행해야 합니다:
이 알고리즘을 병렬로 계속 실행합니다.
이 인스턴스 이후에 시작된 동일한 img
요소에 대한
다른 인스턴스(심지어 중단되었고 더 이상 실행되지 않는 경우라도)가 있다면 반환합니다.
이 알고리즘을 계속하기 위해 마이크로태스크를 대기열에 추가합니다.
사용자 에이전트가 이미지를 지원할 수 없거나 이미지 지원이 비활성화된 경우, 이미지 요청을 중단하고 현재 요청과 보류 중인 요청을 사용할 수 없음 상태로 설정하고 보류 중인 요청을 null로 설정합니다.
selected source를 null로, selected pixel density를 정의되지 않음으로 설정합니다.
요소가 srcset 또는 picture를
사용하지 않으며, 비어 있지 않은 src
속성이 지정된 경우, 선택된
소스를 요소의 src
속성 값으로 설정하고 selected pixel density를 1.0으로 설정합니다.
요소의 마지막 선택된 소스를 selected source로 설정합니다.
selected source가 null이 아닌 경우:
urlString을 요소의 노드 문서를 기준으로 selected source에 대한 URL 인코딩-파싱 및 직렬화의 결과로 설정합니다.
urlString이 실패인 경우 이 내부 단계를 중단합니다.
key를 urlString, img
요소의
crossorigin
속성의 모드, 및 해당 모드가 No CORS가 아닌 경우, 요소의 노드
문서의 출처로 구성된 튜플로 설정합니다.
사용 가능한 이미지 목록에 key에 대한 항목이 포함되어 있는 경우:
해당 항목에 대해 상위 계층 캐싱 무시 플래그를 설정합니다.
이미지 요청을 중단하고 현재 요청과 보류 중인 요청을 중단합니다.
보류 중인 요청을 null로 설정합니다.
요소 태스크를
대기열에 추가하고 img
요소에 대해 다음 단계를 실행합니다:
이미지 데이터 업데이트 알고리즘을 중단합니다.
마이크로태스크를 대기열에 추가하여 이 알고리즘의 나머지 부분을 수행하고, 이 알고리즘을 호출한 태스크가 계속 실행될 수 있도록 합니다.
이 알고리즘의 다른 인스턴스가 img
요소에 대해 이 인스턴스
이후에 시작되었고 (중단되었고 더 이상 실행되지 않는 경우라도) 반환합니다.
마지막 인스턴스만 효과가 있으므로 예를 들어 src
, srcset
, 및 crossorigin
속성이 순차적으로 설정될 때 다중 요청을 방지할 수 있습니다.
selected source와 selected pixel density를 각각 이미지 소스 선택의 결과로 설정합니다.
selected source가 null인 경우:
현재 요청의 상태를 손상됨으로 설정하고, 이미지 요청을 중단합니다.
요소 태스크를 대기열에
추가하고 img
요소에 대해
다음 단계를 실행합니다:
반환합니다.
urlString을 요소의 노드 문서를 기준으로 selected source에 대한 URL 인코딩-파싱 및 직렬화의 결과로 설정합니다.
urlString이 실패인 경우:
보류 중인 요청이 null이 아니고 urlString이 보류 중인 요청의 현재 URL과 동일한 경우 반환합니다.
urlString이 현재 요청의 현재 URL과 같고 현재 요청의 상태가 부분적으로 사용 가능한 경우, 이미지 요청을 중단하고 보류 중인 요청을 요소 태스크를 대기열에 추가하여 애니메이션 재시작이 설정된 경우 애니메이션을 재시작하고 반환합니다.
이미지 요청을 중단합니다.
만약 현재 요청의 상태가 사용 불가 또는 손상됨이라면, 현재 요청을 image request으로 설정하십시오. 그렇지 않으면, 보류 중인 요청을 image request으로 설정하십시오.
request을 잠재적 CORS 요청 만들기의 결과로 설정하고
urlString, "image
" 및 요소의 crossorigin
속성의 현재 상태를 사용합니다.
요소가 srcset 또는 picture를
사용하는 경우, request의 이니시에이터를 "imageset
"으로 설정합니다.
request의 참조 정책을 요소의 referrerpolicy
속성의 현재 상태로 설정합니다.
request의 우선순위를 요소의 fetchpriority
속성의 현재 상태로 설정합니다.
delay load event을 img
의 게으른 로딩 속성이 적극적 상태에 있거나
스크립팅이 비활성화된 경우 true로, 그렇지
않으면 false로 설정합니다.
img
에 대해 요소가 게으르게
로드될 것인지 여부 결정 단계가 true를 반환하는 경우:
img
의 게으른
로드 재개 단계를 이 알고리즘의 나머지 부분으로 설정하고 이미지 가져오기 단계를 시작합니다.
게으르게 로드되는 요소의
교차 관찰 시작을 img
요소에 대해
실행합니다.
반환합니다.
이미지 가져오기: 가져오기 request. 이 알고리즘을 반환하고 나머지 단계를 response에 대해 응답 처리의 일부로 실행합니다.
이 방식으로 획득된 리소스가 있다면, 이는 image request의 이미지 데이터입니다. 이는 CORS-동일 출처이거나 CORS-교차 출처일 수 있으며, 이는 이미지의 다른 API와의 상호작용에 영향을 미칩니다
(예: canvas
에서 사용될
때).
delay load event이 true일 때, 이미지를 가져오면 요소의 노드 문서의 로드 이벤트를 지연시켜야 하며, 이는 리소스가 가져온 후 네트워킹 태스크 소스에 의해 대기열에 추가된 태스크가 실행될 때까지 지연됩니다.
이 불행히도 사용자의 로컬 네트워크에 대한 간단한 포트 스캔을 수행하는 데 사용할 수 있습니다 (특히 스크립팅과 함께 사용하면, 비록 스크립팅이 실제로 이러한 공격을 수행하는 데 필요하지 않더라도). 사용자 에이전트는 이러한 공격을 완화하기 위해 이보다 엄격한 교차 출처 접근 제어 정책을 구현할 수 있지만, 불행히도 그러한 정책은 기존 웹 콘텐츠와 호환되지 않는 경우가 많습니다.
가능한 한 빨리 다음 목록의 첫 번째 적용 가능한 항목으로 이동합니다:
multipart/x-mixed-replace
인
경우이미지가 가져오는 동안 대기열에 추가된 다음 태스크는 다음 단계를 실행해야 합니다:
만약 image request이 보류 중인 요청이며 적어도 하나의 본문 부분이 완전히 디코딩되었다면, 현재 요청에 대한 이미지 요청을 중단하고, 보류 중인 요청을 현재 요청으로 업그레이드하십시오.
그렇지 않고, 만약 image request이 보류 중인 요청이며 사용자 에이전트가 이미지 요청의 이미지가 치명적인 방식으로 손상되어 이미지 크기를 얻을 수 없음을 판단할 수 있는 경우, 현재 요청에 대한 이미지 요청을 중단하고, 보류 중인 요청을 현재 요청으로 업그레이드하며, 현재 요청의 상태를 손상됨으로 설정하십시오.
그렇지 않고, 만약 image request이 현재 요청이며, 그 상태가 사용 불가이고, 사용자 에이전트가 image request의 이미지의 너비와 높이를 판단할 수 있다면, 현재 요청의 상태를 부분적으로 사용 가능으로 설정하십시오.
그렇지 않고, 만약 image request이 현재 요청이며, 그 상태가 사용 불가이고, 사용자 에이전트가 image request의 이미지가 치명적인 방식으로 손상되어 이미지 크기를 얻을 수 없음을 판단할 수 있는 경우, 현재 요청의 상태를 손상됨으로 설정하십시오.
이미지가 가져오는 중일 때 네트워킹 작업 소스에 의해 대기열에 추가된 각 작업은 이미지의 표현을 업데이트해야 합니다. 그러나 새로운 본문 부분이 들어올
때마다 사용자 에이전트가 이미지의 너비와 높이를 결정할 수 있다면, img
요소를 제공하기 위해 현재 요청을 준비하고 이전 이미지를 교체해야
합니다. 하나의 본문 부분이 완전히 디코딩되면 다음 단계를 수행하십시오:
이미지 데이터가 지원되는 파일 형식이 아닌 경우, 사용자 에이전트는 image request의 상태를 손상됨으로 설정하고, 현재 요청과 보류 중인 요청을 중단하고, 보류 중인 요청을 현재
요청으로 업그레이드한 다음, 이벤트 생략 가능이 설정되지 않았거나 previous URL이
urlString과 같지
않은 경우 요소 태스크를
대기열에 추가하고 img
요소에 대해
이벤트를
발생시켜 error
를 전달합니다.
사용자 에이전트가 요소 x에 대해 위 알고리즘을 실행하는 동안, 요소가 연결된 상태가 아닌 경우에도 요소 x에 대한 강한 참조가 요소의 노드 문서에서 유지되어야 합니다.
이미지 요청 또는 null image request에 대해 이미지 요청을 중단하는 것은 다음 단계를 실행하는 것을 의미합니다:
image request이 null이면 반환합니다.
가능하면 image request의 이미지 데이터를 잊어버립니다.
image request에 대해 가져오기 알고리즘의 모든 인스턴스를 중단하고 해당 알고리즘에서 생성된 보류 중인 모든 태스크를 삭제합니다.
img
요소에 대해 대기 중인 요청을 현재 요청으로 업그레이드한다는 것은 다음 단계를 실행하는 것을
의미합니다:
이미지 요소 img에 대해 이미지 요청 req을(를) 주어진 프레젠테이션을 위해 이미지를 준비하려면:
exifTagMap을 req의 이미지 데이터에서 얻은 EXIF 태그로 설정합니다. 이는 관련 코덱에 의해 정의됩니다. [EXIF]
physicalWidth 및 physicalHeight을(를) req의 이미지 데이터에서 얻은 너비와 높이로 설정합니다. 이는 관련 코덱에 의해 정의됩니다.
dimX을 exifTagMap의 태그 0xA002
(PixelXDimension
)의 값으로 설정합니다.
dimY을 exifTagMap의 태그 0xA003
(PixelYDimension
)의 값으로 설정합니다.
resX을 exifTagMap의 태그 0x011A
(XResolution
)의 값으로 설정합니다.
resY을 exifTagMap의 태그 0x011B
(YResolution
)의 값으로 설정합니다.
resUnit을 exifTagMap의 태그 0x0128
(ResolutionUnit
)의 값으로
설정합니다.
dimX 또는 dimY 중 하나라도 양의 정수가 아닌 경우, 반환합니다.
resX 또는 resY 중 하나라도 양의 부동 소수점 숫자가 아닌 경우, 반환합니다.
resUnit이 2
(Inch
)와 같지 않으면 반환합니다.
widthFromDensity을 physicalWidth의 값에 72를 곱하고 resX로 나눈 값으로 설정합니다.
heightFromDensity을 physicalHeight의 값에 72를 곱하고 resY로 나눈 값으로 설정합니다.
widthFromDensity가 dimX과 같지 않거나 heightFromDensity가 dimY와 같지 않으면 반환합니다.
req의 이미지 데이터가 CORS-교차 출처이면, img의 자연 치수를 dimX 및 dimY로 설정하고, img의 픽셀 데이터를 적절히 스케일링하고 반환합니다.
req의 선호하는 밀도 보정 치수를 폭을 dimX로, 높이를 dimY로 설정된 구조체로 설정합니다.
req의 img
요소의
프레젠테이션을 적절하게 업데이트합니다.
EXIF의 해상도는 CSS 포인트 당 인치와 동등하므로, 72는 해상도에서 크기를 계산하기 위한 기본값입니다.
이미지가 이미 프레젠테이션된 후에 EXIF가 도착하는 경우에 대해 아직 명확하게 지정되지 않았습니다. 참조 이슈 #4929.
이미지 요소 el에 대해 img
요소를 주어진 이미지 소스 선택하려면:
el에 대한 소스 세트 업데이트를 수행합니다.
el의 소스 세트가 비어 있으면, URL로 null을 반환하고 픽셀 밀도로 undefined를 반환합니다.
el의 소스 세트에서 이미지 소스를 선택한 결과를 반환합니다.
소스 세트 sourceSet에 대해 이미지 소스를 선택하려면:
만약 sourceSet에 있는 항목 b가 sourceSet의 이전 항목 a와 동일한 관련 픽셀 밀도 디스크립터를 갖고 있다면, 항목 b를 제거합니다. sourceSet에 있는 항목들이 더 이상 이전 항목과 동일한 관련 픽셀 밀도 디스크립터를 갖지 않을 때까지 이 단계를 반복합니다.
구현에 정의된 방식으로 sourceSet에서 하나의 이미지 소스를 선택합니다. 이를 selectedSource로 합니다.
selectedSource와 그에 연관된 픽셀 밀도를 반환합니다.
문자열 default source, 문자열 srcset, 문자열 sizes, 요소 또는 null img이 주어졌을 때 소스 세트 생성을 요청받으면:
source set을 빈 소스 세트로 설정합니다.
srcset이 빈 문자열이 아닌 경우, source set을 srcset을 파싱한 결과로 설정합니다.
default source가 빈 문자열이 아니고, source set에 픽셀 밀도 디스크립터 값이 1인 이미지 소스나 너비 디스크립터가 포함되지 않은 경우, 기본 소스를 source set에 추가합니다.
source set의 소스 밀도를 정규화합니다.
source set을 반환합니다.
주어진 img
또는 link
요소 el에 대해
소스 세트를 업데이트하도록 요청받으면, 사용자 에이전트는 다음을 수행해야 합니다:
elements에 « el »을(를) 할당합니다.
만약 el이(가) picture
요소의
자식인 img
요소라면,
elements의 내용을 el의 부모 노드의 자식 요소들로 교체하고, 상대적인 순서를 유지합니다.
img에 el을 할당합니다. 만약 el이(가) img
요소가 아니라면 null을
할당합니다.
각 child에 대해 elements에서 다음을 수행합니다:
만약 child가 el과 동일하다면:
default source를 빈 문자열로 설정합니다.
srcset을 빈 문자열로 설정합니다.
sizes을 빈 문자열로 설정합니다.
만약 el이(가) img
요소이고 srcset
속성을 가지고 있다면, srcset을 해당 속성의 값으로 설정합니다.
그렇지 않고, el이(가) link
요소이고 imagesrcset
속성을 가지고 있다면, srcset을 해당 속성의 값으로 설정합니다.
만약 el이(가) img
요소이고 sizes
속성을 가지고 있다면, sizes을 해당 속성의 값으로 설정합니다.
그렇지 않고, el이(가) link
요소이고 imagesizes
속성을 가지고 있다면, sizes을 해당 속성의 값으로 설정합니다.
만약 el이(가) img
요소이고 src
속성을 가지고 있다면, default source를 해당 속성의 값으로 설정합니다.
그렇지 않고, el이(가) link
요소이고 href
속성을 가지고 있다면, default source를 해당 속성의 값으로 설정합니다.
el의 소스 세트를 default source, srcset, sizes, 그리고 img을 사용하여 소스 세트 생성의 결과로 설정합니다.
반환합니다.
만약 el이(가) link
요소라면, elements에는 오직 el만 포함되므로, 이 단계가 즉시 도달되고 나머지 알고리즘은 실행되지 않습니다.
child의 srcset 속성을 파싱하고, 반환된 소스 세트를 source set으로 설정합니다.
만약 child가 media
속성을
가지고 있으며, 그 값이 환경과 일치하지 않으면, 다음으로 넘어갑니다.
child의 sizes 속성을 파싱하고, img을 사용하여 source set의 소스 크기를 반환된 값으로 설정합니다.
만약 child가 type
속성을
가지고 있으며, 그 값이 알 수 없거나 지원되지 않는 MIME 타입이라면,
다음으로 넘어갑니다.
만약 child가 width
또는 height
속성을
가지고 있다면, el의 크기 속성 소스를
child로 설정합니다. 그렇지 않으면, el의 크기 속성 소스를
el로 설정합니다.
소스 밀도를 정규화합니다 source set의.
el의 소스 세트를 source set으로 설정합니다.
반환합니다.
각 img
요소는 독립적으로
이전 형제 source
요소와
img
요소 자체를 고려하여 이미지 소스를 선택하며, 동일한 picture
요소 내의 다른
img
요소나 source
요소와 같은 무효한 요소는
무시합니다.
요소에서 srcset 속성을 파싱하도록 요청받았을 때, 요소의 srcset 속성 값을 다음과 같이 파싱합니다:
input을 이 알고리즘에 전달된 값으로 설정합니다.
position을 input의 시작을 가리키는 포인터로 설정합니다.
candidates를 초기에는 빈 소스 세트로 설정합니다.
분할 루프: position을 기준으로 input에서 ASCII 공백 문자 또는 U+002C 쉼표 문자를 포함하는 코드 포인트 시퀀스를 수집합니다. U+002C 쉼표 문자가 수집된 경우, 이는 파싱 오류입니다.
position이 input의 끝을 넘어서면 candidates를 반환합니다.
position을 기준으로 input에서 ASCII 공백 문자가 아닌 코드 포인트 시퀀스를 수집하고, 이를 url로 설정합니다.
descriptors를 새로운 빈 목록으로 설정합니다.
만약 url이 U+002C 쉼표로 끝난다면:
url에서 모든 U+002C 쉼표 문자를 제거합니다. 만약 이 과정에서 하나 이상의 문자가 제거되었다면, 이는 파싱 오류입니다.
그렇지 않다면:
기술자 토크나이저: position을 기준으로 input 내의 ASCII 공백 문자를 건너뜁니다.
current descriptor를 빈 문자열로 설정합니다.
state를 기술자 내로 설정합니다.
c를 position에서의 문자로 설정합니다. state의 값에 따라 다음을 수행합니다. 이 단계에서는 "EOF"가 input의 끝을 넘어선 position을 나타내는 특수 문자임을 의미합니다.
c의 값에 따라 다음을 수행합니다:
만약 current descriptor가 비어 있지 않다면, current descriptor를 descriptors에 추가하고, current descriptor를 빈 문자열로 설정합니다. state를 기술자 후로 설정합니다.
position을 input의 다음 문자로 이동합니다. 만약 current descriptor가 비어 있지 않다면, 이를 descriptors에 추가합니다. 기술자 파서 단계로 이동합니다.
c를 current descriptor에 추가합니다. state를 괄호 내로 설정합니다.
만약 current descriptor가 비어 있지 않다면, 이를 descriptors에 추가합니다. 기술자 파서 단계로 이동합니다.
c를 current descriptor에 추가합니다.
c의 값에 따라 다음을 수행합니다:
c를 current descriptor에 추가합니다. state를 기술자 내로 설정합니다.
current descriptor를 descriptors에 추가합니다. 기술자 파서 단계로 이동합니다.
c를 current descriptor에 추가합니다.
c의 값에 따라 다음을 수행합니다:
이 상태를 유지합니다.
기술자 파서 단계로 이동합니다.
state를 기술자 내로 설정합니다. position을 input의 이전 문자로 설정합니다.
position을 input의 다음 문자로 이동합니다. 이 단계를 반복합니다.
향후 추가 사항과의 호환성을 위해, 이 알고리즘은 다중 기술자와 괄호를 포함한 기술자를 지원합니다.
기술자 파서: error를 아니오로 설정합니다.
width를 없음으로 설정합니다.
density를 없음으로 설정합니다.
future-compat-h를 없음으로 설정합니다.
descriptors의 각 기술자에 대해 다음 목록에서 적절한 단계를 실행합니다:
만약 사용자 에이전트가 sizes
속성을 지원하지 않는 경우, error를 예로 설정합니다.
규격 준수 사용자 에이전트는 sizes
속성을 지원합니다. 그러나, 사용자 에이전트는 실습에서 점진적으로 기능을 구현하고 배포하는 경향이 있습니다.
만약 width와 density가 모두 없음이 아니라면, error를 예로 설정합니다.
기술자에 음수가 아닌 정수 파싱 규칙을 적용합니다. 결과가 0이라면, error를 예로 설정합니다. 그렇지 않으면, width를 그 결과로 설정합니다.
만약 width, density, 그리고 future-compat-h가 모두 없음이 아니라면, error를 예로 설정합니다.
기술자에 부동소수점 숫자 값 파싱 규칙을 적용합니다. 결과가 0보다 작다면, error를 예로 설정합니다. 그렇지 않으면, density를 그 결과로 설정합니다.
만약 density가 0이라면, 자연 치수는 무한대가 됩니다. 사용자 에이전트는 이미지를 렌더링할 수 있는 크기에 제한을 둘 것으로 예상됩니다.
이는 파싱 오류입니다.
만약 future-compat-h와 density가 모두 없음이 아니라면, error를 예로 설정합니다.
기술자에 음수가 아닌 정수 파싱 규칙을 적용합니다. 결과가 0이라면, error를 예로 설정합니다. 그렇지 않으면, future-compat-h를 그 결과로 설정합니다.
error를 예로 설정합니다.
만약 future-compat-h가 없음이 아니고 width가 없음이라면, error를 예로 설정합니다.
만약 error가 여전히 아니오라면, 새로운 이미지 소스를 candidates에 추가하며, URL을 url로, width가 없음이 아니라면 width로, density가 없음이 아니라면 pixel density로 설정합니다. 그렇지 않으면, 이는 파싱 오류입니다.
분할 루프 단계로 돌아갑니다.
요소 element에서 img
요소 또는 null
img와 함께 sizes 속성을 파싱하도록 요청받았을 때:
unparsed sizes list를 element의 sizes 속성 값(또는 속성이 없는 경우 빈 문자열)에서 쉼표로 구분된 구성 요소 값 목록 파싱의 결과로 설정합니다. [CSSSYNTAX]
size를 null로 설정합니다.
unparsed sizes list 내의 각 unparsed size에 대해:
unparsed size의 끝에서 모든 연속된 <whitespace-token>을 제거합니다. unparsed size가 이제 비어 있다면, 이는 파싱 오류입니다. 계속합니다.
만약 unparsed size의 마지막 구성 요소 값이 유효한 음수가 아닌 <source-size-value>라면, size를 그 값으로 설정하고 unparsed size에서 구성 요소 값을 제거합니다. 수학 함수 이외의 CSS 함수는 유효하지 않습니다. 그렇지 않으면, 이는 파싱 오류입니다. 계속합니다.
만약 size가 auto
이고,
img가 null이 아니며, img가 렌더링 중이고, img가 auto-sizes를
허용한다면, size를 img의 구체적 객체 크기 너비로, CSS 픽셀 단위로 설정합니다.
만약 size가 여전히 auto
라면,
이는 무시됩니다.
unparsed size의 끝에서 모든 연속된 <whitespace-token>을 제거합니다. unparsed size가 이제 비어 있다면:
unparsed size의 남은 구성 요소 값을 <media-condition>으로 파싱합니다. 올바르게 파싱되지 않거나, 올바르게 파싱되었지만 <media-condition>이 false로 평가된다면, 계속합니다. [MQ]
만약 size가 auto
가
아니라면, size를 반환합니다. 그렇지 않으면, 계속합니다.
100vw
를 반환합니다.
마지막 항목이 아닌 <source-size-list>에 <source-size-value>가 <length>인 경우, 동반되는 <media-condition> 없이 단독으로 사용하는 것은 유효하지 않습니다. 그러나, 파싱 알고리즘은 리스트의 어느
지점에서도 이를 허용하며, 리스트의 이전 항목들이 사용되지 않았다면 즉시 이를 사이즈로 수락합니다. 이는 향후 확장을 가능하게 하고, 최종 쉼표와 같은 단순한 작성자 오류로부터 보호하기 위함입니다.
auto
키워드는 다른 항목들이
뒤따라와 레거시 사용자 에이전트를 위한 폴백을 제공하는 것이 허용됩니다.
이미지 소스는 픽셀 밀도 설명자, 너비 설명자, 또는 설명자 없이 URL과 함께 제공될 수 있습니다. 소스 세트를 정규화하면 모든 이미지 소스에 픽셀 밀도 설명자를 부여합니다.
소스 세트의 밀도를 정규화하라는 요청을 받으면, 사용자 에이전트는 다음을 수행해야 합니다:
사용자 에이전트는 img
요소의
이미지를 업데이트하여 환경 변화에 대응하기 위해 언제든지 다음 알고리즘을 실행할 수 있습니다. (사용자 에이전트가 이 알고리즘을
실행해야 할 의무는 없습니다. 예를 들어, 사용자가 더 이상 페이지를 보지 않는 경우, 환경이 다시 변할 수 있으므로 사용자가 페이지로 돌아올 때까지 어떤 이미지를 사용할지 결정하는
것을 연기할 수 있습니다.)
사용자 에이전트는 특히 사용자가 뷰포트 크기를 변경할 때(예: 창 크기를 조정하거나 페이지
확대/축소를 변경할 때)와 img
요소가 문서에 삽입될 때 이 알고리즘을 실행하여 밀도 보정된 자연 너비와 높이가 새로운 뷰포트와 일치하고, 아트 디렉션이 포함된 경우 올바른 이미지가 선택되도록 할 것을 권장합니다.
안정 상태 대기를 수행합니다. 동기식 섹션은 이 알고리즘의 나머지 모든 단계를 포함하며 알고리즘이 동기식 섹션이 종료되었다고 말할 때까지 계속됩니다. (동기식 섹션의 단계는 ⌛로 표시됩니다.)
⌛ img
요소가
srcset 또는
picture를 사용하지 않거나, 노드 문서가 완전히 활성화되지 않음 상태이거나, 이미지 데이터의
리소스 타입이 multipart/x-mixed-replace
이거나,
보류 중인 요청이 null이 아닌 경우,
반환합니다.
⌛ 이미지 소스 선택에서 URL과 픽셀 밀도로부터 selected source와 selected pixel density를 얻습니다.
⌛ selected source가 null인 경우, 반환합니다.
⌛ selected source와 selected pixel density가 요소의 마지막 선택된 소스 및 현재 픽셀 밀도와 동일한 경우, 반환합니다.
⌛ URL 인코딩, 파싱 및 직렬화 결과를 사용하여 urlString을 설정합니다.
⌛ urlString이 실패한 경우, 반환합니다.
⌛ 요소의 crossorigin
콘텐츠 속성의 상태를 corsAttributeState로 설정합니다.
⌛ key를 urlString, corsAttributeState, 및 corsAttributeState가 No CORS가 아닌 경우 origin을 포함하는 튜플로 설정합니다.
⌛ urlString을 current URL로 가지는 새로운 이미지 요청을 image request로 설정합니다.
⌛ 요소의 보류 중인 요청을 image request로 설정합니다.
사용 가능한 이미지 목록에 key의 항목이 포함되어 있는 경우, image request의 이미지 데이터를 항목의 데이터로 설정합니다. 다음 단계로 진행합니다.
그렇지 않으면:
잠재적 CORS 요청 생성 결과를
request로 설정하고, urlString, "image
", 및
corsAttributeState를 사용합니다.
request의 클라이언트를 client로, 이니시에이터를 "imageset
"로 설정하고,
request의 동기
플래그를 설정합니다.
요소의 referrerpolicy
속성의 현재 상태를 request의 referrer policy로 설정합니다.
요소의 fetchpriority
속성의 현재 상태를 request의 우선순위로 설정합니다.
fetch를 사용하여 request의 response를 가져옵니다.
만약 response의 안전하지 않은 응답이 네트워크
오류이거나, 이미지 형식이 지원되지 않거나, image request의 이미지가 치명적인 방식으로 손상되어 이미지 크기를 얻을 수 없거나,
리소스 타입이 multipart/x-mixed-replace
인
경우, 보류 중인 요청을
null로 설정하고 이 단계를 중단합니다.
그렇지 않으면, response의 안전하지 않은 응답을 image
request의 이미지
데이터로 설정합니다. 이는 CORS 동일 출처 또는 CORS 교차 출처일
수 있으며, 이는 다른 API와의 상호작용에 영향을 미칩니다 (예: canvas
에서
사용될 때).
요소 작업 대기열에
추가를 수행하여 img
요소와 다음
단계를 설정합니다:
만약 img
요소가 이 알고리즘이 시작된 이후 관련 변형을 경험했다면, 보류 중인 요청을
null로 설정하고 이 단계를 중단합니다.
img
요소의 마지막
선택된 소스를 selected source로, img
요소의 현재
픽셀 밀도를 selected pixel density로 설정합니다.
key를 사용하여 이미지를 사용 가능한 이미지 목록에 추가하고, 상위 계층 캐싱 무시 플래그를 설정합니다.
img
요소를 사용하여 이미지 요청을 발표를 위해
준비합니다.
별도로 명시되지 않은 경우, alt
속성은 반드시 지정되어야 하며, 그
값은 비어있어서는 안 됩니다. 이 값은 이미지의 적절한 대체물이 되어야 합니다. alt
속성에 대한 구체적인 요구 사항은 이미지가 표현하려는 의도에
따라, 다음 섹션에서 설명된 바와 같이 달라집니다.
대체 텍스트를 작성할 때 고려해야 할 가장 일반적인 규칙은 다음과 같습니다: 모든 이미지를 alt
속성의 텍스트로 교체해도 페이지의 의미가 변경되지
않도록 하는 것이 목적입니다.
따라서 일반적으로 대체 텍스트는 이미지를 포함할 수 없었을 때 작성했을 내용을 고려하여 작성할 수 있습니다.
이와 연관된 또 다른 규칙은 alt
속성의 값은 절대로 이미지의
캡션, 제목, 또는 설명으로 간주될 수 있는 텍스트를 포함해서는 안 된다는 것입니다. 이 속성은 사용자가 이미지를 대신하여 사용할 수
있는 대체 텍스트를 포함해야 하며, 이미지를 보완하기 위한 것이 아닙니다. 보완적인 정보가 필요하다면 title
속성을 사용할 수 있습니다.
또 다른 관련 규칙은 alt
속성의 값이 이미지 옆에 있는 본문에
이미 제공된 정보를 반복해서는 안 된다는 것입니다.
대체 텍스트를 생각하는 한 가지 방법은 이미지를 포함한 페이지를 누군가에게 전화로 설명한다고 생각하는 것입니다. 이미지가 있다는 사실을 언급하지 않고 페이지를 읽어주었을 때 사용하는 말이 일반적으로 대체 텍스트를 작성하는 좋은 출발점입니다.
하나 이상의 이미지를 포함하지만 텍스트 콘텐츠는 없는 a
요소가
하이퍼링크를 생성하거나, button
요소인 경우, alt
속성에는
링크나 버튼의 목적을 함께 전달하는 텍스트가 포함되어야 합니다.
이 예시에서는 사용자가 세 가지 색상 목록에서 선호하는 색상을 선택하도록 요청받습니다. 각 색상은 이미지로 제공되지만, 이미지를 표시하지 않도록 설정된 사용자 에이전트에서는 색상 이름이 대신 사용됩니다:
< h1 > 색상을 선택하세요</ h1 >
< ul >
< li >< a href = "green.html" > < img src = "green.jpeg" alt = "Green" > </ a ></ li >
< li >< a href = "blue.html" > < img src = "blue.jpeg" alt = "Blue" > </ a ></ li >
< li >< a href = "red.html" > < img src = "red.jpeg" alt = "Red" > </ a ></ li >
</ ul >
이 예시에서는 각 버튼에 사용자가 원하는 색상 출력을 나타내는 이미지 세트가 있습니다. 각 경우에 첫 번째 이미지는 대체 텍스트를 제공합니다.
< button name = "rgb" > < img src = "red" alt = "RGB" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button >
각 이미지가 텍스트의 일부를 나타내므로, 이렇게도 작성할 수 있습니다:
< button name = "rgb" > < img src = "red" alt = "R" >< img src = "green" alt = "G" >< img src = "blue" alt = "B" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "C" >< img src = "magenta" alt = "M" >< img src = "yellow" alt = "Y" >< img src = "black" alt = "K" > </ button >
그러나 다른 대체 텍스트와 함께 사용할 경우에는 이 방법이 효과적이지 않을 수 있으며, 각 경우에 대체 텍스트를 한 이미지에 포함시키는 것이 더 나을 수 있습니다:
< button name = "rgb" > < img src = "red" alt = "sRGB profile" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK profile" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button >
때때로 흐름도, 다이어그램, 그래프, 또는 방향을 보여주는 간단한 지도와 같은 그래픽 형식으로 더 명확하게 설명할 수 있습니다. 이러한 경우, img
요소를 사용하여 이미지를 제공할 수 있지만, 느린 연결 속도, 텍스트 전용 브라우저 사용, 손이 자유롭지 않은 자동차 음성 웹 브라우저를 사용하거나 단순히 시각장애인인 경우와 같은 이미지 표시가
불가능한 사용자를 위해 텍스트 버전도 제공되어야 합니다.
텍스트는 alt
속성에 제공되어야 하며, src
속성에 지정된 이미지와 동일한 메시지를 전달해야 합니다.
대체 텍스트는 이미지에 대한 설명이 아닌, 이미지의 대체물이라는 것을 이해하는 것이 중요합니다.
다음 예제에서는 이미지 형식의 흐름도가 있으며, alt
속성에 흐름도를 텍스트로 재구성한 내용이 있습니다:
< p > 일반적인 경우, 토큰화 단계에서 처리하는 데이터는 네트워크에서 오지만, 스크립트에서도 올 수 있습니다.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = "네트워크는 데이터를 입력 스트림 전처리기로 전달하고, 전처리기는 데이터를 토큰화기로 전달합니다. 토큰화기는 데이터를 트리 구성 단계로 전달하며, 여기서 데이터는 DOM과 스크립트 실행으로 전달됩니다. 스크립트 실행은 DOM과 연결되며, document.write()를 사용하여 데이터를 토큰화기로 전달합니다." > </ p >
다음은 설명에 이미지를 포함시키는 문제에 대한 좋은 해결책과 나쁜 해결책을 보여주는 또 다른 예입니다.
먼저, 좋은 해결책입니다. 이 샘플은 이미지가 처음부터 존재하지 않았던 것처럼 대체 텍스트를 작성하는 방법을 보여줍니다.
<!-- 이것은 올바른 방법입니다. -->
< p >
당신은 집 서쪽에 있는 열린 들판에 서 있습니다.
< img src = "house.jpeg" alt = "그 집은 흰색이며, 앞문은 판자로 덮여 있습니다." >
작은 우편함이 있습니다.
</ p >
다음으로 나쁜 해결책입니다. 이 잘못된 방법에서는 대체 텍스트가 이미지에 대한 단순한 설명일 뿐, 이미지의 텍스트 대체물이 아닙니다. 이 방법이 나쁜 이유는 이미지가 표시되지 않을 때 텍스트의 흐름이 첫 번째 예제만큼 자연스럽지 않기 때문입니다.
<!-- 이것은 잘못된 방법입니다. -->
< p >
당신은 집 서쪽에 있는 열린 들판에 서 있습니다.
< img src = "house.jpeg" alt = "하얀색 집, 판자로 덮인 앞문." >
작은 우편함이 있습니다.
</ p >
"판자로 덮인 하얀색 집 사진"과 같은 텍스트도 역시 나쁜 대체 텍스트가 될 것입니다(비록 title
속성이나 figcaption
요소에 적합할 수는 있지만).
문서는 아이콘 형태로 정보를 포함할 수 있습니다. 아이콘은 시각적 브라우저 사용자들이 한눈에 특징을 인식하도록 돕기 위한 것입니다.
일부 경우, 아이콘은 동일한 의미를 전달하는 텍스트 레이블을 보조하는 역할을 합니다. 이러한 경우, alt
속성이 있어야 하지만, 그 값은 비워져 있어야 합니다.
여기서 아이콘은 동일한 의미를 전달하는 텍스트 옆에 있기 때문에, alt
속성은 비어 있습니다:
< nav >
< p >< a href = "/help/" > < img src = "/icons/help.png" alt = "" > 도움말</ a ></ p >
< p >< a href = "/configure/" > < img src = "/icons/configuration.png" alt = "" > 설정 도구</ a ></ p >
</ nav >
다른 경우에는, 아이콘에 그 의미를 설명하는 텍스트가 옆에 없으며, 아이콘이 자체적으로 설명되어야 합니다. 이러한 경우, alt
속성에 해당하는 텍스트 레이블을 제공해야 합니다.
여기서는 뉴스 사이트의 게시물이 주제를 나타내는 아이콘으로 레이블이 지정되었습니다.
< body >
< article >
< header >
< h1 > 라따뚜이, < i > 올해의 영화</ i > 수상</ h1 >
< p > < img src = "movies.png" alt = "영화" > </ p >
</ header >
< p > 픽사는 지난 12년 동안 8번이나 < i > 올해의 영화</ i > 상을 수상했습니다.</ p >
</ article >
</ article >
< header >
< h1 > 최신 TWiT 에피소드가 온라인에 게시됨</ h1 >
< p > < img src = "podcasts.png" alt = "팟캐스트" > </ p >
</ header >
</ p > 최신 TWiT 에피소드가 게시되었으며, 여기에서 여러 기술 뉴스 이야기를 듣고, iPhone에 대해 더 많은 정보를 배울 수 있습니다. 이번 주에 패널들은 iPhone의 애플 로고가 얼마나 반사되는지를 비교합니다.</ p >
</ article >
</ body >
많은 페이지에는 회사, 조직, 프로젝트, 밴드, 소프트웨어 패키지, 국가 등의 특정 엔티티를 나타내는 로고, 배지, 깃발 또는 상징이 포함되어 있습니다.
로고가 해당 엔티티를 대표하는 데 사용되는 경우(예: 페이지 헤딩으로 사용되는 경우), alt
속성에는 로고가 나타내는 엔티티의 이름이 포함되어야 합니다. alt
속성에는 "로고"라는 단어와 같은 텍스트가 포함되어서는 안 됩니다. 전달하려는 것은 그것이 로고라는 사실이 아니라 엔티티 자체이기 때문입니다.
로고가 엔티티의 이름 옆에 사용되는 경우, 로고는 보조적이며, alt
속성은 비어 있어야 합니다.
로고가 단순히 장식용으로 사용되는 경우(예: 브랜드 이미지로 사용되거나 해당 로고가 속한 엔티티를 언급하는 기사에 측면 이미지로 사용되는 경우), 아래의 순수 장식용 이미지 항목이 적용됩니다. 로고가 실제로 논의되고 있는 경우, 이는 대체 그래픽 표현(로고 자체)을 가진 문구나 단락으로 사용되고 있으므로, 위의 첫 번째 항목이 적용됩니다.
다음 코드 조각에서는 위의 네 가지 경우 모두가 나타납니다. 먼저, 회사 로고가 회사명을 대표하는 데 사용된 예입니다:
< h1 > < img src = "XYZ.gif" alt = "XYZ 회사" > </ h1 >
다음은 회사 이름 바로 옆에 로고가 사용된 단락입니다. 따라서 대체 텍스트가 없습니다:
< article >
< h2 > 뉴스</ h2 >
< p > 우리는 최근에 < img src = "alpha.gif" alt = "" > ΑΒΓ 회사를 인수할 계획입니다. 이 회사는 우리 제품 유형을 전문으로 하는 작은 그리스 회사입니다.</ p >
세 번째 코드 조각에서는 획득에 대해 논의하는 더 큰 기사에서 사이드에 로고가 사용되었습니다:
< aside >< p >< img src = "alpha-large.gif" alt = "" ></ p ></ aside >
< p > ΑΒΓ 회사는 좋은 분기를 보냈으며, 그들의 계정을 분석한 파이 차트 연구 결과는 파란색 슬라이스가 초록색 및 주황색 슬라이스보다 훨씬 크다는 것을 보여줍니다. 이는 항상 좋은 징조입니다.</ p >
</ article >
마지막으로, 로고에 대해 논의하는 의견 기사가 있습니다. 따라서 로고는 대체 텍스트에 자세히 설명되어 있습니다.
< p > 그들의 로고를 잠시 생각해 보십시오:</ p >
< p >< img src = "/images/logo" alt = "초록색 원 안에 중심에 위치한 초록색 물음표로 구성되어 있습니다." ></ p >
< p > 이 얼마나 독창적이지 않습니까? 저는 이 사양들이 이제 모든 사람들이 채택할 것이라고 확신합니다! 그들은 적어도 일련의 둥근 사각형이 있는 일종의 무언가를 시도했을 것입니다. 적어도 그린과 굵은 흰색 윤곽선의 다양한 색조가 있는 것은 파란색 책 표지에 잘 어울렸을 것입니다.</ p >
이 예는 이미지가 사용 가능하지 않을 때, 텍스트가 대신 사용되며, 텍스트가 마치 이미지가 처음부터 없었던 것처럼 주변 텍스트와 매끄럽게 연결되는 방식으로 대체 텍스트를 작성해야 함을 보여줍니다.
때때로 이미지는 단지 텍스트로만 구성되며, 이미지의 목적은 텍스트를 렌더링하는 데 사용된 실제 타이포그래피 효과를 강조하는 것이 아니라, 단순히 텍스트 자체를 전달하는 것입니다.
이러한 경우, alt
속성은 반드시 존재해야 하며, 이미지 자체에 쓰인 것과 동일한 텍스트로 구성되어야 합니다.
예를 들어, "Earth Day"라는 텍스트가 포함된 그래픽이 있다고 가정해 보겠습니다. 이 텍스트는 모든 글자가 꽃과 식물로 장식되어 있습니다. 이 텍스트가 단순히 그래픽 사용자를 위해 페이지를 돋보이게 하기 위한 제목으로 사용된다면, 적절한 대체 텍스트는 단순히 "Earth Day"일 뿐이며, 장식에 대해 언급할 필요는 없습니다:
< h1 > < img src = "earthdayheading.png" alt = "Earth Day" > </ h1 >
조명된 필사본에서는 일부 이미지에 그래픽을 사용할 수 있습니다. 이러한 상황에서 대체 텍스트는 이미지가 나타내는 문자 자체일 뿐입니다.
< p >< img src = "initials/o.svg" alt = "O" > nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...
이미지가 Unicode로는 나타낼 수 없는 문자를 표현하는 데 사용되는 경우, 예를 들어, 외자 문자나 새로운 통화 기호와 같은 새로운 문자일 경우, 대체 텍스트는 그 문자의 발음을 나타내는 더 일반적인 방식으로 제공해야 합니다. 예를 들어, 그 문자의 발음을 나타내기 위해 히라가나나 가타카나를 사용할 수 있습니다.
1997년의 이 예에서는 한 막대가 아닌 두 막대를 가진 꼬불꼬불한 E 모양의 새로운 통화 기호가 이미지로 표현되어 있습니다. 대체 텍스트는 그 문자의 발음을 제공합니다.
< p > 단지 < img src = "euro.png" alt = "euro" > 5.99!
문자와 동일한 목적을 제공할 수 있는 경우 이미지를 사용하지 않아야 합니다. 예를 들어, 장식 때문에 텍스트를 직접적으로 나타낼 수 없거나 적절한 문자가 없기 때문에 이미지를 사용하는 것이 적절한 경우에만 이미지를 사용해야 합니다.
작성자가 특정 문자를 지원하지 않는 기본 시스템 폰트 때문에 이미지를 사용하려는 유혹을 받는다면, 웹 폰트가 이미지보다 더 나은 솔루션입니다.
많은 경우에 이미지는 실제로 보조적인 역할을 하며, 그 존재는 단지 주변 텍스트를 강화하는 데 그칩니다. 이러한 경우, alt
속성은 반드시 존재해야 하며, 그 값은 빈 문자열이어야 합니다.
일반적으로 이미지를 제거해도 페이지의 유용성이 떨어지지 않지만, 이미지를 포함하면 시각적 브라우저 사용자가 개념을 더 쉽게 이해할 수 있는 경우에 이 범주에 속합니다.
이전 단락을 그래픽으로 표현한 플로우차트:
< p > 네트워크는 데이터를 입력 스트림 전처리기로 전달하고, 이것은 다시 토크나이저로 전달되며, 그 후 트리 구성 단계로 전달됩니다. 여기서 데이터는 DOM과 스크립트 실행으로 모두 전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며, document.write()를 사용하여 데이터를 다시 토크나이저로 전달합니다.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "" ></ p >
이러한 경우에 대체 텍스트에 캡션만 포함하는 것은 잘못된 것입니다. 캡션을 포함하려면 title
속성을 사용하거나 figure
및 figcaption
요소를 사용할 수 있습니다. 후자의 경우, 이미지는 실제로 대체 그래픽 표현이 있는 문구 또는 단락이 되며, 따라서 대체 텍스트가 필요합니다.
<!-- title="" 속성을 사용하는 경우 -->
< p > 네트워크는 데이터를 입력 스트림 전처리기로 전달하고, 이것은 다시 토크나이저로 전달되며, 그 후 트리 구성 단계로 전달됩니다. 여기서 데이터는 DOM과 스크립트 실행으로 모두 전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며, document.write()를 사용하여 데이터를 다시 토크나이저로 전달합니다.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = "" title = "파싱 모델의 플로우차트 표현" > </ p >
<!-- <figure> 및 <figcaption>을 사용하는 경우 -->
< p > 네트워크는 데이터를 입력 스트림 전처리기로 전달하고, 이것은 다시 토크나이저로 전달되며, 그 후 트리 구성 단계로 전달됩니다. 여기서 데이터는 DOM과 스크립트 실행으로 모두 전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며, document.write()를 사용하여 데이터를 다시 토크나이저로 전달합니다.</ p >
< figure >
< img src = "images/parsing-model-overview.svg" alt = "네트워크는 입력 스트림 전처리기로, 전처리기는 토크나이저로, 토크나이저는 트리 구성 단계로 이어집니다. 트리 구성 단계에서 두 가지 항목으로 이어집니다. 첫 번째는 스크립트 실행으로, document.write()를 통해 다시 토크나이저로 이어집니다. 두 번째 항목은 DOM으로, DOM은 스크립트 실행과 연결됩니다." >
< figcaption > 파싱 모델의 플로우차트 표현.</ figcaption >
</ figure >
<!-- 잘못된 방법입니다. 이렇게 하지 마십시오. 위의 예제를 따르세요. -->
< p > 네트워크는 데이터를 입력 스트림 전처리기로 전달하고, 이것은 다시 토크나이저로 전달되며, 그 후 트리 구성 단계로 전달됩니다. 여기서 데이터는 DOM과 스크립트 실행으로 모두 전달됩니다. 스크립트 실행은 DOM과 연결되어 있으며, document.write()를 사용하여 데이터를 다시 토크나이저로 전달합니다.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "파싱 모델의 플로우차트 표현" ></ p >
<!-- 이미지 캡션을 alt="" 속성에 포함하지 마세요! -->
이전 단락을 그래픽으로 표현한 그래프:
< p > 2007년 웹의 수십억 페이지를 다룬 연구에 따르면, 약 62%의 문서가 웹 브라우저의 Quirks 렌더링 모드를 트리거했으며, 약 30%는 Almost Standards 모드를, 약 9%는 Standards 모드를 트리거했습니다.</ p >
< p >< img src = "rendering-mode-pie-chart.png" alt = "" ></ p >
때때로 이미지는 콘텐츠에 필수적이지 않지만, 순전히 장식적이지도 않고 텍스트와 완전히 중복되지도 않습니다. 이러한 경우, alt
속성이 반드시 존재해야 하며, 그 값은 빈 문자열이거나 이미지가
전달하는 정보를 텍스트로 표현한 것이어야 합니다. 이미지에 제목을 나타내는 캡션이 있는 경우, alt
속성의 값은 비어 있어서는 안 됩니다(그렇지 않으면 시각적이지
않은 독자에게 혼란을 줄 수 있습니다).
정치 인물에 대한 뉴스 기사에서 그 인물의 얼굴이 이미지로 표시된 경우를 생각해보세요. 이 이미지는 순전히 장식적이지 않으므로 스토리와 관련이 있습니다. 이미지가 스토리와 완전히 중복되지도 않으므로 정치인이 어떻게 생겼는지 보여줍니다. 대체 텍스트를 제공할 필요가 있는지 여부는 이미지가 텍스트의 해석에 영향을 미치는지에 따라 저자의 결정에 따라 달라집니다.
첫 번째 변형에서는 이미지가 맥락 없이 표시되며 대체 텍스트가 제공되지 않습니다:
< p > < img src = "president.jpeg" alt = "" > 오늘의 국민투표를 앞두고 대통령은 모든 유권자에게 공개 서한을 작성했습니다. 서한에서 그녀는 나라가 분열되어 있다고 인정했습니다.</ p >
사진이 단순히 얼굴을 나타내는 것이라면 그것을 설명하는 데는 가치가 없을 수 있습니다. 독자가 그 인물이 붉은 머리인지 금발 머리인지, 흰 피부인지 검은 피부인지, 한 눈인지 두 눈인지에 관심이 없을 것입니다.
그러나 사진이 더 동적이고 예를 들어 정치인이 화를 내거나, 매우 행복해하거나, 크게 낙담한 모습을 보여준다면, 그러한 대체 텍스트는 기사의 분위기를 설정하는 데 유용할 것입니다. 그렇지 않으면 그 분위기가 놓칠 수 있습니다:
< p > < img src = "president.jpeg" alt = "대통령이 슬퍼하고 있다." > 오늘의 국민투표를 앞두고 대통령은 모든 유권자에게 공개 서한을 작성했습니다. 서한에서 그녀는 나라가 분열되어 있다고 인정했습니다.</ p >
< p > < img src = "president.jpeg" alt = "대통령이 기뻐하고 있다!" > 오늘의 국민투표를 앞두고 대통령은 모든 유권자에게 공개 서한을 작성했습니다. 서한에서 그녀는 나라가 분열되어 있다고 인정했습니다.</ p >
그 인물이 "슬프다" 또는 "기쁘다"는 사실은 단락의 나머지 부분이 어떻게 해석되어야 하는지에 영향을 미칩니다: 그녀가 나라가 분열된 것에 불만이 있음을 말하고 있는 것인지, 아니면 분열된 나라가 그녀의 정치 경력에 좋다는 것을 말하고 있는 것인지에 따라 해석이 달라집니다.
이미지에 캡션이 있는 경우, 대체 텍스트를 포함함으로써 비시각적 사용자가 캡션이 무엇을 참조하는지 혼란스러워하지 않도록 합니다.
< p > 오늘의 국민투표를 앞두고 대통령은 모든 유권자에게 공개 서한을 작성했습니다. 서한에서 그녀는 나라가 분열되어 있다고 인정했습니다.</ p >
< figure >
< img src = "president.jpeg" alt = "높은 이마, 밝은 표정, 짙은 머리카락으로 완성된 대통령의 얼굴." >
< figcaption > 루리타니아의 대통령. 사진 © 2014 PolitiPhoto. </ figcaption >
</ figure >
이미지가 장식적이지만 페이지에 특정적으로 사용되지 않는 경우 — 예를 들어 사이트 전체의 디자인 스키마의 일부를 형성하는 이미지 — 해당 이미지는 문서의 마크업이 아닌 사이트의 CSS에 지정해야 합니다.
그러나 주변 텍스트에서 논의되지 않지만 여전히 관련성이 있는 장식적인 이미지는 img
요소를 사용하여 페이지에 포함할 수 있습니다. 이러한 이미지는 장식적이지만 여전히 콘텐츠의 일부를 형성합니다. 이 경우 alt
속성이 반드시 존재해야 하며, 그 값은 빈 문자열이어야 합니다.
이미지가 관련성이 있지만 순전히 장식적인 예는 블랙 록 시티 풍경의 사진을 포함한 버닝 맨 행사에 대한 블로그 게시물, 또는 시를 낭송하는 페이지에 포함된 시에서 영감을 받은 그림의 이미지 등이 포함될 수 있습니다. 다음 코드 조각은 후자의 경우를 보여줍니다(이 코드 조각에는 첫 번째 절만 포함되어 있습니다):
< h1 > The Lady of Shalott</ h1 >
< p >< img src = "shalott.jpeg" alt = "" ></ p >
< p > On either side the river lie< br >
Long fields of barley and of rye,< br >
That clothe the wold and meet the sky;< br >
And through the field the road run by< br >
To many-tower'd Camelot;< br >
And up and down the people go,< br >
Gazing where the lilies blow< br >
Round an island there below,< br >
The island of Shalott.</ p >
그림이 더 작은 이미지 파일로 잘려 다시 완전한 그림을 형성하도록 함께 표시될 때, 하나의 이미지에는 alt
속성이 전체 그림에 적합한 관련 규칙에 따라 설정되어야 하며, 나머지 모든 이미지의 alt
속성은 빈 문자열로 설정되어야 합니다.
다음 예에서 XYZ Corp의 회사 로고를 나타내는 그림이 두 조각으로 나뉘었으며, 첫 번째는 "XYZ"라는 글자를, 두 번째는 "Corp"라는 단어를 포함하고 있습니다. 대체 텍스트("XYZ Corp")는 모두 첫 번째 이미지에 있습니다.
< h1 > < img src = "logo1.png" alt = "XYZ Corp" ></ img src = "logo2.png" alt = "" > </ h1 >
다음 예에서 평가는 세 개의 채워진 별과 두 개의 빈 별로 표시됩니다. 대체 텍스트가 "★★★☆☆"일 수 있지만, 저자는 대신 "3 out of 5"라는 형태로 평가를 더 유용하게 제공하기로 결정했습니다. 이는 첫 번째 이미지의 대체 텍스트이며 나머지는 빈 대체 텍스트를 갖습니다.
< p > Rating: < meter max = 5 value = 3 > < img src = "1" alt = "3 out of 5"
></ img src = "1" alt = "" ></ img src = "1" alt = "" ></ img src = "0" alt = ""
></ img src = "0" alt = "" > </ meter ></ p >
일반적으로 링크를 위해 이미지를 분할하는 대신 이미지 맵을 사용하는 것이 좋습니다.
그러나 이미지가 실제로 분할되어 분할된 그림의 구성 요소 중 일부가 링크의 유일한 내용물인 경우, 각 링크당 하나의 이미지는 해당 링크의 목적을 나타내는 alt
속성에 대체 텍스트를 가져야 합니다.
다음 예에서는 날아다니는 스파게티 몬스터 엠블럼을 나타내는 그림으로, 각 왼쪽 면발과 오른쪽 면발이 다른 이미지에 들어 있어 사용자가 모험에서 왼쪽을 선택하거나 오른쪽을 선택할 수 있습니다.
< h1 > The Church</ h1 >
< p > You come across a flying spaghetti monster. Which side of His Noodliness do you wish to reach out for?</ p >
< p >< a href = "?go=left" >< img src = "fsm-left.png" alt = "Left side." ></ a
>< img src = "fsm-middle.png" alt = ""
>< a href = "?go=right" >< img src = "fsm-right.png" alt = "Right side." ></ a ></ p >
어떤 경우에는 이미지가 콘텐츠의 중요한 부분을 차지합니다. 예를 들어, 사진 갤러리의 일부인 페이지에서는 이미지 자체가 페이지의 핵심일 수 있습니다.
콘텐츠의 주요 부분을 구성하는 이미지에 대한 대체 텍스트를 제공하는 방법은 이미지의 출처에 따라 다릅니다.
잡지 리뷰의 스크린샷 시리즈나 만화, 해당 사진에 대한 블로그 게시물과 같이 이미지에 대한 자세한 대체 텍스트를 제공할 수 있는 경우, 이미지의 대체로 사용할 수 있는 텍스트가 alt
속성에 제공되어야 합니다.
새로운 OS의 스크린샷 갤러리에 있는 스크린샷 예시:
< figure >
< img src = "KDE%20Light%20desktop.png"
alt = "바탕화면은 파란색이며, 왼쪽에는 두 개의 열로 이루어진 아이콘이 있습니다. 시스템, 홈, K-Mail 등으로 읽을 수 있습니다. 메뉴가 창에 맞지 않을 경우 두 번째 줄로 감싸진 창이 열려 있습니다. 창 상단에는 아이콘 목록이 있으며, 아래에는 주소 표시줄, 왼쪽에는 탭 아이콘 목록, 하단에는 상태 표시줄, 중간에는 두 개의 창이 있습니다. 바탕화면 하단에는 몇 개의 버튼, 페이저, 열린 응용 프로그램 목록 및 시계가 있는 막대가 있습니다." >
< figcaption > KDE 바탕화면의 스크린샷.</ figcaption >
</ figure >
재무 보고서의 그래프 예시:
< img src = "sales.gif"
title = "판매 그래프"
alt = "1998년부터 2005년까지 매출이 매년 다음과 같은 비율로 증가했습니다: 624%, 75%, 138%, 40%, 35%, 9%, 21%" >
"판매 그래프"는 판매 그래프에 대한 부적절한 대체 텍스트입니다. 캡션으로 적합한 텍스트는 일반적으로 대체 텍스트로 적합하지 않습니다.
어떤 경우에는 이미지의 특성상 대체 텍스트를 완벽하게 제공하는 것이 불가능할 수 있습니다. 예를 들어, 이미지가 명확하지 않거나, 복잡한 프랙탈이거나, 상세한 지형도일 수 있습니다.
이러한 경우 alt
속성에는
적절한 대체 텍스트가 포함되어야 하지만, 그 텍스트는 다소 간단할 수 있습니다.
예를 들어, 로르샤흐 잉크블롯 테스트의 이미지를 설명하는 데 유용한 텍스트는 거의 없습니다. 그러나 간단한 설명이라도 없는 것보다 낫습니다:
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "왼쪽-오른쪽 대칭을 가진 형태로, 경계가 흐릿하며, 중앙에 작은 틈이 있고, 중앙에서 약간 비켜난 두 개의 큰 틈과 그 아래에 두 개의 유사한 틈이 있습니다. 윤곽은 하단보다 상단이 넓으며, 측면은 중앙보다 위로 더 많이 확장되고, 중앙은 측면 아래로 확장됩니다." >
< figcaption > 로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽.</ figcaption >
</ figure >
다음은 대체 텍스트의 잘못된 사용 사례입니다:
<!-- 이 예시는 잘못된 것입니다. 따라하지 마십시오. -->
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽." >
< figcaption > 로르샤흐 잉크블롯 테스트의 첫 번째 카드의 검은 윤곽.</ figcaption >
</ figure >
이와 같이 캡션을 대체 텍스트에 포함시키는 것은 사용자에게 중복된 정보를 제공하여 불필요하게 혼란을 줄 수 있습니다.
또한, 프랙탈과 같이 완전한 설명이 어려운 이미지의 예도 있습니다. 프랙탈은 본질적으로 무한한 세부 사항을 포함하고 있기 때문입니다.
다음은 만델브로 집합 이미지에 대한 전체 보기의 대체 텍스트를 제공하는 한 가지 방법입니다.
< img src = "ms1.jpeg" alt = "만델브로 집합은 실축의 양의 방향에서 꼭지점이 있는 심장형으로 나타나며, 같은 중심선에 따라 정렬된 더 작은 전구가 부정적인 방향에서 접촉하며, 이러한 두 모양은 다양한 크기의 더 작은 전구로 둘러싸여 있습니다." >
비슷하게, 전기의 일부로 사람의 얼굴 사진이 포함된 경우, 이는 콘텐츠와 매우 관련이 있고 중요한 부분으로 간주될 수 있지만, 이를 완전히 텍스트로 대체하는 것은 어려울 수 있습니다:
< section class = "bio" >
< h1 > 아이작 아시모프의 전기</ h1 >
< p > 1920년에 < b > 이삭 유도비치 오지모프</ b > 라는 이름으로 태어난 아이작은 다작 작가였습니다.</ p >
< p >< img src = "headpics/asimov.jpeg" alt = "아이작 아시모프는 짙은 머리카락, 높은 이마, 안경을 썼습니다. 나이가 들어서는 긴 흰색 구레나룻을 기르기도 했습니다." ></ p >
< p > 아시모프는 러시아에서 태어났으며, 세 살 때 미국으로 이주했습니다.</ p >
< p > ...</ p >
</ section >
이러한 경우 대체 텍스트에 이미지 자체의 존재를 언급하는 것은 불필요하고 권장되지 않습니다. 예를 들어, 대체 텍스트가 "아이작 아시모프의 사진"이라고 하면, 적합한 사용자 에이전트는 "(이미지) 아이작 아시모프의 사진" 대신 "(이미지) 아이작 아시모프는 짙은 머리카락, 높은 이마, 안경을 썼습니다..."라고 읽어주는 것이 더 유용합니다.
어떤 경우에는 이미지에 대한 대체 텍스트가 전혀 제공되지 않을 수 있습니다. 예를 들어, 이미지가 자동으로 얻어지거나 관련된 대체 텍스트가 없는 경우(예: 웹캠), 스크립트를 사용하여 사용자가 제공한 이미지를 사용하여 페이지를 생성하는 경우(예: 사진 공유 사이트), 또는 저자 자신이 이미지가 무엇을 나타내는지 모르는 경우(예: 시각장애인이 블로그에 이미지를 공유하는 경우) 등이 있습니다.
이 경우 alt
속성을 생략할 수
있지만, 다음 조건 중 하나를 충족해야 합니다.
img
요소가 figure
요소 내에 있으며, figcaption
요소에는 요소 간 공백 외에 내용이 포함되어 있습니다.
그리고 figcaption
요소와 그 하위 요소를 무시하면, figure
요소에는 흐름 콘텐츠 하위 요소가
요소
간 공백 및 img
요소를 제외하고 없습니다.
title
속성이 존재하며
비어 있지 않은 값이 포함되어야 합니다.
title
속성에 의존하는
것은 권장되지 않습니다. 많은 사용자 에이전트가 이 속성을 접근성 있게 노출하지 않기 때문에(예: 툴팁을 표시하려면 마우스와 같은 포인팅 장치가 필요하며, 이는 키보드 전용
사용자 및 터치 전용 사용자, 예를 들어 현대 스마트폰이나 태블릿 사용자에게 접근이 어렵습니다).
이러한 경우는 가능한 최소한으로 유지해야 합니다. 저자가 실제 대체 텍스트를 제공할 가능성이 조금이라도 있다면, alt
속성을 생략하는 것은
허용되지 않습니다.
사진 공유 사이트에서 메타데이터 없이 캡션만 포함된 이미지를 받은 경우 다음과 같이 표시할 수 있습니다:
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > Bubbles traveled everywhere with us.</ figcaption >
</ figure >
그러나 사용자로부터 얻은 이미지의 중요한 부분에 대한 자세한 설명을 페이지에 포함시키는 것이 더 좋습니다.
시각장애인의 블로그에 사용자가 촬영한 사진이 표시되는 경우, 초기에는 사용자가 촬영한 사진이 무엇을 보여주는지 모를 수 있습니다:
< article >
< h1 > 사진을 찍었어요</ h1 >
< p > 오늘 나가서 사진을 찍었어요!</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > 내 현관 앞에서 눈을 감고 찍은 사진.</ figcaption >
</ figure >
</ article >
그러나 시간이 지나면서 친구들로부터 이미지에 대한 설명을 얻고 대체 텍스트를 포함할 수 있습니다:
< article >
< h1 > 사진을 찍었어요</ h1 >
< p > 오늘 나가서 사진을 찍었어요!</ p >
< figure >
< img src = "photo2.jpeg" alt = "사진에는 지붕 가장자리에서 매달려 있는 다람쥐 먹이통이 보입니다. 먹이통은 절반 정도 차 있으며, 주변에는 다람쥐가 없습니다. 배경에는 초점이 맞지 않은 나무들이 찍혀 있습니다. 먹이통은 나무로 만들어졌으며, 금속 그물이 붙어 있고, 안에는 땅콩이 들어 있습니다. 지붕의 가장자리도 나무로 만들어졌으며, 흰색과 옅은 파란색 줄무늬로 칠해져 있습니다." >
< figcaption > 내 현관 앞에서 눈을 감고 찍은 사진.</ figcaption >
</ figure >
</ article >
때로는 이미지의 전체적인 의미가 텍스트 설명을 제공하지 않는 것이며, 사용자가 설명을 제공하도록 유도하는 경우도 있습니다. 예를 들어, CAPTCHA 이미지의 목적은 사용자가
그래픽을 실제로 읽을 수 있는지 확인하는 것입니다. 다음은 CAPTCHA를 표시하는 한 가지 방법입니다(title
속성에 주목하십시오):
< p >< label > 이 이미지에는 무엇이 적혀 있습니까?
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(이미지를 볼 수 없는 경우 < a href = "?audio" > 오디오</ a > 테스트를 대신 사용할 수 있습니다.)</ p >
또한 이미지에 대한 대체 텍스트를 정확하게 작성하는 목적으로 이미지를 표시하고 대체 텍스트를 요청하는 소프트웨어도 있습니다. 이러한 페이지는 다음과 같은 이미지 표를 포함할 수 있습니다:
< table >
< thead >
< tr > < th > 이미지 < th > 설명
< tbody >
< tr >
< td > < img src = "2421.png" title = "이미지 640 x 100, 파일 이름 'banner.gif'" >
< td > < input name = "alt2421" >
</ tr >
</ td > < img src = "2422.png" title = "이미지 200 x 480, 파일 이름 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table >
이 예에서도 가능한 많은 유용한 정보가 title
속성에 포함되어 있다는
점에 유의하십시오.
일부 사용자는 이미지 자체를 전혀 사용할 수 없습니다(예: 연결 속도가 매우 느리거나 텍스트 전용 브라우저를 사용하거나 차량용 음성 웹 브라우저로 페이지를 듣거나
단순히 시각장애인이기 때문입니다). 이 때문에 alt
속성은 대체 텍스트가
제공되지 않거나 제공할 수 없는 경우에만 생략할 수 있으며, 위의 예시와 같이 제공되지 않은 경우에만 생략할 수 있습니다. 저자의 노력 부족은 alt
속성을 생략할 수 있는
정당한 이유가 아닙니다.
일반적으로 저자는 img
요소를
이미지를 보여주는 것 외의 목적으로 사용하는 것을 피해야 합니다.
img
요소가 페이지 뷰
수를 계산하는 서비스의 일부와 같이 이미지를 표시하는 것 외의 목적으로 사용되는 경우, alt
속성은 빈 문자열이어야 합니다.
이러한 경우 width
및
height
속성은 모두
0으로 설정해야 합니다.
이 섹션은 공개적으로 접근할 수 있는 문서나 저자가 개인적으로 알지 못하는 대상 독자를 대상으로 하는 문서(예: 웹사이트의 문서, 공개 메일링 리스트에 발송된 이메일, 소프트웨어 문서)에는 적용되지 않습니다.
이미지를 볼 수 있는 것으로 알려진 특정 인물에게 보내는 개인 통신(예: HTML 이메일)에 이미지가 포함된 경우, alt
속성을 생략할 수 있습니다. 그러나 이러한 경우에도 사용자가 이미지를 지원하지 않는 메일 클라이언트를 사용하는 경우나, 문서가 이미지를 쉽게 볼 수 없는 다른 사용자에게 전달될 수 있음을 고려하여
저자는 대체 텍스트를 포함할 것을 강력히 권장합니다(위에서 설명한 이미지 종류에 따라 적절하게).
마크업 생성기(WYSIWYG 저작 도구와 같은)는 가능한 한 사용자로부터 대체 텍스트를 받아야 합니다. 그러나 많은 경우에 이것이 불가능하다는 점이 인식됩니다.
링크의 유일한 콘텐츠로 사용되는 이미지의 경우, 마크업 생성기는 링크 대상의 제목이나 URL을 확인하여 이 정보를 대체 텍스트로 사용해야 합니다.
캡션이 있는 이미지의 경우, 마크업 생성기는 figure
및 figcaption
요소 또는 title
속성을 사용하여 이미지의 캡션을
제공해야 합니다.
마지막 수단으로 구현자는 이미지가 단순히 장식적이며 정보는 추가하지 않지만 여전히 주변 콘텐츠에 특정한 이미지라고 가정하고 alt
속성을 빈 문자열로 설정하거나, 이미지가
콘텐츠의 중요한 부분이라고 가정하고 alt
속성을 아예 생략해야 합니다.
마크업 생성기는 대체 텍스트를 얻을 수 없어서 alt
속성을 생략해야 하는 img
요소에 generator-unable-to-provide-required-alt
속성을 지정할 수 있습니다. 이 속성의 값은 빈 문자열이어야 합니다. 이러한 속성을 포함하는 문서는 적합하지 않지만, 적합성 검사기는 이 오류를 묵인합니다.
이것은 적합성 검사기에서 대체 텍스트가 없다는 오류를 방지하기 위해 마크업 생성기가 잘못된 대체 텍스트를 제공하는 실수를 방지하기 위한 것입니다. 자동화된 적합성 검사기는 잘못된 대체 텍스트와 올바른 대체 텍스트를 구별할 수 없기 때문입니다.
마크업 생성기는 일반적으로 이미지의 파일 이름을 대체 텍스트로 사용하는 것을 피해야 합니다. 마찬가지로, 마크업 생성기는 표현 사용자 에이전트(예: 웹 브라우저)에서도 동일하게 제공되는 콘텐츠에서 대체 텍스트를 생성하는 것을 피해야 합니다.
이유는 페이지가 생성된 후 일반적으로 업데이트되지 않지만, 나중에 페이지를 읽는 브라우저는 사용자가 업데이트할 수 있기 때문입니다. 따라서 브라우저는 페이지가 생성될 때 마크업 생성기보다 최신 상태의 정교한 휴리스틱을 가질 가능성이 더 큽니다.
적합성 검사기는 아래 나열된 조건 중 하나에 해당하지 않는 한 alt
속성이 없음을 오류로 보고해야 합니다:
img
요소가
figure
요소 내에 있고, 그 요소가 위에서 설명한 조건을 충족하는 경우.
적합성 검사기가 문서가 이미지를 볼 수 있는 것으로 알려진 특정 인물에게 보내는 이메일이나 문서라고 가정하도록 설정된 경우.
img
요소에
빈 문자열 값이 있는 generator-unable-to-provide-required-alt
속성이 있는 경우. 적합성 검사기가 alt
속성의 부재를 오류로
보고하지 않는 경우, 빈 generator-unable-to-provide-required-alt
속성의 존재를 오류로 보고하지 않아야 합니다. (이 경우 문서가 적합하다는 것은 아니지만, 생성기가 적절한 대체 텍스트를 결정할 수 없음을 나타냅니다. 이러한 경우 적합성 검사기는 오류를
표시하지 않을 수 있습니다. 왜냐하면 그러한 오류는 마크업 생성기가 단순히 적합성 검사기를 피하기 위해 잘못된 대체 텍스트를 포함하도록 유도할 수 있기 때문입니다. 물론 적합성 검사기는
alt
속성이 없는 경우
오류로 보고할 수 있습니다. 예를 들어, 사용자가 모든 적합성 오류를 보고하도록 설정할 수 있습니다.)
iframe
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
src
— 리소스의 주소
srcdoc
— iframe
에 렌더링할 문서
name
— 내비게이블 콘텐츠의 이름
sandbox
— 중첩된 콘텐츠에
대한 보안 규칙
allow
— Permissions
policy를 iframe
의 콘텐츠에 적용
allowfullscreen
— iframe
의 콘텐츠가 requestFullscreen()
을
사용할 수 있는지 여부
width
— 가로 크기
height
— 세로 크기
referrerpolicy
— 이 요소가 시작하는 페치에 대한 리퍼러 정책
loading
— 로딩 지연을 결정할
때 사용됨
[Exposed =Window ]
interface HTMLIFrameElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute (TrustedHTML
or DOMString ) srcdoc ;
[CEReactions ] attribute DOMString name ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList sandbox ;
[CEReactions ] attribute DOMString allow ;
[CEReactions ] attribute boolean allowFullscreen ;
[CEReactions ] attribute DOMString width ;
[CEReactions ] attribute DOMString height ;
[CEReactions ] attribute DOMString referrerPolicy ;
[CEReactions ] attribute DOMString loading ;
readonly attribute Document ? contentDocument ;
readonly attribute WindowProxy ? contentWindow ;
Document ? getSVGDocument ();
// 구식 멤버도 포함
};
src
속성은 이 요소의 URL을 제공합니다.
이 속성이 지정되어 있다면, itemprop
속성이 iframe
요소에 지정된 경우
src
속성도 지정되어야 합니다.
모든 최신 엔진에서 지원됩니다.
srcdoc
속성은 이 요소의 내비게이블 콘텐츠에 포함될 페이지의 콘텐츠를 제공합니다. 이 속성의
값은 iframe
srcdoc
문서라는 document
의 URL이 about:srcdoc
과 일치하도록 사용됩니다.
srcdoc
속성이 지정되어 있다면, 이
속성의 값은 다음과 같은 문법 구성 요소로 구성된 HTML 문법을 사용해야 합니다:
html
요소의 형식으로 된 문서 요소.
위의 요구 사항은 XML 문서에서도 적용됩니다.
여기에서 블로그는 srcdoc
속성과
아래에 설명된 sandbox
속성을 결합하여 이 기능을 지원하는 사용자 에이전트에서 블로그 댓글에 스크립트 삽입으로부터 추가적인 보호를 제공합니다:
< article >
< h1 > I got my own magazine!</ h1 >
< p > After much effort, I've finally found a publisher, and so now I have my own magazine! Isn't that awesome?! The first issue will come out in September, and we have articles about getting food, and about getting in boxes, it's going to be great!</ p >
< footer >
< p > Written by < a href = "/users/cap" > cap</ a > , 1 hour ago.</ footer >
</ article >
< footer > Thirteen minutes ago, < a href = "/users/ch" > ch</ a > wrote: </ footer >
< iframe sandbox srcdoc = "<p>did you get a cover picture yet?" ></ iframe >
</ article >
< article >
< footer > Nine minutes ago, < a href = "/users/cap" > cap</ a > wrote: </ footer >
< iframe sandbox srcdoc = "<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>." ></ iframe >
</ article >
< article >
< footer > Five minutes ago, < a href = "/users/ch" > ch</ a > wrote: </ footer >
< iframe sandbox srcdoc = "<p>hey that's earl's table.<p>you should get earl&amp;me on the next cover." ></ iframe >
</ article >
따옴표를 어떻게 이스케이프해야 하는지(그렇지 않으면 srcdoc
속성이 조기 종료될 수
있음)와 샌드박스된 콘텐츠에 언급된 원시 앰퍼샌드(예: URL 또는 산문에서) 이스케이프가 어떻게 이중으로 처리되어야 하는지 주목하십시오. — 처음에는 srcdoc
속성을 처음 구문 분석할 때
앰퍼샌드가 유지되도록 하고, 그 후 샌드박스된 콘텐츠를 구문 분석할 때 앰퍼샌드가 오해되지 않도록 다시 이스케이프를 해야 합니다.
또한 DOCTYPE이 iframe
srcdoc
문서에서 선택적이며, html
, head
, body
요소가 선택적 시작 및 종료 태그를 가지며, title
요소도 iframe
srcdoc
문서에서 선택적이라는 사실에 주목하십시오. srcdoc
속성에 있는 마크업은 전체
문서를 나타내지만 비교적 간결할 수 있습니다. 구문에서 문자 그대로 나타나야 하는 것은 body
요소의 내용뿐입니다. 다른 요소들은
암시적으로만 존재합니다.
HTML 문법에서는 작성자가 U+0022 인용 부호 문자를 사용하여 속성 내용을 감싸고 U+0026 AMPERSAND(&) 및 U+0022 인용 부호(") 문자를
이스케이프하고, sandbox
속성을
지정하여 콘텐츠가 안전하게 포함되도록 해야 합니다(앰퍼샌드를 인용 부호 앞에서 이스케이프하여 인용 부호가 "이 되도록 합니다).
XML에서는 U+003C LESS-THAN SIGN 문자(<)도 이스케이프해야 합니다. 속성 값의 정규화를 방지하기 위해 XML의 공백 문자 중 일부 — 구체적으로 U+0009 캐릭터 탭(탭), U+000A 줄 바꿈(LF), U+000D 캐리지 리턴(CR) — 도 이스케이프해야 합니다. [XML]
src
속성과 srcdoc
속성이 모두 지정된 경우,
srcdoc
속성이 우선 적용됩니다. 이를
통해 작성자는 srcdoc
속성을 지원하지
않는 레거시 사용자 에이전트를 위한 대체 URL을 제공할 수 있습니다.
iframe
HTML 요소 삽입 단계는
insertedNode가 주어진 경우 다음과 같습니다.
insertedNode에 대해 새 자식 내비게이블을 생성합니다.
만약 insertedNode에 sandbox
속성이 있다면,
해당 속성의 값을 기준으로 insertedNode의 iframe
sandboxing 플래그 세트를 분석합니다.
insertedNode의 iframe
속성을 initialInsertion 값을 true로 설정하여 처리합니다.
iframe
HTML 요소 제거 단계는
removedNode가 주어진 경우, removedNode에 대해 자식 내비게이블을 파괴합니다.
이 작업은 unload
이벤트가 발생하지 않은
상태에서 이루어집니다(요소의 콘텐츠
문서가 파괴됩니다, 언로드되지 않습니다).
iframe
요소가 섀도우 트리 내에서 처리되지만, 이 외에도 그들의 동작과 관련하여 섀도우 트리에 대해 정의되지 않은 여러 측면이 있습니다. 자세한 내용은
문제 #763을 참조하십시오.
iframe
요소에 null이 아닌 내비게이블 콘텐츠가 있고, srcdoc
속성이 설정, 변경, 또는 제거될
때마다 사용자 에이전트는 iframe
속성을 처리해야 합니다.
마찬가지로, iframe
요소에 null이
아닌 내비게이블 콘텐츠가 있지만 지정된 srcdoc
속성이 없고, src
속성이 설정, 변경, 또는 제거될 때마다 사용자
에이전트는 iframe
속성을 처리해야 합니다.
다음은 요소 element에 대한 iframe
속성 처리을 수행하는 방법입니다.
선택적으로 부울 initialInsertion이 있습니다(기본값은 false).
element에 srcdoc
속성이 지정된
경우:
element의 현재 탐색은 지연 로드되었습니다 부울 값을 false로 설정합니다.
주어진 element에 대한 지연 로드 요소 단계가 true를 반환하는 경우:
이 알고리즘의 나머지 부분을 srcdoc 리소스로 탐색으로 시작하여 element의 지연 로드 재개 단계로 설정합니다.
element의 현재 탐색이 지연 로드되었습니다 부울 값을 true로 설정합니다.
element에 대해 지연 로드 요소를 교차 관찰 시작합니다.
반환합니다.
srcdoc 리소스로 탐색: element, about:srcdoc
, 빈 문자열 및
element의 srcdoc
속성
값을 주어진 iframe 또는 frame을 탐색합니다.
결과로 나온 document
는 iframe
srcdoc 문서로 간주되어야 합니다.
그 외의 경우:
url을 element와 initialInsertion이 주어진 iframe 및 frame 요소에 대한 공유 속성 처리 단계를 실행한 결과로 설정합니다.
url이 null이면 반환합니다.
url이 about:blank
와 일치하고 initialInsertion이 true인 경우:
element에 대해 iframe 로드 이벤트 단계를 실행합니다.
반환합니다.
referrerPolicy를 element의 referrerpolicy
콘텐츠 속성의 현재 상태로 설정합니다.
element의 현재 탐색은 지연 로드되었습니다 부울 값을 false로 설정합니다.
주어진 element에 대한 지연 로드 요소 단계가 true를 반환하는 경우:
이 알고리즘의 나머지 부분을 탐색으로 시작하여 element의 지연 로드 재개 단계로 설정합니다.
element의 현재 탐색이 지연 로드되었습니다 부울 값을 true로 설정합니다.
element에 대해 지연 로드 요소를 교차 관찰 시작합니다.
반환합니다.
탐색: element, url 및 referrerPolicy이 주어진 iframe 또는 frame을 탐색합니다.
iframe
및 frame
요소에 대한 공유 속성 처리 단계는 요소 element와
부울 initialInsertion이 주어진 경우 다음과 같습니다:
url을 about:blank
URL 기록으로 설정합니다.
element에 src
속성이 지정되어 있고 그 값이 빈 문자열이 아닌 경우:
그 속성의 값을 element의 노드 문서와 상대적으로 주어진 URL 인코딩-구문 분석을 실행한 결과를 maybeURL로 설정합니다.
maybeURL이 실패하지 않으면, url을 maybeURL로 설정합니다.
element의 노드 내비게이블의 포괄적인 조상 내비게이블이 url을 조각 제외로 설정하여 url과 동일한 활성 문서를 포함하는 내비게이블을 포함하는 경우, null을 반환합니다.
url이 about:blank
와 일치하고 initialInsertion이 true인 경우,
element의 콘텐츠 내비게이블의
활성 문서와 url이 주어진 URL 및 기록 업데이트
단계를 실행합니다.
이는 about:blank?foo
와 같은 url을 처리하는 데 필요합니다. url이 단순히
about:blank
인 경우, 이 작업은 아무런 작업도 수행하지 않습니다.
url을 반환합니다.
iframe 또는 frame을 탐색하는 방법은 요소 element, URL url, 리퍼러 정책 referrerPolicy 및 선택적으로 문자열 또는 null srcdocString(기본값은 null)을 사용하여 다음과 같이 합니다.
historyHandling을 "자동
"으로
설정합니다.
element의 내비게이블 콘텐츠의
활성 문서가 완전히 로드된 상태가 아니면, historyHandling을 "대체
"로
설정합니다.
element이 iframe
인 경우,
element의 대기 중인 리소스 타이밍 시작 시간을
element의 현재 고해상도 시간으로 설정합니다.
element의 내비게이블 콘텐츠를 url로 element의 노드 문서를 사용하여 탐색합니다. historyHandling은 historyHandling으로, referrerPolicy는 referrerPolicy로, 문서 리소스는 srcdocString으로 설정합니다.
각 document
는 iframe
로드 진행 중 플래그와 iframe 로드 음소거 플래그를 가지고 있습니다. document
가 생성될 때, 이러한 플래그는 해당 document
에 대해 해제되어야 합니다.
iframe 로드 이벤트 단계를 실행하는 방법은 주어진 iframe
요소
element에 대해 다음과 같습니다.
childDocument에 iframe 로드 음소거 플래그가 설정되어 있으면 반환합니다.
element의 대기 중인 리소스 타이밍 시작 시간이 null이 아닌 경우:
fallbackTimingInfo를 element의 대기 중인 리소스 타이밍 시작 시간과 global에 주어진 현재 고해상도 시간을 사용하여 새로운 fetch 타이밍 정보로 설정합니다.
url, "iframe
",
global, 빈 문자열, 새로운 응답 본문 정보
및 0을 사용하여 리소스 타이밍 표시를 수행합니다.
element의 대기 중인 리소스 타이밍 시작 시간을 null로 설정합니다.
childDocument의 iframe 로드 진행 중 플래그를 설정합니다.
childDocument의 iframe 로드 진행 중 플래그를 해제합니다.
이 작업은 스크립팅과 함께 사용되어 로컬 네트워크의 HTTP 서버의 URL 공간을 탐색할 수 있습니다. 사용자 에이전트는 이러한 공격을 완화하기 위해 위에서 설명한 것보다 더 엄격한 교차 출처 액세스 제어 정책을 구현할 수 있지만, 안타깝게도 이러한 정책은 일반적으로 기존 웹 콘텐츠와 호환되지 않습니다.
요소 유형이 로드 이벤트를 잠재적으로 지연시킬 수 있는 경우, 해당 유형의 각 요소 element에 대해, 사용자 에이전트는 element의 노드 문서의 로드 이벤트를 지연시켜야 하며, 다음 중 하나라도 참인 경우에만 element의 내비게이블 콘텐츠가 null이 아닙니다.
element의 내비게이블 콘텐츠의 활성 문서가 로드 후 작업 준비 완료 상태가 아닙니다.
element의 내비게이블 콘텐츠의 로드 이벤트 지연 모드가 true입니다.
로드
이벤트 처리 중에
element의 내비게이블 콘텐츠가 다시 탐색되면, 로드 이벤트는 더 지연될 것입니다.
각 iframe
요소에는 초기 값이
false인 현재 탐색이 지연 로드됨 부울이 관련되어 있습니다. 이 부울은 iframe
속성을 처리하는 알고리즘에서 설정되고 해제됩니다.
현재 탐색이 지연
로드되지 않은 iframe
요소는 로드 이벤트를
잠재적으로 지연시킵니다.
각 iframe
요소에는 null 또는 DOMHighResTimeStamp
가 관련되어 있으며, 대기 중인 리소스 타이밍 시작 시간으로 설정됩니다. 이 값은 처음에 null로 설정됩니다.
요소가 생성될 때, srcdoc
속성이 설정되지 않았고 src
속성이 설정되지 않았거나 설정되었지만 그 값을 구문 분석할 수 없는 경우, 요소의 내비게이블 콘텐츠는 초기 about:blank
document
에서 유지됩니다.
사용자가 이 페이지에서 다른 곳으로 이동하면, iframe
의 내비게이블 콘텐츠의 활성 WindowProxy
객체는 새로운 Window
객체에 대해 프록시로 동작하지만, src
속성은 변경되지 않습니다.
name
속성은, 존재할
경우, 유효한 탐색 가능 대상
이름이어야 합니다. 지정된 값은 내용 탐색 가능
요소가 존재할 때, 그것이 생성될 때 그 요소의 이름으로 사용됩니다.
모든 현재 엔진에서 지원됩니다.
sandbox
속성은,
지정되면, iframe
에 호스팅된
모든 콘텐츠에 대해 일련의 추가 제한을 활성화합니다. 이 속성의 값은 유일한 공백으로 구분된 토큰의 무작위 집합이어야 하며, ASCII 대소문자 구분이 없는 형식이어야 합니다. 허용되는 값은 다음과 같습니다:
allow-downloads
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols
이 속성이 설정되면 콘텐츠는 고유한 불투명 원본으로
취급되며, 양식, 스크립트 및 다양한 잠재적으로 성가신 API가 비활성화되고, 링크가 다른 탐색
가능 항목을 대상으로 하지 못하게 됩니다. allow-same-origin
키워드는 콘텐츠가 실제 원본에서 가져온 것으로 처리되도록 하며, 불투명 원본으로 강제되지 않도록 합니다. allow-top-navigation
키워드는 콘텐츠가 탐색할 수 있도록 허용하며, 탐색 가능 항목을 탐색할 수 있도록 합니다. allow-top-navigation-by-user-activation
키워드는 비슷한 방식으로 동작하지만, 사용자가 활성화한 경우에만 탐색을 허용합니다. allow-top-navigation-to-custom-protocols
키워드는 fetch 스킴이 아닌 항목으로의 탐색을 다시 활성화하여 외부 소프트웨어로 전달될 수 있도록 합니다. allow-forms
,
allow-modals
,
allow-orientation-lock
,
allow-pointer-lock
,
allow-popups
,
allow-presentation
,
allow-scripts
,
및 allow-popups-to-escape-sandbox
키워드는 양식, 모달 대화 상자, 화면 방향 고정, 포인터 잠금 API, 팝업, 프레젠테이션 API, 스크립트 및 비샌드박스 보조 브라우징 컨텍스트의 생성을 다시 활성화합니다. allow-downloads
키워드는 콘텐츠가 다운로드를 수행할 수 있도록 허용합니다. [POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]
allow-top-navigation
키워드와 allow-top-navigation-by-user-activation
키워드는 둘 다 지정될 수 없습니다. 이는 중복되며, 이 경우 allow-top-navigation
만
효과가 있습니다.
마찬가지로, allow-top-navigation-to-custom-protocols
키워드는 allow-top-navigation
또는 allow-popups
중 하나가 지정된 경우 지정될 수 없습니다. 이는 중복됩니다.
샌드박스 콘텐츠 내에서 alert()
, confirm()
, 및 prompt()
를 허용하려면, allow-modals
및 allow-same-origin
키워드를 모두 지정해야 하며, 로드된 URL이 동일 출처여야 하고 최상위 출처와 동일해야 합니다. allow-same-origin
키워드가 없으면 콘텐츠는 항상 교차 출처로 취급되며, 교차 출처 콘텐츠는 간단한 대화 상자를 표시할 수 없습니다.
allow-scripts
키워드와 allow-same-origin
키워드를 함께 설정하면, 동일 출처로 되어 있는 경우 iframe
을 포함하는 페이지에서
임베디드 페이지가 sandbox
속성을 단순히 제거한 다음 스스로를 다시 로드할 수 있으므로, 샌드박스에서 완전히 벗어날 수 있습니다.
이 플래그는 iframe
요소의 내용 탐색 가능 요소가 탐색될 때만 효과가 있습니다. 플래그를 제거하거나, sandbox
속성을 제거해도 이미
로드된 페이지에는 아무런 영향이 없습니다.
잠재적으로 악의적인 파일은 iframe
요소가 포함된 파일과
동일한 서버에서 제공되어서는 안 됩니다. 사용자가 악의적인 콘텐츠를 직접 방문하도록 설득할 수 있는 경우, 악의적인 콘텐츠를 샌드박싱하는 것은 거의 도움이 되지 않습니다. 악의적인 HTML 콘텐츠가
야기할 수 있는 피해를 제한하려면 별도의 전용 도메인에서 제공해야 합니다. 다른 도메인을 사용하면 파일의 스크립트가 사이트를 공격할 수 없으며, 사용자가 해당 페이지를 보호되지 않은 상태에서 직접
방문하도록 속임을 당하더라도 문제가 발생하지 않습니다. sandbox
속성의 보호를 받지
않고도 해당 페이지를 방문할 수 있습니다.
iframe
요소의 sandbox
속성이 설정되거나
변경될 때, 해당 요소가 null이 아닌 내용 탐색 가능
요소를 가지고 있는 경우, 사용자 에이전트는 속성의 값을 사용하여 샌드박스 지시문을 분석해야 합니다.
iframe
요소의 sandbox
속성이 제거될 때,
해당 요소가 null이 아닌 내용 탐색 가능 요소를 가지고
있는 경우, 사용자 에이전트는 iframe
요소의 iframe
샌드박싱 플래그 집합을 비워야 합니다.
이 예에서는 완전히 알 수 없는 잠재적으로 악의적인 사용자 제공 HTML 콘텐츠가 페이지에 포함되어 있습니다. 별도의 도메인에서 제공되기 때문에 모든 일반적인 교차 사이트 제한 사항의 영향을 받습니다. 또한, 포함된 페이지는 스크립트, 플러그인 및 양식이 비활성화되어 있으며, 자신 또는 자신이 포함한 프레임이나 창 이외의 항목을 탐색할 수 없습니다.
< p > We're not scared of you! Here is your content, unedited:</ p >
< iframe sandbox src = "https://usercontent.example.net/getusercontent.cgi?id=12193" ></ iframe >
별도의 도메인을 사용하는 것이 중요합니다. 공격자가 사용자를 직접 해당 페이지로 이동하도록 설득할 수 있는 경우, 페이지는 사이트의 원본 컨텍스트에서 실행되지 않으며, 사용자는 페이지에서 발견된 모든 공격에 취약해질 수 있습니다.
이 예에서는 다른 사이트에서 제공되는 가젯이 포함되어 있습니다. 이 가젯은 스크립트와 양식이 활성화되어 있으며, 원본 샌드박스 제한이 해제되어 가젯이 원본 서버와 통신할 수 있습니다. 그러나 샌드박스는 여전히 유용하며, 플러그인과 팝업을 비활성화하여 사용자가 악성 코드 및 기타 성가신 요소에 노출되는 위험을 줄여줍니다.
< iframe sandbox = "allow-same-origin allow-forms allow-scripts"
src = "https://maps.example.com/embedded.html" ></ iframe >
파일 A에 다음과 같은 조각이 포함되어 있다고 가정해 봅시다:
< iframe sandbox = "allow-same-origin allow-forms" src = B ></ iframe >
파일 B에도 iframe이 포함되어 있다고 가정해 봅시다:
< iframe sandbox = "allow-scripts" src = C ></ iframe >
또한 파일 C에는 링크가 포함되어 있다고 가정해 봅시다:
< a href = D > Link</ a >
이 예에서 모든 파일이 text/html
로 제공되었다고 가정해
봅시다.
이 시나리오에서 C 페이지에는 모든 샌드박스 플래그가 설정되어 있습니다. A에 있는 iframe
에서 스크립트가
비활성화되어 있기 때문에, B에 설정된 allow-scripts
키워드가 무시됩니다. 또한, B의 내부 iframe
에는 allow-forms
키워드가 설정되어 있지 않기 때문에 양식도 비활성화됩니다.
이제 A에 있는 스크립트가 A와 B의 모든 sandbox
속성을
제거한다고 가정해 봅시다. 이 경우 즉시 아무 것도 변경되지 않습니다. 사용자가 C에서 링크를 클릭하여 D 페이지를 B에 로드하면, 페이지 D는 이제 B에 있는 iframe
이 allow-same-origin
및 allow-forms
키워드가 설정된 것처럼 작동합니다. 이는 페이지 B가 로드될 때 A의 내용 탐색 가능 요소의 상태였기 때문입니다.
일반적으로 sandbox
속성을 동적으로 제거하거나 변경하는 것은 권장되지 않습니다. 이는 무엇이 허용되고 무엇이 허용되지 않을지를 판단하기 어렵게 만들 수 있습니다.
allow
속성은 지정되었을
때, 컨테이너 정책을
결정하며, 권한 정책이 Document
내에서 iframe
의 내용 탐색 가능 요소에서 초기화될 때 사용됩니다. 값은 직렬화된 권한 정책이어야 합니다. [PERMISSIONSPOLICY]
이 예에서는 iframe
이
사용되어 온라인 내비게이션 서비스의 지도를 임베드합니다. allow
속성은 중첩된 컨텍스트
내에서 지리 위치 API를 활성화하는 데 사용됩니다.
< iframe src = "https://maps.example.com/" allow = "geolocation" ></ iframe >
allowfullscreen
속성은 부울 속성입니다. 지정되었을 때, Document
객체가 iframe
요소의 내용 탐색 가능 요소에서 초기화될 때,
"fullscreen
" 기능을 어떤 출처에서든
사용할 수 있도록 허용하는 권한 정책이 적용됩니다. 이는 권한 정책 속성 처리 알고리즘에 의해 적용됩니다. [PERMISSIONSPOLICY]
여기서 iframe
이 사용되어
비디오 사이트의 플레이어를 임베드합니다. 플레이어가 전체 화면으로 비디오를 재생할 수 있도록 allowfullscreen
속성이 필요합니다.
< article >
< header >
< p >< img src = "/usericons/1627591962735" > < b > Fred Flintstone</ b ></ p >
< p >< a href = "/posts/3095182851" rel = bookmark > 12:44</ a > — < a href = "#acl-3095182851" > Private Post</ a ></ p >
</ header >
< p > Check out my new ride!</ p >
< iframe src = "https://video.example.com/embed?id=92469812" allowfullscreen ></ iframe >
</ article >
allow
또는
allowfullscreen
은
iframe
요소의 내용 탐색 가능 요소 내에서 해당 기능이 이미 허용되지 않은
경우, 기능에 대한 접근 권한을 부여할 수 없습니다.
Document
객체
document가 정책 제어 기능 feature을(를) 사용할 수 있는지 여부를 결정하려면 다음 단계를 실행합니다.
document의 탐색 컨텍스트가 null이면, false를 반환합니다.
document가 완전히 활성화된 상태가 아니면, false를 반환합니다.
document, document의 출처에서 feature가 기능이 활성화되었는지 확인한 결과가 "Enabled"이면, true를 반환합니다.
false를 반환합니다.
allow
및
allowfullscreen
속성은 내용 탐색 가능 요소의 활성 문서의 권한
정책에만 영향을 미치기 때문에, iframe
의 내용 탐색 가능 요소가 탐색될 때만 효과가 있습니다. 이를 추가하거나 제거해도 이미 로드된 문서에는 영향을 미치지 않습니다.
iframe
요소는 임베드된 콘텐츠가
특정 치수를 가지는 경우(예: 광고 유닛에 잘 정의된 치수가 있음) 치수 속성을 지원합니다.
iframe
요소는 절대 대체 콘텐츠를 가지지 않습니다. 항상 새로운 자식 탐색 가능 요소를
생성하며, 지정된 초기 콘텐츠가 성공적으로 사용되었는지 여부와 관계없이 작동합니다.
referrerpolicy
속성은 리퍼러 정책 속성입니다. 이 속성의 목적은 리퍼러 정책을 설정하는 것으로, iframe 속성 처리 시 사용됩니다. [REFERRERPOLICY]
loading
속성은
지연 로딩 속성입니다. 이 속성의 목적은 뷰포트
밖에 있는 iframe
요소를
로드하는 정책을 나타내는 것입니다.
loading
속성의 상태가 Eager 상태로 변경되면, 사용자
에이전트는 다음 단계를 실행해야 합니다:
resumptionSteps를 iframe
요소의 지연 로드 재개
단계로 설정합니다.
resumptionSteps가 null이면, 반환합니다.
iframe
의 지연 로드 재개
단계를 null로 설정합니다.
resumptionSteps를 호출합니다.
iframe
요소의 하위 요소는
아무것도 나타내지 않습니다. (레거시 사용자 에이전트에서는 iframe
요소를 지원하지 않기
때문에, 콘텐츠가 대체 콘텐츠로 작동할 수 있는 마크업으로 구문 분석됩니다.)
HTML 파서는 iframe
요소 내의 마크업을
텍스트로 처리합니다.
모든 현재 엔진에서 지원됨.
IDM 속성 src
, name
, sandbox
, 및 allow
은
각각 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
모든 현재 엔진에서 지원됨.
srcdoc
getter 단계는 다음과 같습니다:
attribute를 null, srcdoc
의 로컬 이름, 및 this로 주어진 네임스페이스로 속성을 가져오는 결과로 설정합니다.
attribute가 null이면, 빈 문자열을 반환합니다.
attribute의 값을 반환합니다.
srcdoc
setter 단계는 다음과
같습니다:
compliantString을(를) 신뢰할 수 있는 타입 규격
문자열 가져오기 알고리즘의 결과로, TrustedHTML
,
this의 관련 전역 객체, 주어진 값,
"HTMLIFrameElement srcdoc
", 및 "script
"와 함께 설정합니다.
속성 값을 설정하는데, this, srcdoc
의 로컬 이름, 및 compliantString을(를) 사용합니다.
sandbox
의 DOMTokenList
에
대해 지원되는 토큰은
sandbox
속성에 정의된
허용된 값들이며 사용자 에이전트가 지원하는 값들입니다.
allowFullscreen
IDL 속성은 반영해야 하며, allowfullscreen
콘텐츠 속성을 반영해야 합니다.
HTMLIFrameElement/referrerPolicy
모든 현재 엔진에서 지원됨.
referrerPolicy
IDL 속성은 referrerpolicy
콘텐츠 속성을 반영해야 하며, 알려진 값들만 허용됩니다.
loading
IDL 속성은 loading
콘텐츠 속성을 반영해야 하며, 알려진 값들만 허용됩니다.
HTMLIFrameElement/contentDocument
모든 현재 엔진에서 지원됨.
contentDocument
getter 단계는 this의
콘텐츠 문서를 반환하는
것입니다.
HTMLIFrameElement/contentWindow
모든 현재 엔진에서 지원됨.
contentWindow
getter 단계는 this의
콘텐츠 창을 반환하는 것입니다.
다음은 광고 중개업체의 광고를 포함하기 위해 iframe
을 사용하는 페이지의
예입니다:
< iframe src = "https://ads.example.com/?customerid=923513721&format=banner"
width = "468" height = "60" ></ iframe >
embed
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
src
— 리소스의 주소
type
— 임베디드 리소스의 타입
width
— 가로 차원
height
— 세로 차원
[Exposed =Window ]
interface HTMLEmbedElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString width ;
[CEReactions ] attribute DOMString height ;
Document ? getSVGDocument ();
// obsolete members도 포함
};
embed
요소는 외부 애플리케이션 또는 상호작용
콘텐츠와의 통합 지점을 제공합니다.
src
속성은 임베디드된 리소스의 URL을 제공합니다. 이
속성이 존재하는 경우 유효한 비어 있지 않은 URL을 포함해야 합니다.
itemprop
속성이 embed
요소에 지정된 경우 src
속성도 지정되어야 합니다.
type
속성은, 존재하는 경우 플러그인을
선택할 때 사용되는 MIME 타입을 제공합니다. 이 값은 유효한 MIME 타입
문자열이어야 합니다. type
속성과
src
속성이 모두 존재하는 경우, type
속성은 src
속성으로 제공된 리소스의 명시적 콘텐츠 타입 메타데이터와 동일한 타입을 지정해야 합니다.
다음 조건이 발생하는 동안, 해당 요소에 대해 인스턴스화된 모든 플러그인은 제거되어야 하며, embed
요소는 아무것도 나타내지 않습니다:
요소에 미디어 요소 상위 요소가 있는 경우.
embed
요소는 다음 조건이 모두 동시에 충족될
때 잠재적으로 활성 상태로 간주됩니다:
요소가 문서 내에 있거나 마지막으로 문서 내에 있었던 경우.
요소의 src
속성이 비어 있지 않거나 없는
경우.
요소가 미디어 요소의 하위 요소가 아닌 경우.
요소가 렌더링 중이거나, 마지막으로 이벤트 루프가 1단계에 도달했을 때 렌더링 중이었던 경우.
embed
요소가 잠재적으로 활성 상태가 아니었다가 잠재적으로 활성 상태가 되었을 때, 그리고 잠재적으로 활성 상태인 embed
요소가 여전히 잠재적으로 활성 상태이며 src
속성이 설정, 변경, 제거되거나 type
속성이 설정, 변경, 제거될 때마다, 사용자
에이전트는 해당 요소에 대해 요소 작업을 큐에 추가하여
embed 작업 소스에서 embed
요소 설정 단계를 실행해야 합니다.
embed
요소 element에 대한 embed
요소 설정
단계는 다음과 같습니다:
다른 작업이 element에 대한 embed
요소 설정 단계를 실행하도록 대기열에 이미
추가된 경우, 반환합니다.
만약 element에 src
속성이 설정되어 있다면, 다음을 수행합니다:
url을 URL
인코딩-파싱의 결과로 설정하여 element의 src
속성의 값을
element의 노드
문서를 기준으로 상대적으로 처리합니다.
만약 url이 실패라면 반환합니다.
request을 새 요청으로 설정하며,
url은 URL, 클라이언트는 element의 노드 문서의 관련 설정 객체, 대상은 "embed
", 자격 증명 모드는 "include
", 모드는
"navigate
", 발기자 유형은 "embed
", URL 자격 증명 플래그가 설정되어 있는 것으로 합니다.
요청을 가져오며, 응답 처리를 응답 response으로 설정합니다:
만약 작업이 embed
요소 설정
단계를 element에 대해 실행하기 위해 큐에 추가되었다면, 반환합니다.
type을 콘텐츠 유형을 element 및 response으로 결정하여 설정합니다.
type을 다음과 같이 스위치합니다:
element에 대해 플러그인을 표시하지 않습니다.
만약 element의 내비게이션 가능 콘텐츠가 null인 경우, element에 대해 새 하위 내비게이션 가능 객체를 생성합니다.
element의 내비게이션 가능 콘텐츠를
response의 URL로, element의
노드 문서를 사용하여 응답을 response으로, 히스토리
처리를 "대체
"로
설정하여 내비게이트합니다.
element의 src
속성은 내비게이션 가능 콘텐츠가 다른 위치로
내비게이트된 경우 업데이트되지 않습니다.
element는 이제 내비게이션 가능 콘텐츠를 나타냅니다.
리소스를 가져오는 과정은 element의 로드 이벤트를 지연시켜야 합니다.
그렇지 않으면 element에 대해 플러그인을 표시하지 않습니다.
주어진 embed
요소
element와 응답 response에 대해
콘텐츠 유형을 결정하려면 다음 단계를 수행하십시오:
element에 type
속성이
있으며 해당 속성의 값이 플러그인이 지원하는 유형인 경우, type
속성의 값을 반환합니다.
만약 response의 경로가 플러그인이 지원하는 패턴과 일치한다면, 해당 플러그인이 처리할 수 있는 유형을 반환합니다.
예를 들어, 플러그인은 .swf
로 끝나는 경로 컴포넌트를 처리할 수 있다고 할 수
있습니다.
만약 response에 명시적 콘텐츠 타입 메타데이터가 있고, 해당 값이 플러그인이 지원하는 유형이라면, 해당 값을 반환합니다.
null을 반환합니다.
위 알고리즘이 response이 정상 상태가 아닌 경우도 허용하는 것은 의도된 것입니다. 이렇게 하면 서버가 오류 응답(예: HTTP 500 내부 서버 오류 코드)에도 불구하고 플러그인 데이터를 반환할 수 있습니다.
플러그인을 표시하지 않으려면 embed
요소 element에
대해 다음
단계를 실행합니다:
element에 대해 하위 내비게이션 가능 객체를 파괴합니다.
element에 대해 플러그인을 찾을 수 없다는 표시를 표시하고, 그 내용을 element로 설정합니다.
element는 이제 아무것도 나타내지 않습니다.
embed
요소에는 대체 콘텐츠가 없으며, 후손 요소는 무시됩니다.
embed
요소가 잠재적으로 활성 상태를 멈추면, 해당 요소에 대해
인스턴스화된 모든 플러그인이 언로드되어야 합니다.
embed
요소는 로드 이벤트를 지연시킬
가능성이 있습니다.
IDL 속성 src
및 type
은 각각 동일한 이름의
콘텐츠 속성을 반영해야 합니다.
object
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
data
— 리소스의 주소
type
— 포함된 리소스의 유형
name
— 탐색 가능한 콘텐츠의 이름
form
— 이 요소를 폼
요소와 연결
width
— 수평 차원
height
— 수직 차원
[Exposed =Window ]
인터페이스 HTMLObjectElement : HTMLElement {
[HTMLConstructor ] 생성자 ();
[CEReactions ] 속성 USVString data ;
[CEReactions ] 속성 DOMString type ;
[CEReactions ] 속성 DOMString name ;
readonly 속성 HTMLFormElement ? form ;
[CEReactions ] 속성 DOMString width ;
[CEReactions ] 속성 DOMString height ;
readonly 속성 문서 ? contentDocument ;
readonly 속성 WindowProxy ? contentWindow ;
문서 ? getSVGDocument ();
readonly 속성 boolean willValidate ;
readonly 속성 ValidityState validity ;
readonly 속성 DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
// 또한 사용되지 않는 멤버를 포함합니다
};
object
요소에 의해
인스턴스화된 콘텐츠의 유형에 따라, 노드는 다른 인터페이스도 지원합니다.
object
요소는 외부 리소스를 나타낼 수
있으며, 리소스의 유형에 따라 이미지 또는 자식 탐색 가능으로 처리됩니다.
data
속성은 리소스의 URL을 지정합니다.
이 속성은 필수이며, 공백으로 둘러싸일 수 있는 유효한 비어 있지 않은
URL을 포함해야 합니다.
type
속성이 존재하는 경우, 리소스의
유형을 지정합니다. 속성이 존재하는 경우, 속성은 유효한 MIME 타입
문자열이어야 합니다.
name
속성이 존재하는 경우, 유효한 탐색 가능한 대상 이름이어야
합니다. 주어진 값은 요소의 탐색 가능한 콘텐츠의 이름으로 사용되며,
적용 가능한 경우 요소의 탐색 가능한 콘텐츠가 새 자식 탐색 가능을 생성할 때
존재해야 합니다.
다음 조건 중 하나가 발생할 때마다:
object
요소가
자신의 대체 콘텐츠를 표시하는지 여부가 변경될 때,
classid
속성이 설정,
변경되거나 제거될 때,
classid
속성이 없고
data
속성이 설정, 변경되거나 제거될
때,
classid
속성도 없고
data
속성도 없으며 type
속성이 설정, 변경되거나 제거될 때,
...사용자 에이전트는 object
요소를
지정하여 요소 작업을 큐에 넣어 다음 단계를 수행하여
object
요소가 무엇을 나타내는지 다시
결정해야 합니다. 이 작업이 큐에 있거나 적극적으로 실행 중인 경우, 요소의 노드 문서의 로드 이벤트를 지연시켜야 합니다.
사용자가 이 object
요소의
대체 콘텐츠를 기본 동작 대신 표시하도록 선호를 표시한
경우, 아래의 대체로 표시된 단계로 건너뜁니다.
예를 들어, 사용자는 이 콘텐츠가 사용자가 더 접근하기 쉬운 형식을 사용하기 때문에 요소의 대체 콘텐츠를 표시하도록 요청할 수 있습니다.
요소가 조상 미디어 요소를 가지고 있거나, 조상 object
요소가 대체
콘텐츠를 표시하지 않는 경우, 또는 요소가 문서에 포함되지 않은 경우 비활성
탐색 컨텍스트를 가지고 있는 경우, 또는 요소의 노드 문서가 완전히
활성화되지 않은 경우, 또는 요소가 열린 요소
스택에 있는 경우, 또는 요소가 렌더링되지 않는
경우, 아래의 대체로 표시된 단계로 건너뜁니다.
data
속성이 존재하고 값이 비어
있지 않은 경우:
type
속성이 존재하고
값이 사용자 에이전트가 지원하는 유형이 아닌 경우, 사용자 에이전트는 콘텐츠의 실제 유형을 검사하지 않고 아래의 대체로 표시된 단계로 건너뛸 수 있습니다.
속성의 값을 URL로
인코딩-파싱하여 data
속성의 값을
요소의 노드
문서에 상대적으로 파싱한 결과를 url로 둡니다.
url이 실패한 경우, 요소에서 오류
라는 이름의 이벤트를 발생시키고 아래의
대체로 표시된 단계로 건너뜁니다.
request라는 새 요청을 만듭니다. 이 요청의 URL은
url이며, 클라이언트는 요소의 노드
문서의 관련
설정 객체, 목적지는 "object
", 자격 증명 모드는 "포함
", 모드는
"탐색
", 발신자 유형은 "object
", URL 자격 증명 플래그가 설정된 상태입니다.
요청을 request합니다.
리소스를 가져오는 것은 요소의 노드 문서의 로드 이벤트를 지연시켜야 합니다. 리소스가 페치된 후 작업에 의해 큐에 추가된 작업이 실행되면 이 작업이 실행됩니다.
리소스가 아직 사용 가능하지 않은 경우 (예: 리소스가 캐시에 없어서 리소스를 로드하려면 네트워크 요청이 필요함), 아래의 대체로 표시된 단계로 건너뜁니다. 리소스가 사용 가능해지면 네트워킹 작업 소스에 의해 큐에 추가된 작업은 이 알고리즘을 이 단계에서 다시 시작해야 합니다. 리소스는 점진적으로 로드될 수 있으며, 사용자 에이전트는 리소스의 일부만 로드되더라도 리소스가 사용 가능하다고 간주할 수 있습니다.
로드가 실패한 경우 (예: HTTP 404 오류, DNS 오류 등), 요소에서 오류
라는 이름의 이벤트를 발생시키고 아래의
대체로 표시된 단계로 건너뜁니다.
resource type을 다음과 같이 결정합니다:
resource type을 알 수 없음으로 설정합니다.
사용자 에이전트가 이 리소스에 대한 Content-Type 헤더를 엄격하게 준수하도록 구성되어 있고, 리소스에 관련된 Content-Type 메타데이터가 있는 경우, 리소스 유형을 리소스의 Content-Type 메타데이터에 지정된 유형으로 설정하고 아래의 처리기로 표시된 단계로 건너뜁니다.
이로 인해 보안 취약점이 발생할 수 있습니다. 예를 들어, 사이트가 특정 유형을 사용하는 리소스를 포함하려고 하지만 원격 사이트가 이를 재정의하여 대신 사용자 에이전트에 다른 유형의 콘텐츠를 제공하여 다른 보안 특성을 트리거하는 경우입니다.
다음 목록에서 적절한 단계 집합을 실행합니다:
binary를 false로 설정합니다.
리소스의 Content-Type 메타데이터에 지정된 유형이 "text/plain
"이고,
리소스가 텍스트 또는 바이너리
리소스를 구분하기 위한 규칙을 적용한 결과 텍스트가 아닌 경우, binary를 true로
설정합니다.
리소스의 Content-Type 메타데이터에 지정된 유형이 "application/octet-stream
"인
경우, binary를 true로 설정합니다.
binary가 false인 경우, resource type을 리소스의 Content-Type 메타데이터에 지정된 유형으로 설정하고 아래의 처리기로 표시된 단계로 건너뜁니다.
type
속성이 object
요소에 존재하고 그 값이 application/octet-stream
이
아닌 경우, 다음 단계를 실행합니다:
속성 값이 "image/
"로 시작하고 XML MIME 타입이 아닌 경우, 리소스
유형을 해당 type
속성에 지정된 유형으로 설정합니다.
아래의 처리기로 표시된 단계로 건너뜁니다.
type
속성이 object
요소에 존재하는 경우, tentative type을 해당 type
속성에 지정된 유형으로 설정합니다.
그렇지 않은 경우, tentative type을 리소스의 계산된 유형으로 설정합니다.
tentative type이 application/octet-stream
이
아닌 경우, resource type을 tentative type으로 설정하고 아래의
처리기로 표시된
단계로 건너뜁니다.
명시된 리소스의 URL에 URL 파서 알고리즘을 적용한 결과(리디렉션 후), URL 레코드의 경로 구성 요소가 플러그인에서 지원하는 패턴과 일치하는 경우, 리소스 유형을 해당 플러그인이 처리할 수 있는 유형으로 설정합니다.
예를 들어, 플러그인은 ".swf
" 네 글자 문자열로 끝나는 경로 구성 요소를 처리할 수 있다고 할 수
있습니다.
이 단계가 완료되거나 위의 하위 단계 중 하나가 다음 단계로 바로 넘어가면 resource type이 여전히 알 수 없을 수 있습니다. 두 경우 모두 다음 단계에서 대체가 트리거됩니다.
처리기: 다음 중 일치하는 첫 번째 경우에 따라 콘텐츠를 처리합니다:
image/
"로 시작하지 않는 경우
object
요소의 탐색 가능한 콘텐츠가
null인 경우, 요소에 대해 새 자식 탐색 가능을 생성합니다.
response의 URL이 about:blank
와 일치하지 않으면,
요소의 노드 문서를 사용하여 요소의 탐색 가능한 콘텐츠를 historyHandling을 "대체
"로
설정하여 탐색합니다.
data
속성의 object
요소는 탐색 가능한 콘텐츠가
다른 위치로 탐색된 경우 업데이트되지 않습니다.
object
요소는 자신의 탐색 가능한 콘텐츠를 나타냅니다.
image/
"로 시작하고 이미지 지원이 비활성화되지 않은 경우
자식 탐색
가능을 파괴합니다. object
요소를 주어진 대로.
이미지를 위한 스니핑 규칙을 적용하여 이미지 유형을 결정합니다.
object
요소는 지정된 이미지를 나타냅니다.
이미지를 렌더링할 수 없는 경우, 예를 들어 잘못된 형식이거나 지원되지 않는 형식인 경우, 아래의 대체로 표시된 단계로 건너뜁니다.
지정된 resource type은 지원되지 않습니다. 아래의 대체로 표시된 단계로 건너뜁니다.
이전 단계가 resource type을 알 수 없음으로 끝난 경우, 이 경우가 트리거됩니다.
요소의 콘텐츠는 object
요소가 나타내는 콘텐츠의 일부가 아닙니다.
object
요소가 탐색 가능한 콘텐츠를 나타내지 않는
경우, 리소스가 완전히 로드된 후, 요소의 object
요소에 주어진 요소 작업을 큐에
넣어 이벤트를 로드
라는 이름으로 발생시킵니다.
요소가 탐색 가능한
콘텐츠를 나타내는 경우, 생성된 document
가 완전히 로드될
때 유사한 작업이 큐에 추가됩니다.
반환합니다.
대체: object
요소는 자식 요소를
나타냅니다. 이것이 요소의 대체 콘텐츠입니다. 요소에 대해
자식 탐색 가능을
파괴합니다.
위 알고리즘에 따라, object
요소의
콘텐츠는 참조된 리소스를 표시할 수 없는 경우(예: 404 오류가 반환된 경우) 사용되는 대체 콘텐츠로 작동합니다. 이를 통해 여러 object
요소를 서로 중첩하여 서로 다른
기능을 가진 여러 사용자 에이전트를 대상으로 할 수 있으며, 사용자 에이전트는 자신이 지원하는 첫 번째 요소를 선택합니다.
object
요소는 로드 이벤트를 지연시킬
수 있습니다.
form
속성은 object
요소를 폼 소유자와 명시적으로 연결하는 데 사용됩니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
IDL 속성 data
,
type
, 그리고 name
은 각각 동일한
이름의 관련 콘텐츠 속성을 반영해야 합니다.
HTMLObjectElement/contentDocument
모든 현재 엔진에서 지원합니다.
contentDocument
getter 단계는 이것의 콘텐츠 문서를 반환하는 것입니다.
HTMLObjectElement/contentWindow
모든 현재 엔진에서 지원합니다.
contentWindow
getter 단계는 이것의 콘텐츠 윈도우를 반환하는 것입니다.
willValidate
, validity
, 그리고 validationMessage
속성과, checkValidity()
,
reportValidity()
,
setCustomValidity()
메서드는 제약 조건 검증
API의 일부입니다. form
IDL 속성은 요소의
폼 API의 일부입니다.
이 예제에서는 object
요소를
사용하여 HTML 페이지를 다른 페이지에 포함합니다.
< figure >
< object data = "clock.html" ></ object >
< figcaption > My HTML Clock</ figcaption >
</ figure >
video
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
controls
속성을 가지고 있는 경우: 인터랙티브
콘텐츠.
src
속성을 가지고 있는 경우:
0개 이상의 track
요소, 그 후
투명, 하지만 미디어 요소 하위 요소는 없음.
src
속성을 가지고 있지 않은 경우:
0개 이상의
source
요소, 그 후
0개 이상의 track
요소, 그 후
투명, 하지만 미디어 요소 하위 요소는 없음.
src
— 리소스의 주소
crossorigin
—
이 요소가 교차 출처 요청을 처리하는 방법
poster
— 비디오 재생 전에 표시할
포스터 프레임
preload
— 미디어 리소스에 얼마나 많은 버퍼링이 필요할 것 같은지에 대한 힌트
autoplay
— 페이지가 로드될 때
미디어 리소스가 자동으로 시작될 수 있다는 힌트
playsinline
—
사용자 에이전트가 요소의 재생 영역 내에서 비디오 콘텐츠를 표시하도록 권장
loop
— 미디어 리소스를 반복할지 여부
muted
— 기본적으로 미디어 리소스를 음소거할지 여부
controls
— 사용자 에이전트
제어 표시
width
— 수평 크기
height
— 수직 크기
[Exposed =Window ]
interface HTMLVideoElement : HTMLMediaElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
readonly attribute unsigned long videoWidth ;
readonly attribute unsigned long videoHeight ;
[CEReactions ] attribute USVString poster ;
[CEReactions ] attribute boolean playsInline ;
};
video
요소는 비디오나 영화를 재생하거나 자막이
포함된 오디오 파일을 재생하는 데 사용됩니다.
video
요소 내부에 콘텐츠를 제공할 수
있습니다. 사용자 에이전트는 이 콘텐츠를 사용자에게 표시하지 않아야 합니다. 이 콘텐츠는 비디오를 지원하지 않는 이전 웹 브라우저용으로 의도된 것으로, 이러한 이전 브라우저의 사용자에게 비디오 콘텐츠에
접근하는 방법을 안내하는 텍스트가 표시되도록 합니다.
특히, 이 콘텐츠는 접근성 문제를 해결하기 위한 것이 아닙니다. 시각 장애인, 청각 장애인, 청각 장애인 및 기타 신체적 또는 인지적 장애를 가진 사용자를 위해 비디오 콘텐츠를 접근
가능하게 만드는 다양한 기능이 제공됩니다. 자막은 비디오 스트림에 내장되거나 track
요소를 사용하여 외부 파일로 제공될 수
있습니다. 수화 트랙은 비디오 스트림에 내장될 수 있습니다. 오디오 설명은 비디오 스트림에 내장되거나 WebVTT 파일을 사용하여 텍스트 형식으로 제공될
수 있으며, 사용자 에이전트에 의해 음성으로 변환될 수 있습니다. WebVTT는 또한 챕터 제목을 제공하는 데 사용할 수 있습니다. 미디어 요소를 전혀 사용하지 않으려는 사용자에게는, video
요소 근처의 텍스트에서 간단히 링크하여
대본 또는 다른 텍스트 대안을 제공할 수 있습니다. [WEBVTT]
video
요소는 미디어 요소로, 그 미디어 데이터는 명목상 비디오 데이터이며, 관련 오디오 데이터가 있을 수 있습니다.
src
, crossorigin
,
preload
, autoplay
,
loop
, muted
및 controls
속성은
모든
미디어 요소에 공통된 속성입니다.
poster
속성은 사용자 에이전트가 비디오 데이터가 없는 동안 표시할 수 있는 이미지 파일의 URL을 제공합니다. 속성이 존재하는 경우, 공백으로 둘러싸일 수 있는 유효한 비어 있지 않은
URL을 포함해야 합니다.
지정된 리소스를 사용해야 하는 경우, 요소가 생성되거나 poster
속성이
설정,
변경 또는 제거될 때, 사용자 에이전트는
요소의 포스터 프레임을 결정하기 위해 다음 단계를 실행해야 합니다(요소의 포스터 표시 플래그의 값에 관계없이):
이 video
요소에 대해 실행 중인 이 알고리즘의 인스턴스가 있는 경우, 포스터
프레임을 변경하지 않고 해당 인스턴스를 중단합니다.
url을 poster
속성의 값을 요소의 노드 문서와 상대적으로
URL을 인코딩-파싱한 결과로 설정합니다.
url이 실패인 경우, 반환합니다. 포스터 프레임이 없습니다.
request를 새로운 요청으로 설정하며, 그 URL은
url, 클라이언트는
요소의 노드 문서의
관련 설정
객체, 대상은
"image
", 시작자 유형은 "video
",
자격 증명 모드는
"include
"이며,
그 URL 자격 증명 플래그가 설정됩니다.
요청을 request합니다. 이는 요소의 노드 문서의 로드 이벤트를 지연시켜야 합니다.
이렇게 얻은 이미지가 있는 경우, 포스터 프레임은 해당 이미지입니다. 그렇지 않으면 포스터 프레임이 없습니다.
poster
속성으로 제공되는
이미지, 포스터 프레임은 사용자가 비디오가 어떤지에 대한 아이디어를 얻을 수
있도록 비디오의 대표 프레임(일반적으로 첫 번째 비어 있지 않은 프레임 중 하나)으로 의도된 것입니다.
playsinline
속성은 불리언
속성입니다. 이 속성이 존재하면, 비디오는 전체 화면이나 독립적인 크기 조정 가능한 창으로 표시되는 대신 기본적으로 문서 내에서 "인라인"으로 표시되어야 한다는 힌트를 사용자 에이전트에
제공합니다.
playsinline
속성이 없다고 해서 비디오가 기본적으로 전체 화면으로 표시된다는 것을 의미하지는 않습니다. 실제로 대부분의 사용자 에이전트는 기본적으로 모든 비디오를 인라인으로 재생하도록 선택했으며, 이러한 사용자
에이전트에서는 playsinline
속성이 아무런 영향을 미치지 않습니다.
video
요소는 아래 목록에서 첫 번째 일치
조건에 대해 주어진 것을 나타냅니다:
readyState
속성이 HAVE_NOTHING
또는
HAVE_METADATA
이지만 비디오 데이터가 전혀 얻어지지 않았거나 요소의 readyState
속성이
이후 값으로 설정되어 있지만 미디어
리소스에 비디오 채널이 없는 경우)
video
요소는 포스터 프레임을 나타내며, 포스터 프레임이 있는 경우
또는 그렇지 않으면 투명한 검정과
자연 크기가 없습니다.
video
요소가 일시 중지되고, 현재 재생 위치가 비디오의 첫 번째
프레임인 경우,
요소의 포스터 표시 플래그가 설정됨
video
요소는 포스터 프레임을 나타내며, 포스터 프레임이 있는 경우
또는 그렇지 않으면 비디오의 첫 번째 프레임을 나타냅니다.
video
요소가 일시 중지되었으며, 현재 재생 위치에 해당하는 비디오
프레임이 사용할 수 없는 경우(예: 비디오가 탐색 중이거나 버퍼링 중이기 때문에)
video
요소가 잠재적으로 재생 중이거나 일시 중지 상태가 아닌 경우(예: 탐색 중이거나 멈춘 경우)
video
요소는 마지막으로 렌더링된 비디오 프레임을 나타냅니다.
video
요소가 일시 중지된 경우
video
요소는 현재 재생 위치에 해당하는 비디오 프레임을 나타냅니다.
video
요소가 비디오
채널을 가지고 있으며 잠재적으로 재생 중인 경우)
video
요소는 계속 증가하는 "현재"
위치에서 비디오 프레임을 나타냅니다. 현재 재생 위치가 변경되어 마지막으로 렌더링된 프레임이 비디오의 현재 재생 위치에 해당하지 않게
되면, 새 프레임이 렌더링되어야 합니다.
비디오 프레임은 선택된 비디오 트랙에서 얻어야 하며, 이벤트 루프가 마지막으로 1단계에 도달했을 때 이뤄져야 합니다.
비디오 스트림에서 특정 재생 위치에 해당하는 프레임은 비디오 스트림의 형식에 의해 정의됩니다.
video
요소는 또한 텍스트 트랙 큐의 텍스트 트랙 큐 활성 플래그가 설정되어 있고, 텍스트 트랙이 표시 중 모드에 있을 경우 이들을 나타냅니다. 그리고 미디어 리소스에서 나오는 오디오를 현재 재생 위치에서 동기화된 상태로 나타냅니다.
비디오 리소스와 연관된 오디오는, 재생되는 경우, 요소의 실효 미디어 볼륨에서 현재 재생 위치에서 동기화되어 재생되어야 합니다. 사용자 에이전트는 오디오 트랙에서 활성화된 트랙을 재생해야 하며, 이벤트 루프가 마지막으로 1단계에 도달했을 때 이러한 트랙이 활성화되어야 합니다.
위 내용 외에도, 사용자 에이전트는 비디오에 텍스트 또는 아이콘을 오버레이하거나 요소의 재생 영역의 다른 부분에 적절한 방식으로 텍스트 또는 아이콘을 오버레이하여 사용자가 "버퍼링 중", "비디오가 로드되지 않음", "오류" 또는 더 자세한 정보를 받을 수 있도록 할 수 있습니다.
비디오를 렌더링할 수 없는 사용자 에이전트는 대신 요소가 외부 비디오 재생 유틸리티 또는 비디오 데이터 자체로 연결되는 링크를 나타내도록 할 수 있습니다.
video
요소의 미디어 리소스가 비디오 채널을 가지고 있는 경우, 요소는 페인트 소스를 제공하며, 그 너비는 미디어 리소스의 자연 너비, 높이는 미디어 리소스의 자연 높이이며, 현재 재생 위치에 해당하는 비디오 프레임의 모습이며, 해당 비디오 프레임이 사용할 수 없는
경우(예: 비디오가 탐색 중이거나 버퍼링 중인 경우) 이전 모습이거나(있는 경우) 그렇지 않으면(예: 비디오가 첫 번째 프레임을 아직 로드 중인 경우) 검정색입니다.
video.videoWidth
모든 현재 엔진에서 지원됩니다.
video.videoHeight
모든 현재 엔진에서 지원됩니다.
이 속성들은 비디오의 본래 크기를 반환하거나, 크기를 알 수 없는 경우 0을 반환합니다.
비디오의 본래 너비와 본래 높이는 미디어 리소스의 크기, 종횡비, 클린 아퍼처, 해상도 등을 고려한 후의 CSS 픽셀로 표현된 크기입니다. 자막 포맷이 비디오 데이터의 크기에 어떻게 종횡비를 적용하여 "올바른" 크기를 얻을지 정의하지 않는 경우, 사용자 에이전트는 한 차원을 늘리고 다른 차원을 변경하지 않음으로써 이 비율을 적용해야 합니다.
videoWidth
IDL 속성은 비디오의 본래
너비를 CSS 픽셀 단위로 반환해야 합니다. videoHeight
IDL 속성은 비디오의 본래 높이를 CSS 픽셀
단위로 반환해야 합니다. 요소의 readyState
속성이
HAVE_NOTHING
인 경우 이 속성은 0을 반환해야 합니다.
비디오의 본래
너비나 본래
높이가 변경될 때마다
(예를 들어, 선택된 비디오
트랙이 변경된 경우 포함), 요소의 readyState
속성이 HAVE_NOTHING
이 아닌 경우,
사용자 에이전트는 미디어 요소 작업을 큐에
추가해야 하며, 이벤트를 resize
라는 이름으로 미디어 요소에서 발생시켜야 합니다.
다른 스타일 규칙이 없는 경우, 비디오 콘텐츠는 요소의 재생 영역 내에 최대 크기로 렌더링되어야 하며, 비디오 콘텐츠의 종횡비가 유지되어야 합니다. 따라서 재생 영역의 종횡비가 비디오의 종횡비와 일치하지 않는 경우, 비디오는 레터박스 또는 필러박스로 표시됩니다. 요소의 재생 영역의 비디오를 포함하지 않는 부분은 아무것도 나타내지 않습니다.
CSS를 구현한 사용자 에이전트에서는 위 요구 사항을 렌더링 섹션에서 제안된 스타일 규칙을 사용하여 구현할 수 있습니다.
video
요소의 재생 영역의 본래 너비는 포스터
프레임이 사용 가능하고 현재 요소가 포스터 프레임을 나타내는 경우, 포스터 프레임의
본래 너비입니다. 그렇지 않으면 비디오 리소스의 본래 너비입니다. 그렇지 않으면 본래 너비는 존재하지 않습니다.
video
요소의 재생 영역의 본래 높이는 포스터
프레임이 사용 가능하고 현재 요소가 포스터 프레임을 나타내는 경우, 포스터 프레임의
본래 높이입니다. 그렇지 않으면 비디오 리소스의 본래 높이입니다. 그렇지 않으면 본래 높이는 존재하지 않습니다.
기본 객체 크기는 너비가 300 CSS 픽셀 이며, 높이가 150 CSS 픽셀입니다. [CSSIMAGES]
사용자 에이전트는 자막, 오디오 설명 트랙 및 비디오 스트림과 관련된 기타 추가 데이터를 표시하거나 비활성화할 수 있는 제어 기능을 제공해야 합니다. 이러한 기능은 다시 말하지만 페이지의 정상적인 렌더링을 방해하지 않아야 합니다.
사용자 에이전트는 사용자가 전체 화면 또는 독립적인 크기 조정 가능 창과 같은 사용자에게 더 적합한 방식으로 비디오 콘텐츠를 볼 수 있도록 허용할 수 있습니다. 사용자 에이전트는 비디오를 재생할 때
기본적으로 이러한 보기 모드를 트리거할 수 있지만, playsinline
속성이 지정된 경우에는 그렇게 하지 않아야 합니다. 다른 사용자 인터페이스 기능과 마찬가지로 이를 활성화하는 제어는 사용자 에이전트가 사용자
인터페이스를 노출하지 않는 한 페이지의 정상적인 렌더링을 방해하지 않아야 합니다. 그러나 이러한 독립적인 보기 모드에서는 controls
속성이 없어도 전체 사용자 인터페이스를 표시할 수 있습니다.
사용자 에이전트는 비디오 재생이 진행되는 동안 화면 보호기를 비활성화하는 등 사용자의 경험을 방해할 수 있는 시스템 기능에 비디오 재생이 영향을 미치도록 할 수 있습니다.
poster
IDL 속성은 poster
콘텐츠 속성을 반영해야 합니다.
playsInline
IDL 속성은 반영해야 합니다.
playsinline
콘텐츠
속성을 반영해야 합니다.
이 예제는 비디오 재생이 실패했을 때 이유를 알려주는 메시지를 표시하는 방법을 보여줍니다:
< script >
function failed( e) {
// 비디오 재생이 실패했습니다 - 그 이유를 설명하는 메시지를 표시하세요
switch ( e. target. error. code) {
case e. target. error. MEDIA_ERR_ABORTED:
alert( '비디오 재생이 중단되었습니다.' );
break ;
case e. target. error. MEDIA_ERR_NETWORK:
alert( '네트워크 오류로 인해 비디오 다운로드가 중간에 실패했습니다.' );
break ;
case e. target. error. MEDIA_ERR_DECODE:
alert( '비디오 재생이 중단되었습니다. 손상 문제나 브라우저에서 지원하지 않는 기능을 사용하는 비디오 때문일 수 있습니다.' );
break ;
case e. target. error. MEDIA_ERR_SRC_NOT_SUPPORTED:
alert( '서버나 네트워크 오류로 인해 비디오를 로드할 수 없었거나, 형식이 지원되지 않습니다.' );
break ;
default :
alert( '알 수 없는 오류가 발생했습니다.' );
break ;
}
}
</ script >
< p >< video src = "tgif.vid" autoplay controls onerror = "failed(event)" ></ video ></ p >
< p >< a href = "tgif.vid" > 비디오 파일 다운로드</ a > .</ p >
audio
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
controls
속성이 있는
경우: 인터랙티브 콘텐츠.
controls
속성이 있는
경우:
구체적인 콘텐츠.
src
속성이 있는 경우:
0개 이상의 track
요소, 그런 다음
투명, 단 미디어 요소의 하위 요소는 포함하지 않음.
src
속성이 없는 경우: 0개 이상의
source
요소, 그런 다음
0개 이상의 track
요소, 그런 다음
투명, 단 미디어 요소의 하위 요소는 포함하지 않음.
src
— 리소스의 주소
crossorigin
—
요소가 CORS 요청을 처리하는 방법
preload
— 미디어 리소스가
얼마나 많은 버퍼링이 필요할지 힌트
autoplay
— 미디어 리소스를 페이지가 로드될 때 자동으로 시작할 수 있는지 힌트
loop
— 미디어 리소스를 반복할지 여부
muted
— 기본적으로 미디어 리소스를 음소거할지 여부
controls
— 사용자 에이전트
제어 표시
[Exposed =Window ,
LegacyFactoryFunction =Audio (optional DOMString src )]
interface HTMLAudioElement : HTMLMediaElement {
[HTMLConstructor ] constructor ();
};
audio
요소는 소리 또는 오디오 스트림을 나타냅니다.
컨텐츠는 audio
요소 안에 제공될 수 있습니다.
사용자 에이전트는 이 콘텐츠를 사용자에게 표시해서는 안 됩니다. 이 콘텐츠는 audio
를 지원하지 않는 구형 웹 브라우저를 위해
제공되며, 이러한 구형 브라우저 사용자에게 오디오 콘텐츠에 접근하는 방법을 알려주는 텍스트가 표시될 수 있습니다.
특히 이 콘텐츠는 접근성 문제를 해결하기 위한 것이 아닙니다. 청각 장애인이나 기타 신체적, 인지적 장애를 가진 사람들이 오디오 콘텐츠에 접근할 수 있도록 다양한 기능이 제공됩니다.
자막이나 수화 비디오가 있는 경우, 사용자는 시각적 대안을 활성화할 수 있도록 video
요소를 사용하여 오디오를 재생할 수 있습니다.
내비게이션을 돕기 위해 track
요소와 WebVTT 파일을 사용하여 챕터 제목을 제공할 수 있습니다. 그리고 자연스럽게, 단순히 audio
요소 근처의 산문에서 이들에게 링크를
제공하여 텍스트 대체물이나 다른 대안을 제공할 수 있습니다. [WEBVTT]
audio
요소는 미디어 요소로서 그 미디어 데이터는 본질적으로 오디오 데이터입니다.
src
, crossorigin
, preload
, autoplay
, loop
, muted
, 그리고 controls
속성은 모든 미디어 요소에
공통된 속성입니다.
audio = new Audio([ url ])
모든 현재 엔진에서 지원됩니다.
유산 팩토리 함수는 HTMLAudioElement
객체를
생성하기 위해 제공됩니다
(DOM의 createElement()
와
같은 팩토리 메서드 외에도):
Audio(src)
. 호출될 때, 유산 팩토리 함수는 다음 단계를 수행해야 합니다:
document를 현재 글로벌
객체의 관련
Document
로 설정합니다.
audio를 요소를 생성한 결과로 설정하고,
document, audio
, 그리고 HTML
네임스페이스를 사용합니다.
src가 제공된 경우, "src
"와 src를 사용하여
audio의 속성 값을 설정합니다. (이것은 객체의 리소스 선택
알고리즘을 반환 전에 호출하도록 사용자 에이전트에게 지시합니다.)
audio를 반환합니다.
track
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
kind
— 텍스트 트랙의 유형
src
— 리소스의 주소
srclang
— 텍스트 트랙의 언어
label
— 사용자에게 표시되는 레이블
default
— 다른 텍스트 트랙이 더 적합하지 않을 경우 트랙을 활성화합니다.
[Exposed =Window ]
interface HTMLTrackElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString kind ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString srclang ;
[CEReactions ] attribute DOMString label ;
[CEReactions ] attribute boolean default ;
const unsigned short NONE = 0;
const unsigned short LOADING = 1;
const unsigned short LOADED = 2;
const unsigned short ERROR = 3;
readonly attribute unsigned short readyState ;
readonly attribute TextTrack track ;
};
track
요소는 저자가 미디어 요소에 대한 명시적인 외부 타임드 텍스트 트랙을 지정할 수 있도록 합니다. 이 요소 자체는 아무것도 나타내지 않습니다.
kind
속성은 열거형 속성이며, 다음 키워드 및 상태를 가집니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
subtitles
| 자막 | 대화의 전사 또는 번역으로, 소리는 들리지만 이해되지 않을 때 적합합니다 (예: 사용자가 미디어 리소스의 오디오 트랙의 언어를 이해하지 못하는 경우). 비디오에 오버레이됩니다. |
captions
| 캡션 | 대화, 음향 효과, 관련 음악 신호 및 기타 관련 오디오 정보를 전사하거나 번역한 것으로, 소리가 없거나 명확하게 들리지 않을 때 적합합니다 (예: 소리가 음소거되었거나 주변 소음에 의해 묻혔거나 사용자가 청각 장애인인 경우). 비디오에 오버레이되며, 청각 장애인에게 적합한 것으로 레이블링됩니다. |
descriptions
| 설명 | 미디어 리소스의 비디오 구성 요소를 설명하는 텍스트로, 시각적 구성 요소가 가려지거나 사용할 수 없거나 화면이 없는 상태에서 응용 프로그램과 상호 작용하는 경우 (예: 운전 중이거나 사용자가 시각 장애인인 경우) 오디오로 합성됩니다. |
chapters
| 챕터 메타데이터 | 스크립트에서 사용하기 위한 트랙입니다. 사용자 에이전트에 의해 표시되지 않습니다. |
metadata
| 메타데이터 |
속성의 누락된 값 기본값은 자막 상태이며, 잘못된 값 기본값은 메타데이터 상태입니다.
src
속성은 텍스트 트랙 데이터의 URL을 제공합니다.
값은 유효한 비어 있지 않은 URL이어야 합니다 (주위에
공백이 있을 수 있음). 이 속성은 필수입니다.
요소는 초기 상태로 빈 문자열을 가지는 관련 트랙 URL (문자열)을 가집니다.
요소의 src
속성이 설정되면 다음 단계를 실행합니다:
trackURL을 실패로 설정합니다.
value를 요소의 src
속성 값으로 설정합니다.
value가 빈 문자열이 아니면, trackURL을 URL을 인코딩, 파싱 및 직렬화한 결과로 설정합니다 (요소의 노드 문서를 기준으로 함).
요소의 트랙 URL을 trackURL로 설정합니다 (실패하지 않은 경우); 그렇지 않으면 빈 문자열로 설정합니다.
요소의 트랙 URL이 WebVTT 리소스를 식별하고, 요소의 kind
속성이 챕터 메타데이터 또는 메타데이터 상태에 있지 않은 경우,
WebVTT 파일은 큐
텍스트를 사용하는 WebVTT 파일이어야 합니다. [WEBVTT]
srclang
속성은 텍스트 트랙
데이터의 언어를 제공합니다. 값은 유효한 BCP 47 언어 태그여야 합니다. 이 속성은 요소의 kind
속성이 자막 상태에 있는 경우 필수입니다. [BCP47]
요소에 srclang
속성이 있으며 그 값이 빈
문자열이 아닌 경우, 요소의 트랙 언어는 속성의 값입니다. 그렇지 않으면 요소에 트랙 언어가 없습니다.
label
속성은 트랙에 대한 사용자 읽기
가능한 제목을 제공합니다. 이 제목은 사용자 에이전트가 자막, 캡션 및 오디오 설명 트랙을 사용자 인터페이스에 나열할 때 사용됩니다.
label
속성이 존재하는 경우, 그 값은 빈 문자열이
아니어야 합니다. 또한 동일한 미디어 요소의 두 track
자식 요소가 동일한 상태의 kind
속성을 가지고, srclang
속성이 둘 다 없거나 동일한 언어를
나타내며, label
속성이 둘 다 없거나 동일한
값을 가질 수 없습니다.
요소에 label
속성이 있으며 그 값이 빈 문자열이
아닌 경우, 요소의 트랙 레이블은 속성의 값입니다. 그렇지 않으면 요소의 트랙 레이블은 빈 문자열입니다.
default
속성은 부울 속성으로, 지정된 경우, 사용자의 기본 설정이 다른 트랙이 더
적합하다고 표시하지 않는 한 트랙이 활성화됨을 나타냅니다.
각 미디어 요소는 track
요소 자식이 kind
속성이 자막 또는 캡션 상태에 있고 default
속성이 지정된 요소가 하나 이상
없어야 합니다.
각 미디어 요소는 track
요소 자식이 kind
속성이 설명 상태에 있고 default
속성이 지정된 요소가 하나 이상
없어야 합니다.
각 미디어 요소는 track
요소 자식이 kind
속성이 챕터 메타데이터 상태에 있고 default
속성이 지정된 요소가 하나 이상
없어야 합니다.
track
요소의 kind
속성이 메타데이터 상태에 있고 default
속성이 지정된 경우, 그 수에는
제한이 없습니다.
track.readyState
텍스트 트랙 준비 상태를 나타내는 숫자 값을 반환합니다:
track.NONE (0)
텍스트 트랙이 로드되지 않은 상태입니다.
track.LOADING (1)
텍스트 트랙이 로딩 중인 상태입니다.
track.LOADED (2)
텍스트 트랙이 로드된 상태입니다.
track.ERROR (3)
텍스트 트랙 로드 실패 상태입니다.
track.track
TextTrack
객체를 반환합니다.
readyState
속성은 track
요소의 텍스트 트랙의 텍스트 트랙 준비 상태에 해당하는 숫자 값을 반환해야 합니다.
NONE
(숫자 값 0)
LOADING
(숫자 값
1)
LOADED
(숫자 값
2)
ERROR
(숫자 값 3)
track
IDL 속성은
가져올 때 track
요소의 텍스트 트랙에 해당하는 TextTrack
객체를 반환해야 합니다.
모든 현재 엔진에서 지원됩니다.
src
, srclang
, label
, default
IDL
속성은 동일한 이름의 해당 콘텐츠 속성을 반영해야 합니다. kind
IDL 속성은 알려진 값으로만 제한된 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
이 비디오는 여러 언어로 된 자막을 가지고 있습니다:
< video src = "brave.webm" >
< track kind = subtitles src = brave.en.vtt srclang = en label = "English" >
< track kind = captions src = brave.en.hoh.vtt srclang = en label = "English for the Hard of Hearing" >
< track kind = subtitles src = brave.fr.vtt srclang = fr lang = fr label = "Français" >
< track kind = subtitles src = brave.de.vtt srclang = de lang = de label = "Deutsch" >
</ video >
(마지막 두 개의 lang
속성은 자막의 언어가 아니라 label
속성의 언어를 설명합니다. 자막의
언어는 srclang
속성에 의해
지정됩니다.)
HTMLMediaElement 객체들(audio
및 video
, 이 사양에서)은 미디어 요소로 알려져 있습니다.
모든 최신 엔진에서 지원됨.
enum CanPlayTypeResult { "" /* 빈 문자열 */, " maybe " , " probably " };
typedef (MediaStream or MediaSource or Blob ) MediaProvider ;
[Exposed =Window ]
interface HTMLMediaElement : HTMLElement {
// 오류 상태
readonly attribute MediaError ? error ;
// 네트워크 상태
[CEReactions ] attribute USVString src ;
attribute MediaProvider ? srcObject ;
readonly attribute USVString currentSrc ;
[CEReactions ] attribute DOMString ? crossOrigin ;
const unsigned short NETWORK_EMPTY = 0;
const unsigned short NETWORK_IDLE = 1;
const unsigned short NETWORK_LOADING = 2;
const unsigned short NETWORK_NO_SOURCE = 3;
readonly attribute unsigned short networkState ;
[CEReactions ] attribute DOMString preload ;
readonly attribute TimeRanges buffered ;
undefined load ();
CanPlayTypeResult canPlayType (DOMString type );
// 준비 상태
const unsigned short HAVE_NOTHING = 0;
const unsigned short HAVE_METADATA = 1;
const unsigned short HAVE_CURRENT_DATA = 2;
const unsigned short HAVE_FUTURE_DATA = 3;
const unsigned short HAVE_ENOUGH_DATA = 4;
readonly attribute unsigned short readyState ;
readonly attribute boolean seeking ;
// 재생 상태
attribute double currentTime ;
undefined fastSeek (double time );
readonly attribute unrestricted double duration ;
object getStartDate ();
readonly attribute boolean paused ;
attribute double defaultPlaybackRate ;
attribute double playbackRate ;
attribute boolean preservesPitch ;
readonly attribute TimeRanges played ;
readonly attribute TimeRanges seekable ;
readonly attribute boolean ended ;
[CEReactions ] attribute boolean autoplay ;
[CEReactions ] attribute boolean loop ;
Promise <undefined > play ();
undefined pause ();
// 컨트롤
[CEReactions ] attribute boolean controls ;
attribute double volume ;
attribute boolean muted ;
[CEReactions ] attribute boolean defaultMuted ;
// 트랙
[SameObject ] readonly attribute AudioTrackList audioTracks ;
[SameObject ] readonly attribute VideoTrackList videoTracks ;
[SameObject ] readonly attribute TextTrackList textTracks ;
TextTrack addTextTrack (TextTrackKind kind , optional DOMString label = "", optional DOMString language = "");
};
미디어 요소 속성인 src
, crossorigin
, preload
, autoplay
, loop
, muted
및 controls
는 모든 미디어 요소에 적용됩니다. 이 섹션에서 정의됩니다.
미디어 요소는 사용자에게 오디오 데이터 또는 비디오 및 오디오 데이터를 제공하는 데 사용됩니다. 이 섹션에서는 오디오나 비디오에 대한 미디어 요소에 동일하게 적용되므로 이를 미디어 데이터라고 합니다.
미디어 리소스라는 용어는 전체 미디어 데이터를 나타내는 데 사용됩니다. 예를 들어, 전체 비디오 파일 또는 전체 오디오 파일을 의미합니다.
미디어 리소스는 연관된
출처(origin)를 가지며, 이는 "none
",
"multiple
", "rewritten
" 또는
출처 중 하나일 수 있습니다.
초기값은 "none
"으로 설정됩니다.
미디어 리소스는 여러 오디오 및 비디오 트랙을 가질 수 있습니다.
미디어 요소의 목적상,
미디어 리소스의 비디오 데이터는
마지막으로 이벤트 루프가 1단계에 도달했을 때
요소의 videoTracks
속성에 의해
선택된 현재 트랙(있는 경우)의 비디오 데이터만 해당하며,
미디어 리소스의 오디오 데이터는 마지막으로
이벤트 루프가 1단계에 도달했을 때
요소의 audioTracks
속성에 의해
현재 활성화된 트랙들(있는 경우)을 혼합한 결과입니다.
audio
요소와
video
요소 모두 오디오 및 비디오에
사용될 수 있습니다. 두 요소의 주요 차이점은
audio
요소는
시각적 콘텐츠(예: 비디오나 자막)에 대한 재생 영역이 없다는 점이고,
video
요소는 재생 영역이 있다는 점입니다.
각 미디어 요소는 고유한 미디어 요소 이벤트 작업 소스를 가집니다.
미디어 요소 element와 일련의 단계 steps에 대해 미디어 요소 작업을 큐에 추가하려면, 요소 작업을 큐에 추가해야 하며, 이는 미디어 요소의 미디어 요소 이벤트 작업 소스에 대해 element와 steps을 사용하여 수행됩니다.
모든 현재 엔진에서 지원됩니다.
media.error
모든 현재 엔진에서 지원됩니다.
요소의 현재 오류 상태를 나타내는 MediaError
객체를 반환합니다.
오류가 없으면 null을 반환합니다.
모든 미디어 요소는 관련된 오류 상태를 가지고 있으며, 이 상태는 마지막으로 리소스 선택 알고리즘이 호출된 이후 요소가
겪은 마지막 오류를 기록합니다. error
속성은 마지막 오류에 대해 생성된 MediaError
객체를 반환해야 하며, 오류가 발생하지 않은 경우 null을 반환해야
합니다.
[Exposed =Window ]
interface MediaError {
const unsigned short MEDIA_ERR_ABORTED = 1;
const unsigned short MEDIA_ERR_NETWORK = 2;
const unsigned short MEDIA_ERR_DECODE = 3;
const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
readonly attribute unsigned short code ;
readonly attribute DOMString message ;
};
media.error.code
모든 현재 엔진에서 지원됩니다.
아래 목록에서 현재 오류의 오류 코드를 반환합니다.
media.error.message
모든 현재 엔진에서 지원됩니다.
발생한 오류 상태에 대한 특정 진단 메시지를 반환합니다. 메시지와 메시지 형식은 사용자 에이전트마다 일반적으로 일관되지 않습니다. 사용 가능한 메시지가 없는 경우 빈 문자열이 반환됩니다.
모든 MediaError
객체에는 문자열 메시지와 아래 값 중 하나인 코드가 있습니다.
MEDIA_ERR_ABORTED
(숫자 값 1)
MEDIA_ERR_NETWORK
(숫자 값 2)
MEDIA_ERR_DECODE
(숫자 값 3)
MEDIA_ERR_SRC_NOT_SUPPORTED
(숫자 값 4)
src
속성 또는 할당된 미디어 공급자 객체에서
나타낸 미디어 리소스가 적절하지 않았습니다.
주어진 오류 코드가 위의 값 중 하나인 MediaError
를 생성하려면, 주어진 오류
코드를 가진 새 MediaError
객체를 반환하고, 메시지를 설정해야 합니다. 이
메시지 문자열에는 오류 조건의 원인에 대해 사용자 에이전트가 제공할 수 있는 세부 정보가 포함되어야 하며, 사용자가 그러한 세부 정보를 제공할 수 없는 경우 빈 문자열로 설정해야 합니다. 이 메시지
문자열은 제공된 오류 코드에서 이미 제공된 정보만 포함해서는 안 됩니다. 예를 들어, 코드를 문자열 형식으로 번역하는 것만으로는 충분하지 않습니다. 오류 코드 외에 추가 정보가 제공되지 않는 경우,
메시지는 빈 문자열로 설정해야 합니다.
code
의 getter 단계는
this의 코드를 반환하는 것입니다.
message
의 getter
단계는 this의 메시지를 반환하는 것입니다.
미디어 요소의 src
콘텐츠 속성은 표시할 미디어 리소스(비디오, 오디오)의 URL을 제공합니다. 이 속성이 존재하는 경우, 유효한 빈 URL이 아닌 값이 공백으로
둘러싸여 있을 수 있는 URL을 포함해야 합니다.
미디어 요소에 itemprop
속성이 지정된 경우, src
속성도
반드시 지정되어야 합니다.
미디어 요소의 crossorigin
콘텐츠 속성은 CORS 설정
속성입니다.
만약 미디어 요소가 src
속성과 함께 생성되면, 사용자
에이전트는 미디어 요소의 리소스 선택
알고리즘을 즉시 호출해야 합니다.
미디어 요소의 src
속성이 설정되거나 변경된 경우,
사용자 에이전트는 미디어 요소의 미디어 요소 로드
알고리즘을 호출해야 합니다. (src
속성을 제거하는 것은, source
요소가
존재하더라도, 이를 수행하지 않습니다.)
모든 현재 엔진에서 지원됩니다.
미디어 요소의 src
IDL 속성은 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
모든 현재 엔진에서 지원됩니다.
crossOrigin
IDL 속성은 반영되어야 하며,
crossorigin
콘텐츠 속성을 반영하되, 알려진 값으로만 제한됩니다.
미디어 공급자 객체는 미디어 리소스를 나타낼 수 있는 객체로, URL과는 별개입니다. MediaStream
객체, MediaSource
객체, Blob
객체는 모두 미디어 공급자 객체입니다.
각 미디어 요소는 할당된 미디어 공급자 객체를 가질 수 있으며, 이는 미디어 공급자 객체입니다. 미디어 요소가 생성될 때, 할당된 미디어 공급자 객체가 없습니다.
media.srcObject [ = source ]
단일 엔진에서만 지원됩니다.
미디어 요소에 미디어 공급자 객체를 할당할 수 있습니다.
media.currentSrc
모든 현재 엔진에서 지원됩니다.
currentSrc
IDL 속성은 초기에는 빈 문자열로 설정되어야 합니다. 이 값은 아래에 정의된
리소스 선택
알고리즘에 의해 변경됩니다.
srcObject
IDL 속성은, 얻을 때, 요소의 할당된 미디어 제공자 객체를 반환해야 하며,
없으면 null을 반환해야 합니다. 설정할 때는, 요소의 할당된 미디어 제공자 객체를 새로운 값으로 설정한 다음,
요소의 미디어
요소 로드 알고리즘을 호출해야 합니다.
미디어 리소스를 지정하는 방법은 세
가지가 있습니다: srcObject
IDL
속성, src
콘텐츠 속성, 그리고
source
요소입니다. IDL 속성이 우선되며, 그 다음은 콘텐츠 속성, 마지막으로 요소가 우선됩니다.
미디어 리소스는 타입으로 설명될 수 있으며, 특히 MIME
타입으로 설명될 수 있습니다. 일부 경우에는 codecs
매개변수가 포함될 수 있습니다. (codecs
매개변수가 허용되는지 여부는 MIME
타입에 따라 다릅니다.) [RFC6381]
타입은 보통 다소 불완전한 설명입니다. 예를 들어 "video/mpeg
"는 컨테이너 타입 외에는 아무 정보도 제공하지 않으며,
"video/mp4; codecs="avc1.42E01E, mp4a.40.2"
"와 같은 타입도 실제 비트레이트(최대 비트레이트만 표시됨)와 같은 정보를 포함하지 않습니다. 따라서
사용자 에이전트는 주어진 타입이 재생할 수 있을지 (확신 정도에 따라 다름) 또는 재생할 수 없을지 여부만을 알 수 있습니다.
사용자 에이전트가 렌더링할 수 없음을 아는 타입이란, 컨테이너 타입을 인식하지 못하거나 나열된 코덱을 지원하지 않기 때문에 사용자 에이전트가 확실히 지원하지 않는 리소스를 설명하는 타입을 의미합니다.
MIME
타입 "application/octet-stream
"에
파라미터가 없는 경우, 이 타입은 결코 사용자 에이전트가 렌더링할 수 없음을 아는 타입이 아닙니다. 사용자
에이전트는 이 타입을 명시적인 Content-Type 메타데이터가 없는 것과 동등하게 취급해야 합니다. 이
타입이 잠재적인 미디어 리소스를 나타낼 때 사용됩니다.
여기서 특별히 취급되는 것은 파라미터가 없는 "MIME 타입" "application/octet-stream
"뿐입니다.
파라미터가 함께 나타나는 경우, 이는 다른 MIME 타입처럼 취급됩니다. 이는 알려지지 않은 MIME 타입 파라미터는 무시해야 한다는 규칙에서
벗어나는 것입니다.
media.canPlayType(type)
모든 최신 엔진에서 지원됩니다.
사용자 에이전트가 주어진 타입의 미디어 리소스를 재생할 수 있다고 확신하는 정도에 따라 빈 문자열(부정적 응답), "maybe" 또는 "probably"를 반환합니다.
canPlayType(type)
메서드는 type이 사용자 에이전트가 렌더링할 수 없음을 아는 타입이거나 "application/octet-stream
"
타입인 경우 빈 문자열을 반환해야 합니다. 사용자 에이전트가 이 타입이 미디어 리소스를 나타내며
오디오
또는 video
요소와 함께 사용될 수 있다고 확신하는 경우 "probably
"를 반환해야 하며, 그렇지 않은 경우 "maybe
"를 반환해야 합니다. 구현자는 타입이 지원되는지 여부를 확신할 수 없는 경우 "maybe
"를 반환하는 것이
권장됩니다. 일반적으로, 사용자 에이전트는 codecs
매개변수를 허용하는 타입의 경우, 해당 매개변수가 존재하지 않으면 "probably
"를
반환해서는 안 됩니다.
이 스크립트는 사용자 에이전트가 (가상의) 새로운 포맷을 지원하는지 테스트하여 video
요소를 사용할지 여부를 동적으로 결정합니다:
< section id = "video" >
< p >< a href = "playing-cats.nfv" > Download video</ a ></ p >
</ section >
< script >
const videoSection = document. getElementById( 'video' );
const videoElement = document. createElement( 'video' ); const support = videoElement. canPlayType( 'video/x-new-fictional-format;codecs="kittens,bunnies"' ); if ( support === "probably" ) { videoElement. setAttribute( "src" , "playing-cats.nfv" ); videoSection. replaceChildren( videoElement); }
</ script >
type
속성은 source
요소의 속성으로, 사용자 에이전트가 렌더링할 수 없는
포맷을 사용하는 리소스의 다운로드를 피할 수 있도록 합니다.
media.networkState
모든 최신 엔진에서 지원됨.
요소의 네트워크 활동의 현재 상태를 아래 목록에 있는 코드에서 반환합니다.
미디어 요소들이 네트워크와 상호작용할 때, 현재 네트워크 활동은 networkState
속성으로 나타납니다. 가져올 때, 요소의 현재 네트워크 상태를 반환해야 하며, 다음 값 중
하나여야 합니다:
NETWORK_EMPTY
(숫자 값 0)
NETWORK_IDLE
(숫자 값 1)
NETWORK_LOADING
(숫자 값 2)
NETWORK_NO_SOURCE
(숫자 값 3)
리소스 선택 알고리즘은 아래에 정의되어
있으며, networkState
속성
값이 변경되는 시점과 이 상태에서 변화를 나타내기 위해 어떤 이벤트가 발생하는지를 설명합니다.
media.load()
모든 현재 엔진에서 지원됩니다.
이 요소가 초기화되고 새로운 미디어 리소스 를 선택하고 로드하는 작업을 시작하게 합니다.
모든 미디어 요소는 자동 재생 가능 플래그를 가지고 있으며, 이는 true 상태에서 시작해야 하며, 로드 이벤트 지연 플래그는 false 상태에서 시작해야 합니다. 로드 이벤트 지연 플래그가 true인 동안 문서의 로드 이벤트를 지연시켜야 합니다.
load()
메서드가 미디어 요소에서 호출되면,
사용자 에이전트는 미디어
요소
로드 알고리즘을 실행해야 합니다.
미디어 요소는 연관된 boolean 현재 멈춤 상태를 가지며, 초기값은 false입니다.
미디어 요소 로드 알고리즘은 다음 단계를 포함합니다.
이 요소의 현재 멈춤 상태를 false로 설정합니다.
이 요소에 대해 이미 실행 중인 리소스 선택 알고리즘의 실행을 중단합니다.
pending tasks를 작업의 목록으로 설정합니다. 미디어 요소의 미디어 요소 이벤트 작업 소스에서 작업 대기열 중 하나에 있는 모든 작업을 포함합니다.
pending tasks에 있는 각 작업에 대해 보류 중인 재생 약속을 해결하거나 보류 중인 재생 약속을 거부할 때, 해당 작업이 대기열에 추가된 순서대로 즉시 약속을 해결하거나 거부합니다.
pending tasks에 있는 각 작업을 해당 작업 대기열에서 제거합니다.
기본적으로, 미디어 요소가 새로운 리소스를 로드하기 시작할 때 보류 중인 이벤트와 콜백이 삭제되고, 처리 중인 약속이 즉시 해결 또는 거부됩니다.
미디어 요소의 networkState
가
NETWORK_LOADING
이나
NETWORK_IDLE
로
설정된 경우, 미디어
요소 작업을 대기열에 추가하고, 미디어
요소에서 abort
라는
이름의 이벤트를 발생시킵니다.
미디어 요소의 networkState
가
NETWORK_EMPTY
로
설정되지 않은 경우:
미디어 요소 작업을
대기열에 추가하고 이벤트를
발생시킵니다. emptied
라는
이름의 이벤트를 미디어
요소에서 발생시킵니다.
해당 미디어 요소에 대해 가져오기 프로세스가 진행 중인 경우, 사용자 에이전트는 이를 중지해야 합니다.
미디어
요소의 지정된 미디어
공급자 객체가
MediaSource
인
경우, 이를 분리합니다.
readyState
가
HAVE_NOTHING
으로
설정되지 않은 경우, 해당 상태로 설정합니다.
paused
속성이
false로 설정된 경우:
paused
속성을
true로 설정합니다.
보류 중인 재생
약속을 가져와서 재생 약속을
거부합니다
결과와 함께 "AbortError
" DOMException
과
함께 거부합니다.
seeking
이
true인 경우, 이를 false로 설정합니다.
현재 재생 위치를 0으로 설정합니다.
공식 재생 위치를 0으로 설정합니다.
이 작업이 공식 재생 위치를
변경한 경우, 미디어 요소 작업을
대기열에 추가하고 이벤트를
발생시킵니다. timeupdate
라는
이름의 이벤트를 미디어
요소에서 발생시킵니다.
타임라인 오프셋을 Not-a-Number (NaN)로 설정합니다.
duration
속성을
Not-a-Number (NaN)로 업데이트합니다.
사용자 에이전트는 이 특정 변경에 대해 durationchange
이벤트를
발생시키지 않습니다.
playbackRate
속성을
defaultPlaybackRate
속성의
값으로 설정합니다.
error
속성을
null로 설정하고
자동 재생 가능 플래그를
true로 설정합니다.
미디어 요소의 리소스 선택 알고리즘을 호출합니다.
이 요소에 대해 이전에 재생 중이던 미디어 리소스의 재생이 중지됩니다.
리소스 선택 알고리즘은 미디어 요소에 대해 다음과 같이 작동합니다. 이 알고리즘은 항상 작업의 일부로 호출되지만, 알고리즘의 첫 번째 단계 중 하나는 반환하고 나머지 단계를 병렬로 계속 실행하는 것입니다. 또한 이 알고리즘은 이벤트 루프 메커니즘과 밀접하게 상호 작용합니다. 특히, 이 알고리즘은 동기화 섹션을 포함하며, 이는 이벤트 루프 알고리즘의 일부로 트리거됩니다. 이러한 섹션의 단계는 ⌛로 표시됩니다.
이 요소의 networkState
속성을
NETWORK_NO_SOURCE
값으로
설정합니다.
이 요소의 포스터 표시 플래그를 true로 설정합니다.
미디어 요소의 로드 이벤트 지연 플래그를 true로 설정합니다 (이것은 로드 이벤트를 지연시킵니다).
안정적인 상태를 기다립니다, 이 작업을 호출한 작업을 계속하도록 합니다. 동기화 섹션은 이 알고리즘의 나머지 모든 단계를 포함하며, 알고리즘이 동기화 섹션이 끝났다고 말할 때까지 계속됩니다. (동기화 섹션의 단계는 ⌛로 표시됩니다.)
⌛ 미디어 요소의 파서에 의해 차단됨 플래그가 false인 경우, 보류 중인 텍스트 트랙 목록을 채웁니다.
⌛ 미디어 요소가 지정된 미디어 공급자 객체를 가지고 있는 경우, mode를 object로 설정합니다.
⌛ 그렇지 않고, 미디어
요소가 지정된 미디어 공급자
객체를 가지고 있지 않지만 src
속성을 가지고 있는 경우, mode를 attribute로 설정합니다.
⌛ 그렇지 않고, 미디어
요소가 지정된 미디어 공급자
객체를 가지고 있지 않으며, src
속성도
가지고 있지 않지만 source
요소 자식을 가지고 있는 경우, mode를 children으로 설정하고 candidate를
해당 source
요소 자식 중
첫 번째로 설정합니다. 트리
순서로.
⌛ 그렇지 않은 경우, 미디어
요소에는 지정된 미디어 공급자
객체가 없고, src
속성도
source
요소
자식도 없습니다:
⌛ networkState
를
NETWORK_EMPTY
로
설정합니다.
⌛ 요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
동기화 섹션을 끝내고 반환합니다.
⌛ 미디어
요소의 networkState
를
NETWORK_LOADING
으로
설정합니다.
⌛ 미디어
요소 작업을 대기열에 추가하고 미디어
요소에서
이벤트를
발생시킵니다. loadstart
라는
이름의 이벤트를 미디어
요소에서.
다음 목록에서 적절한 단계를 실행합니다:
⌛ currentSrc
속성을
빈 문자열로 설정합니다.
리소스 가져오기 알고리즘을 지정된 미디어 공급자 객체와 함께 실행합니다. 해당 알고리즘이 이 알고리즘을 중단하지 않고 반환되면, 로드에 실패한 것입니다.
미디어 공급자로 인해 실패: 이 단계에 도달하면 미디어 리소스 로드에 실패한 것으로 간주됩니다. 보류 중인 재생 약속을 가져오고 미디어 요소 작업을 대기열에 추가하고 미디어 요소에서 전용 미디어 소스 실패 단계를 결과와 함께 실행합니다.
이전 단계에서 대기열에 추가된 작업이 실행될 때까지 기다립니다.
반환합니다. 이 알고리즘이 다시 호출되기 전까지 이 요소는 다른 리소스를 로드하려고 하지 않습니다.
⌛ urlRecord를 URL 인코딩-파싱의
결과로 설정합니다. src
속성의 값을 기준으로, 미디어
요소의 노드 문서에 상대적으로 적용됩니다.
⌛ urlRecord가 실패가 아닌 경우, currentSrc
속성을
URL 직렬화를
urlRecord에 적용한 결과로 설정합니다.
urlRecord가 실패가 아닌 경우, 리소스 가져오기 알고리즘을 urlRecord와 함께 실행합니다. 해당 알고리즘이 이 알고리즘을 중단하지 않고 반환되면, 로드에 실패한 것입니다.
속성으로 실패: 이 단계에 도달하면 미디어 리소스 로드에 실패한 것으로 간주되거나 urlRecord가 실패로 간주됩니다. 보류 중인 재생 약속을 가져오고 미디어 요소 작업을 대기열에 추가하고 미디어 요소에서 전용 미디어 소스 실패 단계를 결과와 함께 실행합니다.
이전 단계에서 대기열에 추가된 작업이 실행될 때까지 기다립니다.
반환합니다. 이 알고리즘이 다시 호출되기 전까지 이 요소는 다른 리소스를 로드하려고 하지 않습니다.
⌛ pointer를 미디어 요소의 자식 목록에서 두 인접 노드로 정의된 위치로 설정합니다. 리스트의 시작 (리스트의 첫 번째 자식 전, 있는 경우)과 리스트의 끝 (리스트의 마지막 자식 후, 있는 경우)을 각각의 노드로 간주합니다. 한 노드는 pointer 전의 노드이며, 다른 노드는 pointer 후의 노드입니다. 초기에는 pointer를 candidate 노드와 그 다음 노드 사이의 위치로 설정합니다. 만약 마지막 노드라면 리스트의 끝으로 설정합니다.
노드가 삽입되고 제거되면서, 미디어 요소, pointer는 다음과 같이 업데이트되어야 합니다:
다른 변경 사항은 pointer에 영향을 주지 않습니다.
⌛ 후보 처리: candidate가 src
속성을 가지고 있지 않거나, 해당 src
속성의
값이 빈 문자열인 경우, 동기화 섹션을
끝내고,
아래의 요소로 실패 단계로 건너뜁니다.
⌛ candidate에 media
속성이 있고 해당 속성의 값이 환경과 일치하지 않는
경우, 동기화
섹션을 끝내고,
아래의 요소로 실패 단계로 건너뜁니다.
⌛ urlRecord를 URL 인코딩-파싱의
결과로 설정합니다. candidate의 src
속성의 값을 기준으로, candidate의 노드 문서에 상대적으로 적용됩니다.
⌛ urlRecord가 실패인 경우, 동기화 섹션을 끝내고, 아래의 요소로 실패 단계로 건너뜁니다.
⌛ candidate에 type
속성이 있고 해당 값이 MIME
타입(해당 파라미터를 정의하는 타입의 경우 codecs
파라미터에 의해
설명된 코덱을 포함하여)으로
파싱되었을 때, 사용자
에이전트가 렌더링할 수 없음을 알고 있는 타입을 나타내면, 동기화 섹션을
끝내고,
아래의 요소로 실패 단계로 건너뜁니다.
⌛ currentSrc
속성을
URL 직렬화를
urlRecord에 적용한 결과로 설정합니다.
리소스 가져오기 알고리즘을 urlRecord와 함께 실행합니다. 해당 알고리즘이 이 알고리즘을 중단하지 않고 반환되면, 로드에 실패한 것입니다.
요소로 실패: 미디어
요소 작업을 대기열에 추가하고
미디어
요소에서 이벤트를
발생시킵니다. error
라는
이름의 이벤트를 candidate에서 발생시킵니다.
안정적인 상태를 기다립니다. 동기화 섹션은 이 알고리즘의 나머지 모든 단계를 포함하며, 알고리즘이 동기화 섹션이 끝났다고 말할 때까지 계속됩니다. (동기화 섹션의 단계는 ⌛로 표시됩니다.)
⌛ 다음 후보 찾기: candidate를 null로 설정합니다.
⌛ 탐색 루프: pointer 후의 노드가 리스트의 끝인 경우, 아래의 대기 중 단계로 건너뜁니다.
⌛ pointer 후의 노드가 source
요소인
경우,
candidate를 해당 요소로 설정합니다.
⌛ pointer를 앞으로 이동시켜 pointer 전의 노드가 이제 pointer 후의 노드가 되도록 하고, pointer 후의 노드가 이전에 pointer 후의 노드였던 노드 후의 노드가 되도록 합니다.
⌛ candidate가 null인 경우, 탐색 루프 단계로 돌아갑니다. 그렇지 않은 경우, 후보 처리 단계로 돌아갑니다.
⌛ 대기 중: 요소의 networkState
속성을
NETWORK_NO_SOURCE
값으로
설정합니다.
⌛ 요소의 포스터 표시 플래그를 true로 설정합니다.
⌛ 미디어 요소 작업을 대기열에 추가하고 미디어 요소에서 요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
pointer 후의 노드가 리스트의 끝이 아닌 노드가 될 때까지 기다립니다. (이 단계는 영원히 대기할 수 있습니다.)
안정적인 상태를 기다립니다. 동기화 섹션은 이 알고리즘의 나머지 모든 단계를 포함하며, 알고리즘이 동기화 섹션이 끝났다고 말할 때까지 계속됩니다. (동기화 섹션의 단계는 ⌛로 표시됩니다.)
⌛ 요소의 로드 이벤트 지연 플래그를 다시 true로 설정합니다 (이것은 아직 발생하지 않은 경우 로드 이벤트를 지연시킵니다).
⌛ networkState
를
NETWORK_LOADING
으로
다시 설정합니다.
⌛ 위의 다음 후보 찾기 단계로 다시 점프합니다.
promises 목록과 함께 전용 미디어 소스 실패 단계를 실행하려면 다음 단계를 따르십시오:
요소의 error
속성을
미디어
오류 MediaError
를 생성한
결과로 설정하고 MEDIA_ERR_SRC_NOT_SUPPORTED
로
설정합니다.
요소의 networkState
속성을
NETWORK_NO_SOURCE
값으로
설정합니다.
요소의 포스터 표시 플래그를 true로 설정합니다.
보류 중인 재생 약속을
거부하고 promises와
"NotSupportedError
" DOMException
과
함께 거부합니다.
요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
미디어 응답을 검증하기 위해 다음 요소를 고려하세요: 응답
response, 미디어 리소스
resource, 그리고
"전체 리소스
" 또는
(number, number 또는 "끝까지
") 튜플 byteRange:
response가 네트워크 오류인 경우, false를 반환합니다.
byteRange가 "전체 리소스
"인 경우, true를 반환합니다.
internalResponse를 response의 안전하지 않은 응답으로 설정합니다.
internalResponse의 상태가 200인 경우, true를 반환합니다.
internalResponse의 상태가 206이 아닌 경우, false를 반환합니다.
internalResponse에서 컨텐츠 범위 값 추출의 결과가 실패하면 false를 반환합니다.
추출된 값들은 사용되지 않으며, 특히 byteRange와 비교되지 않습니다. 이 단계는 `Content-Range
`
헤더의 구문 검증 역할을 하지만, 응답의 `Content-Range
`
값이 요청의 `Range
`
값과 일치하지 않는 경우, 이는 실패로 간주되지 않습니다.
internalResponse의 URL이
null인 경우 origin을 "재작성됨
"으로 설정합니다; 그렇지 않으면
internalResponse의 URL의
원본으로 설정합니다.
previousOrigin을 resource의 원본으로 설정합니다.
다음 중 하나가 참인 경우:
previousOrigin이 "없음
"인 경우;
origin과 previousOrigin이 "재작성됨
"인 경우;
origin과 previousOrigin이 원본이며, origin이 previousOrigin과 동일 원본인 경우;
이 경우 resource의 원본을 origin으로 설정합니다.
그렇지 않으면, response가 CORS 크로스-원본인 경우, false를 반환합니다.
그렇지 않으면, resource의 원본을 "다중
"으로 설정합니다.
이렇게 하면 범위 헤더가 있는 불투명 응답이 다른 원본의 다른 응답과 패치되지 않아 정보가 유출되는 것을 방지합니다.
true를 반환합니다.
미디어 자원 로드 알고리즘은 미디어 요소 및 주어진 URL 기록 또는 미디어 제공자 객체에 대해 다음과 같이 정의됩니다:
이 알고리즘이 미디어 제공자 객체 또는 URL 기록의 blob URL 항목이 blob URL 항목이며, 객체가 미디어 제공자 객체인 경우, mode를 로컬로 설정합니다. 그렇지 않으면 mode를 원격으로 설정합니다.
mode가 원격인 경우, 현재 미디어 자원을 이 알고리즘에 전달된 URL 기록으로 설정합니다. 그렇지 않으면 current media resource을 미디어 제공자 객체에서 제공한 자원으로 설정합니다. 어느 쪽이든 current media resource이 이제 요소의 미디어 자원이 됩니다.
모든 미디어 자원에 특정한 텍스트 트랙을 미디어 요소의 보류 중인 텍스트 트랙 목록에서 제거합니다.
적절한 단계를 다음 목록에서 실행합니다:
선택적으로 다음 하위 단계를 실행합니다. 사용자 에이전트가 자원을 명시적으로 요청할 때까지 자원 가져오기를 시도하지 않으려는 경우(예: preload
속성의 none
키워드를 구현하는 방법으로서) 예상되는 동작입니다.
networkState
를
NETWORK_IDLE
로
설정합니다.
미디어 요소 작업을 큐에
추가하고 미디어 요소에서 suspend
라는
이름의 이벤트를 발생시킵니다.
미디어 요소 작업을 큐에 추가하고 미디어 요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
작업이 실행될 때까지 기다립니다.
구현 정의된 이벤트(예: 사용자가 미디어 요소의 재생을 시작하도록 요청하는 경우)를 기다립니다.
요소의 로드 이벤트 지연 플래그를 다시 true로 설정합니다. (이것은 아직 로드 이벤트가 발생하지 않은 경우 로드 이벤트 지연을 다시 시작합니다.)
networkState
를
NETWORK_LOADING
으로
설정합니다.
만약 미디어 요소가
오디오
요소인 경우 destination을 "audio
"로 설정하고, 그렇지 않으면 "video
"로
설정합니다.
잠재적 CORS 요청을 생성한
결과를 현재 미디어 자원의 URL
기록, destination, 그리고 미디어 요소의 현재 상태와 함께 crossorigin
콘텐츠 속성으로 설정합니다.
request의 시작자 유형을 destination으로 설정합니다.
byteRange을 "전체 자원
" 또는 미디어 데이터의 누락된 데이터를 충족하기 위해 필요한 바이트 범위로
설정합니다. 이 값은 구현 정의이며, 코덱, 네트워크 상태 또는 기타 휴리스틱에 따라 달라질
수 있습니다. 사용자 에이전트는 자원을 전체로 가져오기로 결정할 수 있으며, 이 경우 byteRange은
"전체 자원
"이 될 것이며, 바이트 오프셋에서 끝까지 가져오기로 결정할 수 있으며, 이 경우 byteRange는
(숫자, "끝까지
")가 될 것이며, 두 바이트 오프셋 사이의 범위를 가져오기로 결정할 수 있으며, 이 경우
byteRange는 두 오프셋을 나타내는 (숫자, 숫자) 튜플이 될 것입니다.
만약 byteRange이 "전체 자원
"이 아닌 경우:
요청을 가져오고, processResponse를 설정하여 다음 단계로 설정합니다:
미디어 요소 작업을 큐에 추가하고, 미디어 요소의 첫 번째 적절한 단계를 실행합니다. (이 작업은 네트워킹 작업 소스 대신 미디어 요소 이벤트 작업 소스에 상대적으로 발생하는 작업이 아래에 설명된 작업과 비교해 적절한 단계에서 발생하도록 하기 위해 사용됩니다.)
만약 네트워크 액세스 없이 모든 데이터를 사용할 수 있게 되었고, 미디어 데이터를 디코딩하는 작업이 오류 없이 완료되었다면, 사용자 에이전트는 아래의 최종 단계로 이동해야 합니다.
만약 미디어 응답을 검증한 결과가 current media resource과 byteRange에 대해 거짓이라면, 이러한 단계를 중지합니다.
그렇지 않으면, 점진적으로 응답의 본문을 읽어 updateMedia, processEndOfMedia, 빈 알고리즘, global을 주어진 대로 설정합니다.
미디어 데이터를 이
방식으로 얻은 응답의 안전하지 않은 응답의 내용으로
업데이트합니다. 응답은 CORS-동일 출처일 수도 있고 CORS-교차 출처일 수도 있으며,
이것은 API에서 참조되는 자막이 노출되는지 여부에 영향을 미칩니다. 비디오
요소의 경우, 비디오가 그려진 canvas
가
오염될 수 있습니다.
미디어 요소 정지 시간 초과는 구현 정의된 기간으로, 약 3초 정도이어야 합니다. 미디어 요소가 미디어 데이터를 적극적으로 얻으려고 시도 중일 때 미디어 요소 작업을 큐에 추가하여 다음을 수행합니다:
사용자 에이전트는 사용자가 미디어 데이터 다운로드를 선택적으로 차단하거나 속도를 늦출 수 있도록 허용할 수 있습니다. 미디어 요소의 다운로드가 완전히 차단된 경우, 사용자 에이전트는 연결이 끊어진 것처럼 작동하는 대신 정지된 것처럼 작동해야 합니다. 다운로드 속도는 같은 대역폭을 공유하는 다른 연결과 균형을 맞추기 위해 자동으로 제한될 수도 있습니다.
사용자 에이전트는 언제든지 콘텐츠 다운로드를 중지할 수 있습니다. 예를 들어, 사용자 에이전트가 자원의 일부를 버퍼링한 후
사용자가 재생을 시작할 때까지 더 이상 콘텐츠를 다운로드하지 않거나, 사용자가 상호작용 자원에서 입력을 기다리는 동안 또는 사용자가 페이지에서 벗어날 때
다운로드를 중지할 수 있습니다. 미디어 요소의 다운로드가 일시 중단된 경우, 사용자
에이전트는 미디어 요소 작업을 큐에 추가하여
미디어 요소의
networkState
를
NETWORK_IDLE
로
설정하고 이벤트를 발생시켜 suspend
라는
이름의 이벤트를 요소에 발생시켜야 합니다. 자원의 다운로드가 다시 시작되면, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여
미디어 요소의
networkState
를
NETWORK_LOADING
로
설정해야 합니다. 이러한 작업들이 큐에 추가되는 동안, 로드는 일시 중단됩니다(따라서 위에서 설명한 것처럼 progress
이벤트가 발생하지 않습니다).
preload
속성은 저자가 적절하다고 생각하는 버퍼링 양에 대한 힌트를 제공합니다. autoplay
속성이 없는 경우에도 마찬가지입니다.
사용자 에이전트가 다운로드를 완전히 중지하기로 결정한 경우, 예를 들어 사용자가 재생을 시작할 때까지 추가 콘텐츠를 다운로드하지 않기로 결정한 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 미디어 요소의 로드 이벤트 지연 플래그를 false로 설정해야 합니다. 이것은 로드 이벤트 지연을 중지합니다.
위의 단계는 요청을 발행하기 위한 알고리즘을 제공하지만, 사용자 에이전트는 특히 오류 조건에 직면했을 때 정확히 그 방법 외에도 다른 수단을 사용할 수 있습니다. 예를 들어, 사용자 에이전트는 서버에 다시 연결하거나 스트리밍 프로토콜로 전환할 수 있습니다. 사용자 에이전트는 자원을 오류로 간주하고, 위의 단계의 오류 지점으로 진행하는 경우에만 자원을 가져오려는 시도를 포기해야 합니다.
미디어 자원의 형식을 결정하기 위해, 사용자 에이전트는 오디오 및 비디오를 특정하는 sniffing 규칙을 사용해야 합니다.
로드가 일시 중단되지 않은 경우(아래 참조), 350ms(±200ms)마다 또는 수신된 각 바이트마다, 둘 중 더 빈번하지 않은 경우 미디어 요소 작업을 큐에 추가하고 미디어 요소를 다음과 같이 설정합니다:
사용자 에이전트가 미디어 자원의 일부를 얻기 위해 여전히 네트워크 액세스가 필요할 수 있지만, 사용자 에이전트는 이 단계에 머물러야 합니다.
예를 들어, 사용자 에이전트가 비디오의 첫 번째 절반을 폐기한 경우, 재생이 종료된 후에도 사용자 에이전트는 이 단계에 머물러야
합니다. 왜냐하면 사용자가 처음으로 돌아가려고 할 가능성이 항상 있기 때문입니다. 사실, 이 상황에서, 재생이 종료된 후, 사용자 에이전트는 이전에 설명된
것처럼 suspend
이벤트를 발생시키게 될 것입니다.
current media resource이 미디어 데이터를 포함하고 있습니다. 이는 CORS-동일 출처입니다.
만약 current media resource이 원시 데이터 스트림(예: 파일
객체)인 경우, 사용자 에이전트는 오디오 및 비디오를 특정하는 sniffing 규칙을 사용하여 미디어 자원의 형식을 결정해야
합니다. 그렇지 않으면, 데이터 스트림이 사전 디코딩된 경우, 형식은 관련 명세에서 제공된 형식입니다.
언제든지 current media resource에 대한 새로운 데이터가 사용 가능해지면, 미디어 요소 작업을 큐에 추가하여 미디어 요소에서 미디어 데이터 처리 단계 목록의 첫 번째 적절한 단계를 실행합니다.
current media resource이 영구적으로 소진된 경우(예: Blob
의
모든 바이트가 처리된 경우), 디코딩 오류가 없었다면 사용자 에이전트는 아래의 최종 단계로 이동해야 합니다. current media
resource이 MediaStream
인
경우, 이 단계는 절대로 발생하지 않을 수 있습니다.
미디어 데이터 처리 단계 목록은 다음과 같습니다:
사용자 에이전트가 자원이 사용 가능한지 여부를 확인하기 전의 DNS 오류, HTTP 4xx 및 5xx 오류(및 기타 프로토콜의 동등한 오류)와 같은 치명적인 네트워크 오류뿐만 아니라 파일이 지원되지 않는 컨테이너 형식을 사용하거나 모든 데이터에 대해 지원되지 않는 코덱을 사용하는 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다:
사용자 에이전트는 가져오기 프로세스를 취소해야 합니다.
이 하위 알고리즘을 중단하고 자원 선택 알고리즘으로 돌아갑니다.
AudioTrack
객체를 생성하여 오디오 트랙을 나타냅니다.
미디어 요소의
audioTracks
속성을 AudioTrackList
객체로 업데이트하여 새 AudioTrack
객체를 초기화합니다.
enable을 알 수 없음으로 설정합니다.
만약 미디어 자원 또는 URL이 특정 오디오 트랙을 활성화해야 함을 나타내거나, 사용자 에이전트가 특정 오디오 트랙을 선택하여 사용자의 경험을 개선할 수 있는 정보를 가지고 있다면, 이 오디오 트랙이 활성화해야 하는 트랙 중 하나인 경우 enable을 true로 설정하고, 그렇지 않으면 enable을 false로 설정합니다.
이것은 미디어 조각 구문에 의해 트리거될 수 있지만, 예를 들어 5.1 서라운드 사운드 오디오 트랙을 스테레오 오디오 트랙보다 선택하는 사용자 에이전트에 의해 트리거될 수도 있습니다.
enable이 여전히 알 수 없음인 경우, 미디어 요소에 아직 활성화된 오디오 트랙이 없는 경우 enable을 true로 설정하고, 그렇지 않으면 enable을 false로 설정합니다.
만약 enable이 true인 경우 이 오디오 트랙을 활성화하고, 그렇지 않으면 이 오디오 트랙을 활성화하지 않습니다.
이벤트를 발생시켜 addtrack
이라는
이름의 이벤트를 AudioTrackList
객체에서 발생시키고, TrackEvent
를
사용하여 트랙
속성을 새 AudioTrack
객체로 초기화합니다.
VideoTrack
객체를 생성하여 비디오 트랙을 나타냅니다.
미디어 요소의
videoTracks
속성을 VideoTrackList
객체로 업데이트하여 새 VideoTrack
객체를 초기화합니다.
enable을 알 수 없음으로 설정합니다.
만약 미디어 자원 또는 URL이 특정 비디오 트랙을 활성화해야 함을 나타내거나, 사용자 에이전트가 특정 비디오 트랙을 선택하여 사용자의 경험을 개선할 수 있는 정보를 가지고 있다면, 이 비디오 트랙이 첫 번째로 활성화해야 하는 트랙인 경우 enable을 true로 설정하고, 그렇지 않으면 enable을 false로 설정합니다.
이것은 다시 미디어 조각 구문에 의해 트리거될 수 있습니다.
enable이 여전히 알 수 없음인 경우, 미디어 요소에 아직 선택된 비디오 트랙이 없는 경우 enable을 true로 설정하고, 그렇지 않으면 enable을 false로 설정합니다.
만약 enable이 true인 경우 이 트랙을 선택하고 이전에 선택된 비디오 트랙을 선택 해제합니다. 그렇지 않으면 이 비디오
트랙을 선택하지 않습니다. 다른 트랙이 선택 해제된 경우 change
이벤트가
발생합니다.
이벤트를 발생시켜 addtrack
라는
이름의 이벤트를 VideoTrackList
객체에서 발생시키고, TrackEvent
를
사용하여 트랙
속성을 새 VideoTrack
객체로 초기화합니다.
이는 자원이 사용 가능하다는 것을 나타냅니다. 사용자 에이전트는 다음 하위 단계를 따라야 합니다:
미디어 타임라인을 설정하여 현재 재생 위치와 가장 빠른 위치를 결정합니다. 이것은 미디어 데이터를 기반으로 합니다.
타임라인 오프셋을 미디어 자원의 0초에 해당하는 날짜 및 시간으로 업데이트합니다. 명시된 날짜와 시간이 없는 경우 타임라인 오프셋은 NaN(Not-a-Number)로 설정되어야 합니다.
미디어 타임라인에서
알려진 마지막 프레임의 시간으로 duration
속성을 업데이트합니다. 만약 알려지지 않은 경우(예: 무한한 스트림), duration
속성을 양의 무한대로 업데이트합니다.
사용자 에이전트는 durationChange 이벤트를 발생시키기 위해 미디어 요소 작업을 큐에 추가하여
미디어 요소에서
이벤트를 발생시켜 durationchange
라는
이름의 이벤트를 요소에 발생시킵니다.
비디오
요소의 경우, videoWidth
와
videoHeight
속성을 설정하고 미디어 요소 작업을 큐에 추가하여
이벤트를 발생시켜 resize
라는
이름의 이벤트를 미디어
요소에서 발생시킵니다.
그 이후 크기가 변경될 경우 추가 resize
이벤트가 발생할 것입니다.
readyState
속성을 HAVE_METADATA
로
설정합니다.
loadedmetadata
DOM 이벤트가 readyState
속성이 새 값으로 설정될 때 발생할 것입니다.
jumped를 false로 설정합니다.
미디어 요소의 기본 재생 시작 위치가 0보다 큰 경우 해당 시간으로 탐색하고 jumped를 true로 설정합니다.
미디어 요소의 기본 재생 시작 위치를 0으로 설정합니다.
initial playback position를 0으로 설정합니다.
만약 미디어 자원 또는 URL이 특정 시작 시간을 나타내는 경우, initial playback position를 해당 시간으로 설정하고, 만약 jumped가 여전히 false인 경우 해당 시간으로 탐색합니다.
예를 들어, 미디어 조각 구문을 지원하는 미디어 형식의 경우, 조각을 사용하여 시작 위치를 나타낼 수 있습니다.
활성화된 오디오 트랙이 없는 경우 오디오 트랙을 활성화합니다. 이것은 change
이벤트가 발생할 것입니다.
선택된 비디오 트랙이 없는 경우 비디오 트랙을 선택합니다. 이것은 change
이벤트가 발생할 것입니다.
readyState
속성이 HAVE_CURRENT_DATA
에
도달한 후 loadeddata 이벤트가 발생한 후, 요소의 로드 이벤트 지연 플래그를 false로
설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
사용자 에이전트가 각각의 미디어 자원의 메타데이터를 가져오는 동안 네트워크 사용을 줄이려고
시도하는 경우, 이전에 설명한 규칙에 따라 버퍼링을 중지하게 되며, 여기에는 networkState
속성이 NETWORK_IDLE
값으로 전환되고 suspend
이벤트가 발생하는 것이 포함됩니다.
사용자 에이전트는 미디어 자원의 지속 시간을 결정하고 재생 전에 이 단계를 거쳐야 합니다.
이벤트를 발생시켜 미디어 요소에서 progress
라는
이름의 이벤트를 발생시킵니다.
networkState
를
NETWORK_IDLE
로
설정하고 이벤트를 발생시켜 suspend
라는
이름의 이벤트를 미디어 요소에서
발생시킵니다.
만약 사용자 에이전트가 미디어 데이터를 버리고
다시 얻어야 하는 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 미디어 요소의 networkState
를
NETWORK_LOADING
로
설정해야 합니다.
사용자 에이전트가 미디어 자원을 로드 상태로 유지할 수 있다면, 알고리즘은 아래의 최종 단계로 계속되어 알고리즘이 중지됩니다.
사용자 에이전트가 미디어 요소의
readyState
속성이 더 이상 HAVE_NOTHING
이
아닌 경우에만 자원이 사용 가능한지 여부를 결정한 후 발생한 치명적인 네트워크 오류는 사용자 에이전트가 다음 단계를 실행하게 해야 합니다:
사용자 에이전트는 가져오기 프로세스를 취소해야 합니다.
error
속성을 MediaError 생성의 결과로
설정합니다. 이때 MEDIA_ERR_NETWORK
을
사용합니다.
요소의 networkState
속성을 NETWORK_IDLE
값으로 설정합니다.
요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
전체 자원 선택 알고리즘을 중단합니다.
사용자 에이전트가 미디어 요소의
readyState
속성이 더 이상 HAVE_NOTHING
이
아닌 경우에만 자원이 사용 가능한지 여부를 결정한 후 발생한 미디어 데이터 디코딩의 치명적인 오류는 사용자 에이전트가 다음 단계를 실행하게 해야 합니다:
사용자 에이전트는 가져오기 프로세스를 취소해야 합니다.
error
속성을 MediaError 생성의 결과로
설정합니다. 이때 MEDIA_ERR_DECODE
을
사용합니다.
요소의 networkState
속성을 NETWORK_IDLE
값으로 설정합니다.
요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
전체 자원 선택 알고리즘을 중단합니다.
사용자가 "중지" 버튼을 눌러 가져오기 프로세스를 중단한 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다. 이 단계는 load()
메서드 자체가 실행 중인 동안 이러한 단계를 따르지 않습니다. 이러한 종류의 중단은 위 단계에서 처리됩니다.
사용자 에이전트는 가져오기 프로세스를 취소해야 합니다.
error
속성을 MediaError 생성의 결과로
설정합니다. 이때 MEDIA_ERR_ABORTED
을
사용합니다.
미디어 요소의
readyState
속성이 HAVE_NOTHING
값과 동일한 경우, 요소의 networkState
속성을 NETWORK_EMPTY
값으로 설정하고, 요소의 포스터 표시 플래그를 true로 설정하고 이벤트를 발생시켜 emptied
라는
이름의 이벤트를 요소에서 발생시킵니다.
그렇지 않으면, 요소의 networkState
속성을 NETWORK_IDLE
값으로 설정합니다.
요소의 로드 이벤트 지연 플래그를 false로 설정합니다. 이것은 로드 이벤트 지연을 중지합니다.
전체 자원 선택 알고리즘을 중단합니다.
서버가 부분적으로 사용할 수 있지만 최적으로 렌더링할 수 없는 데이터를 반환한 경우, 사용자 에이전트는 처리할 수 있는 부분만 렌더링하고 나머지는 무시해야 합니다.
만약 미디어 데이터가 CORS-동일 출처인 경우, 관련 데이터를 사용하여 미디어 자원 전용 텍스트 트랙을 노출하는 단계를 실행합니다.
교차 출처 비디오에서는 자막이 노출되지 않습니다. 이는 적대적인 사이트가 사용자의 인트라넷에서 비밀 비디오의 자막을 읽는 것과 같은 공격을 허용할 수 있기 때문입니다.
최종 단계: 사용자 에이전트가 이 단계에 도달한 경우(자원이 완전히 로드되고 사용 가능하게 유지되는 경우): 전체 자원 선택 알고리즘을 중단합니다.
미디어 요소가 미디어 요소의 미디어 리소스 특정 트랙을 잊어버리기로
설정될 때, 사용자 에이전트는 미디어 요소의 텍스트 트랙 목록에서 모든 미디어 리소스 특정 텍스트 트랙을 제거해야 하며, 그런 다음 미디어 요소의 audioTracks
속성의 AudioTrackList
객체를
비워야 합니다.
그런 다음 미디어 요소의 videoTracks
속성의 VideoTrackList
객체를
비워야 합니다. 이에 대한 이벤트(특히 removetrack
이벤트)는 발생하지 않으며, 대신 이 알고리즘을 호출하는 다른 알고리즘에 의해 발생하는 error
및 emptied
이벤트를 사용할
수 있습니다.
preload
속성은 다음과
같은 키워드와 상태를 가진 열거형 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
auto
| 자동 | 사용자 에이전트가 서버에 위험을 주지 않으면서 사용자의 필요에 따라 전체 리소스를 낙관적으로 다운로드할 수 있다는 힌트를 제공합니다. |
(빈 문자열) | ||
none
| 없음 | 작성자가 사용자가 미디어 리소스를 필요로 하지 않을 것이라고 예상하거나, 서버가 불필요한 트래픽을 최소화하려고 한다는 힌트를 사용자 에이전트에 제공합니다. 이 상태는 버퍼링이 시작될 때 미디어 리소스를 얼마나 공격적으로 실제 다운로드해야 하는지에 대한 힌트를 제공하지 않습니다(예: 사용자가 "재생"을 누를 때). |
metadata
| 메타데이터 | 작성자가 사용자가 미디어 리소스를 필요로 하지 않을 것이라고 예상하지만, 리소스 메타데이터(크기, 트랙 목록, 지속 시간 등)를 가져오고, 어쩌면 첫 몇 프레임까지 가져오는 것이
합리적이라는 힌트를 사용자 에이전트에 제공합니다. 사용자 에이전트가 메타데이터 이상을 정확하게 가져오지 않는다면, 미디어 요소는 readyState
속성이 HAVE_METADATA 로
설정될 것이며, 일반적으로는 몇 프레임이 추가로 가져와져서 HAVE_CURRENT_DATA 나
HAVE_FUTURE_DATA 로
설정될 가능성이 높습니다. 미디어 리소스가 재생 중일 때, 사용자 에이전트에게 대역폭을 희소하게 고려해야 한다는 힌트를 제공하며, 예를 들어 일관된 재생을 유지하기 위해 가장 느린
속도로 미디어 데이터를 다운로드하도록 제안합니다.
|
이 속성의 값이 없는 경우의 기본값과 잘못된 값의 기본값은 모두 구현 정의이며, 서버 로드를 줄이면서 최적의 사용자 경험을 제공하기 위한 타협으로 메타데이터 상태가 제안됩니다.
이 속성은 미디어 리소스가 버퍼링되거나 재생 중인 경우에도 변경할 수 있습니다. 위 표의 설명은 이를 염두에 두고 해석해야 합니다.
작성자는 속성을 "none
" 또는
"metadata
"에서
"auto
"로
동적으로 변경할 수 있습니다. 예를 들어, 많은 비디오가 있는 페이지에서는 요청하지 않는 한 비디오를 다운로드하지 않도록 설정하지만, 하나가 요청되면 공격적으로 다운로드해야 함을 나타내기 위해 이
방법을 사용할 수 있습니다.
preload
속성은 작성자가
최상의 사용자 경험을 제공한다고 생각하는 것을 사용자 에이전트에게 힌트로 제공하기 위해 설계되었습니다. 이 속성은 예를 들어 명시적인 사용자 설정이나 사용 가능한 연결 상태에 따라 무시될 수 있습니다.
preload
IDL
속성은 동일한 이름의 콘텐츠 속성을 반영해야 하며, 알려진 값으로만
제한됩니다.
autoplay
속성은
preload
속성을 재정의할
수 있습니다(미디어가 재생되면, preload
속성에 의해 제공된
힌트와 관계없이 우선 버퍼링을 해야 하기 때문에). 두 속성을 모두 포함하는 것은 오류가 아닙니다.
media.buffered
모든 최신 엔진에서 지원됩니다.
사용자 에이전트가 버퍼링한 미디어 리소스의 범위를
나타내는 TimeRanges
객체를 반환합니다.
buffered
속성은
사용자 에이전트가 버퍼링한 미디어 리소스의 범위를 나타내는 새
정적 정규화된
TimeRanges
객체를 반환해야 합니다. 사용자 에이전트는 이 속성이 평가될 때 버퍼링된 범위를 정확하게 결정해야 하며, 이는 미디어 스트림에 대해 힘든
검사로만 결정될 수 있는 경우에도 마찬가지입니다.
일반적으로 이는 0점에 고정된 단일 범위가 되지만, 예를 들어, 사용자 에이전트가 탐색에 응답하여 HTTP 범위 요청을 사용하는 경우 여러 범위가 있을 수 있습니다.
사용자 에이전트는 이전에 버퍼링된 데이터를 삭제할 수 있습니다.
따라서, 한 시점에 buffered
속성에 의해 반환된
객체의 범위 내에 포함된 시간 위치가 나중에 동일한 속성에 의해 반환된 객체의 범위에서 제외될 수 있습니다.
매번 새 객체를 반환하는 것은 속성 getter에 좋지 않은 패턴이며, 변경 비용이 높기 때문에 여기서는 그대로 유지됩니다. 새로운 API에 복사해서는 안 됩니다.
media.duration
모든 현재 엔진에서 지원됩니다.
미디어 리소스의 시작이 시간 0인 경우, 미디어 리소스의 길이를 초 단위로 반환합니다.
지속 시간이 사용 가능하지 않으면 NaN을 반환합니다.
무한 스트림의 경우 Infinity를 반환합니다.
media.currentTime [ = value ]
모든 현재 엔진에서 지원됩니다.
공식 재생 위치를 초 단위로 반환합니다.
지정된 시간으로 탐색할 수 있습니다.
미디어 리소스에는 시간이 (초 단위로) 미디어 리소스 내의 위치에 매핑되는 미디어 타임라인이 있습니다. 타임라인의 원점은 정의된 가장 이른 위치입니다. 타임라인의 지속 시간은 정의된 마지막 위치입니다.
미디어 리소스가 명시적인 타임라인을 지정하고 그 원점이 음수가 아닌 경우(즉, 각 프레임에 특정 시간 오프셋을 부여하고 첫 번째 프레임에 0 또는 양수 오프셋을 부여하는 경우) 미디어 타임라인은 그 타임라인이어야 합니다. 미디어 리소스가 타임라인을 지정할 수 있는지 여부는 미디어 리소스의 형식에 따라 다릅니다. 미디어 리소스가 명시적인 시작 시간 및 날짜를 지정하는 경우 해당 시간과 날짜를 미디어 타임라인의 0점으로 간주해야 하며, 타임라인 오프셋은 getStartDate() 메서드를 사용하여 노출됩니다.
미디어 리소스에 불연속 타임라인이 있는 경우, 사용자 에이전트는 리소스 시작 시 사용된 타임라인을 리소스 전체에 걸쳐 확장해야 하므로, 미디어 리소스의 미디어 타임라인이 정의된 가장 이른 위치에서 시작하여 선형으로 증가해야 합니다. 기본 미디어 데이터가 순서가 뒤섞이거나 겹치는 시간 코드를 가지고 있더라도 마찬가지입니다.
예를 들어, 두 개의 클립을 하나의 비디오 파일로 연결했지만 비디오 형식이 두 클립의 원래 시간을 노출하는 경우, 비디오 데이터는 00:15..00:29 및 00:05..00:38로 타임라인을 노출할 수 있습니다. 그러나 사용자 에이전트는 이러한 시간을 노출하지 않고 00:15..00:29 및 00:29..01:02로 시간을 노출하여 단일 비디오로 표시할 것입니다.
드문 경우지만 명시적인 타임라인이 없는 미디어 리소스의 경우, 미디어 타임라인의 0 시간은 미디어 리소스의 첫 번째 프레임에 해당해야 합니다. 더 드문 경우로, 어떤 종류의 명시적인 타이밍(프레임 지속 시간조차도)이 없는 미디어 리소스의 경우, 사용자 에이전트는 구현 정의된 방식으로 각 프레임의 시간을 결정해야 합니다.
명시적인 타임라인이 없지만 명시적인 프레임 지속 시간이 있는 파일 형식의 예로는 애니메이션 GIF 형식이 있습니다. 명시적인 타이밍이 전혀 없는 파일 형식의 예로는 JPEG-push 형식(multipart/x-mixed-replace에 JPEG 프레임이 포함된 형식, 종종 MJPEG 스트림의 형식으로 사용됨)이 있습니다.
타이밍 정보가 없는 리소스의 경우에도 사용자 에이전트가 서버에서 원래 제공한 첫 번째 프레임보다 이른 지점으로 탐색할 수 있는 경우, 0 시간은 미디어 리소스의 가장 이른 탐색 가능 시간에 해당해야 합니다. 그렇지 않으면, 0 시간은 서버에서 받은 첫 번째 프레임(사용자 에이전트가 스트림을 받기 시작한 미디어 리소스의 지점)에 해당해야 합니다.
이 문서를 작성할 당시에는 명시적인 프레임 시간 오프셋이 없지만 여전히 서버에서 제공한 첫 번째 프레임 이전의 프레임으로 탐색을 지원하는 형식은 알려진 바 없습니다.
TV 방송사로부터의 스트림을 고려해 봅시다. 이 스트림은 10월의 맑은 금요일 오후에 스트리밍을 시작하며, 항상 연결된 사용자 에이전트에 동일한 미디어 타임라인에서 미디어 데이터를 보냅니다. 이 스트림의 0 시간은 이 스트림의 시작으로 설정됩니다. 몇 달 후, 이 스트림에 연결된 사용자 에이전트는 처음 수신한 프레임의 시간이 수백만 초로 되어 있음을 알게 될 것입니다. getStartDate() 메서드는 항상 방송이 시작된 날짜를 반환할 것이며, 이를 통해 컨트롤러는 스크러버에서 방송이 시작된 시점으로부터의 시간이 아닌 실제 시간을 표시할 수 있습니다(예: "오후 2시 30분" 대신 "8개월, 4시간, 12분, 23초").
여러 개의 연결된 조각이 포함된 비디오를 전달하는 스트림을 고려해 봅시다. 이 스트림은 사용자 에이전트가 특정 시간을 요청할 수 없고, 미리 정해진 순서로 비디오 데이터를 스트리밍하며, 첫 번째로 제공된 프레임은 항상 시간 0으로 식별됩니다. 이 스트림에 연결된 사용자 에이전트가 2010-03-20 23:15:00 UTC부터 2010-03-21 00:05:00 UTC까지 및 2010-02-12 14:25:00 UTC부터 2010-02-12 14:35:00 UTC까지 타임스탬프를 포함한 조각을 수신하면, 이 타임라인은 0초에서 시작하여 3600초(1시간)로 확장될 것입니다. 스트리밍 서버가 두 번째 클립이 끝날 때 연결을 끊었다고 가정하면, duration 속성은 3600을 반환할 것입니다. getStartDate() 메서드는 2010-03-20 23:15:00 UTC에 해당하는 시간으로 새로운 Date 객체를 반환할 것입니다. 그러나 다른 사용자 에이전트가 5분 후에 연결되었다면, (아마도) 2010-03-20 23:20:00 UTC부터 2010-03-21 00:05:00 UTC까지 및 2010-02-12 14:25:00 UTC부터 2010-02-12 14:35:00 UTC까지의 타임스탬프를 포함한 조각을 수신하고, 이 타임라인은 0초에서 시작하여 3300초(55분)로 확장될 것입니다. 이 경우, getStartDate() 메서드는 2010-03-20 23:20:00 UTC에 해당하는 시간으로 새로운 Date 객체를 반환할 것입니다.
이 두 예에서 seekable 속성은 컨트롤러가 실제로 UI에 표시하고자 하는 범위를 제공합니다. 일반적으로 서버가 임의의 시간으로의 탐색을 지원하지 않는다면, 이는 사용자 에이전트가 스트림에 연결된 순간부터 사용자가 얻은 최신 프레임까지의 시간 범위가 됩니다. 그러나 사용자 에이전트가 이전 정보를 삭제하기 시작하면 실제 범위는 더 짧아질 수 있습니다.
어떤 경우든 사용자 에이전트는 정의된 미디어 타임라인을 사용하여 가장 이른 위치가 0보다 크거나 같도록 보장해야 합니다.
미디어 타임라인에는 관련된 시계가 있습니다. 어떤 시계를 사용할지는 사용자 에이전트에 의해 정의되며, 미디어 리소스에 따라 다를 수 있지만, 사용자 벽 시계에 가깝도록 해야 합니다.
미디어 요소에는 현재 재생 위치가 있습니다. 이는 처음에(즉, 미디어 데이터가 없는 경우) 0초여야 합니다. 현재 재생 위치는 미디어 타임라인상의 시간입니다.
미디어 요소에는 또한 공식 재생 위치가 있습니다. 이는 처음에 0초로 설정되어야 합니다. 공식 재생 위치는 스크립트가 실행되는 동안 안정적으로 유지되는 현재 재생 위치의 근사치입니다.
미디어 요소에는 기본 재생 시작 위치도 있습니다. 이는 처음에 0초로 설정되어야 합니다. 이 시간은 미디어가 로드되기 전에 요소가 탐색될 수 있도록 하는 데 사용됩니다.
각 미디어 요소에는 포스터 표시 플래그가 있습니다. 미디어 요소가 생성될 때 이 플래그는 true로 설정되어야 합니다. 이 플래그는 사용자 에이전트가 비디오 콘텐츠 대신 비디오 요소에 대한 포스터 프레임을 표시해야 할 시점을 제어하는 데 사용됩니다.
currentTime 속성은 가져올 때 기본 재생 시작 위치를 반환해야 하며, 이 값이 0인 경우 요소의 공식 재생 위치를 반환해야 합니다. 반환된 값은 초 단위로 표현되어야 합니다. 설정할 때, 만약 미디어 요소의 readyState가 HAVE_NOTHING이라면, 새 값을 기본 재생 시작 위치로 설정해야 하며, 그렇지 않으면 공식 재생 위치로 설정한 후 새 값으로 탐색해야 합니다. 새 값은 초 단위로 해석되어야 합니다.
스트리밍 리소스인 경우, 사용자 에이전트는 버퍼에서 만료된 리소스의 일부를 가져올 수 없을 수 있습니다. 마찬가지로 일부 미디어 리소스는 0에서 시작하지 않는 미디어 타임라인을 가질 수 있습니다. 가장 이른 위치는 스트림 또는 리소스에서 사용자 에이전트가 다시 얻을 수 있는 가장 이른 위치입니다. 이 또한 미디어 타임라인상의 시간입니다.
가장 이른 위치는 API에서 명시적으로 노출되지 않으며, seekable 속성의 TimeRanges 객체에서 첫 번째 범위의 시작 시간에 해당합니다. 또는 그렇지 않으면 현재 재생 위치에 해당합니다.
가장 이른 위치가 변경될 때, 만약 현재 재생 위치가 가장 이른 위치보다 이전에 있다면, 사용자 에이전트는 가장 이른 위치로 탐색해야 합니다. 그렇지 않으면, 사용자 에이전트가 지난 15~250ms 동안 요소에서 timeupdate 이벤트를 발생시키지 않았고 그러한 이벤트에 대한 이벤트 핸들러가 여전히 실행 중이 아닌 경우, 사용자 에이전트는 주어진 미디어 요소에 대해 timeupdate라는 이름의 이벤트를 발생시키기 위해 미디어 요소 작업을 큐에 넣어야 합니다.
위 요구 사항과 메타데이터를 알게 되었을 때 리소스 페치 알고리즘이 시작되는 요구 사항 때문에, 현재 재생 위치는 가장 이른 위치보다 작을 수 없습니다.
사용자 에이전트가 오디오 또는 비디오 트랙이 종료되었음을 알고 해당 트랙과 관련된 모든 미디어 데이터가 가장 이른 위치 이전의 미디어 타임라인 부분에 해당하는 경우, 사용자 에이전트는 다음 단계를 실행하기 위해 주어진 미디어 요소에 대해 미디어 요소 작업을 큐에 넣을 수 있습니다:
audioTracks
속성의 AudioTrackList
객체
또는 videoTracks
속성의 VideoTrackList
객체에서
적절하게 제거합니다.
removetrack
이고,
미디어 요소의 AudioTrackList
또는
VideoTrackList
객체에서 발생합니다. TrackEvent
를
사용하며, track
속성은 트랙을 나타내는 AudioTrack
또는 VideoTrack
객체로 초기화됩니다.
duration
속성은
미디어 리소스의 끝 시간을 초 단위로 반환해야 하며,
미디어 타임라인에 해당합니다. 만약
미디어 데이터가 없다면, 이 속성은 NaN 값을 반환해야 합니다.
만약 미디어 리소스가 제한되지 않은 경우(예: 스트리밍
라디오나
종료 시간이 발표되지 않은 라이브 이벤트), 이 속성은 양의 무한대 값을 반환해야 합니다.
사용자 에이전트는 미디어 리소스의
지속 시간을, 미디어 데이터의 일부를 재생하기 전에, 그리고
readyState
값을 HAVE_METADATA
이상으로 설정하기 전에 결정해야 합니다. 이를 위해 여러 부분의 리소스를 가져와야 할 수도 있습니다.
미디어 리소스의 길이가
알려진 값으로 변경될 때(예: 알 수 없는 상태에서 알려진 상태로 변경되거나, 이전에 설정된 길이에서 새로운 길이로 변경될 때)
사용자 에이전트는 미디어 요소 작업을 대기열에 추가해야
하며, 미디어 요소에서
이벤트를 발생
시키고, 그 이름은 durationchange
이어야
합니다.
(새로운 미디어 리소스를 로드하는 과정에서 지속 시간이 재설정될 때는 이벤트가 발생하지 않습니다.)
만약 지속 시간이 변경되어 현재 재생 위치가
미디어 리소스의 끝 시간보다 길어진다면,
사용자 에이전트는 또한 끝 시간으로 이동해야 합니다.
예를 들어, "무한" 스트림이 어떤 이유로 종료되면 지속 시간은 양의 무한대에서 스트림의 마지막 프레임 또는 샘플의 시간으로 변경되고,
durationchange
이벤트가 발생합니다.
마찬가지로, 사용자 에이전트가 미디어 리소스의 지속
시간을 처음에
정확히 판단하지 않고 추정하여 이후 새로운 정보에 기반하여 추정을 수정하는 경우, 지속 시간이 변경되며
durationchange
이벤트가 발생합니다.
일부 비디오 파일은 미디어 타임라인의 0 시간에 해당하는 명시적 날짜 및 시간을 포함하고 있으며, 이를 타임라인 오프셋이라고 합니다. 초기에는 타임라인 오프셋은 NaN으로 설정되어야 합니다.
getStartDate()
메서드는
현재 타임라인 오프셋을 나타내는
새 Date
객체를 반환해야 합니다.
loop
속성은
불리언 속성으로,
지정된 경우 미디어 요소가
미디어 리소스의 끝에 도달했을 때
다시 시작 지점으로 이동함을 나타냅니다.
현재 모든 엔진에서 지원됨.
loop
IDL 속성은
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
media.readyState
모든 현재 엔진에서 지원됩니다.
요소의 현재 상태를 현재 재생 위치와 관련하여 표현하는 값을 반환합니다. 아래 목록의 코드에서 해당 값을 참조할 수 있습니다.
미디어 요소는 준비 상태를 가지고 있으며, 이는 현재 재생 위치에서 렌더링할 준비가 어느 정도 되어 있는지를 설명합니다. 가능한 값은 다음과 같으며, 특정 시간에 미디어 요소의 준비 상태는 요소의 상태를 설명하는 최대 값입니다:
HAVE_NOTHING
(숫자 값 0)
미디어 리소스에 대한 정보가 전혀 없습니다. 현재 재생 위치에 대한 데이터도
없습니다. 미디어 요소의 networkState
속성이
NETWORK_EMPTY
로
설정된 경우 항상 HAVE_NOTHING
상태에
있습니다.
HAVE_METADATA
(숫자 값 1)
리소스의 지속 시간이 확인될 만큼 충분한 데이터가 확보되었습니다. 비디오
요소의 경우, 비디오의 크기도 확인됩니다.
그러나 미디어 데이터는 현재 재생 위치에서 사용할 수 없습니다.
HAVE_CURRENT_DATA
(숫자 값 2)
현재 재생 위치에 대한 데이터는 있지만, 해당 데이터를 이용해 재생 방향으로 재생 위치를 성공적으로 진행시킬 수 있을 만큼 충분하지 않거나, 추가적인 데이터를 확보할 수 없는 상황입니다. 예를 들어, 비디오의 경우 현재 프레임의 데이터는 있지만, 다음 프레임의 데이터가 없을 때를 의미합니다. 이 상태에서 재생이 종료된 경우와도 관련이 있습니다.
HAVE_FUTURE_DATA
(숫자 값 3)
현재 재생 위치에 대한 데이터뿐만 아니라, 재생 방향으로 재생 위치를 진행시키기에 충분한 데이터도 확보되어 있습니다. 예를 들어, 비디오의 경우 현재 프레임뿐만 아니라 다음 프레임에 대한 데이터도 있습니다. 그러나 재생이 종료된 경우에는 이 상태에 있을 수 없습니다.
HAVE_ENOUGH_DATA
(숫자 값 4)
HAVE_FUTURE_DATA
상태의 모든 조건이 충족되며, 추가적으로 다음 조건 중 하나가 충족됩니다:
playbackRate
로
진행하더라도 재생이 종료되기 전에 데이터를 추월하지 않을 만큼 충분하다고 판단합니다.
실제로는 HAVE_METADATA
와 HAVE_CURRENT_DATA
간의 차이는 거의 없습니다. 이 차이가 중요한 경우는 비디오
요소를 canvas
에 그릴 때입니다. 여기서는 어떤 것이 그려질지
(HAVE_CURRENT_DATA
이상)와 그려지지 않을지 (HAVE_METADATA
이하)를
구분합니다. 비슷하게, HAVE_CURRENT_DATA
(현재 프레임만)와 HAVE_FUTURE_DATA
(현재 프레임과 다음 프레임)이 극히 미미할 때, 이 차이는 프레임 단위로 탐색하는 인터페이스를 제공할 때만 중요합니다.
networkState
가 NETWORK_EMPTY
가 아닌 미디어 요소의 준비 상태가 변경되면, 사용자 에이전트는 아래에 제시된 단계들을 따라야 합니다.
다음 목록에서 적용 가능한 첫 번째 하위 단계를 적용합니다:
HAVE_NOTHING
이었고,
새로운 준비 상태가 HAVE_METADATA
인
경우미디어 요소 작업을 큐에
추가하여 해당 요소에 이벤트를 발생시키고, loadedmetadata
라는
이름의 이벤트를 요소에서 발생시킵니다.
이 작업이 실행되기 전에, 이벤트 루프 메커니즘의 일부로서 렌더링이 업데이트되어 적절한 경우 비디오 요소의 크기가 조정됩니다.
HAVE_METADATA
였고,
새로운 준비 상태가 HAVE_CURRENT_DATA
또는 그 이상인 경우이것이 미디어 요소에 대해
load()
알고리즘이 마지막으로 호출된
이후 처음 발생한 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 해당 요소에서 이벤트를 발생시키고, loadeddata
라는
이름의 이벤트를 발생시켜야 합니다.
새로운 준비 상태가 HAVE_FUTURE_DATA
또는 HAVE_ENOUGH_DATA
인
경우, 아래의 관련 단계를 추가로 실행해야 합니다.
HAVE_FUTURE_DATA
이상이었고, 새로운 준비 상태가 HAVE_CURRENT_DATA
이하인 경우미디어 요소가 잠재적으로
재생 중이었고, readyState
속성이
HAVE_FUTURE_DATA
보다
낮은 값으로 변경되었으며, 요소가 재생을 종료하지 않았고, 오류로 인해 재생이 중지되지 않았으며, 사용자 상호작용을 위해 일시정지되지 않았거나, 인밴드 콘텐츠로 인해
일시정지되지 않은 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 해당 요소에서 timeupdate
라는
이름의 이벤트를 발생시키고, 미디어 요소 작업을 큐에 추가하여 해당 요소에서 이벤트를 발생시켜 waiting
이라는 이름의
이벤트를 발생시켜야 합니다.
HAVE_CURRENT_DATA
이하였고, 새로운 준비 상태가 HAVE_FUTURE_DATA
인
경우사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 해당 요소에서 canplay
라는 이름의
이벤트를 발생시켜야 합니다.
요소의 paused
속성이 false인
경우, 사용자 에이전트는 해당 요소에 대해 재생 알림을 제공해야 합니다.
HAVE_ENOUGH_DATA
인
경우이전 준비 상태가 HAVE_CURRENT_DATA
이하인 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 해당 요소에서 canplay
라는 이름의
이벤트를 발생시켜야 하며, 요소의 paused
속성이 false인
경우, 해당 요소에 대해 재생 알림을 제공해야 합니다.
사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 해당 요소에서 canplaythrough
라는
이름의 이벤트를 발생시켜야 합니다.
요소가 자동 재생이 가능하지 않은 경우, 사용자 에이전트는 이 하위 단계를 중단해야 합니다.
사용자 에이전트는 다음 하위 단계를 실행할 수 있습니다:
paused
속성을
false로 설정합니다.play
라는 이름의 이벤트를
발생시킵니다.또는 요소가 비디오 요소인 경우, 사용자 에이전트는 요소가 뷰포트와 교차하는지 여부를 관찰하기 시작할 수 있습니다. 요소가 뷰포트와 교차하면, 요소가 여전히
자동 재생 가능한 경우, 위의 하위
단계를 실행합니다. 선택적으로, 요소가 뷰포트와 교차하지 않으면, 자동 재생 플래그가 여전히 true이고, autoplay
속성이 여전히
지정되어 있는 경우, 다음 하위 단계를 실행합니다:
pause
라는 이름의 이벤트를
발생시킵니다.재생 및 일시정지에 대한 하위 단계는 요소가 뷰포트와 교차하는 동안, 자동 재생 플래그가 true인 한 여러 번 실행될 수 있습니다.
사용자 에이전트는 자동 재생을 지원할 필요가 없으며, 사용자가 설정한 기본 설정을 존중하는 것이 좋습니다. 저자들은 autoplay
속성을
사용하여 비디오를 강제로 재생시키기보다는, 사용자가 원하는 경우 동작을 재정의할 수 있도록 할 것을 권장합니다.
미디어 요소의 준비 상태가 이러한 상태들 사이에서 불연속적으로 이동할 수 있습니다. 예를 들어, 미디어 요소의 상태가 HAVE_METADATA
에서 HAVE_ENOUGH_DATA
로
바로 점프하여, HAVE_CURRENT_DATA
및 HAVE_FUTURE_DATA
상태를 거치지 않을 수 있습니다.
readyState
IDL 속성은, 취득 시, 현재의 미디어 요소의 준비 상태를 설명하는 위에서 설명된 값을
반환해야 합니다.
autoplay
속성은
부울 속성입니다. 존재할 경우, 사용자 에이전트는 (여기에 설명된 알고리즘에 설명된
대로) 미디어 리소스를 중단 없이 자동으로 재생을 시작합니다.
저자들은 자동 재생을 트리거하기 위해 스크립트를 사용하는 것보다, autoplay
속성을 사용할 것을 권장합니다. 이렇게
하면 사용자가 원치 않을 때, 예를 들어 화면 읽기 프로그램을 사용할 때 자동 재생을 중지할 수 있습니다. 또한 저자들은 자동 재생 동작을 전혀 사용하지 않고, 사용자 에이전트가 사용자가 명시적으로
재생을 시작할 때까지 기다리도록 고려하는 것이 좋습니다.
모든 최신 엔진에서 지원됩니다.
autoplay
IDL
속성은 같은 이름의 콘텐츠 속성을 반영해야 합니다.
media.paused
모든 최신 엔진에서 지원됩니다.
재생이 일시정지되었으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
media.ended
모든 최신 엔진에서 지원됩니다.
재생이 미디어 리소스의 끝에 도달하면 true를 반환합니다.
media.defaultPlaybackRate [ = value ]
HTMLMediaElement/defaultPlaybackRate
모든 최신 엔진에서 지원됩니다.
기본 재생 속도를 반환하며, 사용자가 미디어 리소스를 빨리 감거나 되감지 않는 경우에 해당합니다.
설정할 수 있으며, 기본 재생 속도를 변경합니다.
기본 속도는 재생에 직접적인 영향을 미치지 않지만, 사용자가 빨리 감기 모드로 전환한 후 다시 일반 재생 모드로 돌아갈 때, 재생 속도가 기본 재생 속도로 돌아가게 됩니다.
media.playbackRate [ = value ]
모든 최신 엔진에서 지원됩니다.
현재 재생 속도를 반환하며, 1.0은 정상 속도를 나타냅니다.
설정할 수 있으며, 재생 속도를 변경합니다.
media.preservesPitch
HTMLMediaElement/preservesPitch
재생 속도가 1.0이 아닐 때 피치 보정 알고리즘이 사용되면 true를 반환합니다. 기본값은 true입니다.
false로 설정하여 미디어 리소스의 오디오 피치가 재생 속도에 따라 변경되도록 할 수 있습니다. 이는 미적 및 성능상의 이유로 유용할 수 있습니다.
media.played
사용자 에이전트가 재생한 미디어 리소스의 범위를
나타내는 TimeRanges
객체를 반환합니다.
media.play()
모든 최신 엔진에서 지원됩니다.
paused
속성을
false로 설정하고, 필요한 경우 미디어 리소스를
로드하여 재생을 시작합니다. 재생이 종료되었으면 처음부터 다시 시작합니다.
media.pause()
모든 최신 엔진에서 지원됩니다.
paused
속성은 미디어 요소가 일시정지되었는지를 나타냅니다. 이 속성은 처음에는
true여야 합니다.
미디어 요소는 다음 상태일 때 차단된 미디어 요소라고 합니다: readyState
속성이
HAVE_NOTHING
상태, HAVE_METADATA
상태, 또는 HAVE_CURRENT_DATA
상태에 있거나, 요소가 사용자
상호작용을 위해 일시정지됨 또는 인밴드 콘텐츠를 위해 일시정지됨 경우.
미디어 요소는 다음 조건이 모두 참인 경우 잠재적으로 재생 중이라고 합니다: paused
속성이 false이고,
요소가 재생을 종료하지 않았고, 재생이 오류로 인해 중지되지 않았으며, 요소가 차단된 미디어 요소가 아닌 경우.
DOM 이벤트 waiting
은 요소의 readyState
속성이
HAVE_FUTURE_DATA
보다
낮은 값으로 변경되어 잠재적으로 재생 중인 요소가
재생을 중지하는 결과로 발생할 수 있습니다.
미디어 요소는 다음 조건이 모두 참인 경우 자동 재생 가능하다고 합니다:
요소의 자동 재생 가능 플래그가 true인 경우
요소의 paused
속성이 true인 경우
요소에 autoplay
속성이 지정된 경우
요소의 노드 문서의 활성화된 샌드박싱 플래그 세트에 샌드박싱된 자동 기능 브라우징 컨텍스트 플래그가 설정되지 않은 경우
미디어 요소는 현재 컨텍스트에서 사용자 에이전트와 시스템이 미디어 재생을 허용하는 경우 재생 가능하다고 합니다.
예를 들어, 사용자 에이전트는 미디어 요소의
Window
객체가 일시적인 활성화를 가지고 있을 때만 재생을 허용할 수 있지만, 음소거된 상태에서 재생을 허용하는 예외를 둘 수
있습니다.
미디어 요소는 다음과 같은 경우 재생이 종료됨 상태라고 합니다:
요소의 readyState
속성이 HAVE_METADATA
이상이며,
다음 중 하나를 충족하는 경우:
또는:
현재 재생 위치가 가장 이른 가능한 위치이며,
재생 방향이 역방향일 경우
ended
속성은, 마지막으로
이벤트 루프가 1단계에 도달했을 때, 미디어 요소가 재생이 종료됨 상태였고 재생 방향이 앞으로였으면 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다.
미디어 요소는 다음과 같은 경우 오류로 인해 중지됨 상태라고 합니다: 요소의 readyState
속성이
HAVE_METADATA
이상이며, 사용자 에이전트가 비치명적인 오류를 만났고 이 오류로 인해 미디어 데이터 처리 중에 콘텐츠를 현재 재생 위치에서 재생할 수 없는 경우.
미디어 요소는 다음과 같은 경우 사용자 상호작용을 위해 일시정지됨 상태라고 합니다: paused
속성이 false이고,
readyState
속성이 HAVE_FUTURE_DATA
또는 HAVE_ENOUGH_DATA
중 하나이며, 사용자 에이전트가 사용자로부터 리소스를 계속하기 위한 선택을 받아야 하는 지점에 도달한 경우.
미디어 요소는 재생이 종료됨 상태와 사용자 상호작용을 위해 일시정지됨 상태를 동시에 가질 수 있습니다.
미디어 요소가 잠재적으로 재생 중 상태였으나 사용자 상호작용을 위해
일시정지됨 상태로 인해 재생이 중지된 경우, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 이벤트를 발생시키고, 요소에서 timeupdate
라는
이름의 이벤트를 발생시켜야 합니다.
미디어 요소는 다음과 같은 경우 인밴드 콘텐츠를 위해 일시정지됨 상태라고 합니다: paused
속성이 false이고,
readyState
속성이 HAVE_FUTURE_DATA
또는 HAVE_ENOUGH_DATA
중 하나이며, 사용자 에이전트가 미디어 리소스의 재생을 일시정지하여
해당 리소스에 시간적으로 고정된 콘텐츠를 재생하거나, 해당 리소스의 세그먼트에 시간적으로 고정된 콘텐츠를 재생하는 경우.
미디어 요소가 인밴드 콘텐츠를 위해 일시정지됨 상태가 될 수 있는 예는, 사용자 에이전트가 외부 WebVTT 파일에서 오디오 설명을 재생하고, 큐의 시작 시간과 종료 시간 사이의 시간이 큐에 생성된 음성보다 짧은 경우입니다.
현재 재생 위치가 재생 방향이 앞으로일 때 미디어 리소스의 끝에 도달하면, 사용자 에이전트는 다음 단계를 따라야 합니다:
위에서 정의한 대로 ended
IDL 속성은 이벤트 루프가 1단계로 돌아오면 true를 반환하기 시작합니다.
미디어 요소 작업을 큐에 추가하고 다음 단계를 실행합니다:
이벤트를
발생시키고 timeupdate
라는
이름의 이벤트를 미디어 요소에서
발생시킵니다.
미디어 요소가 재생이 종료됨 상태이며, 재생 방향이 앞으로이고, paused가 false인 경우:
paused
속성을 true로 설정합니다.
보류 중인 재생 약속을 취소하고, 보류 중인 재생 약속을 "AbortError
" DOMException
으로
거부합니다.
현재 재생 위치가 재생 방향이 역방향일 때 가장 이른 위치에
도달하면, 사용자 에이전트는 단순히 미디어 요소 작업을 큐에 추가하여 이벤트를 발생시키고, timeupdate
라는
이름의 이벤트를 요소에서 발생시켜야 합니다.
여기서 "도달"이라는 단어는 현재 재생 위치가 일반 재생 중에 변경될 필요가 없음을 의미합니다. 예를 들어 탐색을 통해 변경될 수 있습니다.
defaultPlaybackRate
속성은 미디어 리소스가 고유 속도의 배수로 재생될 때 원하는 속도를 나타냅니다. 이 속성은 수정 가능하며,
값을 가져올 때 마지막으로 설정된 값을 반환해야 하고, 아직 설정되지 않은 경우 1.0을 반환해야 합니다. 설정 시 속성은 새 값으로 설정되어야 합니다.
defaultPlaybackRate
속성은 사용자 에이전트가 사용자에게 인터페이스를 노출할 때 사용됩니다.
playbackRate
속성은 미디어 리소스가 고유 속도의 배수로 재생될 때의 실질적인 재생 속도를 나타냅니다. 이 값이 defaultPlaybackRate
와
같지 않다면, 사용자가 빨리 감기 또는 슬로 모션 재생과 같은 기능을 사용 중이라는 의미입니다. 이 속성은 수정 가능하며, 값을 가져올 때 마지막으로 설정된 값을 반환해야 하고, 아직 설정되지 않은
경우 1.0을 반환해야 합니다. 설정 시, 사용자 에이전트는 다음 단계를 따라야 합니다:
주어진 값이 사용자 에이전트에서 지원되지 않으면 "NotSupportedError
" DOMException
을
발생시킵니다.
playbackRate
속성을 새 값으로 설정하고, 요소가 잠재적으로 재생 중이면 재생 속도를 변경합니다.
defaultPlaybackRate
또는 playbackRate
속성이 값이 변경되면(스크립트에 의해 설정되거나 사용자 에이전트에 의해 직접 변경되는 경우, 예를 들어 사용자 제어에 응답하여) 사용자 에이전트는 미디어 요소 작업을 큐에
추가하여 이벤트를 발생시키고, ratechange
라는
이름의 이벤트를 미디어 요소에서 발생시켜야 합니다. 사용자 에이전트는
속성 변경을 부드럽게 처리해야 하며, 이에 따라 재생에 눈에 띄는 간격이나 음소거가 발생하지 않도록 해야 합니다.
preservesPitch
getter 단계는 재생 중 피치 보정 알고리즘이 적용된 경우 true를 반환하도록
합니다. setter 단계는 피치 보정 알고리즘을 켜거나 끄도록 하고, 이에 따라 재생에 눈에 띄는 간격이나 음소거가 발생하지 않도록 해야 합니다. 기본적으로 이러한 피치 보정 알고리즘이 적용되어야
합니다(즉, getter는 초기 상태에서 true를 반환해야 합니다).
played
속성은
새로운 정적 정규화된
TimeRanges
객체를 반환해야 합니다. 이 객체는 속성이 평가될 때, 일반적인 재생 중에 현재 재생 위치가 미디어 리소스의 미디어 타임라인에서 통상적인 단조 증가를 통해 도달한 지점을 나타냅니다(있는 경우).
매번 새로운 객체를 반환하는 것은 속성 getter에 대해 좋지 않은 패턴이며, 변경하는 데 비용이 많이 들기 때문에 여기에서만 유지됩니다. 이 패턴은 새로운 API에 복사해서는 안 됩니다.
각 미디어 요소는 보류 중인 재생 약속 목록을 가지고 있으며, 이 목록은 처음에는 비어 있어야 합니다.
미디어 요소의 보류 중인 재생 약속을 가져오기 위해, 사용자 에이전트는 다음 단계를 수행해야 합니다:
promises라는 빈 약속 목록을 만듭니다.
미디어 요소의 보류 중인 재생 약속 목록을 promises로 복사합니다.
미디어 요소의 보류 중인 재생 약속 목록을 비웁니다.
promises를 반환합니다.
미디어 요소에 대해 promises 목록을 사용하여
보류 중인 재생 약속을 해결하기 위해, 사용자 에이전트는 promises에 있는 각 약속을
undefined
로 해결해야 합니다.
미디어 요소에 대해 promises 목록과 예외 이름 error를 사용하여 보류 중인 재생 약속을 거부하기 위해, 사용자 에이전트는 promises에 있는 각 약속을 error로 거부해야 합니다.
미디어 요소에 대해 재생에 대해 알리기 위해, 사용자 에이전트는 다음 단계를 수행해야 합니다:
보류 중인 재생 약속을 가져오고 promises를 결과로 사용합니다.
해당 요소에 대해 미디어 요소 작업을 큐에 추가하고 다음 단계를 수행합니다:
보류 중인 재생 약속을 해결하여 promises를 사용합니다.
미디어 요소에 대해 play()
메서드가 호출될 때,
사용자 에이전트는 다음 단계를 수행해야 합니다.
미디어 요소가 재생이 허용되지 않은 경우, 다음으로 거부된 약속을 반환합니다: "NotAllowedError
" DOMException
.
미디어 요소의 error
속성이 null이
아니고, 코드가
MEDIA_ERR_SRC_NOT_SUPPORTED
인
경우, 다음으로 거부된 약속을 반환합니다: "NotSupportedError
" DOMException
.
이것은 전용 미디어 소스 실패 단계가 실행되었음을
의미합니다. 미디어 요소 로드 알고리즘이 error
속성을 지우기
전까지 재생이 불가능합니다.
promise라는 새 약속을 만들고, 보류 중인 재생 약속 목록에 promise를 추가합니다.
promise를 반환합니다.
미디어 요소에 대한 내부 재생 단계는 다음과 같습니다:
미디어 요소의 networkState
속성이 NETWORK_EMPTY
값을 가지면, 미디어 요소의 리소스 선택
알고리즘을 호출합니다.
재생이 종료되었고 재생 방향이 앞으로인 경우, 미디어 리소스의 가장 이른 위치로 탐색합니다.
이것은 사용자 에이전트가 미디어
요소를 위해 미디어 요소 작업을 큐에 추가하고 timeupdate
라는
이름의 이벤트를 발생시키는 결과를
가져옵니다.
paused
의
값을 false로 변경합니다.
포스터 표시 플래그가 true이면, 요소의 포스터 표시 플래그를 false로 설정하고 시간은 흐른다 단계를 실행합니다.
미디어 요소 작업을 큐에 추가하여 play
라는
이름의 이벤트를 요소에서 발생시킵니다.
미디어 요소의 readyState
속성이 HAVE_NOTHING
,
HAVE_METADATA
또는 HAVE_CURRENT_DATA
값을 가지면, 미디어 요소 작업을 큐에 추가하고 waiting
이라는
이름의 이벤트를 요소에서 발생시킵니다.
그렇지 않으면, 미디어 요소의 readyState
속성이 HAVE_FUTURE_DATA
또는 HAVE_ENOUGH_DATA
값을 가지면, 해당 요소에 대해 재생에 대해 알리기를 수행합니다.
그렇지 않으면, 미디어 요소의 readyState
속성이 HAVE_FUTURE_DATA
또는 HAVE_ENOUGH_DATA
값을 가지면, 보류 중인 재생 약속을 가져오고 미디어 요소
작업을 큐에 추가하여 보류 중인 재생 약속을 해결합니다.
미디어 요소는 이미 재생 중입니다. 그러나, 큐에 추가된 작업이 실행되기 전에 promise가 거부될 가능성이 있습니다.
미디어 요소의 자동 재생 가능 플래그를 false로 설정합니다.
미디어 요소의 pause()
메서드가 호출되거나
사용자 에이전트가 미디어 요소를 일시정지해야 할 때, 사용자 에이전트는 다음 단계를 수행해야 합니다:
미디어 요소의 networkState
속성이 NETWORK_EMPTY
값을 가지면, 미디어 요소의 리소스
선택 알고리즘을 호출합니다.
미디어 요소에 대해 내부 일시정지 단계를 실행합니다.
미디어 요소의 내부 일시정지 단계는 다음과 같습니다:
미디어 요소의 자동 재생 가능 플래그를 false로 설정합니다.
미디어 요소의 paused
속성이
false이면, 다음 단계를 실행합니다:
paused
값을 true로 변경합니다.
보류 중인 재생 약속을 가져옵니다 그리고 그 결과를 promises로 저장합니다.
미디어 요소 작업을 큐에 추가하고, 다음 단계를 실행합니다:
이벤트를 발생시키고, timeupdate
라는
이름의 이벤트를 요소에서 발생시킵니다.
보류 중인 재생 약속을
promises와 함께 거부합니다, 그리고 "AbortError
" DOMException
을
사용합니다.
요소의 playbackRate
가
양수 또는 0이면, 재생 방향은 앞으로입니다. 그렇지 않으면, 재생 방향은 뒤로입니다.
미디어 요소가 잠재적으로 재생 중이고 해당 Document
가 완전히 활성화된 Document
일 때, 요소의 현재 재생 위치는 요소의
playbackRate
단위로 미디어 타임라인의 시간당 단위 시간당 단조 증가해야 합니다. (이 명세서는 항상 이를 '증가'로 지칭하지만, 요소의 playbackRate
가
음수인 경우 실제로는 '감소'가 될 수 있습니다.)
요소의 playbackRate
는
0.0일 수 있으며, 이 경우 재생 위치가 이동하지 않지만, 재생이 일시정지되지 않습니다 (paused
상태가 되지 않으며
pause
이벤트도 발생하지
않습니다).
이 명세서는 사용자 에이전트가 적절한 재생 속도를 어떻게 달성하는지 정의하지 않습니다. 프로토콜 및 사용 가능한 미디어에 따라, 사용자 에이전트가 서버와 협상하여 적절한 속도로 미디어 데이터를 제공받아, 클라이언트가 실제로 프레임을 드롭하거나 보간할 필요가 없도록 할 가능성도 있습니다.
사용자 에이전트가 안정된 상태를 제공할 때마다, 공식 재생 위치는 현재 재생 위치로 설정되어야 합니다.
재생 방향이 뒤로일 때, 해당하는 오디오는
음소거되어야 합니다. 요소의 playbackRate
가
너무 낮거나 너무 높아 사용자 에이전트가 오디오를 제대로 재생할 수 없는 경우에도 해당 오디오는 음소거되어야 합니다. 요소의 playbackRate
가
1.0이 아니고 preservesPitch
가
true인 경우, 사용자 에이전트는 원래의 음정을 유지하도록 피치 조정을 적용해야 합니다. 그렇지 않으면, 사용자 에이전트는 피치 조정 없이 오디오를 빠르게 또는 느리게 재생해야 합니다.
미디어 요소가 잠재적으로 재생 중일 때, 재생된 오디오 데이터는 요소의 현재 재생 위치와 동기화되어야 하며, 효과적인 미디어 볼륨으로 재생되어야 합니다. 사용자 에이전트는 이벤트 루프가 마지막으로 1단계에 도달했을 때 활성화된 오디오 트랙에서 오디오를 재생해야 합니다.
미디어 요소가 잠재적으로 재생 중이 아니면, 해당 요소의 오디오는 재생되지 않아야 합니다.
미디어 요소가 잠재적으로 재생 중이지만, 문서에 포함되지 않은 경우, 비디오는 재생되지 않지만, 오디오 구성 요소는 재생되어야 합니다. 모든 참조가 제거되었더라도 미디어 요소는 재생을 중단해서는 안 됩니다. 미디어 요소가 더 이상 오디오를 재생할 수 없는 상태에 도달했을 때만 해당 요소가 가비지 수집될 수 있습니다.
명시적 참조가 없는 요소가 오디오를 재생하는 경우도 가능합니다. 예를 들어, 일시정지되지 않았지만 콘텐츠 버퍼링을 기다리며 중단된 상태이거나, 여전히 버퍼링 중이지만 suspend
이벤트 리스너가
재생을 시작하는 경우가 있습니다. 오디오 트랙이 없는 미디어 리소스를 가진 미디어 요소도 이벤트 리스너를 통해 미디어 리소스를 변경하면 나중에 다시 오디오를 재생할 수 있습니다.
각 미디어 요소는 새로 도입된 큐 목록을 가지며, 이는 처음에는 비어 있어야 합니다. 텍스트 트랙 큐가 큐 목록에 추가될 때마다, 텍스트 트랙이 텍스트 트랙 목록에 있는 미디어 요소에 대해, 그 큐는 미디어 요소의 새로 도입된 큐 목록에 추가되어야 합니다. 또한 텍스트 트랙이 텍스트 트랙 목록에 추가될 때마다, 그 텍스트 트랙의 모든 큐들은 큐 목록에 있는 모든 큐가 미디어 요소의 새로 도입된 큐 목록에 추가되어야 합니다. 새 큐가 추가된 경우, 사용자가 미디어 요소의 포스터 표시 플래그가 설정되지 않은 상태에서 새로 도입된 큐 목록에 새로운 큐가 추가되었을 때, 사용자 에이전트는 시간은 흐른다 단계를 실행해야 합니다.
텍스트 트랙 큐가 큐 목록에서 제거되거나 텍스트 트랙이 텍스트 트랙 목록에서 제거될 때마다, 만약 미디어 요소의 포스터 표시 플래그가 설정되지 않은 경우, 사용자 에이전트는 시간은 흐른다 단계를 실행해야 합니다.
현재 재생 위치가 미디어 요소의 (예: 재생 또는 탐색으로 인한) 변경될 때, 사용자 에이전트는 시간이 흐른다 단계를 실행해야 합니다. 캡션을 비디오의 장면 전환과 동기화하는 등, 큐 이벤트 실행의 타이밍 정확도에 의존하는 사용 사례를 지원하기 위해 사용자 에이전트는 큐 이벤트를 미디어 타임라인의 위치와 최대한 가깝게, 이상적으로는 20밀리초 이내에 실행해야 합니다. 현재 재생 위치가 단계가 실행되는 동안 변경되면, 사용자 에이전트는 단계가 완료될 때까지 기다렸다가 즉시 단계를 다시 실행해야 합니다. 따라서 이러한 단계는 가능한 한 자주 실행됩니다.
한 번의 반복이 오래 걸리면, 사용자가
서두르는 과정에서 짧은 지속 시간의
큐가
건너뛰어질 수 있어, 이러한 큐는
activeCues
목록에 나타나지 않을 수 있습니다.
시간이 흐른다 단계는 다음과 같습니다:
current cues를 큐 목록으로 설정합니다. 이 목록은 또는 표시 중인 텍스트 트랙의 큐들을 초기화하여 구성됩니다. 단, 비활성화된 큐는 포함되지 않습니다. current cues에 포함될 큐는 현재 재생 위치가 시작 시간보다 작거나 같고, 종료 시간보다 큰 큐여야 합니다.
other cues를 큐 목록으로 설정합니다. 이 목록은 또는 표시 중인 텍스트 트랙의 큐들을 초기화하여 구성됩니다. 단, current cues에 포함되지 않은 큐여야 합니다.
last time을 이 알고리즘이 마지막으로 실행되었을 때의 현재 재생 위치로 설정합니다. 이 알고리즘이 처음 실행되는 것이 아니라면 last time을 설정합니다.
현재 재생 위치가 마지막으로 이 알고리즘이 실행된 이후로 정상적인 재생 동안의 통상적인 단조 증가를 통해서만 변경된 경우, missed cues를 other cues 목록에서 시작 시간이 last time보다 크거나 같고 종료 시간이 현재 재생 위치보다 작거나 같은 큐 목록으로 설정합니다. 그렇지 않으면 missed cues를 빈 목록으로 설정합니다.
missed cues 목록에 있는 큐 중 미디어 요소의 새로 도입된 큐 목록에 포함된 모든 큐를 제거한 후, 요소의 새로 도입된 큐 목록을 비웁니다.
정상적인 재생 동안
현재 재생
위치의
통상적인 단조 증가를 통해 시간이 도달되었고,
사용자 에이전트가 지난 15~250ms 동안 해당 요소에서
timeupdate
이벤트를 실행하지 않았으며
그러한 이벤트에 대한 이벤트 핸들러를 아직 실행 중이지 않은 경우,
사용자 에이전트는 해당
미디어 요소에서
timeupdate
이벤트를
큐잉해야
합니다.
(다른 경우, 예를 들어 명시적인 탐색(seek)에서는 관련 이벤트가
현재 재생
위치 변경의
전체 과정의 일부로 실행됩니다.)
따라서 이 이벤트는 약 66Hz보다 빠르게 또는 4Hz보다 느리게 실행되지 않습니다 (이벤트 핸들러가 실행되는 데 250ms 이상 걸리지 않는다고 가정할 때). 사용자 에이전트는 시스템 부하 및 이벤트가 매번 처리되는 평균 비용을 기반으로 이벤트의 빈도를 조정하여, 사용자 에이전트가 비디오를 디코딩하면서 UI 업데이트를 편안하게 처리할 수 있을 때만 빈도가 더 자주 발생하지 않도록 권장됩니다.
모든 큐가 current cues에 있는 경우, 텍스트 트랙 큐 활성 플래그가 설정되고, other cues에 있는 큐 중 어느 것도 텍스트 트랙 큐 활성 플래그가 설정되지 않았으며, missed cues가 비어 있으면 반환합니다.
정상적인 재생 동안 현재 재생 위치의 통상적인 단조 증가를 통해 시간이 도달되었고, other cues에 큐가 있으며 해당 큐가 텍스트 트랙 큐 종료 시 일시정지 플래그가 설정되어 있고, 텍스트 트랙 큐 활성 플래그가 설정되어 있거나 missed cues에도 포함되어 있는 경우, 즉시 미디어 요소의 재생을 일시 중지합니다.
다른 경우, 예를 들어 명시적인 탐색(seek)에서는 큐의 종료 시간을 넘어서도 재생이 일시 중지되지 않으며, 설령 그 큐에 텍스트 트랙 큐 종료 시 일시정지 플래그가 설정되어 있어도 마찬가지입니다.
events를 작업 목록으로 설정합니다. 이 목록은 처음에는 비어 있습니다. 이 목록에 있는 각 작업은 텍스트 트랙, 텍스트 트랙 큐 및 시간을 포함합니다. 이 목록은 작업이 큐잉되기 전에 정렬됩니다.
affected tracks를 텍스트 트랙 목록으로 설정합니다. 이 목록은 처음에는 비어 있습니다.
아래 단계에서 target이 텍스트 트랙 큐인 event라는 이름의 이벤트를 준비하라고 할 때, 사용자 에이전트는 다음 단계를 실행해야 합니다:
missed cues에 있는
텍스트 트랙 큐 각각에 대해
이벤트 준비를 하고
enter
라는 이름의 이벤트를
TextTrackCue
객체에서
텍스트 트랙 큐 시작
시간과 함께 실행합니다.
other cues에 있는
텍스트 트랙 큐 각각에 대해
텍스트 트랙 큐
활성 플래그가 설정되었거나
missed cues에 있는 경우,
이벤트 준비를 하고
exit
라는 이름의 이벤트를
TextTrackCue
객체에서
텍스트 트랙 큐 종료
시간과
텍스트 트랙 큐 시작
시간 중 더 늦은 시간과 함께 실행합니다.
current cues에 있지만
텍스트 트랙 큐
활성 플래그가 설정되지 않은
텍스트 트랙 큐 각각에 대해
이벤트 준비를 하고
enter
라는 이름의 이벤트를
TextTrackCue
객체에서
텍스트 트랙 큐 시작
시간과 함께 실행합니다.
events에 있는 작업을 시간 순서대로 오름차순으로 정렬합니다 (작업은 더 이른 시간이 먼저 옵니다).
events에 있는 작업 중 시간이 동일한 작업들을 텍스트 트랙 큐 순서에 따라 추가로 정렬합니다. 이 정렬은 텍스트 트랙 큐와 연관된 작업에서 수행됩니다.
마지막으로, 동일한 시간과 동일한
텍스트 트랙 큐 순서를 가진
작업들을 정렬할 때는
작업이
enter
이벤트를 실행하는 경우,
exit
이벤트를 실행하는 작업보다 우선 배치합니다.
events에 있는 각 작업에 대해, 미디어 요소에 미디어 요소 작업을 큐잉합니다. 이 작업은 리스트 순서대로 수행됩니다.
affected tracks를 미디어 요소의 텍스트 트랙 목록에 나타나는 순서대로 정렬하고 중복을 제거합니다.
리스트 순서대로
affected tracks에 있는 각
텍스트 트랙에 대해
미디어 요소에
미디어 요소
작업을 큐잉하고
이벤트를
실행합니다.
이벤트 이름은
cuechange
이며,
TextTrack
객체에서 실행됩니다.
만약
텍스트 트랙에
해당되는
track
요소가 있는 경우,
해당
이벤트를
실행하여,
이름이
cuechange
인 이벤트가
track
요소에서 실행되도록 합니다.
current cues에 있는 모든 큐의 텍스트 트랙 큐 활성 플래그를 설정하고, other cues에 있는 모든 큐의 텍스트 트랙 큐 활성 플래그를 해제합니다.
affected tracks에 있는 각 텍스트 트랙에 대해 텍스트 트랙 렌더링 업데이트 규칙을 실행합니다. 이때, text track의 텍스트 트랙 언어가 비어 있지 않으면 이를 대체 언어로 제공합니다. 예를 들어, WebVTT를 기반으로 하는 텍스트 트랙의 경우, WebVTT 텍스트 트랙 표시 업데이트 규칙을 적용합니다. [WEBVTT]
위 알고리즘의 목적을 위해, 텍스트 트랙 큐는 텍스트 트랙의 일부로 간주되며, 단지 텍스트 트랙과 연관되어 있는 것만으로는 간주되지 않습니다. 오직 텍스트 트랙 큐 목록에 나열되어 있는 경우에만 해당됩니다.
만약 미디어 요소의 노드 문서가 완전히 활성화된 문서 상태를 잃으면, 해당 문서가 다시 활성화될 때까지 재생이 중단됩니다.
미디어 요소가 문서에서 제거될 때, 사용자 에이전트는 다음 단계를 실행해야 합니다:
안정된 상태를 기다리고,
작업을 계속하여
미디어 요소를
document
에서 제거합니다.
동기화된 섹션은
이 알고리즘의 나머지 단계를 포함합니다.
(동기화된 섹션의 단계는 ⌛로 표시됩니다.)
⌛ 내부 일시정지 단계를 미디어 요소에 대해 실행합니다.
media.seeking
사용자 에이전트가 현재 탐색 중인 경우 true를 반환합니다.
media.seekable
모든 현재 엔진에서 지원.
사용자 에이전트가 탐색할 수 있는 미디어 리소스의 범위를 나타내는 TimeRanges
객체를 반환합니다.
media.fastSeek(time)
정밀도를 희생하여 가능한 한 빠르게 주어진 time으로 탐색합니다. (정밀하게 탐색하려면 currentTime
속성을 사용하십시오.)
미디어 리소스가 로드되지 않은 경우 이 작업은 아무것도 하지 않습니다.
seeking
속성은 처음에 false 값을 가져야 합니다.
fastSeek(time)
메서드는 time으로
탐색을 수행해야 하며,
approximate-for-speed 플래그가 설정되어 있어야 합니다.
사용자 에이전트가 new playback position에서 미디어 리소스로 탐색을 해야 하는 경우, 선택적으로 approximate-for-speed 플래그가 설정된 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다. 이 알고리즘은 이벤트 루프 메커니즘과 밀접하게 상호 작용합니다. 특히, 이벤트 루프 알고리즘의 일부로서 트리거되는 동기화된 섹션이 있습니다. 이 섹션의 단계는 ⌛로 표시됩니다.
미디어 요소의 포스터 표시 플래그를 false로 설정합니다.
미디어 요소의 readyState
가
HAVE_NOTHING
이면,
반환합니다.
요소의 seeking
IDL 속성이 true인 경우,
이 알고리즘의 또 다른 인스턴스가 이미 실행 중입니다. 해당 알고리즘 인스턴스를 실행 중인 단계를 기다리지 않고 중단합니다.
seeking
IDL 속성을
true로 설정합니다.
탐색이 DOM 메서드 호출이나 IDL 속성 설정에 응답하여 발생한 경우, 스크립트를 계속 실행합니다. 나머지 단계는 병렬로 실행해야 합니다. ⌛로 표시된 단계를 제외하고, 이 알고리즘의 또 다른 인스턴스가 호출되어 언제든지 중단될 수 있습니다.
새로운 재생 위치가 미디어 리소스의 끝 이후인 경우, 그 위치를 대신 미디어 리소스의 끝으로 설정합니다.
새로운 재생 위치가 가장 빠른 가능한 위치보다 이전인 경우, 그 위치를 대신 가장 빠른 가능한 위치로 설정합니다.
(이제 변경되었을 수도 있는) 새로운 재생 위치가 seekable
속성에 제공된 범위 중 하나에 포함되지
않는 경우,
그 위치를 대신 seekable
속성에 제공된
범위 중
새로운 재생 위치에 가장 가까운 위치로 설정합니다. 두 위치 모두 해당 조건을 만족하는 경우(즉, 새로운 재생 위치가 seekable
속성의 두 범위 사이의 정확한 중간에
있는 경우),
현재 재생 위치에 가장 가까운 위치를 사용합니다. seekable
속성에 제공된 범위가 없는 경우, seeking
IDL 속성을 false로 설정하고 반환합니다.
approximate-for-speed 플래그가 설정된 경우, 새로운 재생 위치를 재생이 즉시 재개될 수 있는 값으로 조정합니다. 이 단계 이전의 새로운 재생 위치가 현재 재생 위치보다 이전인 경우, 조정된 새로운 재생 위치도 현재 재생 위치 이전이어야 합니다. 마찬가지로, 이 단계 이전의 새로운 재생 위치가 현재 재생 위치 이후인 경우, 조정된 새로운 재생 위치도 현재 재생 위치 이후여야 합니다.
예를 들어, 사용자 에이전트는 인근의 키 프레임으로 스냅하여 중간 프레임을 디코딩한 다음 폐기하는 데 시간을 소비하지 않고 재생을 재개할 수 있습니다.
미디어 요소 작업을 대기열에 추가하여
이벤트를 발생시키도록 하고,
요소에 대해 seeking
이라는 이름의
이벤트를 발생시킵니다.
현재 재생 위치를 새로운 재생 위치로 설정합니다.
미디어 요소가
탐색을 시작하기 직전에 잠재적으로 재생 중이었으나,
탐색으로 인해 readyState
속성이 HAVE_FUTURE_DATA
미만의 값으로 변경된 경우, waiting
이벤트가 요소에서 발생할 것입니다.
이 단계는 현재 재생 위치를 설정하며, 따라서 사용자 에이전트가 실제로 해당 위치의 미디어 데이터를 렌더링할 수 있는지 여부를 결정하기 전이라도 재생이 "미디어 리소스의 끝에 도달"하는 시점에 관한 규칙과 같은 다른 조건을 즉시 트리거할 수 있습니다(루핑을 처리하는 로직의 일부입니다).
currentTime
속성은 공식 재생 위치를 반환하며,
현재 재생 위치가 아니므로
이 알고리즘과는 별개로 스크립트 실행 전에 업데이트됩니다.
사용자 에이전트가 new playback position에 대한 미디어 데이터가 사용 가능한지 여부를 확인할 때까지 기다리고, 가능하다면 해당 위치를 재생할 수 있을 정도로 데이터를 디코딩할 때까지 기다립니다.
안정된 상태를 대기합니다. 동기화된 섹션은 이 알고리즘의 나머지 단계로 구성됩니다. (동기화된 섹션의 단계는 ⌛로 표시됩니다.)
⌛ seeking
IDL 속성을 false로
설정합니다.
⌛ 시간이 흐른다 단계를 실행합니다.
⌛ 미디어 요소 작업을 대기열에 추가하여
이벤트를 발생시키도록 하고,
요소에 대해 timeupdate
라는
이름의
이벤트를 발생시킵니다.
⌛ 미디어 요소 작업을 대기열에 추가하여
이벤트를 발생시키도록 하고,
요소에 대해 seeked
라는 이름의
이벤트를 발생시킵니다.
seekable
속성은 사용자 에이전트가 탐색할 수 있는 미디어 리소스의 범위를 나타내는
새로운 정적 정규화된
TimeRanges
객체를 반환해야 하며,
이는 속성이 평가되는 시점에 해당합니다.
사용자 에이전트가 미디어 리소스의 어디에서든 탐색할 수 있는 경우,
예를 들어 단순한 동영상 파일이고 사용자 에이전트와 서버가 HTTP 범위 요청을 지원하기 때문에
이 속성은 하나의 범위를 가진 객체를 반환합니다. 이 범위의 시작은 첫 번째 프레임의 시간(가장 빠른 가능한 위치,
일반적으로 0)이고, 끝은 첫 번째 프레임의 시간에 duration
속성 값(마지막 프레임의 시간과 동일할 수 있으며, 양의 무한대일 수 있음)을 더한 값입니다.
이 범위는 사용자 에이전트가 무한 스트림에서 슬라이딩 윈도우를 버퍼링하는 경우와 같이 지속적으로 변경될 수 있습니다. 예를 들어 DVR이 실시간 TV를 시청할 때 이러한 동작이 나타납니다.
매번 새로운 객체를 반환하는 것은 속성 getter에 대한 나쁜 패턴이며, 변경하는 데 비용이 많이 들기 때문에 여기서만 명시됩니다. 새로운 API에는 이를 복사해서는 안 됩니다.
사용자 에이전트는 탐색 가능성에 대해 매우 자유롭고 낙관적인 견해를 취해야 합니다. 또한 가능한 경우 최근 콘텐츠를 버퍼링하여 탐색을 빠르게 할 수 있도록 해야 합니다.
예를 들어, HTTP 범위 요청을 지원하지 않는 HTTP 서버에서 제공되는 큰 비디오 파일을 고려해 봅시다. 브라우저는 이 파일을 구현할 때 현재 프레임과 이후 프레임의 데이터만 버퍼링하고, 재생을 다시 시작하여 처음으로 돌아가는 것 외에는 탐색을 허용하지 않을 수 있습니다. 그러나 이것은 좋지 않은 구현입니다. 고품질의 구현은 충분한 저장 공간이 있는 경우 최근 몇 분(또는 더 많은) 콘텐츠를 버퍼링하여 사용자가 놀라운 부분을 다시 볼 수 있도록 하고, 필요한 경우 파일을 처음부터 다시 로드하여 임의의 탐색을 허용합니다. 이 경우 속도가 느리겠지만, 비디오를 처음부터 끝까지 다시 시청해야 하는 것보다 여전히 더 편리합니다.
미디어 리소스는 내부적으로 스크립팅되거나 인터랙티브할 수 있습니다. 따라서 미디어 요소는 비선형 방식으로 재생될 수 있습니다. 이 경우, 사용자 에이전트는 현재 재생 위치가 불연속적인 방식으로 변경될 때마다 (관련 이벤트가 발생하도록) 탐색 알고리즘이 사용된 것처럼 동작해야 합니다.
미디어 리소스는 여러 개의 오디오 및 비디오 트랙을 포함할 수 있습니다. 예를 들어, 주요 비디오 및 오디오 트랙 외에도, 미디어 리소스에는 외국어 더빙 대사, 감독의 해설, 오디오 설명, 대체 각도 또는 수화 오버레이가 있을 수 있습니다.
media.audioTracks
모든 현재 엔진에서 지원됩니다.
AudioTrackList 객체를 반환하여 미디어 리소스에서 사용할 수 있는 오디오 트랙을 나타냅니다.
media.videoTracks
모든 현재 엔진에서 지원됩니다.
VideoTrackList 객체를 반환하여 미디어 리소스에서 사용할 수 있는 비디오 트랙을 나타냅니다.
미디어 요소의 audioTracks
속성은 미디어 요소의 미디어 리소스에서 사용할 수 있는 오디오 트랙을 나타내는 라이브 AudioTrackList 객체를 반환해야 합니다.
미디어 요소의 videoTracks
속성은 미디어 요소의 미디어 리소스에서 사용할 수 있는 비디오 트랙을 나타내는 라이브 VideoTrackList 객체를 반환해야 합니다.
각 미디어 요소에는 AudioTrackList 객체와 VideoTrackList 객체가 각각 하나씩만 존재하며, 다른 미디어 리소스가 요소에 로드되더라도 이 객체들은 재사용됩니다. (그러나 AudioTrack 및 VideoTrack 객체는 그렇지 않습니다.)
AudioTrackList
및 VideoTrackList
객체모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
AudioTrackList
및 VideoTrackList
인터페이스는 이전 섹션에서 정의된 속성에서 사용됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface AudioTrackList : EventTarget {
readonly attribute unsigned long length ;
getter AudioTrack (unsigned long index );
AudioTrack ? getTrackById (DOMString id );
attribute EventHandler onchange ;
attribute EventHandler onaddtrack ;
attribute EventHandler onremovetrack ;
};
[Exposed =Window ]
interface AudioTrack {
readonly attribute DOMString id ;
readonly attribute DOMString kind ;
readonly attribute DOMString label ;
readonly attribute DOMString language ;
attribute boolean enabled ;
};
[Exposed =Window ]
interface VideoTrackList : EventTarget {
readonly attribute unsigned long length ;
getter VideoTrack (unsigned long index );
VideoTrack ? getTrackById (DOMString id );
readonly attribute long selectedIndex ;
attribute EventHandler onchange ;
attribute EventHandler onaddtrack ;
attribute EventHandler onremovetrack ;
};
[Exposed =Window ]
interface VideoTrack {
readonly attribute DOMString id ;
readonly attribute DOMString kind ;
readonly attribute DOMString label ;
readonly attribute DOMString language ;
attribute boolean selected ;
};
media.audioTracks.length
모든 현재 엔진에서 지원됩니다.
media.videoTracks.length
모든 현재 엔진에서 지원됩니다.
리스트의 트랙 수를 반환합니다.
audioTrack = media.audioTracks[index]
videoTrack = media.videoTracks[index]
지정된 AudioTrack
또는 VideoTrack
객체를 반환합니다.
audioTrack = media.audioTracks.getTrackById(id)
모든 현재 엔진에서 지원됩니다.
videoTrack = media.videoTracks.getTrackById(id)
모든 현재 엔진에서 지원됩니다.
주어진 식별자를 가진 AudioTrack
또는 VideoTrack
객체를 반환하며, 해당 식별자를 가진 트랙이 없는 경우 null을 반환합니다.
audioTrack.id
모든 현재 엔진에서 지원됩니다.
videoTrack.id
모든 현재 엔진에서 지원됩니다.
주어진 트랙의 ID를 반환합니다. 이 ID는 형식이 프래그먼트를 지원하는 경우 사용할 수 있으며, 미디어 프래그먼트 구문과 함께 사용할 수 있으며, getTrackById()
메서드와 함께 사용할 수 있습니다.
audioTrack.kind
모든 현재 엔진에서 지원됩니다.
videoTrack.kind
모든 현재 엔진에서 지원됩니다.
주어진 트랙이 속하는 범주를 반환합니다. 가능한 트랙 범주는 아래에 나와 있습니다.
audioTrack.label
모든 현재 엔진에서 지원됩니다.
videoTrack.label
모든 현재 엔진에서 지원됩니다.
지정된 트랙의 레이블을 반환합니다. 알려진 경우에만 반환되며, 그렇지 않으면 빈 문자열을 반환합니다.
audioTrack.language
모든 현재 엔진에서 지원됩니다.
videoTrack.language
모든 현재 엔진에서 지원됩니다.
지정된 트랙의 언어를 반환합니다. 알려진 경우에만 반환되며, 그렇지 않으면 빈 문자열을 반환합니다.
audioTrack.enabled [ = value ]
모든 현재 엔진에서 지원됩니다.
지정된 트랙이 활성화된 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
트랙을 활성화할지 여부를 변경하기 위해 설정할 수 있습니다. 여러 오디오 트랙을 동시에 활성화하면 혼합됩니다.
media.videoTracks.selectedIndex
모든 현재 엔진에서 지원됩니다.
현재 선택된 트랙의 인덱스를 반환하며, 없으면 −1을 반환합니다.
videoTrack.selected [ = value ]
모든 현재 엔진에서 지원됩니다.
지정된 트랙이 활성화된 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
트랙을 선택할지 여부를 변경하기 위해 설정할 수 있습니다. 하나의 비디오 트랙이 선택됩니다. 이전 트랙을 선택 해제하고 새 트랙을 선택합니다.
AudioTrackList
객체는 하나 이상의 오디오 트랙으로 구성된 동적 목록을 나타내며, 이 중 하나 이상의 트랙이 동시에 활성화될 수 있습니다. 각 오디오 트랙은
AudioTrack
객체로 나타납니다.
VideoTrackList
객체는 하나 이상의 비디오 트랙으로 구성된 동적 목록을 나타내며, 이 중 하나의 트랙만 동시에 선택될 수 있습니다. 각 비디오 트랙은
VideoTrack
객체로 나타납니다.
AudioTrackList
와
VideoTrackList
객체의 트랙들은 일관된 순서로 유지되어야 합니다. 미디어 리소스가 순서를 정의하는 형식인 경우 해당 순서가 사용되어야 하며, 그렇지 않으면 트랙이 미디어 리소스에 선언된 상대적 순서가 사용되어야
합니다. 사용된 순서는 목록의 자연 순서라고 합니다.
이 객체의 각 트랙에는 인덱스가 있으며, 첫 번째 트랙의 인덱스는 0이고 이후의 트랙은 이전 트랙보다 하나씩 더 높은 번호를 가집니다. 미디어 리소스가 동적으로 오디오 또는 비디오 트랙을 추가하거나 제거하면 트랙의 인덱스가 동적으로 변경됩니다. 미디어 리소스가 완전히 변경되면 모든 이전 트랙이 제거되고 새 트랙으로 대체됩니다.
AudioTrackList
와
VideoTrackList
의
length
속성 게터는 조회 시점에 객체가 나타내는 트랙의 수를 반환해야 합니다.
AudioTrackList
와
VideoTrackList
객체의
지원되는 속성 인덱스는 특정 시점에 해당 객체가 나타내는 트랙의 수에서 1을 뺀 숫자까지의 숫자입니다. 만약
트랙이 없다면 지원되는 속성 인덱스가 없습니다.
지정된 index에 대해 인덱스된 속성의 값을 결정하려면 AudioTrackList
또는 VideoTrackList
객체 list에서 해당 인덱스에 해당하는 AudioTrack
또는 VideoTrack
객체를 반환해야
합니다.
AudioTrackList
와
VideoTrackList
의
getTrackById(id)
메서드는 지정된 인수와 일치하는 첫 번째 AudioTrack
또는 VideoTrack
객체를 반환해야
합니다. 일치하는 트랙이 없을 경우 메서드는 null을 반환해야 합니다.
AudioTrack
와
VideoTrack
객체는 특정
미디어 리소스의 특정 트랙을 나타냅니다.
각 트랙에는 식별자, 범주, 레이블 및 언어가 있을 수 있습니다. 이러한 트랙의 속성들은 트랙의 생애 동안 유지되며, 트랙이 AudioTrackList
또는 VideoTrackList
에서
제거되더라도 속성들은 변경되지 않습니다.
또한, 각 AudioTrack
객체는 활성화되거나 비활성화될 수 있으며, 이것이 오디오 트랙의 활성 상태입니다. AudioTrack
이 생성될 때,
그 활성 상태는 false(비활성화)로 설정되어야 합니다. 리소스 가져오기 알고리즘이 이를 무시할 수 있습니다.
유사하게, VideoTrack
객체는 VideoTrackList
내에서 선택될 수 있으며, 이는 비디오 트랙의 선택 상태입니다. VideoTrack
이 생성될 때,
그 선택 상태는 false(선택되지 않음)로 설정되어야 합니다. 리소스 가져오기 알고리즘이 이를 무시할 수 있습니다.
AudioTrack
의
id
와
VideoTrack
의
id
속성은 해당 트랙의 식별자를
반환해야 하며, 식별자가 없는 경우 빈 문자열을 반환해야 합니다. 미디어 리소스가 미디어 조각
구문을 지원하는 형식일 경우, 특정 트랙에 대해 반환된 식별자는 해당 구문의 트랙 차원에서 트랙 이름으로 사용될 경우 트랙을 활성화할 수 있는 동일한 식별자가 되어야 합니다.
[INBAND]
예를 들어, Ogg 파일에서는 이 식별자가 트랙의 Name 헤더 필드가 될 수 있습니다. [OGGSKELETONHEADERS]
AudioTrack
의
kind
와
VideoTrack
의
kind
속성은 해당 트랙의
범주를 반환해야 하며, 범주가 없는 경우 빈 문자열을 반환해야 합니다.
트랙의 범주는 아래 표의 첫 번째 열에 있는 문자열 중 가장 적절한 것으로, 표의 두 번째 및 세 번째 열에 정의된 내용을 기준으로 합니다. 표의 세 번째 열에 있는 셀은 해당 범주가 어떤 항목에 적용되는지를 설명하며, 범주는 오디오 트랙에 대해 적절한 경우에만 오디오 트랙에 대해 반환되어야 하고, 비디오 트랙에 대해 적절한 경우에만 비디오 트랙에 대해 반환되어야 합니다.
Ogg 파일의 경우, 트랙의 Role 헤더 필드가 관련 메타데이터를 제공합니다. DASH 미디어 리소스의 경우, Role
요소가 정보를 전달합니다. WebM의 경우, 현재
FlagDefault
요소만이 값을 매핑합니다. 미디어 컨테이너에서 HTML로 인밴드 미디어 리소스 트랙 소싱에는 더 자세한 내용이 있습니다.
[OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]
범주 | 정의 | 적용 대상... | 예시 |
---|---|---|---|
"alternative "
| 주 트랙의 대안으로 사용할 수 있는 트랙, 예: 다른 버전의 노래(오디오) 또는 다른 각도(비디오). | 오디오 및 비디오. | Ogg: "audio/alternate" 또는 "video/alternate"; DASH: "alternate" 역할, "main" 및 "commentary" 역할 없음, 오디오는 "dub" 역할 없음(다른 역할은 무시됨). |
"captions "
| 캡션이 번인된 주 비디오 트랙의 버전. (레거시 콘텐츠의 경우, 새 콘텐츠는 텍스트 트랙 사용.) | 비디오만. | DASH: "caption" 및 "main" 역할 함께 사용(다른 역할 무시됨). |
"descriptions "
| 비디오 트랙에 대한 오디오 설명. | 오디오만. | Ogg: "audio/audiodesc". |
"main "
| 주 오디오 또는 비디오 트랙. | 오디오 및 비디오. | Ogg: "audio/main" 또는 "video/main"; WebM: "FlagDefault" 요소 설정됨; DASH: "main" 역할, "caption", "subtitle", "dub" 역할 없음(다른 역할은 무시됨). |
"main-desc "
| 오디오 설명이 혼합된 주 오디오 트랙. | 오디오만. | MPEG-2 TS의 AC3 오디오: bsmod=2 및 full_svc=1. |
"sign "
| 오디오 트랙의 수화 통역. | 비디오만. | Ogg: "video/sign". |
"subtitles "
| 자막이 번인된 주 비디오 트랙의 버전. (레거시 콘텐츠의 경우, 새 콘텐츠는 텍스트 트랙 사용.) | 비디오만. | DASH: "subtitle" 및 "main" 역할 함께 사용(다른 역할 무시됨). |
"translation "
| 주 오디오 트랙의 번역된 버전. | 오디오만. | Ogg: "audio/dub". DASH: "dub" 및 "main" 역할 함께 사용(다른 역할 무시됨). |
"commentary "
| 주 오디오 또는 비디오 트랙에 대한 해설, 예: 감독의 해설. | 오디오 및 비디오. | DASH: "commentary" 역할, "main" 역할 없음(다른 역할 무시됨). |
" " (빈 문자열)
| 명시된 유형이 없거나 트랙의 메타데이터에 의해 제공된 유형이 사용자 에이전트에 의해 인식되지 않음. | 오디오 및 비디오. |
AudioTrack
의
label
과
VideoTrack
의
label
속성은 해당 트랙의
레이블을 반환해야 하며, 레이블이 없는 경우 빈 문자열을 반환해야 합니다.
[INBAND]
AudioTrack
의
language
과
VideoTrack
의
language
속성은
해당 트랙의 언어를 나타내는 BCP 47 언어 태그를 반환해야 하며, 언어가 없는 경우 빈 문자열을 반환해야 합니다. 사용자가 해당 언어를 BCP 47 언어 태그로 표현할 수 없는 경우(예를 들어,
미디어 리소스의 형식에서 언어 정보가 정의되지 않은 자유 형식 문자열인 경우) 메서드는 트랙에 언어가 없는 것처럼 빈 문자열을 반환해야 합니다.
[INBAND]
AudioTrack
의
enabled
속성은 조회
시 트랙이 현재 활성화되어 있으면 true를, 그렇지 않으면 false를 반환해야 합니다. 설정 시, 새로운 값이 true인 경우 트랙을 활성화하고, 그렇지 않으면 트랙을 비활성화해야 합니다. (트랙이
더 이상 AudioTrackList
객체에 포함되어 있지 않다면, 트랙이 활성화되거나 비활성화되는 것이 AudioTrack
객체의 속성
값을 변경하는 것 이외에는 아무런 영향을 미치지 않습니다.)
AudioTrackList
에
있는 오디오 트랙이 비활성화되었다가 다시 활성화될 때마다, 또는 활성화된 트랙이 비활성화될 때마다, 사용자 에이전트는 미디어 요소 작업을 대기열에 추가하고, 미디어 요소에서 이벤트를
change
라는
이름으로 AudioTrackList
객체에서 실행해야 합니다.
특정 위치에 대한 데이터가 없거나 해당 위치에 존재하지 않는 오디오 트랙은 타임라인의 해당 지점에서 무음으로 해석되어야 합니다.
VideoTrackList
의
selectedIndex
속성은 현재 선택된 트랙의 인덱스를 반환해야 합니다. 만약 VideoTrackList
객체가 현재 트랙을 나타내지 않거나, 선택된 트랙이 없다면, −1을 반환해야 합니다.
VideoTrack
의
selected
속성은
조회 시 트랙이 현재 선택된 경우 true를, 그렇지 않은 경우 false를 반환해야 합니다. 설정 시, 새로운 값이 true인 경우 트랙을 선택하고, 그렇지 않으면 선택을 해제해야 합니다. VideoTrackList
에
트랙이 포함된 경우, 목록의 다른 VideoTrack
객체들은 선택
해제되어야 합니다. (트랙이 더 이상 VideoTrackList
객체에 포함되어 있지 않다면, 트랙이 선택되거나 해제되는 것이 VideoTrack
객체의 속성
값을 변경하는 것 이외에는 아무런 영향을 미치지 않습니다.)
VideoTrackList
의
선택되지 않은 트랙이 선택되거나, 선택된 트랙이 선택 해제될 때마다, 사용자 에이전트는 미디어 요소 작업을 대기열에 추가하고, 미디어 요소에서 이벤트를 change
라는
이름으로 VideoTrackList
객체에서 실행해야 합니다. 이 작업은 resize
이벤트를 실행하는 작업보다 먼저 대기열에 추가되어야 합니다.
특정 위치에 대한 데이터가 없거나 해당 위치에 존재하지 않는 비디오 트랙은 타임라인의 해당 지점에서 투명한 검정으로 해석되어야 하며, 해당 지점 이전의 마지막 프레임과 동일한 크기를 가져야 합니다. 또는 해당 위치가 해당 트랙의 모든 데이터 이전이라면 해당 트랙의 첫 번째 프레임과 동일한 크기를 가져야 합니다. 해당 위치에 전혀 존재하지 않는 트랙은 존재하지만 데이터가 없는 것으로 취급되어야 합니다.
예를 들어, 비디오에 한 시간이 지난 후에만 소개되는 트랙이 있는 경우, 사용자가 해당 트랙을 선택한 후 처음으로 돌아가면, 사용자 에이전트는 해당 트랙이 미디어 리소스의 시작 시점에서 시작되었지만 한 시간까지는 투명했다고 간주할 것입니다.
다음은 이벤트 핸들러와
해당 이벤트
핸들러 이벤트 타입입니다.
모든 AudioTrackList
및
VideoTrackList
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL 속성으로 지원되어야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 타입 |
---|---|
onchange
모든 최신 엔진에서 지원됩니다.
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? |
change
|
onaddtrack
모든 최신 엔진에서 지원됩니다.
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? |
addtrack
|
onremovetrack
AudioTrackList/removetrack_event 모든 최신 엔진에서 지원됩니다.
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? |
removetrack
|
audioTracks
및 videoTracks
속성은 스크립트로 어떤 트랙을 재생할지 선택할 수 있게 하지만, 또한 프래그먼트에 특정 트랙을 지정하여 선언적으로 트랙을 선택하는 것도 가능합니다. 이러한 프래그먼트의 형식은 MIME 타입에 따라 달라집니다. [RFC2046] [URL]
이 예제에서는 미디어 프래그먼트 구문을 지원하는 형식을 사용하는 비디오를 임베드하여 기본 비디오 트랙 대신 "Alternative"로 레이블된 대체 각도가 활성화되도록 합니다.
< video src = "myvideo#track=Alternative" ></ video >
미디어 요소에는 텍스트 트랙의 그룹이 있을 수 있으며, 이를 미디어 요소의 텍스트 트랙 목록이라고 합니다. 텍스트 트랙은 다음과 같이 정렬됩니다:
addTextTrack()
메서드를 사용해 추가된 텍스트 트랙은 추가된 순서대로, 가장 오래된 것부터
정렬됩니다.
미디어 리소스에 특정한 텍스트 트랙 (텍스트 트랙 중 미디어 리소스에 해당하는 트랙)은 미디어 리소스의 형식 사양에 따라 정렬됩니다.
텍스트 트랙은 다음으로 구성됩니다:
이는 트랙이 사용자 에이전트에 의해 어떻게 처리되는지를 결정합니다. 종류는 문자열로 표현되며, 가능한 문자열은 다음과 같습니다:
subtitles
captions
descriptions
chapters
metadata
이는 사용자를 위한 사람이 읽을 수 있는 문자열로, 트랙을 식별하는 데 사용됩니다.
트랙의 라벨은 텍스트 트랙이 track 요소에 해당하는 경우 동적으로 변경될 수 있습니다.
텍스트 트랙의 라벨이 빈 문자열일 경우, 사용자 에이전트는 사용자 인터페이스에서 사용할 수 있는 적절한 라벨을 텍스트 트랙의 다른 속성(예: 텍스트 트랙의 종류 및 텍스트 트랙의 언어)으로부터 자동으로 생성해야 합니다. 이 자동 생성된 라벨은 API에서 노출되지 않습니다.
이것은 인밴드 메타데이터 트랙을 특정 스크립트에 디스패치할 수 있도록 하기 위해 미디어 리소스에서 추출된 문자열입니다.
예를 들어, 웹에서 스트리밍되는 전통적인 TV 방송에 웹 전용 인터랙티브 기능이 추가된 경우, 광고 타겟팅을 위한 메타데이터, 게임쇼 중의 퀴즈 데이터, 스포츠 경기 중의 선수 상태, 요리 프로그램 중의 레시피 정보 등과 같은 텍스트 트랙이 포함될 수 있습니다. 각 프로그램이 시작되고 끝날 때마다 새로운 트랙이 스트림에 추가되거나 제거될 수 있으며, 각 트랙이 추가될 때마다 사용자 에이전트는 이 속성의 값을 사용하여 이를 전용 스크립트 모듈에 바인딩할 수 있습니다.
인밴드 메타데이터 텍스트 트랙 외의 경우, 인밴드 메타데이터 트랙 디스패치 유형은 빈 문자열입니다. 이 값이 다양한 미디어 형식에 대해 어떻게 채워지는지는 미디어 리소스에 특정한 텍스트 트랙을 노출하는 단계에서 설명됩니다.
이것은 텍스트 트랙의 큐에 사용되는 언어를 나타내는 문자열(BCP 47 언어 태그)입니다. [BCP47]
텍스트 트랙의 언어는 텍스트 트랙이 track 요소에 해당하는 경우 동적으로 변경될 수 있습니다.
다음 중 하나입니다:
텍스트 트랙의 큐가 아직 얻어지지 않았음을 나타냅니다.
텍스트 트랙이 로딩 중이며, 현재까지 치명적인 오류가 발생하지 않았음을 나타냅니다. 더 많은 큐가 파서에 의해 트랙에 추가될 수 있습니다.
텍스트 트랙이 치명적인 오류 없이 로딩되었음을 나타냅니다.
텍스트 트랙이 활성화되었으나, 사용자 에이전트가 이를 얻으려고 시도할 때 어떤 방식으로든 실패했음을 나타냅니다(예: URL을 파싱할 수 없음, 네트워크 오류, 알 수 없는 텍스트 트랙 형식). 일부 또는 모든 큐가 누락되었으며 더 이상 얻어지지 않을 가능성이 큽니다.
텍스트 트랙의 준비 상태는 트랙이 얻어지면서 동적으로 변경됩니다.
다음 중 하나입니다:
텍스트 트랙이 활성 상태가 아님을 나타냅니다. DOM에 트랙을 노출하는 목적 외에는 사용자 에이전트가 텍스트 트랙을 무시합니다. 큐가 활성화되지 않고, 이벤트가 발생하지 않으며, 사용자 에이전트는 트랙의 큐를 얻으려 시도하지 않습니다.
텍스트 트랙이 활성화되었으나, 사용자 에이전트가 큐를 적극적으로 표시하지 않음을 나타냅니다. 트랙의 큐를 얻기 위한 시도가 아직 이루어지지 않은 경우, 사용자 에이전트는 곧 그러한 시도를 할 것입니다. 사용자 에이전트는 활성화된 큐 목록을 유지하고 있으며, 이에 따라 이벤트가 발생합니다.
텍스트 트랙이 활성화되었음을 나타냅니다. 트랙의 큐를 얻기 위한 시도가 아직 이루어지지 않은 경우, 사용자 에이전트는 곧 그러한 시도를 할 것입니다. 사용자 에이전트는
활성화된 큐 목록을 유지하고 있으며, 이에 따라 이벤트가 발생합니다. 또한, 종류가 subtitles
또는 captions
인
텍스트 트랙의 경우, 큐가 적절히 비디오에 오버레이됩니다. 종류가 descriptions
인
텍스트 트랙의 경우, 사용자 에이전트는 큐를 비시각적인 방식으로 사용자에게 제공합니다. 종류가 chapters
인
텍스트 트랙의 경우, 사용자 에이전트는 사용자가 큐를 선택하여 미디어 리소스의 임의의 지점으로 이동할 수 있는 메커니즘을 제공합니다.
텍스트 트랙 큐 목록과 텍스트 트랙 렌더링을 업데이트하기 위한 규칙으로 구성됩니다. 예를 들어, WebVTT의 경우, WebVTT 텍스트 트랙의 디스플레이를 업데이트하는 규칙이 있습니다. [WEBVTT]
텍스트 트랙의 큐 목록은 동적으로 변경될 수 있습니다. 이는 텍스트 트랙이 아직 로딩되지 않았거나 로딩 중이기 때문이거나, DOM 조작으로 인해 발생할 수 있습니다.
각 텍스트 트랙에는 해당하는 TextTrack
객체가 있습니다.
각 미디어 요소는 초기에는 비어 있는 보류 중인 텍스트 트랙 목록, 초기 값이 false인 파서에 의해 차단됨 플래그, 초기 값이 false인 자동 트랙 선택 수행 여부 플래그를 가집니다.
사용자 에이전트가 보류 중인 텍스트 트랙 목록을 채워야 할 때, 사용자 에이전트는 해당 미디어 요소의 보류 중인 텍스트 트랙 목록에 요소의 텍스트 트랙 목록에 있는 각 텍스트 트랙을 추가해야 합니다. 단, 이 텍스트 트랙 모드가 비활성화됨이 아니고, 텍스트 트랙 준비 상태가 로딩 중인 경우에 한합니다.
track
요소의 부모 노드가 변경될 때마다, 사용자
에이전트는 해당하는 텍스트 트랙을 포함하는 모든 보류 중인 텍스트 트랙 목록에서
제거해야 합니다.
텍스트 트랙의 텍스트 트랙 준비 상태가 로딩 완료 또는 로딩 실패로 변경될 때마다, 사용자 에이전트는 해당 트랙을 포함하는 모든 보류 중인 텍스트 트랙 목록에서 해당 트랙을 제거해야 합니다.
미디어 요소가 HTML 파서 또는 XML 파서에 의해 생성될 때, 사용자 에이전트는 해당 요소의 파서에 의해 차단됨 플래그를 true로 설정해야 합니다. 미디어 요소가 열려 있는 요소 스택에서 팝핑될 때, 사용자 에이전트는 자동 텍스트 트랙 선택에 대한 사용자 기본 설정을 존중, 보류 중인 텍스트 트랙 목록을 채우고 요소의 파서에 의해 차단됨 플래그를 false로 설정해야 합니다.
텍스트 트랙이 미디어 요소에 준비됨 상태로 있으려면, 해당 요소의 보류 중인 텍스트 트랙 목록이 비어 있고 요소의 파서에 의해 차단됨 플래그가 false여야 합니다.
각 미디어 요소에는 보류 중인 텍스트 트랙 변경 알림 플래그가 있으며, 이는 초기에는 설정되지 않아야 합니다.
미디어 요소의 텍스트 트랙 목록에 있는 텍스트 트랙의 텍스트 트랙 모드가 변경될 때마다, 사용자 에이전트는 해당 미디어 요소에 대해 다음 단계를 실행해야 합니다:
미디어 요소의 보류 중인 텍스트 트랙 변경 알림 플래그가 설정된 경우, 반환합니다.
미디어 요소의 보류 중인 텍스트 트랙 변경 알림 플래그를 설정합니다.
미디어 요소 작업을 대기열에 추가하여 미디어 요소에서 이 단계를 실행합니다:
미디어 요소의 보류 중인 텍스트 트랙 변경 알림 플래그를 해제합니다.
이벤트를 발생시켜, 미디어 요소의 textTracks 속성의 TextTrackList 객체에서 change
라는 이름의
이벤트를 발생시킵니다.
미디어 요소의 포스터 표시 플래그가 설정되지 않은 경우, 시간은 흘러갑니다 단계를 실행합니다.
이 섹션에 나열된 작업의 작업의 작업 소스는 DOM 조작 작업 소스입니다.
텍스트 트랙 큐는 텍스트 트랙에서 시간에 민감한 데이터를 나타내는 단위로, 자막 및 캡션의 경우 특정 시간에 나타났다 다른 시간에 사라지는 텍스트와 해당됩니다.
각 텍스트 트랙 큐는 다음으로 구성됩니다:
임의의 문자열입니다.
큐가 적용되는 미디어 데이터 범위의 시작을 나타내는 시간으로, 초와 소수점 이하의 초 단위로 표시됩니다.
큐가 적용되는 미디어 데이터 범위의 끝을 나타내는 시간으로, 초와 소수점 이하의 초 단위로 표시되거나, 무한 텍스트 트랙 큐의 경우 양의 무한대로 설정됩니다.
큐가 적용되는 범위의 끝에 도달할 때 미디어 리소스의 재생이 일시정지할지 여부를 나타내는 부울 값입니다.
형식에 필요한 추가 필드, 예를 들어 WebVTT의 경우 텍스트 트랙 큐 작성 방향 등이 포함됩니다. [WEBVTT]
무한 텍스트 트랙 큐는 종료 시간이 양의 무한대로 설정된 텍스트 트랙 큐입니다. 활성 상태의 무한 텍스트 트랙 큐는 정상적인 재생 중에 현재 재생 위치의 단조 증가를 통해 비활성화될 수 없습니다(예: 종료 시간이 명시되지 않은 라이브 이벤트의 챕터에 대한 메타데이터 큐).
텍스트 트랙 큐의 시작 시간과 텍스트 트랙 큐의 종료 시간은 음수가 될 수 있습니다(단, 현재 재생 위치는 음수가 될 수 없으므로, 시간 0 이전에 완전히 있는 큐는 활성화될 수 없습니다).
각 텍스트 트랙 큐는 해당하는 TextTrackCue
객체(또는 더 구체적으로는 TextTrackCue
에서 상속된 객체, 예를 들어 WebVTT 큐의
경우 VTTCue
인터페이스를 사용함)가 있습니다. 텍스트 트랙 큐의 메모리 내 표현은 이 TextTrackCue
API를 통해 동적으로 변경될 수 있습니다. [WEBVTT]
텍스트 트랙 큐는 특정 텍스트 트랙 큐 유형에 대한 사양에서 정의된 텍스트 트랙 렌더링을 업데이트하기 위한 규칙과 연관됩니다. 이 규칙은
객체를 TextTrack
객체에 addCue()
메서드를 사용하여 추가할 때
사용됩니다.
또한, 각 텍스트 트랙 큐에는 두 가지 동적 정보가 있습니다:
이 플래그는 초기에는 설정되지 않아야 합니다. 이 플래그는 큐가 활성화되거나 비활성화될 때 적절하게 이벤트가 발생하도록 하고, 올바른 큐가 렌더링되도록 보장하기 위해 사용됩니다.
사용자 에이전트는 텍스트 트랙 큐가 텍스트 트랙의 텍스트 트랙 큐 목록에서 제거될 때마다, 텍스트 트랙 자체가 미디어 요소의 텍스트 트랙 목록에서 제거되거나, 텍스트 트랙 모드가 비활성화됨으로 변경될 때마다, 미디어 요소의 readyState
가 다시
HAVE_NOTHING
으로
변경될 때마다 이 플래그를 동기적으로 해제해야 합니다. 큐가 이러한 방식으로 비활성화되는 경우, 사용자 에이전트는 영향을 받은 모든 큐의 플래그를 해제한 후, 해당 텍스트 트랙의 텍스트 트랙 렌더링을 업데이트하기 위한 규칙을 적용해야
합니다. 예를 들어, WebVTT 기반 텍스트 트랙의 경우, WebVTT 텍스트 트랙의 표시를 업데이트하기 위한
규칙을 따릅니다. [WEBVTT]
이 상태는 렌더링 모델의 일부로, 큐를 일관된 위치에 유지하기 위해 사용됩니다. 초기에는 비어 있어야 합니다. 텍스트 트랙 큐 활성 플래그가 해제될 때마다, 사용자 에이전트는 텍스트 트랙 큐 표시 상태를 비워야 합니다.
텍스트 트랙 큐는 미디어 요소의 텍스트 트랙 내에서 텍스트 트랙 큐 순서에 따라 서로 정렬됩니다. 이 순서는 다음과 같이 결정됩니다: 먼저 큐를 해당 텍스트 트랙별로 그룹화하고, 그룹은 미디어 요소의 텍스트 트랙 목록에 나타나는 순서대로 정렬됩니다. 그런 다음, 각 그룹 내에서 큐는 시작 시간을 기준으로 가장 이른 것부터 정렬됩니다. 동일한 시작 시간을 가진 큐는 종료 시간을 기준으로 가장 늦은 것부터 정렬됩니다. 마지막으로 동일한 종료 시간을 가진 큐는 각각의 텍스트 트랙 큐 목록에 마지막으로 추가된 순서대로 정렬되며, 가장 오래된 것이 먼저 옵니다. 예를 들어, WebVTT 파일의 경우, 초기에는 큐가 파일에 나열된 순서로 정렬됩니다. [WEBVTT]
미디어 리소스별 텍스트 트랙은 텍스트 트랙으로, 미디어 리소스에서 발견된 데이터에 해당합니다.
이러한 데이터의 처리 및 렌더링 규칙은 관련 사양에 정의되어 있습니다. 예를 들어, 미디어 리소스가 비디오인 경우 해당 비디오 포맷의 사양에 정의됩니다. 일부 레거시 포맷에 대한 세부 정보는 미디어 컨테이너에서 HTML로 인밴드 미디어 리소스 트랙 소싱에서 찾을 수 있습니다. [INBAND]
사용자 에이전트가 미디어 리소스에 포함된 데이터를 텍스트 트랙과 동등한 것으로 인식하고 지원하는 경우, 사용자 에이전트는 다음과 같이 관련 데이터로 미디어 리소스별 텍스트 트랙 노출 단계를 실행합니다.
해당 데이터를 새로운 텍스트 트랙과
그에 해당하는 새로운 TextTrack
객체에
연결합니다. 이 텍스트 트랙은 미디어
리소스별 텍스트 트랙입니다.
새로운 텍스트 트랙의 종류, 라벨, 그리고 언어를 관련 사양에서 정의된 데이터의 의미에 따라 설정합니다. 데이터에 라벨이 없는 경우, 라벨은 빈 문자열로 설정해야 합니다.
새로운 텍스트 트랙 큐 목록을 해당 포맷에 적합한 텍스트 트랙 렌더링 업데이트 규칙에 따라 연결합니다.
새로운 텍스트 트랙의 종류가 chapters
또는 metadata
인
경우, 텍스트 트랙 인밴드 메타데이터 트랙
디스패치 타입을
미디어 리소스의 종류에 따라 다음과 같이 설정합니다:
stsd
박스가 stsd 박스입니다. 파일에 stsd 박스가 없거나 stsd 박스에
mett
또는 metx
박스가 없으면, 텍스트 트랙 인밴드
메타데이터 트랙 디스패치 타입은 빈 문자열로 설정해야 합니다.
stsd 박스에 mett
박스가 있는 경우, 텍스트 트랙 인밴드
메타데이터 트랙 디스패치 타입은 문자열 "mett
", U+0020 SPACE 문자 및 mett
박스의 첫 번째
mime_format
필드의 값을 연결하여 설정해야 합니다.
stsd 박스에 mett
박스는 없고 metx
박스가 있는 경우, 텍스트 트랙 인밴드
메타데이터 트랙 디스패치 타입은 문자열 "metx
", U+0020 SPACE 문자 및 metx
박스의 첫 번째
namespace
필드의 값을 연결하여 설정해야 합니다.
[MPEG4]
지금까지 구문 분석된 큐로 새로운 텍스트 트랙의 텍스트 트랙 큐 목록을 채우고, 필요한 경우 동적으로 업데이트를 시작합니다.
새로운 텍스트 트랙의 모드를 사용자의 선호와 데이터에 대한 관련 사양의 요구 사항에 일치하도록 설정합니다.
예를 들어, 다른 활성 자막이 없고 이것이 강제 자막 트랙인 경우(오디오 트랙의 주요 언어로 된 자막을 제공하지만 실제로는 다른 언어로 된 오디오에 대해서만 자막을 제공하는 자막 트랙), 이러한 자막이 여기에 활성화될 수 있습니다.
이벤트를 addtrack
으로
미디어 요소의 textTracks
속성의 TextTrackList
객체에서 사용하여 발생시킵니다. TrackEvent
로, track
속성은 텍스트 트랙의 TextTrack
객체로 초기화됩니다.
track
요소가 생성될
때, 그것은 새로운 텍스트 트랙 (그 값은 아래 정의된 대로 설정됨) 및
해당하는 새로운 TextTrack
객체와 연관되어야
합니다.
텍스트 트랙 종류는 요소의 kind
속성의 상태에 따라 다음
표에서 결정됩니다. 첫 번째 열의 상태에 따라 종류는
두 번째 열에 주어진 문자열이 됩니다:
상태 | 문자열 |
---|---|
Subtitles | subtitles
|
Captions | captions
|
Descriptions | descriptions
|
Chapters metadata | chapters
|
Metadata | metadata
|
텍스트 트랙 언어는 요소의 트랙 언어이며, 없을 경우 빈 문자열로 설정됩니다.
kind
, label
, 및 srclang
속성이
설정, 변경, 또는 제거될 때마다 텍스트 트랙은 위에서 정의한 대로
업데이트되어야 합니다.
트랙 URL 변경은 아래의 알고리즘에서 처리됩니다.
텍스트 트랙 준비 상태는 처음에는 로드되지 않음으로 설정되며, 텍스트 트랙 모드는 처음에는 비활성화됨으로 설정됩니다.
텍스트 트랙 큐 목록은 처음에는 비어 있으며, 참조된 파일이 구문 분석될 때 동적으로 수정됩니다. 이 목록과 관련된 규칙은 해당 포맷에 적합한 텍스트 트랙 렌더링 업데이트 규칙입니다; WebVTT의 경우, 이는 WebVTT 텍스트 트랙 디스플레이 업데이트 규칙입니다. [WEBVTT]
track
요소의 상위
요소가 변경되고 새로운 상위 요소가 미디어 요소인 경우, 사용자
에이전트는 track
요소의 해당 텍스트 트랙을 미디어 요소의 텍스트 트랙 목록에 추가한 후, 미디어 요소 작업을
큐에 추가하여, 이벤트를 addtrack
이름으로 미디어 요소의 textTracks
속성의 TextTrackList
객체에서
발생시킵니다. 이때 TrackEvent
를 사용하며,
track
속성은 텍스트 트랙의 TextTrack
객체로 초기화됩니다.
track
요소의 상위
요소가 변경되고 이전 상위 요소가 미디어 요소였던 경우,
사용자 에이전트는 track
요소의 해당
텍스트 트랙을 미디어 요소의 텍스트 트랙 목록에서 제거한 후, 미디어 요소 작업을
큐에 추가하여, 이벤트를 removetrack
이름으로 미디어 요소의 textTracks
속성의 TextTrackList
객체에서 발생시킵니다. 이때 TrackEvent
를 사용하며, track
속성은 텍스트 트랙의 TextTrack
객체로 초기화됩니다.
텍스트 트랙 요소에 해당하는 텍스트 트랙이 미디어 요소의 텍스트 트랙 목록에 추가되면, 사용자 에이전트는 미디어 요소 작업을 큐에 추가하여 미디어 요소에 대해 다음 단계를 실행해야 합니다:
요소의 파서에 의해 차단됨 플래그가 true인 경우, 반환하십시오.
요소의 자동 트랙 선택 수행 플래그가 true인 경우, 반환하십시오.
이 요소에 대해 자동 텍스트 트랙 선택에 대한 사용자 기본 설정 준수를 수행하십시오.
사용자 에이전트가 미디어 요소에 대해 자동 텍스트 트랙 선택에 대한 사용자 기본 설정 준수를 수행해야 하는 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다:
자동 텍스트 트랙 선택을 자막
및 캡션
에
대해 수행하십시오.
자동 텍스트 트랙 선택을 설명
에
대해 수행하십시오.
만약 미디어 요소의 텍스트 트랙 목록에
텍스트 트랙이 있고, 그 텍스트 트랙 종류가 장
또는 메타데이터
에
해당하는 트랙 요소와 연결된 경우, 기본값
속성이 설정되어 있으며 텍스트 트랙
모드가 비활성화됨으로 설정된 모든 트랙의 텍스트 트랙 모드를 으로 설정하십시오.
요소의 자동 트랙 선택 수행 플래그를 true로 설정하십시오.
위의 단계에서 한 가지 이상의 텍스트 트랙 종류에 대해 자동 텍스트 트랙 선택 수행을 지시하는 경우, 다음 단계를 실행해야 합니다:
candidates는 미디어 요소의 텍스트 트랙 목록에 있는 텍스트 트랙으로 구성된 목록이며, 해당 목록의 텍스트 트랙 종류는 알고리즘에 전달된 종류 중 하나로 설정되어야 합니다. (해당 목록의 순서는 텍스트 트랙 목록에 주어진 순서대로 설정됩니다.)
candidates가 비어 있는 경우, 반환하십시오.
candidates에 있는 텍스트 트랙 중 하나라도 텍스트 트랙 모드가 표시됨으로 설정된 경우, 반환하십시오.
사용자가 candidates에서 텍스트 트랙 종류, 텍스트 트랙 언어, 또는 텍스트 트랙 라벨에 기반하여 트랙을 활성화하려는 의사를 표시한 경우, 해당 트랙의 텍스트 트랙 모드를 표시됨으로 설정하십시오.
예를 들어, 사용자가 "가능할 때마다 프랑스어 자막을 원합니다" 또는 "제목에 '해설'이 포함된 자막 트랙이 있으면 활성화하십시오", 또는 "오디오 설명 트랙이 있으면 하나를 활성화하십시오, 가능하면 스위스 독일어로, 그렇지 않으면 표준 스위스 독일어나 표준 독일어로"와 같은 브라우저 기본 설정을 설정했을 수 있습니다.
그렇지 않은 경우, candidates에 트랙
요소와
연결된 텍스트 트랙이 있는 경우, 그 기본값
속성이 설정되어 있고 텍스트 트랙
모드가 비활성화됨으로 설정된 첫 번째 트랙의 텍스트 트랙 모드를 표시됨으로 설정하십시오.
텍스트 트랙 요소에 해당하는 텍스트 트랙이 다음 상황 중 하나를 겪을
때, 사용자 에이전트는 해당 텍스트 트랙 및 트랙
요소에 대해 트랙 처리 모델을 시작해야 합니다:
사용자 에이전트가 텍스트 트랙과 그 트랙
요소에 대해
트랙 처리 모델을 시작해야 할 때, 다음 알고리즘을 실행해야 합니다. 이 알고리즘은 이벤트 루프 메커니즘과 밀접하게 연관되어 있으며, 특히 동기 섹션이 포함됩니다. (이 섹션은
이벤트 루프 알고리즘의 일부로 트리거됩니다.) 이 섹션의 단계는 ⌛로
표시됩니다.
이 알고리즘의 다른 인스턴스가 이미 이 텍스트 트랙과 그
트랙
요소에 대해 실행 중인 경우, 반환하고 해당 알고리즘이 이 요소를 처리하도록 합니다.
나머지 단계를 병렬로 실행하여, 이러한 단계를 실행하게 만든 원인이 계속될 수 있도록 합니다.
Top: 안정적인 상태를 기다립니다. 동기 섹션은 다음 단계로 구성됩니다. (이 섹션의 단계는 ⌛로 표시됩니다.)
⌛ 텍스트 트랙 준비 상태를 로드 중으로 설정하십시오.
⌛ URL을 트랙 URL로 설정하십시오.
⌛ 만약 트랙
요소의 부모가 미디어 요소인 경우,
corsAttributeState를 부모 미디어 요소의 crossorigin
콘텐츠 속성의 상태로 설정하십시오. 그렇지 않은 경우, corsAttributeState를 아무 CORS도 없음으로 설정하십시오.
URL이 빈 문자열이 아닌 경우:
URL, "track
", 및 corsAttributeState를 주어진 값으로 하여 잠재적인 CORS 요청을 생성하고,
same-origin fallback flag를 설정하십시오.
request의 시작자 유형을 "track
"로 설정하십시오.
Fetch request.
데이터가 페치되면서 처리하도록 작업을 큐에 추가한 후, 리소스 유형을 결정해야 합니다. 만약 리소스 유형이 지원되지 않는 텍스트 트랙 형식이라면 로드는 실패할 것이며, 이는 아래에 설명된 대로입니다. 그렇지 않으면 리소스 데이터는 WebVTT 파서와 같은 적절한 파서로 전달되어야 하며, 이 데이터는 수신된 대로 텍스트 트랙 큐 목록을 사용하여 파싱됩니다. [WEBVTT]
적절한 파서는 이러한 네트워킹 작업 소스에서 작업이 실행될 때마다 수신된 데이터로 텍스트 트랙 큐 목록을 점진적으로 업데이트합니다.
이 명세는 현재 텍스트 트랙의 MIME 유형을 확인하는 방법이나 실제 파일 데이터를 사용하여 파일 형식 감지(sniffing)를 수행하는 방법에 대해 명시하지 않습니다. 구현자들은 이 문제에 대해 서로 다른 의도를 가지고 있으며, 따라서 올바른 해결책이 무엇인지 불분명합니다. 이와 관련한 요구 사항이 없는 경우, HTTP 명세서의 엄격한 요구 사항이 우선됩니다("Content-Type은 기본 데이터의 미디어 유형을 지정합니다."... "미디어 유형이 Content-Type 필드에 의해 주어지지 않은 경우에만, 수신자는 리소스의 내용 및/또는 리소스를 식별하는 데 사용된 URI의 이름 확장자 등을 검사하여 미디어 유형을 추측할 수 있습니다.").
만약 어떤 이유로든 페치가 실패하면(네트워크 오류, 서버에서 오류 코드 반환, CORS 실패 등), 또는 URL이 빈 문자열인 경우, 요소 작업을 큐에 추가하여 DOM 조작 작업 소스에 미디어 요소를 주어, 먼저 텍스트 트랙 준비 상태를 로드 실패로 변경한 다음 이벤트를 발생시킵니다.
만약 페치가 실패하지 않고, 파일이 성공적으로 처리되었다면, 마지막 작업이 요소 작업을 큐에 추가하고, 네트워킹 작업 소스에서 데이터를 파싱한 후, 텍스트 트랙 준비 상태를 로드 완료로 변경하고 이벤트를 발생시킵니다.
페치가 진행 중일 때 다음 중 하나가 발생하면:
...사용자 에이전트는 페칭을 중단하고, 해당
알고리즘에서 생성된 모든 대기 중인 작업을
취소하며(특히 URL이 변경된 순간 이후에 텍스트 트랙 큐 목록에 추가된 큐는 제외), 요소 작업을 큐에 추가하여 DOM 조작 작업 소스에 트랙
요소를 주고, 먼저 텍스트 트랙 준비 상태를 로드
실패로 변경한 후 이벤트를
발생시킵니다.
텍스트 트랙 준비 상태가 더 이상 로드 중으로 설정되지 않을 때까지 기다립니다.
트랙 URL이 더 이상 URL과 같지 않게 되고, 동시에 텍스트 트랙 모드가 또는 표시됨으로 설정될 때까지 기다립니다.
top으로 이동합니다.
언제든지 트랙
요소가
src
속성을 설정, 변경, 또는
제거하면, 사용자 에이전트는 즉시 해당 요소의 텍스트 트랙의 텍스트 트랙 큐 목록을
비워야 합니다. (이 또한 위 알고리즘이 이전에 제공된 URL을 사용하여 얻어진 리소스에서 큐를 추가하는 것을 중지시킵니다.)
HTML 사용자 에이전트에 의해 처리되기 위해 특정 형식의 텍스트 트랙 큐가 어떻게 해석되어야 하는지는 해당 형식에 의해 정의됩니다. 이러한 사양이 없는 경우, 이 섹션은 구현이 일관되게 이러한 형식을 노출하려고 시도할 수 있는 제약을 제공합니다.
HTML의 텍스트 트랙 모델을 지원하기 위해, 각 타이밍 데이터 단위는 텍스트 트랙 큐로 변환됩니다. 해당 형식의 기능과 이 사양에 정의된 텍스트 트랙 큐의 각 측면 간의 매핑이 정의되지 않은 경우, 구현은 이러한 매핑이 앞서 정의된 텍스트 트랙 큐의 측면 정의와 일치하도록 해야 하며, 다음 제약 조건과도 일치하도록 해야 합니다:
해당 형식에 명확한 큐별 식별자가 없는 경우, 이를 빈 문자열로 설정해야 합니다.
False로 설정해야 합니다.
모든 최신 엔진에서 지원.
[Exposed =Window ]
interface TextTrackList : EventTarget {
readonly attribute unsigned long length ;
getter TextTrack (unsigned long index );
TextTrack ? getTrackById (DOMString id );
attribute EventHandler onchange ;
attribute EventHandler onaddtrack ;
attribute EventHandler onremovetrack ;
};
media.textTracks.length
모든 최신 엔진에서 지원.
미디어 요소에 연결된 텍스트 트랙의 수를 반환합니다. (예: track
요소에서). 이는 텍스트 트랙의 수입니다. 미디어 요소의 텍스트 트랙 목록.
media.textTracks[ n ]
textTrack = media.textTracks.getTrackById(id)
모든 최신 엔진에서 지원.
지정된 식별자를 가진 TextTrack
객체를 반환하거나, 해당
식별자를 가진 트랙이 없으면 null을 반환합니다.
TextTrackList
객체는 주어진 순서에 따라 텍스트 트랙의 동적으로 업데이트되는 목록을 나타냅니다.
textTracks
속성은 미디어 요소의 TextTrackList
객체를 반환해야 합니다. TextTrack
객체를 텍스트 트랙에 대해, 미디어
요소의 텍스트 트랙 목록에서 반환합니다. 이는 텍스트 트랙 목록의 동일한 순서로 반환됩니다.
모든 최신 엔진에서 지원.
length
속성은
TextTrackList
객체가 나타내는 목록에 있는 텍스트 트랙의 수를 반환해야 합니다.
지원되는 속성 인덱스는 TextTrackList
객체의 현재 순간에 0부터 텍스트 트랙 수까지의 숫자입니다. 목록에 텍스트 트랙이 없으면 지원되는 속성 인덱스는 없습니다.
인덱스 속성의 값을 결정하려면 주어진 인덱스 index에 대해
TextTrackList
객체가 나타내는 목록의
index번째 텍스트 트랙을 반환해야 합니다.
getTrackById(id)
메서드는 TextTrack
의 TextTrackList
객체에서 첫 번째 id
IDL 속성이 인자 id와 같은 값을
반환하는 트랙을 반환해야 합니다. 일치하는 트랙이 없을 경우 메서드는 null을 반환해야 합니다.
모든 최신 엔진에서 지원.
enum TextTrackMode { " disabled " , " hidden " , " showing " };
enum TextTrackKind { " subtitles " , " captions " , " descriptions " , " chapters " , " metadata " };
[Exposed =Window ]
interface TextTrack : EventTarget {
readonly attribute TextTrackKind kind ;
readonly attribute DOMString label ;
readonly attribute DOMString language ;
readonly attribute DOMString id ;
readonly attribute DOMString inBandMetadataTrackDispatchType ;
attribute TextTrackMode mode ;
readonly attribute TextTrackCueList ? cues ;
readonly attribute TextTrackCueList ? activeCues ;
undefined addCue (TextTrackCue cue );
undefined removeCue (TextTrackCue cue );
attribute EventHandler oncuechange ;
};
textTrack = media.addTextTrack(kind [, label [, language ] ])
새로운 TextTrack
객체를 생성하고 반환하며, 이 객체는 또한
미디어 요소의 텍스트 트랙 목록에 추가됩니다.
textTrack.kind
모든 최신 엔진에서 지원.
텍스트 트랙의 종류 문자열을 반환합니다.
textTrack.label
모든 최신 엔진에서 지원.
텍스트 트랙 라벨을 반환합니다(있는 경우). 그렇지 않으면 빈 문자열을 반환합니다. (이는 객체가 사용자에게 노출될 경우 다른 속성에서 맞춤 라벨을 생성해야 함을 나타냅니다.)
textTrack.language
모든 최신 엔진에서 지원.
텍스트 트랙 언어 문자열을 반환합니다.
textTrack.id
모든 최신 엔진에서 지원.
주어진 트랙의 ID를 반환합니다.
인밴드 트랙의 경우, 형식이 미디어 프래그먼트 구문을 지원하는 경우, 해당 ID는 프래그먼트와 함께 사용할 수 있습니다. 이 값은 getTrackById()
메서드와 함께 사용할 수 있습니다.
textTrack.inBandMetadataTrackDispatchType
TextTrack/inBandMetadataTrackDispatchType
텍스트 트랙 인밴드 메타데이터 트랙 디스패치 유형 문자열을 반환합니다.
textTrack.mode [ = value ]
모든 최신 엔진에서 지원.
텍스트 트랙 모드 문자열을 반환합니다. 다음 목록에서:
disabled
"
텍스트 트랙 비활성화 모드.
모드.
showing
"
텍스트 트랙 표시 모드.
모드를 변경하기 위해 설정할 수 있습니다.
textTrack.cues
모든 최신 엔진에서 지원.
텍스트 트랙 큐 목록을 TextTrackCueList
객체로
반환합니다.
textTrack.activeCues
모든 최신 엔진에서 지원.
텍스트 트랙 큐 중 현재 활성화된 큐를 텍스트 트랙 큐 목록에서 TextTrackCueList
객체로
반환합니다. (즉, 현재 재생 위치
전후에 시작하고 끝나는 큐).
textTrack.addCue(cue)
모든 최신 엔진에서 지원.
주어진 큐를 textTrack의 텍스트 트랙 큐 목록에 추가합니다.
textTrack.removeCue(cue)
모든 최신 엔진에서 지원.
주어진 큐를 textTrack의 텍스트 트랙 큐 목록에서 제거합니다.
addTextTrack(kind, label,
language)
메서드를 미디어 요소에서 호출하면 다음
단계를 수행해야 합니다:
새로운 TextTrack
객체를 생성합니다.
새 텍스트 트랙을 생성하고, 그 객체에 해당하는 트랙의 텍스트 트랙 종류를 kind로 설정합니다. 텍스트 트랙 라벨을 label로, 텍스트 트랙 언어를 language로 설정하고, 텍스트 트랙 준비 상태를 텍스트 트랙 로드됨 상태로, 텍스트 트랙 모드를 모드로, 그리고 텍스트 트랙 큐 목록을 빈 목록으로 설정합니다.
초기에는 텍스트 트랙 큐 목록이 텍스트 트랙 렌더링 업데이트 규칙과 연결되지 않습니다. 텍스트 트랙 큐가 추가되면, 텍스트 트랙 큐 목록에 규칙이 영구적으로 설정됩니다.
미디어 요소 작업 큐를 미디어 요소에서 주어졌을 때, 이벤트를 발생시키는 작업을 수행합니다. 이 이벤트는 addtrack
이라는 이름의
이벤트로, 미디어 요소의 textTracks
속성의
TextTrackList
객체에서 발생하며,
TrackEvent
를 사용하여, track
속성이 새 텍스트 트랙의 TextTrack
객체로 초기화됩니다.
새 TextTrack
객체를 반환합니다.
kind
속성은 텍스트 트랙 종류
를 반환해야 하며, 이는
TextTrack
객체가 나타내는 텍스트 트랙에 해당합니다.
label
속성은 텍스트 트랙 레이블
을 반환해야 하며, 이는
TextTrack
객체가 나타내는 텍스트 트랙에 해당합니다.
language
속성은 텍스트 트랙 언어
를 반환해야 하며, 이는
TextTrack
객체가 나타내는 텍스트 트랙에 해당합니다.
id
속성은 트랙의 식별자를 반환합니다. 만약 식별자가 없다면 빈 문자열을 반환합니다. track
요소에 해당하는 트랙의 경우, 트랙의 식별자는 해당 요소의 id
속성 값입니다. 인밴드 트랙의 경우, 트랙의 식별자는
미디어 리소스에 의해 지정됩니다. 만약 미디어 리소스가 미디어 프래그먼트 구문을
지원하는 형식이라면, 특정 트랙에 대해 반환되는 식별자는 해당 트랙을 활성화하는 데 사용될 수 있는 동일한 식별자여야 합니다.
inBandMetadataTrackDispatchType
속성은 인밴드
메타데이터 트랙 디스패치 타입을 반환해야 하며, 이는 TextTrack
객체가 나타내는 텍스트 트랙에 해당합니다.
mode
속성은 텍스트 트랙 모드
에 해당하는 문자열을 반환해야 하며, 이는
TextTrack
객체가 나타내는 텍스트 트랙에 정의된 목록에 따라 반환됩니다:
disabled
"
hidden
"
showing
"
설정 시, 새로운 값이 현재 속성이 반환하는 값과 다르다면, 새로운 값은 다음과 같이 처리되어야 합니다:
disabled
"인 경우
TextTrack
객체에 해당하는
텍스트 트랙 모드
를 비활성화 모드로 설정합니다.
hidden
"인 경우
TextTrack
객체에 해당하는
텍스트 트랙 모드
를 숨김 모드로 설정합니다.
showing
"인 경우
TextTrack
객체에 해당하는
텍스트 트랙 모드
를 표시 모드로 설정합니다.
만약 TextTrack
객체가 나타내는 텍스트 트랙의
텍스트 트랙 모드
가 비활성화 모드가 아닌 경우,
cues
속성은 TextTrackCueList 객체를 반환해야 하며, 이는 해당
TextTrack
객체가 나타내는 텍스트 트랙의 특정 종료 시간 이후에 발생하는 자막을 포함하는 목록을 나타냅니다. 그렇지 않으면 null을 반환해야 합니다. 각
TextTrack
객체에 대해 객체가 반환될 때마다 동일한
TextTrackCueList
객체가 반환되어야 합니다.
스크립트가 시작된 시점의 가능한 가장 이른 위치는 마지막으로 이벤트 루프가 1단계에 도달했을 때의 가능한 가장 이른 위치입니다.
만약 TextTrack
객체가 나타내는 텍스트 트랙의
텍스트 트랙 모드
가 비활성화 모드가 아닌 경우,
activeCues
속성은 TextTrackCueList 객체를 반환해야 하며, 이는 해당
TextTrack
객체가 나타내는 텍스트 트랙의 현재 활성화된 자막 목록을 나타냅니다.
그렇지 않으면 null을 반환해야 합니다. 각 TextTrack
객체에 대해 객체가 반환될 때마다 동일한
TextTrackCueList
객체가 반환되어야 합니다.
텍스트 트랙 자막의 활성 플래그가 스크립트가 시작된 시점에 설정된 경우는 마지막으로 이벤트 루프가 1단계에 도달했을 때 텍스트 트랙 자막 활성 플래그가 설정된 경우입니다.
TextTrack
객체의 addCue(cue)
메서드는 다음 단계를 실행해야 합니다:
만약 텍스트 트랙 자막 목록이 아직 텍스트 트랙 렌더링 업데이트 규칙과 연결되지 않았다면, cue에 적합한 규칙과 연결합니다.
만약 텍스트 트랙 자막 목록과 연결된 규칙이 cue에 적합한 규칙과 다르다면,
InvalidStateError
DOMException
을 발생시킵니다.
주어진 cue가 이미 텍스트 트랙 자막 목록에 있는 경우, 해당 목록에서 cue를 제거합니다.
TextTrack
객체의 removeCue(cue)
메서드는 다음 단계를 실행해야 합니다:
주어진 cue가 TextTrack
객체의 텍스트 트랙의
텍스트 트랙 자막 목록에 없는 경우, NotFoundError
DOMException
을 발생시킵니다.
cue를 TextTrack
객체의 텍스트 트랙의 텍스트 트랙 자막 목록에서 제거합니다.
이 예제에서는 audio
요소를 사용하여 여러 사운드 효과가 포함된 사운드 파일에서 특정 사운드 효과를
재생합니다. 스크립트를 실행 중인 브라우저에서 클립이 끝나는 시점에 오디오가 정확하게 일시 정지되도록 하기 위해 자막을 사용합니다. 페이지가 스크립트에 의존하여 오디오를 일시 정지시켰다면,
브라우저가 정확한 시간에 스크립트를 실행하지 못했을 경우 다음 클립의 시작 부분이 들릴 수 있습니다.
var sfx = new Audio( 'sfx.wav' );
var sounds = sfx. addTextTrack( 'metadata' );
// 관심 있는 사운드를 추가합니다.
function addFX( start, end, name) {
var cue = new VTTCue( start, end, '' );
cue. id = name;
cue. pauseOnExit = true ;
sounds. addCue( cue);
}
addFX( 12.783 , 13.612 , 'dog bark' );
addFX( 13.612 , 15.091 , 'kitten mew' );
function playSound( id) {
sfx. currentTime = sounds. getCueById( id). startTime;
sfx. play();
}
// 가능한 빨리 짖는 소리를 재생합니다.
sfx. oncanplaythrough = function () {
playSound( 'dog bark' );
}
// 사용자가 떠나려 할 때 고양이 울음 소리를 재생하고, 브라우저가 그들에게 머물도록 요청하게 합니다.
window. onbeforeunload = function ( e) {
playSound( 'kitten mew' );
e. preventDefault();
}
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface TextTrackCueList {
readonly attribute unsigned long length ;
getter TextTrackCue (unsigned long index );
TextTrackCue ? getCueById (DOMString id );
};
cuelist.length
목록의 큐 수를 반환합니다.
cuelist[index]
목록의 index에 있는 텍스트 트랙 큐를 반환합니다. 큐는 텍스트 트랙 큐 순서로 정렬되어 있습니다.
cuelist.getCueById(id)
id로 식별되는 첫 번째 텍스트 트랙 큐를 텍스트 트랙 큐 순서에서 반환합니다.
주어진 식별자가 없거나 인수가 빈 문자열일 경우 null을 반환합니다.
TextTrackCueList
객체는 지정된 순서로 텍스트 트랙 큐의 동적으로 업데이트되는 목록을 나타냅니다.
모든 현재 엔진에서 지원됩니다.
length
속성은 TextTrackCueList
객체가 나타내는 목록의 큐 수를 반환해야 합니다.
TextTrackCueList
객체의 지원되는 속성 인덱스는 TextTrackCueList
객체가
나타내는 목록의 큐 수에서 하나를 뺀 값입니다. 목록에 큐가 없는 경우 지원되는 속성 인덱스는 없습니다.
주어진 index에 대해 인덱스된 속성의 값을 결정하기 위해 사용자 에이전트는 목록에서 index번째 텍스트 트랙 큐를 반환해야 합니다.
모든 현재 엔진에서 지원됩니다.
getCueById(id)
메서드는 빈 문자열이 아닌 인수를 사용하여 호출될 때, 목록에서 첫 번째 텍스트 트랙 큐를 반환해야 하며, id가 일치하는 경우 null을 반환해야 합니다. 인수가 빈 문자열인
경우 이 메서드는 null을 반환해야 합니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface TextTrackCue : EventTarget {
readonly attribute TextTrack ? track ;
attribute DOMString id ;
attribute double startTime ;
attribute unrestricted double endTime ;
attribute boolean pauseOnExit ;
attribute EventHandler onenter ;
attribute EventHandler onexit ;
};
cue.track
cue.id [ = value ]
텍스트 트랙 큐 식별자를 반환합니다.
설정할 수 있습니다.
cue.startTime [ = value ]
초 단위로 텍스트 트랙 큐 시작 시간을 반환합니다.
설정할 수 있습니다.
cue.endTime [ = value ]
초 단위로 텍스트 트랙 큐 종료 시간을 반환합니다.
설정할 수 있습니다.
cue.pauseOnExit [ = value ]
이 텍스트 트랙 큐의 종료 시간에 도달했을 때 미디어 재생이 일시 중지되어야 하는지 여부를 나타내는 플래그를 반환합니다.
설정할 수 있습니다.
모든 현재 엔진에서 지원됩니다.
track
속성은 가져올 때 TextTrack
객체를 반환해야 합니다.
이 객체는 텍스트 트랙 중에서
큐 목록에 속한
텍스트 트랙 큐를 나타내는
TextTrackCue
객체를 나타냅니다.
해당하는 것이 없으면 null을 반환합니다.
모든 현재 엔진에서 지원됩니다.
id
속성은 가져올 때 텍스트 트랙 큐 식별자를
반환해야 합니다.
이는 텍스트 트랙 큐를 나타내며,
TextTrackCue
객체에 의해 나타내어집니다.
설정할 때, 텍스트 트랙 큐 식별자는 새로운
값으로 설정되어야 합니다.
모든 현재 엔진에서 지원됩니다.
startTime
속성은 가져올 때 텍스트 트랙 큐 시작 시간을
반환해야 합니다.
이는 텍스트 트랙 큐를 나타내며,
TextTrackCue
객체에 의해 나타내어집니다.
설정할 때, 텍스트 트랙 큐 시작 시간은 새로운
값으로 설정되어야 하며,
이는 초 단위로 해석됩니다. 그런 다음,
TextTrackCue
객체의
텍스트 트랙 큐가
텍스트 트랙의
큐 목록에 있고,
그 트랙이 미디어 요소의
텍스트 트랙 목록에 있으며,
미디어 요소의
포스터 표시 플래그가 설정되어 있지 않은 경우,
해당 미디어 요소에 대한
시간은 흐릅니다 단계를 실행합니다.
모든 현재 엔진에서 지원됩니다.
endTime
속성은 가져올 때 텍스트 트랙 큐 종료 시간을 반환해야
합니다.
이는 텍스트 트랙 큐를 나타내며,
TextTrackCue
객체에 의해 나타내어집니다.
설정할 때, 만약 새 값이 음의 무한대이거나 NaN(숫자가 아님) 값이면,
TypeError 예외를 던집니다.
그렇지 않으면, 텍스트 트랙 큐 종료 시간은 새 값으로
설정됩니다.
그런 다음, TextTrackCue
객체의
텍스트 트랙 큐가
텍스트 트랙의
큐 목록에 있고,
그 트랙이 미디어 요소의
텍스트 트랙 목록에 있으며,
미디어 요소의
포스터 표시 플래그가 설정되어 있지 않은 경우,
해당 미디어 요소에 대한
시간은 흐릅니다 단계를 실행합니다.
모든 현재 엔진에서 지원됩니다.
pauseOnExit
속성은 가져올 때 true를 반환해야 합니다.
이는 텍스트 트랙 큐 종료
시 중지 플래그가 설정되어 있는 경우입니다.
그렇지 않은 경우에는 false를 반환해야 합니다.
설정할 때, 새 값이 true이면 텍스트 트랙 큐 종료 시 중지 플래그를 설정하고,
그렇지 않으면 플래그를 해제해야 합니다.
다음은 모든 TextTrackList
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL 속성으로 지원되어야 하는
이벤트 핸들러와 이에 대응하는 이벤트 핸들러 이벤트 유형입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onchange |
change |
onaddtrack |
addtrack |
onremovetrack |
removetrack
|
다음은 모든 TextTrack
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL 속성으로 지원되어야
하는 이벤트 핸들러와 이에 대응하는 이벤트 핸들러 이벤트 유형입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
oncuechange
모든 현재 엔진에서 지원됩니다. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
cuechange |
다음은 모든 TextTrackCue
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL 속성으로 지원되어야
하는 이벤트 핸들러와 이에 대응하는 이벤트 핸들러 이벤트 유형입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onenter
모든 현재 엔진에서 지원됩니다. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
enter |
onexit
모든 현재 엔진에서 지원됩니다. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
exit |
이 섹션은 비규범적입니다.
텍스트 트랙은 미디어 데이터와 관련된 데이터를 저장하는 데 사용될 수 있으며, 상호작용 또는 증강된 뷰를 위한 정보를 제공할 수 있습니다.
예를 들어, 스포츠 방송을 보여주는 페이지에는 현재 점수에 대한 정보가 포함될 수 있습니다. 로봇 대회가 실시간으로 스트리밍되고 있다고 가정해봅시다. 이미지 위에 점수가 다음과 같이 오버레이될 수 있습니다:
사용자가 비디오의 임의의 지점으로 탐색할 때 점수 표시가 올바르게 렌더링되도록 하려면 메타데이터 텍스트 트랙 큐의 길이가 점수에 적합하도록 설정되어야 합니다. 예를 들어, 위의 프레임에서는 매치 번호를 표시하는 큐는 경기 시간 동안 지속되고, 블루 얼라이언스의 점수가 변경될 때까지 지속되는 큐가 하나 있으며, 레드 얼라이언스의 점수가 변경될 때까지 지속되는 큐가 하나 있을 수 있습니다. 비디오가 라이브 이벤트의 스트림일 경우, 오른쪽 하단의 시간은 아마도 큐를 기반으로 하지 않고 현재 비디오 시간에서 자동으로 유도될 것입니다. 그러나 비디오가 하이라이트만을 포함하는 경우, 이러한 정보도 큐에 포함될 수 있습니다.
다음은 이와 같은 내용이 WebVTT 파일에서 어떻게 나타날 수 있는지 보여줍니다:
WEBVTT ... 05:10:00.000 --> 05:12:15.000 matchtype:qual matchnumber:37 ... 05:11:02.251 --> 05:11:17.198 red:78 05:11:03.672 --> 05:11:54.198 blue:66 05:11:17.198 --> 05:11:25.912 red:80 05:11:25.912 --> 05:11:26.522 red:83 05:11:26.522 --> 05:11:26.982 red:86 05:11:26.982 --> 05:11:27.499 red:89 ...
여기서 중요한 점은 관련 이벤트가 적용되는 시간 동안 정보를 제공하는 큐가 설정된다는 것입니다. 만약 점수가 05:11:17.198에 "red+2", 05:11:25.912에 "red+3" 등으로 변경될 때, 0길이(또는 매우 짧은 거의 0길이)의 큐로 설정된다면 문제점이 발생합니다. 주로 탐색을 구현하기가 훨씬 어려워지며, 스크립트가 모든 큐 목록을 순회하여 놓친 알림이 없는지 확인해야 하기 때문입니다. 또한 큐가 짧으면 스크립트가 이를 활성화된 상태로 인식하지 못할 수 있습니다.
이와 같은 방식으로 큐를 사용할 때, 작성자는 현재 주석을 업데이트하기 위해 cuechange
이벤트를 사용하는 것이 좋습니다. 특히, timeupdate
이벤트를 사용하는 것은 적절하지 않을 수 있습니다. 이는 큐가 변경되지 않았을 때에도 작업을 수행해야 하며, 더 중요한 것은 timeupdate
이벤트가 속도 제한을 받기 때문에 메타데이터 큐가 활성화된 시점과 디스플레이가 업데이트되는 시점 사이에 더 높은 지연을 초래할 수 있기 때문입니다.
다른 명세서나 포맷에서 AudioTrack
kind
또는 VideoTrack
kind
IDL 속성의 반환 값을 식별하거나 텍스트 트랙의
종류를 식별하기 위해 URL이 필요한 경우, about:html-kind
URL을 사용해야 합니다.
controls
속성은
불리언 속성입니다. 이 속성이 존재할 경우, 저자가 스크립트로 제어할 수 없는
컨트롤러를 제공하지 않았음을 나타내며, 사용자 에이전트가 자체 컨트롤 세트를 제공하기를 원한다는 의미입니다.
이 속성이 존재하거나 스크립트가 비활성화된 경우 미디어 요소에 대해 사용자 에이전트는 사용자에게 사용자 인터페이스를 노출해야 합니다. 이 인터페이스는 재생 시작, 일시 정지, 콘텐츠에서 임의의 위치로 탐색, 볼륨 변경, 닫힌 자막이나 내장된 수화 트랙의 표시 변경, 다른 오디오 트랙 선택 또는 오디오 설명 켜기, 전체 화면 비디오나 독립된 크기 조절 가능한 창 등 사용자에게 더 적합한 방식으로 미디어 콘텐츠를 표시하는 기능을 포함해야 합니다. 또한 다른 컨트롤도 제공될 수 있습니다.
그러나 이 속성이 없더라도 사용자 에이전트는 미디어 리소스 재생에 영향을 미치는 컨트롤(예: 재생, 일시 정지, 탐색, 트랙 선택, 볼륨 조절)을 제공할 수 있습니다. 이러한 기능은 페이지의 정상적인
렌더링을 방해하지 않아야 합니다. 예를 들어, 이러한 기능은 미디어 요소의 컨텍스트 메뉴,
플랫폼 미디어 키 또는 리모컨에 노출될 수 있습니다. 사용자 에이전트는 이 기능을 간단히 사용자에게 사용자 인터페이스를 노출함으로써 구현할 수 있습니다(예를 들어 controls
속성이 존재하는 것처럼).
사용자 에이전트가 사용자 인터페이스를 사용자에게 노출하여 미디어 요소에 대해 컨트롤을 표시하는 경우, 사용자 에이전트가 이 인터페이스와 상호작용할 때 모든 사용자 상호작용 이벤트를
억제해야 합니다. (예를 들어, 사용자가 비디오의 재생 컨트롤을 클릭할 때, mousedown
이벤트 등이 페이지의 다른 요소에서 동시에 발생하지 않아야 합니다.)
가능한 경우(특히 재생 시작, 정지, 일시 정지, 재개, 탐색, 재생 속도 변경, 빠른 감기 또는 되감기, 텍스트 트랙 나열, 활성화 및 비활성화, 음소거 또는 오디오 볼륨 변경) 사용자 에이전트가 노출하는 사용자 인터페이스 기능은 위에서 설명한 DOM API를 통해 구현되어야 하며, 예를 들어 동일한 이벤트가 모두 발생해야 합니다.
빠른 감기나 되감기와 같은 기능은 playbackRate
속성만 변경하여 구현해야 하며, defaultPlaybackRate
속성은 변경하지 않아야 합니다.
탐색은 탐색을 통해 요청된 위치로 미디어 요소의 미디어 타임라인에서 탐색해야 합니다. 임의의 위치로의 탐색이 느린 미디어 리소스의 경우, 사용자 에이전트는 탐색 막대와 같은 근사 위치 인터페이스를 사용자가 조작할 때 속도를 위한 근사 플래그를 사용하는 것이 좋습니다.
모든 최신 엔진에서 지원됩니다.
controls
IDL
속성은 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
media.volume [ = value ]
모든 최신 엔진에서 지원됩니다.
현재 재생 볼륨을 반환합니다. 반환 값은 0.0에서 1.0 범위의 숫자로, 0.0이 가장 조용하고 1.0이 가장 큽니다.
설정할 수 있으며, 볼륨을 변경합니다.
새 값이 0.0에서 1.0 범위 내에 없을 경우, "IndexSizeError
" DOMException
예외가 발생합니다.
media.muted [ = value ]
모든 최신 엔진에서 지원됩니다.
오디오가 음소거된 경우 true를 반환하며, 이는 volume
속성을 무시하게 됩니다. 음소거되지
않은 경우 volume
속성이 반영됩니다.
설정할 수 있으며, 오디오가 음소거된 상태를 변경할 수 있습니다.
미디어 요소는 0.0(무음)에서 1.0(가장 큰 소리) 범위의 비율로 표현되는 재생 볼륨을 가지고 있습니다. 초기 볼륨은 1.0이어야 하지만, 사용자 에이전트는 세션 간 또는 사이트별로 마지막 설정 값을 기억하여 다른 값으로 시작할 수 있습니다.
volume
IDL 속성은
재생 볼륨을 반환해야 합니다. 설정 시, 새로운 값이 0.0에서 1.0
범위 내에 있다면 미디어 요소의 재생 볼륨을 해당 값으로 설정해야 합니다. 새로운 값이 0.0에서 1.0 범위 밖에 있다면, 설정 시 "IndexSizeError
" DOMException
예외를 발생시켜야 합니다.
미디어 요소는 음소거될 수도 있습니다. 어떤 요소가 요소를 음소거하고 있다면, 그 요소는 음소거됩니다. (예를 들어, 재생 방향이 역방향일 때, 해당 요소는 음소거됩니다.)
muted
IDL 속성은
마지막으로 설정된 값을 반환해야 합니다. 미디어 요소가 생성될 때, 요소에 muted
콘텐츠 속성이 지정되어 있으면, muted
IDL 속성을 true로 설정해야 합니다. 그렇지 않은
경우, 사용자 에이전트는 사용자의 선호도에 따라 값을 설정할 수 있습니다(예: 세션 간 또는 사이트별로 마지막 설정 값을 기억). muted
IDL 속성이 true로 설정된 동안 미디어 요소는 음소거되어야 합니다.
volume
및 muted
IDL 속성이 반환하는 값이 변경될 때마다, 사용자
에이전트는 미디어 요소 작업을 큐에 추가해야
하며, 미디어 요소에서 이벤트를 발생시켜야 합니다. 그런 다음, 미디어 요소가 재생이 허용되지 않는 경우, 사용자 에이전트는 내부 일시 정지 단계를 수행해야 합니다.
사용자 에이전트는 볼륨 잠금(불리언)을 가지고 있습니다. 이 값은 구현 정의이며, 재생 볼륨이 적용되는지 여부를 결정합니다.
요소의 유효한 미디어 볼륨은 다음과 같이 결정됩니다:
사용자가 사용자 에이전트가 요소의 볼륨을 재정의하도록 지정한 경우, 사용자가 원하는 볼륨을 반환합니다.
사용자 에이전트의 볼륨 잠금이 true인 경우, 시스템 볼륨을 반환합니다.
요소의 오디오 출력이 음소거된 경우, 0을 반환합니다.
volume을 재생 볼륨으로 설정합니다. 이 값은 미디어 요소의 오디오 부분에서 0.0(무음)에서 1.0(가장 큰 소리) 범위 내에 있습니다.
volume 값을 반환합니다. 이 값은 0.0(무음)에서 1.0(가장 큰 소리) 범위 내에서 해석됩니다. 0.0은 무음이고 1.0은 가장 큰 소리이며, 그 사이의 값은 음량이 증가합니다. 이 범위는 선형일 필요는 없습니다. 가장 큰 소리는 시스템의 가장 큰 가능한 설정보다 낮을 수 있습니다. 예를 들어, 사용자가 최대 볼륨을 설정했을 수 있습니다.
muted
콘텐츠 속성은 미디어 요소에 있으며, 불리언 속성으로 미디어 리소스의 오디오 출력을 기본적으로 음소거할지를 제어하며, 사용자 선호도를 무시할 수 있습니다.
모든 최신 엔진에서 지원됩니다.
defaultMuted
IDL 속성은 반영해야 합니다. muted
콘텐츠 속성을 반영합니다.
이 속성은 동적 효과가 없습니다(요소의 기본 상태만 제어합니다).
이 비디오(광고)는 자동으로 재생되지만, 사용자에게 불쾌감을 주지 않기 위해 소리를 끄고 재생되며, 사용자가 소리를 켤 수 있습니다. 사용자 에이전트는 사용자가 상호작용하지 않은 상태에서 소리가 켜지면 비디오를 일시 정지할 수 있습니다.
< video src = "adverts.cgi?kind=video" controls autoplay loop muted ></ video >
모든 최신 엔진에서 지원됩니다.
TimeRanges
인터페이스를 구현하는 객체는 시간의 범위(기간) 목록을 나타냅니다.
[Exposed =Window ]
interface TimeRanges {
readonly attribute unsigned long length ;
double start (unsigned long index );
double end (unsigned long index );
};
media.length
모든 최신 엔진에서 지원됩니다.
객체 내의 범위 수를 반환합니다.
time = media.start(index)
모든 최신 엔진에서 지원됩니다.
지정된 인덱스의 범위 시작 시간을 반환합니다.
인덱스가 범위를 벗어나면 "IndexSizeError
" DOMException
을
발생시킵니다.
time = media.end(index)
모든 최신 엔진에서 지원됩니다.
지정된 인덱스의 범위 끝 시간을 반환합니다.
인덱스가 범위를 벗어나면 "IndexSizeError
" DOMException
을
발생시킵니다.
length
IDL 속성은
객체가 나타내는 범위의 수를 반환해야 합니다.
start(index)
메서드는 객체가 나타내는 index번째 범위의 시작 위치를
반환해야 합니다. 이 위치는 객체가 포함하는 타임라인의 시작부터 초 단위로 측정됩니다.
end(index)
메서드는 객체가 나타내는 index번째 범위의 끝 위치를 반환해야 합니다. 이 위치는 객체가 포함하는 타임라인의 시작부터 초 단위로 측정됩니다.
이 메서드들은 index 인자가 객체가 나타내는 범위 수보다 크거나 같은 값으로 호출될 경우 "IndexSizeError
" DOMException
을
발생시켜야 합니다.
TimeRanges
객체가 정규화된 TimeRanges
객체로 정의될 때, 그 객체가 나타내는 범위는 다음 기준을 충족해야
합니다:
즉, 이러한 객체 내의 범위는 정렬되어 있으며, 겹치지 않고, 서로 맞닿지 않습니다(인접한 범위는 하나의 더 큰 범위로 통합됩니다). 범위는 비어 있을 수 있습니다(단일 시간 순간만 참조). 예를 들어, 사용자 에이전트가 미디어 요소가 일시 정지된 상태에서 현재 프레임을 제외한 모든 미디어 리소스를 삭제한 경우, 현재 프레임만이 버퍼링된 경우를 나타낼 수 있습니다.
TimeRanges
객체의 범위는 포함적이어야 합니다.
따라서 범위의 끝은 다음 인접 범위(겹치지 않지만 맞닿아 있는)의 시작과 같아야 합니다. 마찬가지로, 타임라인 전체를 포함하는 범위가 0에서 시작되는 경우, 시작은 0이고 끝은 타임라인의 지속 시간과 같아야 합니다.
buffered
, seekable
, 및 played
IDL 속성에 의해 반환되는 객체들이 사용하는 타임라인은
해당 요소의 미디어 타임라인이어야 합니다.
TrackEvent
인터페이스모든 최신 엔진에서 지원됩니다.
[Exposed =Window ]
interface TrackEvent : Event {
constructor (DOMString type , optional TrackEventInit eventInitDict = {});
readonly attribute (VideoTrack or AudioTrack or TextTrack )? track ;
};
dictionary TrackEventInit : EventInit {
(VideoTrack or AudioTrack or TextTrack )? track = null ;
};
event.track
모든 최신 엔진에서 지원됩니다.
이벤트와 관련된 트랙 객체(TextTrack
,
AudioTrack
, 또는
VideoTrack
)를 반환합니다.
track
속성은 초기화된 값을
반환해야 합니다. 이 속성은 이벤트에 대한 컨텍스트 정보를 나타냅니다.
이 섹션은 규범적이지 않습니다.
다음 이벤트는 위에서 설명한 처리 모델의 일부로서 미디어 요소에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 | 선행 조건 |
---|---|---|---|
loadstart
HTMLMediaElement/loadstart_event 모든 최신 엔진에서 지원됩니다. Firefox6+Safari4+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | 이벤트
| 사용자 에이전트가 미디어 데이터를 찾기 시작할 때, 리소스 선택 알고리즘의 일부로. | networkState
값이 NETWORK_LOADING 일
때
|
progress
HTMLMediaElement/progress_event 모든 최신 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | 이벤트
| 사용자 에이전트가 미디어 데이터를 가져오고 있을 때. | networkState
값이 NETWORK_LOADING 일
때
|
suspend
HTMLMediaElement/suspend_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 의도적으로 현재 미디어 데이터를 가져오지 않고 있을 때. | networkState
값이 NETWORK_IDLE 일 때
|
abort
모든 최신 엔진에서 지원됩니다. Firefox9+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | 이벤트
| 사용자 에이전트가 미디어 데이터를 완전히 다운로드하지 않고 중단할 때, 그러나 오류로 인한 것은 아닙니다. | error 는
코드가 MEDIA_ERR_ABORTED 인
객체입니다.
networkState
값은 NETWORK_EMPTY 나
NETWORK_IDLE
중 하나입니다,
다운로드가 중단된 시점에 따라 다릅니다.
|
error
모든 최신 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | 이벤트
| 미디어 데이터를 가져오는 중에 오류가 발생하거나 리소스의 형식이 지원되지 않는 미디어 형식일 때. | error 는
코드가 MEDIA_ERR_NETWORK
이상인 객체입니다. networkState
값은 NETWORK_EMPTY 나
NETWORK_IDLE
중 하나입니다,
다운로드가 중단된 시점에 따라 다릅니다.
|
emptied
HTMLMediaElement/emptied_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 이전에 NETWORK_EMPTY
상태가 아니었던 미디어 요소가
해당 상태로 전환될 때 (로드 중에 치명적인 오류가 발생했거나 리소스 선택 알고리즘이
이미 실행 중일 때 load() 메서드가 호출된
경우).
| networkState
값은 NETWORK_EMPTY ;
모든 IDL 속성은 초기 상태에 있습니다.
|
stalled
HTMLMediaElement/stalled_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 미디어 데이터를 가져오려고 시도하지만 데이터가 예상치 않게 제공되지 않을 때. | networkState
값이 NETWORK_LOADING 일
때
|
loadedmetadata
HTMLMediaElement/loadedmetadata_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 미디어 리소스의 지속 시간 및 차원을 결정했고, 텍스트 트랙이 준비된 상태일 때. | readyState
값이 처음으로 HAVE_METADATA
이상이 된 경우.
|
loadeddata
HTMLMediaElement/loadeddata_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 처음으로 미디어 데이터를 렌더링할 수 있을 때, 현재 재생 위치에서. | readyState
값이 처음으로 HAVE_CURRENT_DATA
이상으로 증가했을 때.
|
canplay
HTMLMediaElement/canplay_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 미디어 데이터를 재생할 수 있지만, 현재 재생 속도로 콘텐츠를 추가 버퍼링 없이 끝까지 렌더링할 수 없다고 판단될 때. | readyState
값이 HAVE_FUTURE_DATA
이상으로 새로 증가했을 때.
|
canplaythrough
HTMLMediaElement/canplaythrough_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 사용자 에이전트가 현재 재생 속도로 끝까지 렌더링할 수 있을 만큼 충분한 데이터를 로드했다고 판단될 때 콘텐츠를 추가 버퍼링 없이 재생할 수 있습니다. | readyState
값이 HAVE_ENOUGH_DATA 로
새로 설정되었을 때.
|
playing
HTMLMediaElement/playing_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 미디어 데이터가 부족하여 일시 중지되거나 지연된 후 재생이 시작될 준비가 되었을 때. | readyState
값이
새로 HAVE_FUTURE_DATA
이상이 되며,
paused 값이 false인 경우 또는
paused 값이 새로 false가 되었고
readyState 값이
새로
HAVE_FUTURE_DATA
이상이 되었을 때.
이 이벤트가 발생하더라도 요소가 잠재적으로 재생 중이 아닐
수도 있습니다. 예를 들어, 요소가 사용자 상호작용으로 인해 일시 중지된 경우 또는 인밴드 콘텐츠로 인해 일시 중지된
경우에 해당할 수 있습니다.
|
waiting
HTMLMediaElement/waiting_event 모든 최신 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | 이벤트
| 다음 프레임을 사용할 수 없어서 재생이 중지되었지만, 사용자 에이전트는 그 프레임이 곧 사용 가능할 것으로 예상할 때. | readyState
값이 HAVE_CURRENT_DATA
이하이고,
paused 값이 false일 때.
seeking 값이 true이거나
현재 재생 위치가 buffered 의 범위에 포함되지 않은
경우입니다. paused 값이 false가
아닌 다른 이유로 재생이 중지될 수도 있지만,
이러한 이유는 이 이벤트를 발생시키지 않습니다.
(그리고 이러한 상황이 해결되면 별도의 재생 중
이벤트가 발생하지 않습니다): 예를 들어, 재생이 종료되었거나,
재생이 오류로 인해 중지되었거나,
요소가 사용자 상호작용으로 인해
일시 중지되었거나 또는 인밴드 콘텐츠로 인해 일시 중지된 경우에 해당할 수 있습니다.
|
seeking
HTMLMediaElement/seeking_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| seeking IDL 속성이 true로
변경되고, 사용자 에이전트가 새 위치로 탐색을 시작했을 때.
| |
seeked
모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| seeking IDL 속성이
false로 변경된 후, 현재 재생
위치가 변경되었을 때.
| |
ended
모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 미디어 리소스의 끝에 도달하여 재생이 중지되었을 때. | currentTime
값이 미디어 리소스의 끝에 도달했으며, ended 값이 true일 때.
|
durationchange
HTMLMediaElement/durationchange_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| duration 속성이 업데이트되었을
때.
| |
timeupdate
HTMLMediaElement/timeupdate_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 현재 재생 위치가 정상적인 재생의 일부로서 또는 불연속적으로 변경되었을 때. | |
play
모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 요소가 더 이상 일시 중지되지 않음. play()
메서드가 반환된 후 또는 autoplay 속성이 재생을
시작하도록 했을 때.
| paused 속성이 새롭게 false로
설정됨.
|
pause
모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| 요소가 일시 중지됨. pause() 메서드가
반환된 후 발생.
| paused 속성이 새롭게 true로
설정됨.
|
ratechange
HTMLMediaElement/ratechange_event 모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | 이벤트
| defaultPlaybackRate
또는 playbackRate
속성이 업데이트되었을 때.
| |
resize
| 이벤트
| videoWidth 또는
videoHeight 속성
중 하나 이상이 업데이트되었을 때.
| 미디어 요소가 비디오 요소일 때, readyState 가 HAVE_NOTHING 이
아닐 때.
|
volumechange
HTMLMediaElement/volumechange_event 모든 최신 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | 이벤트
| volume 속성 또는 muted 속성이 변경되었을 때 발생. 관련 속성의
setter가 반환된 후 발생.
|
다음 이벤트는 source
요소에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 |
---|---|---|
error |
Event
|
미디어 데이터를 가져오는 동안 오류가 발생하거나 리소스 형식이 지원되지 않는 미디어 형식일 때. |
다음 이벤트는 AudioTrackList
, VideoTrackList
, 그리고 TextTrackList
객체에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 |
---|---|---|
change
모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+🔰 37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 모든 현재 엔진에서 지원됨. Firefox31+Safari7+Chrome33+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? 모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| 트랙 목록의 하나 이상의 트랙이 활성화되거나 비활성화될 때. |
addtrack
모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+🔰 37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 모든 현재 엔진에서 지원됨. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ 모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+🔰 37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | TrackEvent
| 트랙이 트랙 목록에 추가될 때. |
removetrack
AudioTrackList/removetrack_event 모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+🔰 37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/removetrack_event 모든 현재 엔진에서 지원됨. Firefox31+Safari7+Chrome33+
Opera20+Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+ VideoTrackList/removetrack_event 모든 현재 엔진에서 지원됨. Firefox🔰 33+Safari7+🔰 37+
Opera?Edge🔰 79+ Edge (Legacy)지원 안됨Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | TrackEvent
| 트랙이 트랙 목록에서 제거될 때. |
다음 이벤트는 TextTrack
객체와 track
요소에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 |
---|---|---|
cuechange
HTMLTrackElement/cuechange_event 모든 현재 엔진에서 지원됨. Firefox68+Safari10+Chrome32+
Opera19+Edge79+ Edge (Legacy)14+Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+ 모든 현재 엔진에서 지원됨. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| 트랙의 하나 이상의 큐가 활성화되거나 비활성화될 때. |
다음 이벤트는 track
요소에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 |
---|---|---|
error
| Event
| 트랙 데이터를 가져오는 동안 오류가 발생하거나 리소스 형식이 지원되지 않는 텍스트 트랙 형식일 때. |
load
| Event
| 트랙 데이터를 가져와 성공적으로 처리했을 때. |
다음 이벤트는 TextTrackCue
객체에서 발생합니다:
이벤트 이름 | 인터페이스 | 발생 조건 |
---|---|---|
enter
모든 현재 엔진에서 지원됨. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| 큐가 활성화될 때. |
exit
모든 현재 엔진에서 지원됨. Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| 큐가 더 이상 활성화되지 않을 때. |
video
및
audio
요소의
주요 보안 및 개인정보 보호 영향은 크로스 오리진 미디어를 임베드할 수 있는 기능에서 비롯됩니다. 위협은 두 가지 방향으로 발생할 수 있습니다: 악성 콘텐츠에서 피해자 페이지로, 또는 악성 페이지에서
피해자 콘텐츠로.
피해자 페이지가 악성 콘텐츠를 임베드할 경우, 콘텐츠가 임베드된 document(Document)
와 상호작용하려는
스크립트 코드가
포함될 수 있다는 위협이 있습니다. 이를 방지하기 위해, 사용자 에이전트는 콘텐츠가 임베드된 페이지에 접근하지 못하도록 해야 합니다. DOM 개념을 사용하는 미디어 콘텐츠의 경우, 임베드된 콘텐츠는
독립적인 최상위 탐색 가능
항목(top-level traversable)에 있는 것처럼 취급되어야 합니다.
예를 들어, SVG 애니메이션이 video
요소에
임베드된 경우, 사용자 에이전트는 해당 애니메이션이 외부 페이지의 DOM에 접근하지 못하도록 합니다. SVG 리소스 내의 스크립트 관점에서 보면, SVG 파일은 부모가 없는 단독 최상위 탐색 가능
항목에 있는 것처럼 보일 것입니다.
악성 페이지가 피해자 콘텐츠를 임베드할 경우, 임베드된 페이지는 원래 접근할 수 없었던 콘텐츠의 정보를 얻을 수 있다는 위협이 존재합니다. API는 미디어의 존재 여부, 유형, 길이, 크기 및 호스트의
성능 특성 등의 정보를 노출합니다. 이러한 정보는 이미 잠재적으로 문제가 될 수 있지만, 실제로는 img
요소를 사용하여 거의
동일한 정보를 얻을 수 있기 때문에 수용 가능한 것으로 간주되었습니다.
그러나, 사용자 에이전트가 콘텐츠 내의 메타데이터(예: 자막)를 추가로 노출하면 훨씬 더 민감한 정보를 얻을 수 있습니다. 따라서 이러한 정보는 비디오 리소스가 CORS를 사용하는 경우에만 노출됩니다.
crossorigin
속성을 통해 작성자는 CORS를 활성화할 수 있습니다. [FETCH]
이 제한이 없다면, 공격자는 사용자를 속여 회사 네트워크 내에서 유출된 위치에서 비디오를 로드하려고 시도하는 사이트를 방문하게 할 수 있습니다. 해당 비디오에 새로운 제품의 기밀 계획이 포함된 자막이 있다면, 자막을 읽을 수 있게 되는 것은 심각한 기밀 유출을 초래할 수 있습니다.
이 섹션은 비규범적입니다.
셋톱박스나 모바일 폰과 같은 소형 기기에서 오디오 및 비디오 리소스를 재생하는 것은 종종 기기의 제한된 하드웨어 자원으로 인해 제약을 받습니다. 예를 들어, 어떤 기기는 세 개의 동시 비디오만 지원할 수
있습니다. 이러한 이유로, 미디어 요소가 재생을 마쳤을 때, 요소에 대한 모든 참조를 제거하여 요소가 가비지 수집될 수 있도록 하거나, 더 나은 방법으로는 요소의 src
속성을
빈 문자열로 설정하여 리소스를 해제하는 것이 좋은 습관입니다. srcObject
가
설정된 경우, srcObject
를
null로 설정하십시오.
마찬가지로, 재생 속도가 정확히 1.0이 아닐 때, 하드웨어, 소프트웨어 또는 포맷의 제한으로 인해 비디오 프레임이 드롭되거나 오디오가 끊기거나 음소거될 수 있습니다.
이 섹션은 비규범적입니다.
미디어 요소 API의 다양한 측면이 얼마나 정확하게 구현되는지는 구현 품질 문제로 간주됩니다.
예를 들어, buffered
속성을 구현할 때, 버퍼된 범위의 정확성을 보고하는 방법은 사용자 에이전트가 데이터를 얼마나 신중하게 검사하는지에 따라 달라집니다. API는 범위를 시간으로 보고하지만, 데이터는 바이트 스트림으로
얻어지므로, 가변 비트레이트 스트림을 수신하는 사용자 에이전트는 모든 데이터를 실제로 디코딩해야만 정확한 시간을 결정할 수 있을 수도 있습니다. 그러나 사용자 에이전트가 이를 반드시 수행해야 하는 것은
아니며, 대신 지금까지 관찰된 평균 비트레이트를 기반으로 한 추정치를 반환하고 더 많은 정보가 제공되면 이를 수정할 수 있습니다.
일반적으로 사용자 에이전트는 낙관적이기보다는 보수적인 태도를 취할 것을 권장합니다. 예를 들어, 모든 것이 버퍼링되었음을 보고했지만 실제로는 그렇지 않은 경우, 이는 좋지 않습니다.
또 다른 구현 품질 문제는 코덱이 전방 재생만을 위해 설계된 경우(예: 키 프레임이 많지 않고, 이들이 멀리 떨어져 있으며, 중간 프레임은 이전 프레임에서의 델타만 포함) 비디오를 역방향으로 재생하는 것입니다. 사용자 에이전트는 예를 들어 키 프레임만 보여주는 등의 저품질 작업을 수행할 수 있지만, 더 나은 구현은 실제로 비디오의 일부를 전방으로 디코딩하고, 전체 프레임을 저장한 후 프레임을 역방향으로 재생하는 등 더 많은 작업을 수행할 것입니다.
마찬가지로, 구현은 언제든지 버퍼된 데이터를 삭제할 수 있으며(미디어 요소의 수명 동안 모든 미디어 데이터를 유지할 필요는 없음), 이것도 다시 구현 품질 문제입니다. 충분한 자원을 가진 사용자 에이전트는 가능한 모든 데이터를 유지하여 더 나은 사용자 경험을 제공할 것을 권장합니다. 예를 들어, 사용자가 라이브 스트림을 시청하는 경우, 사용자 에이전트는 사용자에게 라이브 비디오만 볼 수 있도록 할 수 있지만, 더 나은 사용자 에이전트는 모든 것을 버퍼링하여 사용자가 이전 자료를 탐색하고, 일시 정지하고, 앞뒤로 재생하는 등의 기능을 허용할 것입니다.
일시 정지된 미디어 요소가 문서에서 제거되고 다음에 이벤트 루프가 1단계에 도달하기 전에 다시 삽입되지 않는 경우, 자원이 제한된 구현은 그 기회를 이용하여 미디어 요소가 사용하는 모든 하드웨어 자원(예: 비디오 평면, 네트워크 자원 및 데이터 버퍼)을 해제하는 것이 좋습니다. (사용자 에이전트는 나중에 재생이 다시 시작될 경우를 대비해 재생 위치 등을 계속 추적해야 합니다.)
map
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
name
— 이미지 맵의 이름을 정의하여 usemap
속성에서 참조할 수 있음.
[Exposed =Window ]
interface HTMLMapElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[SameObject ] readonly attribute HTMLCollection areas ;
};
map
요소는 img
요소 및 area
요소와 결합하여 이미지 맵을 정의합니다. 이 요소는 자식 요소를 대표합니다.
name
속성은 맵에 이름을 부여하여 참조할 수 있도록 합니다. 이 속성은 존재해야 하며 ASCII 공백이 없는 비어 있지 않은 값을 가져야 합니다. name
속성의 값은 동일한 name
속성을 가진 다른 map
요소와 같아서는 안 됩니다.
트리 내에서 id
속성도 지정된 경우, 두 속성의 값이 같아야 합니다.
map.areas
HTMLCollection
을
반환하며, 이 컬렉션은 area
요소들로
구성됩니다.
areas
속성은 HTMLCollection
을
반환하며, 이 컬렉션은 map
요소에서 루팅되고 필터는 오직
area
요소들만을 일치시킵니다.
IDL 속성 name
은 동일한 이름의
콘텐츠 속성을 반영해야 합니다.
이미지 맵은 페이지의 다른 콘텐츠와 결합하여 정의될 수 있으며, 유지 관리를 용이하게 합니다. 이 예시는 페이지 상단에 이미지 맵이 있고 하단에 해당 텍스트 링크 세트가 있는 페이지의 예입니다.
<!DOCTYPE HTML>
< HTML LANG = "EN" >
< TITLE > Babies™: Toys</ TITLE >
< HEADER >
< H1 > Toys</ H1 >
< IMG SRC = "/images/menu.gif"
ALT = "Babies™ navigation menu. Select a department to go to its page."
USEMAP = "#NAV" >
</ HEADER >
...
< FOOTER >
< MAP NAME = "NAV" >
< P >
< A HREF = "/clothes/" > Clothes</ A >
< AREA ALT = "Clothes" COORDS = "0,0,100,50" HREF = "/clothes/" > |
< A HREF = "/toys/" > Toys</ A >
< AREA ALT = "Toys" COORDS = "100,0,200,50" HREF = "/toys/" > |
< A HREF = "/food/" > Food</ A >
< AREA ALT = "Food" COORDS = "200,0,300,50" HREF = "/food/" > |
< A HREF = "/books/" > Books</ A >
< AREA ALT = "Books" COORDS = "300,0,400,50" HREF = "/books/" >
</ P >
</ MAP >
</ FOOTER >
area
요소현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
map
요소 조상이 있는 경우에만 그렇습니다.
alt
— 이미지가 없을 때 사용할 대체 텍스트
coords
— 이미지 맵에서 생성할 모양의 좌표
shape
— 이미지 맵에서 생성할 모양의 종류
href
— 하이퍼링크의 주소
target
—
네비게이션 하이퍼링크 내비게이션에 대한
download
—
리소스를 탐색하는 대신 다운로드할지 여부와 파일 이름이 그럴 경우
ping
— URL을
ping하기 위해
rel
— 하이퍼링크가 포함된 문서 위치와
대상 리소스 사이의 관계
referrerpolicy
— 리퍼러 정책은 요소에 의해 시작된 가져오기에 대한
href
속성이 있는 경우: 저자를 위해; 구현자를 위해.
[Exposed =Window ]
interface HTMLAreaElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] 속성 DOMString alt ;
[CEReactions ] 속성 DOMString coords ;
[CEReactions ] 속성 DOMString shape ;
[CEReactions ] 속성 DOMString target ;
[CEReactions ] 속성 DOMString download ;
[CEReactions ] 속성 USVString ping ;
[CEReactions ] 속성 DOMString rel ;
[SameObject , PutForwards =value ] 읽기 전용 속성 DOMTokenList relList ;
[CEReactions ] 속성 DOMString referrerPolicy ;
// 이전 멤버도 포함됩니다
};
HTMLAreaElement 포함합니다 HTMLHyperlinkElementUtils ;
area
요소는 하이퍼링크를 사용하여 이미지 맵에서 지정된 영역과 연결된 텍스트를 나타내거나 이미지 맵에서 선택할 수 없는 영역을 나타냅니다.
부모 노드를 가진 area
요소는 map
요소의 조상을 가져야 합니다.
area
요소에 href
속성이 있는 경우, area
요소는 하이퍼링크를 나타냅니다. 이 경우 alt
속성이 있어야 합니다. 이 속성은 하이퍼링크의 텍스트를 지정합니다. 그 값은 이미지 자체가 아닌 다른
하이퍼링크의 텍스트 및 이미지의 대체 텍스트와 함께 제공될 때 하이퍼링크가 텍스트 없이 이미지에 적용된 모양으로 사용할 때와 동일한 종류의 선택을 사용자에게 제공하는 텍스트여야 합니다. alt
속성은 동일한 리소스를 가리키며 비어 있지 않은 alt
속성이 있는 동일한 이미지 맵의 다른 area
요소가 있는 경우 비워 둘 수 있습니다.
area
요소에 href
속성이 없는 경우 요소가 나타내는
영역을 선택할 수 없으며, alt
속성은 생략되어야 합니다.
두 경우 모두 shape
및 coords
속성은 영역을 지정합니다.
shape
속성은 다음 키워드와 상태를 가진
열거형 속성입니다:
키워드 | 준수 | 상태 | 간단한 설명 |
---|---|---|---|
circle
| 원 상태 | 정확히 세 개의 정수를 사용하여 coords 속성에 원을 지정합니다.
| |
circ
| 아니요 | ||
default
| 기본 상태 | 이 영역은 전체 이미지입니다. (coords 속성은 사용되지
않습니다.)
| |
poly
| 다각형 상태 | 적어도 여섯 개의 정수를 사용하여 coords 속성에 다각형을
지정합니다.
| |
polygon
| 아니요 | ||
rect
| 사각형 상태 | 정확히 네 개의 정수를 사용하여 coords 속성에 사각형을
지정합니다.
| |
rectangle
| 아니요 |
속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 사각형 상태입니다.
coords
속성은 지정된 경우 유효한 부동
소수점 수 목록을 포함해야 합니다. 이 속성은 shape
속성에 의해 설명된 모양의 좌표를 제공합니다. 이
속성의 처리는 이미지 맵 처리 모델의 일부로 설명됩니다.
원 상태에서, area
요소는 coords
속성이 있어야 하며, 세 개의 정수를 포함해야
하며, 마지막 정수는 음수가 아니어야 합니다. 첫 번째 정수는 이미지의 왼쪽 가장자리에서 원의 중심까지의 거리이며, 두 번째 정수는 이미지의 상단 가장자리에서 원의 중심까지의 거리여야 하며, 세 번째
정수는 다시 CSS
픽셀로 반경을 나타내야 합니다.
기본 상태에서, area
요소에는 coords
속성이 없어야 합니다. (이 영역은 전체
이미지입니다.)
다각형 상태에서, area
요소에는 적어도 여섯 개의 정수가 포함된
coords
속성이 있어야 하며, 정수의 개수는
짝수여야 합니다. 각 정수 쌍은 각각 이미지의 왼쪽 및 상단에서 CSS 픽셀로 측정한 거리를 나타내야 하며, 모든 좌표는 순서대로 다각형의 점을 나타내야 합니다.
사각형 상태에서, area
요소는 정확히 네 개의 정수를 포함한 coords
속성이 있어야 하며, 첫 번째 정수는 세
번째 정수보다 작아야 하며, 두 번째 정수는 네 번째 정수보다 작아야 합니다. 네 개의 점은 각각 이미지의 왼쪽 가장자리에서 사각형의 왼쪽 면까지의 거리, 상단 가장자리에서 상단 면까지의 거리, 왼쪽
가장자리에서 오른쪽 면까지의 거리, 상단 가장자리에서 하단 면까지의 거리를 나타내야 합니다. 이 모두는 CSS 픽셀로 측정됩니다.
사용자 에이전트가 사용자가 하이퍼링크를 따라갈 수 있도록
허용할 때 하이퍼링크를 다운로드하거나, href
, target
, download
, ping
속성은 링크가 따라가는 방식을 결정합니다. rel
속성은 사용자가 링크를 따르기 전에 대상
리소스의 성격을 사용자에게 나타내는 데 사용할 수 있습니다.
target
, download
, ping
, rel
, 그리고 referrerpolicy
속성은 href
속성이 없는 경우 생략해야
합니다.
속성 itemprop
이
area
요소에 지정된 경우, href
속성도 지정해야 합니다.
현재 모든 엔진에서 지원됩니다.
IDL 속성 relList
는
relList 속성의 내용을 반영해야 합니다.
HTMLAreaElement/referrerPolicy
현재 모든 엔진에서 지원됩니다.
IDL 속성 referrerPolicy
는 referrerPolicy 속성의 내용을 반영해야 하며, 알려진 값만 제한됩니다.
이미지 맵은 이미지의 기하학적 영역을 하이퍼링크와 연결할 수 있게 합니다.
img
요소 형태의 이미지는 map
요소 형태의 이미지 맵과 연결될 수 있으며, img
요소에 usemap
속성을 지정하여 연결할 수 있습니다. 지정된 경우,
usemap
속성은 반드시 map
요소에 대한 유효한 해시 이름 참조이어야 합니다.
다음과 같은 이미지를 고려하십시오:
색깔이 있는 영역만 클릭 가능하도록 하려면 다음과 같이 할 수 있습니다:
< p >
선택할 모양을 선택하십시오:
< img src = "shapes.png" usemap = "#shapes"
alt = "네 가지 모양이 있습니다: 빨간색 속이 빈 상자, 초록색 원, 파란색 삼각형, 노란색 네모난 별." >
< map name = "shapes" >
< area shape = rect coords = "50,50,100,100" > <!-- 빨간 상자의 구멍 -->
< area shape = rect coords = "25,25,125,125" href = "red.html" alt = "빨간 상자." >
< area shape = circle coords = "200,75,50" href = "green.html" alt = "초록 원." >
< area shape = poly coords = "325,25,262,125,388,125" href = "blue.html" alt = "파란 삼각형." >
< area shape = poly coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href = "yellow.html" alt = "노란 별." >
</ map >
</ p >
img
요소에 usemap
속성이 지정된
경우, 사용자 에이전트는 다음과 같이 처리해야 합니다:
해시 이름 참조를 해시 이름 참조 구문 분석 규칙을 사용하여 구문
분석합니다. 이는 map
요소를 컨텍스트 노드로 사용하여 구문 분석됩니다. 이 과정에서 요소(즉, map) 또는 null이 반환됩니다.
null이 반환되면, 반환합니다. 결국 이미지는 이미지 맵과 연결되지 않습니다.
그렇지 않으면, 사용자 에이전트는 map의 하위 요소인 모든 area
요소들을 수집해야
합니다. 이를 areas라고 합니다.
이미지 맵(areas)을 형성하는 area
요소 목록을 얻은 후,
상호작용이 가능한 사용자 에이전트는 두 가지 방법 중 하나로 목록을 처리해야 합니다.
사용자 에이전트가 img
요소가 나타내는
텍스트를 표시하려는 경우, 다음 단계를 사용해야 합니다.
areas에서 area
요소 중
alt
속성이 없거나 alt
속성의 값이 빈 문자열인 모든
요소를 제거합니다. 단, areas 내에 동일한 href
속성
값을 가진 다른 요소가 있고 해당 요소에 빈 문자열이 아닌 alt
속성이 있을 경우에 한합니다.
areas 내 남아있는 각 area
요소는 하이퍼링크를 나타냅니다. 이 하이퍼링크들은 모두 img
의 텍스트와 연관된
방식으로 사용자에게 제공되어야 합니다.
이 맥락에서 사용자 에이전트는 지정되지 않은 area
및 img
요소, 또는
alt
속성이 빈 문자열이거나 다른 비가시적 텍스트인 요소를 구현 정의된 방식으로 표현할 수 있습니다.
사용자 에이전트가 이미지를 표시하고 상호작용을 통해 하이퍼링크를 선택하도록 허용하려는 경우, 이미지는 areas에서 가져온 레이어 모양 집합과 연결되어야 하며, 트리 순서의 반대 순서로 처리됩니다 (따라서 map에서 마지막으로 지정된 area
요소는 가장 아래의 모양이며,
트리 순서에서 map의 첫 번째 요소는 가장 위에 있는 모양입니다).
areas의 각 area
요소는 이미지를 레이어로
처리하기 위해 다음과 같이 처리해야 합니다:
요소의 shape
속성이
나타내는 상태를 찾습니다.
요소의 coords
속성을
구문 분석하여 coords 목록을 얻습니다. 이 속성이 없으면 coords 목록은 비어있는 목록이 됩니다.
coords 목록의 항목 수가 아래 표에 명시된 최소 수보다 적으면, 모양이 비어있다고 간주하고 반환합니다.
상태 | 최소 항목 수 |
---|---|
원 상태 | 3 |
기본 상태 | 0 |
다각형 상태 | 6 |
사각형 상태 | 4 |
해당 상태와 관련된 다음 목록 항목에 따라 coords 목록의 초과 항목을 확인합니다.
요소의 shape
속성이
사각형 상태를 나타내며, 목록의
첫 번째 숫자가 세 번째 숫자보다 크면, 두 숫자를 서로 바꿉니다.
요소의 shape
속성이
사각형 상태를 나타내며, 목록의
두 번째 숫자가 네 번째 숫자보다 크면, 두 숫자를 서로 바꿉니다.
요소의 shape
속성이
원 상태를 나타내며,
목록의 세 번째 숫자가 0 이하이면, 모양이 비어있다고 간주하고 반환합니다.
이제, 요소가 나타내는 모양은 아래 목록의 해당 상태에 대한 설명과 일치합니다:
x는 coords의 첫 번째 숫자이고, y는 두 번째 숫자이며, r은 세 번째 숫자입니다.
이 모양은 이미지의 왼쪽 가장자리에서 x CSS 픽셀만큼 떨어진 지점과 이미지의 상단 가장자리에서 y CSS 픽셀만큼 떨어진 지점에 중심이 있으며, 반지름은 r CSS 픽셀입니다.
이 모양은 이미지 전체를 정확히 덮는 사각형입니다.
xi는 coords의 (2i)번째 항목이며, yi는 (2i+1)번째 항목입니다 (coords의 첫 번째 항목의 인덱스는 0입니다).
the coordinates는 CSS 픽셀 단위로 이미지의 왼쪽 상단에서 측정된 (xi, yi)의 형태로 해석됩니다. coords의 항목 수는 (N/2)-1이며, 여기서 N은 coords에 있는 항목의 수입니다.
이 모양은 the coordinates에 의해 정의된 꼭지점을 가진 다각형이며, 내부는 홀짝 규칙을 사용하여 결정됩니다. [GRAPHICS]
x1은 coords의 첫 번째 숫자이고, y1은 두 번째 숫자이며, x2는 세 번째 숫자이고, y2는 네 번째 숫자입니다.
이 모양은 (x1, y1) 좌표에 있는 사각형의 왼쪽 상단 모서리와 (x2, y2) 좌표에 있는 사각형의 오른쪽 하단 모서리로 구성된 사각형입니다. 이 좌표들은 이미지의 왼쪽 상단 모서리에서 측정된 CSS 픽셀 단위로 해석됩니다.
역사적인 이유로, 좌표는 CSS 'width' 및 'height' 속성에 의해 발생하는 모든 확장을 적용한 후의 표시된 이미지에 상대적으로 해석되어야 합니다
(또는, CSS 브라우저가 아닌 경우, 이미지 요소의 width
및 height
속성 — CSS 브라우저는 해당 속성을 앞서 언급한 CSS
속성에 매핑합니다).
브라우저 확대 기능 및 CSS 또는 SVG를 사용하여 적용된 변환은 좌표에 영향을 미치지 않습니다.
위의 알고리즘에 따라 레이어된 모양 집합과 연결된 이미지와 포인팅 장치 상호작용은 해당 지점을 가리킨 포인팅 장치가 있는 경우 해당 지점에 있는 최상위 모양에 첫 번째로 사용자 상호작용 이벤트를
발생시키고, 지점에 모양이 없는 경우 이미지 요소 자체에 이벤트를 발생시켜야 합니다. 사용자 에이전트는 또한 하이퍼링크를 나타내는 개별 area
요소를 선택하고 활성화할 수
있도록 허용할 수 있습니다 (예: 키보드를 사용하여).
map
요소(및 그
하위 요소인 area
요소들)는
여러 img
요소와 연결될 수 있기
때문에, 하나의 area
요소가
문서의 여러 포커스 가능한 영역에 해당할 수 있습니다.
이미지 맵은 라이브입니다. 따라서 DOM이 변경되면, 사용자 에이전트는 이미지 맵에 대한 알고리즘을 다시 실행한 것처럼 행동해야 합니다.
HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
모든 현재 엔진에서 지원됨.
MathML math
요소는 이 명세서의 콘텐츠 모델을 위해 포함된 콘텐츠, 구문 콘텐츠, 흐름 콘텐츠 및 명확한 콘텐츠 범주에 속합니다.
MathML annotation-xml
요소가 HTML 네임스페이스의 요소를 포함하는 경우, 그러한 요소는 모두 흐름 콘텐츠여야 합니다.
MathML 토큰 요소(mi
,
mo
,
mn
,
ms
,
및 mtext
)
이 HTML 요소의 하위 요소일 때, HTML 네임스페이스에서 구문 콘텐츠 요소를 포함할
수 있습니다.
MathML 콘텐츠 모델이 직문자를 허용하지 않는 MathML 요소에서 발견된 요소 간 공백이 아닌 텍스트를 MathML 콘텐츠 모델, 레이아웃 및
렌더링 목적으로 해당 텍스트가 실제로 MathML
mtext
요소로 래핑된 것처럼 처리해야 합니다. (그러나 이러한 텍스트는 규격에
맞지 않습니다.)
콘텐츠가 요소의 콘텐츠 모델과 일치하지 않는 MathML 요소는 MathML 레이아웃 및 렌더링 목적으로 MathML
merror
요소로 대체된 것처럼 작동해야 하며, 적절한 오류 메시지를 포함해야 합니다.
MathML 요소의 의미론은 MathML 및 다른 적용 가능한 명세서에 의해 정의됩니다. [MATHML]
HTML 문서에서 MathML을 사용하는 예는 다음과 같습니다:
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > The quadratic formula</ title >
</ head >
< body >
< h1 > The quadratic formula</ h1 >
< p >
< math >
< mi > x</ mi >
< mo > =</ mo >
< mfrac >
< mrow >
< mo form = "prefix" > −</ mo > < mi > b</ mi >
< mo > ±</ mo >
< msqrt >
< msup > < mi > b</ mi > < mn > 2</ mn > </ msup >
< mo > −</ mo >
< mn > 4</ mn > < mo > </ mo > < mi > a</ mi > < mo > </ mo > < mi > c</ mi >
</ msqrt >
</ mrow >
< mrow >
< mn > 2</ mn > < mo > </ mo > < mi > a</ mi >
</ mrow >
</ mfrac >
</ math >
</ p >
</ body >
</ html >
HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
모든 현재 엔진에서 지원됨.
SVG
svg
요소는 이 명세서의 콘텐츠 모델에서 포함된 콘텐츠, 구문
콘텐츠, 흐름 콘텐츠, 명확한 콘텐츠 범주에 속합니다.
SVG foreignObject
요소가 HTML 네임스페이스의 요소를
포함하는 경우, 그러한 요소는 모두 흐름 콘텐츠여야 합니다.
SVG
title
요소의 HTML
문서 내 콘텐츠 모델은 구문 콘텐츠입니다. (이는 SVG
2에서 제시된 요구 사항을 추가로 제한합니다.)
SVG 요소의 의미론은 SVG 2 및 다른 적용 가능한 명세서에 의해 정의됩니다. [SVG]
doc = iframe.getSVGDocument()
doc = embed.getSVGDocument()
doc = object.getSVGDocument()
document(Document)
객체를 반환하며, iframe
, embed
또는 object
요소를 사용하여 SVG를 포함하는 경우에
해당됩니다.
getSVGDocument()
메서드의 단계는 다음과 같습니다:
만약 document가 null이 아니며, XML 파일의 페이지 로드 처리 모델 섹션에 따라
생성된 경우, 리소스의 계산된 유형이 image/svg+xml
이므로, document를
반환합니다.
null을 반환합니다.
작성자 요구사항: img
,
iframe
,
embed
,
object
,
video
,
source
요소에 대한
width
및 height
속성은 부모가 picture
요소인
경우,
type
속성이
이미지 버튼
상태일 때
input
요소는 요소의 시각적 콘텐츠의
크기(출력 매체의 명목상 방향에 상대적인 너비와 높이)를 지정할 수 있습니다. 지정된 속성이 있는 경우,
이 속성들은 CSS
픽셀로
유효한 음수가 아닌 정수 값이어야 합니다.
지정된 크기는 리소스 자체에 지정된 크기와 다를 수 있으며, 리소스의 해상도가 CSS 픽셀 해상도와 다를 수 있기 때문입니다. (화면에서는 CSS 픽셀 해상도가 96ppi이지만, 일반적으로 CSS 픽셀 해상도는 읽기 거리와 관련이 있습니다.) 두 속성이 모두 지정된 경우, 다음 문장 중 하나가 참이어야 합니다:
target ratio은 리소스의 자연 너비와
자연 높이의 비율입니다.
specified width와 specified height는 각각 width
및 height
속성의 값입니다.
해당 리소스에 자연 너비와 자연 높이가 모두 없는 경우 이 두 속성은 생략되어야 합니다.
두 속성이 모두 0인 경우, 이는 요소가 사용자를 대상으로 하지 않는다는 것을 나타냅니다(예: 페이지 조회수를 계산하는 서비스의 일부일 수 있음).
크기 속성은 이미지를 늘리는 데 사용되지 않도록 해야 합니다.
사용자 에이전트 요구사항: 사용자 에이전트는 이러한 속성을 렌더링에 대한 힌트로 사용해야 합니다.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
width
및 height
IDL 속성은
iframe
,
embed
,
object
,
source
,
video
요소의 동일한 이름의
해당 콘텐츠 속성을 반영해야 합니다.
iframe
,
embed
및
object
의 IDL 속성은
DOMString
이며,
video
및
source
의 IDL 속성은
unsigned long
입니다.
img
및
input
요소에 해당하는
IDL 속성은 해당 요소의 다른 동작과 더 밀접하게 관련되어 있으므로 각 요소의 섹션에서 정의됩니다.
table
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
caption
요소,
그 뒤에 0개 이상의 colgroup
요소,
그 뒤에 선택적으로 thead
요소,
그 뒤에 0개 이상의 tbody
요소 또는
1개 이상의 tr
요소,
그 뒤에 선택적으로 tfoot
요소,
선택적으로 1개 이상의 스크립트 지원
요소와 혼합되어 사용될 수 있음.
[Exposed =Window ]
interface HTMLTableElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute HTMLTableCaptionElement ? caption ;
HTMLTableCaptionElement createCaption ();
[CEReactions ] undefined deleteCaption ();
[CEReactions ] attribute HTMLTableSectionElement ? tHead ;
HTMLTableSectionElement createTHead ();
[CEReactions ] undefined deleteTHead ();
[CEReactions ] attribute HTMLTableSectionElement ? tFoot ;
HTMLTableSectionElement createTFoot ();
[CEReactions ] undefined deleteTFoot ();
[SameObject ] readonly attribute HTMLCollection tBodies ;
HTMLTableSectionElement createTBody ();
[SameObject ] readonly attribute HTMLCollection rows ;
HTMLTableRowElement insertRow (optional long index = -1);
[CEReactions ] undefined deleteRow (long index );
// also has obsolete members
};
table
요소는 표 형식으로 2차원 이상의 데이터를 표현합니다.
table
요소는 표 모델에 참여합니다. 표는 자손들에 의해 제공된 행, 열 및 셀을 가집니다. 행과 열은
그리드를 형성하며, 표의 셀은 겹침 없이 해당 그리드를 완전히 덮어야 합니다.
이 적합성 요구사항이 충족되는지 여부를 결정하는 정확한 규칙은 표 모델 설명에 나와 있습니다.
작성자들은 복잡한 표를 해석하는 방법을 설명하는 정보를 제공하는 것이 권장됩니다. 이러한 정보를 제공하는 방법에 대한 지침은 아래에 나와 있습니다.
표는 레이아웃 도구로 사용되어서는 안 됩니다. 역사적으로 일부 웹 작성자들이 HTML의 표를 페이지 레이아웃을 제어하는 방법으로 오용해 왔습니다. 이러한 사용은 비적합하며, 그러한 문서에서 표 데이터를 추출하려는 도구들은 매우 혼란스러운 결과를 얻게 될 것입니다. 특히 스크린 리더와 같은 접근성 도구 사용자들은 레이아웃에 사용된 표로 구성된 페이지를 탐색하기가 매우 어려울 수 있습니다.
레이아웃을 위해 HTML 표를 사용하는 대신 CSS 그리드 레이아웃, CSS 플렉서블 박스 레이아웃("flexbox"), CSS 다중 열 레이아웃, CSS 포지셔닝, CSS 표 모델 등 다양한 대안이 있습니다. [CSS]
표는 이해하고 탐색하기 어렵습니다. 사용자가 이를 돕기 위해, 사용자 에이전트는 해당 표가 (비적합한) 레이아웃 표로 분류되지 않은 이상, 표의 셀들을 명확하게 구분해야 합니다.
작성자와 구현자는 아래에 설명된 표 설계 기술 중 일부를 사용하여 사용자가 표를 더 쉽게 탐색할 수 있도록 고려하는 것이 좋습니다.
특히 임의의 콘텐츠에서 표 분석을 수행하는 사용자 에이전트는 실제 데이터를 포함하는 표와 단순히 레이아웃에 사용되는 표를 구별하는 휴리스틱을 찾는 것이 좋습니다. 이 명세에서는 정확한 휴리스틱을 정의하지 않지만, 다음과 같은 것이 가능한 지표로 제안됩니다:
특징 | 지표 |
---|---|
role 속성에 presentation
값을 사용하는 경우
| 아마도 레이아웃 표일 가능성이 높습니다. |
비적합한 값 0을 가진 border 속성을 사용하는 경우
| 아마도 레이아웃 표일 가능성이 높습니다. |
값 0을 가진 비적합한 cellspacing
및 cellpadding
속성을 사용하는 경우
| 아마도 레이아웃 표일 가능성이 높습니다. |
caption ,
thead 또는 th 요소를 사용하는 경우
| 아마도 레이아웃 표가 아닐 가능성이 높습니다. |
headers 및 scope 속성을 사용하는 경우
| 아마도 레이아웃 표가 아닐 가능성이 높습니다. |
값이 0이 아닌 비적합한 border 속성을 사용하는
경우
| 아마도 레이아웃 표가 아닐 가능성이 높습니다. |
CSS를 사용해 명시적으로 표시된 테두리를 사용하는 경우 | 아마도 레이아웃 표가 아닐 가능성이 높습니다. |
summary 속성을
사용하는 경우
| 좋은 지표가 아님 (역사적으로 레이아웃 표와 비레이아웃 표 모두 이 속성을 가졌습니다.) |
위의 제안이 잘못되었을 가능성도 있습니다. 구현자들은 레이아웃 표 탐지 휴리스틱을 만들려고 시도한 경험을 바탕으로 피드백을 제공할 것을 권장합니다.
만약 table
요소가 (비적합한) summary
속성을 가지고 있고, 사용자
에이전트가 해당 표를 레이아웃 표로 분류하지 않은 경우, 사용자 에이전트는 그 속성의 내용을 사용자에게 보고할 수 있습니다.
table.caption [ = value ]
모든 최신 엔진에서 지원됩니다.
테이블의 caption
요소를
반환합니다.
설정하면 caption
요소를
교체합니다.
caption = table.createCaption()
HTMLTableElement/createCaption
모든 최신 엔진에서 지원됩니다.
테이블에 caption
요소가
없으면 새로 생성하고 반환합니다.
table.deleteCaption()
HTMLTableElement/deleteCaption
모든 최신 엔진에서 지원됩니다.
테이블에 caption
요소가
없도록 합니다.
table.tHead [ = value ]
모든 최신 엔진에서 지원됩니다.
테이블의 thead
요소를
반환합니다.
설정하면 thead
요소를
교체합니다. 새 값이 thead
요소가 아닌 경우, "HierarchyRequestError
" DOMException
을
던집니다.
thead = table.createTHead()
모든 최신 엔진에서 지원됩니다.
테이블에 thead
요소가 없으면
새로 생성하고 반환합니다.
table.deleteTHead()
모든 최신 엔진에서 지원됩니다.
테이블에 thead
요소가 없도록
합니다.
table.tFoot [ = value ]
모든 최신 엔진에서 지원됩니다.
테이블의 tfoot
요소를
반환합니다.
설정하면 tfoot
요소를
교체합니다. 새 값이 tfoot
요소가 아닌 경우, "HierarchyRequestError
" DOMException
을
던집니다.
tfoot = table.createTFoot()
모든 최신 엔진에서 지원됩니다.
테이블에 tfoot
요소가 없으면
새로 생성하고 반환합니다.
table.deleteTFoot()
모든 최신 엔진에서 지원됩니다.
테이블에 tfoot
요소가 없도록
합니다.
table.tBodies
모든 최신 엔진에서 지원됩니다.
테이블의 HTMLCollection
을
반환합니다.
tbody = table.createTBody()
모든 최신 엔진에서 지원됩니다.
새로운 tbody
요소를 생성하고
테이블에 삽입하며, 이를 반환합니다.
table.rows
모든 최신 엔진에서 지원됩니다.
테이블의 HTMLCollection
을
반환합니다.
tr = table.insertRow([ index ])
모든 최신 엔진에서 지원됩니다.
tr
요소와 tbody
가 필요한 경우, 새로
생성하고 테이블에 삽입하며 이를 반환합니다.
위치는 테이블의 행을 기준으로 합니다. 인덱스 −1은 기본값이며, 인수 없이 호출할 경우 테이블 끝에 삽입하는 것과 동일합니다.
지정된 위치가 −1보다 작거나 행의 수보다 클 경우, "IndexSizeError
" DOMException
을
던집니다.
table.deleteRow(index)
모든 최신 엔진에서 지원됩니다.
지정된 위치에 있는 tr
요소를 테이블에서
제거합니다.
위치는 테이블의 행을 기준으로 합니다. 인덱스 −1은 테이블의 마지막 행을 삭제하는 것과 동일합니다.
지정된 위치가 −1보다 작거나 마지막 행의 인덱스보다 클 경우, 또는 행이 없을 경우 "IndexSizeError
" DOMException
을
던집니다.
다음의 모든 속성 및 메서드 정의에서 요소가 table-created되어야 하는 경우, 이는 table
요소의 node document, 주어진 로컬 이름, 및 HTML namespace를 사용하여
요소를 생성하는 것을 의미합니다.
caption
IDL
속성은 table
요소의 첫 번째 caption
자식 요소를 반환해야 하며,
그렇지 않으면 null을 반환해야 합니다. 설정할 때, table
요소의 첫 번째 caption
자식 요소를 제거해야 하며,
새로운 값이 null이 아닌 경우 첫 번째 노드로 삽입해야 합니다.
createCaption()
메서드는 table
요소의 첫 번째 caption
자식 요소를 반환해야 하며,
그렇지 않으면 새로운 caption
요소를 table-created하고, table
요소의 첫 번째 노드로 삽입한 다음
반환해야 합니다.
deleteCaption()
메서드는 table
요소의 첫 번째 caption
자식 요소를 제거해야 합니다.
tHead
IDL 속성은
table
요소의 첫 번째 thead
자식 요소를 반환해야 하며, 그렇지 않으면
null을 반환해야 합니다. 설정할 때, 새로운 값이 null이거나 thead
요소인 경우 table
요소의 첫 번째 thead
자식 요소를 제거해야 하며, 새로운 값이
null이 아니면 table
요소에서 caption
요소나 colgroup
요소가 아닌 첫 번째 요소
앞에 삽입해야 하며, 그런 요소가 없다면 테이블의 끝에 삽입해야 합니다. 새로운 값이 null이거나 thead
요소가 아닌 경우, "HierarchyRequestError
" DOMException
을
던져야 합니다.
createTHead()
메서드는 table
요소의 첫 번째 thead
자식 요소를 반환해야 하며, 그렇지
않으면 새로운 thead
요소를 table-created하고, table
요소에서 caption
요소나 colgroup
요소가 아닌 첫 번째 요소
앞에 삽입해야 하며, 그런 요소가 없다면 테이블의 끝에 삽입한 다음 그 요소를 반환해야 합니다.
deleteTHead()
메서드는 table
요소의 첫 번째 thead
자식 요소를 제거해야 합니다.
tFoot
IDL 속성은
table
요소의 첫 번째 tfoot
자식 요소를 반환해야 하며, 그렇지 않으면
null을 반환해야 합니다. 설정할 때, 새로운 값이 null이거나 tfoot
요소인 경우 table
요소의 첫 번째 tfoot
자식 요소를 제거해야 하며, 새로운 값이
null이 아닌 경우 테이블 끝에 삽입해야 합니다. 새로운 값이 null이거나 tfoot
요소가 아닌 경우, "HierarchyRequestError
" DOMException
을
던져야 합니다.
createTFoot()
메서드는 table
요소의 첫 번째 tfoot
자식 요소를 반환해야 하며, 그렇지
않으면 새로운 tfoot
요소를 table-created하고 테이블의 끝에 삽입한 다음 그 요소를 반환해야 합니다.
deleteTFoot()
메서드는 table
요소의 첫 번째 tfoot
자식 요소를 제거해야 합니다.
tBodies
속성은
table
노드를 기준으로 필터가 tbody
요소에만 일치하는 HTMLCollection
을
반환해야 합니다.
createTBody()
메서드는 새로운 tbody
요소를 table-create하고, table
요소의 마지막 tbody
자식 요소 다음에 삽입하거나, table
요소에 tbody
자식 요소가 없을 경우 테이블의 끝에
삽입해야 하며, 그 다음 새 요소를 반환해야 합니다.
rows
속성은 table
노드를 기준으로 필터가 tr
요소에만 일치하는 HTMLCollection
을
반환해야 하며, 이 요소들은 thead
의 자식인
요소가 먼저 포함되고, table
또는
tbody
요소의 자식인 요소가 그 다음으로
포함되며, 마지막으로 tfoot
의 자식인 요소가
포함되어야 합니다.
insertRow(index)
메서드의 동작은 테이블의 상태에 따라 달라집니다. 호출될 때 메서드는
테이블의 상태와 index 인수를 설명하는 다음 조건 목록에서 요구되는 첫 번째 항목을 수행해야 합니다:
rows
컬렉션에 있는
요소의 개수보다 큰 경우:
IndexSizeError
" DOMException
을
던져야 합니다.
rows
컬렉션에 요소가 하나도 없고 table
에 tbody
요소가 없는 경우:
tbody
요소를 table-create한 다음, tr
요소를 table-create하고, tr
요소를 tbody
요소에 추가한 후, tbody
요소를 table
요소에 추가하고, 마지막으로
tr
요소를 반환해야 합니다.
rows
컬렉션에 요소가 하나도 없는 경우:
tr
요소를 table-create하고, 마지막 tbody
요소에 추가한 후 tr
요소를 반환해야 합니다.
rows
컬렉션의 항목 개수와
같은 경우:
tr
요소를 table-create하고, rows
컬렉션에서 마지막 tr
요소의 부모에 추가해야 하며, 그런 다음 새로
생성된 tr
요소를 반환해야 합니다.
tr
요소를 table-create하고, rows
컬렉션에서 index번째
tr
요소 바로 앞에 삽입한 후 새로 생성된
tr
요소를 반환해야 합니다.
deleteRow(index)
메서드가 호출될 때, 사용자 에이전트는 다음 단계를 수행해야 합니다:
index가 -1보다 작거나 rows
컬렉션에 있는 요소 수보다 크거나
같으면, "IndexSizeError
" DOMException
을
던져야 합니다.
index가 -1인 경우, rows
컬렉션에서 마지막 요소를 제거하거나,
rows
컬렉션이 비어 있는 경우 아무
작업도 하지 않아야 합니다.
그렇지 않은 경우, index 번째 요소를 rows
컬렉션에서 제거해야 합니다.
여기 수수께끼 퍼즐을 마크업하는 테이블 사용 예가 있습니다. 이러한 테이블에는 헤더가 필요하지 않음을 확인하십시오.
< style >
# sudoku { border-collapse : collapse ; border : solid thick ; }
# sudoku colgroup , table # sudoku tbody { border : solid medium ; }
# sudoku td { border : solid thin ; height : 1.4 em ; width : 1.4 em ; text-align : center ; padding : 0 ; }
</ style >
< h1 > Today's Sudoku</ h1 >
< table id = "sudoku" >
< colgroup >< col >< col >< col >
< colgroup >< col >< col >< col >
< colgroup >< col >< col >< col >
< tbody >
< tr > < td > 1 < td > < td > 3 < td > 6 < td > < td > 4 < td > 7 < td > < td > 9
< tr > < td > < td > 2 < td > < td > < td > 9 < td > < td > < td > 1 < td >
< tr > < td > 7 < td > < td > < td > < td > < td > < td > < td > < td > 6
< tbody >
< tr > < td > 2 < td > < td > 4 < td > < td > 3 < td > < td > 9 < td > < td > 8
< tr > < td > < td > < td > < td > < td > < td > < td > < td > < td >
< tr > < td > 5 < td > < td > < td > 9 < td > < td > 7 < td > < td > < td > 1
< tbody >
< tr > < td > 6 < td > < td > < td > < td > 5 < td > < td > < td > < td > 2
< tr > < td > < td > < td > < td > < td > 7 < td > < td > < td > < td >
< tr > < td > 9 < td > < td > < td > 8 < td > < td > 2 < td > < td > < td > 5
</ table >
첫 번째 행과 첫 번째 열에 헤더가 있는 셀의 그리드로만 구성된 테이블 이상의 것과, 일반적으로 독자가 내용을 이해하기 어려울 수 있는 테이블의 경우, 작성자는 테이블을 소개하는 설명 정보를 포함해야 합니다. 이 정보는 모든 사용자에게 유용하지만, 특히 테이블을 볼 수 없는 사용자, 예를 들어 화면 판독기 사용자에게 매우 유용합니다.
이러한 설명 정보는 테이블의 목적을 소개하고, 기본적인 셀 구조를 개략적으로 설명하며, 어떤 경향이나 패턴을 강조하고, 일반적으로 사용자가 테이블을 사용하는 방법을 가르쳐야 합니다.
예를 들어, 다음과 같은 테이블이 있습니다:
부정적 | 특성 | 긍정적 |
---|---|---|
슬픔 | 기분 | 행복 |
실패 | 성적 | 합격 |
...이 테이블은 "특성은 두 번째 열에 제공되며, 왼쪽 열에는 부정적인 측면이, 오른쪽 열에는 긍정적인 측면이 있습니다"와 같은 설명이 유용할 수 있습니다.
이 정보를 포함하는 다양한 방법이 있습니다:
< p > 다음 테이블에서는 특성이 두 번째 열에 제공되며, 왼쪽 열에는 부정적인 측면이, 오른쪽 열에는 긍정적인 측면이 있습니다.</ p >
< table >
< caption > 긍정적 및 부정적인 측면이 있는 특성</ caption >
< thead >
< tr >
< th id = "n" > 부정적
< th > 특성
< th > 긍정적
</ thead >
< tr >
< td headers = "n r1" > 슬픔
< th id = "r1" > 기분
< td > 행복
</ tr >
< td headers = "n r2" > 실패
< th id = "r2" > 성적
< td > 합격
</ table >
caption
에
< table >
< caption >
< strong > 긍정적 및 부정적인 측면이 있는 특성.</ strong >
< p > 특성은 두 번째 열에 제공되며, 왼쪽 열에는 부정적인 측면이, 오른쪽 열에는 긍정적인 측면이 있습니다.</ p >
</ caption >
< thead >
< tr >
< th id = "n" > 부정적
< th > 특성
< th > 긍정적
</ thead >
< tr >
< td headers = "n r1" > 슬픔
< th id = "r1" > 기분
< td > 행복
</ tr >
< td headers = "n r2" > 실패
< th id = "r2" > 성적
< td > 합격
</ table >
caption
에,
details
요소 내에서
< table >
< caption >
< strong > Characteristics with positive and negative sides.</ strong >
< details >
< summary > Help</ summary >
< p > Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</ p >
</ details >
</ caption >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
figure
내에
< figure >
< figcaption > 긍정적 및 부정적인 측면이 있는 특성</ figcaption >
< p > 특성은 두 번째 열에 제공되며, 왼쪽 열에는 부정적인 측면이, 오른쪽 열에는 긍정적인 측면이 있습니다.</ p >
< table >
< thead >
< tr >
< th id = "n" > 부정적
< th > 특성
< th > 긍정적
</ tbody >
< tr >
< td headers = "n r1" > 슬픔
< th id = "r1" > 기분
< td > 행복
</ tr >
< td headers = "n r2" > 실패
< th id = "r2" > 성적
< td > 합격
</ table >
</ figure >
figure
의
figcaption
내에
< figure >
< figcaption >
< strong > 긍정적 및 부정적인 측면이 있는 특성</ strong >
< p > 특성은 두 번째 열에 제공되며, 왼쪽 열에는 부정적인 측면이, 오른쪽 열에는 긍정적인 측면이 있습니다.</ p >
</ figcaption >
< table >
< thead >
< tr >
< th id = "n" > 부정적
< th > 특성
< th > 긍정적
</ tbody >
< tr >
< td headers = "n r1" > 슬픔
< th id = "r1" > 기분
< td > 행복
</ tr >
< td headers = "n r2" > 실패
< th id = "r2" > 성적
< td > 합격
</ table >
</ figure >
작성자는 위의 기법 외에도 적절한 다른 기법이나 기법의 조합을 사용할 수 있습니다.
물론, 테이블이 배치된 방식을 설명하는 설명을 작성하는 것보다, 설명이 필요 없도록 테이블을 조정하는 것이 가장 좋은 방법입니다.
위의 예제에서 사용된 테이블의 경우, 테이블을 간단히 재배치하여 헤더가 상단과 왼쪽에 있도록 하면 설명이 필요 없으며, headers
속성을 사용할
필요도 없습니다:
< table >
< caption > 긍정적 및 부정적인 측면이 있는 특성</ caption >
< thead >
< tr >
< th > 특성
< th > 부정적
< th > 긍정적
</ thead >
< tr >
< th > 기분
< td > 슬픔
< td > 행복
</ tr >
< th > 성적
< td > 실패
< td > 합격
</ table >
좋은 테이블 설계는 테이블을 더 읽기 쉽고 사용하기 쉽게 만드는 데 중요한 역할을 합니다.
시각적 매체에서 열과 행 경계를 제공하고 행 배경을 번갈아 가며 사용하는 것은 복잡한 테이블을 더 읽기 쉽게 만드는 데 매우 효과적일 수 있습니다.
대량의 숫자 콘텐츠가 포함된 테이블의 경우, 모노스페이스 폰트를 사용하면 사용자 에이전트가 경계를 렌더링하지 않는 상황에서도 패턴을 쉽게 볼 수 있습니다. (유감스럽게도, 역사적 이유로 테이블의 경계를 렌더링하지 않는 것은 일반적인 기본값입니다.)
음성 매체에서 테이블 셀은 셀의 내용을 읽기 전에 해당 헤더를 보고하여 구분할 수 있으며, 사용자가 테이블의 전체 내용을 소스 순서대로 직렬화하는 대신 그리드 방식으로 테이블을 탐색할 수 있도록 허용합니다.
저자들은 이러한 효과를 얻기 위해 CSS를 사용하는 것이 권장됩니다.
사용자 에이전트는 페이지가 CSS를 사용하지 않고 테이블이 레이아웃 테이블로 분류되지 않은 경우, 이러한 기법을 사용하여 테이블을 렌더링하는 것이 권장됩니다.
caption
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
table
요소의 첫 번째 자식 요소로
사용됩니다.
table
요소는 포함되지 않습니다.
caption
요소의 종료 태그는 caption
요소가 ASCII
공백 문자 또는 주석으로 바로 뒤따르지 않는 경우 생략할 수 있습니다.
[Exposed =Window ]
interface HTMLTableCaptionElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 더 이상 사용되지 않는 멤버도 포함됩니다
};
caption
요소는 table
요소를 부모로 가지는 경우 해당 표의
제목을 나타냅니다.
table
요소가 figure
요소의 유일한 콘텐츠이고 figcaption
외에는 다른
콘텐츠가 없을 때, caption
요소는 figcaption
요소로 대체되어야 합니다.
캡션은 테이블에 대한 맥락을 제공하여 이해하기 훨씬 쉽게 만들 수 있습니다.
예를 들어, 다음 테이블을 고려해 보십시오:
1 | 2 | 3 | 4 | 5 | 6 | |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
추상적으로 보면 이 테이블은 명확하지 않습니다. 그러나 테이블 번호(주요 본문에서 참조하기 위해)를 제공하고 테이블의 용도를 설명하는 캡션이 있으면 더 이해하기 쉬워집니다:
< caption >
< p > Table 1.
< p > 이 테이블은 두 개의 6면체 주사위를 굴려 얻은 총 점수를 보여줍니다. 첫 번째 행은 첫 번째 주사위의 값을 나타내고, 첫 번째 열은 두 번째 주사위의 값을 나타냅니다. 총 점수는 두 주사위 값에 해당하는 셀에 표시됩니다.
</ caption >
이렇게 하면 사용자에게 더 많은 맥락을 제공합니다:
1 | 2 | 3 | 4 | 5 | 6 | |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
colgroup
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
table
요소의 자식으로, caption
요소 뒤, thead
, tbody
, tfoot
, tr
요소 앞에 사용됩니다.
span
속성이 존재할 경우: 아무것도 포함하지 않음.
span
속성이 존재하지 않을
경우: 0개 이상의 col
및 template
요소.
colgroup
요소의 시작 태그는 colgroup
요소 내부의
첫 번째 항목이 col
요소인 경우 생략할
수 있으며, 요소가 종료 태그가 생략된 다른 colgroup
요소 바로
뒤에 있지 않은 경우에만 생략할 수 있습니다. (요소가 비어 있는 경우에는 생략할 수 없습니다.)
colgroup
요소의
종료 태그는 colgroup
요소가 ASCII 공백 문자 또는 주석 바로 뒤에 오지 않는 경우 생략할 수 있습니다.
span
— 요소가 가로지르는
열의 수
[Exposed =Window ]
interface HTMLTableColElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute unsigned long span ;
// 구식 멤버도 포함합니다
};
colgroup
요소는 table
요소의 부모가 있을 경우, 부모가
table
요소일 때, 그 부모에서 하나
이상의 열 그룹을 표현합니다.
colgroup
요소에 col
요소가 포함되지 않은 경우, 요소는 span
콘텐츠 속성을 지정할 수
있으며, 해당 값은 0보다 크고 1000 이하인 유효한 비음수 정수이어야 합니다.
colgroup
요소와 그
span
속성은 테이블 모델의 일부를 형성합니다.
span
IDL
속성은 동일한 이름의 콘텐츠 속성을 반영해야 하며, 이는 [1, 1000] 범위로 조정되며, 기본값은 1입니다.
col
요소모든 현재 엔진에서 지원됩니다.
colgroup
요소의 자식으로,
span
속성이 없는 경우에만 사용됩니다.
span
— 요소가 가로지르는 열의 수
HTMLTableColElement
사용,
colgroup
요소와 동일하게
정의됨.
col
요소가 부모를 가지고 있고, 그 부모가 colgroup
요소이며, 그 자체가
table
요소인 경우, col
요소는 colgroup
이 표현하는 열 그룹 내에서 하나 이상의 열을 표현합니다.
요소는 span
콘텐츠 속성을 지정할 수 있으며,
해당 값은 0보다 크고 1000 이하인 유효한 비음수
정수이어야 합니다.
col
요소와 그 span
속성은 테이블 모델의 일부를 형성합니다.
tbody
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
table
요소의 자식으로, caption
, colgroup
, thead
요소들 다음에 위치해야 하며,
tr
요소가 table
요소의 자식으로 존재하지 않아야
합니다.
tr
및 스크립트 지원 요소.
tbody
요소의 시작 태그는 tr
요소가 첫 번째 자식 요소로 있을 경우 생략할 수
있으며, 이 요소가 바로 앞에 tbody
,
thead
, 또는 tfoot
요소가 생략된 종료 태그로 끝나지 않는
경우에만 생략할 수 있습니다. (요소가 비어있으면 생략할 수 없습니다.)
tbody
요소의 종료 태그는 tbody
또는 tfoot
요소가 뒤따르거나 부모 요소에 더
이상 내용이 없을 경우 생략할 수 있습니다.
[Exposed =Window ]
interface HTMLTableSectionElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject ] readonly attribute HTMLCollection rows ;
HTMLTableRowElement insertRow (optional long index = -1);
[CEReactions ] undefined deleteRow (long index );
// 이전에 사용되었던 멤버들도 포함됩니다.
};
HTMLTableSectionElement
인터페이스는 thead
및
tfoot
요소에도 사용됩니다.
tbody
요소는 대표합니다 행 그룹으로, 부모 table
요소에 대한 데이터를 담고 있는 tbody
요소가 부모를 가지고 있으며, 그 부모가
table
요소인 경우에 해당합니다.
tbody.rows
이 요소에 뿌리를 둔 HTMLCollection
으로
반환되며, 필터는 이 요소의 자식 요소인 tr
요소만 일치시킵니다.
tr = tbody.insertRow([ index ])
tr
요소를 생성하여, 지정된 인덱스 위치에
삽입하고, 해당 tr
을 반환합니다.
인덱스 위치는 테이블 섹션의 행을 기준으로 합니다. 인덱스 -1은 인덱스를 생략했을 때의 기본값으로, 테이블 섹션의 끝에 삽입하는 것과 동일합니다.
주어진 위치가 -1보다 작거나 행의 개수보다 크면, "IndexSizeError
" DOMException
을
던집니다.
tbody.deleteRow(index)
테이블 섹션에서 지정된 인덱스 위치의 tr
요소를 제거합니다.
인덱스 위치는 테이블 섹션의 행을 기준으로 합니다. 인덱스 -1은 테이블 섹션의 마지막 행을 삭제하는 것과 동일합니다.
주어진 위치가 -1보다 작거나 행의 마지막 인덱스보다 크거나 행이 없으면, "IndexSizeError
" DOMException
을
던집니다.
rows
속성은 이
요소에 뿌리를 둔 HTMLCollection
을
반환하며, 필터는 이 요소의 자식 요소인 tr
요소만
일치시킵니다.
insertRow(index)
메서드는 다음과 같이 동작해야 합니다:
index가 -1보다 작거나 rows
컬렉션의 요소 수보다 크면, "IndexSizeError
" DOMException
을
던집니다.
table row는 이 요소의 노드 문서,
tr
, 및 HTML 네임스페이스를 사용하여 생성한 요소의 결과여야 합니다.
table row를 반환합니다.
deleteRow(index)
메서드는 호출되었을 때, 다음과 같이 동작해야 합니다:
인덱스가 -1보다 작거나 rows
컬렉션의
마지막 요소보다 크거나 같으면, "IndexSizeError
" DOMException
을
던집니다.
인덱스가 -1이면 rows
컬렉션에서 마지막
요소를 제거하거나, 컬렉션이 비어있으면 아무 작업도 하지 않습니다.
thead
요소모든 최신 브라우저 엔진에서 지원합니다.
table
요소의 자식 요소로,
caption
및
colgroup
요소 이후,
tbody
,
tfoot
,
tr
요소들 이전에 위치해야 합니다.
그러나 table
요소의 자식 요소로 다른
thead
요소가 없을 경우에만 해당됩니다.
tr
요소와
스크립트 지원 요소를 0개
이상 포함할 수 있습니다.
thead
요소의
종료 태그
는
thead
요소 뒤에 바로
tbody
또는
tfoot
요소가 올 경우 생략할 수
있습니다.
HTMLTableSectionElement
사용.
thead
요소는
대표로서
부모 table
요소의 열 머리글(헤더)과
보조 비헤더 셀들로 구성된 행 그룹을 나타냅니다.
thead
요소가 부모를 가지며,
그 부모가 table
인 경우에 해당합니다.
이 예시는 thead
요소의 사용 예시를
보여줍니다.
th
및
td
요소가
thead
요소 내에서 사용된 것을 확인할
수 있습니다:
첫 번째 행은 헤더이고, 두 번째 행은 테이블 작성 방법에 대한 설명입니다.
< table >
< caption > School auction sign-up sheet </ caption >
< thead >
< tr >
< th >< label for = e1 > Name</ label >
< th >< label for = e2 > Product</ label >
< th >< label for = e3 > Picture</ label >
< th >< label for = e4 > Price</ label >
< tr >
< td > Your name here
< td > What are you selling?
< td > Link to a picture
< td > Your reserve price
< tbody >
< tr >
< td > Ms Danus
< td > Doughnuts
< td >< img src = "https://example.com/mydoughnuts.png" title = "Doughnuts from Ms Danus" >
< td > $45
< tr >
< td >< input id = e1 type = text name = who required form = f >
< td >< input id = e2 type = text name = what required form = f >
< td >< input id = e3 type = url name = pic form = f >
< td >< input id = e4 type = number step = 0.01 min = 0 value = 0 required form = f >
</ table >
< form id = f action = "/auction.cgi" >
< input type = button name = add value = "Submit" >
</ form >
tfoot
요소모든 최신 브라우저 엔진에서 지원합니다.
table
요소의 자식 요소로,
caption
,
colgroup
,
thead
,
tbody
,
tr
요소들 이후에 위치해야 합니다.
그러나 table
요소의 자식 요소로
다른 tfoot
요소가 없을 경우에만
해당됩니다.
tr
요소와
스크립트 지원 요소를 0개
이상 포함할 수 있습니다.
tfoot
요소의
종료 태그
는
부모 요소에 더 이상 콘텐츠가 없는 경우 생략할 수 있습니다.
HTMLTableSectionElement
사용.
tfoot
요소는
부모 table
요소의
열 요약(푸터)으로 구성된 행 그룹을 나타냅니다.
tfoot
요소가 부모를 가지며,
그 부모가 table
인 경우에 해당합니다.
tr
요소
모든 최신 브라우저 엔진에서 지원합니다.
모든 최신 브라우저 엔진에서 지원합니다.
thead
요소의 자식으로.
tbody
요소의 자식으로.
tfoot
요소의 자식으로.
table
요소의 자식으로,
caption
,
colgroup
,
thead
요소들 이후에 위치하지만,
tbody
요소가 없는 경우에만 해당됩니다.
td
,
th
,
스크립트 지원 요소를 0개 이상
포함할 수 있습니다.
tr
요소의
종료 태그
는
tr
요소가
바로 다음에 위치하거나, 부모 요소에 더 이상 콘텐츠가 없으면 생략할 수 있습니다.
[Exposed =Window ]
interface HTMLTableRowElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute long rowIndex ;
readonly attribute long sectionRowIndex ;
[SameObject ] readonly attribute HTMLCollection cells ;
HTMLTableCellElement insertCell (optional long index = -1);
[CEReactions ] undefined deleteCell (long index );
// 사용되지 않는 멤버 포함
};
tr.rowIndex
모든 최신 브라우저 엔진에서 지원합니다.
행의 위치를 테이블의 rows
목록에서 반환합니다.
요소가 테이블에 없으면 -1을 반환합니다.
tr.sectionRowIndex
행의 위치를 테이블 섹션의 rows
목록에서 반환합니다.
요소가 테이블 섹션에 없으면 -1을 반환합니다.
tr.cells
이 행의 HTMLCollection
을
반환하며, 필터는 이 요소의 자식인 td
및
th
요소만 일치합니다.
cell = tr.insertCell([ index ])
HTMLTableRowElement/insertCell
모든 최신 브라우저 엔진에서 지원합니다.
새 td
요소를 생성하여
인덱스 위치에 삽입하고 생성된 td
요소를
반환합니다.
위치는 행의 셀들에 상대적입니다. 인덱스 −1은 기본값으로, 인덱스가 생략된 경우 마지막에 삽입하는 것과 같습니다.
주어진 인덱스가 −1보다 작거나 셀 수보다 크면 "IndexSizeError
" DOMException
예외가 발생합니다.
tr.deleteCell(index)
지정된 인덱스 위치의 td
또는 th
요소를 행에서 제거합니다.
위치는 행의 셀들에 상대적입니다. 인덱스 −1은 행의 마지막 셀을 삭제하는 것과 같습니다.
주어진 인덱스가 −1보다 작거나 셀 수보다 크거나 셀이 없으면 "IndexSizeError
" DOMException
예외가 발생합니다.
rowIndex
속성은
이 요소에 부모 table
요소, 또는 부모 tbody
, thead
, tfoot
요소와 조부모 table
요소가 있는 경우, 해당 table
요소의 rows
컬렉션에서 이 tr
요소의 인덱스를 반환해야 합니다. 그러한 table
요소가 없다면, 이 속성은 −1을 반환해야
합니다.
sectionRowIndex
속성은 이 요소에 부모 table
, tbody
, thead
, 또는 tfoot
요소가 있는 경우, 부모 요소의
rows
컬렉션에서 tr
요소의 인덱스를
반환해야 합니다 (테이블의 경우, 이는 HTMLTableElement
의 rows
컬렉션입니다; 테이블 섹션의 경우, 이는 HTMLTableSectionElement
의
rows
컬렉션입니다). 그러한 부모 요소가 없다면, 이 속성은
−1을 반환해야 합니다.
cells
속성은 이
tr
요소를 루트로 하고, 필터가 td
및 th
요소와 일치하는 HTMLCollection
을
반환해야 하며, 이는 tr
요소의 자식 요소들만 필터링합니다.
insertCell(index)
메서드는 다음과 같이 동작해야 합니다:
index가 −1보다 작거나 cells
컬렉션의 요소 수보다 크면, "IndexSizeError"
DOMException
을
던집니다.
table cell은 이 tr
요소의 노드 문서, td
및 HTML 네임스페이스를 사용하여 생성된 요소입니다.
index가 −1과 같거나 cells
컬렉션의 항목 수와 같으면, 이 table cell을 tr
요소에 추가합니다.
그 외의 경우, 이 table cell을 tr
요소의 자식으로, cells
컬렉션의 index번째
td
또는 th
요소 바로 앞에 삽입합니다.
table cell을 반환합니다.
deleteCell(index)
메서드는 다음과 같이 동작해야 합니다:
index가 −1보다 작거나 cells
컬렉션의 요소 수보다 크거나 같으면, "IndexSizeError"
DOMException
을
던집니다.
index가 −1이면, cells
컬렉션이 비어 있지 않은 경우, 마지막 요소를 제거하고, 그렇지 않으면
아무 것도 하지 않습니다.
td
요소
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
tr
요소의 자식으로서.
td
요소의 종료 태그는 td
요소가 바로 뒤에 오거나 th
요소가 뒤따르거나 상위 요소에 더 이상 콘텐츠가 없으면
생략할 수 있습니다.
colspan
— 셀이 걸쳐야 하는 열 수
rowspan
— 셀이 걸쳐야 하는 행 수
headers
— 이 셀의 헤더 셀
[Exposed =Window ]
interface HTMLTableCellElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute unsigned long colSpan ;
[CEReactions ] attribute unsigned long rowSpan ;
[CEReactions ] attribute DOMString headers ;
readonly attribute long cellIndex ;
[CEReactions ] attribute DOMString scope ; // th 요소만 적합
[CEReactions ] attribute DOMString abbr ; // th 요소만 적합
// 오래된 멤버도 있음
};
HTMLTableCellElement
인터페이스는 th
요소에도 사용됩니다.
td
요소와 그 colspan
, rowspan
, headers
속성은 테이블 모델에 참여합니다.
사용자 에이전트는 특히 비시각적 환경에서 또는 테이블을 2D 그리드로 표시하는 것이 비실용적인 경우 셀의 내용을 렌더링할 때 셀의 위치를 제공하거나 셀의 헤더 셀을 나열하는 등의 방법으로 셀에 대한
사용자의 컨텍스트를 제공할 수 있습니다(셀의 헤더 셀을 할당하는 알고리즘에 의해 결정됨). 셀의 헤더 셀이 나열될 때, 사용자 에이전트는 해당 헤더 셀에 abbr
속성 값이 있는 경우 해당 값을 대신 사용할 수 있습니다.
이 예제에서는 편집 가능한 셀 그리드(본질적으로 간단한 스프레드시트)로 구성된 웹 애플리케이션의 스니펫을 보여줍니다. 셀 중 하나는 위의 셀의 합계를 표시하도록 설정되었습니다. 셋은 제목으로
표시되며, th
요소 대신 td
요소를 사용합니다. 스크립트가 이 요소에 이벤트 핸들러를
연결하여 합계를 유지합니다.
< table >
< tr >
< th >< input value = "Name" >
< th >< input value = "Paid ($)" >
< tr >
< td >< input value = "Jeff" >
< td >< input value = "14" >
< tr >
< td >< input value = "Britta" >
< td >< input value = "9" >
< tr >
< td >< input value = "Abed" >
< td >< input value = "25" >
< tr >
< td >< input value = "Shirley" >
< td >< input value = "2" >
< tr >
< td >< input value = "Annie" >
< td >< input value = "5" >
< tr >
< td >< input value = "Troy" >
< td >< input value = "5" >
< tr >
< td >< input value = "Pierce" >
< td >< input value = "1000" >
< tr >
< th >< input value = "Total" >
< td >< output value = "1060" >
</ table >
th
요소
모든 현재 엔진에서 지원됩니다.
tr
요소의 자식 요소로 사용.
header
, footer
, 섹셔닝 콘텐츠, 또는 헤딩 콘텐츠 자손은 없음.
th
요소의 종료 태그는 th
요소가 즉시 td
또는 th
요소로 이어지거나 부모 요소에 더 이상 콘텐츠가 없을
경우 생략할 수 있습니다.
colspan
— 셀이 걸쳐야 할 열의 수
rowspan
— 셀이 걸쳐야 할 행의 수
headers
— 이 셀에 대한 헤더 셀
scope
— 헤더 셀이 적용되는 셀을 지정
abbr
— 다른 문맥에서 셀을 참조할 때 사용할 대체 레이블
HTMLTableCellElement
를
사용하며, td
요소에 대해 정의됩니다.
th
요소는 scope
콘텐츠 속성을 가질 수 있습니다.
scope
속성은 다음과 같은 키워드와 상태를 가지는 열거형 속성입니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
row
| row | 헤더 셀은 동일한 행의 일부 후속 셀에 적용됩니다. |
col
| column | 헤더 셀은 동일한 열의 일부 후속 셀에 적용됩니다. |
rowgroup
| row group | 헤더 셀은 행 그룹의 모든 남은 셀에 적용됩니다. |
colgroup
| column group | 헤더 셀은 열 그룹의 모든 남은 셀에 적용됩니다. |
이 속성의 누락된 값 기본값과 유효하지 않은 값 기본값은 모두 auto 상태입니다. (이 상태에서는 헤더 셀이 문맥에 따라 선택된 셀 집합에 적용됩니다.)
th
요소의 scope
속성은 요소가 행 그룹에 연결되지 않은 경우 행 그룹 상태에 있어서는 안 되며, 요소가 열 그룹에 연결되지 않은 경우 열 그룹 상태에 있어서는 안 됩니다.
th
요소는 abbr
콘텐츠 속성을 지정할 수 있습니다. 이 값은 셀을 다른 문맥에서 참조할 때
사용되는 헤더 셀의 대체 라벨이어야 합니다 (예: 데이터 셀에 적용되는 헤더 셀을 설명할 때). 일반적으로 전체 헤더 셀의 약어 형태이지만, 확장되거나 단순히 다른 표현일 수도 있습니다.
th
요소와 그 colspan
, rowspan
, headers
, 그리고 scope
속성은 테이블 모델에 참여합니다.
다음 예제는 scope
속성의 rowgroup
값이 헤더 셀이
적용되는 데이터 셀에 어떻게 영향을 미치는지를 보여줍니다.
다음은 테이블을 나타내는 마크업 조각입니다:
< table >
< thead >
< tr > < th > ID < th > 측정 < th > 평균 < th > 최대값
< tbody >
< tr > < td > < th scope = rowgroup > 고양이 < td > < td >
< tr > < td > 93 < th > 다리 < td > 3.5 < td > 4
< tr > < td > 10 < th > 꼬리 < td > 1 < td > 1
< tbody >
< tr > < td > < th scope = rowgroup > 영어 사용자 < td > < td >
< tr > < td > 32 < th > 다리 < td > 2.67 < td > 4
< tr > < td > 35 < th > 꼬리 < td > 0.33 < td > 1
</ table >
이것은 다음과 같은 테이블을 생성합니다:
ID | 측정 | 평균 | 최대값 |
---|---|---|---|
고양이 | |||
93 | 다리 | 3.5 | 4 |
10 | 꼬리 | 1 | 1 |
영어 사용자 | |||
32 | 다리 | 2.67 | 4 |
35 | 꼬리 | 0.33 | 1 |
첫 번째 행의 헤더는 모두 열의 아래쪽으로 직접 적용됩니다.
rowgroup 상태의 scope
속성을 가진 헤더는 첫 번째 열에 있는 셀을 제외한 행
그룹의 모든 셀에 적용됩니다.
나머지 헤더는 오른쪽에 있는 셀에만 적용됩니다.
td
및 th
요소에 공통된 속성td
및 th
요소에는 colspan
콘텐츠 속성이 지정될 수
있으며, 그 값은 0보다 크고 1000 이하인 유효한 0이 아닌 정수이어야 합니다.
td
및 th
요소에는 또한
rowspan
콘텐츠 속성이 지정될 수
있으며, 그 값은 65534 이하의 유효한 0이 아닌 정수이어야 합니다. 이 속성의 값이 0인
경우 셀이 행 그룹의 남은 모든 행에 걸쳐야 함을 의미합니다.
이 속성들은 각각 셀이 걸칠 열과 행의 수를 나타냅니다. 이러한 속성들은 테이블 모델 설명에서 언급된 대로 셀이 겹치도록 사용해서는 안 됩니다.
td
및 th
요소에는 headers
콘텐츠 속성이 지정될 수
있습니다. 이 headers
속성이 지정된 경우, 그 값은 고유한 공백으로 구분된 토큰들의
정렬되지 않은 집합으로 구성된 문자열이어야 하며, 그 중 어떤 것도 서로 동일하지 않아야 하며 각 토큰은 th
요소의 ID 값을 가져야 하며, 이 td
또는 th
요소가 테이블 모델에서 정의된 동일한 테이블에 참여해야 합니다.
th
요소는 ID id가 있는 모든 td
및 th
요소에 의해
직접적으로 대상화된다고 합니다. 동일한 테이블에 포함된 headers
속성의 값에 해당하는 토큰이 포함된 모든 요소 B에 의해 th
또는 td
요소는
대상화된다고 합니다.
th
요소는 스스로
대상화되어서는 안 됩니다.
colspan
,
rowspan
,
그리고 headers
속성들은 테이블 모델에 참여합니다.
cell.cellIndex
셀의 위치를 행의 cells
목록에서
반환합니다. 이는 셀이 테이블에서 x-축에 있는 위치와 반드시 일치하는 것은 아닙니다. 앞서 있는 셀이 여러 행이나 열에 걸칠 수 있기 때문입니다.
요소가 행에 포함되지 않은 경우 -1을 반환합니다.
colSpan
IDL
속성은 colspan
콘텐츠 속성을 반영해야 합니다. 이는 [1, 1000] 범위로 고정되며, 기본값은 1입니다.
rowSpan
IDL
속성은 rowspan
콘텐츠 속성을 반영해야 합니다. 이는 [0, 65534] 범위로 고정되며, 기본값은 1입니다.
headers
IDL
속성은 같은 이름의 콘텐츠 속성을 반영해야 합니다.
cellIndex
IDL 속성은 요소가 부모 tr
요소를 가지고 있는
경우, 부모 요소의 cells
컬렉션에서 셀 요소의
인덱스를 반환해야 합니다. 그러한 부모 요소가 없는 경우, 속성은 -1을 반환해야 합니다.
scope
IDL 속성은
같은 이름의 콘텐츠 속성을 반영해야 하며, 알려진 값만으로 제한됩니다.
abbr
IDL 속성은 같은
이름의 콘텐츠 속성을 반영해야 합니다.
다양한 테이블 요소와 그 콘텐츠 속성들은 함께 테이블 모델을 정의합니다.
테이블은 좌표 (x, y)를 가진 슬롯의 2차원 그리드에 정렬된
셀로 구성됩니다. 그리드는 유한하며, 비어 있거나 하나 이상의 슬롯을 가질 수 있습니다. 그리드에 하나 이상의 슬롯이 있는 경우, x 좌표는 항상 0 ≤
x < xwidth 범위에 있고, y 좌표는 항상 0 ≤ y
< yheight 범위에 있습니다. xwidth와
yheight 중 하나 또는 둘 다 0인 경우, 테이블은 비어 있습니다(슬롯이 없습니다). 테이블은 table
요소에 해당합니다.
셀은 특정 width와 height를 가진 슬롯의 집합으로, 셀이
cellx,
celly 슬롯에 앵커링되어 있어 cellx ≤ x <
cellx+width 및 celly ≤ y <
celly+height인 좌표의 모든 슬롯을 커버합니다. 셀은 데이터 셀 또는 헤더 셀이 될 수 있습니다.
데이터 셀은 td
요소에, 헤더 셀은 th
요소에 해당합니다. 두 유형의 셀 모두 하나 이상의
연관된 헤더 셀을 가질 수 있습니다.
일부 오류 상황에서는 두 개의 셀이 동일한 슬롯을 차지할 수 있습니다.
행은 특정 y 값에 대해 x=0에서 x=xwidth-1까지
슬롯의 완전한 집합입니다. 행은 보통 tr
요소에
해당하지만, 행 그룹은 여러 행에 걸친 셀과 관련된 경우 끝에 일부
암시된 행을 가질 수 있습니다.
열은 특정 x 값에 대해 y=0에서
y=yheight-1까지 슬롯의 완전한 집합입니다. 열은 col
요소에 해당할 수 있습니다. col
요소가 없는 경우 열은 암시적으로
생성됩니다.
행 그룹은 (0, groupy) 슬롯에 앵커링된 행의 집합으로, 특정 height를 가지고 0 ≤ x <
xwidth 및 groupy ≤ y <
groupy+height인 좌표의 모든 슬롯을 커버합니다. 행 그룹은 tbody
, thead
, 그리고 tfoot
요소에 해당합니다. 모든 행이 반드시
행 그룹에 속하는 것은 아닙니다.
열 그룹은 (groupx, 0) 슬롯에 앵커링된 열의 집합으로, 특정 width를 가지고
groupx ≤ x < groupx+width 및
0 ≤ y < yheight인 좌표의 모든 슬롯을 커버합니다. 열 그룹은 colgroup
요소에 해당합니다.
모든 열이 반드시 열 그룹에 속하는 것은 아닙니다.
행 그룹은 서로 겹칠 수 없습니다. 마찬가지로, 열 그룹도 서로 겹칠 수 없습니다.
셀은 두 개 이상의 행 그룹에 걸쳐 있는 슬롯을 커버할 수 없습니다. 그러나 셀이 여러 열 그룹에 속할 수는 있습니다. 하나의 셀을 구성하는 모든 슬롯은 0개 또는 1개의 행 그룹 및 0개 이상의 열 그룹에 속합니다.
셀, 열, 행, 행 그룹, 열 그룹 외에도, 테이블에는 caption
요소가 연결될 수
있습니다. 이는 테이블에 제목이나 설명을 제공합니다.
테이블 모델 오류는 table
요소 및 그 하위 요소로 표현된
데이터의 오류입니다. 문서에는 테이블 모델 오류가 없어야 합니다.
table
요소와 연결된 테이블에서 어떤 요소가 어떤 슬롯에 해당하는지, 테이블의
크기(xwidth와 yheight)를 결정하고, 테이블 모델 오류가 있는지 여부를 확인하려면, 사용자 에이전트는 다음 알고리즘을 사용해야 합니다:
xwidth를 0으로 설정합니다.
yheight를 0으로 설정합니다.
the table을 table
요소로 표현된 테이블로 설정합니다.
xwidth와 yheight 변수는 the table의 크기를 나타냅니다.
the table은 초기에는 비어 있습니다.
table
요소에 자식 요소가 없으면,
the table을 반환합니다 (이 경우 테이블은 비어 있습니다).
table
요소의 첫 번째 caption
자식 요소를
the table에 연결합니다. 그러한 자식이 없으면, 연결된 caption
요소가 없습니다.
current element를 table
요소의 첫 번째 자식 요소로
설정합니다.
이 알고리즘의 어떤 단계에서 current element를 table
의 다음 자식으로 이동해야 할
때, 다음 자식이 없는 경우, 사용자 에이전트는 이 알고리즘의 끝부분에 있는 끝 단계로 이동해야 합니다.
current element가 colgroup
요소인 경우,
다음 하위 단계를 따릅니다:
열 그룹: current element를 다음의 적절한 경우에 따라 처리합니다:
col
자식 요소를 가진 경우
다음 단계를 따릅니다:
xstart에 xwidth 값을 설정합니다.
열: current column col
요소에 span
속성이
있는 경우, 음수가 아닌 정수의 구문 분석
규칙을 사용하여 그 값을 구문 분석합니다.
값의 구문 분석 결과가 오류가 아니거나 0이 아니면 span을 그 값으로 설정합니다.
그렇지 않고 col
요소에 span
속성이 없거나, 속성 값을 구문 분석하려는 시도가 오류나 0을 반환한 경우, span을 1로 설정합니다.
span이 1000을 초과하면 1000으로 설정합니다.
xwidth를 span만큼 증가시킵니다.
current column이 colgroup
요소의 마지막 col
자식 요소가 아닌 경우, current column을 colgroup
요소의 다음 col
자식 요소로 설정하고, 열이라는 레이블이 붙은 단계로 돌아갑니다.
테이블의 마지막 열이
x=xstart부터
x=xwidth-1까지 새로운 열 그룹을
형성하며, 슬롯 (xstart, 0)에 앵커링되고, 너비는
xwidth-xstart인 colgroup
요소에 해당합니다.
col
자식 요소가 없는
경우
colgroup
요소에 span
속성이 있는 경우, 음수가 아닌 정수의 구문
분석 규칙을 사용하여 그 값을 구문 분석합니다.
값의 구문 분석 결과가 오류가 아니거나 0이 아니면 span을 그 값으로 설정합니다.
그렇지 않고 colgroup
요소에 span
속성이 없거나, 속성 값을 구문 분석하려는 시도가 오류나 0을 반환한 경우, span을 1로 설정합니다.
span이 1000을 초과하면 1000으로 설정합니다.
xwidth를 span만큼 증가시킵니다.
테이블의 마지막 span 열이 새로운 열 그룹을 형성하며, 슬롯
(xwidth-span, 0)에 앵커링되고, 너비는 span으로
설정됩니다. 이 그룹은 colgroup
요소에 해당합니다.
current element가 colgroup
요소인 경우, 위의 열 그룹 단계로 이동합니다.
ycurrent를 0으로 설정합니다.
list of downward-growing cells을 빈 목록으로 설정합니다.
current element가 tr
인 경우, 행 처리 알고리즘을
실행하고, current element를 table
의 다음 자식으로 이동한 후, 행 단계로
돌아갑니다.
행 그룹 종료 알고리즘을 실행합니다.
current element가 tfoot
인 경우, 해당 요소를
보류 중인 tfoot
요소들 목록에 추가하고, current element를 table
의 다음 자식으로 이동한 후, 행 단계로
돌아갑니다.
current element는 thead
또는 tbody
입니다.
행 그룹 처리 알고리즘을 실행합니다.
행 단계로 돌아갑니다.
끝: 트리 순서에 따라 보류 중인 tfoot
요소들 목록에
있는 각 tfoot
요소에 대해 행
그룹 처리 알고리즘을 실행합니다.
the table을 반환합니다.
위의 단계 세트에서 thead
, tbody
및 tfoot
요소를 처리하기 위해 호출되는 행 그룹 처리 알고리즘은 다음과 같습니다:
ystart에 yheight 값을 설정합니다.
yheight가 ystart보다 큰 경우, 테이블의 마지막 행이 y=ystart에서 y=yheight-1까지 새로운 행 그룹을 형성하며, 슬롯의 좌표 (0, ystart)에 앵커링되고, 높이는 yheight-ystart로 설정됩니다. 이 그룹은 처리 중인 요소에 해당합니다.
행 그룹 종료 알고리즘을 실행합니다.
위의 단계 세트에서 행의 블록을 시작하고 종료할 때 호출되는 행 그룹 종료 알고리즘은 다음과 같습니다:
ycurrent가 yheight보다 작은 동안, 다음 단계를 따릅니다:
아래로 확장되는 셀 확장 알고리즘을 실행합니다.
ycurrent를 1씩 증가시킵니다.
list of downward-growing cells을 비웁니다.
tr
요소를 처리하기 위해 위의 단계 세트에서 호출되는 행 처리 알고리즘은 다음과 같습니다:
yheight가 ycurrent와 같으면 yheight를 1씩 증가시킵니다. (ycurrent는 yheight보다 크지 않습니다.)
xcurrent를 0으로 설정합니다.
아래로 확장되는 셀 확장 알고리즘을 실행합니다.
처리 중인 tr
요소에 td
또는 th
자식 요소가 없으면
ycurrent를 1씩 증가시키고, 이 단계 세트를 중단한 다음 위의 알고리즘으로 돌아갑니다.
셀: xcurrent가 xwidth보다 작고 좌표 (xcurrent, ycurrent)를 가진 슬롯에 이미 셀이 할당되어 있는 동안, xcurrent를 1씩 증가시킵니다.
xcurrent가 xwidth와 같으면 xwidth를 1씩 증가시킵니다. (xcurrent는 xwidth보다 크지 않습니다.)
current cell에 colspan
속성이 있는 경우, 그 속성의 값을 구문 분석하고,
colspan을 결과로 설정합니다.
값 구문 분석에 실패하거나 0을 반환했거나 속성이 없는 경우, colspan을 대신 1로 설정합니다.
colspan이 1000을 초과하면 1000으로 설정합니다.
current cell에 rowspan
속성이 있는 경우, 그 속성의 값을 구문 분석하고,
rowspan을 결과로 설정합니다.
값 구문 분석에 실패했거나 속성이 없는 경우, rowspan을 대신 1로 설정합니다.
rowspan이 65534를 초과하면 65534로 설정합니다.
rowspan이 0이고 table
요소의 노드 문서가 퀴크 모드로
설정되지 않은 경우, cell grows downward을 true로 설정하고, rowspan을 1로 설정합니다. 그렇지 않은 경우, 셀이
아래로
확장됨을 false로 설정합니다.
xwidth < xcurrent+colspan이면 xwidth를 xcurrent+colspan으로 설정합니다.
yheight < ycurrent+rowspan이면 yheight를 ycurrent+rowspan으로 설정합니다.
좌표 (x, y)를 가진 슬롯으로서 xcurrent ≤ x < xcurrent+colspan 및 ycurrent ≤ y < ycurrent+rowspan를 포함하는 슬롯을 새로운 셀 c로 덮으며, 앵커링된 좌표는 (xcurrent, ycurrent)입니다. 이 셀의 너비는 colspan, 높이는 rowspan으로 설정되며, 현재 셀 요소에 해당합니다.
current cell 요소가 th
요소인
경우, 이 새로운 셀 c는 헤더 셀이 되고, 그렇지 않으면 데이터 셀이 됩니다.
current cell 요소에 적용되는 헤더 셀을 설정하려면, 다음 섹션에 설명된 헤더 셀 할당 알고리즘을 사용합니다.
관련된 슬롯에 이미 셀이 덮여 있는 경우, 이는 테이블 모델 오류입니다. 이 슬롯들은 이제 두 개의 셀이 겹쳐집니다.
cell grows downward이 true인 경우, c, xcurrent, colspan 튜플을 list of downward-growing cells에 추가합니다.
xcurrent를 colspan만큼 증가시킵니다.
current cell이 처리 중인 tr
요소의 마지막 td
또는 th
자식 요소인 경우,
ycurrent를 1씩 증가시키고, 이 단계 세트를 중단한 다음 위의 알고리즘으로 돌아갑니다.
셀이라는 레이블이 붙은 단계로 돌아갑니다.
위의 알고리즘에서 아래로 확장되는 셀 확장 알고리즘을 실행해야 할 때, 사용자 에이전트는 list of downward-growing cells에 있는 각 {cell, cellx, width} 튜플에 대해, cell이 좌표 (x, ycurrent)를 가진 슬롯도 덮도록 확장합니다. 이때 cellx ≤ x < cellx+width 조건을 만족해야 합니다.
각 셀에는 0개 이상의 헤더 셀이 할당될 수 있습니다. 셀 principal cell에 헤더 셀을 할당하기 위한 헤더 셀 할당 알고리즘은 다음과 같습니다.
header list를 빈 셀 목록으로 설정합니다.
principalx, principaly를 principal cell이 고정된 슬롯의 좌표로 설정합니다.
headers
속성이 지정된 경우
headers
속성이 지정되지 않은 경우
principalwidth를 principal cell의 너비로 설정합니다.
principalheight를 principal cell의 높이로 설정합니다.
principaly에서 principaly+principalheight-1까지의 각 y 값에 대해 헤더 셀을 스캔하고 할당하는 내부 알고리즘을 실행합니다. 이때 principal cell, header list, 초기 좌표 (principalx, y), 그리고 증가량 Δx=−1 및 Δy=0을 사용합니다.
principalx에서 principalx+principalwidth-1까지의 각 x 값에 대해 헤더 셀을 스캔하고 할당하는 내부 알고리즘을 실행합니다. 이때 principal cell, header list, 초기 좌표 (x, principaly), 그리고 증가량 Δx=0 및 Δy=−1을 사용합니다.
principal cell이 행 그룹에 고정된 경우, 동일한 행 그룹에 고정된 행 그룹 헤더 셀들을 모두 header list에 추가합니다. 이때 x 좌표는 principalx+principalwidth-1 이하이고, y 좌표는 principaly+principalheight-1 이하이어야 합니다.
principal cell이 열 그룹에 고정된 경우, 동일한 열 그룹에 고정된 열 그룹 헤더 셀들을 모두 header list에 추가합니다. 이때 x 좌표는 principalx+principalwidth-1 이하이고, y 좌표는 principaly+principalheight-1 이하이어야 합니다.
빈 셀을 header list에서 모두 제거합니다.
header list에서 중복 항목을 모두 제거합니다.
principal cell이 header list에 포함되어 있으면 이를 제거합니다.
header list에 있는 헤더를 principal cell에 할당합니다.
주어진 principal cell, header list, 초기 좌표 (initialx, initialy), Δx, Δy 증가량에 대해 헤더 셀을 스캔하고 할당하는 내부 알고리즘은 다음과 같습니다:
x를 initialx로 설정합니다.
y를 initialy로 설정합니다.
opaque headers를 빈 셀 목록으로 설정합니다.
in header block을 true로 설정하고, headers from current header block을 principal cell만 포함하는 셀 목록으로 설정합니다.
in header block을 false로 설정하고, headers from current header block을 빈 셀 목록으로 설정합니다.
Loop: Δx만큼 x를 증가시키고, Δy만큼 y를 증가시킵니다.
이 알고리즘이 호출될 때마다 Δx와 Δy 중 하나는 −1이 되고, 다른 하나는 0이 됩니다.
x 또는 y가 0보다 작으면 이 내부 알고리즘을 중단합니다.
슬롯 (x, y)을 덮는 셀이 없거나, 그 슬롯을 덮는 셀이 둘 이상 있으면 Loop로 돌아갑니다.
슬롯 (x, y)을 덮는 셀을 current cell로 설정합니다.
in header block을 true로 설정합니다.
current cell을 headers from current header block에 추가합니다.
blocked을 false로 설정합니다.
opaque headers 목록에 있는 셀이 current cell과 동일한 x 좌표로 고정되어 있고, current cell과 동일한 너비를 가진 경우 blocked를 true로 설정합니다.
current cell이 column header가 아닌 경우 blocked를 true로 설정합니다.
opaque headers 목록에 있는 셀이 current cell과 동일한 y 좌표로 고정되어 있고, current cell과 동일한 높이를 가진 경우 blocked를 true로 설정합니다.
current cell이 row header가 아닌 경우 blocked를 true로 설정합니다.
blocked가 false인 경우, current cell을 header list에 추가합니다.
in header block을 false로 설정합니다. headers from current header block에 있는 모든 셀을 opaque headers 목록에 추가하고, headers from current header block 목록을 비웁니다.
Loop로 돌아갑니다.
헤더 셀이 x, y 좌표에 고정되어 있고, width와 height를 가진 경우, 다음 조건 중 하나라도 충족되면 해당 셀은 column header로 간주됩니다:
헤더 셀이 x, y 좌표에 고정되어 있고, width와 height를 가진 경우, 다음 조건 중 하나라도 충족되면 해당 셀은 row header로 간주됩니다:
셀의 scope
속성이 auto
상태이고, 해당 셀이 column header가
아니며, 해당 x 좌표 범위 내에 있는 슬롯을 덮는 셀 중에 데이터 셀이 없는 경우
헤더 셀이 column group header로 간주되는 경우, 해당 셀의 scope
속성이 column
group 상태인 경우입니다.
헤더 셀이 row group header로 간주되는 경우, 해당 셀의 scope
속성이 row
group 상태인 경우입니다.
셀은 요소가 없고 자식 텍스트 콘텐츠가 ASCII 공백으로만 구성된 경우 empty cell로 간주됩니다.
이 섹션은 비규범적입니다.
다음은 Smithsonian 물리 테이블, Volume 71의 표 45의 하단 부분을 마크업하는 방법을 보여줍니다:
< table >
< caption > 사양 값: < b > Steel</ b > , < b > Castings</ b > ,
Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</ caption >
< thead >
< tr >
< th rowspan = 2 > Grade.</ th >
< th rowspan = 2 > Yield Point.</ th >
< th colspan = 2 > Ultimate tensile strength</ th >
< th rowspan = 2 > Per cent elong. 50.8 mm or 2 in.</ th >
< th rowspan = 2 > Per cent reduct. area.</ th >
</ tr >
</ tr >
< th > kg/mm< sup > 2</ sup ></ th >
< th > lb/in< sup > 2</ sup ></ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Hard</ td >
< td > 0.45 ultimate</ td >
< td > 56.2</ td >
< td > 80,000</ td >
< td > 15</ td >
< td > 20</ td >
</ tr >
< tr >
< td > Medium</ td >
< td > 0.45 ultimate</ td >
< td > 49.2</ td >
< td > 70,000</ td >
< td > 18</ td >
< td > 25</ td >
</ tr >
</ tr >
< td > Soft</ td >
< td > 0.45 ultimate</ td >
< td > 42.2</ td >
< td > 60,000</ td >
< td > 22</ td >
< td > 30</ td >
</ tr >
</ tbody >
</ table >
이 표는 다음과 같이 보일 수 있습니다:
Grade. | Yield Point. | Ultimate tensile strength | Per cent elong. 50.8 mm or 2 in. | Per cent reduct. area. | |
---|---|---|---|---|---|
kg/mm2 | lb/in2 | ||||
Hard | 0.45 ultimate | 56.2 | 80,000 | 15 | 20 |
Medium | 0.45 ultimate | 49.2 | 70,000 | 18 | 25 |
Soft | 0.45 ultimate | 42.2 | 60,000 | 22 | 30 |
다음은 Apple, Inc의 2008 회계연도 10-K 파일링의 46페이지에 있는 총 마진 표를 마크업하는 방법을 보여줍니다:
< table >
< thead >
< tr >
< th > < th > 2008
< th > 2007
< th > 2006
< tbody >
< tr >
< th > Net sales
< td > $ 32,479
< td > $ 24,006
< td > $ 19,315
</ tr >
< tr >
< th > Cost of sales
< td > 21,334
< td > 15,852
< td > 13,717
</ tbody >
< tr >
< th > Gross margin
< td > $ 11,145
< td > $ 8,154
< td > $ 5,598
< tfoot >
< tr >
< th > Gross margin percentage
< td > 34.3%
< td > 34.0%
< td > 29.0%
</ table >
이 표는 다음과 같이 보일 수 있습니다:
2008 | 2007 | 2006 | |
---|---|---|---|
Net sales | $ 32,479 | $ 24,006 | $ 19,315 |
Cost of sales | 21,334 | 15,852 | 13,717 |
Gross margin | $ 11,145 | $ 8,154 | $ 5,598 |
Gross margin percentage | 34.3% | 34.0% | 29.0% |
다음은 같은 페이지의 하단에 있는 운영 비용 표를 마크업하는 방법을 보여줍니다:
< table >
< colgroup > < col >
< colgroup > < col > < col > < col >
< thead >
< tr > < th > < th > 2008 < th > 2007 < th > 2006
</ tr >
</ thead >
< tbody >
< tr > < th scope = rowgroup > Research and development
< td > $ 1,109 < td > $ 782 < td > $ 712
</ tr >
< tr > < th scope = row > Percentage of net sales
< td > 3.4% < td > 3.3% < td > 3.7%
</ tr >
</ tbody >
</ tbody >
</ table >
이 표는 다음과 같이 보일 수 있습니다:
2008 | 2007 | 2006 | |
---|---|---|---|
Research and development | $ 1,109 | $ 782 | $ 712 |
Percentage of net sales | 3.4% | 3.3% | 3.7% |
Selling, general, and administrative | $ 3,761 | $ 2,963 | $ 2,433 |
Percentage of net sales | 11.6% | 12.3% | 12.6% |
모든 최신 엔진에서 지원됩니다.
이 섹션은 비규범적입니다.
폼은 텍스트, 버튼, 체크박스, 범위, 또는 색상 선택 컨트롤과 같은 폼 컨트롤이 포함된 웹 페이지의 구성 요소입니다. 사용자는 이러한 폼과 상호 작용하여 서버로 전송할 수 있는 데이터를 제공할 수 있습니다(예: 검색 결과 또는 계산 결과 반환). 많은 경우에 클라이언트 측 스크립팅이 필요하지 않지만, 스크립트가 사용자 경험을 증대시키거나 데이터를 서버에 제출하는 것 외의 목적으로 폼을 사용할 수 있도록 API가 제공됩니다.
폼 작성은 사용자 인터페이스 작성, 서버 측 처리 구현, 사용자 인터페이스를 서버와 통신하도록 설정하는 등의 여러 단계를 포함하며, 이들은 어떤 순서로도 수행할 수 있습니다.
이 섹션은 비규범적입니다.
이 간단한 소개의 목적으로, 피자 주문 폼을 작성해 보겠습니다.
모든 폼은 form
요소로
시작하며, 그 안에 컨트롤이 배치됩니다. 대부분의 컨트롤은 기본적으로 텍스트 컨트롤을 제공하는 input
요소로
표현됩니다. 컨트롤에 레이블을 지정하려면 label
요소를
사용합니다. 레이블 텍스트와 컨트롤 자체는 label
요소 내에
배치됩니다. 폼의 각 부분은 단락으로 간주되며, 일반적으로 다른 부분과
p
요소를 사용하여 분리됩니다. 이를
조합하여 고객의 이름을 요청하는 방법은 다음과 같습니다:
< form >
< p >< label > 고객 이름: < input ></ label ></ p >
</ form >
사용자가 피자 크기를 선택할 수 있도록 하기 위해, 라디오 버튼 세트를 사용할 수 있습니다. 라디오 버튼은 또한 input
요소를
사용하며, 이 경우 type
속성의 값이 radio
로
설정됩니다. 라디오 버튼을 그룹으로 작동하게 하려면 name
속성을 사용하여 공통 이름을
부여합니다. 라디오 버튼과 같은 컨트롤 배치를 그룹화하려면 fieldset
요소를 사용할 수 있습니다. 이러한 컨트롤 그룹의 제목은 fieldset
의
첫 번째 요소이며, legend
요소가
되어야 합니다.
< form >
< p >< label > 고객 이름: < input ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size > 소형 </ label ></ p >
< p >< label > < input type = radio name = size > 중형 </ label ></ p >
< p >< label > < input type = radio name = size > 대형 </ label ></ p >
</ fieldset >
</ form >
사용자가 토핑을 선택할 수 있도록 하기 위해, 체크박스를 사용할 수 있습니다. 체크박스는 input
요소를
사용하며, type
속성의
값이 checkbox
로
설정됩니다:
< form >
< p >< label > 고객 이름: < input ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size > 소형 </ label ></ p >
< p >< label > < input type = radio name = size > 중형 </ label ></ p >
< p >< label > < input type = radio name = size > 대형 </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox > 베이컨 </ label ></ p >
< p >< label > < input type = checkbox > 추가 치즈 </ label ></ p >
< p >< label > < input type = checkbox > 양파 </ label ></ p >
< p >< label > < input type = checkbox > 버섯 </ label ></ p >
</ fieldset >
</ form >
이 폼이 작성되는 피자 가게는 항상 실수를 저지르기 때문에 고객과 연락할 방법이 필요합니다. 이를 위해 전화번호 (input
요소와
type
속성을 tel
로
설정한 경우)와 이메일 주소 (input
요소와
type
속성을 email
로
설정한 경우)를 위한 폼 컨트롤을 사용할 수 있습니다:
< form >
< p >< label > 고객 이름: < input ></ label ></ p >
< p >< label > 전화번호: < input type = tel ></ label ></ p >
< p >< label > 이메일 주소: < input type = email ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size > 소형 </ label ></ p >
< p >< label > < input type = radio name = size > 중형 </ label ></ p >
< p >< label > < input type = radio name = size > 대형 </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox > 베이컨 </ label ></ p >
< p >< label > 추가 치즈 </ input type = checkbox ></ label ></ p >
< p >< label > 양파 </ input type = checkbox ></ label ></ p >
< p >< label > 버섯 </ input type = checkbox ></ label ></ p >
</ fieldset >
< p >< label > 선호하는 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" ></ label ></ p >
</ form >
textarea
요소를 사용하여 다중 줄 텍스트 컨트롤을 제공할 수 있습니다. 이번에는 고객이 배달 지침을 제공할 수 있는 공간으로 사용할 것입니다:
< form >
< p >< label > 고객 이름: < input ></ label ></ p >
< p >< label > 전화번호: < input type = tel ></ label ></ p >
< p >< label > 이메일 주소: < input type = email ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size > 소형 </ label ></ p >
< p >< label > < input type = radio name = size > 중형 </ label ></ p >
< p >< label > < input type = radio name = size > 대형 </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox > 베이컨 </ label ></ p >
< p >< label > 추가 치즈 </ input type = checkbox ></ label ></ p >
< p >< label > 양파 </ input type = checkbox ></ label ></ p >
< p >< label > 버섯 </ input type = checkbox ></ label ></ p >
</ fieldset >
< p >< label > 선호하는 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" ></ label ></ p >
< p >< label > 배달 지침: < textarea ></ textarea ></ label ></ p >
</ form >
마지막으로, 폼을 제출할 수 있게 하기 위해 button
요소를
사용합니다:
< form >
< p >< label > Customer name: < input ></ label ></ p >
< p >< label > Telephone: < input type = tel ></ label ></ p >
< p >< label > Email address: < input type = email ></ label ></ p >
< fieldset >
< legend > Pizza Size </ legend >
< p >< label > < input type = radio name = size > Small </ label ></ p >
< p >< label > < input type = radio name = size > Medium </ label ></ p >
< p >< label > < input type = radio name = size > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > Pizza Toppings </ legend >
< p >< label > < input type = checkbox > Bacon </ label ></ p >
< p >< label > < input type = checkbox > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox > Onion </ label ></ p >
< p >< label > < input type = checkbox > Mushroom </ label ></ p >
</ fieldset >
< p >< label > Preferred delivery time: < input type = time min = "11:00" max = "21:00" step = "900" ></ label ></ p >
< p >< label > Delivery instructions: < textarea ></ textarea ></ label ></ p >
< p >< button > Submit order</ button ></ p >
</ form >
이 섹션은 비규범적입니다.
서버 측 처리기를 작성하는 구체적인 세부 사항은 이 명세의 범위를 벗어납니다. 이 소개를 위해 우리는 https://pizza.example.com/order.cgi
에 있는
스크립트가 application/x-www-form-urlencoded
형식을 사용하여 제출을 수락하도록 구성되었으며, HTTP POST 본문에서 다음 매개변수를 수신할 것으로 가정합니다.
custname
custtel
custemail
size
small
, medium
, large
중 하나
topping
bacon
, cheese
, onion
,
mushroom
입니다.
delivery
comments
이 섹션은 비규범적입니다.
폼 제출은 서버에 다양한 방법으로 노출되며, 가장 일반적으로는 HTTP GET 또는 POST 요청으로 이루어집니다. 사용된 정확한 방법을 지정하려면, method
속성을 form
요소에 지정합니다. 이는 폼 데이터가 어떻게 인코딩되는지를 지정하지 않습니다. 이를 지정하려면, enctype
속성을 사용합니다. 또한 제출된 데이터를 처리할 서비스의 URL을 action
속성을 사용하여 지정해야 합니다.
제출하려는 각 폼 컨트롤에는 제출 시 데이터를 참조하는 데 사용되는 이름을 지정해야 합니다. 이전에 라디오 버튼 그룹에 대해 이름을 지정했습니다. 동일한 속성(name
)이 제출 시
사용할 이름을 지정하는 데 사용됩니다. 라디오 버튼을 서로 구분하기 위해서는 value
속성을 사용하여 값을 다르게 지정할 수 있습니다.
여러 컨트롤이 동일한 이름을 가질 수 있습니다. 예를 들어, 여기에서는 모든 체크박스에 동일한 이름을 지정하고, 서버는 해당 이름과 함께 제출된 값으로 체크된 항목을 구분합니다. 라디오 버튼과
마찬가지로, 이들은 value
속성을 사용하여 고유한 값을 지정합니다.
이전 섹션에서 설정된 내용에 따르면, 결과는 다음과 같습니다.
< form method = "post"
enctype = "application/x-www-form-urlencoded"
action = "https://pizza.example.com/order.cgi" >
< p >< label > 고객 이름: < input name = "custname" ></ label ></ p >
< p >< label > 전화 번호: < input type = tel name = "custtel" ></ label ></ p >
< p >< label > 이메일 주소: < input type = email name = "custemail" ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size value = "small" > Small </ label ></ p >
< p >< label > < input type = radio name = size value = "medium" > Medium </ label ></ p >
< p >< label > < input type = radio name = size value = "large" > Large </ label ></ p >
</ fieldset >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox name = "topping" value = "bacon" > Bacon </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "cheese" > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "onion" > Onion </ label ></ p >
</ fieldset >
</ fieldset >
</ form >
어떤 속성 값이 인용부호로 묶여 있고 그렇지 않은 것에는 특별한 의미가 없습니다. HTML 구문은 다양한 동등하게 유효한 방법으로 속성을 지정할 수 있으며, 이는 구문 섹션에서 다루고 있습니다. 구문 섹션에서 설명합니다.
예를 들어, 고객이 "Denise Lawrence"라는 이름을 입력하고, "555-321-8642"라는 전화번호를 입력하고, 이메일 주소를 지정하지 않고, 중간 크기의 피자를 주문하고, Extra Cheese와 Mushroom 토핑을 선택하고, 배달 시간을 7pm으로 지정하고, 배달 지침 텍스트 컨트롤을 비워둔 경우, 사용자 에이전트는 온라인 웹 서비스에 다음과 같은 데이터를 제출합니다:
custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
모든 최신 엔진에서 지원됩니다.
이 섹션은 규범적이지 않습니다.
폼은 사용자가 폼을 제출하기 전에 사용자 에이전트가 사용자의 입력을 확인하도록 주석을 달 수 있습니다. 서버는 여전히 입력이 유효한지 확인해야 하지만(악의적인 사용자는 쉽게 폼 검증을 우회할 수 있기 때문에), 사용자가 서버가 유일한 검증자가 되어 발생하는 대기 시간을 피할 수 있도록 합니다.
가장 간단한 주석은 required
속성으로, 이
속성은 input
요소에 지정할 수
있으며, 값을 제공하기 전에는 폼이 제출되지 않도록 합니다. 이 속성을 고객 이름, 피자 크기 및 배달 시간 필드에 추가하면, 사용자가 이러한 필드를 채우지 않고 폼을 제출할 때 사용자 에이전트가
사용자에게 알리도록 할 수 있습니다:
< form method = "post"
enctype = "application/x-www-form-urlencoded"
action = "https://pizza.example.com/order.cgi" >
< p >< label > 고객 이름: < input name = "custname" required ></ label ></ p >
< p >< label > 전화번호: < input type = tel name = "custtel" ></ label ></ p >
< p >< label > 이메일 주소: < input type = email name = "custemail" ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size required value = "small" > 작은 </ label ></ p >
< p >< label > < input type = radio name = size required value = "medium" > 중간 </ label ></ p >
< p >< label > < input type = radio name = size required value = "large" > 큰 </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox name = "topping" value = "bacon" > 베이컨 </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "cheese" > 추가 치즈 </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "onion" > 양파 </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "mushroom" > 버섯 </ label ></ p >
</ fieldset >
< p >< label > 희망 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" name = "delivery" required ></ label ></ p >
< p >< label > 배달 지침: < textarea name = "comments" ></ textarea ></ label ></ p >
< p >< button > 주문 제출</ button ></ p >
</ form >
입력의 길이를 제한할 수도 있으며, maxlength
속성을 사용하여
가능합니다. textarea
요소에 이
속성을 추가하여 사용자가 1000자까지 입력할 수 있도록 제한할 수 있습니다. 이를 통해 배달원에게 긴 글을 작성하지 않고 요점에 집중할 수 있도록 할 수 있습니다:
< form method = "post"
enctype = "application/x-www-form-urlencoded"
action = "https://pizza.example.com/order.cgi" >
< p >< label
> 고객 이름: < input name = "custname" required ></ label ></ p >
< p >< label > 전화번호: < input type = tel name = "custtel" ></ label ></ p >
< p >< label > 이메일 주소: < input type = email name = "custemail" ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size required value = "small" > 작은 </ label ></ p > < p >< label > < input type = radio name = size required value = "medium" > 중간 </ label ></ p > < p >< label > < input type = radio name = size required value = "large" > 큰 </ label ></ p > </ fieldset > < fieldset > < legend > 피자 토핑 </ legend > < p >< label > < input type = checkbox name = "topping" value = "bacon" > 베이컨 </ label ></ p > < p >< label > < input type = checkbox name = "topping" value = "cheese" > 추가 치즈 </ label ></ p > < p >< label > < input type = checkbox name = "topping" value = "onion" > 양파 </ label ></ p > < p >< label > < input type = checkbox name = "topping" value = "mushroom" > 버섯 </ label ></ p > </ fieldset > < p >< label > 희망 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" name = "delivery" required ></ label ></ p > < p >< label > 배달 지침: < textarea name = "comments" maxlength = 1000 ></ textarea ></ label ></ p > < p >< button > 주문 제출</ button ></ p > </ form >
폼이 제출될 때, invalid
이벤트가 유효하지 않은 각 폼 컨트롤에서 발생합니다. 이는 폼의 문제에 대한 요약을 표시하는 데 유용할 수 있습니다. 브라우저 자체는 일반적으로 한 번에 하나의 문제만 보고하기 때문입니다.
이 섹션은 비규범적입니다.
일부 브라우저는 사용자가 정보를 매번 다시 입력하지 않도록 폼 컨트롤을 자동으로 채워 사용자를 돕습니다. 예를 들어, 사용자의 전화번호를 묻는 필드는 사용자의 전화번호로 자동으로 채워질 수 있습니다.
이를 돕기 위해 autocomplete
속성을 사용하여 필드의 목적을 설명할 수 있습니다. 이 폼의 경우, 피자 배달 정보를 위해 유용하게 주석을 달 수 있는 세 개의 필드가 있습니다. 이 정보를 추가하는 방법은 다음과 같습니다:
< form method = "post"
enctype = "application/x-www-form-urlencoded"
action = "https://pizza.example.com/order.cgi" >
< p >< label > 고객 이름: < input name = "custname" required autocomplete = "shipping name" ></ label ></ p >
< p >< label > 전화번호: < input type = tel name = "custtel" autocomplete = "shipping tel" ></ label ></ p >
< p >< label > 이메일 주소: < input type = email name = "custemail" autocomplete = "shipping email" ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size required value = "small" > Small </ label ></ p >
< p >< label > < input type = radio name = size required value = "medium" > Medium </ label ></ p >
< p >< label > < input type = radio name = size required value = "large" > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox name = "topping" value = "bacon" > Bacon </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "cheese" > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "onion" > Onion </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "mushroom" > Mushroom </ label ></ p >
</ fieldset >
< p >< label > 선호하는 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" name = "delivery" required ></ label ></ p >
< p >< label > 배달 지침: < textarea name = "comments" maxlength = 1000 ></ textarea ></ label ></ p >
< p >< button > 주문 제출</ button ></ p >
</ form >
이 섹션은 비규범적입니다.
일부 기기, 특히 가상 키보드를 사용하는 기기는 사용자에게 여러 입력 모드를 제공합니다. 예를 들어, 신용카드 번호를 입력할 때는 0-9의 숫자 키만 보이도록 하고, 이름을 입력할 때는 각 단어를 대문자로 시작하도록 하는 폼 필드를 보고 싶을 수 있습니다.
inputmode
속성을 사용하면 적절한 입력 모드를 선택할 수 있습니다:
< form method = "post"
enctype = "application/x-www-form-urlencoded"
action = "https://pizza.example.com/order.cgi" >
< p >< label > 고객 이름: < input name = "custname" required autocomplete = "shipping name" ></ label ></ p >
< p >< label > 전화번호: < input type = tel name = "custtel" autocomplete = "shipping tel" ></ label ></ p >
< p >< label > 버저 코드: < input name = "custbuzz" inputmode = "numeric" ></ label ></ p >
< p >< label > 이메일 주소: < input type = email name = "custemail" autocomplete = "shipping email" ></ label ></ p >
< fieldset >
< legend > 피자 크기 </ legend >
< p >< label > < input type = radio name = size required value = "small" > Small </ label ></ p >
< p >< label > < input type = radio name = size required value = "medium" > Medium </ label ></ p >
< p >< label > < input type = radio name = size required value = "large" > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > 피자 토핑 </ legend >
< p >< label > < input type = checkbox name = "topping" value = "bacon" > Bacon </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "cheese" > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "onion" > Onion </ label ></ p >
< p >< label > < input type = checkbox name = "topping" value = "mushroom" > Mushroom </ label ></ p >
</ fieldset >
< p >< label > 선호하는 배달 시간: < input type = time min = "11:00" max = "21:00" step = "900" name = "delivery" required ></ label ></ p >
< p >< label > 배달 지침: < textarea name = "comments" maxlength = 1000 ></ textarea ></ label ></ p >
< p >< button > 주문 제출</ button ></ p >
</ form >
이 섹션은 비규범적입니다.
type
,
autocomplete
,
inputmode
속성은 혼란스럽게 유사하게 보일 수 있습니다. 예를 들어, 세 가지 경우 모두에서 "email
" 문자열이 유효한 값이 될 수 있습니다. 이 섹션에서는 이 세 가지 속성의 차이를
설명하고 이들을 사용하는 방법에 대한 조언을 제공합니다.
type
속성은 input
요소에 적용되며, 사용자 에이전트가 필드를 표시하는 방법을 결정합니다. 이 속성의 다른 값을 선택하는 것은 input
요소, textarea
요소, select
요소 등을 선택하는 것과 동일합니다.
autocomplete
속성은 사용자가 입력할 값이 실제로 무엇을 나타내는지를 설명합니다. 이 속성의 다른 값을 선택하는 것은 해당 요소에 대한 라벨을 선택하는 것과 동일합니다.
우선, 전화번호를 고려해보세요. 페이지가 사용자에게 전화번호를 요청하는 경우, 사용할 적절한 폼 컨트롤은 <input type=tel>
입니다.
그러나 어떤 autocomplete
값을 사용할지는 페이지가 요청하는 전화번호의 유형(국제 형식 또는 지역 형식) 등에 따라 달라집니다.
예를 들어, 친구에게 선물을 배송하는 고객이 결제 문제 발생 시 고객의 전화번호와 배송 문제 발생 시 친구의 전화번호가 모두 필요한 전자상거래 사이트의 체크아웃 과정의 일부인 페이지는 국제 전화번호(국가 코드 포함)를 기대할 수 있습니다. 이 경우, 다음과 같이 표시될 수 있습니다:
< p >< label > 귀하의 전화번호: < input type = tel name = custtel autocomplete = "billing tel" ></ label >
< p >< label > 수신자 전화번호: < input type = tel name = shiptel autocomplete = "shipping tel" ></ label >
< p > 국가 코드 접두사 포함한 전화번호를 입력해 주세요, 예: "+1 555 123 4567".
그러나 사이트가 영국 고객과 수신자만 지원하는 경우, 다음과 같이 표시될 수 있습니다 (tel-national
대신 tel
이
사용된 것을 확인하십시오):
< p >< label > 귀하의 전화번호: < input type = tel name = custtel autocomplete = "billing tel-national" ></ label >
< p >< label > 수신자 전화번호: < input type = tel name = shiptel autocomplete = "shipping tel-national" ></ label >
< p > UK 전화번호를 입력해 주세요, 예: "(01632) 960 123".
다음으로, 선호 언어를 고려해보세요. 적절한 autocomplete
값은 language
입니다.
그러나 이 목적을 위해 사용되는 폼 컨트롤은 텍스트 컨트롤(<input type=text>
),
드롭다운 리스트(<select>
),
라디오 버튼(<input type=radio>
)
등이 될 수 있습니다. 이는 원하는 인터페이스 유형에 따라 달라집니다.
마지막으로, 이름을 고려해보세요. 페이지가 사용자에게 이름 하나만 요청하는 경우, 적절한 컨트롤은 <input type=text>
입니다.
페이지가 사용자의 전체 이름을 묻는다면, 관련 autocomplete
값은 name
입니다.
< p >< label > 일본어 이름: < input name = "j" type = "text" autocomplete = "section-jp name" ></ label >
< label > 로마자 이름: < input name = "e" type = "text" autocomplete = "section-en name" ></ label >
이 예에서, section-*
키워드는 사용자 에이전트에게 두 필드가 다른 이름을 기대하고 있음을 알립니다. 그렇지 않으면, 사용자 에이전트는 사용자가 첫 번째 필드에 값을 입력했을 때 두 번째 필드를 자동으로 첫
번째 필드의 값으로 채울 수 있습니다.
-jp
및 -en
키워드의 부분은 사용자 에이전트에 불투명하며, 사용자 에이전트는 이러한 키워드로부터 두 이름이 각각 일본어와 영어로
입력되어야 한다고 추측할 수 없습니다.
type
및 autocomplete
와
별도로, inputmode
속성은 텍스트 컨트롤이 있는 경우에 사용할 입력 모드(예: 가상 키보드)를 결정합니다.
신용카드 번호를 고려해보세요. 적절한 입력 유형은 <input type=number>
이
아닙니다 (아래에서 설명한 대로), 대신 <input type=text>
입니다.
사용자 에이전트가 숫자 입력 모드(예: 숫자만 표시하는 가상 키보드)를 사용하도록 권장하기 위해 페이지는 다음과 같이 사용할 수 있습니다.
< p >< label > 신용카드 번호:
< input name = "cc" type = "text" inputmode = "numeric" pattern = "[0-9]{8,19}" autocomplete = "cc-number" >
</ label ></ p >
이 섹션은 비규범적입니다.
이 피자 배달 예제에서, 시간은 "HH:MM" 형식으로 지정됩니다: 두 자리 숫자로 된 시간(24시간 형식)과 두 자리 숫자로 된 분입니다. (초를 지정할 수도 있지만, 이 예제에서는 필요하지 않습니다.)
그러나 일부 지역에서는 시간 표시 형식이 사용자에게 다르게 표현되는 경우가 많습니다. 예를 들어, 미국에서는 여전히 "2pm"과 같이 am/pm 표시기를 사용하는 12시간 시계를 사용하는 것이 일반적입니다. 프랑스에서는 "14h00"과 같이 "h" 문자를 사용하여 시간을 분과 구분하는 것이 일반적입니다.
날짜의 경우에도 비슷한 문제가 있으며, 구성 요소의 순서조차 일관되지 않은 경우가 있습니다. 예를 들어, 키프로스에서는 2003년 2월 1일을 "1/2/03"으로 쓰는 반면, 일본에서는 그 같은 날짜를 "2003年02月01日"로 표기하는 것이 일반적입니다. 숫자에서도 지역에 따라 소수점 구분자와 천 단위 구분자로 어떤 구두점을 사용하는지 다를 수 있습니다.
따라서 HTML과 폼 제출에서 사용되는 시간, 날짜, 숫자 형식(항상 이 사양에서 정의된 형식이며, 컴퓨터에서 읽을 수 있는 날짜 및 시간 형식을 위한 잘 확립된 ISO 8601 표준을 기반으로 함)과 브라우저가 사용자에게 표시하고 사용자가 입력한 내용을 수락하는 시간, 날짜, 숫자 형식을 구별하는 것이 중요합니다.
HTML 마크업과 폼 제출에서 사용되는 형식, 즉 "전송 형식"은 사용자 지역에 관계없이 일관되고 컴퓨터에서 읽을 수 있는 형태로 작성됩니다. 예를 들어, 날짜는 항상 "YYYY-MM-DD" 형식으로 작성되며, "2003-02-01"과 같이 표시됩니다. 일부 사용자는 이 형식을 볼 수 있지만, 다른 사용자는 "01.02.2003" 또는 "2003년 2월 1일"과 같이 볼 수 있습니다.
페이지에서 전송 형식으로 제공된 시간, 날짜 또는 숫자는 사용자가 보기 전에 사용자의 선호도나 페이지의 지역 설정에 따라 사용자가 선호하는 표시 형식으로 변환됩니다. 마찬가지로, 사용자가 선호하는 형식으로 시간, 날짜 또는 숫자를 입력하면 사용자 에이전트는 이를 다시 전송 형식으로 변환하여 DOM에 넣거나 제출합니다.
이렇게 하면 페이지와 서버의 스크립트가 시간, 날짜, 숫자를 일관된 방식으로 처리할 수 있으며, 다양한 형식을 지원할 필요 없이 사용자의 요구를 충족할 수 있습니다.
양식 컨트롤의 지역화에 관한 구현 노트도 참조하세요.
주로 역사적인 이유로, 이 섹션의 요소들은 플로우 콘텐츠, 구문 콘텐츠, 인터랙티브 콘텐츠와 같은 일반적인 카테고리 외에도 여러 중첩되지만 미묘하게 다른 카테고리로 분류됩니다.
여러 요소들은 폼 관련 요소로 분류되며, 이는 폼 소유자를 가질 수 있음을 의미합니다.
폼 관련 요소들은 여러 하위 카테고리로 나뉩니다:
이는 form.elements
및
fieldset.elements
API에 나열된 요소들을 나타냅니다. 이 요소들은 또한 form
콘텐츠 속성과 일치하는 form
IDL 속성을 가지며, 저자가
명시적인 폼 소유자를 지정할 수 있게 합니다.
이는 form
요소가 제출될 때 엔트리 목록을 구성하는 데
사용할 수 있는 요소를 나타냅니다.
일부 제출 가능한 요소는 속성에 따라 버튼이 될 수 있습니다. 아래의 본문에서는 요소가 버튼인 경우를 정의합니다. 일부 버튼은 특별히 제출 버튼입니다.
이 요소들은 자신의 폼 소유자로부터 autocapitalize
및 autocorrect
속성을 상속받습니다.
일부 요소는 폼 관련 요소가 아닌 것도 있지만, 라벨 가능 요소로 분류됩니다. 이러한 요소들은 label
요소와 연결될 수 있는 요소입니다.
form
요소현재 모든 엔진에서 지원됨.
현재 모든 엔진에서 지원됨.
form
요소는 허용되지 않음.
accept-charset
— 폼 제출에 사용할 문자 인코딩
action
— URL — 폼 제출에 사용할 URL
autocomplete
— 폼
내 컨트롤에 대한 자동 완성 기능의 기본 설정
enctype
— 엔트리 목록 인코딩 유형 — 폼 제출에 사용할 인코딩
method
— 폼 제출에 사용할 메소드
name
— document.forms
API에서 사용할
폼의 이름
novalidate
— 폼 제출을 위한 폼 컨트롤 검증 건너뛰기
target
— 네비게이션 대상 — 폼 제출을 위한 네비게이션 대상
rel
[Exposed =Window ,
LegacyOverrideBuiltIns ,
LegacyUnenumerableNamedProperties ]
interface HTMLFormElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString acceptCharset ;
[CEReactions ] attribute USVString action ;
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute DOMString enctype ;
[CEReactions ] attribute DOMString encoding ;
[CEReactions ] attribute DOMString method ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute boolean noValidate ;
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[SameObject ] readonly attribute HTMLFormControlsCollection elements ;
readonly attribute unsigned long length ;
getter Element (unsigned long index );
getter (RadioNodeList or Element ) (DOMString name );
undefined submit ();
undefined requestSubmit (optional HTMLElement ? submitter = null );
[CEReactions ] undefined reset ();
boolean checkValidity ();
boolean reportValidity ();
};
form
요소는 하이퍼링크를 나타내며, 일부는 편집 가능한 값을 나타내는 폼 연관 요소들 모음을 통해 조작될 수 있으며, 이러한 값들은 서버로 제출되어 처리될 수 있습니다.
accept-charset
속성은 제출에 사용할 문자 인코딩을 지정합니다. 지정된 경우, 값은 "UTF-8
"에 대해 ASCII 대소문자
구분 없음 일치여야 합니다. [ENCODING]
name
속성은 form
의 이름을 forms
컬렉션 내에서 나타냅니다. 값은 빈
문자열이 아니어야 하며, 해당 컬렉션 내의 다른 form
요소와 고유해야 합니다.
autocomplete
속성은
다음의 키워드와 상태를 가진 열거된 속성입니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
on
| on | 폼 컨트롤이 기본적으로 "on "으로
설정된 자동 완성 필드 이름을 가집니다.
|
off
| off | 폼 컨트롤이 기본적으로 "off "으로
설정된 자동 완성 필드 이름을 가집니다.
|
속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 on 상태입니다.
action
, enctype
, method
, novalidate
, 및 target
속성은 폼 제출을 위한 속성입니다.
rel
속성은 form
요소에서 생성하는 링크 종류를 제어합니다. 속성의
값은 고유한 공백으로 구분된 토큰의 무순서 집합이어야 합니다. 허용된 키워드와 그 의미는 이전 섹션에서 정의되었습니다.
rel
의 지원되는 토큰은 HTML 링크 유형에서 허용된 키워드들로, 처리 모델에
영향을 미치고 사용자 에이전트에서 지원되는 키워드입니다. 가능한 지원되는 토큰은 noreferrer
, noopener
, 및 opener
입니다. rel
의 지원되는 토큰은 사용자 에이전트가 처리 모델을 구현한 목록에 있는 토큰만 포함해야 합니다.
form.elements
현재 모든 엔진에서 지원됨.
폼 컨트롤의 HTMLFormControlsCollection
을
반환합니다 (역사적인 이유로 이미지 버튼은 제외됩니다).
form.length
현재 모든 엔진에서 지원됨.
폼 내 컨트롤의 수를 반환합니다 (역사적인 이유로 이미지 버튼은 제외됨).
form[index]
폼 내에서 index번째 요소를 반환합니다 (역사적인 이유로 이미지 버튼은 제외됨).
form[name]
지정된 ID 또는 name
으로 폼 내에서 폼 컨트롤을 반환합니다 (여러 개가
있는 경우, 해당 폼 컨트롤의 RadioNodeList
를 반환); 없으면, 지정된
ID의 img
요소를 반환합니다.
특정 이름을 사용해 요소가 참조된 이후에는, 해당 이름은 요소가 트리 내에 있는 한 해당 방법에서 요소를 참조하는 방법으로 계속 사용 가능합니다, 실제 ID 또는 name
이 변경되더라도.
일치하는 항목이 여러 개 있는 경우, 해당 요소들을 모두 포함하는 RadioNodeList
객체가 반환됩니다.
form.submit()
현재 모든 엔진에서 지원됨.
폼을 제출하며, 인터랙티브 제약 조건 검증을 우회하며 submit
이벤트를 발생시키지 않습니다.
form.requestSubmit([ submitter ])
현재 모든 엔진에서 지원됨.
폼을 제출하도록 요청합니다. submit()
메소드와 달리, 이 메소드는 인터랙티브 제약 조건 검증과 submit
이벤트를 포함하며, 이들 중 하나가 제출을
취소할 수 있습니다.
submitter 인수를 사용하여 특정 제출 버튼을 지정할 수 있으며, 이 버튼의 formaction
, formenctype
, formmethod
, formnovalidate
,
및 formtarget
속성이 제출에
영향을 줄 수 있습니다. 또한, 제출 버튼은 제출을 위한 엔트리 목록 구성에 포함되며, 일반적으로 버튼은 제외됩니다.
form.reset()
현재 모든 엔진에서 지원됨.
폼을 리셋합니다.
form.checkValidity()
폼의 컨트롤이 모두 유효한 경우 true를 반환합니다. 그렇지 않은 경우 false를 반환합니다.
form.reportValidity()
폼의 컨트롤이 모두 유효한 경우 true를 반환하며, 그렇지 않은 경우 false를 반환하고 사용자에게 알립니다.
autocomplete
IDL 속성은 동일한 이름의 콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
현재 모든 엔진에서 지원됨.
name
및 rel
IDL 속성은 동일한 이름의
콘텐츠 속성을 반영해야 합니다.
현재 모든 엔진에서 지원됨.
acceptCharset
IDL 속성은 동일한 이름의 accept-charset
콘텐츠 속성을 반영해야 합니다.
relList
IDL 속성은
rel
콘텐츠 속성을 반영해야 합니다.
elements
IDL
속성은 HTMLFormControlsCollection
을
반환해야 하며, form
요소의 루트에서,
필터는 리스트된 요소들에 맞고 폼 소유자가 form
요소인 경우, input
요소의 type
속성이 이미지 버튼 상태에
있는 경우를 제외하고, 역사적인 이유로 이 특정 컬렉션에서 제외해야 합니다.
length
IDL 속성은
elements
컬렉션에 의해 대표되는 노드의
수를 반환해야 합니다.
지원되는 속성 인덱스는 해당 순간에 elements
속성에 의해 반환된 객체에 의해
지원되는 인덱스입니다.
인덱싱된 속성의 값을 결정하기 위해, form
요소의 경우, 사용자 에이전트는 주어진 인덱스를
인수로 하여 item
메소드를 호출할 때 elements
컬렉션에서
반환된 값을 반환해야 합니다.
각 form
요소에는
과거 이름 맵이라 불리는 이름과 요소의 매핑이 있습니다. 이는 요소가 이름을 변경하더라도 이름을 유지하는 데 사용됩니다.
지원되는 속성 이름은 다음 알고리즘에서 얻은 이름들로 구성되며, 알고리즘에서 얻은 순서대로 나열됩니다:
sourced names라는 초기에는 비어 있는 튜플의 순서 리스트를 만드세요. 이 튜플은 문자열, 요소, 소스(id, name, 또는 past)로 구성됩니다. 소스가 past인 경우, 나이를 추가합니다.
각 리스트된 요소
candidate에 대해, 그 폼 소유자가 form
요소인 경우,
input
요소의
type
속성이
이미지
버튼 상태인 경우는 제외합니다:
각 항목 past entry에 대해 과거 이름 맵에 항목을 추가하여, past entry의 이름을 문자열로, past entry의 요소를 요소로, past를 소스로, 그리고 과거 이름 맵에 항목이 존재한 기간을 나이로 설정하여 sourced names에 항목을 추가하세요.
sourced names를 정렬하세요. 요소 항목의 트리 순서를 기준으로 정렬하며, 동일한 요소 항목이 있는 경우 id 소스 항목을 먼저, name 소스 항목을 그 다음, past 소스 항목을 그 다음으로 배치하고, 동일한 요소 및 소스 항목이 있는 경우에는 나이 순으로 오래된 항목을 먼저 배치하세요.
이름이 빈 문자열인 sourced names의 항목을 제거하세요.
이전 항목과 동일한 이름을 가진 sourced names의 항목을 제거하세요.
이름의 리스트를 sourced names에서 반환하고, 그들의 상대적인 순서를 유지하세요.
속성 이름 name의 값을 결정하기 위해,
form
요소의 경우, 사용자 에이전트는 다음 단계를
실행해야 합니다:
candidates라는 라이브 RadioNodeList
객체를 만들어, 리스트된 요소들 중에서
폼 소유자가 form
요소인 경우
input
요소의 type
속성이
이미지
버튼 상태인 경우를 제외하고,
name과 동일한 id
또는
name
속성을 가진 요소를 포함하세요. 트리 순서로 정렬합니다.
만약 candidates가 비어 있다면, candidates를 라이브
RadioNodeList
객체로 설정하여,
img
요소 중에서
폼 소유자가 form
요소인 경우,
name과 동일한 id
또는
name
속성을 가진 요소를 포함하세요.
트리 순서로 정렬합니다.
만약 candidates가 비어 있다면, name이 form
요소의 과거 이름 맵에 있는 이름 중 하나인지 확인하고, 그렇다면 그
맵에서
name과 연관된 객체를 반환하세요.
만약 candidates에 하나 이상의 노드가 포함되어 있다면, candidates를 반환하세요.
그렇지 않으면, candidates에 정확히 하나의 노드만 포함되어 있습니다. name에서 candidates의 노드로
매핑을 추가하고, form
요소의 과거 이름 맵에
동일한 이름을 가진 이전 항목이 있으면 교체하세요.
candidates에 있는 노드를 반환하세요.
만약 form
요소의 과거 이름 맵에
나열된 요소가 폼 소유자를 변경하면, 그 항목은 해당 맵에서 제거되어야 합니다.
submit()
메서드 단계는 제출을 실행하는 것으로,
this에서 시작하며,
submit() 메서드에서
제출됨이 true로 설정됩니다.
requestSubmit(submitter)
메서드가 호출되면, 다음 단계를 실행해야 합니다:
submitter가 null이 아닌 경우:
submitter의 폼 소유자가
이 form
요소가 아닌
경우,
"NotFoundError
"
DOMException
를
발생시킵니다.
그렇지 않으면, submitter를 이 form
요소로 설정하세요.
reset()
메서드가 호출되면, 다음
단계를 실행해야 합니다:
form
요소를
초기화 잠금으로 표시합니다.
checkValidity()
메서드가 호출되면, 사용자 에이전트는
제약 조건을 정적으로
검증해야 하며,
제약 조건 검증이 긍정적인 결과를 반환하면 true를, 부정적인 결과를 반환하면 false를 반환해야 합니다.
reportValidity()
메서드가 호출되면, 사용자 에이전트는
제약
조건을 상호작용적으로 검증해야 하며,
제약 조건 검증이 긍정적인 결과를 반환하면 true를, 부정적인 결과를 반환하면 false를 반환하고, 사용자에게 알립니다.
이 예시는 두 개의 검색 폼을 보여줍니다:
< form action = "https://www.google.com/search" method = "get" >
< label > Google: < input type = "search" name = "q" ></ label > < input type = "submit" value = "Search..." >
</ form >
< form action = "https://www.bing.com/search" method = "get" >
< label > Bing: < input type = "search" name = "q" ></ label > < input type = "submit" value = "Search..." >
</ form >
label
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
label
요소가 없어야 합니다.
for
— 폼 제어와 라벨 연결
[Exposed =Window ]
interface HTMLLabelElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString htmlFor ;
readonly attribute HTMLElement ? control ;
};
label
요소는 사용자 인터페이스에서 캡션을
나타냅니다.
이 캡션은 label
요소의 라벨된 제어로 알려진 특정 폼 제어와 연결될 수 있으며,
for
속성을 사용하거나, 폼 제어를 label
요소 내부에 배치하여 연결할 수 있습니다.
다음 규칙에 의해 달리 명시되지 않은 경우, label
요소는
라벨된 제어를 가지지 않습니다.
모든 현재 엔진에서 지원됨.
for
속성은 캡션이 연결될 폼 컨트롤을 지정하기 위해 사용할 수 있습니다. 이 속성이 지정된 경우, 속성의 값은 해당
ID
여야
하며, label
요소와 동일한 트리 내의 라벨 가능한 요소여야 합니다. 만약 이 속성이 지정되었고, 트리 내에
ID
가
for
속성 값과 동일한 요소가 존재하며, 그 중 첫 번째
요소가 라벨 가능한 요소인 경우, 그 요소는
label
요소의 라벨된 컨트롤이 됩니다.
for
속성이 지정되지 않았지만,
label
요소가
라벨 가능 요소 후손을 가지고 있다면,
트리 순서에서 첫 번째 후손이 label
요소의
라벨된 제어가 됩니다.
label
요소의 기본 표시와 동작은
플랫폼의 라벨 동작을 따릅니다. label
요소의 후손에 대한 이벤트 타겟의
대화형 콘텐츠에서
활성화 동작은 아무런 동작도 하지 않습니다.
폼 관련 사용자
정의 요소는
라벨 가능 요소로 간주되며,
label
요소의
활성화 동작이 라벨된 제어에 영향을 미치면,
기본 요소와 커스텀 요소 모두 영향을 받습니다.
예를 들어, 라벨을 클릭하면 폼 제어가 활성화되는 플랫폼에서는, 아래 예제에서
label
을 클릭하면
사용자 에이전트가 클릭 이벤트를 발생시키며,
input
요소에서 해당 이벤트가 발생된
것처럼 작동할 수 있습니다:
< label >< input type = checkbox name = lost > Lost</ label >
마찬가지로, my-checkbox
가
폼 관련 사용자 정의
요소로 선언된 경우
(예: 이 예제), 다음 코드도 동일하게 동작합니다:
< label >< my-checkbox name = lost ></ my-checkbox > Lost</ label >
다른 플랫폼에서는, 두 경우 모두 컨트롤에 포커스를 맞추거나 아무 동작도 하지 않을 수 있습니다.
다음 예제는 각 라벨에 연결된 세 개의 폼 제어를 보여주며, 그 중 두 개는 사용자가 올바른 형식을 사용할 수 있도록 작은 텍스트를 포함하고 있습니다.
< p >< label > Full name: < input name = fn > < small > Format: First Last</ small ></ label ></ p >
< p >< label > Age: < input name = age type = number min = 0 ></ label ></ p >
< p >< label > Post code: < input name = pc > < small > Format: AB12 3CD</ small ></ label ></ p >
label.control
모든 현재 엔진에서 지원됨.
이 요소와 연결된 폼 제어를 반환합니다.
label.form
모든 현재 엔진에서 지원됨.
이 요소와 관련된 폼 제어의 폼 소유자를 반환합니다.
없다면 null을 반환합니다.
모든 현재 엔진에서 지원됨.
htmlFor
IDL
속성은
for
콘텐츠 속성을 반영해야 합니다.
control
IDL
속성은
label
요소의
라벨된 제어를 반환하거나, 없다면 null을 반환해야 합니다.
form
IDL 속성은 다음
단계를 실행해야 합니다:
form
IDL 속성은
label
요소의
form
IDL 속성과 다르며,
리스트된
폼 관련 요소에서
label
요소는
form
콘텐츠 속성을 가지지 않습니다.
control.labels
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
라벨 가능한 요소들과 모든 input
요소들은 해당 요소와 연결된 실시간 NodeList
객체를 가지고 있습니다. 이 객체는 해당 요소의 라벨된 컨트롤로 설정된
label
요소들의 목록을 트리 순서로 나타냅니다. 라벨 가능한 요소들 중 폼과 연관된 커스텀 요소들이 아닌 경우, 그리고 labels
IDL 속성이 input
요소에서 가져올 때, 그 NodeList
객체를 반환해야 하며, 항상 동일한 값을 반환해야 합니다. 그러나 input
요소의 type
속성이 인 경우, 대신 null을
반환해야 합니다.
모든 현재 엔진에서 지원됨.
폼 관련 사용자 정의
요소에는
labels
IDL 속성이 없습니다.
대신, 해당 ElementInternals
객체에는
labels
IDL 속성이 있으며, 이를 가져올 때
"NotSupportedError
" DOMException
을
발생시키며, 대상 요소가 폼 관련 사용자 정의
요소가 아닌 경우 발생해야 합니다.
그렇지 않은 경우, 해당 NodeList
객체를 반환해야 하며, 동일한 값을 반환해야 합니다.
이 (비준수) 예제는 NodeList
에
어떤 일이 발생하는지
보여줍니다. labels
가 반환되며, input
요소에
type
속성이 변경됩니다.
<!doctype html>
< p >< label >< input ></ label ></ p >
< script >
const input = document. querySelector( 'input' );
const labels = input. labels;
console. assert( labels. length === 1 );
input. type = 'hidden' ;
console. assert( labels. length === 0 ); // 이제 input은 label의 라벨된 제어 가 아닙니다 .
console. assert( input. labels === null );
input. type = 'checkbox' ;
console. assert( labels. length === 1 ); // 이제 input은 다시 label의 라벨된 제어 입니다 .
console. assert( input. labels === labels); // 처음 반환된 동일한 값입니다 .
</ script >
input
요소모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
type
속성이 숨김 상태가 아닌
경우: 인터랙티브 콘텐츠.
type
속성이 숨김 상태가
아니라면: 목록화됨, 레이블 가능, 제출 가능, 재설정 가능, 그리고 자동 대문자화 및 자동 수정 상속 폼 관련 요소.
type
속성이 숨김 상태라면: 목록화됨, 제출 가능, 재설정 가능, 그리고 자동 대문자화 및 자동 수정 상속 폼 관련 요소.
type
속성이 숨김 상태가 아닌
경우: 지각 가능한 콘텐츠.
accept
— 파일 업로드
컨트롤에서 예상되는 파일 형식에 대한 힌트
alt
— 이미지가 제공되지 않을 때 사용되는 대체
텍스트
autocomplete
— 폼 자동
완성 기능에 대한 힌트
checked
— 컨트롤이 선택되었는지
여부
dirname
— 방향성을 폼 제출에서 전송하는 데 사용할 폼 컨트롤의 이름
disabled
— 폼 컨트롤이 비활성화되었는지
여부
form
— form
요소와 요소를 연결합니다.
formaction
— URL — 폼 제출에 사용할 URL
formenctype
— 엔트리 목록 — 폼 제출에 사용할 인코딩 타입
formmethod
— 폼 제출에 사용할 방법
formnovalidate
— 폼 제출을 위한 폼 컨트롤 검증을 우회합니다.
formtarget
— 탐색 가능 — 폼 제출에 사용
height
— 수직 크기
list
— 자동 완성 옵션 목록
max
— 최대 값
maxlength
— 값의 최대
길이
min
— 최소 값
minlength
— 값의 최소
길이
multiple
— 여러 값을 허용할지
여부
name
— 폼 제출 및 form.elements
API에서 사용할 요소의
이름
pattern
— 폼 컨트롤의 값이
일치해야 하는 패턴
placeholder
— 폼
컨트롤 내에 표시되는 사용자 가시성 레이블
popovertarget
— 토글, 표시
또는 숨길 팝오버 요소를 대상으로 합니다.
popovertargetaction
— 대상 팝오버 요소를 토글, 표시 또는 숨길지 여부를 나타냅니다.
readonly
— 사용자가 값을
편집할 수 있는지 여부
required
— 폼 제출을 위해 이 컨트롤이 필수인지 여부
size
— 컨트롤의 크기
src
— 리소스의 주소
step
— 폼 컨트롤의 값이 일치해야 하는 세부
정도
type
— 폼 컨트롤의 유형
value
— 폼 컨트롤의 값
width
— 수평 크기
title
속성은 이 요소에 대해 특별한 의미를 가지고 있습니다. ( pattern
속성과 함께 사용될 때
패턴의 설명 )
type
속성이 숨김 상태에 있을 때:
작성자용; 구현자용.
type
속성이 텍스트 상태에 있을 때: 작성자용; 구현자용.
type
속성이 검색 상태에 있을 때: 작성자용; 구현자용.
type
속성이 전화 상태에 있을 때: 작성자용; 구현자용.
type
속성이 URL 상태에 있을 때: 작성자용; 구현자용.
type
속성이 이메일 상태에 있을 때: 작성자용; 구현자용.
type
속성이 패스워드
상태에 있을 때: 작성자용; 구현자용.
type
속성이 날짜 상태에 있을 때: 작성자용; 구현자용.
type
속성이 월 상태에 있을 때: 작성자용; 구현자용.
type
속성이 주 상태에 있을 때: 작성자용; 구현자용.
type
속성이 시간 상태에 있을 때: 작성자용; 구현자용.
type
속성이 로컬 날짜 및 시간 상태에 있을 때: 작성자용; 구현자용.
type
속성이 숫자 상태에 있을 때: 작성자용; 구현자용.
type
속성이 범위 상태에 있을 때: 작성자용; 구현자용.
type
속성이 색상 상태에 있을 때: 작성자용; 구현자용.
type
속성이 체크박스
상태에 있을 때: 작성자용; 구현자용.
type
속성이 라디오
버튼 상태에 있을 때: 작성자용; 구현자용.
type
속성이 파일 업로드
상태에 있을 때: 작성자용; 구현자용.
type
속성이 제출
버튼 상태에 있을 때: 작성자용; 구현자용.
type
속성이 이미지
버튼 상태에 있을 때: 작성자용; 구현자용.
type
속성이 리셋 버튼
상태에 있을 때: 작성자용; 구현자용.
type
속성이 버튼 상태에 있을 때: 작성자용; 구현자용.
[Exposed =Window ]
interface HTMLInputElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString accept ;
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute boolean defaultChecked ;
attribute boolean checked ;
[CEReactions ] attribute DOMString dirName ;
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
attribute FileList ? files ;
[CEReactions ] attribute USVString formAction ;
[CEReactions ] attribute DOMString formEnctype ;
[CEReactions ] attribute DOMString formMethod ;
[CEReactions ] attribute boolean formNoValidate ;
[CEReactions ] attribute DOMString formTarget ;
[CEReactions ] attribute unsigned long height ;
attribute boolean indeterminate ;
readonly attribute HTMLDataListElement ? list ;
[CEReactions ] attribute DOMString max ;
[CEReactions ] attribute long maxLength ;
[CEReactions ] attribute DOMString min ;
[CEReactions ] attribute long minLength ;
[CEReactions ] attribute boolean multiple ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString pattern ;
[CEReactions ] attribute DOMString placeholder ;
[CEReactions ] attribute boolean readOnly ;
[CEReactions ] attribute boolean required ;
[CEReactions ] attribute unsigned long size ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString step ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString defaultValue ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString value ;
attribute object ? valueAsDate ;
attribute unrestricted double valueAsNumber ;
[CEReactions ] attribute unsigned long width ;
undefined stepUp (optional long n = 1);
undefined stepDown (optional long n = 1);
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
readonly attribute NodeList ? labels ;
undefined select ();
attribute unsigned long ? selectionStart ;
attribute unsigned long ? selectionEnd ;
attribute DOMString ? selectionDirection ;
undefined setRangeText (DOMString replacement );
undefined setRangeText (DOMString replacement , unsigned long start , unsigned long end , optional SelectionMode selectionMode = "preserve");
undefined setSelectionRange (unsigned long start , unsigned long end , optional DOMString direction );
undefined showPicker ();
// also has obsolete members
};
HTMLInputElement includes PopoverInvokerElement ;
input
요소는 표현 형식화된 데이터 필드를 나타내며, 일반적으로
사용자가 데이터를 편집할 수 있는
폼 컨트롤과 함께 제공됩니다.
type
속성은
요소의 데이터 유형(및 관련 컨트롤)을 제어합니다. 이 속성은 다음 키워드와 상태를 가진 열거형 속성입니다.
키워드 | 상태 | 데이터 유형 | 컨트롤 유형 |
---|---|---|---|
hidden
| 임의의 문자열 | n/a | |
text
| 텍스트 | 줄바꿈이 없는 텍스트 | 텍스트 컨트롤 |
search
| 검색 | 줄바꿈이 없는 텍스트 | 검색 컨트롤 |
tel
| 전화번호 | 줄바꿈이 없는 텍스트 | 텍스트 컨트롤 |
url
| URL | 절대 URL | 텍스트 컨트롤 |
email
| 이메일 | 이메일 주소 또는 이메일 주소 목록 | 텍스트 컨트롤 |
password
| 비밀번호 | 줄바꿈이 없는 텍스트 (민감한 정보) | 데이터를 가리는 텍스트 컨트롤 |
date
| 날짜 | 시간대가 없는 날짜 (년, 월, 일) | 날짜 컨트롤 |
month
| 월 | 시간대가 없는 연도와 월로 구성된 날짜 | 월 컨트롤 |
week
| 주 | 시간대가 없는 주-연도 번호와 주 번호로 구성된 날짜 | 주 컨트롤 |
time
| 시간 | 시간대가 없는 시간 (시간, 분, 초, 초의 소수 부분) | 시간 컨트롤 |
datetime-local
| 로컬 날짜 및 시간 | 시간대가 없는 날짜와 시간 (년, 월, 일, 시간, 분, 초, 소수 초) | 날짜 및 시간 컨트롤 |
number
| 숫자 | 수치 값 | 텍스트 컨트롤 또는 스피너 컨트롤 |
range
| 범위 | 정확한 값이 중요하지 않은 수치 값 | 슬라이더 컨트롤 또는 유사한 컨트롤 |
color
| 색상 | 8비트 빨강, 초록, 파랑 구성 요소가 있는 sRGB 색상 | 색상 선택기 |
checkbox
| 체크박스 | 미리 정의된 목록에서 0개 이상의 값 선택 | 체크박스 |
radio
| 라디오 버튼 | 열거된 값 | 라디오 버튼 |
file
| 파일 업로드 | MIME 타입과 선택적으로 파일 이름을 가진 0개 이상의 파일 | 레이블 및 버튼 |
submit
| 제출 버튼 | 선택한 마지막 값이며 폼 제출을 시작하는 추가 의미를 가진 열거된 값 | 버튼 |
image
| 이미지 버튼 | 이미지의 크기에 상대적인 좌표로, 선택한 마지막 값이며 폼 제출을 시작하는 추가 의미를 가짐 | 클릭 가능한 이미지 또는 버튼 |
reset
| 리셋 버튼 | n/a | 버튼 |
button
| 버튼 | n/a | 버튼 |
속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 텍스트 상태입니다.
어떤 accept
,
alt
,
autocomplete
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
,
src
,
step
,
width
콘텐츠
속성, checked
,
files
,
valueAsDate
,
valueAsNumber
,
list
IDL 속성,
select()
메서드, selectionStart
,
selectionEnd
,
selectionDirection
IDL 속성,
setRangeText()
및
setSelectionRange()
메서드,
stepUp()
및
stepDown()
메서드,
input
및
change
이벤트가
input
요소에 적용되는지
여부는 그 요소의 type
속성의 상태에 따라 달라집니다. 각 타입을 정의하는 하위 섹션은 이러한 기능 중 어떤 것이 각 타입에 적용되는지, 그리고
어떤 것이 적용되지 않는지를 명시적으로 정의하며, 이러한 기능의 동작은 해당 섹션에서
정의된 대로 적용 여부에 따라 다릅니다(콘텐츠 속성, API, 이벤트 참고).
다음 표는 비규범적이며 이러한 콘텐츠 속성, IDL 속성, 메서드 및 이벤트가 각 상태에 적용되는지를 요약한 것입니다:
Text, Search | Telephone, URL | Password | Date, Month, Week, Time | Local Date and Time | Number | Range | Color | Checkbox, Radio Button | File Upload | Submit Button | Image Button | Reset Button, Button | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Content attributes | |||||||||||||||
accept
| · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
alt
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
autocomplete
| Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
checked
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
dirname
| Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | Yes | · | · |
formaction
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formenctype
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formmethod
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formnovalidate
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formtarget
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
height
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
max
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
min
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
minlength
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
multiple
| · | · | · | Yes | · | · | · | · | · | · | · | Yes | · | · | · |
pattern
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
placeholder
| · | Yes | Yes | Yes | Yes | · | · | Yes | · | · | · | · | · | · | · |
popovertarget
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | Yes |
popovertargetaction
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | Yes |
readonly
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
required
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
size
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
src
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
step
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
width
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
IDL attributes and methods | |||||||||||||||
checked
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
files
| · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
value
| default | value | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
valueAsDate
| · | · | · | · | · | Yes | · | · | · | · | · | · | · | · | · |
valueAsNumber
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
select()
| · | Yes | Yes | Yes† | Yes | Yes† | Yes† | Yes† | · | Yes† | · | Yes† | · | · | · |
selectionStart
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionEnd
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionDirection
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
setRangeText()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
setSelectionRange()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
stepDown()
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
stepUp()
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
Events | |||||||||||||||
input
event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
change
event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
† 선택할 수 있는 텍스트가 없으면, select()
메서드는 아무 작업도 하지 않으며, "InvalidStateError
" DOMException
이
발생하지 않습니다.
일부 type
속성의 상태는 값 정리 알고리즘을 정의합니다.
각 input
요소는 값을 가지며, 이는 value
IDL 속성으로 노출됩니다. 일부 상태는 문자열을
숫자로 변환하는 알고리즘(algorithm to convert a string to a number), 숫자를
문자열로 변환하는 알고리즘(algorithm to convert a number to a string), 문자열을
Date
객체로 변환하는 알고리즘(algorithm to convert a string to a
Date
object), Date
객체를 문자열로 변환하는 알고리즘(algorithm to convert a Date
object to a string)을 정의하며,
이는 max
, min
, step
, valueAsDate
, valueAsNumber
,
stepUp()
에서 사용됩니다.
사용자가 컨트롤을 조작하여 값을 변경할 때마다 input
요소의 변경된 값 플래그는 true로 설정되어야 합니다. (값이 프로그래밍적으로
변경될 때도 value
IDL 속성의 정의에 따라
true로 설정됩니다.)
value
콘텐츠 속성은 input
요소의 기본 값을 제공합니다. value
콘텐츠 속성이 추가되거나 설정되거나 제거될
때, 제어의 변경된 값 플래그가 false라면, 사용자 에이전트는 요소의
값을 value
콘텐츠 속성의 값으로 설정해야 하며,
값이 정의된 경우 값 정리 알고리즘을
실행해야 합니다.
각 input
요소는 체크 상태를 가지며, 이는 checked
IDL 속성으로 노출됩니다.
각 input
요소는 불리언 변경된 체크 상태 플래그를 가집니다. 플래그가 true로 설정되면, 요소는 변경된 체크 상태를 가지게 됩니다. 변경된 체크 상태 플래그는 요소가 생성될 때 false로 설정되어야 하며, 사용자가 체크 상태를 변경하는 방식으로 컨트롤을 조작할 때마다 true로
설정되어야 합니다.
모든 현재 엔진에서 지원합니다.
checked
콘텐츠 속성은 불리언 속성으로, input
요소의 기본 체크 상태를 제공합니다. checked
콘텐츠 속성이 추가되면, 제어가
변경된 체크 상태를 가지지
않은 경우 사용자 에이전트는 요소의 체크 상태를 true로 설정해야
합니다. checked
콘텐츠 속성이
제거되면, 제어가 변경된 체크
상태를 가지지 않은 경우 사용자 에이전트는 요소의 체크 상태를 false로 설정해야 합니다.
리셋 알고리즘은 input
요소의 사용자 유효성, 변경된 값 플래그, 변경된 체크 상태 플래그를 false로 되돌리고, 요소의 값을 value
콘텐츠 속성의 값으로 설정하거나, 없다면 빈
문자열로 설정하며, 요소가 checked
콘텐츠 속성을 가지고 있으면 체크 상태를 true로, 그렇지 않으면 false로 설정해야 하며, 선택된 파일 목록을 비우고, 현재 상태가 정의된 경우 값 정리 알고리즘을 실행해야
합니다.
각 input
요소는 변경 가능일 수 있습니다. 명시되지 않은 경우를 제외하고,
input
요소는 항상 변경 가능입니다. 마찬가지로 명시되지 않은 경우를
제외하고, 사용자 에이전트는 사용자가 요소의 값 또는 체크 상태를 수정할 수 없도록 해야 합니다.
input
요소가 비활성화된 경우, 변경 가능하지 않습니다.
readonly
속성은
일부 경우(예: 날짜 상태, 그러나 체크박스 상태는
아님)에 input
요소가 변경 가능이 되는 것을 막을 수 있습니다.
복제 단계는 input
요소의 값을 값, 변경된 값 플래그, 체크 상태, 변경된 체크 상태 플래그를 복사본에 전달해야 합니다.
활성화 동작은 input
요소의
element와 주어진 event에 대해 다음 단계를 따릅니다:
element가 변경 가능하지 않으며, 체크박스 상태에 있지 않으며, 라디오 버튼 상태에 있지 않은 경우, 반환합니다.
element의 입력 활성화 동작을 실행하고, 다른 작업은 수행하지 않습니다.
팝오버 타겟 속성 활성화 동작을 element에서 실행합니다.
요소의 활성화
동작은 사용자에 의해 시작된 활성화와 el.click()
와 같은 합성 활성화 모두에 대해 실행된다는 점을 기억하십시오. 사용자 에이전트는 이곳에 명시되지 않은 특정
제어 동작을 가질 수도 있으며, 이는 진정한 사용자에 의해 시작된 활성화에서만 트리거됩니다. 일반적인 선택은 해당 제어를 위한 선택기를 보여주는 것입니다. 반면에, 입력 활성화 동작은 파일 업로드와 색상 상태와 같은 특별한 역사적
경우에만 선택기를 표시합니다.
레거시 사전 활성화 동작은 input
요소에 대해 다음 단계를 따릅니다:
이 요소의 type
속성이 체크박스
상태에 있으면, 이 요소의 체크 상태를
반대 값으로 설정하고(즉, true이면 false로, false이면 true로), 이 요소의 indeterminate
IDL 속성을 false로 설정합니다.
이 요소의 type
속성이 라디오
버튼 상태에 있으면, 이 요소의 라디오 버튼
그룹에서 체크 상태가 true로 설정된 요소에 대한 참조를 얻고, 이 요소의 체크 상태를 true로 설정합니다.
레거시 취소된 활성화 동작은 input
요소에 대해 다음 단계를 따릅니다:
이 요소의 type
속성이 체크박스
상태에 있으면, 이 요소의 체크 상태와
indeterminate
IDL 속성을 레거시 사전 활성화 동작이 실행되기 전의 값으로 되돌립니다.
이 요소의 type
속성이 라디오
버튼 상태에 있으면, 이 요소의 레거시 사전 활성화 동작에서 얻은 참조가 여전히 이 요소의 라디오 버튼 그룹에 있으면, 그 요소의 체크 상태를 true로 설정합니다. 참조된 요소가
없거나, 그 요소가 더 이상 이 요소의 라디오 버튼
그룹에 없거나, 이 요소가 더 이상 라디오 버튼
그룹을 가지고 있지 않으면, 이 요소의 체크
상태를 false로 설정합니다.
처음 input
요소가 생성될 때, 해당 요소의
렌더링과 동작은 type
속성의 상태에 따라 설정되어야
하며, 만약 정의된 경우 값 정리
알고리즘이 실행되어야 합니다.
input
요소의 type
속성이 변경될 때, 사용자 에이전트는 다음
단계를 실행해야 합니다:
이전 type
속성 상태가
value
IDL 속성을 value 모드로
설정했으며, 요소의 값이 빈 문자열이 아니고, 새로운
type
속성 상태가 value
IDL 속성을 기본값 모드
또는 기본값/켜짐 모드로 설정하면, 요소의 value
콘텐츠 속성을 요소의
값으로 설정합니다.
그렇지 않으면, 이전 type
속성
상태가 value
IDL 속성을
value 모드 이외의
모드로 설정했고, 새로운 type
속성 상태가 value
IDL
속성을 value
모드로 설정하면, 요소의 값을 콘텐츠 속성의 값으로
설정하고, 만약 값이 없으면 빈 문자열로 설정한 다음, 제어의 변경된 값 플래그를 false로 설정합니다.
그렇지 않으면, 이전 type
속성
상태가 value
IDL 속성을
파일 이름
모드 이외의 모드로 설정했고, 새로운 type
속성 상태가 value
IDL 속성을 파일 이름
모드로 설정하면, 요소의 값을 빈 문자열로
설정합니다.
요소의 렌더링과 동작을 새로운 상태로 업데이트합니다.
요소에 대해 타입 변경 신호를 보냅니다. (특히 라디오 버튼 상태에서 사용됩니다.)
이전에 setRangeText()
가
요소에 적용되었는지 여부를 판단하여
previouslySelectable 값을 설정합니다.
이제 setRangeText()
가
요소에 적용되었는지 여부를 판단하여
nowSelectable 값을 설정합니다.
만약 previouslySelectable 값이 false이고 nowSelectable 값이 true라면, 요소의 텍스트 입력 커서
위치를 텍스트 컨트롤의 시작 부분으로 설정하고, 선택 방향을 "none
"으로 설정합니다.
name
속성은 요소의 이름을 나타냅니다.
dirname
속성은 요소의 방향성이 제출되는 방식을 제어합니다.
disabled
속성은 제어를 비활성화하고 값을
제출하는 것을 방지하는 데 사용됩니다.
form
속성은 input
요소를 폼 소유자와 명시적으로 연결하는 데 사용됩니다.
autocomplete
속성은 사용자
에이전트가 자동 완성 동작을 제공하는 방식을 제어합니다.
HTMLInputElement#indeterminate
모든 현재 엔진에서 지원됩니다.
indeterminate
IDL 속성은 초기에는 false로 설정되어야 합니다. 가져올 때, 마지막으로 설정된 값을
반환해야 합니다. 설정할 때, 새로운 값으로 설정해야 합니다. 이는 체크박스 제어의 모양을 변경하는 것 외에는 아무런 효과가 없습니다.
모든 현재 엔진에서 지원됩니다.
accept
, alt
, max
, min
, multiple
,
pattern
, placeholder
, required
, size
, src
, 그리고 step
IDL 속성은 동일한
이름의 해당 콘텐츠 속성을 반영해야 합니다. dirName
IDL 속성은 dirname
콘텐츠 속성을 반영해야 합니다. readOnly
IDL 속성은 readonly
콘텐츠 속성을 반영해야 합니다. defaultChecked
IDL 속성은 checked
콘텐츠 속성을 반영해야 합니다. defaultValue
IDL 속성은 value
콘텐츠 속성을 반영해야 합니다.
type
IDL 속성은 동일한
이름의 해당 콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
maxLength
IDL 속성은 maxlength
콘텐츠
속성을 반영해야 하며, 음수가 아닌 숫자로만 제한됩니다. minLength
IDL 속성은 minlength
콘텐츠
속성을 반영해야 하며, 음수가 아닌 숫자로만 제한됩니다.
IDL 속성 width
와
height
는 이미지가
렌더링 중일 경우, CSS 픽셀로 표시된 이미지의 렌더링된 너비와 높이를 반환해야
하며, 그렇지 않은 경우, 이미지가 사용 가능하지만 렌더링 중이 아닐 경우, 자연 너비와 높이를 CSS 픽셀로 반환해야 하며, 그렇지 않으면 0을 반환해야 합니다. input
요소의 type
속성이 이미지 버튼
상태에 있지 않은 경우, 이미지가 사용 가능하지
않습니다. [CSS]
설정 시, 해당 속성들은 동일한 이름의 해당 콘텐츠 속성을 반영하는 것처럼 작동해야 합니다.
willValidate
, validity
, 그리고 validationMessage
IDL 속성과 checkValidity()
,
reportValidity()
,
그리고 setCustomValidity()
메서드는 제약 조건 검증 API의
일부입니다. labels
IDL 속성은 요소의 라벨
목록을 제공합니다. select()
,
selectionStart
,
selectionEnd
,
selectionDirection
,
setRangeText()
,
그리고 setSelectionRange()
메서드 및 IDL 속성은 요소의 텍스트 선택을 노출합니다. disabled
, form
, 그리고 name
IDL 속성은 요소의 폼 API의 일부입니다.
type
속성의 상태type=hidden
)모든 현재 엔진에서 지원됩니다.
만약
요소의 속성이 상태에 있을 때, 이 섹션의 규칙이 적용됩니다.요소는 된 값이 사용자에 의해 검사되거나 조작될 의도가 없는 값입니다.
제약 조건 유효성 검사: 만약
요소의 속성이 상태에 있을 때, .만약
속성이 존재하고 그 값이 으로 " " 와 일치하는 경우, 요소의 속성은 생략해야 합니다.및 콘텐츠 속성이 됩니다.
IDL 속성이 되며 기본 모드에 있습니다 .
다음 콘텐츠 속성은 지정되어서는 안 되며
: , , , , , , , , , , , , , , , , , , , , , , , , 및 .다음 IDL 속성 및 메서드는
: , , , , , , , 및 IDL 속성; , , , , 및 메서드.및 이벤트는 .
type=text
) 상태 및 검색 상태 (type=search
)모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
입력(input
)
요소의 type
속성이 텍스트
상태 또는 검색
상태에 있을 때, 이 섹션의 규칙이 적용됩니다.
입력(input
)
요소는 표시
요소의 값을
위한
한 줄짜리 일반 텍스트 편집 컨트롤을 나타냅니다.
텍스트 상태와 검색 상태의 차이는 주로 스타일에 있습니다: 검색 컨트롤이 일반 텍스트 컨트롤과 구별되는 플랫폼에서는 검색 상태가 플랫폼의 검색 컨트롤과 일관된 모양으로 나타날 수 있으며, 일반 텍스트 컨트롤처럼 보이지 않을 수 있습니다.
요소가 변경 가능한 경우, 사용자가 요소의 값을 편집할 수 있어야 합니다. 사용자 에이전트는 사용자가 요소의 값에 U+000A 줄 바꿈 (LF) 또는 U+000D 캐리지 리턴 (CR) 문자를 삽입할 수 없도록 해야 합니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 요소의 쓰기 방향을 변경할 수 있도록 해야 하며, 이를 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 설정할 수 있어야 합니다. 사용자가 이렇게 하면, 사용자 에이전트는 다음 단계를 수행해야 합니다:
사용자가 왼쪽에서 오른쪽으로 쓰기 방향을 선택한 경우, 요소의 dir
속성을 "ltr
"
로 설정하고, 사용자가 오른쪽에서 왼쪽으로 쓰기 방향을 선택한 경우에는
"rtl
"
로 설정합니다.
요소
작업을 대기열에 추가하여 사용자
상호작용 작업 출처에서 요소가 이벤트를 발생시키도록 합니다. 이벤트의 이름은 input
이며, 버블링
및 구성됨
속성은 true로 초기화됩니다.
값
속성이 지정된 경우, 해당 속성의 값에는 U+000A 줄 바꿈 (LF) 또는 U+000D 캐리지 리턴 (CR) 문자가 포함되지 않아야 합니다.
값 정리 알고리즘은 다음과 같습니다: 줄 바꿈 제거 값에서.
다음의 공통 input
요소 내용
속성, IDL 속성 및 메서드가 요소에 적용됩니다:
autocomplete
,
dirname
,
list
,
maxlength
,
minlength
,
pattern
,
placeholder
,
readonly
,
required
,
and
size
내용 속성;
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
and
value
IDL 속성;
select()
,
setRangeText()
,
and
setSelectionRange()
메서드.
다음의 내용 속성은 지정되어서는 안 되며 적용되지
않습니다:
accept
,
alt
,
checked
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
max
,
min
,
multiple
,
popovertarget
,
popovertargetaction
,
src
,
step
,
and
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
files
,
valueAsDate
,
and
valueAsNumber
IDL 속성;
stepDown()
and
stepUp()
메서드.
type=tel
)모든 현재 엔진에서 지원됩니다.
이 input
요소의 type
속성이
전화 상태에 있을
때, 이
섹션의
규칙이 적용됩니다.
이 input
요소는
전화번호를 편집하기 위한
제어를 나타냅니다.
요소의 값으로
제공됩니다.
요소가 변경 가능한 경우, 사용자가 값을 편집할 수 있어야 합니다. 사용자 에이전트는 사용자가 입력한 값의 공백과 문장 부호를 변경할 수 있습니다. 사용자 에이전트는 사용자가 요소의 값에 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자를 삽입하지 못하게 해야 합니다.
값
속성은, 지정된 경우, U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자가 포함되지 않은 값을 가져야 합니다.
값 정리 알고리즘은 다음과 같습니다: 새 줄 제거 값에서.
전화번호 유형은 URL
및 이메일 유형과 달리 특정
구문을 강제하지 않습니다. 이는 의도된 것입니다. 실제로 전화번호 필드는 다양한 유효한 전화번호가 있기 때문에 일반적으로 자유형식 필드로 사용됩니다. 특정 형식을 강제해야 하는 시스템은 패턴
속성이나 setCustomValidity()
메서드를 사용하여 클라이언트 측 유효성 검사 메커니즘에 연결하는 것이 좋습니다.
다음의 일반적인 input
요소
콘텐츠
속성, IDL 속성 및 메서드 적용:
autocomplete
,
dirname
,
list
,
maxlength
,
minlength
,
pattern
,
placeholder
,
readonly
,
required
,
and
size
콘텐츠
속성;
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
and
value
IDL
속성;
select()
,
setRangeText()
,
and
setSelectionRange()
메서드.
다음 콘텐츠 속성은 지정되지 않아야 하며 적용되지 않습니다:
accept
,
alt
,
checked
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
max
,
min
,
multiple
,
popovertarget
,
popovertargetaction
,
src
,
step
, and
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
files
,
valueAsDate
,
and
valueAsNumber
IDL 속성;
stepDown()
and
stepUp()
메서드.
type=url
)모든 현재 엔진에서 지원됨.
input
요소의
type
속성이
URL 상태에 있을 때,
이 섹션의 규칙이 적용됩니다.
input
요소는 편집을 위한 제어를
나타냅니다. 하나의
절대 URL이 요소의 값으로 제공됩니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 값으로 표시된 URL을 변경할 수 있도록 해야 합니다. 사용자 에이전트는 사용자가 값을 유효한 절대 URL이 아닌 문자열로 설정하도록 허용할 수 있지만, 대신에 또는 추가로 사용자가 입력한 문자를 자동으로 이스케이프하여 값이 항상 유효한 절대 URL이 되도록 할 수 있습니다 (이 값이 사용자가 인터페이스에서 실제로 보고 수정한 값이 아닐지라도). 사용자 에이전트는 사용자가 값을 빈 문자열로 설정할 수 있도록 해야 합니다. 사용자 에이전트는 사용자가 값에 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자를 삽입하도록 허용해서는 안 됩니다.
값
속성은 지정되어 있고 비어 있지 않은 경우, 공백으로 둘러싸일 수 있는 유효한 URL이어야
하며, 또한 절대 URL이어야 합니다.
값 위생 알고리즘은 다음과 같습니다: 새 줄 제거 값에서, 그 후 선행 및 후행 ASCII 공백 제거 값에서.
제약 조건 유효성 검사: 요소의 값이 빈 문자열도 아니고 유효한 절대 URL도 아닌 경우, 요소는 타입 불일치 상태입니다.
다음은 공통 input
요소
콘텐츠
속성, IDL 속성 및 메소드 적용됨:
autocomplete
,
dirname
,
list
,
maxlength
,
minlength
,
pattern
,
placeholder
,
readonly
,
required
,
그리고
size
콘텐츠
속성;
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
및
value
IDL
속성;
select()
,
setRangeText()
,
및
setSelectionRange()
메소드.
다음 콘텐츠 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
checked
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
max
,
min
,
multiple
,
popovertarget
,
popovertargetaction
,
src
,
step
, 및
width
.
다음 IDL 속성과 메소드는 적용되지 않습니다:
checked
,
files
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
stepDown()
및
stepUp()
메소드.
문서에 다음과 같은 마크업이 포함된 경우:
< input type = "url" name = "location" list = "urls" >
< datalist id = "urls" >
< option label = "MIME: Format of Internet Message Bodies" value = "https://www.rfc-editor.org/rfc/rfc2045" >
< option label = "HTML" value = "https://html.spec.whatwg.org/" >
< option label = "DOM" value = "https://dom.spec.whatwg.org/" >
< option label = "Fullscreen" value = "https://fullscreen.spec.whatwg.org/" >
< option label = "Media Session" value = "https://mediasession.spec.whatwg.org/" >
< option label = "The Single UNIX Specification, Version 3" value = "http://www.unix.org/version3/" >
</ datalist >
...사용자가 "spec.w"를 입력하고 사용자 에이전트가 최근에 https://url.spec.whatwg.org/#url-parsing
및
https://streams.spec.whatwg.org/
를 방문한 경우, 렌더링은 다음과 같이 보일 수 있습니다:
이 샘플의 처음 네 개의 URL은 사용자가 입력한 텍스트와 일치하는 작성자가 지정한 URL 목록의 URL을 포함하며, 일부 구현 정의 방식으로 정렬됩니다 (아마도 사용자가 해당 URL을 참조한 빈도에 따라). UA가 값이 URL임을 이용하여 사용자가 스킴 부분을 생략할 수 있게 하고 도메인 이름에 대해 지능적으로 일치시키는 방식을 주목하세요.
마지막 두 개의 URL(및 스크롤바의 추가 값 표시로 보아 아마 더 많은 URL이 있을 것 같습니다)은 사용자 에이전트의 세션 기록 데이터에서 일치한 것입니다. 이 데이터는 페이지 DOM에 제공되지 않습니다. 이 경우 UA는 이러한 값에 대한 제목을 제공할 수 없습니다.
type=email
)모든 현재 엔진에서 지원됩니다.
만약 input
요소의 type
속성이 이메일
상태일 때, 이 섹션의 규칙이 적용됩니다.
이메일
상태가 작동하는 방식은
multiple
속성의 지정 여부에 따라 달라집니다.
multiple
속성이 요소에 지정되지 않은 경우
input
요소는 대표하는 제어를
제공하여 이메일
주소를 편집합니다. 이는 요소의 값입니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 이메일 주소를 변경할 수 있도록 허용해야 합니다. 사용자 에이전트는 사용자가 값을 유효한 이메일 주소가 아닌 문자열로 설정하는 것을 허용할 수 있습니다. 사용자 에이전트는 사용자가 단일 이메일 주소를 제공할 것으로 기대하고 행동해야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정하도록 허용해야 합니다. 사용자 에이전트는 사용자가 값에 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자를 삽입하는 것을 허용해서는 안 됩니다. 사용자 에이전트는 값을 표시 및 편집을 위해 변환할 수 있습니다; 특히 사용자 에이전트는 값의 도메인 레이블에서 punycode를 IDN으로 변환하고 그 반대도 수행해야 합니다.
제약 조건 유효성 검사: 사용자 인터페이스가 사용자 에이전트가 punycode로 변환할 수 없는 입력을 나타내는 경우, 제어는 잘못된 입력으로 인한 문제를 겪고 있습니다.
값
속성이 지정되어 있고 비어 있지 않은 경우, 값은 단일 유효한 이메일 주소여야 합니다.
값 정리 알고리즘은 다음과 같습니다: 줄바꿈 제거 요소의 값에서, 그 다음에 앞뒤 ASCII 공백 제거를 요소의 값에서 수행합니다.
제약 조건 유효성 검사: 요소의 값이 빈 문자열도 아니고 단일 유효한 이메일 주소도 아닌 경우, 요소는 유형 불일치로 인한 문제를 겪고 있습니다.
multiple
속성이 요소에 지정된 경우
input
요소는 대표하는 제어를
제공하여
이메일 주소를 추가, 제거 및 편집합니다. 이는 요소의 값들입니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 이메일 주소를 추가, 제거 및 편집할 수 있도록 허용해야 합니다. 사용자 에이전트는 사용자가 값들 목록의 개별 값을 유효한 이메일 주소가 아닌 문자열로 설정하는 것을 허용할 수 있지만, U+002C COMMA (,) 또는 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자를 포함하는 문자열로 개별 값을 설정하는 것은 허용하지 않아야 합니다. 사용자 에이전트는 요소의 값들에서 모든 주소를 제거하도록 허용해야 합니다. 사용자 에이전트는 값들을 표시 및 편집을 위해 변환할 수 있습니다; 특히 사용자 에이전트는 값의 도메인 레이블에서 punycode를 IDN으로 변환하고 그 반대도 수행해야 합니다.
제약 조건 유효성 검사: 사용자 인터페이스가 개별 값에 U+002C COMMA (,)가 포함되어 있거나 사용자 에이전트가 punycode로 변환할 수 없는 입력을 나타내는 경우, 제어는 잘못된 입력으로 인한 문제를 겪고 있습니다.
사용자가 요소의 값들을 변경할 때마다, 사용자 에이전트는 다음 단계들을 실행해야 합니다:
latest values을 요소의 값들의 복사본으로 설정합니다.
앞뒤 ASCII 공백 제거를 latest values의 각 값에서 수행합니다.
요소의 값은 latest values의 모든 값을 단일 U+002C COMMA 문자 (,)로 구분하여 이어붙인 결과입니다. 목록의 순서를 유지합니다.
값
속성이 지정된 경우, 값은 유효한 이메일 주소 목록이어야
합니다.
값 정리 알고리즘은 다음과 같습니다:
쉼표로 분리 요소의 값을, 앞뒤 ASCII 공백 제거를 결과 토큰 각각에서 수행하고, 요소의 값들을 (가능하면 빈) 결과 목록으로 설정합니다. 원래 순서를 유지합니다.
요소의 값은 요소의 값들을 단일 U+002C COMMA 문자 (,)로 구분하여 이어붙인 결과입니다. 목록의 순서를 유지합니다.
제약 조건 유효성 검사: 요소의 값이 유효한 이메일 주소 목록이 아닌 경우, 요소는 유형 불일치로 인한 문제를 겪고 있습니다.
만약 multiple
속성이 설정되거나 제거될 때, 사용자 에이전트는 값 정리 알고리즘을 실행해야 합니다.
유효한 이메일 주소는 다음 ABNF의 email
생성과 일치하는 문자열입니다.
이 ABNF는 RFC 1123에서 설명된 확장을 구현합니다. [ABNF] [RFC5322] [RFC1034] [RFC1123]
email = 1* ( atext / "." ) "@" label * ( "." label )
label = let-dig [ [ ldh-str ] let-dig ] ; 길이는 RFC 1034의 3.5절 에 의해 63자로 제한됨
atext = < as defined in RFC 5322 section 3 .2 .3 >
let-dig = < as defined in RFC 1034 section 3 .5 >
ldh-str = < as defined in RFC 1034 section 3 .5 >
이 요구 사항은 이메일 주소의 구문을 정의하는 RFC 5322에 대한 고의적인 위반입니다. 이 표준은 이메일 주소의 구문을 너무 엄격하게(“@” 기호 이전), 너무 모호하게(“@” 기호 이후), 너무 느슨하게(대부분의 사용자에게 익숙하지 않은 주석, 공백 문자 및 인용 문자열 허용) 정의하고 있습니다.
다음 JavaScript 및 Perl 호환 정규 표현식은 위 정의의 구현입니다.
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
유효한 이메일 주소 목록은 각각이 유효한 이메일 주소인 쉼표로 구분된 토큰 집합입니다. 유효한 이메일 주소 목록에서 토큰 목록을 얻으려면, 구현은 문자열을 쉼표로 분리해야 합니다.
다음의 일반적인 input
요소 콘텐츠
속성, IDL 속성 및 메서드는 적용됩니다:
autocomplete
,
dirname
,
list
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
및
size
콘텐츠
속성;
list
및
value
IDL
속성;
select()
메서드.
다음 콘텐츠 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
checked
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
max
,
min
,
popovertarget
,
popovertargetaction
,
src
,
step
, 및
width
.
다음 IDL 속성과 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
setRangeText()
,
setSelectionRange()
,
stepDown()
및
stepUp()
메서드.
type=password
)모든 현재 엔진에서 지원됨.
input
요소의 type
속성이
Password 상태일 때, 이
섹션의 규칙이
적용됩니다.
input
요소는 다음과 같이 나타냅니다
요소의 값을 위한
단일 줄의
평문 텍스트 편집 컨트롤입니다. 사용자 에이전트는 값을 가려서 다른 사람이 볼 수 없도록 해야 합니다.
요소가 mutable인 경우, 사용자가 값을 편집할 수 있어야 합니다. 사용자 에이전트는 사용자가 값에 U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자를 삽입하는 것을 허용해서는 안 됩니다.
value
속성이 지정된 경우, U+000A LINE FEED (LF) 또는 U+000D CARRIAGE RETURN (CR) 문자가 포함되지 않은 값을 가져야 합니다.
값 정리 알고리즘은 다음과 같습니다: 줄바꿈 문자 제거 값에서.
다음은 공통 input
요소의 내용 속성, IDL 속성 및 메소드 적용되는 항목입니다:
autocomplete
,
dirname
,
maxlength
,
minlength
,
pattern
,
placeholder
,
readonly
,
required
,
그리고
size
내용 속성;
selectionStart
,
selectionEnd
,
selectionDirection
,
및
value
IDL 속성;
select()
,
setRangeText()
,
및
setSelectionRange()
메소드.
다음 내용 속성은 지정해서는 안 되며 적용되지 않습니다:
accept
,
alt
,
checked
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
min
,
multiple
,
popovertarget
,
popovertargetaction
,
src
,
step
,
및
width
.
다음 IDL 속성 및 메소드가 적용되지 않습니다:
checked
,
files
,
list
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
stepDown()
및
stepUp()
메소드.
type=date
)모든 최신 엔진에서 지원됩니다.
input
요소의
type
속성이
날짜 상태에 있을 때,
이 섹션의 규칙이 적용됩니다.
input
요소는 요소의
값을 특정
날짜를 나타내는 문자열로 설정하는
컨트롤을 대표합니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 날짜를 값으로 변경할 수 있도록 허용해야 하며, 이는 날짜 파싱 을 통해 얻어진 것입니다. 사용자 에이전트는 사용자가 값을 유효한 날짜 문자열이 아닌 비어 있지 않은 문자열로 설정하는 것을 허용해서는 안 됩니다. 사용자 에이전트가 날짜를 선택할 수 있는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 나타내는 유효한 날짜 문자열로 설정해야 합니다. 사용자 에이전트는 사용자가 값을 비어 있는 문자열로 설정하는 것을 허용해야 합니다.
제약 조건 유효성 검사: 사용자 인터페이스가 사용자가 유효한 날짜 문자열로 변환할 수 없는 입력을 설명하는 경우, 컨트롤은 잘못된 입력으로 인한 문제를 겪고 있습니다.
날짜, 시간 및 숫자 양식 컨트롤의 입력 형식과 제출 형식 간의 차이와 양식 컨트롤의 지역화와 관련된 구현 노트에 대한 논의는 소개 섹션을 참조하세요.
값
속성은 지정되었으며 비어 있지 않은 경우
유효한 날짜 문자열이어야 합니다.
값 정화 알고리즘은 다음과 같습니다: 요소의 값이 유효한 날짜 문자열이 아닌 경우, 대신 비어 있는 문자열로 설정합니다.
min
속성은 지정된 경우,
유효한 날짜 문자열을 가져야 합니다.
max
속성은 지정된 경우,
유효한 날짜 문자열을 가져야 합니다.
step
속성은 일(day) 단위로 표현됩니다.
스텝 스케일 계수는 86,400,000
(이는 다른 알고리즘에서 사용되는 밀리초로 변환된 일수입니다). 기본 스텝은 1일입니다.
요소가 스텝 불일치를 겪는 경우, 사용자 에이전트는 요소의 값을 요소가 스텝 불일치를 겪지 않는 가장 가까운 날짜로 반올림할 수 있습니다.
문자열을 숫자로 변환하는 알고리즘, 주어진 문자열 input은 다음과 같습니다: 날짜를 파싱하여 input에서 오류가 발생하면 오류를 반환하고, 그렇지 않으면 1970-01-01 자정 UTC부터 파싱된 날짜의 자정 UTC까지 경과한 밀리초 수를 반환합니다.
숫자를 문자열로 변환하는 알고리즘, 주어진 숫자 input은 다음과 같습니다: 1970-01-01 자정 UTC부터 input 밀리초 후의 날짜를 나타내는 유효한 날짜 문자열을 반환합니다.
문자열을
Date
객체로 변환하는 알고리즘, 주어진 문자열 input은 다음과 같습니다: 날짜를 파싱하여 input에서
오류가 발생하면
오류를 반환하고, 그렇지 않으면 파싱된 날짜의 자정 UTC를
나타내는 새로운 Date
객체를 반환합니다.
Date
객체를 문자열로 변환하는 알고리즘,
주어진 Date
객체 input은 다음과 같습니다: input에 의해 표현된 시간의 UTC에서
유효한 날짜 문자열을 반환합니다.
날짜 상태 (및 후속 섹션에서 설명되는 다른 날짜 및 시간 관련 상태)는 현대 달력에 대해 정확한 날짜와 시간 을 설정할 수 없는 값을 입력하기 위한 것이 아닙니다. 예를 들어, "빅뱅 후 1밀리초", "쥐라기 초기에 해당하는 시기", "기원전 250년경 겨울" 같은 시간을 입력하는 것은 부적절합니다.
그레고리력 도입 이전의 날짜 입력의 경우, 사용자 에이전트가 이전 기간의 날짜와 시간을 그레고리력으로 변환하는
것을 지원하지 않으며, 사용자가 수동으로 이를 수행해야 한다면 과도한 부담을 주기 때문에 날짜 상태(및 후속 섹션에서 설명되는 다른 날짜 및 시간
관련 상태)를 사용하지 않도록 권장합니다. (그레고리력이 도입된 방식은 국가마다 다르게 진행되었으며, 16세기 중반부터
20세기 초까지 다양한 시점에서 발생했습니다.) 대신, 저자는 select
요소와 input
요소를
사용하여
숫자 상태의 세밀한
입력
컨트롤을 제공하는 것이 권장됩니다.
다음의 공통 input
요소의 내용 속성, IDL 속성 및 메서드가 요소에 적용됩니다:
autocomplete
,
list
,
max
,
min
,
readonly
,
required
,
그리고 step
내용 속성;
list
,
value
,
valueAsDate
,
그리고 valueAsNumber
IDL 속성;
select()
,
stepDown()
,
그리고 stepUp()
메서드.
다음의 내용 속성은 지정해서는 안 되며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
size
,
src
, 및
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
selectionStart
,
selectionEnd
,
및 selectionDirection
IDL 속성;
setRangeText()
,
및 setSelectionRange()
메서드.
type=month
)모든 현재 엔진에서 지원됩니다.
input
요소의 type
속성이 월
상태에 있을 때, 이 섹션의 규칙이 적용됩니다.
input
요소는 다음을 설정하는 제어를
나타냅니다.
요소의 값을 특정
월을 나타내는 문자열로 설정합니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 월 을 변경할 수 있도록 해야 합니다. 이는 값에서 월을 파싱하여 얻은 것입니다. 사용자 에이전트는 사용자가 값을 유효한 월 문자열이 아닌 비어 있지 않은 문자열로 설정하는 것을 허용해서는 안 됩니다. 사용자 에이전트가 월을 선택하는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 나타내는 유효한 월 문자열로 설정되어야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정할 수 있도록 해야 합니다.
제약 조건 검증: 사용자 인터페이스가 사용자 에이전트가 유효한 월 문자열로 변환할 수 없는 입력을 설명할 때, 제어는 잘못된 입력을 겪고 있는 상태입니다.
날짜, 시간 및 숫자 폼 컨트롤의 입력 형식과 제출 형식의 차이에 대한 논의는 소개 섹션을 참조하고, 폼 컨트롤의 지역화에 관한 구현 노트를 참조하십시오.
값
속성이 지정되고 비어 있지 않은 경우, 그 값은 유효한 월
문자열이어야 합니다.
값 세정 알고리즘은 다음과 같습니다: 요소의 값이 유효한 월 문자열이 아닌 경우, 대신 빈 문자열로 설정합니다.
최소값
속성이 지정된 경우, 그 값은 유효한 월 문자열이어야 합니다. 최대값
속성이 지정된 경우, 그 값은 유효한 월 문자열이어야 합니다.
단계
속성은 월로 표현됩니다. 단계 스케일 인자는 1입니다
(알고리즘이 월을 사용하므로 변환이 필요 없습니다). 기본 단계는 1개월입니다.
요소가 단계 불일치로 인한 문제를 겪고 있는 경우, 사용자 에이전트는 요소의 값을 가장 가까운 월로 반올림할 수 있습니다. 이 경우 요소는 단계 불일치를 겪지 않을 수 있습니다.
문자열을 숫자로 변환하는 알고리즘, 주어진 문자열 input,은 다음과 같습니다: 월을 input에서 파싱할 때 오류가 발생하면 오류를 반환하고, 그렇지 않으면 1970년 1월과 파싱된 월 사이의 월 수를 반환합니다.
숫자를 문자열로 변환하는 알고리즘, 주어진 숫자 input,은 다음과 같습니다: 1970년 1월과 input 개월 사이의 월을 나타내는 유효한 월 문자열을 반환합니다.
문자열을 Date
객체로 변환하는 알고리즘,
주어진 문자열 input,은 다음과 같습니다: 월을 input에서 파싱할 때 오류가 발생하면 오류를 반환하고, 그렇지
않으면 새로운 Date
객체를 반환하여 파싱된 월의 첫 날 아침 자정 UTC를
나타냅니다.
Date
객체를 문자열로 변환하는 알고리즘,
주어진 Date
객체 input,은 다음과 같습니다: 유효한 월 문자열을 반환하여 input이 나타내는 시간의 UTC 시간대에서
현재 월을 나타냅니다.
다음의 공통 input
요소의 내용 속성, IDL 속성 및 메서드가 요소에 적용됩니다:
autocomplete
,
list
,
max
,
min
,
readonly
,
required
,
및
step
내용 속성;
list
,
value
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
select()
,
stepDown()
,
및
stepUp()
메서드.
다음의 내용 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
size
,
src
, 및
width
.
다음의 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
및
selectionDirection
IDL 속성;
setRangeText()
,
및
setSelectionRange()
메서드.
type=week
)input
요소의 type
속성이 Week 상태에 있을 때, 이 섹션의
규칙이 적용됩니다.
input
요소는 특정 주를 나타내는 문자열로 요소의 값을 설정하는 컨트롤을 나타냅니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 주를 변경할 수 있도록 허용해야 합니다. 이 주는 값에서 주를 분석하여 얻은 것입니다. 사용자 에이전트는 사용자가 값을 유효한 주 문자열이 아닌 비어 있지 않은 문자열로 설정하는 것을 허용해서는 안 됩니다. 사용자 에이전트가 주를 선택할 수 있는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 나타내는 유효한 주 문자열로 설정되어야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정할 수 있도록 허용해야 합니다.
제약 조건 검증: 사용자 인터페이스가 사용자가 유효한 주 문자열로 변환할 수 없는 입력을 설명하는 경우, 제어는 잘못된 입력으로 인한 문제를 겪고 있습니다.
날짜, 시간 및 숫자 양식 제어의 입력 형식과 제출 형식의 차이에 대한 논의는 소개 섹션을 참조하고, 양식 제어의 현지화에 대한 구현 노트를 참조하십시오.
값
속성은 지정되어 있고 비어 있지 않은
경우, 유효한 주 문자열이어야 합니다.
값 세척 알고리즘은 다음과 같습니다: 요소의 값이 유효한 주 문자열이 아닌 경우, 빈 문자열로 설정합니다.
최소
속성은 지정된 경우 유효한 주 문자열이어야 합니다. 최대
속성은 지정된 경우 유효한 주 문자열이어야 합니다.
단계
속성은 주 단위로 표현됩니다. 단계 스케일 계수는
604,800,000 (이는 주를 밀리초로 변환하며, 다른 알고리즘에서 사용됩니다)입니다. 기본 단계는 1주입니다. 기본 단계
기준는 −259,200,000 (1970-W01 주의 시작)입니다.
요소가 단계 불일치 문제를 겪는 경우, 사용자 에이전트는 요소의 값을 가장 가까운 주로 반올림할 수 있습니다. 이 주는 요소가 단계 불일치 문제를 겪지 않는 주입니다.
문자열을 숫자로 변환하는 알고리즘은 다음과 같습니다:
주 문자열을 분석하여
input에서 오류가 발생하면 오류를 반환하고, 그렇지 않으면 1970-01-01 자정 UTC (값 "1970-01-01T00:00:00.0Z
"가 표시하는
시간)부터 파싱된 주의 월요일 자정 UTC까지의 경과 밀리초 수를 반환합니다.
윤초는 무시됩니다.
숫자를 문자열로 변환하는 알고리즘는 주어진 숫자
input에 대해 다음과 같습니다: 유효한 주 문자열를 반환하여, UTC에서 input 밀리초가 1970-01-01
자정 UTC 이후의 시간 (값 "1970-01-01T00:00:00.0Z
")을 나타내는 주를 표시합니다.
문자열을
Date
객체로 변환하는 알고리즘는 주어진 문자열 input에 대해 다음과 같습니다: 주를 분석하여 input에서
오류가 발생하면 오류를 반환하고, 그렇지 않으면 새로운
Date
객체를 반환하여 파싱된 주의
월요일 자정 UTC를 나타냅니다.
Date
객체를 문자열로 변환하는 알고리즘는 주어진 Date
객체 input에 대해 다음과 같습니다: 유효한 주 문자열를 반환하여, input이 표시하는 시간의 UTC 시간대에서
현재의 주를 나타냅니다.
다음의 공통 input
요소
콘텐츠 속성, IDL 속성 및 적용되는
메서드는 다음과 같습니다:
autocomplete
,
list
,
max
,
min
,
readonly
,
required
,
및 step
콘텐츠 속성;
list
,
value
,
valueAsDate
,
및 valueAsNumber
IDL 속성;
select()
,
stepDown()
,
및 stepUp()
메서드.
다음의 콘텐츠 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
size
,
src
, 및
width
.
다음의 IDL 속성과 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
및 selectionDirection
IDL 속성;
setRangeText()
,
및 setSelectionRange()
메서드.
type=time
)모든 현재 엔진에서 지원합니다.
입력 input
요소의
type
속성이
시간 상태에 있을 때,
이 섹션의 규칙이 적용됩니다.
input
요소는 다음의 제어를 나타냅니다
요소의
값을
특정 시간을 나타내는 문자열로 설정합니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 시간을 변경할 수 있도록 해야 합니다. 이 값에서 시간을 분석하여 얻은 값입니다. 사용자 에이전트는 사용자가 값을 유효한 시간 문자열이 아닌 비어 있지 않은 문자열로 설정하는 것을 허용해서는 안 됩니다. 사용자 에이전트가 시간을 선택하는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 나타내는 유효한 시간 문자열로 설정되어야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정할 수 있도록 해야 합니다.
제약 조건 유효성 검사: 사용자 인터페이스가 사용자가 유효한 시간 문자열로 변환할 수 없는 입력을 설명할 때, 해당 제어는 잘못된 입력으로 인한 문제를 겪고 있습니다.
날짜, 시간 및 숫자 폼 컨트롤의 입력 형식과 제출 형식의 차이점, 그리고 폼 컨트롤의 지역화에 대한 논의는 소개 섹션을 참조하십시오.
값
속성은
지정되어 있고 비어 있지 않은 경우,
유효한 시간 문자열이어야 합니다.
값 정리 알고리즘은 다음과 같습니다: 요소의 값이 유효한 시간 문자열이 아닌 경우, 빈 문자열로 설정합니다.
폼 컨트롤은 주기적인 도메인을 가집니다.
min
속성은
지정된 경우, 유효한 시간 문자열이어야 합니다. max
속성도
지정된 경우, 유효한 시간 문자열이어야 합니다.
step
속성은 초 단위로 표현됩니다. 스텝 스케일 계수는 1000 (이는
초를 밀리초로 변환하며, 다른 알고리즘에서 사용됨)입니다. 기본 스텝은 60초입니다.
요소가 스텝 불일치로 인한 문제를 겪는 경우, 사용자 에이전트는 요소의 값을 가장 가까운 시간으로 반올림할 수 있습니다. 이 시간은 요소가 스텝 불일치로 인한 문제를 겪지 않는 시간입니다.
문자열을 숫자로 변환하는 알고리즘, 주어진 문자열 input은 다음과 같습니다: 시간을 분석하여 input에서 시간 변환을 시도하고, 에러가 발생하면 에러를 반환합니다. 그렇지 않으면, 시간의 자정부터 경과된 밀리초 수를 반환합니다.
숫자를 문자열로 변환하는 알고리즘, 주어진 숫자 input은 다음과 같습니다: 자정 이후 input 밀리초를 나타내는 유효한 시간 문자열을 반환합니다.
문자열을
Date
객체로 변환하는 알고리즘, 주어진 문자열 input은 다음과 같습니다: 시간을 분석하여
input에서 시간 변환을 시도하고, 에러가 발생하면 에러를 반환합니다. 그렇지 않으면, 새로운 Date
객체를 반환하여 1970-01-01 UTC에서 파싱된 시간을 나타냅니다.
Date
객체를 문자열로 변환하는 알고리즘, 주어진 Date
객체 input은 다음과 같습니다: 유효한 시간 문자열을 반환하여 input이 나타내는 UTC 시간 구성 요소를 나타냅니다.
다음은 일반적인 입력
요소의 콘텐츠 속성, IDL 속성 및
적용되는 메소드:
autocomplete
,
list
,
max
,
min
,
readonly
,
required
,
및
step
콘텐츠
속성;
list
,
value
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
select()
,
stepDown()
,
및
stepUp()
메소드.
다음 콘텐츠 속성은 지정되지 않아야 하며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
size
,
src
, 및
width
.
다음 IDL 속성 및 메소드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
및
selectionDirection
IDL 속성;
setRangeText()
,
및
setSelectionRange()
메소드.
type=datetime-local
)모든 현재 엔진에서 지원됩니다.
입력 input
요소의 type
속성이
로컬
날짜 및 시간 상태일 때, 이 섹션의 규칙이 적용됩니다.
input
요소는 제시합니다
사용자가 요소의 값
을 로컬
날짜 및 시간을 나타내는 문자열로 설정할 수 있는
컨트롤을 나타냅니다. 시간대 오프셋 정보는 포함되지 않습니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 날짜 및 시간 을 값 을 통해 변경할 수 있도록 해야 합니다. 이 값은 날짜 및 시간 을 분석하여 얻은 값입니다. 사용자 에이전트는 사용자가 값 을 유효하지 않은 유효한 표준화된 로컬 날짜 및 시간 문자열 로 설정하는 것을 허용해서는 안 됩니다. 사용자 에이전트가 로컬 날짜 및 시간 을 선택할 수 있는 사용자 인터페이스를 제공하는 경우, 값 은 사용자의 선택을 나타내는 유효한 표준화된 로컬 날짜 및 시간 문자열로 설정해야 합니다. 사용자 에이전트는 사용자가 값 을 빈 문자열로 설정하는 것을 허용해야 합니다.
제약 조건 검증: 사용자 인터페이스가 사용자 에이전트가 유효한 표준화된 로컬 날짜 및 시간 문자열로 변환할 수 없는 입력을 설명하는 경우, 해당 컨트롤은 잘못된 입력으로 인해 문제가 발생하고 있습니다.
날짜, 시간 및 숫자 양식 컨트롤의 입력 형식과 제출 형식의 차이에 대한 논의는 소개 섹션을 참조하십시오. 또한, 구현 노트를 참조하여 양식 컨트롤의 지역화에 대해 확인하십시오.
value
속성이 지정되어 있고 비어 있지 않다면, 유효한 로컬 날짜 및 시간 문자열
값을 가져야 합니다.
값 정화 알고리즘은 다음과 같습니다: 요소의 값이 유효한 로컬 날짜 및 시간 문자열 이면, 이를 같은 날짜와 시간을 나타내는 유효한 표준화된 로컬 날짜 및 시간 문자열 로 설정합니다. 그렇지 않으면 빈 문자열로 설정합니다.
min
속성이 지정된 경우, 유효한 로컬 날짜 및 시간
문자열
값을 가져야 합니다. max
속성이 지정된 경우, 유효한 로컬 날짜 및 시간
문자열
값을 가져야 합니다.
step
속성은 초 단위로 표현됩니다. 스텝 스케일 계수
는 1000 (초를 밀리초로 변환, 다른 알고리즘에서 사용됨)입니다. 기본 스텝은 60초입니다.
요소가 스텝 불일치로 인한 문제를 겪는 경우, 사용자 에이전트는 요소의 값을 로컬 날짜 및 시간 중 가장 가까운 값으로 반올림할 수 있습니다. 이 값은 스텝 불일치 문제를 겪지 않는 값입니다.
문자열을 숫자로 변환하는
알고리즘, 주어진 문자열 input은 다음과 같습니다: 날짜 및 시간 분석가
input에서 오류를 발생시키면, 오류를 반환합니다. 그렇지 않으면 1970-01-01 자정 이후 경과된 밀리초 수를 반환합니다. (값
"1970-01-01T00:00:00.0
"으로 표현된 시간) 분석된 로컬 날짜 및 시간을 나타내며, 윤초는
무시합니다.
숫자를 문자열로 변환하는 알고리즘, 주어진 숫자 input은 다음과 같습니다: 1970-01-01 자정 이후 input 밀리초 후의 날짜와 시간을 나타내는 유효한 표준화된 로컬 날짜 및 시간 문자열을 반환합니다.
역사적 날짜에 대한 주의 사항을 날짜 상태 섹션에서 확인하십시오.
다음의 공통 input
요소 내용 속성, IDL 속성 및 메서드는 적용됩니다:
autocomplete
,
list
,
max
,
min
,
readonly
,
required
,
그리고
step
내용 속성;
list
,
value
,
및
valueAsNumber
IDL 속성;
select()
,
stepDown()
,
및
stepUp()
메서드.
다음의 내용 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
size
,
src
,
및
width
.
다음의 IDL 속성과 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
selectionDirection
,
및
valueAsDate
IDL 속성;
setRangeText()
,
및
setSelectionRange()
메서드.
다음 예제는 비행기 예약 애플리케이션의 일부를 보여줍니다. 이 애플리케이션은 input
요소를 사용하며, type
속성은 datetime-local
로
설정되어 있습니다.
그런 다음 선택된 공항의 시간대에서 주어진 날짜와 시간을 해석합니다.
< fieldset >
< legend > 목적지</ legend >
< p >< label > 공항: < input type = text name = to list = airports ></ label ></ p >
< p >< label > 출발 시간: < input type = datetime-local name = totime step = 3600 ></ label ></ p >
</ fieldset >
< datalist id = airports >
< option value = ATL label = "Atlanta" >
< option value = MEM label = "Memphis" >
< option value = LHR label = "London Heathrow" >
< option value = LAX label = "Los Angeles" >
< option value = FRA label = "Frankfurt" >
</ datalist >
type=number
)모든 현재 엔진에서 지원됩니다.
input
요소의 type
속성이 숫자
상태에 있을 때, 이 섹션의 규칙이 적용됩니다.
input
요소는
제어 요소의
값을 숫자를 나타내는 문자열로 설정합니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 값을 변경할 수 있도록 허용해야 하며, 이를 부동 소수점 숫자 값 파싱 규칙에 적용하여 얻은 값으로 설정해야 합니다. 사용자 에이전트는 사용자가 값을 유효한 부동 소수점 숫자가 아닌 비어 있지 않은 문자열로 설정하는 것을 허용하지 말아야 합니다. 사용자 에이전트가 숫자를 선택할 수 있는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 부동 소수점 숫자로 가장 잘 표현한 값으로 설정되어야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정할 수 있도록 해야 합니다.
제약 검증: 사용자 인터페이스가 사용자 에이전트가 유효한 부동 소수점 숫자로 변환할 수 없는 입력을 설명하는 경우, 제어 요소는 잘못된 입력으로 고통받고 있음으로 간주됩니다.
이 사양은 사용자 에이전트가 사용할 사용자 인터페이스를 정의하지 않습니다; 사용자 에이전트 공급자는 사용자 요구를 가장 잘 충족하는 것을 고려해야 합니다. 예를 들어, 페르시아어나 아랍어 시장을 위한 사용자 에이전트는 페르시아어 및 아랍어 숫자 입력을 지원할 수 있으며(위에서 설명한 제출 형식으로 변환됨). 로마인을 위한 사용자 에이전트는 값을 십진수가 아닌 로마 숫자로 표시할 수 있으며, 또는(더 현실적으로) 프랑스 시장을 위한 사용자 에이전트는 값을 천 단위에 아포스트로피를 넣고 소수점 앞에 쉼표를 표시하며 사용자가 이러한 방식으로 값을 입력할 수 있도록 허용할 수 있습니다. 이렇게 입력된 값은 위에서 설명한 제출 형식으로 내부 변환됩니다.
값
속성은 지정되어 있고 비어 있지 않은 경우,
유효한 부동 소수점
숫자여야 합니다.
값 정리 알고리즘은 다음과 같습니다: 요소의 값이 유효한 부동 소수점 숫자가 아닌 경우, 빈 문자열로 설정합니다.
최소값
속성은 지정된 경우,
유효한 부동 소수점
숫자여야 합니다. 최대값
속성은 지정된 경우,
유효한 부동 소수점
숫자여야 합니다.
단계 스케일 계수는 1입니다. 기본 단계는 1(사용자가 정수만 선택할 수 있도록 허용하며, 단계 기반가 비정수인 경우 제외)
요소가 단계 불일치로 고통받고 있는 경우, 사용자 에이전트는 요소의 값을 가장 가까운 숫자로 반올림할 수 있습니다. 요소가 단계 불일치로 고통받고 있는 경우가 아닌 숫자에 가장 가까운 숫자를 선택하는 것이 좋습니다. 두 숫자가 있는 경우, 사용자 에이전트는 양의 무한대에 가장 가까운 숫자를 선택하는 것이 좋습니다.
문자열을 숫자로 변환하는 알고리즘는 다음과 같습니다: 문자열 input에 부동 소수점 숫자 값 파싱 규칙을 적용하여 오류가 발생하면 오류를 반환하고, 그렇지 않으면 결과 숫자를 반환합니다.
숫자를 문자열로 변환하는 알고리즘는 다음과 같습니다: input을 나타내는 유효한 부동 소수점 숫자를 반환합니다.
다음의 일반적인 input
요소
콘텐츠 속성, IDL 속성 및
메서드 적용
요소에:
autocomplete
,
list
,
max
,
min
,
placeholder
,
readonly
,
required
,
그리고
step
콘텐츠
속성;
list
,
value
, 및
valueAsNumber
IDL 속성;
select()
,
stepDown()
,
및
stepUp()
메서드.
다음 콘텐츠 속성은 지정되어서는 안 되며 적용되지 않습니다 요소에:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
popovertarget
,
popovertargetaction
,
size
,
src
, 및
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다 요소에:
checked
,
files
,
selectionStart
,
selectionEnd
,
selectionDirection
,
및
valueAsDate
IDL 속성;
setRangeText()
,
및
setSelectionRange()
메서드.
다음은 숫자 입력 컨트롤을 사용하는 예제입니다:
< label > 얼마를 청구하시겠습니까? $< input type = number min = 0 step = 0.01 name = price ></ label >
위에서 설명한 바와 같이, 사용자 에이전트는 사용자의 지역 형식에 맞게 숫자 입력을 지원할 수 있으며, 이를 제출에 필요한 형식으로 변환할 수 있습니다. 여기에는 그룹 구분 기호("872,000,000,000")와 다양한 소수 구분 기호("3,99" vs "3.99")를 처리하거나 아라비아 숫자, 데바나가리 숫자, 페르시아 숫자 및 태국 숫자와 같은 지역 숫자를 사용하는 것이 포함될 수 있습니다.
type=number
상태는 숫자로만 이루어져 있지만 엄밀히 말해 숫자가 아닌 입력에는 적합하지
않습니다. 예를 들어, 신용 카드 번호나 미국 우편 번호에는 부적합합니다. type=number
를 사용할지 여부를 결정하는 간단한 방법은 입력 컨트롤이 스핀박스 인터페이스(예:
"위" 및 "아래" 화살표)가 있는 것이 적절한지 고려하는 것입니다. 마지막 숫자에서 1이 잘못된 신용 카드 번호는 사소한 실수가 아니라 모든 숫자가 잘못된 것만큼이나 잘못된 것입니다. 따라서 사용자가
신용 카드 번호를 "위" 및 "아래" 버튼을 사용하여 선택하는 것은 의미가 없습니다. 스핀박스 인터페이스가 적합하지 않은 경우, type=text
가 적절한 선택일 수 있습니다
(가능한 경우 inputmode
또는
pattern
속성).
type=range
)모든 현재 엔진에서 지원됩니다.
input
요소의 type
속성이
범위
상태일 때,
이 섹션의 규칙이 적용됩니다.
input
요소는
제어로써 요소의
값을 문자열로 설정하며,
숫자를 나타내지만,
정확한 값은 중요하지 않으며, 사용자 에이전트는 숫자 상태보다 간단한 인터페이스를 제공할 수 있습니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 값을 변경할 수 있도록 해야 하며, 이는 부동 소수점 숫자 값의 파싱 규칙을 적용하여 얻은 것입니다. 사용자 에이전트는 사용자가 값을 유효한 부동 소수점 숫자가 아닌 문자열로 설정하도록 허용해서는 안 됩니다. 사용자 에이전트가 숫자를 선택하는 사용자 인터페이스를 제공하는 경우, 값은 사용자의 선택을 나타내는 부동 소수점 숫자로서의 최상의 표현으로 설정되어야 합니다. 사용자 에이전트는 사용자가 값을 빈 문자열로 설정하는 것을 허용해서는 안 됩니다.
제약 조건 검증: 사용자 인터페이스가 사용자 에이전트가 유효한 부동 소수점 숫자로 변환할 수 없는 입력을 설명하는 경우, 제어는 잘못된 입력에 시달리고 있습니다.
값
속성이 지정된 경우, 그 값은 유효한 부동 소수점 숫자여야 합니다.
값 정제 알고리즘은 다음과 같습니다: 요소의 값이 유효한 부동 소수점 숫자가 아닌 경우, 요소의 값을 최상의 표현, 부동 소수점 숫자로서으로 설정합니다. 이는 기본값입니다.
기본값은 최소값과 최소값과 최대값의 차이의 절반을 더한 값입니다. 단, 최대값이 최소값보다 작으면 기본값은 최소값입니다.
요소가 언더플로우에 시달리고 있을 때, 사용자 에이전트는 요소의 값을 최상의 표현, 부동 소수점 숫자로서으로 설정해야 합니다. 이는 최소값입니다.
요소가 오버플로우에 시달리고 있을 때, 최대값이 최소값보다 작지 않으면, 사용자 에이전트는 요소의 값을 유효한 부동 소수점 숫자로 설정하여 최대값을 나타냅니다.
요소가 단계 불일치를 겪고 있을 때, 사용자 에이전트는 요소의 값을 다음의 두 조건을 만족하는 가장 가까운 숫자로 반올림해야 합니다: 1) 요소가 단계 불일치를 겪지 않고, 2) 최소값보다 크거나 같으며, 최대값이 최소값보다 작지 않다면 최대값보다 작거나 같은 숫자여야 합니다. 두 숫자가 이러한 제약 조건을 모두 만족하는 경우, 사용자 에이전트는 양의 무한대에 가장 가까운 숫자를 사용해야 합니다.
예를 들어, 다음과 같은 마크업
<input type="range" min=0 max=100 step=20 value=50>
결과로 초기 값이 60인 범위 제어가 생성됩니다.
다음은 list
속성을 사용하는 자동
완성 목록의 범위 제어 예입니다. 이 제어는 전체 범위의 값 중 특히 중요한 값이 있는 경우 유용할 수 있습니다. 예를 들어, 미리 설정된 조명 수준이나 속도 제어로 사용되는 범위 제어의
전형적인 제한 속도 등이 있을 수 있습니다. 다음 마크업 조각:
< input type = "range" min = "-100" max = "100" value = "0" step = "10" name = "power" list = "powers" >
< datalist id = "powers" >
< option value = "0" >
< option value = "-30" >
< option value = "30" >
< option value = "++50" >
</ datalist >
...다음 스타일 시트가 적용된 경우:
input { writing-mode : vertical-lr; height : 75 px ; width : 49 px ; background : #D5CCBB; color : black; }
...다음과 같이 렌더링될 수 있습니다:
사용자 에이전트가 스타일 시트에서 지정된 높이와 너비 속성의 비율을 통해 제어의 방향을 결정한 방식에 유의하십시오. 색상도 스타일 시트에서 유래되었습니다. 그러나 눈금은 마크업에서 유래되었습니다.
특히, step
속성이 눈금의 배치에
영향을 미치지 않았으며, 사용자 에이전트는 작성자가 지정한 완료 값만 사용하고 극단적인 값에 긴 눈금을 추가하기로 결정했습니다.
또한, 잘못된 값 ++50
이 무시된 것을 주목하십시오.
다른 예제로, 다음 마크업 조각을 고려해보십시오:
< input name = x type = range min = 100 max = 700 step = 9.09090909 value = 509.090909 >
사용자 에이전트는 다양한 방식으로 표시할 수 있습니다. 예를 들어:
또는, 다른 예로:
사용자 에이전트는 스타일 시트에서 제공된 치수를 기반으로 어떤 것을 표시할지 선택할 수 있습니다. 이렇게 하면 너비가 달라도 눈금의 해상도를 동일하게 유지할 수 있습니다.
마지막으로, 두 개의 레이블이 있는 범위 제어의 예를 소개합니다:
< input type = "range" name = "a" list = "a-values" >
< datalist id = "a-values" >
< option value = "10" label = "Low" >
< option value = "90" label = "High" >
</ datalist >
제어가 수직으로 그려지도록 하는 스타일을 적용하면, 다음과 같이 보일 수 있습니다:
이 상태에서는 범위 및 단계 제약이 사용자 입력 중에도 적용되며, 값이 빈 문자열로 설정될 수 없습니다.
min
속성은 지정된 경우, 유효한 부동 소수점
숫자 값을 가져야 합니다. 기본 최소값은 0입니다. max
속성은 지정된 경우, 유효한 부동 소수점
숫자 값을 가져야 합니다. 기본 최대값은 100입니다.
단계 스케일 팩터는 1입니다. 기본 단계는 1입니다
(정수만 허용됩니다. 단, min
속성이
정수가 아닌 값을 가지는 경우를 제외합니다).
문자열을 숫자로 변환하는 알고리즘, 주어진 문자열 input,은 다음과 같습니다: 부동 소수점 숫자 값 구문 분석 규칙을 input에 적용하여 오류가 발생하면 오류를 반환하고, 그렇지 않으면 결과 숫자를 반환합니다.
숫자를 문자열로 변환하는 알고리즘, 주어진 숫자 input,은 다음과 같습니다: input의 부동 소수점 숫자로서의 최적 표현을 반환합니다.
다음은 공통 input
요소의 내용 속성, IDL 속성 및
메서드 적용됩니다:
autocomplete
,
list
,
max
,
min
, 및
step
내용
속성;
list
,
value
, 및
valueAsNumber
IDL 속성;
stepDown()
및
stepUp()
메서드.
다음 내용 속성은 지정해서는 안 되며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
readonly
,
required
,
size
,
src
, 및
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
selectionDirection
,
및
valueAsDate
IDL 속성;
select()
,
setRangeText()
,
및
setSelectionRange()
메서드.
type=color
)모든 현재 엔진에서 지원됩니다.
입력 요소의 input
요소의 type
속성이
색상 상태(Color)
일 때, 이 섹션의 규칙이 적용됩니다.
입력 요소는 색상 팔레트 컨트롤을 나타내며, 요소의 value를 문자열로 설정하여 간단한 색상을 나타냅니다.
이 상태에서는 항상 색상이 선택되어 있으며, 값을 빈 문자열로 설정할 수 없습니다.
요소가 mutable인 경우, 사용자 에이전트는 사용자에게 색상을 변경할 수 있도록 허용해야 합니다. 색상은 value 속성을 통해 간단한 색상 값 구문 분석 규칙 을 적용하여 얻은 값이어야 합니다. 사용자 에이전트는 사용자가 value를 유효한 소문자 간단한 색상으로 설정할 수 있도록 해야 하며, 색상 선택기 사용자 인터페이스를 제공하는 경우, value는 사용자의 선택에 대한 간단한 색상 값 직렬화 규칙 을 적용한 결과로 설정되어야 합니다. 사용자 에이전트는 사용자가 value를 빈 문자열로 설정할 수 없도록 해야 합니다.
이러한 요소의 입력 활성화 동작은 가능한 경우 선택기 표시입니다.
제약 조건 검증: 사용자 인터페이스가 사용자가 유효한 소문자 간단한 색상으로 변환할 수 없는 입력을 설명할 때, 컨트롤은 잘못된 입력을 겪고 있음으로 간주됩니다.
속성 value
는
지정되어 있고 비어 있지 않다면,
유효한 간단한 색상이어야 합니다.
값 정리
알고리즘은 다음과 같습니다: 요소의 value가 유효한 간단한 색상인 경우,
그것을 ASCII 소문자로
변환된
값으로 설정합니다. 그렇지 않으면, "#000000
" 문자열로 설정합니다.
다음은 일반적인 input
요소의 콘텐츠 속성 및 IDL 속성으로, 요소에 적용됩니다:
autocomplete
및
list
콘텐츠
속성;
list
및
value
IDL
속성;
select()
메서드.
다음 콘텐츠 속성은 지정되어서는 안 되며 적용되지 않습니다:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
readonly
,
required
,
size
,
src
,
step
, 및
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
checked
,
files
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
및,
valueAsNumber
IDL 속성;
setRangeText()
,
setSelectionRange()
,
stepDown()
,
및
stepUp()
메서드.
type=checkbox
)현재 모든 엔진에서 지원됩니다.
input
요소의 type
속성이
체크박스 상태일 때, 이
섹션의 규칙이
적용됩니다.
input
요소는 대표하는 두 가지 상태의
컨트롤로
요소의 체크됨
상태를 나타냅니다. 요소의 체크됨 상태가
true이면, 컨트롤은
긍정적인 선택을 나타내며, false이면 부정적인 선택을 나타냅니다. 요소의 indeterminate
IDL 속성이 true로 설정되면, 컨트롤의 선택은 세 번째의 불확정 상태에 있는 것처럼 모호해야 합니다.
컨트롤은 요소의 indeterminate
IDL 속성이 true로 설정되더라도 진정한 삼 상태 컨트롤이 아닙니다. indeterminate
IDL 속성은 단지 세 번째 상태의 모양만 제공합니다.
입력 활성화 동작은 다음 단계들을 실행합니다:
요소가 연결되지 않은 경우, 반환합니다.
제약 조건 검증: 요소가 필수 이고, 체크됨 상태가 false이면, 요소는 누락된 상태입니다.
input.indeterminate [ = value ]
설정 시, 체크박스 컨트롤의 렌더링을 무시하여 현재 값이 보이지 않도록 합니다.
다음 공통 input
요소의 콘텐츠 속성과 IDL 속성 적용됩니다:
checked
,
그리고
required
콘텐츠 속성;
checked
및
value
IDL
속성.
다음 콘텐츠 속성은 지정되어서는 안 되며 적용되지 않습니다:
accept
,
alt
,
autocomplete
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
readonly
,
size
,
src
,
step
,
그리고
width
.
다음 IDL 속성과 메서드는 적용되지 않습니다:
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
그리고
valueAsNumber
IDL 속성;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
그리고
stepUp()
메서드.
type=radio
)모든 현재 엔진에서 지원됩니다.
만약 input
요소의 type
속성이
라디오 버튼 상태에 있을 때, 이
섹션의 규칙이 적용됩니다.
다음 input
요소는 대표하는 컨트롤로,
다른 input
요소와 함께 사용될 때, 오직 하나의 컨트롤만이 체크됨 상태를 true로 설정할 수 있는
라디오 버튼 그룹을
형성합니다. 요소의 체크됨 상태가
true일 경우,
이 컨트롤은 그룹 내에서 선택된 컨트롤을 나타내며, false일 경우, 선택되지 않은 그룹 내의
컨트롤을 나타냅니다.
다음 라디오 버튼 그룹에는 input
요소 a와 함께 모든 다른 input
요소 b가 포함됩니다. 이들 요소는 다음 모든 조건을 충족해야 합니다:
input
요소 b의 type
속성이 라디오 버튼 상태에 있습니다.
name
속성을 가지고, name
속성이 비어 있지 않으며, a의 name
속성의 값이 b의 name
속성의 값과 같습니다.
트리에는 input
요소가 포함되어서는 안 되며, 그 라디오
버튼 그룹이
오직 해당 요소만 포함되어야 합니다.
다음 현상 중 어느 것이 발생할 때, 요소의 체크됨 상태가 true로 설정되면, 동일한 라디오 버튼 그룹에 있는 모든 다른 요소의 체크됨 상태는 false로 설정되어야 합니다:
name
속성이 설정되거나, 변경되거나, 제거됩니다.
입력 활성화 동작는 다음 단계를 수행합니다:
요소가 연결되지 않은 경우, 반환합니다.
이벤트를
발생시킵니다
input
라는
이름으로
요소에서, 버블
및 구성됨
속성을 true로 초기화합니다.
이벤트를
발생시킵니다
change
라는 이름으로
요소에서, 버블
속성을 true로 초기화합니다.
제약 검증: 라디오 버튼 그룹에 있는 요소가 필수일 경우,
그리고 input
요소들이 모두 라디오 버튼
그룹에서
체크됨이
false인 경우, 요소는
부재로 인한
문제가 있습니다.
다음 예제는 어떤 이유로 인해, puppers가 필수 및 비활성화됨으로 지정된 경우입니다:
< form >
< p >< label >< input type = "radio" name = "dog-type" value = "pupper" required disabled > Pupper</ label >
< p >< label >< input type = "radio" name = "dog-type" value = "doggo" > Doggo</ label >
< p >< button > Make your choice</ button >
</ form >
사용자가 "Doggo"를 선택하지 않고 이 양식을 제출하려고 하면, 두 개 모두
input
요소는 부재로 인한 문제를 겪게 됩니다,
왜냐하면 라디오 버튼 그룹의
요소가 필수이기
때문입니다 (즉, 첫 번째 요소), 그리고 라디오 버튼 그룹의 모든 요소가 false인 체크됨을 가지고 있기 때문입니다.
반면, 사용자가 "Doggo"를 선택하고 양식을 제출하면, input
요소는 부재로 인한 문제를 겪지 않게 됩니다,
왜냐하면 그 중 하나는 필수이지만, 모든 요소가 false인 체크됨을 가지고 있지 않기
때문입니다.
라디오 버튼 그룹의 어떤 버튼도 체크되지 않으면, 사용자나 스크립트에 의해 체크되기 전까지는 모두 초기 상태에서 체크되지 않은 상태로 유지됩니다.
다음과 같은 일반 input
요소 콘텐츠 속성과 IDL 속성은 적용됩니다:
checked
및
required
콘텐츠 속성;
checked
및
value
IDL
속성.
다음 콘텐츠 속성은 지정되어서는 안 되며 적용되지 않습니다:
accept
,
alt
,
autocomplete
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
popovertarget
,
popovertargetaction
,
readonly
,
size
,
src
,
step
,
및
width
.
다음 IDL 속성 및 메서드는 적용되지 않습니다:
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
및
valueAsNumber
IDL 속성;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
및
stepUp()
메서드.
type=file
)모든 현재 엔진에서 지원됨.
이 input
요소의 type
속성이
파일
업로드 상태에 있을 때, 이
섹션의 규칙이 적용됩니다.
이 input
요소는 선택된 파일들의 목록을
나타냅니다. 각 파일은 파일 이름, 파일 유형, 파일 본문(파일 내용)으로 구성됩니다.
파일 이름은 경로 구성 요소를 포함해서는 안 됩니다, 사용자가 전체 디렉토리 계층 또는 서로 다른 디렉토리에서 동일한 이름을 가진 여러 파일을 선택한 경우에도 마찬가지입니다. 경로 구성 요소는 파일 업로드 상태의 목적으로, 파일 이름의 U+005C 역슬래시 문자 (\)로 구분된 부분들입니다.
이 multiple
속성이 설정되지 않은 경우, 선택된 파일들 목록에 파일이
하나만 있어야 합니다.
이러한 요소의 입력 활성화 동작은 파일 선택기를 표시하다, 해당되는 경우 입니다.
요소가 변경 가능한 경우, 사용자 에이전트는 사용자가 드래그 앤 드롭으로 파일을 추가하거나 제거하는 등의 방법으로 파일 목록을 변경할 수 있도록 해야 합니다. 사용자가 이렇게 할 때, 사용자 에이전트는 파일 선택을 업데이트 해야 합니다.
요소가 변경 가능하지 않은 경우, 사용자 에이전트는 사용자가 요소의 선택을 변경할 수 없도록 해야 합니다.
요소 element의 파일 선택 업데이트 방법:
요소 작업 대기열에 추가를 사용자 상호작용 작업 소스 에 대해 element 및 다음 단계:
제약 검증: 요소가 필수 이고 선택된 파일들 목록이 비어 있으면, 요소는 누락으로 인한 문제를 겪고 있습니다.
현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
accept
속성은 사용자 에이전트에 수락할 파일 유형에 대한 힌트를 제공하는 데 사용할 수 있습니다.
지정된 경우, 속성은 쉼표로 구분된 토큰 집합으로 구성되어야 하며, 각 토큰은 다음 항목 중 하나에 대한 ASCII 대소문자 구분 없는 일치 항목이어야 합니다.
audio/*
"
video/*
"
image/*
"
토큰은 다른 토큰의 ASCII 대소문자 구분 없는 일치 항목이 되어서는 안 되며 (즉, 중복이 허용되지 않습니다). 속성에서 토큰 목록을 얻으려면 사용자 에이전트는 속성 값을 쉼표로 분리해야 합니다.
사용자 에이전트는 이 속성의 값을 사용하여 일반 파일 선택기보다 더 적절한 사용자 인터페이스를 표시할 수 있습니다. 예를 들어, 값이 image/*
인 경우, 사용자 에이전트는
사용자가 로컬 카메라를 사용하거나 사진 컬렉션에서 사진을 선택할 수 있는 옵션을 제공할 수 있습니다; 값이 audio/*
인 경우, 사용자 에이전트는 사용자가 헤드셋 마이크를
사용하여 클립을 녹음할 수 있는 옵션을 제공할 수 있습니다.
사용자 에이전트는 이러한 토큰 중 하나(또는 여러 개)에 의해 허용되지 않는 파일을 사용자가 선택하는 것을 방지해야 합니다.
작성자는 특정 형식의 데이터를 찾을 때 MIME 유형과 해당 확장자를 모두 지정할 것을 권장합니다.
예를 들어, Microsoft Word 문서를 Open Document Format 파일로 변환하는 애플리케이션을 고려해 보십시오. Microsoft Word 문서는 다양한 MIME 유형과 확장자로 설명되므로, 사이트는 여러 개를 나열할 수 있습니다:
< input type = "file" accept = ".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" >
파일 유형을 설명하는 데 파일 확장자만 사용하는 플랫폼에서는 여기 나열된 확장자를 사용하여 허용된 문서를 필터링할 수 있으며, MIME 유형은 시스템의 유형 등록 테이블(시스템에서 사용하는 MIME 유형을 확장자에 매핑)과 함께 사용하여 허용할 다른 확장자를 결정할 수 있습니다. 유사하게, 파일 이름이나 확장자가 없고 문서를 내부적으로 MIME 유형으로 레이블을 지정하는 시스템에서는 MIME 유형을 사용하여 허용된 파일을 선택할 수 있으며, 시스템이 알려진 확장자를 MIME 유형에 매핑하는 확장자 등록 테이블을 가진 경우 확장자를 사용할 수 있습니다.
확장자는 모호할 수 있습니다 (예: ".dat
" 확장자를 사용하는 형식이 무수히 많으며, 사용자는 일반적으로 Microsoft Word 문서가 아니더라도
파일 이름을 ".doc
" 확장자로 쉽게 변경할 수 있습니다), MIME 유형은 신뢰할 수 없을 수 있습니다 (예: 많은 형식이 공식적으로 등록된 유형이 없으며, 많은 형식이
실제로는 여러 MIME 유형으로 레이블이 붙습니다). 작성자는 일반적으로 클라이언트로부터 받은 데이터는 예상된 형식이 아닐 수 있으므로 주의해서 처리해야 한다는 점을 상기해야 합니다. 이는 사용자가
적대적이지 않고 사용자 에이전트가 accept
속성의 요구 사항을
완전히 준수했더라도 마찬가지입니다.
역사적인 이유로, value
IDL 속성은 파일 이름 앞에 문자열 "C:\fakepath\
"를 붙입니다. 일부 레거시 사용자 에이전트는 실제 전체 경로를 포함하기도 했습니다 (이는 보안
취약점이었습니다). 이로 인해 value
IDL 속성에서
파일 이름을 하위 호환 방식으로 얻는 것은 간단하지 않습니다. 다음 함수는 적절히 호환 가능한 방식으로 파일 이름을 추출합니다:
function extractFilename( path) {
if ( path. substr( 0 , 12 ) == "C:\\fakepath\\" )
return path. substr( 12 ); // 최신 브라우저
var x;
x = path. lastIndexOf( '/' );
if ( x >= 0 ) // 유닉스 기반 경로
return path. substr( x+ 1 );
x = path. lastIndexOf( '\\' );
if ( x >= 0 ) // 윈도우 기반 경로
return path. substr( x+ 1 );
return path; // 파일 이름만
}
다음과 같이 사용할 수 있습니다:
< p >< input type = file name = image onchange = "updateFilename(this.value)" ></ p >
< p > 선택한 파일의 이름은: < span id = "filename" > (없음)</ span ></ p >
< script >
function updateFilename( path) {
var name = extractFilename( path);
document. getElementById( 'filename' ). textContent = name;
}
</ script >
다음과 같은 일반적인 input
요소의 내용 속성과 IDL 속성은 적용됩니다:
accept
,
multiple
,
그리고
required
내용 속성;
files
그리고
value
IDL
속성;
select()
메서드.
value
IDL 속성은 filename 모드에 있습니다.
다음과 같은 내용 속성은 지정할 수 없으며 적용되지 않습니다:
alt
,
autocomplete
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
pattern
,
popovertarget
,
popovertargetaction
,
placeholder
,
readonly
,
size
,
src
,
step
,
그리고
width
.
요소의 value
속성은 생략해야 합니다.
다음 IDL 속성과 메서드는 적용되지 않습니다:
checked
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
그리고
valueAsNumber
IDL 속성;
setRangeText()
,
setSelectionRange()
,
stepDown()
,
그리고
stepUp()
메서드.
type=submit
)현재 모든 엔진에서 지원됨.
만약 input
요소의
type
속성이 제출 버튼 상태에 있다면, 이 섹션의 규칙이 적용됩니다.
input
요소는
버튼을 나타내며, 활성화되면 양식을 제출합니다. 요소에 value
속성이 있으면
버튼의 레이블은 그 속성의 값이어야 하고, 그렇지 않으면 구현 정의
문자열이 "제출" 또는 유사한 의미여야 합니다. 요소는 버튼, 구체적으로는 제출 버튼입니다.
기본 레이블이 구현 정의이므로 버튼의 너비는 일반적으로 버튼의 레이블에 따라 다릅니다. 따라서 버튼의 너비는 몇 비트의 지문 정보가 누출될 수 있습니다. 이 정보는 사용자 에이전트 및 사용자의 지역 설정과 강하게 연관될 가능성이 높습니다.
요소의 입력 활성화 동작는 다음과 같습니다:
요소에 폼 소유자가 없는 경우, 반환합니다.
제출 요소의 폼 소유자를 요소에서 userInvolvement를 event의 사용자 탐색 개입으로 설정하여 제출합니다.
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
및 formtarget
속성은 양식 제출을 위한 속성입니다.
formnovalidate
속성은 제약 조건 검증을 트리거하지 않는 제출 버튼을 만드는 데 사용할 수 있습니다.
다음은 공통 input
요소의 내용 속성과 IDL 속성이 적용되는 항목입니다:
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
popovertarget
,
그리고 popovertargetaction
내용 속성;
value
IDL
속성.
다음 내용 속성은 지정할 수 없으며 적용되지 않습니다:
accept
,
alt
,
autocomplete
,
checked
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
,
src
,
step
,
그리고 width
.
다음 IDL 속성과 메서드는 적용되지 않습니다:
checked
,
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
그리고 valueAsNumber
IDL 속성;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
그리고 stepUp()
메서드.
type=image
)모든 현재 엔진에서 지원됩니다.
만약 input
요소의
type
속성이 이미지 버튼 상태에 있다면, 이 섹션의 규칙이 적용됩니다.
input
요소는
사용자가 좌표를 선택하여 폼을 제출할 수 있는 이미지이거나, 폼을 제출하는 버튼을 나타냅니다. 이 요소는 버튼이며, 특히 제출 버튼입니다.
좌표는 폼 제출 중에 요소의 이름에 ".x
"와
".y
"가 추가된 두 항목을 서버로 전송하여 전달됩니다. 좌표의 x와 y 구성 요소는 각각의 이름에 추가됩니다.
모든 현재 엔진에서 지원됩니다.
이미지는 src
속성에 의해 지정됩니다.
src
속성은 반드시 있어야 하며,
페이지 또는 스크립트되지 않은 상호작용이 없는 비동적(선택적으로 애니메이션된) 이미지 리소스를 참조하는 유효한 비어 있지 않은
URL을 포함해야 합니다.
다음 이벤트가 발생할 때
input
요소의 type
속성이 처음으로 이미지 버튼 상태로 설정되었고, src
속성이 존재할 때
(요소가 처음 생성되었을 때일 수도 있음)input
요소의 type
속성이 이미지 버튼 상태로 변경되었고, src
속성이 존재하며,
type
속성이
이미지 버튼 상태에 있었을 때 이후의 값이 변경되었을 때
input
요소의 type
속성이 이미지 버튼 상태에 있고, src
속성이 설정되었거나
변경되었을 때사용자 에이전트가 이미지를 지원하지 않거나, 이미지 지원이 비활성화된 경우, 또는 사용자 에이전트가 요청 시에만 이미지를 가져오거나, src
속성의 값이 비어있는
문자열일 경우를 제외하고, 다음 단계를 실행합니다:
url을 src
속성의 값을
사용하여 요소의 노드 문서를
기준으로 URL을
인코딩-파싱하여 얻은 결과로 설정합니다.
만약 url이 실패라면, 리턴합니다.
url을 url로, 클라이언트를 요소의 노드 문서의 관련 설정
객체로, 대상을 "image
"로, 시작자 유형을 "input
"로, 자격 증명 모드를 "include
"로 설정하여 URL 자격 증명 플래그를 설정한 새 요청으로 만듭니다.
요청 request를 가져오고, processResponseEndOfBody를 응답 response로 설정한 다음, 다음 단계로 진행합니다:
이미지를 가져오는 작업은 요소의 로드 이벤트를 지연시켜야 하며, 리소스를 가져온 후 (아래에 정의된 대로) 네트워킹 작업 소스에 의해 큐에 추가된 작업이 실행될 때까지 노드 문서의 로드 이벤트를 지연시켜야 합니다.
이미지를 성공적으로 얻었고, 네트워크 오류가 없으며, 이미지 유형이 지원되는 유형이고, 이미지가 해당 유형의 유효한 이미지인 경우, 이미지는 사용 가능한 상태라고 합니다. 이미지가 완전히 다운로드되기 전에 이 상태가 참이라면, 이미지를 가져오는 동안 큐에 추가된 작업은 이미지를 적절히 표시하도록 업데이트해야 합니다.
사용자 에이전트는 이미지의 이미지 스니핑 규칙을 적용하여 이미지 유형을 결정해야 하며, 이미지의 관련 콘텐츠 유형 헤더가 official type을 제공합니다. 이러한 규칙이 적용되지 않는 경우, 이미지의 유형은 이미지의 관련 콘텐츠 유형 헤더에 의해 제공된 유형이어야 합니다.
사용자 에이전트는 input
요소로
비이미지 리소스를 지원해서는 안 됩니다. 사용자 에이전트는 이미지 리소스에 포함된 실행 가능한 코드를 실행해서는 안 됩니다. 사용자 에이전트는 다중 페이지 리소스의 첫 페이지만 표시해야 하며, 리소스의
상호작용을 허용해서는 안 되지만 리소스의 애니메이션은 허용해야 합니다.
모든 현재 엔진에서 지원됩니다.
alt
속성은 이미지를 사용할 수 없는 사용자
및 사용자 에이전트를 위한 버튼의 텍스트 라벨을 제공합니다. alt
속성은 반드시 있어야 하며,
이미지가 없는 경우에 적합한 버튼에 적합한 라벨을 포함해야 합니다.
src
속성이 설정되고, 이미지가
사용 가능하며 사용자
에이전트가 해당 이미지를 표시하도록 구성된 경우, 요소는 제어를
나타내며, 이 제어는 src
속성에 의해 지정된 이미지에서 좌표를 선택할 수 있도록 합니다. 이 경우, 요소가 변경 가능한 상태라면, 사용자 에이전트는 사용자가 이 좌표를 선택할 수 있도록 해야 합니다.
그렇지 않은 경우, 요소는 제출 버튼을 나타내며, 이 버튼의 라벨은
alt
속성의 값에 의해
결정됩니다.
요소의 입력 활성화 동작은 event에 따라 다음과 같습니다:
요소에 폼 소유자가 없다면, 리턴합니다.
사용자가 좌표를 명시적으로 선택하면서 제어를 활성화한 경우, 요소의 선택된 좌표를 해당 좌표로 설정합니다.
이는 위에서 설명한 조건에서만 가능합니다. 요소가 제어를 나타낼 때에만 해당됩니다. 그럼에도 불구하고 사용자는 좌표를 명시적으로 선택하지 않고 제어를 활성화할 수 있습니다.
요소의 선택된 좌표는 x 구성 요소와 y 구성 요소로 이루어져 있습니다. 초기값은 (0, 0)입니다. 좌표는 요소의 이미지의 가장자리를 기준으로 하며, 좌표 공간의 x 방향은 오른쪽으로, y 방향은 아래로 향합니다.
x 구성 요소는 유효한 정수여야 하며, 다음 범위 내의 숫자를 나타냅니다: −(borderleft+paddingleft) ≤ x ≤ width+borderright+paddingright. 여기서 width는 이미지의 렌더링된 너비, borderleft는 이미지의 왼쪽 테두리의 너비, paddingleft는 이미지의 왼쪽 패딩의 너비, borderright는 이미지의 오른쪽 테두리의 너비, paddingright는 이미지의 오른쪽 패딩의 너비를 나타내며, 모든 치수는 CSS 픽셀로 표시됩니다.
y 구성 요소는 유효한 정수여야 하며, 다음 범위 내의 숫자를 나타냅니다: −(bordertop+paddingtop) ≤ y ≤ height+borderbottom+paddingbottom. 여기서 height는 이미지의 렌더링된 높이, bordertop는 이미지의 상단 테두리의 너비, paddingtop는 이미지의 상단 패딩의 너비, borderbottom는 이미지의 하단 테두리의 너비, paddingbottom는 이미지의 하단 패딩의 너비를 나타내며, 모든 치수는 CSS 픽셀로 표시됩니다.
테두리나 패딩이 없는 경우, 그 너비는 CSS 픽셀로 0이 됩니다.
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
및 formtarget
속성은 폼 제출을 위한 속성입니다.
image.width [ = value ]
image.height [ = value ]
이 속성들은 이미지의 실제 렌더링된 크기를 반환하거나, 크기가 알려지지 않은 경우 0을 반환합니다.
이 속성들은 설정할 수 있으며, 해당 콘텐츠 속성을 변경합니다.
다음의 공통 input
요소
콘텐츠 속성 및 IDL 속성이 요소에 적용됩니다: alt
, formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
, popovertarget
,
popovertargetaction
,
src
, 및 width
콘텐츠 속성들;
value
IDL 속성.
다음의 콘텐츠 속성은 요소에 지정되어서는 안 되며, 적용되지
않습니다:
accept
,
autocomplete
,
checked
,
dirname
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
, 및
step
.
요소의 value
속성은 생략해야 합니다.
다음의 IDL 속성과 메서드는 요소에 적용되지 않습니다:
checked
,
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
및
valueAsNumber
IDL 속성들;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
및
stepUp()
메서드들.
input
및 change
이벤트는 적용되지 않습니다.
이 상태의 동작은 img
요소의 동작과 유사한 측면이
많습니다. 독자들은 해당 섹션을 읽어보기를 권장하며, 많은 동일한 요구 사항이 더 자세히 설명되어 있습니다.
다음 폼을 참고하세요:
< form action = "process.cgi" >
< input type = image src = map.png name = where alt = "위치 목록 표시" >
</ form >
사용자가 이미지의 (127,40) 좌표를 클릭하면 폼을 제출하는 데 사용되는 URL은 "process.cgi?where.x=127&where.y=40
"이 됩니다.
(이 예제에서는 지도를 보지 못하는 사용자가 대신 "위치 목록 표시" 라벨이 있는 버튼을 보고, 버튼을 클릭하면 서버가 지도의 위치 대신 선택할 위치 목록을 표시한다고 가정합니다.)
type=reset
)모든 현재 엔진에서 지원됩니다.
만약 input
요소의 type
속성이 리셋 버튼 상태에 있다면, 이
섹션의 규칙이 적용됩니다.
input
요소는 폼을 리셋하는 버튼을 나타냅니다. 요소에 value
속성이 있으면, 버튼의 라벨은 그 속성의 값이어야 합니다. 그렇지 않으면, "리셋" 또는 그와 비슷한 의미의 구현 정의
문자열이어야 합니다. 이 요소는 버튼입니다.
기본 라벨이 구현 정의이기 때문에, 버튼의 너비는 보통 버튼 라벨에 따라 달라지므로, 버튼의 너비가 지문 인식 가능성 있는 몇 비트의 정보를 누출할 수 있습니다. 이 비트들은 사용자 에이전트의 정체성과 사용자의 로캘과 강하게 연관될 가능성이 큽니다.
요소의 입력 활성화 동작은 다음과 같습니다:
제약 조건 검증: 이 요소는 제약 조건 검증에서 제외됩니다.
value
IDL 속성은 이 요소에 적용되며, 기본 모드입니다.
다음의 공통 input
요소 콘텐츠 속성은 요소에 적용됩니다:
popovertarget
및
popovertargetaction
.
다음의 콘텐츠 속성은 요소에 지정되어서는 안 되며, 적용되지
않습니다:
accept
,
alt
,
autocomplete
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
,
src
,
step
,
및
width
.
다음의 IDL 속성과 메서드는 요소에 적용되지 않습니다:
checked
,
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
및
valueAsNumber
IDL 속성들;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
및
stepUp()
메서드들.
type=button
)모든 현재 엔진에서 지원됩니다.
만약 input
요소의 type
속성이 버튼
상태에 있다면, 이 섹션의 규칙이 적용됩니다.
input
요소는 기본 동작이 없는 버튼을 나타냅니다.
버튼의 라벨은 value
속성에서 제공되어야 하며, 비어 있는 문자열일 수 있습니다. 요소에 value
속성이 있으면, 버튼의 라벨은 그 속성의 값이어야 하며, 그렇지 않으면 비어 있는 문자열이어야 합니다. 이 요소는 버튼입니다.
이 요소에는 입력 활성화 동작이 없습니다.
제약 조건 검증: 이 요소는 제약 조건 검증에서 제외됩니다.
value
IDL 속성은 이 요소에 적용되며, 기본 모드입니다.
다음의 공통 input
요소 콘텐츠 속성은 요소에 적용됩니다:
popovertarget
및
popovertargetaction
.
다음의 콘텐츠 속성은 요소에 지정되어서는 안 되며, 적용되지
않습니다:
accept
,
alt
,
autocomplete
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
list
,
max
,
maxlength
,
min
,
minlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
,
src
,
step
, 및
width
.
다음의 IDL 속성과 메서드는 요소에 적용되지 않습니다:
checked
,
files
,
list
,
selectionStart
,
selectionEnd
,
selectionDirection
,
valueAsDate
,
및
valueAsNumber
IDL 속성들;
select()
,
setRangeText()
,
setSelectionRange()
,
stepDown()
,
및
stepUp()
메서드들.
이 섹션은 규범적이지 않습니다.
사용자에게 표시되는 날짜, 시간, 및 숫자 컨트롤의 형식은 폼 제출에 사용되는 형식과 독립적입니다.
브라우저는 input
요소의 언어가 암시하는 로케일 또는 사용자가 선호하는 로케일의 관습에 따라 날짜, 시간, 및 숫자를 표시하는 사용자
인터페이스를 사용하는 것이 권장됩니다. 페이지의 로케일을 사용하면 페이지에서 제공된 데이터와의 일관성이 보장됩니다.
예를 들어, 미국 영어 페이지에서 Cirque De Soleil 쇼가 02/03에 열릴 것이라고 주장하지만, 브라우저가 영국 영어 로케일로 설정되어 티켓 구매 날짜 선택기에서 03/02만 표시된다면, 이는 사용자에게 혼란을 줄 것입니다. 페이지의 로케일을 사용하면 적어도 날짜가 모든 곳에서 동일한 형식으로 표시되도록 보장할 수 있습니다. (물론, 사용자가 한 달 늦게 도착하는 상황이 발생할 위험은 여전히 있지만, 이러한 문화적 차이에 대해서는 할 수 있는 일이 한정적입니다...)
input
요소 속성이 속성들은 input
요소의 type
속성이
해당 속성이 적용된다고 명시된 상태에
있는 경우에만 적용됩니다. 속성이 input
요소에 적용되지 않는 경우, 사용자 에이전트는 아래의 요구 사항 및
정의와 관계없이 해당 속성을 무시해야 합니다.
maxlength
및 minlength
속성maxlength
속성은 적용될 때 폼 컨트롤
maxlength
속성입니다.
minlength
속성은 적용될 때 폼 컨트롤
minlength
속성입니다.
만약 input
요소에 허용되는 최대 값 길이가 있다면,
요소의 value
속성 값의 길이는 요소의 허용되는 최대 값 길이보다 작거나 같아야 합니다.
다음 예시는 메시징 클라이언트의 텍스트 입력을 임의로 고정된 문자 수로 제한하여 이 매체를 통한 대화가 간결해지고 지능적인 담론을 억제할 수 있는 방법을 보여줍니다.
< label > What are you doing? < input name = status maxlength = 140 ></ label >
여기서 비밀번호는 최소 길이를 갖습니다:
< p >< label > Username: < input name = u required ></ label >
< p >< label > Password: < input name = p required minlength = 12 ></ label >
size
속성size
속성은 시각적 렌더링에서 사용자가
요소의 value를 편집하는 동안 사용자가 볼 수 있는 문자 수를 지정합니다.
size
속성은 지정된 경우 유효한 음수가 아닌 정수이며, 0보다
커야 합니다.
속성이 존재하는 경우, 그 값은 음수가 아닌 정수를 구문 분석하는 규칙을 사용하여 해석되어야 하며, 결과가 0보다 큰 경우, 사용자 에이전트는 최소한 해당 문자 수가 표시되도록 해야 합니다.
size
IDL 속성은 0보다 큰 양수로만 제한되며 기본값은 20입니다.
readonly
속성readonly
속성은 불리언 속성으로, 사용자가 폼 컨트롤을 편집할 수 있는지 여부를
제어합니다. 지정된 경우, 요소는 변경 가능하지
않습니다.
제약 조건 검증: readonly
속성이 input
요소에 지정된 경우, 해당 요소는
제약 조건
검증에서 제외됩니다.
disabled
와 readonly
의 차이점은
읽기 전용 컨트롤은 여전히 기능할 수 있는 반면, 비활성화된 컨트롤은 활성화될 때까지 일반적으로 기능하지 않는다는 것입니다. 이 표준의 다른 곳에서는 비활성화 개념을 참조하는 규범적 요구 사항과 함께
더 자세히 설명되어 있습니다. (예를 들어, 요소의 활성화 동작, 포커스 가능한 영역인지 여부, 또는 폼 데이터 세트 구성 시기 등). 비활성화된 컨트롤과의 사용자 상호작용과
관련된 기타 동작, 예를 들어 텍스트를 선택하거나 복사할 수 있는지 여부는 이 표준에서 정의되지 않습니다.
다른 컨트롤(예: 체크박스 및 버튼)의 경우 읽기 전용 상태와 비활성화 상태 사이에 유용한 구별이 없으므로 readonly
속성은 적용되지 않습니다.
다음 예에서 기존 제품 식별자는 수정할 수 없지만, 새 제품을 나타내는 행과 일관성을 유지하기 위해 여전히 폼의 일부로 표시됩니다(식별자가 아직 입력되지 않은 경우).
< form action = "products.cgi" method = "post" enctype = "multipart/form-data" >
< table >
< tr > < th > Product ID < th > Product name < th > Price < th > Action
< tr >
< td > < input readonly = "readonly" name = "1.pid" value = "H412" >
< td > < input required = "required" name = "1.pname" value = "Floor lamp Ulke" >
< td > $< input required = "required" type = "number" min = "0" step = "0.01" name = "1.pprice" value = "49.99" >
< td > < button formnovalidate = "formnovalidate" name = "action" value = "delete:1" > Delete</ button >
</ tr >
< td > < input readonly = "readonly" name = "2.pid" value = "FG28" >
< td > < input required = "required" name = "2.pname" value = "Table lamp Ulke" >
< td > $< input required = "required" type = "number" min = "0" step = "0.01" name = "2.pprice" value = "24.99" >
< td > < button formnovalidate = "formnovalidate" name = "action" value = "delete:2" > Delete</ button >
</ tr >
< td > < input readonly = "readonly" name = "3.pid" value = "" pattern = "[A-Z0-9]+" >
< td > < input required = "required" name = "3.pname" value = "" >
< td > $< input required = "required" type = "number" min = "0" step = "0.01" name = "3.pprice" value = "" >
< td > < button formnovalidate = "formnovalidate" name = "action" value = "delete:3" > Delete</ button >
</ table >
< p > < button formnovalidate = "formnovalidate" name = "action" value = "add" > Add</ button >
</ p >
< p > < button name = "action" value = "update" > Save</ button > </ p >
</ form >
required
속성required
속성은 부울 속성
입니다.
지정된 경우, 요소는 필수입니다.
제약 조건 유효성 검사: 요소가 필수이고,
그 값
IDL 속성이 적용되며,
모드가 값이고,
요소가 변경 가능하며,
요소의 값이 빈 문자열일 경우,
해당 요소는 누락된 상태가
됩니다.
다음 양식에는 이메일 주소와 비밀번호를 위한 두 개의 필수 필드가 있습니다. 또한, 비밀번호 필드와 이 세 번째 필드에 동일한 비밀번호를 입력해야만 유효한 세 번째 필드가 있습니다.
< h1 > 새 계정 만들기</ h1 >
< form action = "/newaccount" method = post
oninput = "up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')" >
< p >
< label for = "username" > 이메일 주소:</ label >
< input id = "username" type = email required name = un >
< p >
< label for = "password1" > 비밀번호:</ label >
< input id = "password1" type = password required name = up >
< p >
< label for = "password2" > 비밀번호 확인:</ label >
< input id = "password2" type = password name = up2 >
< p >
< input type = submit value = "계정 만들기" >
</ form >
라디오 버튼의 경우, required
속성은
그룹 내의 라디오 버튼 중 하나라도
선택되면 만족됩니다. 따라서, 다음 예에서 라디오 버튼 중 하나라도 체크되면 됩니다. 단, 필수로 표시된 라디오 버튼만 해당되는 것은 아닙니다:
< fieldset >
< legend > 이 영화가 베크델 테스트를 통과했습니까?</ legend >
< p >< label >< input type = "radio" name = "bechdel" value = "no-characters" > 아니요, 영화에 여성 캐릭터가 두 명도 없습니다. </ label >
< p >< label >< input type = "radio" name = "bechdel" value = "no-names" > 아니요, 여성 캐릭터가 서로 대화를 나누지 않습니다. </ label >
< p >< label >< input type = "radio" name = "bechdel" value = "no-topic" > 아니요, 여성 캐릭터가 서로 대화할 때는 항상 남성 캐릭터에 대한 이야기입니다. </ label >
< p >< label >< input type = "radio" name = "bechdel" value = "yes" required > 네. </ label >
< p >< label >< input type = "radio" name = "bechdel" value = "unknown" > 잘 모르겠습니다. </ label >
</ fieldset >
라디오 버튼 그룹이 필수인지 아닌지에 대한 혼동을 피하기 위해, 저자들은 그룹 내 모든 라디오 버튼에 속성을 명시할 것을 권장합니다. 사실, 일반적으로, 저자들은 처음부터 선택된 제어 항목이 없는 라디오 버튼 그룹을 피하는 것이 좋습니다. 이러한 상태는 사용자가 되돌릴 수 없는 상태이므로, 일반적으로 열악한 사용자 인터페이스로 간주됩니다.
multiple
속성모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
multiple
속성은 사용자가 하나 이상의 값을 지정할 수 있는지 여부를 나타내는 부울
속성입니다.
다음 예는 이메일 클라이언트의 "받는 사람" 필드가 여러 이메일 주소를 수락할 수 있는 방법을 보여줍니다.
< label > 받는 사람: < input type = email multiple name = to ></ label >
사용자의 연락처 데이터베이스에 많은 친구가 있고, 그 중 두 명이 "스파이더맨"("spider@parker.example.net" 주소)과 "스칼렛 위치"("scarlet@avengers.example.net" 주소)라고 가정했을 때, 사용자가 "s"를 입력하면, 사용자 에이전트는 이 두 이메일 주소를 사용자에게 제안할 수 있습니다.
페이지는 또한 사용자의 연락처 데이터베이스를 사이트와 연동할 수 있습니다:
< label > 받는 사람: < input type = email multiple name = to list = contacts ></ label >
...
< datalist id = "contacts" >
< option value = "hedral@damowmow.com" >
< option value = "pillar@example.com" >
< option value = "astrophy@cute.example" >
< option value = "astronomy@science.example.org" >
</ datalist >
사용자가 이 텍스트 컨트롤에 "bob@example.net"을 입력한 후 "s"로 시작하는 두 번째 이메일 주소를 입력하기 시작했다고 가정해보십시오. 사용자
에이전트는 앞서 언급한 두 친구의 이메일 주소뿐만 아니라 datalist
요소에 제공된
"astrophy" 및 "astronomy" 값을 모두 표시할 수 있습니다.
다음 예는 이메일 클라이언트의 "첨부 파일" 필드가 여러 파일 업로드를 수락할 수 있는 방법을 보여줍니다.
< label > 첨부 파일: < input type = file multiple name = att ></ label >
pattern
속성모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
pattern
속성은 컨트롤의 값 또는 multiple
속성이 설정되어 적용된 경우,
컨트롤의 값들을 확인하는 정규 표현식을 지정합니다.
지정된 경우, 속성의 값은 JavaScript Pattern[+UnicodeSetsMode, +N]
생산자와 일치해야 합니다.
input
요소의
컴파일된 패턴 정규 표현식이 존재하는 경우, 이는 JavaScript RegExp
객체입니다. 이는 다음과 같이 결정됩니다:
요소에 pattern
속성이 지정되지 않은 경우, 아무것도 반환하지 않습니다. 요소에는 컴파일된 패턴 정규 표현식이 없습니다.
pattern을 요소의 pattern
속성의 값으로 설정합니다.
regexpCompletion을 RegExpCreate(pattern,
"v
")로 설정합니다.
regexpCompletion이 이상 완료인 경우, 아무것도 반환하지 않습니다. 요소에는 컴파일된 패턴 정규 표현식이 없습니다.
사용자 에이전트는 이 오류를 디버깅을 돕기 위해 개발자 콘솔에 기록할 것을 권장합니다.
anchoredPattern을 "^(?:
"로 설정하고, 그 뒤에 pattern을 추가하고, 그 뒤에
")$
"를 추가합니다.
! RegExpCreate(anchoredPattern, "v
")을 반환합니다.
이 단계를 수행하는 이유는 속성의 pattern
값을 직접 사용하는 대신 두 가지입니다. 첫째, 문자열과 비교할 때 정규 표현식의 시작 부분이 문자열의 시작 부분에 고정되도록 하고 끝 부분이 문자열의 끝 부분에 고정되도록 합니다. 둘째, 정규
표현식이 독립된 형태로 유효하도록 하며, "^(?:
"와 ")$
" 앵커로 둘러싸인 후에만 유효해지는 것이 아니라는 것을 보장합니다.
RegExp
객체 regexp은 문자열 input을 일치시킵니다. 이는 ! RegExpBuiltinExec(regexp, input)이 null이 아닌
경우입니다.
제약 조건 유효성 검사: 요소의 값이 빈
문자열이 아니고, 요소의 multiple
속성이 지정되지
않았거나 해당 속성이 요소의 input
요소에 적용되지 않으며, 요소에 컴파일된 패턴 정규 표현식이 있고, 그 정규 표현식이 요소의 값과 일치하지 않으면 요소는 패턴 불일치
문제가 있습니다.
제약 조건 유효성 검사: 요소의 값이 빈
문자열이 아니고, 요소의 multiple
속성이 지정되어 있고,
해당 속성이 input
요소에 적용되며,
요소에 컴파일된 패턴 정규 표현식이 있고, 그 정규 표현식이 요소의 각 값과 일치하지 않으면 요소는 패턴 불일치
문제가 있습니다.
input
요소에 pattern
속성이 지정된 경우,
작성자는 패턴에 대한 설명을 제공하기 위해 title
속성을 포함해야 합니다. 사용자 에이전트는 패턴이 일치하지 않는다고 사용자에게 알리거나, 도구 설명
또는 제어가 포커스를 받을 때 보조 기술에 의해 읽히는 등 적절한 시기에 이 속성의 내용을
사용할 수 있습니다.
예를 들어, 다음 코드 조각:
< label > 부품 번호:
< input pattern = "[0-9][A-Z]{3}" name = "part"
title = "부품 번호는 숫자 뒤에 세 개의 대문자입니다." />
</ label >
...는 UA가 다음과 같은 경고를 표시하게 할 수 있습니다:
부품 번호는 숫자 뒤에 세 개의 대문자입니다. 이 필드가 올바르지 않으면 이 양식을 제출할 수 없습니다.
컨트롤에 pattern
속성이 있는
경우, title
속성은 패턴을 설명해야 합니다.
사용자가 컨트롤을 작성하는 데 도움이 되는 한, 추가 정보를 포함할 수도 있습니다. 그렇지 않으면 보조 기술이 손상될 수 있습니다.
예를 들어, title 속성에 컨트롤의 캡션이 포함되어 있으면 보조 기술이 입력한 텍스트가 요구된 패턴과 일치하지 않습니다. 생일과 같은 말을 하게 될 수 있는데, 이는 유용하지 않습니다.
사용자 에이전트는 여전히 title
속성을 비오류 상황에서도 표시할 수
있습니다(예: 컨트롤 위에 커서를 올렸을 때 도구 설명으로 표시됨). 따라서 작성자는 title
속성을 오류가 발생한 것처럼 작성하지
않도록 주의해야 합니다.
min
및 max
속성모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
일부 폼 컨트롤은 사용자가 제공할 수 있는 허용 범위를 제한하는 명시적 제약 조건을 가질 수 있습니다. 일반적으로 이러한 범위는 선형적이고 연속적입니다. 그러나 폼 컨트롤은 주기적 도메인을 가질 수 있으며, 이 경우 폼 컨트롤의 가장 넓은 가능한 범위는 유한하며 저자는 경계를 넘는 명시적 범위를 지정할 수 있습니다.
특히, type=time
컨트롤의 가장 넓은 범위는 자정에서 자정까지(24시간)이며,
저자는 연속적인 선형 범위(예: 오후 9시부터 오후 11시까지)와 자정을 넘는 불연속 범위(예: 오후 11시부터 오전 1시까지)를 모두 설정할 수 있습니다.
min
및 max
속성은
요소의 허용 범위를 나타냅니다.
이들의 구문은 type
속성의 현재 상태를
정의하는 섹션에 의해 정의됩니다.
요소에 min
속성이 있고,
문자열을
숫자로 변환하는 알고리즘을 이 속성의 값에 적용한 결과가 숫자인 경우,
해당 숫자가 요소의 최소값이 됩니다. 그렇지 않으면, type
속성의
현재 상태가 기본 최소값을 정의하는 경우, 그 값이 최소값이 됩니다. 그렇지 않으면 요소에는 최소값이 없습니다.
요소에 max
속성이 있고,
문자열을 숫자로 변환하는 알고리즘을 이 속성의 값에 적용한 결과가
숫자인 경우,
해당 숫자가 요소의 최대값이 됩니다. 그렇지 않으면, type
속성의
현재 상태가 기본 최대값을 정의하는 경우, 그 값이 최대값이 됩니다. 그렇지 않으면 요소에는 최대값이 없습니다.
요소가 주기적 도메인을 갖지 않는 경우,
max
속성의 값
(해당 최대값)은
min
속성의 값(해당 최소값)보다 작지 않아야 합니다.
요소가 주기적 도메인을 갖지 않고, 최대값이 최소값보다 작은 경우, 요소에 값이 있는 한, 요소는 언더플로우 또는 오버플로우 상태에 있게 됩니다.
요소가 역 범위를 갖는 경우, 이는 주기적 도메인을 가지며, 해당 최대값이 해당 최소값보다 작은 경우입니다.
요소가 정의된 최소값 또는 정의된 최대값을 가지고 있으면, 범위 제한이 있다고 말할 수 있습니다.
제약 조건 유효성 검사: 요소에 최소값이 있고 역 범위가 없으며, 문자열을 숫자로 변환하는 알고리즘을 요소의 값에 적용한 결과가 숫자이고 그 숫자가 해당 최소값보다 작으면 요소는 언더플로우 상태에 있습니다.
제약 조건 유효성 검사: 요소에 최대값이 있고 역 범위가 없으며, 문자열을 숫자로 변환하는 알고리즘을 요소의 값에 적용한 결과가 숫자이고 그 숫자가 해당 최대값보다 크면 요소는 오버플로우 상태에 있습니다.
제약 조건 유효성 검사: 요소가 역 범위를 가지며, 문자열을 숫자로 변환하는 알고리즘을 요소의 값에 적용한 결과가 숫자이고, 그 숫자가 해당 최대값보다 크고 동시에 해당 최소값보다 작으면, 요소는 동시에 언더플로우와 오버플로우 상태에 있습니다.
다음 날짜 컨트롤은 1980년대 이전의 날짜로 입력을 제한합니다:
< input name = bday type = date max = "1979-12-31" >
다음 숫자 컨트롤은 0보다 큰 정수로 입력을 제한합니다:
< input name = quantity required = "" type = "number" min = "1" value = "1" >
다음 시간 컨트롤은 오후 9시에서 오전 6시 사이에 발생하는 분으로 입력을 제한하며, 기본값은 자정입니다:
< input name = "sleepStart" type = time min = "21:00" max = "06:00" step = "60" value = "00:00" >
step
속성모든 최신 엔진에서 지원됩니다.
step
속성은 값 또는 값들의 예상(및 필수) 세분성을 제한하여 허용되는 값을 나타냅니다. type
속성의 현재 상태를 정의하는 섹션은 또한 기본 단계, 단계 배율 및 경우에 따라 기본 단계 기준값을 정의하며, 이는 아래에 설명된 대로 속성을 처리하는 데 사용됩니다.
step
속성이 지정된 경우,
이 속성은 유효한 부동 소수점 숫자로서
0보다 큰 숫자여야 하며, 또는 문자열 "any
"와 ASCII 대소문자
구분 없이 일치해야 합니다.
이 속성은 요소에 대해 허용되는 값의 단계를 다음과 같이 제공합니다:
속성이 적용되지 않으면, 허용되는 값의 단계가 없습니다.
그렇지 않고 속성이 없으면, 허용되는 값의 단계는 기본 단계에 단계 배율을 곱한 값입니다.
그렇지 않고 속성의 값이 문자열 "any
"와 ASCII 대소문자 구분 없이 일치하는 경우,
허용되는 값의 단계가 없습니다.
그렇지 않고 부동 소수점 숫자 값을 구문 분석하는 규칙을 적용한 결과가 오류, 0 또는 0보다 작은 숫자라면, 허용되는 값의 단계는 기본 단계에 단계 배율을 곱한 값입니다.
그렇지 않은 경우, 허용되는 값의 단계는 속성의 값을 적용할 때 부동 소수점 숫자 값을 구문 분석하는 규칙에 의해 반환된 숫자에 단계 배율을 곱한 값입니다.
단계 기준값은 다음 알고리즘에 의해 반환된 값입니다:
요소에 min
콘텐츠 속성이 있고,
문자열을
숫자로 변환하는 알고리즘을 이 속성의 값에 적용한 결과가 오류가 아닌 경우, 해당 결과를 반환합니다.
요소에 value
콘텐츠 속성이 있고,
문자열을 숫자로 변환하는 알고리즘을 이 속성의 값에 적용한 결과가
오류가 아닌 경우, 해당 결과를 반환합니다.
0을 반환합니다.
제약 조건 유효성 검사: 요소에 허용되는 값의 단계가 있고, 문자열을 숫자로 변환하는 알고리즘을 요소의 값에 적용한 결과가 숫자이고, 그 숫자에서 단계 기준값을 뺀 값이 허용되는 값의 단계의 정수 배수가 아닌 경우, 요소는 단계 불일치 문제를 겪고 있습니다.
다음 범위 컨트롤은 0에서 1 사이의 값만 허용하며, 이 범위에서 256단계를 허용합니다:
< input name = opacity type = range min = 0 max = 1 step = 0.00392156863 >
다음 컨트롤은 하루 중 언제든지 선택할 수 있으며, 예를 들어 천분의 일초 단위 또는 그 이상의 정확도로 선택할 수 있습니다:
< input name = favtime type = time step = any >
일반적으로, 시간 컨트롤은 1분 단위로 제한됩니다.
list
속성모든 현재 엔진에서 지원됩니다.
list
속성은
사용자에게 제안된 미리 정의된 옵션을 나열하는 요소를 식별하는 데 사용됩니다.
존재하는 경우, 그 값은 동일한 트리에서 datalist
요소의 ID여야 합니다.
제안 소스 요소는 트리 내에서 list
속성의 값과 동일한 ID를 가진 첫 번째 요소입니다. 해당 요소가 datalist
요소인 경우에만
적용됩니다. list
속성이 없거나, 해당 ID를 가진 요소가 없거나, 첫 번째 요소가 datalist
요소가 아닌 경우, 제안 소스 요소는 없습니다.
제안 소스 요소가 존재하는 경우, 사용자가 입력
요소의 값을 편집할 때 사용자 에이전트는 제안 소스 요소에서 제공하는 제안을
사용자가 사용하는 컨트롤 유형에 맞게 제시해야 합니다. 필요에 따라, 사용자 에이전트는 제안의 라벨과 값을 사용하여 사용자에게 제안을 식별할 수 있습니다.
사용자 에이전트는 제안의 수가 많은 경우 제안 소스 요소에서 제안을 필터링하여 가장 관련성이 높은 제안만 포함하는 것을 권장합니다. 정확한 임계값은 정의되지 않았지만, 목록을 4~7개의 값으로 제한하는 것이 합리적입니다. 사용자의 입력에 따라 필터링할 때, 사용자 에이전트는 제안의 라벨과 값 모두에서 일치를 검색해야 합니다. 입력 변형이 일치 과정에 어떻게 영향을 미치는지 고려해야 합니다. 유니코드 정규화를 적용하여 다른 키보드 또는 입력 메커니즘으로 인해 발생하는 서로 다른 유니코드 코드 포인트 시퀀스가 일치 과정에 방해가 되지 않도록 해야 합니다. 대소문자 변형은 무시해야 하며, 이는 언어별 대소문자 매핑이 필요할 수 있습니다. 이러한 예에 대한 자세한 내용은 Character Model for the World Wide Web: String Matching을 참조하십시오. 또한 사용자 에이전트는 다른 일치 기능도 제공할 수 있습니다: 예를 들어, 가나의 다른 형태를 서로(또는 한자와) 일치시키거나, 악센트를 무시하거나, 맞춤법 교정을 적용하는 등의 기능이 포함될 수 있습니다. [CHARMODNORM]
이 텍스트 필드는 JavaScript 함수 유형을 선택할 수 있습니다.
< input type = "text" list = "function-types" >
< datalist id = "function-types" >
< option value = "function" > function</ option >
< option value = "async function" > async function</ option >
< option value = "function*" > generator function</ option >
< option value = "=>" > arrow function</ option >
< option value = "async =>" > async arrow function</ option >
< option value = "async function*" > async generator function</ option >
위의 제안을 따르는 사용자 에이전트는 라벨과 값을 모두 표시합니다:
그런 다음 "arrow" 또는 "=>"을 입력하면 "arrow function" 및 "async arrow function" 라벨이 있는 항목으로 목록이 필터링됩니다. "generator" 또는 "*"을 입력하면 "generator function" 및 "async generator function" 라벨이 있는 항목으로 목록이 필터링됩니다.
항상 그렇듯이, 사용자 에이전트는 특정 요구 사항 및 사용자의 특정 상황에 적합한 사용자 인터페이스 결정을 자유롭게 내릴 수 있습니다. 그러나 이 부분은 역사적으로 구현자, 웹 개발자 및 사용자 모두에게 혼란을 야기해 왔으므로, 위에 몇 가지 "해야 할" 제안을 제공했습니다.
사용자가 제안을 선택할 때의 처리 방식은 요소가 단일 값만 허용하는 컨트롤인지, 아니면 여러 값을 허용하는지에 따라 달라집니다:
multiple
속성이
지정되지 않았거나 multiple
속성이 적용되지 않는 경우
type
속성이 Email 상태에 있고 요소에
multiple
속성이 지정된
경우
사용자가 제안을 선택하면 사용자 에이전트는 입력
요소의 값에 선택한 제안의 값을 새 항목으로 추가하거나, 기존 항목을
선택한 제안의 값으로 변경해야 합니다. 이러한 동작 중 어떤 것이 적용될지는 사용자 인터페이스에 따라 구현
정의 방식으로 결정됩니다.
list
속성이 적용되지 않으면, 제안 소스 요소가 없습니다.
이 URL 필드는 몇 가지 제안을 제공합니다.
< label > 홈페이지: < input name = hp type = url list = hpurls ></ label >
< datalist id = hpurls >
< option value = "https://www.google.com/" label = "Google" >
< option value = "https://www.reddit.com/" label = "Reddit" >
사용자의 히스토리에서 다른 URL도 나타날 수 있습니다; 이는 사용자 에이전트에 따라 달라집니다.
이 예제는 자동 완성 목록 기능을 사용하는 폼을 설계하는 방법을 보여주며, 레거시 사용자 에이전트에서도 유용하게 동작할 수 있습니다.
자동 완성 목록이 단순히 보조 기능으로 사용되고 콘텐츠에 중요하지 않은 경우, datalist
요소와 자식
option
요소만 사용하면 충분합니다.
레거시 사용자 에이전트에서 값이 렌더링되지 않도록 하려면, 값을 인라인이 아닌 value
속성에 배치해야 합니다.
< p >
< label >
품종을 입력하세요:
< input type = "text" name = "breed" list = "breeds" >
< datalist id = "breeds" >
< option value = "Abyssinian" >
< option value = "Alpaca" >
<!-- ... -->
</ datalist >
</ label >
</ p >
그러나 레거시 사용자 에이전트에서도 값을 보여야 하는 경우, 다음과 같이 datalist
요소 안에 대체
콘텐츠를 배치할 수 있습니다:
< p >
< label >
품종을 입력하세요:
< input type = "text" name = "breed" list = "breeds" >
</ label >
< datalist id = "breeds" >
< label >
또는 목록에서 선택하세요:
< select name = "breed" >
< option value = "" > (선택되지 않음)
< option > Abyssinian
< option > Alpaca
<!-- ... -->
</ select >
</ label >
</ datalist >
</ p >
대체 콘텐츠는 datalist
을
지원하지 않는 사용자 에이전트에서만 표시됩니다. 반면에 옵션은 datalist
요소의 자식이
아니더라도 모든 사용자 에이전트에서 감지됩니다.
option
요소가 datalist
에서 사용되고
selected
상태인 경우,
레거시 사용자 에이전트에서 기본적으로 선택되지만(select
요소에 영향을 미치기 때문에),
datalist
을 지원하는
사용자 에이전트에서는 입력
요소에 영향을
미치지 않습니다.
placeholder
속성모든 최신 엔진에서 지원됩니다.
Element/input#attr-placeholder
모든 최신 엔진에서 지원됩니다.
placeholder
속성은 컨트롤에 값이 없을 때 사용자가 데이터를 입력하는 데 도움을 주기 위한 짧은 힌트(단어나 짧은 문구)를 나타냅니다. 힌트는 샘플 값이나 예상 형식에 대한 간단한 설명일 수
있습니다. 이 속성이 지정된 경우, 값에는 U+000A 줄 바꿈(LF) 또는 U+000D 캐리지 리턴(CR) 문자가 포함되지 않아야 합니다.
placeholder
속성은 라벨
을 대체하는 용도로
사용해서는 안 됩니다. 더 긴 힌트나 기타 권장 텍스트의 경우, title
속성이 더 적합합니다.
이 메커니즘들은 매우 유사하지만 미묘한 차이가 있습니다: 컨트롤의 라벨
에서 제공하는 힌트는 항상
표시됩니다; placeholder
속성에서 제공하는 짧은 힌트는 사용자가 값을 입력하기 전에 표시됩니다; title
속성에서 제공하는 힌트는 사용자가 추가 도움을 요청할
때 표시됩니다.
사용자 에이전트는 이 힌트를 컨트롤의 개행 문자를 제거한 값이 빈 문자열일 때, 특히 컨트롤이 포커스되지 않은 경우 사용자에게 제시해야 합니다.
사용자 에이전트가 일반적으로 컨트롤이 포커스된 상태일 때 이 힌트를 표시하지 않는 경우에도,
autofocus
속성에 의해 포커스된
경우에는 힌트를 표시해야 합니다. 이 경우 사용자가 포커스되기 전에 컨트롤을 살펴볼 기회를 가지지 못했을 수 있기 때문입니다.
다음은 placeholder
속성을 사용하는 메일 구성 사용자 인터페이스의 예입니다:
< fieldset >
< legend > 메일 계정</ legend >
< p >< label > 이름: < input type = "text" name = "fullname" placeholder = "John Ratzenberger" ></ label ></ p >
< p >< label > 주소: < input type = "email" name = "address" placeholder = "john@example.net" ></ label ></ p >
< p >< label > 비밀번호: < input type = "password" name = "password" ></ label ></ p >
< p >< label > 설명: < input type = "text" name = "desc" placeholder = "내 이메일 계정" ></ label ></ p >
</ fieldset >
컨트롤의 내용은 한 방향성을 가지지만 placeholder는 다른 방향성을 가져야 하는 상황에서는, 속성 값에 유니코드의 양방향 알고리즘 서식 문자를 사용할 수 있습니다:
< input name = t1 type = tel placeholder = " ‫ رقم الهاتف 1 ‮ " >
< input name = t2 type = tel placeholder = " ‫ رقم الهاتف 2 ‮ " >
조금 더 명확하게 하기 위해, 다음은 인라인 아랍어 대신 숫자 문자 참조를 사용한 동일한 예제입니다:
< input name = t1 type = tel placeholder = " ‫ رقم الهاتف 1 ‮ " >
< input name = t2 type = tel placeholder = " ‫ رقم الهاتف 2 ‮ " >
input
요소 APIinput.value [ = value ]
폼 컨트롤의 현재 값을 반환합니다.
값을 변경할 수 있습니다.
파일 업로드 컨트롤일 때 빈 문자열 이외의 값을 설정하면 "InvalidStateError
" DOMException
을
던집니다.
input.checked [ = value ]
폼 컨트롤의 현재 체크 상태를 반환합니다.
체크 상태를 변경할 수 있습니다.
input.files [ = files ]
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
폼 컨트롤의 선택된 파일들을 나열하는 FileList
객체를 반환합니다.
컨트롤이 파일 컨트롤이 아닌 경우 null을 반환합니다.
선택된 파일을 변경하기 위해 FileList
객체로 설정할 수 있습니다. 예를 들어, 드래그 앤 드롭 작업의 결과로 설정할 수 있습니다.
input.valueAsDate [ = value ]
해당하는 경우, 폼 컨트롤의 값을 나타내는
Date
객체를 반환합니다. 그렇지 않으면 null을 반환합니다.
값을 변경할 수 있습니다.
컨트롤이 날짜 또는 시간 기반이 아닌 경우 "InvalidStateError
" DOMException
을
던집니다.
input.valueAsNumber [ = value ]
해당하는 경우, 폼 컨트롤의 값을 나타내는 숫자를 반환합니다. 그렇지 않으면 NaN을 반환합니다.
값을 변경할 수 있습니다. NaN으로 설정하면 기본값이 빈 문자열로 설정됩니다.
컨트롤이 날짜 또는 시간 기반이 아니거나 숫자 기반이 아닌 경우 "InvalidStateError
" DOMException
을
던집니다.
input.stepUp([ n ])
input.stepDown([ n ])
폼 컨트롤의 값을 step
속성의 값에 n을 곱한 값만큼 변경합니다. n의 기본값은 1입니다.
컨트롤이 날짜 또는 시간 기반이 아니거나 숫자 기반이 아니거나 step
속성의 값이 "any
"일 경우 "InvalidStateError
" DOMException
을
던집니다.
input.list
input.showPicker()
사용자가 값을 선택할 수 있도록 input에 대해 적용 가능한 선택기 UI를 표시합니다. (해당 컨트롤에 대해 선택기 UI가 구현되지 않은 경우 이 메서드는 아무 작업도 수행하지 않습니다.)
input이 변경 가능하지
않으면 "InvalidStateError
" DOMException
을
던집니다.
"NotAllowedError
" DOMException
를
일시적인 사용자 활성화 없이 호출할 경우 던집니다.
"SecurityError
" DOMException
를
input이 교차 출처 iframe
안에 있을
경우, input이 파일 업로드 또는 색상 상태가
아닌 한 던집니다.
value
IDL 속성은 스크립트가 값을 조작할 수 있게 합니다.
input
요소의 속성입니다. 이 속성은 다음과 같은 모드 중 하나에 있으며, 각 모드는 속성의 동작을 정의합니다.
가져올 때, 요소의 현재 값을 반환합니다.
설정 시:
요소의 값을 oldValue로 저장합니다.
요소의 값을 새로운 값으로 설정합니다.
요소의 더러운 값 플래그를 true로 설정합니다.
요소의 값이 (값 정리 알고리즘을 적용한 후)
oldValue와 다르고, 요소에 텍스트 입력 커서 위치가 있으면, 텍스트 컨트롤의
끝으로 텍스트 입력 커서 위치를 이동시키고 선택된
텍스트를 해제하고 선택 방향을 재설정하여
"none
"으로 설정합니다.
가져올 때, 요소에 value
콘텐츠 속성이 있으면 그 속성의 값을 반환하고, 그렇지 않으면 빈 문자열을 반환합니다.
설정 시, 요소의 value
콘텐츠 속성 값을
새로운 값으로 설정합니다.
가져올 때, 요소에 value
콘텐츠 속성이
있으면 그 속성의 값을 반환하고, 그렇지 않으면 "on
" 문자열을 반환합니다.
설정 시, 요소의 value
콘텐츠 속성 값을
새로운 값으로 설정합니다.
가져올 때, 선택된 파일 목록 중 첫 번째 파일의 이름 앞에 "C:\fakepath\
" 문자열을 붙여 반환합니다. 파일 목록이 비어 있으면 빈 문자열을 반환합니다.
설정 시, 새로운 값이 빈 문자열이면 선택된 파일 목록을 비우고, 그렇지 않으면 "InvalidStateError
" DOMException
을
던집니다.
이 "fakepath" 요구 사항은 역사의 슬픈 사고입니다. 자세한 내용은 파일 업로드 상태 섹션의 예제를 참조하세요.
경로 구성 요소가 선택된 파일 목록의 파일 이름에 포함될 수 없으므로 "\fakepath\"는 경로 구성 요소로 오인될 수 없습니다.
checked
IDL 속성은 스크립트가 체크 상태를 조작할 수 있게
합니다. 가져올 때, 요소의 현재 체크 상태를 반환해야
하며, 설정할 때, 요소의 체크 상태를 새로운 값으로
설정하고 요소의 더러운 체크 상태 플래그를 true로 설정해야 합니다.
files
IDL 속성은 스크립트가 요소의 선택된 파일들에 접근할 수 있게 합니다.
가져올 때, IDL 속성이 적용되는 경우, 현재 선택된
파일들을 나타내는 FileList
객체를 반환해야 합니다. 목록이 변경될 때까지 동일한 객체를 반환해야 합니다. IDL 속성이 적용되지 않는 경우, null을 반환해야 합니다. [FILEAPI]
설정 시, 다음 단계를 수행해야 합니다:
valueAsDate
IDL 속성은 요소의 값을 날짜로 해석한 것을 나타냅니다.
가져올 때, valueAsDate
속성이
적용되지 않는 경우, input
요소의 type
속성의 현재 상태에 대해 정의된
것처럼 null을 반환합니다. 그렇지 않으면, 요소의 값에
대해 해당 상태에 정의된 문자열을 날짜 객체로 변환하는 알고리즘을 실행합니다. 알고리즘이 Date
객체를 반환하면 이를 반환하고, 그렇지 않으면 null을 반환합니다.
설정 시, valueAsDate
속성이 적용되지 않는 경우, input
요소의 type
속성의 현재 상태에 대해 정의된
것처럼 "InvalidStateError
" DOMException
을
던집니다. 그렇지 않으면, 새로운 값이 null이 아니거나 Date
객체가 NaN 시간 값을 나타내면, 요소의 값을 빈 문자열로
설정합니다. 그렇지 않으면, 새로운 값에 대해 해당 상태에 정의된 날짜 객체를 문자열로 변환하는 알고리즘을 실행하고, 요소의 값을 결과 문자열로 설정합니다.
valueAsNumber
IDL 속성은 요소의 값을 숫자로 해석한 것을 나타냅니다.
가져올 때, valueAsNumber
속성이 적용되지 않는 경우, input
요소의 type
속성의 현재 상태에 대해 정의된
것처럼 NaN 값을 반환합니다. 그렇지 않으면, 요소의 값에
대해 해당 상태에 정의된 문자열을 숫자로 변환하는 알고리즘을 실행합니다. 알고리즘이 숫자를 반환하면
이를 반환하고, 그렇지 않으면 NaN 값을 반환합니다.
설정 시, 새로운 값이 무한대이면 TypeError
예외를 던집니다. 그렇지 않으면, valueAsNumber
속성이 적용되지 않는 경우, input
요소의 type
속성의 현재 상태에 대해 정의된
것처럼 "InvalidStateError
" DOMException
을
던집니다. 그렇지 않으면, 새로운 값이 NaN 값이면 요소의 값을 빈 문자열로 설정합니다. 그렇지 않으면, 새로운 값에 대해 해당 상태에 정의된 숫자를
문자열로 변환하는 알고리즘을 실행하고, 요소의 값을 결과 문자열로 설정합니다.
stepDown(n)
와 stepUp(n)
메서드를 호출하면 다음 알고리즘이 실행되어야
합니다:
stepDown()
및
stepUp()
메서드가
input
요소의
type
속성의 현재 상태에
대해 정의된 대로 적용되지 않는 경우, "InvalidStateError
" DOMException
을
던집니다.
요소에 허용된 값 단계가 없는 경우, "InvalidStateError
" DOMException
을
던집니다.
요소에 최소값과 최대값이 있고, 요소의 최소값보다 크거나 같고, 요소의 최대값보다 작거나 같은 값 중 단계 기본값에서 빼서 허용된 값 단계의 정수 배수가 되는 값이 없는 경우, 반환합니다.
요소의 값을 문자열에서 숫자로 변환하는 알고리즘에 적용하여 오류가 발생하지 않으면, value를 그 알고리즘의 결과로 설정합니다. 그렇지 않으면 value를 0으로 설정합니다.
valueBeforeStepping을 value로 설정합니다.
만약 value에서 단계 기본값을 뺀 값이 허용된 값 단계의 정수 배수가 아니라면, value를 단계 기본값에서 빼서
허용된 값 단계의 정수 배수가 되며,
stepDown()
메서드가 호출되었을 때는 value보다 작고, 그렇지 않으면 value보다 큰 값 중 가장 가까운 값으로 설정합니다.
그렇지 않으면 (value에서 단계 기본값을 뺀 값이 허용된 값 단계의 정수 배수인 경우):
인수를 n으로 설정합니다.
delta를 n 곱한 허용된 값 단계로 설정합니다.
stepDown()
메서드가 호출된 경우 delta를 부호로 만듭니다.
value를 delta에 더한 값으로 설정합니다.
요소에 최소값이 있고, value가 그 최소값보다 작다면, value를 단계 기본값에서 빼서 value보다 크거나 같은 값 중 최소값으로 설정합니다.
요소에 최대값이 있고, value가 그 최대값보다 크다면, value를 단계 기본값에서 빼서 value보다 작거나 같은 값 중 최대값으로 설정합니다.
만약 호출된 메서드가 stepDown()
메서드이고 value가 valueBeforeStepping보다 크거나, stepUp()
메서드가
호출되었고 value가 valueBeforeStepping보다 작다면, 반환합니다.
value as string을 input
요소의
type
속성의 현재 상태에
대해 정의된 숫자를 문자열로 변환하는 알고리즘을 실행한 결과로
설정합니다.
요소의 값을 value as string으로 설정합니다.
list
IDL 속성은 현재
추천 소스 요소를 반환해야 하며, 없으면 null을
반환해야 합니다.
모든 현재 엔진에서 지원됩니다.
HTMLInputElement
showPicker()
와
HTMLSelectElement
showPicker()
메서드의 단계는 다음과 같습니다:
this가 변경 가능하지 않다면, "InvalidStateError
" DOMException
을
던집니다.
this의 관련 설정 객체의 출처가 동일 출처가 아니고, this가 select
요소이거나,
this의 type
속성이 파일 업로드 상태 또는 색상
상태가 아닌 경우, "SecurityError
" DOMException
을
던집니다.
파일 업로드와 색상 입력은 이 확인에서 제외됩니다. 역사적 이유로, 이들의 입력 활성화 동작도 동일한 선택기를 표시하며, 동일 출처 확인을 거치지 않았습니다.
this의 관련 전역 객체가 일시적 활성화를 가지고 있지 않다면, "NotAllowedError
" DOMException
을
던집니다.
this가 select
요소이고
this가 렌더링 중이 아니라면, "NotSupportedError
" DOMException
을
던집니다.
input
또는 select
요소
element에 대해 선택기를 표시하려면 다음과 같이 합니다:
element가 변경 가능하지 않다면, 반환합니다.
사용자 활성화 소비를 element의 관련 전역 객체에 대해 실행합니다.
element가 input
요소이고
element의 type
속성이 파일 업로드 상태에 있는 경우, 다음 단계를 병렬로 실행합니다:
선택적으로, 이 알고리즘의 이전 실행이 종료될 때까지 기다립니다.
사용자에게 파일을 지정하도록 요청하는 프롬프트를 표시합니다. element에 multiple
속성이 설정되지 않은 경우, 하나 이상의 파일이 선택되지 않아야 합니다. 그렇지 않으면 원하는 만큼 선택할 수 있습니다. 파일은 파일 시스템에서 가져올 수도 있고, 사용자
장치에 연결된 카메라로 촬영된 사진 등 즉석에서 생성할 수도 있습니다.
사용자가 선택을 완료할 때까지 기다립니다.
사용자가 선택을 변경하지 않고 프롬프트를 닫은 경우, element에 대해 요소 작업을 대기열에 추가하여 cancel
이라는 이름의
이벤트를 element에서 발생시키고, bubbles
속성을 true로 초기화합니다.
그렇지 않으면, element에 대한 파일 선택을 업데이트합니다.
모든 사용자 인터페이스 사양과 마찬가지로, 사용자 에이전트는 이러한 요구 사항을 해석하는 데 많은 자유를 가집니다. 위 텍스트는 사용자가 프롬프트를 닫거나 선택을
변경한다는 것을 암시합니다. 둘 중 하나만 해당됩니다. 그러나 이러한 가능성을 특정 사용자 인터페이스 요소에 매핑하는 것은 표준에서 명시하지 않습니다. 예를 들어, 사용자 에이전트는
파일을 선택한 후 '취소' 버튼을 클릭하는 것을 선택 항목을 0으로 변경하는 것으로 해석할 수 있으며, 이는 input
및 change
이벤트를 발생시킬 수
있습니다. 또는 클릭을 선택을 변경하지 않고 프롬프트를 닫는 것으로 해석할 수 있으며, 이 경우 cancel
이벤트가 발생합니다.
마찬가지로, 동일한 파일을 다시 선택하는 것을 이전에 선택된 것으로 해석할지, 선택 변경으로 해석할지는 사용자 에이전트에 달려 있습니다.
그렇지 않은 경우, 사용자 에이전트는 요소에 대해 값을 선택하기 위해 관련된 사용자 인터페이스를 표시해야 하며, 사용자가 컨트롤과 상호작용할 때 보통 보여주는 방식으로 표시해야 합니다. (해당 요소에 적용되는 UI가 없다면, 이 단계는 아무런 작업도 하지 않습니다.)
이러한 사용자 인터페이스가 표시되면, 요소의 type
속성 상태에 대해
명시된 사양의 관련 부분에 나와 있는 요소의 동작에 대한 요구 사항을 준수해야 합니다. (예를 들어, 다양한 섹션에서 값 문자열의 결과에 대한 제한을 설명합니다.)
이 단계는 이전에 이 알고리즘에 의해 표시된 다른 선택기를 닫는 것과 같은 부작용을 가질 수 있습니다. (파일 선택기가 닫히면, 이는 위에서 설명한 대로 input
및 change
이벤트를 발생시키거나,
cancel
이벤트를 발생시킬 수
있습니다.)
이 문서를 작성하는 시점에서, 일반적인 브라우저 구현은 다음에 대해 이러한 선택기 UI를 표시합니다:
input
요소의 type
속성이 날짜, 월, 주,
시간, 로컬
날짜 및 시간, 및 색상 상태에 있는 경우;
input
요소의 type
속성이 파일 업로드 상태에 있는 경우 (이러한
경우는 위에서 설명한 특별한 경우를 통해 처리됨); 및
select
요소.
그러나 이 단계의 의도는 모든 선택기 UI 구현을 트리거하는 것입니다. 예를 들어, 사용자 에이전트가 비밀번호 상태에 대해 비밀번호 선택기 UI를 구현한 경우, 이 메서드는 비밀번호 입력에서 호출될 때 해당 선택기 UI를 표시하는 것이 기대됩니다.
input
및 change
이벤트가 적용될 때
(이는 input
컨트롤 중
버튼 및 type
속성이 상태인
컨트롤을 제외한 모든 경우에 해당됩니다),
이벤트는 사용자가 컨트롤과 상호작용했음을 나타내기 위해 발생합니다. input
이벤트는 사용자가 컨트롤의 데이터를 수정할 때마다 발생합니다. change
이벤트는 값이 커밋될 때,
또는 컨트롤이 포커스를 잃을 때 발생합니다.
모든 경우에 input
이벤트는 해당 change
이벤트(있는
경우) 전에 발생합니다.
input
요소가
정의된 입력 활성화
동작을
가지는 경우, 이러한 이벤트가 적용될
경우 이벤트를 디스패치하는 규칙은 위에 설명된
type
속성 상태를 정의하는
섹션에 나와 있습니다. (이는 input
컨트롤 중 체크박스 상태, 라디오
버튼 상태,
또는 파일
업로드 상태를 가진 컨트롤의 경우입니다.)
input
요소가 정의된 입력 활성화
동작이 없지만
이러한 이벤트가 적용되며, 사용자 인터페이스가
상호작용적 조작과 명시적 커밋 동작을 포함하는 경우, 사용자가 요소의 값을 변경할 때
사용자 에이전트는 요소 작업을 큐에 추가해야
하며,
사용자 상호작용 작업
소스에서 input
요소를 주어진 값으로
이벤트를 발생시켜야 합니다. 이벤트 이름은 input
이며,
input
요소에서 발생하고,
버블링
과
구성
속성이 true로 초기화된 상태로 발생해야 합니다. 사용자가 변경 사항을 커밋할 때마다 사용자 에이전트는 요소 작업을 큐에 추가해야 하며,
사용자 상호작용 작업
소스에서 input
요소를 주어진 값으로
해당 요소의 사용자 유효성을 true로 설정하고, 이벤트를 발생시켜야 합니다. 이벤트 이름은 change
이며, input
요소에서 발생하고,
버블링
속성이 true로 초기화된 상태로 발생해야 합니다.
상호작용적 조작과 커밋 동작이 모두 포함된 사용자 인터페이스의 예로는 포인팅 장치를 사용하여 조작하는 슬라이더 형태의 범위 컨트롤이 있습니다.
사용자가 컨트롤의 손잡이를 끌 때마다 위치가 변경되면
input
이벤트가 발생하고, 사용자가 손잡이를 놓아 특정 값에 커밋할 때만 change
이벤트가 발생합니다.
input
요소가 정의된 입력 활성화
동작이 없지만
이러한 이벤트가 적용되며, 사용자 인터페이스에
중간 조작 없이 명시적인 커밋 동작만 포함된 경우, 사용자가 요소의 값을 커밋할 때마다 사용자 에이전트는 요소 작업을 큐에 추가해야 하며,
사용자 상호작용 작업
소스에서 input
요소를 주어진 값으로
먼저 이벤트를 발생시켜야 합니다. 이벤트 이름은 input
이며,
input
요소에서 발생하고,
버블링
및 구성
속성이 true로 초기화된 상태로 발생합니다.
그 후 이벤트를 발생시켜야 합니다. 이벤트 이름은 change
이며,
input
요소에서 발생하고,
버블링
속성이 true로 초기화된 상태로 발생합니다.
커밋 동작을 포함하는 사용자 인터페이스의 예로는 색상 휠을 호출하는 단일 버튼으로 구성된 색상 컨트롤이 있습니다. 대화 상자가 닫힐 때만 값이 변경되는 경우, 이는 명시적인 커밋 동작이 됩니다. 반면에, 컨트롤을 조작하여 색상이 상호작용적으로 변경되는 경우에는 커밋 동작이 없을 수 있습니다.
커밋 동작을 포함하는 사용자 인터페이스의 또 다른 예로는 텍스트 기반 사용자 입력과 드롭다운 달력에서의 사용자 선택을 모두 허용하는 날짜 컨트롤이 있습니다. 텍스트 입력은 명시적인 커밋 단계가 없을 수 있지만, 드롭다운 달력에서 날짜를 선택한 후 드롭다운을 해제하면 커밋 동작이 됩니다.
input
요소가 정의된 입력 활성화
동작이 없지만
이러한 이벤트가 적용되며, 사용자가 명시적인
커밋 동작 없이 요소의 값을 변경하는 경우,
사용자 에이전트는 요소 작업을 큐에
추가해야 하며,
사용자 상호작용 작업
소스에서 input
요소를 주어진 값으로
이벤트를 발생시켜야 합니다. 이벤트 이름은 input
이며,
input
요소에서 발생하고,
버블링
및 구성
속성이 true로 초기화된 상태로 발생합니다.
해당 change
이벤트(있는 경우)는 컨트롤이
포커스를 잃을 때 발생합니다.
사용자가 요소의 값을 변경하는 예로는 텍스트 컨트롤에 입력, 붙여넣기, 해당 컨트롤에서 편집을 실행 취소하는 것이 포함됩니다. 일부 사용자 상호작용은 값 변경을 초래하지 않습니다. 예를 들어, 빈 텍스트 컨트롤에서 "삭제" 키를 누르거나, 컨트롤의 일부 텍스트를 클립보드에서 동일한 텍스트로 대체하는 것입니다.
사용자가 키보드를 사용하여 상호작용하는 동안 포커스된 상태의 슬라이더 형태의 범위 컨트롤은 커밋 단계 없이 사용자가 요소의 값을 변경하는 또 다른 예입니다.
작업이 단순히 input
이벤트만 발생시키는 경우,
사용자 에이전트는 적절한 사용자의 상호작용 휴식을 기다린 후 작업을 큐에 추가할 수 있습니다.
예를 들어, 사용자 에이전트는 사용자가 100ms 동안 키를 누르지 않았을 때 이벤트를 발생시켜,
사용자가 멈출 때만 이벤트를 발생시키도록 할 수 있습니다.
사용자 에이전트가 사용자를 대신하여 input
요소의 값을 변경해야 하는 경우
(예: 양식 자동 완성 기능의 일부로서),
사용자 에이전트는 요소 작업을 큐에
추가해야 하며,
사용자 상호작용 작업
소스에서 input
요소를 주어진 값으로
먼저 이벤트를 발생시켜야 합니다. 이벤트 이름은 input
이며,
input
요소에서 발생하고,
버블링
및 구성
속성이 true로 초기화된 상태로 발생합니다. 그 후 이벤트를 발생시켜야 합니다.
이벤트 이름은 change
이며,
input
요소에서 발생하고,
버블링
속성이 true로 초기화된 상태로 발생해야 합니다.
이러한 이벤트는 스크립트가 폼 컨트롤의 값을 변경한 것에 대해서는 발생하지 않습니다. (이것은 사용자가 컨트롤을 조작하는 것에 응답하여 폼 컨트롤의 값을 업데이트하기 쉽게 하면서 스크립트 자체의 변경 사항을 필터링하여 무한 루프를 방지할 수 있도록 하기 위함입니다.)
이러한 이벤트는 또한 브라우저가 내비게이션 중 상태 복원의 일부로 폼 컨트롤의 값을 변경할 때도 발생하지 않습니다.
button
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
tabindex
속성이 지정된 후손이 없어야 합니다.
disabled
— 양식 컨트롤이
비활성화되었는지 여부
form
— 요소를 양식
요소와 연결합니다.
formaction
— URL을 양식 제출에 사용합니다.
formenctype
— Entry list 인코딩 타입을 양식 제출에 사용합니다.
formmethod
— 양식 제출에 사용할 방법.
formnovalidate
— 양식 제출을 위한 양식 컨트롤 유효성 검사를 건너뜁니다.
formtarget
— 네비게이블을 양식 제출에 사용합니다.
name
— 양식 제출과 form.elements
API에서 사용할
요소의 이름.
popovertarget
— 팝오버
요소를 토글, 표시 또는 숨기기 위해 타겟팅합니다.
popovertargetaction
— 타겟팅된 팝오버 요소가 토글될지, 표시될지, 숨겨질지 나타냅니다.
type
— 버튼의 유형.
value
— 양식 제출에 사용할 값.
[Exposed =Window ]
interface HTMLButtonElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute USVString formAction ;
[CEReactions ] attribute DOMString formEnctype ;
[CEReactions ] attribute DOMString formMethod ;
[CEReactions ] attribute boolean formNoValidate ;
[CEReactions ] attribute DOMString formTarget ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString value ;
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
readonly attribute NodeList labels ;
};
HTMLButtonElement includes PopoverInvokerElement ;
button
요소는 콘텐츠에 의해 라벨링된 버튼을
나타냅니다.
이 요소는 버튼입니다.
type
속성은 버튼이 활성화될 때의
동작을 제어합니다. 이 속성은 다음과 같은 키워드와 상태를 가진 열거된
속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
submit
| 제출 버튼 | 양식을 제출합니다. |
reset
| 리셋 버튼 | 양식을 초기화합니다. |
button
| 버튼 | 아무 작업도 하지 않습니다. |
속성의 누락된 값 기본값 및 잘못된 값 기본값은 모두 제출 버튼 상태입니다.
type
속성이 제출 버튼 상태인 경우,
이 요소는 제출 버튼입니다.
제약 조건 유효성 검사: type
속성이 리셋 버튼 상태이거나 버튼 상태인 경우, 이
요소는 제약 조건 유효성
검사에서 제외됩니다.
button
요소의
element의 활성화
동작은 event에 대해 다음과 같습니다:
element가 비활성화된 경우, 아무 작업도 하지 않습니다.
element가 양식 소유자를 가지고 있는 경우,
element의 type
속성의 상태에 따라 다음을
수행합니다:
element에 대해 팝오버 타겟 속성 활성화 동작을 실행합니다.
form
속성은 button
요소를 양식 소유자와 명시적으로 연결하는 데 사용됩니다. name
속성은 요소의 이름을 나타냅니다. disabled
속성은 컨트롤을 비활성화하고 그 값을
제출하지 않도록 만드는 데 사용됩니다. formaction
, formenctype
, formmethod
, formnovalidate
, 및
formtarget
속성은 양식 제출을 위한
속성입니다.
formnovalidate
속성은
제약 조건 유효성 검사를 트리거하지 않는 제출 버튼을 만드는 데 사용할 수 있습니다.
formaction
, formenctype
, formmethod
, formnovalidate
, 및
formtarget
은 요소의 type
속성이 제출 버튼 상태에 있지
않은 경우 지정할 수 없습니다.
value
속성은 양식 제출을 위해
요소의 값을 제공합니다. 요소의 값은 value
속성의 값이거나, 값이 없는 경우 빈
문자열입니다.
버튼(및 그 값)은 버튼 자체가 양식 제출을 시작한 경우에만 양식 제출에 포함됩니다.
value
IDL 속성은
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
type
IDL 속성은
동일한 이름의 콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
willValidate
, validity
, 및 validationMessage
IDL 속성과 checkValidity()
,
reportValidity()
,
및 setCustomValidity()
메서드는 제약 조건 유효성 검사
API의 일부입니다. labels
IDL
속성은 요소의 레이블
목록을 제공합니다. disabled
, form
, 및 name
IDL 속성은 요소의 양식 API의 일부입니다.
다음 버튼은 "힌트 표시"로 라벨링되어 있으며 활성화될 때 대화 상자를 표시합니다:
< button type = button
onclick = "alert('이 15-20분짜리 곡은 조지 거슈윈이 작곡했습니다.')" >
Show hint
</ button >
select
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
option
, optgroup
, hr
, 및 스크립트 지원 요소들.
autocomplete
— 양식
자동 완성 기능에 대한 힌트.
disabled
— 양식 컨트롤이
비활성화되었는지 여부.
form
— 요소를 양식
요소와 연결합니다.
multiple
— 여러 값을
허용할지 여부.
name
— 양식 제출에 사용할 요소의 이름과 form.elements
API에서 사용할
이름.
required
— 양식 제출을 위해 컨트롤이 필수인지 여부.
size
— 컨트롤의 크기.
multiple
속성이나 size
속성이 값 1 이상으로
존재하는 경우: 작성자용; 구현자용.
[Exposed =Window ]
interface HTMLSelectElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute boolean multiple ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute boolean required ;
[CEReactions ] attribute unsigned long size ;
readonly attribute DOMString type ;
[SameObject ] readonly attribute HTMLOptionsCollection options ;
[CEReactions ] attribute unsigned long length ;
getter HTMLOptionElement ? item (unsigned long index );
HTMLOptionElement ? namedItem (DOMString name );
[CEReactions ] undefined add ((HTMLOptionElement or HTMLOptGroupElement ) element , optional (HTMLElement or long )? before = null );
[CEReactions ] undefined remove (); // ChildNode overload
[CEReactions ] undefined remove (long index );
[CEReactions ] setter undefined (unsigned long index , HTMLOptionElement ? option );
[SameObject ] readonly attribute HTMLCollection selectedOptions ;
attribute long selectedIndex ;
attribute DOMString value ;
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
undefined showPicker ();
readonly attribute NodeList labels ;
};
select
요소는 옵션 집합 중에서 선택할 수
있는 컨트롤을 나타냅니다.
모든 현재 엔진에서 지원됩니다.
multiple
속성은 boolean 속성입니다. 속성이 존재하는 경우 select
요소는 옵션 목록에서 0개 이상의 옵션을 선택할
수 있는 컨트롤을 나타냅니다. 속성이 없으면 select
요소는 옵션 목록에서 단일 옵션을 선택할 수
있는 컨트롤을 나타냅니다.
모든 현재 엔진에서 지원됩니다.
size
속성은 사용자에게 표시할 옵션의
수를 제공합니다. size
속성이 지정된 경우, 이
속성은 유효한 비음수 정수이어야 하며 값이
0보다 커야 합니다.
표시 크기는 select
요소의 size
속성의 값에 비음수 정수 구문 분석 규칙을 적용한 결과이며, 속성이 존재하고 파싱이
성공한 경우입니다. 해당 규칙을 적용해도 속성의 값이 성공적으로 파싱되지 않거나 size
속성이 없는 경우, 요소의 표시 크기는 요소의 multiple
속성이 존재하는 경우
4, 그렇지 않으면 1입니다.
옵션 목록은 select
요소의 모든 option
자식 요소와 select
요소의 모든 optgroup
자식 요소의 모든
option
자식 요소들로 구성되며, 트리 순서에 따릅니다.
모든 현재 엔진에서 지원됩니다.
required
속성은 boolean 속성입니다. 이 속성이 지정된 경우 사용자는 양식을
제출하기 전에 값을 선택해야 합니다.
select
요소에 required
속성이 지정되어 있고,
multiple
속성이 지정되어 있지
않으며, 표시 크기가 1이고, select
요소의 옵션 목록에서 첫 번째 option
요소의 값이 빈 문자열이고, 해당 option
요소의 부모 노드가 select
요소(그리고 optgroup
요소가 아님)인 경우,
해당 option
은 select
요소의 플레이스홀더 라벨 옵션입니다.
select
요소에 required
속성이 지정되어 있고,
multiple
속성이 지정되어 있지
않으며, 표시 크기가 1인 경우, select
요소는 플레이스홀더 라벨 옵션을 가져야 합니다.
위 문단에서 언급한 요구 사항은 select
요소에 값이 1보다 큰 size
속성이 없는 경우에만 적용될 수 있습니다.
제약 조건 유효성 검사: 요소에 required
속성이 지정되어 있고,
select
요소의 옵션 목록에 있는 option
요소 중 어떤 것도 선택됨이 true로 설정되지
않았거나, select
요소의 옵션 목록에서 선택됨이 true로 설정된 유일한
option
요소가 플레이스홀더 라벨 옵션인 경우, 해당 요소는
누락됨을 겪고 있습니다.
multiple
속성이 없고, 요소가 비활성화된 상태가 아니라면,
사용자 에이전트는 사용자가 해당 option
요소를 옵션 목록에서 선택하도록
허용해야 합니다.
이때 해당 옵션이 비활성화되지 않은 상태여야
합니다.
사용자가 이 option
요소를
클릭하거나
값을 변경한 후 요소에서 포커스를 잃거나, 메뉴 명령을 사용하거나, 기타 다른 메커니즘을 통해
선택할 경우, 해당 선택
상태를 true로 설정하고,
더러움 상태로 설정한 후,
선택 업데이트
알림을
전송해야 합니다.
multiple
속성이 없는 경우, option
요소가
select
요소의
옵션 목록에 추가되거나,
해당 선택 상태가
true로 설정될 때, 사용자 에이전트는 해당 목록의 다른 모든
option
요소의 선택 상태를 false로 설정해야 합니다.
multiple
속성이 없고, 요소의 디스플레이 크기가 1보다 크다면,
사용자 에이전트는 사용자가 선택
상태가 true인
option
을 선택 해제하도록
허용해야 합니다.
이 요청이 사용자 에이전트에 전달된 후, 관련 사용자 상호작용 이벤트가 큐에 추가되기 전에 (예: click
이벤트 전에), 사용자 에이전트는 해당 선택 상태를
false로 설정하고, 더러움 상태로
설정한 후,
선택 업데이트
알림을 전송해야 합니다.
주어진 select
요소 element에 대해 선택 상태 설정 알고리즘은 다음 단계를 실행합니다:
element의 multiple
속성이
없고, element의 표시
크기가 1이며, element의 옵션 목록에 있는 option
요소들이 선택됨이 true로
설정되어 있지 않은 경우, 트리 순서에서 비활성화되지 않은 첫 번째 option
요소의 선택됨을
true로 설정하고, 종료합니다.
만약 element의 multiple
속성이 없고,
element의 옵션 목록에 있는 두 개 이상의
option
요소가
선택 상태가
true로 설정된 경우,
옵션 목록에서
마지막 option
요소를 제외한 모든 요소의
선택 상태를
트리 순서에 따라 false로 설정합니다.
option
요소의
HTML 요소 삽입 단계는
insertedNode가 주어졌을 때 다음과 같습니다:
만약 insertedNode의 부모가 select
요소이거나,
insertedNode의 부모가 optgroup
요소이며,
그 부모가 select
요소인
경우,
해당 select
요소의
선택 상태
설정 알고리즘을 실행합니다.
옵션
HTML 요소 제거 단계는
removedNode와 oldParent가 주어졌을 때 다음과 같습니다:
oldParent가 select
요소이거나, oldParent가 optgroup
요소이고 그 부모가 select
요소인 경우,
해당 select
요소의 선택성
설정 알고리즘을 실행합니다.
optgroup
HTML 요소 제거 단계는
removedNode와 oldParent가 주어졌을 때 다음과 같습니다:
oldParent가 select
요소이고 removedNode에 option 자식이 있는 경우, oldParent의
선택성 설정
알고리즘을 실행합니다.
옵션
요소가 옵션 목록에서
재설정을 요청하면, 해당 select
요소의 선택성 설정
알고리즘을 실행합니다.
multiple
속성이 있고,
해당 요소가 비활성화되지 않은 경우,
사용자 에이전트는 사용자가 선택성 전환을 허용해야 합니다. 이때 옵션
요소의
선택성은
비활성화되지 않은 경우에만 가능합니다. 이러한
요소가
전환되면(클릭, 메뉴 명령,
또는 기타 메커니즘을 통해), 관련 사용자 상호작용 이벤트가 대기열에 추가되기 전에(예: 관련 클릭
이벤트 전에),
선택성이 변경되어야
하며(true에서 false로 또는 그 반대),
오염도가 true로 설정되어야 하며, 사용자
에이전트는
select 업데이트
알림을 보내야 합니다.
사용자 에이전트가 select 업데이트 알림을 보내야 할 때,
요소 작업 대기열에 추가하고,
사용자 상호작용 작업 소스에서
주어진 select
요소에 대해 다음 단계를 실행합니다:
select
요소의 사용자 유효성을 true로 설정합니다.
input
이라는
이름으로
select
요소에서 발생시키고,
버블링
및 구성
속성을 true로 초기화합니다.
change
이라는 이름으로
select
요소에서 발생시키고,
버블링
속성을 true로 초기화합니다.
reset 알고리즘은
select
요소
selectElement에 대해 다음과 같습니다:
selectElement의 사용자 유효성을 false로 설정합니다.
selectElement에 대해 선택 상태 설정 알고리즘을 실행합니다.
form
속성은
select
요소를
해당 form 소유자와 명시적으로 연관시키는 데 사용됩니다.
name
속성은 요소의 이름을 나타냅니다.
disabled
속성은
컨트롤을 비활성화하고 해당 값을 제출하지 않도록 합니다.
autocomplete
속성은
사용자 에이전트가 자동 완성 동작을 제공하는 방법을 제어합니다.
select
요소가
비활성화되지 않은 경우,
해당 요소는 mutable합니다.
select.type
모든 현재 엔진에서 지원.
요소에 multiple
속성이 있는 경우 "select-multiple
"를 반환하고, 그렇지 않은 경우 "select-one
"를 반환합니다.
select.options
모든 현재 엔진에서 지원.
선택된 옵션 목록의
HTMLOptionsCollection
을
반환합니다.
select.length [ = value ]
옵션 목록에 있는 요소의 수를 반환합니다.
element = select.item(index)
모든 현재 엔진에서 지원.
select[index]
element = select.namedItem(name)
모든 현재 엔진에서 지원.
선택된 옵션 목록에서 지정된 name과 일치하는 첫 번째 항목을 반환합니다. 일치하는 항목이 없으면 null을 반환합니다.
select.add(element [, before ])
모든 현재 엔진에서 지원.
before로 지정된 노드 앞에 element를 삽입합니다.
before 인수가 생략되거나, null이거나, 범위를 벗어난 경우 element가 목록의 끝에 추가됩니다.
이 메서드는 element가 삽입할 요소의 조상인 경우 "HierarchyRequestError
"
DOMException
을
발생시킵니다.
select.selectedOptions
HTMLSelectElement/selectedOptions
모든 현재 엔진에서 지원.
선택된 옵션 목록의 HTMLCollection
을
반환합니다.
select.selectedIndex [ = value ]
HTMLSelectElement/selectedIndex
모든 현재 엔진에서 지원.
선택된 첫 번째 항목의 인덱스를 반환하거나, 선택된 항목이 없으면 -1을 반환합니다.
select.value [ = value ]
선택된 첫 번째 항목의 값을 반환하거나, 선택된 항목이 없으면 빈 문자열을 반환합니다.
select.showPicker()
select에 대한 해당 선택 UI를 표시하여 사용자가 값을 선택할 수 있도록 합니다.
select가 변경 가능하지 않은
경우
"InvalidStateError
"
DOMException
이
발생합니다.
일시적 사용자 활성화 없이 호출된 경우
"NotAllowedError
"
DOMException
이
발생합니다.
select가 교차 출처 iframe
내부에 있는 경우 "SecurityError
"
DOMException
이
발생합니다.
select가 렌더링되지 않는 경우
"NotSupportedError
"
DOMException
이
발생합니다.
type
IDL 속성은 가져올 때 multiple
속성이 없으면 문자열
"select-one
"을 반환하고, multiple
속성이 있으면 문자열
"select-multiple
"을 반환해야 합니다.
options
IDL 속성은 HTMLOptionsCollection
을
select
노드에 근거하여 반환해야
하며, 이 노드의 필터는 옵션 목록의
요소와 일치합니다.
options
컬렉션은 또한 HTMLSelectElement
객체에 반영됩니다.
지원되는 속성 인덱스는 해당 순간 options
속성에 의해 반환된 객체가
지원하는 인덱스입니다.
length
IDL 속성은 컬렉션에 의해
표현된 노드의 수를 반환해야 합니다. 설정 시, 동일한 이름의 속성처럼 options
컬렉션에서 작동해야 합니다.
item(index)
메서드는 동일한 이름의 메서드가 options
컬렉션에서 동일한 인수로 호출될
때 반환된 값을 반환해야 합니다.
namedItem(name)
메서드는 동일한 이름의
메서드가 options
컬렉션에서 동일한 인수로 호출될 때 반환된 값을 반환해야 합니다.
사용자가 새로운 인덱스 속성의 값을 설정하거나 기존 인덱스 속성의 값을 설정하려고 할 때, 대신 select
요소의 options
컬렉션에 대해 해당 알고리즘을 실행해야 합니다.
유사하게, add(element, before)
메서드는 동일한 options
컬렉션에 있는 동일한 이름의
메서드처럼 작동해야 합니다.
모든 현재 엔진에서 지원됩니다.
remove()
메서드는
인수를 가진 경우 해당 options
컬렉션의 동일한 이름의 메서드처럼 작동해야 하며, 인수가 없는 경우 ChildNode
인터페이스에서 동일한 이름의 메서드처럼 작동해야 합니다. 이 인터페이스는 HTMLSelectElement
상위 인터페이스인
Element
에
의해 구현됩니다.
selectedOptions
IDL 속성은 HTMLCollection
을
select
노드에 근거하여 반환해야
하며, 이 노드의 필터는 옵션 목록
중 선택됨으로 설정된 요소와
일치합니다.
selectedIndex
IDL 속성은 가져올 때 옵션의 인덱스를 반환해야 합니다. 이 옵션은 옵션 목록 중 트리 순서에 따라 첫 번째 옵션
요소에서 선택됨으로 설정된 경우에
해당됩니다. 하나도 없으면 -1을 반환해야 합니다.
설정 시, selectedIndex
속성은 모든 옵션 요소의 선택됨을
false로 설정한 다음, 옵션
목록에서 주어진 새로운 값에 해당하는 옵션
요소를 true로 설정해야 하며, 이때
해당 요소의 변경됨 상태도 true로 설정해야
합니다.
이렇게 하면 선택됨으로 설정된 요소가 없을 수 있습니다. 이는 select
요소에 multiple
속성이 없고, 표시 크기가 1인 경우에도 해당됩니다.
value
IDL 속성은
가져올 때 값을 반환해야 합니다. 이 값은 옵션 목록 중 트리 순서에 따라 첫 번째 옵션
요소에서 선택됨으로 설정된 경우에
해당됩니다. 그렇지 않으면 빈 문자열을 반환해야 합니다.
설정 시, value
속성은 모든 옵션 요소의 선택됨을
false로 설정한 다음, 주어진 새로운 값과 일치하는 옵션 목록의 첫 번째 옵션
요소를 true로 설정해야 하며, 이때
해당 요소의 변경됨 상태도 true로 설정해야
합니다.
이렇게 하면 선택됨으로 설정된 요소가 없을 수 있습니다. 이는 select
요소에 multiple
속성이 없고, 표시 크기가 1인 경우에도 해당됩니다.
multiple
,
required
,
및 size
IDL 속성은
각각 동일한 이름의 콘텐츠 속성을 반영해야 합니다. size
IDL 속성의 기본 값은 0입니다.
역사적인 이유로, size
IDL
속성의 기본 값은 실제 사용된 크기를 반환하지 않습니다. size
콘텐츠 속성이 없는 경우, 이 크기는
multiple
속성의 존재 여부에
따라 1 또는 4가 됩니다.
willValidate
, validity
, 및 validationMessage
IDL 속성들과, checkValidity()
,
reportValidity()
,
및 setCustomValidity()
메서드는 제약 조건 유효성 검사
API의 일부입니다. labels
IDL
속성은 요소의 label
목록을 제공합니다.
disabled
, form
, 및 name
IDL 속성은 요소의 양식 API의 일부입니다.
다음 예제는 select
요소가
사용자가 선택할 수 있는 옵션 집합을 제공하는 데 어떻게 사용될 수 있는지를 보여줍니다. 기본 옵션은 미리 선택되어 있습니다.
< p >
< label for = "unittype" > 단위 유형 선택:</ label >
< select id = "unittype" name = "unittype" >
< option value = "1" > Miner </ option >
< option value = "2" > Puffer </ option >
< option value = "3" selected > Snipey </ option >
< option value = "4" > Max </ option >
< option value = "5" > Firebot </ option >
</ select >
</ p >
기본 옵션이 없을 때는 플레이스홀더를 사용할 수 있습니다:
< select name = "unittype" required >
< option value = "" > 단위 유형 선택 </ option >
< option value = "1" > Miner </ option >
< option value = "2" > Puffer </ option >
< option value = "3" > Snipey </ option >
< option value = "4" > Max </ option >
< option value = "5" > Firebot </ option >
</ select >
여기서 사용자는 여러 옵션 중에서 원하는 만큼 선택할 수 있습니다. 기본적으로 다섯 가지 옵션이 모두 선택되어 있습니다.
< p >
< label for = "allowedunits" > 이 지도에서 활성화할 단위 유형 선택:</ label >
< select id = "allowedunits" name = "allowedunits" multiple >
< option value = "1" selected > Miner </ option >
< option value = "2" selected > Puffer </ option >
< option value = "3" selected > Snipey </ option >
< option value = "4" selected > Max </ option >
< option value = "5" selected > Firebot </ option >
</ select >
</ p >
때로는 사용자가 하나 이상의 항목을 선택해야 합니다. 이 예제는 그러한 인터페이스를 보여줍니다.
< label >
이 Act II 믹스 테이프에 포함할 노래를 선택하세요:
< select multiple required name = "act2" >
< option value = "s1" > It Sucks to Be Me (Reprise)
< option value = "s2" > There is Life Outside Your Apartment
< option value = "s3" > The More You Ruv Someone
< option value = "s4" > Schadenfreude
< option value = "s5" > I Wish I Could Go Back to College
< option value = "s6" > The Money Song
< option value = "s7" > School for Monsters
< option value = "s8" > The Money Song (Reprise)
< option value = "s9" > There's a Fine, Fine Line (Reprise)
< option value = "s10" > What Do You Do With a B.A. in English? (Reprise)
< option value = "s11" > For Now
</ select >
</ label >
때때로 구분자가 유용할 수 있습니다:
< label >
다음에 재생할 노래 선택:
< select required name = "next" >
< option value = "sr" > 랜덤
< hr >
< option value = "s1" > It Sucks to Be Me (Reprise)
< option value = "s2" > There is Life Outside Your Apartment
…
datalist
요소모든 현재 엔진에서 지원됩니다.
option
요소
및 스크립트 지원 요소.
[Exposed =Window ]
interface HTMLDataListElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject ] readonly attribute HTMLCollection options ;
};
datalist
요소는 다른 컨트롤을
위한 사전 정의된 옵션을 나타내는 option
요소 집합을 나타냅니다.
렌더링에서 datalist
요소는
아무 것도 나타내지 않으며, 자식 요소와 함께 숨겨져야 합니다.
datalist
요소는 두 가지
방식으로 사용할 수 있습니다. 가장 간단한 경우, datalist
요소에는 option
자식 요소만 있습니다.
< label >
동물:
< input name = animal list = animals >
< datalist id = animals >
< option value = "Cat" >
< option value = "Dog" >
</ datalist >
</ label >
좀 더 정교한 경우, datalist
요소에 datalist
를 지원하지 않는 하위
클라이언트를 위해 표시할 콘텐츠를 넣을 수 있습니다. 이 경우, option
요소는 select
요소 안에 제공됩니다.
< label >
동물:
< input name = animal list = animals >
</ label >
< datalist id = animals >
< label >
또는 목록에서 선택:
< select name = animal >
< option value = "" >
< option > Cat
< option > Dog
</ select >
</ label >
</ datalist >
datalist
요소는 input
요소의 list
속성을 사용하여 input
요소에 연결됩니다.
datalist
요소의 자손인
option
요소 중 비활성화되지 않았고, 값이 빈 문자열이 아닌 문자열인 각 요소는 제안을
나타냅니다. 각 제안에는 값과 레이블이 있습니다.
datalist.options
HTMLCollection
을
반환하며, 이 컬렉션은 option
요소의
집합입니다.
options
IDL 속성은 HTMLCollection
을
반환해야 하며, 이 컬렉션은 datalist
노드에 근거하고,
option
요소와 일치하는 필터를
가집니다.
제약 조건 유효성 검사: 요소에 datalist
요소의 상위 요소가
있는 경우, 제약
조건 유효성 검사에서 제외됩니다.
optgroup
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
select
요소의 자식 요소로서.
option
및 스크립트 지원 요소.
optgroup
요소의 종료 태그는 optgroup
요소가 바로
뒤따르거나, hr
요소가 바로 뒤따르거나, 부모
요소에 더 이상 콘텐츠가 없는 경우 생략할 수 있습니다.
disabled
— 폼
컨트롤이 비활성화되었는지 여부
label
— 사용자에게 표시되는
레이블
[Exposed =Window ]
interface HTMLOptGroupElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
[CEReactions ] attribute DOMString label ;
};
optgroup
요소는 공통
레이블을 가진 option
요소 그룹을
나타냅니다.
요소의 option
요소 그룹은 optgroup
요소의 자식인
option
요소로 구성됩니다.
select
요소에서 option
요소를 표시할 때, 사용자
에이전트는 해당 그룹의 option
요소를 서로 관련 있고 다른 option
요소와는 별도로 표시해야 합니다.
모든 현재 엔진에서 지원됩니다.
disabled
속성은
boolean 속성이며, 그룹 전체를 비활성화하는 데 사용할 수 있습니다.
label
속성은 필수입니다.
이 속성의 값은 사용자 인터페이스의 그룹 이름을 지정합니다. 사용자 에이전트는 select
요소 내에서 option
요소 그룹을 레이블링할 때 이
속성의 값을 사용해야 합니다.
disabled
및 label
속성은 동일한 이름의 해당 콘텐츠 속성을 반영해야 합니다.
optgroup
요소를 선택할 방법은 없습니다. 오직 option
요소만 선택할 수 있습니다.
optgroup
요소는 단지
option
요소 그룹에 대한 레이블만
제공합니다.
다음 코드는 세 가지 강의 중 일부 수업을 드롭다운 위젯에서 선택할 수 있도록 하는 방법을 보여줍니다:
< form action = "courseselector.dll" method = "get" >
< p > 어느 강의를 듣고 싶으신가요?
< p >< label > 강의:
< select name = "c" >
< optgroup label = "8.01 물리학 I: 고전 역학" >
< option value = "8.01.1" > 강의 01: 10의 거듭제곱
< option value = "8.01.2" > 강의 02: 1차원 운동학
< option value = "8.01.3" > 강의 03: 벡터
< optgroup label = "8.02 전기 및 자기" >
< option value = "8.02.1" > 강의 01: 우리의 세계를 무엇이 유지하는가?
< option value = "8.02.2" > 강의 02: 전기장
< option value = "8.02.3" > 강의 03: 전기 플럭스
< optgroup label = "8.03 물리학 III: 진동 및 파동" >
< option value = "8.03.1" > 강의 01: 주기적 현상
< option value = "8.03.2" > 강의 02: 비트
< option value = "8.03.3" > 강의 03: 감쇠와 함께 강제 진동
</ select >
</ label >
< p >< input type = submit value = "▶ 재생" >
</ form >
option
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
select
요소의 자식 요소로 사용.
datalist
요소의 자식
요소로 사용.
optgroup
요소의 자식
요소로 사용.
label
속성과 value
속성이 있는 경우: 아무것도 없음.
label
속성이 있지만
value
속성이 없는 경우: 텍스트.
label
속성이 없고
datalist
요소의 자식이
아닌 경우: 텍스트 (요소 간 공백 제외).
label
속성이 없고
datalist
요소의 자식인
경우: 텍스트.
disabled
— 폼 컨트롤이
비활성화되었는지 여부
label
— 사용자에게 표시되는 레이블
selected
— 기본적으로
선택되었는지 여부
value
— 폼 제출 시 사용될 값
[Exposed =Window ,
LegacyFactoryFunction =Option (optional DOMString text = "", optional DOMString value , optional boolean defaultSelected = false , optional boolean selected = false )]
interface HTMLOptionElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString label ;
[CEReactions ] attribute boolean defaultSelected ;
attribute boolean selected ;
[CEReactions ] attribute DOMString value ;
[CEReactions ] attribute DOMString text ;
readonly attribute long index ;
};
option
요소는 select
요소의 옵션을 나타내거나,
datalist
요소에서 제안 목록의
일부로 사용됩니다.
일부 상황에서 select
요소의 정의에
설명된 대로, option
요소는 select
요소의 플레이스홀더 레이블 옵션이 될 수 있습니다.
플레이스홀더 레이블 옵션은 실제 옵션을
나타내는 것이 아니라, select
컨트롤에
대한 레이블을 나타냅니다.
모든 현재 엔진에서 지원됩니다.
disabled
속성은 불리언 속성입니다.
option
요소는
disabled
속성이 있거나,
optgroup
요소의 자식이며 그 요소에
disabled
속성이 있을 때 비활성화됩니다.
option
요소가
비활성화된 경우,
클릭
이벤트가
대기 중이거나
사용자 상호작용 태스크 소스에서
해당 요소로 전송되지 않도록 해야 합니다.
label
속성은 요소에 대한 레이블을 제공합니다.
option
요소의
레이블은
label
콘텐츠 속성의 값이며,
만약 값이 비어 있지 않다면 그 값을 사용하고, 그렇지 않으면 요소의
text
IDL 속성의 값을 사용합니다.
label
콘텐츠 속성이
지정된 경우, 그 값은 비어 있지 않아야 합니다.
value
속성은 요소에 대한 값을 제공합니다.
option
요소의
값은
value
콘텐츠 속성의 값이며,
만약 값이 없다면 요소의 text
IDL 속성의 값을
사용합니다.
selected
속성은 불리언 속성입니다.
이 속성은 요소의 기본 선택 상태를
나타냅니다.
더티 상태는
option
요소의
불리언 상태로, 초기에는 false입니다.
이 상태는 selected
콘텐츠 속성을 추가하거나 제거할 때 어떤 영향을 미칠지를 제어합니다.
선택 상태는
option
요소의
불리언 상태로, 초기에는 false입니다.
별도로 명시되지 않는 한, 요소가 생성될 때 이 상태는
selected
속성이 있는 경우 true로 설정됩니다.
option
요소의
selected
속성이
추가될 때, 만약 요소의 더티 상태가
false라면 선택 상태는 true로 설정되어야 합니다.
option
요소의
selected
속성이
제거될 때, 만약 더티 상태가 false라면 선택 상태는 false로 설정되어야 합니다.
Option()
생성자는
세 개 이하의 인수로 호출될 때, 세 번째 인수가 true여도 선택 상태를 항상 false로 재설정합니다.
네 번째 인수는 생성자를 사용할 때 선택 상태를 명시적으로 설정하는 데 사용할 수 있습니다.
select
요소에
multiple
속성이
지정되지 않은 경우, 그 요소의 하위 요소 중
option
요소는
하나만 selected
속성이 설정될 수 있습니다.
option
요소의
인덱스는
같은 옵션 목록에
있는 앞에 위치한 다른
option
요소의
개수입니다.
만약 option
요소가
옵션 목록에 속하지 않는다면,
그 요소의 인덱스는 0입니다.
option.selected
요소가 선택된 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
요소의 현재 상태를 덮어쓰도록 설정할 수 있습니다.
option.index
option.form
요소의 form
요소를
반환하며, 그렇지 않으면 null을 반환합니다.
option.text
textContent
와
동일하지만,
공백이 압축되고 script
요소는 생략됩니다.
option = new Option([ text [, value [, defaultSelected [, selected ] ] ] ])
새로운 option
요소를 반환합니다.
text 인수는 요소의 내용을 설정합니다.
value 인수는 value
속성을 설정합니다.
defaultSelected 인수는 selected
속성을 설정합니다.
selected 인수는 요소가 선택되었는지 여부를 설정합니다. 이 인수가 생략되면, defaultSelected 인수가 true여도 요소는 선택되지 않습니다.
disabled
IDL 속성은 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
defaultSelected
IDL 속성은
selected
콘텐츠 속성을
반영해야 합니다.
label
IDL 속성은 가져올 때,
label
콘텐츠 속성이 있으면 그 속성의 값을 반환해야 하며,
그렇지 않으면 요소의 라벨을
반환해야 합니다. 설정할 때는 요소의
label
콘텐츠 속성이 새 값으로 설정되어야 합니다.
value
IDL 속성은 가져올 때 요소의 값을
반환해야 합니다. 설정할 때는 요소의
value
콘텐츠 속성이 새 값으로 설정되어야 합니다.
selected
IDL 속성은 가져올 때 요소의
선택 상태가 true이면 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다. 설정할 때는 요소의
선택 상태를
새 값으로 설정하고,
dirtiness를 true로 설정한 다음, 요소가
재설정을 요청하도록 해야 합니다.
index
IDL 속성은 요소의
인덱스를 반환해야 합니다.
text
IDL 속성은 가져올 때,
ASCII 공백 제거 및 압축의 결과를 반환해야 합니다.
이는 모든 data의 연결로 구성된 것으로,
Text
노드 자손을 option
요소의 트리 순서에서 제외하고, 스크립트
또는 SVG 스크립트
요소가 아닌 요소만 포함됩니다.
text
속성의 설정자는 이 요소 내에서 주어진 값으로 문자열을 모두 교체해야 합니다.
form
IDL 속성의 동작은
option
요소가
select
요소 안에 있는지 여부에 따라 달라집니다.
option
요소의 부모가
select
요소이거나,
부모가 optgroup
요소이고 그 optgroup
요소의 부모가 select
요소인 경우, form
IDL 속성은 해당 select
요소의 form
IDL 속성과 동일한 값을 반환해야 합니다. 그렇지 않으면 null을 반환해야 합니다.
레거시 팩토리 함수는
HTMLOptionElement
객체를 생성하기 위해 제공되며,
DOM의
createElement()
와 같은 팩토리 메서드 외에도 사용할 수 있습니다:
Option(text, value, defaultSelected, selected)
.
이 레거시 팩토리 함수가 호출되면 다음 단계를 수행해야 합니다:
document를
현재 글로벌 객체의
관련 Document
로 설정합니다.
option를 document와
option
및 HTML 네임스페이스를
사용하여
요소 생성의 결과로 설정합니다.
text가 빈 문자열이 아니면, option에 새 Text
노드를 추가하고, 그 데이터는 text로 설정합니다.
defaultSelected가 true이면, option에 대해 "selected
"와
빈 문자열을 사용하여
속성 값을 설정합니다.
selected가 true이면, option의 selectedness를 true로 설정하고, 그렇지 않으면 selectedness를 false로 설정합니다 (defaultSelected가 true이더라도).
option를 반환합니다.
textarea
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
autocomplete
— 폼 자동 완성 기능을 위한 힌트
cols
— 줄당 최대 문자
수
dirname
— 폼 제출 시 요소의
방향성을 보내는 데 사용할 폼 제어의 이름
disabled
— 폼 제어가
비활성화되었는지 여부
form
— 요소를 form
요소와 연결
maxlength
— 값의 최대 길이
minlength
— 값의 최소 길이
name
— 폼 제출 시 사용하기 위해 요소의 이름
또는 form.elements
API 내에서 사용
placeholder
— 폼 제어 내에 배치될 사용자에게 보이는 라벨
readonly
— 사용자가 값을 편집할 수 있는지 여부
required
— 폼 제출 시 제어가 필수인지 여부
rows
— 표시할 줄 수
wrap
— 폼 제출을 위해
폼 제어의 값이 어떻게 줄바꿈될지
textarea
요소는 요소의
raw value를 위한 여러 줄의 일반 텍스트 편집 제어를 나타냅니다. 제어의 내용은 제어의 기본 값을 나타냅니다.
textarea 제어의 raw value
는 초기에는
빈 문자열이어야 합니다.
이 요소는 양방향 알고리즘과 관련된 렌더링 요구 사항을 가지고 있습니다.
readonly
속성은 사용자가 텍스트를 편집할 수 있는지 여부를 제어하는 boolean 속성입니다.
이 예에서는 텍스트 제어가 읽기 전용 파일을 나타내기 때문에 읽기 전용으로 표시됩니다:
Filename: < code > /etc/bash.bashrc</ code >
< textarea name = "buffer" readonly >
# System-wide .bashrc file for interactive bash(1) shells.
# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.
# If not running interactively, don't do anything
[ -z "$PS1" ] &&& return
...</ textarea >
제약 조건 유효성 검사: readonly
속성이
textarea
요소에
지정된 경우, 해당 요소는 제약 조건 유효성 검사에서 제외됩니다.
textarea
요소는
readonly
속성이 지정되지 않고 disabled
되지 않은 경우 변경 가능 상태입니다.
textarea
요소가 변경 가능 상태인 경우, 사용자는 해당 raw value를 편집할
수 있어야 합니다: 사용자 에이전트는 사용자가 텍스트를 편집하고 삽입하며 삭제할 수 있도록 허용해야 하며, U+000A LINE FEED (LF) 문자 형태로 줄 바꿈을 삽입하고 제거할 수 있도록 해야
합니다. 사용자가 요소의 raw
value를 변경할 때마다, 사용자 에이전트는 요소 작업을 큐에 추가하고, 사용자 상호작용 작업 소스에 input
이벤트를 textarea
요소에서 발생시켜야 하며, 이때 bubbles
와
composed
속성은 true로 초기화되어야 합니다. 사용자 에이전트는 작업을 큐에 추가하기 전에 사용자의 상호작용에 적절한 중단이 있을 때까지 기다릴 수 있습니다; 예를 들어, 사용자 에이전트는 사용자가 100ms
동안 키를 누르지 않을 때까지 기다려 이벤트를 사용자가 멈췄을 때 발생시키고, 각각의 키 누름에 대해 연속적으로 이벤트를 발생시키지 않을 수 있습니다.
textarea
요소의 dirty value flag는 사용자가 raw value를
변경하는 방식으로 제어와 상호작용할 때마다 true로 설정되어야 합니다.
textarea 요소의 클로닝 단계
는 복사되는
노드에서 raw value와
dirty value flag를 복사본으로 전달해야 합니다.
textarea 요소의 자식 변경 단계
는 요소의
dirty value flag가 false인 경우, 요소의 raw value를 자식 텍스트 내용으로 설정해야 합니다.
textarea 요소의 리셋 알고리즘
은 사용자 유효성을 false로 설정하고, dirty value flag를 다시 false로 설정하며,
요소의 raw value를
자식 텍스트 내용으로 설정합니다.
textarea
요소가
열린 요소 스택에서 팝업될 때, 사용자
에이전트는 요소의 리셋
알고리즘을 호출해야 합니다.
textarea
요소가
변경 가능 상태인 경우, 사용자 에이전트는 사용자가
요소의 글쓰기 방향을 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 변경할 수 있도록 허용해야 합니다. 사용자가 이를 수행한 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다:
요소의 dir
속성을 사용자가 왼쪽에서 오른쪽 글쓰기 방향을
선택한 경우 "ltr
"로, 오른쪽에서 왼쪽
글쓰기 방향을 선택한 경우 "rtl
"로
설정합니다.
요소 작업을 큐에 추가하고,
textarea
요소에 대해 input 이벤트를
발생시키며, bubbles
와
composed
속성을 true로 초기화합니다.
cols
속성은 줄당
예상 최대 문자 수를 지정합니다. cols
속성이 지정된 경우, 해당
값은 0보다 큰 유효한 0 이상의
정수여야 합니다. 속성 값에 대해 0 이상의 정수를 파싱하는 규칙을 적용한 결과가 0보다 큰 숫자가
나오면 요소의 문자 너비는 그 값입니다; 그렇지 않으면 20입니다.
사용자 에이전트는 textarea
요소의 문자 너비를 서버가 선호하는 줄당
문자 수에 대한 힌트로 사용할 수 있습니다(예: 시각적 사용자 에이전트의 경우 해당 문자 수로 제어 너비를 만듭니다). 시각적 렌더링에서 사용자 에이전트는 사용자의 입력을 렌더링에서 줄당 너비가 이
문자 수를 초과하지 않도록 줄바꿈해야 합니다.
rows
속성은 표시할
줄 수를 지정합니다. rows
속성이 지정된 경우, 해당 값은 0보다 큰 유효한 0 이상의 정수여야 합니다. 속성 값에 대해 0 이상의 정수를 파싱하는 규칙을 적용한 결과가 0보다 큰 숫자가
나오면 요소의 문자 높이는 그 값입니다; 그렇지 않으면 2입니다.
시각적 사용자 에이전트는 문자 높이에 지정된 줄 수만큼 제어의 높이를 설정해야 합니다.
wrap
속성은 다음
키워드와 상태를 가진 열거된 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
soft |
소프트 | 텍스트가 제출될 때는 줄바꿈되지 않습니다(그러나 렌더링 시에는 여전히 줄바꿈될 수 있음). |
hard |
하드 | 텍스트가 제출될 때 줄바꿈되도록 사용자 에이전트에 의해 새 줄이 추가됩니다. |
속성의 누락된 값 기본값 및 잘못된 값 기본값은 모두 소프트 상태입니다.
요소의 wrap
속성이 하드 상태인 경우,
cols
속성이 지정되어야
합니다.
역사적 이유로 인해, 요소의 값은 세 가지 다른 목적을 위해 세 가지 다른 방식으로 정규화됩니다. raw value는 원래 설정된 값입니다. 이는 정규화되지 않습니다. API 값은 value
IDL 속성, textLength
IDL 속성, 및 maxlength
및
minlength
내용 속성에서 사용되는
값입니다. 이 값은 줄 바꿈이 U+000A LINE FEED (LF) 문자를 사용하도록 정규화됩니다. 마지막으로, 이 사양의 폼 제출 및 기타 처리 모델에서 사용되는 값이 있습니다. 이는 API 값과 동일하게 정규화되며, 필요에 따라
요소의 wrap
속성을 감안하여
추가적인 줄 바꿈이 삽입됩니다.
요소의 API 값을 얻기 위한 알고리즘은 요소의 raw value를 반환하며, 줄 바꿈을 정규화합니다.
요소의 값은 요소의 API 값에 textarea 줄 바꿈 변환을 적용한 것입니다. textarea 줄 바꿈 변환은 문자열에 적용되는 다음 알고리즘입니다:
요소의 wrap
속성이 하드 상태인 경우, 각 줄에 문자 너비를
초과하지 않도록 U+000A LINE FEED (LF) 문자를 사용하여 문자열에 줄 바꿈을 삽입합니다. 이 요구 사항을 위해 줄은 문자열의 시작, 끝, 및 U+000A LINE FEED
(LF) 문자에 의해 구분됩니다.
maxlength
속성은 폼 제어 maxlength
속성입니다.
textarea
요소가
최대 허용 값 길이를
가지고 있는 경우, 요소의 자식은 요소의 값의 길이가 하위 텍스트 내용과 함께 줄 바꿈을 정규화한 후에도 요소의 최대 허용 값 길이보다 작거나 같아야 합니다.
minlength
속성은 폼 제어 minlength
속성입니다.
required
속성은 사용자가 값을 입력하기 전에 폼을 제출해야 하는지 여부를 나타내는 boolean 속성입니다.
제약 조건 유효성 검사: 요소에 required
속성이
지정되어 있고, 요소가 변경 가능 상태이며, 요소의 값이 빈 문자열인 경우, 해당 요소는 값이 누락된
상태입니다.
placeholder
속성은 제어에 값이 없을 때 사용자의 데이터 입력을 돕기 위한 짧은
힌트(단어 또는 짧은 구)를 나타냅니다. 힌트는 샘플 값이나 예상 형식에 대한 간단한 설명일 수 있습니다.
placeholder
속성은 label
에 대한 대체로
사용해서는 안 됩니다. 더 긴 힌트나 기타 권고 텍스트의 경우 title
속성이 더 적합합니다.
이 메커니즘들은 매우 유사하지만 미묘하게 다릅니다: 제어의 label
에 의해 제공되는 힌트는 항상
표시됩니다; placeholder
속성에 제공된 짧은 힌트는 사용자가 값을 입력하기 전에 표시됩니다; title
속성에 제공된 힌트는 사용자가 추가적인 도움을 요청할
때 표시됩니다.
사용자 에이전트는 제어의 값이 빈 문자열이고 제어가 포커스되지 않은 경우 이 힌트를 사용자에게 제시해야 합니다(예: 빈 포커스되지 않은 제어 내에 표시). 힌트에서 모든 U+000D CARRIAGE RETURN U+000A LINE FEED 문자 쌍(CRLF)과 힌트의 모든 다른 U+000D CARRIAGE RETURN (CR) 및 U+000A LINE FEED (LF) 문자는 렌더링 시 줄 바꿈으로 처리되어야 합니다.
사용자 에이전트가 제어에 포커스가 있을 때 이 힌트를 사용자에게 표시하지 않는 경우, 사용자가 제어를 포커스하기 전에 제어를 검사할 기회를 가지지 못했기 때문에, autofocus
속성의 결과로 포커스된
경우에는 제어에 대한 힌트를 여전히 표시해야 합니다.
name
속성은 요소의 이름을 나타냅니다.
dirname
속성은 요소의 방향성이 제출되는 방식을 제어합니다.
disabled
속성은 제어를
비활성화하고 그 값이 제출되지 않도록 합니다.
form
속성은 textarea
요소를
명시적으로 폼 소유자와 연결하는 데 사용됩니다.
autocomplete
속성은 사용자 에이전트가 자동 완성 동작을 제공하는 방식을 제어합니다.
textarea.type
"textarea
" 문자열을 반환합니다.
textarea.value
요소의 현재 값을 반환합니다.
값을 변경하기 위해 설정할 수 있습니다.
cols
,
placeholder
,
required
,
rows
, 및
wrap
IDL 속성은 각각 동일한 이름의 내용 속성을
반영해야 합니다.
cols
및
rows
속성은
0보다 큰 양수로
제한되며, cols
IDL 속성의
기본 값은 20입니다.
rows
IDL 속성의
기본 값은 2입니다.
dirName
IDL 속성은
dirname
내용 속성을
반영해야 합니다.
maxLength
IDL 속성은
반영해야 하며,
maxlength
내용 속성은
0
이상의 양수로 제한됩니다.
minLength
IDL 속성은
반영해야 하며,
minlength
내용 속성은
0 이상의 양수로 제한됩니다.
readOnly
IDL 속성은
반영해야 하며,
readonly
내용 속성을 반영해야 합니다.
type
IDL 속성은 "textarea
" 값을 반환해야 합니다.
defaultValue
속성의 getter는 요소의
자식 텍스트 내용을 반환해야 합니다.
defaultValue
속성의 setter는 이 요소 내에서 주어진 값으로
모든 문자열을 대체해야 합니다.
value
IDL 속성은 getter에서 요소의
API 값을 반환해야 하며, setter에서 다음
단계를 수행해야 합니다:
oldAPIValue를 이 요소의 API 값으로 설정합니다.
이 요소의 raw value를 새 값으로 설정합니다.
이 요소의 dirty value flag를 true로 설정합니다.
새 API 값이
oldAPIValue와 다르면, 텍스트 입력 커서 위치를 텍스트 제어의 끝으로 이동하고, 선택된 텍스트를
선택 해제하고, 선택
방향을 "none
"으로 재설정합니다.
textLength
IDL 속성은 요소의 길이를 반환해야 합니다.
willValidate
,
validity
, 및 validationMessage
IDL 속성들과 checkValidity()
,
reportValidity()
,
setCustomValidity()
메서드는 제약 조건 유효성
검사 API의 일부입니다. labels
IDL 속성은 요소의 label
목록을 제공합니다. select()
,
selectionStart
,
selectionEnd
,
selectionDirection
,
setRangeText()
,
및 setSelectionRange()
메서드와 IDL 속성은 요소의 텍스트 선택을 노출합니다.
다음은 폼에서 자유 형식의 텍스트 입력을 위한 textarea
의
예입니다:
< p > If you have any comments, please let us know: < textarea cols = 80 name = comments ></ textarea ></ p >
댓글에 최대 길이를 지정하려면 maxlength
속성을 사용할 수 있습니다:
< p > If you have any short comments, please let us know: < textarea cols = 80 name = comments maxlength = 200 ></ textarea ></ p >
기본 값을 제공하려면 텍스트를 요소 내에 포함할 수 있습니다:
< p > If you have any comments, please let us know: < textarea cols = 80 name = comments > You rock!</ textarea ></ p >
최소 길이도 지정할 수 있습니다. 여기에서는 사용자가 채워야 하는 편지가 있습니다; 템플릿(최소 길이보다 짧음)이 제공되지만, 폼을 제출하기에는 충분하지 않습니다:
< textarea required minlength = "500" > Dear Madam Speaker,
Regarding your letter dated ...
...
Yours Sincerely,
...</ textarea >
명시적인 템플릿을 제공하지 않고도 사용자에게 기본 형식을 제안하기 위해 placeholder를 사용할 수도 있습니다:
< textarea placeholder = "Dear Francine,
They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?
Love,
Daddy" ></ textarea >
브라우저가 요소의 방향성을 값과 함께 제출하도록
하려면 dirname
속성을 지정할
수 있습니다:
< p > If you have any comments, please let us know (you may use either English or Hebrew for your comments):
< textarea cols = 80 name = comments dirname = comments.dir ></ textarea ></ p >
output
요소모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
for
— 계산이 수행된 컨트롤 지정
form
— 요소를 양식
요소와 연결
name
— form.elements
API에서 사용할
요소의 이름.
[Exposed =Window ]
interface HTMLOutputElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject , PutForwards =value ] readonly attribute DOMTokenList htmlFor ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString name ;
readonly attribute DOMString type ;
[CEReactions ] attribute DOMString defaultValue ;
[CEReactions ] attribute DOMString value ;
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity() (DOMString error );
readonly attribute NodeList labels ;
};
output
요소는 애플리케이션에서 수행된 계산의
결과 또는 사용자 작업의 결과를 나타냅니다.
이 요소는 이전에 실행된 다른 프로그램의 출력을 인용하는 데 적합한 samp
요소와 대조될 수 있습니다.
모든 최신 엔진에서 지원됨.
for
컨텐츠 속성은 계산 결과와 계산에
사용된 값 또는 계산에 영향을 준 요소들 간의 명확한 관계를 설정할 수 있도록 합니다. for
속성이 지정된 경우, 고유한 공백으로 구분된 토큰 집합으로 구성된 문자열을 포함해야
하며, 이 중 어떤 것도 다른 토큰과 동일하지 않아야 하며 각각은 동일한 트리 내의 요소 ID 값을 가져야 합니다.
form
속성은 output
요소를 폼 소유자와 명시적으로 연결하는 데 사용됩니다. name
속성은 요소의 이름을 나타냅니다. output
요소는 폼 컨트롤의 이벤트
핸들러에서 쉽게 참조될 수 있도록 폼과 연결되며, 요소의 값 자체는 폼이 제출될 때 제출되지
않습니다.
이 요소에는 기본값 재정의(null 또는 문자열)이 있습니다. 초기에는 null이어야 합니다.
요소의 기본값은 다음 단계에 따라 결정됩니다:
output
요소의 재설정 알고리즘은 다음 단계를
실행합니다:
모든 문자열을 대체하여 이 요소의 기본값을 이 요소 내에서 대체합니다.
이 요소의 기본값 재정의를 null로 설정합니다.
output.value [ = value ]
요소의 현재 값을 반환합니다.
설정할 수 있으며, 값을 변경할 수 있습니다.
output.defaultValue [ = value ]
요소의 현재 기본값을 반환합니다.
설정할 수 있으며, 기본값을 변경할 수 있습니다.
output.type
문자열 "output
"을 반환합니다.
value
getter
단계는 this의 하위
텍스트 내용을 반환하는 것입니다.
value
setter 단계는 다음과 같습니다:
모든 문자열을 대체하여 this 내에서 주어진 값으로 대체합니다.
defaultValue
getter 단계는 this의 기본값을 반환하는 것입니다.
defaultValue
setter 단계는 다음과 같습니다:
type
getter 단계는
"output
"을 반환하는 것입니다.
htmlFor
IDL
속성은 반영하여 for
컨텐츠 속성을 반영해야 합니다.
willValidate
, validity
, 및 validationMessage
IDL 속성, 그리고 checkValidity()
,
reportValidity()
,
및 setCustomValidity()
메서드는 제약 조건 유효성 검사
API의 일부입니다. labels
IDL
속성은 요소의 레이블
목록을 제공합니다. form
및 name
IDL 속성은 요소의 폼 API의 일부입니다.
간단한 계산기는 output
을 사용하여
계산된 결과를 표시할 수 있습니다:
< form onsubmit = "return false" oninput = "o.value = a.valueAsNumber + b.valueAsNumber" >
< input id = a type = number step = any > +
< input id = b type = number step = any > =
< output id = o for = "a b" ></ output >
</ form >
이 예에서는 output
요소가 원격
서버에서 수행된 계산의 결과를 실시간으로 보고하는 데 사용됩니다:
< output id = "result" ></ output >
< script >
var primeSource = new WebSocket( 'ws://primes.example.net/' ); primeSource. onmessage = function ( event) {
document. getElementById( 'result' ). value = event. data; } </ script >
progress
요소현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
progress
요소의 하위
요소는 없어야 합니다.
value
— 요소의 현재 값
max
— 범위의 상한선
[Exposed =Window ]
interface HTMLProgressElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute double value ;
[CEReactions ] attribute double max ;
readonly attribute double position ;
readonly attribute NodeList labels ;
};
progress
요소는 작업의 완료
진행 상황을 나타냅니다. 진행 상황은 불확정일 수 있으며, 이는 작업이 진행 중이지만 작업이 완료되기까지 남은 작업량이 명확하지 않음을 의미합니다(예: 작업이 원격 호스트의 응답을 기다리고 있음).
또는 진행 상황은 0에서 최대치까지의 숫자로 표현되며, 지금까지 완료된 작업의 비율을 나타냅니다.
현재 모든 엔진에서 지원됩니다.
이 요소는 현재 작업 완료 상황을 나타내는 두 가지 속성을 가집니다. value
속성은 작업의 얼마나 완료되었는지를 지정하며, max
속성은 작업이 총 몇 단계를 요구하는지를 지정합니다. 단위는
임의이며 지정되지 않습니다.
결정적 진행 표시줄을 만들려면 value
속성을 추가하여 현재 진행
상황을 지정합니다(0.0에서 1.0까지의 숫자이거나, max
속성이 지정된 경우 max
속성 값까지의 숫자). 불확정적 진행
표시줄을 만들려면 value
속성을
제거합니다.
저자들은 레거시 사용자 에이전트 사용자를 위해 진행 상황을 요소 내 텍스트로 현재 값과 최대 값을 포함하는 것을 권장합니다.
다음은 자동화된 작업의 진행 상황을 보여주는 웹 애플리케이션의 코드 조각입니다:
< section >
< h2 > 작업 진행 상황</ h2 >
< p > 진행: < progress id = p max = 100 >< span > 0</ span > %</ progress ></ p >
< script >
var progressBar = document. getElementById( 'p' );
function updateProgress( newValue) {
progressBar. value = newValue;
progressBar. getElementsByTagName( 'span' )[ 0 ]. textContent = newValue;
}
</ script >
</ section >
(이 예제의 updateProgress()
메서드는 작업이 진행될 때 페이지의 다른 코드에 의해 실제 진행 표시줄을 업데이트하기 위해 호출됩니다.)
value
및 max
속성은 존재할 경우 유효한 부동 소수점 숫자여야
합니다. value
속성이 존재하는
경우 그 값은 0보다 크거나 같고, max
속성 값보다 작거나 같아야 하며, 존재하지 않을 경우 1.0 이하여야 합니다. max
속성이 존재하는 경우 그 값은 0보다
커야 합니다.
progress
요소는 게이지일 뿐인 것을 나타내는 데는 부적합합니다. 예를 들어, progress
를 사용하여 디스크
공간 사용량을 나타내는 것은 부적절합니다. 대신, meter
요소를 이러한 경우에 사용할 수
있습니다.
사용자 에이전트 요구사항: value
속성이 생략된 경우 진행
표시줄은 불확정적 진행 표시줄입니다. 그렇지 않으면, 결정적 진행 표시줄입니다.
진행 표시줄이 결정적 진행 표시줄이고 요소에 max
속성이 있는 경우, 사용자 에이전트는
max
속성 값을 부동 소수점 숫자 값을 구문 분석하는 규칙에 따라 구문
분석해야 합니다. 이 작업이 오류를 발생시키지 않고 구문 분석된 값이 0보다 크면, 진행 표시줄의 최대 값은 해당 값입니다. 그렇지
않으면, 요소에 max
속성이 없거나,
있더라도 구문 분석 중 오류가 발생했거나, 구문 분석된 값이 0보다 작거나 같은 경우, 진행 표시줄의 최대 값은 1.0입니다.
진행 표시줄이 결정적 진행 표시줄인 경우, 사용자 에이전트는 value
속성 값을 부동 소수점 숫자 값을 구문 분석하는 규칙에 따라 구문
분석해야 합니다. 이 작업이 오류를 발생시키지 않고 구문 분석된 값이 0보다 크면, 진행 표시줄의 값은 해당 구문 분석된 값입니다.
그렇지 않으면, value
속성 값의
구문 분석이 오류로 이어졌거나 0보다 작거나 같은 경우, 진행 표시줄의 값은 0입니다.
진행 표시줄이 결정적 진행 표시줄인 경우, 현재 값은 최대 값이며, 값이 최대 값보다 크지 않으면 값이 됩니다.
진행 표시줄 표시를 위한 UA 요구사항: progress
요소를 사용자에게
표시할 때, UA는 결정적 또는 불확정적 진행 표시줄인지 여부를 나타내야 하며, 전자의 경우 현재 값이 최대 값에 비해 상대적인 위치를 표시해야 합니다.
progress.position
결정적 진행 표시줄(현재 값과 최대 값이 알려진 경우)에 대해서는 현재 값을 최대 값으로 나눈 결과를 반환합니다.
불확정적 진행 표시줄에 대해서는 -1을 반환합니다.
진행 표시줄이 불확정적 진행 표시줄인 경우, position
IDL 속성은 -1을 반환해야 합니다. 그렇지 않으면 현재 값을 최대 값으로 나눈 결과를 반환해야
합니다.
진행 표시줄이 불확정적 진행 표시줄인 경우, value
IDL 속성은 가져올 때 0을 반환해야 하며, 그렇지 않으면 현재 값을 반환해야 합니다. 설정할 때, 주어진
값은 부동 소수점 숫자로서의 최적
표현으로 변환된 후 value
콘텐츠 속성에 설정되어야 합니다.
value
IDL
속성을 자체에 설정하면 해당 콘텐츠 속성이 없는 경우 진행 표시줄이 불확정적 진행 표시줄에서 결정적 진행 표시줄로 변경되고 진행이 없게 됩니다.
max
IDL 속성은
동일한 이름의 콘텐츠 속성을 반영해야 하며, 0보다 큰 숫자만 제한됩니다. max
의 기본 값은 1.0입니다.
labels
IDL 속성은 요소의 라벨
목록을 제공합니다.
meter
요소현재 모든 엔진에서 지원됩니다.
현재 모든 엔진에서 지원됩니다.
meter
요소 자손이
없어야 함.
value
— 요소의 현재 값
min
— 범위의 하한값
max
— 범위의 상한값
low
— 낮은 범위의 상한값
high
— 높은 범위의 하한값
optimum
— 게이지의 최적 값
[Exposed =Window ]
interface HTMLMeterElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute double value ;
[CEReactions ] attribute double min ;
[CEReactions ] attribute double max ;
[CEReactions ] attribute double low ;
[CEReactions ] attribute double high ;
[CEReactions ] attribute double optimum ;
readonly attribute NodeList labels ;
};
meter
요소는 알려진 범위 내에서의 스칼라
측정치나 분수 값을 나타냅니다. 예를 들어 디스크 사용량, 쿼리 결과의 관련성, 또는 특정 후보자를 선택한 유권자 비율 등을 나타낼 수 있습니다.
이것은 게이지(gauge)로도 알려져 있습니다.
meter
요소는 진행 상황을 표시하는 데
사용해서는 안 됩니다. 그 역할을 위해 HTML은 별도의 progress
요소를 제공합니다.
meter
요소는 또한 임의
범위의 스칼라 값을 나타내지 않습니다. 예를 들어, 이 요소를 사용하여 체중 또는 키를 보고하는 것은 적절하지 않습니다. 최대 값이 알려진 경우에만 사용해야 합니다.
이 요소는 게이지의 의미를 결정하는 6개의 속성을 가지고 있습니다.
현재 모든 엔진에서 지원됩니다.
min
속성은 범위의 하한값을 지정하고,
max
속성은 범위의 상한값을 지정합니다.
value
속성은 게이지가 "측정된"
값으로 나타내야 할 값을 지정합니다.
나머지 세 가지 속성은 게이지의 범위를 "낮음", "중간", "높음" 부분으로 분할하고, 게이지의 "최적" 부분이 어디인지를 나타내는 데 사용할 수 있습니다. low
속성은 "낮음" 부분으로 간주되는 범위를 지정하고, high
속성은 "높음" 부분으로 간주되는
범위를 지정합니다. optimum
속성은 "최적" 위치를 제공합니다. 최적 값이 "높음" 값보다 높으면 값이 높을수록 더 나은 것으로 표시되며, "낮음" 값보다 낮으면 값이 낮을수록 더 나은 것으로 표시되며, 중간에 있으면 높은 값이나
낮은 값 모두가 좋지 않은 것으로 표시됩니다.
작성자 요구사항: value
속성은 필수입니다. value
, min
, low
, high
, max
, 그리고 optimum
속성은 존재하는 경우 유효한 부동 소수점 숫자여야 합니다.
또한 속성 값은 추가로 제한됩니다:
value를 value
속성의
숫자라고 합니다.
min
속성이 지정된 경우,
minimum은 해당 속성의 값입니다. 그렇지 않으면 0입니다.
max
속성이 지정된 경우,
maximum은 해당 속성의 값입니다. 그렇지 않으면 1.0입니다.
다음의 부등식이 적용 가능한 경우 적용됩니다:
minimum ≤ value ≤ maximum
최소값 또는 최대값이 지정되지 않은 경우, 범위는 0에서 1로 간주되며 값은 해당 범위 내에 있어야 합니다.
작성자는 사용자 에이전트가 meter
요소를
지원하지 않는 사용자를 위해 게이지 상태의 텍스트 표현을 요소 내용에 포함시키는 것이 좋습니다.
Microdata와 함께 사용할 때, meter
요소의 value
속성은 요소의 기계 가독 값을
제공합니다.
다음 예시는 4분의 3이 찬 세 가지 게이지를 보여줍니다:
저장 공간 사용량: < meter value = 6 max = 8 > 6 블록 사용됨 (전체 8 중)</ meter >
유권자 참여율: < meter value = 0.75 >< img alt = "75%" src = "graph75.png" ></ meter >
티켓 판매량: < meter min = "0" max = "100" value = "75" ></ meter >
다음 예시는 잘못된 사용 예입니다. 범위를 지정하지 않았기 때문에 (기본 최대값이 1이므로 두 게이지 모두 최대값에 도달한 것으로 보일 것입니다):
< p > 그레이프루트 파이의 반지름은 < meter value = 12 > 12cm</ meter > 이고 높이는 < meter value = 2 > 2cm</ meter > 입니다.</ p > <!-- 잘못된 사용! -->
대신, meter 요소를 포함하지 않거나, 다른 파이와 비교하여 컨텍스트 내에서 치수를 제공하기 위해 정의된 범위를 사용해야 합니다:
< p > 그레이프루트 파이의 반지름은 12cm이고 높이는 2cm입니다.</ p >
< dl >
< dt > 반지름: < dd > < meter min = 0 max = 20 value = 12 > 12cm</ meter >
< dt > 높이: < dd > < meter min = 0 max = 10 value = 2 > 2cm</ meter >
</ dl >
meter 요소에서는 명시적으로 단위를 지정할 방법이 없지만, title
속성에서 자유 형식의 텍스트로 단위를 지정할 수 있습니다.
위의 예시를 확장하여 단위를 언급할 수 있습니다:
< dl >
< dt > 반지름: < dd > < meter min = 0 max = 20 value = 12 title = "센티미터" > 12cm</ meter >
< dt > 높이: < dd > < meter min = 0 max = 10 value = 2 title = "센티미터" > 2cm</ meter >
</ dl >
사용자 에이전트 요구사항: 사용자 에이전트는 min
, max
, value
, low
, high
, 그리고 optimum
속성을 부동 소수점 숫자 값을 구문 분석하는 규칙에 따라 구문 분석해야
합니다.
그런 다음 사용자 에이전트는 모든 숫자를 사용하여 게이지의 여섯 가지 지점을 다음과 같이 얻어야 합니다. (일부 값이 이전 값을 참조하므로 평가 순서가 중요합니다.)
min
속성이 지정되고 해당 값이 구문 분석될
수 있으면 최소값은 해당 값입니다. 그렇지 않으면 최소값은 0입니다.
max
속성이 지정되고 해당 값이 구문 분석될
수 있으면 후보 최대값은 해당 값입니다. 그렇지 않으면 후보 최대값은 1.0입니다.
후보 최대값이 최소값보다 크거나 같으면 최대값은 후보 최대값입니다. 그렇지 않으면 최대값은 최소값과 동일합니다.
value
속성이 지정되고 해당 값이
구문 분석될 수 있으면 해당 값이 후보 실제 값입니다. 그렇지 않으면 후보 실제 값은 0입니다.
후보 실제 값이 최소값보다 작으면 실제 값은 최소값입니다.
그렇지 않으면, 후보 실제 값이 최대값보다 크면 실제 값은 최대값입니다.
그렇지 않으면, 실제 값은 후보 실제 값입니다.
low
속성이 지정되고 해당 값이 구문 분석될
수 있으면 후보 낮음 경계는 해당 값입니다. 그렇지 않으면 후보 낮음 경계는 최소값과 동일합니다.
후보 낮음 경계가 최소값보다 작으면 낮음 경계는 최소값입니다.
그렇지 않으면 후보 낮음 경계가 최대값보다 크면 낮음 경계는 최대값입니다.
그렇지 않으면, 낮음 경계는 후보 낮음 경계입니다.
high
속성이 지정되고 해당 값이 구문
분석될 수 있으면 후보 높음 경계는 해당 값입니다. 그렇지 않으면 후보 높음 경계는 최대값과 동일합니다.
후보 높음 경계가 낮음 경계보다 작으면 높음 경계는 낮음 경계입니다.
그렇지 않으면 후보 높음 경계가 최대값보다 크면 높음 경계는 최대값입니다.
그렇지 않으면, 높음 경계는 후보 높음 경계입니다.
optimum
속성이 지정되고
해당 값이 구문 분석될 수 있으면 후보 최적 지점은 해당 값입니다. 그렇지 않으면 후보 최적 지점은 최소값과 최대값 사이의 중간 지점입니다.
후보 최적 지점이 최소값보다 작으면 최적 지점은 최소값입니다.
그렇지 않으면 후보 최적 지점이 최대값보다 크면 최적 지점은 최대값입니다.
그렇지 않으면 최적 지점은 후보 최적 지점입니다.
모든 부등식이 다음과 같이 참이 됩니다:
최소값 ≤ 실제 값 ≤ 최대값
최소값 ≤ 낮음 경계 ≤ 높음 경계 ≤ 최대값
최소값 ≤ 최적 지점 ≤ 최대값
게이지 영역에 대한 사용자 에이전트 요구사항: 최적 지점이 낮음 경계 또는 높음 경계와 같거나 그 사이에 있으면, 게이지의 낮음 및 높음 부분이 있는 경우, 해당 영역은 최적 영역으로 간주되며, 낮음 및 높음 부분은 비최적 영역으로 간주됩니다. 최적 지점이 낮음 경계보다 작으면 최소값과 낮음 경계 사이의 영역은 최적 영역으로 간주되고, 낮음 경계에서 높음 경계까지의 영역은 비최적 영역으로 간주되며, 나머지 영역은 더 나쁜 영역으로 간주됩니다. 최적 지점이 높음 경계보다 높으면 상황은 반대가 되어, 높음 경계와 최대값 사이의 영역이 최적 영역으로 간주되고, 높음 경계에서 낮음 경계까지의 영역은 비최적 영역으로 간주되며, 나머지 영역은 더 나쁜 영역으로 간주됩니다.
게이지 표시를 위한 사용자 에이전트 요구사항: meter
요소를 사용자에게 표시할 때, 사용자
에이전트는 실제 값이 최소값과 최대값에 대해 상대적으로 어떤 위치에 있는지, 그리고 실제 값과 게이지의 세 가지 영역 간의 관계를 나타내야 합니다.
다음 마크업:
< h3 > 추천 그룹</ h3 >
< menu >
< li >< a href = "?cmd=hsg" onclick = "hideSuggestedGroups()" > 추천 그룹 숨기기</ a ></ li >
</ menu >
< ul >
< li >
< p >< a href = "/group/comp.infosystems.www.authoring.stylesheets/view" > comp.infosystems.www.authoring.stylesheets</ a > - < a href = "/group/comp.infosystems.www.authoring.stylesheets/subscribe" > 가입하기</ a ></ p >
< p > 그룹 설명: < strong > 웹의 레이아웃/프레젠테이션.</ strong ></ p >
< p > < meter value = "0.5" > 보통 활동성,</ meter > Usenet, 618명의 가입자</ p >
</ li >
< li >
< p >< a href = "/group/netscape.public.mozilla.xpinstall/view" > netscape.public.mozilla.xpinstall</ a > - < a href = "/group/netscape.public.mozilla.xpinstall/subscribe" > 가입하기</ a ></ p >
< p > 그룹 설명: < strong > Mozilla XPInstall 토론.</ strong ></ p >
< p > < meter value = "0.25" > 낮은 활동성,</ meter > Usenet, 22명의 가입자</ p >
</ li >
</ li >
< p >< a href = "/group/mozilla.dev.general/view" > mozilla.dev.general</ a > - < a href = "/group/mozilla.dev.general/subscribe" > 가입하기</ a ></ p >
< p > < meter value = "0.25" > 낮은 활동성,</ meter > Usenet, 66명의 가입자</ p >
</ li >
</ ul >
다음과 같이 렌더링될 수 있습니다:
사용자 에이전트는 title
속성의 값과 다른 속성의 값을 결합하여 문맥에
따라 달라지는 도움말 또는 실제 값을 설명하는 인라인 텍스트를 제공할 수 있습니다.
예를 들어, 다음 코드 조각은:
< meter min = 0 max = 60 value = 23.2 title = 초 ></ meter >
...사용자 에이전트가 "값: 60 중 23.2."라는 툴팁을 한 줄로 표시하고 "초"를 두 번째 줄에 표시하게 할 수 있습니다.
value
IDL 속성은 값을 가져올 때 실제 값을 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
value
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
min
IDL 속성은 값을 가져올 때 최소 값을 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
min
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
max
IDL 속성은 값을 가져올 때 최대 값을 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
max
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
low
IDL 속성은 값을 가져올 때 낮은 경계를 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
low
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
high
IDL 속성은 값을 가져올 때 높은 경계를 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
high
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
optimum
IDL 속성은 값을 가져올 때 최적 값을 반환해야 합니다.
설정할 때 주어진 값은 부동 소수점 숫자로
가장 적합하게 표현된 값으로 변환된 다음,
optimum
콘텐츠 속성에 해당 문자열로 설정해야 합니다.
labels
IDL 속성은
요소의 label
리스트를 제공합니다.
다음 예제는 게이지가 어떻게 로컬화된 텍스트나 보기 좋은 형태의 텍스트로 대체될 수 있는지를 보여줍니다.
< p > 디스크 사용량: < meter min = 0 value = 170261928 max = 233257824 > 총 233,257,824 바이트 중 170,261,928 바이트 사용됨</ meter ></ p >
fieldset
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
전설
요소(선택 사항), 그 뒤에
흐름 콘텐츠.
비활성화
—
하위 폼 컨트롤이 비활성화될지 여부(전설 안에 있는 것은 제외).
폼
— 요소를 폼
요소와 연결.
이름
— 폼.요소들
API에서 사용할 요소의 이름.
[Exposed =Window ]
interface HTMLFieldSetElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean disabled ;
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString name ;
readonly attribute DOMString type ;
[SameObject ] readonly attribute HTMLCollection elements ;
readonly attribute boolean willValidate ;
[SameObject ] readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
undefined setCustomValidity (DOMString error );
};
fieldset
요소는 여러 폼
컨트롤(또는 기타 콘텐츠)을 함께 그룹화한 집합을 나타내며, 선택적으로 캡션을 포함할 수 있습니다. 캡션은 legend
요소에서 제공되며, fieldset
요소의 첫 번째
자식인 경우에만 표시됩니다. 나머지 하위 요소는 그룹을 형성합니다.
모든 현재 엔진에서 지원됩니다.
지정된 경우, disabled
속성은 모든 하위 폼 컨트롤을
fieldset
요소에서 제외하고
fieldset
요소의 첫 번째
legend
요소 자손을 제외하여
비활성화시킵니다.
fieldset
요소는 다음 조건
중 하나와 일치하는 경우
비활성화된 fieldset입니다:
비활성화
속성이
지정된 경우
fieldset
요소의 하위 요소이면서, 해당 비활성화
속성이 지정된
경우(단, 해당 fieldset
요소의 첫
번째 legend
요소의 하위
요소는 제외).
form
속성은
fieldset
요소를
폼 소유자와 명시적으로 연결하는 데 사용됩니다.
name
속성은 요소의 이름을 나타냅니다.
fieldset.type
문자열 "fieldset"을 반환합니다.
fieldset.elements
해당 요소의 폼 컨트롤에 대한 HTMLCollection
을
반환합니다.
disabled
IDL 속성은
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
type
IDL
속성은
문자열 "fieldset
"을 반환해야 합니다.
elements
IDL 속성은
HTMLCollection
을
반환해야 하며,
이 컬렉션은 fieldset
요소에
뿌리를 두고 있으며, 필터는 목록에 포함된 요소와 일치합니다.
willValidate
, validity
, validationMessage
속성 및 checkValidity()
,
reportValidity()
,
setCustomValidity()
메서드는 제약 조건 유효성 검사
API의 일부입니다. 폼
및 이름
IDL 속성은 요소의 폼 API의 일부입니다.
이 예제는 관련 컨트롤 집합을 그룹화하는 데 사용되는 fieldset
요소를
보여줍니다:
< fieldset >
< legend > Display</ legend >
< p >< label >< input type = radio name = c value = 0 checked > Black on White</ label >
< p >< label >< input type = radio name = c value = 1 > White on Black</ label >
< p >< label >< input type = checkbox name = g > Use grayscale</ label >
< p >< label > Enhance contrast < input type = range name = e list = contrast min = 0 max = 100 value = 0 step = 1 ></ label >
< datalist id = contrast >
< option label = Normal value = 0 >
< option label = Maximum value = 100 >
</ datalist >
</ fieldset >
다음 스니펫은 필드셋을 활성화하거나 비활성화하는 전설에 체크박스가 포함된 필드셋을 보여줍니다. 필드셋의 내용은 두 개의 필수 텍스트 컨트롤과 선택 가능한 연도/월 컨트롤로 구성됩니다.
< fieldset name = "clubfields" disabled >
< legend > < label >
< input type = checkbox name = club onchange = "form.clubfields.disabled = !checked" >
Use Club Card
</ label > </ legend >
< p >< label > Name on card: < input name = clubname required ></ label ></ p >
< p >< label > Card number: < input name = clubnum required pattern = "[-0-9]+" ></ label ></ p >
< p >< label > Expiry date: < input name = clubexp type = month ></ label ></ p >
</ fieldset >
또한 fieldset
요소를 중첩할 수도 있습니다. 이전 예제를 확장하여 이를 구현한 예제가 있습니다:
< fieldset name = "clubfields" disabled >
< legend > < label >
< input type = checkbox name = club onchange = "form.clubfields.disabled = !checked" >
Use Club Card
</ label > </ legend >
< p >< label > Name on card: < input name = clubname required ></ label ></ p >
< fieldset name = "numfields" >
< legend > < label >
< input type = radio checked name = clubtype onchange = "form.numfields.disabled = !checked" >
My card has numbers on it
</ label > </ legend >
< p >< label > Card number: < input name = clubnum required pattern = "[-0-9]+" ></ label ></ p >
</ fieldset >
< fieldset name = "letfields" disabled >
< legend > < label >
< input type = radio name = clubtype onchange = "form.letfields.disabled = !checked" >
My card has letters on it
</ label > </ legend >
< p >< label > Card code: < input name = clublet required pattern = "[A-Za-z]+" ></ label ></ p >
</ fieldset >
</ fieldset >
이 예제에서는 외부 "Use Club Card" 체크박스가 선택되지 않은 경우, 외부 fieldset
내부의 모든
요소(두 개의 내장 fieldset
의 전설에
있는 두 개의 라디오 버튼 포함)가 비활성화됩니다. 그러나 체크박스가 선택된 경우, 두 개의 라디오 버튼이 모두 활성화되어 두 개의 내부 fieldset
중 어느
것이 활성화될지를 선택할 수 있습니다.
이 예제는 legend
요소가
그룹화를 라벨링하고, 중첩된 제목 요소가 문서 개요에 그룹화를 노출하는 컨트롤 그룹을 보여줍니다:
< fieldset >
< legend > < h2 >
How can we best reach you?
</ h2 > </ legend >
< p > < label >
< input type = radio checked name = contact_pref > Phone
</ label > </ p >
< p > < label >
< input type = radio name = contact_pref > Text
</ label > </ p >
< p > < label >
< input type = radio name = contact_pref > Email
</ label > </ p >
</ fieldset >
legend
요소모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
fieldset
요소의.
[Exposed =Window ]
interface HTMLLegendElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute HTMLFormElement ? form ;
// 이전 멤버들도 포함됩니다
};
legend
요소는 나머지 콘텐츠에 대한 캡션을 나타냅니다 legend
요소의 부모 fieldset
요소가 있는 경우.
legend.form
요소의 form
요소를 반환합니다, 있을
경우, 또는 그렇지 않으면 null을 반환합니다.
form
IDL 속성의
동작은 legend
요소가 fieldset
요소 안에 있는지 여부에
따라 다릅니다. legend
가 fieldset
요소를 부모로 가지고
있는 경우, form
IDL 속성은 form
IDL 속성에서와 동일한 값을 반환해야 합니다 fieldset
요소. 그렇지 않으면
null을 반환해야 합니다.
대부분의 폼 컨트롤은 값과 체크 상태를 가집니다. (후자는 input
요소에만 사용됩니다.) 이는 사용자가 컨트롤과 상호작용하는 방식을 설명하는 데 사용됩니다.
컨트롤의 값은 내부 상태입니다. 따라서 사용자의 현재 입력과 일치하지 않을 수 있습니다.
예를 들어, 사용자가 숫자를 기대하는 숫자 필드에 "three"라는 단어를 입력하면, 사용자의 입력은 "three"라는
문자열이지만 컨트롤의 값은 변경되지 않습니다. 또는 사용자가
"awesome@example.com"(앞에 공백이 있는)을 이메일 필드에 입력하면, 사용자의 입력은 " awesome@example.com"이라는
문자열이지만 브라우저의 이메일 필드 UI는 이를 "awesome@example.com
"이라는 값으로 변환할 수 있습니다 (앞의 공백 없이).
input
및 textarea
요소는 더티 값 플래그를 가집니다. 이는 값과 기본 값 사이의 상호작용을 추적하는 데 사용됩니다. 이 값이 false인 경우, 값이 기본 값을 반영합니다. true인 경우, 기본 값은
무시됩니다.
input
, textarea
및 select
요소는 사용자 유효성이라는 불리언 값을 가집니다. 이 값은 처음에 false로 설정됩니다.
input
요소의 multiple
속성의 제약 조건
유효성 검사 동작을 정의하기 위해, input
요소는 별도로 정의된 값들을 가질 수 있습니다.
maxlength
및 minlength
속성의 동작을 정의하기
위해, 그리고 textarea
요소와 관련된
다른 API를 위해, 모든 값이 있는 폼 컨트롤은 값에 대해
API 값을 얻는 알고리즘을 가집니다. 기본적으로 이 알고리즘은 단순히 컨트롤의 값을 반환하는 것입니다.
select
요소는 값을 가지지 않습니다. 대신 선택 상태가 option
요소들에서 사용됩니다.
폼 컨트롤은 변경 가능으로 지정될 수 있습니다.
이는 사용자가 폼 컨트롤의 값이나 체크 상태를 수정할 수 있는지, 또는 컨트롤이 자동으로 미리 채워질 수 있는지 여부를 결정합니다.
폼 연관 요소는 폼
요소와의 관계를 가질 수
있으며, 이를 요소의 폼 소유자라고 합니다. 폼 연관 요소가 폼
요소와 연관되지 않은
경우, 그 폼 소유자는 null로 간주됩니다.
폼 연관 요소는 연관된 파서 삽입 플래그를 가집니다.
현재 모든 엔진에서 지원합니다.
현재 모든 엔진에서 지원합니다.
폼 연관 요소는
기본적으로 가장 가까운 상위 폼
요소와 연관됩니다(아래
설명 참조), 하지만 리스트된 요소인 경우, 이를
무시하기 위해 form
속성이 지정될 수 있습니다.
이 기능은 중첩된 폼
요소에 대한 지원 부족을
해결하기 위해 저자들에게 유용합니다.
리스트된 폼 연관 요소가
form
속성을 지정한 경우, 해당
속성의 값은 요소의 ID이어야 합니다. 이 폼
요소는 요소의 트리 내에 있어야 합니다.
이 섹션의 규칙은 중첩된 폼
요소를 포함하지 않는
문서 또는 트리와 관련된 규칙에 의해 복잡해집니다. 그러나 스크립트를 사용하여 DOM 조작을 수행하는 등 중첩된 트리를 생성할 수 있습니다. 또한 HTML 파서에서의 규칙은 역사적인 이유로 인해 폼 연관 요소가 조상의 폼
요소와 연관되지 않을 수
있습니다.
폼 연관 요소가 생성되면, 해당 요소의 폼 소유자는 null(소유자 없음)로 초기화되어야 합니다.
폼 연관 요소가 폼과 연관되도록 설정될 때, 해당 요소의 폼 소유자는 그 폼으로 설정되어야 합니다.
리스트된 폼 연관 요소의
form
속성이 설정, 변경 또는
제거되면 사용자 에이전트는 해당 요소의 폼
소유자 초기화를 수행해야 합니다.
리스트된 폼 연관 요소가
form
속성을 가지고 있으며 ID가 있는 요소가 트리 내에서 변경되면, 사용자 에이전트는 해당 폼 연관 요소의
폼 소유자 초기화를 수행해야
합니다.
리스트된 폼 연관 요소가
form
속성을 가지고 있으며 ID를 가진 요소가 문서에 삽입되거나 문서에서 제거되면 사용자 에이전트는 해당 폼 연관 요소의
폼 소유자 초기화를 수행해야
합니다.
폼 소유자는 HTML 표준의 삽입 단계 및 제거 단계에 의해 초기화됩니다.
폼 소유자 초기화를 폼 연관 요소 element에서 수행하는 방법:
element의 파서 삽입 플래그를 해제합니다.
다음이 모두 true일 경우:
element의 폼 소유자가 null이 아닌 경우;
그렇다면 반환합니다.
element의 폼 소유자를 null로 설정합니다.
다음의 비준수 코드 스니펫에서
...
< form id = "a" >
< div id = "b" ></ div >
</ form >
< script >
document. getElementById( 'b' ). innerHTML =
'<table><tr><td></form><form id="c"><input id="d"></table>' +
'<input id="e">' ;
</ script >
...
"d"의 폼 소유자는 내부에 중첩된 폼 "c"가 되고, "e"의 폼 소유자는 외부 폼 "a"가 됩니다.
이 과정은 다음과 같이 진행됩니다: 먼저, "e" 노드는 HTML 파서에서 "c"와 연관됩니다. 그런 다음, innerHTML
알고리즘이 임시 문서에서 "b" 요소로 노드를 이동시킵니다. 이 시점에서 노드들은 조상 체인이 변경되었음을 인식하고, 파서에서 수행된 모든 "마법" 연관이 정상적인 조상 연관으로 재설정됩니다.
이 예제는 비준수 문서로, 폼
요소를 중첩하는
것이 콘텐츠 모델 위반이기 때문에 비준수 코드입니다. 또한 </form>
태그에 대해 구문 오류가 발생합니다.
element.form
현재 모든 엔진에서 지원합니다.
현재 모든 엔진에서 지원합니다.
요소의 폼 소유자를 반환합니다.
폼 소유자가 없는 경우 null을 반환합니다.
리스트된 폼 연관 요소들은
폼 연관
커스텀 요소를 제외하고 form
IDL 속성을 가지고 있습니다. 이 속성은 요소의 폼 소유자를 반환해야 하며, 없을 경우 null을 반환해야
합니다.
현재 모든 엔진에서 지원합니다.
폼
연관 커스텀 요소는 form
IDL 속성을 가지고 있지 않습니다. 대신, 그들의 ElementInternals
객체는 form
IDL 속성을 가지고 있습니다. 이 속성을 읽을 때, "NotSupportedError
" DOMException
이
발생해야 합니다. 만약 대상 요소가 폼
연관 커스텀 요소가 아니라면, 그렇지 않다면 해당 요소의 폼
소유자를 반환해야 하며, 없을 경우 null을 반환해야 합니다.
name
속성현재 모든 엔진에서 지원합니다.
name
콘텐츠 속성은 폼 컨트롤의 이름을 제공하며, 폼 제출 및 form
요소의
elements
객체에서 사용됩니다. 이 속성이 지정된 경우, 값은 빈 문자열이거나 isindex
가 되어서는 안 됩니다.
과거 여러 사용자 에이전트는 isindex
라는 이름을 가진 폼의 첫 번째 텍스트 컨트롤에 대한 특별한 지원을 구현했습니다. 이 사양은 이전에 관련 사용자
에이전트 요구 사항을 정의했으나, 이후 일부 사용자 에이전트가 그 특별한 지원을 중단하고 관련 요구 사항이 이 사양에서 제거되었습니다. 따라서 레거시 사용자 에이전트에서의 문제가 발생하지 않도록
isindex
이름은 더 이상 허용되지 않습니다.
isindex
를 제외하고, name
의 모든 비어 있지
않은 값은 허용됩니다. ASCII 대소문자
구분 없이 일치하는 _charset_
이라는 이름은 특별합니다. 이 이름이 value
속성이
없는 숨겨진( ) 컨트롤의 이름으로 사용되는 경우, 제출 시
value
속성에 제출 문자 인코딩 값이 자동으로 부여됩니다.
name
IDL 속성은 반영해야 합니다. name
콘텐츠 속성을.
DOM 클로버링은 보안 문제의 일반적인 원인입니다. name
콘텐츠 속성에
내장된 폼 속성 이름을 사용하지 않도록 하세요.
이 예에서 input
요소가 내장된 method
속성을
재정의합니다:
let form = document. createElement( "form" );
let input = document. createElement( "input" );
form. appendChild( input);
form. method; // => "get"
input. name = "method" ; // DOM 클로버링이 여기에서 발생합니다
form. method === input; // => true
입력 이름이 내장된 폼 속성보다 우선 순위를 가지므로, JavaScript 참조 form.method
는 내장된 method
속성 대신 "method"라는 이름의 input
요소를 가리키게 됩니다.
dirname
속성현재 모든 엔진에서 지원합니다.
dirname
속성은 폼
컨트롤 요소의 방향성을 제출할 수 있게 하며, 폼 제출 시 이 값을 포함하는 컨트롤의 이름을
지정합니다. 이 속성이 지정된 경우, 그 값은 빈 문자열이 되어서는 안 됩니다.
이 예제에서 폼은 텍스트 컨트롤과 제출 버튼을 포함합니다:
< form action = "addcomment.cgi" method = post >
< p >< label > 댓글: < input type = text name = "comment" dirname = "comment.dir" required ></ label ></ p >
< p >< button name = "mode" type = submit value = "add" > 댓글 게시</ button ></ p >
</ form >
사용자가 폼을 제출할 때, 사용자 에이전트는 "comment", "comment.dir" 및 "mode"라는 세 가지 필드를 포함하며, 사용자가 "Hello"라고 입력한 경우 제출 본문은 다음과 같을 수 있습니다:
comment=Hello&comment.dir=ltr&mode=add
사용자가 오른쪽에서 왼쪽으로 쓰는 방향으로 수동으로 전환하고 "مرحبا"를 입력하면, 제출 본문은 다음과 같을 수 있습니다:
comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add
maxlength
속성폼 컨트롤
maxlength
속성은 더티 값 플래그에 의해 제어되며, 사용자가 입력할 수 있는
문자 수에 제한을 둡니다. 문자의 수는 길이를 사용하여 측정되며, textarea
요소의 경우, 모든 줄바꿈이 하나의 문자로 정규화됩니다(CRLF 쌍이 아닌 경우).
요소에 폼 컨트롤
maxlength
속성이 지정된 경우, 해당 속성의 값은 유효한 비음수 정수여야 합니다. 속성이
지정되고 해당 값에 비음수 정수를 파싱하기
위한 규칙을 적용한 결과 숫자가 나오면, 그 숫자가 요소의 최대 허용 값 길이입니다. 속성이 생략되거나 해당
값을 파싱한 결과 오류가 발생하면, 최대 허용 값 길이가 없습니다.
제약 조건 유효성 검사: 요소에 최대 허용 값 길이가 있고, 더티 값 플래그가 true이며, 요소의 값이 마지막으로 사용자 편집에 의해 변경되었고(스크립트에 의한 변경이 아닌), 요소의 길이가 요소의 최대 허용 값 길이보다 크면, 그 요소는 너무 길어서 고통받고 있습니다.
사용자 에이전트는 사용자가 요소의 API 값을 요소의 길이가 요소의 최대 허용 값 길이를 초과하는 값으로 설정하지 못하도록 할 수 있습니다.
textarea
요소의 경우, API 값과 값이 다를 수
있습니다. 특히, 줄바꿈 정규화가 최대 허용 값 길이를 확인하기
전에 적용됩니다(textarea 래핑 변환은
적용되지 않음).
minlength
속성폼 컨트롤
minlength
속성은 더티 값 플래그에 의해
제어되며, 사용자가 입력할 수 있는 문자 수에 대한 하한을 선언합니다. "문자 수"는 길이를 사용하여 측정되며, textarea
요소의 경우, 모든 줄바꿈이 하나의 문자로 정규화됩니다(CRLF 쌍이 아닌 경우).
minlength
속성은 required
속성을 의미하지 않습니다. 폼 컨트롤에 required
속성이 없는 경우 값은 여전히 생략될 수 있으며, minlength
속성은 사용자가 값을 입력한 후에만 작동합니다. 빈 문자열이 허용되지 않는 경우 required
속성도 설정되어야 합니다.
요소에 폼 컨트롤
minlength
속성이 지정된 경우, 해당 속성의 값은 유효한 비음수
정수여야 합니다. 속성이 지정되고 해당 값에 비음수
정수를 파싱하기 위한 규칙을 적용한 결과 숫자가 나오면, 그 숫자가 요소의 최소 허용 값 길이입니다. 속성이
생략되거나 해당 값을 파싱한 결과 오류가 발생하면, 최소 허용 값
길이가 없습니다.
요소에 최대 허용 값 길이와 최소 허용 값 길이가 모두 있는 경우, 최소 허용 값 길이는 최대 허용 값 길이보다 작거나 같아야 합니다.
제약 조건 유효성 검사: 요소에 최소 허용 값 길이가 있고, 더티 값 플래그가 true이며, 요소의 값이 마지막으로 사용자 편집에 의해 변경되었고(스크립트에 의한 변경이 아닌), 요소의 값이 빈 문자열이 아니며, 요소의 길이가 요소의 최소 허용 값 길이보다 작으면, 그 요소는 너무 짧아서 고통받고 있습니다.
다음 예제에서는 네 개의 텍스트 컨트롤이 있습니다. 첫 번째는 필수 항목이며, 최소 5자 이상이어야 합니다. 나머지 세 개는 선택 사항이지만 사용자가 하나를 입력하면 최소 10자를 입력해야 합니다.
< form action = "/events/menu.cgi" method = "post" >
< p >< label > 행사 이름: < input required minlength = 5 maxlength = 50 name = event ></ label ></ p >
< p >< label > 아침으로 무엇을 먹고 싶은지 설명하십시오(있다면): < textarea name = "breakfast" minlength = "10" ></ textarea ></ label ></ p >
< p >< label > 점심으로 무엇을 먹고 싶은지 설명하십시오(있다면): < textarea name = "lunch" minlength = "10" ></ textarea ></ label ></ p >
< p >< label > 저녁으로 무엇을 먹고 싶은지 설명하십시오(있다면): < textarea name = "dinner" minlength = "10" ></ textarea ></ label ></ p >
< p >< input type = submit value = "요청 제출" ></ p >
</ form >
disabled
속성모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
disabled
콘텐츠 속성은 boolean
속성입니다.
disabled
속성은
option
요소에 대해, 그리고 disabled
속성은 optgroup
요소에 대해 별도로 정의됩니다.
다음 중 하나가 참인 경우 양식 컨트롤은 비활성화됩니다:
요소가 button
,
input
,
select
,
textarea
,
또는 폼 관련
커스텀 요소이며, 이 요소에 disabled
속성이 지정된 경우(값과 관계없이); 또는
요소가 fieldset
요소의 자손이며, 해당 disabled
속성이 지정된 경우이지만, 이 fieldset
요소의 첫 번째 legend
요소 자손이 아닌 경우.
비활성화된 양식 컨트롤은 비활성화 상태에서
click
이벤트가 큐에
추가되는 것을
방지해야 합니다.
제약 조건 검증: 요소가 비활성화된 경우, 제약 조건 검증에서 제외됩니다.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
disabled
IDL 속성은 반영되어야
합니다. disabled
콘텐츠 속성을 반영해야 합니다.
Element/form#Attributes_for_form_submission
모든 최신 엔진에서 지원.
양식 제출을 위한 속성은 form
요소와
제출 버튼에
지정할 수 있습니다
(예: input
요소의 type
속성이
제출 버튼 상태에 있는 경우).
양식 제출
속성은 form
요소에
지정될 수 있는 속성으로는 action
,
enctype
, method
, novalidate
,
및
target
이 있습니다.
해당 양식 제출
속성은 제출
버튼에 지정될 수 있으며, formaction
,
formenctype
,
formmethod
,
formnovalidate
,
및 formtarget
이
있습니다.
생략되면, form
요소의
해당 속성에 설정된 값으로 기본 설정됩니다.
모든 최신 엔진에서 지원.
action
및
formaction
콘텐츠
속성은, 지정된 경우 유효한 비어있지 않은 URL이면서 공백으로
둘러싸일 수 있는 값을 가져야 합니다.
요소의 action은 해당 요소의 formaction
속성의
값이며, 요소가 제출 버튼이고 해당 속성이
있을 경우, 또는
그 속성 값은 폼 소유자의 action
속성의 값이 됩니다. 해당 속성이
없다면 빈 문자열이 됩니다.
모든 최신 엔진에서 지원.
method
및
formmethod
콘텐츠
속성은 열거된 속성이며 다음과 같은 키워드와
상태를 가집니다:
키워드 | 상태 | 간략 설명 |
---|---|---|
get
| GET | form 이
HTTP GET 메서드를 사용함을 나타냅니다.
|
post
| POST | form 이
HTTP POST 메서드를 사용함을 나타냅니다.
|
dialog
| Dialog | form 이 해당
양식이 포함된 대화 상자 를
닫기 위한 것임을 나타내며, 그렇지 않으면 제출하지 않습니다.
|
method
속성의 누락된 값 기본값과 잘못된 값 기본값
둘 다 GET 상태입니다.
formmethod
속성에는
누락된 값 기본값이 없으며,
잘못된 값 기본값은 GET 상태입니다.
요소의 method는 이러한 상태 중 하나입니다. 요소가 제출 버튼이고 formmethod
속성이 있는
경우, 해당 요소의 method는 그 속성의 상태입니다.
그렇지 않으면, 폼 소유자의 method
속성의 상태가 됩니다.
여기에서는 method
속성이 기본
값인 "get
"으로
명시적으로 지정되어 검색
쿼리가 URL에 제출됩니다:
< form method = "get" action = "/search.cgi" >
< p >< label > Search terms: < input type = search name = q ></ label ></ p >
< p >< input type = submit ></ p >
</ form >
반면, 여기서는 method
속성이
"post
"
값으로 지정되어 사용자의
메시지가 HTTP 요청의 본문에 제출됩니다:
< form method = "post" action = "/post-message.cgi" >
< p >< label > Message: < input type = text name = m ></ label ></ p >
< p >< input type = submit value = "Submit message" ></ p >
</ form >
이 예제에서는 form
이
대화 상자
와 함께
사용됩니다.
method
속성의 "dialog
"
키워드가 사용되어
양식이 제출될 때 대화 상자가 자동으로 닫히도록 합니다.
< dialog id = "ship" >
< form method = dialog >
< p > A ship has arrived in the harbour.</ p >
< button type = submit value = "board" > Board the ship</ button >
< button type = submit value = "call" > Call to the captain</ button >
</ form >
</ dialog >
< script >
var ship = document. getElementById( 'ship' );
ship. showModal();
ship. onclose = function ( event) {
if ( ship. returnValue == 'board' ) {
// ...
} else {
// ...
}
};
</ script >
모든 최신 엔진에서 지원.
enctype
및
formenctype
콘텐츠 속성은 열거된 속성이며 다음과 같은
키워드와 상태를 가집니다:
application/x-www-form-urlencoded
" 키워드와 해당 상태.
multipart/form-data
" 키워드와 해당 상태.
text/plain
" 키워드와 해당 상태.
속성의 누락된 값 기본값과 잘못된 값 기본값은 모두
application/x-www-form-urlencoded
상태입니다.
formenctype
속성에는 누락된 값 기본값이
없으며, 잘못된 값 기본값은
application/x-www-form-urlencoded
상태입니다.
요소의 enctype은 이러한 세 가지 상태 중 하나입니다.
요소가 제출 버튼이고 formenctype
속성이
있는 경우, 해당 요소의 enctype은 그 속성의
상태이며, 그렇지 않으면 폼 소유자의 enctype
속성의 상태가 됩니다.
모든 최신 엔진에서 지원.
target
및
formtarget
콘텐츠
속성은, 지정된 경우 유효한 탐색 가능 대상 이름 또는 키워드 값을 가져야 합니다.
모든 최신 엔진에서 지원.
novalidate
및
formnovalidate
콘텐츠 속성은 boolean 속성입니다. 지정된 경우, 양식 제출 시 검증을 수행하지 않음을 나타냅니다.
요소의 검증 안 함 상태은 요소가 제출 버튼이고 해당 요소의 formnovalidate
속성이 있거나, 요소의 폼 소유자의 novalidate
속성이 있으면
참이며, 그렇지 않으면 거짓입니다.
이 속성은 검증 제약 조건이 있는 양식에서 "저장" 버튼을 포함하는 데 유용하며, 사용자가 아직 양식의 데이터를 모두 입력하지 않았더라도 진행 상황을 저장할 수 있습니다. 다음 예제는 필수 필드가 두 개인 간단한 양식을 보여줍니다. 세 개의 버튼이 있습니다: 양식을 제출하는 버튼으로, 두 필드를 모두 작성해야 합니다; 나중에 양식을 채우기 위해 사용자가 진행 상황을 저장할 수 있는 버튼; 그리고 양식을 완전히 취소하는 버튼입니다.
< form action = "editor.cgi" method = "post" >
< p >< label > Name: < input required name = fn ></ label ></ p >
< p >< label > Essay: < textarea required name = essay ></ textarea ></ label ></ p >
< p >< input type = submit name = submit value = "Submit essay" ></ p >
< p >< input type = submit formnovalidate name = save value = "Save essay" ></ p >
< p >< input type = submit formnovalidate name = cancel value = "Cancel" ></ p >
</ form >
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
모든 최신 엔진에서 지원.
action
IDL 속성은 reflect해야 하며, 동일한 이름의 콘텐츠 속성이며,
콘텐츠 속성이 없거나 값이 빈 문자열인 경우 요소의 노드 문서의 URL을
반환해야 합니다. target
IDL 속성은 동일한 이름의 콘텐츠 속성을 reflect해야 합니다. method
및 enctype
IDL 속성은
동일한 이름의 각각의 콘텐츠 속성을 reflect해야 하며, 알려진 값만으로
제한됩니다. encoding
IDL 속성은 reflect해야 하며, enctype
콘텐츠 속성을 알려진 값만으로
제한해야 합니다. noValidate
IDL 속성은 reflect해야 하며,
novalidate
콘텐츠
속성을 reflect해야 합니다. formAction
IDL 속성은 formaction
콘텐츠 속성을
reflect해야 하며, 콘텐츠 속성이 없거나 값이 빈 문자열인 경우 요소의 노드 문서의 URL을
반환해야 합니다. formEnctype
IDL 속성은 reflect해야 하며,
formenctype
콘텐츠 속성을 reflect해야 하며, 알려진 값만으로 제한해야 합니다. formMethod
IDL 속성은 reflect해야 하며,
formmethod
콘텐츠
속성을 reflect해야 하며, 알려진 값만으로 제한해야 합니다. formNoValidate
IDL 속성은 reflect해야 하며,
formnovalidate
콘텐츠 속성을 reflect해야 합니다. formTarget
IDL
속성은 reflect해야 하며, formtarget
콘텐츠 속성을
reflect해야 합니다.
autocomplete
속성모든 최신 엔진에서 지원됩니다.
사용자 에이전트는 종종 사용자가 양식을 채우는 데 도움을 주는 기능을 가지고 있습니다. 예를 들어, 이전 사용자 입력을 기반으로 사용자의 주소를 미리 채울 수 있습니다. autocomplete
콘텐츠 속성은 사용자 에이전트에게 이러한 기능을 제공할 방법 또는 제공 여부에 대한
힌트를 제공하는 데 사용할 수 있습니다.
이 속성이 사용되는 두 가지 방법이 있습니다. 자동 채우기 예상 망토를 입었을 때, autocomplete
속성은 사용자로부터 예상되는 입력을 설명합니다. 자동 채우기 앵커 망토를 입었을 때, autocomplete
속성은 주어진 값의 의미를 설명합니다.
속성의 input
요소의 type
속성이 상태일 때, autocomplete
속성은 자동 채우기 앵커 망토를 입습니다. 다른
모든 경우에는 자동 채우기 예상 망토를 입습니다.
자동 채우기 예상 망토를 입었을
때, autocomplete
속성은 지정된 경우 공백으로 구분된 토큰
집합으로서, "off
"
문자열에 대해 ASCII 대소문자
구분 없음을 가진 단일 토큰이거나 "on
"
문자열에 대해 ASCII 대소문자
구분 없음을 가진 단일 토큰, 또는 자동 채우기 세부 토큰으로 구성된 집합이어야
합니다.
자동 채우기 앵커 망토를 입었을 때,
autocomplete
속성은 지정된 경우 "자동 채우기 세부 토큰"(즉,
"on
"
및 "off
"
키워드는 허용되지 않음)으로만 구성된 공백으로 구분된 토큰
집합이어야 합니다.
자동 채우기 세부 토큰은 아래 순서대로 다음과 같습니다:
선택적으로, 첫 8자가 "section-
" 문자열과
ASCII 대소문자 구분 없이 일치하는 토큰으로, 해당 필드가 명명된 그룹에
속함을 의미합니다.
예를 들어, 양식에 두 개의 배송 주소가 있는 경우 다음과 같이 표시할 수 있습니다:
< fieldset >
< legend > 파란 선물을 배송할 주소...</ legend >
< p > < label > 주소: < textarea name = ba autocomplete = "section-blue shipping street-address" ></ textarea > </ label >
< p > < label > 도시: < input name = bc autocomplete = "section-blue shipping address-level2" > </ label >
< p > < label > 우편번호: < input name = bp autocomplete = "section-blue shipping postal-code" > </ label >
</ fieldset >
< fieldset >
< legend > 빨간 선물을 배송할 주소...</ legend >
< p > < label > 주소: < textarea name = ra autocomplete = "section-red shipping street-address" ></ textarea > </ label >
< p > < label > 도시: < input name = rc autocomplete = "section-red shipping address-level2" > </ label >
< p > < label > 우편번호: < input name = rp autocomplete = "section-red shipping postal-code" > </ label >
</ fieldset >
선택적으로, 다음 문자열 중 하나와 ASCII 대소문자 구분 없이 일치하는 토큰:
shipping
", 해당 필드가
배송 주소 또는 연락처 정보를 나타냄
billing
", 해당 필드가 청구
주소 또는 연락처 정보를 나타냄
다음 두 가지 옵션 중 하나:
다음 자동 채우기 필드 이름 중 하나와 ASCII 대소문자 구분 없이 일치하는 토큰, 컨트롤에 적합하지 않은 항목은 제외:
name
"
honorific-prefix
"
given-name
"
additional-name
"
family-name
"
honorific-suffix
"
nickname
"
username
"
new-password
"
current-password
"
one-time-code
"
organization-title
"
organization
"
street-address
"
address-line1
"
address-line2
"
address-line3
"
address-level4
"
address-level3
"
address-level2
"
address-level1
"
country
"
country-name
"
postal-code
"
cc-name
"
cc-given-name
"
cc-additional-name
"
cc-family-name
"
cc-number
"
cc-exp
"
cc-exp-month
"
cc-exp-year
"
cc-csc
"
cc-type
"
transaction-currency
"
transaction-amount
"
language
"
bday
"
bday-day
"
bday-month
"
bday-year
"
sex
"
url
"
photo
"
(아래 표에서 이러한 값에 대한 설명을 참조하십시오.)
다음 순서대로:
선택적으로, 다음 문자열 중 하나와 ASCII 대소문자 구분 없이 일치하는 토큰:
home
",
해당 필드가
거주지 연락처 정보를 나타냄
work
",
해당 필드가
직장 연락처 정보를 나타냄
mobile
", 해당 필드가
장소와 관계없이 연락처 정보를 나타냄
fax
", 해당
필드가 팩스
기기의 연락처 정보를 나타냄
pager
", 해당 필드가
호출기 또는 무선 호출기의 연락처 정보를 나타냄
다음 자동 채우기 필드 이름 중 하나와 ASCII 대소문자 구분 없이 일치하는 토큰, 컨트롤에 적합하지 않은 항목은 제외:
tel
"
tel-country-code
"
tel-national
"
tel-area-code
"
tel-local
"
tel-local-prefix
"
tel-local-suffix
"
tel-extension
"
email
"
impp
"
(아래 표에서 이러한 값에 대한 설명을 참조하십시오.)
선택적으로, "webauthn
" 문자열과 ASCII 대소문자 구분 없이 일치하는 토큰으로, 사용자가 양식
컨트롤과 상호작용할 때 사용자 에이전트가 공개 키 자격 증명을 조건부
중재를 통해 표시해야 함을 의미합니다. webauthn
은 input
및 textarea
요소에만 유효합니다.
앞서 언급한 바와 같이, 이 속성과 그 키워드의 의미는 속성이 어떤 망토를 입고 있는지에 따라 달라집니다.
"off
" 키워드는 컨트롤의 입력 데이터가
특히 민감하거나(예: 핵무기 활성화 코드), 절대로 재사용되지 않는 값(예: 은행 로그인용 일회용 키)이므로
사용자가 값을 미리 입력해 두는 대신 매번 명시적으로 데이터를 입력해야 함을 의미하거나, 문서 자체에서
자동 완성 메커니즘을 제공하고자 하며 사용자 에이전트가 자동 완성 값을 제공하지 않기를 원하는 경우에
사용됩니다.
"on
" 키워드는 사용자 에이전트가 사용자에게
자동 완성 값을 제공할 수 있음을 나타내지만, 사용자가 입력할 수 있는 데이터 유형에 대한 추가 정보는
제공하지 않습니다. 사용자 에이전트는 어떤 자동 완성 값을 제안할지 결정하기 위해 휴리스틱을 사용해야
합니다.
위에 나열된 자동 채우기 필드는 사용자 에이전트가 사용자에게 자동 완성 값을 제공할 수 있음을 나타내며, 예상되는 값의 유형을 지정합니다. 이러한 키워드 각각의 의미는 아래 표에서 설명합니다.
autocomplete
속성이 생략된 경우, 요소의 form owner의 autocomplete
속성에 해당하는 기본 값이 대신 사용됩니다( "on
"
또는 "off
").
form
owner가 없으면 "on
"
값이 사용됩니다.
위에 나열된 자동 채우기 필드는 특정 값이 이 요소에 제공되었음을 나타냅니다. 이러한 키워드 각각의 의미는 아래 표에서 설명합니다.
이 예제에서는 페이지가 거래의 통화와 금액을 명시적으로 지정했습니다. 양식에서는 신용 카드 및 기타 청구 세부 정보를 요청합니다. 사용자 에이전트는 이 정보를 사용하여 충분한 잔액이 있고 관련 통화를 지원하는 신용 카드를 제안할 수 있습니다.
< form method = post action = "step2.cgi" >
< input type = hidden autocomplete = transaction-currency value = "CHF" >
< input type = hidden autocomplete = transaction-amount value = "15.00" >
< p >< label > Credit card number: < input type = text inputmode = numeric autocomplete = cc-number ></ label >
< p >< label > Expiry Date: < input type = month autocomplete = cc-exp ></ label >
< p >< input type = submit value = "Continue..." >
</ form >
자동 채우기 필드 키워드는 아래 표에 설명된 대로 서로 관련이 있습니다. 이 표의 각 행에 나열된 필드 이름은 "의미"라는 열에 주어진 설명과
일치합니다. 일부 필드는 다른 필드의 하위 부분과 대응됩니다. 예를 들어, 신용 카드 만료일은 만료 월과 연도를 모두 포함하는 하나의 필드로 표현될 수 있습니다 ("cc-exp
")
또는 두 개의 필드로, 하나는 월 ("cc-exp-month
")을,
다른 하나는 연도 ("cc-exp-year
")를
나타냅니다. 이러한 경우, 더 넓은 필드의 이름은 여러 행에 걸쳐 있으며, 그 안에서 더 좁은 필드가 정의됩니다.
일반적으로 저자들은 더 좁은 필드보다 더 넓은 필드를 사용하는 것이 좋습니다. 더 좁은 필드는 서구적인 편견을 드러내는 경향이 있기 때문입니다. 예를 들어, 서구의 일부 문화에서는 주어진 이름과 성을 순서대로 가지고 있으며(따라서 이름과 성이라고도 함), 많은 문화에서는 성을 먼저 두고 이름을 두 번째로 두며, 다른 많은 문화에서는 단 하나의 이름만 사용하는 경우도 있습니다 (단일명). 따라서 단일 필드를 사용하는 것이 더 유연합니다.
일부 필드는 특정 양식 컨트롤에만 적합합니다. 자동 채우기 필드 이름은 해당 자동 채우기 필드를 설명하는 첫 번째 행의 다섯 번째 열에 나열된 그룹에 해당 컨트롤이 속하지 않는 경우, 그 컨트롤에 대해 부적합한 것입니다. 각 그룹에 어떤 컨트롤이 속하는지는 표 아래에 설명되어 있습니다.
필드 이름 | 의미 | 표준 형식 | 표준 형식 예시 | 컨트롤 그룹 | |||
---|---|---|---|---|---|---|---|
"name "
| 전체 이름 | 자유형 텍스트, 줄 바꿈 없음 | Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA | 텍스트 | |||
"honorific-prefix "
| 접두사 또는 칭호 (예: "Mr.", "Ms.", "Dr.", "Mlle") | 자유형 텍스트, 줄 바꿈 없음 | Sir | 텍스트 | |||
"given-name "
| 이름 (일부 서구 문화에서는 이름으로도 알려져 있음) | 자유형 텍스트, 줄 바꿈 없음 | Timothy | 텍스트 | |||
"additional-name "
| 추가 이름 (일부 서구 문화에서는 중간 이름, 첫 이름 외의 이름으로도 알려져 있음) | 자유형 텍스트, 줄 바꿈 없음 | John | 텍스트 | |||
"family-name "
| 성 (일부 서구 문화에서는 성 또는 성이름으로도 알려져 있음) | 자유형 텍스트, 줄 바꿈 없음 | Berners-Lee | 텍스트 | |||
"honorific-suffix "
| 접미사 (예: "Jr.", "B.Sc.", "MBASW", "II") | 자유형 텍스트, 줄 바꿈 없음 | OM, KBE, FRS, FREng, FRSA | 텍스트 | |||
"nickname "
| 별명, 스크린 이름, 핸들: 일반적으로 전체 이름 대신 사용되는 짧은 이름 | 자유형 텍스트, 줄 바꿈 없음 | Tim | 텍스트 | |||
"organization-title "
| 직책 (예: "Software Engineer", "Senior Vice President", "Deputy Managing Director") | 자유형 텍스트, 줄 바꿈 없음 | Professor | 텍스트 | |||
"username "
| 사용자 이름 | 자유형 텍스트, 줄 바꿈 없음 | timbl | 사용자 이름 | |||
"new-password "
| 새 비밀번호 (예: 계정을 생성하거나 비밀번호를 변경할 때) | 자유형 텍스트, 줄 바꿈 없음 | GUMFXbadyrS3 | 비밀번호 | |||
"current-password "
| 사용자 이름
필드로 식별된 계정의 현재 비밀번호 (예: 로그인할 때)
| 자유형 텍스트, 줄 바꿈 없음 | qwerty | 비밀번호 | |||
"one-time-code "
| 사용자 신원을 확인하는 데 사용되는 일회용 코드 | 자유형 텍스트, 줄 바꿈 없음 | 123456 | 비밀번호 | |||
"organization "
| 이 필드와 연결된 다른 필드에 있는 사람, 주소 또는 연락처 정보에 해당하는 회사 이름 | 자유형 텍스트, 줄 바꿈 없음 | World Wide Web Consortium | 텍스트 | |||
"street-address "
| 거리 주소 (여러 줄, 줄 바꿈 유지) | 자유형 텍스트 | 32 Vassar Street MIT Room 32-G524 | 멀티라인 | |||
"address-line1 "
| 거리 주소 (필드당 한 줄) | 자유형 텍스트, 줄 바꿈 없음 | 32 Vassar Street | 텍스트 | |||
"address-line2 "
| 자유형 텍스트, 줄 바꿈 없음 | MIT Room 32-G524 | 텍스트 | ||||
"address-line3 "
| 자유형 텍스트, 줄 바꿈 없음 | 텍스트 | |||||
"address-level4 "
| 4단계 행정 구역에서 가장 세분화된 행정 레벨 | 자유형 텍스트, 줄 바꿈 없음 | 텍스트 | ||||
"address-level3 "
| 3단계 행정 레벨, 3개 이상의 행정 레벨이 있는 주소에서 | 자유형 텍스트, 줄 바꿈 없음 | 텍스트 | ||||
"address-level2 "
| 2단계 행정 레벨, 2개 이상의 행정 레벨이 있는 주소에서; 2단계 행정 레벨이 있는 국가에서는, 일반적으로 관련 거리 주소가 있는 시, 마을, 마을 또는 기타 지역 | 자유형 텍스트, 줄 바꿈 없음 | Cambridge | 텍스트 | |||
"address-level1 "
| 주소의 가장 광범위한 행정 레벨, 즉 해당 지역이 있는 지방; 예를 들어, 미국에서는 주; 스위스에서는 주; 영국에서는 우편 도시 | 자유형 텍스트, 줄 바꿈 없음 | MA | 텍스트 | |||
"country "
| 국가 코드 | 유효한 ISO 3166-1-alpha-2 국가 코드 [ISO3166] | US | 텍스트 | |||
"country-name "
| 국가 이름 | 자유형 텍스트, 줄 바꿈 없음; 국가 에서 파생된 것 일부 경우에
| US | 텍스트 | |||
"postal-code "
| 우편번호, 우편 번호, 우편 코드, CEDEX 코드 (CEDEX의 경우, "CEDEX"를 추가하고, 관련 있는 경우 구역을 주소-레벨2
필드에 추가)
| 자유형 텍스트, 줄 바꿈 없음 | 02139 | 텍스트 | |||
"cc-name "
| 지불 수단에 명시된 전체 이름 | 자유형 텍스트, 줄 바꿈 없음 | Tim Berners-Lee | 텍스트 | |||
"cc-given-name "
| 지불 수단에 명시된 이름 (일부 서구 문화에서는 이름으로도 알려져 있음) | 자유형 텍스트, 줄 바꿈 없음 | Tim | 텍스트 | |||
"cc-additional-name "
| 지불 수단에 명시된 추가 이름 (일부 서구 문화에서는 중간 이름으로도 알려져 있음, 첫 이름 외의 이름) | 자유형 텍스트, 줄 바꿈 없음 | 텍스트 | ||||
"cc-family-name "
| 지불 수단에 명시된 성 (일부 서구 문화에서는 성이름 또는 성으로도 알려져 있음) | 자유형 텍스트, 줄 바꿈 없음 | Berners-Lee | 텍스트 | |||
"cc-number "
| 지불 수단을 식별하는 코드 (예: 신용 카드 번호) | ASCII 숫자 | 4114360123456785 | 텍스트 | |||
"cc-exp "
| 지불 수단의 만료일 | 유효한 월 문자열 | 2014-12 | 월 | |||
"cc-exp-month "
| 지불 수단의 만료일의 월 구성 요소 | 유효한 정수 1..12 범위 내에서 | 12 | 숫자 | |||
"cc-exp-year "
| 지불 수단의 만료일의 연도 구성 요소 | 유효한 정수 0보다 큼 | 2014 | 숫자 | |||
"cc-csc "
| 지불 수단의 보안 코드 (카드 보안 코드(CSC), 카드 유효성 검사 코드(CVC), 카드 인증 값(CVV), 서명 패널 코드(SPC), 신용 카드 ID(CCID) 등으로도 알려져 있음) | ASCII 숫자 | 419 | 텍스트 | |||
"cc-type "
| 지불 수단의 유형 | 자유형 텍스트, 줄 바꿈 없음 | Visa | 텍스트 | |||
"transaction-currency "
| 사용자가 거래에 사용할 선호 통화 | ISO 4217 통화 코드 [ISO4217] | GBP | 텍스트 | |||
"transaction-amount "
| 사용자가 거래에 대해 원하는 금액 (예: 입찰 또는 판매 가격을 입력할 때) | 유효한 부동 소수점 수 | 401.00 | 숫자 | |||
"language "
| 선호하는 언어 | 유효한 BCP 47 언어 태그 [BCP47] | en | 텍스트 | |||
"bday "
| 생일 | 유효한 날짜 문자열 | 1955-06-08 | 날짜 | |||
"bday-day "
| 생일의 일 구성 요소 | 유효한 정수 1..31 범위 내에서 | 8 | 숫자 | |||
"bday-month "
| 생일의 월 구성 요소 | 유효한 정수 1..12 범위 내에서 | 6 | 숫자 | |||
"bday-year "
| 생일의 연도 구성 요소 | 유효한 정수 0보다 큼 | 1955 | 숫자 | |||
"sex "
| 성 정체성 (예: Female, Fa'afafine) | 자유형 텍스트, 줄 바꿈 없음 | Male | 텍스트 | |||
"url "
| 이 필드와 연결된 다른 필드에 있는 회사, 사람, 주소 또는 연락처 정보에 해당하는 홈페이지 또는 기타 웹 페이지 | 유효한 URL 문자열 | https://www.w3.org/People/Berners-Lee/ | URL | |||
"photo "
| 이 필드와 연결된 다른 필드에 있는 회사, 사람, 주소 또는 연락처 정보에 해당하는 사진, 아이콘 또는 기타 이미지 | 유효한 URL 문자열 | https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg | URL | |||
"tel "
| 국가 코드를 포함한 전체 전화번호 | ASCII 숫자 및 U+0020 SPACE 문자, U+002B PLUS SIGN 문자(+)로 접두어를 붙임 | +1 617 253 5702 | 전화 | |||
"tel-country-code "
| 전화번호의 국가 코드 구성 요소 | ASCII 숫자 U+002B PLUS SIGN 문자(+)로 접두어를 붙임 | +1 | 텍스트 | |||
"tel-national "
| 국내 접두사가 적용된 국가 코드 구성 요소가 없는 전화번호 | ASCII 숫자 및 U+0020 SPACE 문자 | 617 253 5702 | 텍스트 | |||
"tel-area-code "
| 국내 접두사가 적용된 전화번호의 지역 코드 구성 요소 | ASCII 숫자 | 617 | 텍스트 | |||
"tel-local "
| 국가 코드 및 지역 코드 구성 요소가 없는 전화번호 | ASCII 숫자 | 2535702 | 텍스트 | |||
"tel-local-prefix "
| 구성 요소가 두 개로 나뉘어 있을 때, 지역 코드 다음에 오는 전화번호 구성 요소의 첫 번째 부분 | ASCII 숫자 | 253 | 텍스트 | |||
"tel-local-suffix "
| 구성 요소가 두 개로 나뉘어 있을 때, 지역 코드 다음에 오는 전화번호 구성 요소의 두 번째 부분 | ASCII 숫자 | 5702 | 텍스트 | |||
"tel-extension "
| 전화번호 내선 코드 | ASCII 숫자 | 1000 | 텍스트 | |||
"email "
| 이메일 주소 | 유효한 이메일 주소 | timbl@w3.org | 사용자 이름 | |||
"impp "
| 즉시 메시징 프로토콜 엔드포인트를 나타내는 URL (예: "aim:goim?screenname=example " 또는
"xmpp:fred@example.net ")
| 유효한 URL 문자열 | irc://example.org/timbl,isuser | URL |
그룹은 다음과 같은 컨트롤에 해당합니다:
input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 비밀번호 상태에
있는 요소들textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 URL 상태에 있는 요소들textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 이메일 상태에 있는 요소들
textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 전화 상태에 있는 요소들
textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 숫자 상태에 있는 요소들
textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 월 상태에 있는 요소들
textarea
요소들select
요소들input
요소로 type
속성이 숨김 상태에 있는
요소들input
요소로 type
속성이 텍스트
상태에 있는 요소들input
요소로 type
속성이 검색
상태에 있는 요소들input
요소로 type
속성이 날짜 상태에 있는 요소들textarea
요소들select
요소들주소 레벨: "주소 레벨 1
"
– "주소 레벨 4
"
필드는 도로 주소의 지역성을 설명하는 데 사용됩니다. 각 지역마다 레벨 수가 다릅니다. 예를 들어, 미국은 두 개의 레벨(주와 마을)을 사용하고, 영국은 주소에 따라 한 개 또는 두 개(우편 마을,
경우에 따라 지역)를 사용하며, 중국은 세 개(도, 시, 구)를 사용할 수 있습니다. "주소 레벨 1
"
필드는 가장 넓은 행정 구역을 나타냅니다. 지역마다 필드를 배열하는 방식이 다릅니다. 예를 들어, 미국에서는 마을(레벨 2)이 주(레벨 1) 앞에 오지만, 일본에서는 도(레벨 1)가 도시(레벨 2)
앞에 오며, 그 뒤에 구(레벨 3)가 옵니다. 저자는 사용자가 국가를 변경할 때마다 필드를 숨기거나, 표시하거나, 재배치하는 방식으로 국가의 관례에 맞게 양식을 제공하는 것이 좋습니다.
각 input
요소에
autocomplete
속성이 적용되며,
각 select
요소 및 각
textarea
요소는
자동 완성 힌트 세트, 자동 완성 범위, 자동 완성 필드 이름,
비자동 완성 자격 유형, IDL에 노출된 자동 완성
값을 가지고 있습니다.
자동 완성 필드 이름은 필드에서 기대되는 특정 데이터
종류를 지정하며,
예를 들어 "street-address
"
또는 "cc-exp
"와
같은 것입니다.
자동 완성 힌트 세트는 사용자 에이전트가 참고해야 할 주소나
연락처 정보 유형을 식별하며,
예를 들어 "shipping
fax
" 또는
"billing
"와
같습니다.
비자동 완성 자격 유형은
사용자가 필드와 상호작용할 때 사용자 에이전트가 제공할 수 있는
자격 유형을 식별합니다.
이 값이 "webauthn
"이고 null이 아닌 경우, 해당 유형의 자격을 선택하면 보류 중인 조건부
중재 navigator.credentials.get()
요청을 해결하게 됩니다.
예를 들어, 로그인 페이지는 사용자 에이전트에게 저장된 비밀번호를 자동으로 완성하거나, 보류 중인 공개 키 자격을 보여줄 수 있으며, 사용자는 로그인 시 어느 하나를 선택할 수 있습니다.
< input name = password type = password autocomplete = "current-password webauthn" >
자동 완성 범위는 동일한 주체와 관련된 정보 필드 그룹을 식별하며,
자동 완성 힌트 세트와, 해당하는 경우
"section-*
" 접두어로 구성됩니다. 예를 들어 "billing
", "section-parent shipping
", 또는
"section-child shipping home
"와 같습니다.
이 값들은 다음 알고리즘을 실행한 결과로 정의됩니다:
만약 이 요소에 autocomplete
속성이 없다면, default로 레이블된 단계로 이동하십시오.
tokens를 속성의 값을 ASCII 공백으로 분할한 결과로 설정하십시오.
tokens가 비어 있으면, default로 레이블된 단계로 이동하십시오.
index를 tokens에서 마지막 토큰의 인덱스로 설정하십시오.
field를 tokens에서 index번째 토큰으로 설정하십시오.
category와 maximum tokens 쌍을 필드의 범주를 결정한 결과로 설정하십시오 field를 인자로 전달하십시오.
category가 null인 경우, default로 레이블된 단계로 이동하십시오.
tokens의 토큰 수가 maximum tokens보다 많다면, default로 레이블된 단계로 이동하십시오.
category가 Off 또는 Automatic이고 요소의 autocomplete
속성이 autofill anchor
mantle을 가지고 있다면, default로 레이블된 단계로 이동하십시오.
category가 Off인 경우, 요소의 자동완성 필드 이름을 "off
"로 설정하고, 자동완성 힌트 집합을 비워두며,
IDL에 노출된
자동완성 값을 "off
"로 설정하십시오. 그런 다음, 반환하십시오.
category가 Automatic인 경우, 요소의 자동완성 필드 이름을 "on
"로 설정하고, 자동완성 힌트 집합을 비워두며,
IDL에 노출된
자동완성 값을 "on
"로 설정하십시오. 그런 다음, 반환하십시오.
scope tokens를 빈 리스트로 설정하십시오.
hint tokens를 빈 집합으로 설정하십시오.
credential type을 null로 설정하십시오.
IDL value를 field와 동일한 값으로 설정하십시오.
category가 Credential이고 index번째 tokens의 토큰이 "webauthn
"과
ASCII 대소문자 구분 없이 일치하는 경우, 다음 단계를 수행하십시오:
credential type을 "webauthn
"으로 설정하십시오.
만약 index번째 토큰이 첫 번째 항목이라면, done으로 레이블된 단계로 건너뛰십시오.
index를 1 감소시키십시오.
category와 maximum tokens 쌍을 필드의 범주를 결정한 결과로 설정하십시오 index번째 tokens의 토큰을 인자로 전달하십시오.
category가 Normal도 아니고 Contact도 아니라면, default로 레이블된 단계로 이동하십시오.
만약 index가 maximum tokens보다 하나 적다면 (즉, 남은 토큰 수가 maximum tokens보다 많다면), default로 레이블된 단계로 이동하십시오.
IDL value를 tokens의 index번째 토큰, U+0020 SPACE 문자, 및 이전 IDL value의 값으로 설정하십시오.
만약 index번째 토큰이 첫 번째 항목이라면, done으로 레이블된 단계로 건너뛰십시오.
index를 1 감소시키십시오.
만약 category가 Contact이고 index번째 토큰이 아래 목록에 있는 문자열 중 하나와 ASCII 대소문자 구분 없이 일치한다면, 다음 단계를 수행하십시오:
단계는 다음과 같습니다:
contact를 위 목록에서 일치하는 문자열로 설정하십시오.
contact를 scope tokens의 시작 부분에 삽입하십시오.
contact를 hint tokens에 추가하십시오.
IDL value를 contact, U+0020 SPACE 문자, 및 이전 IDL value의 값으로 설정하십시오.
만약 index번째 항목이 tokens의 첫 번째 항목이라면, done으로 레이블된 단계로 건너뛰십시오.
index를 1 감소시키십시오.
만약 index번째 토큰이 아래 목록에 있는 문자열 중 하나와 ASCII 대소문자 구분 없이 일치한다면, 다음 단계를 수행하십시오:
단계는 다음과 같습니다:
mode를 위 목록에서 일치하는 문자열로 설정하십시오.
mode를 scope tokens의 시작 부분에 삽입하십시오.
mode를 hint tokens에 추가하십시오.
IDL value를 mode, U+0020 SPACE 문자, 및 이전 IDL value의 값으로 설정하십시오.
만약 index번째 항목이 tokens의 첫 번째 항목이라면, done으로 레이블된 단계로 건너뛰십시오.
index를 1 감소시키십시오.
만약 index번째 항목이 tokens의 첫 번째 항목이 아닌 경우, default로 레이블된 단계로 이동하십시오.
만약 tokens의 index번째 토큰의 첫 여덟 글자가 "section-
"과
ASCII 대소문자 구분 없이 일치하지 않으면, default로 레이블된 단계로
이동하십시오.
section을 tokens의 index번째 토큰, ASCII 소문자로 변환된 값으로 설정하십시오.
section을 scope tokens의 시작 부분에 삽입하십시오.
IDL value를 section, U+0020 SPACE 문자, 및 이전 IDL value의 값으로 설정하십시오.
Done: 요소의 자동완성 힌트 집합을 hint tokens으로 설정하십시오.
요소의 비자동완성 자격 증명 유형을 credential type으로 설정하십시오.
요소의 자동완성 범위를 scope tokens으로 설정하십시오.
요소의 자동완성 필드 이름을 field로 설정하십시오.
요소의 IDL에 노출된 자동완성 값을 IDL value로 설정하십시오.
반환하십시오.
Default: 요소의 IDL에 노출된 자동완성 값을 빈 문자열로 설정하고, 자동완성 힌트 집합 및 자동완성 범위를 비워두십시오.
만약 요소의 autocomplete
속성이 자동완성 앵커
맨틀을 가지고 있다면, 요소의 자동완성 필드 이름을 빈 문자열로 설정하고 반환하십시오.
form을 요소의 양식 소유자로 설정하십시오, 있다면, 또는 null로 설정하십시오.
만약 form이 null이 아니고 form의 자동완성
속성이 off 상태에 있다면, 요소의 자동완성 필드 이름을 "off
"로
설정하십시오.
그렇지 않다면, 요소의 자동완성 필드
이름을 "on
"으로
설정하십시오.
field을(를) 주어진 상태에서 필드의 범주를 결정하기:
field이(가) 다음 표의 첫 번째 열에 주어진 토큰 중 하나와 ASCII 대소문자 구분 없이 일치하지 않으면, 쌍 (null, null)을 반환합니다.
토큰 | 최대 토큰 수 | 범주 |
---|---|---|
"off "
| 1 | Off |
"on "
| 1 | Automatic |
"name "
| 3 | Normal |
"honorific-prefix "
| 3 | Normal |
"given-name "
| 3 | Normal |
"additional-name "
| 3 | Normal |
"family-name "
| 3 | Normal |
"honorific-suffix "
| 3 | Normal |
"nickname "
| 3 | Normal |
"organization-title "
| 3 | Normal |
"username "
| 3 | Normal |
"new-password "
| 3 | Normal |
"current-password "
| 3 | Normal |
"one-time-code "
| 3 | Normal |
"organization "
| 3 | Normal |
"street-address "
| 3 | Normal |
"address-line1 "
| 3 | Normal |
"address-line2 "
| 3 | Normal |
"address-line3 "
| 3 | Normal |
"address-level4 "
| 3 | Normal |
"address-level3 "
| 3 | Normal |
"address-level2 "
| 3 | Normal |
"address-level1 "
| 3 | Normal |
"country "
| 3 | Normal |
"country-name "
| 3 | Normal |
"postal-code "
| 3 | Normal |
"cc-name "
| 3 | Normal |
"cc-given-name "
| 3 | Normal |
"cc-additional-name "
| 3 | Normal |
"cc-family-name "
| 3 | Normal |
"cc-number "
| 3 | Normal |
"cc-exp "
| 3 | Normal |
"cc-exp-month "
| 3 | Normal |
"cc-exp-year "
| 3 | Normal |
"cc-csc "
| 3 | Normal |
"cc-type "
| 3 | Normal |
"transaction-currency "
| 3 | Normal |
"transaction-amount "
| 3 | Normal |
"language "
| 3 | Normal |
"bday "
| 3 | Normal |
"bday-day "
| 3 | Normal |
"bday-month "
| 3 | Normal |
"bday-year "
| 3 | Normal |
"sex "
| 3 | Normal |
"url "
| 3 | Normal |
"photo "
| 3 | Normal |
"tel "
| 4 | Contact |
"tel-country-code "
| 4 | Contact |
"tel-national "
| 4 | Contact |
"tel-area-code "
| 4 | Contact |
"tel-local "
| 4 | Contact |
"tel-local-prefix "
| 4 | Contact |
"tel-local-suffix "
| 4 | Contact |
"tel-extension "
| 4 | Contact |
"email "
| 4 | Contact |
"impp "
| 4 | Contact |
"webauthn "
| 5 | Credential |
그렇지 않은 경우, maximum tokens 및 category을(를) 해당 행의 두 번째 및 세 번째 열에 있는 값으로 설정합니다.
쌍 (category, maximum tokens)을 반환합니다.
자동 완성의 목적을 위해, 컨트롤의 데이터는 컨트롤의 종류에 따라 달라집니다:
input
요소로,
type
속성이 Email 상태에
있으며 multiple
속성이 지정된 경우
input
요소
textarea
요소select
요소로,
multiple
속성이 지정된 경우
option
요소들 중에서
옵션 목록에서 선택 여부가
true로 설정된 항목입니다.
select
요소option
요소로,
옵션 목록에서 선택 여부가
true로 설정된 항목입니다.
자동 완성 힌트 세트, 자동 완성 범위, 및 자동 완성 필드 이름을 처리하는 방법은 자동 완성
속성이 착용한
맨틀에 따라 달라집니다.
요소의 자동 완성 필드 이름이
"off
"인
경우, 사용자 에이전트는 컨트롤의 데이터를 기억하지
않아야 하며, 이전 값을 사용자에게 제안하지 않아야 합니다.
또한, 요소의 자동 완성
필드 이름이 "off
"인
경우, 값이 초기화됩니다 문서를 다시 활성화할 때.
은행은 자주 사용자 에이전트가 로그인 정보를 미리 채우는 것을 원하지 않습니다:
<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>
요소의 자동 완성 필드 이름이
"off
"가
아닌 경우, 사용자 에이전트는 컨트롤의 데이터를
저장하고, 이전에 저장된 값을 사용자에게 제안할 수 있습니다.
예를 들어, 사용자가 이 컨트롤이 포함된 페이지를 방문했다고 가정해 봅시다:
<select name="country">
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>Andorra</option>
<option>Angola</option>
<option>Antigua and Barbuda</option>
<option>Argentina</option>
<option>Armenia</option>
<!-- ... -->
<option>Yemen</option>
<option>Zambia</option>
<option>Zimbabwe</option>
</select>
이것은 다음과 같이 렌더링될 수 있습니다:
이 페이지를 처음 방문했을 때 사용자가 "Zambia"를 선택했다고 가정합니다. 두 번째 방문 시, 사용자 에이전트는 목록의 맨 위에 "Zambia" 항목을 복제하여 인터페이스가 다음과 같이 보이도록 할 수 있습니다:
자동 완성 필드 이름이 "on
"인
경우, 사용자 에이전트는 요소의 name
값, 요소의 트리 내 위치, 양식 내 다른 필드 등을 기반으로 사용자에게 가장 적절한 값을 제공하기 위해 휴리스틱을 사용해야 합니다.
자동 완성 필드 이름이 위에서 설명한 자동 완성 필드 중 하나인 경우, 사용자 에이전트는 필드 이름의 의미에 맞는 제안을 제공해야 합니다. 자동 완성 힌트 세트는 여러 가능한 제안 중에서 선택하는 데 사용되어야 합니다.
예를 들어, 사용자가 한 번은 "shipping
"
키워드를 사용한 필드에 한 주소를 입력하고, "billing
"
키워드를 사용한 필드에 다른 주소를 입력했다면, 이후 양식에서는 "자동 완성 힌트 세트"에 "shipping
"
키워드가 포함된 경우에만 첫 번째 주소가 제안됩니다. 반면, 자동 완성 힌트 세트에 이러한 키워드가 포함되지 않은 주소 관련 필드에서는 두
주소가 모두 제안될 수 있습니다.
자동 완성 필드 이름이 빈 문자열이 아닌 경우, 사용자 에이전트는 주어진 컨트롤의 데이터, 자동 완성 힌트 세트, 자동 완성 범위 및 자동 완성 필드 이름 조합에 대해 사용자가 명시한 것처럼 행동해야 합니다.
사용자 에이전트가 양식 컨트롤을 자동 완성할 때, 동일한 양식 소유자와 동일한 자동 완성 범위를 가진 요소들은 동일한 사람, 주소, 결제 수단, 연락처 정보와 관련된 데이터를 사용해야
합니다. 사용자 에이전트가 동일한 양식
소유자와 자동 완성 범위를 가진 "country
"
및 "country-name
"
필드를 자동 완성할 때, 사용자 에이전트가 "country
"
필드에 대한 값을 가지고 있다면, "country-name
"
필드는 동일한 국가에 대한 사람이 읽을 수 있는 이름으로 채워져야 합니다. 사용자 에이전트가 여러 필드를 한 번에 채울 때, 동일한 자동 완성 필드 이름, 양식 소유자, 자동 완성 범위를 가진 모든 필드는 동일한 값으로 채워져야 합니다.
예를 들어, 사용자 에이전트가 +1 555 123 1234와 +1 555 666 7777이라는 두 개의 전화번호를 알고 있다고 가정합니다. 자동 완성을 하는 과정에서
autocomplete="shipping tel-local-prefix"
필드에 "123" 값을, 동일한 양식 내 다른 필드에
autocomplete="shipping tel-local-suffix"
값을 "7777"으로 채우는 것은 적합하지 않습니다. 위에 언급된 정보에 따라 유효한 자동 완성 값은
각각 "123"과 "1234" 또는 "666"과 "7777"이어야 합니다.
비슷하게, 어떤 이유로 양식에 "cc-exp
"
필드와 "cc-exp-month
"
필드가 모두 포함되어 있고, 사용자 에이전트가 양식을 미리 채운다면, 전자의 월 구성 요소는 후자와 일치해야 합니다.
이 요구사항은 자동 완성 앵커 맨틀과도 상호작용합니다. 다음 마크업 스니펫을 고려해 보십시오:
<form>
<input type="hidden" autocomplete="nickname" value="TreePlate">
<input type="text" autocomplete="nickname">
</form>
준수하는 사용자 에이전트가 텍스트 컨트롤에 제안할 수 있는 유일한 값은 숨겨진 input
요소에서 제공된 값인
"TreePlate"입니다.
"section-*
" 토큰은 자동 완성 범위에서
불투명하며, 사용자 에이전트는 이러한 토큰의 정확한 값에서 의미를 도출하려고 해서는 안 됩니다.
예를 들어, 사용자 에이전트가 "section-child
"에 대해 사용자의 자녀의 주소를 제안하고 "section-spouse
"에
대해 사용자의 배우자의 주소를 제안하기로 결정하는 것은 준수하지 않을 것입니다.
자동 완성 메커니즘은 사용자 에이전트가 사용자가 컨트롤의 데이터를 수정한 것처럼 행동하고, 요소가 변경 가능한 상태 (예: 요소가 문서에 삽입된 직후 또는 사용자 에이전트가 구문 분석을 중지할 때)일 때 수행되어야 합니다. 사용자 에이전트는 사용자가 입력할 수 있었던 값만 사용하여 컨트롤을 미리 채워야 합니다.
예를 들어, select
요소에 "Steve",
"Rebecca", "Jay", "Bob" 값만 있는 option
요소들이 있고, 자동 완성 필드 이름이 "given-name
"로
되어 있으며, 사용자 에이전트가 자동 완성하려고 하는 유일한 값이 "Evan"인 경우, 사용자 에이전트는 필드를 미리 채울 수 없습니다. 사용자가 직접 그렇게 할 수 없었기 때문에, 사용자 에이전트가
어떻게든 select
요소를
"Evan" 값으로 설정하는 것은 준수하지 않을 것입니다.
양식 컨트롤을 미리 채우는 사용자 에이전트는 문서 트리 내에 있는 양식
컨트롤과 연결된 양식 컨트롤 간에 차별해서는 안 됩니다; 즉, 요소의 루트가 섀도우 루트인지 document
인지에 따라 자동 완성 여부를 결정하는 것은 준수하지
않습니다.
양식 컨트롤의 값을 미리 채우는 사용자 에이전트는 해당 컨트롤이 유형 불일치로 인한 문제, 너무 길어짐으로 인한 문제, 너무 짧아짐으로 인한 문제, 언더플로우로 인한 문제, 오버플로우로 인한 문제, 단계 불일치로 인한 문제를 겪지 않도록 해야 합니다. 또한, 사용자 에이전트는 패턴 불일치로 인한 문제를 유발해서는 안 됩니다. 컨트롤의 제약 사항을 고려하여 가능한 경우, 사용자 에이전트는 이전에 언급된 표에서 정식으로 제공된 형식을 사용해야 합니다. 정식 형식을 사용할 수 없는 경우, 사용자 에이전트는 값을 변환하여 사용할 수 있도록 휴리스틱을 사용해야 합니다.
예를 들어, 사용자 에이전트가 사용자의 중간 이름이 "Ines"라는 것을 알고 있고, 다음과 같은 양식 컨트롤을 미리 채우려고 한다고 가정해 보십시오:
<input name="middle-initial" maxlength="1" autocomplete="additional-name">
...이 경우, 사용자 에이전트는 "Ines"를 "I"로 변환하여 미리 채울 수 있습니다.
더 정교한 예로는 월 값이 있을 수 있습니다. 사용자 에이전트가 사용자의 생일이 2012년 7월 27일이라는 것을 알고 있다면, 다음과 같이 약간 다른 값을 가지고 모든 컨트롤을 미리 채우려고 할 수 있습니다:
| 2012-07 |
일은 생략됩니다. 왜냐하면 월 상태는 월/년 조합만을 허용하기 때문입니다. (이 예는
준수하지 않는데, 그 이유는 자동
완성 필드 이름 bday 가
월
상태와 허용되지 않기 때문입니다.)
|
| 7월 | 사용자 에이전트는 열두 개의 옵션이 있는 것을 확인하고 7번째를 선택하거나, "Jul"이라는 문자열(세 글자 "Jul" 다음에 줄 바꿈 및 공백)이 사용자 에이전트의 지원 언어 중 하나로 월 이름(July)과 가까운 일치라고 인식하거나, 다른 유사한 메커니즘을 통해 옵션 목록에서 월을 선택합니다. |
| 7 | 사용자 에이전트는 "July"를 1..12 범위의 월 숫자로 변환하여 필드를 채웁니다. |
| 6 | 사용자 에이전트는 "July"를 0..11 범위의 월 숫자로 변환하여 필드를 채웁니다. |
| 사용자 에이전트는 양식이 기대하는 내용을 잘 추측할 수 없기 때문에 필드를 채우지 않습니다. |
사용자 에이전트는 사용자가 요소의 자동 완성 필드
이름을 무시하도록 허용할 수 있습니다. 예를 들어, 페이지 작성자의 반대에도 불구하고 값을 기억하고 미리 채울 수 있도록 "off
"에서
"on
"으로
변경하거나, 값을 절대 기억하지 않도록 항상 "off
"로
설정할 수 있습니다.
더 구체적으로, 사용자 에이전트는 특히 다음 표의 첫 번째 열에 주어진 설명과 일치하는 양식 컨트롤의 자동 완성 필드 이름을 "on
" 또는
"off
"인
경우, 해당 행의 두 번째 셀에 주어진 값으로 교체하는 것을 고려할 수 있습니다. 이 표가 사용되는 경우, 모든 행을 트리 순서로 교체해야 합니다. 첫 번째 행을
제외한 모든 행은 이전 요소의 자동 완성 필드
이름을 참조합니다. 아래 설명에서 양식 컨트롤이 다른 요소 앞이나 뒤에 위치한다고 할 때, 이는 동일한 양식 소유자를 공유하는 목록에 있는 요소들을 의미합니다.
양식 컨트롤 | 새로운 자동 완성 필드 이름 |
---|---|
input
요소로, type
속성이 Text
상태에 있고, 뒤에 input 요소가
있으며, type
속성이 Password 상태에 있습니다.
|
"username "
|
input
요소로, type
속성이 Password 상태에 있고, 앞에 input 요소가
있으며, 자동 완성 필드
이름이 "username "입니다.
|
"current-password "
|
input
요소로, type
속성이 Password 상태에 있고, 앞에 input
요소가 있으며, 자동 완성 필드
이름이 "current-password "입니다.
|
"new-password "
|
input
요소로, type
속성이 Password 상태에 있고, 앞에 input
요소가 있으며, 자동 완성 필드
이름이 "new-password "입니다.
|
"new-password "
|
autocomplete
IDL 속성은 가져올 때 요소의 IDL로 노출된 자동 완성
값을 반환해야 하며, 설정할 때는 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
input
및 textarea
요소는 선택을 처리하기 위한
여러 속성과 메서드를 정의합니다. 이들의 공통 알고리즘은 여기에서 정의됩니다.
element.select()
텍스트 컨트롤의 모든 내용을 선택합니다.
element.selectionStart [ = value ]
선택의 시작 오프셋을 반환합니다.
선택의 시작을 변경하기 위해 설정할 수 있습니다.
element.selectionEnd [ = value ]
선택의 끝 오프셋을 반환합니다.
선택의 끝을 변경하기 위해 설정할 수 있습니다.
element.selectionDirection [ = value ]
선택의 현재 방향을 반환합니다.
선택의 방향을 변경하기 위해 설정할 수 있습니다.
가능한 값은 "forward
", "backward
", "none
"입니다.
element.setSelectionRange(start, end [, direction])
HTMLInputElement/setSelectionRange
모든 현재 엔진에서 지원됨.
선택을 주어진 방향의 하위 문자열을 포함하도록 변경합니다. 방향이 생략되면 기본 플랫폼 값(없음 또는 forward)으로 재설정됩니다.
element.setRangeText(replacement [, start, end [, selectionMode ] ])
모든 현재 엔진에서 지원됨.
텍스트 범위를 새 텍스트로 대체합니다. start 및 end 인수가 제공되지 않은 경우 범위는 선택으로 간주됩니다.
마지막 인수는 텍스트가 대체된 후 선택이 어떻게 설정될지를 결정합니다. 가능한 값은 다음과 같습니다:
select
"
start
"
end
"
preserve
"
모든 input
요소와 이 API가 적용되는 모든 textarea
요소는 항상 선택 또는
텍스트 입력 커서 위치를 가지고 있으며, 이는 제어의 코드
유닛의 오프셋으로 측정됩니다. 초기 상태는 제어의 시작 부분에 텍스트 입력 커서로 구성되어야 합니다.
이 API는 input
요소의 값에 대해 작동해야 하며, textarea
요소의 경우, 이
API는 요소의 API 값에 대해 작동해야 합니다. 아래
알고리즘에서, 우리가 작업 중인 값 문자열을 관련 값이라고 부릅니다.
API 값 대신 원시 값을 사용하는 것은 U+000D (CR) 문자가 정규화된다는 것을 의미합니다. 예를 들어,
< textarea id = "demo" ></ textarea >
< script >
demo. value = "A\r\nB" ;
demo. setRangeText( "replaced" , 0 , 2 );
assert( demo. value === "replacedB" );
</ script >
원시 값
"A\r\nB
"에 대해 작업했다면, "A\r
" 문자를 대체하여 "replaced\nB
"의 결과를 얻었을 것입니다. 그러나
"A\nB
"의 API 값을
사용했기 때문에 "A\n
" 문자를 대체하여 "replacedB
"를 얻었습니다.
U+200D ZERO WIDTH JOINER와 같이 보이지 않는 렌더링을 가진 문자도 여전히 문자로 계산됩니다. 따라서 예를 들어, 선택은 보이지 않는 문자만을 포함할 수 있으며, 텍스트 삽입 커서는 그러한 문자의 한쪽 또는 다른 쪽에 배치될 수 있습니다.
이 API가 적용되는 요소에 대해 관련 값이 변경될 때마다 다음 단계를 실행합니다:
요소에 선택이 있는 경우:
그렇지 않으면, 요소는 텍스트 입력 커서 위치를 가져야 합니다. 이제 이것이 관련 값의 끝을 지났다면, 이를 관련 값의 끝으로 설정합니다.
관련 값이 변경되는 경우에 따라, 사양의 다른 부분에서도 위의 클램핑 단계
외에 텍스트 입력 커서
위치를 수정할 수 있습니다. 예를 들어, value
세터를 참고하세요.
가능한 경우, input
및 textarea
요소의 텍스트 선택을
변경하기 위한 사용자 인터페이스 기능은 선택 범위
설정 알고리즘을 사용하여 구현해야 합니다. 예를 들어, 모든 동일한 이벤트가 발생하도록 합니다.
input
및 textarea
요소의 선택에는
"forward
", "backward
", "none
" 중 하나의 선택
방향이 있습니다. 선택 방향의 정확한 의미는 플랫폼에 따라 다릅니다. 이 방향은 사용자가 선택을 조작할 때 설정됩니다. 초기 선택 방향은 플랫폼이 그 방향을 지원하면 "none
", 그렇지 않으면
"forward
"여야 합니다.
요소의 선택 방향을 주어진 방향으로 설정하려면, 플랫폼이 그 방향을 지원하지 않으면 "none
"으로 설정하고, 그렇지 않으면 요소의 선택 방향을 주어진 방향으로 업데이트합니다. 그렇지 않으면,
요소의 선택 방향을 "forward
"로
업데이트합니다.
Windows에서는 방향이 선택과의 관계에서 캐럿의 위치를 나타냅니다: "forward
" 선택은 선택의 끝에 캐럿이 있고, "backward
" 선택은
선택의 시작에 캐럿이 있습니다. Windows에는 "none
" 방향이 없습니다.
Mac에서는 방향이 사용자가 Shift 수정자를 사용하여 화살표 키로 선택의 크기를 조정할 때 영향을 받는 선택의 끝을 나타냅니다: "forward
" 방향은 선택의 끝이
수정됨을 의미하고, "backward
" 방향은 선택의 시작이 수정됨을 의미합니다. Mac의 기본 방향은 "none
"으로, 아직 특정 방향이 선택되지
않았음을 나타냅니다. 사용자는 첫 번째 방향 화살표 키를 사용하여 선택을 조정할 때 방향을 암묵적으로 설정합니다.
모든 현재 엔진에서 지원됨.
select()
메서드는 호출될 때 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
select()
가
이 요소에 적용되지 않거나 해당 컨트롤에 선택할 수 있는 텍스트가 없으면,
반환합니다.
예를 들어, <input type=color>
이
텍스트 컨트롤이 아닌 색상 코드를 허용하는 헥사 값 입력으로 렌더링된 사용자 에이전트에서는 선택할 수 있는 텍스트가 없으므로 메서드 호출이 무시됩니다.
선택 범위 설정을 0 및 무한대로 설정합니다.
selectionStart
속성의 getter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionStart
가
이 요소에 적용되지 않으면, null을 반환합니다.
selectionStart
속성의 setter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionStart
가
이 요소에 적용되지 않으면, "InvalidStateError
" DOMException
을
throw합니다.
이 요소의 selectionEnd
속성 값을 end로 설정합니다.
end가 주어진 값보다 작으면, end를 주어진 값으로 설정합니다.
선택 범위 설정을 주어진 값,
end, 그리고 이 요소의 selectionDirection
속성 값으로 설정합니다.
selectionEnd
속성의 getter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionEnd
가
이 요소에 적용되지 않으면, null을 반환합니다.
selectionEnd
속성의 setter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionEnd
가
이 요소에 적용되지 않으면, "InvalidStateError
" DOMException
을
throw합니다.
선택 범위 설정을 이 요소의
selectionStart
속성 값, 주어진 값, 그리고 이 요소의 selectionDirection
속성 값으로 설정합니다.
selectionDirection
속성의 getter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionDirection
이
이 요소에 적용되지 않으면, null을 반환합니다.
이 요소의 selection direction을 반환합니다.
selectionDirection
속성의 setter는 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
selectionDirection
이
이 요소에 적용되지 않으면, "InvalidStateError
" DOMException
을
throw합니다.
선택 범위 설정을 이 요소의
selectionStart
속성 값, 이 요소의 selectionEnd
속성 값 및 주어진 값으로 설정합니다.
setSelectionRange(start, end, direction)
메서드는 호출될 때 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
setSelectionRange()
이
이 요소에 적용되지 않으면, "InvalidStateError
" DOMException
을
throw합니다.
선택 범위 설정을 start, end 및 direction으로 설정합니다.
선택 범위 설정을 정수 또는 null start, 정수 또는 null 또는 특수 값 infinity end와 선택적으로 문자열 direction을 사용하여 실행하려면, 다음 단계를 실행합니다:
start가 null이면, start를 0으로 설정합니다.
end가 null이면, end를 0으로 설정합니다.
텍스트 컨트롤의 선택을 start 위치에서 시작하여 (end-1) 위치에서 끝나는 코드 유닛 시퀀스로 설정합니다. 텍스트 컨트롤의 관련 값의 길이보다 큰 인수(특수 값 infinity 포함)는 텍스트 컨트롤의 끝을 가리키는 것으로 처리해야 합니다. end가 start보다 작거나 같으면 선택의 시작과 끝을 모두 end 오프셋 바로 앞에 배치해야 합니다. 빈 선택의 개념이 없는 사용자 에이전트에서는 이 커서를 end 오프셋 바로 앞에 설정해야 합니다.
direction이 "backward
" 또는 "forward
"와 동일하지 않거나, direction 인수가 제공되지 않은 경우,
direction을 "none
"으로 설정합니다.
텍스트 컨트롤의 선택 방향 설정을 direction으로 설정합니다.
이전 단계로 인해 텍스트 컨트롤의 선택이 (범위 또는 방향에서) 수정되었다면, 요소를 기준으로 이벤트를 발생시키기 위해 요소 작업을 큐에 넣습니다. 이 이벤트의 이름은 select
이고, bubbles
속성은 true로 초기화되어야 합니다.
setRangeText(replacement, start, end, selectMode)
메서드는 호출될 때 다음 단계를 실행해야 합니다:
이 요소가 input
요소이고,
setRangeText()
이
이 요소에 적용되지 않으면, "InvalidStateError
" DOMException
을
throw합니다.
이 요소의 더티 값 플래그를 true로 설정합니다.
메서드에 인수가 하나만 있는 경우, start와 end에 selectionStart
속성 및 selectionEnd
속성의 값을 각각 설정합니다.
그렇지 않으면, start와 end에 각각 두 번째 및 세 번째 인수의 값을 설정합니다.
start가 end보다 크면, "IndexSizeError
" DOMException
을
throw합니다.
selection start를 selectionStart
속성의 현재 값으로 설정합니다.
selection end를 selectionEnd
속성의 현재 값으로 설정합니다.
start가 end보다 작으면, 요소의 관련 값 내에서 start 위치에서 시작하여 (end-1) 위치에서 끝나는 코드 유닛 시퀀스를 삭제합니다.
new length를 첫 번째 인수의 길이로 설정합니다.
new end를 start와 new length의 합으로 설정합니다.
다음 목록에서 적절한 하위 단계를 실행합니다:
select
"인 경우selection start를 start로 설정합니다.
selection end를 new end로 설정합니다.
start
"인 경우selection start와 selection end를 start로 설정합니다.
end
"인 경우selection start와 selection end를 new end로 설정합니다.
preserve
"인 경우old length를 end에서 start를 뺀 값으로 설정합니다.
delta를 new length에서 old length를 뺀 값으로 설정합니다.
selection start가 end보다 크면, delta만큼 증가시킵니다. (delta가 음수이면, 즉 새로운 텍스트가 이전 텍스트보다 짧으면, selection start의 값이 감소됩니다.)
그렇지 않으면: selection start가 start보다 크면, start로 설정합니다. (이것은 선택의 시작을 대체된 텍스트의 시작 부분으로 맞춥니다.)
selection end가 end보다 크면, delta만큼 동일한 방식으로 증가시킵니다.
그렇지 않으면: selection end가 start보다 크면, new end로 설정합니다. (이것은 선택의 끝을 대체된 텍스트의 끝 부분으로 맞춥니다.)
선택 범위 설정을 selection start와 selection end로 설정합니다.
setRangeText()
메서드는 다음 열거형을 사용합니다:
enum SelectionMode {
" select " ,
" start " ,
" end " ,
" preserve " // 기본값
};
현재 선택된 텍스트를 얻으려면 다음 JavaScript 코드로 충분합니다:
var selectionText = control. value. substring( control. selectionStart, control. selectionEnd);
텍스트 컨트롤의 시작 부분에 일부 텍스트를 추가하면서 텍스트 선택을 유지하려면, 세 가지 속성을 유지해야 합니다:
var oldStart = control. selectionStart;
var oldEnd = control. selectionEnd;
var oldDirection = control. selectionDirection;
var prefix = "http://" ;
control. value = prefix + control. value;
control. setSelectionRange( oldStart + prefix. length, oldEnd + prefix. length, oldDirection);
제출 가능한 요소는 제약 조건 유효성 검사 후보이며, 어떤 조건이 제약 조건 유효성 검사에서 제외되었을 때 제외되지 않은 경우에만 해당합니다. (예를 들어, 요소에 datalist
요소 조상이 있으면 제약 조건 유효성 검사에서
제외됩니다.)
요소는 사용자 정의 유효성 오류 메시지를 가질 수 있습니다. 처음에는 요소의 사용자 정의 유효성 오류 메시지를 빈
문자열로 설정해야 합니다. 값이 빈 문자열이 아니면 요소는 사용자 정의 오류로 인해 문제가 발생한 상태가 됩니다. 이는 setCustomValidity()
메서드를 사용하여 설정할 수 있으며, 폼 연관
커스텀 요소는 예외입니다. 폼
연관 커스텀 요소는 ElementInternals
객체의 setValidity()
메서드를 통해 사용자 정의 유효성 오류
메시지를 설정할 수 있습니다. 사용자 에이전트는 해당 컨트롤에서 문제가 발생했을 때 사용자 정의 유효성 오류 메시지를 사용해 사용자에게 경고해야 합니다.
요소는 다양한 방식으로 제한될 수 있습니다. 다음은 폼 컨트롤이 제약 조건 유효성 검사에서 유효하지 않게 만드는 유효성 상태 목록입니다. (아래 정의는 비표준적이며, 다른 부분에서 각 상태가 언제 적용되는지 또는 적용되지 않는지 더 정확하게 정의합니다.)
컨트롤에 required
속성 (input
required
, textarea
required
)이 있으나 값이 없는 경우; 또는 더 복잡한 규칙이 select
요소와 라디오 버튼 그룹의 컨트롤에 적용됩니다.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 valueMissing
플래그를 true로 설정할 때.
임의의 사용자 입력을 허용하는 컨트롤에 올바른 구문이 아닌 값이 있는 경우 (이메일, URL).
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 typeMismatch
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, 패턴
속성을 만족하지 않는 경우.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 patternMismatch
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, 폼 컨트롤 maxlength
속성 (input
maxlength
, textarea
maxlength
)에 비해 너무
긴 경우.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 tooLong
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, 폼 컨트롤 minlength
속성 (input
minlength
, textarea
minlength
)에 비해 너무
짧은 경우.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 tooShort
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, 비어 있지 않고 min
속성에 비해 너무 낮은 경우.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 rangeUnderflow
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, 비어 있지 않고 max
속성에 비해 너무 높은 경우.
setValidity()
메서드가 폼 연관 사용자 정의
요소에 대해 rangeOverflow
플래그를 true로 설정할 때.
컨트롤에 값이 있으며, step
속성에 정의된 규칙에 맞지 않는 경우.
setValidity()
메서드가 폼 연관 사용자
정의 요소에 대해 stepMismatch
플래그를 true로 설정할 때.
사용자가 입력한 내용이 불완전하고, 사용자 에이전트가 사용자가 현재 상태에서 폼을 제출할 수 있다고 판단하지 않는 경우.
setValidity()
메서드가 폼 연관 사용자
정의 요소에 대해 badInput
플래그를 true로 설정할 때.
컨트롤의 사용자 정의 유효성 오류
메시지 (요소의 setCustomValidity()
메서드 또는 ElementInternals
의
setValidity()
메서드를 통해 설정됨)가 빈 문자열이 아닌 경우.
요소가 비활성화된 상태에서도 이러한 상태로 인해 문제가 발생할 수 있습니다. 따라서 제출 시 폼을 유효성 검사할 때 사용자에게 문제가 발생하지 않더라도 이러한 상태가 DOM에 나타날 수 있습니다.
요소가 위에 나열된 유효성 상태 중 어느 하나도 발생하지 않으면 제약 조건을 충족한 상태입니다.
사용자 에이전트가 제약 조건을 정적으로 유효성 검사해야 할 때, form
요소 form에 대해
다음 단계를 실행해야 합니다. 이 단계는 긍정적 결과(폼의 모든 컨트롤이 유효함) 또는 부정적 결과(유효하지 않은 컨트롤이 있음)와 함께 스크립트가 책임을 주장하지 않은
유효하지 않은 요소들의 목록(비어 있을 수도 있음)을 반환합니다:
controls를 form의 폼 소유자가 form인 제출 가능한 요소들의 목록으로, 트리 순서로 설정합니다.
invalid controls를 처음에는 비어 있는 요소들의 목록으로 설정합니다.
controls의 각 field 요소에 대해, 트리 순서로:
만약 field가 제약 조건 유효성 검사 후보가 아니라면, 다음 요소로 넘어갑니다.
그렇지 않고, field가 제약 조건을 충족한다면, 다음 요소로 넘어갑니다.
그렇지 않으면, field를 invalid controls에 추가합니다.
invalid controls가 비어 있으면, 긍정적 결과를 반환합니다.
unhandled invalid controls를 처음에는 비어 있는 요소들의 목록으로 설정합니다.
만약 invalid controls에 요소가 있다면, 각 field 요소에 대해 트리 순서로:
notCanceled를 field에서 invalid
이라는 이름의 이벤트를
cancelable
속성이 true로 초기화된 상태로 발생시킨 결과로
설정합니다.
만약 notCanceled이 true라면, field를 unhandled invalid controls에 추가합니다.
unhandled invalid controls 목록에 있는 요소들의 목록과 함께 부정적 결과를 반환합니다.
사용자 에이전트가 form
요소
form에 대해 제약 조건을 대화식으로 유효성 검사해야 하는 경우, 다음 단계를
실행해야 합니다:
제약 조건을 정적으로 유효성 검사하고, 결과가 부정적이었다면 반환된 목록을 unhandled invalid controls로 설정합니다.
결과가 긍정적이었다면, 그 결과를 반환합니다.
unhandled invalid controls에 있는 요소들 중 적어도 하나의 제약 조건 문제를 사용자에게 보고합니다.
사용자 에이전트는 이 과정에서 해당 요소에 대해 포커싱 단계를 실행하여 포커스를 맞추거나, 문서의 스크롤 위치를 변경하거나, 사용자의 주의를 끌기 위해 다른 동작을 수행할 수 있습니다. 폼 연관 커스텀 요소의 경우, 사용자 에이전트는 이러한 작업을 위해 유효성 검사 앵커를 대신 사용해야 합니다.
사용자 에이전트는 하나 이상의 제약 조건 위반을 보고할 수 있습니다.
사용자 에이전트는 적절한 경우 관련된 제약 조건 위반 보고를 통합할 수 있습니다(예: 그룹에 있는 여러 라디오 버튼이 필수로 표시된 경우, 하나의 오류만 보고하면 됩니다).
만약 컨트롤 중 하나가 렌더링되지 않은 상태라면(예: 속성이 설정된 경우), 사용자 에이전트는 스크립트 오류를 보고할 수 있습니다.
부정적 결과를 반환합니다.
element.willValidate
HTMLObjectElement/willValidate
모든 현재 엔진에서 지원됨.
폼이 제출될 때 요소가 유효성 검사를 받는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.setCustomValidity(message)
HTMLObjectElement/setCustomValidity
모든 현재 엔진에서 지원됨.
HTMLSelectElement/setCustomValidity
모든 현재 엔진에서 지원됨.
사용자 정의 오류를 설정하여 요소가 유효성 검사를 통과하지 못하게 합니다. 제공된 메시지는 사용자에게 문제를 보고할 때 사용자에게 표시될 메시지입니다.
인수가 빈 문자열인 경우, 사용자 정의 오류를 지웁니다.
element.validity.valueMissing
모든 현재 엔진에서 지원됨.
필수 필드이지만 요소에 값이 없는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.typeMismatch
요소의 값이 올바른 구문이 아닌 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.patternMismatch
요소의 값이 제공된 패턴과 일치하지 않는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.tooLong
모든 현재 엔진에서 지원됨.
요소의 값이 제공된 최대 길이보다 긴 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.tooShort
모든 현재 엔진에서 지원됨.
요소의 값이 빈 문자열이 아닌 경우 제공된 최소 길이보다 짧은 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.rangeUnderflow
요소의 값이 제공된 최소값보다 낮은 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.rangeOverflow
요소의 값이 제공된 최대값보다 높은 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.stepMismatch
요소의 값이 step
속성에 의해 제공된 규칙에 맞지 않는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.badInput
모든 현재 엔진에서 지원됨.
사용자가 UI에서 입력한 값을 사용자 에이전트가 값으로 변환할 수 없는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.customError
요소에 사용자 정의 오류가 있는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
element.validity.valid
요소의 값에 유효성 문제 없을 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
valid = element.checkValidity()
HTMLInputElement/checkValidity
모든 현재 엔진에서 지원됨.
HTMLObjectElement/checkValidity
모든 현재 엔진에서 지원됨.
HTMLSelectElement/checkValidity
모든 현재 엔진에서 지원됨.
요소의 값에 유효성 문제가 없으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 후자의 경우 요소에서 invalid
이벤트를
발생시킵니다.
valid = element.reportValidity()
HTMLFormElement/reportValidity
모든 현재 엔진에서 지원됨.
HTMLInputElement/reportValidity
모든 현재 엔진에서 지원됨.
요소의 값에 유효성 문제가 없으면 true를 반환하고, 그렇지 않으면 false를 반환하며, 요소에서 invalid
이벤트를
발생시키고(이벤트가 취소되지 않은 경우) 문제를 사용자에게 보고합니다.
element.validationMessage
HTMLObjectElement/validationMessage
모든 현재 엔진에서 지원됨.
요소의 유효성을 검사할 경우 사용자에게 표시될 오류 메시지를 반환합니다.
willValidate
속성의 getter는 이
요소가 제약 조건 유효성 검사 후보인 경우 true를,
그렇지 않은 경우(즉, 제약 조건 유효성 검사가 차단된 조건이 있는 경우)
false를 반환해야 합니다.
모든 현재 엔진에서 지원됨.
willValidate
속성의 getter는 ElementInternals
인터페이스에서, "NotSupportedError
" DOMException
을 발생시켜야 합니다.
대상 요소가
양식 관련
커스텀 요소가 아닌 경우,
그렇지 않은 경우, 대상 요소가
제약 조건 유효성 검사 후보인 경우
true를, 그렇지 않은 경우 false를 반환해야 합니다.
HTMLInputElement/setCustomValidity
모든 현재 엔진에서 지원됨.
setCustomValidity(error)
메서드의 단계는 다음과 같습니다:
error를 줄 바꿈을 정규화하는 결과로 설정합니다.
사용자 정의 유효성 오류 메시지를 error로 설정합니다.
다음 예제에서 스크립트는 폼 컨트롤의 값을 편집할 때마다 확인하고, 유효하지 않은 값이 있는 경우 setCustomValidity()
메서드를 사용하여 적절한 메시지를 설정합니다.
< label > Feeling: < input name = f type = "text" oninput = "check(this)" ></ label >
< script >
function check( input) {
if ( input. value == "good" ||
input. value == "fine" ||
input. value == "tired" ) {
input. setCustomValidity( '"' + input. value + '" is not a feeling.' );
} else {
// 입력이 정상입니다. -- 오류 메시지를 재설정합니다.
input. setCustomValidity( '' );
}
}
</ script >
모든 현재 엔진에서 지원됨.
validity
속성의 getter는 이 요소의
유효성 상태를 나타내는 ValidityState
객체를
반환해야 합니다. 이 객체는 실시간입니다.
모든 현재 엔진에서 지원됨.
validity
속성의 getter는 ElementInternals
인터페이스에서, "NotSupportedError
" DOMException
을 발생시켜야 합니다.
대상 요소가
양식 관련
커스텀 요소가 아닌 경우,
그렇지 않은 경우, ValidityState
객체를 반환해야 하며, 이는 유효성
상태를 나타냅니다. 이 객체는 실시간입니다.
[Exposed =Window ]
interface ValidityState {
readonly attribute boolean valueMissing ;
readonly attribute boolean typeMismatch ;
readonly attribute boolean patternMismatch ;
readonly attribute boolean tooLong ;
readonly attribute boolean tooShort ;
readonly attribute boolean rangeUnderflow ;
readonly attribute boolean rangeOverflow ;
readonly attribute boolean stepMismatch ;
readonly attribute boolean badInput ;
readonly attribute boolean customError ;
readonly attribute boolean valid ;
};
ValidityState
객체에는 다음 속성이 있습니다. getter를 호출하면 다음 목록에 제공된 해당 조건이 true인 경우 true를 반환하고, 그렇지 않은 경우 false를 반환해야 합니다.
valueMissing
컨트롤이 값이 누락된 상태입니다.
typeMismatch
모든 현재 엔진에서 지원됨.
컨트롤이 유형 불일치 상태입니다.
patternMismatch
모든 현재 엔진에서 지원됨.
컨트롤이 패턴 불일치 상태입니다.
tooLong
컨트롤이 값이 너무 긴 상태입니다.
tooShort
컨트롤이 값이 너무 짧은 상태입니다.
rangeUnderflow
모든 현재 엔진에서 지원됨.
컨트롤이 범위 언더플로 상태입니다.
rangeOverflow
모든 현재 엔진에서 지원됨.
컨트롤이 범위 오버플로 상태입니다.
stepMismatch
모든 현재 엔진에서 지원됨.
컨트롤이 단계 불일치 상태입니다.
badInput
컨트롤이 잘못된 입력 상태입니다.
customError
컨트롤이 사용자 정의 오류 상태입니다.
valid
다른 조건이 모두 false인 경우입니다.
유효성 검사 단계는 요소 element에 대해 다음과 같습니다:
element가 제약 조건 유효성 검사 후보이고 제약 조건을 만족하지 못하는 경우:
true를 반환합니다.
checkValidity()
메서드는 호출될 때
이 요소에 대해 유효성
검사 단계를 실행해야 합니다.
ElementInternals/checkValidity
모든 현재 엔진에서 지원됨.
checkValidity()
메서드는 ElementInternals
인터페이스에서 다음 단계를 실행해야 합니다:
element를 이 ElementInternals
의
대상 요소로 설정합니다.
element가 양식 관련 커스텀 요소가
아닌 경우,
"NotSupportedError
" DOMException
을
발생시킵니다.
element에 대해 유효성 검사 단계를 실행합니다.
유효성 보고 단계는 요소 element에 대해 다음과 같습니다:
element가 제약 조건 유효성 검사 후보이고 제약 조건을 만족하지 못하는 경우:
report를 이벤트
발생의 결과로 설정하고, 이 이벤트를 element에서
invalid
라는
이름으로 발생시킵니다.
취소 가능
속성은 true로 초기화됩니다.
report가 true이면, 이 요소의 제약 조건에 대한 문제를 사용자에게 보고합니다. 제약 조건 문제를 사용자에게 보고할 때, 사용자 에이전트는 포커싱 단계를 element에 대해 실행할 수 있으며, 문서의 스크롤 위치를 변경하거나 element를 사용자가 주목할 수 있는 위치로 가져오는 등의 작업을 수행할 수 있습니다. element에 여러 가지 문제가 동시에 발생한 경우, 사용자 에이전트는 하나 이상의 제약 조건 위반을 보고할 수 있습니다.
false를 반환합니다.
true를 반환합니다.
reportValidity()
메서드는 호출될 때
이 요소에 대해 유효성
보고 단계를 실행해야 합니다.
ElementInternals/reportValidity
모든 현재 엔진에서 지원됨.
reportValidity()
메서드는 ElementInternals
인터페이스에서 다음 단계를 실행해야 합니다:
element를 이 ElementInternals
의
대상 요소로 설정합니다.
element가 양식 관련 커스텀 요소가
아닌 경우,
"NotSupportedError
" DOMException
을
발생시킵니다.
element에 대해 유효성 보고 단계를 실행합니다.
validationMessage
속성의 getter는 다음 단계를 실행해야 합니다:
이 요소가 제약 조건 유효성 검사 후보가 아니거나 이 요소가 제약 조건을 만족하는 경우에는 빈 문자열을 반환합니다.
이 요소만 유효성 제약 문제를 가진 폼 컨트롤인 경우 사용자 에이전트가 사용자에게 표시할 적절한 현지화된 메시지를 반환합니다. 사용자 에이전트가 실제로 그러한 상황에서 텍스트 메시지를 표시하지 않는 경우(예: 그래픽적 표시를 대신 보여주는 경우), 폼 컨트롤이 충족하지 않는 유효성 제약을 표현하는 적절한 현지화된 메시지를 반환합니다. 이 요소가 제약 조건 유효성 검사 후보이고 사용자 정의 오류 상태라면, 사용자 정의 오류 메시지가 반환 값에 포함되어야 합니다.
서버는 클라이언트 측 유효성 검사에 의존해서는 안 됩니다. 클라이언트 측 유효성 검사는 악의적인 사용자가 의도적으로 우회할 수 있으며, 구형 사용자 에이전트 또는 이러한 기능을 구현하지 않는 자동화 도구를 사용하는 사용자가 무의식적으로 우회할 수 있습니다. 제약 조건 유효성 검사 기능은 사용자 경험을 개선하기 위한 것이며, 어떠한 종류의 보안 메커니즘도 제공하려는 의도가 없습니다.
이 섹션은 규범적이지 않습니다.
양식이 제출되면 양식의 데이터는 enctype에 의해 지정된 구조로 변환된 후, action에 의해 지정된 목적지로 주어진 method를 사용하여 전송됩니다.
예를 들어, 다음과 같은 양식을 보십시오:
< form action = "/find.cgi" method = get >
< input type = text name = t >
< input type = search name = q >
< input type = submit >
</ form >
사용자가 첫 번째 필드에 "cats"를 입력하고 두 번째 필드에 "fur"를 입력한 다음 제출 버튼을 누르면 사용자 에이전트는
/find.cgi?t=cats&q=fur
을(를) 로드합니다.
반면에, 다음 양식을 고려해 보십시오:
< form action = "/find.cgi" method = post enctype = "multipart/form-data" >
< input type = text name = t >
< input type = search name = q >
< input type = submit >
</ form >
동일한 사용자 입력이 주어진 경우 제출 결과는 매우 다릅니다. 대신 사용자 에이전트는 주어진 URL로 HTTP POST를 수행하고, 엔티티 본문은 다음과 같은 텍스트와 유사하게 전송됩니다:
------kYFrd4jNJEgCervE Content-Disposition: form-data; name="t" cats ------kYFrd4jNJEgCervE Content-Disposition: form-data; name="q" fur ------kYFrd4jNJEgCervE--
양식
요소의 기본 버튼은 제출 버튼 중에서 트리 순서로 첫 번째에 위치하며, 양식 소유자가 해당 양식
요소입니다.
사용자 에이전트가 사용자가 양식을 암묵적으로 제출하도록 허용하는 것을 지원하는 경우(예: 일부 플랫폼에서는 텍스트 컨트롤에 포커스가 있을 때 "Enter" 키를 누르면 양식이 암묵적으로 제출됩니다), 해당 양식의 기본 버튼에 활성화
동작이 있고 비활성화되지 않은 경우, 사용자
에이전트는 해당 기본 버튼에서 click
이벤트를 발생시켜야 합니다.
웹에는 양식을 암묵적으로 제출할 수 있는 방법이 있어야만 사용할 수 있는 페이지가 존재하므로, 사용자 에이전트는 이를 지원하는 것이 강력히 권장됩니다.
양식에 제출 버튼이 없으면, 암묵적 제출 메커니즘은 다음 단계를 수행해야 합니다:
양식에 암묵적 제출을 차단하는 필드가 둘 이상 있는 경우, 반환합니다.
제출을 양식
요소에서 userInvolvement를 "activation
"으로 설정하여 수행합니다.
이전 문단의 목적을 위해, 요소가 암묵적 제출을 차단하는 필드이 되는 경우는 해당 요소가 양식
요소의 양식 소유자이고, 해당 요소의 type
속성이 다음 상태 중 하나인 경우입니다:
텍스트,
검색,
전화번호,
URL,
이메일,
비밀번호,
날짜,
월,
주,
시간,
현지 날짜 및 시간,
숫자
각 양식
요소는 엔트리 목록 구성이라는 부울 값을 가지며, 초기 값은 false입니다.
각 양식
요소는 제출 이벤트 발생이라는 부울 값을 가지며, 초기 값은 false입니다.
특정 요소 submitter(일반적으로 버튼)에서 form 요소를 제출하려면, 선택적으로 부울 submit() 메서드에서 제출된 경우(기본값은 false)와 선택적 사용자 탐색 관여
userInvolvement(기본값은 "none
")을 받아야 합니다.
form이 탐색할 수 없는 경우, 반환합니다.
form의 엔트리 목록 구성이 true이면, 반환합니다.
form document를 form의 노드 문서로 설정합니다.
form document의 활성 샌드박싱 플래그 세트에 샌드박스된 양식 브라우징 컨텍스트 플래그가 설정된 경우, 반환합니다.
submit() 메서드에서 제출되지 않은 경우, 다음을 수행합니다:
form의 제출 이벤트 발생이 true이면, 반환합니다.
form의 제출 이벤트 발생을 true로 설정합니다.
양식 소유자가 form인 제출 가능한 요소 목록의 각 요소 field에 대해, field의 사용자 유효성을 true로 설정합니다.
submitter 요소의 no-validate 상태가 false이면, form의 제약 조건을 상호작용적으로 유효성 검사하고 결과를 확인합니다. 결과가 부정적이면(즉, 제약 조건 검사가 유효하지 않은 필드가 있다고 결론짓고 사용자에게 이를 알렸을 가능성이 있는 경우), 다음을 수행합니다:
form의 제출 이벤트 발생을 false로 설정합니다.
반환합니다.
submitterButton을 submitter가 form인 경우 null로 설정합니다. 그렇지 않은 경우, submitterButton을 submitter로 설정합니다.
shouldContinue를 이벤트
발생 결과로 설정합니다. 이 이벤트는 submit
이라는 이름으로
form에서 발생하며, SubmitEvent
을 사용하여
발생하며, submitter
속성이 submitterButton으로 초기화되고, bubbles
속성이 true로, cancelable
속성이 true로 초기화됩니다.
form의 제출 이벤트 발생을 false로 설정합니다.
shouldContinue가 false인 경우, 반환합니다.
form이 탐색할 수 없는 경우, 반환합니다.
encoding을 양식에 대한 인코딩 선택의 결과로 설정합니다.
entry list를 양식 데이터 세트 구성의 결과로 설정합니다. 이때 form, submitter, encoding을 사용합니다.
단언: entry list가 null이 아닙니다.
form이 탐색할 수 없는 경우, 반환합니다.
탐색할 수 없음이 다시 실행되며,
양식
데이터 세트 구성에서 formdata
이벤트를 디스패치하는
동안 결과가 변경될 수 있습니다.
method를 submitter 요소의 method로 설정합니다.
method가 dialog인 경우, 다음을 수행합니다:
action을 submitter 요소의 action으로 설정합니다.
action이 빈 문자열이면, action을 문서의 주소(URL)로 설정합니다.
parsed action을 URL 인코딩 구문 분석의 결과로 설정합니다. 이때 action을 submitter의 노드 문서에 상대적으로 설정합니다.
parsed action이 실패하면, 반환합니다.
scheme을 URL 스킴의 결과로 설정합니다.
enctype을 submitter 요소의 enctype으로 설정합니다.
formTarget을 null로 설정합니다.
submitter 요소가 제출 버튼이며, formtarget
속성이 있으면, formTarget을 해당 formtarget
속성 값으로 설정합니다.
target을 요소의 타겟 가져오기의 결과로 설정합니다. 이때 submitter의 양식 소유자와 formTarget을 사용합니다.
noopener를 요소의 noopener 가져오기의 결과로 설정합니다. 이때 form과 target을 사용합니다.
targetNavigable을 탐색할 대상 선택 규칙을 적용한 첫 번째 결과로 설정합니다. 이때 target, form의 노드 탐색 가능성, noopener를 사용합니다.
targetNavigable이 null이면, 반환합니다.
historyHandling을 "auto
"로
설정합니다.
form document가 targetNavigable의 활성 문서와 같고, form document가 아직 완전히 로드되지 않았으면,
historyHandling을 "replace
"로
설정합니다.
다음 표의 첫 번째 셀에 주어진 scheme에 따라 적절한 행을 선택합니다. 그런 다음 첫 번째 셀에 주어진 method에 따라 해당 행의 적절한 셀을 선택합니다. 그런 다음 해당 셀에 나열된 단계를 아래에서 정의된 단계로 건너뜁니다.
GET | POST | |
---|---|---|
http
| 액션 URL 변경 | 엔터티 본문으로 제출 |
https
| 액션 URL 변경 | 엔터티 본문으로 제출 |
ftp
| 액션 URL 가져오기 | 액션 URL 가져오기 |
javascript
| 액션 URL 가져오기 | 액션 URL 가져오기 |
data
| 액션 URL 변경 | 액션 URL 가져오기 |
mailto
| 헤더와 함께 메일 보내기 | 본문으로 메일 보내기 |
scheme이 이 표에 나열된 것 중 하나가 아닌 경우, 이 사양에서는 동작을 정의하지 않습니다. 다른 사양이 이를 정의하지 않는 경우, 유사한 스킴에 대해 이 사양에서 정의된 것과 유사한 방식으로 동작해야 합니다.
각 양식
요소는 계획된 탐색을 가지며, 이는 null이거나 작업입니다. 양식
이 처음 생성될 때,
계획된 탐색은 null로 설정되어야 합니다.
아래에서 설명한 동작에서, 사용자 에이전트가 선택적으로 URL url에 대해 탐색을 계획해야 하는 경우 POST 리소스-또는-null postResource(기본값은 null)를
사용해야 합니다. 다음 단계를 실행해야 합니다:
referrerPolicy을 빈 문자열로 설정합니다.
양식
요소의
링크 유형에 noreferrer
키워드가 포함되어 있으면, referrerPolicy를 "no-referrer
"로 설정합니다.
양식
요소와
함께 요소 작업을 큐에
추가합니다. 이때 DOM 조작 작업 소스를 사용하고, 다음 단계를
실행합니다:
탐색을
targetNavigable로 수행하고, 양식
요소의 노드 문서를 사용하여 historyHandling을
historyHandling으로 설정하고, userInvolvement를
userInvolvement으로 설정하며, referrerPolicy를
referrerPolicy으로 설정하고, documentResource를
postResource로 설정하고, formDataEntryList를
entry list로 설정합니다.
동작은 다음과 같습니다:
pairs를 이름-값 쌍 목록으로 변환의 결과로 설정합니다. 이때 entry list를 사용합니다.
query를 application/x-www-form-urlencoded
직렬화 프로그램의 결과로 설정합니다. 이때 pairs와 encoding을 사용합니다.
parsed action의 쿼리 구성 요소를 query로 설정합니다.
탐색 계획을 parsed action으로 수행합니다.
enctype에 따라 전환합니다:
application/x-www-form-urlencoded
pairs를 이름-값 쌍 목록으로 변환의 결과로 설정합니다. 이때 entry list를 사용합니다.
body를 application/x-www-form-urlencoded
직렬화 프로그램의 결과로 설정합니다. 이때 pairs와 encoding을 사용합니다.
body를 UTF-8로 인코딩의 결과로 설정합니다.
mimeType을 `application/x-www-form-urlencoded
`으로
설정합니다.
multipart/form-data
body를 multipart/form-data
인코딩 알고리즘의 결과로 설정합니다. 이때 entry list와 encoding을 사용합니다.
mimeType을 동형
인코딩의 결과로 설정합니다. 이때 "multipart/form-data; boundary=
"와 multipart/form-data
경계 문자열을 연결한 결과를 사용합니다. 이때 multipart/form-data
인코딩 알고리즘을 사용합니다.
text/plain
pairs를 이름-값 쌍 목록으로 변환의 결과로 설정합니다. 이때 entry list를 사용합니다.
body를 text/plain
인코딩 알고리즘의 결과로 설정합니다. 이때 pairs를 사용합니다.
body를 인코딩의 결과로 설정합니다. 이때 encoding을 사용합니다.
mimeType을 `text/plain
`으로
설정합니다.
탐색 계획을 parsed action으로 수행합니다. 이때 POST 리소스의 요청 본문이 body이고, 요청 콘텐츠 유형이 mimeType인 경우를 설정합니다.
탐색 계획을 parsed action으로 수행합니다.
entry list는 폐기됩니다.
pairs를 이름-값 쌍 목록으로 변환의 결과로 설정합니다. 이때 entry list를 사용합니다.
headers를 application/x-www-form-urlencoded
직렬화 프로그램의 결과로 설정합니다. 이때 pairs와 encoding을 사용합니다.
headers의 U+002B PLUS SIGN 문자(+)를 "%20
" 문자열로 대체합니다.
parsed action의 쿼리를 headers로 설정합니다.
탐색 계획을 parsed action으로 수행합니다.
pairs를 이름-값 쌍 목록으로 변환의 결과로 설정합니다. 이때 entry list를 사용합니다.
enctype에 따라 전환합니다:
text/plain
body를 text/plain
인코딩 알고리즘의 결과로 설정합니다. 이때 pairs를 사용합니다.
body를 UTF-8 퍼센트 인코딩의 결과로 설정합니다. 이때 기본 인코딩 세트를 사용합니다. [URL]
body를 application/x-www-form-urlencoded
직렬화 프로그램의 결과로 설정합니다. 이때 pairs와 encoding을 사용합니다.
parsed action의 쿼리가 null이면, 이를 빈 문자열로 설정합니다.
parsed action의 쿼리가 빈 문자열이 아니면, 여기에 U+0026 AMPERSAND 문자(&)를 추가합니다.
parsed action의 쿼리에
"body=
"를 추가합니다.
parsed action의 쿼리에 body를 추가합니다.
탐색 계획을 parsed action으로 수행합니다.
엔트리 목록은 일반적으로 양식의 내용을 나타내는 목록입니다. 엔트리는 이름(스칼라 값 문자열)과
값(스칼라 값 문자열 또는 파일
객체 중 하나)으로 구성된 튜플입니다.
name 문자열과 문자열 또는 Blob
객체 value, 선택적으로 스칼라 값 문자열
filename이 주어졌을 때, 엔트리를 생성하는
방법은 다음과 같습니다:
그 외의 경우:
value가 파일
객체가 아닌 경우, value를 동일한 바이트를 나타내는 새 파일
객체로 설정하고, 이름
속성 값을 "blob
"으로 설정합니다.
filename이 주어지면, value를 동일한 바이트를 나타내는 새 파일
객체로 설정하고, 이름
속성을 filename으로 설정합니다.
이러한 작업은 filename이 제공되거나 전달된 Blob
이
파일
객체가 아닌 경우, 새로운 파일
객체를 생성합니다. 이러한 경우 전달된 Blob
객체의 정체성은 유지되지 않습니다.
form과 선택적 submitter(기본값 null) 및 선택적 encoding(기본값 UTF-8)이 주어졌을 때, 엔트리 목록을 구성하는 방법은 다음과 같습니다:
form의 엔트리 목록 구성 중이 true이면, null을 반환합니다.
form의 엔트리 목록 구성 중을 true로 설정합니다.
controls을 form의 양식 소유자가 form인 제출 가능한 요소의 목록으로 설정합니다. 이 목록은 트리 순서로 설정됩니다.
entry list를 새 빈 엔트리 목록으로 설정합니다.
controls의 각 field 요소에 대해 트리 순서로 다음을 수행합니다:
다음 중 하나가 참인 경우:
그렇다면 계속합니다.
field가 양식 관련 커스텀 요소인 경우, field와 entry list를 사용하여 엔트리 구성 알고리즘을 수행한 다음, 계속합니다.
field 요소에 name
속성이 지정되지
않았거나, 해당 name
속성의 값이 빈
문자열인 경우, 계속합니다.
name을 field 요소의 name
속성의 값으로
설정합니다.
field 요소가 select
요소인 경우, field의 옵션 목록에 있는 각 option
요소에 대해, 해당 선택됨이 true이고 비활성화되지 않은 경우, name과
option
요소의 값으로 엔트리를 생성하고, 이를
entry list에 추가합니다.
그 외의 경우, field 요소가 input
요소이며, 해당 type
속성이
체크박스 상태 또는 라디오 버튼 상태인 경우, 다음을
수행합니다:
그 외의 경우, field 요소가 input
요소이며 해당 type
속성이
파일 업로드 상태인 경우, 다음을 수행합니다:
그 외의 경우, field 요소가 input
요소이며 해당 type
속성이
상태이고 name이
"_charset_
"와
ASCII 대소문자 구분 없이 일치하는 경우, 다음을 수행합니다:
그 외의 경우, name과 field 요소의 값으로 엔트리를 생성하고, 이를 entry list에 추가합니다.
요소에 dirname
속성이 있고 해당 속성의 값이 빈 문자열이 아니며 요소가 자동 방향성 양식 관련
요소인 경우, 다음을 수행합니다:
form data를 entry list와 연결된 새로운 FormData
객체로 설정합니다.
이벤트를 발생시킵니다. 이벤트 이름은 formdata
이고,
form에서 FormDataEvent
를 사용하여
발생시킵니다. 이때 formData
속성은 form data로 초기화되고, bubbles
속성은 true로 초기화됩니다.
form의 엔트리 목록 구성 중을 false로 설정합니다.
entry list의 복제본을 반환합니다.
사용자 에이전트가 양식에 대한 인코딩을 선택해야 하는 경우, 다음 단계를 실행해야 합니다:
encoding을 문서의 문자 인코딩으로 설정합니다.
만약 form
요소에 accept-charset
속성이 있으면, encoding을 다음 하위 단계들을 실행하여 설정합니다:
input을 form
요소의 accept-charset
속성 값으로 설정합니다.
candidate encoding labels을 ASCII 공백을 기준으로 input을 분할한 결과로 설정합니다.
candidate encodings을 빈 문자 인코딩 목록으로 설정합니다.
candidate encoding labels의 각 토큰에 대해 차례대로 인코딩을 가져오고, 실패하지 않으면 candidate encodings에 그 인코딩을 추가합니다.
만약 candidate encodings이 비어 있으면, UTF-8을 반환합니다.
candidate encodings에서 첫 번째 인코딩을 반환합니다.
출력 인코딩을 가져오는 결과를 encoding에서 반환합니다.
application/x-www-form-urlencoded
및 text/plain
인코딩 알고리즘은 값이 엔트리
목록이 아닌 문자열이어야 하는 이름-값 쌍 목록을 사용합니다. 이 알고리즘은 변환을 수행합니다.
엔트리 목록 entry list를 이름-값 쌍 목록으로 변환하기 위해, 다음 단계를 실행합니다:
list를 빈 이름-값 쌍 목록으로 설정합니다.
각 entry에 대해 entry list를 다음과 같이 순회합니다:
name을 entry의 이름으로 설정하고, U+000D(CR) 뒤에 U+000A(LF)가 없는 모든 경우와 U+000A(LF) 앞에 U+000D(CR)가 없는 모든 경우를 U+000D(CR)과 U+000A(LF)로 구성된 문자열로 대체합니다.
만약 entry의 값이 파일
객체인 경우, value를 entry의 값의 이름
으로
설정합니다. 그렇지 않으면 value를 entry의 값으로 설정합니다.
value에서 U+000D(CR) 뒤에 U+000A(LF)가 없는 모든 경우와 U+000A(LF) 앞에 U+000D(CR)가 없는 모든 경우를 U+000D(CR)과 U+000A(LF)로 구성된 문자열로 대체합니다.
list에 이름이 name이고 값이 value인 새 이름-값 쌍을 추가합니다.
list를 반환합니다.
application/x-www-form-urlencoded
에
대한 자세한 내용은 URL을 참조하십시오. [URL]
multipart/form-data
인코딩 알고리즘은 엔트리 목록 entry list와 인코딩 encoding을 사용하여 다음과 같이 작동합니다:
각 entry에 대해 entry list를 순회합니다:
RFC 7578, Returning Values from Forms: multipart/form-data
에 설명된 규칙을 사용하여
entry list를 인코딩하여 생성된 바이트 시퀀스를 반환합니다. 다음 조건을 고려하십시오:
[RFC7578]
파트의 순서는 entry list에서 필드의 순서와 동일해야 하며, 동일한 이름을 가진 여러 엔트리는 별개의 필드로 취급해야 합니다.
생성된 multipart/form-data
리소스의 필드 이름, 비파일 필드의 필드 값, 파일 필드의 파일 이름은 해당 엔트리의 이름 또는 값을 encoding으로 인코딩한 결과, 바이트 시퀀스로
변환한 값을 사용해야 합니다.
파일 필드의 필드 이름과 파일 이름에 대해서는 이전 단계에서 인코딩한 결과에서 0x0A(LF) 바이트를 `%0A
`, 0x0D(CR)을
`%0D
`로, 0x22(")를 `%22
`로 대체하여 이스케이프 처리해야 합니다. 사용자 에이전트는 다른 이스케이프 처리를
수행해서는 안 됩니다.
비파일 필드에 해당하는 생성된 multipart/form-data
리소스의 파트에는 `Content-Type
` 헤더가
지정되어서는 안 됩니다.
이 알고리즘의 반환 값 생성에 사용자 에이전트가 사용하는 경계는 multipart/form-data
경계 문자열입니다. (이 값은 이 알고리즘에 의해 생성된 양식 제출
페이로드의 MIME 유형을 생성하는 데 사용됩니다.)
multipart/form-data
페이로드를 해석하는 방법에 대한 자세한 내용은 RFC 7578을 참조하십시오.
[RFC7578]
text/plain
인코딩 알고리즘은 이름-값 쌍 목록 pairs를 사용하여
다음과 같이 작동합니다:
result를 빈 문자열로 설정합니다.
pairs의 각 pair에 대해:
pair의 이름을 result에 추가합니다.
U+003D 등호 문자(=) 하나를 result에 추가합니다.
pair의 값을 result에 추가합니다.
U+000D 캐리지 리턴(CR)과 U+000A 라인 피드(LF) 문자 쌍을 result에 추가합니다.
result를 반환합니다.
text/plain
형식을 사용하는 페이로드는 사람이 읽을 수 있도록 설계되었습니다. 그러나 이 형식은 컴퓨터에서 신뢰할 수 있게 해석할 수 없으며, 형식이 모호합니다(예: 값의 끝에 있는 줄 바꿈과 값 내의 실제 줄
바꿈을 구분할 방법이 없습니다).
SubmitEvent
인터페이스모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface SubmitEvent : Event {
constructor (DOMString type , optional SubmitEventInit eventInitDict = {});
readonly attribute HTMLElement ? submitter ;
};
dictionary SubmitEventInit : EventInit {
HTMLElement ? submitter = null ;
};
event.submitter
제출 버튼을 나타내는 요소를 반환하며, 버튼이 폼 제출을 트리거하지 않은 경우 null을 반환합니다.
submitter
속성은 초기화된 값을 반환해야 합니다.
FormDataEvent
인터페이스모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface FormDataEvent : Event {
constructor (DOMString type , FormDataEventInit eventInitDict );
readonly attribute FormData formData ;
};
dictionary FormDataEventInit : EventInit {
required FormData formData ;
};
event.formData
FormData
객체를 반환하며, 이는 대상 폼
에 연결된 요소의 이름과
값을 나타냅니다.
FormData
객체에서 수행되는 작업은 제출될 폼 데이터에 영향을 미칩니다.
formData
속성은 초기화된 값을 반환해야 합니다. 이 속성은
항목 목록에 연결된 FormData
객체를 나타내며, 이는
폼
이 제출될 때
구성된 항목
목록과 연결됩니다.
form
요소
form이 재설정될 때, 다음 단계를 실행합니다:
reset을(를) 이벤트 발행의 결과로 합니다. 이
이벤트의 이름은 reset
이며,
form에서 bubbles
와 cancelable
속성이 true로 초기화된 상태로 발행됩니다.
reset이 true이면, 리셋 알고리즘을 각 재설정 가능한 요소에 대해 호출합니다. 이 요소들의 폼 소유자는 form입니다.
각 재설정 가능한 요소는 자체의 리셋 알고리즘을 정의합니다. 이러한 알고리즘의 일부로 폼 컨트롤에 가해진 변경 사항은 사용자가 직접 한 변경 사항으로 간주되지
않습니다 (예: input
이벤트가 발생하지 않음).
details
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
summary
요소와 그
뒤에 오는 플로우 콘텐츠.
name
— 상호 배타적인 details
요소 그룹의 이름
open
— 세부 정보가 표시되는지 여부
[Exposed =Window ]
interface HTMLDetailsElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute boolean open ;
};
details
요소는 사용자가 추가
정보를 얻거나 제어할 수 있는 공개 위젯을 나타냅니다.
모든 HTML 요소와 마찬가지로, details
요소를 다른 유형의 제어를
나타내기 위해 사용하는 것은 적합하지 않습니다. 예를 들어, 탭 위젯과 메뉴 위젯은 공개 위젯이 아니므로 이러한 패턴을 구현하기 위해 details
요소를 남용하는 것은 잘못된
것입니다.
details
요소는
각주에 적합하지 않습니다. 각주를 마크업하는 방법에 대한 자세한 내용은 각주 섹션을 참조하십시오.
요소의 첫 번째 summary
자식
요소가 있다면, 이 요소는 세부 사항의 요약 또는 전설을 나타냅니다. 만약 자식 summary
요소가 없을 경우, 사용자
에이전트는 자체적으로 전설을 제공해야 합니다 (예: "세부 사항").
요소의 나머지 콘텐츠는 추가 정보나 제어를 나타냅니다.
name
콘텐츠 속성은 요소가 속한
관련 details
요소 그룹의 이름을
지정합니다. 이 그룹의 한 구성원을 열면 그룹의 다른 구성원이 닫히게 됩니다. 이 속성이 지정된 경우 값은 빈 문자열이 되어서는 안 됩니다.
이 기능을 사용하기 전에 작성자는 관련 details
요소를 독점적인 아코디언으로
그룹화하는 것이 사용자에게 도움이 되는지 또는 해가 되는지 고려해야 합니다. 독점적인 아코디언을 사용하면 콘텐츠 집합이 차지할 수 있는 최대 공간을 줄일 수 있지만, 원하는 항목을 찾기 위해 많은
항목을 열어야 하는 사용자나 여러 항목의 콘텐츠를 동시에 보고자 하는 사용자를 좌절시킬 수 있습니다.
문서는 동일한 details 이름 그룹에 속한 details
요소 중 open
속성이 있는 요소를 두 개 이상
포함해서는 안 됩니다. 작성자는 스크립트를 사용하여 문서에 details
요소를 추가할 때, details 이름 그룹에 details
요소를 두 개 이상
포함시키지 않도록 해야 합니다.
공통 name
속성으로
생성된 요소 그룹은 독점적이며, 이는 최대 하나의 details
요소만 동시에 열릴 수
있음을 의미합니다. 이러한 독점성은 사용자 에이전트에 의해 강제되지만, 그 결과로 즉시 마크업의 open
속성이 변경됩니다. 작성자에게 적용되는
이 요구 사항은 잘못된 마크업을 금지합니다.
문서에는 동일한 details 이름 그룹에 속한 다른 details
요소의 자손인 details
요소가 포함되어서는 안
됩니다.
name
속성을 사용하여 여러 관련된 details
요소를 그룹화하는 문서는
해당 관련 요소를 포함하는 요소(예: section
요소 또는 article
요소) 내에 함께 보관해야
합니다. 그룹에 제목이 도입되는 것이 합리적일 경우, 작성자는 그 제목을 포함 요소의 시작 부분에 heading 요소로 추가해야 합니다.
관련 요소를 시각적으로 및 프로그래밍 방식으로 함께 그룹화하는 것은 접근 가능한 사용자 경험에 중요할 수 있습니다. 이는 사용자가 이러한 요소 간의 관계를 이해하는 데 도움이 될 수 있습니다. 관련 요소가 웹 페이지의 서로 다른 섹션에 있으면 이러한 요소 간의 관계가 덜 발견되거나 이해될 수 있습니다.
open
콘텐츠 속성은 불리언 속성입니다. 속성이 존재하면 요약 및 추가 정보가 사용자에게
표시됨을 나타냅니다. 속성이 없으면 요약만 표시됩니다.
요소가 생성될 때 속성이 없으면 추가 정보가 숨겨져야 하며, 속성이 있으면 해당 정보가 표시되어야 합니다. 이후 속성이 제거되면 정보가 숨겨져야 하며, 속성이 추가되면 정보가 표시되어야 합니다.
사용자 에이전트는 사용자가 추가 정보를 표시하거나 숨길 수 있도록 해야 합니다. 세부 정보를 표시하라는 요청을 충족하려면 사용자 에이전트는 해당 요소에 open
속성을 빈 문자열로 설정해야 합니다.
정보를 숨기라는 요청을 충족하려면 사용자 에이전트는 요소에서 open
속성을 제거해야 합니다.
추가 정보를 표시하거나 숨기라는 요청은 적절한 summary
요소의 활성화
동작일 수 있습니다. 그러나 그러한 요소가 존재하지 않는 경우에도 사용자 에이전트는 다른 사용자 인터페이스를 통해 이러한 기능을 제공할 수 있습니다.
details 이름 그룹에는 details
요소
a와 모든 다른 details
요소
b가 포함됩니다. 이러한 조건을 충족하는 경우:
name
속성을 가지고 있으며,
name
속성은 빈 문자열이 아니며,
a의 name
속성의 값은 b의 name
속성의 값과 동일합니다.
모든 details
요소에는 세부 정보 전환 작업 추적기가 있으며, 이는 전환 작업 추적기 또는 null이며, 초기에는 null입니다.
다음 속성 변경 단계는 element,
localName, oldValue, value, 및 namespace에 대해 모든 details
요소에 사용됩니다:
namespace가 null이 아닌 경우, return합니다.
localName이 name
인 경우,
element에 대해 필요한 경우 주어진
요소를 닫아 세부 사항 독점성을 보장합니다.
localName이 open
인 경우:
oldValue 또는 value 중 하나가 null이고 다른 하나가 null이 아닌 경우, 이 details
요소에 대해 세부 정보 알림 작업 단계로 알려진 다음 단계를 실행합니다:
open
속성이
연속적으로 여러 번 전환될 때, 결과 작업은 기본적으로 병합되어 단 하나의 이벤트만 발행됩니다.
oldValue가 null인 경우, 이 details
요소, "closed
", 및 "open
"을 주어진 세부 정보 전환 이벤트 작업을 대기열에
추가합니다.
그렇지 않은 경우, 이 details
요소, "open
", 및 "closed
"을 주어진 세부 정보 전환 이벤트 작업을 대기열에
추가합니다.
oldValue가 null이고 value가 null이 아닌 경우, element에 대해 필요한 경우 다른 요소를 닫아 세부 사항 독점성을 보장합니다.
details
요소에 대한 HTML 요소 삽입 단계는
insertedNode에 대해 다음과 같습니다:
이 속성 변경 및 삽입 단계는 파서를 통해 속성이나 요소가 삽입될 때도 실행됩니다.
details
요소
element, 문자열 oldState 및 문자열 newState에 대해 세부 정보 전환 이벤트 작업을 대기열에 추가합니다:
element의 세부 정보 전환 작업 추적기가 null이 아닌 경우:
oldState를 element의 세부 정보 전환 작업 추적기의 old state로 설정합니다.
element의 세부 정보 전환 작업 추적기의 작업을 작업 대기열에서 제거합니다.
element의 세부 정보 전환 작업 추적기를 null로 설정합니다.
요소 작업을 대기열에 추가합니다 DOM 조작 작업 소스와 element를 주어진 다음 단계를 실행합니다:
이벤트를 발행합니다 이름은 toggle
이고,
element에서 ToggleEvent
를 사용하며, oldState
속성은 oldState로 초기화되고 newState
속성은 newState로 초기화됩니다.
element의 세부 정보 전환 작업 추적기를 null로 설정합니다.
element의 세부 정보 전환 작업 추적기를 방금 대기열에 추가된 작업으로 설정하고, old state를 oldState로 설정합니다.
필요한 경우 다른 요소를 닫아 세부 사항 독점성을 보장합니다
주어진 details
요소
element:
document를 element의 노드 문서로 설정합니다.
oldFlag를 document의 변이 이벤트 플래그 발화의 값으로 설정합니다.
document의 변이 이벤트 플래그 발화를 false로 설정합니다.
groupMembers를 element의 details 이름 그룹 내에서 element를 제외한 모든 요소를 포함하는 목록으로 설정합니다. 이 목록은 트리 순서로 정렬됩니다.
각 groupMembers의 otherElement에 대해:
필요한 경우 주어진 요소를 닫아 상세 정보 독점을 보장하려면
details
요소
element을 사용하십시오:
element에 open
속성이 없으면,
반환합니다.
element의 상세 이름 그룹에서 element를 제외한 모든 요소를 포함하는 groupMembers 목록을 트리 순서로 생성합니다.
각 groupMembers의 요소 otherElement에 대해:
모든 현재 엔진에서 지원됩니다.
name
및 open
IDL
속성은 동일한 이름의 해당 콘텐츠 속성을 반영해야 합니다.
상위 세부 정보 표시 알고리즘은 currentNode에 대해 다음 단계를 실행합니다:
currentNode가 평탄 트리 내에서 상위 노드를 가지고 있는 동안:
다음 예제는 details
요소를 사용하여 진행 보고서에서 기술 세부 정보를 숨기는 방법을 보여줍니다.
< section class = "progress window" >
< h1 > "Really Achieving Your Childhood Dreams" 복사 중</ h1 >
< details >
< summary > 복사 중... < progress max = "375505392" value = "97543282" ></ progress > 25%</ summary >
< dl >
< dt > 전송 속도:</ dt > < dd > 452KB/s</ dd >
< dt > 로컬 파일 이름:</ dt > < dd > /home/rpausch/raycd.m4v</ dd >
< dt > 원격 파일 이름:</ dt > < dd > /var/www/lectures/raycd.m4v</ dd >
< dt > 소요 시간:</ dt > < dd > 01:16:27</ dd >
< dt > 색상 프로파일:</ dt > < dd > SD (6-1-6)</ dd >
< dt > 크기:</ dt > < dd > 320×240</ dd >
</ dl >
</ details >
</ section >
다음은 기본적으로 일부 제어를 숨기기 위해 details
요소를 사용하는 방법을 보여줍니다:
< details >
< summary >< label for = fn > 이름 및 확장자:</ label ></ summary >
< p >< input type = text id = fn name = fn value = "Pillar Magazine.pdf" >
</ p >< label >< input type = checkbox name = ext checked > 확장자 숨기기</ label >
</ details >
이것은 목록의 다른 details
요소와 함께 사용되어 사용자가 필드 세트를 작은 제목 세트로 축소하고 각 제목을 열 수 있도록 할 수 있습니다.
이 예제에서는 요약이 실제 값이 아닌 제어할 수 있는 내용을 요약하고 있어 이상적이지 않습니다.
다음 예제는 name
속성을
사용하여 독점적인 아코디언을 생성하는 방법을 보여줍니다. 사용자가 하나의 details
요소를 열면 다른 열린 details
요소가 닫히게 됩니다.
< section class = "characteristics" >
< details name = "frame-characteristics" >
< summary > 재질</ summary >
사진 액자는 단단한 참나무로 만들어졌습니다.
</ details >
< details name = "frame-characteristics" >
< summary > 크기</ summary >
사진 액자는 40cm 높이와 30cm 너비의 사진에 맞습니다.
액자 크기는 45cm 높이, 35cm 너비, 두께 2cm입니다.
</ details >
< details name = "frame-characteristics" >
< summary > 색상</ summary >
사진 액자는 자연 목재 색상 또는 검정 얼룩 색상으로 제공됩니다.
</ details >
</ section >
다음 예제는 open
속성이 독점적인 아코디언을 생성하기 위해 name
속성을 사용하는 요소 집합의 일부인 details
요소에 설정되었을 때 일어나는 일을 보여줍니다.
초기 마크업은 다음과 같습니다:
< section class = "characteristics" >
< details name = "frame-characteristics" id = "d1" open > ...</ details >
< details name = "frame-characteristics" id = "d2" > ...</ details >
< details name = "frame-characteristics" id = "d3" > ...</ details >
</ section >
그리고 스크립트:
document. getElementById( "d2" ). setAttribute( "open" , "" );
스크립트가 실행된 후 결과 트리는 다음과 같이 마크업과 동일하게 됩니다:
< section class = "characteristics" >
< details name = "frame-characteristics" id = "d1" > ...</ details >
< details name = "frame-characteristics" id = "d2" open > ...</ details >
< details name = "frame-characteristics" id = "d3" > ...</ details >
</ section >
이 경우 d2
의 open
속성을 설정하면
d1
의 open
속성이 제거됩니다.
사용자가 d2
내부의 summary
요소를 활성화할 때도 동일한 일이 발생합니다.
사용자가 제어와 상호작용할 때 open
속성이 자동으로 추가되고 제거되기 때문에, 이를 사용하여 요소의 상태에 따라 요소를 다르게 스타일링할 수 있습니다. 여기서는 스타일 시트를 사용하여 요소가 열리거나 닫힐 때 요약의 색상을
애니메이션하는 예시를 보여줍니다:
< style >
details > summary { transition : color 1 s ; color : black ; }
details [ open ] > summary { color : red ; }
</ style >
< details >
< summary > 자동 상태: 작동 중</ summary >
< p > 속도: 12m/s</ p >
</ p > 방향: 북쪽</ p >
</ details >
summary
요소모든 현재 엔진에서 지원됩니다.
details
요소의 첫 번째 자식으로 사용됩니다.
HTMLElement
를 사용합니다.
summary
요소는 details
요소의 나머지 내용에 대한
요약, 캡션 또는 전설을 나타냅니다.
다음 알고리즘이 true를 반환하는 경우 summary
요소는 상위 details의 요약입니다:
이 summary
요소에
상위 요소가 없으면 false를 반환합니다.
parent를 이 summary
요소의 상위
요소로 설정합니다.
parent가 details
요소가 아니면
false를 반환합니다.
true를 반환합니다.
summary
요소의 활성화
동작은 다음 단계를 실행합니다:
이 summary
요소가
상위
details의 요약이 아닌 경우 return합니다.
parent를 이 summary
요소의 상위
요소로 설정합니다.
parent에 open
속성이 존재하면 이를 제거합니다. 그렇지 않으면 설정하여 parent의 open
속성을 빈 문자열로
만듭니다.
이 작업은 세부 정보 알림 작업 단계를 실행하게 됩니다.
명령은 메뉴 항목, 버튼 및 링크 뒤에 있는 추상화입니다. 명령이 정의되면 인터페이스의 다른 부분에서 동일한 명령을 참조할 수 있으며, 이를 통해 비활성화 상태와 같은 측면을 여러 액세스 포인트가 공유할 수 있습니다.
명령은 다음과 같은 측면을 가지도록 정의됩니다:
사용자 에이전트는 다음 기준에 맞는 명령을 노출할 수 있습니다:
사용자 에이전트는 이러한 명령이 액세스 키를 가지고 있는 경우, 해당 키를 사용자에게 알리는 방법으로 이를 노출하는 것이 좋습니다.
예를 들어, 이러한 명령은 사용자 에이전트의 메뉴 바에 나열될 수 있습니다.
a
요소를 사용하여 명령
정의명령의 레이블은 요소의 하위 텍스트 콘텐츠입니다.
명령의 액세스 키는 요소의 지정된 액세스 키입니다(있는 경우).
명령의
는 요소에 속성이 있는 경우 true(숨김)이고, 그렇지 않은 경우 false입니다.명령의 비활성화 상태 측면은 요소나 그 조상 중 하나가 비활성화된 상태일 경우 true이며, 그렇지 않은 경우 false입니다.
명령의 동작은 요소에서 클릭 이벤트를 발생시키는 것입니다.
button
요소를
사용하여 명령 정의명령의 레이블, 액세스
키, 및 동작 측면은
이전 섹션에서 설명한 대로 a
요소와 동일하게 결정됩니다.
명령의 비활성화 상태는 요소나 그 조상 중 하나가 비활성화 상태이거나 요소의 비활성화된 상태가 설정된 경우 true이며, 그렇지 않은 경우 false입니다.
input
요소를
사용하여 명령 정의input
요소의 type
속성이
제출 버튼, 재설정 버튼, 이미지 버튼, 버튼, 라디오 버튼 또는 체크박스 상태 중 하나에 있으면 명령을 정의합니다.
명령의 레이블은 다음과 같이 결정됩니다:
속성이 제출 버튼, 재설정 버튼, 이미지 버튼 또는 버튼 상태 중 하나에 있다면,
레이블은 value
속성에 의해 주어진 문자열이며, 속성이 없는 경우 UA 의존적, 로케일 의존적인 값이 버튼 자체를 레이블하는 데 사용됩니다.
그렇지 않다면, 요소가 레이블이
지정된 컨트롤인 경우, 레이블은 질문에 해당하는 요소인 첫 번째
레이블
요소의 하위 텍스트 콘텐츠입니다. (JavaScript 용어로는
element.labels[0].textContent
에 해당합니다.)
그렇지 않다면, 레이블은 빈 문자열입니다.
명령의 액세스 키는 요소의 지정된 액세스 키입니다(있는 경우).
명령의
는 요소에 속성이 있는 경우 true(숨김)이고, 그렇지 않은 경우 false입니다.명령의 비활성화 상태는 요소나 그 조상 중 하나가 비활성화 상태이거나 요소의 비활성화 상태가 설정된 경우 true이며, 그렇지 않은 경우 false입니다.
명령의 동작은 요소에서 클릭 이벤트를 발생시키는 것입니다.
option
요소를
사용하여 명령 정의option
요소가 조상 select
요소를 가지고 있으며, value
속성이 없거나 value
속성이 비어 있지 않은 경우 명령을
정의합니다.
명령의 레이블은
option
요소의 label
속성 값이 있으면 그것이 레이블이 되고, 그렇지 않으면 option
요소의 하위
텍스트 콘텐츠가 레이블이 됩니다. 이때 ASCII 공백이 제거되고 축약된 상태로 사용됩니다.
명령의 액세스 키는 요소의 지정된 액세스 키입니다(있는 경우).
명령의
는 요소에 속성이 있는 경우 true(숨김)이고, 그렇지 않은 경우 false입니다.명령의 비활성화 상태는 요소가 비활성화된 상태이거나, 요소의 가장 가까운 조상 select
요소가 비활성화된
상태이거나, 요소 또는 그 조상 중 하나가 비활성화된 상태인 경우
true이며, 그렇지 않은 경우 false입니다.
option
의
가장 가까운 조상 select
요소에 multiple
속성이 있는 경우, 명령의 동작은 option
요소를 토글하는 것이고, 그렇지 않은 경우 명령의 동작은
option
요소를 선택하는
것입니다.
legend
요소에서 accesskey
속성을 사용하여 명령 정의
legend
요소는 다음 조건이 모두 참일 때 명령을 정의합니다.
요소에 지정된 액세스 키가 있습니다.
요소가 fieldset
요소의 자식 요소입니다.
요소의 부모에 명령을
정의하는 후손 요소가 있으며, 이 요소는 label
요소나 legend
요소가 아닙니다. 이 요소가 존재하는 경우, 이것이 해당 legend
요소의 accesskey
대리자입니다.
명령의 레이블은 요소의 하위 텍스트 콘텐츠입니다.
명령의 비활성화
상태 및 동작 속성은 해당
legend
요소의 accesskey
대리자의 해당 속성과 동일합니다.
이 예제에서 legend
요소는 accesskey
를
지정하며, 활성화되면 input
요소에 위임됩니다.
< fieldset >
< legend accesskey = p >
< label > I want < input name = pizza type = number step = 1 value = 1 min = 0 > pizza(s) with these toppings </ label >
</ legend >
< label >< input name = pizza-cheese type = checkbox checked > Cheese </ label >
< label >< input name = pizza-ham type = checkbox checked > Ham </ label >
< label >< input name = pizza-pineapple type = checkbox > Pineapple </ label >
</ fieldset >
accesskey
속성을 사용하여 다른 요소에서 명령 정의
이전 섹션 중 하나가 이 요소에 대해 명령을 정의한다고 정의한 경우, 해당 섹션이 이 요소에 적용되며, 이 섹션은 적용되지 않습니다. 그렇지 않으면 이 섹션이 해당 요소에 적용됩니다.
명령의 레이블은 요소에 따라
다릅니다. 요소가 라벨이 있는 컨트롤인 경우,
하위
텍스트 콘텐츠가 트리 순서로 첫 번째 라벨
요소인 경우, 해당 텍스트 콘텐츠가 명령의 레이블입니다.
(JavaScript 용어로는 element.labels[0].textContent
에 해당합니다.) 그렇지 않으면 명령의 레이블은 요소의 하위
텍스트 콘텐츠입니다.
명령의
는 요소에 속성이 있는 경우 참(숨김)이고, 그렇지 않으면 거짓입니다.명령의 비활성화 상태는 요소나 그 조상 중 하나가 비활성 상태인 경우 참이고, 그렇지 않으면 거짓입니다.
명령의 동작은 다음 단계를 실행하는 것입니다:
클릭
이벤트를 발생시킵니다.dialog
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
open
— 다이얼로그 상자가 표시되는지 여부
[Exposed =Window ]
interface HTMLDialogElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean open ;
attribute DOMString returnValue ;
[CEReactions ] undefined show ();
[CEReactions ] undefined showModal ();
[CEReactions ] undefined close (optional DOMString returnValue );
};
dialog
요소는 사용자가 작업을 수행하거나
정보를 수집하기 위해 상호 작용하는 작은 창(“대화 상자”)의 형태로 애플리케이션의 일시적인 부분을 나타냅니다. 사용자가 작업을 완료하면 다이얼로그가 애플리케이션에 의해 자동으로 닫히거나 사용자가
수동으로 닫을 수 있습니다.
모든 종류의 애플리케이션에서 친숙한 패턴인 모달 대화 상자의 경우, 저자는 웹 애플리케이션의 대화 상자가 비웹 애플리케이션 사용자에게 친숙한 방식으로 동작하도록 해야 합니다.
모든 HTML 요소와 마찬가지로, 다른 유형의 제어를 나타내려고 할 때 dialog
요소를 사용하는 것은 적합하지
않습니다. 예를 들어, 컨텍스트 메뉴, 도구 설명 및 팝업 목록 상자는 대화 상자가 아니므로 이러한 패턴을 구현하기 위해 dialog
요소를 남용하는 것은 잘못된
것입니다.
사용자 대면 대화 상자 동작의 중요한 부분은 초기 포커스 배치입니다. 대화 상자 포커싱 단계는 대화 상자가 표시될 때 초기 포커스의 좋은 후보를 선택하려고 하지만, 특정 대화
상자에 대한 사용자 기대에 맞는 올바른 선택을 신중하게 생각하는 저자를 대체할 수는 없습니다. 따라서 저자는 대화 상자가 열리면 사용자가 즉시 상호 작용해야 하는 대화 상자의 하위 요소에 autofocus
속성을 사용해야 합니다. 그런 요소가
없는 경우 저자는 autofocus
속성을
dialog
요소 자체에 사용해야 합니다.
다음 예제에서는 인벤토리 관리 웹 애플리케이션에서 제품의 세부 정보를 편집하기 위해 대화 상자가 사용됩니다.
< dialog >
< label > 제품 번호 < input type = "text" readonly ></ label >
< label > 제품 이름 < input type = "text" autofocus ></ label >
</ dialog >
만약 autofocus
속성이 없었다면,
대화 상자 포커싱 단계에 의해 제품 번호 필드에 포커스가 맞춰졌을 것입니다. 이는 합리적인 동작이지만, 저자는 제품 번호 필드가 읽기 전용이고 사용자 입력을 기대하지 않기 때문에 더 관련성 높은
제품 이름 필드에 포커스를 맞추는 것이 더 적절하다고 판단하여, 기본 설정을 재정의하기 위해 autofocus를 사용했습니다.
심지어 저자가 기본적으로 제품 번호 필드에 포커스를 맞추고 싶다면, 해당 input
요소에 autofocus를 사용하여
이를 명시적으로 지정하는 것이 좋습니다. 이렇게 하면 코드의 의도가 후속 독자에게 명확해지고, 향후 업데이트에 대한 견고성을 보장할 수 있습니다. (예를 들어, 다른 개발자가 닫기 버튼을
추가하고 이를 제품 번호 필드 앞에 노드 트리에 배치할 경우).
사용자 동작의 또 다른 중요한 측면은 대화 상자가 스크롤 가능한지 여부입니다. 일부 경우에는 사용자의 높은 텍스트 확대 설정으로 인해 오버플로우(및 따라서 스크롤 가능성)가 피할 수 없게 되지만, 일반적으로 사용자는 스크롤 가능한 대화 상자를 기대하지 않습니다. 대화 상자 요소에 큰 텍스트 노드를 직접 추가하는 것은 특히 나쁜데, 이는 대화 상자 요소 자체가 오버플로우되기 쉽기 때문입니다. 저자는 이를 피하는 것이 좋습니다.
다음 서비스 약관 대화 상자는 위의 권장 사항을 준수합니다.
< dialog style = "height: 80vh;" >
< div style = "overflow: auto; height: 60vh;" autofocus >
< p > 이 웹사이트를 통해 2010년 4월 1일에 주문을 제출함으로써, 귀하는 우리의 비양도 옵션을 부여하는 데 동의하며, 이 옵션은 현재 및 영원히 귀하의 불멸의 영혼을 청구할 수 있는 옵션입니다.</ p >
< p > 우리가 이 옵션을 행사하기로 결정할 경우, 귀하는 이 사이트 또는 그 정당한 권한을 부여받은 하인의 서면 통지를 받은 후 5(오) 근무일 이내에 귀하의 불멸의 영혼과 그에 대한 모든 권리를 양도하는 데 동의합니다.</ p >
<!-- ... 등, 더 많은 <p> 요소가 포함된 ... -->
</ div >
< form method = "dialog" >
< button type = "submit" value = "agree" > 동의</ button >
< button type = "submit" value = "disagree" > 동의 안 함</ button >
</ form >
</ dialog >
대화 상자 포커싱 단계가 기본적으로 스크롤 가능한
div
요소를 선택했겠지만, 이전 예와 마찬가지로
autofocus
를 div
에 지정하여 더 명확하고 미래의 변경에도
견고하도록 했습니다.
대조적으로, 서비스 약관을 설명하는 p
요소가 이러한 래퍼
div
요소를 포함하지 않았다면, dialog
자체가 스크롤 가능하게 되어
위의 권장 사항을 위반했을 것입니다. 또한, autofocus
속성이 없는 경우, 이러한
마크업 패턴은 위의 권장 사항을 위반하고 대화 상자
포커싱 단계의 기본 동작을 방해하여, 동의 버튼
으로 포커스가 이동하게 되어 사용자
경험이 나빠집니다.
open
속성은 불리언 속성입니다. 이 속성이 지정되면 dialog
요소가 활성화되어 사용자가 상호
작용할 수 있음을 나타냅니다.
dialog
요소에 open
속성이 지정되지 않은 경우 사용자가 표시하지
않아야 합니다. 이 요구 사항은 스타일 계층을 통해 간접적으로 구현될 수 있습니다. 예를 들어, 권장 기본 렌더링을 지원하는 사용자 에이전트는 렌더링 섹션에 설명된 CSS 규칙을 사용하여 이 요구 사항을 구현합니다.
open
속성을 제거하면 일반적으로 대화
상자가 숨겨집니다. 그러나 그렇게 하면 몇 가지 이상한 추가 결과가 발생합니다:
close
이벤트가 발생하지 않습니다.
대화 상자가 showModal()
메서드를 사용하여 표시된 경우, document
는 여전히 모달 대화 상자에 의해
차단됩니다.
이러한 이유로 open
속성을 수동으로
제거하지 않는 것이 좋습니다. 대신, close()
메서드를 사용하여 대화 상자를
닫거나 속성을 사용하여 숨기는 것이 좋습니다.
tabindex
속성은 dialog
요소에 지정되어서는 안 됩니다.
dialog.show()
모든 현재 엔진에서 지원됩니다.
dialog
요소를 표시합니다.
dialog.showModal()
모든 현재 엔진에서 지원됩니다.
dialog
요소를 표시하고,
이를 최상위 모달 대화 상자로 만듭니다.
이 메서드는 autofocus
속성을 따릅니다.
dialog.close([ result ])
모든 현재 엔진에서 지원됩니다.
dialog
요소를 닫습니다.
인수가 제공된 경우, 이를 반환값으로 설정합니다.
dialog.returnValue [ = result ]
모든 현재 엔진에서 지원됩니다.
dialog
의 반환값을
반환합니다.
설정할 수 있으며, 반환값을 업데이트합니다.
show()
메서드 단계는 다음과
같습니다:
this에
open
속성이 있고,
is modal 플래그가
this에서
false로 설정되어 있다면, 이 메서드는 아무것도 하지 않고 종료합니다.
this에
open
속성이 있는 경우,
"InvalidStateError
"
DOMException
예외를 던집니다.
this의 previously focused element를 현재 focused 요소로 설정합니다.
hideUntil 변수를 this에 대해 topmost popover ancestor를 실행한 결과로 설정합니다. 이때, null과 false를 인자로 사용합니다.
hideUntil이 null이라면, this의 node document로 설정합니다.
hideUntil을 인자로 하여 false와 true로 설정된 상태에서 hide all popovers until을 실행합니다.
dialog focusing steps를 this에 대해 실행합니다.
showModal()
메서드 단계는 다음과 같습니다:
this에
open
속성이 있고,
is modal 플래그가 true로 설정되어 있다면, 이 메서드는 아무것도 하지 않고
종료합니다.
this에
open
속성이 있는 경우,
"InvalidStateError
"
DOMException
예외를 던집니다.
this가
connected 상태가 아니라면,
"InvalidStateError
"
DOMException
예외를 던집니다.
this가
popover showing state 상태에
있다면,
"InvalidStateError
"
DOMException
예외를 던집니다.
this의 node document를 blocked by the modal dialog 상태로 만듭니다.
이로 인해 문서의 focused area가 inert 상태가 됩니다. 단, 현재 포커스된 영역이 subject의 shadow-including descendant가 아닌 경우에만 해당됩니다. 이러한 경우, 문서의 focused area는 곧 reset되어 viewport로 변경됩니다. 몇 단계 후에 더 나은 포커스 대상을 찾기 위한 시도를 할 것입니다.
만약 this의 node 문서의 최상위 레이어가 이미 포함하지 않는다면 this를 최상위 레이어에 추가합니다 this.
this의 close watcher를 close watcher 설정의 결과로 설정합니다 this의 관련된 전역 객체와 함께:
cancelAction이
canPreventClose를 반환하도록
이벤트 발생의 결과로
cancel
이벤트를
this에서 발생시키며,
cancelable
속성을
canPreventClose로 초기화합니다.
closeAction이 대화 상자를 닫습니다, this와 null을 사용하여 실행합니다.
this의 이전에 포커스된 요소를 포커스된 요소로 설정합니다.
hideUntil을 최상위 팝오버 조상 실행의 결과로 설정합니다 this, null, 그리고 false를 사용하여.
모든 팝오버를 숨깁니다, hideUntil, false, 그리고 true를 사용하여 실행합니다.
대화 상자 포커스 단계를 this를 사용하여 실행합니다.
dialog focusing steps는 dialog
요소
subject를 대상으로 다음과 같이 실행됩니다:
control 변수를 null로 설정합니다.
subject에 autofocus
속성이
있으면,
control을 subject로 설정합니다.
control이 null이라면, control을 subject의 focus delegate로 설정합니다.
control이 여전히 null이라면, control을 subject로 설정합니다.
control에 대해 focusing steps를 실행합니다.
control이 focusable하지
않으면, 이 작업은 아무것도 하지 않습니다.
이는 subject가 focus delegate를 가지고 있지 않고, 사용자 에이전트가 dialog
요소가
일반적으로 focusable하지 않다고 판단한 경우에만 발생합니다.
이 경우, 이전에 문서의 focused area에 대한 수정 사항이 적용됩니다.
topDocument 변수를 control의 node navigable의 top-level traversable의 active document로 설정합니다.
control의 node document의 origin이 topDocument의 origin과 동일하지 않다면, 이 작업은 아무것도 하지 않고 종료합니다.
topDocument의 autofocus candidates를 비웁니다.
topDocument의 autofocus processed flag를 true로 설정합니다.
dialog
HTML element removing
steps는,
removedNode와 oldParent를 대상으로 다음과 같이 실행됩니다:
removedNode의 close watcher가 null이 아니라면, 다음 단계를 실행합니다:
Destroy removedNode의 close watcher.
removedNode의 close watcher를 null로 설정합니다.
removedNode의 node document의 top layer가 removedNode를 포함하고 있다면, remove an element from the top layer immediately 작업을 실행합니다.
removedNode의 is modal 플래그를 false로 설정합니다.
close(returnValue)
메서드 단계는 다음과 같습니다:
returnValue가 주어지지 않았다면, 이를 null로 설정합니다.
Close the dialog 작업을 this와 returnValue를 사용하여 실행합니다.
dialog
요소
subject를 닫는 경우, null 또는 문자열 result를 사용하여 다음 단계를 실행합니다:
subject에 open
속성이 없으면, 이
작업은 아무것도 하지 않고 종료합니다.
subject의 open
속성을 제거합니다.
subject의 is modal 플래그가 true라면, 요소를 top layer에서 제거하도록 요청 작업을 subject에 대해 실행합니다.
wasModal 변수를 subject의 is modal 플래그 값으로 설정합니다.
subject의 is modal 플래그를 false로 설정합니다.
result가 null이 아닌 경우, returnValue
속성을
result로 설정합니다.
subject의 previously focused element가 null이 아닌 경우, 다음 단계를 실행합니다:
element 변수를 subject의 previously focused element로 설정합니다.
subject의 previously focused element를 null로 설정합니다.
subject의 node document의 focused area의 DOM anchor가 element의 shadow-including inclusive descendant이거나, wasModal이 true라면, focusing steps 작업을 element에 대해 실행합니다. 이 단계를 실행할 때는 뷰포트가 스크롤되지 않아야 합니다.
요소 작업을 대기열에 추가 작업을
subject 요소에 대해 실행하여, fire an event
작업을
close
이름으로
subject에서 실행합니다.
subject의 close watcher가 null이 아닌 경우, 다음 단계를 실행합니다:
Destroy subject의 close watcher.
subject의 close watcher를 null로 설정합니다.
returnValue
IDL 속성은,
해당 값이 설정된 마지막 값을 반환해야 하며, 새로운 값으로 설정할 때는 새 값으로 설정해야 합니다.
요소가 생성될 때는 빈 문자열로 설정되어야 합니다.
우리는 dialog
요소에 대해
show/close를 동사로 사용합니다. 더 일반적으로 생각되는 반의어 쌍인 show/hide 또는 open/close 대신 다음과 같은 제약이 있기 때문입니다:
대화 상자를 숨기는 것은 닫는 것과 다릅니다. 대화 상자를 닫는 것은 반환 값을 설정하고, 이벤트를 발생시키며, 다른 대화 상자에 대해 페이지를 차단 해제하는 등의 작업을
수행합니다. 반면 대화 상자를 숨기는 것은 순전히 시각적 속성으로, open
속성을 제거하여
이미 수행할 수 있는 작업입니다.
(위의 노트도 참조하십시오. 이 방법으로 대화 상자를 숨기는 것이 일반적으로 바람직하지 않다는
내용이 있습니다.)
대화 상자를 보여주는 것과 여는 것은 다릅니다. 대화 상자를 여는 것은 대화 상자를 생성하고 보여주는 작업을 포함합니다(window.open()
이 새 창을 생성하고 보여주는 것과
유사합니다). 반면 대화 상자를 보여주는 것은 이미 DOM에 있는 dialog
요소를
가져와 사용자에게 상호작용 가능하고 가시적으로 만드는 과정입니다.
위의 내용을 무시하고 dialog.open()
메서드를 가진다면, dialog.open
속성과 충돌하게
됩니다.
게다가, 조사에 따르면,
dialog
요소의 원래 설계 당시
다른 많은 UI 프레임워크에서 show/close 동사 쌍이 적당히 일반적이었습니다.
결론적으로, 특정 동사의 함축과 기술 맥락에서의 사용 방식으로 인해, 대화 상자를 보여주고 닫는 동작이 항상 반의어로 표현될 수는 없다는 것이 밝혀졌습니다.
각 dialog
요소에는 닫기 감시자(close watcher)가 있으며, 이는 닫기 감시자 또는 null로 초기값은 null입니다.
각 dialog
요소에는 모달(modal) 여부 플래그가 있습니다. dialog
요소가 생성될 때, 이 플래그는
false로 설정되어야 합니다.
각 HTML 요소에는 이전에
포커스를 받은 요소가 있으며, 이는 null 또는 요소이며, 초기값은 null입니다. showModal()
및 show()
가 호출될 때, 이 요소는 대화 상자 포커스 단계(dialog focusing
steps)를 실행하기 전에 현재 포커스된 요소로 설정됩니다. popover
속성을 가진 요소는 popover 표시 알고리즘(show popover algorithm) 중에 현재 포커스된 요소를 이 요소로 설정합니다.
모든 최신 엔진에서 지원됩니다.
open
IDL 속성은
반영해야 합니다. open
콘텐츠 속성에.
이 대화 상자에는 작은 글씨가 있습니다. strong
요소는 사용자의 주의를 더
중요한 부분으로 끌기 위해 사용됩니다.
< dialog >
< h1 > Add to Wallet</ h1 >
< p >< strong >< label for = amt > How many gold coins do you want to add to your wallet?</ label ></ strong ></ p >
< p >< input id = amt name = amt type = number min = 0 step = 0.01 value = 100 ></ p >
< p >< small > You add coins at your own risk.</ small ></ p >
< p >< label >< input name = round type = checkbox > Only add perfectly round coins</ label ></ p >
< p >< input type = button onclick = "submit()" value = "Add Coins" ></ p >
</ dialog >
스크립트를 사용하면 작성자가 문서에 상호작용성을 추가할 수 있습니다.
가능한 경우 스크립트 대신 선언적 대안을 사용하는 것이 권장됩니다. 선언적 메커니즘은 종종 유지 관리가 더 쉬우며 많은 사용자가 스크립트를 비활성화합니다.
예를 들어, 더 많은 세부 정보를 표시하기 위해 섹션을 표시하거나 숨기기 위해 스크립트를 사용하는 대신,
details
요소를
사용할 수 있습니다.
작성자는 또한 스크립트 지원이 없는 경우에도 애플리케이션이 정상적으로 작동하도록 하는 것이 권장됩니다.
예를 들어, 작성자가 테이블 헤더에 동적으로 테이블을 정렬하는 링크를 제공하는 경우, 스크립트 없이도 작동하도록 링크를 만들어 서버에서 정렬된 테이블을 요청할 수 있습니다.
script
요소모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
src
속성이 없으면, type
속성의 값에 따라 달라지지만, 스크립트 콘텐츠 제한 사항과 일치해야 합니다.src
속성이 있는 경우, 요소는 비어 있거나,
스크립트 설명서만 포함해야 하며, 스크립트 콘텐츠 제한 사항과 일치해야 합니다.
src
— 리소스 주소type
— 스크립트 유형nomodule
— 모듈 스크립트를 지원하는 사용자 에이전트에서 실행 방지async
— 가져오는 동안 차단하지 않고,
스크립트가 사용 가능해질 때 실행defer
— 스크립트 실행을 지연시킴
crossorigin
— 요소가 교차 출처 요청을 처리하는 방법integrity
—
서브리소스 무결성 검사에 사용되는 무결성 메타데이터 [SRI]
referrerpolicy
— 요소가 시작한 가져오기에 대한 참조
정책blocking
— 요소가 렌더링을 차단할 가능성이 있는지
여부fetchpriority
— 요소가 시작한 가져오기의 우선순위 설정[Exposed =Window ]
interface HTMLScriptElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute boolean noModule ;
[CEReactions ] attribute boolean async ;
[CEReactions ] attribute boolean defer ;
[CEReactions ] attribute DOMString ? crossOrigin ;
[CEReactions ] attribute DOMString text ;
[CEReactions ] attribute DOMString integrity ;
[CEReactions ] attribute DOMString referrerPolicy ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList blocking ;
[CEReactions ] attribute DOMString fetchPriority ;
static boolean supports (DOMString type );
// 도 사용되지 않는 멤버가 있습니다
};
script
요소는 저자가 문서에 동적 스크립트와
데이터 블록을 포함할 수 있도록 합니다. 이 요소는 사용자에게 표시되는 콘텐츠를 표현하지 않습니다.
모든 현재 엔진에서 지원됩니다.
type
속성은 표현되는 스크립트의
유형을 사용자 정의할 수 있도록 합니다:
속성을 생략하거나, 빈 문자열로 설정하거나, JavaScript MIME 유형 일치로 설정하는 것은 스크립트가 고전적인 스크립트임을 의미하며, JavaScript의 Script 최상위 생산에 따라 해석됩니다. 고전적인 스크립트는 async
및 defer
속성에 영향을 받지만,
이는 src
속성이 설정된 경우에만
해당됩니다. 저자는 type
속성을
중복 설정하는 대신 생략해야 합니다.
속성을 "module
"의 ASCII 대소문자 구분 없이 일치하는 값으로 설정하면, 스크립트가 JavaScript 모듈
스크립트임을 의미하며, JavaScript의 Module 최상위 생산에
따라 해석됩니다. 모듈 스크립트는 defer
속성에 영향을 받지
않지만, async
속성에는
영향을 받습니다(src
속성의 상태와
무관하게).
속성을 "importmap
"의 ASCII 대소문자 구분 없이 일치하는 값으로 설정하면, 스크립트가 import map이며, JSON을 포함하여 모듈 식별자 해결 동작을 제어하는 데 사용됩니다. Import map은 인라인으로만
사용될 수 있으며, src
속성과
대부분의 다른 속성은 의미가 없으며 사용되어서는 안 됩니다.
속성을 다른 값으로 설정하면, 스크립트가 처리되지 않는 데이터 블록이 됨을 의미합니다. script
속성은 ( type
자체를 제외하고) 데이터 블록에
영향을 미치지 않습니다. 저자는 데이터 블록을 나타내기 위해 유효한
MIME 유형 문자열을 사용해야 하며, 이는 JavaScript MIME 유형 일치와 일치하지 않아야 합니다.
데이터 블록은 유효한 MIME 유형 문자열을 사용하여 나타내야 한다는 요구 사항은 잠재적인 미래의 충돌을 피하기 위한 것입니다. 이
명세서가 추가적인 스크립트 유형을 추가할 경우, type
속성을 MIME 유형이 아닌 값으로 설정하여
트리거됩니다. 예를 들어, "module
" 값이 모듈
스크립트를 나타내는 것과 같습니다. 지금 유효한 MIME 유형 문자열을 사용함으로써, 미래의 사용자 에이전트에서도 데이터 블록이 다른 스크립트 유형으로 다시 해석되지 않도록 보장할 수
있습니다.
고전적인 스크립트와 JavaScript 모듈 스크립트는 인라인으로 포함하거나, src
속성을 사용하여 외부 파일에서
가져올 수 있습니다. 이 속성이 지정된 경우, 사용할 외부 스크립트 리소스의 URL을 제공합니다. src
가 지정된 경우, 이는 유효한 비어 있지 않은 URL(주변에 공백이 있을 수
있음)이어야 합니다.
인라인 script
요소의 내용 또는 외부
스크립트 리소스는 고전적인 스크립트와 JavaScript 모듈 스크립트에 대해
각각 JavaScript 명세의 스크립트 또는 모듈 생산 요구 사항을 준수해야 합니다.
[JAVASCRIPT]
CSS 모듈 스크립트에 대한 외부 스크립트 리소스의 내용은 CSS 명세의 요구 사항을 준수해야 합니다. [CSS]
JSON 모듈 스크립트에 대한 외부 스크립트 리소스의 내용은 JSON 명세의 요구 사항을 준수해야 합니다. [JSON]
import map에 대한 인라인 script
요소의 내용은 import map
작성 요구 사항을 준수해야 합니다.
import map script
요소의 경우, src
, async
, nomodule
, defer
, crossorigin
,
integrity
및 referrerpolicy
속성은 지정되어서는 안 됩니다.
문서에는 import map script
요소가 하나만 있어야 합니다.
데이터 블록을 포함하기 위해 사용되는 경우, 데이터는 인라인으로 포함되어야 하며, 데이터의 형식은
type
속성을 사용하여 제공되어야 하며,
script
요소의 내용은 사용된 형식에
대해 정의된 요구 사항을 준수해야 합니다. src
,
async
, nomodule
, defer
, crossorigin
,
integrity
, referrerpolicy
및 fetchpriority
속성은 지정되어서는 안 됩니다.
nomodule
속성은 불리언 속성으로, 모듈 스크립트를 지원하는 사용자 에이전트에서 스크립트가 실행되지 않도록 합니다. 이를 통해 최신 사용자 에이전트에서
모듈 스크립트와 이전 사용자 에이전트에서 고전적인 스크립트를 선택적으로 실행할 수 있습니다. nomodule
속성은 모듈 스크립트에 지정되어서는 안 됩니다(지정된 경우 무시됩니다).
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
async
및 defer
속성은 스크립트를 어떻게
평가할지를 나타내는 불리언 속성입니다. 고전적인 스크립트는 defer
또는 async
를 지정할 수 있지만, src
속성이 존재하지 않으면 이 둘 중 하나를
지정해서는 안 됩니다. 모듈 스크립트는 async
속성을 지정할 수 있지만, defer
속성은 지정해서는 안 됩니다.
이 속성을 사용하여 선택할 수 있는 여러 모드가 있으며, 이는 스크립트의 유형에 따라 달라집니다.
고전적인 스크립트의 경우, async
속성이 있으면 고전적인 스크립트는 구문
분석과 병렬로 가져오며, 이용 가능해지는 대로 평가됩니다(구문 분석이 완료되기 전에 평가될 수
있음). async
속성이 없고 defer
속성이 있으면, 고전적인 스크립트는 구문
분석과 병렬로 가져오고 페이지의 구문 분석이 완료된 후 평가됩니다. 두 속성 모두 없는
경우, 스크립트는 즉시 가져와 평가되며, 이 과정에서 구문 분석이 완료될 때까지 차단됩니다.
모듈 스크립트의 경우, async
속성이 있으면 모듈 스크립트 및 해당
종속성이 구문 분석과 병렬로 가져와지며, 모듈 스크립트는 이용 가능해지는 대로
평가됩니다(구문 분석이 완료되기 전에 평가될 수 있음). 그렇지 않으면 모듈 스크립트와 그 종속성은 구문 분석과 병렬로 가져와지고 페이지의 구문 분석이 완료된 후 평가됩니다. (defer
속성은 모듈 스크립트에 영향을 미치지
않습니다.)
이는 다음의 도식도에서 요약됩니다:
이 속성들에 대한 정확한 처리 세부 사항은 주로 역사적인 이유로 다소 복잡하며, HTML의 여러 측면을 포함합니다. 따라서 구현 요구 사항은 명세 전체에 흩어져 있을 수밖에 없습니다.
아래의 알고리즘(이 섹션에서)은 이 처리의 핵심을 설명하지만, 이 알고리즘은 script
시작 및 종료 태그, 외부 콘텐츠에서, XML에서, document.write()
메서드, 스크립팅 처리 등과 관련된 구문 분석 규칙을 참조하고 있습니다.
document.write()
메서드를 사용하여
삽입된 script
요소는 일반적으로 실행되며(보통 추가 스크립트 실행이나 HTML 구문 분석을 차단), innerHTML
및 outerHTML
속성을 사용하여 삽입된
경우에는 전혀 실행되지 않습니다.
defer
속성은 async
속성이 지정된 경우에도 지정할 수
있으며, async
를 지원하지 않는(
defer
만 지원하는) 레거시 웹 브라우저에서
defer
동작으로 대체되도록 합니다.
crossorigin
속성은
CORS 설정 속성입니다. 고전적인 스크립트의 경우, 스크립트가 다른 출처에서 가져온 경우 오류 정보가 노출될지 여부를 제어합니다. 모듈 스크립트의 경우, 교차 출처 요청에 사용되는 자격
증명 모드를 제어합니다.
고전적인 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기에 CORS 프로토콜을 사용해야 합니다.
integrity
속성은 이
요소가 책임지는 요청에 대한 무결성 메타데이터를 나타냅니다. 값은 텍스트입니다. integrity
속성은 src
속성이 지정되지 않은 경우 지정되어서는 안
됩니다. [SRI]
referrerpolicy
속성은 참조 정책 속성입니다. 이 속성의 목적은 스크립트와 해당 스크립트에서 가져오는 모든 스크립트를 가져올 때 사용되는 참조
정책을 설정하는 것입니다. [REFERRERPOLICY]
script
요소의 referrer
정책이 가져온 스크립트에는 적용되지만 다른 하위 리소스에는 적용되지 않는 예:
< script referrerpolicy = "origin" >
fetch( '/api/data' ); // <script>의 referrer 정책으로 가져오지 않음
import ( './utils.mjs' ); // <script>의 referrer 정책("origin"으로 설정)이 적용됨
</ script >
blocking
속성은 차단 속성입니다.
fetchpriority
속성은 가져오기 우선순위 속성입니다. 이 속성의
목적은 스크립트를 가져올 때 사용되는 우선순위를 설정하는
것입니다.
src
, type
, nomodule
, async
, defer
, crossorigin
,
integrity
, referrerpolicy
,
그리고 fetchpriority
속성을 동적으로 변경하는 것은 직접적인 영향을 미치지 않습니다. 이 속성들은 아래에 설명된 특정 시점에만 사용됩니다.
src
, type
, defer
, integrity
,
그리고 blocking
IDL 속성은 각각 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
HTMLScriptElement/referrerPolicy
모든 현재 엔진에서 지원됩니다.
referrerPolicy
IDL 속성은 referrerpolicy
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
fetchPriority
IDL 속성은 fetchpriority
콘텐츠 속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
crossOrigin
IDL 속성은 crossorigin
콘텐츠
속성을 반영해야 하며, 알려진 값으로만 제한됩니다.
noModule
IDL 속성은 nomodule
콘텐츠
속성을 반영해야 합니다.
async
속성의
getter 단계는 다음과 같습니다:
this의 force async가 true이면, true를 반환합니다.
false를 반환합니다.
async
속성의 setter 단계는 다음과
같습니다:
this의 force async를 false로 설정합니다.
script.text [ = value ]
요소의 자식 텍스트 콘텐츠를 반환합니다.
값을 설정하면 요소의 자식이 해당 값으로 대체됩니다.
HTMLScriptElement
.supports(type)
주어진 type이 사용자 에이전트에서 지원되는 스크립트 유형인 경우 true를 반환합니다. 이 명세서에서 가능한 스크립트 유형은
"classic
", "module
", "importmap
"이며, 향후 다른 유형이 추가될 수 있습니다.
text
속성의
getter는 이 script
요소의 자식 텍스트 콘텐츠를 반환해야 합니다.
text
속성의 setter는 이 script
요소 내의 값을 주어진 값으로
문자열 전체를 대체해야 합니다.
HTMLScriptElement/supports_static
모든 현재 엔진에서 지원됩니다.
supports(type)
메서드의 단계는 다음과 같습니다:
type이 "classic
"이면 true를 반환합니다.
type이 "module
"이면 true를 반환합니다.
type이 "importmap
"이면 true를 반환합니다.
false를 반환합니다.
type 인수는 이러한 값과 정확히 일치해야 합니다. ASCII 대소문자
구분 없이 일치하는 방식은 수행되지 않습니다. 이는 type
콘텐츠 속성 값이 처리되는 방식, DOMTokenList
의
supports()
메서드가 작동하는 방식과 다르지만, WorkerType
열거형이 Worker()
생성자에서 사용되는 방식과 일치합니다.
이 예에서는 두 개의 script
요소가 사용됩니다. 하나는 외부 고전적인 스크립트를 포함하고, 다른 하나는
데이터 블록으로 데이터를 포함합니다.
< script src = "game-engine.js" ></ script >
< script type = "text/x-game-map" >
........ U......... e
o............ A.... e
..... A..... AAA.... e
. A.. AAA... AAAAA... e
</ script >
이 데이터는 스크립트에서 비디오 게임의 지도를 생성하는 데 사용할 수 있습니다. 그러나 이 데이터가 반드시 그렇게 사용되어야 하는 것은 아닙니다. 예를 들어, 지도 데이터가 페이지의 다른 마크업에 포함되어 있을 수 있으며, 여기의 데이터 블록은 사이트의 검색 엔진이 사용자가 게임 지도에서 특정 기능을 찾도록 돕기 위해 사용될 수 있습니다.
다음 예제는 script
요소가 고전적인 스크립트의 일부로 문서의 다른 부분에서 사용되는 함수를
정의하는 데 어떻게 사용될 수 있는지 보여줍니다. 또한 script
요소가 문서를 구문
분석하는 동안 스크립트를 호출하여, 이 경우 양식의 출력을 초기화하는 방법을 보여줍니다.
< script >
function calculate( form) {
var price = 52000 ;
if ( form. elements. brakes. checked)
price += 1000 ;
if ( form. elements. radio. checked)
price += 2500 ;
if ( form. elements. turbo. checked)
price += 5000 ;
if ( form. elements. sticker. checked)
price += 250 ;
form. elements. result. value = price;
}
</ script >
< form name = "pricecalc" onsubmit = "return false" onchange = "calculate(this)" >
< fieldset >
< legend > 당신의 자동차 가격 계산</ legend >
< p > 기본 가격: £52000.</ p >
< p > 추가 옵션 선택:</ p >
< ul >
< li >< label >< input type = checkbox name = brakes > 세라믹 브레이크 (£1000)</ label ></ li >
< li >< label >< input type = checkbox name = radio > 위성 라디오 (£2500)</ label ></ li >
< li >< label >< input type = checkbox name = turbo > 터보 차저 (£5000)</ label ></ li >
< li >< label >< input type = checkbox name = sticker > "XZ" 스티커 (£250)</ label ></ li >
</ ul >
< p > 총액: £< output name = result ></ output ></ p >
</ fieldset >
< script >
calculate( document. forms. pricecalc);
</ script >
</ form >
다음 예제는 script
요소가 외부
JavaScript 모듈 스크립트를
포함하는 방법을 보여줍니다.
< script type = "module" src = "app.mjs" ></ script >
이 모듈과 JavaScript import
구문을 통해 소스 파일에서 표현된 모든 종속성이 가져옵니다. 생성된 모듈 그래프가 모두 가져오고 문서의 구문 분석이 완료되면
app.mjs
의 내용이 평가됩니다.
또한 동일한 Window
에서 다른 script
요소에서
app.mjs
모듈을 가져오는 코드가 있다면(예: import "./app.mjs";
를 통해), 이전 script
요소에 의해 생성된 동일한
JavaScript 모듈 스크립트가
가져옵니다.
이 예제는 최신 사용자 에이전트에서 JavaScript 모듈 스크립트를 포함하고, 오래된 사용자 에이전트에서는 고전적인 스크립트를 포함하는 방법을 보여줍니다:
< script type = "module" src = "app.mjs" ></ script >
< script nomodule defer src = "classic-app-bundle.js" ></ script >
최신 사용자 에이전트에서는 script
요소가 nomodule
속성을 가진 경우
무시되며, script
요소에
type
이
"module
"인 경우 가져와서 평가됩니다(이는 JavaScript 모듈 스크립트로 평가됨). 반대로, 오래된 사용자 에이전트는
"module
" 유형의 script
요소를 무시하며, 이는
그들에게 알려지지 않은 스크립트 유형이기 때문입니다. 그러나 이들은 nomodule
속성을 구현하지
않기 때문에 다른 script
요소를 가져와서 고전적인 스크립트로 평가하는 데 문제가 없습니다.
다음 예제는 script
요소를
사용하여 문서의 텍스트에 여러 가지 치환 작업을 수행하는 인라인 JavaScript 모듈 스크립트를 작성하는 방법을 보여줍니다. 이를 통해 보다 흥미로운
독서 경험을 제공할 수 있습니다(예: 뉴스 사이트에서): [XKCD1288]
< script type = "module" >
import { walkAllTextNodeDescendants } from "./dom-utils.mjs" ;
const substitutions = new Map([
[ "witnesses" , "these dudes I know" ]
[ "allegedly" , "kinda probably" ]
[ "new study" , "Tumblr post" ]
[ "rebuild" , "avenge" ]
[ "space" , "spaaace" ]
[ "Google glass" , "Virtual Boy" ]
[ "smartphone" , "Pokédex" ]
[ "electric" , "atomic" ]
[ "Senator" , "Elf-Lord" ]
[ "car" , "cat" ]
[ "election" , "eating contest" ]
[ "Congressional leaders" , "river spirits" ]
[ "homeland security" , "Homestar Runner" ]
[ "could not be reached for comment" , "is guilty and everyone knows it" ]
]);
function substitute( textNode) {
for ( const [ before, after] of substitutions. entries()) {
textNode. data = textNode. data. replace( new RegExp( `\\b ${ before} \\b` , "ig" ), after);
}
}
walkAllTextNodeDescendants( document. body, substitute);
</ script >
JavaScript 모듈 스크립트를 사용하여 얻을 수 있는 몇 가지 주요 기능으로는 다른 JavaScript 모듈에서 기능을 가져올 수 있는 기능, 기본적으로 엄격 모드, 최상위 선언이 전역 객체에 새로운 속성을 도입하지 않는다는 점 등이 있습니다. 또한 이
script
요소가 문서의 어디에
나타나든 상관없이 문서 구문 분석이 완료되고 종속성(dom-utils.mjs
)이 가져와서 평가될 때까지 평가되지 않는다는 점도 주목해야 합니다.
다음 예제는 JSON 모듈 스크립트가 JavaScript 모듈 스크립트 내부에서 어떻게 가져올 수 있는지 보여줍니다:
< script type = "module" >
import peopleInSpace from "http://api.open-notify.org/astros.json" with { type: "json" };
const list = document. querySelector( "#people-in-space" );
for ( const { craft, name } of peopleInSpace. people) {
const li = document. createElement( "li" );
li. textContent = ` ${ name} / ${ craft} ` ;
list. append( li);
}
</ script >
모듈 스크립트의 MIME 유형 검사 기준은 엄격합니다. JSON 모듈
스크립트의 가져오기가 성공하려면 HTTP 응답에 JSON MIME 유형이
있어야 합니다. 예를 들어 Content-Type: text/json
과 같습니다. 반면에 with { type: "json" }
문장의 일부가
생략된 경우, JavaScript 모듈 스크립트를 가져오려는 의도인 것으로 가정하며, HTTP 응답에 JavaScript MIME 유형이 없는 경우 가져오기가 실패합니다.
script
요소는 여러 관련된 상태를
가지고 있습니다.
script
요소는 파서 문서를 가지고 있으며, 이는 null이거나 document
입니다. 초기값은 null입니다. 이 값은 HTML 파서 및 XML 파서에 의해 script
요소에 설정되며, 해당
요소의 처리에 영향을 미칩니다. null이 아닌 파서 문서를 가진
script
요소는 파서 삽입됨으로 알려져 있습니다.
script
요소는 준비 시간 문서를 가지고 있으며, 이는 null이거나 document
입니다. 초기값은 null입니다. 이 값은 스크립트가 준비 중에 문서 간에 이동할 때
실행되지 않도록 방지하는 데
사용됩니다.
script
요소는 초기값이 true인
강제 비동기 불리언 값을 가지고 있습니다. 이 값은 HTML 파서 및 XML 파서에 의해 script
요소에 설정되며, 요소에
async
콘텐츠 속성이 추가될 때
false로 설정됩니다.
script
요소는 초기값이
false인 외부 파일에서 가져옴 불리언 값을 가지고 있습니다. 이 값은 스크립트가 준비될 때, 그 시점의
요소의 src
속성에 따라 결정됩니다.
script
요소는 초기값이
false인 파서 실행 준비 완료 불리언 값을 가지고 있습니다. 이 값은 파서 삽입된 요소에만 사용되며, 파서가 스크립트를
실행할 시점을 알려줍니다.
script
요소는 초기값이
false인 이미 시작됨 불리언 값을 가지고 있습니다.
script
요소는 초기값이
false인 로드 이벤트 지연 불리언 값을 가지고 있습니다.
script
요소는 초기값이
null인 타입을 가지고 있으며, 이는 null, "classic
", "module
", 또는
"importmap
" 중 하나입니다. 이 값은 준비 시점에서 요소의 type
속성에 따라 결정됩니다.
script
요소는
"초기화되지 않음
", null(오류를 나타냄), 스크립트 또는 import map 파서 결과 중 하나인 결과를 가지고 있습니다. 초기값은 "초기화되지 않음
"입니다.
script
요소는 일련의 단계 또는
null인 결과가 준비되었을 때 실행할 단계를 가지고 있으며, 초기값은 null입니다. 준비 완료로 표시를 하기 위해 script
요소
el이 스크립트, import map 파서 결과 또는
null result를 받았을 때 다음과 같이 진행합니다:
el의 결과를 result로 설정합니다.
만약 el의 결과가 준비되었을 때 실행할 단계가 null이 아니라면, 그 단계를 실행합니다.
el의 결과가 준비되었을 때 실행할 단계를 null로 설정합니다.
el의 로드 이벤트 지연을 false로 설정합니다.
script
요소
el은 암묵적으로 잠재적으로 렌더링 차단 상태가 됩니다. 만약
el의 타입이
"classic
"이고, el이 파서 삽입됨 상태이며, el에 async
또는 defer
속성이 없으면
el은 렌더링 차단 상태가 됩니다.
복제 단계는 script
요소
el을 복제하여 복사본 copy를 생성할 때, copy의 이미 시작됨 값을 el의 이미 시작됨으로 설정합니다.
async
속성이 script
요소
el에 추가되면, 사용자 에이전트는 el의 강제 비동기 값을 false로 설정해야 합니다.
script
요소
el의 로드 이벤트
지연이 true인 경우, 사용자 에이전트는 로드
이벤트를 지연시켜야 합니다. el의 준비 시간 문서의 이벤트가 지연됩니다.
script
HTML
요소 연결 후 단계는 insertedNode에 대해 다음과 같이 정의됩니다:
insertedNode가 연결된 상태가 아니면, 반환합니다.
이 경우는 이전에 삽입된 script
가
나중에 삽입된 script
를
제거할 때 발생할 수 있습니다. 예를 들어:
< script >
const script1 = document. createElement( 'script' );
script1. innerText = `
document.querySelector('#script2').remove();
` ;
const script2 = document. createElement( 'script' );
script2. id = 'script2' ;
script2. textContent = `console.log('script#2 running')` ;
document. body. append( script1, script2);
</ script >
이 예제에서는 콘솔에 아무것도 출력되지 않습니다. 첫 번째 script
의
HTML 요소 연결 후 단계가 실행될 때, 두 번째
script
가
이미 DOM에 연결된 상태임을 확인하고, 이를 제거합니다. 따라서 두 번째 HTML 요소 연결 후 단계가 실행될 때, 이미
연결되지 않으므로 준비되지 않습니다.
insertedNode가 파서에 의해 삽입된 경우, 반환합니다.
스크립트 요소 준비를 실행합니다.
script
요소에
대해 HTML 요소 연결 후 단계를 실행합니다.
이 예시는 script
요소
및 새로 삽입된 자식 script
요소들의 실행
순서에 대해 흥미로운 시사점을 제공합니다. 아래 코드를 살펴보세요:
< script id = outer-script ></ script >
< script >
const outerScript = document. querySelector( '#outer-script' );
const start = new Text( 'console.log(1);' );
const innerScript = document. createElement( 'script' );
innerScript. textContent = `console.log('inner script executing')` ;
const end = new Text( 'console.log(2);' );
outerScript. append( start, innerScript, end);
// 출력 로그:
// 1
// 2
// inner script executing
</ script >
두 번째 스크립트 블록이 실행될 때, outer-script
는 이미 준비된 상태이지만, 본문이 비어 있어서 실행되지 않았고, 따라서 이미 시작됨으로 표시되지 않았습니다. Text
노드와 중첩된 script
요소의 원자적 삽입이 다음과 같은 결과를 가져옵니다:
다음 속성 변경 단계는 element,
localName, oldValue, value, 및 namespace에 대해 모든 script
요소에 대해 사용됩니다:
만약 namespace가 null이 아니라면, 반환합니다.
localName이 src
인 경우,
element에 대해 script
HTML 요소 연결 후 단계를 실행합니다.
주어진 script
요소
el을 준비하려면:
만약 el의 이미 시작됨이 true라면, 반환하세요.
parser document를 el의 parser document로 설정하세요.
el의 parser document를 null로 설정하세요.
이 작업은 파서에 의해 삽입된 script
요소들이
실행되지 않는 경우, 예를 들어 빈 상태이거나 지원되지 않는 스크립팅 언어를 지정한 경우에 다른 스크립트가 나중에 이를 변경하여 다시 실행할 수 있도록 하기 위해 수행됩니다.
parser document가 null이 아니고 el에 async
속성이 없는
경우, el의 강제
비동기를 true로 설정하세요.
이 작업은 파서에 의해 삽입된 script
요소가
실행되지 않았을 때, 스크립트가 이를 동적으로 업데이트한 후 실행되더라도 async
속성이 설정되지
않았더라도 비동기 방식으로 실행되도록 하기 위해 수행됩니다.
source text를 el의 자식 텍스트 내용으로 설정하세요.
el에 src
속성이 없고, source text가 빈 문자열인 경우, 반환하세요.
el이 연결된 상태가 아닌 경우, 반환하세요.
다음 중 하나라도 true인 경우:
el에 값이 빈 문자열인 type
속성이
있는 경우;
이 경우, 이 script
요소에
대한 the script block's type string을 "text/javascript
"로 설정하세요.
그렇지 않다면, el에 type
속성이 있으면,
the script block's type string을 그 속성의 값에 앞뒤의 ASCII 공백을 제거한 값으로 설정하세요.
그 외의 경우, el에 비어 있지 않은 language
속성이 있으면, the script block's type string을 "text/
"와 el의 language
속성 값의 연결로 설정하세요.
the script block's type string이 JavaScript MIME 타입 에센스와 일치하는 경우,
el의 type을
"classic
"으로 설정하세요.
그렇지 않으면, the script block's type string이 "module
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우, el의 type을
"module
"로 설정하세요.
그렇지 않으면, the script block's type string이 "importmap
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우, el의 type을
"importmap
"으로 설정하세요.
그 외의 경우, 반환하세요. (스크립트는 실행되지 않으며, el의 type은 null로 남습니다.)
parser document가 null이 아닌 경우, el의 parser document를 다시 parser document로 설정하고, el의 강제 비동기를 false로 설정하세요.
el의 이미 시작됨을 true로 설정하세요.
만약 parser document가 null이 아니고, parser document가 el의 준비 시간 문서와 다르다면, 반환하세요.
만약 el에 대해 스크립팅이 비활성화된 경우, 반환하세요.
스크립팅이 비활성화됨의
정의는 다음 스크립트가 실행되지 않음을 의미합니다: XMLHttpRequest
의
responseXML
문서 내의 스크립트, DOMParser
에 의해 생성된
문서 내의 스크립트, XSLTProcessor
의 transformToDocument
기능에 의해 생성된 문서 내의 스크립트, 그리고 스크립트에 의해 Document
내에 처음 삽입된 스크립트.
만약 el에 nomodule
콘텐츠 속성이 있고, el의 type이 "classic
"인 경우, 반환하세요.
이것은 모듈 스크립트에 nomodule
을
지정하는 것이 아무런 효과가 없음을 의미합니다. 알고리즘은 계속 진행됩니다.
만약 el에 src
콘텐츠 속성이 없고, Content
Security Policy에 의해 요소의 인라인 동작이 차단되어야 하는가? 알고리즘이 el, "script
", 및
source text를 제공받았을 때 "Blocked
"를 반환하는 경우, 반환하세요. [CSP]
만약 el에 event
속성과 for
속성이 있으며,
el의 type이
"classic
"인 경우:
for를 el의 for
속성 값으로
설정하세요.
event를 el의 event
속성 값으로 설정하세요.
앞뒤의 ASCII 공백을 제거하여 event 및 for에서 제거하세요.
for가 문자열 "window
"와 ASCII 대소문자 구분 없이 일치하지 않는 경우, 반환하세요.
event가 "onload
" 또는 "onload()
" 문자열과 ASCII 대소문자 구분 없이 일치하지 않는 경우, 반환하세요.
만약 el에 charset
속성이
있는 경우, 인코딩을
얻는 결과를 el의 charset
속성
값으로 설정하세요.
el에 charset
속성이
없거나, 인코딩을
얻는 것이 실패한 경우, encoding을 el의 노드 문서의 문서의 인코딩으로 설정하세요.
만약 el의 type이 "module
"인 경우, 이 인코딩은 무시됩니다.
classic script CORS setting을 el의 crossorigin
콘텐츠 속성의 현재 상태로 설정하세요.
module script credentials mode를 el의 crossorigin
콘텐츠 속성의 CORS 설정 속성 자격 증명 모드로 설정하세요.
cryptographic nonce를 el의 [[CryptographicNonce]] 내부 슬롯의 값으로 설정하세요.
만약 el에 integrity
속성이 있는 경우, integrity metadata를 그 속성의 값으로 설정하세요.
그렇지 않으면, integrity metadata를 빈 문자열로 설정하세요.
referrer policy를 el의 referrerpolicy
콘텐츠 속성의 현재 상태로 설정하세요.
fetch priority를 el의 fetchpriority
콘텐츠 속성의 현재 상태로 설정하세요.
parser metadata를 el이 파서에 의해 삽입된 경우 "parser-inserted
"로, 그렇지
않은 경우 "not-parser-inserted
"로 설정하세요.
options를 스크립트 가져오기 옵션으로 설정하고, 암호화 논스를 cryptographic nonce, 무결성 메타데이터를 integrity metadata, 파서 메타데이터를 parser metadata, 자격 증명 모드를 module script credentials mode, referrer policy를 referrer policy, fetch priority를 fetch priority로 설정하세요.
만약 el에 src
콘텐츠 속성이 있는 경우,
다음을 수행하세요:
만약 el의 type이 "importmap
"이라면, 요소 작업을 큐에
추가하고, DOM 조작 작업 소스에서 el을
주어진 상태로 하여 이벤트를
발생시키며 error
를 el에
전달하고, 반환하세요.
외부 import map 스크립트는 현재 지원되지 않습니다. 지원 추가에 대한 논의는 WICG/import-maps issue #235를 참조하세요.
src를 el의 src
속성 값으로
설정하세요.
만약 src가 빈 문자열인 경우, 요소 작업을 큐에 추가하고, DOM 조작 작업 소스에서 el을
주어진 상태로 하여 이벤트를
발생시키며 error
를
el에 전달하고, 반환하세요.
el의 외부 파일로부터 true로 설정하세요.
url을 URL 인코딩-파싱의 결과로 설정하세요. src와 el의 노드 문서의 상대 경로로 설정하세요.
만약 url이 실패한 경우, 요소 작업을 큐에 추가하고, DOM 조작 작업 소스에서 el을
주어진 상태로 하여 이벤트를
발생시키며 error
를
el에 전달하고, 반환하세요.
el이 잠재적으로 렌더링을 차단하고 있는 경우, 렌더링 차단을 el에서 수행하세요.
el의 로드 이벤트 지연을 true로 설정하세요.
result를 주어진 onComplete에 다음 단계로 설정하세요:
준비 완료로 표시 el을 주어진 result로 설정하세요.
el의 type을 사용하여 전환하세요:
classic
"
클래식 스크립트를 가져오기를 주어진 url, settings object, options, classic script CORS setting, encoding 및 onComplete와 함께 수행하세요.
module
"
el에 integrity
속성이 없는 경우, options의 무결성 메타데이터를
주어진 url 및 settings object와 함께 사용하여 모듈 무결성 메타데이터를
해결하세요.
외부 모듈 스크립트 그래프를 가져오기를 주어진 url, settings object, options, 및 onComplete와 함께 수행하세요.
성능 향상을 위해, 사용자 에이전트는 src
속성이
설정되자마자 (위에서 설명한 대로) el이 연결될 것이라는 희망에서, 클래식 스크립트 또는 모듈 그래프를 가져오기 시작할 수 있습니다 (그리고 이 사이에
crossorigin
속성이 변경되지 않기를 기대합니다). 어쨌든, el이 연결됨 상태가 되면, 로드는 이 단계에서 설명된 대로 시작되어야 합니다.
만약 UA가 이러한 사전 가져오기를 수행하지만 el이 연결되지 않거나, src
속성이
동적으로 변경되거나, crossorigin
속성이 동적으로 변경된 경우, UA는 그렇게 얻은 스크립트를 실행하지 않으며, 가져오기 과정은 사실상 낭비됩니다.
만약 el에 src
콘텐츠 속성이 없는 경우:
el의 type을 사용하여 전환하세요:
classic
"
클래식 스크립트 생성의 결과를 source text, settings object, base URL, 및 options을 사용하여 script로 설정하세요.
준비 완료로 표시 el을 주어진 script로 설정하세요.
module
"
el의 로드 이벤트 지연을 true로 설정하세요.
el이 잠재적으로 렌더링을 차단하는 경우:
인라인 모듈 스크립트 그래프를 가져오기를 source text, base URL, settings object, options, 및 주어진 result로 수행하세요:
요소 작업을 큐에 추가하여 네트워킹 작업 소스에서 el을 주어진 상태로 수행하고, 다음 단계를 수행하세요:
준비 완료로 표시 el을 주어진 result로 설정하세요.
이곳에서 작업을 큐에 추가하는 것은, 인라인 모듈 스크립트에 의존성이 없거나 구문 오류가 즉시 발생하더라도, 스크립트 요소를 실행 단계가 동기적으로 진행되지 않음을 의미합니다.
importmap
"
만약 el의 관련 전역 객체의 import maps 허용됨이 false인
경우, 요소 작업을 큐에 추가하고, DOM 조작 작업 소스에서
el을 주어진 상태로 하여 이벤트를 발생시키며 error
를
el에 전달하고, 반환하세요.
el의 관련 전역 객체의 import maps 허용됨을 false로 설정하세요.
result를 source text와 base URL로 주어진 import map 구문 분석 결과 생성의 결과로 설정하세요.
준비 완료로 표시 el을 주어진 result로 설정하세요.
만약 el의 type이 "classic
"이고 el에
src
속성이 있거나,
el의 type이
"module
"인 경우:
만약 el에 async
속성이 있거나 el의 강제 비동기가 true인 경우:
scripts를 el의 준비 시간 문서의 가능한 한 빨리 실행될 스크립트 세트로 설정하세요.
추가하세요 el을 scripts로.
el의 결과가 준비되었을 때 실행할 단계들을 다음으로 설정하세요:
스크립트 요소를 실행하세요 el을.
제거하세요 el을 scripts에서.
그렇지 않고, el이 파서에 의해 삽입되지 않은 경우:
scripts를 el의 준비 시간 문서의 가능한 한 빨리 순서대로 실행될 스크립트 목록으로 설정하세요.
추가하세요 el을 scripts로.
el의 결과가 준비되었을 때 실행할 단계들을 다음으로 설정하세요:
만약 scripts[0]이 el이 아닌 경우, 이 단계를 중단하세요.
scripts가 비어 있지 않고, scripts[0]의 result가
"uninitialized
"이 아닌 동안:
스크립트 요소를 실행하세요 scripts[0].
제거하세요 scripts[0]을.
그렇지 않고, el에 defer
속성이 있거나 el의 type이 "module
"인 경우:
추가하세요 el을 el의 parser document의 문서가 파싱을 완료하면 실행될 스크립트 목록에.
el의 결과가 준비되었을 때 실행할 단계들을 다음으로 설정하세요: el의 파서가 실행할 준비 완료를 true로 설정하세요. (파서는 스크립트를 실행하는 작업을 처리합니다.)
그 외의 경우:
el의 parser document의 파싱 차단 스크립트 대기 중을 el로 설정하세요.
렌더링 차단을 el에서 수행하세요.
el의 결과가 준비되었을 때 실행할 단계들을 다음으로 설정하세요: el의 파서가 실행할 준비 완료를 true로 설정하세요. (파서는 스크립트를 실행하는 작업을 처리합니다.)
그 외의 경우:
다음 모두가 true인 경우:
classic
"입니다.
다음 작업을 수행하세요:
el의 parser document의 파싱 차단 스크립트 대기 중을 el로 설정하세요.
el의 파서가 실행할 준비 완료를 true로 설정하세요. (파서는 스크립트를 실행하는 작업을 처리합니다.)
그 외의 경우, 즉시 스크립트 요소를 실행하세요 el을, 다른 스크립트들이 이미 실행 중이더라도.
각 Document
에는 파싱 차단 스크립트가 있으며, 이는
script
요소이거나
null이며, 초기값은 null입니다.
각 Document
에는 가능한 빨리 실행될 스크립트 집합이 있으며, 이는 집합으로,
script
요소들로 구성되며, 초기값은 비어 있습니다.
각 Document
에는 가능한 빨리 순서대로 실행될 스크립트 목록이 있으며, 이는 목록으로,
script
요소들로 구성되며, 초기값은 비어 있습니다.
각 Document
에는 문서 파싱이 완료되면 실행될 스크립트 목록이
있으며, 이는 목록으로,
script
요소들로 구성되며, 초기값은 비어 있습니다.
파서를 차단하는 script
요소가 다른
Document
로 이동되기 전에
해당 파서를
차단하는 경우, 해당 요소는 더 이상 파서를 차단하는 조건이 적용되지 않을 때까지 해당 파서를 차단합니다. (예:
원래 Document
에 스크립트를 차단하는 스타일 시트가
있는 경우, 스크립트가 차단하는 스타일 시트가 모두 로드될 때까지 스크립트는 계속 파서를 차단합니다.)
스크립트 요소를 실행하려면
script
요소
el을 수행합니다:
document를 el의 노드 문서로 설정합니다.
el의 준비 시간 문서가 document와 같지 않으면 반환합니다.
el에서 렌더링을 해제합니다.
만약 el의 결과가 null이면, el에서 이벤트를 발생시킵니다 그 이름은 error
이며, 반환합니다.
el이 외부
파일에서 왔거나,
el의 유형이
"module
"이면,
document의 파괴적 쓰기를 무시하는 카운터를 증가시킵니다.
el의 유형에 따라 다음을 수행합니다:
classic
"
document의 currentScript
객체에 가장 최근에 설정된 값을 oldCurrentScript로 설정합니다.
el의 루트가
섀도우 루트가 아니라면,
document의 currentScript
속성을 el로 설정합니다. 그렇지 않으면, null로 설정합니다.
이는 문서 트리 내에서
체크되지 않으며, el이 실행 전에 문서에서 제거되었을 수 있으므로, 이
경우에도 currentScript
여전히 그것을 가리킬 필요가 있습니다.
클래식 스크립트를 실행합니다. el의 결과를 사용합니다.
document의 currentScript
속성을 oldCurrentScript로 설정합니다.
module
"
확인: document의 currentScript
속성이 null입니다.
모듈 스크립트를 실행합니다. el의 결과를 사용합니다.
importmap
"
이전 단계에서 증가한 경우 document의 파괴적 쓰기를 무시하는 카운터를 감소시킵니다.
el이 외부
파일에서 왔다면,
el에서 이벤트를 발생시킵니다
그 이름은 load
입니다.
사용자 에이전트는 JavaScript를 지원할 필요가 없습니다. JavaScript 이외의 언어가 등장하여 웹 브라우저에서 유사한 광범위한 채택을 받게 되면 이 표준을 업데이트해야 합니다. 그러한
시점까지는 script
요소에 대해 정의된 처리
모델을 고려할 때, 다른 언어를 구현하는 것은 이 표준과 충돌하게 됩니다.
서버는 JavaScript 리소스에 대해 Updates to ECMAScript Media Types에 따라 text/javascript
를 사용해야 합니다. 서버는
JavaScript 리소스에 대해 다른 JavaScript MIME 유형을
사용해서는 안 되며, 비-JavaScript MIME 유형을
사용해서는 안 됩니다.
[RFC9239]
외부 JavaScript 리소스의 경우, `Content-Type
`
헤더의 MIME 유형 매개변수는 일반적으로 무시됩니다. (일부 경우 `charset
` 매개변수가 영향을 미칠 수 있습니다.) 그러나 script
요소의 type
속성에 대해서는 중요하며, 이는 JavaScript MIME 유형 본질 매치 개념을 사용합니다.
예를 들어, type
속성이
"text/javascript; charset=utf-8
"로 설정된 스크립트는 구문 분석 시 유효한 JavaScript MIME 유형임에도 불구하고 평가되지 않습니다.
또한, 외부 JavaScript 리소스의 경우, `Content-Type
` 헤더 처리에 대해 스크립트 요소 준비 알고리즘과
Fetch에 설명된 특별한 고려사항이 적용됩니다. [FETCH]
script
요소의
내용에 대한 제한이 섹션에서 설명된 다소 이상한 제한을 피하는 가장 쉽고 안전한 방법은 스크립트 내 리터럴(예: 문자열, 정규 표현식 또는 주석)에 "<!--
",
"<script
", "</script
"와 같은 ASCII 대소문자 무시 일치 항목이 나타날 때 이를 "\x3C!--
",
"\x3Cscript
", "\x3C/script
"로 항상 이스케이프 처리하는 것이며, 이러한 구문을 표현식에서 사용하는 코드를 작성하지 않는 것입니다.
이렇게 하면 이 섹션에서 언급된 제한에 의해 발생할 수 있는 함정을 완전히 피할 수 있습니다. 즉, 역사적 이유로 HTML에서
script
블록을 파싱하는 것이 다소 이상하고 직관적이지 않게 동작할 수 있습니다.
script
요소의 하위
텍스트 내용은 다음 ABNF에서 정의된 script
생산 규칙과 일치해야 하며, 이 규칙의 문자 집합은 유니코드입니다. [ABNF]
script = outer * ( comment-open inner comment-close outer )
outer = < any string that doesn 't contain a substring that matches not-in-outer >
not-in-outer = comment-open
inner = < any string that doesn 't contain a substring that matches not-in-inner >
not-in-inner = comment-close / script-open
comment-open = "<!--"
comment-close = "-->"
script-open = "<" s c r i p t tag-end
s = %x0053 ; U+0053 라틴 대문자 S
s =/ %x0073 ; U+0073 라틴 소문자 s
c = %x0043 ; U+0043 라틴 대문자 C
c =/ %x0063 ; U+0063 라틴 소문자 c
r = %x0052 ; U+0052 라틴 대문자 R
r =/ %x0072 ; U+0072 라틴 소문자 r
i = %x0049 ; U+0049 라틴 대문자 I
i =/ %x0069 ; U+0069 라틴 소문자 i
p = %x0050 ; U+0050 라틴 대문자 P
p =/ %x0070 ; U+0070 라틴 소문자 p
t = %x0054 ; U+0054 라틴 대문자 T
t =/ %x0074 ; U+0074 라틴 소문자 t
tag-end = %x0009 ; U+0009 문자 탭(tab)
tag-end =/ %x000A ; U+000A 줄 바꿈(LF)
tag-end =/ %x000C ; U+000C 양식 피드(FF)
tag-end =/ %x0020 ; U+0020 스페이스
tag-end =/ %x002F ; U+002F 슬래시(/)
tag-end =/ %x003E ; U+003E 큰따옴표(>)
script
요소가 스크립트 설명을 포함하는
경우, 아래 섹션에서 설명된 대로 요소 내용에 대한 추가 제한이 있습니다.
다음 스크립트는 이 문제를 설명합니다. 예를 들어 다음과 같이 문자열을 포함하는 스크립트를 가정해 보겠습니다:
const example = '이 문자열을 고려하십시오: <!-- <script>' ;
console. log( example);
이 문자열을 script
블록에 직접 넣으면 위의 제한 사항을 위반하게 됩니다:
< script >
const example = '이 문자열을 고려하십시오: <!-- <script>' ;
console. log( example);
</ script >
더 큰 문제는 실제로 스크립트가 이상하게 파싱된다는 것입니다: 위의 스크립트 블록은 종료되지 않습니다. 즉, 이 코드 조각의 "</script>
" 종료
태그처럼 보이는 부분은 실제로 여전히 script
블록의 일부입니다. 스크립트는 종료되지 않았기 때문에 실행되지 않으며, 마크업이 다음과 같이 생긴 경우처럼 어떻게든 실행되더라도 이 스크립트(여기 강조 표시된)는 유효한 JavaScript가
아니므로 실패할 것입니다:
< script >
const example = '이 문자열을 고려하십시오: <!-- <script>' ;
console. log( example);
</ script >
<!-- 보기에 반하여, 이것은 여전히 스크립트의 일부입니다! -->
< script >
... // 여전히 동일한 스크립트 블록입니다...
</ script >
여기에서 무슨 일이 일어나고 있냐면, 역사적 이유로
script
요소의 "<!--
" 및 "<script
" 문자열은 HTML에서 균형이 맞춰져야 파서가 블록을 닫는 것으로 간주합니다.
이 섹션의 맨 위에서 언급된 대로 문제의 문자열을 이스케이프 처리하면 이 문제를 완전히 피할 수 있습니다:
< script >
// 참고: `\x3C`는 `<`에 대한 이스케이프 시퀀스입니다.
const example = '이 문자열을 고려하십시오: \x3C!-- \x3Cscript>' ;
console. log( example);
</ script >
<!-- 이것은 단순히 스크립트 블록 사이의 주석입니다 -->
< script >
... // 이것은 새로운 스크립트 블록입니다
</ script >
이러한 시퀀스는 다음 예제와 같이 스크립트 표현식에서 자연스럽게 발생할 수 있습니다:
if ( x<!-- y) { ... }
if ( player< script ) { ... }
이러한 경우 문자들을 이스케이프 처리할 수는 없지만, 시퀀스가 발생하지 않도록 표현식을 다시 작성할 수 있습니다:
if ( x < !-- y) { ... }
if ( !-- y > x) { ... }
if ( ! ( -- y) > x) { ... }
if ( player < script) { ... }
if ( script > player) { ... }
이렇게 하면 또 다른 문제를 피할 수 있습니다: 관련된 역사적 이유로 클래식 스크립트에서 "<!--" 문자열이 실제로는 줄 주석 시작으로 처리됩니다, 마치 "//"처럼.
script
요소의 src
속성이 지정된 경우, script
요소의 내용이 있는 경우, 해당 요소의 내용에서 파생된 text
IDL
속성의 값이 다음 ABNF에서 정의된 documentation
생성 규칙과 일치해야 하며, 이 규칙의 문자 집합은 유니코드입니다. [ABNF]
documentation = * ( * ( space / tab / comment ) [ line-comment ] newline )
comment = slash star * ( not-star / star not-slash ) 1* star slash
line-comment = slash slash * not-newline
; characters
tab = %x0009 ; U+0009 문자 탭(tab)
newline = %x000A ; U+000A 줄 바꿈(LF)
space = %x0020 ; U+0020 스페이스
star = %x002A ; U+002A 별표(*)
slash = %x002F ; U+002F 슬래시(/)
not-newline = %x0000-0009 / %x000B-10FFFF
; a 스칼라 값 other than U+000A LINE FEED (LF)
not-star = %x0000-0029 / %x002B-10FFFF
; a 스칼라 값 other than U+002A ASTERISK (*)
not-slash = %x0000-002E / %x0030-10FFFF
; a 스칼라 값 other than U+002F SOLIDUS (/)
이 내용은 요소의 내용을 JavaScript 주석에 넣는 것과 같습니다.
이 요구 사항은 script
요소 내용의 구문에 대한 앞서 언급된 제한 사항에 추가로 적용됩니다.
이 기능을 통해 작성자는 외부 스크립트 파일을 참조하면서도 라이선스 정보 또는 API 정보와 같은 문서를 문서 내에 포함할 수 있습니다. 구문이 제한되어 있으므로 작성자가 유효한 스크립트처럼
보이는 것을 포함하면서도 src
속성을 제공하지 않도록 방지합니다.
< script src = "cool-effects.js" >
// 인스턴스를 생성하려면:
// var e = new Effect();
// .play로 효과를 시작하고, .stop으로 중지합니다:
// e.play();
// e.stop();
</ script >
script
요소와 XSLT의 상호작용이 섹션은 비규범적입니다.
이 명세는 script
요소와 XSLT의 상호작용을
정의하지 않습니다. 그러나 실제로 이를 정의하는 다른 명세가 없는 경우, 기존 구현을 기반으로 한 구현자들을 위한 몇 가지 지침을 제공합니다:
<?xml-stylesheet?>
처리 명령에 의해 XSLT 변환 프로그램이 실행되고, 브라우저가 DOM으로 직접 변환을 수행하는 경우, XSLT 프로세서에
의해 생성된 script
요소는 파서 문서를 올바르게 설정해야 하며, 문서 순서에 따라 ( defer
또는 async
로 표시된 스크립트를 제외하고) 변환이
이루어지는 동안 즉시 실행되어야 합니다.
XSLTProcessor
의 transformToDocument()
메서드는 브라우징 컨텍스트가 없는 Document
객체에 요소를 추가하며,
따라서 그들이 생성한 script
요소는 스크립트 준비 알고리즘에서
이미 시작됨이 true로 설정되어야 하며, 실행되지 않아야 합니다 (스크립팅이 비활성화됨).
그러나 이러한 script
요소는
여전히 파서 문서가 설정되어야 하며, async
IDL 속성은 async
속성이 없는 경우 false를
반환해야 합니다.
XSLTProcessor
의 transformToFragment()
메서드는 document.createElementNS()
를
사용하여 수동으로 생성된 조각과 동등한 조각을 생성해야 합니다. 예를 들어, script
요소를 null 파서 문서와 이미 시작됨이 false로 설정된 상태로 생성하여, 문서에 삽입될 때 실행되도록 해야 합니다.
첫 번째 두 경우와 마지막 경우의 주요 차이점은 첫 번째 두 경우는 Document
에서
작업하고 마지막 경우는 조각에서 작업한다는 것입니다.
noscript
요소
현재 모든 엔진에서 지원됨.
head
요소 안에, 상위 noscript
요소가 없을 때.
noscript
요소가 없을
때.
head
요소 내에서: 0개 이상의
link
요소, 0개 이상의 style
요소, 0개 이상의 meta
요소를 임의의 순서로 포함할 수
있습니다.
head
요소 외부에서: 투명한 콘텐츠 모델을 따르지만, noscript
요소의 하위
요소가 없어야 합니다.
HTMLElement
을 사용합니다.
noscript
요소는 스크립팅이 활성화된 경우 아무것도 나타내지 않으며, 스크립팅이 비활성화된 경우 자식 요소를 나타냅니다. 이 요소는
스크립팅을 지원하는 사용자 에이전트와 지원하지 않는 사용자 에이전트에 대해 서로 다른 마크업을 표시하는 데 사용됩니다.
HTML 문서에서 사용될 때, 허용되는 콘텐츠 모델은 다음과 같습니다:
head
요소에서,
스크립트가 비활성화된
noscript
요소의
경우
head
요소에서,
스크립트가 활성화된
noscript
요소의
경우
noscript
요소는
텍스트만 포함해야 하며, noscript
요소를
context 요소로 하고
그 텍스트 내용을 input으로 하여
HTML 조각
파싱 알고리즘을
실행한 결과가
link
,
style
,
meta
요소로만 구성된 노드
목록이 되며,
이 목록이 noscript
요소의 자식 요소로서 적합한지
확인되어야 하며, 파싱 오류가 발생하지 않아야 합니다.
head
요소 외부에서,
스크립트가 비활성화된
noscript
요소의
경우
noscript
요소의 내용 모델은
투명이며, 추가로
noscript
요소는
조상 요소로 noscript
요소를 가질 수 없습니다
(즉, noscript
요소는 중첩될 수 없습니다).
head
요소 외부에서,
스크립트가 활성화된
noscript
요소의
경우
noscript
요소는
텍스트만 포함해야 하며, 그 텍스트는 아래 알고리즘을 실행하여 noscript
요소와
script
요소가 없는
적합한 문서가 되고,
알고리즘의 어느 단계에서도 예외가 발생하지 않으며
HTML 파서가
파싱 오류를 표시하지 않도록 하는 텍스트여야 합니다:
이 모든 복잡한 작업은 역사적인 이유로 인해 noscript
요소가 HTML 구문 분석기에 의해 스크립팅이 활성화되었는지 여부에 따라 다르게 처리되기
때문에 필요합니다.
noscript
요소는 XML 문서에서 사용되어서는 안 됩니다.
noscript
요소는 HTML 문법에서만 효과가 있으며, XML 문법에서는 효과가 없습니다. 이는 스크립트가 활성화되었을 때 파서가 꺼져 요소의 내용을 순수 텍스트로
처리하고 실제 요소로 처리하지 않기 때문입니다. XML은 이를 수행할 수 있는 메커니즘을 정의하지 않습니다.
noscript
요소는 다른 요구
사항이 없습니다. 특히 noscript
요소의 자식 요소는
스크립팅이 활성화된 경우에도 양식 제출, 스크립팅 등에 대한 예외가 적용되지 않습니다.
다음 예제에서는 noscript
요소를
사용하여 스크립트의 대체 수단을 제공합니다.
< form action = "calcSquare.php" >
< p >
< label for = x > Number</ label > :
< input id = "x" name = "x" type = "number" >
</ p > < script >
var x = document. getElementById( 'x' );
var output = document. createElement( 'p' );
output. textContent = 'Type a number; it will be squared right then!' ;
x. form. appendChild( output);
x. form. onsubmit = function () { return false ; }
x. oninput = function () {
var v = x. valueAsNumber;
output. textContent = v + ' squared is ' + v * v;
};
</ script > < noscript >
< input type = submit value = "Calculate Square" >
</ noscript > </ form >
스크립트가 비활성화된 경우, 계산을 서버 측에서 수행하는 버튼이 나타납니다. 스크립트가 활성화된 경우, 값은 실시간으로 계산됩니다.
noscript
요소는
다소 강제적인 방법입니다. 때로는 스크립트가 활성화되어 있지만 페이지의 스크립트가 실패할 수 있습니다. 이러한 이유로 noscript
요소를
사용하는 것보다, 스크립트가 페이지를 스크립트 없는 상태에서 스크립트가 있는 상태로 동적으로 변경하도록 설계하는 것이 더 좋습니다. 다음 예제와 같이:
< form action = "calcSquare.php" >
< p >
< label for = x > Number</ label > :
< input id = "x" name = "x" type = "number" >
</ p > < input id = "submit" type = submit value = "Calculate Square" >
< script >
var x = document. getElementById( 'x' );
var output = document. createElement( 'p' );
output. textContent = 'Type a number; it will be squared right then!' ;
x. form. appendChild( output);
x. form. onsubmit = function () { return false ; }
x. oninput = function () {
var v = x. valueAsNumber;
output. textContent = v + ' squared is ' + v * v;
}; var submit = document. getElementById( 'submit' );
submit. parentNode. removeChild( submit);
</ script > </ form >
template
요소
현재 모든 엔진에서 지원됨.
현재 모든 엔진에서 지원됨.
colgroup
요소의 하위
요소로, span
속성이 없는 경우.
shadowrootmode
— 선언적 shadow root 스트리밍을 활성화합니다.
shadowrootdelegatesfocus
— 선언적 shadow root에 포커스 위임을
설정합니다.
shadowrootclonable
— 선언적 shadow root에 복제 가능을 설정합니다.
shadowrootserializable
— 선언적 shadow root에 직렬화 가능을 설정합니다.
[Exposed =Window ]
interface HTMLTemplateElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute DocumentFragment content ;
[CEReactions ] attribute DOMString shadowRootMode ;
[CEReactions ] attribute boolean shadowRootDelegatesFocus ;
[CEReactions ] attribute boolean shadowRootClonable ;
[CEReactions ] attribute boolean shadowRootSerializable ;
};
template
요소는 스크립트를 통해
문서에 복제하여 삽입할 수 있는 HTML 조각을 선언하는 데 사용됩니다.
렌더링 시 template
요소는
아무것도 나타내지 않습니다.
shadowrootmode
콘텐츠 속성은 다음 키워드와 상태를 가진 열거된 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
open
| open | template 요소는 열린 선언적 shadow root를 나타냅니다. |
closed
| closed | template 요소는 닫힌 선언적 shadow root를 나타냅니다. |
shadowrootmode
속성의 유효하지 않은 값 기본값과 누락된 값 기본값은 모두 none 상태입니다.
shadowrootdelegatesfocus
콘텐츠 속성은 부울 속성입니다.
shadowrootclonable
콘텐츠 속성은 부울 속성입니다.
shadowrootserializable
콘텐츠 속성은 부울 속성입니다.
template
요소의 template 콘텐츠는 요소 자체의 자식이 아닙니다.
DOM 조작의 결과로 template
요소에 텍스트
노드 및 요소 노드가 포함될 수 있지만, 이는 template
요소의 콘텐츠 모델이
없음으로 정의되어 있기 때문에 콘텐츠 모델
위반입니다.
예를 들어, 다음 문서를 고려해 보십시오:
<!doctype html>
< html lang = "en" >
< head >
< title > Homework</ title >
< body >
< template id = "template" >< p > Smile!</ p ></ template >
< script >
let num = 3 ;
const fragment = document. getElementById( 'template' ). content. cloneNode( true );
while ( num-- > 1 ) {
fragment. firstChild. before( fragment. firstChild. cloneNode( true ));
fragment. firstChild. textContent += fragment. lastChild. textContent;
}
document. body. appendChild( fragment);
</ script >
</ html >
p
요소는 template
의 자식이
아니며, DOM의 DocumentFragment
의
자식입니다.
스크립트가 appendChild()
를
호출하면 template
요소에 자식이 추가됩니다. 그러나 이는 template
요소의
콘텐츠 모델 위반입니다.
template.content
현재 모든 엔진에서 지원됨.
template 콘텐츠를 반환합니다
(DocumentFragment
).
각 template
요소는
DocumentFragment
객체와 연결된 template 콘텐츠를 가집니다. template 콘텐츠는 적합성 요구 사항이
없습니다. template
요소가 생성될 때,
사용자 에이전트는 template 콘텐츠를 설정하기 위해 다음
단계를 실행해야 합니다:
doc을 template
요소의 노드 문서의 적합한 템플릿 콘텐츠 소유 문서로 설정합니다.
doc을 DocumentFragment
객체로 설정합니다. 이 객체의 노드 문서는
doc이고 호스트는 template
요소입니다.
새로 생성된 DocumentFragment
객체를 template 콘텐츠로 설정합니다.
document
doc의 적합한 템플릿 콘텐츠 소유 문서는 다음 알고리즘에 의해 반환된 document
입니다:
doc이 이 알고리즘에 의해 생성되지 않은 document
라면:
doc에 연결된 비활성 템플릿 문서가 아직 없다면:
doc을 doc의 연결된 비활성 템플릿 문서로 설정합니다.
이 알고리즘에 의해 생성되지 않은 각 document
는
template 콘텐츠를 소유하는 프록시로 작동할
단일 document
를 얻습니다. 따라서 브라우징 컨텍스트에 없으므로 비활성 상태를 유지합니다
(예: 스크립트가 실행되지 않음). 한편, 이 알고리즘에 의해 생성된 document
객체 내부의 template
요소는 콘텐츠에 대해 동일한 소유자를 재사용합니다.
doc을 반환합니다.
template
요소의 채택 단계(node 및 oldDocument를 매개변수로 사용)에서 실행해야
하는 단계는
다음과 같습니다:
doc을 node의 노드 문서의 적합한 템플릿 콘텐츠 소유 문서로 설정합니다.
node의 template
콘텐츠(DocumentFragment
객체)를 doc에 채택합니다.
content
getter 단계는 template 콘텐츠가 ShadowRoot
노드가 아닌 경우 template
의 template 콘텐츠를 반환하는 것입니다. 그렇지 않으면
null을 반환합니다.
shadowRootMode
IDL 속성은 shadowrootmode
콘텐츠 속성을 알려진 값으로만
제한하여 반영해야 합니다.
shadowRootDelegatesFocus
IDL 속성은 shadowrootdelegatesfocus
콘텐츠 속성을 반영해야 합니다.
shadowRootClonable
IDL 속성은 shadowrootclonable
콘텐츠 속성을 반영해야 합니다.
shadowRootSerializable
IDL 속성은 shadowrootserializable
콘텐츠 속성을 반영해야 합니다.
template
요소
node의 복사본 copy를 복제할 때 실행되는 복제 단계는 다음과 같습니다:
호출 중인 복제 알고리즘에서 clone children flag가 설정되지 않은 경우, 반환합니다.
copied contents는 node의 template 콘텐츠의 모든 자식을 복제한 결과입니다. 이때 document는 copy의 template 콘텐츠의 노드 문서로 설정되며, clone children flag가 설정됩니다.
copied contents를 copy의 template 콘텐츠에 추가합니다.
이 예제에서는 스크립트를 사용하여 데이터 구조에서 데이터를 가져와 <template> 요소를 사용하여 테이블의 4열을 채웁니다. 이 방법은 구조를 수동으로 생성하는 대신에 마크업에서 구조를 제공합니다.
<!DOCTYPE html>
< html lang = 'en' >
< title > Cat data</ title >
< script >
// Data is hard-coded here, but could come from the server
var data = [
{ name: 'Pillar' , color: 'Ticked Tabby' , sex: 'Female (neutered)' , legs: 3 },
{ name: 'Hedral' , color: 'Tuxedo' , sex: 'Male (neutered)' , legs: 4 },
];
</ script >
< table >
< thead >
< tr >
< th > Name < th > Color < th > Sex < th > Legs
</ thead >
< tbody >
< template id = "row" >
< tr >< td >< td >< td >< td >
</ template >
</ table >
< script >
var template = document. querySelector( '#row' );
for ( var i = 0 ; i < data. length; i += 1 ) {
var cat = data[ i];
var clone = template. content. cloneNode( true );
var cells = clone. querySelectorAll( 'td' );
cells[ 0 ]. textContent = cat. name;
cells[ 1 ]. textContent = cat. color;
cells[ 2 ]. textContent = cat. sex;
cells[ 3 ]. textContent = cat. legs;
template. parentNode. appendChild( clone);
}
</ script >
이 예제에서는 cloneNode()
를
사용하여 template
의 콘텐츠를
복제합니다. 이와 동등하게 document.importNode()
를
사용할 수 있습니다. 이 두 API의 유일한 차이점은 노드 문서가 업데이트되는
시점입니다: cloneNode()
를
사용하면 노드가 appendChild()
로
추가될 때 업데이트됩니다. document.importNode()
를
사용하면 노드가 복제될 때 업데이트됩니다.
template
요소와
XSLT 및 XPath의 상호 작용이 섹션은 비규범적입니다.
이 명세서는 XSLT 및 XPath가 template
요소와 어떻게 상호작용하는지 정의하지 않습니다. 그러나 이를 실제로 정의하는 다른 명세가 없는 경우,
구현자를 위한 몇 가지 지침이 있으며, 이는 이 명세서에 설명된 다른 처리 방식과 일관되도록 의도되었습니다:
이 명세서에 설명된 대로 작동하는
XML 파서를 기반으로 한 XSLT 프로세서는 template
요소가 변환을 위해 template
콘텐츠를 후손 요소로 포함하고 있는 것처럼 작동해야 합니다.
DOM을 출력하는 XSLT 프로세서는 template
요소에
들어갈 노드가 대신 요소의 template 콘텐츠에
배치되도록 해야 합니다.
이 명세서에 설명된 HTML 파서 또는 XML 파서를 사용하여 구문 분석된 document
에 대해 XPath DOM API를 사용한 XPath
평가에서는
template 콘텐츠를 무시해야 합니다.
slot
요소모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
name
— 쉐도우 트리 슬롯의 이름
[Exposed =Window ]
interface HTMLSlotElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
sequence <Node > assignedNodes (optional AssignedNodesOptions options = {});
sequence <Element > assignedElements (optional AssignedNodesOptions options = {});
undefined assign ((Element or Text )... nodes );
};
dictionary AssignedNodesOptions {
boolean flatten = false ;
};
slot
요소는 슬롯을 정의합니다. 주로 쉐도우 트리에서 사용됩니다. slot
요소는 할당된 노드가 있다면 해당 노드를 나타내고, 그렇지 않으면 콘텐츠를 나타냅니다.
name
콘텐츠 속성은 문자열 값을 포함할 수
있습니다. 이는 슬롯의 이름을 나타냅니다.
name
속성은 다른 요소에 슬롯을 할당하는 데 사용됩니다. slot
요소에 name
속성이 있으면 이름이 지정된 슬롯이 생성되며, 해당 요소가 slot
속성을 가지고 그 값이 name
속성의 값과 일치하는 경우, 해당 요소는 쉐도우 트리의 자식이 되고, 그 루트의 호스트는 해당
slot
속성값을 가집니다.
slot.name
모든 현재 엔진에서 지원됨.
slot.assignedNodes()
모든 현재 엔진에서 지원됨.
slot.assignedNodes({ flatten: true })
slot
요소에 대해서도 동일하게 수행하며, 더
이상 slot
요소가 남아 있지 않을 때까지
계속됩니다.
slot.assignedElements()
HTMLSlotElement/assignedElements
모든 현재 엔진에서 지원됨.
slot.assignedElements({ flatten: true })
assignedNodes({ flatten: true })
와
동일하며, 요소로만 제한합니다.
slot.assign(...nodes)
slot의 수동 할당된 노드를 주어진 nodes로 설정합니다.
name
IDL
속성은 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
slot
요소에는 수동으로 할당된 노드가 있으며, 이는 assign()
으로 설정된 정렬된 세트로, 이
세트는 처음에 비어 있습니다.
수동으로 할당된 노드 세트는 슬롯 가능 항목에 대한 약한 참조를 사용하여 구현할 수 있습니다. 이 세트는 스크립트에서 직접 접근할 수 없기 때문입니다.
assignedNodes(options)
메서드 단계는 다음과 같습니다:
this를 사용하여 평평해진 슬롯 가능 항목 찾기의 결과를 반환합니다.
assignedElements(options)
메서드 단계는 다음과 같습니다:
만약 options["flatten
"]
값이 false이면, this의 할당된 노드를
반환하되, 요소
노드로만 제한합니다.
this를
사용하여 평평해진 슬롯 가능 항목 찾기의 결과를 반환하되, 요소
노드로만 제한합니다.
모든 현재 엔진에서 지원됨.
assign(...nodes)
메서드 단계는 다음과 같습니다:
nodesSet을 새로운 정렬된 세트로 설정합니다.
각 node의 nodes에 대해:
트리용 슬롯 가능 항목 할당을 this의 루트에 대해 실행합니다.
canvas
요소
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
a
요소, img
요소와 usemap
속성, button
요소,
input
요소 중 type
속성이
체크박스 또는
라디오
버튼 상태인 경우와 input
요소의 버튼, 및 select
요소의 다중 선택
속성 또는 표시 크기가 1보다 큰 경우는 예외입니다.
width
—
수평 크기
height
—
수직 크기
typedef (CanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext ) RenderingContext ;
[Exposed =Window ]
interface HTMLCanvasElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
RenderingContext ? getContext (DOMString contextId , optional any options = null );
USVString toDataURL (optional DOMString type = "image/png", optional any quality );
undefined toBlob (BlobCallback _callback , optional DOMString type = "image/png", optional any quality );
OffscreenCanvas transferControlToOffscreen ();
};
callback BlobCallback = undefined (Blob ? blob );
canvas
요소는 스크립트에 해상도 종속 비트맵
캔버스를 제공하며,
이를 사용하여 그래프, 게임 그래픽, 예술 또는 기타 시각적 이미지를 즉석에서 렌더링할 수 있습니다.
작성자는 보다 적합한 요소가 있을 때 canvas
요소를 문서에서 사용하지 않아야
합니다. 예를 들어, 페이지 제목을 렌더링하는 데 canvas
요소를 사용하는 것은 부적절합니다:
원하는 제목의 표현이 그래픽적으로 강렬한 경우, 적절한 요소로 마크업하고(일반적으로 h1
)
그런 다음 CSS와 shadow trees와 같은 지원 기술을 사용하여 스타일을 지정해야 합니다.
작성자가 canvas
요소를 사용할 때,
canvas
비트맵과 본질적으로 동일한
기능이나 목적을 사용자에게 전달하는 콘텐츠도 제공해야 합니다.
이 콘텐츠는 canvas
요소의 내용으로
배치될 수 있습니다. canvas
요소의
내용(있는 경우)은 요소의 대체 콘텐츠입니다.
인터랙티브한 시각 매체에서 canvas
요소에
대해 스크립팅이 활성화되어 있고, canvas
요소 지원이 활성화된 경우,
canvas
요소는 요소의 비트맵인
동적으로 생성된 이미지로 구성된 내장
콘텐츠를 나타냅니다.
비인터랙티브, 정적 시각 매체에서 canvas
요소가 이전에 렌더링 컨텍스트와
연관된 경우(예: 페이지가 인터랙티브한 시각 매체에서 열리고 현재 인쇄 중이거나 페이지 레이아웃 과정에서 실행된 스크립트가 요소에 그림을 그린 경우), canvas
요소는 요소의 현재 비트맵과
크기를 가진 내장 콘텐츠를 나타냅니다. 그렇지 않으면, 요소는 대신 대체 콘텐츠를 나타냅니다.
비시각 매체에서는 물론, canvas
요소에
대해 스크립팅이 비활성화되었거나 canvas
요소 지원이 비활성화된 경우에는,
canvas
요소는 대신 대체 콘텐츠를 나타냅니다.
canvas
요소가 내장 콘텐츠를 나타낼 때, 사용자는 여전히 canvas
요소의 자손(대체 콘텐츠 내)을 포커스할 수 있습니다. 요소가 포커스된 경우, 해당 요소는 키보드 상호작용 이벤트의 대상이 됩니다(비록 요소 자체가 보이지 않더라도).
이를 통해 작성자는 인터랙티브한 캔버스를 키보드로 접근 가능하게 만들 수 있습니다: 작성자는 인터랙티브한 영역과 대체 콘텐츠의 포커스 가능한 영역 간에 일대일 매핑을 만들어야 합니다. (포커스는 마우스 상호작용 이벤트에는 영향을 미치지 않습니다.) [UIEVENTS]
가장 가까운 조상 canvas
요소가 렌더링 중이며 내장 콘텐츠를 나타내는 요소는 관련
캔버스 대체 콘텐츠로 사용되고 있는 요소입니다.
canvas
요소에는 요소의 비트맵 크기를
제어하는 두 가지 속성인 width
와
height
가 있습니다. 이러한
속성은 지정될 경우 유효한 비음수 정수
값을 가져야 합니다. 비음수 정수를 구문 분석하는 규칙이 숫자 값을 얻는 데 사용되어야 합니다. 속성이 없거나 값을 구문 분석하는 중 오류가 발생하면 기본값이 대신 사용됩니다. width
속성의 기본값은 300이고, height
속성의 기본값은 150입니다.
width
또는 height
속성의 값을 설정할 때, canvas
요소의 컨텍스트 모드가 플레이스홀더로 설정되어 있는 경우,
사용자 에이전트는 "InvalidStateError
" DOMException
을
발생시키고 속성의 값을 변경하지 않아야 합니다.
canvas
요소가 내장 콘텐츠를 나타내는 경우, 요소의 자연스러운 크기는 요소의 비트맵 크기와 동일합니다.
사용자 에이전트는 canvas
및 그 렌더링
컨텍스트의 비트맵에 대해 좌표 공간 단위당 이미지 데이터 한 픽셀로 구성된 정사각형 픽셀 밀도를 사용해야 합니다.
canvas
요소는
스타일 시트에 의해 임의로 크기를 조정할 수 있으며, 이때 비트맵은 'object-fit' CSS
속성에 따릅니다.
canvas
요소의 비트맵, ImageBitmap
객체의 비트맵 및 CanvasRenderingContext2D
와
ImageBitmapRenderingContext
객체와 같은 일부 렌더링 컨텍스트의 비트맵은 원본-클린(origin-clean) 플래그를 가지며, 이 플래그는 true 또는
false로 설정될 수 있습니다. canvas
요소 또는 ImageBitmap
객체가 생성될 때, 해당 비트맵의
원본-클린 플래그는 true로
설정되어야 합니다.
canvas
요소는 렌더링 컨텍스트를 바인딩할 수
있습니다. 처음에는 바인딩된 렌더링 컨텍스트가 없습니다. 렌더링 컨텍스트가 있는지 여부와 어떤 종류의 렌더링 컨텍스트인지 추적하기 위해, canvas
요소는 캔버스 컨텍스트 모드도 가지며, 이는 처음에는 없음(none)이지만, 이 사양에 정의된 알고리즘에 의해 플레이스홀더(placeholder), 2d, bitmaprenderer, webgl, webgl2 또는 webgpu로 변경될 수 있습니다.
캔버스 컨텍스트 모드가 없음(none)일 때, canvas
요소에는 렌더링 컨텍스트가 없으며,
비트맵은 투명한 검정색이어야 하며 자연 너비는 요소의 width
속성의 숫자 값과 같아야 하고, 자연 높이는 요소의 height
속성의 숫자 값과 같아야 하며, 이
값들은 CSS
픽셀로 해석되며, 속성이 설정, 변경 또는 제거될 때 업데이트됩니다.
캔버스 컨텍스트 모드가 플레이스홀더(placeholder)일 때, canvas
요소에는 렌더링 컨텍스트가 없습니다.
이 요소는 OffscreenCanvas
객체의
플레이스홀더 역할을 하며, OffscreenCanvas
객체의 렌더링 컨텍스트에 의해 canvas
요소의 내용이 업데이트됩니다.
canvas
요소가 내장 콘텐츠를 나타낼 때, 이 요소는
요소의 자연 너비, 자연 높이 및 요소의
비트맵으로 구성된 페인트 소스를 제공합니다.
width
및 height
콘텐츠 속성이 설정, 제거,
변경되거나 이미 가지고 있는 값으로 중복 설정될 때마다, 사용자 에이전트는 canvas
요소의 컨텍스트 모드에 해당하는 다음
표의 작업을 수행해야 합니다.
작업 |
|
---|---|
WebGL 사양에서 정의된 동작을 따릅니다. [WEBGL] |
|
WebGPU에서 정의된 동작을 따릅니다. [WEBGPU] |
|
컨텍스트의 비트맵 모드가 빈(blank)으로 설정되어 있는 경우,
|
|
아무 것도 하지 않습니다. |
|
아무 것도 하지 않습니다. |
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
width
와 height
IDL
속성은 동일한 이름을 가진 각각의 콘텐츠 속성을 반영해야 하며, 기본값도 동일합니다.
context = canvas.getContext(contextId [, options ])
모든 현재 엔진에서 지원됩니다.
캔버스에서 그리기 API를 노출하는 객체를 반환합니다. contextId는 원하는 API를 지정합니다: "2d
", "bitmaprenderer
",
"webgl
",
"webgl2
", 또는
"webgpu
".
options는 해당 API에 의해 처리됩니다.
이 사양에서는 "2d
" 및
"bitmaprenderer
"
컨텍스트를 정의합니다. WebGL 사양은 "webgl
" 및
"webgl2
"
컨텍스트를 정의합니다. WebGPU는 "webgpu
"
컨텍스트를 정의합니다. [WEBGL] [WEBGPU]
contextId가 지원되지 않거나, 캔버스가 이미 다른 컨텍스트 유형으로 초기화된 경우(예: "webgl
" 컨텍스트를
가져온 후에 "2d
" 컨텍스트를
가져오려고 할 때) null을 반환합니다.
canvas
요소의 getContext(contextId, options)
메서드를 호출할 때, 다음
단계를 실행해야 합니다:
options가 객체가 아닌 경우, options를 null로 설정합니다.
options를 JavaScript 값으로 변환한 결과로 설정합니다.
이 canvas
요소의 캔버스 컨텍스트
모드와 contextId에 해당하는 표의 셀에 있는 단계를 실행합니다:
none | 2d | bitmaprenderer | webgl 또는 webgl2 | webgpu | placeholder | |
---|---|---|---|---|---|---|
"2d "
|
| 이 메서드가 동일한 첫 번째 인수로 마지막으로 호출되었을 때 반환된 동일한 객체를 반환합니다. | null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | "InvalidStateError " DOMException 을
발생시킵니다.
|
"bitmaprenderer "
|
| null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 마지막으로 호출되었을 때 반환된 동일한 객체를 반환합니다. | null을 반환합니다. | null을 반환합니다. | "InvalidStateError " DOMException 을
발생시킵니다.
|
"webgl " 또는 "webgl2 ", 현재 구성에서 사용자가 WebGL 기능을 지원하는 경우
| null을 반환합니다. | null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 마지막으로 호출되었을 때 반환된 동일한 객체를 반환합니다. | null을 반환합니다. | "InvalidStateError " DOMException 을
발생시킵니다.
| |
"webgpu ", 현재 구성에서 사용자가 WebGPU 기능을 지원하는 경우
| null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 마지막으로 호출되었을 때 반환된 동일한 객체를 반환합니다. | "InvalidStateError " DOMException 을
발생시킵니다.
| |
지원되지 않는 값* | null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | "InvalidStateError " DOMException 을
발생시킵니다.
|
* 예를 들어, 그래픽 하드웨어의 능력이 소진되고 소프트웨어 대체 구현이 없는 경우의 "webgl
" 또는
"webgl2
"
값.
url = canvas.toDataURL([ type [, quality ] ])
모든 현재 엔진에서 지원됩니다.
캔버스의 이미지를 위한 data:
URL을 반환합니다.
첫 번째 인수는 제공된 경우 반환될 이미지의 형식을 제어합니다(예: PNG 또는 JPEG). 기본값은 "image/png
"이며, 주어진 형식이 지원되지 않는 경우에도 해당
형식이 사용됩니다. 두 번째 인수는 가변 품질을 지원하는 이미지 형식(예: "image/jpeg
")인 경우 적용되며, 0.0에서 1.0까지의
범위 내의 숫자로 결과 이미지에 대한 원하는 품질 수준을 나타냅니다.
"image/png
"이 아닌 형식을 사용하려는 경우, 반환된
문자열이 "data:image/png,
" 또는 "data:image/png;
" 중 하나로 시작하는지 확인하여 이미지가 요청된 형식으로 실제로
반환되었는지 확인할 수 있습니다. 그렇다면, 이미지는 PNG이며, 요청된 형식이 지원되지 않았음을 의미합니다. (예외는 캔버스에 높이 또는 너비가 없는 경우로, 이 경우 결과는 단순히
"data:,
"일 수 있습니다.)
canvas.toBlob(callback [, type [, quality ] ])
모든 현재 엔진에서 지원됩니다.
캔버스에 포함된 이미지를 나타내는 파일을 나타내는 Blob
객체를 생성하고 해당 객체에 대한 핸들을 사용하여 콜백을 호출합니다.
두 번째 인수는 제공된 경우 반환될 이미지의 형식을 제어합니다(예: PNG 또는 JPEG). 기본값은 "image/png
"이며, 주어진 형식이 지원되지 않는 경우에도
해당 형식이 사용됩니다. 세 번째 인수는 가변 품질을 지원하는 이미지 형식(예: "image/jpeg
")인 경우 적용되며, 0.0에서
1.0까지의 범위 내의 숫자로 결과 이미지에 대한 원하는 품질 수준을 나타냅니다.
canvas.transferControlToOffscreen()
HTMLCanvasElement/transferControlToOffscreen
모든 현재 엔진에서 지원됩니다.
OffscreenCanvas
객체를 새로
생성하여 반환합니다. 이 객체는 canvas
요소를
플레이스홀더로 사용합니다. 일단 canvas
요소가 OffscreenCanvas
객체의
플레이스홀더가 되면, 자연 크기를 더 이상 변경할 수 없으며 렌더링 컨텍스트를 가질 수 없습니다. 플레이스홀더 캔버스의 내용은 OffscreenCanvas
객체의 관련 에이전트의 이벤트 루프의 렌더링 업데이트 단계에서 업데이트됩니다.
toDataURL(type, quality)
메서드는 호출되면 다음 단계들을
실행해야 합니다:
이 canvas
요소의
비트맵의 origin-clean 플래그가 false로 설정되어 있으면, "SecurityError
" DOMException
을
발생시킵니다.
이 canvas
요소의
비트맵에 픽셀이 없으면(즉, 가로 또는 세로 크기가 0인 경우) 문자열 "data:,
"을 반환합니다. (이는 최단 data:
URL이며, text/plain
리소스에서 빈 문자열을
나타냅니다.)
file을 이 canvas
요소의 비트맵을 파일로 직렬화한 결과로 설정하고, type과
quality가 주어진 경우 이를 전달합니다.
file이 null이면 "data:,
"을 반환합니다.
toBlob(callback, type, quality)
메서드는 호출되면 다음 단계들을 실행해야 합니다:
이 canvas
요소의
비트맵의 origin-clean 플래그가 false로 설정되어 있으면, "SecurityError
" DOMException
을
발생시킵니다.
result를 null로 설정합니다.
이 canvas
요소의
비트맵에 픽셀이 있으면(즉, 가로 또는 세로 크기가 0이 아닌 경우), result를 이 canvas
요소의 비트맵의
복사본으로 설정합니다.
다음 단계를 병렬로 실행합니다:
result가 null이 아닌 경우 result를 type과 quality가 주어진 경우 이를 사용하여 result를 파일로 직렬화합니다.
캔버스 blob 직렬화 작업 소스
에서 요소 작업을 큐에 넣고 이
canvas
요소에 대해 다음 단계를 실행합니다:
result가 null이 아닌 경우, result를 이 canvas
요소의 관련
영역에서 새로 생성된 Blob
객체로 설정하고, result를 나타냅니다. [FILEAPI]
콜백 함수를 호출합니다 « result
»와 "보고서
"를 사용하여.
transferControlToOffscreen()
메서드는 호출되면 다음 단계들을 실행해야 합니다:
이 canvas
요소의 컨텍스트 모드가
없음으로 설정되어 있지 않으면 "InvalidStateError
" DOMException
을
발생시킵니다.
offscreenCanvas를 이 canvas
요소의 width
및 height
콘텐츠 속성 값과
동일한 크기로 새로 생성된 OffscreenCanvas
객체로
설정합니다.
offscreenCanvas의 플레이스홀더 canvas
요소를 이 canvas
요소에 대한 약한
참조로 설정합니다.
offscreenCanvas를 반환합니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
typedef (HTMLImageElement or
SVGImageElement ) HTMLOrSVGImageElement ;
typedef (HTMLOrSVGImageElement or
HTMLVideoElement or
HTMLCanvasElement or
ImageBitmap or
OffscreenCanvas or
VideoFrame ) CanvasImageSource ;
enum PredefinedColorSpace { " srgb " , " display-p3 " };
enum CanvasFillRule { " nonzero " , " evenodd " };
dictionary CanvasRenderingContext2DSettings {
boolean alpha = true ;
boolean desynchronized = false ;
PredefinedColorSpace colorSpace = "srgb";
boolean willReadFrequently = false ;
};
enum ImageSmoothingQuality { " low " , " medium " , " high " };
[Exposed =Window ]
interface CanvasRenderingContext2D {
// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas ;
CanvasRenderingContext2DSettings getContextAttributes ();
};
CanvasRenderingContext2D includes CanvasState ;
CanvasRenderingContext2D includes CanvasTransform ;
CanvasRenderingContext2D includes CanvasCompositing ;
CanvasRenderingContext2D includes CanvasImageSmoothing ;
CanvasRenderingContext2D includes CanvasFillStrokeStyles ;
CanvasRenderingContext2D includes CanvasShadowStyles ;
CanvasRenderingContext2D includes CanvasFilters ;
CanvasRenderingContext2D includes CanvasRect ;
CanvasRenderingContext2D includes CanvasDrawPath ;
CanvasRenderingContext2D includes CanvasUserInterface ;
CanvasRenderingContext2D includes CanvasText ;
CanvasRenderingContext2D includes CanvasDrawImage ;
CanvasRenderingContext2D includes CanvasImageData ;
CanvasRenderingContext2D includes CanvasPathDrawingStyles ;
CanvasRenderingContext2D includes CanvasTextDrawingStyles ;
CanvasRenderingContext2D includes CanvasPath ;
interface mixin CanvasState {
// state
undefined save (); // push state on state stack
undefined restore (); // pop state stack and restore state
undefined reset (); // reset the rendering context to its default state
boolean isContextLost (); // return whether context is lost
};
interface mixin CanvasTransform {
// transformations (default transform is the identity matrix)
undefined scale (unrestricted double x , unrestricted double y );
undefined rotate (unrestricted double angle );
undefined translate (unrestricted double x , unrestricted double y );
undefined transform (unrestricted double a , unrestricted double b , unrestricted double c , unrestricted double d , unrestricted double e , unrestricted double f );
[NewObject ] DOMMatrix getTransform ();
undefined setTransform (unrestricted double a , unrestricted double b , unrestricted double c , unrestricted double d , unrestricted double e , unrestricted double f );
undefined setTransform (optional DOMMatrix2DInit transform = {});
undefined resetTransform ();
};
interface mixin CanvasCompositing {
// compositing
attribute unrestricted double globalAlpha ; // (default 1.0)
attribute DOMString globalCompositeOperation ; // (default "source-over")
};
interface mixin CanvasImageSmoothing {
// image smoothing
attribute boolean imageSmoothingEnabled ; // (default true)
attribute ImageSmoothingQuality imageSmoothingQuality ; // (default low)
};
interface mixin CanvasFillStrokeStyles {
// colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
attribute (DOMString or CanvasGradient or CanvasPattern ) strokeStyle ; // (default black)
attribute (DOMString or CanvasGradient or CanvasPattern ) fillStyle ; // (default black)
CanvasGradient createLinearGradient (double x0 , double y0 , double x1 , double y1 );
CanvasGradient createRadialGradient (double x0 , double y0 , double r0 , double x1 , double y1 , double r1 );
CanvasGradient createConicGradient (double startAngle , double x , double y );
CanvasPattern ? createPattern (CanvasImageSource image , [LegacyNullToEmptyString ] DOMString repetition );
};
interface mixin CanvasShadowStyles {
// shadows
attribute unrestricted double shadowOffsetX ; // (default 0)
attribute unrestricted double shadowOffsetY ; // (default 0)
attribute unrestricted double shadowBlur ; // (default 0)
attribute DOMString shadowColor ; // (default transparent black)
};
interface mixin CanvasFilters {
// filters
attribute DOMString filter ; // (default "none")
};
interface mixin CanvasRect {
// rects
undefined clearRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined fillRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined strokeRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
};
interface mixin CanvasDrawPath {
// path API (see also CanvasPath)
undefined beginPath ();
undefined fill (optional CanvasFillRule fillRule = "nonzero");
undefined fill (Path2D path , optional CanvasFillRule fillRule = "nonzero");
undefined stroke ();
undefined stroke (Path2D path );
undefined clip (optional CanvasFillRule fillRule = "nonzero");
undefined clip (Path2D path , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInPath (unrestricted double x , unrestricted double y , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInPath (Path2D path , unrestricted double x , unrestricted double y , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInStroke (unrestricted double x , unrestricted double y );
boolean isPointInStroke (Path2D path , unrestricted double x , unrestricted double y );
};
interface mixin CanvasUserInterface {
undefined drawFocusIfNeeded (Element element );
undefined drawFocusIfNeeded (Path2D path , Element element );
};
interface mixin CanvasText {
// text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
undefined fillText (DOMString text , unrestricted double x , unrestricted double y , optional unrestricted double maxWidth );
undefined strokeText (DOMString text , unrestricted double x , unrestricted double y , optional unrestricted double maxWidth );
TextMetrics measureText (DOMString text );
};
interface mixin CanvasDrawImage {
// drawing images
undefined drawImage (CanvasImageSource image , unrestricted double dx , unrestricted double dy );
undefined drawImage (CanvasImageSource image , unrestricted double dx , unrestricted double dy , unrestricted double dw , unrestricted double dh );
undefined drawImage (CanvasImageSource image , unrestricted double sx , unrestricted double sy , unrestricted double sw , unrestricted double sh , unrestricted double dx , unrestricted double dy , unrestricted double dw , unrestricted double dh );
};
interface mixin CanvasImageData {
// pixel manipulation
ImageData createImageData ([EnforceRange ] long sw , [EnforceRange ] long sh , optional ImageDataSettings settings = {});
ImageData createImageData (ImageData imagedata );
ImageData getImageData ([EnforceRange ] long sx , [EnforceRange ] long sy , [EnforceRange ] long sw , [EnforceRange ] long sh , optional ImageDataSettings settings = {});
undefined putImageData (ImageData imagedata , [EnforceRange ] long dx , [EnforceRange ] long dy );
undefined putImageData (ImageData imagedata , [EnforceRange ] long dx , [EnforceRange ] long dy , [EnforceRange ] long dirtyX , [EnforceRange ] long dirtyY , [EnforceRange ] long dirtyWidth , [EnforceRange ] long dirtyHeight );
};
enum CanvasLineCap { "butt" , "round" , "square" };
enum CanvasLineJoin { "round" , "bevel" , "miter" };
enum CanvasTextAlign { " start " , " end " , " left " , " right " , " center " };
enum CanvasTextBaseline { " top " , " hanging " , " middle " , " alphabetic " , " ideographic " , " bottom " };
enum CanvasDirection { " ltr " , " rtl " , " inherit " };
enum CanvasFontKerning { " auto " , " normal " , " none " };
enum CanvasFontStretch { " ultra-condensed " , " extra-condensed " , " condensed " , " semi-condensed " , " normal " , " semi-expanded " , " expanded " , " extra-expanded " , " ultra-expanded " };
enum CanvasFontVariantCaps { " normal " , " small-caps " , " all-small-caps " , " petite-caps " , " all-petite-caps " , " unicase " , " titling-caps " };
enum CanvasTextRendering { " auto " , " optimizeSpeed " , " optimizeLegibility " , " geometricPrecision " };
interface mixin CanvasPathDrawingStyles {
// line caps/joins
attribute unrestricted double lineWidth ; // (default 1)
attribute CanvasLineCap lineCap ; // (default "butt")
attribute CanvasLineJoin lineJoin ; // (default "miter")
attribute unrestricted double miterLimit ; // (default 10)
// dashed lines
undefined setLineDash (sequence <unrestricted double > segments ); // default empty
sequence <unrestricted double > getLineDash ();
attribute unrestricted double lineDashOffset ;
};
interface mixin CanvasTextDrawingStyles {
// text
attribute DOMString font ; // (default 10px sans-serif)
attribute CanvasTextAlign textAlign ; // (default: "start")
attribute CanvasTextBaseline textBaseline ; // (default: "alphabetic")
attribute CanvasDirection direction ; // (default: "inherit")
attribute DOMString letterSpacing ; // (default: "0px")
attribute CanvasFontKerning fontKerning ; // (default: "auto")
attribute CanvasFontStretch fontStretch ; // (default: "normal")
attribute CanvasFontVariantCaps fontVariantCaps ; // (default: "normal")
attribute CanvasTextRendering textRendering ; // (default: "auto")
attribute DOMString wordSpacing ; // (default: "0px")
};
interface mixin CanvasPath {
// shared path API methods
undefined closePath ();
undefined moveTo (unrestricted double x , unrestricted double y );
undefined lineTo (unrestricted double x , unrestricted double y );
undefined quadraticCurveTo (unrestricted double cpx , unrestricted double cpy , unrestricted double x , unrestricted double y );
undefined bezierCurveTo (unrestricted double cp1x , unrestricted double cp1y , unrestricted double cp2x , unrestricted double cp2y , unrestricted double x , unrestricted double y );
undefined arcTo (unrestricted double x1 , unrestricted double y1 , unrestricted double x2 , unrestricted double y2 , unrestricted double radius );
undefined rect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined roundRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h , optional (unrestricted double or DOMPointInit or sequence <(unrestricted double or DOMPointInit )>) radii = 0);
undefined arc (unrestricted double x , unrestricted double y , unrestricted double radius , unrestricted double startAngle , unrestricted double endAngle , optional boolean counterclockwise = false );
undefined ellipse (unrestricted double x , unrestricted double y , unrestricted double radiusX , unrestricted double radiusY , unrestricted double rotation , unrestricted double startAngle , unrestricted double endAngle , optional boolean counterclockwise = false );
};
[Exposed =(Window ,Worker )]
interface CanvasGradient {
// opaque object
undefined addColorStop (double offset , DOMString color );
};
[Exposed =(Window ,Worker )]
interface CanvasPattern {
// opaque object
undefined setTransform (optional DOMMatrix2DInit transform = {});
};
[Exposed =(Window ,Worker )]
interface TextMetrics {
// x-direction
readonly attribute double width ; // advance width
readonly attribute double actualBoundingBoxLeft ;
readonly attribute double actualBoundingBoxRight ;
// y-direction
readonly attribute double fontBoundingBoxAscent ;
readonly attribute double fontBoundingBoxDescent ;
readonly attribute double actualBoundingBoxAscent ;
readonly attribute double actualBoundingBoxDescent ;
readonly attribute double emHeightAscent ;
readonly attribute double emHeightDescent ;
readonly attribute double hangingBaseline ;
readonly attribute double alphabeticBaseline ;
readonly attribute double ideographicBaseline ;
};
dictionary ImageDataSettings {
PredefinedColorSpace colorSpace ;
};
[Exposed =(Window ,Worker ),
Serializable ]
interface ImageData {
constructor (unsigned long sw , unsigned long sh , optional ImageDataSettings settings = {});
constructor (Uint8ClampedArray data , unsigned long sw , optional unsigned long sh , optional ImageDataSettings settings = {});
readonly attribute unsigned long width ;
readonly attribute unsigned long height ;
readonly attribute Uint8ClampedArray data ;
readonly attribute PredefinedColorSpace colorSpace ;
};
[Exposed =(Window ,Worker )]
interface Path2D {
constructor (optional (Path2D or DOMString ) path );
undefined addPath (Path2D path , optional DOMMatrix2DInit transform = {});
};
Path2D includes CanvasPath ;
기존 웹 콘텐츠와의 호환성을 유지하기 위해 사용자 에이전트는 CanvasUserInterface
에 정의된 메서드를
stroke()
메서드 바로 뒤에
CanvasRenderingContext2D
객체에서 나열해야 합니다.
context = canvas.getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] [, willReadFrequently: false ]} ])
반환되는 객체는 CanvasRenderingContext2D
로, 특정 canvas
요소에 영구적으로
바인딩됩니다.
만약 alpha
멤버가 false로 설정되면, 컨텍스트는 항상 불투명하게 설정됩니다.
만약 desynchronized
멤버가 true로 설정되면, 컨텍스트는 비동기화될 수 있습니다.
colorSpace
멤버는 렌더링 컨텍스트의 색상 공간을
지정합니다.
willReadFrequently
멤버가 true로 설정되면, 컨텍스트는 읽기 최적화를 위해 표시됩니다.
context.canvas
CanvasRenderingContext2D/canvas
모든 현재 엔진에서 지원됩니다.
해당 canvas
요소를 반환합니다.
attributes = context.getContextAttributes()
반환되는 객체의 멤버는 다음과 같습니다:
alpha
멤버가 true일 경우,
컨텍스트는 알파 채널을 가지고 있으며, false일 경우 컨텍스트는 불투명하게 설정되었습니다.
desynchronized
멤버가 true일 경우, 컨텍스트는 비동기화될 수 있습니다.
colorSpace
멤버는 컨텍스트의 색상 공간을
나타내는 문자열입니다.
willReadFrequently
멤버가 true일 경우, 컨텍스트는 읽기 최적화를 위해 표시됩니다.
A CanvasRenderingContext2D
객체는 생성 시 초기화되는 출력 비트맵을 가지고 있습니다.
출력 비트맵에는 원본-클린 플래그가 있으며, true 또는 false로 설정할 수 있습니다. 이 비트맵이 생성될 때, 원본-클린 플래그는 초기값으로 true로 설정되어야 합니다.
CanvasRenderingContext2D
객체는 또한 알파 불리언 값을 가지고 있습니다. 만약
CanvasRenderingContext2D
객체의 알파 값이 false일 경우,
알파 채널은 모든 픽셀에 대해 1.0(완전히 불투명)으로 고정되어야 하며, 어떤 픽셀의 알파 구성 요소를 변경하려는 시도는
조용히 무시되어야 합니다.
따라서, 이러한 컨텍스트의 비트맵은 불투명한
검정색으로 시작합니다. 투명한 검정색
대신에, clearRect()
는 항상
불투명한
검정색 픽셀을 생성하며, getImageData()
의
네 번째 바이트는 항상 255가 됩니다. putImageData()
메서드는
입력의 네 번째 바이트를 무시하게 됩니다. 그러나 캔버스에 그려진 스타일과 이미지의 알파 구성 요소는 여전히 출력 비트맵의 알파 채널에 영향을 미칠 때까지는 존중됩니다. 예를 들어,
새로 생성된 출력 비트맵에 알파가 false로 설정된 상태에서 50% 투명한 흰색 사각형을 그리면
완전히 불투명한 회색 사각형이 나타납니다.
CanvasRenderingContext2D
객체는 또한 비동기화 불리언 값을 가지고 있습니다. 만약
CanvasRenderingContext2D
객체의 비동기화 값이 true일
경우, 사용자 에이전트는 캔버스의 렌더링을 최적화하여 입력 이벤트에서 래스터화까지의 지연 시간을 줄이기 위해
캔버스 페인트 사이클을 이벤트 루프와 비동기화하거나, 일반적인 사용자 에이전트 렌더링 알고리즘을 우회할 수 있습니다.
이 모드는 일반적인 페인트 메커니즘이나 래스터화를 우회하기 때문에, 눈에 띄는 화면 찢김 현상이 발생할 수 있습니다.
사용자 에이전트는 일반적으로 표시되지 않는 버퍼에 렌더링을 수행하고, 빠르게 이를 표시 중인 버퍼와 교체하여 프레젠테이션을 수행합니다. 이전 버퍼는 백 버퍼라고 하고, 후자는 프론트 버퍼라고 합니다. 지연 시간을 줄이기 위한 인기 있는 기술 중 하나는 싱글 버퍼 렌더링으로도 알려진 프론트 버퍼 렌더링입니다. 이 기술은 스캔 과정과 병행하여 레이싱 방식으로 렌더링이 진행됩니다. 이 기술은 지연 시간을 줄이는 대신 화면 찢김 현상이 발생할 수 있으며, 비동기화 불리언 값을 구현하는 데 사용할 수 있습니다. [MULTIPLEBUFFERING]
비동기화 불리언 값은 드로잉 애플리케이션과 같이 입력과 래스터화 간의 지연 시간이 중요한 특정 유형의 애플리케이션을 구현할 때 유용할 수 있습니다.
CanvasRenderingContext2D
객체는 또한 자주 읽힐 것이라는 불리언 값을 가지고
있습니다. 만약
CanvasRenderingContext2D
객체의 자주 읽힐
것 값이 true일 경우, 사용자 에이전트는 캔버스의 읽기 작업을 최적화할 수 있습니다.
대부분의 장치에서 사용자 에이전트는 캔버스의 출력
비트맵을 GPU에 저장할지(이는 "하드웨어 가속"이라고도 합니다), CPU에 저장할지("소프트웨어"라고도 합니다)를
결정해야 합니다. 대부분의 렌더링 작업은 가속된 캔버스에서 더 성능이 우수하지만, getImageData()
,
toDataURL()
, 또는 toBlob()
과 같은 읽기 작업은 예외입니다.
CanvasRenderingContext2D
객체가 자주 읽힐
것이 true로 설정되면, 사용자 에이전트는 웹페이지가 많은 읽기 작업을 수행할 가능성이 높다고 판단하고 소프트웨어
캔버스를 사용하는 것이 유리하다고 알립니다.
CanvasRenderingContext2D
객체는 또한 색상 공간 설정을 가지고 있으며, 이는
PredefinedColorSpace
유형입니다.
CanvasRenderingContext2D
객체의 색상 공간은
출력 비트맵의 색상 공간을 나타냅니다.
getContextAttributes()
메서드는 다음과 같은 단계를 통해 값을
반환합니다: «[ "alpha
"
→
this의
alpha, "desynchronized
"
→
this의
desynchronized,
"colorSpace
"
→ this의
color space,
"willReadFrequently
"
→
this의
will read
frequently
]».
CanvasRenderingContext2D
2D 렌더링 컨텍스트는 원점(0,0)이 왼쪽 상단 모서리에 위치한 평면 직선 데카르트 표면을 나타내며, 좌표 공간에서
x 값은 오른쪽으로 갈수록 증가하고, y 값은 아래로 갈수록 증가합니다. 오른쪽 가장자리의
x 좌표는 렌더링 컨텍스트의 출력 비트맵의
너비와 동일하며, 마찬가지로 아래쪽 가장자리의 y 좌표는 렌더링 컨텍스트의
출력 비트맵의 높이와 동일합니다.
좌표 공간의 크기가 사용자 에이전트가 내부적으로 또는 렌더링 중에 사용할 실제 비트맵의 크기를 반드시 나타내는 것은 아닙니다. 예를 들어, 고해상도 디스플레이에서는 사용자 에이전트가 좌표 공간의 단위당 네 개의 장치 픽셀을 사용하는 비트맵을 내부적으로 사용할 수 있어, 렌더링이 전반적으로 높은 품질을 유지할 수 있습니다. 유사하게, 안티앨리어싱은 최종 이미지의 해상도보다 높은 해상도의 비트맵을 오버샘플링하여 구현할 수 있습니다.
CSS 픽셀을 사용하여 렌더링 컨텍스트의 출력 비트맵의 크기를 설명한다고 해서, 렌더링될 때 캔버스가 동일한 영역을 CSS 픽셀로 덮는 것은 아닙니다. CSS 픽셀은 텍스트 레이아웃과 같은 CSS 기능과의 통합을 용이하게 하기 위해 재사용됩니다.
다시 말해서, 아래의 canvas
요소의 렌더링 컨텍스트는 200x200
출력 비트맵을 가지고 있으며, 내부적으로는
CSS 픽셀을
단위로 사용하여 CSS와의 통합을 용이하게 하고, 100x100 CSS 픽셀로 렌더링됩니다:
< canvas width = 200 height = 200 style = width:100px;height:100px >
2D 컨텍스트 생성 알고리즘은 target(canvas
요소)과
options을 전달받아 다음 단계들을 실행합니다:
settings는 options을
사전형 타입 CanvasRenderingContext2DSettings
으로
변환한 결과입니다. (예외를 발생시킬 수 있습니다.).
context는 새로운 CanvasRenderingContext2D
객체입니다.
context의 canvas
속성을 target을 가리키도록 초기화합니다.
context의 출력 비트맵을 target의 비트맵과 동일하게 설정합니다(이 비트맵은 공유됩니다).
context의 알파를
settings["alpha
"]로
설정합니다.
context의 비동기화를
settings["desynchronized
"]로 설정합니다.
context의 색
공간을
settings["colorSpace
"]로 설정합니다.
context의 자주 읽기를
settings["willReadFrequently
"]로 설정합니다.
context를 반환합니다.
사용자 에이전트가 비트맵 크기 설정을 width와 height로 설정하려면 다음 단계를 실행해야 합니다:
출력 비트맵을 새로운 width와 height로 크기를 조정합니다.
만약 canvas의
width
콘텐츠 속성의
숫자 값이 width와 다르다면, canvas의 width
콘텐츠 속성을
width를 나타내는 가장 짧은 문자열로 설정합니다. 이 문자열은
유효한 0 이상의 정수이어야
합니다.
만약 canvas의
height
콘텐츠 속성의
숫자 값이 height와 다르다면, canvas의 height
콘텐츠 속성을
height를 나타내는 가장 짧은 문자열로 설정합니다. 이 문자열은
유효한 0 이상의 정수이어야
합니다.
다음 예제에서는 단 하나의 사각형만 그려지는 것으로 나타납니다:
// canvas는 <canvas> 요소에 대한 참조입니다.
var context = canvas. getContext( '2d' );
context. fillRect( 0 , 0 , 50 , 50 );
canvas. setAttribute( 'width' , '300' ); // 캔버스를 초기화합니다.
context. fillRect( 0 , 100 , 50 , 50 );
canvas. width = canvas. width; // 캔버스를 초기화합니다.
context. fillRect( 100 , 0 , 50 , 50 ); // 이 사각형만 남습니다.
canvas
속성은 객체가 생성될 때 초기화된 값을 반환해야 합니다.
PredefinedColorSpace
열거형은
캔버스의 백킹 스토어의 색
공간을 지정하는 데 사용됩니다.
"srgb
" 값은 'srgb' 색
공간을 나타냅니다.
"display-p3
" 값은 'display-p3' 색 공간을 나타냅니다.
색상 공간 간의 변환 알고리즘은 CSS Color의 색상 변환 섹션에서 찾을 수 있습니다. [CSSCOLOR]
CanvasFillRule
열거형은 경로 안에 있는지
또는 밖에 있는지를 결정하는 채우기 규칙 알고리즘을 선택하는 데 사용됩니다.
"nonzero
" 값은 비영수 규칙을 나타내며,
한 점이 도형 밖에 있다고 간주되려면, 그 점에서 그려진 반무한 직선이 한 방향으로 도형의 경로를 가로지르는 횟수와
다른 방향으로 경로를 가로지르는 횟수가 같아야 합니다.
"evenodd
" 값은 홀짝 규칙을 나타내며,
한 점이 도형 밖에 있다고 간주되려면, 그 점에서 그려진 반무한 직선이 도형의 경로를 가로지르는 횟수가 짝수여야
합니다.
한 점이 도형 밖에 있지 않다면, 그 점은 도형 안에 있습니다.
ImageSmoothingQuality
열거형은
이미지를 부드럽게 할 때 사용할 보간 품질에 대한 선호도를 표현하는 데 사용됩니다.
"low
" 값은 낮은 수준의 이미지 보간 품질을 선호하는 것을
나타냅니다. 낮은 품질의 이미지 보간은 더 높은 설정보다 계산 효율이 높을 수 있습니다.
"medium
" 값은 중간 수준의 이미지 보간 품질을 선호하는 것을
나타냅니다.
"high
" 값은 높은 수준의 이미지 보간 품질을 선호하는 것을
나타냅니다. 높은 품질의 이미지 보간은 더 낮은 설정보다 계산 비용이 더 많이 들 수 있습니다.
바이리니어 스케일링은 비교적 빠르고 낮은 품질의 이미지 부드럽게 처리 알고리즘의 예입니다. 바이큐빅 또는 Lanczos 스케일링은 더 높은 품질의 출력을 생성하는 이미지 부드럽게 처리 알고리즘의 예입니다. 이 사양에서는 특정 보간 알고리즘을 사용하도록 요구하지 않습니다.
이 섹션은 비규범적입니다.
출력 비트맵이 사용자 에이전트에 의해 직접 표시되지 않을 때,
구현체는 이 비트맵을 업데이트하는 대신, 비트맵의 실제 데이터가 필요해질 때까지(예를 들어 drawImage()
호출 또는 createImageBitmap()
팩토리 메서드 때문에) 이 비트맵에 적용된 그리기 작업의 순서를 기억하는 것으로 대체할 수 있습니다. 많은 경우, 이는 메모리 효율을 높일 수 있습니다.
canvas
요소의 비트맵은 실제로 항상
필요하게 되는 비트맵 중 하나입니다. 렌더링 컨텍스트의 출력 비트맵은 존재할
경우, 항상 canvas
요소의 비트맵에
대한 별칭입니다.
추가적인 비트맵이 필요한 경우도 있습니다. 예를 들어, 캔버스가 자연 크기와 다른 크기로 페인팅될 때 빠른 그리기를 가능하게 하거나, 페이지 스크롤링과 같은 그래픽 업데이트가 캔버스 그리기 명령이 실행되는 동안 동시에 처리될 수 있도록 이중 버퍼링을 가능하게 하기 위해서입니다.
이 섹션은 비규범적입니다.
CanvasState
인터페이스를 구현하는 객체는 그리기 상태의 스택을
유지합니다. 그리기 상태는 다음으로 구성됩니다:
현재 변환 행렬.
현재 클리핑 영역.
현재 자간, 단어 간격, 채우기 스타일, 스트로크 스타일, 필터, 전역 알파, 합성 및 블렌딩 연산자, 그림자 색상.
다음 속성들의 현재 값: lineWidth
,
lineCap
,
lineJoin
,
miterLimit
,
lineDashOffset
,
shadowOffsetX
,
shadowOffsetY
,
shadowBlur
,
font
, textAlign
,
textBaseline
,
direction
,
fontKerning
,
fontStretch
,
fontVariantCaps
,
textRendering
,
imageSmoothingEnabled
,
imageSmoothingQuality
.
현재 대시 리스트.
렌더링 컨텍스트의 비트맵은 그리기 상태의 일부가 아닙니다. 이는 렌더링 컨텍스트가 canvas
요소에 어떻게 바인딩되었는지에 따라 달라지기
때문입니다.
CanvasState
믹스인을 구현하는 객체는 생성될 때 초기값이
false인 컨텍스트 손실이라는 불리언을 가지고 있습니다. 컨텍스트 손실 값은 컨텍스트 손실 단계에서 업데이트됩니다.
context.save()
모든 현재 엔진에서 지원됨.
현재 상태를 스택에 푸시합니다.
context.restore()
CanvasRenderingContext2D/restore
모든 현재 엔진에서 지원됨.
스택의 맨 위 상태를 팝하여, 컨텍스트를 해당 상태로 복원합니다.
context.reset()
렌더링 컨텍스트를 재설정하며, 여기에는 백업 버퍼, 그리기 상태 스택, 경로 및 스타일이 포함됩니다.
context.isContextLost()
렌더링 컨텍스트가 손실되었는지 여부를 반환합니다. 컨텍스트 손실은 드라이버 충돌, 메모리 부족 등으로 인해 발생할 수 있습니다. 이러한 경우, 캔버스는 백업 스토리지를 잃고 렌더링 컨텍스트를 기본 상태로 재설정하기 위한 단계를 수행합니다.
save()
메서드는 현재 그리기
상태의 복사본을 그리기 상태 스택에 푸시하는 단계로 이루어집니다.
restore()
메서드는
그리기 상태 스택의 맨 위 항목을 팝하고, 그리기 상태를 초기화하는 단계로 이루어집니다. 저장된 상태가 없는 경우, 메서드는 아무 작업도 하지 않아야 합니다.
CanvasRenderingContext2D/reset
OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.reset
reset()
메서드는 렌더링 컨텍스트를 기본 상태로 재설정하는 단계로 구성됩니다.
렌더링 컨텍스트를 기본 상태로 재설정하려면 다음 단계를 수행합니다:
캔버스의 비트맵을 투명한 검정색으로 지웁니다.
컨텍스트의 현재 기본 경로에 있는 서브 경로 목록을 비웁니다.
컨텍스트의 그리기 상태 스택을 지웁니다.
그리기 상태를 초기값으로 재설정합니다.
CanvasRenderingContext2D/isContextLost
한 가지 엔진에서만 지원됨.
isContextLost()
메서드는 this의 컨텍스트 손실을 반환하는 단계로
이루어집니다.
context.lineWidth [ = value ]
CanvasRenderingContext2D/lineWidth
모든 현재 엔진에서 지원.
styles.lineWidth [ = value ]
현재 선의 두께를 반환합니다.
설정할 수 있으며, 선의 두께를 변경합니다. 무한대가 아닌 0보다 큰 값만 유효합니다.
context.lineCap [ = value ]
CanvasRenderingContext2D/lineCap
모든 현재 엔진에서 지원.
styles.lineCap [ = value ]
현재 선 끝 스타일을 반환합니다.
설정할 수 있으며, 선 끝 스타일을 변경합니다.
가능한 선 끝 스타일은 "butt
", "round
", "square
"입니다.
다른 값은 무시됩니다.
context.lineJoin [ = value ]
CanvasRenderingContext2D/lineJoin
모든 현재 엔진에서 지원.
styles.lineJoin [ = value ]
현재 선 결합 스타일을 반환합니다.
설정할 수 있으며, 선 결합 스타일을 변경합니다.
가능한 선 결합 스타일은 "bevel
", "round
", "miter
"입니다.
다른 값은 무시됩니다.
context.miterLimit [ = value ]
CanvasRenderingContext2D/miterLimit
모든 현재 엔진에서 지원.
styles.miterLimit [ = value ]
현재 마이터 제한 비율을 반환합니다.
설정할 수 있으며, 마이터 제한 비율을 변경합니다. 무한대가 아닌 0보다 큰 값만 유효합니다.
context.setLineDash(segments)
CanvasRenderingContext2D/setLineDash
모든 현재 엔진에서 지원.
styles.setLineDash(segments)
현재 선 대시 패턴을 설정합니다(선을 그릴 때 사용됨). 인수는 선이 켜지고 꺼지도록 번갈아 가며 가지는 거리 목록입니다.
segments = context.getLineDash()
CanvasRenderingContext2D/getLineDash
모든 현재 엔진에서 지원.
segments = styles.getLineDash()
현재 선 대시 패턴의 복사본을 반환합니다. 반환된 배열에는 항상 짝수 항목이 있습니다(즉, 패턴이 정규화됨).
context.lineDashOffset
CanvasRenderingContext2D/lineDashOffset
모든 현재 엔진에서 지원.
styles.lineDashOffset
위상 오프셋(선 대시 패턴과 동일한 단위로)을 반환합니다.
설정할 수 있으며, 위상 오프셋을 변경합니다. 무한대가 아닌 값만 유효합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체에는 해당 객체에서 선이 처리되는 방식을 제어하는 속성과 메서드(이 섹션에 정의됨)가 있습니다.
lineWidth
속성은 선의 너비를 좌표 공간 단위로 제공합니다. 가져올 때 현재 값을 반환해야 합니다. 설정할 때
0, 음수, 무한대 및 NaN 값은 무시되어 값이 변경되지 않습니다. 다른 값은 현재 값을 새 값으로 변경해야 합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체가 생성될 때 lineWidth
속성은 초기값이
1.0이어야 합니다.
lineCap
속성은 UAs가 선의 끝에 배치할 엔딩 유형을 정의합니다. 유효한 세 가지 값은
"butt
", "round
", "square
"입니다.
가져올 때 현재 값을 반환해야 합니다. 설정할 때 현재 값은 새 값으로 변경되어야 합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, lineCap
속성은 초기값으로
"butt
" 값을 가져야 합니다.
lineJoin
속성은 두 선이 만나는 지점에서 UAs가 배치할 코너 유형을 정의합니다. 유효한 세 가지 값은
"bevel
", "round
", "miter
"입니다.
가져올 때 현재 값을 반환해야 합니다. 설정할 때 현재 값은 새 값으로 변경되어야 합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, lineJoin
속성은 초기값으로
"miter
" 값을 가져야 합니다.
lineJoin
속성이
"miter
" 값을 가질 때, 스트로크는 조인을 렌더링하는 방법을 결정하기 위해 마이터 제한 비율을 사용합니다. 마이터 제한 비율은 miterLimit
속성을 사용하여 명시적으로 설정할 수 있습니다. 가져올 때 현재 값을 반환해야 합니다. 설정할 때
0, 음수, 무한대, NaN 값은 무시되어 값이 변경되지 않습니다. 다른 값은 현재 값을 새 값으로 변경해야 합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, miterLimit
속성은
초기값으로 10.0 값을 가져야 합니다.
각 CanvasPathDrawingStyles
객체는 대시 목록을 가지고 있으며, 이는 비어 있거나 짝수 개의 음수가 아닌 숫자로 구성됩니다. 초기에는 대시 목록이 비어 있어야 합니다.
setLineDash(segments)
메서드가 호출되면 다음 단계를 실행해야 합니다:
segments의 값 중 하나라도 유한하지 않거나(예: Infinity 또는 NaN 값), 음수(0보다 작은 값)일 경우 반환합니다(예외를 던지지 않고; 그러나 사용자 에이전트는 개발자 콘솔에 메시지를 표시할 수 있으며, 이는 디버깅에 도움이 될 것입니다).
segments의 요소 수가 홀수인 경우, segments를 두 개의 segments 사본으로 연결된 값으로 만듭니다.
객체의 대시 목록을 segments로 설정합니다.
getLineDash()
메서드가 호출되면, 객체의 대시 목록 값을 동일한 순서로 반환하는 시퀀스를 반환해야 합니다.
"행진하는 개미" 효과를 얻기 위해 대시 패턴의 "위상"을 변경하는 것이 유용할 때가 있습니다. 위상은 lineDashOffset
속성을 사용하여 설정할 수
있습니다. 가져올 때 현재 값을 반환해야 합니다. 설정할 때 무한대와 NaN 값은 무시되어 값이 변경되지 않습니다. 다른 값은 현재 값을 새 값으로 변경해야 합니다.
CanvasPathDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, lineDashOffset
속성은 초기값으로 0.0 값을 가져야 합니다.
사용자 에이전트가 경로를 추적해야 할 때, CanvasPathDrawingStyles
인터페이스를 구현하는 style 객체를 지정하고, 다음 알고리즘을 실행해야 합니다. 이 알고리즘은 새로운 경로를 반환합니다.
path를 추적 중인 경로의 복사본으로 설정합니다.
path에서 모든 길이가 0인 선분을 제거합니다.
선이 없는 서브패스(즉, 한 점만 포함된 서브패스)를 path에서 제거합니다.
각 서브패스에서 첫 번째 점과 마지막 점 이외의 모든 점을 한 줄에서 다른 줄로 이어지는 조인으로 대체하여, 각 서브패스가 두 점(출발점과 도착점)과 이를 연결하는 선분, 그리고 각 조인을 포함한 일련의 선분으로 구성되도록 합니다.
각 닫힌 서브패스에 마지막 점과 첫 번째 점을 연결하는 직선을 추가합니다. 이전 마지막 선에서 새로 추가된 닫는 선으로 연결된 조인으로 마지막 점을 변경하고, 새로 추가된 닫는 선에서 첫 번째 선으로 연결된 조인으로 첫 번째 점을 변경합니다.
만약 style의 대시 목록이 비어 있다면, 변환으로 표시된 단계로 이동합니다.
style의 대시 목록의 모든 항목을 좌표 공간 단위로 연결한 값을 pattern width로 설정합니다.
각 서브패스 subpath에 대해, path에서 서브패스를 변형하는 다음 단계들을 실행합니다.
subpath의 모든 선분의 길이를 좌표 공간 단위로 계산하여 subpath width를 설정합니다.
style의 lineDashOffset
값을 좌표 공간 단위로 변환하여 offset을 설정합니다.
offset이 pattern width보다 클 경우, pattern width만큼 감소시킵니다.
offset이 0보다 작을 경우, pattern width만큼 증가시킵니다.
L을 subpath의 모든 선을 따라 정의된 선형 좌표선으로 설정합니다. subpath의 첫 번째 선의 시작점은 좌표 0으로 정의되고, 마지막 선의 끝점은 subpath width로 정의됩니다.
position을 0에서 offset을 뺀 값으로 설정합니다.
index를 0으로 설정합니다.
current state를 off로 설정합니다(다른 상태는 on 및 zero-on입니다).
대시 켜짐: segment length를 style의 대시 목록의 index번째 항목의 값으로 설정합니다.
position을 segment length만큼 증가시킵니다.
position이 subpath width보다 크다면, 이 서브패스에 대한 단계를 종료하고 다음 서브패스에 대해 다시 시작합니다. 더 이상 서브패스가 없다면, 변환 단계로 이동합니다.
segment length가 0이 아니면, current state를 on으로 설정합니다.
index를 1씩 증가시킵니다.
대시 꺼짐: segment length를 style의 대시 목록의 index번째 항목의 값으로 설정합니다.
start를 L의 position 오프셋으로 설정합니다.
position을 segment length만큼 증가시킵니다.
position이 0보다 작으면, 포스트 컷 단계로 이동합니다.
start가 0보다 작으면, start를 0으로 설정합니다.
position이 subpath width보다 크면, end를 L의 subpath 너비 오프셋으로 설정합니다. 그렇지 않으면 end를 L의 position 오프셋으로 설정합니다.
적절한 첫 번째 단계로 이동합니다:
아무 것도 하지 않고 다음 단계로 계속 진행합니다.
end에서 시작하는 선을 end에서 짧게 자르고 그곳에 점을 배치합니다. 두 서브패스를 자르고 start와 end 사이에 있는 모든 선분, 조인, 점, 서브패스를 제거한 후, start에 연결되지 않은 점을 하나 배치합니다.
점은 선 캡을 그릴 때 방향성을 가집니다. 방향성은 해당 지점에서 원래 선이 가졌던 방향입니다.
start에서 시작하는 선을 start에서 자르고 그곳에 점을 배치한 후, end에서 끝나는 선을 end에서 자르고 그곳에 점을 배치하여 두 서브패스를 자르고, start와 end 사이에 있는 모든 선분, 조인, 점, 서브패스를 제거합니다.
start와 end가 동일한 점이라면, 선만 두 부분으로 나뉘고 점 두 개가 삽입되며, 조인이 같은 지점에 있는 경우를 제외하고는 아무 것도 제거되지 않습니다.
포스트 컷: position이 subpath width보다 크면, 변환 단계로 이동합니다.
만약 segment length가 0보다 크면, positioned-at-on-dash를 false로 설정합니다.
index를 1씩 증가시킵니다. 만약 style의 대시 목록 항목 수와 같다면, index를 0으로 설정합니다.
대시 켜짐 단계로 돌아갑니다.
변환: 경로를 새로운 경로로 변환하는 단계입니다.
경로를 따라 style의 lineWidth
길이만큼의 직선을 스윕하며, 선이 경로에 수직을 유지하도록 하여 경로를 생성합니다. 이 때 각 점을 style의 lineCap
속성에 맞는 엔드
캡으로 대체하고, 각 조인을 style의 lineJoin
유형에 맞는
조인으로 대체합니다.
캡: 각 점에는 나오는 선의 방향과 수직인 평평한 모서리가 있습니다. style의 lineCap
값에 따라
추가적인 선 캡이 추가됩니다. "butt
" 값은 추가적인 선 캡이 추가되지 않음을 의미합니다. "round
" 값은
style의 lineWidth
폭과
같은 직경의 반원형이 각 점에 추가됨을 의미합니다. "square
" 값은 style의 lineWidth
폭의
절반 길이만큼의 직사각형이 점에 추가됨을 의미합니다.
점에 연결된 선이 없는 경우, 두 개의 캡이 방향성을 따라 서로 등을 맞대고 배치됩니다.
조인: 조인이 발생하는 지점 외에도 각 선에 대해 두 개의 추가적인 점이 있습니다: 조인 지점에서 선의 반 너비만큼 떨어진 두 모서리입니다.
이 두 모서리를 직선으로 연결한 삼각형이 모든 조인에 추가됩니다. lineJoin
속성은 이
외에 추가로 그려질 항목을 제어합니다. "bevel
" 값은 조인에서 삼각형만 그려지는 것을 의미합니다.
"round
" 값은 조인의 두 모서리를 연결하는 호가 삼각형에 추가됨을 의미합니다.
"miter
" 값은 조인에서 두 번째 삼각형이 추가됨을 의미하며, 이는 첫 번째 삼각형에 인접하게 위치하고, 두 번째 삼각형의 선은 두 선의 바깥쪽 가장자리의
연장선으로 구성됩니다. 이 삼각형은 마이터 길이가 초과되지 않을 때까지 추가됩니다.
새로 생성된 경로의 서브패스는 각 점에서 반-무한 직선을 그려 교차하는 횟수가 짝수인 경우와 동일한 방향으로 교차하는 횟수가 같은 경우에만 짝수로 유지되도록 방향을 지정해야 합니다.
새로 생성된 경로를 반환합니다.
context.font [ = value ]
모든 현재 엔진에서 지원됩니다.
styles.font [ = value ]
현재 글꼴 설정을 반환합니다.
설정할 수 있으며, 글꼴을 변경할 수 있습니다. 구문은 CSS 'font' 속성과 동일합니다. CSS 글꼴 값으로 구문 분석할 수 없는 값은 무시됩니다.
상대적 키워드 및 길이는 canvas
요소의 글꼴에
상대적으로 계산됩니다.
context.textAlign [ = value ]
CanvasRenderingContext2D/textAlign
모든 현재 엔진에서 지원됩니다.
styles.textAlign [ = value ]
현재 텍스트 정렬 설정을 반환합니다.
설정할 수 있으며, 정렬을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "start
"입니다.
context.textBaseline [ = value ]
CanvasRenderingContext2D/textBaseline
모든 현재 엔진에서 지원됩니다.
styles.textBaseline [ = value ]
현재 기준선 정렬 설정을 반환합니다.
설정할 수 있으며, 기준선 정렬을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "alphabetic
"입니다.
context.direction [ = value ]
CanvasRenderingContext2D/direction
모든 현재 엔진에서 지원됩니다.
styles.direction [ = value ]
현재 방향성을 반환합니다.
설정할 수 있으며, 방향성을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "inherit
"입니다.
context.letterSpacing [ = value ]
styles.letterSpacing [ = value ]
현재 텍스트의 문자 간격을 반환합니다.
설정할 수 있으며, 문자 간격을 변경할 수 있습니다. CSS <길이>로 구문 분석할 수 없는
값은 무시됩니다. 기본값은 "0px
"입니다.
context.fontKerning [ = value ]
styles.fontKerning [ = value ]
현재 글꼴 커닝 설정을 반환합니다.
설정할 수 있으며, 글꼴 커닝을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "auto
"입니다.
context.fontStretch [ = value ]
styles.fontStretch [ = value ]
현재 글꼴 확장 설정을 반환합니다.
설정할 수 있으며, 글꼴 확장을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "normal
"입니다.
context.fontVariantCaps [ = value ]
styles.fontVariantCaps [ = value ]
현재 글꼴 대문자 변형 설정을 반환합니다.
설정할 수 있으며, 글꼴 대문자 변형을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "normal
"입니다.
context.textRendering [ = value ]
styles.textRendering [ = value ]
현재 텍스트 렌더링 설정을 반환합니다.
설정할 수 있으며, 텍스트 렌더링을 변경할 수 있습니다. 가능한 값과 그 의미는 아래에 설명되어 있습니다. 다른 값은 무시됩니다. 기본값은 "auto
"입니다.
context.wordSpacing [ = value ]
styles.wordSpacing [ = value ]
현재 텍스트의 단어 간격을 반환합니다.
설정할 수 있으며, 단어 간격을 변경할 수 있습니다. CSS <길이>로 구문 분석할 수 없는
값은 무시됩니다. 기본값은 "0px
"입니다.
다음 인터페이스를 구현하는 객체는 CanvasTextDrawingStyles
로,
이 섹션에서 정의된 텍스트가 어떻게 배치되는지(래스터화 또는 윤곽화) 제어하는 속성을 가지고 있습니다. 이러한 객체는 또한 글꼴 스타일 소스
객체를 가질 수 있습니다. CanvasRenderingContext2D
객체의 경우, 이 값은 컨텍스트의 canvas
요소에 의해
결정됩니다. OffscreenCanvasRenderingContext2D
객체의 경우, 이것은 관련된
OffscreenCanvas
객체입니다.
글꼴 스타일 소스 객체에 대한 글꼴 해상도는 글꼴 소스를 필요로 합니다. 이는 CanvasTextDrawingStyles
를
구현하는 주어진 object에 대해 다음 단계에 따라 결정됩니다: [CSSFONTLOAD]
object의 글꼴 스타일 소스
객체가 canvas
요소인 경우,
요소의 노드 문서를 반환합니다.
그렇지 않은 경우, object의 글꼴
스타일 소스 객체는 OffscreenCanvas
객체입니다:
global을 object의 관련 글로벌 객체로 설정합니다.
확인: global은 WorkerGlobalScope
를
구현합니다.
global을 반환합니다.
다음은 ID가 c1
인 일반 canvas
요소를 사용한 글꼴 해상도의 예입니다.
const font = new FontFace( "MyCanvasFont" , "url(mycanvasfont.ttf)" ); documents. fonts. add( font); const context = document. getElementById( "c1" ). getContext( "2d" ); document. fonts. ready. then( function () { context. font = "64px MyCanvasFont" ; context. fillText( "hello" , 0 , 0 ); });
이 예제에서 캔버스는 글꼴로 mycanvasfont.ttf
를 사용하여 텍스트를 표시합니다.
다음은 OffscreenCanvas
를 사용하여 글꼴 해상도가
어떻게 발생할 수 있는지에 대한 예입니다. ID가 c2
인 canvas
요소가 작업자에게 다음과 같이 전송된다고
가정합니다:
const offscreenCanvas = document. getElementById( "c2" ). transferControlToOffscreen(); worker. postMessage( offscreenCanvas, [ offscreenCanvas]);
그런 다음, 작업자에서:
self. onmessage = function ( ev) { const transferredCanvas = ev. data; const context = transferredCanvas. getContext( "2d" ); const font = new FontFace( "MyFont" , "url(myfont.ttf)" ); self. fonts. add( font); self. fonts. ready. then( function () { context. font = "64px MyFont" ; context. fillText( "hello" , 0 , 0 ); }); };
이 예제에서 캔버스는 myfont.ttf
를 사용하여 텍스트를 표시합니다. 이때 글꼴은 문서 컨텍스트가 아닌 작업자 내에서만 로드된다는 점에 주목하세요.
font
IDL 속성은 설정 시 CSS <'font'> 값으로 파싱되어야 하며, 결과적인 글꼴은 컨텍스트에
할당되어야 합니다. 여기서 'line-height' 구성 요소는 'normal'로 강제되며, 'font-size' 구성 요소는
CSS 픽셀로 변환되고,
시스템 글꼴은 명시적인 값으로 계산됩니다. 새로운 값이 구문적으로 잘못된 경우(예: 'inherit' 또는 'initial'과 같은 독립적인 스타일 시트 구문 사용 포함) 새 글꼴 값을 할당하지 않고
무시되어야 합니다. [CSS]
글꼴 패밀리 이름은 글꼴이 사용될 때 글꼴 스타일 소스
객체의 컨텍스트에서 해석되어야 합니다. 따라서 @font-face
를 사용하여 임베드된 모든 글꼴 또는 FontFace
객체를 사용하여 로드된 글꼴은 로드된 후에 사용할 수 있어야 합니다. (각 글꼴 스타일 소스 객체에는 글꼴 소스가 있으며, 이는 사용 가능한 글꼴을 결정합니다.) 글꼴이 완전히 로드되기 전에 사용되거나 글꼴 스타일 소스 객체가 해당 글꼴을 사용해야 하는
시점에 그 글꼴을 범위에 포함하지 않는 경우, 이는 알 수 없는 글꼴로 간주되어 관련 CSS 사양에 따라 다른 글꼴로 대체되어야 합니다. [CSSFONTS] [CSSFONTLOAD]
속성 취득 시, font
속성은 컨텍스트의 현재 글꼴을
직렬화된 형태로 반환해야 합니다 (여기에는 'line-height' 구성
요소가 포함되지 않습니다). [CSSOM]
예를 들어, 다음 문장 후:
context. font = 'italic 400 12px/2 Unknown Font, sans-serif' ;
...context.font
표현식은 "italic 12px "Unknown Font", sans-serif
" 문자열로 평가됩니다. "400" 폰트
무게는 기본값이기 때문에 나타나지 않습니다. 라인 높이는 "normal"로 강제되므로 나타나지 않습니다.
CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, 컨텍스트의 글꼴은 10px sans-serif로 설정되어야 합니다. 'font-size' 구성 요소가
퍼센트, 'em' 또는 'ex' 단위, 또는
'larger' 또는 'smaller' 키워드를 사용하여 설정된 경우, 이는 계산된 값을 기준으로
해석되어야 합니다. 이 속성이 설정된 시점에 글꼴 스타일 소스
객체가 요소인 경우, 'font-weight' 구성 요소가 'bolder'와 'lighter' 상대값으로 설정된 경우, 이는 계산된 값을 기준으로 해석되어야 합니다. 특정 사례에 대해 계산된 값이 정의되지 않은 경우(예: 글꼴 스타일 소스 객체가 요소가 아니거나 렌더링되지 않음인 경우), 상대 키워드는 기본값인 normal-weight 10px
sans-serif에 대해 상대적으로 해석되어야 합니다.
textAlign
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로 변경되어야
합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, textAlign
속성은 처음에
start
값을
가져야 합니다.
textBaseline
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로 변경되어야
합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, textBaseline
속성은 처음에 alphabetic
값을 가져야 합니다.
direction
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로 변경되어야
합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, direction
속성은 처음에
"inherit
"
값을 가져야 합니다.
CanvasTextDrawingStyles
인터페이스를 구현하는 객체는 글자 간 및 단어 간의 간격을 제어하는 속성을 가지고 있습니다. 이러한 객체는 글자 간격 및 단어 간격 값을 가지며, 이는 CSS <길이> 값입니다. 초기에는 둘 다 CSS <길이>로 "0px
"을 파싱한 결과로 설정되어야 합니다.
CanvasRenderingContext2D/letterSpacing
한 개의 엔진에서만 지원됩니다.
letterSpacing
getter 단계는 직렬화된 형태로 반환하는 것입니다.
this's letter spacing.
letterSpacing
setter 단계는 다음과 같습니다:
parsed 값이 실패하면, 반환합니다.
this's letter spacing을 parsed 값으로 설정합니다.
CanvasRenderingContext2D/wordSpacing
한 개의 엔진에서만 지원됩니다.
wordSpacing
getter 단계는 직렬화된 형태로 반환하는 것입니다. this's word spacing.
wordSpacing
setter 단계는 다음과 같습니다:
parsed 값이 실패하면, 반환합니다.
this's word spacing을 parsed 값으로 설정합니다.
CanvasRenderingContext2D/fontKerning
fontKerning
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로 변경되어야
합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, fontKerning
속성은
처음에 "auto
"
값을 가져야 합니다.
CanvasRenderingContext2D/fontStretch
한 개의 엔진에서만 지원됩니다.
fontStretch
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로 변경되어야
합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, fontStretch
속성은
처음에 "normal
"
값을 가져야 합니다.
CanvasRenderingContext2D/fontVariantCaps
한 개의 엔진에서만 지원됩니다.
fontVariantCaps
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로
변경되어야 합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, fontVariantCaps
속성은 처음에 "normal
"
값을 가져야 합니다.
CanvasRenderingContext2D/textRendering
한 개의 엔진에서만 지원됩니다.
textRendering
IDL 속성은 취득 시 현재 값을 반환해야 합니다. 설정 시, 현재 값은 새 값으로
변경되어야 합니다. CanvasTextDrawingStyles
인터페이스를 구현하는 객체가 생성될 때, textRendering
속성은 처음에 "auto
"
값을 가져야 합니다.
textAlign
속성의 허용된
키워드는 다음과 같습니다:
start
텍스트의 시작 가장자리에 맞춥니다(왼쪽에서 오른쪽으로 쓰는 텍스트의 경우 왼쪽, 오른쪽에서 왼쪽으로 쓰는 텍스트의 경우 오른쪽).
end
텍스트의 끝 가장자리에 맞춥니다(왼쪽에서 오른쪽으로 쓰는 텍스트의 경우 오른쪽, 오른쪽에서 왼쪽으로 쓰는 텍스트의 경우 왼쪽).
left
왼쪽에 맞춥니다.
right
오른쪽에 맞춥니다.
center
가운데에 맞춥니다.
textBaseline
속성의 허용된 키워드는 폰트의 정렬 지점에 해당합니다:
키워드는 다음과 같은 정렬 지점에 매핑됩니다:
top
hanging
middle
alphabetic
ideographic
bottom
direction
속성의 허용된 키워드는 다음과 같습니다:
ltr
입력을 텍스트 준비 알고리즘에서 왼쪽에서 오른쪽으로 읽히는 텍스트로 처리합니다.
rtl
입력을 텍스트 준비 알고리즘에서 오른쪽에서 왼쪽으로 읽히는 텍스트로 처리합니다.
inherit
fontKerning
속성의 허용된 키워드는 다음과 같습니다:
auto
커닝이 사용자 에이전트의 재량에 따라 적용됩니다.
normal
커닝이 적용됩니다.
none
커닝이 적용되지 않습니다.
fontStretch
속성의 허용된 키워드는 다음과 같습니다:
ultra-condensed
CSS 'font-stretch' 'ultra-condensed' 설정과 동일합니다.
extra-condensed
CSS 'font-stretch' 'extra-condensed' 설정과 동일합니다.
condensed
CSS 'font-stretch' 'condensed' 설정과 동일합니다.
semi-condensed
CSS 'font-stretch' 'semi-condensed' 설정과 동일합니다.
normal
기본 설정으로, 글리프의 너비가 100%입니다.
semi-expanded
CSS 'font-stretch' 'semi-expanded' 설정과 동일합니다.
expanded
CSS 'font-stretch' 'expanded' 설정과 동일합니다.
extra-expanded
CSS 'font-stretch' 'extra-expanded' 설정과 동일합니다.
ultra-expanded
CSS 'font-stretch' 'ultra-expanded' 설정과 동일합니다.
fontVariantCaps
속성의 허용된 키워드는 다음과 같습니다:
normal
아래에 나열된 기능 중 어느 것도 활성화되지 않습니다.
small-caps
CSS 'font-variant-caps' 'small-caps' 설정과 동일합니다.
all-small-caps
CSS 'font-variant-caps' 'all-small-caps' 설정과 동일합니다.
petite-caps
CSS 'font-variant-caps' 'petite-caps' 설정과 동일합니다.
all-petite-caps
CSS 'font-variant-caps' 'all-petite-caps' 설정과 동일합니다.
unicase
CSS 'font-variant-caps' 'unicase' 설정과 동일합니다.
titling-caps
CSS 'font-variant-caps' 'titling-caps' 설정과 동일합니다.
textRendering
속성의 허용된 키워드는 다음과 같습니다:
auto
SVG 텍스트 렌더링 속성에서 'auto'와 동일합니다.
optimizeSpeed
SVG 텍스트 렌더링 속성에서 'optimizeSpeed'와 동일합니다.
optimizeLegibility
SVG 텍스트 렌더링 속성에서 'optimizeLegibility'와 동일합니다.
geometricPrecision
SVG 텍스트 렌더링 속성에서 'geometricPrecision'과 동일합니다.
텍스트 준비 알고리즘은 다음과 같습니다. 이 알고리즘은 문자열 text, CanvasTextDrawingStyles
객체 target, 그리고 선택적인 길이 maxWidth를 입력으로 받습니다. 이 알고리즘은 공통 좌표 공간에 위치한 글리프 형태 배열, 왼쪽,
오른쪽, 중앙 중 하나인 physical alignment, 그리고 인라인 박스를 반환합니다. (이 알고리즘을 호출하는
대부분의 호출자는 physical alignment 및 인라인 박스를 무시합니다.)
maxWidth가 제공되었지만 0 이하이거나 NaN인 경우 빈 배열을 반환합니다.
text의 모든 ASCII 공백 문자를 U+0020 SPACE 문자로 대체합니다.
font을 target의 font
속성으로부터 가져와 설정합니다.
다음 목록에서 적절한 단계를 적용하여 direction 값을 결정합니다:
direction
속성 값이 "ltr
"인
경우
direction
속성 값이 "rtl
"인
경우
document
이며 null이 아닌 문서 요소를 가지고 있는 경우
가상으로 무한히 넓은 CSS 라인 박스를 형성하여 text가 포함된 단일 인라인 박스를 포함시키며, 이 박스의 CSS 속성은 다음과 같이 설정됩니다:
속성 | 소스 |
---|---|
'direction' | direction |
'font' | font |
'font-kerning' | target의 fontKerning
|
'font-stretch' | target의 fontStretch
|
'font-variant-caps' | target의 fontVariantCaps
|
'letter-spacing' | target의 letter spacing |
SVG text-rendering | target의 textRendering
|
'white-space' | 'pre' |
'word-spacing' | target의 word spacing |
모든 다른 속성은 초기 값으로 설정됩니다.
maxWidth가 제공되고 가상 라인 박스 내의 인라인 박스의 가상 너비가 maxWidth보다 큰 경우, font를 더 압축된 글꼴로 변경(사용 가능한 경우 또는 가로 축소 인자를 적용하여 합리적으로 읽을 수 있는 글꼴이 생성될 수 있는 경우)하거나 더 작은 글꼴로 변경하고 이전 단계로 돌아갑니다.
anchor point는 인라인 박스의 한 지점이며, physical alignment은 왼쪽, 오른쪽,
중앙 중
하나입니다. 이 변수들은 textAlign
및
textBaseline
값에 따라 다음과 같이 결정됩니다:
수평 위치:
textAlign
이
left
인
경우
textAlign
이
start
이고
direction이 'ltr'인 경우
textAlign
이
end
이고
direction이 'rtl'인 경우
textAlign
이
right
인
경우
textAlign
이
end
이고
direction이 'ltr'인 경우
textAlign
이
start
이고
direction이 'rtl'인 경우
textAlign
이
center
인
경우
수직 위치:
textBaseline
이
top
인
경우
textBaseline
이
hanging
인
경우
textBaseline
이
middle
인
경우
textBaseline
이
alphabetic
인
경우
textBaseline
이
ideographic
인
경우
textBaseline
이
bottom
인
경우
result는 가상의 인라인 박스 내의 각 글리프를 왼쪽에서 오른쪽으로 반복하며, 각각의 글리프를 CSS 픽셀 단위로 anchor point에서 원점을 두고 좌표 공간에 배치된 상태로 배열에 추가합니다.
result, physical alignment, 그리고 인라인 박스를 반환합니다.
CanvasPath
인터페이스를 구현하는 객체는 경로를 가지고 있습니다. 경로는 0개 이상의 하위
경로 목록을 포함합니다. 각 하위 경로는 하나 이상의 점 목록으로 구성되며, 직선 또는 곡선 선분으로 연결되고, 하위 경로가 닫혀 있는지 여부를
나타내는 플래그가 있습니다. 닫힌 하위 경로는 하위 경로의 마지막 점이 직선으로 첫 번째 점에 연결된 것입니다. 점이 하나뿐인 하위 경로는 경로를 그릴 때 무시됩니다.
경로는 새 하위 경로 필요 플래그를 가지고 있습니다. 이 플래그가 설정되면 특정 API는 이전 경로를 확장하는 대신 새 하위 경로를 만듭니다. 경로가 생성될 때, 그 새 하위 경로 필요 플래그가 설정되어야 합니다.
CanvasPath
인터페이스를 구현하는 객체가 생성될 때, 그 경로는 0개의 하위 경로로 초기화되어야 합니다.
context.moveTo(x, y)
CanvasRenderingContext2D/moveTo
모든 최신 엔진에서 지원됩니다.
path.moveTo(x, y)
지정된 점으로 새 하위 경로를 만듭니다.
context.closePath()
CanvasRenderingContext2D/closePath
모든 최신 엔진에서 지원됩니다.
path.closePath()
현재 하위 경로를 닫히도록 표시하고, 닫힌 새 하위 경로와 동일한 시작점으로 새 하위 경로를 시작합니다.
context.lineTo(x, y)
CanvasRenderingContext2D/lineTo
모든 최신 엔진에서 지원됩니다.
path.lineTo(x, y)
지정된 점을 현재 하위 경로에 추가하며, 이전 점과 직선으로 연결합니다.
context.quadraticCurveTo(cpx, cpy, x, y)
CanvasRenderingContext2D/quadraticCurveTo
모든 최신 엔진에서 지원됩니다.
path.quadraticCurveTo(cpx, cpy, x, y)
지정된 제어점으로 연결된 곡선으로 현재 하위 경로에 지정된 점을 추가합니다.
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
CanvasRenderingContext2D/bezierCurveTo
모든 최신 엔진에서 지원됩니다.
path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
지정된 제어점으로 연결된 곡선으로 현재 하위 경로에 지정된 점을 추가합니다.
context.arcTo(x1, y1, x2, y2, radius)
CanvasRenderingContext2D/arcTo
모든 최신 엔진에서 지원됩니다.
path.arcTo(x1, y1, x2, y2, radius)
지정된 제어점과 반경으로 현재 하위 경로에 호를 추가하며, 이전 점과 직선으로 연결합니다.
주어진 반경이 음수인 경우, "IndexSizeError
" DOMException
을
던집니다.
context.arc(x, y, radius, startAngle, endAngle [, counterclockwise ])
모든 최신 엔진에서 지원됩니다.
path.arc(x, y, radius, startAngle, endAngle [, counterclockwise ])
지정된 시작 각도에서 끝 각도까지 주어진 방향(기본적으로 시계 방향)으로 주어진 원의 호를 그리며, 이전 점과 직선으로 연결하여 경로에 추가합니다.
주어진 반경이 음수인 경우, "IndexSizeError
" DOMException
을
던집니다.
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])
CanvasRenderingContext2D/ellipse
모든 최신 엔진에서 지원됩니다.
path.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])
지정된 시작 각도에서 끝 각도까지 주어진 방향(기본적으로 시계 방향)으로 주어진 타원의 호를 그리며, 이전 점과 직선으로 연결하여 경로에 추가합니다.
주어진 반경이 음수인 경우, "IndexSizeError
" DOMException
을
던집니다.
context.rect(x, y, w, h)
모든 최신 엔진에서 지원됩니다.
path.rect(x, y, w, h)
지정된 직사각형을 나타내는 새로운 닫힌 하위 경로를 경로에 추가합니다.
context.roundRect(x, y, w, h, radii)
path.roundRect(x, y, w, h, radii)
지정된 반경의 둥근 직사각형을 나타내는 새로운 닫힌 하위 경로를 경로에 추가합니다. radii는 반경 목록이거나 픽셀 단위로 직사각형의 모서리를 나타내는 단일 반경일 수 있습니다. 목록이 제공되면 이러한 반경의 수와 순서는 CSS 'border-radius' 속성과 동일한 방식으로 동작합니다. 단일 반경은 단일 요소가 있는 목록과 동일한 방식으로 동작합니다.
w와 h가 모두 0 이상이거나 둘 다 0 미만인 경우, 경로는 시계 방향으로 그려집니다. 그렇지 않으면 반시계 방향으로 그려집니다.
w가 음수일 때, 둥근 직사각형은 수평으로 뒤집히며, 일반적으로 왼쪽 모서리에 적용되는 반경 값이 오른쪽에 사용됩니다. 마찬가지로, h가 음수일 때, 둥근 직사각형은 수직으로 뒤집힙니다.
radii의 값이 숫자인 경우, 해당 모서리(들)는 반경 r의 원호로 그려집니다.
radii의 값이 { x, y }
속성이 있는 객체인 경우, 해당 모서리(들)는 각각 r.x와 r.y의
반경으로 타원호로 그려집니다.
동일한 모서리의 두 모서리 반경의 합이 모서리 길이보다 클 때, 모든 둥근 직사각형의 반경이 길이 / (r1 + r2) 비율로 스케일링됩니다. 여러 모서리가 이 속성을 가지고 있는 경우, 가장 작은 스케일 비율의 모서리가 사용됩니다. 이는 CSS 동작과 일치합니다.
목록의 크기가 1, 2, 3 또는 4가 아닌 radii의 경우, RangeError
를
던집니다.
radii의 값이 음수인 경우 또는 { x, y }
객체의 x
또는 y
속성이 음수인 경우,
RangeError
를
던집니다.
다음 메서드는 CanvasPath
인터페이스를 구현하는 객체의 경로를 조작할 수 있게 해줍니다.
CanvasDrawPath
및 CanvasTransform
인터페이스를 구현하는 객체의
경우, 이 메서드를 통해 전달된 점들과 이 메서드가 현재 기본
경로에 추가하는 결과 선은 경로에 추가되기 전에 현재 변환 행렬에
따라 변환되어야 합니다.
moveTo(x, y)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN이면 반환합니다.
지정된 점을 첫 번째(및 유일한) 점으로 하는 새로운 하위 경로를 생성합니다.
사용자 에이전트가 하위 경로를 보장하기 위해 경로에서 좌표 (x, y)를 확인할 때, 새 하위 경로 필요 플래그가 설정되어 있는지 확인해야 합니다. 설정되어
있으면, moveTo()
메서드가
호출된 것처럼 점 (x, y)을 첫 번째(및 유일한) 점으로 하여 새로운 하위 경로를 생성하고, 새 하위 경로 필요 플래그를 해제해야 합니다.
closePath()
메서드가 호출될 때, 객체의 경로에 하위 경로가 없으면 아무 작업도 수행하지 않아야 합니다.
그렇지 않으면, 마지막 하위 경로를 닫힌 것으로 표시하고, 이전 하위 경로의 첫 번째 점과 동일한 점을 첫 번째 점으로 하는 새 하위 경로를 생성한 다음, 이 새 하위 경로를 경로에 추가해야 합니다.
마지막 하위 경로에 여러 점이 있는 경우, 이는 마지막 점을 마지막 하위 경로의 첫 번째 점으로 연결하는 직선을 추가하여 하위 경로를 "닫는" 것과 같습니다.
새 점과 그 점을 연결하는 선은 아래 설명된 메서드를 사용하여 하위 경로에 추가됩니다. 모든 경우에 이 메서드는 객체의 경로에서 마지막 하위 경로만 수정합니다.
lineTo(x, y)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN이면 반환합니다.
객체의 경로에 하위 경로가 없으면 하위 경로가 보장되도록 합니다 (x, y).
그렇지 않으면, 하위 경로의 마지막 점을 지정된 점 (x, y)에 직선으로 연결한 다음, 지정된 점 (x, y)을 하위 경로에 추가합니다.
quadraticCurveTo(cpx, cpy, x, y)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN이면 반환합니다.
하위 경로가 보장되도록 합니다 (cpx, cpy)
하위 경로의 마지막 점을 지정된 점 (x, y)에 제어점 (cpx, cpy)을 사용하여 이차 베지어 곡선으로 연결합니다. [BEZIER]
지정된 점 (x, y)을 하위 경로에 추가합니다.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN이면 반환합니다.
하위 경로가 보장되도록 합니다 (cp1x, cp1y).
하위 경로의 마지막 점을 지정된 점 (x, y)에 제어점 (cp1x, cp1y) 및 (cp2x, cp2y)을 사용하여 삼차 베지어 곡선으로 연결합니다. [BEZIER]
지정된 점 (x, y)을 하위 경로에 추가합니다.
arcTo(x1, y1, x2, y2, radius)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN이면 반환합니다.
하위 경로가 보장되도록 합니다 (x1, y1).
radius가 음수이면 "IndexSizeError
" DOMException
을
던집니다.
점 (x0, y0)을 현재 변환 행렬의 역행렬로 변환한 하위 경로의 마지막 점으로 설정합니다(이렇게 하면 메서드에 전달된 점과 동일한 좌표계에 있게 됩니다).
점 (x0, y0)이 점 (x1, y1)과 같거나, 점 (x1, y1)이 점 (x2, y2)과 같거나, radius가 0이면 점 (x1, y1)을 하위 경로에 추가하고, 그 점을 이전 점 (x0, y0)과 직선으로 연결합니다.
그렇지 않으면, 점 (x0, y0), (x1, y1), 및 (x2, y2)이 모두 하나의 직선에 놓여 있으면, 점 (x1, y1)을 하위 경로에 추가하고, 그 점을 이전 점 (x0, y0)과 직선으로 연결합니다.
그렇지 않으면, The Arc를 radius가 있는 원의 둘레가 제공하는 가장 짧은 호로 설정합니다. 이 호는 점 (x0, y0)에서 시작하여 점 (x1, y1)에서 끝나는 반무한 직선에 접하는 한 점과, 점 (x1, y1)에서 시작하여 점 (x2, y2)에서 끝나는 반무한 직선에 접하는 다른 점을 가집니다. 이 원이 이 두 직선과 접하는 점을 각각 시작 접선점과 끝 접선점이라고 합니다. 점 (x0, y0)을 시작 접선점에 직선으로 연결하고, 시작 접선점을 하위 경로에 추가한 다음, 시작 접선점을 The Arc로 끝 접선점에 연결하고, 끝 접선점을 하위 경로에 추가합니다.
arc(x,
y, radius, startAngle, endAngle,
counterclockwise)
메서드는 호출되면, ellipse 메서드
steps와 함께 this, x, y, radius, radius, 0,
startAngle,
endAngle, 그리고 counterclockwise를 실행해야 합니다.
이는 두 반지름이 같고 rotation이 0인 경우
ellipse()
과 동등합니다.
ellipse(x,
y, radiusX, radiusY, rotation, startAngle,
endAngle, counterclockwise)
메서드는 호출되면,
ellipse 메서드 steps와 함께 this,
x, y, radiusX, radiusY, rotation, startAngle,
endAngle, 그리고 counterclockwise를 실행해야 합니다.
ellipse에서 점을 결정하는 단계, 주어진 ellipse와 angle은 다음과 같습니다:
eccentricCircle을 ellipse와 동일한 원점에 반지름이 ellipse의 반장축과 같은 원으로 정의합니다.
outerPoint를 angle에서 ellipse의 반장축에서 시계 방향으로 라디안 단위로 측정된 eccentricCircle의 원주상의 점으로 정의합니다.
chord를 ellipse의 주축에 수직인 선으로, 이 축과 outerPoint 사이의 선으로 정의합니다.
chord가 ellipse의 원주를 가로지르는 지점을 반환합니다.
ellipse 메서드 steps, 주어진 canvasPath, x, y, radiusX, radiusY, rotation, startAngle, endAngle, 그리고 counterclockwise는 다음과 같습니다:
인자가 무한대이거나 NaN이면, return 합니다.
radiusX 또는 radiusY가 음수인 경우, "IndexSizeError
"
DOMException
를 throw
합니다.
canvasPath의 경로에 하위 경로가 있는 경우, 하위 경로의 마지막 점에서 호의 시작점까지 직선을 추가합니다.
호의 시작점과 끝점을 하위 경로에 추가하고, 그것들을 호로 연결합니다. 호와 그 시작점 및 끝점은 다음과 같이 정의됩니다:
x, y에 원점을 둔 타원은 주축 반지름 radiusX와 소축 반지름 radiusY를 가지며, 원점을 기준으로 시계 방향으로 x축에서 rotation 라디안 회전한 상태로 가정합니다.
counterclockwise가 false이고 endAngle − startAngle이 2π 이상이거나, counterclockwise가 true이고 startAngle − endAngle이 2π 이상인 경우, 호는 이 타원의 전체 원주이며, 시작점과 끝점은 모두 ellipse에서 점을 결정하는 단계를 실행하여 얻은 startAngle입니다.
그렇지 않은 경우, 시작점은 ellipse에서 점을 결정하는 단계를 통해 얻은 startAngle이고, 끝점은 ellipse에서 점을 결정하는 단계를 통해 얻은 endAngle이며, 호는 counterclockwise가 true이면 반시계 방향으로, 그렇지 않으면 시계 방향으로 진행됩니다. 점들이 타원 위에 있으므로, 호는 2π 라디안을 넘는 각도를 가질 수 없습니다.
호가 타원의 전체 원주를 커버하고 하위 경로에 다른 점이 없는 경우에도,
closePath()
메서드가 적절히 호출되지 않으면 경로가 닫히지 않습니다.
rect(x,
y, w, h)
메서드는 호출되면, 다음 단계를 실행해야 합니다:
인자가 무한대이거나 NaN이면, return 합니다.
새 하위 경로를 생성하여, 네 개의 점 (x, y), (x+w, y), (x+w, y+h), (x, y+h)만 포함하고, 이 점들을 직선으로 연결합니다.
하위 경로를 닫힌 상태로 표시합니다.
하위 경로에 (x, y) 점만 포함하는 새 하위 경로를 생성합니다.
CanvasRenderingContext2D/roundRect
현재 모든 엔진에서 지원됩니다.
roundRect(x,
y, w, h, radii)
메서드의 단계는 다음과 같습니다:
x, y, w, 또는 h가 무한대이거나 NaN인 경우, return 합니다.
radii가 unrestricted double
이거나
DOMPointInit
인
경우,
radii를 « radii »로 설정합니다.
radii의 크기가 1, 2, 3, 또는 4가 아닌 경우,
RangeError
를
throw 합니다.
normalizedRadii를 빈 리스트로 설정합니다.
radii의 각 radius에 대해:
radius가 DOMPointInit
인 경우:
radius["x
"]
또는 radius["y
"]
가 음수인 경우,
RangeError
를
throw 합니다.
그 외의 경우, radius를 normalizedRadii에 추가합니다.
radius가
unrestricted double
인
경우:
radius가 무한대이거나 NaN인 경우, return 합니다.
radius가 음수인 경우,
RangeError
를
throw 합니다.
그 외의 경우, «[ "x
"
→ radius, "y
"
→ radius ]»를 normalizedRadii에 추가합니다.
upperLeft, upperRight, lowerRight, 및 lowerLeft를 null로 설정합니다.
normalizedRadii의 크기가 4인 경우, upperLeft를 normalizedRadii[0]으로 설정하고, upperRight를 normalizedRadii[1]으로 설정하고, lowerRight를 normalizedRadii[2]로 설정하고, lowerLeft를 normalizedRadii[3]으로 설정합니다.
normalizedRadii의 크기가 3인 경우, upperLeft를 normalizedRadii[0]으로 설정하고, upperRight와 lowerLeft를 normalizedRadii[1]로 설정하고, lowerRight를 normalizedRadii[2]로 설정합니다.
normalizedRadii의 크기가 2인 경우, upperLeft와 lowerRight를 normalizedRadii[0]으로 설정하고, upperRight와 lowerLeft를 normalizedRadii[1]로 설정합니다.
normalizedRadii의 크기가 1인 경우, upperLeft, upperRight, lowerRight, 및 lowerLeft를 normalizedRadii[0]으로 설정합니다.
코너 곡선이 겹치지 않아야 합니다. 이를 방지하기 위해 모든 반지름을 스케일합니다:
새 하위 경로를 생성합니다:
점 (x + upperLeft["x
"],
y)로 이동합니다.
점 (x + w − upperRight["x
"],
y)까지 직선을 그립니다.
점 (x + w, y + upperRight["y
"])로 호를 그립니다.
점 (x + w, y + h − lowerRight["y
"])까지 직선을 그립니다.
점 (x + w − lowerRight["x
"],
y + h)까지 호를 그립니다.
점 (x + lowerLeft["x
"],
y + h)까지 직선을 그립니다.
점 (x, y + h − lowerLeft["y
"])로 호를 그립니다.
점 (x, y + upperLeft["y
"])까지 직선을 그립니다.
점 (x + upperLeft["x
"],
y)로 호를 그립니다.
하위 경로를 닫힌 상태로 표시합니다.
하위 경로에 (x, y) 점만 포함하는 새 하위 경로를 생성합니다.
이것은 CSS의 'border-radius' 속성과 유사하게 동작하도록 설계되었습니다.
Path2D
객체
모든 현재 엔진에서 지원.
Path2D
객체는 경로를 선언하는 데 사용되며, 나중에 CanvasDrawPath
인터페이스를 구현하는 객체에서 사용됩니다.
앞에서 설명한 많은 API들 외에도 Path2D
객체에는 경로를 결합하고 경로에 텍스트를 추가하는 메서드가 있습니다.
path = new Path2D()
모든 현재 엔진에서 지원.
새로운 빈 Path2D
객체를 생성합니다.
path = new Path2D(path)
path가 Path2D
객체인 경우,
복사본을 반환합니다.
path가 문자열인 경우, 인수로 전달된 경로를 SVG 경로 데이터로 해석하여 생성합니다. [SVG]
path.addPath(path [, transform ])
모든 현재 엔진에서 지원.
인수로 전달된 경로를 추가합니다.
Path2D(path)
생성자는, 호출될 때, 다음
단계를 실행해야 합니다:
output이라는 새 Path2D
객체를 생성합니다.
path가 주어지지 않으면, output을 반환합니다.
path가 Path2D
객체인 경우,
path의 모든 하위 경로를 output에 추가하고 output을 반환합니다. (즉, 전달된 인수의 복사본을 반환합니다.)
svgPath를 path에 따라 해석하고 SVG 2의 경로 데이터 규칙에 따라 파싱한 결과로 설정합니다. [SVG]
결과 경로는 비어 있을 수 있습니다. SVG는 경로 데이터를 파싱하고 적용하는 규칙을 정의합니다.
svgPath에서 마지막 점(x, y)을 가져옵니다.
경로가 있다면, svgPath의 모든 하위 경로를 output에 추가합니다.
새 하위 경로를 output에 생성하고, 그 하위 경로의 유일한 점으로 (x, y)를 설정합니다.
output을 반환합니다.
addPath(path,
transform)
메서드는, Path2D
객체
a에서 호출될 때, 다음 단계를 실행해야 합니다:
Path2D
객체
path
에 하위 경로가 없으면, 반환합니다.
matrix를 2D 사전에서 DOMMatrix
생성하기
의 결과로 설정합니다. transform.
matrix의 m11 요소, m12 요소, m21 요소, m22 요소, m41 요소, 또는 m42 요소 중 하나 이상이 무한대이거나 NaN이면, 반환합니다.
path에 있는 모든 하위 경로의 복사본을 생성합니다. 이 복사본을 c라고 합니다.
c에 있는 모든 좌표와 선을 변환 행렬 matrix로 변환합니다.
c의 마지막 하위 경로에서 마지막 점(x, y)을 가져옵니다.
c의 모든 하위 경로를 a에 추가합니다.
새 하위 경로를 a에 생성하고, 그 하위 경로의 유일한 점으로 (x, y)를 설정합니다.
CanvasTransform
인터페이스를 구현하는 객체는 현재 변환 행렬과 이를 조작하기 위한 메서드(이 섹션에서 설명)를 가지고 있습니다. CanvasTransform
인터페이스를 구현하는 객체가 생성될
때, 그 변환 행렬은 항등 행렬로 초기화되어야 합니다.
현재 변환 행렬은 현재 기본 경로를 생성할 때, 그리고 Path2D
객체와 텍스트, 도형을 페인팅할 때 적용됩니다. 이러한 객체들은 CanvasTransform
인터페이스를 구현합니다.
변환은 역순으로 수행되어야 합니다.
예를 들어, 너비를 두 배로 하는 스케일 변환이 캔버스에 적용된 후, 그리기 작업이 1/4 회전하는 회전 변환이 뒤따른다면, 두 배의 너비와 높이를 가지는 사각형을 캔버스에 그리면 실제 결과는 정사각형이 됩니다.
context.scale(x, y)
CanvasRenderingContext2D/scale
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 주어진 특성으로 스케일 변환을 적용하도록 변경합니다.
context.rotate(angle)
CanvasRenderingContext2D/rotate
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 주어진 특성으로 회전 변환을 적용하도록 변경합니다. 각도는 라디안 단위입니다.
context.translate(x, y)
CanvasRenderingContext2D/translate
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 주어진 특성으로 번역 변환을 적용하도록 변경합니다.
context.transform(a, b, c, d, e, f)
CanvasRenderingContext2D/transform
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 주어진 특성으로 변경합니다.
matrix = context.getTransform()
CanvasRenderingContext2D/getTransform
모든 최신 엔진에서 지원됩니다.
context.setTransform(a, b, c, d, e, f)
CanvasRenderingContext2D/setTransform
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 아래에서 설명한 대로 인수로 지정된 행렬로 변경합니다.
context.setTransform(transform)
현재 변환 행렬을
전달된 DOMMatrix2DInit
사전으로 표현된 행렬로 변경합니다.
context.resetTransform()
CanvasRenderingContext2D/resetTransform
모든 최신 엔진에서 지원됩니다.
현재 변환 행렬을 항등 행렬로 변경합니다.
scale(x, y)
메서드가 호출되면 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
인수로 설명된 스케일 변환을 현재 변환 행렬에 추가합니다. x 인수는 수평 방향의 스케일 계수를 나타내고, y 인수는 수직 방향의 스케일 계수를 나타냅니다. 계수는 배수입니다.
rotate(angle)
메서드가 호출되면 다음 단계를 실행해야 합니다:
angle이 무한대이거나 NaN인 경우, 반환합니다.
인수로 설명된 회전 변환을 현재 변환 행렬에 추가합니다. angle 인수는 라디안 단위로 표현된 시계 방향 회전 각도를 나타냅니다.
translate(x, y)
메서드가 호출되면 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
인수로 설명된 번역 변환을 현재 변환 행렬에 추가합니다. x 인수는 수평 방향의 번역 거리를 나타내고, y 인수는 수직 방향의 번역 거리를 나타냅니다. 인수는 좌표 공간 단위로 표현됩니다.
transform(a, b, c, d, e, f)
메서드가 호출되면 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
현재 변환 행렬을 다음과 같은 방법으로 인수로 설명된 행렬로 교체합니다:
a | c | e |
b | d | f |
0 | 0 | 1 |
인수 a, b, c, d, e, f는 때때로 m11, m12, m21, m22, dx, dy 또는 m11, m21, m12, m22, dx, dy로 불립니다. 특히 두 번째와 세 번째 인수(b와 c)의 순서에 주의해야 하며, API마다 순서가 다르기 때문에, API에서 때때로 m12/m21 또는 m21/m12를 사용합니다.
getTransform()
메서드가 호출되면, 컨텍스트의 현재 변환 행렬의 복사본을
새로 생성된 DOMMatrix
객체로 반환해야 합니다.
이 반환된 객체는 실시간이 아니므로, 이를 업데이트해도 현재 변환 행렬에 영향을 미치지 않으며, 현재 변환 행렬을 업데이트해도
이미 반환된 DOMMatrix
에
영향을 미치지 않습니다.
setTransform(a, b, c, d, e, f)
메서드가 호출되면 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
현재 변환 행렬을 아래와 같이 설명된 행렬로 재설정합니다:
a | c | e |
b | d | f |
0 | 0 | 1 |
setTransform(transform)
메서드가 호출되면 다음 단계를 실행해야 합니다:
2D 사전에서 DOMMatrix
를 생성하여
transform의 결과로 matrix를 생성합니다.
matrix의 m11 요소, m12 요소, m21 요소, m22 요소, m41 요소, m42 요소 중 하나 이상이 무한대이거나 NaN인 경우, 반환합니다.
현재 변환 행렬을 matrix로 재설정합니다.
resetTransform()
메서드가 호출되면 현재 변환 행렬을 항등 행렬로 재설정해야 합니다.
transform()
및
setTransform()
메서드로 생성된 행렬의 형식을 고려하면,
a | c | e |
b | d | f |
0 | 0 | 1 |
변환 행렬 곱셈 후에 변환된 결과 좌표는 다음과 같습니다:
xnew = a x + c y + e
ynew = b x + d y + f
일부 CanvasDrawImage
및 CanvasFillStrokeStyles
인터페이스의 메서드는 CanvasImageSource
유니온 타입을 인수로 사용합니다.
이 유니온 타입은 다음 인터페이스를 구현하는 객체를 이미지 소스로 사용할 수 있도록 허용합니다:
HTMLOrSVGImageElement
(img
또는
SVG
image
요소)
HTMLVideoElement
(video
요소)HTMLCanvasElement
(canvas
요소)OffscreenCanvas
ImageBitmap
VideoFrame
정식으로 명시된 것은 아니지만, SVG
image
요소는 img
요소와 거의
동일하게 구현될 것으로 예상됩니다. 즉, SVG
image
요소는 img
요소와 기본
개념과 기능을 공유합니다.
ImageBitmap
인터페이스는
ImageData
를 포함한 여러 이미지
표현 타입에서 생성할 수 있습니다.
image 인수의 사용 가능 여부를 확인하려면, image가 CanvasImageSource
객체인 경우 다음 단계를 실행합니다:
image에 따라 전환합니다:
HTMLOrSVGImageElement
InvalidStateError
" DOMException
을
발생시킵니다.
HTMLVideoElement
readyState
속성이 HAVE_NOTHING
또는 HAVE_METADATA
라면,
bad를 반환합니다.
HTMLCanvasElement
OffscreenCanvas
InvalidStateError
" DOMException
을
발생시킵니다.ImageBitmap
VideoFrame
InvalidStateError
" DOMException
을
발생시킵니다.good을 반환합니다.
CanvasImageSource
객체가 HTMLOrSVGImageElement
을
나타내는 경우, 요소의 이미지는 소스 이미지로 사용됩니다.
특히, CanvasImageSource
객체가 HTMLOrSVGImageElement
에서
애니메이션 이미지를 나타내는 경우, 사용자 에이전트는 애니메이션을 지원하지 않거나 비활성화된 경우 사용하기로 정의된 기본 이미지를 사용하거나, 그러한 이미지가 없으면, CanvasRenderingContext2D
API를 사용하여 이미지를 렌더링할 때 애니메이션의 첫 번째 프레임을 사용해야 합니다.
CanvasImageSource
객체가 HTMLVideoElement
을
나타내는 경우, 해당 인수로 메서드를 호출할 때 현재 재생 위치의 프레임이 CanvasRenderingContext2D
API를 사용하여 이미지를 렌더링할 때 소스 이미지로 사용되며, 소스 이미지의 크기는 자연 너비 및 자연 높이여야 합니다.
CanvasImageSource
객체가 HTMLCanvasElement
을
나타내는 경우, 요소의 비트맵이 소스 이미지로 사용됩니다.
CanvasImageSource
객체가 렌더링 중인 요소를 나타내며 해당 요소가 크기 조정된 경우, 소스 이미지의 원본 이미지 데이터가 사용되어야 하며, 렌더링된 이미지가 아닌 소스 요소의 너비
및 높이
속성은 CanvasRenderingContext2D
API를 사용하여 이미지를 렌더링할 때 해당 객체를 해석하는 방식에 영향을 주지 않습니다.
CanvasImageSource
객체가 ImageBitmap
을
나타내는 경우, 객체의 비트맵 이미지 데이터가 소스 이미지로 사용되어야 합니다.
CanvasImageSource
객체가 OffscreenCanvas
을
나타내는 경우, 객체의 비트맵이 소스 이미지로 사용되어야 합니다.
CanvasImageSource
객체가 VideoFrame
을
나타내는 경우, 객체의 픽셀 데이터가 소스 이미지로 사용되어야 하며, 소스 이미지의 크기는 객체의 [[display width]] 및 [[display height]]이어야 합니다.
image 객체가 원본이 깨끗하지 않은 경우 image 유형에 따라 전환합니다:
HTMLOrSVGImageElement
HTMLVideoElement
HTMLCanvasElement
ImageBitmap
OffscreenCanvas
context.fillStyle [ = value ]
CanvasRenderingContext2D/fillStyle
모든 현재 엔진에서 지원됩니다.
도형을 채우는 데 사용되는 현재 스타일을 반환합니다.
설정 가능하며, 채우기 스타일을 변경할 수 있습니다.
스타일은 CSS 색상을 포함하는 문자열이거나 CanvasGradient
또는
CanvasPattern
객체일 수 있습니다.
잘못된 값은 무시됩니다.
context.strokeStyle [ = value ]
CanvasRenderingContext2D/strokeStyle
모든 현재 엔진에서 지원됩니다.
도형의 외곽선을 그리는 데 사용되는 현재 스타일을 반환합니다.
설정 가능하며, 외곽선 스타일을 변경할 수 있습니다.
스타일은 CSS 색상을 포함하는 문자열이거나 CanvasGradient
또는
CanvasPattern
객체일 수 있습니다.
잘못된 값은 무시됩니다.
CanvasFillStrokeStyles
인터페이스를 구현하는 객체는 도형이 객체에 의해 처리되는 방법을 제어하는 속성과 메서드를 가지고 있습니다.
이러한 객체에는 CSS 색상, CanvasPattern
또는
CanvasGradient
값을 갖는 연관된
채우기 스타일 및 외곽선 스타일 값이 있습니다. 초기에는 둘 다 문자열 "#000000
"를
파싱한
결과여야 합니다.
값이 CSS 색상인 경우 비트맵에 그릴 때 변환 행렬의 영향을 받아서는 안 됩니다.
CanvasPattern
또는
CanvasGradient
객체로 설정된 경우,
할당 후 객체에 대한 변경 사항은 이후 도형의 외곽선이나 채우기에 영향을 미칩니다.
fillStyle
getter 단계는 다음과 같습니다:
fillStyle
setter 단계는 다음과 같습니다:
지정된 값이 문자열인 경우:
지정된 값이 CanvasPattern
객체이고 기원이 청정하지 않음으로 표시된 경우,
this의 기원 청정 플래그를 false로 설정합니다.
strokeStyle
getter 단계는 다음과 같습니다:
만약 this의 stroke 스타일이 CSS 색상이라면, 그 색상의 직렬화를 HTML 호환 직렬화 요청됨과 함께 반환합니다.
strokeStyle
setter 단계는 다음과 같습니다:
지정된 값이 문자열인 경우:
지정된 값이 CanvasPattern
객체이고 기원이 청정하지 않음으로
표시된 경우,
this의 기원 청정 플래그를
false로 설정합니다.
그라데이션은 선형 그라데이션, 방사형 그라데이션 및 원뿔형 그라데이션의 세 가지 유형이 있으며, 불투명 CanvasGradient
인터페이스를 구현하는 객체로 표현됩니다.
그라데이션이 생성된 후(아래 참조), 그라데이션을 따라 색상이 분포되는 방식을 정의하기 위해 스톱이 배치됩니다. 각 스톱에서의 그라데이션 색상은 해당 스톱에 대해 지정된 색상입니다. 각 스톱 사이에서 색상과 알파 구성 요소는 알파 값을 미리 곱하지 않고 RGBA 공간에서 선형 보간되어 해당 오프셋에서 사용할 색상을 찾습니다. 첫 번째 스톱 이전에는 색상이 첫 번째 스톱의 색상이 되어야 합니다. 마지막 스톱 이후에는 색상이 마지막 스톱의 색상이 되어야 합니다. 스톱이 없을 때 그라데이션은 투명한 검정색입니다.
gradient.addColorStop(offset, color)
모든 현재 엔진에서 지원됩니다.
지정된 색상을 주어진 오프셋의 그라데이션에 색상 스톱으로 추가합니다. 0.0은 그라데이션의 한쪽 끝의 오프셋이고, 1.0은 반대쪽 끝의 오프셋입니다.
"IndexSizeError
" DOMException
예외가 오프셋이 범위를 벗어나는 경우 던져집니다. "SyntaxError
" DOMException
예외는
색상을 구문 분석할 수 없는 경우 던져집니다.
gradient = context.createLinearGradient(x0, y0, x1, y1)
CanvasRenderingContext2D/createLinearGradient
모든 현재 엔진에서 지원됩니다.
주어진 좌표로 표현된 선을 따라 페인팅하는 선형 그라데이션을 나타내는 CanvasGradient
객체를 반환합니다.
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)
CanvasRenderingContext2D/createRadialGradient
모든 현재 엔진에서 지원됩니다.
주어진 좌표로 표현된 두 원 사이의 원뿔을 따라 페인팅하는 방사형 그라데이션을 나타내는 CanvasGradient
객체를 반환합니다.
반지름 중 하나라도 음수인 경우, "IndexSizeError
"
DOMException
예외를 던집니다.
gradient = context.createConicGradient(startAngle, x, y)
CanvasRenderingContext2D/createConicGradient
모든 현재 엔진에서 지원됩니다.
주어진 좌표의 중심을 기준으로 시계 방향으로 페인팅하는 원뿔형 그라데이션을 나타내는 CanvasGradient
객체를 반환합니다.
addColorStop(offset,
color)
메서드는 CanvasGradient
객체에 호출될 때
다음 단계를 수행해야 합니다:
offset이 0보다 작거나 1보다 크면 "IndexSizeError
" DOMException
예외를 던집니다.
parsed color는 파싱 color의 결과로 얻어집니다.
CanvasGradient
객체는
canvas
와 무관하기 때문에
파서에 요소가 전달되지 않습니다 — 하나의 CanvasGradient
객체가 다른
canvas
에서 사용될 수
있으며, 색상이 지정될 때 "문제의 요소"가 무엇인지 알 수 있는 방법이 없습니다.
parsed color가 실패하면 "SyntaxError
" DOMException
예외를 던집니다.
그라데이션의 전체에 대해 offset에 새로운 스톱을 배치하고, 색상 parsed color를 사용합니다.
하나의 그라데이션에 여러 스톱이 동일한 오프셋에 추가된 경우, 첫 번째 스톱이 그라데이션의 시작 부분에 가장 가깝게 배치되어야 하며, 각 후속 스톱은 점점 더 끝 점에 가깝게 배치되어야 합니다(사실상 각 지점에서 추가된 첫 번째와 마지막 스톱만 제외하고 무시됩니다).
createLinearGradient(x0, y0,
x1, y1)
메서드는 시작점(x0, y0)과 종료점(x1, y1)을
나타내는 네 개의 인수를 사용합니다.
메서드는 호출될 때, 지정된 선으로 초기화된 선형 CanvasGradient
객체를 반환해야 합니다.
선형 그라데이션은 시작점과 종료점이 교차하는 선에 수직인 선의 모든 점이 그 지점에서 두 선이 교차하는 지점의 색상을 갖도록 렌더링되어야 합니다(색상은 보간 및 외삽에서 설명된 대로 옵니다). 선형 그라데이션의 점은 렌더링할 때 현재 변환 행렬에 의해 설명된 대로 변환되어야 합니다.
x0 = x1이고 y0 = y1인 경우, 선형 그라데이션은 아무 것도 페인팅하지 않아야 합니다.
createRadialGradient(x0, y0,
r0, x1, y1, r1)
메서드는 여섯 개의 인수를 사용합니다. 처음 세 개는
원점(x0,
y0)과 반지름 r0을 갖는 시작 원을 나타내며, 마지막 세 개는 원점(x1, y1)과 반지름 r1을
갖는
종료 원을 나타냅니다. 값은 좌표 공간 단위입니다. r0 또는 r1 중 하나라도 음수인 경우,
"IndexSizeError
" DOMException
예외가 던져져야 합니다. 그렇지 않으면,
메서드는 호출될 때, 두 지정된 원으로 초기화된 방사형 CanvasGradient
객체를 반환해야 합니다.
방사형 그라데이션은 다음 단계를 따르며 렌더링되어야 합니다:
x0 = x1이고 y0 = y1이고 r0 = r1인 경우, 방사형 그라데이션은 아무 것도 페인팅하지 않아야 합니다. 반환합니다.
다음과 같이 합니다: x(ω) = (x1-x0)ω + x0
다음과 같이 합니다: y(ω) = (y1-y0)ω + y0
다음과 같이 합니다: r(ω) = (r1-r0)ω + r0
ω에서의 색상은 그라데이션의 해당 위치에서의 색상입니다 (색상은 보간 및 외삽에서 설명된 대로 옵니다).
r(ω) > 0인 ω 값에 대해, 양의 무한대에 가장 가까운 ω 값부터 시작하여 음의 무한대에 가장 가까운 ω 값으로 끝나는 동안, 이전 원들에 의해 아직 페인팅되지 않은 비트맵의 부분에 대해서만 해당 원의 원주를 그립니다.
이는 효과적으로 두 원으로 정의된 그라데이션의 원뿔을 생성하며, 원뿔의 시작 원(0.0) 이전 부분은 첫 번째 오프셋의 색상을 사용하고, 종료 원(1.0) 이후 부분은 마지막 오프셋의 색상을 사용하며, 그라데이션 외부의 영역은 그라데이션에 의해 터치되지 않습니다(투명한 검정색).
그라데이션은 렌더링 시 현재 변환 행렬에 의해 설명된 대로 변환되어야 합니다.
createConicGradient(startAngle,
x, y)
메서드는 세 개의 인수를 사용합니다. 첫 번째 인수인 startAngle은 그라데이션이 시작되는 라디안 단위의 각도를
나타내고, 마지막
두 개의 인수(x, y)는 CSS
픽셀에서 그라데이션의 중심을 나타냅니다. 메서드는 호출될 때, 지정된 중심과 각도로 초기화된 원뿔형
CanvasGradient
객체를 반환해야 합니다.
이는 CSS 'conic-gradient'와 동일한 렌더링 규칙을 따르며, CSS 'conic-gradient(from adjustedStartAnglerad at xpx ypx, angularColorStopList)'와 동일합니다. 여기서:
adjustedStartAngle은 startAngle + π/2로 주어집니다;
angularColorStopList은 CanvasGradient
에 추가된 색상 스톱에 의해 제공됩니다.
addColorStop()
을 사용하여, 색상 스톱 오프셋은 백분율로 해석됩니다.
그라데이션은 관련된 외곽선 또는 채우기 효과가 그라데이션을 그릴 것을 요구하는 경우에만 그려야 합니다.
패턴은 불투명 CanvasPattern
인터페이스를 구현하는 객체로 표현됩니다.
pattern = context.createPattern(image, repetition)
CanvasRenderingContext2D/createPattern
모든 현재 엔진에서 지원됩니다.
주어진 이미지와 repetition 인수에 따라 지정된 방향으로 반복되는 CanvasPattern
객체를 반환합니다.
repetition의 허용된 값은 repeat
(양방향), repeat-x
(수평 방향만),
repeat-y
(수직 방향만), no-repeat
(반복 없음)입니다. repetition 인수가 비어 있으면,
repeat
값이 사용됩니다.
이미지가 아직 완전히 디코딩되지 않은 경우, 아무 것도 그려지지 않습니다. 이미지가 데이터가 없는 캔버스인 경우, "InvalidStateError
" DOMException
예외가 던져집니다.
pattern.setTransform(transform)
모든 현재 엔진에서 지원됩니다.
채우기 또는 외곽선 페인팅 작업 중 패턴을 렌더링할 때 사용할 변환 행렬을 설정합니다.
createPattern(image,
repetition)
메서드는 호출될 때, 다음 단계를 수행해야 합니다:
usability를 이미지 인수의 사용 가능성을 확인한 결과로 설정합니다.
usability가 나쁨이면 null을 반환합니다.
단언: usability가 좋음입니다.
repetition이 빈 문자열이면 "repeat
"로 설정합니다.
repetition이 "repeat
", "repeat-x
", "repeat-y
",
또는 "no-repeat
"와 일치하지 않는
경우, "SyntaxError
" DOMException
예외를 던집니다.
image와 repetition에 따라 이미지의 반복 동작을 지정하는 새 CanvasPattern
객체로 pattern을 설정합니다.
image가 기원이 청정하지 않음인 경우, pattern을 기원이 청정하지 않음으로 표시합니다.
pattern을 반환합니다.
CanvasPattern
객체를 생성할 때 사용된 image를 createPattern()
메서드를 호출한 후 수정해도 CanvasPattern
객체에 의해 렌더링되는 패턴에 영향을 미쳐서는 안 됩니다.
패턴에는 변환 행렬이 있으며, 이 행렬은 패턴이 페인팅될 때 패턴의 사용 방식을 제어합니다. 처음에는 패턴의 변환 행렬이 단위 행렬이어야 합니다.
setTransform(transform)
메서드는
호출될 때, 다음 단계를 수행해야 합니다:
matrix를 2D 사전에서 DOMMatrix
생성한 결과로
설정합니다.
하나 이상의 matrix m11 요소, m12 요소, m21 요소, m22 요소, m41 요소, 또는 m42 요소가 무한대이거나 NaN인 경우, 반환합니다.
패턴의 변환 행렬을 matrix로 재설정합니다.
패턴이 영역 내에 렌더링될 때, 사용자 에이전트는 렌더링될 내용을 결정하기 위해 다음 단계를 수행해야 합니다:
무한한 투명한 검정색 비트맵을 생성합니다.
이미지의 왼쪽 위 모서리가 좌표 공간의 원점에 고정되도록 비트맵에 이미지를 복사하여 배치하고, 이미지의 CSS
픽셀당 하나의 좌표 공간 단위를 사용하여, repeat-x
반복 동작이면 왼쪽과 오른쪽에, repeat-y
반복 동작이면
위쪽과 아래쪽에, repeat
반복 동작이면 비트맵 전체에 이 이미지를 반복하여 배치합니다.
원본 이미지 데이터가 비트맵 이미지인 경우, 반복된 영역의 각 지점에 그려지는 값은 원본 이미지 데이터를 필터링하여 계산됩니다. 확대할 때, imageSmoothingEnabled
속성이 false로 설정된 경우, 이미지가 최근린 이웃 보간법을 사용하여 렌더링되어야 합니다. 그렇지 않으면,
사용자 에이전트는 어떤 필터링 알고리즘(예: 양선형 보간법 또는 최근린 이웃 보간법)을 사용할 수 있습니다. 여러 필터링 알고리즘을 지원하는 사용자 에이전트는 imageSmoothingQuality
속성의 값을 사용하여 필터링 알고리즘의 선택을 안내할 수 있습니다. 이러한 필터링 알고리즘이 원본 이미지 데이터 외부의 픽셀 값을 필요로 하는 경우, 원본 이미지의 크기로 픽셀의 좌표를
래핑하여 해당 값을 대신 사용해야 합니다. (즉, 필터는 패턴의 반복 동작 값에 관계없이 'repeat' 동작을 사용합니다.)
패턴의 변환 행렬에 따라 결과 비트맵을 변환합니다.
현재 변환 행렬에 따라 결과 비트맵을 다시 변환합니다.
패턴이 렌더링될 영역 외부의 이미지를 투명한 검정색으로 교체합니다.
결과 비트맵이 렌더링될 내용이며, 동일한 원점과 동일한 크기를 갖습니다.
변환 행렬이 단수인 경우, 방사형 그라데이션 또는 반복된 패턴을 사용할 때 결과 스타일은 투명한 검정색이어야 합니다 (그렇지 않으면 그라데이션이나 패턴이 점 또는 선으로 축소되어 다른 픽셀은 정의되지 않은 상태로 남게 됩니다). 선형 그라데이션과 단색은 단수 변환 행렬에서도 항상 모든 점을 정의합니다.
CanvasRect
인터페이스를 구현하는 객체는
비트맵에 사각형을 즉시 그리기 위한 다음 메서드를 제공합니다. 각 메서드는 네 개의 인수를 받으며, 처음 두 개는 사각형의 왼쪽 위 모서리의 x 및 y 좌표를
나타내고, 나머지 두 개는 각각 사각형의 너비 w와 높이 h를 나타냅니다.
다음 네 좌표에 현재 변환 행렬을 적용해야 하며, 이 좌표들은 지정된 사각형을 얻기 위해 경로를 닫아야 합니다: (x, y), (x+w, y), (x+w, y+h), (x, y+h).
도형은 현재 기본 경로에 영향을 주지
않고 그려지며, 클리핑 영역 및 clearRect()
를
제외한 그림자 효과, 전역 알파,
그리고 현재 합성 및 블렌딩 연산자의 영향을 받습니다.
context.clearRect(x, y, w, h)
CanvasRenderingContext2D/clearRect
모든 현재 엔진에서 지원됩니다.
지정된 사각형 내의 모든 픽셀을 투명한 검정색으로 지웁니다.
context.fillRect(x, y, w, h)
CanvasRenderingContext2D/fillRect
모든 현재 엔진에서 지원됩니다.
현재 채우기 스타일을 사용하여 지정된 사각형을 비트맵에 그립니다.
context.strokeRect(x, y, w, h)
CanvasRenderingContext2D/strokeRect
모든 현재 엔진에서 지원됩니다.
현재 선 스타일을 사용하여 지정된 사각형의 외곽선을 비트맵에 그립니다.
clearRect(x, y, w, h)
메서드는 호출될 때, 다음 단계를 수행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
pixels을 현재 클리핑 영역과 교차하는 지정된 사각형 내의 픽셀 집합으로 설정합니다.
pixels의 픽셀을 투명한 검정색으로 지우고, 이전 이미지를 삭제합니다.
높이 또는 너비가 0인 경우, 픽셀 집합이 비어 있기 때문에 이 메서드는 아무런 효과가 없습니다.
fillRect(x, y, w, h)
메서드는 호출될 때, 다음 단계를 수행해야 합니다:
strokeRect(x, y, w, h)
메서드는 호출될 때, 다음 단계를 수행해야 합니다:
인수 중 하나라도 무한대이거나 NaN인 경우, 반환합니다.
아래에 설명된 경로 추적 결과를 사용하고, CanvasPathDrawingStyles
인터페이스의 선 스타일을 사용하여 경로를 그립니다.
w와 h가 모두 0인 경우, 경로에는 x, y로 이루어진 한 개의 점만 있는 단일 하위 경로가 있으며, 이 메서드는 아무런 효과가 없습니다(이 경우 경로 추적 알고리즘이 빈 경로를 반환합니다).
w 또는 h 중 하나만 0인 경우, 경로에는 x, y 좌표와 x+w, y+h 좌표로 이루어진 두 개의 점으로 이루어진 단일 하위 경로가 있으며, 이 두 점은 단일 직선으로 연결됩니다.
그 외의 경우, 경로에는 x, y 좌표, x+w, y 좌표, x+w, y+h 좌표, 그리고 x, y+h 좌표로 이루어진 네 개의 점으로 이루어진 단일 하위 경로가 있으며, 이 점들은 직선으로 순서대로 연결됩니다.
모든 현재 엔진에서 지원됩니다.
context.fillText(text, x, y [, maxWidth ])
CanvasRenderingContext2D/fillText
모든 현재 엔진에서 지원됩니다.
context.strokeText(text, x, y [, maxWidth ])
CanvasRenderingContext2D/strokeText
모든 현재 엔진에서 지원됩니다.
주어진 위치에 지정된 텍스트를 각각 채우거나 윤곽선을 그립니다. 최대 너비가 제공된 경우, 텍스트는 필요에 따라 해당 너비에 맞도록 조정됩니다.
metrics = context.measureText(text)
CanvasRenderingContext2D/measureText
모든 현재 엔진에서 지원됩니다.
현재 글꼴의 지정된 텍스트에 대한 메트릭스 객체인 TextMetrics
를 반환합니다.
metrics.width
모든 현재 엔진에서 지원됩니다.
metrics.actualBoundingBoxLeft
TextMetrics/actualBoundingBoxLeft
모든 현재 엔진에서 지원됩니다.
metrics.actualBoundingBoxRight
TextMetrics/actualBoundingBoxRight
모든 현재 엔진에서 지원됩니다.
metrics.fontBoundingBoxAscent
TextMetrics/fontBoundingBoxAscent
모든 현재 엔진에서 지원됩니다.
metrics.fontBoundingBoxDescent
TextMetrics/fontBoundingBoxDescent
모든 현재 엔진에서 지원됩니다.
metrics.actualBoundingBoxAscent
TextMetrics/actualBoundingBoxAscent
모든 현재 엔진에서 지원됩니다.
metrics.actualBoundingBoxDescent
TextMetrics/actualBoundingBoxDescent
모든 현재 엔진에서 지원됩니다.
metrics.emHeightAscent
모든 현재 엔진에서 지원됩니다.
metrics.emHeightDescent
모든 현재 엔진에서 지원됩니다.
metrics.hangingBaseline
metrics.alphabeticBaseline
TextMetrics/alphabeticBaseline
metrics.ideographicBaseline
TextMetrics/ideographicBaseline
아래에서 설명된 측정을 반환합니다.
CanvasText
인터페이스를 구현하는 객체는 텍스트 렌더링을
위한 다음의 메서드를 제공합니다.
fillText(text, x, y, maxWidth)
및 strokeText(text, x, y, maxWidth)
메서드는 지정된 text를 지정된 (x, y) 좌표에 렌더링하며, maxWidth가 지정된 경우 텍스트의 너비가 이를
초과하지 않도록 보장합니다. 현재의 font
, textAlign
,
및 textBaseline
값을 사용합니다. 구체적으로, 메서드가 호출될 때 사용자 에이전트는 다음 단계들을 수행해야 합니다:
인수 중 하나라도 무한대나 NaN인 경우, 반환합니다.
텍스트 준비
알고리즘을 실행하여, text, CanvasText
인터페이스를 구현하는 객체,
그리고 maxWidth 인수가 제공된 경우, 그 인수를 전달합니다. 결과를 glyphs로 합니다.
현재 변환 행렬에 의해 변환된 도형을, glyphs의 좌표 공간에서 한 좌표 공간 단위에 매핑하여 페인트합니다.
fillText()
의
경우, this의 채우기 스타일을 도형에 적용하고, this의 선 스타일은 무시합니다. strokeText()
의
경우에는 반대로, this의 선 스타일을 CanvasText
인터페이스를 구현하는 객체의
선 스타일로 적용하며, this의 채우기 스타일은 무시합니다.
이 도형들은 현재 경로에 영향을 주지 않고 페인트되며, 그림자 효과, 전역 알파, 클리핑 영역, 그리고 현재 합성 및 블렌딩 연산자의 영향을 받습니다.
measureText(text)
메서드의 단계는 텍스트 준비 알고리즘을
실행하여 text 및 CanvasText
인터페이스를 구현하는 객체를 전달한 다음
반환된 인라인 박스를 사용하여, 다음 목록에서 설명한 대로 구성원들이 동작하는 새 TextMetrics
객체를 반환해야 합니다: [CSS]
width
속성
actualBoundingBoxLeft
속성textAlign
속성으로 지정된 정렬 지점에서 주어진 텍스트의 바운딩 사각형 왼쪽까지의 베이스라인과 평행한 거리, CSS 픽셀 단위입니다. 양수는 지정된 정렬 지점에서
왼쪽으로의 거리를 나타냅니다.
이 값과 다음 값(actualBoundingBoxRight
)의
합은 인라인 박스(width
)의
너비보다 넓을 수 있습니다. 특히, 기울어진 글꼴의 경우 문자들이 그들의 전진 너비를 넘어서 연장될 수 있습니다.
actualBoundingBoxRight
속성textAlign
속성으로 지정된 정렬 지점에서 주어진 텍스트의 바운딩 사각형 오른쪽까지의 베이스라인과 평행한 거리, CSS 픽셀 단위입니다. 양수는 지정된 정렬 지점에서
오른쪽으로의 거리를 나타냅니다.
fontBoundingBoxAscent
속성textBaseline
속성으로 표시된 수평선에서 상승 메트릭까지의
거리, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인에서 위쪽으로의 거리를 나타냅니다.
이 값과 다음 값은 렌더링되는 텍스트가 변경되더라도 배경이 일정한 높이를 유지해야 할 때 유용합니다. actualBoundingBoxAscent
속성(및 내림에 대한 해당 속성)은 특정 텍스트 주위에 바운딩 박스를 그릴 때 유용합니다.
fontBoundingBoxDescent
속성textBaseline
속성으로 표시된 수평선에서 하강
메트릭까지의 거리, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인에서
아래쪽으로의 거리를 나타냅니다.
actualBoundingBoxAscent
속성textBaseline
속성으로 표시된 수평선에서 주어진 텍스트의 바운딩 사각형 상단까지의 거리, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인에서
위쪽으로의 거리를 나타냅니다.
이 숫자는 입력 텍스트에 따라 크게 달라질 수 있습니다. 예를 들어, 알파벳 소문자 "o"의 actualBoundingBoxAscent
는
대문자 "F"의 값보다 작을 수 있습니다. 이 값은 쉽게 음수가 될 수 있습니다. 예를 들어, 텍스트가 단일 쉼표 ",
"일 때, em 박스 상단(textBaseline
값 "top
")에서
바운딩 사각형 상단까지의 거리는 (폰트가 매우 특이하지 않는 한) 음수일 가능성이 큽니다.
actualBoundingBoxDescent
속성textBaseline
속성으로 표시된 수평선에서 주어진 텍스트의 바운딩 사각형 하단까지의 거리, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인에서
아래쪽으로의 거리를 나타냅니다.
emHeightAscent
속성textBaseline
속성으로 표시된 수평선에서 em 사각형 상단까지의 거리, 인라인 박스 내에서, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인이 해당 em 사각형 상단보다 아래에 있음을 나타냅니다(따라서 이 값은 보통
양수입니다). 주어진 베이스라인이 해당 em 사각형의 상단인 경우 0, 주어진 베이스라인이 해당 em 사각형의 중간인 경우 폰트 크기의 절반입니다.
emHeightDescent
속성textBaseline
속성으로 표시된 수평선에서 em 사각형 하단까지의 거리, 인라인 박스 내에서, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인이 해당 em 사각형 하단보다 위에 있음을 나타냅니다(따라서 이 값은 보통
양수입니다). 주어진 베이스라인이 해당 em 사각형의 하단인 경우 0입니다.
hangingBaseline
속성textBaseline
속성으로 표시된 수평선에서 걸이
베이스라인까지의 거리, 인라인 박스 내에서, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인이 걸이
베이스라인보다 아래에 있음을 나타냅니다(따라서 이 값은 보통 양수입니다). 주어진 베이스라인이 걸이
베이스라인인 경우 0입니다.
alphabeticBaseline
속성textBaseline
속성으로 표시된 수평선에서 알파벳 베이스라인까지의 거리, 인라인 박스 내에서, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인이 알파벳 베이스라인보다 아래에 있음을 나타냅니다. (따라서 이 값은 보통 양수입니다.) 주어진 베이스라인이
알파벳 베이스라인인 경우 0입니다.
ideographicBaseline
속성textBaseline
속성으로 표시된 수평선에서 이데오그래픽 언더 베이스라인까지의 거리, 인라인 박스 내에서, CSS 픽셀 단위입니다. 양수는 지정된 베이스라인이 이데오그래픽 언더 베이스라인보다 아래에 있음을 나타냅니다. (따라서 이 값은 보통 양수입니다.)
주어진 베이스라인이 이데오그래픽 언더 베이스라인인 경우 0입니다.
fillText()
및 strokeText()
를
사용하여 렌더링된 글리프는 글꼴 크기(em 사각형 크기)와 measureText()
(텍스트
너비)에서 제공된 상자를 넘어서 흐를 수 있습니다. 작성자들은 이 문제가 발생할 경우 위에서 설명한 바운딩 박스 값을 사용하는 것이 좋습니다.
2D 컨텍스트 API의 향후 버전은 CSS를 사용하여 렌더링된 문서 조각을 캔버스로 직접 렌더링하는 방법을 제공할 수 있습니다. 이는 멀티라인 레이아웃을 위한 전용 방법보다 우선적으로 제공될 것입니다.
CanvasDrawPath
인터페이스를 구현하는 객체는 현재 기본 경로를 가집니다.
현재 기본 경로는 오직 하나이며,
그리기 상태의 일부가 아닙니다.
현재 기본 경로는
위에서 설명한 것과 같은 경로입니다.
context.beginPath()
CanvasRenderingContext2D/beginPath
모든 현재 엔진에서 지원.
현재 기본 경로를 재설정합니다.
context.fill([ fillRule ])
모든 현재 엔진에서 지원.
context.fill(path [, fillRule ])
현재 기본 경로 또는 주어진 경로의 하위 경로를 현재의 채우기 스타일로, 주어진 채우기 규칙을 준수하여 채웁니다.
context.stroke()
CanvasRenderingContext2D/stroke
모든 현재 엔진에서 지원.
context.stroke(path)
현재 기본 경로 또는 주어진 경로의 하위 경로를 현재의 선 스타일로 윤곽을 그립니다.
context.clip([ fillRule ])
모든 현재 엔진에서 지원.
context.clip(path [, fillRule ])
주어진 채우기 규칙을 사용하여 경로에 어떤 점이 포함되는지 결정하면서 현재 기본 경로 또는 주어진 경로로 클리핑 영역을 추가로 제한합니다.
context.isPointInPath(x, y [, fillRule ])
CanvasRenderingContext2D/isPointInPath
모든 현재 엔진에서 지원.
context.isPointInPath(path, x, y [, fillRule ])
지정된 채우기 규칙을 사용하여 지정된 점이 현재 기본 경로 또는 주어진 경로에 포함되는지 여부를 반환합니다.
context.isPointInStroke(x, y)
CanvasRenderingContext2D/isPointInStroke
모든 현재 엔진에서 지원.
context.isPointInStroke(path, x, y)
지정된 점이 현재 기본 경로 또는 주어진 경로의 스트로크에 의해 덮인 영역에 포함되는지 여부를 반환합니다.
beginPath()
메서드는 this의 현재 기본 경로에서 하위 경로 목록을 비워 다시 하위 경로가 0이 되도록 하는 단계입니다.
다음 메서드 정의에서 의도된 경로라는 용어를 Path2D
-또는-null path에 대해 사용할 때,
이는 path 자체가 Path2D
객체일 경우에는
path를 의미하며, 그렇지 않을 경우 현재 기본 경로를 의미합니다.
의도된 경로가 Path2D
객체일 때, 이 객체의 하위 경로의 좌표와 선은 이 메서드들을
사용할 때 CanvasTransform
인터페이스를 구현하는 객체에 있는 현재 변환 매트릭스에 따라
변환되어야 합니다(단, Path2D
객체 자체에는 영향을 주지
않습니다). 의도된 경로가 현재 기본
경로일 때는 변환의 영향을 받지 않습니다. (이는 변환이 이미 현재 기본 경로가 구성될 때 영향을 주므로, 그리기 시에도 적용하면 이중 변환이 발생할
수 있기 때문입니다.)
fill(fillRule)
메서드 단계는 채우기 단계를 this, null, 및 fillRule에 대해
실행하는 것입니다.
fill(path, fillRule)
메서드 단계는 채우기 단계를 this, path, 및 fillRule에 대해 실행하는 것입니다.
채우기 단계는 CanvasDrawPath
context, Path2D
-또는-null
path, 및 채우기 규칙 fillRule이
주어졌을 때, path에 대한 의도된 경로의 모든
하위 경로를 context의 채우기 스타일을 사용하여,
fillRule에 의해 표시된 채우기 규칙을 사용하여 채우는
것입니다. 열려 있는 하위 경로는 암묵적으로 닫혀야 합니다(실제 하위 경로에는 영향을 미치지 않습니다).
stroke()
메서드
단계는 선 그리기 단계를 this와 null을 주어 실행하는 것입니다.
stroke(path)
메서드 단계는 선 그리기 단계를 this와 path에 대해 실행하는 것입니다.
선 그리기 단계는 CanvasDrawPath
context와 Path2D
-또는-null
path이 주어졌을 때, context의 선 스타일을 사용하여 의도된 경로를 추적한 후, context의 선 스타일을 사용하여 결과 경로를 채우는 것입니다.
이때 nonzero winding 규칙을 사용합니다.
경로를 추적하는 알고리즘이 정의된 방식으로 인해, 하나의 선 그리기 작업에서 경로의 중첩된 부분은 그들의 합집합이 칠해진 것처럼 처리됩니다.
선 스타일은 현재 기본 경로를 사용하는 경우에도 그리기 중에 변환의 영향을 받습니다.
경로는 채워지거나 그려질 때 현재 기본
경로나 Path2D
객체에 영향을 주지 않고 그려져야
하며, 그림자 효과, 글로벌 알파, 클리핑 영역, 및 현재 합성 및 혼합 연산자의 영향을 받아야 합니다.
(변환의 효과는 위에서 설명한 대로 사용되는 경로에 따라 다릅니다.)
clip(fillRule)
메서드 단계는 클립 단계를 this, null, 및 fillRule에 대해
실행하는 것입니다.
clip(path, fillRule)
메서드 단계는 클립 단계를 this, path, 및 fillRule에 대해 실행하는 것입니다.
클립 단계는 CanvasDrawPath
context, Path2D
-또는-null
path, 및 채우기 규칙 fillRule이
주어졌을 때, 의도된 경로에 의해 설명된 영역과
context의 현재 클리핑 영역의 교차를 계산하여 새로운 클리핑 영역을 만드는 것입니다. 열려 있는 하위 경로는 실제 하위
경로에 영향을 미치지 않고, 클리핑 영역을 계산할 때 암묵적으로 닫혀야 합니다. 새 클리핑 영역은 현재 클리핑 영역을 대체합니다.
컨텍스트가 초기화되면, 현재 클리핑 영역은 가장 큰 무한 표면으로 설정되어야 합니다(즉, 기본적으로 클리핑이 발생하지 않음).
isPointInPath(x, y,
fillRule)
메서드 단계는 경로 내 점 확인 단계를 this, null, x, y, 및 fillRule에 대해 실행한 결과를 반환하는
것입니다.
isPointInPath(path, x,
y, fillRule)
메서드 단계는 경로 내 점 확인 단계를 this, path, x, y, 및 fillRule에 대해 실행한
결과를 반환하는 것입니다.
경로 내 점 확인 단계는 CanvasDrawPath
context, Path2D
-또는-null
path, 두 숫자 x와 y, 그리고 채우기 규칙 fillRule이 주어졌을 때, 다음과 같습니다:
x 또는 y가 무한대 또는 NaN이면, false를 반환합니다.
캔버스 좌표 공간에서 현재 변환에 영향을 받지 않는 좌표로 처리될 때 x와 y 좌표에 의해 주어진 점이 path에 대한 의도된 경로 내에 있는 경우 fillRule에 의해 표시된 채우기 규칙에 의해 true를 반환합니다. 열린 하위 경로는 실제 하위 경로에 영향을 미치지 않고, 경로 내부의 영역을 계산할 때 암묵적으로 닫혀야 합니다. 경로 자체에 있는 점은 경로 내부로 간주되어야 합니다.
false를 반환합니다.
isPointInStroke(x, y)
메서드 단계는 스트로크 내 점 확인 단계를
this, null, x, 및 y에 대해 실행한 결과를 반환하는 것입니다.
isPointInStroke(path, x,
y)
메서드 단계는 스트로크 내 점 확인 단계를 this, path, x, 및 y에 대해 실행한 결과를 반환하는 것입니다.
스트로크 내 점 확인 단계는 CanvasDrawPath
context, Path2D
-또는-null
path, 두 숫자 x와 y가 주어졌을 때, 다음과 같습니다:
x 또는 y가 무한대 또는 NaN이면, false를 반환합니다.
캔버스 좌표 공간에서 현재 변환에 영향을 받지 않는 좌표로 처리될 때 x와 y 좌표에 의해 주어진 점이 path에 대한 의도된 경로를 추적하여 얻어진 경로 내부에 있는 경우 nonzero winding 규칙을 사용하여 true를
반환하고, context의 CanvasPathDrawingStyles
믹스인의 선 스타일을 사용합니다. 결과 경로에 있는 점은 경로 내부로 간주되어야 합니다.
false를 반환합니다.
이 canvas
요소에는 두
개의 체크박스가 있습니다. 경로 관련 명령이 강조 표시됩니다:
< canvas height = 400 width = 750 >
< label >< input type = checkbox id = showA > Show As</ label >
< label >< input type = checkbox id = showB > Show Bs</ label >
<!-- ... -->
</ canvas >
< script >
function drawCheckbox( context, element, x, y, paint) {
context. save();
context. font = '10px sans-serif' ;
context. textAlign = 'left' ;
context. textBaseline = 'middle' ;
var metrics = context. measureText( element. labels[ 0 ]. textContent);
if ( paint) {
context. beginPath();
context. strokeStyle = 'black' ;
context. rect( x- 5 , y- 5 , 10 , 10 );
context. stroke();
if ( element. checked) {
context. fillStyle = 'black' ;
context. fill();
}
context. fillText( element. labels[ 0 ]. textContent, x+ 5 , y);
}
context. beginPath();
context. rect( x- 7 , y- 7 , 12 + metrics. width+ 2 , 14 );
context. drawFocusIfNeeded( element);
context. restore();
}
function drawBase() { /* ... */ }
function drawAs() { /* ... */ }
function drawBs() { /* ... */ }
function redraw() {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
context. clearRect( 0 , 0 , canvas. width, canvas. height);
drawCheckbox( context, document. getElementById( 'showA' ), 20 , 40 , true );
drawCheckbox( context, document. getElementById( 'showB' ), 20 , 60 , true );
drawBase();
if ( document. getElementById( 'showA' ). checked)
drawAs();
if ( document. getElementById( 'showB' ). checked)
drawBs();
}
function processClick( event) {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
var x = event. clientX;
var y = event. clientY;
var node = event. target;
while ( node) {
x -= node. offsetLeft - node. scrollLeft;
y -= node. offsetTop - node. scrollTop;
node = node. offsetParent;
}
drawCheckbox( context, document. getElementById( 'showA' ), 20 , 40 , false );
if ( context. isPointInPath( x, y) )
document. getElementById( 'showA' ). checked = ! ( document. getElementById( 'showA' ). checked);
drawCheckbox( context, document. getElementById( 'showB' ), 20 , 60 , false );
if ( context. isPointInPath( x, y) )
document. getElementById( 'showB' ). checked = ! ( document. getElementById( 'showB' ). checked);
redraw();
}
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'focus' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'blur' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'change' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'click' , processClick, false );
redraw();
</ script >
context.drawFocusIfNeeded(element)
CanvasRenderingContext2D/drawFocusIfNeeded
모든 현재 엔진에서 지원.
element가 포커스된 경우, 플랫폼의 포커스 링 규칙을 따라 현재 기본 경로 주위에 포커스 링을 그립니다.
context.drawFocusIfNeeded(path, element)
element가 포커스된 경우, 플랫폼의 포커스 링 규칙을 따라 path 주위에 포커스 링을 그립니다.
CanvasUserInterface
인터페이스를 구현하는 객체는 포커스 링을 그리기 위한 다음 메서드를 제공합니다.
drawFocusIfNeeded(element)
메서드 단계는 필요 시 포커스 그리기 단계를 this,
element, 및 this의 현재 기본 경로를 주어 실행하는 것입니다.
drawFocusIfNeeded(path, element)
메서드 단계는 필요 시
포커스 그리기 단계를 this, element, 및
path를 주어 실행하는 것입니다.
객체가 CanvasUserInterface
를
구현할 때, context, 요소 element, 및 경로 path가 주어졌을 때, 필요 시 포커스를 그리기 위한 단계는 다음과 같습니다:
element가 포커스된 상태가 아니거나,
context의 canvas
요소의 하위 요소가 아닌 경우, 반환합니다.
플랫폼 규칙에 따라 path를 따라 적절한 스타일의 포커스 링을 그립니다.
일부 플랫폼에서는 키보드로 포커스된 요소에만 포커스 링을 그리고, 마우스로 포커스된 요소에는 그리지 않습니다. 다른 플랫폼에서는 관련 접근성 기능이 활성화되지 않으면
특정 요소 주위에 포커스 링을 그리지 않습니다. 이 API는 이러한 규칙을 따르도록 설계되었습니다. 요소가 포커스된 방식에 따라 구분하는 사용자 에이전트는 focus()
메서드를 사용하여 호출된 경우 사용자 상호작용 이벤트의 종류에 따라 포커스를 분류하는 것을 권장합니다(해당 이벤트가 있는 경우).
포커스 링은 그림자 효과, 글로벌 알파, 현재 합성
및 혼합 연산자, 채우기
스타일, 선
스타일, 또는 CanvasPathDrawingStyles
,
CanvasTextDrawingStyles
인터페이스의 멤버의 영향을 받지 않아야 하지만, 클리핑 영역의 영향을 받아야
합니다. (변환의 효과는 위에서 설명한 대로 사용되는 경로에 따라 다릅니다.)
사용자에게 알림은 의도된 경로에 따라 포커스가 위치하는 것을 사용자에게 알립니다. 사용자 에이전트는 다음에 이벤트 루프가 렌더링 업데이트 단계를 도달할 때까지 기다렸다가 선택적으로 사용자에게 알릴 수 있습니다.
사용자 에이전트는 포커스 링을 그릴 때 의도된 경로에서 열린 하위 경로를 암묵적으로 닫지 않아야 합니다.
그러나 이것은 무의미한 포인트일 수 있습니다. 예를 들어, 포커스 링이 의도된 경로의 점 주위에 축 정렬된 경계 사각형으로 그려지면 하위 경로가 닫혔는지 여부는 아무런 영향을 미치지 않습니다. 이 사양은 포커스 링이 그려지는 방식을 명확히 규정하지 않으며, 사용자 에이전트가 플랫폼의 기본 규칙을 준수할 것으로 기대합니다.
이 섹션에서 사용된 "사용자에게 알림"은 영구적인 상태 변화를 의미하지 않습니다. 예를 들어, 시스템 접근성 API를 호출하여 확대 도구와 같은 보조 기술에 알리고 사용자의 확대기가 캔버스의 해당 영역으로 이동하도록 할 수 있습니다. 그러나 이 경로를 요소와 연관시키거나 촉각 피드백 영역을 제공하지는 않습니다.
CanvasDrawImage
인터페이스를 구현하는 객체는 이미지를
그리기 위한 drawImage()
메서드를 가지고 있습니다.
이 메서드는 세 가지 다른 인수 집합으로 호출될 수 있습니다:
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
context.drawImage(image, dx, dy)
CanvasRenderingContext2D/drawImage
모든 현재 엔진에서 지원.
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
주어진 이미지를 캔버스에 그립니다. 인수는 다음과 같이 해석됩니다:
이미지가 아직 완전히 디코딩되지 않은 경우 아무것도 그리지 않습니다. 이미지가 데이터가 없는 캔버스인 경우, "InvalidStateError
" DOMException
을
던집니다.
drawImage()
메서드가
호출되면, 사용자 에이전트는 다음 단계를 실행해야 합니다:
인수 중 하나라도 무한대 또는 NaN인 경우, 반환합니다.
usability를 image의 사용 가능성 확인 결과로 설정합니다.
usability가 나쁨인 경우, 아무것도 그리지 않고 반환합니다.
소스 및 대상 사각형을 다음과 같이 설정합니다:
명시되지 않은 경우, dw 및 dh 인수는 각각 sw 및 sh 값으로 기본 설정되어야 하며, 이미지에서 하나의 CSS 픽셀은 출력 비트맵의 좌표 공간에서 하나의 단위로 처리됩니다. sx, sy, sw 및 sh 인수가 생략된 경우, 이들은 각각 0, 0, 이미지 픽셀 단위의 이미지 자연 너비 및 이미지 자연 높이로 기본 설정되어야 합니다. 이미지에 자연 크기가 없는 경우, 콘크리트 객체 크기 해상도 알고리즘을 사용하여 콘크리트 객체 크기가 대신 사용되어야 합니다. 이때 지정된 크기는 명확한 너비나 높이가 없으며 추가 제약 조건도 없고, 객체의 자연 속성은 image 인수의 속성으로, 기본 객체 크기는 출력 비트맵의 크기로 간주됩니다. [CSSIMAGES]
소스 사각형은 네 점 (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh)로 정의된 사각형입니다.
대상 사각형은 네 점 (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh)로 정의된 사각형입니다.
소스 사각형이 소스 이미지 밖에 있을 경우, 소스 사각형은 소스 이미지에 맞게 잘려야 하며 대상 사각형도 동일한 비율로 잘려야 합니다.
대상 사각형이 대상 이미지(출력 비트맵) 밖에 있을 경우, 출력 비트맵 밖에 위치하는 픽셀은 출력 비트맵의 크기에 맞게 렌더링이 잘린 무한 캔버스로 취급되어 삭제됩니다.
sw 또는 sh 인수 중 하나라도 0이면, 반환합니다. 아무것도 그려지지 않습니다.
image 인수로 지정된 영역을 렌더링 컨텍스트의 출력 비트맵의 대상 사각형에 지정된 영역에 현재 변환 매트릭스를 대상 사각형에 적용한 후 그립니다.
이미지 데이터는 주어진 크기가 음수이더라도 원래 방향으로 처리되어야 합니다.
imageSmoothingEnabled
속성이 true로 설정된 경우, 이미지를 확대할 때 사용자 에이전트는 이미지 데이터에 스무딩 알고리즘을 적용하려고 시도해야 합니다. 여러 필터링 알고리즘을 지원하는 사용자 에이전트는
imageSmoothingQuality
속성의 값을 사용하여 imageSmoothingEnabled
속성이 true로 설정된 경우 필터링 알고리즘을 선택할 수 있습니다. 그렇지 않은 경우, 이미지는 최근접 이웃 보간을 사용하여 렌더링해야 합니다.
이 사양은 이미지를 축소할 때 또는 imageSmoothingEnabled
속성이 true로 설정된 경우 이미지를 확대할 때 사용할 정확한 알고리즘을 정의하지 않습니다.
canvas
요소가 자체에
그려질 때, 그리기 모델은 이미지가 그려지기 전에 소스를 복사해야 하므로,
canvas
요소의 일부를 자체의 중첩된
부분에 복사하는 것이 가능합니다.
원본 이미지 데이터가 비트맵 이미지인 경우, 대상 사각형의 특정 지점에 그려지는 값은 원본 이미지 데이터를 필터링하여 계산됩니다. 사용자 에이전트는 어떤 필터링 알고리즘(예: 이중 선형 보간 또는 최근접 이웃)을 사용할 수 있습니다. 필터링 알고리즘이 원본 이미지 데이터 외부에서 픽셀 값을 필요로 할 때는 대신 가장 가까운 가장자리 픽셀의 값을 사용해야 합니다. (즉, 필터는 '가장자리 고정' 동작을 사용합니다.) 필터링 알고리즘이 소스 사각형 외부이지만 원본 이미지 데이터 내부에서 픽셀 값을 필요로 할 때는 원본 이미지 데이터의 값을 사용해야 합니다.
따라서 이미지를 부분적으로 또는 전체적으로 확대해도 동일한 효과가 나타납니다. 이는 단일 스프라이트 시트에서 나오는 스프라이트를 확대할 때 인접한 이미지가 간섭할 수
있다는 것을 의미합니다. 이것은 시트의 각 스프라이트 주위에 투명한
검정색 테두리가 있거나, 확대할 스프라이트를 임시 canvas
요소에 복사한 다음 거기에서
확대된 스프라이트를 그리는 방식으로 해결할 수 있습니다.
이미지는 현재 경로에 영향을 미치지 않고 그려지며, 그림자 효과, 글로벌 알파, 클리핑 영역, 및 현재 합성 및 혼합 연산자의 영향을 받습니다.
image가 원본이 깨끗하지 않으면, CanvasRenderingContext2D
의
원본-청결 플래그를 false로
설정합니다.
imagedata = new ImageData(sw, sh [, settings])
모든 현재 엔진에서 지원.
지정된 크기와 settings에서 지정된 색상 공간을 가진 ImageData
객체를 반환합니다. 반환된 객체의 모든 픽셀은 투명한 검정색입니다.
너비나 높이 인수가 0인 경우 "IndexSizeError
" DOMException
을
던집니다.
imagedata = new ImageData(data, sw [, sh [, settings ] ])
지정된 데이터와 크기를 사용하여 settings에서 지정된 색상 공간을 가진 ImageData
객체를 반환합니다.
데이터의 각 픽셀은 네 개의 숫자로 표현되므로, 데이터의 길이는 지정된 너비의 네 배가 되어야 합니다. 높이도 제공되는 경우, 길이는 정확히 너비 곱하기 높이 곱하기 4가 되어야 합니다.
주어진 데이터와 크기를 일관되게 해석할 수 없거나, 두 치수 중 하나가 0이면 "IndexSizeError
" DOMException
을
던집니다.
imagedata = context.createImageData(imagedata)
인수와 동일한 크기 및 색상 공간을 가진 ImageData
객체를 반환합니다. 반환된 객체의 모든 픽셀은 투명한
검정색입니다.
imagedata = context.createImageData(sw, sh [, settings])
CanvasRenderingContext2D/createImageData
모든 현재 엔진에서 지원.
지정된 크기를 가진 ImageData
객체를 반환합니다. 반환된
객체의 색상 공간은 settings에서 재정의되지 않는 한, context의 색상 공간입니다. 반환된 객체의 모든 픽셀은 투명한 검정색입니다.
너비나 높이 인수가 0인 경우 "IndexSizeError
" DOMException
을
던집니다.
imagedata = context.getImageData(sx, sy, sw, sh [, settings])
CanvasRenderingContext2D/getImageData
모든 현재 엔진에서 지원.
지정된 비트맵 영역의 이미지 데이터를 포함하는 ImageData
객체를 반환합니다. 반환된 객체의 색상 공간은 settings에서 재정의되지 않는 한, context의 색상 공간입니다.
너비나 높이 인수가 0인 경우 "IndexSizeError
" DOMException
을
던집니다.
imagedata.width
모든 현재 엔진에서 지원.
ImageData 객체의 데이터에서 행당 픽셀 수를 반환합니다.
imagedata.height
모든 현재 엔진에서 지원.
ImageData 객체의 데이터에서 행 수를 반환합니다.
imagedata.data
모든 현재 엔진에서 지원.
0부터 255까지의 정수 값으로 RGBA 순서로 데이터를 포함하는 1차원 배열을 반환합니다.
imagedata.colorSpace
픽셀의 색상 공간을 반환합니다.
context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])
CanvasRenderingContext2D/putImageData
모든 현재 엔진에서 지원.
지정된 ImageData
객체의 데이터를 비트맵에 그립니다.
더러운 사각형이 제공된 경우, 해당 사각형의 픽셀만 그려집니다.
globalAlpha
및 globalCompositeOperation
속성, 그리고 그림자 속성은 이 메서드 호출의 목적을 위해 무시됩니다; 캔버스의 픽셀은 합성,
알파 블렌딩, 그림자 등 없이 전면 교체됩니다.
"InvalidStateError
" DOMException
을
던집니다.
CanvasImageData
인터페이스를 구현하는 객체는
비트맵에 픽셀 데이터를 읽고 쓰기 위한 다음 메서드를 제공합니다.
new ImageData(sw,
sh, settings)
생성자의 단계는 다음과 같습니다:
sw 및 sh 중 하나 또는 둘 다 0이면 "IndexSizeError
" DOMException
을(를)
던집니다.
이 ImageData 객체를 초기화합니다. sw, sh, 및 settings에 설정된 설정을 사용합니다.
new ImageData(data, sw, sh, settings)
생성자의 단계는 다음과 같습니다:
data의 바이트 수를 length로 설정합니다.
length가 4의 비제로 정수 배수가 아니면, "InvalidStateError
" DOMException
을(를)
던집니다.
length를 4로 나눈 값을 length로 설정합니다.
length가 sw의 정수 배수가 아니면, "IndexSizeError
" DOMException
을(를)
던집니다.
이 단계에서 length는 0보다 크다는 것이 보장되므로(위의 두 번째 단계에서 중지하지 않았을 경우), sw가 0인 경우 이 단계에서 예외를 던지고 반환합니다.
height를 length를 sw로 나눈 값으로 설정합니다.
sh가 주어졌고 그 값이 height와 같지 않으면, "IndexSizeError
" DOMException
을(를)
던집니다.
이 ImageData 객체를 초기화합니다. sw, sh, 설정을 settings에 설정하고, 소스를 data로 설정합니다.
이 단계에서는 이 객체의 데이터를 data의 복사본으로 설정하지 않습니다. 실제로 data로 전달된 Uint8ClampedArray
객체로 설정합니다.
createImageData(sw, sh,
settings)
메서드 단계는 다음과 같습니다:
sw 및 sh 중 하나 또는 둘 다 0이면, "IndexSizeError
" DOMException
을(를)
던집니다.
이 newImageData 객체를 초기화합니다. sw 및 sh의 절대 크기, settings에 설정된 설정, 및 이 객체의 색상 공간에 설정된 기본 색상 공간을 사용합니다.
newImageData의 이미지 데이터를 투명한 검정색으로 초기화합니다.
newImageData를 반환합니다.
createImageData(imagedata)
메서드 단계는 다음과 같습니다:
이
newImageData 객체를 초기화합니다. imagedata의 폭
속성 값,
imagedata의 높이
속성 값, 및
imagedata의 색상 공간
속성
값에 설정된 기본 색상 공간을 사용합니다.
newImageData의 이미지 데이터를 투명한 검정색으로 초기화합니다.
newImageData를 반환합니다.
getImageData(sx, sy, sw, sh, settings)
메서드 단계는 다음과 같습니다:
sw 또는 sh 인수가 0이면, "IndexSizeError
" DOMException
을(를)
던집니다.
CanvasRenderingContext2D
의
원본 무결성 플래그가
false로 설정되어 있으면, "SecurityError
" DOMException
을(를)
던집니다.
이 imageData 객체를 초기화합니다. sw, sh, settings에 설정된 설정, 및 this 객체의 색상 공간에 설정된 기본 색상 공간을 사용합니다.
소스 직사각형은 네 점 (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh)으로 구성된 직사각형입니다.
소스 직사각형으로 지정된 영역의 픽셀 값을 imageData의 픽셀 값으로 설정합니다. 비트맵의 좌표 공간 단위로 변환된 소스 직사각형 영역 내의
this 객체의 출력 비트맵의 픽셀 값을 사용합니다.
imageData의 색상 공간
을
this 객체의 색상 공간에서 변환하여 설정합니다. 'relative-colorimetric' 렌더링 의도를 사용합니다.
소스 직사각형의 영역 중 출력 비트맵 외부에 있는 영역의 픽셀 값을 imageData의 픽셀 값으로 설정합니다. 해당 픽셀 값은 투명한 검정색입니다.
imageData를 반환합니다.
ImageData
객체를 초기화하기
imageData는 주어진
양수의 행 수(rows), 각 행당 양수의 픽셀 수(pixelsPerRow), 선택적 ImageDataSettings
settings, 선택적 Uint8ClampedArray
source, 그리고 선택적 PredefinedColorSpace
defaultColorSpace에 따라 초기화됩니다:
만약 source가 주어졌다면, imageData의 data
속성을
source로 초기화합니다.
그렇지 않다면(source가 주어지지 않았을 때), imageData의 data
속성을 새 Uint8ClampedArray
객체로 초기화합니다. 이 Uint8ClampedArray
객체는 새로운 Canvas
Pixel ArrayBuffer
을 사용하여 저장소로 사용해야 하며, 시작 오프셋이 0이고 저장소 길이와 동일한 길이를
가져야 합니다(바이트 단위로). Canvas
Pixel ArrayBuffer
은 rows × pixelsPerRow 픽셀을 저장할 수 있는 올바른
크기를 가져야 합니다.
만약 Canvas
Pixel
ArrayBuffer
이 할당될 수 없다면, JavaScript에서 던진 RangeError
를
다시 던지고 종료합니다.
imageData의 width
속성을
pixelsPerRow로 초기화합니다.
imageData의 height
속성을
rows로 초기화합니다.
만약 settings이 주어졌고 settings["colorSpace
"]가
존재한다면, imageData의 colorSpace
속성을
settings["colorSpace
"]으로 초기화합니다.
그렇지 않다면, 만약 defaultColorSpace가 주어졌다면, imageData의 colorSpace
속성을
defaultColorSpace로 초기화합니다.
그렇지 않다면, imageData의 colorSpace
속성을 "srgb"로 초기화합니다.
ImageData
객체는 직렬화할 수 있는 객체입니다.
이 객체의 직렬화 단계는 value와
serialized가 주어졌을 때 다음과 같습니다:
serialized.[[Width]]를 value의 width
속성 값으로
설정합니다.
serialized.[[Height]]를 value의 height
속성 값으로
설정합니다.
serialized.[[ColorSpace]]를 value의 colorSpace
속성 값으로 설정합니다.
serialized, value, 그리고 targetRealm이 주어졌을 때 이 객체의 역직렬화 단계는 다음과 같습니다:
value의 width
속성을
serialized.[[Width]]로 초기화합니다.
value의 height
속성을
serialized.[[Height]]로 초기화합니다.
value의 colorSpace
속성을 serialized.[[ColorSpace]]로 초기화합니다.
Canvas Pixel ArrayBuffer
는 각 픽셀의 빨강, 녹색, 파랑, 알파 구성 요소가 각 픽셀에
대해 이 순서로 주어지는 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 데이터를 표현하는 ArrayBuffer
입니다.
이 배열에 표현된 각 픽셀의 각 구성 요소는 해당 구성 요소의 8비트 값을 나타내는 0..255 범위 내에 있어야 합니다. 구성 요소는 상단 왼쪽 픽셀의 빨강 구성 요소부터 시작하여 연속된 인덱스를
가져야 합니다.
putImageData()
메서드는 ImageData
구조체의 데이터를 렌더링 컨텍스트의 출력 비트맵에 다시 씁니다. 이 메서드의 인자는
imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth,
dirtyHeight입니다.
이 메서드의 마지막 네 개의 인자가 생략되었을 때, 이 값들은 각각 0, 0, imagedata 구조체의 width
멤버, 그리고
imagedata 구조체의 height
멤버로 가정해야 합니다.
이 메서드가 호출되었을 때는 다음과 같이 작동해야 합니다:
imagedata의 data
속성 값의
[[ViewedArrayBuffer]] 내부 슬롯을 buffer로 설정합니다.
만약 IsDetachedBuffer(buffer)가 참이라면,
"InvalidStateError
" DOMException
을
던집니다.
만약 dirtyWidth가 음수라면, dirtyX를 dirtyX+dirtyWidth로 설정하고, dirtyWidth를 dirtyWidth의 절대값으로 설정합니다.
만약 dirtyHeight가 음수라면, dirtyY를 dirtyY+dirtyHeight로 설정하고, dirtyHeight를 dirtyHeight의 절대값으로 설정합니다.
만약 dirtyX가 음수라면, dirtyWidth를 dirtyWidth+dirtyX로 설정하고, dirtyX를 0으로 설정합니다.
만약 dirtyY가 음수라면, dirtyHeight를 dirtyHeight+dirtyY로 설정하고, dirtyY를 0으로 설정합니다.
만약 dirtyX+dirtyWidth가 imagedata 인자의 width
속성보다 크다면,
dirtyWidth를 해당 width
속성 값에서
dirtyX를 뺀 값으로 설정합니다.
만약 dirtyY+dirtyHeight가 imagedata 인자의 height
속성보다
크다면,
dirtyHeight를 해당 height
속성 값에서
dirtyY를 뺀 값으로 설정합니다.
그러한 변경 후에도 dirtyWidth 또는 dirtyHeight가 음수이거나 0인 경우, 비트맵에 아무런 영향을 주지 않고 종료합니다.
dirtyX ≤ x <
dirtyX+dirtyWidth 및 dirtyY ≤ y <
dirtyY+dirtyHeight인 모든 정수 x 및 y에 대해,
imagedata 데이터 구조의 Canvas Pixel ArrayBuffer
에서
(x, y) 좌표를 가진 픽셀의 네 채널을 렌더링 컨텍스트의 (dx+x,
dy+y) 좌표를 가진 픽셀에 복사합니다.
색 공간 간의 변환과 프리멀티플라이드 알파 색 값으로의 변환 간의 손실적 특성으로 인해, putImageData()
를
사용하여 방금 설정된 픽셀 중 완전히 불투명하지 않은 픽셀은 getImageData()
로
동등한 값을 반환할 때 서로 다른 값으로 반환될 수 있습니다.
현재의 경로, 변환 행렬, 그림자 속성, 전역 알파, 클리핑 영역, 현재 합성 및 블렌딩 연산자는 이 섹션에 설명된 메서드에 영향을 미치지 않아야 합니다.
다음 예에서는 스크립트가 그리기 위해 ImageData
객체를
생성하는 과정을 보여줍니다.
// canvas는 <canvas> 요소에 대한 참조입니다
var context = canvas. getContext( '2d' );
// 빈 캔버스를 만듭니다
var data = context. createImageData( canvas. width, canvas. height);
// 플라즈마를 만듭니다
FillPlasma( data, 'green' ); // 초록색 플라즈마
// 플라즈마에 구름을 추가합니다
AddCloud( data, data. width/ 2 , data. height/ 2 ); // 가운데에 구름을 추가합니다
// 캔버스에 플라즈마+구름을 그립니다
context. putImageData( data, 0 , 0 );
// 지원 메서드
function FillPlasma( data, color) { ... }
function AddCloud( data, x, y) { ... }
여기에서는 getImageData()
와
putImageData()
를
사용하여 에지 검출 필터를 구현하는 예시가 있습니다.
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > 에지 검출 데모</ title >
< script >
var image = new Image();
function init() {
image. onload = demo;
image. src = "image.jpeg" ;
}
function demo() {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
// 이미지를 캔버스에 그립니다
context. drawImage( image, 0 , 0 );
// 조작할 이미지 데이터를 가져옵니다
var input = context. getImageData( 0 , 0 , canvas. width, canvas. height);
// 데이터를 넣을 빈 캔버스를 가져옵니다
var output = context. createImageData( canvas. width, canvas. height);
// 편의를 위해 몇 가지 변수를 별칭으로 설정합니다
// 이 경우 input.width 및 input.height는 canvas.width 및 canvas.height와 일치하지만, 코드를 일반적으로 유지하기 위해 전자를 사용하겠습니다.
var w = input. width, h = input. height;
var inputData = input. data;
var outputData = output. data;
// 에지 검출
for ( var y = 1 ; y < h- 1 ; y += 1 ) {
for ( var x = 1 ; x < w- 1 ; x += 1 ) {
for ( var c = 0 ; c < 3 ; c += 1 ) {
var i = ( y* w + x) * 4 + c;
outputData[ i] = 127 + - inputData[ i - w* 4 - 4 ] - inputData[ i - w* 4 ] - inputData[ i - w* 4 + 4 ] +
- inputData[ i - 4 ] + 8 * inputData[ i] - inputData[ i + 4 ] +
- inputData[ i + w* 4 - 4 ] - inputData[ i + w* 4 ] - inputData[ i + w* 4 + 4 ];
}
outputData[( y* w + x) * 4 + 3 ] = 255 ; // 알파
}
}
// 조작 후 이미지 데이터를 다시 넣습니다
context. putImageData( output, 0 , 0 );
}
</ script >
</ head >
< body onload = "init()" >
< canvas ></ canvas >
</ body >
</ html >
다음은 단색을 그릴 때와 getImageData()
를
사용하여 결과를 다시 읽을 때 적용되는 색 공간 변환의 예시입니다.
<!DOCTYPE HTML>
< html lang = "en" >
< title > 색 공간 이미지 데이터 데모</ title >
< canvas ></ canvas >
< script >
const canvas = document. querySelector( 'canvas' );
const context = canvas. getContext( '2d' , { colorSpace: 'display-p3' });
// 빨간색 사각형을 그립니다. 이때 16진수 색상 표기법은 sRGB 색상을 지정합니다.
context. fillStyle = "#FF0000" ;
context. fillRect( 0 , 0 , 64 , 64 );
// 이미지 데이터를 가져옵니다.
const pixels = context. getImageData( 0 , 0 , 1 , 1 );
// 이 코드는 'display-p3'를 출력하며, 캔버스의 색 공간에서 이미지 데이터를 반환하는 기본 동작을 반영합니다.
console. log( pixels. colorSpace);
// 이 코드는 234, 51, 35 값을 출력하며, 빨간색 채우기가 'display-p3'로 변환된 것을 반영합니다.
console. log( pixels. data[ 0 ]);
console. log( pixels. data[ 1 ]);
console. log( pixels. data[ 2 ]);
</ script >
context.globalAlpha [ = value ]
CanvasRenderingContext2D/globalAlpha
현재 모든 엔진에서 지원됩니다.
렌더링 작업에 적용되는 현재의 글로벌 알파 값을 반환합니다.
설정할 수 있으며, 글로벌 알파 값을 변경합니다. 0.0에서 1.0 범위를 벗어나는 값은 무시됩니다.
context.globalCompositeOperation [ = value ]
CanvasRenderingContext2D/globalCompositeOperation
현재 모든 엔진에서 지원됩니다.
현재 합성 및 블렌딩 연산자를 반환합니다. Compositing and Blending에 정의된 값에서 가져옵니다. [COMPOSITE]
설정할 수 있으며, 현재 합성 및 블렌딩 연산자를 변경합니다. 알 수 없는 값은 무시됩니다.
CanvasCompositing
인터페이스를 구현하는 객체는 글로벌
알파 값과
현재
합성
및 블렌딩 연산자 값을 가지며, 이 둘은 이 객체에 대한 모든 그리기 작업에 영향을 미칩니다.
글로벌 알파 값은 도형과 이미지가 출력 비트맵에 합성되기 전에 적용되는 알파 값을 제공합니다. 이 값은 0.0(완전 투명)에서 1.0(추가 투명도 없음)까지 범위에 있으며, 초기값은 1.0이어야 합니다.
globalAlpha
getter의 단계는 this의 글로벌 알파 값을 반환하는 것입니다.
globalAlpha
setter의 단계는 다음과 같습니다:
현재 합성 및 블렌딩 연산자 값은 도형과 이미지가 출력 비트맵에 그려지는 방식을 제어합니다. 이 값은 글로벌 알파 및 현재 변환 행렬이 적용된 후에 사용됩니다. 초기값은 "source-over
"로
설정해야 합니다.
globalCompositeOperation
getter의 단계는 this의 현재 합성 및 블렌딩 연산자를 반환하는 것입니다.
globalCompositeOperation
setter의 단계는 다음과 같습니다:
지정된 값이 일치하지 않으면 <blend-mode> 또는 <composite-mode> 속성이 정의한 값 중 하나와, 아무 작업도 하지 않고 반환합니다. [COMPOSITE]
그렇지 않으면, this의 현재 합성 및 블렌딩 연산자를 지정된 값으로 설정합니다.
context.imageSmoothingEnabled [ = value ]
CanvasRenderingContext2D/imageSmoothingEnabled
현재 모든 엔진에서 지원됩니다.
패턴 채우기 및 drawImage()
메서드가 이미지의 픽셀이 정확하게 디스플레이와 정렬되지 않을 때, 스케일링 시 이미지를 스무딩할지 여부를 반환합니다.
설정할 수 있으며, 이미지가 스무딩될지(true) 또는 스무딩되지 않을지(false)를 변경합니다.
context.imageSmoothingQuality [ = value ]
CanvasRenderingContext2D/imageSmoothingQuality
현재 이미지 스무딩 품질 설정을 반환합니다.
설정할 수 있으며, 이미지 스무딩의 선호 품질을 변경할 수 있습니다. 가능한 값은 "low
",
"medium
"
및 "high
"입니다.
알 수 없는 값은 무시됩니다.
CanvasImageSmoothing
인터페이스를 구현하는 객체는 이미지 스무딩이 수행되는 방식을 제어하는 속성을 가지고 있습니다.
imageSmoothingEnabled
속성은 가져올 때 마지막으로 설정된 값을 반환해야 합니다. 설정할 때는 새
값으로 설정해야 합니다.
CanvasImageSmoothing
인터페이스를 구현하는 객체가 생성될 때, 이 속성은 true로 설정되어야 합니다.
imageSmoothingQuality
속성은 가져올 때 마지막으로 설정된 값을 반환해야 합니다. 설정할 때는 새
값으로 설정해야 합니다.
CanvasImageSmoothing
인터페이스를 구현하는 객체가 생성될 때, 이 속성은 "low
"로
설정되어야 합니다.
CanvasShadowStyles 인터페이스를 구현하는 객체에서의 모든 그리기 작업은 네 가지 전역 그림자 속성에 의해 영향을 받습니다.
context.shadowColor [ = value ]
CanvasRenderingContext2D/shadowColor
모든 최신 엔진에서 지원됨.
현재 그림자 색상을 반환합니다.
그림자 색상을 변경하려면 설정할 수 있습니다. CSS 색상으로 파싱할 수 없는 값은 무시됩니다.
context.shadowOffsetX [ = value ]
CanvasRenderingContext2D/shadowOffsetX
모든 최신 엔진에서 지원됨.
현재 그림자 오프셋을 반환합니다.
그림자 오프셋을 변경하려면 설정할 수 있습니다. 유한한 숫자가 아닌 값은 무시됩니다.
context.shadowOffsetY [ = value ]
CanvasRenderingContext2D/shadowOffsetY
모든 최신 엔진에서 지원됨.
현재 그림자 오프셋을 반환합니다.
그림자 오프셋을 변경하려면 설정할 수 있습니다. 유한한 숫자가 아닌 값은 무시됩니다.
context.shadowBlur [ = value ]
CanvasRenderingContext2D/shadowBlur
모든 최신 엔진에서 지원됨.
현재 그림자에 적용된 흐림 수준을 반환합니다.
흐림 수준을 변경하려면 설정할 수 있습니다. 유한한 숫자가 아니거나 0보다 작은 값은 무시됩니다.
CanvasShadowStyles
인터페이스를 구현하는 객체는
CSS 색상인 연관된 그림자 색상을 가집니다. 처음에는 반드시 투명한 검정이어야 합니다.
shadowColor
getter 단계는 직렬화된 this의 그림자 색상을
HTML 호환 직렬화 요청됨과 함께 반환하는 것입니다.
shadowColor
setter
단계는 다음과 같습니다:
context를 this의 canvas
속성 값으로 설정합니다.
해당 값이 요소일 경우에만 해당하며, 그렇지 않으면 null로 설정됩니다.
parsedValue를 주어진 값을 context로 파싱한 결과로 설정합니다.
parsedValue가 실패한 경우, 반환합니다.
shadowOffsetX
와 shadowOffsetY
속성은 각각 양의 수평 및 수직 거리로 그림자가 이동할 거리를 지정합니다. 이 값들은 좌표 공간 단위로 표현되며, 현재 변환 행렬에 영향을 받지 않습니다.
컨텍스트가 생성될 때, 그림자 오프셋 속성은 처음에 0으로 설정되어야 합니다.
이 속성을 가져올 때, 현재 값을 반환해야 합니다. 설정할 때, 설정된 속성은 새 값으로 설정되어야 하며, 그 값이 무한대이거나 NaN인 경우 새 값은 무시되어야 합니다.
shadowBlur
속성은 흐림 효과의 수준을 지정합니다.
(이 단위는 좌표 공간 단위와 매핑되지 않으며, 현재 변환 행렬에 영향을 받지 않습니다.)
컨텍스트가 생성될 때, shadowBlur
속성은 처음에 0으로 설정되어야 합니다.
이 속성을 가져올 때, 속성은 현재 값을 반환해야 합니다. 속성을 설정할 때, 속성은 새 값으로 설정되어야 하며, 값이 음수이거나 무한대이거나 NaN인 경우 새 값은 무시되어야 합니다.
그림자는 다음의 경우에만 그려집니다: 그림자 색상의 알파 구성 요소의 불투명도
요소가 0이 아니고 shadowBlur
가 0이 아니거나, shadowOffsetX
가 0이 아니거나,
shadowOffsetY
가 0이 아닌 경우에만 그려집니다.
그림자가 그려질 때, 그림자는 다음과 같이 렌더링됩니다:
A를 그림자가 생성되는 원본 이미지가 렌더링된 무한한 투명한 검정 비트맵으로 설정합니다.
B를 A와 동일한 좌표 공간과 원점을 가진 무한한 투명한 검정 비트맵으로 설정합니다.
A의 알파 채널을 B에 복사하되, shadowOffsetX
에 의해 양의 x 방향으로,
shadowOffsetY
에 의해 양의 y 방향으로 오프셋합니다.
shadowBlur
가 0보다 큰 경우:
σ를 shadowBlur
값의 절반으로 설정합니다.
B에 대해 σ를 표준 편차로 사용하는 2D 가우시안 블러를 수행합니다.
사용자 에이전트는 가우시안 블러 작업 중 하드웨어 제한을 초과하지 않도록 하기 위해 σ 값을 구현별로 특정 최대값으로 제한할 수 있습니다.
B의 모든 픽셀에서 빨강, 초록, 파랑 구성 요소를 그림자 색상의 빨강, 초록, 파랑 구성 요소(각각)로 설정합니다.
B의 모든 픽셀의 알파 구성 요소에 그림자 색상의 알파 구성 요소를 곱합니다.
그림자는 비트맵 B에 있으며, 아래에 설명된 그리기 모델의 일부로 렌더링됩니다.
현재 합성 및
블렌딩 연산자
가 "copy
"
인 경우, 그림자는 실질적으로 렌더링되지 않습니다(모양이 그림자를 덮어쓰기 때문에).
CanvasFilters
인터페이스를 구현하는 객체의 모든 드로잉 작업은 전역 filter
속성의
영향을 받습니다.
context.filter [ = value ]
CanvasRenderingContext2D/filter
현재 필터를 반환합니다.
설정할 수 있으며, 필터를 변경합니다. 값은 "none
" 문자열이거나 <filter-value-list>로 파싱 가능한 문자열이어야 합니다. 다른 값은 무시됩니다.
이러한 객체에는 문자열인 관련 현재 필터가 있습니다. 처음에는 현재 필터가 "none
"
문자열로 설정됩니다. 현재 필터 값이
"none
" 문자열일 때, 필터는 컨텍스트에 대해 비활성화됩니다.
filter
게터 단계는 this의 현재 필터를 반환하는 것입니다.
filter
세터 단계는 다음과 같습니다:
parsedValue를 주어진 값을 CSS 구문에 따라 파싱한 결과로 설정합니다. 'inherit' 또는 'initial'과 같은 속성 독립적인 스타일 시트 구문이 존재하는 경우, 이 파싱은 실패를 반환해야 합니다.
parsedValue가 실패인 경우, 반환합니다.
context.
은 컨텍스트에 대한 필터를 비활성화하지만,
filter
= "none
"context.
,
filter
= ""context.
및
filter
= nullcontext.
는 모두 파싱 불가능한 입력으로 처리되며 현재 필터의 값은 변경되지 않습니다.
filter
= undefined
현재 필터 값에서 사용된 좌표는 한 픽셀이 하나의 SVG 사용자 공간 단위 및 하나의 캔버스 좌표 공간 단위에 해당하는 것으로 해석됩니다. 필터 좌표는 현재 변환 행렬에 영향을 받지 않습니다. 현재 변환 행렬은 필터의 입력에만 영향을 미칩니다. 필터는 출력 비트맵의 좌표 공간에서 적용됩니다.
현재 필터 값이 백분율 또는 'em' 또는 'ex' 단위를 사용하여 길이를
정의하는 <filter-value-list>로 파싱 가능한 문자열인 경우, 이는 속성이 설정될 때 계산된 값을 기준으로 해석되어야 합니다. 특정 사례에 대해 계산된 값이 정의되지 않은 경우(예: 폰트 스타일 소스 객체가 요소가 아니거나 렌더링되고 있지 않음 때문에), 상대적 키워드는 폰트
속성의 기본값을 기준으로 해석되어야 합니다. 'larger'
및 'smaller' 키워드는 지원되지 않습니다.
현재 필터 값이 동일한 문서의 SVG 필터에 대한 참조를 포함하는 <filter-value-list>로 파싱 가능한 문자열인 경우, 이 SVG 필터가 변경되면 다음 드로잉 작업에서 변경된 필터가 사용됩니다.
현재 필터 값이 외부 리소스 문서의 SVG 필터에 대한 참조를 포함하는 <filter-value-list>로 파싱 가능한 문자열인 경우, 드로잉 작업이 호출될 때 해당 문서가 로드되지 않은 경우, 필터링 없이 드로잉 작업이 진행되어야 합니다.
이 섹션은 규범적이지 않습니다.
외부에서 정의된 필터가 로드될 때까지 필터 값 "none
"을 사용하여 그리기 작업이 수행되므로, 작성자는 그리기 작업을 진행하기 전에 해당 필터가 로드되었는지 확인하고자 할 수
있습니다. 이를 달성하는 한 가지 방법은 동일한 페이지 내의 다른 요소에서 외부에서 정의된 필터를 로드하고 load
이벤트를 전송하는 요소(예: SVG use
요소)에서 load
이벤트가 발생할 때까지 기다리는 것입니다.
도형이나 이미지를 그릴 때, 사용자 에이전트는 다음 순서에 따라 단계를 따르거나 그렇게 하는 것처럼 행동해야 합니다:
이전 섹션에서 설명한 대로, 무한한 투명한 검정색 비트맵에 도형이나 이미지를 렌더링하여 이미지 A를 생성합니다. 도형의 경우, 현재의 채우기, 획 및 선 스타일이 적용되어야 하며, 획 자체도 현재의 변환 행렬을 적용받아야 합니다.
현재 필터가
"none
"이 아닌 값으로 설정되고, 참조하는 모든 외부에서 정의된 필터가 현재 로드된 문서에 있을 때, 이미지 A를 현재 필터의 입력으로
사용하여 이미지 B를 생성합니다. 현재 필터가 <filter-value-list>로 파싱 가능한 문자열인 경우, SVG와 동일한 방식으로 현재 필터를 사용하여
그립니다.
그렇지 않으면, B를 A의 별칭으로 사용합니다.
그림자가 그려질 때, 현재의 그림자 스타일을 사용하여 이미지 B에서 그림자를 렌더링하여 이미지 C를 생성합니다.
그림자가 그려질 때, C의
모든 픽셀의 알파 성분을 전역 알파
로
곱합니다.
그림자가 그려질 때, 클리핑 영역 내에서 C를 현재의 출력 비트맵 위에 현재의 합성 및 블렌딩 연산자를 사용하여 합성합니다.
B의 모든 픽셀의 알파 성분을 전역 알파
로
곱합니다.
B를 클리핑 영역 내에서 현재의 출력 비트맵 위에 현재의 합성 및 블렌딩 연산자를 사용하여 합성합니다.
출력 비트맵에 합성할 때, 출력 비트맵 외부에 속할 픽셀은 버려야 합니다.
캔버스가 상호작용할 수 있을 때, 작성자는 각 포커스 가능한 캔버스의 부분에 해당하는 포커스 가능한 요소를 요소의 대체 콘텐츠에 포함해야 합니다. 위의 예제에서와 같이.
포커스 링을 렌더링할 때, 포커스 링이 네이티브 포커스 링처럼 보이도록 하기 위해 작성자는 포커스 링을 그릴 요소를 전달하여 drawFocusIfNeeded()
메서드를 사용해야 합니다. 이 메서드는 요소가 포커스된 경우에만 포커스 링을 그리므로, 요소를 그릴 때마다 먼저
요소가 포커스되었는지 여부를 확인하지 않고도 이 메서드를 호출할 수 있습니다.
작성자는 canvas
요소를 사용하여 텍스트 편집 컨트롤을 구현하는 것을
피해야 합니다. 이렇게 하는 것은 다음과 같은 많은 단점이 있습니다:
이 작업은 엄청난 양의 작업이므로, 작성자는 대신 입력
요소, 텍스트 영역
요소 또는 contenteditable
속성을 사용하여 이
작업을 피할 것을 강력히 권장합니다.
이 섹션은 비규범적입니다.
다음은 캔버스를 사용하여 예쁜 빛나는 선을 그리는 스크립트의 예제입니다.
< canvas width = "800" height = "450" ></ canvas >
< script >
var context = document. getElementsByTagName( 'canvas' )[ 0 ]. getContext( '2d' );
var lastX = context. canvas. width * Math. random();
var lastY = context. canvas. height * Math. random();
var hue = 0 ;
function line() {
context. save();
context. translate( context. canvas. width/ 2 , context. canvas. height/ 2 );
context. scale( 0.9 , 0.9 );
context. translate( - context. canvas. width/ 2 , - context. canvas. height/ 2 );
context. beginPath();
context. lineWidth = 5 + Math. random() * 10 ;
context. moveTo( lastX, lastY);
lastX = context. canvas. width * Math. random();
lastY = context. canvas. height * Math. random();
context. bezierCurveTo( context. canvas. width * Math. random(),
context. canvas. height * Math. random(),
context. canvas. width * Math. random(),
context. canvas. height * Math. random(),
lastX, lastY);
hue = hue + 10 * Math. random();
context. strokeStyle = 'hsl(' + hue + ', 50%, 50%)' ;
context. shadowColor = 'white' ;
context. shadowBlur = 10 ;
context. stroke();
context. restore();
}
setInterval( line, 50 );
function blank() {
context. fillStyle = 'rgba(0,0,0,0.1)' ;
context. fillRect( 0 , 0 , context. canvas. width, context. canvas. height);
}
setInterval( blank, 40 );
</ script >
canvas
의 2D 렌더링 컨텍스트는 종종 스프라이트 기반 게임에
사용됩니다. 다음 예제는 이를 보여줍니다:
다음은 이 예제의 소스입니다:
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Blue Robot Demo</ title >
< style >
html { overflow : hidden ; min-height : 200 px ; min-width : 380 px ; }
body { height : 200 px ; position : relative ; margin : 8 px ; }
. buttons { position : absolute ; bottom : 0 px ; left : 0 px ; margin : 4 px ; }
</ style >
< canvas width = "380" height = "200" ></ canvas >
< script >
var Landscape = function ( context, width, height) {
this . offset = 0 ;
this . width = width;
this . advance = function ( dx) {
this . offset += dx;
};
this . horizon = height * 0.7 ;
// This creates the sky gradient (from a darker blue to white at the bottom)
this . sky = context. createLinearGradient( 0 , 0 , 0 , this . horizon);
this . sky. addColorStop( 0.0 , 'rgb(55,121,179)' );
this . sky. addColorStop( 0.7 , 'rgb(121,194,245)' );
this . sky. addColorStop( 1.0 , 'rgb(164,200,214)' );
// this creates the grass gradient (from a darker green to a lighter green)
this . earth = context. createLinearGradient( 0 , this . horizon, 0 , height);
this . earth. addColorStop( 0.0 , 'rgb(81,140,20)' );
this . earth. addColorStop( 1.0 , 'rgb(123,177,57)' );
this . paintBackground = function ( context, width, height) {
// first, paint the sky and grass rectangles
context. fillStyle = this . sky;
context. fillRect( 0 , 0 , width, this . horizon);
context. fillStyle = this . earth;
context. fillRect( 0 , this . horizon, width, height- this . horizon);
// then, draw the cloudy banner
// we make it cloudy by having the draw text off the top of the
// canvas, and just having the blurred shadow shown on the canvas
context. save();
context. translate( width- (( this . offset+ ( this . width* 3.2 )) % ( this . width* 4.0 )) + 0 , 0 );
context. shadowColor = 'white' ;
context. shadowOffsetY = 30 + this . horizon/ 3 ; // offset down on canvas
context. shadowBlur = '5' ;
context. fillStyle = 'white' ;
context. textAlign = 'left' ;
context. textBaseline = 'top' ;
context. font = '20px sans-serif' ;
context. fillText( 'WHATWG ROCKS' , 10 , - 30 ); // text up above canvas
context. restore();
// then, draw the background tree
context. save();
context. translate( width- (( this . offset+ ( this . width* 0.2 )) % ( this . width* 1.5 )) + 30 , 0 );
context. beginPath();
context. fillStyle = 'rgb(143,89,2)' ;
context. lineStyle = 'rgb(10,10,10)' ;
context. lineWidth = 2 ;
context. rect( 0 , this . horizon+ 5 , 10 , - 50 ); // trunk
context. fill();
context. stroke();
context. beginPath();
context. fillStyle = 'rgb(78,154,6)' ;
context. arc( 5 , this . horizon- 60 , 30 , 0 , Math. PI* 2 ); // leaves
context. fill();
context. stroke();
context. restore();
};
this . paintForeground = function ( context, width, height) {
// draw the box that goes in front
context. save();
context. translate( width- (( this . offset+ ( this . width* 0.7 )) % ( this . width* 1.1 )) + 0 , 0 );
context. beginPath();
context. rect( 0 , this . horizon - 5 , 25 , 25 );
context. fillStyle = 'rgb(220,154,94)' ;
context. lineStyle = 'rgb(10,10,10)' ;
context. lineWidth = 2 ;
context. fill();
context. stroke();
context. restore();
};
};
</ script >
</ script >
< script >
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
var landscape = new Landscape( context, canvas. width, canvas. height);
var blueRobot = new BlueRobot();
// paint when the browser wants us to, using requestAnimationFrame()
function paint() {
context. clearRect( 0 , 0 , canvas. width, canvas. height);
landscape. paintBackground( context, canvas. width, canvas. height);
blueRobot. paint( context, canvas. width/ 2 , landscape. horizon* 1.1 );
landscape. paintForeground( context, canvas. width, canvas. height);
requestAnimationFrame( paint);
}
paint();
// but tick every 100ms, so that we don't slow down when we don't paint
setInterval( function () {
var dx = blueRobot. tick();
landscape. advance( dx);
}, 100 );
</ script >
< p class = "buttons" >
< input type = button value = "Walk" onclick = "blueRobot.walk()" >
< input type = button value = "Stop" onclick = "blueRobot.stop()" >
</ footer >
< small > Blue Robot Player Sprite by < a href = "https://johncolburn.deviantart.com/" > JohnColburn</ a > .
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</ small >
< small > This work is itself licensed under a < a rel = "license" href = "https://creativecommons.org/licenses/by-sa/3.0/" > Creative
Commons Attribution-ShareAlike 3.0 Unported License</ a > .</ small >
</ footer >
ImageBitmap
렌더링 컨텍스트ImageBitmapRenderingContext
는 drawImage()
메서드와 달리 중간 합성을 피함으로써 성능을 향상시키는 저비용 방법으로 ImageBitmap
객체의 내용을 표시할 수 있는 성능 지향 인터페이스입니다.
전송 의미를 사용하여 전체 메모리 소비를 줄이며 성능을 최적화합니다.
예를 들어, 이미지를 캔버스에 가져오기 위한 중간 단계로 img
요소를 사용하는 경우, 메모리에 디코딩된 이미지의 두 개의 복사본이 동시에 존재하게 됩니다: img
요소의 복사본과 캔버스의 백업 저장소에 있는 복사본입니다.
이러한 메모리 비용은 매우 큰 이미지 작업 시 부담이 될 수 있습니다. ImageBitmapRenderingContext
를
사용하여 이를 피할 수 있습니다.
ImageBitmapRenderingContext
를
사용하여 메모리와 CPU를 효율적으로 사용하는 방식으로 이미지를 JPEG 형식으로 트랜스코딩하는 예제는 다음과 같습니다:
createImageBitmap( inputImageBlob). then( image => {
const canvas = document. createElement( 'canvas' );
const context = canvas. getContext( 'bitmaprenderer' );
context. transferFromImageBitmap( image);
canvas. toBlob( outputJPEGBlob => {
// outputJPEGBlob으로 작업을 수행합니다.
}, 'image/jpeg' );
});
ImageBitmapRenderingContext
인터페이스모든 최신 엔진에서 지원됩니다.
[Exposed =(Window ,Worker )]
interface ImageBitmapRenderingContext {
readonly attribute (HTMLCanvasElement or OffscreenCanvas ) canvas ;
undefined transferFromImageBitmap (ImageBitmap ? bitmap );
};
dictionary ImageBitmapRenderingContextSettings {
boolean alpha = true ;
};
context = canvas.getContext('bitmaprenderer' [, { [ alpha: false ] } ])
ImageBitmapRenderingContext
객체를 반환하며, 이 객체는 특정 canvas
요소에 영구적으로 바인딩됩니다.
만약 alpha
설정이 제공되고 false로 설정된 경우, 캔버스는 항상 불투명하도록 강제됩니다.
context.canvas
컨텍스트가 바인딩된 canvas
요소를 반환합니다.
context.transferFromImageBitmap(imageBitmap)
ImageBitmapRenderingContext/transferFromImageBitmap
모든 최신 엔진에서 지원됩니다.
imageBitmap의 기저 비트맵
데이터
를 context로 이전하며, 비트맵이 canvas
요소의 내용이 됩니다.
context.transferFromImageBitmap(null)
context가 바인딩된 canvas
요소의 내용을 투명한 검정 비트맵으로 교체하며, 해당 비트맵의 크기는 width
와 height
콘텐츠 속성과 동일합니다.
canvas
속성은 객체가 생성될 때 초기화된 값을 반환해야 합니다.
ImageBitmapRenderingContext
객체는 출력 비트맵을 가지고 있으며, 이는 비트맵
데이터에 대한 참조입니다.
ImageBitmapRenderingContext
객체는 또한 비트맵 모드를 가지고 있으며, 이는 유효 또는 공백으로 설정될 수 있습니다. 유효 상태는 컨텍스트의
출력
비트맵이 transferFromImageBitmap()
을
통해 획득된 비트맵 데이터에 해당함을 나타냅니다.
공백 상태는
컨텍스트의 출력
비트맵이 기본 투명 비트맵임을 나타냅니다.
ImageBitmapRenderingContext
객체는 또한 알파 플래그를 가지고 있으며, 이는 true 또는 false로 설정될 수 있습니다.
ImageBitmapRenderingContext
객체의 알파 플래그가 false로
설정되면, 컨텍스트에 바인딩된 canvas
요소의 내용은 동일한 크기의 불투명한 검정 비트맵에 컨텍스트의 출력
비트맵을 합성하여 얻습니다.
[COMPOSITE]
동등한 결과를 더 효율적으로 얻을 수 있는 경우, 불투명한 검정 비트맵에 합성하는 단계는 생략되어야 합니다.
사용자 에이전트가 ImageBitmapRenderingContext
의
출력 비트맵을 설정해야 하는 경우, context 인수로 ImageBitmapRenderingContext
객체를 전달하고, 선택적 인수로 bitmap이 비트맵
데이터를 참조하는 경우, 다음 단계를 실행해야 합니다:
만약 bitmap 인수가 제공되지 않은 경우:
만약 bitmap 인수가 제공된 경우:
ImageBitmapRenderingContext
생성
알고리즘은 target과 options을 전달받으며, 다음 단계를 실행합니다:
settings를 ImageBitmapRenderingContextSettings
딕셔너리 타입으로 변환한 결과로 설정합니다.
context를 새로운 ImageBitmapRenderingContext
객체로 설정합니다.
context의 canvas
속성을 target으로 초기화합니다.
context의 출력 비트맵을 target의 비트맵과 동일하게 설정합니다 (따라서 공유됨).
context를 인수로 하여 ImageBitmapRenderingContext의 출력 비트맵을 설정하는 단계를 실행합니다.
context의 알파 플래그를 true로 초기화합니다.
settings의 각 구성원을 다음과 같이 처리합니다:
alpha
context를 반환합니다.
transferFromImageBitmap(bitmap)
메서드가 호출되면, 다음 단계를 실행해야 합니다:
bitmapContext를 ImageBitmapRenderingContext
객체로 설정합니다.
만약 bitmap이 null인 경우, ImageBitmapRenderingContext의 출력 비트맵을 설정하는 단계를 bitmapContext를 context 인수로 하고, bitmap 인수를 제공하지 않고 실행한 후, 반환합니다.
만약 bitmap의 [[Detached]] 내부 슬롯이 true로 설정된 경우, "InvalidStateError
" DOMException
을
발생시킵니다.
context 인수를 bitmapContext로 하고, bitmap 인수가 bitmap의 기저 비트맵 데이터를 참조하도록 하여 ImageBitmapRenderingContext의 출력 비트맵을 설정하는 단계를 실행합니다.
bitmap의 [[Detached]] 내부 슬롯을 true로 설정합니다.
bitmap의 비트맵 데이터를 해제합니다.
OffscreenCanvas
인터페이스모든 현재 엔진에서 지원됩니다.
typedef (OffscreenCanvasRenderingContext2D 또는 ImageBitmapRenderingContext 또는 WebGLRenderingContext 또는 WebGL2RenderingContext 또는 GPUCanvasContext ) OffscreenRenderingContext ;
dictionary ImageEncodeOptions {
DOMString type = "image/png";
unrestricted double quality ;
};
enum OffscreenRenderingContextId { " 2d " , " bitmaprenderer " , " webgl " , " webgl2 " , " webgpu " };
[Exposed =(Window ,Worker ), Transferable ]
interface OffscreenCanvas : EventTarget {
constructor ([EnforceRange ] unsigned long long width , [EnforceRange ] unsigned long long height );
attribute [EnforceRange ] unsigned long long width ;
attribute [EnforceRange ] unsigned long long height ;
OffscreenRenderingContext ? getContext (OffscreenRenderingContextId contextId , optional any options = null );
ImageBitmap transferToImageBitmap ();
Promise <Blob > convertToBlob (optional ImageEncodeOptions options = {});
attribute EventHandler oncontextlost ;
attribute EventHandler oncontextrestored ;
};
OffscreenCanvas
는
EventTarget
이므로,
OffscreenCanvasRenderingContext2D
및 WebGL이 이벤트를 발생시킬 수 있습니다.
OffscreenCanvasRenderingContext2D
는 contextlost
및
contextrestored
를 발생시킬 수 있으며, WebGL은 webglcontextlost
및 webglcontextrestored
를 발생시킬 수 있습니다.
[WEBGL]
OffscreenCanvas
객체는
HTMLCanvasElement
와 유사하게 렌더링 컨텍스트를 생성하는 데 사용되지만, DOM과 연결되지 않습니다. 이를 통해 workers에서 캔버스 렌더링 컨텍스트를 사용할 수 있습니다.
OffscreenCanvas
객체는 플레이스홀더
canvas
요소에 대한 약한 참조를 보유할 수 있으며,
이는 일반적으로 DOM에 있으며, 포함된 콘텐츠는 OffscreenCanvas
객체에서 제공합니다. OffscreenCanvas
객체의 비트맵은 플레이스홀더 canvas
요소로 푸시되며,
OffscreenCanvas
의 관련 에이전트의 이벤트 루프의 렌더링 업데이트 단계에서 이루어집니다.
offscreenCanvas = new OffscreenCanvas(width,
height)
OffscreenCanvas/OffscreenCanvas
모든 현재 엔진에서 지원됩니다.
새로운 OffscreenCanvas
객체를 반환하며, 이는 플레이스홀더 canvas
요소와 연결되어 있지 않으며,
비트맵의 크기는 width 및 height 인수에 따라 결정됩니다.
context = offscreenCanvas.getContext(contextId [,
options ])
모든 현재 엔진에서 지원됩니다.
OffscreenCanvas
객체에서 드로잉할 수 있는 API를 노출하는 객체를 반환합니다.
contextId는 원하는 API를 지정합니다: "2d
",
"bitmaprenderer
",
"webgl
",
"webgl2
",
또는 "webgpu
".
options는 해당
API에서 처리됩니다.
캔버스가 이미 다른 컨텍스트 유형으로 초기화된 경우(예: "2d
"
컨텍스트를 가져온 후에 "webgl
"
컨텍스트를 가져오려는 경우) null을 반환합니다.
OffscreenCanvas
객체는 비트맵을 내부적으로 가지고 있으며, 객체가 생성될 때 초기화됩니다. 비트맵의 너비와 높이는 width
및 height
속성의 값과 동일합니다. 초기에는 비트맵의 모든 픽셀이 투명한 검정색입니다.
OffscreenCanvas
객체는 렌더링 컨텍스트가 바인딩될 수 있습니다. 초기에는
바인딩된 렌더링 컨텍스트가 없습니다. 렌더링 컨텍스트가 있는지 여부와 어떤 유형의 렌더링 컨텍스트인지 추적하기 위해 OffscreenCanvas
객체는 컨텍스트 모드도 가지고 있으며, 초기에는 none이지만, 이 사양에 정의된 알고리즘에 따라 2d, bitmaprenderer,
webgl, webgl2,
webgpu, 또는 detached
로 변경될 수 있습니다.
생성자 OffscreenCanvas(width,
height)
가 호출될 때, OffscreenCanvas
객체를 새로 생성하며, 비트맵이
width 및 height로 지정된 크기의 투명한 검정색 픽셀의
직사각형 배열로 초기화되며,
width
및 height
속성도 각각 width 및
height로 초기화됩니다.
OffscreenCanvas
객체는 전송 가능합니다. 전송 단계는
value 및
dataHolder에 대해 다음과 같이 진행됩니다:
만약 value의 컨텍스트 모드가
none과 같지 않다면,
"InvalidStateError
" DOMException
을
발생시킵니다.
width와 height를 value의 비트맵의 크기로 설정합니다.
value의 비트맵을 해제합니다.
dataHolder의 [[Width]]를 width로, [[Height]]를 height로 설정합니다.
만약 value가 하나 가지고 있다면, dataHolder의 [[PlaceholderCanvas]]를
value의 플레이스홀더 캔버스
요소에
대한 약한 참조로 설정하거나, 그렇지 않다면 null로 설정합니다.
전송 수신 단계는 dataHolder 및 value에 대해 다음과 같이 진행됩니다:
value의 비트맵을 dataHolder의 [[Width]] 및 [[Height]]에 의해 지정된 크기의 투명한 검정색 픽셀의 직사각형 배열로 초기화합니다.
만약 dataHolder의 [[PlaceholderCanvas]]가 null이 아니면, value의 플레이스홀더 canvas
요소를
dataHolder의 [[PlaceholderCanvas]]로 설정합니다(약한 참조 의미를 유지하면서).
getContext(contextId,
options)
메서드는 OffscreenCanvas
객체에서 호출될 때, 다음 단계들을 실행해야 합니다:
options이 객체가 아니라면, options을 null로 설정합니다.
options을 변환하여 JavaScript 값으로 설정합니다.
이 OffscreenCanvas
객체의 컨텍스트 모드와 contextId가
일치하는 다음 표의 셀에 있는 단계를 실행합니다:
none | 2d | bitmaprenderer | webgl 또는 webgl2 | webgpu | detached | |
---|---|---|---|---|---|---|
"2d "
|
| 이 메서드가 동일한 첫 번째 인수로 호출되었을 때 마지막으로 반환된 동일한 객체를 반환합니다. | null을 반환합니다. | null을 반환합니다. | null을 반환합니다. |
"InvalidStateError " DOMException 을
던집니다.
|
"bitmaprenderer "
|
| null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 호출되었을 때 마지막으로 반환된 동일한 객체를 반환합니다. | null을 반환합니다. | null을 반환합니다. |
"InvalidStateError " DOMException 을
던집니다.
|
"webgl " 또는 "webgl2 "
| null을 반환합니다. | null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 호출되었을 때 마지막으로 반환된 동일한 값을 반환합니다. | null을 반환합니다. |
"InvalidStateError " DOMException 을
던집니다.
| |
"webgpu "
| null을 반환합니다. | null을 반환합니다. | null을 반환합니다. | 이 메서드가 동일한 첫 번째 인수로 호출되었을 때 마지막으로 반환된 동일한 값을 반환합니다. |
"InvalidStateError " DOMException 을
던집니다.
|
offscreenCanvas.width [
= value ]
모든 현재 엔진에서 지원됩니다.
offscreenCanvas.height [
= value ]
모든 현재 엔진에서 지원됩니다.
이 속성들은 OffscreenCanvas
객체의 비트맵의
크기를 반환합니다.
이 속성들은 설정할 수 있으며, 지정된 크기의 새로운 투명한 검은색 비트맵으로 비트맵을 대체합니다 (실제로 크기를 조정합니다).
만약 OffscreenCanvas
객체의 width
또는 height
속성 중 하나라도 설정되면(새 값으로 또는 이전과 동일한 값으로) OffscreenCanvas
객체의
context
mode가 2d이면, 렌더링 컨텍스트를 기본 상태로 재설정하고
OffscreenCanvas
객체의 비트맵을 width와
height 속성의 새 값으로 크기 조정합니다.
"webgl
"
및 "webgl2
"
컨텍스트의 크기 조정 동작은 WebGL 명세에서 정의되어 있습니다. [WEBGL]
"webgpu
"
컨텍스트의 크기 조정 동작은 WebGPU에서 정의되어 있습니다. [WEBGPU]
크기가 변경된 OffscreenCanvas
객체에
플레이스홀더
canvas
요소가 있는 경우, 그 플레이스홀더 canvas
요소의 자연 크기는 해당 OffscreenCanvas
의 관련 에이전트의 이벤트 루프의 렌더링 업데이트 단계에서만
업데이트됩니다.
promise = offscreenCanvas.convertToBlob([options])
모든 현재 엔진에서 지원됩니다.
이 메서드는 Blob
객체로 이루어진 파일을 생성하며, OffscreenCanvas
객체에 포함된 이미지를 담고 있습니다.
인자로 전달된 객체는 생성될 이미지 파일의 인코딩 옵션을 제어하는 사전(dictionary)입니다. type
필드는 파일 형식을 지정하며 기본값은 "image/png
"입니다. 요청된 형식이 지원되지
않으면 이 형식이 사용됩니다. 이미지 형식이 가변 품질을 지원하는 경우(예: "image/jpeg
"), quality
필드는 0.0에서 1.0까지의 범위 내에서 결과 이미지의 품질 수준을 나타내는 숫자입니다.
canvas.transferToImageBitmap()
OffscreenCanvas/transferToImageBitmap
모든 현재 엔진에서 지원됩니다.
이 메서드는 ImageBitmap
객체를 새로 생성하여 OffscreenCanvas
객체에 저장된 이미지를 사용합니다. OffscreenCanvas
객체에 저장된 이미지는 새로운 빈 이미지로 대체됩니다.
convertToBlob(options)
메서드는 호출될 때 다음 단계를 실행해야 합니다:
이 OffscreenCanvas
객체의 [[Detached]] 내부 슬롯 값이 true로 설정되어
있으면, 거부된 약속(promise)을 반환하고, "InvalidStateError
" DOMException
을
반환합니다.
이 OffscreenCanvas
객체의 컨텍스트 모드가
2d
이고, 렌더링
컨텍스트의 비트맵(bitmap)의 원점 클린(origin-clean)
플래그가 false로 설정되어 있으면, 거부된 약속(promise)을 반환하고 "SecurityError
" DOMException
을
반환합니다.
이 OffscreenCanvas
객체의 비트맵(bitmap)에 픽셀이 없으면
(즉, 가로 또는 세로 차원이 0이면), 거부된 약속(promise)을 반환하고, "IndexSizeError
" DOMException
을
반환합니다.
bitmap을 이 OffscreenCanvas
객체의 비트맵(bitmap)의 복사본으로 만듭니다.
result를 새로운 약속(promise) 객체로 만듭니다.
이 단계를 병렬로 실행합니다:
file을 비트맵의 파일로의
직렬화(serialization)로 설정하고, options의 type
과 quality
가 있으면 사용합니다.
요소 작업을
큐(queue)에 추가하고, 캔버스 블롭 직렬화 작업
소스에서 캔버스(canvas)
요소를 대상으로 이 단계를 실행합니다:
만약 file이 null이면, result를 "EncodingError
" DOMException
로
거부합니다.
그렇지 않으면, 이 OffscreenCanvas
객체의 관련 영역(relevant realm)에서
file을 나타내는 새로운 Blob
객체로 result를 해결(resolve)합니다.
[FILEAPI]
result를 반환합니다.
transferToImageBitmap()
메서드는 호출될 때 다음 단계를 실행해야 합니다:
이 OffscreenCanvas
객체의 [[Detached]]
내부 슬롯 값이 true로 설정되어 있으면, "InvalidStateError
"
DOMException
을
발생시킵니다.
이 OffscreenCanvas
객체의 컨텍스트 모드가
none으로 설정되어 있으면,
"InvalidStateError
" DOMException
을
발생시킵니다.
image를 새로 생성된 ImageBitmap
객체로 설정하고, 이 OffscreenCanvas
객체의 비트맵과
동일한 기본 비트맵 데이터를 참조하도록 합니다.
이 OffscreenCanvas
객체의 비트맵을
새로 생성된 동일한
차원 및 색상 공간의 비트맵을 참조하도록 설정하고, 픽셀은 투명한
검정색 또는 렌더링 컨텍스트의 알파 플래그가 false로 설정되어 있으면
불투명한 검정색으로 초기화합니다.
이것은 이 OffscreenCanvas
의
렌더링 컨텍스트가 WebGLRenderingContext
인
경우, preserveDrawingBuffer
의
값이 영향을 미치지 않음을 의미합니다.
[WEBGL]
image를 반환합니다.
다음은 이벤트 핸들러
(및 해당 이벤트 핸들러 이벤트
유형)
이며, 이벤트
핸들러 IDL 속성으로 지원되어야 하는 모든 객체는
OffscreenCanvas
인터페이스를 구현해야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
oncontextlost
| contextlost
|
oncontextrestored
| contextrestored
|
OffscreenCanvasRenderingContext2D
모든 현재 엔진에서 지원됩니다.
[Exposed =(Window ,Worker )]
interface OffscreenCanvasRenderingContext2D {
readonly attribute OffscreenCanvas canvas ;
};
OffscreenCanvasRenderingContext2D includes CanvasState ;
OffscreenCanvasRenderingContext2D includes CanvasTransform ;
OffscreenCanvasRenderingContext2D includes CanvasCompositing ;
OffscreenCanvasRenderingContext2D includes CanvasImageSmoothing ;
OffscreenCanvasRenderingContext2D includes CanvasFillStrokeStyles ;
OffscreenCanvasRenderingContext2D includes CanvasShadowStyles ;
OffscreenCanvasRenderingContext2D includes CanvasFilters ;
OffscreenCanvasRenderingContext2D includes CanvasRect ;
OffscreenCanvasRenderingContext2D includes CanvasDrawPath ;
OffscreenCanvasRenderingContext2D includes CanvasText ;
OffscreenCanvasRenderingContext2D includes CanvasDrawImage ;
OffscreenCanvasRenderingContext2D includes CanvasImageData ;
OffscreenCanvasRenderingContext2D includes CanvasPathDrawingStyles ;
OffscreenCanvasRenderingContext2D includes CanvasTextDrawingStyles ;
OffscreenCanvasRenderingContext2D includes CanvasPath ;
OffscreenCanvasRenderingContext2D
객체는 비트맵에
그림을 그리기 위한 렌더링 컨텍스트로서
OffscreenCanvas
객체의 비트맵에 그립니다.
이는 CanvasRenderingContext2D
객체와 유사하지만, 다음과 같은 차이점이 있습니다:
사용자 인터페이스 기능을 지원하지 않습니다;
이 canvas
속성은
OffscreenCanvas
객체를 참조하며, canvas
요소가 아닙니다;
OffscreenCanvasRenderingContext2D
객체에는 객체가 생성될 때 초기화되는 비트맵이 있습니다.
비트맵에는 true 또는 false로 설정할 수 있는 원점 클린 플래그가 있습니다. 이러한 비트맵 중 하나가 생성될 때, 그 원점 클린 플래그는 true로 설정되어야 합니다.
OffscreenCanvasRenderingContext2D
객체에는 true 또는 false로 설정할 수 있는 알파 플래그도 있습니다.
처음에는
컨텍스트가 생성될 때 알파 플래그가 true로 설정되어야 합니다. OffscreenCanvasRenderingContext2D
객체의 알파 플래그가
false로 설정되면,
알파 채널은 모든 픽셀에 대해 1.0(완전히 불투명)으로 고정되어야 하며, 모든 픽셀의 알파 구성 요소를 변경하려는 시도는 조용히 무시되어야 합니다.
OffscreenCanvasRenderingContext2D
객체에는 색상 공간 설정이 있으며, 이는 사전 정의된 색상 공간
유형입니다.
컨텍스트의 비트맵의 색상 공간은 컨텍스트의 색상
공간으로 설정됩니다.
OffscreenCanvasRenderingContext2D
객체에는 관련된
OffscreenCanvas
객체도 있으며, 이는 OffscreenCanvas
객체로부터 OffscreenCanvasRenderingContext2D
객체가 생성되었습니다.
offscreenCanvas = offscreenCanvasRenderingContext2D.canvas
관련된
OffscreenCanvas
객체를 반환합니다.
오프스크린 2D 컨텍스트 생성 알고리즘은,
target ( OffscreenCanvas
객체)과 선택적으로 몇 가지 인수를 전달받고,
다음 단계를 실행합니다:
알고리즘이 몇 가지 인수를 전달받은 경우, arg를 첫 번째 인수로 설정합니다. 그렇지 않으면 arg를 undefined로 설정합니다.
settings를 arg를 사전으로 변환한 결과로 설정합니다. (이 작업은 예외를 발생시킬 수 있습니다).
context를 새 OffscreenCanvasRenderingContext2D
객체로 설정합니다.
context의 관련된
OffscreenCanvas
객체를 target으로 설정합니다.
만약 settings["alpha
"]가
false인 경우,
context의 알파 플래그를 false로 설정합니다.
context의 색상 공간을
settings["colorSpace
"]로
설정합니다.
context의 비트맵을 새로 생성된 비트맵으로 설정하고, 그 비트맵의
차원은 width
및 height
속성에 지정된 대로 target에 설정합니다. 그런 다음 target의 비트맵을 동일한 비트맵으로 설정합니다(이들이 공유되도록 설정).
만약 context의 알파 플래그가 true로 설정된 경우, context의 비트맵의 모든 픽셀을 투명한 검정색으로 초기화합니다. 그렇지 않으면 픽셀을 불투명한 검정색으로 초기화합니다.
context를 반환합니다.
구현은 플레이스홀더 캔버스
요소의 내용을 디스플레이에
업데이트하는 목적으로 창 이벤트 루프의 그래픽
업데이트 단계를 단축하도록 권장됩니다. 예를 들어, 비트맵 내용이 플레이스홀더 캔버스
요소의 물리적
디스플레이 위치에 매핑된 그래픽 버퍼로 직접 복사될 수 있습니다. 이와 같은 단축 방법은 특히 워커 이벤트 루프에서 OffscreenCanvas
가
업데이트되고, 창 이벤트 루프가 플레이스홀더
캔버스
요소에서 바쁠 때 디스플레이 지연 시간을 크게 줄일 수 있습니다.
그러나 그러한 단축 방법은 스크립트에 의해 관찰 가능한 부작용이 없어야 합니다. 즉, 커밋된 비트맵은 여전히 플레이스홀더 캔버스
요소로 전송되어야
하며, 해당 요소가 CanvasImageSource
,
ImageBitmapSource
,
또는 toDataURL()
또는 toBlob()
이
호출될 경우에 사용될 수 있습니다.
canvas
속성은 이 OffscreenCanvasRenderingContext2D
의
관련된 OffscreenCanvas
객체를 반환해야 합니다.
canvas
API는 캔버스의 백업 저장소의 색상 공간을 지정하는 메커니즘을 제공합니다. 모든 캔버스 API의 기본 백업 저장소 색상 공간은
'srgb'입니다.
색상 공간 변환은
캔버스를 출력 장치에 렌더링할 때 캔버스의 백업 저장소에 적용되어야 합니다. 이 색상 공간 변환은 동일한 색상 공간을 지정한 색상 프로파일을 가진 img
요소에 적용될 색상 공간
변환과 동일해야 합니다.
2D 컨텍스트에 콘텐츠를 그릴 때, 모든 입력은 그리기 전에 변환되어야 하며, 그 후에 컨텍스트의 색상 공간으로 변환된 색상 값에서 그라디언트 색상 중지점의 보간이 수행되어야 합니다. 알파 블렌딩은 컨텍스트의 색상 공간으로 변환된 값에서 수행되어야 합니다.
2D 컨텍스트에 대한 입력 중에서 색상 공간이 정의되지 않은 것은 존재하지 않습니다. CSS 색상의 색상 공간은 CSS Color에서 정의됩니다. 색상 프로필 정보를 지정하지 않는 이미지의 색상 공간은 'srgb'로 간주되며, 이는 CSS Color의 태그되지 않은 색상의 색상 공간 섹션에 명시되어 있습니다. [CSSCOLOR]
사용자 에이전트가 주어진 type과 선택적 quality에 따라 비트맵을 파일로 직렬화할 때, type에 지정된 형식으로 이미지 파일을 생성해야 합니다. 이미지 파일 생성 중 오류가 발생하면 (예: 내부 인코더 오류), 직렬화 결과는 null이 됩니다. [PNG]
이미지 파일의 픽셀 데이터는 좌표 공간 단위당 하나의 이미지 픽셀로 비트맵의 픽셀 데이터를 스케일링한 것이어야 하며, 사용된 파일 형식이 해상도 메타데이터 인코딩을 지원하는 경우 해상도는 96dpi(CSS 픽셀당 하나의 이미지 픽셀)로 지정되어야 합니다.
만약 type이 제공되면, 그것은 사용할 형식을 나타내는 MIME 타입으로 해석되어야 합니다. type에 매개변수가 있는 경우 지원되지 않는 것으로 처리되어야 합니다.
예를 들어, 값 "image/png
"은 PNG 이미지를 생성함을 의미하고, 값
"image/jpeg
"은 JPEG 이미지를 생성함을
의미하며, 값 "image/svg+xml
"은
SVG 이미지를 생성함을 의미합니다(이는 사용자 에이전트가 비트맵이 생성된 방법을 추적해야 하므로 가능성은 낮지만, 잠재적으로 놀라운 기능이 될 수 있습니다).
사용자 에이전트는 PNG ("image/png
")를
지원해야 합니다. 사용자 에이전트는 다른 유형을 지원할 수 있습니다. 사용자 에이전트가 요청된 형식을 지원하지 않으면 PNG 형식을 사용하여 파일을 생성해야 합니다. [PNG]
사용자 에이전트는 지원 여부를 확인하기 전에 제공된 type을 ASCII 소문자로 변환해야 합니다.
알파 채널을 지원하지 않는 이미지 유형의 경우, 직렬화된 이미지는 비트맵 이미지를 불투명한 검정색 배경에 합성한 후 source-over 합성 연산자를 사용해야 합니다.
색상 프로파일을 지원하는 이미지 유형의 경우, 직렬화된 이미지는 기본 비트맵의 색상 공간을 나타내는 색상 프로파일을 포함해야 합니다. 색상 프로파일을 지원하지 않는 이미지 유형의 경우, 직렬화된 이미지는 변환되어 'srgb' 색상 공간으로 변환되어야 하며, 'relative-colorimetric' 렌더링 의도를 사용해야 합니다.
따라서, 2D 컨텍스트에서 drawImage()
메서드를 호출하여 toDataURL()
또는 toBlob()
메서드의
출력을 캔버스에 렌더링할 때, 적절한 크기를 제공한다면, 캔버스의 색상을 더 좁은 색 영역으로 클리핑하는 것 이외에는 눈에 보이는 효과가 없습니다.
만약 type이 "image/jpeg
"와 같이 가변 품질을 지원하는 이미지
형식이고, quality가 제공되었으며, type이 "image/png
"이 아닌 경우, Type(quality)이 Number이고, quality가 0.0에서 1.0 범위 내에 있으면, 사용자
에이전트는 quality를 원하는 품질 수준으로 처리해야 합니다. 그렇지 않으면, 사용자 에이전트는 quality 인수가 제공되지 않은 것처럼 기본 품질 값을
사용해야 합니다.
여기서 단순히 quality를 Web IDL double
로 선언하는 대신, 유형 검사를 사용하는 것은 역사적인 유물입니다.
다른 구현은 "품질"에 대해 약간 다른 해석을 가질 수 있습니다. 품질이 지정되지 않은 경우, 구현별 기본값이 사용되며, 이는 압축 비율, 이미지 품질, 인코딩 시간 사이의 합리적인 타협을 나타냅니다.
canvas
요소의 보안이 섹션은 규범적이지 않습니다.
정보 유출은 하나의 기원의 스크립트가 다른 기원(동일한 기원이 아닌)의 이미지에서 정보를 액세스할 수 있는 경우(예: 픽셀 읽기) 발생할 수 있습니다.
이를 완화하기 위해, canvas
요소, OffscreenCanvas
객체 및
ImageBitmap
객체와 함께 사용되는 비트맵은
origin-clean을 나타내는 플래그를 가지도록 정의됩니다. 모든 비트맵은
처음에는 origin-clean이 true로 설정되어 시작합니다. 교차 기원
이미지가 사용될 때 플래그는 false로 설정됩니다.
toDataURL()
,
toBlob()
, 및 getImageData()
메서드는 이 플래그를 확인하며, 교차 기원 데이터를 유출하지 않도록 "SecurityError
" DOMException
을
발생시킵니다.
origin-clean 플래그의 값은 소스 비트맵에서 새 ImageBitmap
객체로 createImageBitmap()
에
의해 전파됩니다. 반대로, 만약 소스 이미지가 origin-clean 플래그가 false로 설정된 ImageBitmap
객체인 경우, 대상 canvas
요소의 비트맵은
drawImage
에
의해 origin-clean 플래그가 false로 설정됩니다.
이 플래그는 특정 상황에서 재설정될 수 있습니다. 예를 들어, width
또는 height
콘텐츠 속성을
canvas
요소에 변경하면,
이 요소에 바인딩된 CanvasRenderingContext2D
의
비트맵이 지워지고 origin-clean 플래그가 재설정됩니다.
ImageBitmapRenderingContext
를
사용할 때, origin-clean 플래그의 값은 ImageBitmap
객체가 transferFromImageBitmap()를
통해 canvas
로 전송될 때
전파됩니다.
프리멀티플라이드 알파는 이미지에서 투명성을 표현하는 한 가지 방법을 나타내며, 다른 방법은 논-프리멀티플라이드 알파입니다.
논-프리멀티플라이드 알파에서는 픽셀의 빨강, 초록, 파랑 채널이 해당 픽셀의 색상을 나타내고, 알파 채널이 해당 픽셀의 불투명도를 나타냅니다.
그러나 프리멀티플라이드 알파에서는 픽셀의 빨강, 초록, 파랑 채널이 픽셀이 이미지에 추가하는 색상의 양을 나타내고, 알파 채널이 픽셀이 뒤에 있는 것을 가리는 양을 나타냅니다.
예를 들어, 색상 채널이 0(꺼짐)에서 255(완전한 강도)까지 범위를 가진다고 가정할 때, 다음의 예제 색상은 다음과 같은 방식으로 표현됩니다:
CSS 색상 표현 | 프리멀티플라이드 표현 | 논-프리멀티플라이드 표현 | 색상 설명 | 다른 콘텐츠 위에 블렌딩된 색상 이미지 |
---|---|---|---|---|
rgba(255, 127, 0, 1) | 255, 127, 0, 255 | 255, 127, 0, 255 | 완전히 불투명한 주황색 | ![]() |
rgba(255, 255, 0, 0.5) | 127, 127, 0, 127 | 255, 255, 0, 127 | 반투명한 노란색 | ![]() |
표현 불가 | 255, 127, 0, 127 | 표현 불가 | 첨가된 반투명한 주황색 | ![]() |
표현 불가 | 255, 127, 0, 0 | 표현 불가 | 첨가된 완전히 투명한 주황색 | ![]() |
rgba(255, 127, 0, 0) | 0, 0, 0, 0 | 255, 127, 0, 0 | 완전히 투명한 ("보이지 않는") 주황색 | ![]() |
rgba(0, 127, 255, 0) | 0, 0, 0, 0 | 255, 127, 0, 0 | 완전히 투명한 ("보이지 않는") 터키석색 | ![]() |
비프리멀티플라이드 표현에서 프리멀티플라이드 표현으로 색상 값을 변환하는 것은 색상의 빨강, 초록, 파랑 채널을 알파 채널로 곱하는 것을 포함하며(알파 채널의 범위를 "완전히 투명함"은 0이고 "완전히 불투명함"은 1로 재매핑함),
프리멀티플라이드 표현에서 비프리멀티플라이드 표현으로 색상 값을 변환하는 것은 그 반대입니다: 색상의 빨강, 초록, 파랑 채널을 알파 채널로 나누는 것입니다.
일부 색상은 프리멀티플라이드 알파에서만 표현될 수 있으며(예: 첨가 색상), 다른 색상은 비프리멀티플라이드 알파에서만 표현될 수 있습니다(예: 불투명도 없이 특정 빨강, 초록, 파랑 값을 유지하는 "보이지 않는" 색상); 8비트 정수(현재 캔버스의 색상이 저장되는 방식)에서의 나눗셈 및 곱셈은 정밀도 손실을 수반하므로, 프리멀티플라이드 알파와 비프리멀티플라이드 알파 간의 변환은 완전히 불투명하지 않은 색상에 대해 손실이 발생하는 작업입니다.
CanvasRenderingContext2D
의
출력 비트맵과 OffscreenCanvasRenderingContext2D
의
비트맵은 투명한 색상을 표현하기 위해
프리멀티플라이드 알파를 사용해야 합니다.
캔버스 비트맵이 프리멀티플라이드 알파를 사용하여 색상을 표현하는 것은 표현 가능한 색상 범위에 영향을 미치기 때문에 중요합니다. 첨가 색상은 현재 CSS 색상이 비프리멀티플라이드
상태이므로 캔버스에 직접 그릴 수 없지만, 여전히 예를 들어 WebGL 캔버스에 첨가 색상을 그린 다음 drawImage()
를
통해 해당 WebGL 캔버스를 2D 캔버스에 그릴 수 있습니다.
모든 최신 엔진에서 지원됩니다.
이 섹션은 규범적이지 않습니다.
커스텀 요소는 작성자가 고유의 완전한 기능을 갖춘 DOM 요소를 구축할 수 있는 방법을 제공합니다. 작성자는 항상 비표준 요소를 문서에 사용할 수 있었고, 이후 스크립팅이나 유사한 방식으로 애플리케이션 전용 동작을 추가할 수 있었지만, 이러한 요소는 역사적으로 비표준적이며 기능적이지 않았습니다. 커스텀 요소 정의를 통해 작성자는 파서에게 요소를 올바르게 구성하는 방법과 해당 클래스의 요소가 변경 사항에 어떻게 반응해야 하는지를 알려줄 수 있습니다.
커스텀 요소는 기존 플랫폼 기능(예: HTML 요소)을 하위 수준의 작성자 노출 확장성 포인트(예: 커스텀 요소 정의)로 설명하여 "플랫폼을 합리화"하려는 더 큰 노력의 일부입니다. 오늘날 커스텀 요소의 기능적 및 의미적 한계로 인해 HTML의 기존 요소의 동작을 완전히 설명하지 못하지만, 시간이 지남에 따라 이 격차를 줄이기를 희망합니다.
이 섹션은 규범적이지 않습니다.
자율 커스텀 요소를 만드는 방법을 설명하기 위해, 국가 깃발의 작은 아이콘을 렌더링하는 커스텀 요소를 정의해보겠습니다. 우리의 목표는 다음과 같이 사용할 수 있도록 하는 것입니다:
< flag-icon country = "nl" ></ flag-icon >
이를 위해 먼저 HTMLElement
를
확장하여 커스텀 요소의 클래스를 선언합니다:
class FlagIcon extends HTMLElement {
constructor() {
super ();
this . _countryCode = null ;
}
static observedAttributes = [ "country" ];
attributeChangedCallback( name, oldValue, newValue) {
// name은 항상 observedAttributes에 따라 "country"가 됩니다.
this . _countryCode = newValue;
this . _updateRendering();
}
connectedCallback() {
this . _updateRendering();
}
get country() {
return this . _countryCode;
}
set country( v) {
this . setAttribute( "country" , v);
}
_updateRendering() {
// 독자가 스스로 시도해볼 수 있습니다. 하지만, 아마도
// this.ownerDocument.defaultView를 확인하여
// 탐색 컨텍스트가 있는 문서에 삽입되었는지 확인하고,
// 그렇지 않은 경우 작업을 피하고자 할 것입니다.
}
}
그런 다음 이 클래스를 사용하여 요소를 정의해야 합니다:
customElements. define( "flag-icon" , FlagIcon);
이 시점에서 위의 코드가 작동합니다! 파서는 flag-icon
태그를 볼 때마다 새로운 FlagIcon
클래스 인스턴스를 생성하고, 코드에 새로운
country
속성에 대해 알려줍니다. 이 속성을 사용하여 요소의 내부 상태를 설정하고 렌더링을 업데이트합니다(적절할 때).
또한 DOM API를 사용하여 flag-icon
요소를 생성할 수도 있습니다:
const flagIcon = document. createElement( "flag-icon" )
flagIcon. country = "jp"
document. body. appendChild( flagIcon)
마지막으로, 커스텀 요소 생성자 자체를 사용할 수도 있습니다. 즉, 위의 코드는 다음과 같습니다:
const flagIcon = new FlagIcon()
flagIcon. country = "jp"
document. body. appendChild( flagIcon)
이 섹션은 규범적이지 않습니다.
정적 formAssociated
속성에 true 값을 추가하면, 자율 커스텀 요소가 폼 연관 커스텀
요소가 됩니다. ElementInternals
인터페이스는 폼 컨트롤 요소에 공통된 기능과 속성을 구현하는 데 도움이 됩니다.
class MyCheckbox extends HTMLElement {
static formAssociated = true ;
static observedAttributes = [ 'checked' ];
constructor() {
super ();
this . _internals = this . attachInternals();
this . addEventListener( 'click' , this . _onClick. bind( this ));
}
get form() { return this . _internals. form; }
get name() { return this . getAttribute( 'name' ); }
get type() { return this . localName; }
get checked() { return this . hasAttribute( 'checked' ); }
set checked( flag) { this . toggleAttribute( 'checked' , Boolean( flag)); }
attributeChangedCallback( name, oldValue, newValue) {
// observedAttributes에 따라 name은 항상 "checked"가 됩니다.
this . _internals. setFormValue( this . checked ? 'on' : null );
}
_onClick( event) {
this . checked = ! this . checked;
}
}
customElements. define( 'my-checkbox' , MyCheckbox);
커스텀 요소 my-checkbox
를 기본 제공 폼 연관 요소처럼 사용할 수 있습니다. 예를 들어, form
이나 label
에 넣으면
my-checkbox
요소와 연관되며, form
을 제출할 때
my-checkbox
구현에서 제공된 데이터를 전송합니다.
< form action = "..." method = "..." >
< label >< my-checkbox name = "agreed" ></ my-checkbox > 동의서 내용을 읽었습니다.</ label >
< input type = "submit" >
</ form >
이 섹션은 규범적이지 않습니다.
ElementInternals
의
적절한 속성을 사용하여 커스텀 요소에 기본 접근성 의미를 부여할 수 있습니다. 다음 코드는 이전 섹션의 폼 연관 체크박스를 확장하여 접근성 기술에서 볼 수 있는 기본 역할과 체크 상태를 올바르게
설정합니다:
class MyCheckbox extends HTMLElement {
static formAssociated = true ;
static observedAttributes = [ 'checked' ];
constructor() {
super ();
this . _internals = this . attachInternals();
this . addEventListener( 'click' , this . _onClick. bind( this ));
this . _internals. role = 'checkbox' ;
this . _internals. ariaChecked = 'false' ;
}
get form() { return this . _internals. form; }
get name() { return this . getAttribute( 'name' ); }
get type() { return this . localName; }
get checked() { return this . hasAttribute( 'checked' ); }
set checked( flag) { this . toggleAttribute( 'checked' , Boolean( flag)); }
attributeChangedCallback( name, oldValue, newValue) {
// observedAttributes에 따라 name은 항상 "checked"가 됩니다.
this . _internals. setFormValue( this . checked ? 'on' : null );
this . _internals. ariaChecked = this . checked;
}
_onClick( event) {
this . checked = ! this . checked;
}
}
customElements. define( 'my-checkbox' , MyCheckbox);
기본 제공 요소와 마찬가지로, 이러한 속성들은 기본값일 뿐이며, 페이지 작성자가 role
및 aria-*
속성을 사용하여 재정의할 수
있습니다:
<!-- 이 마크업은 비표준입니다 -->
< input type = "checkbox" checked role = "button" aria-checked = "false" >
<!-- 이 마크업은 커스텀 요소 작성자가 의도한 것이 아닐 수 있습니다 -->
< my-checkbox role = "button" checked aria-checked = "false" >
커스텀 요소 작성자는 접근성 의미에서 어떤 측면이 강력한 기본 의미인지, 즉 커스텀 요소 사용자가 재정의해서는 안 되는지를 명시하는 것이 좋습니다. 예를 들어,
my-checkbox
요소의 작성자는 role 및 aria-checked
값이 강력한 기본 의미임을 명시하여 위와 같은 코드를 지양하도록 합니다.
이 섹션은 규범적이지 않습니다.
맞춤형 내장 요소는 커스텀 요소의 독특한 종류로, 자율 커스텀 요소와 비교하여 약간 다르게 정의되고 매우 다르게 사용됩니다. 이들은 기존 HTML 요소의 동작을 새 커스텀 기능으로 확장하여 재사용할 수 있도록 존재합니다. 이는 HTML 요소의 기존 동작 중 많은 부분이 단순히 자율 커스텀 요소를 사용하여 복제될 수 없는 경우가 많기 때문에 중요합니다. 대신, 맞춤형 내장 요소는 기존 요소 위에 커스텀 생성 동작, 생명 주기 후크 및 프로토타입 체인을 설치할 수 있게 하여, 기본 요소에 이러한 기능을 "혼합"할 수 있습니다.
맞춤형 내장 요소는 자율 커스텀 요소와 다른 문법이 필요합니다. 그 이유는 사용자 에이전트와 기타 소프트웨어가 요소의 로컬 이름을 기준으로 해당 요소의 의미와 동작을 식별하기 때문입니다. 즉, 맞춤형 내장 요소가 기존 동작을 기반으로 하는 개념은 확장된 요소가 원래의 로컬 이름을 유지하는 것에 크게 의존합니다.
이 예제에서는 맞춤형 내장 요소를
plastic-button
이라고 명명하여 만들 것입니다. 이 요소는 일반 버튼처럼 동작하지만 클릭할 때마다 화려한 애니메이션 효과가 추가됩니다. 이전과 마찬가지로 클래스를
정의하는 것으로 시작하지만, 이번에는 HTMLButtonElement
를
확장합니다:
class PlasticButton extends HTMLButtonElement {
constructor() {
super ();
this . addEventListener( "click" , () => {
// 화려한 애니메이션 효과 그리기!
});
}
}
커스텀 요소를 정의할 때, extends
옵션도 지정해야 합니다:
customElements. define( "plastic-button" , PlasticButton, { extends : "button" });
일반적으로, 확장된 요소의 이름은 어떤 요소 인터페이스를 확장하는지 보기만으로는 결정할 수 없습니다. 많은 요소가 동일한 인터페이스를 공유하기 때문입니다(예: q
와 blockquote
는
둘 다 HTMLQuoteElement
를
공유합니다).
분석된 HTML 소스 텍스트에서 맞춤형 내장 요소를 생성하기 위해, is
속성을 button
요소에 사용합니다:
< button is = "plastic-button" > Click Me!</ button >
맞춤형 내장 요소를 자율
커스텀 요소처럼 사용하려고 하면 작동하지 않습니다. 즉, <plastic-button>Click me?</plastic-button>
은 아무 특별한
동작이 없는 HTMLElement
를 생성할
뿐입니다.
맞춤형 내장 요소를 프로그래밍 방식으로 생성해야 하는 경우, createElement()
의
다음 형식을 사용할 수 있습니다:
const plasticButton = document. createElement( "button" , { is: "plastic-button" });
plasticButton. textContent = "Click me!" ;
앞서 언급한 것처럼 생성자도 작동합니다:
const plasticButton2 = new PlasticButton();
console. log( plasticButton2. localName); // "button"을 출력합니다.
console. assert( plasticButton2 instanceof PlasticButton);
console. assert( plasticButton2 instanceof HTMLButtonElement);
맞춤형 내장 요소를 프로그래밍 방식으로 생성할 때, is
속성은 DOM에 존재하지 않으며,
명시적으로 설정되지 않았기 때문입니다. 그러나 직렬화할 때 출력에 추가됩니다:
console. assert( ! plasticButton. hasAttribute( "is" ));
console. log( plasticButton. outerHTML); // '<button is="plastic-button"></button>'을 출력합니다.
어떻게 생성되었든 간에, button
이
특별한 이유는 "플라스틱 버튼"에도 모두 적용됩니다. 이들은 포커스 동작, 폼 제출에 참여하는 능력, disabled
속성 등과 관련된 기능을 가집니다.
맞춤형 내장 요소는 유용한 사용자 에이전트 제공
동작이나 API를 가진 기존 HTML 요소를 확장할 수 있도록 설계되었습니다. 따라서 이들은 이 사양에서 정의된 기존 HTML 요소만 확장할 수 있으며, bgsound
, blink
, isindex
, keygen
, multicol
, nextid
또는 spacer
와 같은 레거시 요소를 확장할 수
없습니다. 이러한 요소들은 요소 인터페이스로
HTMLUnknownElement
를
사용하도록 정의되었습니다.
이 요구 사항의 한 가지 이유는 미래 호환성입니다. 예를 들어, 현재는 알려지지 않은 요소를 확장하는 맞춤형 내장 요소가
combobox
와 같은 요소로 정의되었다면, 이 사양이 향후 combobox
요소를 정의하는 것을 방해할 수 있습니다. 이는 파생된 맞춤형 내장 요소의 소비자들이 그들의 기본 요소가
흥미로운 사용자 에이전트 제공 동작이 없는 것에 의존하게 되었을 것이기 때문입니다.
이 섹션은 규범적이지 않습니다.
아래에 명시된 것처럼, 그리고 앞서 언급된 바와 같이, taco-button
이라는 요소를 단순히 정의하고 사용하는 것이 그러한 요소가 버튼을 표현한다는 것을 의미하지는 않습니다. 즉, 웹 브라우저, 검색 엔진 또는 접근성 기술과 같은
도구들은 정의된 이름만으로 결과 요소를 자동으로 버튼으로 인식하지 않습니다.
여전히 자율 커스텀 요소를 사용하면서 다양한 사용자에게 원하는 버튼 의미를 전달하려면, 여러 가지 기술을 사용해야 합니다:
tabindex
속성을 추가하여 taco-button
을 포커스 가능하게 만들 수 있습니다. taco-button
이
논리적으로 비활성화될 경우, tabindex
속성을 제거해야 합니다.
ARIA 역할과 다양한 ARIA 상태 및 속성을 추가하면 접근성 기술에 의미를 전달하는 데 도움이 됩니다. 예를 들어, role을 "button
"으로
설정하면 이 요소가 버튼이라는 의미를 전달하여, 사용자가 접근성 기술에서 일반적인 버튼과 같은 상호작용을 통해 제어를 성공적으로 사용할 수 있게 합니다. aria-label
속성을 설정하여 접근성 기술이 자식 텍스트 노드를 탐색하고 이를 발표하는 대신 버튼에 접근 가능한 이름을 부여해야 합니다. 그리고 버튼이 논리적으로 비활성화되었을 때 aria-disabled
상태를 "true
"로 설정하여 버튼의 비활성 상태를 접근성 기술에 전달합니다.
일반적으로 기대되는 버튼 동작을 처리하는 이벤트 핸들러를 추가하여 웹 브라우저 사용자에게 버튼의 의미를 전달하는 데 도움이 됩니다. 이 경우 가장 관련성 높은 이벤트 핸들러는 적절한
keydown
이벤트를 click
이벤트로 프록시하여 키보드와 클릭으로 버튼을 활성화할 수 있도록 하는 것입니다.
taco-button
요소에 제공된 기본 시각적 스타일 외에도 논리적 상태 변경을 반영하도록 시각적 스타일을 업데이트해야 합니다. 예를 들어, 비활성화되었을 때
taco-button
에 대한 스타일 규칙 외에도 taco-button[disabled]
에 대한 규칙도 필요합니다.
이러한 점들을 고려할 때, 버튼 의미를 전달하는 책임을 맡는(비활성화될 수 있는 능력을 포함하여) 전체 기능을 갖춘 taco-button
은 다음과 같을 수 있습니다:
class TacoButton extends HTMLElement {
static observedAttributes = [ "disabled" ];
constructor() {
super ();
this . _internals = this . attachInternals();
this . _internals. role = "button" ;
this . addEventListener( "keydown" , e => {
if ( e. code === "Enter" || e. code === "Space" ) {
this . dispatchEvent( new PointerEvent( "click" , {
bubbles: true ,
cancelable: true
}));
}
});
this . addEventListener( "click" , e => {
if ( this . disabled) {
e. preventDefault();
e. stopImmediatePropagation();
}
});
this . _observer = new MutationObserver(() => {
this . _internals. ariaLabel = this . textContent;
});
}
connectedCallback() {
this . setAttribute( "tabindex" , "0" );
this . _observer. observe( this , {
childList: true ,
characterData: true ,
subtree: true
});
}
disconnectedCallback() {
this . _observer. disconnect();
}
get disabled() {
return this . hasAttribute( "disabled" );
}
set disabled( flag) {
this . toggleAttribute( "disabled" , Boolean( flag));
}
attributeChangedCallback( name, oldValue, newValue) {
// observedAttributes에 따라 name은 항상 "disabled"가 됩니다.
if ( this . disabled) {
this . removeAttribute( "tabindex" );
this . _internals. ariaDisabled = "true" ;
} else {
this . setAttribute( "tabindex" , "0" );
this . _internals. ariaDisabled = "false" ;
}
}
}
이러한 다소 복잡한 요소 정의에도 불구하고, 소비자에게 이 요소를 사용하는 것은 쉽지 않습니다. 이 요소는 계속해서 자체적으로 tabindex
속성을 생성할
것이며, tabindex="0"
포커스 가능 동작의 선택이 현재 플랫폼의 button
동작과
일치하지 않을 수 있습니다. 이는 현재 커스텀 요소의 기본 포커스 동작을 지정하는 방법이 없기 때문에 tabindex
속성을 사용하도록
강제하기 때문입니다(이는 일반적으로 소비자가 기본 동작을 재정의할 수 있도록 허용하기 위해 예약되어 있습니다).
반면에, 이전 섹션에서 보여준 것처럼, 간단한 맞춤형 내장 요소는 button
요소의 의미와 동작을 자동으로 상속받아 이러한 동작을 수동으로 구현할 필요가 없습니다. 일반적으로, HTML의 기존 요소를 기반으로 하는 비트리비얼한 동작과 의미를 가진 요소의 경우, 맞춤형
내장 요소가 개발, 유지 보수 및 사용하기 더 쉬울 것입니다.
이 섹션은 규범적이지 않습니다.
요소 정의는 언제든지 발생할 수 있기 때문에, 커스텀 요소가 아닌 요소가 생성된 후에 적절한 정의가 등록되면 커스텀 요소로 변환될 수 있습니다. 이 과정을 일반 요소에서 커스텀 요소로 "업그레이드"한다고 합니다.
업그레이드는 커스텀 요소 정의가 처음에 관련 요소가 생성된 후, 예를 들어 파서에
의해 등록되는 것이 바람직할 수 있는 시나리오를 가능하게 합니다. 이러한 방법은 커스텀 요소의 콘텐츠를 점진적으로 향상시키는 것을 허용합니다. 예를 들어, 다음 HTML 문서에서는
img-viewer
요소의 정의가 비동기적으로 로드됩니다:
<!DOCTYPE html>
< html lang = "en" >
< title > 이미지 뷰어 예제</ title >
< img-viewer filter = "Kelvin" >
< img src = "images/tree.jpg" alt = "비어있는 사바나 위로 우뚝 솟은 아름다운 나무" >
</ img-viewer >
< script src = "js/elements/img-viewer.js" async ></ script >
여기서 img-viewer
요소의 정의는 마크업에서 <img-viewer>
태그 뒤에 배치된 script
요소에
async
속성을
사용하여 로드됩니다. 스크립트가 로드되는 동안 img-viewer
요소는 span
과 유사한 정의되지 않은
요소로 처리됩니다. 스크립트가 로드되면 img-viewer
요소가 정의되고, 페이지의 기존 img-viewer
요소가 업그레이드되어 커스텀 요소의 정의가
적용됩니다(아마도 "Kelvin"이라는 문자열로 식별된 이미지 필터를 적용하여 이미지의 시각적 표현을 향상시킬 것입니다).
업그레이드는 문서 트리에 있는 요소들에만 적용된다는 점에 유의해야 합니다. (공식적으로 연결된 요소들입니다.) 문서에 삽입되지 않은 요소는 업그레이드되지 않은 상태로 유지됩니다. 다음 예제가 이를 설명합니다:
<!DOCTYPE html>
< html lang = "en" >
< title > 업그레이드 엣지 케이스 예제</ title >
< example-element ></ example-element >
< script >
"use strict" ;
const inDocument = document. querySelector( "example-element" );
const outOfDocument = document. createElement( "example-element" );
// 요소 정의 전에, 둘 다 HTMLElement입니다:
console. assert( inDocument instanceof HTMLElement);
console. assert( outOfDocument instanceof HTMLElement);
class ExampleElement extends HTMLElement {}
customElements. define( "example-element" , ExampleElement);
// 요소 정의 후, 문서 내의 요소는 업그레이드되었습니다:
console. assert( inDocument instanceof ExampleElement);
console. assert( ! ( outOfDocument instanceof ExampleElement));
document. body. appendChild( outOfDocument);
// 이제 요소를 문서로 이동시켰으므로, 이 요소도 업그레이드되었습니다:
console. assert( outOfDocument instanceof ExampleElement);
</ script >
사용자 에이전트에 의해 제공되는 기본 요소들은 사용자 상호작용 및 기타 요인에 따라 시간이 지남에 따라 변경될 수 있는 특정 상태를 가지고 있으며, 이는 웹 작성자에게 의사 클래스를 통해 노출됩니다. 예를 들어, 일부 폼 컨트롤은 "유효하지 않은" 상태를 가지고 있으며, 이는 :invalid
의사 클래스를 통해 노출됩니다.
기본 요소들처럼, 커스텀 요소도 다양한 상태를 가질 수 있으며, 커스텀 요소 작성자들은 이러한 상태를 기본 요소와 유사한 방식으로 노출하고자 합니다.
이는 :state()
의사 클래스를
통해 수행됩니다. 커스텀 요소 작성자는 states
속성을 사용하여 이러한 커스텀 상태를 추가 및 제거할 수 있으며, 이는 :state()
의사 클래스의 인수로
노출됩니다.
다음은 :state()
를
사용하여 커스텀 체크박스 요소를 스타일링하는 방법을 보여줍니다. LabeledCheckbox
가 "checked" 상태를 콘텐츠 속성을 통해 노출하지 않는다고 가정합니다.
< script >
class LabeledCheckbox extends HTMLElement {
constructor() {
super ();
this . _internals = this . attachInternals();
this . addEventListener( 'click' , this . _onClick. bind( this ));
const shadowRoot = this . attachShadow({ mode: 'closed' });
shadowRoot. innerHTML =
`<style>
:host::before { content: '[ ]'; white-space: pre; font-family: monospace; }
:host(:state(checked))::before { content: '[x]' }
</style> <slot>Label</slot>` ;
}
get checked() { return this . _internals. states. has( 'checked' ); }
set checked( flag) {
if ( flag)
this . _internals. states. add( 'checked' );
else
this . _internals. states. delete ( 'checked' );
}
_onClick( event) {
this . checked = ! this . checked;
}
}
customElements. define( 'labeled-checkbox' , LabeledCheckbox);
</ script >
< style >
labeled-checkbox { border : dashed red ; }
labeled-checkbox : state ( checked ) { border : solid ; }
</ style >
< labeled-checkbox > 이것을 확인해야 합니다</ labeled-checkbox >
커스텀 의사 클래스는 섀도우 파트를 대상으로 할 수도 있습니다. 위 예제의 확장된 버전이 이를 보여줍니다:
< script >
class QuestionBox extends HTMLElement {
constructor() {
super ();
const shadowRoot = this . attachShadow({ mode: 'closed' });
shadowRoot. innerHTML =
`<div><slot>Question</slot></div>
<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>` ;
}
}
customElements. define( 'question-box' , QuestionBox);
</ script >
< style >
question-box :: part ( checkbox ) { color : red ; }
question-box :: part ( checkbox ) : state ( checked ) { color : green ; }
</ style >
< question-box > 계속하시겠습니까?</ question-box >
커스텀 요소 생성자를 작성할 때, 작성자는 다음의 적합성 요구 사항을 준수해야 합니다:
super()
를 매개변수 없이 호출하는 것은 생성자 본문의 첫 번째 문장이어야 하며, 이는 올바른 프로토타입 체인과 this 값을 설정하여 이후의 코드가
실행되기 전에 이루어져야 합니다.
생성자 본문 내에서 return
문은 단순한 조기 반환(return
또는 return this
)을 제외하고는 어디에서도
나타나서는 안 됩니다.
생성자에서는 document.write()
또는 document.open()
메서드를 사용해서는 안 됩니다.
요소의 속성 및 자식 요소를 검사해서는 안 됩니다. 업그레이드가 아닌 케이스에서는 아무 것도 존재하지 않으며, 업그레이드에 의존하면 요소의 사용성이 저하됩니다.
요소는 속성이나 자식 요소를 추가해서는 안 됩니다. 이는 createElement
또는 createElementNS
메서드를 사용하는 소비자의 기대를 위반하게 됩니다.
일반적으로, 작업은 가능한 한 connectedCallback
으로 연기해야 합니다. 특히 리소스를 가져오거나 렌더링하는 작업이 해당됩니다. 그러나
connectedCallback
은 여러 번 호출될 수 있으므로, 진정으로 한 번만 실행해야 하는 초기화 작업은 두 번 실행되지 않도록 보호해야 합니다.
일반적으로 생성자는 초기 상태와 기본 값을 설정하고, 이벤트 리스너를 설정하며, 필요한 경우 섀도우 루트를 설정하는 데 사용해야 합니다.
이 요구 사항 중 일부는 요소 생성 중에 직접 또는 간접적으로 확인되며, 이를 따르지 않으면 파서나 DOM API가 인스턴스화할 수 없는 커스텀 요소가 됩니다. 이는 작업이 생성자에 의해 시작된 마이크로태스크 내부에서 수행되더라도 마찬가지입니다. 마이크로태스크 체크포인트가 생성 직후 발생할 수 있기 때문입니다.
커스텀 요소 반응을 작성할 때, 작성자는 노드 트리를 조작하는 것을 피해야 합니다. 이는 예기치 않은 결과를 초래할 수 있습니다.
요소의 connectedCallback
이 요소가 연결 해제되기 전에 큐에 넣어질 수 있지만, 콜백 큐가 여전히 처리되므로 더 이상 연결되지 않은 요소에 대해
connectedCallback
이 실행되는 결과를 초래합니다:
class CParent extends HTMLElement {
connectedCallback() {
this . firstChild. remove();
}
}
customElements. define( "c-parent" , CParent);
class CChild extends HTMLElement {
connectedCallback() {
console. log( "CChild connectedCallback: isConnected =" , this . isConnected);
}
}
customElements. define( "c-child" , CChild);
const parent = new CParent(),
child = new CChild();
parent. append( child);
document. body. append( parent);
// 출력 내용:
// CChild connectedCallback: isConnected = false
커스텀 요소는 커스텀된 요소입니다. 비공식적으로, 이는 생성자와 프로토타입이 사용자 에이전트가 아닌 작성자에 의해 정의된다는 것을 의미합니다. 이 작성자가 제공한 생성자 함수는 커스텀 요소 생성자라고 합니다.
두 가지 유형의 커스텀 요소를 정의할 수 있습니다:
자율 커스텀 요소는 extends
옵션 없이 정의된 요소입니다. 이
유형의 커스텀 요소는 정의된 이름과 동일한 로컬 이름을 가집니다.
맞춤형 내장 요소는 extends
옵션과 함께 정의된
요소입니다. 이 유형의 커스텀 요소는 extends
옵션에 전달된 값과 동일한 로컬 이름을 가지며, 정의된 이름이 is
속성의 값으로 사용됩니다.
이 값은 유효한
커스텀 요소 이름이어야 합니다.
커스텀 요소가 생성된 후, is
속성의 값을 변경해도 요소의 동작이 변경되지 않습니다. 이는 해당
값이 요소에 is
값으로 저장되기 때문입니다.
자율 커스텀 요소는 다음과 같은 요소 정의를 가집니다:
is
속성 제외)form
( 양식 관련 커스텀 요소의 경우) — 요소를 양식
요소와 연결합니다.
disabled
( 양식 관련 커스텀 요소의 경우) — 양식 컨트롤이
비활성화되었는지 여부를 나타냅니다.readonly
(
양식
관련 커스텀 요소의 경우) — willValidate
에
영향을 미치며, 커스텀 요소 작성자가 추가한 모든 동작을 포함합니다.
name
( 양식 관련 커스텀 요소의 경우) — 양식 제출과 form.elements
API에서 사용할 요소의 이름입니다.HTMLElement
에서 상속됨)자율 커스텀 요소는 특별한 의미를 가지지 않습니다. 자식 요소들을 대표합니다. 맞춤형 내장 요소는 확장하는 요소의 의미론을 상속받습니다.
네임스페이스가 없는 속성 중에서 요소의 작동과 관련된 속성은, 요소 작성자가 결정한 경우, 자율 커스텀 요소에 지정될 수 있습니다. 단, 속성 이름은 XML 호환이어야 하며 ASCII
대문자를 포함하지 않아야 합니다. 예외는 is
속성으로, 이는 자율 커스텀
요소에 지정할 수 없으며, 지정해도 아무런 효과가 없습니다.
맞춤형 내장
요소는 확장하는 요소에 따라 일반적인 속성 요구 사항을 따릅니다. 커스텀 속성 기반 동작을 추가하려면 data-*
속성을 사용하세요.
자율 커스텀 요소는 요소가 커스텀 요소 정의와 연결되어 있고, 해당 정의의 양식 관련 필드가 true로 설정된 경우 양식 관련 커스텀 요소라고 합니다.
name
속성은 양식 관련
커스텀 요소의 이름을 나타냅니다. disabled
속성은 양식 관련
커스텀 요소를 비활성화하고, 제출
값이 제출되지 않도록 하는 데 사용됩니다. form
속성은 양식 관련
커스텀 요소를 양식 소유자와 명시적으로 연결하는 데 사용됩니다.
readonly
속성은 양식 관련 커스텀 요소가 제약 조건 유효성 검사에서 제외되도록 지정합니다. 사용자 에이전트는
이 속성에 대해 추가적인 동작을 제공하지 않지만, 커스텀 요소 작성자는 가능한 경우 이 속성의 존재를 사용하여 해당 컨트롤이 내장된 양식 컨트롤의 readonly 속성과 유사한 방식으로 편집 불가능하도록 해야 합니다.
제약 조건 유효성 검사: readonly
속성이 양식
관련 커스텀 요소에 지정된 경우, 해당 요소는 제약 조건 유효성 검사에서 제외됩니다.
양식 재설정 알고리즘은
양식 관련
커스텀 요소에 대해 요소, 콜백 이름 "formResetCallback
", 그리고 빈 인수 목록을 사용하여 커스텀 요소 콜백 반응을 대기열에 추가합니다.
유효한 커스텀 요소 이름은 다음 요구 사항을 모두 충족하는 문자 name 시퀀스입니다:
name은 PotentialCustomElementName
제작을 충족해야 합니다:
PotentialCustomElementName ::=
[a-z] (PCENChar)* '-' (PCENChar)*
PCENChar ::=
"-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
name은 다음 중 어느 것도 해당하지 않아야 합니다:
annotation-xml
color-profile
font-face
font-face-src
font-face-uri
font-face-format
font-face-name
missing-glyph
위의 이름 목록은 적용 가능한 사양의 하이픈이 포함된 모든 요소 이름의 요약입니다. 이는 SVG 2 및 MathML에서 가져온 것입니다. [SVG] [MATHML]
이 요구 사항은 유효한 커스텀 요소 이름을 위한 여러 목표를 보장합니다:
이름은 ASCII 소문자 알파로 시작해야 하며, HTML 파서가 이를 태그로 처리하도록 보장합니다.
이름에 ASCII 대문자가 포함되지 않아야 하며, 사용자 에이전트가 HTML 요소를 항상 ASCII 대소문자 구분 없이 처리할 수 있도록 보장합니다.
이름에 하이픈이 포함되어야 하며, 이는 네임스페이싱에 사용되며, 향후 호환성을 보장합니다(향후 HTML, SVG 또는 MathML에 하이픈이 포함된 로컬 이름의 요소가 추가되지 않도록 보장).
이름은 createElement()
및 createElementNS()
로
항상 생성할 수 있어야 하며, 이러한 메서드는 파서보다 더 많은 제한을 가집니다.
이러한 제한 외에도 <math-α>
또는 <emotion-😍>
와 같은 사용 사례에 최대한의 유연성을 제공하기 위해 다양한 이름이
허용됩니다.
커스텀 요소 정의는 커스텀 요소를 설명하며 다음으로 구성됩니다:
CustomElementConstructor
콜백 함수 유형 값이며, 커스텀 요소 생성자를 래핑합니다.sequence<DOMString>
connectedCallback
", "disconnectedCallback
",
"adoptedCallback
", "attributeChangedCallback
",
"formAssociatedCallback
", "formDisabledCallback
",
"formResetCallback
", "formStateRestoreCallback
" 문자열입니다. 해당 값은 Web IDL Function
콜백 함수 유형 값이거나 null입니다. 기본적으로 각 항목의 값은 null입니다.attachInternals()
를
제어합니다.attachShadow()
를
제어합니다.커스텀 요소 정의 조회를 수행하려면, document, namespace, localName, is를 기준으로 다음 단계를 수행합니다. 이 단계는 커스텀 요소 정의 또는 null을 반환합니다:
namespace가 HTML 네임스페이스가 아니라면 null을 반환합니다.
document의 브라우징 컨텍스트가 null인 경우, null을 반환합니다.
document의 관련 글로벌 객체의 CustomElementRegistry
객체를 registry로 설정합니다.
registry에 이름과 로컬 이름이 localName과 모두 동일한 커스텀 요소 정의가 있으면, 해당 커스텀 요소 정의를 반환합니다.
만약 registry에 is와 동일한 이름과 localName과 동일한 로컬 이름을 가진 커스텀 엘리먼트 정의가 있다면, 그 커스텀 엘리먼트 정의를 반환합니다.
null을 반환합니다.
CustomElementRegistry
인터페이스모든 현재 엔진에서 지원됩니다.
각 Window
객체는 해당 객체가 생성될 때 고유한 CustomElementRegistry
객체와 연결됩니다.
커스텀 엘리먼트 레지스트리는 Window
객체와 연관되며,
Document
객체와는 연관되지 않습니다. 이는 각 커스텀 엘리먼트 생성자가
HTMLElement
인터페이스를 상속받기 때문이며,
Window
객체마다 하나의
HTMLElement
인터페이스가 존재하기 때문입니다.
모든 현재 엔진에서 지원됩니다.
Window
인터페이스의 customElements
속성은 해당 Window
객체의 CustomElementRegistry
객체를 반환해야 합니다.
[Exposed =Window ]
interface CustomElementRegistry {
[CEReactions ] undefined define (DOMString name , CustomElementConstructor constructor , optional ElementDefinitionOptions options = {});
(CustomElementConstructor or undefined ) get (DOMString name );
DOMString ? getName (CustomElementConstructor constructor );
Promise <CustomElementConstructor > whenDefined (DOMString name );
[CEReactions ] undefined upgrade (Node root );
};
callback CustomElementConstructor = HTMLElement ();
dictionary ElementDefinitionOptions {
DOMString extends ;
};
모든 CustomElementRegistry
에는
처음에 비어 있는 커스텀 요소 정의 집합이
있습니다. 일반적으로 이 사양의 알고리즘은 이름, 로컬 이름 또는 생성자로 레지스트리에서 요소를 조회합니다.
모든 CustomElementRegistry
에는
요소 정의의 재진입 호출을 방지하기 위해 사용되는 요소 정의 실행 중 플래그가 있습니다. 이 플래그는 처음에 설정되지 않습니다.
모든 CustomElementRegistry
에는
유효한 커스텀 요소 이름을 프라미스에
매핑하는 정의 시 프라미스 맵도 있습니다. 이는 whenDefined()
메서드를 구현하는 데 사용됩니다.
window.customElements.define(name, constructor)
모든 현재 엔진에서 지원.
window.customElements.define(name, constructor, { extends: baseLocalName })
NotSupportedError
" DOMException
이
커스텀 요소나 알 수 없는 요소를 확장하려고 할 때 발생합니다.
window.customElements.get(name)
모든 현재 엔진에서 지원.
window.customElements.getName(constructor)
window.customElements.whenDefined(name)
CustomElementRegistry/whenDefined
모든 현재 엔진에서 지원.
SyntaxError
" DOMException
을
포함하여 거부됩니다.
window.customElements.upgrade(root)
모든 현재 엔진에서 지원.
요소 정의는 커스텀 요소 정의를 CustomElementRegistry
에
추가하는 과정입니다. 이것은 define()
메서드로 수행됩니다. 호출되면, define(name, constructor, options)
메서드는 다음 단계를 실행해야 합니다:
IsConstructor(constructor)가 false인 경우, TypeError
를
발생시킵니다.
name이 유효한 커스텀 요소 이름이 아닌 경우, "SyntaxError
" DOMException
를
발생시킵니다.
이 CustomElementRegistry
에
name 이름을 가진 항목이 포함되어 있는 경우, "NotSupportedError
" DOMException
를
발생시킵니다.
이 CustomElementRegistry
에
constructor 생성자를 가진 항목이 포함되어 있는 경우,
"NotSupportedError
" DOMException
를
발생시킵니다.
localName을 name으로 설정합니다.
extends를 options의 extends
멤버의 값으로 설정하거나, 해당 멤버가 존재하지 않으면 null로 설정합니다.
extends가 null이 아닌 경우 다음을 수행합니다:
extends가 유효한 커스텀 요소 이름인 경우, "NotSupportedError
" DOMException
를
발생시킵니다.
extends에 대한 요소 인터페이스가 HTML
네임스페이스와 HTMLUnknownElement
(예:
extends가 이 명세서에 요소 정의를 포함하지 않는 경우)인 경우, "NotSupportedError
" DOMException
를
발생시킵니다.
localName을 extends로 설정합니다.
이 CustomElementRegistry
의
요소 정의 실행
중 플래그가 설정되어 있으면, "NotSupportedError
" DOMException
를
발생시킵니다.
이 CustomElementRegistry
의
요소 정의 실행
중 플래그를 설정합니다.
formAssociated를 false로 설정합니다.
disableInternals를 false로 설정합니다.
disableShadow를 false로 설정합니다.
observedAttributes를 빈 sequence<DOMString>
으로 설정합니다.
예외를 잡으면서 다음 하위 단계를 실행합니다:
prototype을 ? Get(constructor, "prototype")로 설정합니다.
"connectedCallback
", "disconnectedCallback
",
"adoptedCallback
", "attributeChangedCallback
" 키를 가진
lifecycleCallbacks라는 맵을 만들고, 각 항목의 값을 null로 설정합니다.
이전 단계에 나열된 순서대로 lifecycleCallbacks의 각 키 callbackName에 대해:
"attributeChangedCallback
" 키의 값이 null이 아닌 경우:
observedAttributesIterable를 ? Get(constructor, "observedAttributes")로 설정합니다.
observedAttributesIterable이 undefined가 아닌 경우, observedAttributes를
observedAttributesIterable을 sequence<DOMString>
으로 변환한 결과로
설정합니다. 변환 중 발생한 예외는 다시 던집니다.
disabledFeatures를 빈 sequence<DOMString>
으로 설정합니다.
disabledFeaturesIterable를 ? Get(constructor, "disabledFeatures")로 설정합니다.
disabledFeaturesIterable이 undefined가 아닌 경우, disabledFeatures를
disabledFeaturesIterable을 sequence<DOMString>
으로 변환한 결과로 설정합니다. 변환 중
발생한 예외는 다시 던집니다.
disabledFeatures가 "internals
"를 포함하는 경우 disableInternals를 true로
설정합니다.
disabledFeatures가 "shadow
"를 포함하는 경우 disableShadow를 true로
설정합니다.
formAssociatedValue를 ? Get(constructor, "formAssociated")로 설정합니다.
formAssociated를 formAssociatedValue를 boolean
으로 변환한 결과로 설정합니다.
변환 중 발생한 예외는 다시 던집니다.
formAssociated가 true인 경우, "formAssociatedCallback
",
"formResetCallback
", "formDisabledCallback
",
"formStateRestoreCallback
"에 대해 callbackName을 설정합니다:
그런 다음, 위의 단계가 예외를 발생시키든 말든 다음 하위 단계를 수행합니다:
이 CustomElementRegistry
의
요소
정의 실행 중 플래그를 해제합니다.
마지막으로, 첫 번째 하위 단계 세트가 예외를 발생시킨 경우, 해당 예외를 다시 던져 이 알고리즘을 종료합니다. 그렇지 않으면 계속 진행합니다.
definition을 커스텀 요소 정의의 새로운 항목으로 설정하고, name 이름, localName 로컬 이름, constructor 생성자, observedAttributes 관찰된 속성, lifecycleCallbacks 생명 주기 콜백, formAssociated 양식 연관, disableInternals 비활성화 내부, disableShadow 비활성화 섀도우로 설정합니다.
definition을 이 CustomElementRegistry
에
추가합니다.
document를 이 CustomElementRegistry
의
관련 글로벌 객체의 연관된
Document
로 설정합니다.
upgrade candidates를 섀도우
포함 후손 중 document의 HTML 네임스페이스에 있는 모든 요소로 설정하고, 로컬 이름이 localName인 요소를
포함합니다. 또한, extends가 null이 아닌 경우, name이 is
값과 일치하는 요소만 포함합니다.
upgrade candidates에 있는 각 요소 element에 대해 커스텀 요소 업그레이드 반응을 대기열에 추가합니다, 주어진 element와 definition을 사용합니다.
이 CustomElementRegistry
의
정의된 시점 약속 맵에
name 키가 포함된 항목이 있는 경우:
promise를 해당 항목의 값으로 설정합니다.
promise를 constructor로 해결합니다.
이 CustomElementRegistry
의
정의된 시점 약속
맵에서 name 키가 있는 항목을 삭제합니다.
호출되면, get(name)
메서드는 다음 단계를 수행해야 합니다:
이 CustomElementRegistry
에 name
name에 대한 항목이 포함된 경우, 해당 항목의 constructor를 반환합니다.
그렇지 않으면, undefined를 반환합니다.
getName(constructor)
메서드의 단계는 다음과 같습니다:
이 CustomElementRegistry
에 constructor
constructor에 대한 항목이 포함된 경우, 해당 항목의 name을 반환합니다.
null을 반환합니다.
호출되면, whenDefined(name)
메서드는 다음 단계를 수행해야 합니다:
name이 유효한 커스텀 요소 이름이 아닌 경우,
promise가
"SyntaxError
"
DOMException
으로
거부됩니다.
이 CustomElementRegistry
에 name
name에 대한 항목이 포함된 경우,
promise가 해당 항목의 constructor로
해결됩니다.
map을 이 CustomElementRegistry
의
when-defined
promise map으로 설정합니다.
map에 name 키를 가진 항목이 포함되지 않은 경우, map에 name 키와 새로운 promise를 값으로 하는 항목을 만듭니다.
promise를 map에서 name 키를 가진 항목의 값으로 설정합니다.
promise를 반환합니다.
whenDefined()
메서드는 모든 적절한 커스텀 요소가 정의될 때까지
작업을 수행하지 않도록 할 수 있습니다. 이 예에서 우리는 :defined
가상 클래스와 결합하여 동적으로
로드된 기사 내용이 해당 콘텐츠에 사용되는 모든 자율 커스텀 요소가 정의될 때까지 숨겨지도록 합니다.
articleContainer. hidden = true ;
fetch( articleURL)
. then( response => response. text())
. then( text => {
articleContainer. innerHTML = text;
return Promise. all(
[... articleContainer. querySelectorAll( ":not(:defined)" )]
. map( el => customElements. whenDefined( el. localName))
);
})
. then(() => {
articleContainer. hidden = false ;
});
호출되면, upgrade(root)
메서드는 다음 단계를 수행해야 합니다:
candidates를 목록으로 설정합니다. 이 목록은 root의 섀도우 포함 후손 요소들로 구성되며, 섀도우 포함 트리 순서에 따라 정렬됩니다.
upgrade()
메서드를 사용하면 원하는 시점에 요소를 업그레이드할 수 있습니다. 일반적으로 요소는 연결되었을 때 자동으로 업그레이드되지만, 이 메서드는
요소를 연결하기 전에 업그레이드가 필요할 경우 사용할 수 있습니다.
const el = document. createElement( "spider-man" );
class SpiderMan extends HTMLElement {}
customElements. define( "spider-man" , SpiderMan);
console. assert( ! ( el instanceof SpiderMan)); // 아직 업그레이드되지 않음
customElements. upgrade( el);
console. assert( el instanceof SpiderMan); // 업그레이드됨!
요소를 업그레이드하려면, 커스텀 요소 정의 definition과 요소 element를 입력으로 받아 다음 단계를 수행하세요:
element의 커스텀 요소 상태가 "undefined
" 또는
"uncustomized
"가 아닌 경우, 이 작업을 종료하세요.
다음 예제와 같이 이 알고리즘의 재진입 호출로 인해 이러한 상황이 발생할 수 있습니다:
<!DOCTYPE html>
< x-foo id = "a" ></ x-foo >
< x-foo id = "b" ></ x-foo >
< script >
// "a"와 "b" 모두에 대해 업그레이드 반응을 큐에 추가합니다
customElements. define( "x-foo" , class extends HTMLElement {
constructor() {
super ();
const b = document. querySelector( "#b" );
b. remove();
// 이 생성자가 "a"에 대해 실행되는 동안, "b"는 아직
// 정의되지 않았기 때문에 문서에 삽입하면 "b"에 대한 두 번째
// 업그레이드 반응이 큐에 추가됩니다.
document. body. appendChild( b);
}
})
</ script >
따라서 이 단계는 "b
"에 대해 요소 업그레이드가 두 번째로 호출될 때 알고리즘을 조기에 종료합니다.
element의 커스텀 요소 정의를 definition으로 설정합니다.
element의 커스텀 요소 상태를 "failed
"로 설정합니다.
업그레이드가 성공한 후에 "custom
"으로 설정됩니다. 지금은 "failed
"로 설정하여 모든 재진입 호출이 위의 조기 종료 단계에 도달하게 됩니다.
각 attribute에 대해 element의 속성
목록에서 순서대로 커스텀 요소 콜백 반응을 큐에 추가하고,
element, 콜백 이름 "attributeChangedCallback
", 및 attribute의 로컬 이름, null,
attribute의 값 및 attribute의 네임스페이스를 포함하는 인수 목록을 전달합니다.
element가 연결된 상태인 경우, 커스텀 요소 콜백 반응을 큐에 추가하고,
element, 콜백 이름 "connectedCallback
", 및 빈 인수 목록을 전달합니다.
definition의 구성 스택의 끝에 element를 추가합니다.
definition의 생성자를 C로 설정합니다.
다음 하위 단계를 예외를 처리하며 실행하세요:
definition의 섀도우 비활성화가 true이고
element의 섀도우
루트가 null이 아닌 경우, "NotSupportedError
" DOMException
을
발생시킵니다.
이것은 attachShadow()
가
커스텀
요소 정의 조회를 사용하지 않는 반면, attachInternals()
는
사용하는 것과 같은 상황을 처리하기 위해 필요합니다.
element의 커스텀 요소 상태를 "precustomized
"로 설정합니다.
C를 생성하는 결과를 constructResult로 설정하고, 인수는 없습니다.
C가 비표준적으로 [CEReactions]
확장된 속성으로 표시된 API를 사용하는
경우, 이 알고리즘의 시작에서 큐에 추가된 반응은 이 단계에서 C가 완료되고 이 알고리즘으로 제어가 반환되기 전에 실행됩니다. 그렇지 않으면,
C와 업그레이드 과정의 나머지 부분이 완료된 후에 실행됩니다.
SameValue(constructResult, element)가 false이면 TypeError를 발생시킵니다.
이 상황은 C가 super()
를 호출하기 전에 동일한 커스텀 요소의 다른 인스턴스를 생성하거나,
C가 JavaScript의 return
-재정의 기능을 사용하여 생성자에서 임의의
HTMLElement
객체를 반환하는 경우 발생할 수 있습니다.
그런 다음, 위의 단계에서 예외가 발생했는지 여부에 관계없이 다음 하위 단계를 수행하세요:
definition의 구성 스택에서 마지막 항목을 제거합니다.
C가 super()
를 호출하고 (표준적이라면), 이 호출이 성공하면, 이 항목은 이 알고리즘의 시작에서 푸시된
element를 대체한 이미 생성됨 표시자가 됩니다. (이 교체 작업은 HTML 요소 생성자가 수행합니다.)
C가 super()
를 호출하지 않거나 (즉, 비표준적), 또는 HTML 요소 생성자의 모든 단계에서 예외가 발생한 경우, 이 항목은 여전히
element일 것입니다.
마지막으로, 위의 단계에서 예외가 발생한 경우:
element의 커스텀 요소 정의를 null로 설정합니다.
element의 커스텀 요소 반응 큐를 비웁니다.
예외를 재발생시켜 이 알고리즘을 종료합니다.
위의 단계에서 예외가 발생한 경우, element의 커스텀 요소 상태는 "failed
" 또는
"precustomized
"로 남아 있을 것입니다.
element가 폼 연관 커스텀 요소인 경우:
element의 폼 소유자를
재설정합니다. element가 폼
요소와 연관되어 있으면, 커스텀 요소 콜백 반응을 큐에 추가하고,
element, 콜백 이름 "formAssociatedCallback
", 및 « 연관된 폼
»을 전달합니다.
element가 비활성화 상태인 경우,
커스텀 요소 콜백 반응을 큐에 추가하고,
element, 콜백 이름 "formDisabledCallback
" 및 « true »를 전달합니다.
element의 커스텀 요소 상태를 "custom
"으로 설정합니다.
요소 업그레이드를 시도하려면, 요소 element를 입력으로 받아 다음 단계를 수행하세요:
element의 노드 문서, element의 네임스페이스, element의 로컬 이름, 및
element의 is
값을
입력으로 받아 커스텀 요소 정의를 조회한 결과를 definition으로
설정합니다.
definition이 null이 아닌 경우, element와 definition을 입력으로 받아 커스텀 요소 업그레이드 반응을 큐에 추가합니다.
커스텀 요소는 특정 상황에 반응하여 작성자 코드를 실행할 수 있는 능력을 가지고 있습니다:
연결될 때,
connectedCallback
이 인수 없이 호출됩니다.
연결 해제될 때,
disconnectedCallback
이 인수 없이 호출됩니다.
새 문서에 채택될 때,
adoptedCallback
이 옛 문서와 새 문서를 인수로 받아 호출됩니다.
어떤 속성이 변경되거나, 추가되거나, 제거되거나, 교체될 때, attributeChangedCallback
이
호출되며, 속성의 로컬 이름, 옛 값, 새 값 및 네임스페이스를 인수로 전달받습니다. (속성의 옛 값 또는 새 값은 각각 속성이 추가되거나 제거될 때 null로 간주됩니다.)
사용자 에이전트가 폼 소유자를 재설정할
때, 폼
연관 커스텀 요소가 변경되면 formAssociatedCallback
이 호출되며, 새로운 폼 소유자(또는 소유자가 없는 경우 null)가 인수로
전달됩니다.
폼 소유자가 재설정될 때,
formResetCallback
이 호출됩니다.
비활성화 상태가 변경될 때, 폼
연관 커스텀 요소의 formDisabledCallback
이 새 상태를 인수로 받아 호출됩니다.
사용자 에이전트가 폼 연관 커스텀 요소의 값을 사용자 대신 업데이트하거나 내비게이션의 일부로 복원할
때, formStateRestoreCallback
이 새 상태와 "autocomplete
" 또는 "restore
"라는
이유를 나타내는 문자열을 인수로 받아 호출됩니다.
우리는 이러한 반응들을 커스텀 요소 반응이라고 부릅니다.
커스텀 요소 반응을 호출하는 방법은 신중하게 처리됩니다. 이는 민감한 작업 중에 작성자 코드를 실행하지 않도록 하기 위함입니다. 효과적으로, 이러한 반응들은 "사용자 스크립트로 돌아가기 직전"까지 지연됩니다. 이는 대부분의 경우 이러한 반응들이 동기적으로 실행되는 것처럼 보이지만, 복잡한 복합 작업(예: 복제 또는 범위 조작)의 경우에는 관련된 사용자 에이전트 처리 단계가 모두 완료된 후에 일괄 처리로 실행됩니다.
또한, 이러한 반응들의 정확한 순서는 아래에 설명된 다소 복잡한 스택-큐 시스템을 통해 관리됩니다. 이 시스템의 목적은 커스텀 요소 반응이 항상 단일 커스텀 요소의 로컬 컨텍스트 내에서 적어도 트리거링된 동작과 같은 순서로 호출되도록 보장하는 것입니다. (커스텀 요소 반응 코드가 자체적으로 변형을 수행할 수 있기 때문에 여러 요소에 걸쳐 전역 순서를 보장할 수는 없습니다.)
모든 유사 출처 윈도우 에이전트는 커스텀 요소 반응 스택을 가지고 있으며, 이는 초기에는 비어 있습니다. 유사 출처 윈도우 에이전트의 현재 요소 큐는 요소 큐의 최상위에 있는 커스텀 요소 반응 스택입니다. 스택의 각 항목은 초기에는 비어 있는 요소 큐입니다. 커스텀 요소는 아니지만, 이 큐는 업그레이드에도 사용됩니다.
모든 커스텀 요소 반응
스택은 초기에는 비어 있는 백업 요소 큐를 가지고 있습니다. 요소들은 백업 요소 큐에 푸시됩니다. 이는 [CEReactions]
으로 표시된 API를 통해 처리되지 않는
DOM 작업 또는 파서의 토큰에 대한 요소 생성 알고리즘을 수행할 때 발생합니다. 예를 들어, 사용자가
시작한 편집 작업이 편집 가능 요소의 자식 요소 또는 속성을 수정할 때 발생할 수 있습니다. 백업 요소 큐를 처리할 때 재진입을 방지하기 위해 각 커스텀 요소 반응
스택에는 초기에는 설정되지 않은 백업 요소 큐 처리 플래그도 있습니다.
모든 요소는 초기에는 비어 있는 커스텀 요소 반응 큐를 가지고 있습니다. 커스텀 요소 반응 큐의 각 항목은 다음 두 가지 유형 중 하나입니다:
이 모든 것은 아래의 도식에서 요약됩니다:
적절한 요소 큐에 요소를 큐에 추가하려면, 요소 element를 받아 다음 단계를 수행하세요:
reactionsStack을 element의 관련 에이전트의 커스텀 요소 반응 스택으로 설정합니다.
reactionsStack이 비어 있으면:
element를 reactionsStack의 백업 요소 큐에 추가합니다.
reactionsStack의 백업 요소 큐 처리 플래그가 설정되어 있으면 반환합니다.
reactionsStack의 백업 요소 큐 처리 플래그를 설정합니다.
마이크로태스크를 큐에 추가하여 다음 단계를 수행합니다:
reactionsStack의 백업 요소 큐에서 커스텀 요소 반응을 호출합니다.
reactionsStack의 백업 요소 큐 처리 플래그를 해제합니다.
커스텀 요소 콜백 반응을 큐에 추가하려면, 커스텀 요소 element, 콜백 이름 callbackName, 및 인수 목록 args를 받아 다음 단계를 수행하세요:
definition을 element의 커스텀 요소 정의로 설정합니다.
callback을 definition의 라이프사이클 콜백 중 callbackName 키에 해당하는 값으로 설정합니다.
callback이 null이면 반환합니다.
callbackName이 "attributeChangedCallback
"이면:
attributeName을 args의 첫 번째 요소로 설정합니다.
definition의 관찰된 속성이 attributeName을 포함하지 않으면 반환합니다.
콜백 함수 callback과 인수 args를 포함하는 새 콜백 반응을 element의 커스텀 요소 반응 큐에 추가합니다.
element를 적절한 요소 큐에 큐에 추가합니다.
커스텀 요소 업그레이드 반응을 큐에 추가하려면, 요소 element와 커스텀 요소 정의 definition을 받아 다음 단계를 수행하세요:
커스텀 요소 반응 큐에 업그레이드 반응을 추가하고, 커스텀 요소 정의 definition을 설정합니다.
element를 적절한 요소 큐에 큐에 추가합니다.
커스텀 요소 반응을 호출하려면 요소 큐 queue에서 다음 단계를 수행하세요:
queue가 비어 있지 않을 동안:
큐에서 추출하여 element를 얻습니다.
reactions을 element의 커스텀 요소 반응 큐로 설정합니다.
reactions이 비어 있을 때까지 반복합니다:
커스텀 엘리먼트
반응이 적절하게
트리거되도록 하기 위해, 우리는 [CEReactions]
IDL 확장
속성을 도입했습니다. 이 속성은 관련된 알고리즘이 추가 단계로 보완되어 커스텀 엘리먼트 반응을 적절하게
추적하고 호출할 수 있도록 합니다.
[CEReactions]
확장 속성은 인수를 취하지 않으며, 작업, 속성, 세터 또는 딜리터 외의 항목에 나타나서는 안 됩니다.
또한, 읽기 전용 속성에서는 나타나서는 안 됩니다.
[CEReactions]
확장 속성으로
주석이 달린 작업, 속성, 세터 또는 딜리터는 설명서에 명시된 단계 대신 다음 단계를 실행해야 합니다:
이 객체의 관련 에이전트의 커스텀 엘리먼트 반응 스택에 새 엘리먼트 큐를 푸시합니다.
이 구조체에 대해 원래 지정된 단계를 실행하고, 발생하는 예외를 잡습니다. 단계가 값을 반환하면, value를 반환된 값으로 설정합니다. 예외가 발생하면, exception을 발생한 예외로 설정합니다.
이 객체의 관련 에이전트의 커스텀 엘리먼트 반응 스택에서 팝핑한 결과를 queue로 설정합니다.
queue에서 커스텀 엘리먼트 반응을 호출합니다.
원래 단계에서 exception 예외가 발생한 경우, exception을 다시 발생시킵니다.
원래 단계에서 value 값이 반환된 경우, value를 반환합니다.
이 확장 속성의 의도는 다소 미묘합니다. 이 목표를 달성하는 한 가지 방법은 모든 작업, 속성, 세터 및 딜리터에 이러한 단계를 삽입하고, 구현자가 불필요한 경우(예: DOM 변경이 발생하지 않아 커스텀 엘리먼트 반응이 발생할 가능성이 없는 경우)를 최적화할 수 있도록 허용하는 것입니다.
그러나 실제로 이러한 부정확성은 커스텀 엘리먼트 반응의 상호 운용 가능한 구현을 방해할 수 있습니다. 일부 구현은 이러한 단계를 호출하는 것을 잊을 수 있기 때문입니다. 대신, 우리는 관련된 모든 IDL 구조에 명시적으로 주석을 달아 상호 운용 가능한 동작을 보장하고, 구현자가 이러한 단계가 필요한 모든 경우를 쉽게 식별할 수 있도록 하는 접근 방식을 선택했습니다.
사용자 에이전트에 의해 도입된 비표준 API가 커스텀 엘리먼트 콜백 반응을 등록하거나 커스텀 엘리먼트 업그레이드 반응을 등록하는 등, 예를 들어
어떤 속성이나 자식 요소를 수정하여 DOM을 변경할 수 있는 경우, 이러한 API도 [CEReactions]
속성으로 꾸며야 합니다.
이 글을 쓰는 시점에서, 다음과 같은 비표준 또는 아직 표준화되지 않은 API가 이 범주에 속하는 것으로 알려져 있습니다:
HTMLInputElement
의
webkitdirectory
및 incremental
IDL 속성
HTMLLinkElement
의
scope
IDL 속성
특정 기능은 커스텀 엘리먼트 소비자가 아닌 커스텀 엘리먼트 작성자가 사용할 수 있도록 설계되었습니다. 이러한 기능은 element.attachInternals()
메서드를 통해 제공되며, 이 메서드는 ElementInternals
의 인스턴스를 반환합니다.
ElementInternals
의 속성과 메서드는
사용자 에이전트가 모든 엘리먼트에 제공하는 내부 기능을 제어할 수 있게 해줍니다.
element.attachInternals()
커스텀 엘리먼트 element를 대상으로 하는
ElementInternals
객체를
반환합니다. element가 커스텀 엘리먼트가
아니거나, 엘리먼트 정의의 일부로 "internals
" 기능이 비활성화된 경우 또는 동일한 엘리먼트에서 두 번 호출된 경우 예외를 발생시킵니다.
모든 HTMLElement
는 부착된 내부 (null 또는 ElementInternals
객체)을 가지며, 초기값은
null입니다.
모든 현재 엔진에서 지원됨.
attachInternals()
메서드 단계는 다음과 같습니다:
this의 is
값이 null이 아니면 "NotSupportedError
" DOMException
을
발생시킵니다.
커스텀
엘리먼트 정의를 조회한 결과를 definition으로 설정합니다. 조회는 this의 노드 문서, 네임스페이스, 로컬 이름, 및 is
값을 null로 주어 수행됩니다.
definition이 null이면 "NotSupportedError
" DOMException
을
발생시킵니다.
definition의 내부 기능 비활성화가 true이면 "NotSupportedError
" DOMException
을
발생시킵니다.
this의
부착된 내부가 null이 아니면 "NotSupportedError
" DOMException
을
발생시킵니다.
this의
커스텀 엘리먼트 상태가 "precustomized
" 또는
"custom
"이 아니면 "NotSupportedError
" DOMException
을
발생시킵니다.
this의
부착된 내부를 this를
대상 엘리먼트로 하는 새로운 ElementInternals
인스턴스로
설정합니다.
ElementInternals
인터페이스모든 현재 엔진에서 지원됨.
ElementInternals
인터페이스의 IDL은 다음과 같으며, 다양한 연산과 속성은 다음 섹션에서 정의됩니다:
[Exposed =Window ]
interface ElementInternals {
// Shadow root 접근
readonly attribute ShadowRoot
? shadowRoot ;
// 폼과 연관된 커스텀 엘리먼트
undefined setFormValue ((File or USVString or FormData )? value ,
optional (File or USVString or FormData )? state );
readonly attribute HTMLFormElement ? form ;
undefined setValidity (optional ValidityStateFlags flags = {},
optional DOMString message ,
optional HTMLElement anchor );
readonly attribute boolean willValidate ;
readonly attribute ValidityState validity ;
readonly attribute DOMString validationMessage ;
boolean checkValidity ();
boolean reportValidity ();
readonly attribute NodeList labels ;
// 커스텀 상태 의사 클래스
[SameObject ] readonly attribute CustomStateSet states ;
};
// 접근성 의미 체계
ElementInternals 포함함 ARIAMixin ;
dictionary ValidityStateFlags {
boolean valueMissing = false ;
boolean typeMismatch = false ;
boolean patternMismatch = false ;
boolean tooLong = false ;
boolean tooShort = false ;
boolean rangeUnderflow = false ;
boolean rangeOverflow = false ;
boolean stepMismatch = false ;
boolean badInput = false ;
boolean customError = false ;
};
각 ElementInternals
는
대상 엘리먼트를 가지며, 이는 커스텀 엘리먼트입니다.
internals.shadowRoot
Returns the ShadowRoot
for internals의 대상 엘리먼트가
shadow 호스트인 경우, 그렇지 않으면 null을 반환합니다.
모든 현재 엔진에서 지원됨.
shadowRoot
getter 단계는 다음과 같습니다:
target이 shadow 호스트가 아니라면, null을 반환합니다.
shadow를 target의 shadow root로 설정합니다.
만약 shadow가 엘리먼트 internals에 사용할 수 없음으로 설정되어 있다면, null을 반환합니다.
shadow를 반환합니다.
internals.setFormValue(value)
internals의 대상 요소의 상태와 제출 값을 value로 설정합니다.
만약 value가 null이면, 해당 요소는 양식 제출에 참여하지 않습니다.
internals.setFormValue(value, state)
internals의 대상 요소의 제출 값을 value로 설정하고, 상태를 state로 설정합니다.
만약 value가 null이면, 해당 요소는 양식 제출에 참여하지 않습니다.
internals.form
internals.setValidity(flags, message [, anchor ])
internals의 대상 요소를 flags 인수로 지정된 제약 조건이 있는 상태로 표시하고, 요소의 유효성 메시지를 message로 설정합니다. anchor가 지정된 경우, 사용자 에이전트는 internals의 대상 요소의 제약 조건 문제를 표시할 때 이를 사용할 수 있습니다.
internals.setValidity({})
internals의 대상 요소를 제약 조건을 만족하는 상태로 표시합니다.
internals.willValidate
internals의 대상 요소가 양식 제출 시 유효성 검사를 받을지 여부를 반환합니다.
internals.validity
internals의 대상
요소에 대한 ValidityState
객체를
반환합니다.
internals.validationMessage
만약 internals의 대상 요소가 유효성 검사를 받는다면 사용자에게 표시될 오류 메시지를 반환합니다.
valid = internals.checkValidity()
internals의 대상
요소에 유효성 문제가 없으면 true를 반환하고, 그렇지 않으면 false를 반환하며 invalid
이벤트를 해당
요소에 발송합니다.
valid = internals.reportValidity()
internals의 대상
요소에 유효성 문제가 없으면 true를 반환하고, 그렇지 않으면 false를 반환하며 invalid
이벤트를 해당
요소에 발송하고(이벤트가 취소되지 않은 경우), 문제를 사용자에게 보고합니다.
internals.labels
각 양식 관련
커스텀 요소는 제출 값을 가지고 있습니다. 이는 양식 제출 시 하나 이상의 항목을 제공하는 데 사용됩니다. 제출 값의 초기 값은 null이며, 제출 값은 null, 문자열,
파일
또는 목록일 수 있습니다.
각 양식
관련 커스텀 요소는 상태를 가지고 있습니다. 이는 사용자 에이전트가 요소의 사용자 입력을 복원하는 데 사용할 수 있는 정보입니다. 상태의 초기 값은 null이며, 상태는 null, 문자열, 파일
,
또는 목록일 수 있습니다.
setFormValue()
메서드는 커스텀 요소 작성자가 요소의 제출 값과 상태를 설정하여 사용자 에이전트에 이를 전달하는 데 사용됩니다.
사용자 에이전트가 양식 관련 커스텀 요소의 상태를 복원하는 것이 좋다고
판단될 때, 예를 들어 탐색
후 또는 사용자 에이전트를 다시 시작한 후, 해당 요소와 "formStateRestoreCallback
" 콜백 이름 및 복원할 상태를 포함하는 인수 목록과
"restore
"를 사용하여 커스텀 요소 콜백 반응을 대기열에 추가할 수
있습니다.
만약 사용자 에이전트에 양식 작성 지원 기능이 있는 경우, 해당 기능이 호출될 때 양식 관련 커스텀 요소와 함께,
"formStateRestoreCallback
" 콜백 이름과 상태 값 및 "자동 완성
"을 포함하는 인수 목록을 사용하여 커스텀 요소 콜백 반응을 대기열에 추가할 수
있습니다.
일반적으로 상태는 사용자가 지정한 정보이며, 제출 값은 서버에 제출하기 적합한 캐노니컬화 또는 정리된 값입니다. 다음 예제는 이를 구체화합니다:
예를 들어, 사용자가 날짜를 지정하도록 요구하는 양식 관련 커스텀 요소가 있다고 가정합니다. 사용자가 "3/15/2019"을 지정했지만, 컨트롤은 서버에
"2019-03-15"
를 제출하고자 합니다. "3/15/2019"은 요소의 상태가 되고, "2019-03-15"
은 제출 값이 됩니다.
기존의 체크박스 input
유형의 동작을
모방하는 커스텀 요소를 개발한다고 가정합니다. 제출 값은 value
콘텐츠 속성의 값 또는 문자열
"on"
이 됩니다. 상태는
"checked"
, "unchecked"
, "checked/indeterminate"
, 또는
"unchecked/indeterminate"
중 하나가 됩니다.
모든 현재 엔진에서 지원됨.
setFormValue(value, state)
메서드 단계는 다음과 같습니다:
element가 양식 관련 커스텀 요소가 아닌 경우, "NotSupportedError
" DOMException
을
던집니다.
대상 요소의 제출 값을
value로 설정합니다. 만약 value가 FormData
객체가 아닌 경우, 또는 그렇지 않으면 value의 항목
목록의 복제본으로 설정합니다.
그렇지 않고, state가 FormData
객체인 경우, element의 상태를
state의 항목
목록의 복제본으로 설정합니다.
그렇지 않으면, element의 상태를 state로 설정합니다.
각 양식
관련 커스텀 요소는
valueMissing
, typeMismatch
,
patternMismatch
, tooLong
,
tooShort
, rangeUnderflow
,
rangeOverflow
, stepMismatch
, 그리고
customError
라는 유효성 플래그를 가지고 있습니다. 이 플래그들은 처음에는 모두 false로 설정됩니다.
각 양식 관련 커스텀 요소는 유효성 메시지 문자열을 가집니다. 처음에는 빈 문자열로 설정됩니다.
각 양식 관련 커스텀 요소는 유효성 앵커 요소를 가집니다. 처음에는 null로 설정됩니다.
모든 현재 엔진에서 지원됨.
setValidity(flags, message,
anchor)
메서드 단계는 다음과 같습니다:
element가 양식 관련 커스텀 요소가 아닌 경우,
"NotSupportedError
" DOMException
을
던집니다.
만약 flags에 하나 이상의 true 값이 포함되어 있고 message가 주어지지 않았거나 빈 문자열인 경우,
TypeError
를
던집니다.
각 flag → value 항목에 대해 element의 해당 이름을 가진 유효성 플래그를 value로 설정합니다.
만약 message가 주어지지 않았거나 element의 모든 유효성 플래그가 false인 경우, element의 유효성 메시지를 빈 문자열로 설정하고, 그렇지 않으면 message로 설정합니다.
만약 element의 customError
유효성 플래그가 true인 경우, element의
커스텀 유효성 오류 메시지를
element의 유효성 메시지로 설정합니다.
그렇지 않은 경우, element의 커스텀 유효성 오류 메시지를 빈 문자열로 설정합니다.
만약 anchor가 주어지지 않은 경우, element의 유효성 앵커를 null로 설정합니다. 그렇지 않으면,
만약 anchor가 element의 그림자 포함 자손이 아닌 경우,
"NotFoundError
" DOMException
을
던집니다.
그렇지 않으면, element의 유효성 앵커를 anchor로 설정합니다.
internals.role [ = value ]
internals의 대상 요소에 대한
기본 ARIA 역할을 설정하거나 검색합니다. 이 역할은 페이지 작성자가 role
속성을 사용하여 이를 덮어쓰지
않는 한 사용됩니다.
internals.aria* [ = value ]
internals의 대상 요소에
대한 기본 ARIA 상태 또는 속성 값을 설정하거나 검색합니다. 이는 페이지 작성자가 aria-*
속성을 사용하여 이를 덮어쓰지 않는 한
사용됩니다.
각 커스텀 요소에는 내부 콘텐츠 속성 맵이 있으며, 이는 초기에는 비어 있는 정렬된 맵입니다. 이 맵이 플랫폼 접근성 API에 어떤 영향을 미치는지에 대한 정보는 ARIA 및 플랫폼 접근성 API 관련 요구 사항 섹션을 참조하세요.
internals.states.add(value)
value 문자열을 요소의 상태 집합에 추가하여 의사 클래스로 노출합니다.
internals.states.has(value)
value가 요소의 상태 집합에 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
internals.states.delete(value)
요소의 상태 집합에 value가 있으면 이를 제거하고 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
internals.states.clear()
요소의 상태 집합에서 모든 값을 제거합니다.
for (const stateName of internals.states)
for (const stateName of internals.states.entries())
for (const stateName of internals.states.keys())
for (const stateName of internals.states.values())
요소의 상태 집합에 있는 모든 값을 순회합니다.
internals.states.forEach(callback)
요소의 상태 집합에 있는 모든 값을 순회하며, 각 값에 대해 callback을 한 번씩 호출합니다.
internals.states.size
요소의 상태 집합에 있는 값의 수를 반환합니다.
각 커스텀 요소는 상태 집합을
가지며, 이는 초기에는 비어 있는 CustomStateSet
입니다.
[Exposed =Window ]
interface CustomStateSet {
setlike <DOMString >;
};
states
getter 단계는 this의
대상 요소의 상태 집합을 반환하는 것입니다.
상태 집합은 문자열 값의 존재/부재로 나타나는 부울 상태를 노출할 수
있습니다. 작성자가 세 가지 값을 가질 수 있는 상태를 노출하려는 경우, 이를 세 개의 독립적인 부울 상태로 변환할 수 있습니다. 예를 들어, readyState
라는
상태가 "loading"
, "interactive"
, "complete"
값을 가지는 경우, 이를 세 개의 독립적인 부울
상태 "loading"
, "interactive"
, "complete"
로 매핑할 수 있습니다.
// readyState를 어느 상태에서든 "complete"로 변경합니다.
this . _readyState = "complete" ;
this . _internals. states. delete ( "loading" );
this . _internals. states. delete ( "interactive" );
this . _internals. states. add( "complete" );
이 명세는 브레드크럼 내비게이션 메뉴를 설명하는 기계 가독성 방식은 제공하지 않습니다. 작성자는 단락 안에 일련의 링크를 사용하는 것이 권장됩니다. nav
요소는 이러한 단락이 내비게이션 블록임을 표시하기 위해 사용할 수 있습니다.
다음 예에서 현재 페이지는 두 경로를 통해 도달할 수 있습니다.
< nav >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/products/" > Products</ a > ▸
< a href = "/products/dishwashers/" > Dishwashers</ a > ▸
< a > Second hand</ a >
</ p >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/second-hand/" > Second hand</ a > ▸
< a > Dishwashers</ a >
</ p >
</ nav >
이 명세는 페이지 그룹에 적용되는 키워드 목록(태그 클라우드라고도 함)을 마크업하기 위한 구체적인 마크업을 정의하지 않습니다. 일반적으로 작성자는 스타일 시트를
사용하여 숨기고 프레젠테이션 효과로 변환된 명시적인 인라인 카운트가 있는 ul
요소를 사용하거나 SVG를 사용하는 것이 권장됩니다.
여기, 짧은 태그 클라우드에 세 개의 태그가 포함되어 있습니다:
< style >
. tag-cloud > li > span { display : none ; }
. tag-cloud > li { display : inline ; }
. tag-cloud-1 { font-size : 0.7 em ; }
. tag-cloud-2 { font-size : 0.9 em ; }
. tag-cloud-3 { font-size : 1.1 em ; }
. tag-cloud-4 { font-size : 1.3 em ; }
. tag-cloud-5 { font-size : 1.5 em ; }
@ media speech {
. tag-cloud > li > span { display : inline }
}
</ style >
...
< ul class = "tag-cloud" >
< li class = "tag-cloud-4" >< a title = "28 instances" href = "/t/apple" > apple</ a > < span > (popular)</ span >
< li class = "tag-cloud-2" >< a title = "6 instances" href = "/t/kiwi" > kiwi</ a > < span > (rare)</ span >
< li class = "tag-cloud-5" >< a title = "41 instances" href = "/t/pear" > pear</ a > < span > (very popular)</ span >
</ ul >
각 태그의 실제 빈도는 title
속성을 사용하여 제공합니다. CSS 스타일 시트는
마크업을 서로 다른 크기의 단어 클라우드로 변환하기 위해 제공되지만, CSS를 지원하지 않거나 시각적이지 않은 사용자 에이전트의 경우 마크업에는 태그의 빈도를 기준으로 "popular" 또는
"rare"와 같은 범주로 태그를 분류하는 주석이 포함되어 있어 모든 사용자가 이러한 정보를 활용할 수 있습니다.
ul
요소를 사용( ol
대신) 하는 이유는 순서가 그다지 중요하지 않기 때문입니다. 목록이
실제로는 알파벳순으로 정렬되어 있지만, 태그의 길이로 정렬되더라도 동일한 정보를 전달할 수 있습니다.
이 tag
rel
-키워드는 사용되지 않습니다. 이 a
요소들은 페이지 자체에 적용되는 태그를 나타내지 않기 때문입니다. 단지
태그 자체를 나열하는 인덱스의 일부일 뿐입니다.
이 사양에서는 대화, 회의록, 채팅 기록, 대본의 대화, 인스턴트 메시지 로그, 그리고 여러 사람이 차례로 발언하는 기타 상황을 마크업할 특정 요소를 정의하지 않습니다.
대신, 작성자는 p
요소와 구두점을 사용하여 대화를 마크업하는 것이
권장됩니다. 스타일링 목적으로 발언자를 표시해야 하는 작성자는 span
또는 b
를 사용하는 것이 좋습니다. 텍스트를 i
요소로 감싸서 무대 지시를 표시할 수 있습니다.
다음 예제는 Abbott와 Costello의 유명한 스케치 누가 1루에 있어에서 발췌한 부분을 사용하여 이를 설명합니다:
< p > Costello: 이봐, 1루수가 있어?
< p > Abbott: 물론이지.
< p > Costello: 누가 1루를 봐?
< p > Abbott: 맞아.
< p > Costello가 화가 난다.
< p > Costello: 매달 1루수에게 월급을 줄 때, 누가 그 돈을 받아?
< p > Abbott: 그 돈 전부.
다음 발췌 부분은 IM 대화 로그를 마크업하는 방법을 보여주며, 각 줄에 대한 유닉스 타임스탬프를 제공하기 위해 data
요소를 사용합니다. time
요소가 지원하지 않는 형식으로 타임스탬프가
제공됩니다. 따라서 data
요소가 대신
사용됩니다(유닉스 time_t
타임스탬프). 작성자가 time
요소에서 지원하는 날짜 및 시간 형식을 사용하여
데이터를 마크업하기를 원했다면, 이 요소를 data
대신 사용할 수 있었습니다. 이렇게 하면 데이터 분석 도구가 페이지 작성자와의 조정 없이도 타임스탬프를 명확하게 감지할 수 있어 유리할 수 있습니다.
< p > < data value = "1319898155" > 14:22</ data > < b > egof</ b > 나는 그렇게 덕후가 아니야, 스타 트렉 에피소드의 30%만 봤어
< p > < data value = "1319898192" > 14:23</ data > < b > kaj</ b > 스타 트렉 에피소드에서 얼마나 많은 것을 봤는지 알고 있다면, 당신은 논쟁할 수 없을 정도로 덕후야
< p > < data value = "1319898200" > 14:23</ data > < b > egof</ b > 그것은 반박할 수 없어
< p > < data value = "1319898228" > 14:23</ data > < i > * kaj 눈을 깜빡임</ i >
< p > < data value = "1319898260" > 14:24</ data > < b > kaj</ b > 네가 도움을 주지 않아
HTML은 그래프를 마크업할 좋은 방법을 제공하지 않기 때문에 게임에서의 인터랙티브한 대화 설명을 마크업하기가 더 어렵습니다. 이 예제는 대화의 각 지점에서 가능한 응답을 나열하기 위해 dl
요소를 사용하는 하나의 가능성을 보여줍니다. 다른 옵션으로는
대화를 DOT 파일 형식으로 설명하고, 결과를 SVG 이미지로 출력하여 문서에 배치하는 방법이 있습니다. [DOT]
< p > 다음으로, 어부를 만나게 됩니다. 여러 가지 인사말 중 하나를 선택할 수 있습니다:
< dl >
< dt > "안녕하세요!"
< dd >
< p > 그녀가 "안녕하세요, 어떻게 도와드릴까요?"라고 대답합니다; 당신은 다음과 같은 대답을 할 수 있습니다:
< dl >
< dt > "물고기를 사고 싶습니다."
< dd > < p > 그녀가 물고기를 팔고 대화가 끝납니다.
< dt > "배를 빌릴 수 있을까요?"
< dd >
< p > 그녀가 놀라서 "대가로 무엇을 제공하시겠습니까?"라고 묻습니다.
< dl >
< dt > "금화 다섯 개." (충분한 금화가 있다면)
< dt > "금화 열 개." (충분한 금화가 있다면)
< dt > "금화 열다섯 개." (충분한 금화가 있다면)
< dd > < p > 그녀가 배를 빌려줍니다. 대화가 끝납니다.
< dt > "물고기 하나." (하나 가지고 있다면)
< dt > "신문 한 부." (하나 가지고 있다면)
< dt > "조약돌 하나." (하나 가지고 있다면)
< dd > < p > 그녀가 "사양할게요"라고 대답합니다. 이 시점에서 당신의 대화 선택지는 배를 빌려달라고 요청한 후와 동일하지만, 이전에 제안한 선택지는 제외됩니다.
</ dl >
</ dd >
</ dl >
</ dd >
< dt > "다음 선거에서 저를 뽑아주세요!"
< dd > < p > 그녀가 돌아섭니다. 대화가 끝납니다.
< dt > "부인, 물고기가 도망가고 있는 거 아세요?"
< dd >
< p > 그녀가 회의적으로 바라보며 "물고기는 달릴 수 없어요, 아가씨"라고 말합니다.
< dl >
< dt > "당신이 맞았어요!"
< dd > < p > 어부가 한숨을 쉬며 대화가 끝납니다.
< dt > "농담이에요."
< dd > < p > 그녀가 "좋은 농담이네요!"라고 대답합니다. 이 시점에서 당신의 대화 선택지는 앞서 "안녕하세요!" 이후와 동일합니다.
< dt > "그럼 그들은 무엇을 하고 있는 거죠?"
< dd > < p > 그녀가 물고기를 바라보고, 당신은 그녀의 배를 훔칠 기회를 갖습니다. 당신은 그렇게 하고 대화가 끝납니다.
</ dl >
</ dd >
</ dl >
일부 게임에서는 대화가 더 단순합니다: 각 캐릭터는 그들이 하는 고정된 대사를 가지고 있습니다. 이 예에서 게임 FAQ/워크스루는 각 캐릭터의 알려진 가능한 응답 중 일부를 나열합니다:
< section >
< h1 > 대화</ h1 >
< p >< small > 일부 캐릭터는 상호 작용할 때마다 순서대로 대사를 반복하고, 다른 캐릭터는 그들의 대사 중에서 무작위로 선택합니다. 순서대로 응답하는 캐릭터는 아래 목록에서 번호가 매겨진 항목을 가지고 있습니다.</ small >
< h2 > 상점 주인</ h2 >
< ul >
< li > 어떻게 도와드릴까요?
< li > 신선한 사과요!
< li > 여사님께 빵 한 덩이를 드릴까요?
</ ul >
< h2 > 파일럿</ h2 >
< p > 사고 전:
< ul >
< li > 나는 곧 출발해야 하니, 미안해!
< li > 미안해, 나는 출발 허가를 기다리고 있어, 그 후에 출발할 거야!
</ ul >
< p > 사고 후:
< ol >
< li > 나는 곧 출발해야 하니, 미안해!
< li > 알겠어, 나는 지금 출발하지 않아, 내 비행기가 청소되고 있어.
< li > 알겠어, 청소 중이 아니고, 먼저 약간의 수리가 필요해.
< li > 알겠어, 알겠어, 그만 귀찮게 해! 사실은, 나는 추락했어.
</ ol >
< h2 > 씨족장</ h2 >
< p > 첫 번째 씨족 회의 중:
< ul >
< li > 이봐, 내 딸 본 적 있어? 분명히 또 뭔가 나쁜 짓을 꾸미고 있을 거야...
< li > 오늘 날씨가 좋네요, 그렇죠?
< li > 내 이름은 Bailey, Jeff Bailey야. 오늘 어떻게 도와드릴까요?
< li > 물 한 잔? 우물에서 갓 나온 물이에요!
</ ul >
< p > 지진 후:
< ol >
< li > 모두 피난처에 안전하게 있으며, 불을 꺼야만 합니다!
< li > 나는 소방서에 가서 말할 테니, 계속 물을 뿌려줘!
</ ol >
</ section >
HTML은 각주를 마크업하는 전용 메커니즘을 제공하지 않습니다. 여기에 제안된 대안들이 있습니다.
짧은 인라인 주석의 경우, title
속성을 사용할 수 있습니다.
이 예제에서는 title
속성을 사용하여 각주와 유사한 내용을 대화의 두 부분에
주석으로 추가했습니다.
< p > < b > 고객</ b > : 안녕하세요! 불만을 접수하고 싶습니다. 안녕하세요, 아가씨?
< p > < b > 상점 주인</ b > : < span title = "'무엇을'의 구어 발음" > 무엇을</ span > 의미하시나요, 아가씨?
</ p > </ b > 고객</ b > : 아, 죄송합니다. 감기에 걸려서요. 불만을 접수하고 싶습니다.
</ p > </ b > 상점 주인</ b > : 죄송합니다, </ span title = "물론, 이것은 거짓말입니다." > 우리는 점심 시간으로 문을 닫습니다</ span > .
불행히도, title
속성에 의존하는 것은 현재 권장되지 않습니다.
많은 사용자 에이전트가 이 속성을 사양에서 요구하는 대로 접근 가능한 방식으로 노출하지 않기 때문입니다(예: 툴팁이 나타나기 위해 마우스와 같은 포인팅 장치를 요구하는데, 이는 키보드 전용 사용자와
터치 전용 사용자, 즉 현대의 스마트폰 또는 태블릿을 사용하는 사람들을 제외합니다).
title
속성이 사용되는 경우, CSS를 사용하여 해당 속성을 가진
요소에 독자의 관심을 끌 수 있습니다.
예를 들어, 다음 CSS는 title
속성을 가진 요소 아래에 점선 라인을
추가합니다.
[title] { border-bottom : thin dashed; }
긴 주석의 경우, a
요소를 사용하여 문서 내의 나중 요소를 가리켜야 합니다. 링크
내용은 대괄호 안에 숫자로 표시하는 것이 관례입니다.
이 예제에서는 대화 내 각주가 대화 아래의 단락과 연결됩니다. 그런 다음 단락은 다시 대화로 링크되어 사용자가 각주 위치로 돌아갈 수 있게 합니다.
< p > Announcer: Number 16: The < i > hand</ i > .
< p > Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why < em > do</ em > you
contradict people?
< p > Norman: I don't. < sup >< a href = "#fn1" id = "r1" > [1]</ a ></ sup >
< p > Interviewer: You told me you did!
...
< section >
< p id = "fn1" >< a href = "#r1" > [1]</ a > This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.</ p >
</ section >
사이드 노트의 경우, 특정 단어나 문장이 아닌 텍스트의 전체 섹션에 적용되는 긴 주석은 aside
요소를 사용해야 합니다.
이 예제에서는 대화 후에 사이드바가 제공되어 대화에 대한 컨텍스트를 제공합니다.
< p > < span class = "speaker" > 고객</ span > : 이 레코드는 사라서 사지 않겠습니다.
</ p > </ span class = "speaker" > 상점 주인</ span > : 죄송합니다?
</ p > </ span class = "speaker" > 고객</ span > : 이 레코드는 사라서 사지 않겠습니다.
</ p > </ span class = "speaker" > 상점 주인</ span > : 아니, 아니, 여기는 담배 가게입니다.
</ aside > </ p > 1970년에, 대영제국은 폐허가 되었고, 외국 민족주의자들이 거리에서 자주 목격되었습니다. 그들 중 많은 이들이 헝가리인이었습니다(거리가 아니라, 외국 민족주의자들이). 슬프게도, Alexander Yalt는 무능하게 쓰여진 구문 책을 출판하고 있습니다.</ aside >
도표나 표의 경우, 각주는 관련된 figcaption
또는 caption
요소 또는 주변의 서술문에서 포함될 수 있습니다.
이 예제에서는 각주가 설명된 표가 포함된 예제입니다. figure
요소가 사용되어 표와 각주를 조합한 전반적인
설명을 제공합니다.
< figure > </ figcaption > 표 1. 기사들을 위한 대안 활동.</ figcaption > </ table > </ tr > </ th > 활동
</ th > </ th > 장소
</ th > 비용
</ tr > </ td > 춤
</ td > 가능한 곳 어디든지
</ td > £0</ sup >< a href = "#fn1" > 1</ a ></ sup > </ tr > </ td > 루틴, 합창 장면</ sup >< a href = "#fn2" > 2</ a ></ sup > </ td > 공개되지 않음
</ td > 공개되지 않음
</ tr > </ td > 식사</ sup >< a href = "#fn3" > 3</ a ></ sup > </ td > 카멜롯
</ td > 햄, 잼, 스팸의 비용</ sup >< a href = "#fn4" > 4</ a ></ sup > </ tr > </ p id = "fn1" > 1. 추정됨.</ p > </ p id = "fn2" > 2. 발 동작이 훌륭함.</ p > </ p id = "fn3" > 3. 품질이 '괜찮다'고 설명됨.</ p > </ p id = "fn4" > 4. 많음.</ p > </ figure >
다음 중 하나에 해당하는 경우 요소가 실제로 비활성화된 것으로 간주됩니다:
이 정의는 어떤 요소가 포커스할 수 있는지와 :enabled 및 :disabled 가상 클래스와 일치하는지 결정하는 데 사용됩니다.
CSS Values and Units는 'attr()' 함수의 속성 이름에 대한 대소문자 구분을 호스트 언어에 의해 정의되도록 남겨둡니다. [CSSVALUES]
CSS 'attr()' 함수의 속성 이름 부분을 HTML 요소의 네임스페이스 없는 속성 이름과 비교할 때, CSS 'attr()' 함수의 이름 부분은 먼저 ASCII 소문자로 변환되어야 합니다. 다른 속성과 비교할 때는 원래의 대소문자로 비교해야 합니다. 두 경우 모두, 일치하려면 값이 동일해야 하며, 따라서 비교는 대소문자를 구분합니다.
이는 다음 섹션에 명시된 CSS 속성 선택자의 이름 부분을 비교하는 것과 동일합니다.
Selectors는 요소 이름, 속성 이름 및 속성 값의 대소문자 구분을 호스트 언어에 의해 정의되도록 남겨둡니다. [SELECTORS]
CSS 요소 유형 선택자를 HTML 요소의 이름과 비교할 때, CSS 요소 유형 선택자는 먼저 ASCII 소문자로 변환되어야 합니다. 다른 요소와 비교할 때는 원래의 대소문자로 비교해야 합니다. 두 경우 모두, 일치하려면 값이 동일해야 하며, 따라서 비교는 대소문자를 구분합니다.
CSS 속성 선택자의 이름 부분을 HTML 요소의 속성 이름과 비교할 때, CSS 속성 선택자의 이름 부분은 먼저 ASCII 소문자로 변환되어야 합니다. 다른 속성과 비교할 때는 원래의 대소문자로 비교해야 합니다. 두 경우 모두, 비교는 대소문자를 구분합니다.
속성 선택자가 HTML 요소의 속성 이름 중 다음 이름을 가진 속성 값은 ASCII 대소문자 구분 없음으로 처리되어야 합니다:
accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
valign
valuetype
vlink
예를 들어, 선택자 [bgcolor="#ffffff"]
은 bgcolor
속성의 값이 #ffffff
,
#FFFFFF
, #fffFFF
등을 포함하는 모든 HTML 요소와 일치합니다. 이는 bgcolor
가 특정 요소(예: div)에 대해 아무런 영향을 미치지 않더라도
발생합니다.
선택자 [type=a s]
은 type
속성의 값이 a
인 HTML 요소와 일치하지만, A
인 경우에는
일치하지 않습니다. 이는 s
플래그 때문에 발생합니다.
다른 모든 속성 값과 기타 항목은 선택자 일치 목적상 서로 동일한 것으로 간주되어야 합니다. 여기에는 다음이 포함됩니다:
ID와 클래스가 비정상 모드 및 제한된 비정상 모드에 있는 경우
HTML 네임스페이스에 속하지 않은 요소의 이름
HTML 네임스페이스에 속하지 않은 요소의 속성 이름
자체적으로 네임스페이스를 가진 속성의 이름
Selectors는 비정상 모드 문서에서 요소와
일치할 때 ID 및 클래스 선택자(#foo
및 .bar
와 같은)가 ASCII 대소문자
구분 없음 방식으로 일치한다고 정의합니다. 그러나 속성 선택자에서 "id
" 또는 "class
"가 이름 부분으로 사용된 경우에는 적용되지
않습니다. 선택자 [class="foobar"]
는 비정상 모드에서도 그 값을 대소문자 구분 방식으로 처리합니다.
HTML에서 사용할 수 있는 여러 동적 선택자가 있습니다. 이 섹션에서는 이러한 선택자가 HTML 요소와 일치하는 시점을 정의합니다. [SELECTORS] [CSSUI]
:defined
모든 최신 엔진에서 지원됩니다.
:link
모든 최신 엔진에서 지원됩니다.
:visited
모든 최신 엔진에서 지원됩니다.
모든 a
요소는
href
속성을 가지며, 모든 area
요소는 href
속성을 가지며, :link
및
:visited
중 하나와 일치해야 합니다.
다른 사양에서는 이러한 요소가 이러한 의사 클래스와 일치하는 방법에 대해 더 구체적인 규칙을 적용할 수 있으며, 이 요구 사항의 직설적인 구현과 관련된 일부 개인정보 보호 문제를 완화합니다.
:active
모든 최신 엔진에서 지원됩니다.
:active
의사 클래스는
사용자가 활성화된
요소와 일치하도록 정의됩니다.
특정 요소가 활성화되어 있는지
확인하려면, :active
의사 클래스를 정의하는 데, HTML 사용자 에이전트는 다음 목록에서 첫 번째 관련 항목을 사용해야 합니다.
버튼
요소인 경우
입력
요소이며
type
속성이
제출 버튼, 이미지
버튼, 리셋 버튼, 또는 버튼 상태인 경우
a
요소이며 href
속성이 있는 경우
영역
요소이며
href
속성이 있는 경우
요소가 활성화되어 있는 경우, 형식적인 활성화 상태에 있어야 합니다.
예를 들어, 사용자가 키보드를 사용하여 스페이스바를 눌러 버튼
요소를 누를 때, 이 요소는 keydown
이벤트를 받은 순간부터 keyup
이벤트를 받는 순간 사이에 이 의사
클래스와 일치하게 됩니다.
요소가 활성화되어 있는 상태입니다.
요소는 사용자가 활성화 동작을 트리거할 의도를 나타내기 시작하는 시점과 사용자가 활성화 동작을 트리거할 의도를 나타내는 것을 중지하는 시점 사이에 또는 요소의 활성화 동작이 완료되는 시점 중 먼저 오는 시점 사이에 형식적인 활성화 상태에 있다고 합니다.
요소는 사용자가 포인팅 장치를 사용하여 그 포인팅 장치가 "다운" 상태에 있을 때 (예: 마우스의 경우, 마우스 버튼이 눌린 시점과 버튼이 놓인 시점 사이; 멀티터치 환경에서 손가락이 디스플레이 표면에 닿아 있을 때) 활발하게 가리키고 있는 상태라고 합니다.
Selectors 정의에 따르면, :active
는 활성화되어 있는 요소의 평면 트리 조상에도 일치합니다.
[SELECTORS]
또한, 현재 :active
와 일치하는 레이블
요소의 레이블 제어인 요소는
또한 :active
와 일치합니다.
(하지만, 활성화되어 있는
것으로 간주되지 않습니다.)
:hover
모든 최신 엔진에서 지원됨.
:hover
가상 클래스는 사용자가 포인팅 장치를 사용하여 요소를 지정
할 때 요소와 일치하도록 정의됩니다.
:hover
가상 클래스를 정의하기 위해, HTML 사용자 에이전트는
사용자가 포인팅 장치를 사용하여 지목하는 요소를 지정된 요소로 간주해야 합니다.
Selectors 정의에 따르면, :hover
는
플랫 트리 조상 요소와도 일치합니다.
이 요소들은 지정됩니다.
[SELECTORS]
또한, 현재 :hover
와 일치하는 라벨
요소의
레이블 컨트롤인 모든 요소는
또한 :hover
와 일치합니다.
(하지만, 이는 지정된 것으로
간주되지 않습니다.)
다음과 같은 조각을 특히 고려해보세요:
< p > < label for = c > < input id = a > </ label > < span id = b > < input id = c > </ span > </ p >
사용자가 ID가 "a
"인 요소를 포인팅 장치로 지정하면, p
요소
(그리고 위의 스니펫에 표시되지 않은 모든 조상 요소들), 라벨
요소,
ID가 "a
"인 요소, ID가 "c
"인 요소는 :hover
가상 클래스와 일치합니다.
ID가 "a
"인 요소는 지정된 상태로 일치하고, 라벨
및
p
요소는
플랫 트리 조상에 관한 조건 때문에 일치하며, ID가 "c
"인 요소는 위에서 언급한 레이블 컨트롤의 추가 조건 때문에 일치합니다
(즉, 그 라벨
요소가 :hover
와 일치함).
그러나 ID가 "b
"인 요소는 :hover
와 일치하지 않습니다:
그 플랫 트리 자손이 지명되지 않았기 때문입니다, 비록 그 플랫 트리 자손이 :hover
와 일치하지만.
:focus
Support in all current engines.
CSS :focus
의사 클래스의 목적을 위해, 요소가 포커스를 가지고 있는
경우는 다음과 같습니다:
자체가 탐색 가능한 컨테이너가 아니며;
다음 중 하나가 참일 때:
최상위 탐색 가능한 객체의 현재 포커스 체인에 나열된 요소 중 하나일 때; 또는
그 섀도우 루트 shadowRoot가 null이 아니고, shadowRoot가 루트인 경우, 그리고 그 루트가 적어도 하나의 포커스를 가진 요소를 포함할 때.
:target
모든 현재 엔진에서 지원됩니다.
CSS :target
의사 클래스의 목적을 위해, document
의 대상 요소들은
document
의 대상 요소를 포함하는 목록입니다.
대상 요소가 null이 아니면 포함되며, 그렇지 않으면 요소가 포함되지 않습니다. [SELECTORS]
:popover-open
모든 현재 엔진에서 지원됩니다.
:popover-open
의사 클래스는
다음과 같이 정의됩니다: HTML
요소 중 popover
속성이 비어 있는 popover 상태가
아니고,
popover 가시성 상태가
표시 중인 요소.
:enabled
모든 현재 엔진에서 지원됩니다.
:enabled
가상 클래스는 다음과 같은 요소와 일치해야 합니다:
버튼
、
입력
、
선택
、
텍스트 영역
、
옵트그룹
、
옵션
、
필드셋
요소 또는
폼 관련 커스텀 요소
이 실제로 비활성화된 요소가 아닙니다.
:disabled
모든 현재 엔진에서 지원됩니다.
:checked
모든 현재 엔진에서 지원됩니다.
:indeterminate
모든 현재 엔진에서 지원됩니다.
:indeterminate
가상 클래스
는 다음 카테고리 중 하나에 해당하는 모든 요소와 일치해야 합니다:
:default
모든 현재 엔진에서 지원됩니다.
:placeholder-shown
:placeholder-shown
가상 클래스는 다음 카테고리 중 하나에 해당하는 모든 요소와 일치해야 합니다:
input
요소로, placeholder
속성을 가지고 있으며, 현재 사용자에게 해당 값이 표시되고 있는 요소입니다.
textarea
요소로, placeholder
속성을 가지고 있으며, 현재 사용자에게 해당 값이 표시되고 있는 요소입니다.
:valid
모든 현재 엔진에서 지원됩니다.
:valid
가상 클래스는 다음 카테고리 중 하나에 해당하는 모든 요소와 일치해야 합니다:
form
요소로,
폼 소유자가 아니며,
제약 조건 검사의 후보이지만
제약 조건을 충족하지 않는 요소가 없는 요소입니다.
fieldset
요소로,
자손 요소 중에 제약 조건 검사의 후보인 요소가 없으며,
제약 조건을 충족하지 않는 요소가 없는 요소입니다.
:invalid
모든 현재 엔진에서 지원됩니다.
:invalid
가상 클래스는 다음 카테고리 중 하나에 해당하는 모든 요소와 일치해야 합니다:
form
요소로,
폼 소유자이며,
자손 요소 중 제약 조건 검사의 후보가
제약 조건을 충족하지 않는 요소입니다.
fieldset
요소로,
자손 요소 중에 제약 조건 검사의 후보이며,
제약 조건을 충족하지 않는 요소가 포함된 경우
:user-valid
:user-valid
가상 클래스는 다음 조건을 충족하는
input
,
textarea
,
select
요소와 일치해야 합니다:
사용자 유효성이 true이고,
제약
조건 검사의 후보이며,
제약 조건을 충족하는 요소.
:user-invalid
:user-invalid
가상 클래스는 다음 조건을 충족하는
input
,
textarea
,
select
요소와 일치해야 합니다:
사용자 유효성이 true이고,
제약
조건 검사의 후보이며,
제약 조건을 충족하지 않는 요소.
:in-range
모든 현재 엔진에서 지원됩니다.
:in-range
가상 클래스는 제약 조건 검사의 후보이고, 범위 제한이 있으며, 언더플로우 또는 오버플로우 상태가 아닌 모든
요소와 일치해야 합니다.
:out-of-range
모든 현재 엔진에서 지원됩니다.
:out-of-range
가상 클래스는 제약 조건 검사의 후보이고, 범위 제한이 있으며, 언더플로우 또는 오버플로우 상태인 모든 요소와
일치해야 합니다.
:required
모든 현재 엔진에서 지원됩니다.
:optional
모든 현재 엔진에서 지원됩니다.
:autofill
:-webkit-autofill
:autofill
과
:-webkit-autofill
가상 클래스는 input
요소와 일치해야 하며, 이 요소는 사용자 에이전트에 의해 자동으로 채워진 상태입니다. 사용자가 자동 채워진 필드를 편집하면 이 가상 클래스는 더 이상 일치하지 않아야 합니다.
이러한 자동 채우기는 autocomplete
속성을 통해 발생할 수 있지만, 사용자 에이전트는 해당 속성이 관여하지 않아도 자동으로 채울 수 있습니다.
:read-only
모든 현재 엔진에서 지원됩니다.
:read-write
모든 현재 엔진에서 지원됩니다.
:read-write
가상 클래스는 다음 범주 중 하나에 해당하는 모든 요소와 일치해야 합니다. Selectors의 목적을 위해 이 요소들은
사용자 변경 가능으로 간주됩니다: [SELECTORS]
input
요소로, readonly
속성이 적용되지
않은 경우, mutable (즉, readonly
속성이
지정되지 않았으며 disabled 상태가 아닌 경우)
textarea
요소로, readonly
속성이
지정되지 않았으며, disabled 상태가 아닌
경우
input
요소나 textarea
요소가
아닌 경우
:read-only
가상 클래스는 다른 모든 HTML 요소와 일치해야 합니다.
:modal
:dir(ltr)
:dir(rtl)
:state(identifier)
가상 클래스는
사용자 정의 요소의
상태 집합에서
집합 항목에 identifier가 포함된 모든 요소와 일치해야 합니다.
:playing
:playing
가상 클래스는
미디어 요소 중
paused
속성이
false인 모든 요소와 일치해야 합니다.
:paused
:seeking
:seeking
가상 클래스는
미디어 요소 중
seeking
속성이
true인 모든 요소와 일치해야 합니다.
:buffering
:buffering
가상 클래스는
미디어 요소 중
paused
속성이
false이며, networkState
속성이
NETWORK_LOADING
이고,
준비 상태가 HAVE_CURRENT_DATA
이하인 모든 요소와 일치해야 합니다.
:stalled
:stalled
가상 클래스는
미디어 요소 중
:buffering
가상 클래스와 일치하고,
현재 정지 상태가 true인 모든 요소와 일치해야
합니다.
:muted
:volume-locked
:volume-locked
가상 클래스는
사용자 에이전트의
볼륨 잠금이 true일 때 모든
미디어 요소와 일치해야 합니다.
이 사양은 :lang()
동적 가상 클래스가 언제 일치하는지 정의하지
않으며, 이는
Selectors에서 언어에 구애받지 않는 방식으로 충분히 상세하게 정의되어 있습니다.
[SELECTORS]
이 섹션은 비규범적입니다.
때때로 페이지에 맞춤형 서비스를 제공하기 위해 일반적인 스크립트가 필요하거나, 여러 협력 작가의 콘텐츠를 일관되게 처리하기 위해 특정한 기계가 읽을 수 있는 라벨로 콘텐츠를 주석 달고 싶을 때가 있습니다.
이 목적을 위해, 저자는 이 섹션에서 설명된 마이크로데이터 기능을 사용할 수 있습니다. 마이크로데이터는 기존 콘텐츠와 병행하여 문서에 이름-값 쌍의 중첩된 그룹을 추가할 수 있게 합니다.
이 섹션은 비규범적입니다.
상위 수준에서, 마이크로데이터는 이름-값 쌍의 그룹으로 구성됩니다. 이 그룹들은 아이템이라고 불리며, 각 이름-값 쌍은 속성입니다. 아이템과 속성은 일반적인 요소로 표현됩니다.
아이템을 생성하려면 itemscope
속성을 사용합니다.
아이템에 속성을 추가하려면, 해당 아이템의
자손 중 하나에 itemprop
속성을 사용합니다.
다음은 각각 "name" 속성을 가진 두 개의 아이템입니다:
< div itemscope >
< p > My name is < span itemprop = "name" > Elizabeth</ span > .</ p >
</ div >
< div itemscope >
< p > My name is < span itemprop = "name" > Daniel</ span > .</ p >
</ div >
마이크로데이터 관련 속성이 없는 마크업은 마이크로데이터 모델에 영향을 미치지 않습니다.
이 두 예제는 마이크로데이터 수준에서 이전 두 예제와 각각 완전히 동일합니다:
< div itemscope >
< p > My < em > name</ em > is < span itemprop = "name" > E< strong > liz</ strong > abeth</ span > .</ p >
</ div >
< section >
< div itemscope >
< aside >
< p > My name is < span itemprop = "name" >< a href = "/?user=daniel" > Daniel</ a ></ span > .</ p >
</ aside >
</ div >
</ section >
속성은 일반적으로 문자열 값을 가집니다.
여기 아이템에는 세 가지 속성이 있습니다:
< div itemscope >
< p > My name is < span itemprop = "name" > Neil</ span > .</ p >
< p > My band is called < span itemprop = "band" > Four Parts Water</ f span > .</ f p >
< p > I am < span itemprop = "nationality" > British</ f span > .</ p >
</ div >
문자열 값이 URL인 경우,
이는 a
요소와
그 요소의 href
속성, img
요소와
그 속성인
src
속성, 또는 외부 리소스를 링크하거나 임베드하는 다른
요소들을 사용하여 표현됩니다.
이 예제에서 아이템은 "image"라는 속성을 가지며, 그 값은 URL입니다:
< div itemscope >
< img itemprop = "image" src = "google-logo.png" alt = "Google" >
</ div >
문자열 값이 인간이 소비하기에 부적합한 기계가 읽을 수 있는 형식으로 되어 있는 경우,
value
속성을 가진
data
요소를 사용하여 표현하며,
사람에게 읽을 수 있는 버전은 해당 요소의 내용으로 제공합니다.
여기에는 값이 제품 ID인 속성을 가진 아이템이 있습니다. 이 ID는 사람이 이해하기 어렵기 때문에, 제품의 이름이 ID 대신 사람이 볼 수 있는 텍스트로 사용됩니다.
< h1 itemscope >
< data itemprop = "product-id" value = "9678AOU879" > The Instigator 2000</ data >
</ h1 >
숫자 데이터를 위해서는, meter
요소와 그 속성인 value
속성을 대신 사용할 수
있습니다.
여기에서는 meter
요소를 사용하여
평점이 주어졌습니다.
< div itemscope itemtype = "http://schema.org/Product" >
< span itemprop = "name" > Panasonic White 60L Refrigerator</ span >
< img src = "panasonic-fridge-60l-white.jpg" alt = "" >
< div itemprop = "aggregateRating"
itemscope itemtype = "http://schema.org/AggregateRating" >
< meter itemprop = "ratingValue" min = 0 value = 3.5 max = 5 > Rated 3.5/5</ meter >
(based on < span itemprop = "reviewCount" > 11</ span > customer reviews)
</ div >
</ div >
유사하게, 날짜 및 시간 관련 데이터의 경우, time
요소와
그 속성인 datetime
속성을 대신 사용할 수
있습니다.
이 예제에서, 아이템은 "birthday"라는 속성을 가지며, 그 값은 날짜입니다:
< div itemscope >
I was born on < time itemprop = "birthday" datetime = "2009-05-10" > May 10th 2009</ time > .
</ div >
속성 자체가 이름-값 쌍의 그룹일 수도 있으며, 이 경우 속성을 선언하는 요소에 itemscope
속성을 추가합니다.
다른 아이템에 속하지 않는 아이템들은 최상위 마이크로데이터 아이템이라고 합니다.
이 예제에서, 외부 아이템은 사람을 나타내고, 내부 아이템은 밴드를 나타냅니다:
< div itemscope >
< p > Name: < span itemprop = "name" > Amanda</ span ></ p >
< p > Band: < span itemprop = "band" itemscope > < span itemprop = "name" > Jazz Band</ span > (< span itemprop = "size" > 12</ span > players)</ span ></ p >
</ div >
여기에서 외부 아이템은 "name"과 "band"라는 두 가지 속성을 가지고 있습니다. "name"은 "Amanda"이며, "band"는 자체적으로 두 가지 속성, "name"과 "size"를 가진 아이템입니다. 밴드의 "name"은 "Jazz Band"이며, "size"는 "12"입니다.
이 예제에서 외부 아이템은 최상위 마이크로데이터 아이템입니다.
itemscope
속성을 가진
요소의 자손이 아닌 속성들은 itemref
속성을 사용하여 아이템과 연결할 수 있습니다.
이 속성은 itemscope
속성을 가진
요소의 자손을 크롤링하는 것 외에도 크롤링할 요소들의 ID 목록을 받습니다.
이 예제는 이전 예제와 동일하지만, 모든 속성이 각자의 아이템과 분리되어 있습니다:
< div itemscope id = "amanda" itemref = "a b" ></ div >
< p id = "a" > Name: < span itemprop = "name" > Amanda</ span ></ p >
< div id = "b" itemprop = "band" itemscope itemref = "c" ></ div >
< div id = "c" >
< p > Band: < span itemprop = "name" > Jazz Band</ span ></ p >
< p > Size: < span itemprop = "size" > 12</ span > players</ p >
</ div >
이 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 "name"과 "band"라는 두 가지 속성을 가지며, "name"은 "Amanda", "band"는 또 다른 아이템으로 설정됩니다. 두 번째 아이템은 "name"이 "Jazz Band", "size"가 "12"인 두 가지 속성을 가집니다.
하나의 아이템은 같은 이름을 가진 여러 속성과 서로 다른 값을 가질 수 있습니다.
이 예제는 두 가지 맛을 가진 아이스크림을 설명합니다:
< div itemscope >
< p > Flavors in my favorite ice cream:</ p >
< ul >
< li itemprop = "flavor" > Lemon sorbet</ li >
< li itemprop = "flavor" > Apricot sorbet</ li >
</ ul >
</ div >
이렇게 하면 "flavor"라는 두 가지 속성, "Lemon sorbet"와 "Apricot sorbet"라는 값을 가진 아이템이 생성됩니다.
하나의 요소가 속성을 도입할 때, 일부 속성이 동일한 값을 가질 경우 중복을 피하기 위해 여러 속성을 동시에 도입할 수도 있습니다.
여기에서 우리는 "favorite-color"와 "favorite-fruit"라는 두 가지 속성을 가진 아이템을 볼 수 있으며, 둘 다 "orange"로 설정되어 있습니다:
< div itemscope >
< span itemprop = "favorite-color favorite-fruit" > orange</ span >
</ div >
마이크로데이터와 마이크로데이터가 마크업된 문서의 내용 사이에는 아무런 관계가 없다는 점을 유념하는 것이 중요합니다.
예를 들어, 다음 두 예제 간에는 의미상의 차이가 없습니다:
< figure >
< img src = "castle.jpeg" >
< figcaption >< span itemscope >< span itemprop = "name" > The Castle</ span ></ span > (1986)</ figcaption >
</ figure >
< span itemscope >< meta itemprop = "name" content = "The Castle" ></ span >
< figure >
< img src = "castle.jpeg" >
< figcaption > The Castle (1986)</ figcaption >
</ figure >
둘 다 캡션이 있는 figure 요소를 가지고 있으며, 둘 다 figure와는 완전히 관련이 없는 아이템을 가지고 있고, 이름 "name"과 값 "The Castle"을 가진 이름-값 쌍을 포함합니다. 유일한 차이점은 사용자가 캡션을 문서에서 드래그할 경우, 전자의 경우 아이템이 드래그 앤 드롭 데이터에 포함된다는 것입니다. 어느 경우에도 이미지와 아이템 간에는 어떤 연관성도 없습니다.
이 섹션은 비규범적입니다.
이전 섹션의 예제들은 마이크로데이터가 재사용될 것을 예상하지 않는 페이지에서 정보를 어떻게 마크업할 수 있는지를 보여줍니다. 그러나 마이크로데이터는 다른 저자와 독자들이 마크업을 새로운 방식으로 활용할 수 있는 환경에서 가장 유용합니다.
이 목적을 위해서는 각 아이템에 "https://example.com/person", "https://example.org/cat", 또는 "https://band.example.net/"과 같은 타입을 부여해야 합니다. 타입은 URL로 식별됩니다.
아이템의 타입은 itemtype
속성의 값으로, itemscope
속성이 있는 동일한 요소에 지정됩니다.
여기에서 아이템의 타입은 "https://example.org/animals#cat"입니다:
< section itemscope itemtype = "https://example.org/animals#cat" >
< h1 itemprop = "name" > Hedral</ h1 >
< p itemprop = "desc" > Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.</ p >
< img itemprop = "img" src = "hedral.jpeg" alt = "" title = "Hedral, age 18 months" >
</ section >
이 예제에서 "https://example.org/animals#cat" 아이템은 세 가지 속성을 가집니다. "name"("Hedral"), "desc"("Hedral is..."), 그리고 "img"("hedral.jpeg")입니다.
타입은 속성에 대한 문맥을 제공하여 어휘를 선택합니다. 예를 들어 "https://census.example/person" 타입의 아이템에 "class"라는 속성이 주어지면 개인의 경제적 계급을 나타낼
수 있지만, "https://example.com/school/teacher" 타입의 아이템에 "class"라는 속성이 주어지면 교사가 배정된 교실을 나타낼 수 있습니다. 여러 타입이 어휘를 공유할 수
있습니다. 예를 들어, "https://example.org/people/teacher
"와
"https://example.org/people/engineer
" 타입은 동일한 어휘를 사용하도록 정의될 수 있습니다 (다만 일부 속성은 두 경우 모두에서 특별히 유용하지 않을
수 있으며, 예를 들어 "https://example.org/people/engineer
" 타입은 일반적으로 "classroom
" 속성과 함께 사용되지
않을 수 있습니다). 동일한 어휘를 사용하는 여러 타입은 속성 값에 공백으로 구분된 URL 목록을 나열하여 단일 아이템에 지정될 수 있습니다. 그러나 동일한 어휘를 사용하지 않는 두 타입을 하나의
아이템에 지정할 수는 없습니다.
이 섹션은 비규범적입니다.
때때로, 아이템이 전역 식별자를 가진 주제에 대한 정보를 제공합니다. 예를 들어, 책은 ISBN 번호로 식별될 수 있습니다.
itemtype
속성으로 식별되는 어휘는 아이템이 itemid
속성에 주어진 URL을 통해 전역 식별자를 명확하게 연결할 수 있도록 설계될 수 있습니다.
itemid
속성에 주어진 URL의 정확한 의미는 사용된 어휘에 따라 달라집니다.
여기서는 특정 책에 대한 아이템을 설명하고 있습니다:
< dl itemscope
itemtype = "https://vocab.example.net/book"
itemid = "urn:isbn:0-330-34032-8" >
< dt > Title
< dd itemprop = "title" > The Reality Dysfunction
< dt > Author
< dd itemprop = "author" > Peter F. Hamilton
< dt > Publication date
< dd >< time itemprop = "pubdate" datetime = "1996-01-26" > 26 January 1996</ time >
</ dl >
이 예제에서 "https://vocab.example.net/book
" 어휘는 itemid
속성이 책의 ISBN을 가리키는
URL을 취하도록 정의됩니다.
이 섹션은 비규범적입니다.
마이크로데이터를 사용하려면 어휘를 사용해야 합니다. 일부 목적에서는 임시 어휘로도 충분하지만, 다른 경우에는 어휘를 설계해야 할 필요가 있습니다. 가능하면 저자들은 기존 어휘를 재사용하는 것이 좋으며, 이는 콘텐츠 재사용을 용이하게 만듭니다.
새로운 어휘를 설계할 때 식별자는 URL을 사용하거나, 속성의 경우 점이나 콜론이 없는 일반 단어로 만들 수 있습니다. URL의 경우 저자가 제어할 수 있는 페이지에 해당하는 식별자만 사용하면 다른 어휘와의 충돌을 피할 수 있습니다.
예를 들어, Jon과 Adam이 각각 example.com
에서 https://example.com/~jon/...
과
https://example.com/~adam/...
에 콘텐츠를 작성한다고 가정할 때, 각각 "https://example.com/~jon/name"과
"https://example.com/~adam/name" 형식의 식별자를 선택할 수 있습니다.
이름이 일반 단어인 속성은 해당 속성이 의도된 타입의 문맥 내에서만 사용할 수 있으며, URL을 사용하여 이름이 지정된 속성은 어떤 타입의 아이템에서도 재사용할 수 있습니다. 아이템에 타입이 없고 다른 아이템의 일부가 아닌 경우, 속성의 이름이 일반 단어라면 이는 전역적으로 고유하지 않으며, 대신 제한된 용도로만 사용될 의도로 만들어진 것입니다. 일반적으로 저자들은 전역적으로 고유한 이름(URL)을 가진 속성을 사용하거나, 그들의 아이템에 타입을 지정하는 것이 좋습니다.
여기서 아이템은 "https://example.org/animals#cat" 타입이며, 대부분의 속성 이름은 해당 타입의 문맥에서 정의된 단어입니다. 또한 다른 어휘에서 가져온 몇 가지 추가 속성도 있습니다.
< section itemscope itemtype = "https://example.org/animals#cat" >
< h1 itemprop = "name https://example.com/fn" > Hedral</ h1 >
< p itemprop = "desc" > Hedral is a male American domestic shorthair, with a fluffy < span
itemprop = "https://example.com/color" > black</ span > fur with < span
itemprop = "https://example.com/color" > white</ span > paws and belly.</ p >
< img itemprop = "img" src = "hedral.jpeg" alt = "" title = "Hedral, age 18 months" >
</ section >
이 예제에는 "https://example.org/animals#cat" 타입의 하나의 아이템과 다음 속성들이 있습니다:
속성 | 값 |
name | Hedral |
https://example.com/fn | Hedral |
desc | Hedral is a male American domestic shorthair, with a fluffy black fur with white paws and belly. |
https://example.com/color | black |
https://example.com/color | white |
img | .../hedral.jpeg |
마이크로데이터 모델은 아이템이라고 알려진 이름-값 쌍의 그룹으로 구성됩니다.
각 그룹은 아이템으로 알려져 있습니다. 각 아이템은 아이템 타입, 전역 식별자 (만약 아이템 타입에 의해 지정된 어휘가 아이템에 대한 전역 식별자를 지원한다면), 그리고 이름-값 쌍의 목록을 가질 수 있습니다. 이름-값 쌍에서 각 이름은 속성으로 알려져 있으며, 각 속성은 하나 이상의 값을 가집니다. 각 값은 문자열이거나, 자체적으로 이름-값 쌍의 그룹 (아이템)일 수 있습니다. 이름들은 서로 간에 순서가 없지만, 특정 이름이 여러 값을 가지는 경우에는 그들 사이에 상대적 순서가 존재합니다.
모든 현재 엔진에서 지원.
모든 HTML 요소에는 itemscope
속성을 지정할 수 있습니다. itemscope
속성은 불리언 속성입니다.
itemscope
속성이 지정된 요소는 새로운 아이템, 즉 이름-값 쌍의 그룹을 생성합니다.
모든 현재 엔진에서 지원.
itemscope
속성을 가진 요소에는 itemtype
속성을 지정하여 아이템 타입을 정의할 수 있습니다.
itemtype
속성이 지정된 경우, 그 값은 공백으로 구분된 고유한 토큰의 비순서 집합이어야 하며, 토큰 중 어느 것도 다른 토큰과
일치해서는 안
되며 각 토큰은 유효한 URL 문자열이어야 하며 절대 URL이어야 합니다. 이 속성의
값에는 최소한 하나의 토큰이 있어야 합니다.
아이템의 아이템 타입은 요소의 itemtype
속성의 값을 ASCII 공백으로 분리하여 얻은 토큰입니다.
itemtype
속성이 없거나 이 방식으로 파싱하여 토큰을 찾지 못한 경우, 해당
아이템은 아이템 타입이 없다고
합니다.
아이템 타입은 모두 적용 가능한 사양에서 정의된 타입이어야 하며, 동일한 어휘를 사용하도록 정의되어야 합니다.
그 사양에서 달리 명시하지 않는 한, URL로 지정된 아이템 타입은 자동으로 역참조되지 않아야 합니다.
사양에서는 아이템 타입을 역참조하여 예를 들어 사용자에게 도움 정보를 제공할 수 있도록 정의할 수 있습니다. 사실 어휘 저자들은 지정된 URL에서 유용한 정보를 제공하는 것이 권장됩니다.
아이템 타입은 불투명한 식별자이며, 사용자 에이전트는 이를 역참조하거나, 아이템을 처리하는 방법을 결정하기 위해 아이템에 사용된 아이템 타입을 해체해서는 안 됩니다.
itemtype
속성은 itemscope
속성이 지정되지 않은 요소에 지정되어서는 안 됩니다.
아이템은 아이템 타입을 가지거나, 타입이 지정된 아이템의 속성의 값인 경우 타입이 지정된 아이템이라고 합니다. 타입이 지정된 아이템의 관련 타입은 해당 아이템의 아이템 타입이며, 없을 경우 이는 아이템의 속성의 값입니다.
모든 현재 엔진에서 지원.
itemscope
속성과, 항목에 대한 전역 식별자를 지원하는 것으로 정의된 어휘를
참조하는 itemtype
속성을 가진 요소는 전역 식별자를 제공하기 위해 itemid
속성을 지정할 수도
있습니다. 이로 인해 웹의 다른 페이지에서 다른 아이템과 연관될 수 있습니다.
itemid
속성이 지정된 경우, 그 값은 유효한
URL(공백으로 둘러싸일 수 있음)이어야 합니다.
아이템의 전역 식별자는 해당 요소에 지정된 itemid
속성의 값이며, 파싱하여 요소가 지정된 노드 문서와 상대적으로
연결됩니다. itemid
속성이 없거나 파싱에 실패한 경우, 전역 식별자가 없는 것으로
간주됩니다.
itemid
속성은 itemscope
속성과 itemtype
속성이 모두 지정되지 않은 요소에 지정되어서는 안 되며, itemscope
속성을 가진 요소에 지정되어서는 안 됩니다. 또한 해당 어휘의
사양에 따라 항목에 대한 전역 식별자를 지원하지 않는 itemtype
속성이 지정된
요소에도 지정되어서는 안 됩니다.
전역 식별자의 정확한 의미는 어휘의 사양에 의해 결정됩니다. 동일한 전역 식별자를 가진 여러 아이템이 존재할 수 있는지 여부(같은 페이지에서든 다른 페이지에서든)와, 동일한 ID를 가진 여러 아이템을 처리하는 규칙에 대해서는 이러한 사양에 따라 정의됩니다.
모든 현재 엔진에서 지원.
itemscope
속성이 있는 요소에는 itemref
속성을 지정하여 아이템의 이름-값 쌍을 찾기 위해 추가로 크롤링할 요소 목록을 지정할 수 있습니다.
itemref
속성이 지정된 경우, 그 값은 공백으로 구분된 고유한 토큰의 비순서 집합이어야 하며, 토큰 중 어느 것도 다른
토큰과 일치해서는 안 되며, 동일한 ID를 가지는 동일한 트리 내의 요소들로 구성되어야 합니다.
itemref
속성은 itemscope
속성이 지정되지 않은 요소에 지정되어서는 안 됩니다.
itemref
속성은 마이크로데이터 데이터 모델의 일부가 아닙니다.
이는 단순히 트리 구조를 따르지 않는 데이터를 주석 처리할 수 있도록 저자에게 도움을 주기 위한 구문적 구성 요소입니다. 예를 들어, 각 열이 별도의 아이템을 정의하면서 속성을 셀에 유지하도록 데이터를 표에 마크업할 수 있게 합니다.
이 예제는 모델 철도 제조업체의 제품을 설명하는 데 사용되는 간단한 어휘를 보여줍니다. 이 어휘에는 다섯 가지 속성 이름만 있습니다:
이 어휘에는 네 가지 아이템 타입이 정의되어 있습니다:
이 어휘를 사용하는 각 아이템은 제품이 무엇인지에 따라 이 타입들 중 하나 이상을 가질 수 있습니다.
따라서, 기관차는 다음과 같이 마크업될 수 있습니다:
< dl itemscope itemtype = "https://md.example.com/loco
https://md.example.com/lighting" >
< dt > Name:
< dd itemprop = "name" > Tank Locomotive (DB 80)
< dt > Product code:
< dd itemprop = "product-code" > 33041
< dt > Scale:
< dd itemprop = "scale" > HO
< dt > Digital:
< dd itemprop = "digital" > Delta
</ dl >
전환 랜턴 레트로핏 키트는 다음과 같이 마크업될 수 있습니다:
< dl itemscope itemtype = "https://md.example.com/track
https://md.example.com/lighting" >
< dt > Name:
< dd itemprop = "name" > Turnout Lantern Kit
< dt > Product code:
< dd itemprop = "product-code" > 74470
< dt > Purpose:
< dd > For retrofitting 2 < span itemprop = "track-type" > C</ span > Track turnouts. < meta itemprop = "scale" content = "HO" >
</ dl >
조명이 없는 객차는 다음과 같이 마크업될 수 있습니다:
< dl itemscope itemtype = "https://md.example.com/passengers" >
< dt > Name:
< dd itemprop = "name" > Express Train Passenger Car (DB Am 203)
< dt > Product code:
< dd itemprop = "product-code" > 8710
< dt > Scale:
< dd itemprop = "scale" > Z
</ dl >
새로운 어휘를 만들 때는 매우 신중해야 합니다. 종종 각 항목이 단일 유형만을 갖는 어휘를 결과로 하는 계층적 접근 방식을 사용할 수 있으며, 이는 일반적으로 관리하기 훨씬 간단합니다.
itemprop
속성모든 최신 엔진에서 지원됩니다.
모든 HTML 요소는 itemprop
속성을 가질 수 있으며, 이 속성을 지정하면 하나 이상의 속성을 하나 이상의 아이템에 추가합니다(아래 정의된 대로).
itemprop
속성을 지정하면, 값은 고유한 공백으로 구분된 토큰의 비정렬
집합이어야 하며, 각 토큰은 서로 동일하지 않아야 하며, 이 토큰들은 추가하는 이름-값
쌍의 이름을 나타냅니다. 속성 값에는 적어도 하나의 토큰이 있어야 합니다.
각 토큰은 다음 중 하나여야 합니다:
정의된 속성 이름을 도입하는 명세서는 이러한 모든 속성 이름에 U+002E FULL STOP 문자(.)나 U+003A COLON 문자(:), 그리고 ASCII 공백 문자가 포함되지 않도록 보장해야 합니다.
위의 규칙은 URL이 아닌 값에서 U+003A COLON 문자(:)를 허용하지 않으며, 그렇지 않으면 URL과 구분할 수 없기 때문입니다. U+002E FULL STOP 문자(.)가 포함된 값은 미래 확장을 위해 예약되어 있습니다. ASCII 공백 문자는 값이 여러 토큰으로 파싱될 수 있기 때문에 허용되지 않습니다.
요소에 itemprop
속성이 지정되고, 이 속성이 여러 아이템에 속성을 추가하면,
위에서 언급한 토큰에 관한 요구 사항은 각 아이템별로 개별적으로
적용됩니다.
요소의 속성 이름은 요소의 itemprop
속성이 포함된 것으로 확인된 토큰들이며, 값이 ASCII
공백으로 분리될 때 순서가 유지되지만 중복이 제거됩니다(각 이름의 첫 번째 발생만 남김).
하나의 아이템 내에서, 속성들은 서로 간에 순서가 지정되지 않으며, 같은 이름의 속성들만 해당 속성들이 아이템의 속성을 정의하는 알고리즘에 의해 주어진 순서대로 정렬됩니다.
다음 예제에서, "a" 속성은 "1"과 "2" 값을 가지며, 그 순서대로입니다. 그러나 "a" 속성이 "b" 속성보다 먼저 오는지 여부는 중요하지 않습니다:
< div itemscope >
< p itemprop = "a" > 1</ p >
< p itemprop = "a" > 2</ p >
< p itemprop = "b" > test</ p >
</ div >
따라서 다음은 동등합니다:
< div itemscope >
< p itemprop = "b" > test</ p >
< p itemprop = "a" > 1</ p >
< p itemprop = "a" > 2</ p >
</ div >
다음과 같이:
< div itemscope >
< p itemprop = "a" > 1</ p >
< p itemprop = "b" > test</ p >
< p itemprop = "a" > 2</ p >
</ div >
그리고 다음과 같이:
< div id = "x" >
< p itemprop = "a" > 1</ p >
</ div >
< div itemscope itemref = "x" >
< p itemprop = "b" > test</ p >
< p itemprop = "a" > 2</ p >
</ div >
itemprop
속성이 있는
요소가 추가한 이름-값 쌍의 속성 값은 다음 목록에서 일치하는 첫 번째 경우에 따라 결정됩니다:
itemscope
속성이 있는 경우
값은 해당 요소가 생성한 아이템입니다.
meta
요소인 경우
값은 요소의 content
속성의 값입니다. 해당 속성이
없는 경우 빈 문자열이 됩니다.
audio
, embed
, iframe
, img
, source
, track
, 또는 video
요소인 경우
값은 요소의 src
속성 값을 기준으로, 요소의 노드 문서에
상대적으로 URL을 인코딩, 파싱 및 직렬화한 결과입니다. 해당 속성이 없거나 결과가 실패인
경우 빈 문자열이 됩니다.
a
, area
, 또는 link
요소인 경우
값은 요소의 href
속성 값을 기준으로, 요소의 노드 문서에
상대적으로 URL을 인코딩, 파싱 및 직렬화한 결과입니다. 해당 속성이 없거나 결과가 실패인
경우 빈 문자열이 됩니다.
object
요소인 경우
값은 요소의 data
속성 값을 기준으로, 요소의 노드 문서에
상대적으로 URL을 인코딩, 파싱 및 직렬화한 결과입니다. 해당 속성이 없거나 결과가 실패인
경우 빈 문자열이 됩니다.
data
요소인 경우
값은 요소의 value
속성의 값입니다. 해당 속성이 없는 경우 빈
문자열이 됩니다.
meter
요소인 경우
값은 요소의 value
속성의 값입니다. 해당 속성이 없는 경우
빈 문자열이 됩니다.
time
요소인 경우
값은 요소의 datetime 값입니다.
값은 요소의 하위 텍스트 콘텐츠입니다.
URL 속성 요소는 a
, area
, audio
, embed
, iframe
, img
, link
, object
, source
, track
, 그리고 video
요소입니다.
속성의 값이 해당 속성의 정의에 따라 절대 URL인 경우, 해당 속성은 URL 속성 요소를 사용하여 지정해야 합니다.
이 요구 사항은 속성 값이 우연히 URL 구문과 일치한다고 해서 적용되는 것은 아닙니다. 이 요구 사항은 속성이 명시적으로 그러한 값을 취하도록 정의된 경우에만 적용됩니다.
예를 들어, 최초의 달 착륙에 관한 책이 "mission:moon"이라는 제목을 가질 수 있습니다. 제목을 문자열로 정의하는 어휘에서 "title" 속성은 URL처럼 보이더라도
a
요소로 제목을 지정하지 않아야 합니다. 반면, "URL처럼 보이는 제목을 가진
책"이라는 (매우 좁은 범위의!) 어휘가 있으며, 이 어휘의 "title" 속성은 URL을 취하도록 정의된 경우에는, 위의 요구 사항 때문에 제목을 a
요소(또는 다른 URL 속성 요소 중 하나)로 지정해야 합니다.
요소 root에 의해 정의된 항목의 속성을 찾기 위해, 사용자 에이전트는 다음 단계를 실행해야 합니다. 이러한 단계는 또한 마이크로데이터 오류를 플래그 지정하는 데 사용됩니다.
results, memory, pending이라는 비어 있는 요소 목록을 만듭니다.
root 요소를 memory에 추가합니다.
root의 자식 요소가 있다면 pending에 추가합니다.
root에 itemref
속성이 있는 경우, 그
itemref
속성의 값을 ASCII 공백으로 나눕니다. 그렇게 해서 나온 각 토큰 ID에 대해,
root의 트리에 해당 ID를 가진 요소가 있다면, 그 중 첫 번째
요소를 pending에 추가합니다.
pending이 비어 있지 않은 동안:
pending에서 요소를 제거하고 그 요소를 current라고 합니다.
만약 current가 이미 memory에 있다면, 이는 마이크로데이터 오류가 발생한 것이므로 계속 진행합니다.
current를 memory에 추가합니다.
만약 current에 itemscope
속성이 없다면, current의 모든 자식 요소를 pending에 추가합니다.
current에 itemprop
속성이 지정되어 있고 하나 이상의 속성
이름이 있는 경우, current를 results에 추가합니다.
results를 트리 순서로 정렬합니다.
results를 반환합니다.
문서에는 항목의 속성을 찾는 알고리즘에서 마이크로데이터 오류를 찾는 항목이 포함되지 않아야 합니다.
요소에 itemprop
속성이 지정되어 있지 않다면, 그 항목은 최상위 마이크로데이터 항목이라고 합니다.
모든 itemref
속성은 문서 내의 항목이 노드로 표현되고, 항목의 속성이 다른 항목으로
연결된 그래프에서 순환이 없도록 해야 합니다.
문서에는 속성이 결정될
경우, 해당 문서에 포함된 항목의 속성으로 발견되지 않을 itemprop
속성을 가진 요소가 포함되어 있어서는 안 됩니다.
다음 예에서는 단일 라이선스 선언이 itemref
를 사용하여 두 개의 작품에
적용됩니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Photo gallery</ title >
</ head >
< body >
< h1 > My photos</ h1 >
< figure itemscope itemtype = "http://n.whatwg.org/work" itemref = "licenses" >
< img itemprop = "work" src = "images/house.jpeg" alt = "A white house, boarded up, sits in a forest." >
< figcaption itemprop = "title" > The house I found.</ figcaption >
</ figure >
< figure itemscope itemtype = "http://n.whatwg.org/work" itemref = "licenses" >
< img itemprop = "work" src = "images/mailbox.jpeg" alt = "Outside the house is a mailbox. It has a leaflet inside." >
< figcaption itemprop = "title" > The mailbox.</ figcaption >
</ figure >
< footer >
< p id = "licenses" > All images licensed under the < a itemprop = "license"
href = "http://www.opensource.org/licenses/mit-license.php" > MIT
license</ a > .</ p >
</ footer >
</ body >
</ html >
위의 코드는 "http://n.whatwg.org/work
" 타입을 가진 두 개의 항목을 생성하며, 하나는 다음과 같습니다:
images/house.jpeg
http://www.opensource.org/licenses/mit-license.php
...그리고 다른 하나는 다음과 같습니다:
images/mailbox.jpeg
http://www.opensource.org/licenses/mit-license.php
현재, itemscope
, itemprop
및 기타 마이크로데이터 속성은 HTML 요소에만 정의되어 있습니다.
이는 "itemscope
", "itemprop
" 등의 문자 그대로의 이름을 가진 속성이 SVG와 같은 다른 네임스페이스의 요소에서 마이크로데이터 처리를
발생시키지 않는다는 것을 의미합니다.
따라서 아래 예제에서 항목은 두 개가 아니라 하나만 존재합니다.
< p itemscope ></ p > <!-- 이 요소는 항목입니다 (속성과 유형이 없음) -->
< svg itemscope ></ svg > <!-- 이 요소는 항목이 아닙니다. 그저 알 수 없는 속성이 있는 SVG SVG svg
요소일 뿐입니다. -->
이 섹션의 어휘는 어휘가 어떻게 지정되는지를 보여주기 위한 주된 목적으로 사용되지만, 자체적으로도 사용 가능합니다.
아이템 유형 http://microformats.org/profile/hcard
을 가진 아이템은 사람이나 조직의 연락처 정보를 나타냅니다.
이 어휘는 아이템에 대한 글로벌 식별자 지원을 지원하지 않습니다.
다음은 이 유형의 정의된 속성 이름입니다. 이는 vCard Format Specification(vCard) 및 그 확장에서 정의된 어휘를 기반으로 하며, 값의 해석에 대한 자세한 정보는 해당 문서에서 찾을 수 있습니다. [RFC6350]
kind
아이템이 나타내는 연락처의 종류를 설명합니다.
값은 다음과 동일한 kind strings 중 하나여야 합니다.
kind
라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수 있습니다.
fn
사람이나 조직의 이름에 해당하는 형식화된 텍스트를 제공합니다.
값은 텍스트여야 합니다.
fn
이라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재해야 합니다.
n
사람이나 조직의 구조화된 이름을 제공합니다.
값은 아이템이어야 하며, family-name
, given-name
, additional-name
,
honorific-prefix
,
honorific-suffix
속성을 각각 0개 이상 포함할 수 있습니다.
n
이라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재해야 합니다.
family-name
(inside n
)
사람의 성 또는 조직의 전체 이름을 제공합니다.
값은 텍스트여야 합니다.
family-name
라는 이름을 가진
속성은 아이템 내에서 값의 n
속성의 일부로 존재할 수 있습니다.
given-name
(inside n
)
사람의 이름을 제공합니다.
값은 텍스트여야 합니다.
given-name
라는 이름을 가진 속성은
아이템 내에서 값의 n
속성의 일부로 존재할 수 있습니다.
additional-name
(inside n
)
사람의 추가 이름을 제공합니다.
값은 텍스트여야 합니다.
additional-name
라는
이름을 가진 속성은 아이템 내에서 값의 n
속성의 일부로 존재할 수 있습니다.
honorific-prefix
(inside n
)
사람의 경칭을 제공합니다.
값은 텍스트여야 합니다.
honorific-prefix
라는
이름을 가진 속성은 아이템 내에서 값의 n
속성의 일부로 존재할 수 있습니다.
honorific-suffix
(inside n
)
사람의 존칭을 제공합니다.
값은 텍스트여야 합니다.
honorific-suffix
라는
이름을 가진 속성은 아이템 내에서 값의 n
속성의 일부로 존재할 수 있습니다.
nickname
사람이나 조직의 별명을 제공합니다.
별명은 사람, 장소, 또는 사물에 속하는 이름 대신에, 또는 그에 추가하여 주어진 설명적인 이름입니다. fn
또는 n
속성으로 지정된 고유 이름의 친숙한 형태를 지정하는 데에도 사용할 수 있습니다.
값은 텍스트여야 합니다.
nickname
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
photo
사람이나 조직의 사진을 제공합니다.
photo
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
bday
사람이나 조직의 생년월일을 제공합니다.
값은 유효한 날짜 문자열이어야 합니다.
bday
라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
anniversary
사람이나 조직의 기념일을 제공합니다.
값은 유효한 날짜 문자열이어야 합니다.
anniversary
라는 이름을 가진 단일 속성은
아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
sex
사람의 생물학적 성별을 제공합니다.
값은 F
, "여성"을 의미,
M
, "남성"을 의미, N
, "없음 또는 해당 없음"을 의미, O
, "기타"를 의미, U
,
"알 수 없음"을 의미하는 값 중 하나여야 합니다.
sex
라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
gender-identity
사람의 성 정체성을 제공합니다.
값은 텍스트여야 합니다.
gender-identity
라는
이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
adr
사람이나 조직의 배송 주소를 제공합니다.
값은 아이템이어야 하며, type
, post-office-box
,
extended-address
,
street-address
속성을 0개 이상 포함할 수 있으며, 선택적으로 locality
, region
, postal-code
, country-name
속성을
선택적으로 포함할 수 있습니다.
만약 type
속성이 아이템 내에 존재하지 않는다면 work
가 암시됩니다.
adr
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
type
(inside adr
)
배송 주소의 유형을 제공합니다.
post-office-box
(inside adr
)
사람이나 조직의 배송 주소의 우편함 구성 요소를 제공합니다.
값은 텍스트여야 합니다.
post-office-box
라는
이름을 가진 속성은 아이템 내에서 값의 adr
속성의 일부로 존재할 수 있습니다.
vCard는 이 필드의 사용을 자제할 것을 권고합니다.
extended-address
(inside adr
)
사람이나 조직의 배송 주소의 추가 구성 요소를 제공합니다.
값은 텍스트여야 합니다.
extended-address
라는
이름을 가진 속성은 아이템 내에서 값의 adr
속성의 일부로 존재할 수 있습니다.
vCard는 이 필드의 사용을 자제할 것을 권고합니다.
street-address
(inside adr
)
사람이나 조직의 배송 주소의 거리 주소 구성 요소를 제공합니다.
값은 텍스트여야 합니다.
street-address
라는
이름을 가진 속성은 아이템 내에서 값의 adr
속성의 일부로 존재할 수 있습니다.
locality
(inside adr
)
사람이나 조직의 배송 주소의 지역 구성 요소(예: 도시)를 제공합니다.
값은 텍스트여야 합니다.
region
(inside adr
)
사람이나 조직의 배송 주소의 지역 구성 요소(예: 주 또는 도)를 제공합니다.
값은 텍스트여야 합니다.
postal-code
(inside adr
)
사람이나 조직의 배송 주소의 우편번호 구성 요소를 제공합니다.
값은 텍스트여야 합니다.
postal-code
라는 이름을
가진 단일 속성은 아이템 내에서 값의 adr
속성의 일부로 존재할 수 있습니다.
country-name
(inside adr
)
사람이나 조직의 배송 주소의 국가 이름 구성 요소를 제공합니다.
값은 텍스트여야 합니다.
country-name
라는
이름을 가진 단일 속성은 아이템 내에서 값의 adr
속성의 일부로 존재할 수 있습니다.
tel
사람이나 조직의 전화번호를 제공합니다.
값은 텍스트로, CCITT 명세 E.163 및 X.121에서
정의한 전화번호로 해석될 수 있어야 하며, 또는 아이템이어야 하며, 0개 이상의 type
속성과 정확히 하나의 value
속성을 가져야 합니다. [E163] [X121]
만약 type
속성이 아이템 내에 존재하지 않는다면, 또는 tel
속성의 값이 텍스트일 경우, voice
전화 유형 문자열이 암시됩니다.
tel
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
type
(inside tel
)
전화번호의 유형을 제공합니다.
value
(inside tel
)
사람이나 조직의 실제 전화번호를 제공합니다.
값은 CCITT 명세 E.163 및 X.121에서 정의된 전화번호로 해석될 수 있는 텍스트여야 합니다. [E163] [X121]
email
사람이나 조직의 이메일 주소를 제공합니다.
값은 텍스트여야 합니다.
email
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
impp
사람이나 조직과의 인스턴트 메시징 및 상태 프로토콜 통신을 위한 URL을 제공합니다.
impp
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
lang
사람이나 조직이 이해하는 언어를 제공합니다.
값은 유효한 BCP 47 언어 태그여야 합니다. [BCP47]
lang
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
tz
사람이나 조직의 시간대를 제공합니다.
값은 텍스트여야 하며 다음 구문과 일치해야 합니다:
tz
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
geo
사람이나 조직의 지리적 위치를 제공합니다.
값은 텍스트여야 하며 다음 구문과 일치해야 합니다:
별표(*)가 있는 선택적 구성 요소는 포함되어야 하며, 각각 6자리 숫자를 가져야 합니다.
값은 위도와 경도를 순서대로 나타내며, 10진수로 표현된 도 단위입니다. 경도는 본초 자오선의 동쪽과 서쪽 위치를 각각 양수 또는 음수의 실수로 나타냅니다. 위도는 적도의 북쪽과 남쪽 위치를 각각 양수 또는 음수의 실수로 나타냅니다.
geo
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
title
사람이나 조직의 직위, 기능적 위치 또는 역할을 제공합니다.
값은 텍스트여야 합니다.
title
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
role
사람이나 조직의 역할, 직업 또는 사업 카테고리를 제공합니다.
값은 텍스트여야 합니다.
role
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
logo
사람이나 조직의 로고를 제공합니다.
logo
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
agent
사람이나 조직을 대신하여 행동할 다른 사람의 연락처 정보를 제공합니다.
값은 아이템이거나 절대 URL, 또는 텍스트여야 합니다.
agent
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
org
조직의 이름 및 단위를 제공합니다.
값은 텍스트이거나, 아이템으로서 organization-name
속성을 하나 가지고, 0개 이상의 organization-unit
속성을 가질 수 있습니다.
org
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
organization-name
(inside org
)
조직의 이름을 제공합니다.
값은 텍스트여야 합니다.
organization-name
라는
이름을 가진 단일 속성은 아이템 내에서 값의 org
속성의 일부로 존재해야 합니다.
organization-unit
(inside org
)
조직 단위의 이름을 제공합니다.
값은 텍스트여야 합니다.
organization-unit
라는
이름을 가진 속성은 아이템 내에서 값의 org
속성의 일부로 존재할 수 있습니다.
member
URL을 제공하며, 그룹의 구성원을 나타냅니다.
member
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다. 해당 아이템이 또한 kind
이라는 이름을 가진 속성과 함께, "group
" 값으로 존재할 경우에 한합니다.
related
다른 엔터티와의 관계를 제공합니다.
값은 아이템이어야 하며, 하나의 url
속성과 하나의 rel
속성을 가져야 합니다.
related
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
url
(inside related
)
관련 엔터티의 URL을 제공합니다.
rel
(inside related
)
엔터티와 관련 엔터티 사이의 관계를 제공합니다.
categories
사람이나 조직을 분류할 수 있는 카테고리 또는 태그의 이름을 제공합니다.
값은 텍스트여야 합니다.
categories
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
note
사람이나 조직에 대한 추가 정보 또는 코멘트를 제공합니다.
값은 텍스트여야 합니다.
note
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
rev
연락처 정보의 수정 날짜와 시간을 제공합니다.
값은 유효한 글로벌 날짜 및 시간 문자열이어야 합니다.
값은 다른 버전의 정보에 대한 현재 정보 수정을 구분합니다.
rev
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
sound
사람이나 조직과 관련된 사운드 파일을 제공합니다.
sound
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
uid
사람이나 조직에 해당하는 전역 고유 식별자를 제공합니다.
값은 텍스트여야 합니다.
uid
라는 이름을 가진 단일 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
url
사람이나 조직과 관련된 URL을 제공합니다.
url
라는 이름을 가진 속성은 아이템의 유형 http://microformats.org/profile/hcard
내에 존재할 수
있습니다.
유형 문자열은 다음과 같습니다:
individual
단일 엔터티를 나타냅니다 (예: 사람).
group
다수의 엔터티를 나타냅니다 (예: 메일링 리스트).
org
사람이 아닌 단일 엔터티를 나타냅니다 (예: 회사).
location
지리적 장소를 나타냅니다 (예: 사무실 건물).
주소 유형 문자열은 다음과 같습니다:
home
거주지의 배송 주소를 나타냅니다.
work
작업장의 배송 주소를 나타냅니다.
전화 유형 문자열은 다음과 같습니다:
home
거주지 전화번호를 나타냅니다.
work
작업장의 전화번호를 나타냅니다.
text
문자 메시지(SMS)를 지원하는 전화번호를 나타냅니다.
voice
음성 전화번호를 나타냅니다.
fax
팩스 전화번호를 나타냅니다.
cell
휴대전화 번호를 나타냅니다.
video
화상 회의 전화번호를 나타냅니다.
pager
호출기 전화번호를 나타냅니다.
textphone
청각 또는 언어 장애인을 위한 통신 장치를 나타냅니다.
관계 문자열은 다음과 같습니다:
emergency
긴급 연락처.
agent
이 엔터티를 대신하여 행동하는 다른 엔터티.
XFN에서 정의된 의미를 갖습니다. [XFN]
사용자 에이전트는 document
내의 노드 목록 nodes가
주어졌을
때, 다음 알고리즘을 실행하여 해당 노드들에 의해 표현된 vCard 데이터를 추출해야 합니다(첫 번째 vCard만 반환됩니다):
만약 nodes에 있는 노드들 중 아이템으로서 아이템 타입이 http://microformats.org/profile/hcard
인
노드가 없다면, vCard가 없습니다. 알고리즘을 중단하고 아무것도 반환하지 않습니다.
node를 nodes에서 아이템으로서 아이템 타입이 http://microformats.org/profile/hcard
인
첫 번째 노드로 설정합니다.
output을 빈 문자열로 설정합니다.
vCard 라인 추가 작업을 수행하여 output에 "BEGIN" 타입과 "VCARD" 값을 추가합니다.
vCard 라인 추가 작업을 수행하여 output에 "PROFILE" 타입과 "VCARD" 값을 추가합니다.
vCard 라인 추가 작업을 수행하여 output에 "VERSION" 타입과 "4.0" 값을 추가합니다.
vCard 라인 추가 작업을 수행하여 output에 "SOURCE" 타입과 vCard 텍스트 문자열 이스케이프를 통해 얻어진 문서의 URL 값을 추가합니다.
title 요소가 null이 아니라면, vCard 라인 추가 작업을 수행하여 output에 "NAME" 타입과 vCard 텍스트 문자열 이스케이프를 통해 title 요소의 후손 텍스트 콘텐츠로부터 얻어진 값을 추가합니다.
sex를 빈 문자열로 설정합니다.
gender-identity를 빈 문자열로 설정합니다.
아이템 node의 속성인 각 element에 대해, element의 속성 이름들에 있는 각 name에 대해 다음의 하위 단계를 실행합니다:
parameters를 이름-값 쌍의 빈 집합으로 설정합니다.
다음 목록에서 적절한 하위 단계 집합을 실행합니다. 단계들은 다음 단계에서 사용될 value 변수를 설정합니다.
n
인
경우
value를 빈 문자열로 설정합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 family-name
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 given-name
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 additional-name
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 honorific-prefix
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 honorific-suffix
이름의 서브속성을 수집한 결과를 value에 추가합니다.
adr
인 경우
value를 빈 문자열로 설정합니다.
vCard 서브속성 수집 작업을
통해 subitem에서 post-office-box
이름의 서브속성을 수집한 결과를 value에 추가합니다.
vCard 서브속성 수집
작업을 통해 subitem에서 extended-address
이름의 서브속성을 수집한 결과를 value에 추가합니다.
vCard 서브속성 수집
작업을 통해 subitem에서 street-address
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 locality
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 region
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 postal-code
이름의 서브속성을 수집한 결과를 value에 추가합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 country-name
이름의 서브속성을 수집한 결과를 value에 추가합니다.
subitem에 type
이라는
이름의 속성이 있고, 그 첫 번째 속성의 값이 아이템이 아니며 값이 ASCII 알파뉴메릭으로만 구성된 경우, 해당
속성의 값을
parameters에 "TYPE"이라는 이름으로 추가합니다.
org
인 경우
value를 빈 문자열로 설정합니다.
첫 번째 vCard
서브속성 수집 작업을 통해 subitem에서 organization-name
이름의 서브속성을 수집한 결과를 value에 추가합니다.
subitem에 organization-unit
이라는
이름의 속성이 있다면, 다음 단계를 실행합니다:
해당 속성의 값을 vCard 텍스트 문자열 이스케이프를 통해 처리한 결과를 value에 추가합니다.
http://microformats.org/profile/hcard
이고
name이 related
인 경우
value를 빈 문자열로 설정합니다.
subitem에 url
이라는
이름의 속성이 있으며, 그 요소가 URL 속성 요소인 경우,
value에 첫 번째 속성의 값을 vCard 텍스트 문자열
이스케이프를 통해 추가하고, "VALUE
"라는 이름과 "URI
"라는 값을 가진
매개변수를 parameters에 추가합니다.
subitem에 rel
이라는
이름의 속성이 있으며, 그 첫 번째 속성의 값이 아이템이 아니며 값이 ASCII 알파뉴메릭으로만 구성된 경우, 해당
속성의 값을
parameters에 "RELATION"이라는 이름으로 추가합니다.
value를 subitem에서 value
라는 이름의 첫 번째 vCard
서브속성 수집 작업을 통해 얻은 결과로 설정합니다.
subitem에 type
이라는 이름의 속성이 있고, 그 첫 번째 속성의 값이 아이템이 아니며 값이 ASCII 알파뉴메릭으로만 구성된 경우, 해당
속성의 값을
parameters에 "TYPE"이라는 이름으로 추가합니다.
sex
인 경우
이 속성이 처음 발견된 경우, sex를 해당 속성의 값으로 설정합니다.
gender-identity
인
경우
이 속성이 처음 발견된 경우, gender-identity를 해당 속성의 값으로 설정합니다.
value를 속성의 값으로 설정합니다.
element가 URL 속성 요소 중 하나인 경우,
"VALUE
"라는 이름과 "URI
"라는 값을 가진 매개변수를
parameters에 추가합니다.
그 외의 경우, name이 bday
또는 anniversary
인
경우, 그리고 value가 유효한 날짜 문자열인 경우,
"VALUE
"라는 이름과 "DATE
"라는 값을 가진 매개변수를
parameters에 추가합니다.
그 외의 경우, name이 rev
이고,
value가 유효한 전역 날짜 및 시간
문자열인 경우, "VALUE
"라는 이름과 "DATE-TIME
"라는 값을 가진
매개변수를 parameters에 추가합니다.
value 내의 모든 U+005C 역슬래시(\) 문자를 동일한 문자로 하나 더 추가합니다.
value 내의 모든 U+002C 콤마(,) 문자를 U+005C 역슬래시(\) 문자로 앞에 추가합니다.
name이 geo
가 아닌
경우, value 내의 모든 U+003B 세미콜론 문자(;)를 U+005C 역슬래시(\) 문자로 앞에 추가합니다.
value 내의 모든 U+000D 캐리지 리턴 U+000A 라인 피드 문자 쌍(CRLF)을 U+005C 역슬래시(\) 문자와 그 뒤에 U+006E 라틴 소문자 n(n) 문자로 대체합니다.
value 내의 남아 있는 모든 U+000D 캐리지 리턴(CR) 또는 U+000A 라인 피드(LF) 문자를 U+005C 역슬래시(\) 문자와 그 뒤에 U+006E 라틴 소문자 n(n) 문자로 대체합니다.
vCard 라인 추가 작업을 수행하여 output에 name 타입, parameters 매개변수, value 값을 추가합니다.
만약 sex 또는 gender-identity 중 하나라도 빈 문자열이 아닌 값을 가지고 있다면, vCard 라인 추가 작업을 수행하여 output에 "GENDER" 타입과 sex, U+003B 세미콜론 문자(;), gender-identity 값을 이어 붙인 결과를 추가합니다.
vCard 라인 추가 작업을 수행하여 output에 "END" 타입과 "VCARD" 값을 추가합니다.
위의 알고리즘이 사용자 에이전트에게 vCard 줄 추가를 요청할 때, 타입 type, 선택적 매개 변수, 그리고 값 value로 구성된 줄을 문자열 output에 추가해야 한다고 명시할 경우, 다음 단계를 수행해야 합니다:
line을 빈 문자열로 설정합니다.
type을 ASCII 대문자로 변환하여 line에 추가합니다.
매개 변수가 있는 경우, 추가된 순서대로 각 매개 변수에 대해 다음 하위 단계를 수행합니다:
line에 U+003B 세미콜론 문자(;)를 추가합니다.
매개 변수의 이름을 line에 추가합니다.
line에 U+003D 이퀄 사인 문자(=)를 추가합니다.
매개 변수의 값을 line에 추가합니다.
line에 U+003A 콜론 문자(:)를 추가합니다.
value를 line에 추가합니다.
maximum length를 75로 설정합니다.
line의 코드 포인트 길이가 maximum length보다 클 때:
line의 처음 maximum length 코드 포인트를 output에 추가합니다.
line에서 처음 maximum length 코드 포인트를 제거합니다.
output에 U+000D 캐리지 리턴 문자(CR)를 추가합니다.
output에 U+000A 라인 피드 문자(LF)를 추가합니다.
output에 U+0020 스페이스 문자를 추가합니다.
maximum length를 74로 설정합니다.
line의 남은 부분을 output에 추가합니다.
output에 U+000D 캐리지 리턴 문자(CR)를 추가합니다.
output에 U+000A 라인 피드 문자(LF)를 추가합니다.
위 단계가 사용자 에이전트에게 subitem에서 subname이라는 이름의 vCard 하위 속성을 수집한 결과를 얻으라고 요구할 때, 다음 단계를 수행해야 합니다:
value를 빈 문자열로 설정합니다.
subitem의 항목 중 subname이라는 이름의 각 속성에 대해, 다음 하위 단계를 수행합니다:
이전 단계에서 건너뛴 속성을 제외한, subitem의 subname이라는 이름의 첫 번째 속성이 아닌 경우, value에 U+002C 콤마 문자(,)를 추가합니다.
해당 속성의 값으로부터 vCard 텍스트 문자열 이스케이프 결과를 value에 추가합니다.
value를 반환합니다.
위 단계가 사용자 에이전트에게 subitem에서 subname이라는 이름의 첫 번째 vCard 하위 속성을 수집한 결과를 얻으라고 요구할 때, 다음 단계를 수행해야 합니다:
subitem에 subname이라는 이름의 속성이 없다면, 빈 문자열을 반환합니다.
subitem에서 subname이라는 이름의 첫 번째 속성의 값으로부터 vCard 텍스트 문자열 이스케이프 결과를 반환합니다.
위 알고리즘이 사용자 에이전트에게 value에 대해 vCard 텍스트 문자열을 이스케이프하라고 요구할 때, 다음 단계를 수행해야 합니다:
value에 있는 모든 U+005C 리버스 솔리더스 문자(\) 앞에 또 다른 U+005C 리버스 솔리더스 문자(\)를 추가합니다.
value에 있는 모든 U+002C 콤마 문자(,) 앞에 U+005C 리버스 솔리더스 문자(\)를 추가합니다.
value에 있는 모든 U+003B 세미콜론 문자(;) 앞에 U+005C 리버스 솔리더스 문자(\)를 추가합니다.
value에 있는 모든 U+000D 캐리지 리턴 U+000A 라인 피드 문자 쌍(CRLF)을 U+005C 리버스 솔리더스 문자(\)와 그 뒤에 오는 U+006E 라틴 소문자 N 문자(n)로 대체합니다.
value에 있는 나머지 모든 U+000D 캐리지 리턴(CR) 또는 U+000A 라인 피드(LF) 문자를 U+005C 리버스 솔리더스 문자(\)와 그 뒤에 오는 U+006E 라틴 소문자 N 문자(n)로 대체합니다.
변경된 value를 반환합니다.
이 알고리즘은 입력이 http://microformats.org/profile/hcard
아이템 유형 및 정의된 속성 이름에 대한 규칙을 준수하지 않을 경우, 유효하지 않은 vCard 출력을 생성할 수 있습니다.
이 섹션은 비규범적입니다.
"Jack Bauer"라는 가상의 인물에 대한 긴 vCard 예제입니다:
< section id = "jack" itemscope itemtype = "http://microformats.org/profile/hcard" >
< h1 itemprop = "fn" >
< span itemprop = "n" itemscope >
< span itemprop = "given-name" > Jack</ span >
< span itemprop = "family-name" > Bauer</ span >
</ span >
</ h1 >
< img itemprop = "photo" alt = "" src = "jack-bauer.jpg" >
< p itemprop = "org" itemscope >
< span itemprop = "organization-name" > Counter-Terrorist Unit</ span >
(< span itemprop = "organization-unit" > Los Angeles Division</ span > )
</ p >
< p >
< span itemprop = "adr" itemscope >
< span itemprop = "street-address" > 10201 W. Pico Blvd.</ span >< br >
< span itemprop = "locality" > Los Angeles</ span > ,
< span itemprop = "region" > CA</ span >
< span itemprop = "postal-code" > 90064</ span >< br >
< span itemprop = "country-name" > United States</ span >< br >
</ span >
< span itemprop = "geo" > 34.052339;-118.410623</ span >
</ p >
< h2 > 연락 방법</ h2 >
< ul >
< li itemprop = "tel" itemscope >
< span itemprop = "value" > +1 (310) 597 3781</ span > < span itemprop = "type" > work</ span >
< meta itemprop = "type" content = "voice" >
</ li >
< li >< a itemprop = "url" href = "https://en.wikipedia.org/wiki/Jack_Bauer" > 나의 위키백과 문서</ a > 에 메시지를 남길 수 있습니다.</ li >
< li >< a itemprop = "url" href = "http://www.jackbauerfacts.com/" > Jack Bauer 사실</ a ></ li >
< li itemprop = "email" >< a href = "mailto:j.bauer@la.ctu.gov.invalid" > j.bauer@la.ctu.gov.invalid</ a ></ li >
< li itemprop = "tel" itemscope >
< span itemprop = "value" > +1 (310) 555 3781</ span > < span >
< meta itemprop = "type" content = "cell" > mobile phone</ span >
</ li >
</ ul >
< ins datetime = "2008-07-20 21:00:00+01:00" >
< meta itemprop = "rev" content = "2008-07-20 21:00:00+01:00" >
< p itemprop = "tel" itemscope >< strong > 업데이트!</ strong >
새 < span itemprop = "type" > 집</ span > 전화번호는
< span itemprop = "value" > 01632 960 123</ span > 입니다.</ p >
</ ins >
</ section >
줄 바꿈이 이상하게 되어 있는 것은 줄 바꿈이 마이크로데이터에서 의미가 있기 때문입니다. 줄 바꿈은 예를 들어 vCard 형식으로 변환할 때 보존됩니다.
이 예제는 사이트의 연락처 세부정보( address
요소 사용)를 보여주며, 두 개의 도로 구성 요소를 포함한 주소를 포함합니다:
< address itemscope itemtype = "http://microformats.org/profile/hcard" >
< strong itemprop = "fn" >< span itemprop = "n" itemscope >< span itemprop = "given-name" > Alfred</ span >
< span itemprop = "family-name" > Person</ span ></ span ></ strong > < br >
< span itemprop = "adr" itemscope >
< span itemprop = "street-address" > 1600 Amphitheatre Parkway</ span > < br >
< span itemprop = "street-address" > Building 43, Second Floor</ span > < br >
< span itemprop = "locality" > Mountain View</ span > ,
< span itemprop = "region" > CA</ span > < span itemprop = "postal-code" > 94043</ span >
</ span >
</ address >
vCard 어휘는 사람의 이름만을 마크업하는 데 사용될 수 있습니다:
< span itemscope itemtype = "http://microformats.org/profile/hcard"
>< span itemprop = fn >< span itemprop = "n" itemscope >< span itemprop = "given-name"
> George</ span > < span itemprop = "family-name" > Washington</ span ></ span
></ span ></ span >
이것은 "fn"이라는 이름과 "George Washington"이라는 값을 가진 이름-값 쌍 하나와 "n"이라는 이름과 값을 가진 두 번째 항목을 생성합니다. 두 번째 항목에는 "given-name"과 "family-name"이라는 두 개의 이름-값 쌍이 각각 "George"와 "Washington"이라는 값을 가집니다. 이것은 다음 vCard로 매핑되도록 정의됩니다:
BEGIN:VCARD PROFILE:VCARD VERSION:4.0 SOURCE:document's address FN:George Washington N:Washington;George;;; END:VCARD
아이템 타입 http://microformats.org/profile/hcalendar#vevent
을 가진 항목은 이벤트를 나타냅니다.
이 어휘는 아이템에 대한 전역 식별자를 지원하지 않습니다.
다음은 이 타입의 정의된 속성 이름입니다. 이들은 인터넷 일정 및 스케줄링 핵심 객체 사양 (iCalendar)에서 정의된 어휘를 기반으로 하며, 값 해석에 대한 자세한 정보는 해당 문서에서 확인할 수 있습니다. [RFC5545]
여기서는 iCalendar 어휘 중 이벤트와 관련된 부분만 사용되며, 이 어휘는 완전한 iCalendar 인스턴스를 표현할 수 없습니다.
attach
이벤트와 관련된 문서의 주소를 제공합니다.
attach
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
categories
이벤트가 분류될 수 있는 카테고리나 태그의 이름을 제공합니다.
값은 텍스트여야 합니다.
categories
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
class
이벤트와 관련된 정보의 접근 분류를 제공합니다.
값은 다음 값 중 하나를 가진 텍스트여야 합니다:
public
private
confidential
이것은 단지 권고사항일 뿐, 비밀 유지 조치로 간주될 수 없습니다.
class
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
comment
이벤트에 대한 코멘트를 제공합니다.
값은 텍스트여야 합니다.
comment
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
description
이벤트에 대한 상세 설명을 제공합니다.
값은 텍스트여야 합니다.
description
라는 이름의 속성은
http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
geo
이벤트의 지리적 위치를 제공합니다.
값은 텍스트여야 하며, 다음 구문과 일치해야 합니다:
별표(*)로 표시된 선택적 구성 요소는 포함되어야 하며, 각각 6자리 숫자여야 합니다.
값은 위도와 경도를 각각 그 순서대로(LAT LON 순서) 10진수로 지정합니다. 경도는 기준 자오선의 동서 위치를 각각 양수 또는 음수 실수로 나타내며, 위도는 적도의 북남 위치를 각각 양수 또는 음수 실수로 나타냅니다.
geo
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
location
이벤트의 위치를 제공합니다.
값은 텍스트여야 합니다.
location
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
resources
이벤트에 필요한 자원을 제공합니다.
값은 텍스트여야 합니다.
resources
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
status
이벤트의 확인 상태를 제공합니다.
값은 다음 값 중 하나를 가진 텍스트여야 합니다:
tentative
confirmed
canceled
status
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
summary
이벤트의 간략한 요약을 제공합니다.
값은 텍스트여야 합니다.
사용자 에이전트는 값을 사용할 때 U+000A LINE FEED (LF) 문자를 U+0020 SPACE 문자로 대체해야 합니다.
summary
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
dtend
이벤트가 끝나는 날짜와 시간을 제공합니다.
dtend
라는 이름의 속성이 http://microformats.org/profile/hcalendar#vevent
타입의 아이템 내에 존재하며, 해당 아이템에 dtstart
라는 이름의 속성이 있고 그 값이 유효한 날짜 문자열인 경우, dtend
라는 이름의 속성의 값도 유효한 날짜 문자열이어야 합니다. 그렇지 않으면, 해당 속성의 값은 유효한 전역 날짜 및 시간 문자열이어야 합니다.
어느 경우든, 값은 동일한 아이템의 dtstart
속성 값보다 늦어야 합니다.
dtend
속성으로 제공된 시간은
포함되지 않습니다. 따라서 하루 종일 진행되는 이벤트의 경우, dtend
속성의 값은 이벤트가 끝나는 날 다음
날이 됩니다.
dtend
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서, duration
라는 이름의 속성이 없는 경우에만
하나 존재할 수 있습니다.
dtstart
이벤트가 시작되는 날짜와 시간을 제공합니다.
값은 유효한 날짜 문자열이거나 유효한 전역 날짜 및 시간 문자열이어야 합니다.
dtstart
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재해야 합니다.
duration
이벤트의 지속 시간을 제공합니다.
값은 유효한 vevent 기간 문자열이어야 합니다.
표시된 기간은 값 내의 정수로 표현된 모든 기간의 합입니다.
duration
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서, dtend
라는 이름의 속성이 없는 경우에만 하나 존재할 수
있습니다.
transp
이벤트가 캘린더에서 시간을 소비하는 것으로 간주되는지 여부를 제공하여, 바쁨/여유 시간 검색을 위한 목적에 사용됩니다.
값은 다음 값 중 하나를 가진 텍스트여야 합니다:
opaque
transparent
transp
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
contact
이벤트의 연락처 정보를 제공합니다.
값은 텍스트여야 합니다.
contact
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
url
이벤트의 URL을 제공합니다.
url
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
uid
이벤트에 해당하는 전역 고유 식별자를 제공합니다.
값은 텍스트여야 합니다.
uid
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
exdate
반복 규칙에도 불구하고 이벤트가 발생하지 않는 날짜와 시간을 제공합니다.
값은 유효한 날짜 문자열이거나 유효한 전역 날짜 및 시간 문자열이어야 합니다.
exdate
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
rdate
이벤트가 반복되는 날짜와 시간을 제공합니다.
값은 다음 중 하나의 텍스트여야 합니다:
rdate
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
rrule
이벤트가 발생하는 날짜와 시간을 찾기 위한 규칙을 제공합니다.
값은 iCalendar에서 정의된 RECUR 값 유형과 일치하는 텍스트여야 합니다. [RFC5545]
rrule
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
created
이벤트 정보가 일정 시스템에 처음 생성된 날짜와 시간을 제공합니다.
값은 유효한 전역 날짜 및 시간 문자열이어야 합니다.
created
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
last-modified
이벤트 정보가 일정 시스템에서 마지막으로 수정된 날짜와 시간을 제공합니다.
값은 유효한 전역 날짜 및 시간 문자열이어야 합니다.
last-modified
라는 이름의
속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
sequence
이벤트 정보의 개정 번호를 제공합니다.
값은 유효한 음수가 아닌 정수이어야 합니다.
sequence
라는 이름의 속성은 http://microformats.org/profile/hcalendar#vevent
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
문자열이 유효한 vevent 기간 문자열인 경우, 다음 패턴과 일치해야 합니다:
U+0050 LATIN CAPITAL LETTER P 문자(P).
다음 중 하나:
유효한 음수가 아닌 정수와 U+0057 LATIN CAPITAL LETTER W 문자(W). 정수는 그 주 수의 기간을 나타냅니다.
다음 중 하나 또는 둘 다:
유효한 음수가 아닌 정수와 U+0044 LATIN CAPITAL LETTER D 문자(D). 정수는 그 날 수의 기간을 나타냅니다.
U+0054 LATIN CAPITAL LETTER T 문자(T)와 다음 중 하나 또는 둘 다:
유효한 음수가 아닌 정수와 U+0048 LATIN CAPITAL LETTER H 문자(H). 정수는 그 시간 수의 기간을 나타냅니다.
유효한 음수가 아닌 정수와 U+004D LATIN CAPITAL LETTER M 문자(M). 정수는 그 분 수의 기간을 나타냅니다.
유효한 음수가 아닌 정수와 U+0053 LATIN CAPITAL LETTER S 문자(S). 정수는 그 초 수의 기간을 나타냅니다.
nodes 목록이 document
에 주어졌을 때,
사용자
에이전트는 다음 알고리즘을 실행하여 해당 노드들이 나타내는 모든 vEvent 데이터를 추출해야 합니다:
nodes의 어떤 노드도 http://microformats.org/profile/hcalendar#vevent
타입의 아이템이 아니라면, vEvent 데이터가 없습니다. 알고리즘을
중단하고 아무것도 반환하지 않습니다.
output을 빈 문자열로 설정합니다.
타입 "BEGIN
"과 값 "VCALENDAR
"을 가진 iCalendar 줄을 output에 추가합니다.
타입 "PRODID
"과 사용자 에이전트를 나타내는 사용자 에이전트별 문자열과 동일한 값을 가진 iCalendar 줄을 output에 추가합니다.
타입 "VERSION
"과 값 "2.0
"을 가진 iCalendar 줄을 output에 추가합니다.
nodes에서 http://microformats.org/profile/hcalendar#vevent
타입의 아이템인 각 노드 node에 대해 다음
단계를 실행합니다:
타입 "BEGIN
"과 값 "VEVENT
"을 가진 iCalendar 줄을 output에
추가합니다.
타입 "DTSTAMP
"과 현재 날짜 및 시간을 나타내는 iCalendar DATE-TIME 문자열로 구성된 값을 가진 iCalendar
줄을 "VALUE=DATE-TIME
" 주석과 함께 output에 추가합니다. [RFC5545]
node의 아이템의 속성인 각 요소 element에 대해: element의 속성 이름에 있는 각 이름 name에 대해, 다음 목록에서 적절한 하위 단계를 실행합니다:
속성을 건너뜁니다.
dtend
인 경우
dtstart
인
경우exdate
인
경우rdate
인 경우
created
인
경우last-modified
인
경우value를 속성의 값에서 모든 U+002D HYPHEN-MINUS(-) 및 U+003A COLON(:) 문자를 제거한 결과로 설정합니다.
속성의 값이 유효한 날짜 문자열인
경우, name 타입과 value 값을 가진 iCalendar 줄을
"VALUE=DATE
" 주석과 함께 output에 추가합니다.
그렇지 않고 속성의 값이 유효한 전역 날짜 및 시간 문자열인
경우, name 타입과 value 값을 가진 iCalendar 줄을
"VALUE=DATE-TIME
" 주석과 함께 output에 추가합니다.
그렇지 않으면 속성을 건너뜁니다.
name 타입과 속성의 값을 가진 iCalendar 줄을 output에 추가합니다.
타입 "END
"과 값 "VEVENT
"을 가진 iCalendar 줄을 output에
추가합니다.
타입 "END
"과 값 "VCALENDAR
"을 가진 iCalendar 줄을 output에 추가합니다.
위 알고리즘에서 사용자 에이전트가 type 타입, value 값, 및 선택적으로 주석으로 구성된 iCalendar 줄을 문자열 output에 추가해야 한다고 하는 경우, 다음 단계를 실행해야 합니다:
line을 빈 문자열로 설정합니다.
ASCII 대문자로 변환된 type을 line에 추가합니다.
주석이 있는 경우:
U+003B SEMICOLON 문자(;)를 line에 추가합니다.
주석을 line에 추가합니다.
U+003A COLON 문자(:)를 line에 추가합니다.
value에 있는 모든 U+005C REVERSE SOLIDUS 문자(\) 앞에 다른 U+005C REVERSE SOLIDUS 문자(\)를 추가합니다.
value에 있는 모든 U+002C COMMA 문자(,) 앞에 U+005C REVERSE SOLIDUS 문자(\)를 추가합니다.
value에 있는 모든 U+003B SEMICOLON 문자(;) 앞에 U+005C REVERSE SOLIDUS 문자(\)를 추가합니다.
value에 있는 모든 U+000D CARRIAGE RETURN 및 U+000A LINE FEED 문자 쌍(CRLF)을 U+005C REVERSE SOLIDUS 문자(\)와 U+006E LATIN SMALL LETTER N 문자(n)로 교체합니다.
value에 남아 있는 모든 U+000D CARRIAGE RETURN(CR) 또는 U+000A LINE FEED(LF) 문자를 U+005C REVERSE SOLIDUS 문자(\)와 U+006E LATIN SMALL LETTER N 문자(n)로 교체합니다.
value를 line에 추가합니다.
maximum length를 75로 설정합니다.
line의 코드 포인트 길이가 maximum length보다 큰 동안:
line의 첫 maximum length 코드 포인트를 output에 추가합니다.
line의 첫 maximum length 코드 포인트를 제거합니다.
U+000D CARRIAGE RETURN 문자(CR)를 output에 추가합니다.
U+000A LINE FEED 문자(LF)를 output에 추가합니다.
U+0020 SPACE 문자를 output에 추가합니다.
maximum length를 74로 설정합니다.
(남아 있는) line을 output에 추가합니다.
U+000D CARRIAGE RETURN 문자(CR)를 output에 추가합니다.
U+000A LINE FEED 문자(LF)를 output에 추가합니다.
이 알고리즘은 입력이 아이템 타입과 정의된 속성 이름에 대해 설명된 규칙을 따르지 않는 경우, 유효하지 않은 iCalendar 출력을 생성할 수 있습니다.
이 섹션은 비규범적입니다.
다음은 vEvent 어휘를 사용하여 이벤트를 마크업한 페이지의 예시입니다:
< body itemscope itemtype = "http://microformats.org/profile/hcalendar#vevent" >
...
< h1 itemprop = "summary" > Bluesday Tuesday: Money Road</ h1 >
...
< time itemprop = "dtstart" datetime = "2009-05-05T19:00:00Z" > May 5th @ 7pm</ time >
(until < time itemprop = "dtend" datetime = "2009-05-05T21:00:00Z" > 9pm</ time > )
...
< a href = "http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road" rel = "bookmark" itemprop = "url" > Link to this page</ a >
...
< p > Location: < span itemprop = "location" > The RoadHouse</ span ></ p >
...
< p >< input type = button value = "Add to Calendar" onclick = "location = getCalendar(this)" ></ p >
...
< meta itemprop = "description" content = "via livebrum.co.uk" >
</ body >
getCalendar()
함수는 독자가 연습으로 남겨둡니다.
같은 페이지는 블로그에 복사하여 붙여넣기 위한 다음과 같은 마크업을 제공할 수도 있습니다:
< div itemscope itemtype = "http://microformats.org/profile/hcalendar#vevent" >
< p > I'm going to
< strong itemprop = "summary" > Bluesday Tuesday: Money Road</ strong > ,
< time itemprop = "dtstart" datetime = "2009-05-05T19:00:00Z" > May 5th at 7pm</ time >
to < time itemprop = "dtend" datetime = "2009-05-05T21:00:00Z" > 9pm</ time > ,
at < span itemprop = "location" > The RoadHouse</ span > !</ p >
< p >< a href = "http://livebrum.co.uk/2009/05/05/bluesday-tuesday-money-road" itemprop = "url" > See this event on livebrum.co.uk</ a > .</ p >
< meta itemprop = "description" content = "via livebrum.co.uk" >
</ div >
아이템 타입 http://n.whatwg.org/work
을 가진 항목은 저작물(예: 기사, 이미지, 비디오, 노래 등)을 나타냅니다. 이 타입은 주로
저작물의 라이선스 정보를 포함하도록 하기 위해 고안되었습니다.
다음은 이 타입의 정의된 속성 이름들입니다.
work
설명된 저작물을 식별합니다.
work
라는 이름의 속성은 http://n.whatwg.org/work
타입의 각 아이템 내에 정확히 하나만 존재해야 합니다.
title
저작물의 이름을 제공합니다.
title
라는 이름의 속성은 http://n.whatwg.org/work
타입의 각 아이템 내에서 하나만 존재할 수 있습니다.
author
저작물의 저자나 창작자의 이름 또는 연락처 정보를 제공합니다.
값은 http://microformats.org/profile/hcard
타입의
아이템이거나 텍스트여야 합니다.
author
라는 이름의 속성은 http://n.whatwg.org/work
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
license
저작물이 이용 가능한 라이선스 중 하나를 식별합니다.
license
라는 이름의 속성은 http://n.whatwg.org/work
타입의 각 아이템 내에서 여러 개 존재할 수 있습니다.
이 섹션은 비규범적입니다.
다음 예시는 My Pond라는 제목의 이미지를 포함하며, 이 이미지는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스와 MIT 라이선스로 동시에 라이선스되었습니다.
< figure itemscope itemtype = "http://n.whatwg.org/work" >
< img itemprop = "work" src = "mypond.jpeg" >
< figcaption >
< p >< cite itemprop = "title" > My Pond</ cite ></ p >
< p >< small > Licensed under the < a itemprop = "license"
href = "https://creativecommons.org/licenses/by-sa/4.0/" > Creative
Commons Attribution-Share Alike 4.0 International License</ a >
and the < a itemprop = "license"
href = "http://www.opensource.org/licenses/mit-license.php" > MIT
license</ a > .</ small >
</ figcaption >
</ figure >
사용자가 document
내의 nodes 리스트를 가지고, 해당 노드에서 마이크로데이터를 JSON 형식으로 추출하는 알고리즘을 실행해야 할 때:
result를 빈 객체로 설정합니다.
items를 빈 배열로 설정합니다.
nodes 내의 각 node에 대해, 해당 요소가 최상위 마이크로데이터 항목인지 확인하고, 그렇다면 해당 요소에 대해 객체를 가져와 items에 추가합니다.
result에 "items
"라는 항목을 추가하고, 그 값으로 items 배열을 설정합니다.
최소화된 형태로 result를 JSON으로 직렬화한 결과를 반환합니다(토큰 사이에 공백 없이, 숫자에서 불필요한 0 자리를 없애고, 전용 이스케이프 시퀀스가 없는 문자의
경우에만 유니코드 이스케이프를 사용하며, 적절할 때 소문자 "e
"를 사용). [JSON]
이 알고리즘은 객체에 배열을 포함하는 단일 속성을 반환하며, 이는 필요할 때 알고리즘을 확장할 수 있도록 하기 위함입니다.
사용자가 item에 대한 객체를 가져와야 할 때, 선택적으로 memory 요소 목록과 함께 다음 단계를 실행해야 합니다:
result를 빈 객체로 설정합니다.
알고리즘에 memory가 전달되지 않았다면, memory를 빈 리스트로 설정합니다.
item을 memory에 추가합니다.
만약 item이 아이템 타입을 가지고 있다면, result에
"type
"이라는 항목을 추가하고 그 값으로 item의 아이템
타입을 나열한 배열을 추가합니다. 이 배열은 itemtype
속성에 명시된 순서대로 나열합니다.
만약 item이 글로벌 식별자를 가지고 있다면,
result에 "id
"라는 항목을 추가하고 그 값으로 item의 글로벌 식별자를 추가합니다.
properties를 빈 객체로 설정합니다.
한 개 이상의 속성 이름을 가지고 있으며 해당 아이템의 속성 중 하나인 element에 대해, 알고리즘에 의해 주어진 순서로 다음 단계를 실행합니다:
element의 속성 값을 value로 설정합니다.
만약 value가 아이템인 경우: 만약 value가
memory에 있는 경우 value를 문자열 "ERROR
"로 설정합니다. 그렇지 않다면
memory의 복사본을 전달하여 value에 대해 객체를 가져오고 반환된 객체로 value를 대체합니다.
element의 속성 이름에 있는 각 name에 대해 다음 단계를 실행합니다:
만약 properties에 name이라는 항목이 없다면, properties에 name이라는 항목을 추가하고 그 값을 빈 배열로 설정합니다.
properties의 name 항목에 value를 추가합니다.
result에 "properties
"라는 항목을 추가하고 그 값으로 properties 객체를 설정합니다.
result를 반환합니다.
예를 들어, 이 마크업을 보세요:
<!DOCTYPE HTML>
< html lang = "en" >
< title > My Blog</ title >
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h1 itemprop = "headline" > Progress report</ h1 >
< p >< time itemprop = "datePublished" datetime = "2013-08-29" > today</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > All in all, he's doing well with his swim lessons. The biggest thing was he had trouble
putting his head in, but we got it down.</ p >
< section >
< h1 > Comments</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/UserComments" id = "c1" >
< link itemprop = "url" href = "#c1" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > Greg</ span >
</ span ></ p >
< p >< time itemprop = "commentTime" datetime = "2013-08-29" > 15 minutes ago</ time ></ p >
</ footer >
< p > Ha!</ p >
</ article >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/UserComments" id = "c2" >
< link itemprop = "url" href = "#c2" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > Charlotte</ span >
</ span ></ p >
< p >< time itemprop = "commentTime" datetime = "2013-08-29" > 5 minutes ago</ time ></ p >
</ footer >
< p > When you say "we got it down"...</ p >
</ article >
</ section >
</ article >
위 알고리즘에 의해 이 마크업은 다음과 같은 JSON으로 변환됩니다(페이지의 URL이 https://blog.example.com/progress-report
라고 가정):
{
"items" : [
{
"type" : [ "http://schema.org/BlogPosting" ],
"properties" : {
"headline" : [ "Progress report" ],
"datePublished" : [ "2013-08-29" ],
"url" : [ "https://blog.example.com/progress-report?comments=0" ],
"comment" : [
{
"type" : [ "http://schema.org/UserComments" ],
"properties" : {
"url" : [ "https://blog.example.com/progress-report#c1" ],
"creator" : [
{
"type" : [ "http://schema.org/Person" ],
"properties" : {
"name" : [ "Greg" ]
}
}
],
"commentTime" : [ "2013-08-29" ]
}
}
{
"type" : [ "http://schema.org/UserComments" ],
"properties" : {
"url" : [ "https://blog.example.com/progress-report#c2" ],
"creator" : [
{
"type" : [ "http://schema.org/Person" ],
"properties" : {
"name" : [ "Charlotte" ]
}
}
],
"commentTime" : [ "2013-08-29" ]
}
}
]
}
}
]
}
단 하나의 엔진에서만 지원됩니다.
모든 최신 엔진에서 지원됩니다.
모든 hidden
콘텐츠 속성을 설정할 수 있습니다. 속성은 다음 키워드 및 상태를 가지는 입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
hidden
| 숨김 | 렌더링되지 않습니다. |
(빈 문자열) | ||
until-found
| 발견될 때까지 숨김 | 렌더링되지 않지만 내부 콘텐츠는 | 및 에서 접근할 수 있습니다.
이 속성의 누락된 값 기본값은 숨기지 않음 상태이며, 잘못된 값 기본값은 상태입니다.
요소가 렌더링 섹션에서 제안된 규칙을 사용하여 이러한 요구 사항을 구현할 수 있습니다.
속성을 상태에서 가지고 있을 때, 이는 해당 요소가 아직 페이지의 현재 상태와 직접적으로 관련이 없거나, 더 이상 관련이 없음을 나타내거나, 페이지의 다른 부분에서 재사용되도록 선언된 콘텐츠를 사용자에게 직접 접근하지 않도록 사용 중임을 나타냅니다. 사용자 에이전트는 상태에 있는 요소를 렌더링하지 않아야 합니다. 이 요구 사항은 스타일 레이어를 통해 간접적으로 구현될 수 있습니다. 예를 들어, 웹 브라우저는요소가
속성을 상태에서 가지고 있을 때, 이는 해당 요소가 상태와 유사하게 숨겨져 있지만, 요소 내의 콘텐츠는 및 에서 접근할 수 있음을 나타냅니다. 이러한 기능들이 요소의 하위 트리 내의 목표로 스크롤하려고 할 때, 사용자 에이전트는 콘텐츠를 스크롤하기 전에 속성을 제거하여 콘텐츠를 노출합니다. 라는 이벤트도 속성이 제거되기 전에 요소에서 발생합니다.웹 브라우저는 렌더링 섹션에 명시되어 있습니다.
속성이 상태에 있을 때 'display: none' 대신 'content-visibility: hidden'을 사용합니다. 이는이 속성이 일반적으로 CSS를 사용하여 구현되기 때문에 CSS를 사용하여 재정의할 수도 있습니다. 예를 들어, 모든 요소에 'display: block'을 적용하는 규칙은
상태의 효과를 취소합니다. 따라서 저자는 스타일 시트를 작성할 때 속성이 여전히 기대대로 스타일링되는지 확인해야 합니다. 또한, 상태를 지원하지 않는 레거시 사용자 에이전트는 'content-visibility: hidden' 대신 'display: none'을 가지므로, 저자는 스타일 시트에서 요소의 'display' 또는 'content-visibility' 속성을 변경하지 않도록 주의해야 합니다.속성이 상태에 있는 요소는 'content-visibility: hidden'을 사용하며 'display: none'과는 다릅니다. 다음 두 가지 주의사항이 있습니다:
요소는
의 영향을 받아야 페이지 찾기에서 노출됩니다. 이는 요소가 상태에 있으며 'display' 값이 'none', 'contents', 또는 'inline'일 경우 페이지 찾기에 의해 노출되지 않음을 의미합니다.요소는
를 발견될 때까지 숨김 상태에서도 가지므로, 요소 주위의 테두리, 여백 및 패딩이 여전히 렌더링됩니다.다음의 골격 예제에서 이 속성은 사용자가 로그인할 때까지 웹 게임의 메인 화면을 숨기는 데 사용됩니다:
< h1 > The Example Game</ h1 >
< section id = "login" >
< h2 > Login</ h2 >
< form >
...
<!-- calls login() once the user's credentials have been checked -->
</ form >
< script >
function login() {
// 화면 전환
document. getElementById( 'login' ). hidden = true ;
document. getElementById( 'game' ). hidden = false ;
}
</ script >
</ section >
< section id = "game" hidden >
...
</ section >
속성은 다른 프레젠테이션에서 정당하게 표시될 수 있는 콘텐츠를 숨기는 데 사용되어서는 안 됩니다. 예를 들어, 속성을 탭 대화 상자의 패널을 숨기는 데 사용하는 것은 잘못된 사용입니다. 이는 탭 인터페이스가 단순한 오버플로우 프레젠테이션의 일종이기 때문입니다. 모든 양식 컨트롤을 큰 페이지에서 스크롤바로 표시하는 것과 마찬가지로 사용할 수 있습니다. 이 속성을 사용하여 특정 프레젠테이션에서만 콘텐츠를 숨기는 것도 잘못된 사용입니다. 으로 표시된 콘텐츠는 모든 프레젠테이션에서 숨겨지며, 예를 들어 스크린 리더에서도 숨겨집니다.
for
속성도 인 요소를
참조해서는 안 됩니다. 이러한 경우 사용자에게 혼란을 줄 수 있습니다.
그러나 요소와 스크립트는 다른 컨텍스트에서
인 요소를 참조할 수 있습니다.예를 들어,
속성을 사용하여 속성으로 표시된 섹션에 링크를 거는 것은 잘못된 사용입니다. 콘텐츠가 관련이 없거나 적용되지 않는 경우, 링크를 걸 이유가 없습니다.그러나 ARIA
속성을 사용하여 인 설명을 참조하는 것은 문제가 없습니다. 설명이 숨겨져 있다는 것은 단독으로는 유용하지 않음을 의미하지만, 설명이 특정 맥락에서 참조되는 요소에서 유용하게 작성될 수 있습니다.마찬가지로,
요소는 속성으로 표시되어 스크립트 그래픽 엔진에서 오프스크린 버퍼로 사용될 수 있으며, 폼 컨트롤은 속성을 사용하여 숨겨진 요소를 참조할 수 있습니다.속성으로 숨겨진 섹션 내의 요소는 여전히 활성 상태이며, 예를 들어 스크립트와 폼 컨트롤은 계속 실행되고 제출됩니다. 사용자에게 표시되는 방식만 변경됩니다.
모든 최신 엔진에서 지원됩니다.
hidden
getter 단계는 다음과
같습니다:
속성이 상태에 있는 경우, " "를 반환합니다.
속성이 설정되어 있으면 true를 반환합니다.
false를 반환합니다.
setter 단계는 다음과 같습니다:
주어진 값이
일치로 " "와 일치하는 문자열인 경우, 속성을 " "로 설정합니다.그렇지 않고 주어진 값이 false인 경우,
속성을 제거합니다.그렇지 않고 주어진 값이 빈 문자열인 경우,
속성을 제거합니다.그렇지 않고 주어진 값이 null인 경우,
속성을 제거합니다.그렇지 않고 주어진 값이 0인 경우,
속성을 제거합니다.그렇지 않고 주어진 값이 NaN인 경우,
속성을 제거합니다.그렇지 않으면,
속성을 빈 문자열로 설정합니다.상위 발견될 때까지 숨김 상태 노출 알고리즘은 currentNode에 대해 다음 단계를 수행합니다:
currentNode가
내에서 부모 노드를 가지고 있을 때:currentNode에
상태의 속성이 있는 경우:라는 이름으로 currentNode에서 이벤트를 발생시킵니다.
currentNode에서
속성을 제거합니다.currentNode를 currentNode의 부모 노드로 설정합니다. 이 부모 노드는
내에 있습니다.탐색 가능한 내비게이션의 시스템 가시성 상태는, 생성 시 초기 값을 포함하여, 사용자 에이전트에 의해 결정됩니다. 예를 들어 브라우저 창이 최소화되었는지, 브라우저 탭이 현재 백그라운드에 있는지, 또는 작업 전환기와 같은 시스템 요소가 페이지를 가리고 있는지를 나타냅니다.
사용자 에이전트가 시스템 가시성 상태가 탐색 가능한 내비게이션 traversable에 대해 newState로 변경되었다고 판단하면, 다음 단계를 실행해야 합니다:
traversable의 활성 문서의 포함 자손 내비게이션을 navigables로 합니다.
navigables의 각 navigable에 대해 다음과 같이 순차적으로 실행합니다:
navigable의 활성 문서를 document로 합니다.
글로벌 작업을 큐에 추가하고, document의 관련 글로벌 객체에 newState를 사용하여 document의 가시성 상태를 업데이트합니다.
Document
는 가시성 상태를 가지고 있으며, 이는 "hidden
" 또는 "visible
"
중 하나입니다. 초기 값은 "hidden
"로 설정됩니다.
모든 최신 엔진에서 지원됩니다.
visibilityState
getter 단계는 다음과 같습니다: this의 가시성 상태를 반환합니다.
모든 최신 엔진에서 지원됩니다.
hidden
getter 단계는 this의 가시성 상태가 "hidden
"인 경우 true를
반환하고, 그렇지 않으면 false를 반환합니다.
Document
document의
visibilityState를 업데이트하려면 다음과 같이 합니다:
document의 가시성 상태가 visibilityState와 동일하면, 반환합니다.
document의 가시성 상태를 visibilityState로 설정합니다.
새로운 VisibilityStateEntry
를
큐에 추가하고, 그 가시성 상태를
visibilityState로 하고, 현재 고해상도 시간을 document의 관련 글로벌 객체에 따라 타임스탬프로
사용합니다.
화면 방향 변경 단계를 document로 실행합니다. [SCREENORIENTATION]
뷰 전환 페이지 가시성 변경 단계를 document로 실행합니다.
다른 사양에서 정의된 페이지 가시성 변경 단계를 가시성 상태와 document로 실행합니다.
사양 저자들이 페이지 가시성 변경 단계 훅을 사용하기보다는 이 지점에서 그들의 사양에 대한 호출을 직접 추가하는 것이 더 나을 것입니다. 그렇게 하면 교차 사양 호출 순서가 명확히 정의될 수 있습니다. 이 문서를 작성하는 시점에서 페이지 가시성 변경 단계를 포함하는 것으로 알려진 사양은 다음과 같습니다: Device Posture API 및 Web NFC. [DEVICEPOSTURE] [WEBNFC]
document에 visibilitychange
라는
이름의 이벤트를 발생시키고, 그 bubbles
속성을 true로 초기화합니다.
VisibilityStateEntry
인터페이스단일 엔진에서만 지원됩니다.
VisibilityStateEntry
인터페이스는 문서가 활성화되는 순간부터 가시성 변화를 노출합니다.
function wasHiddenBeforeFirstContentfulPaint() {
const fcpEntry = performance. getEntriesByName( "first-contentful-paint" )[ 0 ];
const visibilityStateEntries = performance. getEntriesByType( "visibility-state" );
return visibilityStateEntries. some( e =>
e. startTime < fcpEntry. startTime &&
e. name === "hidden" );
}
페이지를 숨기면 렌더링 및 기타 사용자 에이전트 작업의 제한이 발생할 수 있으므로 가시성 변화를 이러한 제한이 발생했다는 징후로 사용하는 것이 일반적입니다. 그러나 다른 브라우저에서는 긴 비활성화 기간과 같은 다른 요인이 제한을 유발할 수도 있습니다.
[Exposed =(Window )]
interface VisibilityStateEntry : PerformanceEntry {
readonly attribute DOMString name ; // 상속된 name을 가립니다.
readonly attribute DOMString entryType ; // 상속된 entryType을 가립니다.
readonly attribute DOMHighResTimeStamp startTime ; // 상속된 startTime을 가립니다.
readonly attribute unsigned long duration ; // 상속된 duration을 가립니다.
};
VisibilityStateEntry
에는
DOMHighResTimeStamp
타임스탬프가 연결되어 있습니다.
VisibilityStateEntry
에는
"visible
" 또는 "hidden
" 가시성 상태가 연결되어 있습니다.
name
getter 단계는 this의 가시성 상태를 반환합니다.
entryType
getter 단계는 "visibility-state
"를
반환합니다.
startTime
getter 단계는 this의 타임스탬프를 반환합니다.
duration
getter 단계는 0을 반환합니다.
동일한 이름의 속성에 대한 설명은 inert
를 참조하십시오.
노드(특히 요소와 텍스트 노드)는 비활성 상태가 될 수 있습니다. 노드가 비활성 상태일 때:
히트 테스트는 ‘pointer-events’ CSS 속성이 ‘none’으로 설정된 것처럼 작동해야 합니다.
텍스트 선택 기능은 ‘user-select’ CSS 속성이 ‘none’으로 설정된 것처럼 작동해야 합니다.
해당 노드가 편집 가능 상태인 경우, 해당 노드는 편집 불가능한 것처럼 동작합니다.
사용자 에이전트는 페이지 내 검색 목적으로 노드를 무시해야 합니다.
비활성 노드는 일반적으로 포커스를 받을 수 없으며, 사용자 에이전트는 비활성 노드를 접근성 API나 보조 기술에 노출하지 않습니다. 비활성 노드가 명령일 경우, 위에서 설명한 방식으로 사용자가 이를 사용할 수 없게 됩니다.
그러나 사용자 에이전트는 사용자가 페이지 내 검색과 텍스트 선택에 대한 제한을 무시할 수 있도록 허용할 수 있습니다.
기본적으로, 노드는 비활성 상태가 아닙니다.
document
document는
subject가 document의 상단 레이어에서 가장
상위에 있는 대화 상자
요소일 때, 모달 대화 상자로 인해 차단됩니다. document가 이 상태로 차단되는 동안,
subject 요소와 그 평면 트리 하위 요소들을 제외한 모든
document에 연결된 노드는 비활성 상태가 되어야 합니다.
subject는 inert
속성을 통해
추가적으로 비활성 상태가 될 수 있지만, 이는 subject 자체에
지정된 경우에만 가능합니다(즉, subject는 조상 요소들의 비활성 상태를 벗어납니다). subject의 평면 트리 하위 요소들도 유사한 방식으로 비활성 상태가 될 수 있습니다.
대화 상자
요소의
showModal()
메서드는 이 메커니즘을 트리거하여, 요소를 상단 레이어에 추가함으로써 대화 상자
요소를 노드 문서의 상단 레이어에
추가합니다.
inert
속성모든 현재 엔진에서 지원됨.
inert
속성은 요소와 그 평면 트리 자손 중 inert 상태를 벗어나지 않는 것들을 사용자 에이전트가 inert 상태로 만들도록 지시하는 부울 속성입니다.
비활성 서브트리는 페이지의 inert 상태가 아닌 다른 부분을 이해하거나 사용하는 데 중요한 콘텐츠나 컨트롤을 포함해서는 안 됩니다. 비활성 서브트리의 콘텐츠는 모든 사용자에게 인지되지 않거나
인터랙티브하지 않습니다. 저자는 콘텐츠가 시각적으로 가려진 경우를 제외하고는 요소를 inert로 지정하지 않아야 합니다. 대부분의 경우, 저자는 개별 폼 컨트롤에 inert
속성을 지정해서는 안 됩니다. 이러한 경우에는 disabled
속성이 더 적절할 가능성이 큽니다.
다음 예제는 "로딩" 메시지에 의해 시각적으로 가려진 부분적으로 로드된 콘텐츠를 inert로 표시하는 방법을 보여줍니다.
< section aria-labelledby = s1 >
< h3 id = s1 > Population by City</ h3 >
< div class = container >
< div class = loading >< p > Loading...</ p ></ div >
< div inert >
< form >
< fieldset >
< legend > Date range</ legend >
< div >
< label for = start > Start</ label >
< input type = date id = start >
</ div >
< div >
< label for = end > End</ label >
< input type = date id = end >
</ div >
< div >
< button > 적용</ button >
</ div >
</ fieldset >
</ form >
< table >
< caption > 20--년부터 20--년까지</ caption >
< thead >
< tr >
< th > 도시</ th >
< th > 주</ th >
< th > 20-- 인구수</ th >
< th > 20-- 인구수</ th >
< th > 인구 변화율</ th >
</ tr >
</ thead >
< tbody >
<!-- ... -->
</ tbody >
</ table >
</ div >
</ div >
</ section >
"로딩" 오버레이가 비활성 콘텐츠를 가리며, 이로 인해 비활성 콘텐츠가 현재 접근할 수 없음을 시각적으로 명확히 합니다. 제목과 "로딩 중" 텍스트는 inert
속성이 있는 요소의 하위 자손이 아닙니다. 이는 이 텍스트가 모든
사용자에게 접근 가능하도록 하면서도, 비활성 콘텐츠는 누구도 상호작용할 수 없도록 보장합니다.
기본적으로, 요소 또는 그 서브트리가 비활성 상태라는 시각적 표시가 지속적으로 제공되지는 않습니다. 이러한 콘텐츠에 적절한 시각적 스타일은 상황에 따라 다를 수 있습니다. 예를 들어, 비활성화된
오프스크린 내비게이션 패널은 기본 스타일이 필요하지 않으며, 이는 오프스크린 위치가 콘텐츠를 시각적으로 가리기 때문입니다. 마찬가지로, 모달 대화 상자
요소의 백드롭은 웹 페이지의
비활성 콘텐츠를 시각적으로 가리는 수단으로 사용되며, 비활성 콘텐츠를 특별히 스타일링하지 않아도 됩니다.
그러나 다른 상황에서는 문서의 활성 부분과 비활성 부분을 명확히 구분하는 것이 중요합니다. 특히 모든 사용자가 페이지의 모든 부분을 한 번에 볼 수 있는 것은 아니기 때문에 사용자 혼란을 방지하기 위해서입니다. 예를 들어, 스크린 리더를 사용하는 사용자, 작은 장치나 확대경을 사용하는 사용자, 심지어 매우 작은 창을 사용하는 사용자도 페이지의 활성 부분을 볼 수 없을 수 있으며, 비활성 섹션이 명확히 비활성으로 표시되지 않으면 좌절감을 느낄 수 있습니다.
모든 현재 엔진에서 지원됨.
inert
IDL 속성은 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
사용자에게 불쾌감을 줄 수 있는 특정 API(예: 팝업 열기 또는 전화 진동)를 남용하지 않도록, 사용자 에이전트는 사용자가 웹 페이지와 적극적으로 상호작용하고 있을 때 또는 적어도 한 번 이상 상호작용한 경우에만 이러한 API를 허용합니다. 이 "적극적인 상호작용" 상태는 이 섹션에서 정의된 메커니즘을 통해 유지됩니다.
사용자 활성화를 추적하기 위해 각 Window
W에는 다음
두 가지 관련 값이 있습니다:
마지막 활성화 타임스탬프: 이는 DOMHighResTimeStamp
이거나,
양의 무한대(즉, W가 한 번도 활성화되지 않았음을 나타냄), 또는 음의 무한대(즉, 활성화가 소비됨을 나타냄) 중 하나입니다. 초기 값은 양의 무한대입니다.
마지막 히스토리 액션 활성화 타임스탬프: 이는 DOMHighResTimeStamp
이거나
양의 무한대이며, 초기 값은 양의 무한대입니다.
사용자 에이전트는 또한 일시적 활성화 지속 시간을 정의합니다. 이는 사용자 활성화 기반 API(예: 팝업 열기 등)가 사용할 수 있는 일정 기간을 나타내는 상수 값입니다.
일시적 활성화 지속 시간은 몇 초 정도로 예상되며, 사용자가 페이지와의 상호작용과 페이지가 활성화 기반 API를 호출하는 것 사이의 연결을 인식할 수 있도록 합니다.
그런 다음, W에 대해 다음과 같은 불리언 사용자 활성화 상태가 있습니다:
현재 고해상도 시간이 W에서 마지막 활성화 타임스탬프보다 크거나 같은 경우, W는 고정 활성화 상태로 간주됩니다.
이것은 W의 역사적인 활성화 상태로, 사용자가 W에서 한 번이라도 상호작용했는지를 나타냅니다. 초기에는 false로 시작하며, W가 첫 번째 활성화 알림을 받을 때 true로 변경되며, 다시 false로 돌아가지 않습니다.
현재 고해상도 시간이 W에서 마지막 활성화 타임스탬프보다 크거나 같고, W에서 마지막 활성화 타임스탬프에 일시적 활성화 지속 시간을 더한 값보다 작은 경우, W는 일시적 활성화 상태로 간주됩니다.
이것은 W의 현재 활성화 상태로, 사용자가 최근에 W와 상호작용했는지를 나타냅니다. 초기에는 false 값으로 시작하며, W가 각 활성화 알림을 받을 때마다 일정 시간 동안 true로 유지됩니다.
일시적 활성화 상태는 일시적 활성화 지속 시간이 경과하여 마지막 사용자 활성화 이후 false가 되면 만료된 것으로 간주됩니다. 이는 활성화 소비를 통해 만료 시간 이전에도 false가 될 수 있습니다.
W의 마지막 히스토리 액션 활성화 타임스탬프가 W의 마지막 활성화 타임스탬프와 같지 않은 경우, W는 히스토리 액션 활성화 상태로 간주됩니다.
이것은 사용자 활성화의 특별한 변형으로, 특정 세션 히스토리 API에 접근할 수 있게 해줍니다. 이러한 API가 너무 자주 사용되면 사용자가 브라우저 UI를 통해 뒤로 이동하는 것이 어려워질 수 있기 때문입니다. 초기에는 false 값으로 시작하며, 사용자가 W와 상호작용할 때마다 true가 되지만, 히스토리 액션 활성화 소비를 통해 다시 false로 재설정됩니다. 이는 중간에 사용자 활성화 없이 이러한 API를 여러 번 연속으로 사용할 수 없도록 보장합니다. 그러나 일시적 활성화와 달리, 이러한 API를 사용해야 하는 시간 제한은 없습니다.
마지막 활성화
타임스탬프와 마지막 히스토리 액션 활성화 타임스탬프는 document
의 완전 활성 상태가 변경된 후에도 유지됩니다(예: document
에서 탐색하거나 캐시된 document
로 탐색한 후). 이는 동일한 document
가 재사용되는 한 고정 활성화 상태가 여러 탐색에 걸쳐 유지됨을
의미합니다. 일시적 활성화 상태에 대해서는, 원래의
만료 시간이 그대로 유지되며(즉, 상태는 원래의 활성화
트리거 입력 이벤트 이후 일시적 활성화 지속 시간 내에 여전히 만료됨), 이를 고려하여 고정 활성화 또는 일시적 활성화 중 어느 것을 기준으로 할지
결정하는 것이 중요합니다.
사용자 상호작용이 document
document에서 활성화 트리거 입력 이벤트를 발생시키는 경우, 사용자
에이전트는 이벤트를 디스패치하기
전에 다음 활성화 알림 단계를 수행해야 합니다:
단언: document는 완전히 활성화된 상태입니다.
windows를 « document의 관련 전역 객체 »로 설정합니다.
확장합니다. windows에 document의 각 조상 내비게이션 가능의 활성 창을 추가합니다.
확장합니다. windows에 document의 각 후손 내비게이션 가능의 활성 창을 추가합니다. 단, 이때 포함된 내비게이션 가능의 활성 문서의 출처가 document의 출처와 동일 출처인 것들만 필터링하여 포함합니다.
각각의 window를 windows에서 다음과 같이 처리합니다:
window의 마지막 활성화 타임스탬프를 현재 고해상도 시간으로 설정합니다.
사용자 활성화에 대해 가까운 감시 관리자에게 알림을 window에게 제공합니다.
활성화 트리거 입력 이벤트는 isTrusted
속성이 true이고, 유형
이
다음 중 하나인 이벤트입니다:
"keydown
",
단 Esc 키나 사용자 에이전트에서 예약된 단축키가 아닌 경우에만 해당됩니다.
"pointerdown
",
단 이벤트의 pointerType
이
"mouse
"인 경우에만 해당됩니다.
"pointerup
",
단 이벤트의 pointerType
이
"mouse
"가 아닌 경우에만 해당됩니다.
"touchend
"
활성화 소비 API는 이
및 다른 명세에서 정의된 대로 사용자 활성화를 소비할 수 있으며, Window
W에 대해 다음 단계를 수행합니다:
W의 내비게이션 가능이 null인 경우, 종료합니다.
top을 W의 내비게이션 가능의 최상위 내비게이션 가능으로 설정합니다.
navigables를 top의 활성 문서의 포함된 후손 내비게이션 가능으로 설정합니다.
windows를 navigables의 각 항목에서 활성 창을 가져와 구성된 Window
객체 목록으로 설정합니다.
각각의 window에 대해, window의 마지막 활성화 타임스탬프가 양의 무한대가 아닌 경우, window의 마지막 활성화 타임스탬프를 음의 무한대로 설정합니다.
히스토리 작업 활성화 소비 API는 히스토리 작업 사용자 활성화를 소비할 수 있으며, Window
W에 대해 다음 단계를
수행합니다:
W의 내비게이션 가능이 null인 경우, 종료합니다.
top을 W의 내비게이션 가능의 최상위 내비게이션 가능으로 설정합니다.
navigables를 top의 활성 문서의 포함된 후손 내비게이션 가능으로 설정합니다.
windows를 navigables의 각 항목에서 활성 창을 가져와 구성된 Window
객체 목록으로 설정합니다.
각각의 window에 대해, window의 마지막 히스토리 작업 활성화 타임스탬프를 window의 마지막 활성화 타임스탬프로 설정합니다.
활성화
알림과 활성화
소비에 의해 영향을 받는 페이지의 탐색
문맥 집합에서 비대칭성을 주의하십시오. 활성화 소비는 페이지의 모든 탐색 문맥에 대한 일시적 활성화 상태를 변경(거짓으로)하지만, 활성화 알림은 그 탐색 문맥의 하위
집합에 대한 상태만을 변경(참으로)합니다. 여기서 소비의 포괄적인 성격은 의도된 것입니다: 이는 악의적인 사이트가 단일 사용자 활성화로부터 여러 호출을 활성화 소비
API로 실행하지 못하도록 방지합니다(아마도 iframe
의 깊은 계층
구조를 악용하여).
사용자 활성화에 의존하는 API는 다양한 수준으로 분류됩니다:
이러한 API는 지속적 활성화 상태가 참이어야 하며, 따라서 최초의 사용자 활성화가 있기 전까지는 차단됩니다.
이러한 API는 일시적 활성화 상태가 참이어야 하지만, 이를 소비하지 않으므로, 일시적 상태가 만료될 때까지 사용자 활성화당 여러 번 호출할 수 있습니다.
이러한 API는 일시적 활성화 상태가 참이어야 하며, 사용자 활성화를 소모하여 사용자 활성화당 여러 번 호출하는 것을 방지합니다.
이러한 API는 히스토리 작업 활성화 상태가 참이어야 하며, 사용자 활성화를 소모하여 사용자 활성화당 여러 번 호출하는 것을 방지합니다.
UserActivation
인터페이스각 Window
에는 연관된 UserActivation
이 있으며, 이는 UserActivation
객체입니다.
Window
객체가 생성될 때, 해당 객체의 연관된
UserActivation
은 새로운 UserActivation
객체로 설정되며,
이는 Window
객체의 관련 영역에서 생성됩니다.
[Exposed =Window ]
interface UserActivation {
readonly attribute boolean hasBeenActive ;
readonly attribute boolean isActive ;
};
partial interface Navigator {
[SameObject ] readonly attribute UserActivation
userActivation ;
};
navigator.userActivation.hasBeenActive
창에 지속적 활성화가 있었는지를 반환합니다.
navigator.userActivation.isActive
창에 일시적 활성화가 있는지를 반환합니다.
userActivation
의 getter 단계는 this의 관련 전역 객체의 연관된 UserActivation
을 반환하는 것입니다.
hasBeenActive
의 getter 단계는 this의 관련 전역 객체에 지속적 활성화가 있는 경우 true를 반환하고, 그렇지 않으면 false를 반환하는 것입니다.
isActive
의 getter 단계는 this의 관련 전역 객체에 일시적 활성화가 있는 경우 true를 반환하고, 그렇지 않으면 false를 반환하는
것입니다.
사용자 에이전트 자동화 및 애플리케이션 테스트의 목적을 위해, 이 명세서는 Web Driver 명세에 대한 다음의 확장 명령을 정의합니다. 다음의 확장 명령을 지원하는 것은 사용자 에이전트의 선택 사항입니다. [WEBDRIVER]
HTTP 메서드 | URI 템플릿 |
---|---|
POST |
/session/{session id}/window/consume-user-activation |
원격 엔드 단계는 다음과 같습니다:
현재 브라우징 컨텍스트의 활성 창을 window로 설정합니다.
window에 일시적 활성화가 있는 경우 consume을 true로 설정하고, 그렇지 않으면 false로 설정합니다.
consume이 true이면 window의 사용자 활성화를 소모합니다.
성공을 consume 데이터와 함께 반환합니다.
HTML의 특정 요소는 활성화
동작을 가지며, 이는 사용자가 이들을 활성화할 수 있음을 의미합니다. 이는 항상 click
이벤트에 의해 발생합니다.
사용자 에이전트는 사용자가 키보드, 음성 입력 또는 마우스 클릭을 통해 활성화 동작을 가진 요소를 수동으로 트리거할 수 있도록 해야 합니다. 사용자가 클릭 이외의 방법으로 활성화 동작이 정의된 요소를 트리거할 때, 상호작용 이벤트의 기본 동작은 해당 요소에 click 이벤트를 발생시키는 것이어야 합니다.
element.click()
모든 현재 엔진에서 지원됨.
요소가 클릭된 것처럼 동작합니다.
각 요소는 연관된 클릭 진행 중 플래그를 가지며, 이는 초기에는 설정되지 않습니다.
click()
메서드는 다음 단계를 실행해야 합니다:
이 요소가 비활성화된 폼 컨트롤인 경우, 반환합니다.
이 요소의 클릭 진행 중 플래그가 설정된 경우, 반환합니다.
이 요소의 클릭 진행 중 플래그를 설정합니다.
신규 포인터 이벤트를
not trusted flag를 설정하여 click
이라는
이름으로 이 요소에서 발생시킵니다.
이 요소의 클릭 진행 중 플래그를 해제합니다.
ToggleEvent
인터페이스모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
[Exposed =Window ]
interface ToggleEvent : Event {
constructor (DOMString type , optional ToggleEventInit eventInitDict = {});
readonly attribute DOMString oldState ;
readonly attribute DOMString newState ;
};
dictionary ToggleEventInit : EventInit {
DOMString oldState = "";
DOMString newState = "";
};
event.oldState
닫힘에서 열림으로 전환될 때 "closed
"로 설정되며, 열림에서 닫힘으로 전환될 때 "open
"로 설정됩니다.
event.newState
닫힘에서 열림으로 전환될 때 "open
"로 설정되며, 열림에서 닫힘으로 전환될 때 "closed
"로 설정됩니다.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
oldState
및
newState
속성은 초기화된 값을 반환해야 합니다.
토글 작업 추적기는 다음과 같은 내용을 가진 구조체입니다:
ToggleEvent
를 발생시키는 작업.
oldState
속성의 값을 나타내는 문자열.
이 섹션은 규범적이지 않습니다.
HTML 사용자 인터페이스는 일반적으로 폼 컨트롤, 스크롤 가능한 영역, 링크, 대화 상자, 브라우저 탭 등 여러 대화형 위젯으로 구성됩니다. 이러한 위젯은 일부(예: 브라우저 탭, 대화 상자)가 다른 위젯(예: 링크, 폼 컨트롤)을 포함하는 계층 구조를 형성합니다.
키보드를 사용하여 인터페이스와 상호작용할 때, 키 입력은 시스템에서 대화형 위젯의 계층 구조를 통해 활성 위젯으로 전달되며, 이를 포커스가 있다고 합니다.
그래픽 환경에서 실행되는 브라우저 탭에서 실행 중인 HTML 애플리케이션을 고려해 보십시오. 이 애플리케이션에 텍스트 컨트롤과 링크가 포함된 페이지가 있고, 현재 모달 대화 상자를 표시하고 있다고 가정해 봅시다. 이 대화 상자 자체는 텍스트 컨트롤과 버튼을 포함하고 있습니다.
이 경우 포커스 가능한 위젯의 계층 구조에는 브라우저 창이 포함되며, 그 자식 요소로 HTML 애플리케이션을 포함하는 브라우저 탭이 있습니다. 탭 자체는 다양한 링크와 텍스트 컨트롤뿐만 아니라 대화 상자를 자식 요소로 포함합니다. 대화 상자 자체는 텍스트 컨트롤과 버튼을 자식 요소로 포함합니다.
이 예에서 대화 상자의 텍스트 컨트롤이 포커스된 위젯이라면, 키 입력은 그래픽 시스템에서 ① 웹 브라우저로, ② 탭으로, ③ 대화 상자로, 마지막으로 ④ 텍스트 컨트롤로 전달됩니다.
키보드 이벤트는 항상 이 포커스된 요소를 대상으로 합니다.
최상위 탐색 가능 요소는 운영 체제에서 전달된 키보드 입력을 수신할 수 있을 때 시스템 포커스를 가지며, 이는 해당 요소의 활성 문서의 하위 탐색 가능 요소 중 하나를 대상으로 할 수 있습니다.
최상위 탐색 가능 요소는 그 시스템 가시성 상태가
"visible
"이고, 시스템 포커스를 가지고 있거나, 사용자 에이전트 위젯이 운영 체제에서 전달된 키보드 입력을 직접 수신할 수 있을 때 사용자 주의를 가집니다.
브라우저 창이 포커스를 잃으면 사용자 주의가 상실되지만, 시스템 포커스는 브라우저 창의 다른 시스템 위젯(예: 주소 표시줄)으로도 상실될 수 있습니다.
document
d는 사용자 주의가 있는 최상위 탐색
가능 요소의 활성 하위 요소일 때, 즉 d가 완전히 활성화되어 있고,
d의 노드 탐색 가능 요소의 최상위 탐색 가능 요소가 사용자 주의를 가지고
있을 때 그렇습니다.
포커스 가능한 영역이라는 용어는 인터페이스의 영역 중 키보드 입력의 대상이 될 수 있는 영역을 가리킬 때 사용됩니다. 포커스 가능한 영역은 요소, 요소의 일부, 또는 사용자 에이전트에 의해 관리되는 다른 영역일 수 있습니다.
각 포커스 가능한 영역은 DOM 앵커를 가지며, 이는
노드
객체로, DOM 내에서 포커스 가능한 영역의 위치를 나타냅니다. (해당 포커스 가능한 영역이 자체적으로 노드
일
경우, 해당 영역이 스스로의 DOM 앵커입니다.) DOM 앵커는 다른 DOM 객체가 포커스
가능한 영역을 나타내지 않을 때, 일부 API에서 포커스 가능한 영역의 대체물로
사용됩니다.
다음 표는 어떤 객체가 포커스 가능한 영역이 될 수 있는지를 설명합니다. 왼쪽 열의 셀은 포커스 가능한 영역이 될 수 있는 객체를 설명하고, 오른쪽 열의 셀은 해당 요소의 DOM 앵커를 설명합니다. (양쪽 열에 걸쳐 있는 셀은 규범적이지 않은 예시입니다.)
포커스 가능한 영역 | DOM 앵커 |
---|---|
예시 | |
다음 기준을 모두 충족하는 요소:
| 해당 요소 자체. |
| |
area 요소가 이미지 맵에서 생성한 도형으로, 해당 img 요소가 렌더링 중이고 비활성화되지 않은 경우.
|
해당 img 요소.
|
다음 예에서는
| |
렌더링 중이고 비활성화되지 않았으며, 비활성화되지 않은 요소의 사용자 에이전트가 제공하는 하위 위젯들. | 해당 포커스 가능한 영역이 하위 위젯인 요소. |
사용자 인터페이스에 노출되는 | |
렌더링 중이며 비활성화되지 않은 요소의 스크롤 가능한 영역. | 스크롤 가능한 영역의 상자를 생성한 요소. |
CSS 'overflow' 속성의 'scroll' 값은 일반적으로 스크롤 가능한 영역을 생성합니다. | |
비활성화되지 않은 상태에서 비 null 탐색 컨텍스트를 가진
document 의 뷰포트.
|
해당 뷰포트가 생성된 document .
|
| |
사용자 에이전트에 의해 포커스 가능한 영역으로 판단되는 다른 모든 요소 또는 요소의 일부, 특히 접근성을 높이거나 플랫폼 관행에 더 잘 맞추기 위해. | 해당 요소. |
사용자 에이전트는 사용자가 목록을 더 쉽게 탐색할 수 있도록 모든 목록 항목의 불릿을 순차적으로 포커스 가능하도록 만들 수 있습니다. 마찬가지로, 사용자 에이전트는 |
탐색 가능한 컨테이너(예: iframe
)는 포커스 가능한 영역이지만, 탐색 가능한 컨테이너로 라우팅된 키 이벤트는 즉시 콘텐츠 탐색 가능 요소의 활성
문서로 라우팅됩니다. 마찬가지로, 순차적인 포커스 탐색에서는 탐색
가능한 컨테이너가 콘텐츠 탐색 가능 요소의 활성 문서의 자리 표시자 역할을 합니다.
각 document
에는 하나의 포커스 가능한 영역이 문서의 포커스된 영역으로
지정됩니다. 이러한 제어는 이 명세서에 정의된 알고리즘에 따라 시간이 지남에 따라 변경됩니다.
문서가 완전히 활성화되지 않고 사용자에게 표시되지 않더라도 여전히 문서의 포커스된 영역을 가질 수 있습니다. 문서의 완전히 활성화 상태가 변경되더라도, 그 문서의 포커스된 영역은 그대로 유지됩니다.
traversable의 현재 포커스된 최상위 탐색 가능 영역은 다음 알고리즘에 의해 반환되는 포커스 가능한 영역 또는 null입니다:
traversable이 시스템 포커스를 가지지 않는 경우, null을 반환합니다.
candidate를 traversable의 활성 문서로 설정합니다.
candidate의 포커스된 영역이 비 null 콘텐츠 탐색 가능 요소를 가진 탐색 가능 컨테이너인 동안: candidate를 해당 탐색 가능 컨테이너의 콘텐츠 탐색 가능 요소의 활성 문서로 설정합니다.
candidate의 포커스된 영역이 비 null인 경우, candidate를 candidate의 포커스된 영역으로 설정합니다.
candidate를 반환합니다.
traversable의 현재 포커스 체인은 traversable이 null이 아닌 경우 현재 포커스된 영역의 포커스 체인이며, 그렇지 않으면 빈 목록입니다.
포커스 가능한 영역의 DOM 앵커인 요소는 해당 포커스 가능한 영역이 현재 포커스된 최상위 탐색 가능 영역이 될 때 포커스를 얻는다고 합니다. 요소가 DOM 앵커인 포커스 가능한 영역이 현재 포커스된 최상위 탐색 가능 영역인 경우, 해당 요소는 포커스된 상태입니다.
subject인 포커스 가능한 영역의 포커스 체인은 다음과 같이 구성된 순서 목록입니다:
output을 빈 목록으로 설정합니다.
currentObject를 subject로 설정합니다.
다음이 참일 동안:
현재 객체를 output에 추가합니다.
currentObject가 area
요소의 도형인 경우, 해당 요소를 output에 추가합니다.
그렇지 않은 경우, currentObject의 DOM 앵커가 currentObject 자신이 아닌 요소인 경우, 요소를 output에 추가합니다.
currentObject가 포커스 가능한 영역인 경우, currentObject를 DOM 앵커의 노드 문서로 설정합니다.
그렇지 않은 경우, currentObject가 노드 탐색
가능 요소의 부모가 null이 아닌 document
인 경우,
currentObject를 노드 탐색 가능
요소의 부모로 설정합니다.
그렇지 않으면 중단합니다.
output을 반환합니다.
이 체인은 subject로 시작하여(만약 subject가 최상위 탐색 가능 영역의 현재 포커스된 영역이거나 될 수 있는 경우)
포커스 계층 구조를 따라 document
의 최상위 탐색 가능 영역으로
계속됩니다.
모든 포커스 가능한 영역을 포커스 가능하다고 합니다.
포커스 가능한 영역에는 두 가지 특별한 유형의 포커스 가능성이 있습니다:
포커스 가능한 영역이 순차적으로 포커스 가능하다고 하면, 해당 영역이 document
의 순차 포커스 탐색
순서에 포함되며, 사용자 에이전트가 해당 영역을 순차적으로 포커스
가능하다고 판단한 경우를 의미합니다.
포커스 가능한 영역이 클릭 포커스 가능하다고 하면, 사용자 에이전트가 해당 영역을 클릭 포커스 가능하다고 판단한 경우를 의미합니다. 사용자 에이전트는 탭 인덱스 값이 비 null인 포커스 가능한 영역을 클릭 포커스 가능으로 간주해야 합니다.
포커스 가능하지 않은 요소는 포커스 가능한 영역이 아니므로, 순차적으로 포커스 가능하지도 않고, 클릭 포커스 가능하지도 않습니다.
포커스 가능 여부는 focus()
메서드나 autofocus
속성 등과 같은 프로그래밍 방식으로 요소가
포커스될 수 있는지 여부를 나타내는 것입니다. 이에 반해, 순차적으로 포커스 가능 여부와 클릭 포커스 가능 여부는 사용자 에이전트가 사용자 상호작용에 어떻게 반응하는지를 결정합니다: 각각 순차 포커스 탐색 및 활성화 동작에 따라 반응합니다.
사용자 에이전트는 요소가 포커스 가능하고, document
의 순차 포커스 탐색
순서에 포함되어 있더라도 사용자 환경설정에 따라 해당 요소를 순차적으로 포커스 가능하지 않다고 판단할 수 있습니다.
예를 들어, macOS 사용자는 비 폼 제어 요소를 건너뛰도록 사용자 에이전트를 설정할 수 있으며, Tab 키만을 사용하여 순차 포커스 탐색을 할 때 링크를 건너뛸
수 있습니다(예: Option과 Tab 키를 모두 사용하지 않는 경우).
마찬가지로, 사용자 에이전트는 요소가 포커스 가능하더라도 클릭 포커스 가능하지 않다고 판단할 수 있습니다. 예를 들어, 일부 사용자 에이전트에서는 비 편집 가능한 폼 제어 요소를 클릭해도 해당 요소에 포커스가 설정되지 않습니다. 즉, 사용자 에이전트는 이러한 제어 요소가 클릭 포커스 가능하지 않다고 판단한 것입니다.
따라서 요소는 포커스 가능하지만, 순차적으로 포커스 가능하지도 않고, 클릭 포커스 가능하지도 않을 수 있습니다. 예를 들어, 일부 사용자 에이전트에서는 음수 정수 탭 인덱스 값을 가진 비 편집 가능한 폼 제어 요소는 사용자 상호작용을 통해서는 포커스할 수 없고, 오직 프로그래밍 방식의 API를 통해서만 포커스할 수 있습니다.
사용자가 활성화할 때 클릭 포커스 가능 포커스 가능한 영역을 선택하면, 사용자 에이전트는 focus
trigger를
"클릭
"으로 설정하여 포커스 설정 단계를 실행해야 합니다.
포커스 설정은 활성화
동작이 아닙니다. 즉, 요소에서 click()
메서드를 호출하거나 합성
click
이벤트를 디스패치해도 해당 요소에 포커스가 설정되지 않습니다.
노드는 포커스 탐색 범위 소유자입니다. 이는 document
, 섀도우 호스트, 슬롯 또는 팝오버 표시 상태에서 팝오버 호출자가 설정된 요소입니다.
각 포커스 탐색 범위 소유자는 포커스 탐색 범위를 가지며, 이는 요소 목록입니다. 그 내용은 다음과 같이 결정됩니다:
모든 요소 element는 연관된 포커스 탐색 소유자를 가지며, 이는 null이거나 포커스 탐색 범위 소유자입니다. 다음 알고리즘에 의해 결정됩니다:
element의 부모가 null이면 null을 반환합니다.
element의 부모의 연관된 포커스 탐색 소유자를 반환합니다.
그러면, 주어진 포커스 탐색 범위 소유자 owner의 포커스 탐색 범위의 내용은 연관된 포커스 탐색 소유자가 owner인 모든 요소가 됩니다.
포커스 탐색 범위 내 요소의 순서는 이 명세서의 알고리즘에 영향을 미치지 않습니다. 순서는 아래에 정의된 탭 인덱스 순서 포커스 탐색 범위와 평면화된 탭 인덱스 순서 포커스 탐색 범위 개념에 대해서만 중요합니다.
탭 인덱스 순서 포커스 탐색 범위는 포커스 가능한 영역과 포커스 탐색 범위 소유자 목록입니다. 모든 포커스 탐색 범위 소유자 owner는 탭 인덱스 순서 포커스 탐색 범위를 가지며, 그 내용은 다음과 같이 결정됩니다:
owner의 포커스 탐색 범위 내에 있는 요소 중 포커스 탐색 범위 소유자인 모든 요소를 포함하며, 탭 인덱스 값이 음수인 요소는 제외합니다.
owner의 포커스 탐색 범위 내에 있는 요소 중 포커스 가능한 영역을 포함하며, 탭 인덱스 값이 음수인 포커스 가능한 영역은 제외합니다.
탭 인덱스 순서 포커스 탐색 범위 내의 순서는 각 요소의 탭 인덱스 값에 의해 결정됩니다. 아래 섹션에서 설명된 대로입니다.
여기에서의 규칙은 "권장" 문구와 상대적 순서로 구성되어 있기 때문에 정확한 순서를 제공하지 않습니다.
평면화된 탭 인덱스 순서 포커스 탐색 범위는 포커스 가능한 영역 목록입니다. 모든 포커스 탐색 범위 소유자 owner는 고유한 평면화된 탭 인덱스 순서 포커스 탐색 범위를 가지며, 그 내용은 다음 알고리즘에 의해 결정됩니다:
result를 owner의 탭 인덱스 순서 포커스 탐색 범위의 복제본으로 설정합니다.
result의 각 item에 대해:
item이 포커스 탐색 범위 소유자가 아닌 경우, 계속 진행합니다.
item이 포커스 가능한 영역이 아닌 경우, item을 item의 평면화된 탭 인덱스 순서 포커스 탐색 범위 내의 모든 항목으로 대체합니다.
그 외의 경우, item의 평면화된 탭 인덱스 순서 포커스 탐색 범위의 내용을 item 이후에 삽입합니다.
tabindex
속성모든 현재 엔진에서 지원됨.
tabindex
콘텐츠 속성은 작성자가 요소 및 해당 요소를 DOM 앵커로
하는 영역을 포커스 가능 영역으로
만들거나,
해당 영역이 순차적으로 포커스 가능하게
하거나,
순차 포커스 내비게이션
을 위해 상대적인 순서를
결정할 수 있도록 합니다.
"tab index"라는 이름은 포커스 가능한 요소를 탐색하기 위해 일반적으로 Tab 키를 사용하는 것에서 유래되었습니다. "탭핑"이라는 용어는 순차적으로 포커스 가능한 포커스 가능 영역을 통해 앞으로 이동하는 것을 나타냅니다.
tabindex
속성이 지정된
경우,
반드시 유효한 정수 값을 가져야 합니다.
양의
숫자는
포커스 가능 영역의 상대적인 위치를
지정하며,
음수는 해당 컨트롤이 순차적으로
포커스 가능하지 않음을 나타냅니다.
개발자는 tabindex
속성에 0
또는 −1이 아닌
값을 사용하는 경우 주의해야 합니다. 올바르게 사용하기가 복잡하기 때문입니다.
다음은 가능한 tabindex
속성 값의 동작에 대한 비규범적 요약입니다. 아래의 처리 모델에서는 더 정확한 규칙을 제공합니다.
tabindex
속성 값이
더 높은
요소가 나중에
나옵니다.
tabindex
속성을 사용하여
요소를 포커스 불가능하게 만들 수 없습니다. 페이지 작성자가 이를 수행하는 유일한 방법은 요소를
비활성화하거나,
비활성화하는 것입니다.
tabindex 값은 tabindex
속성의 값이며,
정수
파싱 규칙을 사용하여
파싱됩니다. 파싱에 실패하거나 속성이 지정되지 않은 경우, tabindex
값은 null입니다.
tabindex 값은 포커스 가능 영역의 tabindex 값이며, 해당 영역의 DOM 앵커에 해당합니다.
요소의 tabindex 값은 다음과 같이 해석되어야 합니다:
사용자 에이전트는 플랫폼 규칙에 따라 해당 요소가 포커스 가능 영역으로 간주되어야 하는지 여부를 결정해야 하며, 그럴 경우 요소 및 해당 요소를 포커스 가능 영역으로 가지는 영역이 순차적으로 포커스 가능한지, 그리고 그렇다면, 해당 영역이 tabindex-순서가 지정된 포커스 내비게이션 범위 내에서 어떤 상대적 위치를 가질지를 결정해야 합니다. 해당 요소가 포커스 내비게이션 범위 소유자라면, tabindex-순서가 지정된 포커스 내비게이션 범위에 포함되어야 하며, 비록 포커스 가능 영역이 아니더라도 포함되어야 합니다.
동일한 포커스 내비게이션 범위에 속하는 요소 및 포커스 가능 영역의 tabindex 값이 null인 경우, 해당 요소들의 shadow-including tree order에 따라 상대적 순서가 정해져야 합니다.
플랫폼 규칙에 따라, 다음 요소들은 포커스 가능 영역으로 간주되며, 순차적으로 포커스 가능하다고 제안됩니다:
사용자 에이전트는 해당 요소를 포커스 가능 영역으로 간주해야 하지만, 해당 요소를 tabindex-순서가 지정된 포커스 내비게이션 범위에서 제외해야 합니다.
순차적인 포커스 내비게이션이 해당 요소로 이동할 수 없도록 하는 요구 사항을 무시할 수 있는
한 가지 유효한 이유는 사용자가 순차적인 포커스 내비게이션만을 통해 포커스를 이동할 수 있는 경우일
수 있습니다. 예를 들어, 키보드 전용 사용자는 음수 tabindex
값을 가진 텍스트 컨트롤을 클릭할 수 없으므로, 그 사용자의 사용자 에이전트가 사용자가
해당 컨트롤에 탭할 수 있도록 허용하는 것이 타당할 수 있습니다.
사용자 에이전트는 해당 요소를 포커스 가능 영역으로 간주할 수 있어야 하며, 해당 요소 및 해당 요소를 포커스 가능 영역으로 가지는 영역을 DOM 앵커로 하여 순차적으로 포커스 가능하도록 허용해야 합니다.
동일한 포커스 내비게이션 범위에 속하는 요소 및 포커스 가능 영역의 tabindex 값이 0인 경우, shadow-including tree order에 따라 상대적 순서가 정해져야 합니다.
사용자 에이전트는 해당 요소를 포커스 가능 영역으로 간주할 수 있어야 하며, 해당 요소 및 해당 요소를 포커스 가능 영역으로 가지는 영역을 DOM 앵커로 하여 순차적으로 포커스 가능하도록 허용해야 하며, 아래에서 candidate라고 참조된 요소 및 앞서 언급한 포커스 가능 영역을 다음과 같이 tabindex-순서가 지정된 포커스 내비게이션 범위 내에서 위치시켜야 합니다. 이 요소가 속한 포커스 내비게이션 범위 내에서 다른 요소 및 포커스 가능 영역에 대해 상대적으로:
tabindex
속성이
생략되었거나,
속성이 파싱 오류를 반환한 포커스
가능 영역 앞에 위치해야 합니다.
tabindex
속성이
0 이하인 값을 가진 요소의
포커스 가능 영역 앞에
위치해야 합니다.
tabindex
속성이
0보다 크지만 candidate의 tabindex
속성
값보다 작은
값을 가진 요소의 포커스 가능
영역 뒤에 위치해야 합니다.
tabindex
속성이
candidate의 tabindex
속성
값과 동일하지만
candidate보다 shadow-including tree order에서 더
이전에 위치한
포커스 가능 영역 앞에
위치해야 합니다.
tabindex
속성이
candidate의 tabindex
속성
값보다 큰 값을 가진
요소의 포커스 가능
영역 앞에 위치해야 합니다.
모든 현재 엔진에서 지원됨.
tabIndex
IDL
속성은 반영해야 하며,
tabindex
콘텐츠 속성의 값을 반영해야 합니다. 기본 값은 0입니다.
요소가 a
,
area
,
button
,
frame
, iframe
,
input
,
object
,
select
,
textarea
,
또는 SVG
a
요소이거나, summary
요소로서
상세한
내용을
위한 요약인 경우입니다. 그렇지 않은 경우 기본 값은 −1입니다.
요소 유형에 따른 기본 값의 차이는 역사적 산물입니다.
focus trigger이 포커스 가능 영역이 아닌
요소이거나, 내비게이션 가능한 요소일 때, 선택적 문자열 focus
trigger(기본값
"기타
")와 함께 포커스 가능 영역을 가져오는 첫 번째 일치하는 단계들을 실행하십시오:
area
요소인 경우
area
요소가 속한 이미지
맵을 사용하는 첫 번째 img
요소에
해당하는 도형을 반환합니다. 트리 순서에서
요소의 첫 번째 스크롤 가능한 영역을 반환합니다. 플랫 트리의 전위, 깊이 우선 순회를 따라. [CSSSCOPING]
Document
의 문서 요소인 경우
활성 문서를 반환합니다.
내비게이션 가능한 컨테이너의 콘텐츠 내비게이션 가능한 활성 문서를 반환합니다.
focusedElement를 상위 레벨 탐색 가능 영역의 현재 포커스된 영역의 DOM 앵커로 설정합니다.
focus trigger이 focusedElement의 섀도우를 포함한 포함 조상인 경우, focusedElement를 반환합니다.
focus trigger에 대해 focus trigger가 주어졌을 때, 포커스 대리자를 반환합니다.
순차적으로 포커스 가능에 대한 처리는 섀도우 호스트 및 포커스 위임이 포함된 경우, 순차 포커스 내비게이션 순서를 구성할 때 처리됩니다. 즉, 포커스 단계는 순차적 포커스 내비게이션의 일부로 섀도우 호스트에서 호출되지 않습니다.
null을 반환합니다.
focus trigger에 대해 선택적 문자열 focus trigger(기본값 "기타
")가 주어진 포커스
대리자는 다음 단계에 의해 주어집니다:
focus trigger이 섀도우 호스트이고, 그 섀도우 루트의 포커스 위임이 false인 경우, null을 반환합니다.
whereToLook을 focus trigger으로 설정합니다.
whereToLook이 섀도우 호스트인 경우, whereToLook을 whereToLook의 섀도우 루트로 설정합니다.
autofocusDelegate를 focusTrigger를 고려한 whereToLook에 대한 자동 포커스 대리자로 설정합니다.
autofocusDelegate가 null이 아닌 경우, autofocusDelegate를 반환합니다.
각 whereToLook의 하위 요소에 대해 트리 순서로:
focusableArea을 null로 설정합니다.
focus trigger이 dialog
요소이고 descendant가 순차적으로 포커스 가능한 경우,
focusableArea을 descendant로 설정합니다.
그렇지 않고, focus trigger이 dialog
가
아니며 descendant가 포커스 가능 영역인 경우, focusableArea을
descendant로 설정합니다.
그렇지 않은 경우, focusTrigger가 주어진 descendant에 대한 포커스 가능 영역을 가져오는 결과로 focusableArea을 설정합니다.
이 단계는 재귀적으로 수행될 수 있습니다. 즉, 포커스 가능 영역을 가져오는 단계가 descendant의 포커스 대리자를 반환할 수 있습니다.
focusableArea가 null이 아닌 경우, focusableArea을 반환합니다.
여기서는 섀도우를 포함한 하위 요소를 고려하지 않고, 하위 요소만을 고려하고 있다는 점이 중요합니다. 섀도우 호스트는 위에서 언급한 재귀적인 경우에 처리됩니다.
null을 반환합니다.
위 알고리즘은 기본적으로 focus trigger의 DOM 앵커와 포커스 가능 영역 간의 경로가 섀도우 트리 경계에서 포커스를 위임하는 첫 번째 적절한 포커스 가능 영역을 반환합니다.
자동 포커스 대리자는 focus target과 주어진 focus trigger에 따라 다음 단계로 결정됩니다:
focus target의 하위 요소 각각에 대해 트리 순서로:
만약 descendant가 포커스 가능 영역이라면, focusable area를 descendant로 설정하고, 그렇지 않으면 focus trigger를 고려하여 descendant에 대한 포커스 가능 영역을 가져오는 결과로 설정합니다.
만약 focusable area가 null이라면, 계속 진행합니다.
만약 focusable area가 클릭 포커스 가능이 아니고, focus trigger가
"click
"이라면, 계속
진행합니다.
focusable area를 반환합니다.
null을 반환합니다.
포커스 단계는 new focus target이 포커스 가능 영역이거나, 포커스 가능 영역이 아닌 요소 또는 내비게이션 가능 요소인 경우에 따라 실행됩니다. 이들은 선택적으로 fallback target과 문자열 focus trigger와 함께 실행될 수 있습니다.
만약 new focus target이 포커스 가능 영역이 아니라면, focus trigger가 전달된 경우를 고려하여 new focus target에 대해 포커스 가능 영역을 가져오는 결과로 설정합니다.
만약 new focus target이 null이라면:
만약 fallback target이 지정되지 않았다면, 반환합니다.
그렇지 않으면, new focus target을 fallback target으로 설정합니다.
만약 new focus target이 null이 아닌 내비게이션 가능한 컨테이너이고, 콘텐츠 내비게이션 가능이 null이 아닌 경우, new focus target을 콘텐츠 내비게이션 가능의 활성 문서로 설정합니다.
만약 new focus target이 포커스 가능 영역이고, 그 DOM 앵커가 비활성화된 경우, 반환합니다.
만약 new focus target이 상위 레벨 탐색 가능의 현재 포커스된 영역인 경우, 반환합니다.
old chain을 new focus target이 속한 상위 레벨 탐색 가능의 현재 포커스 체인으로 설정합니다.
new chain을 new focus target의 포커스 체인으로 설정합니다.
old chain, new chain, 그리고 new focus target을 사용하여 포커스 업데이트 단계를 실행합니다.
사용자 에이전트는 사용자가 candidate에 포커스를 이동하려고 할 때마다 candidate에 대해 포커스 가능 영역 또는 내비게이션 가능에 대한 포커스 단계를 즉시 실행해야 합니다.
포커스 해제 단계는 old focus target이 포커스 가능 영역이거나 포커스 가능 영역이 아닌 요소일 때 다음과 같이 실행됩니다:
만약 old focus target이 섀도우 호스트이고, 그 섀도우 루트의 포커스 위임이 true이며, old focus target의 섀도우 루트가 섀도우를 포함한 포함 조상인 경우, old focus target을 해당 상위 레벨 탐색 가능의 현재 포커스된 영역으로 설정합니다.
만약 old focus target이 비활성화된 경우, 반환합니다.
만약 old focus target이 area
요소이고, 해당 도형 중
하나가 상위 레벨 탐색 가능의 현재 포커스된
영역인 경우, 또는 old focus target이 하나 이상의 스크롤 가능한 영역을 가진 요소이고, 그 중 하나가 상위 레벨 탐색 가능의 현재 포커스된
영역인 경우, old focus target을 해당 상위 레벨 탐색 가능의 현재 포커스된
영역으로 설정합니다.
old chain을 old focus target이 속한 상위 레벨 탐색 가능의 현재 포커스 체인으로 설정합니다.
만약 old focus target이 old chain의 항목 중 하나가 아니라면, 반환합니다.
만약 old focus target이 포커스 가능 영역이 아니라면, 반환합니다.
topDocument를 old chain의 마지막 항목으로 설정합니다.
만약 topDocument의 노드 네비게이블에 시스템 포커스가 있다면, topDocument의 뷰포트에 대해 포커싱 단계를 실행하세요.
그렇지 않으면, topDocument의 탐색 가능한 노드에서 시스템 포커스를 제거하기 위해 관련된 플랫폼별 규칙을 적용하고, old chain, 빈 목록, 그리고 null을 사용하여 포커스 업데이트 단계를 실행합니다.
포커스 해제 단계는 항상 포커스가 변경되는 결과를 초래하지는 않습니다. 예를 들어, 상위 레벨 탐색 가능의 현재 포커스된 영역이 뷰포트인 경우, 다른 포커스 가능 영역이 명시적으로 포커스 단계에 의해 포커스되지 않는 한, 포커스를 유지하게 됩니다.
포커스 업데이트 단계는 old chain, new chain, 그리고 new focus target이 각각 주어졌을 때 다음과 같이 실행됩니다:
만약 old chain의 마지막 항목과 new chain의 마지막 항목이 동일하다면, old chain과 new chain에서 마지막 항목을 제거하고 이 단계를 다시 실행합니다.
old chain의 각 항목 entry에 대해 순서대로 다음 하위 단계를 실행합니다:
만약 entry가 input
요소이고, change
이벤트가
해당 요소에 적용되며, 요소에
활성화 동작이 정의되어 있지 않고, 사용자가 해당 요소의 값 또는 선택된 파일 목록을 변경했지만 그 변경 사항을
커밋하지 않은 경우:
만약 entry가 요소인 경우, blur event target을 entry로 설정합니다.
만약 entry가 Document
객체인 경우, blur
event target을 해당 Document
객체의 관련 글로벌
객체로 설정합니다.
그 외의 경우, blur event target을 null로 설정합니다.
만약 entry가 old chain의 마지막 항목이고, entry가 Element
인
경우, 그리고 new chain의 마지막 항목도 Element
인
경우, related blur target을 new chain의 마지막 항목으로 설정합니다. 그렇지 않으면, related
blur target을 null로 설정합니다.
만약 blur event target이 null이 아닌 경우, related blur target을 관련 타겟으로 설정하여
blur event target에서 blur
라는 이름의 포커스 이벤트를 발생시킵니다.
일부 경우에는 entry가 area
요소의
도형이거나, 스크롤 가능한 영역이거나, 뷰포트일 경우 이벤트가 발생하지
않습니다.
new focus target에 포커스를 맞추기 위한 관련 플랫폼별 규칙을 적용합니다. (예를 들어, 일부 플랫폼은 텍스트 컨트롤이 포커스될 때 텍스트 컨트롤의 내용을 선택할 수 있습니다.)
new chain의 각 항목 entry에 대해 역순으로 다음 하위 단계를 실행합니다:
만약 entry가 포커스 가능 영역이고, 문서의 포커스된 영역이 entry가 아닌 경우:
document의 관련 글로벌 객체의 네비게이션 API의 진행 중인 네비게이션 중 포커스 변경을 true로 설정합니다.
entry를 문서의 포커스된 영역으로 지정합니다.
만약 entry가 요소인 경우, focus event target을 entry로 설정합니다.
만약 entry가 Document
객체인 경우,
focus event target을 해당 Document
객체의 관련 글로벌
객체로 설정합니다.
그 외의 경우, focus event target을 null로 설정합니다.
만약 entry가 new chain의 마지막 항목이고, entry가 Element
인
경우, 그리고 old chain의 마지막 항목도 Element
인
경우, related focus target을 old chain의 마지막 항목으로 설정합니다. 그렇지 않으면, related
focus target을 null로 설정합니다.
만약 focus event target이 null이 아닌 경우, related focus target을 관련 타겟으로 설정하여
focus event target에서 focus
라는 이름의 포커스 이벤트를 발생시킵니다.
일부 경우, 예를 들어 entry가 area
요소의
도형이거나, 스크롤 가능한 영역이거나, 뷰포트인 경우, 이벤트가 발생하지
않습니다.
포커스 이벤트 발생은 e라는 이름의 이벤트를 t라는 요소에서, 주어진 관련 타겟 r을
가지고 발생시킵니다. 이때, FocusEvent
를
사용하며, relatedTarget
속성은 r로 초기화되고, view
속성은 t의 노드 문서의 관련 글로벌 객체로 초기화되며, 합성 플래그가 설정됩니다.
키 이벤트가 상위 레벨 탐색 가능에서 라우팅될 때, 사용자 에이전트는 다음 단계를 실행해야 합니다:
target area를 상위 레벨 탐색 가능의 현재 포커스된 영역으로 설정합니다.
단언: target area는 null이 아닙니다. 키 이벤트는 시스템 포커스를 가진 상위 레벨 탐색 가능에만 라우팅되기 때문에, target area는 포커스 가능 영역입니다.
target node를 target area의 DOM 앵커로 설정합니다.
만약 target node가 Document
이고 body 요소를 가지고 있다면,
target node를 해당 Document
의 body 요소로 설정합니다.
그렇지 않고, 만약 target node가 비어 있지 않은 문서 요소를 가진
Document
객체라면, target
node를 해당 문서 요소로
설정합니다.
만약 target node가 비활성화되지 않았다면:
포커스 보유 단계는 target이라는 Document
객체에 대해 다음과 같이 실행됩니다:
만약 target의 탐색 가능한 노드의 상위 레벨 탐색 가능이 시스템 포커스를 가지고 있지 않다면, false를 반환합니다.
candidate를 target의 탐색 가능한 노드의 상위 레벨 탐색 가능의 활성 문서로 설정합니다.
다음이 true일 때까지 반복합니다:
만약 candidate가 target이라면, true를 반환합니다.
만약 candidate의 문서의 포커스된 영역이 비어 있지 않은 내비게이션 가능한 컨테이너이고, 비어 있지 않은 콘텐츠 내비게이션 가능을 가지고 있다면, candidate를 해당 내비게이션 가능한 컨테이너의 콘텐츠 내비게이션 가능의 활성 문서로 설정합니다.
그렇지 않으면, false를 반환합니다.
각 document
에는 순차 포커스 탐색 순서가 있으며, 이는 document
내의 일부 또는 모든 포커스 가능 영역을 상대적으로 정렬합니다. 그 내용과 순서는
document
의 평탄화된 tabindex-순서 탐색 범위에
의해 결정됩니다.
평탄화된 tabindex-순서 탐색
범위를 정의하는 규칙에 따라, 이 순서는 document
의
트리 순서와 반드시 관련이 있는 것은 아닙니다.
만약 포커스 가능 영역이 그 document
의 순차
포커스 탐색 순서에서 제외된다면, 이는 순차 포커스 탐색을 통해 접근할 수 없습니다.
순차 포커스 탐색 시작점도 있을 수 있습니다. 이는 처음에는 설정되지 않으며, 사용자가 이동해야 한다고 표시할 때 사용자 에이전트가 이를 설정할 수 있습니다.
예를 들어, 사용자가 문서 내용을 클릭하면 사용자 에이전트는 사용자의 클릭 위치로 이를 설정할 수 있습니다.
사용자가 프래그먼트로 탐색할 때, 사용자 에이전트는 순차 포커스 탐색 시작점을 타겟 요소에 설정해야 합니다.
사용자가 상위 레벨 탐색 가능한 현재 포커스된 영역에서 다음 또는 이전 포커스 가능 영역으로 포커스를 이동하도록 요청하거나(예: tab 키를 누르는 기본 동작으로) 사용자가 처음으로 상위 레벨 탐색 가능으로 포커스를 순차적으로 이동하도록 요청한 경우(예: 브라우저의 주소 표시줄에서), 사용자 에이전트는 다음 알고리즘을 사용해야 합니다:
만약 사용자가 그곳에서 포커스를 순차적으로 이동하도록 요청했다면, starting point를 상위 레벨 탐색 가능한 현재 포커스된 영역으로 설정하고, 그렇지 않으면 사용자가 대신 상위 레벨 탐색 가능 외부에서 포커스를 이동하도록 요청한 경우 상위 레벨 탐색 가능 자체로 설정합니다.
정의된 순차 포커스 탐색 시작점이 starting point 내부에 있으면, starting point를 대신 순차 포커스 탐색 시작점으로 설정합니다.
사용자가 다음 컨트롤을 요청한 경우 direction을 forward로, 이전 컨트롤을 요청한 경우 backward로 설정합니다.
일반적으로 tab 키를 누르면 다음 컨트롤을 요청하고, shift + tab을 누르면 이전 컨트롤을 요청합니다.
반복: starting point가 탐색
가능이거나, starting point가 그 document
의 순차 포커스 탐색 순서에 있으면
selection mechanism을 sequential로 설정합니다.
그렇지 않으면, starting point가 그 document
의 순차 포커스 탐색 순서에 없으므로
selection mechanism을 DOM으로 설정합니다.
candidate를 starting point, direction, selection mechanism을 인수로 하여 순차 탐색 검색 알고리즘을 실행한 결과로 설정합니다.
candidate가 null이 아니면 candidate에 대해 포커싱 단계를 실행하고 종료합니다.
그렇지 않으면 순차 포커스 탐색 시작점을 설정 해제합니다.
starting point가 상위 레벨 탐색 가능이거나 상위 레벨 탐색 가능 내의 포커스 가능 영역이면, 사용자 에이전트는 적절하게 자신의 컨트롤로 포커스를 옮기고(direction을 존중하며) 종료해야 합니다.
예를 들어, direction이 backward인 경우 브라우저의 렌더링 영역 이전의 마지막 순차적으로 포커스 가능한 컨트롤이 포커스할 컨트롤입니다.
만약 사용자 에이전트가 순차적으로 포커스 가능한 컨트롤이 없는 경우 — 예를 들어, 키오스크 모드 브라우저 — 사용자 에이전트는 starting point를 상위 레벨 탐색 가능 자체로 설정하고 이 단계를 다시 시작할 수 있습니다.
그렇지 않으면, starting point는 자식 탐색 가능 내의 포커스 가능 영역입니다. starting point를 해당 자식 탐색 가능의 부모로 설정하고 반복 단계로 돌아갑니다.
순차 탐색 검색 알고리즘은 다음 단계로 구성됩니다. 이 알고리즘은 starting point, direction, selection mechanism이라는 세 가지 인수를 받습니다.
다음 표에서 적절한 셀을 선택하고, 해당 셀의 지침을 따르세요.
적절한 셀은 direction을 설명하는 열의 헤더에서, starting point와 selection mechanism을 설명하는 행의 첫 번째 헤더에서 선택된 셀입니다.
direction이 forward일 때 | direction이 backward일 때 | |
---|---|---|
starting point가 탐색 가능일 때 | candidate를 starting point의 활성 문서 내의 첫 번째 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. | candidate를 starting point의 활성 문서 내의 마지막 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. |
selection mechanism이 DOM일 때 | candidate를 starting point 뒤의 홈 문서 내의 첫 번째 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. | candidate를 starting point 이전의 홈 문서 내의 마지막 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. |
selection mechanism이 sequential일 때 | candidate를 starting point 뒤의 홈 순차 포커스 탐색 순서 내의 첫 번째 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. | candidate를 starting point 이전의 홈 순차 포커스 탐색 순서 내의 마지막 적합한 순차적으로 포커스 가능한 영역으로 설정하고, 없으면 null로 설정합니다. |
적합한 순차적으로 포커스 가능한 영역은 포커스 가능 영역으로, 그 DOM 앵커가 비활성화되지 않았고 순차적으로 포커스 가능한 영역입니다.
홈 문서는 starting point가 속한 document
입니다.
홈 순차 포커스 탐색 순서는 starting point가 속한 순차 포커스 탐색 순서입니다.
홈 순차 포커스 탐색 순서는 홈 문서의 순차 포커스 탐색 순서입니다. 그러나 이는 starting point가 해당 순차 포커스 탐색 순서에 있을 때만 사용됩니다(그렇지 않을 때는 selection mechanism이 DOM이 됩니다).
만약 candidate가 비어 있지 않은 콘텐츠 내비게이션 가능을 가진 내비게이션 가능한 컨테이너라면, new candidate를 candidate의 콘텐츠 내비게이션 가능을 첫 번째 인수로, direction을 두 번째 인수로, sequential을 세 번째 인수로 하여 순차 탐색 검색 알고리즘을 실행한 결과로 설정합니다.
만약 new candidate가 null이면 starting point를 candidate로 설정하고 이 알고리즘의 처음으로 돌아갑니다. 그렇지 않으면 candidate를 new candidate로 설정합니다.
candidate를 반환합니다.
dictionary FocusOptions {
boolean preventScroll = false ;
boolean focusVisible ;
};
documentOrShadowRoot.activeElement
모든 현재 엔진에서 지원.
모든 현재 엔진에서 지원.
키 이벤트가 문서를 통해 또는 문서로 라우팅되는 가장 깊은 요소를 반환합니다. 이는 대략적으로 문서에서 포커스된 요소입니다.
이 API의 목적상, 자식 탐색 가능이 포커스된 경우, 해당
컨테이너는 해당 부모의 활성 문서 내에서 포커스됩니다.
예를 들어 사용자가 iframe
내의 텍스트 제어로
포커스를 이동시키면,
iframe
이 해당
activeElement
API에 의해 반환되는 요소입니다.
마찬가지로 포커스된 요소가 documentOrShadowRoot와 다른 노드 트리에 있는 경우, 반환되는 요소는 해당 documentOrShadowRoot와 같은 노드 트리 내에 있는 호스트가 됩니다. documentOrShadowRoot가 포커스된 요소의 그림자 포함 포함 조상인 경우에만 해당되며, 그렇지 않으면 null을 반환합니다.
document.hasFocus()
모든 현재 엔진에서 지원.
키 이벤트가 문서를 통해 또는 문서로 라우팅되는 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다. 대략적으로 이는 해당 문서 또는 그 안에 중첩된 문서가 포커스를 받고 있는 것과 일치합니다.
window.focus()
모든 현재 엔진에서 지원.
포커스를 윈도우의 탐색 가능 요소로 이동합니다.
element.focus([ { preventScroll: true } ])
모든 현재 엔진에서 지원.
포커스를 해당 요소로 이동합니다.
해당 요소가 탐색 가능 컨테이너인 경우, 포커스를 해당 탐색 가능 콘텐츠로 이동시킵니다.
기본적으로 이 메서드는 요소를 보기로 스크롤합니다. preventScroll
옵션을 제공하고 true로 설정하면 이 동작을 방지할 수 있습니다.
element.blur()
모든 현재 엔진에서 지원.
포커스를 뷰포트로 이동시킵니다.
이 메서드의 사용은 권장되지 않습니다.
뷰포트를 포커스하려면 focus()
메서드를 호출하십시오.
Document
의 문서 요소에 포커스를 맞춥니다.
포커스 링을 숨기기 위해 이 메서드를 사용하지 마십시오. 대신, :focus-visible
의사 클래스를 사용하여 'outline' 속성을 덮어쓰고 포커스된 요소를 표시하는 다른 방법을 제공하십시오. 대안 포커스 스타일이 제공되지 않으면
페이지를 주로 키보드로 탐색하는 사용자나 시력이 약화된 사용자가 페이지를 탐색하는 데 포커스 링을 사용하는 사람들에게 페이지 사용이 상당히 어려워집니다.
예를 들어 textarea
요소의 아웃라인을 숨기고 대신 포커스를 나타내기 위해 노란색 배경을 사용하려면 다음을 사용할 수 있습니다:
textarea:focus-visible { outline : none; background : yellow; color : black; }
activeElement
속성의 getter는 다음 단계를 수행해야 합니다:
candidate를 이 DocumentOrShadowRoot
의
노드
문서의 포커스된
영역의 DOM
앵커로 설정합니다.
candidate를 이 DocumentOrShadowRoot
에
대해 재타겟팅한 결과로 설정합니다.
candidate의 루트가
이 DocumentOrShadowRoot
가
아닌 경우 null을 반환합니다.
candidate가 Document
객체가
아닌 경우,
candidate를 반환합니다.
null을 반환합니다.
Document
객체의 hasFocus()
메서드는
호출될 때 포커스 여부 확인 단계를 실행하여 Document
객체를 인수로 반환해야 합니다.
focus()
메서드는 호출될 때 다음 단계를 수행해야 합니다:
current가 null인 경우 반환합니다.
current와 함께 포커싱 단계를 실행합니다.
current가 최상위 탐색 가능 요소인 경우, 사용자 에이전트는 페이지가 포커스를 얻으려 시도하고 있음을 사용자에게 알리기 위해 일부 알림을 트리거하는 것이 좋습니다.
모든 현재 엔진에서 지원.
blur()
메서드
단계는 아무 작업도 하지 않습니다.
역사적으로 focus()
및
blur()
메서드는 실제로 포함된 시스템 위젯(예: 탭 또는 윈도우)의 시스템 수준 포커스에 영향을 주었지만, 적대적인 사이트들이 이 동작을 악용하여 사용자에게 불이익을 주는 경우가 많았습니다.
focus(options)
메서드는 호출될 때 다음 단계를 수행해야 합니다:
해당 요소가 포커스 잠금으로 표시된 경우, 반환합니다.
해당 요소를 포커스 잠금으로 표시합니다.
해당 요소에 대한 포커싱 단계를 실행합니다.
만약 options의 focusVisible
사전 멤버의 값이 true인 경우,
또는 존재하지 않지만 사용자 에이전트가 구현
정의된 방식으로 판단하여 그렇게 하는 것이 좋다고 결정하는 경우,
포커스를 나타내야 합니다.
만약 options의 preventScroll
사전 멤버의 값이 false인 경우,
"auto", "center" 및 "center"를 사용하여 요소를 보기로 스크롤합니다.
해당 요소를 포커스 잠금에서 해제합니다.
blur()
메서드는 호출될 때 해당 메서드가 호출된 요소에 대해 포커스 해제 단계를
실행해야 합니다.
사용자 에이전트는 사용성 이유로 이 메서드 호출을 선택적으로 또는 일률적으로 무시할 수 있습니다.
예를 들어 blur()
메서드가 미관상의 이유로 포커스 링을 제거하는 데 사용되고 있다면, 페이지는 키보드 사용자에게 사용 불가능해집니다. 이 메서드 호출을 무시하면 키보드 사용자가 페이지와 상호작용할 수 있게 됩니다.
autofocus
속성autofocus
콘텐츠 속성은 페이지가 로드되자마자 요소가 포커스되도록 지시하여 사용자가 주요 요소를 수동으로 포커스하지 않고도 바로 입력을 시작할 수 있게 합니다.
autofocus
속성이 dialog
요소 내부 또는 popover
속성이 설정된
HTML 요소 내에 지정된 경우, 해당
요소는 대화 상자 또는 팝오버가 표시될 때 포커스됩니다.
autofocus
속성은 boolean 속성입니다.
주어진 요소
element에 대해 가장 가까운 조상 자동 포커스 범위 설정 루트
요소를 찾으려면 다음 단계를 따릅니다:
element가 dialog
요소인 경우, element를 반환합니다.
element의 popover
속성이 popover 없음
상태에 있지 않은 경우,
element를 반환합니다.
ancestor를 element로 설정합니다.
ancestor에 상위 요소가 있는 동안:
ancestor를 ancestor의 상위 요소로 설정합니다.
ancestor가 dialog
요소인 경우, ancestor를 반환합니다.
ancestor의 popover
속성이 popover 없음 상태에 있지 않은 경우,
ancestor를 반환합니다.
ancestor를 반환합니다.
동일한 가장 가까운 조상 자동 포커스 범위 설정 루트 요소를
가진 두 개의 요소가 모두 autofocus
속성을 지정해서는 안 됩니다.
각 document
는 처음에는 비어 있는 자동 포커스 후보 목록을 가지고 있습니다.
각 document
는 처음에는 false로 설정된
자동 포커스 처리 플래그 boolean 값을 가지고 있습니다.
autofocus
속성이 지정된 요소가 문서에 삽입될 때 다음 단계를 실행합니다:
사용자가 (예: 폼 컨트롤에서 입력을 시작하여) 포커스를 변경하지 않기를 원한다고 표시한 경우, 선택적으로 반환합니다.
target을 요소의 노드 문서로 설정합니다.
target이 완전히 활성화된 상태가 아니면 반환합니다.
target의 활성 샌드박싱 플래그 세트에 샌드박스화된 자동 기능 브라우징 컨텍스트 플래그가 포함되어 있는 경우 반환합니다.
각 ancestorNavigable에 대해 target의 조상 내비게이션 가능 요소 목록에서 ancestorNavigable의 활성 문서의 출처가 target의 출처와 동일하지 않은 경우 반환합니다.
topDocument를 target의 노드 내비게이션 가능 요소의 최상위 탐색 가능 요소의 활성 문서로 설정합니다.
topDocument의 자동 포커스 처리 플래그가 false이면, 제거하고 추가합니다.
요소가 포커스 가능한 영역인지 확인하지 않고, 자동 포커스 후보 목록에 저장합니다. 삽입 당시 포커스 가능 영역이 아니더라도 자동 포커스 후보 플러시 작업이 실행될 때까지 포커스 가능 영역이 될 수 있기 때문입니다.
자동 포커스 후보 플러시를 위해 문서 topDocument에 대해 다음 단계를 실행합니다:
topDocument의 자동 포커스 처리 플래그가 true이면 반환합니다.
candidates를 topDocument의 자동 포커스 후보로 설정합니다.
candidates가 비어 있으면 반환합니다.
topDocument의 포커스된 영역이 topDocument 자체가 아니거나, topDocument에 null이 아닌 타겟 요소가 있는 경우:
비웁니다 candidates.
topDocument의 자동 포커스 처리 플래그를 true로 설정합니다.
반환합니다.
candidates가 비어 있지 않은 동안:
element를 candidates[0]으로 설정합니다.
doc을 element의 노드 문서로 설정합니다.
doc이 완전히 활성화되지 않은 경우, 제거하고 계속합니다.
doc의 노드 내비게이션 가능 요소의 최상위 탐색 가능 요소가 topDocument의 노드 내비게이션 가능 요소와 동일하지 않은 경우, 제거하고 계속합니다.
doc의 스크립트 차단 스타일 시트 세트가 비어 있지 않은 경우 반환합니다.
이 경우 element는 현재 가장 좋은 후보이지만 doc이 자동 포커싱을 위한 준비가 되지 않았습니다. 다음에 자동 포커스 후보 플러시가 호출될 때 다시 시도합니다.
제거합니다 element를 candidates에서.
inclusiveAncestorDocuments를 doc의 포괄적인 조상 내비게이션 가능 요소의 활성 문서로 구성된 목록으로 설정합니다.
target을 element로 설정합니다.
target이 포커스 가능한 영역이 아닌 경우, 포커스 가능한 영역 가져오기 결과를 target으로 설정합니다.
자동 포커스 후보에는 포함될 수 있습니다 포커스 가능 영역이 아닌 요소가. 이러한 경우는 포커스 가능한 영역 가져오기 알고리즘에서 처리되는 특별한 경우 외에도, 포커스 가능한 영역이 아닌 요소가 문서에 삽입되었으며 포커스 가능 상태로 전환되지 않았거나, 요소가 포커스 가능했으나 자동 포커스 후보에 저장되어 있는 동안 상태가 변경된 경우에 발생할 수 있습니다.
target이 null이 아닌 경우 다음을 실행합니다:
비웁니다 candidates.
topDocument의 자동 포커스 처리 플래그를 true로 설정합니다.
포커싱 단계를 실행합니다 target에 대해.
이는 문서 로드 중 자동 포커싱을 처리합니다. show()
및 showModal()
메서드는 dialog
요소의 자동
포커스 속성도 처리합니다.
요소에 포커스가 맞춰졌다고 해서 사용자가 브라우저 창에 포커스를 다시 맞춰야 한다는 의미는 아닙니다.
한 엔진에서만 지원.
autofocus
IDL 속성은 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
다음 예제에서, 텍스트 컨트롤은 문서가 로드될 때 포커스됩니다.
< input maxlength = "256" name = "q" value = "" autofocus >
< input type = "submit" value = "Search" >
autofocus
속성은 폼 컨트롤뿐만 아니라 모든 요소에 적용됩니다. 다음과 같은 예제도 가능합니다:
< div contenteditable autofocus > Edit < strong > me!</ strong >< div >
이 섹션은 비규범적입니다.
활성화되거나 포커스될 수 있는 각 요소는 accesskey
속성을 사용하여 요소를
활성화하는 단일 키 조합에 할당될 수 있습니다.
정확한 단축키는 사용자의 키보드 정보, 플랫폼에서 이미 존재하는 키보드 단축키, 페이지에 지정된 다른 단축키에 대한 정보를 기반으로 사용자 에이전트에 의해 결정되며, accesskey
속성에 제공된
정보를 가이드로 사용합니다.
다양한 입력 장치에서 관련 키보드 단축키를 사용할 수 있도록 하기 위해, 작성자는 accesskey
속성에서 여러 가지
대안을 제공할 수 있습니다.
각 대안은 문자 또는 숫자와 같은 단일 문자로 구성됩니다.
사용자 에이전트는 사용자에게 키보드 단축키 목록을 제공할 수 있지만, 작성자도 이를 제공하는 것이 좋습니다. accessKeyLabel
IDL 속성은 사용자 에이전트에
의해 할당된 실제 키 조합을 나타내는 문자열을 반환합니다.
이 예제에서 작성자는 단축키를 사용하여 호출할 수 있는 버튼을 제공했습니다. 전체 키보드를 지원하기 위해 "C"를 가능한 키로 제공했습니다. 숫자 키패드만 장착된 장치를 지원하기 위해 "1"을 또 다른 가능한 키로 제공했습니다.
< input type = button value = Collect onclick = "collect()"
accesskey = "C 1" id = c >
사용자에게 단축키가 무엇인지 알려주기 위해, 작성자는 이 스크립트를 사용하여 버튼의 레이블에 키 조합을 명시적으로 추가하는 방법을 선택했습니다:
function addShortcutKeyLabel( button) {
if ( button. accessKeyLabel != '' )
button. value += ' (' + button. accessKeyLabel + ')' ;
}
addShortcutKeyLabel( document. getElementById( 'c' ));
다른 플랫폼의 브라우저들은 동일한 키 조합에 대해서도 그 플랫폼에서 널리 사용되는 관례에 따라 서로 다른 레이블을 표시합니다. 예를 들어, 키 조합이 Control 키, Shift 키, C 문자일 경우, Windows 브라우저는 "Ctrl+Shift+C"를 표시할 수 있고, Mac 브라우저는 "^⇧C"를 표시할 수 있으며, Emacs 브라우저는 "C-C"를 표시할 수 있습니다. 유사하게, 키 조합이 Alt 키와 Escape 키일 경우, Windows는 "Alt+Esc"를 사용하고, Mac은 "⌥⎋"를 사용하며, Emacs 브라우저는 "M-ESC" 또는 "ESC ESC"를 사용할 수 있습니다.
따라서 일반적으로 accessKeyLabel
IDL 속성에서 반환된 값을 구문 분석하려고 시도하는 것은 현명하지 않습니다.
accesskey
속성모든 현재 엔진에서 지원됨.
모든 HTML 요소는 accesskey
콘텐츠 속성을 설정할 수 있습니다. accesskey
속성의 값은 요소를 활성화하거나 포커스하는 키보드 단축키를 만드는 가이드로 사용자 에이전트에 의해 사용됩니다.
지정된 경우, 값은 고유한 공백으로 구분된 토큰의 순서 있는 집합이어야 하며, 각 토큰은 다른 토큰과 동일하지 않고 각각 정확히 한 코드 포인트 길이여야 합니다.
다음 예제에서는 다양한 링크에 액세스 키가 지정되어 있어 키보드 사용자가 사이트에 익숙한 경우 관련 페이지로 더 빠르게 탐색할 수 있습니다:
< nav >
< p >
< a title = "Consortium Activities" accesskey = "A" href = "/Consortium/activities" > Activities</ a > |
< a title = "Technical Reports and Recommendations" accesskey = "T" href = "/TR/" > Technical Reports</ a > |
< a title = "Alphabetical Site Index" accesskey = "S" href = "/Consortium/siteindex" > Site Index</ a > |
< a title = "About This Site" accesskey = "B" href = "/Consortium/" > About Consortium</ a > |
< a title = "Contact Consortium" accesskey = "C" href = "/Consortium/contact" > Contact</ a >
</ p >
</ nav >
다음 예제에서는 검색 필드에 "s"와 "0"(그 순서로) 두 가지 액세스 키가 제공됩니다. 전체 키보드가 있는 장치의 사용자 에이전트는 Ctrl + Alt + S를 단축키로 선택할 수 있고, 숫자 키패드만 있는 소형 장치의 사용자 에이전트는 단순히 0 키를 선택할 수 있습니다:
< form action = "/search" >
< label > Search: < input type = "search" name = "q" accesskey = "s 0" ></ label >
< input type = "submit" >
</ form >
다음 예제에서는 버튼에 대한 가능한 액세스 키가 설명되어 있습니다. 스크립트는 사용자 에이전트가 선택한 키 조합을 알리기 위해 버튼의 레이블을 업데이트하려고 시도합니다.
< input type = submit accesskey = "N @ 1" value = "Compose" >
...
< script >
function labelButton( button) {
if ( button. accessKeyLabel)
button. value += ' (' + button. accessKeyLabel + ')' ;
}
var inputs = document. getElementsByTagName( 'input' );
for ( var i = 0 ; i < inputs. length; i += 1 ) {
if ( inputs[ i]. type == "submit" )
labelButton( inputs[ i]);
}
</ script >
한 사용자 에이전트에서는 버튼의 레이블이 "Compose (⌘N)"로 바뀔 수 있습니다. 다른 에이전트에서는 "Compose (Alt+⇧+1)"로 바뀔 수 있습니다. 사용자 에이전트가 키를 할당하지 않은 경우, "Compose"로만 표시됩니다. 정확한 문자열은 할당된 액세스 키와 사용자 에이전트가 해당 키 조합을 어떻게 표현하는지에 따라 다릅니다.
요소의 할당된 액세스 키는 요소의 accesskey
콘텐츠 속성에서 파생된 키 조합입니다. 처음에는 요소가 할당된
액세스 키를 갖지 않아야 합니다.
요소의 accesskey
속성이 설정, 변경 또는 제거될 때마다, 사용자 에이전트는 다음 단계를 수행하여 요소의 할당된 액세스 키를 업데이트해야 합니다:
요소에 accesskey
속성이 없으면, 아래의 대체 단계로 건너뜁니다.
그렇지 않으면, 속성 값을 ASCII 공백으로 분할하고, keys를 결과 토큰으로 설정합니다.
속성 값에서 토큰이 나타난 순서대로 keys의 각 값을 차례로 실행하여 다음 하위 단계를 실행합니다:
값이 정확히 한 코드 포인트 길이의 문자열이 아닌 경우, 이 값에 대한 나머지 단계를 건너뜁니다.
값이 시스템 키보드의 키에 해당하지 않으면, 이 값에 대한 나머지 단계를 건너뜁니다.
사용자 에이전트가 속성에 지정된 값에 해당하는 키와 함께 사용할 수 있는 수정 키 조합을 찾을 수 있다면, 사용자 에이전트는 그 조합을 요소의 할당된
액세스 키로 지정하고 반환할 수 있습니다.
대체: 선택적으로, 사용자 에이전트는 선택한 키 조합을 요소의 할당된 액세스 키로 지정하고 반환할 수 있습니다.
이 단계에 도달하면, 해당 요소는 할당된 액세스 키를 갖지 않습니다.
사용자 에이전트가 요소에 대한 액세스 키를 선택하고 할당한 후에는 요소의 할당된 액세스 키를 변경해서는 안 됩니다. 단, accesskey
콘텐츠 속성이 변경되거나 요소가 다른 Document
로 이동되는 경우는 예외입니다.
사용자가 요소에 대한 할당된 액세스 키에 해당하는 키 조합을 누르면, 해당 요소가 명령을 정의하고, 명령의 측면이 false(보이는 상태)이며, 명령의 비활성 상태 측면도 false(활성화된 상태)이며, 요소가 문서에 포함되어 있고, 요소 및 그 조상 중 어느 것도 속성이 지정되지 않은 경우, 사용자 에이전트는 명령의 동작을 트리거해야 합니다.
사용자 에이전트는 다른 방법으로도 accesskey
속성이 있는 요소를 노출할 수 있으며, 예를 들어 특정 키 조합에 응답하여 표시되는 메뉴에서 이를 노출할 수 있습니다.
모든 현재 엔진에서 지원됨.
accessKey
IDL 속성은 반영해야 합니다. accesskey
콘텐츠 속성을 반영해야 합니다.
accessKeyLabel
IDL 속성은 요소의 할당된 액세스
키를 나타내는 문자열을 반환해야 합니다(있는 경우). 요소에 할당된 액세스 키가 없으면 IDL 속성은 빈 문자열을 반환해야 합니다.
contenteditable
콘텐츠 속성모든 현재 엔진에서 지원됨.
interface mixin ElementContentEditable {
[CEReactions ] attribute DOMString contentEditable ;
[CEReactions ] attribute DOMString enterKeyHint ;
readonly attribute boolean isContentEditable ;
[CEReactions ] attribute DOMString inputMode ;
};
Global_attributes/contenteditable
모든 현재 엔진에서 지원됨.
contenteditable
콘텐츠 속성은 다음 키워드와 상태를 가진 열거된 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
true
| true | 요소는 편집 가능합니다. |
(빈 문자열) | ||
false
| false | 요소는 편집할 수 없습니다. |
plaintext-only
| plaintext-only | 요소의 원시 텍스트 콘텐츠만 편집 가능하며, 리치 포맷팅은 비활성화됩니다. |
속성의 값이 누락된 경우 기본값과 잘못된 값 기본값은 모두 상속 상태입니다. 상속 상태는 부모 요소의 상태에 따라 요소가 편집 가능한지 여부를 나타냅니다.
예를 들어, 사용자가 HTML을 사용하여 새 기사를 작성하도록 예상되는 form
과
textarea
가 있는 페이지를 고려해
보십시오:
< form method = POST >
< fieldset >
< legend > 새 기사</ legend >
< textarea name = article > < p>안녕하세요 세계.< /p></ textarea >
</ fieldset >
< p >< button > 게시</ button ></ p >
</ form >
스크립팅이 활성화되면, textarea
요소는 대신 contenteditable
속성을
사용하여 리치 텍스트 컨트롤로 교체할 수 있습니다:
< form method = POST >
< fieldset >
< legend > 새 기사</ legend >
< textarea id = textarea name = article > < p>안녕하세요 세계.< /p></ textarea >
< div id = div style = "white-space: pre-wrap" hidden >< p > 안녕하세요 세계.</ p ></ div >
< script >
let textarea = document. getElementById( "textarea" );
let div = document. getElementById( "div" );
textarea. hidden = true ;
div. hidden = false ;
div. contentEditable = "true" ;
div. oninput = ( e) => {
textarea. value = div. innerHTML; };
</ script >
</ fieldset >
< p >< button > 게시</ button ></ p >
</ form >
예를 들어, 링크 삽입과 같은 기능은 document.execCommand()
API 또는 Selection
API 및 기타 DOM API를 사용하여 구현할 수 있습니다. [EXECCOMMAND] [SELECTION] [DOM]
contenteditable
속성도
효과적으로 사용할 수 있습니다:
<!doctype html>
< html lang = en >
< title > 실시간 CSS 편집!</ title >
< style style = white-space:pre contenteditable >
html { margin : .2 em ; font-size : 2 em ; color : lime ; background : purple }
head , title , style { display : block }
body { display : none }
</ style >
element.contentEditable [ = value ]
요소의 contenteditable
속성의 상태에 따라 "true
", "plaintext-only
", "false
" 또는 "inherit
"을
반환합니다.
설정을 통해 해당 상태를 변경할 수 있습니다.
새 값이 이러한 문자열 중 하나가 아니면 "SyntaxError
" DOMException
을
발생시킵니다.
element.isContentEditable
모든 현재 엔진에서 지원됨.
요소가 편집 가능하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
contentEditable
IDL 속성은 가져올 때, 콘텐츠 속성이 true 상태로 설정되어
있으면 문자열 "true
"를 반환하고, 콘텐츠 속성이 plaintext-only 상태로 설정되어 있으면
"plaintext-only
", 콘텐츠 속성이 false 상태로 설정되어 있으면 "false
", 그렇지 않으면
"inherit
"을
반환해야 합니다. 설정할 때, 새 값이 "inherit
" 문자열과 ASCII 대소문자
구분 없음 매칭이면 콘텐츠 속성이 제거되어야 합니다. 새 값이 "true
" 문자열과 ASCII 대소문자 구분 없음 매칭이면 콘텐츠 속성은 "true
" 문자열로 설정되어야 하고,
새 값이 "plaintext-only
" 문자열과 ASCII 대소문자
구분 없음 매칭이면 콘텐츠 속성은 "plaintext-only
" 문자열로 설정되어야 하며, 새 값이 "false
" 문자열과 ASCII 대소문자 구분 없음 매칭이면 콘텐츠 속성은 "false
" 문자열로 설정되어야 하며,
그렇지 않으면 속성 설정자는 "SyntaxError
" DOMException
을
발생시켜야 합니다.
isContentEditable
IDL 속성은 가져올 때, 요소가 편집 호스트 또는 편집 가능하면 true를
반환하고, 그렇지 않으면 false를 반환해야 합니다.
designMode
getter 및 setter
document.designMode [ = value ]
모든 현재 엔진에서 지원됨.
문서가 편집 가능하면 "on
"을 반환하고, 그렇지 않으면 "off
"를 반환합니다.
문서의 현재 상태를 변경하기 위해 설정할 수 있습니다. 이렇게 하면 문서에 포커스가 맞춰지고 문서 내의 선택 영역이 재설정됩니다.
Document
객체는 디자인 모드 활성화라는 부울 값을 가지며, 초기 값은 false입니다.
designMode
getter 단계는 this의 디자인 모드 활성화가 true일
때 "on
"을 반환하고, 그렇지 않으면 "off
"를 반환합니다.
designMode
setter 단계는 다음과 같습니다:
주어진 값을 ASCII 소문자로 변환한 value로 설정합니다.
value가 "on
"이고, this의 디자인 모드
활성화가 false인 경우:
value가 "off
"인 경우, this의 디자인 모드
활성화를 false로 설정합니다.
저자는 'white-space' 속성을 편집 호스트와 이러한 편집 메커니즘을 통해 처음 생성된 마크업에 대해 'pre-wrap' 값으로 설정할 것을 권장합니다. 기본 HTML 공백 처리 방식은 WYSIWYG 편집에 적합하지 않으며, 'white-space'를 기본 값으로 두면 일부 경계 사례에서 줄 바꿈이 제대로 작동하지 않을 수 있습니다.
기본 'normal' 값이 대신 사용될 경우 발생하는 문제의 예로, 사용자가 "yellow␣␣ball"을 두 개의 공백(여기서 "␣"으로 표시됨)으로 단어 사이에 입력한 경우를 고려해 보세요. 'white-space'('normal')의 기본값에 대한 편집 규칙이 적용된 경우, 결과 마크업은 "yellow ball" 또는 "yellow ball"로 구성됩니다. 즉, 일반 공백 외에도 두 단어 사이에 비공개 공백이 추가됩니다. 이는 'normal' 값의 'white-space'가 인접한 일반 공백을 함께 축소해야 하기 때문에 필요합니다.
첫 번째 경우에는 "yellow⍽"이 다음 줄로 넘어갈 수 있으며("⍽"은 여기서 비공개 공백을 나타냄), "yellow" 단어가 줄 끝에 들어갈 수 있음에도 불구하고 줄 바꿈이 발생할 수 있습니다. 두 번째 경우에는 "⍽ball"이 줄 시작에 래핑되면 비공개 공백으로 인해 가시적인 들여쓰기가 발생할 수 있습니다.
그러나 'white-space'가 'pre-wrap'으로 설정되면, 편집 규칙은 단순히 두 단어 사이에 두 개의 일반 공백을 삽입하며, 줄 끝에서 두 단어가 나뉘는 경우 공백이 깔끔하게 렌더링에서 제거됩니다.
편집 호스트는 contenteditable
속성이
true 상태 또는 plaintext-only 상태인 HTML 요소이거나,
자식 HTML
요소로서 디자인 모드가 활성화된 Document
의 일부입니다.
활성 범위, 편집 호스트,
편집 가능이라는 용어의 정의와 편집 호스트 또는 편집 가능 요소에 대한 사용자
인터페이스 요구 사항, execCommand()
,
queryCommandEnabled()
,
queryCommandIndeterm()
,
queryCommandState()
,
queryCommandSupported()
,
그리고 queryCommandValue()
메서드, 텍스트 선택 및 선택 삭제 알고리즘은
execCommand에서 정의됩니다. [EXECCOMMAND]
사용자 에이전트는 편집 가능한 텍스트에 대한 맞춤법 및 문법 검사를 지원할 수 있습니다. 이는 textarea
요소와
같은 폼 컨트롤이나 contenteditable
속성을 사용하여 편집 호스트에 있는 요소에서 가능합니다.
각 요소에 대해, 사용자 에이전트는 기본 동작을 설정해야 합니다. 이 기본 동작은 기본값 또는 사용자가 표현한 기본 설정을 통해 설정됩니다. 각 요소에는 세 가지 가능한 기본 동작이 있습니다:
spellcheck
속성을 통해
맞춤법 검사가 명시적으로 비활성화되지 않은 경우, 요소는 맞춤법 및 문법 검사를 받습니다.
spellcheck
속성을 통해
명시적으로 활성화되지 않는 한, 요소는 맞춤법 및 문법 검사를 받지 않습니다.
모든 현재 엔진에서 지원됩니다.
spellcheck
속성은 열거형 속성으로, 다음과 같은 키워드와
상태를 가집니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
true
| true | 맞춤법 및 문법이 검사됩니다. |
(빈 문자열) | ||
false
| false | 맞춤법 및 문법이 검사되지 않습니다. |
속성의 누락된 값의 기본값과 잘못된 값의 기본값은 모두 기본 상태입니다. 기본 상태는 요소가 아래에 정의된 대로 기본 동작에 따라 작동하도록 지정합니다.
element.spellcheck [ = value ]
요소의 맞춤법 및 문법 검사를 수행해야 하는 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.
설정할 수 있으며, 이를 통해 기본 동작을 무시하고 spellcheck
콘텐츠 속성을 설정할 수 있습니다.
spellcheck
IDL 속성은, 조회
시, 요소의 spellcheck
콘텐츠 속성이 true
상태이거나, 기본 상태이고 요소의 기본 동작이 true-by-default 상태이거나, 요소의 부모 요소의 spellcheck
IDL 속성이 true를
반환하는 경우 true를 반환합니다. 그렇지 않으면 false를 반환해야 합니다.
spellcheck
IDL 속성은 spellcheck
콘텐츠 속성을 무시하는 사용자 기본 설정에 의해 영향을 받지 않으므로 실제 맞춤법 검사 상태를 반영하지 않을 수 있습니다.
설정 시, 새 값이 true이면 요소의 spellcheck
콘텐츠 속성을
"true
"로 설정해야 하며, 그렇지 않은 경우 "false
"로 설정해야 합니다.
사용자 에이전트는 이 기능을 위해 다음 텍스트 조각만 검사 대상으로 고려해야 합니다:
input
요소의 값 중 type
속성이 텍스트, 검색, URL 또는 이메일 상태에
있는 요소로, 변경 가능한
경우(즉, readonly
속성이 지정되지 않았고 비활성화되지 않은
경우)입니다.
textarea
요소의 값 중 readonly
속성이 지정되지 않았고 비활성화되지
않은 경우입니다.
Text
노드의 텍스트입니다.
텍스트가 Text
노드의 일부인 경우, 텍스트와 연결된 요소는 단어, 문장 또는 다른 텍스트 조각의 첫 번째 문자의 즉각적인 부모 요소입니다. 속성에 포함된 텍스트의 경우, 속성의 요소가 연결된 요소입니다. input
및 textarea
요소의 값의 경우, 요소 자체가 연결된 요소입니다.
적용 가능한 요소(위에서 정의됨)에서 단어, 문장 또는 다른 텍스트 조각에 대해 맞춤법 및 문법 검사를 활성화할지 여부를 결정하기 위해, 사용자 에이전트는 다음 알고리즘을 사용해야 합니다:
spellcheck
콘텐츠
속성이 있는 경우: 해당 속성이 true 상태인 경우 검사가 활성화됩니다. 그렇지 않으면, 해당
속성이 false 상태인 경우 검사가 비활성화됩니다.
spellcheck
콘텐츠
속성을 가진 조상 요소가 있는 경우: 가장 가까운 그러한 조상의 spellcheck
콘텐츠
속성이 true 상태인 경우 검사가 활성화됩니다. 그렇지 않으면, 검사가
비활성화됩니다.
단어/문장/텍스트에 대해 검사가 활성화된 경우, 사용자 에이전트는 해당 텍스트의 맞춤법 및 문법 오류를 표시해야 합니다. 사용자 에이전트는 맞춤법 및 문법 수정 제안 시 문서에 제공된 다른 의미를
고려해야 합니다. 사용자 에이전트는 요소의 언어를 사용하여 맞춤법 및 문법 규칙을 결정할 수 있으며, 사용자의 선호 언어 설정을 사용할 수도 있습니다. 사용자 에이전트는 input
요소의 pattern
속성과 같은
속성을 사용하여 가능한 경우 결과 값이 유효한지 확인해야 합니다.
검사가 비활성화된 경우, 사용자 에이전트는 해당 텍스트에 대해 맞춤법 또는 문법 오류를 표시하지 않아야 합니다.
다음 예에서 "a" ID를 가진 요소는 "Hello" 단어가 맞춤법 오류로 검사되는지 여부를 결정하는 데 사용됩니다. 이 예에서는 맞춤법 검사가 이루어지지 않습니다.
< div contenteditable = "true" >
< span spellcheck = "false" id = "a" > Hell</ span >< em > o!</ em >
</ div >
다음 예에서 "b" ID를 가진 요소는 검사가 활성화됩니다(속성 값 앞의 공백 문자로 인해 input
요소에서
속성이 무시되므로 기본값 대신 조상 요소의 값이 사용됩니다).
< p spellcheck = "true" >
< label > Name: < input spellcheck = " false" id = "b" ></ label >
</ p >
이 명세서는 맞춤법 및 문법 검사기의 사용자 인터페이스를 정의하지 않습니다. 사용자 에이전트는 요청 시 검사를 제공하거나, 검사가 활성화된 동안 연속적인 검사를 수행하거나, 다른 인터페이스를 사용할 수 있습니다.
사용자 에이전트는 사용자가 편집 가능한 영역에 입력할 때 쓰기 제안을 제공합니다. 이러한 영역은 폼 컨트롤(예: textarea
요소) 또는 편집 호스트의 요소일 수 있습니다.
writingsuggestions
콘텐츠 속성은 다음과 같은 키워드와 상태를 가진 열거형 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
true
| true | 이 요소에서 쓰기 제안을 제공해야 합니다. |
(빈 문자열) | ||
false
| false | 이 요소에서 쓰기 제안을 제공하지 않아야 합니다. |
속성의 누락된 값 기본값은 기본 상태입니다. 기본 상태는 요소가 부모 요소의 writingsuggestions
상태에 따라 행동해야 한다는 것을 나타냅니다.
속성의 유효하지 않은 값 기본값은 true 상태입니다.
element.writingSuggestions [ = value ]
사용자 에이전트가 요소의 범위 내에서 쓰기 제안을 제공해야 하는 경우 "true
"를 반환합니다. 그렇지 않으면 "false
"를 반환합니다.
기본값을 무시하고 writingsuggestions
콘텐츠 속성을 설정하도록 설정할 수 있습니다.
계산된 쓰기 제안 값은 다음 단계를 실행하여 결정됩니다:
writingsuggestions
콘텐츠 속성이 false 상태인 경우 "false
"를 반환합니다.
writingsuggestions
콘텐츠 속성이 기본 상태이며, element에 부모 요소가 있고
부모 요소의 계산된 쓰기 제안 값이 "false
"인 경우
"false
"를 반환합니다.
true
"를 반환합니다.
writingSuggestions
getter 단계는 다음과 같습니다:
writingSuggestions
IDL 속성은 사용자 설정에 의해 무시될 수 있으며, 실제 쓰기 제안 상태를 반영하지 않을 수 있습니다.
writingSuggestions
setter 단계는 다음과 같습니다:
writingsuggestions
콘텐츠 속성을 주어진 값으로 설정합니다.
사용자 에이전트는 다음 알고리즘을 실행한 결과가 true일 경우에만 요소의 범위 내에서 제안을 제공해야 합니다:
writingsuggestions
콘텐츠 속성이 기본 상태가 아닐 경우, 가장 가까운 조상의 writingsuggestions
콘텐츠 속성이 false 상태에 있으면 false를 반환합니다.
이 사양은 쓰기 제안에 대한 사용자 인터페이스를 정의하지 않습니다. 사용자 에이전트는 사용자가 입력할 때 요청 시 제안을 제공하거나, 연속적으로 제안을 제공하거나, 인라인 제안을 제공하거나, 팝업에서 자동 완성과 유사한 제안을 제공할 수 있으며, 다른 인터페이스를 사용할 수도 있습니다.
텍스트를 입력하는 몇 가지 방법, 예를 들어 모바일 장치의 가상 키보드나 음성 입력 등은 종종 사용자가 문장의 첫 글자를 자동으로 대문자로 전환하는 것을 돕습니다(이 규칙을 따르는 언어에서 텍스트를
작성할 때). 자동 대문자 전환을 구현한 가상 키보드는 대문자로 자동 전환되지만 사용자가 다시 소문자로 전환할 수 있도록 허용할 수 있습니다. 음성 입력과 같은 다른 유형의 입력은 사용자가 먼저 개입할
수 있는 옵션을 제공하지 않고 자동 대문자 전환을 수행할 수 있습니다. autocapitalize
속성은 이러한 행동을
제어할 수 있게 해줍니다.
일반적으로 구현된 autocapitalize
속성은 물리적
키보드로 타이핑할 때의 동작에 영향을 주지 않습니다. (이러한 이유와 더불어, 사용자가 일부 경우 자동 대문자 전환 동작을 무시하거나 초기 입력 후 텍스트를 편집할 수 있는 능력이 있기 때문에, 이
속성은 입력 유효성 검사에 의존해서는 안 됩니다.)
autocapitalize
속성은 편집 호스트에서 호스팅된 편집 가능한 영역의 자동 대문자화를 제어하거나, input
또는 textarea
요소에서 텍스트 입력 시
동작을 제어할 수 있으며, form
요소에서 해당 자동 대문자화 및 자동 수정 상속 요소들과 관련된
기본 동작을 제어할 수 있습니다. form
요소와
연관된 모든 요소에 대해 기본 동작을 제어합니다.
autocapitalize
속성은
input
요소의 type
속성이 URL, 이메일, 또는 비밀번호 상태에
있는 경우, 자동 대문자 전환을 활성화하지 않습니다. (이 동작은 아래의 사용된 자동 대문자 전환 힌트 알고리즘에 포함되어 있습니다.)
자동 대문자 전환 처리 모델은 다음과 같이 정의된 다섯 가지 자동 대문자 전환 힌트 중 하나를 선택하는 것을 기반으로 합니다:
사용자 에이전트와 입력 방법은 자동 대문자 전환을 활성화할지 여부를 스스로 결정해야 합니다.
자동 대문자 전환이 적용되지 않아야 하며(모든 글자는 기본적으로 소문자가 되어야 합니다).
각 문장의 첫 글자는 기본적으로 대문자가 되어야 하며, 모든 다른 글자는 기본적으로 소문자가 되어야 합니다.
각 단어의 첫 글자는 기본적으로 대문자가 되어야 하며, 모든 다른 글자는 기본적으로 소문자가 되어야 합니다.
모든 글자는 기본적으로 대문자가 되어야 합니다.
Global_attributes/autocapitalize
모든 현재 엔진에서 지원됩니다.
autocapitalize
속성은 열거형 속성으로, 상태는 가능한 자동 대문자 전환 힌트입니다. 이 속성의 상태에
따라 지정된 자동 대문자 전환 힌트는 다른
요소들과 결합되어 사용자 에이전트의 동작을 알리는 사용된 자동 대문자 전환 힌트를 형성합니다. 이 속성의 키워드와 상태 매핑은 다음과
같습니다:
키워드 | 상태 |
---|---|
off
| none |
none
| |
on
| sentences |
sentences
| |
words
| words |
characters
| characters |
이 속성의 값이 누락된 경우 기본값은 기본값 상태이며, 잘못된 값의 기본값은 sentences 상태입니다.
element.autocapitalize [ = value ]
요소의 현재 자동 대문자 전환 상태를 반환하거나 설정되지 않은 경우 빈 문자열을 반환합니다. input
및 textarea
요소가
form
요소로부터 상태를 상속하는
경우, 이것은 form
요소의 자동
대문자 전환 상태를 반환하지만, 편집 가능한 영역의 요소에 대해서는 해당 편집 호스트의 자동 대문자 전환 상태를 반환하지 않습니다(해당 요소가 실제로 편집 호스트인 경우가 아니면).
설정할 수 있으며, autocapitalize
콘텐츠 속성을 설정하여 요소의 자동 대문자 전환 동작을 변경할 수 있습니다.
요소 element의 고유 자동 대문자 전환 힌트를 계산하려면 다음 단계를 수행하십시오:
autocapitalize
콘텐츠 속성이 element에 존재하고, 값이 빈 문자열이 아닌 경우, 해당 속성의 상태를 반환합니다.
element가 자동 대문자화 및 자동 수정 상속 요소이며, 폼 소유자가 null이 아닌 경우, element의 폼 소유자의 자체 자동 대문자화 힌트를 반환합니다.
기본값을 반환합니다.
autocapitalize
getter 단계는 다음과 같습니다:
state를 고유 자동 대문자 전환 힌트로 설정합니다.
state가 기본값인 경우, 빈 문자열을 반환합니다.
state에 해당하는 키워드 값을 반환합니다.
autocapitalize
setter 단계는
autocapitalize
콘텐츠 속성을
주어진 값으로 설정하는 것입니다.
텍스트 입력 방법에 대해 사용자 지정 가능한 자동 대문자 전환 기능을 지원하고 웹 개발자가 이 기능을 제어할 수 있도록 허용하려는 사용자 에이전트는 요소에 텍스트를 입력할 때 요소에 대한 사용된 자동 대문자 전환 힌트를 계산해야 합니다. 이는 요소에 텍스트를 입력할 때 권장되는 자동 대문자 전환 동작을 설명하는 자동 대문자 전환 힌트가 됩니다.
사용자 에이전트나 입력 방법은 특정 상황에서 사용된 자동 대문자 전환 힌트를 무시하거나 재정의할 수 있습니다.
요소 element에 대한 사용된 자동 대문자 전환 힌트는 다음 알고리즘을 사용하여 계산됩니다:
만약 element가 input
요소이며, 그 type
속성이 URL, 이메일 또는 비밀번호 상태 중 하나에 해당한다면 기본값을 반환합니다.
만약 element가 input
요소이거나 textarea
요소라면,
element의 고유 자동 대문자 전환 힌트를 반환합니다.
만약 element가 편집 호스트이거나 편집 가능한 요소라면, element의 고유 자동 대문자 전환 힌트를 반환합니다.
확인: 이 단계는 절대 도달하지 않으며, 텍스트 입력은 위의 기준 중 하나에 해당하는 요소에서만 발생합니다.
일부 텍스트 입력 방법은 사용자가 입력하는 동안 철자가 틀린 단어를 자동으로 수정하여 사용자를 돕습니다. 이 과정을 자동 수정이라고도 합니다. 사용자 에이전트는 편집 가능한 텍스트의 자동 수정을 지원할
수 있으며, 이는 폼 컨트롤(예: textarea
요소의 값) 또는 편집 호스트의 요소(예: contenteditable
사용)에서 가능합니다.
자동 수정은 텍스트가 자동으로 수정될 예정이거나 수정되었음을 나타내는 사용자 인터페이스와 함께 제공될 수 있으며, 일반적으로 구두점, 공백, 또는 새로운 단락을 철자가 틀린 단어 뒤에 삽입할 때
수행됩니다. autocorrect
속성을 사용하여 이러한
동작을 제어할 수 있습니다.
autocorrect
속성은 편집 호스트에서 호스팅된 편집
가능한 영역의 자동 수정 동작을 제어하거나, input
또는 textarea
요소에서 텍스트를
삽입할 때의 동작을 제어하거나, form
요소에서 해당
form
요소와 연결된 모든 자동 대문자화 및 자동 수정 상속 요소에 대한 기본 동작을
제어하는 데 사용할 수 있습니다.
autocorrect
속성은 input
요소에서 type
속성이 URL, 이메일, 또는 비밀번호 상태에 있을 때
절대 자동 수정을 활성화하지 않습니다. (이 동작은 아래 사용된 자동 수정 상태 알고리즘에 포함되어 있습니다.)
autocorrect
속성은
다음 키워드와 상태를 가진 열거형 속성입니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
on
| on | 사용자 에이전트가 사용자가 입력하는 동안 철자 오류를 자동으로 수정할 수 있습니다. 입력 중 철자가 자동으로 수정되는지 여부는 사용자 에이전트가 결정하며, 요소뿐만 아니라 사용자의 설정에 따라 다를 수 있습니다. |
(빈 문자열) | ||
off
| off | 사용자 에이전트는 사용자가 입력하는 동안 철자를 자동으로 수정할 수 없습니다. |
속성의 유효하지 않은 값 기본값과 누락된 값 기본값은 모두 on 상태입니다.
autocorrect
getter
단계는 다음과 같습니다: 요소의 사용된 자동 수정
상태가 on이면 true를
반환하고, 요소의 사용된 자동 수정 상태가 off이면 false를 반환합니다. setter
단계는 다음과 같습니다: 주어진 값이 true이면 요소의 autocorrect
속성을
"on
"으로 설정해야 하며, 그렇지 않으면 "off
"로 설정해야 합니다.
요소 element의 사용된 자동 수정 상태를 계산하려면 다음 단계를 수행합니다:
만약 element가 input
요소이고 type
속성이 URL, 이메일, 또는 비밀번호
상태에 있으면 off를 반환합니다.
만약 element에 autocorrect
속성이 있으면 그 상태를
반환합니다.
만약 element가 자동
대문자화 및 자동 수정 상속 요소이며, null이 아닌 폼 소유자가 있으면,
element의 폼 소유자의 autocorrect
속성의 상태를 반환합니다.
on을 반환합니다.
autocorrect
요소의 자동 수정 동작을 반환합니다. 자동 대문자화
및 자동 수정 상속 요소의 경우, 해당 요소가 form
요소에서 상태를 상속받는다면 이 동작은
form
요소의 자동 수정 동작을
반환합니다. 그러나 편집 가능한 영역 내의 요소의 경우, 이 요소가 편집 호스트가
아닌 한 편집 호스트의 자동 수정 동작을 반환하지 않습니다.
autocorrect
= 값
주어진 값을 설정하면 autocorrect
속성을 업데이트하여 요소의 자동 수정 동작을 변경합니다.
다음 예제에서 input
요소는 autocorrect
콘텐츠 속성이 없기 때문에 자동
수정을 허용하지 않습니다. 따라서 이 요소는 "off
" 속성이 있는 form
요소로부터 상속받습니다. 그러나 textarea
요소는 "on
" 값이 있는 autocorrect
콘텐츠 속성이 있기 때문에 자동
수정을 허용합니다.
< form autocorrect = "off" >
< input type = "search" >
< textarea autocorrect = "on" ></ textarea >
</ form >
inputmode
속성사용자 에이전트는 inputmode
속성을 양식 컨트롤(예: textarea
요소의 값)에서 지원할 수 있으며, 편집 호스트
내의 요소들에서도 사용할 수 있습니다(예: contenteditable
사용).
모든 현재 엔진에서 지원됨.
inputmode
콘텐츠 속성은
사용자가 내용을 입력할 때 가장 도움이 될 입력 메커니즘을 지정하는 열거형 속성입니다.
키워드 | 설명 |
---|---|
none
| 사용자 에이전트는 가상 키보드를 표시하지 않아야 합니다. 이 키워드는 자체 키보드 제어를 렌더링하는 콘텐츠에 유용합니다. |
text
| 사용자 에이전트는 사용자의 로케일에서 텍스트 입력이 가능한 가상 키보드를 표시해야 합니다. |
tel
| 사용자 에이전트는 전화번호 입력이 가능한 가상 키보드를 표시해야 합니다. 여기에는 0에서 9까지의 숫자 키, "#" 문자, "*" 문자가 포함되어야 합니다. 일부 로케일에서는 알파벳 기억법 레이블(예: 미국에서는 "2" 키에 A, B, C가 레이블됨)이 포함될 수 있습니다. |
url
| 사용자 에이전트는 사용자의 로케일에서 텍스트 입력이 가능한 가상 키보드를 표시해야 하며, "/" 및 "." 문자, "www." 또는 ".com"과 같은 문자열의 빠른 입력을 돕는 키를 제공해야 합니다. |
email
| 사용자 에이전트는 사용자의 로케일에서 텍스트 입력이 가능한 가상 키보드를 표시해야 하며, "@" 문자와 "." 문자의 입력을 돕는 키를 제공해야 합니다. |
numeric
| 사용자 에이전트는 숫자 입력이 가능한 가상 키보드를 표시해야 합니다. 이 키워드는 PIN 입력에 유용합니다. |
decimal
| 사용자 에이전트는 분수 숫자 입력이 가능한 가상 키보드를 표시해야 합니다. 숫자 키와 로케일의 형식 구분자가 표시되어야 합니다. |
search
| 사용자 에이전트는 검색에 최적화된 가상 키보드를 표시해야 합니다. |
모든 현재 엔진에서 지원됨.
inputMode
IDL 속성은 inputmode
콘텐츠 속성을 알려진 값으로만 제한하여 반영해야 합니다.
inputmode
가
명시되지 않았거나 사용자 에이전트에서 지원되지 않는 상태인 경우, 사용자 에이전트는 표시할 기본 가상 키보드를 결정해야 합니다. 입력 type
또는
pattern
속성과 같은 맥락 정보를 사용하여 어떤 유형의 가상 키보드를 사용자에게 표시할지 결정해야 합니다.
enterkeyhint
속성사용자 에이전트는 enterkeyhint
속성을 양식 컨트롤(예: textarea
요소의 값)에서 지원할 수 있으며, 편집
호스트 내의 요소들에서도 사용할 수 있습니다(예: contenteditable
사용).
Global_attributes/enterkeyhint
모든 현재 엔진에서 지원됨.
enterkeyhint
콘텐츠
속성은 가상 키보드에서 Enter 키에 대해 어떤 작업 레이블(또는 아이콘)을 표시할지를 지정하는 열거형 속성입니다. 이를 통해 작성자는 Enter 키의 표시를
사용자에게 더 유용하게 만들기 위해 사용자화할 수 있습니다.
키워드 | 설명 |
---|---|
enter
| 사용자 에이전트는 '입력' 작업에 대한 큐를 표시해야 하며, 일반적으로 새 줄을 삽입합니다. |
done
| 사용자 에이전트는 '완료' 작업에 대한 큐를 표시해야 하며, 일반적으로 더 이상 입력할 것이 없으며 입력 방법 편집기(IME)가 닫힙니다. |
go
| 사용자 에이전트는 '이동' 작업에 대한 큐를 표시해야 하며, 일반적으로 사용자가 입력한 텍스트의 대상 위치로 이동합니다. |
next
| 사용자 에이전트는 '다음' 작업에 대한 큐를 표시해야 하며, 일반적으로 사용자를 다음 텍스트 입력 필드로 이동시킵니다. |
previous
| 사용자 에이전트는 '이전' 작업에 대한 큐를 표시해야 하며, 일반적으로 사용자를 이전 텍스트 입력 필드로 이동시킵니다. |
search
| 사용자 에이전트는 '검색' 작업에 대한 큐를 표시해야 하며, 일반적으로 사용자가 입력한 텍스트를 검색한 결과로 이동시킵니다. |
send
| 사용자 에이전트는 '보내기' 작업에 대한 큐를 표시해야 하며, 일반적으로 텍스트를 대상 위치로 전송합니다. |
모든 현재 엔진에서 지원됨.
enterKeyHint
IDL 속성은 enterkeyhint
콘텐츠 속성을 알려진 값으로만 제한하여 반영해야 합니다.
enterkeyhint
가
명시되지 않았거나 사용자 에이전트에서 지원되지 않는 상태인 경우, 사용자 에이전트는 표시할 기본 작업 레이블(또는 아이콘)을 결정해야 합니다. inputmode
,
type
또는 pattern
속성과 같은 맥락 정보를 사용하여 가상 키보드에 표시할 작업 레이블(또는 아이콘)을 결정해야 합니다.
이 섹션에서는 페이지 내 검색(find-in-page)에 대해 정의합니다. 페이지 내 검색은 사용자 에이전트가 제공하는 일반적인 메커니즘으로, 사용자가 페이지의 콘텐츠에서 특정 정보를 검색할 수 있도록 합니다.
페이지 내 검색 기능에 대한 접근은 페이지 내 검색 인터페이스를 통해 제공됩니다. 이 인터페이스는 사용자 에이전트가 제공하는 사용자 인터페이스로, 사용자가 검색할 입력과 매개변수를 지정할 수 있도록 합니다. 이 인터페이스는 단축키 또는 메뉴 선택의 결과로 나타날 수 있습니다.
페이지 내 검색 인터페이스에서 텍스트 입력과 설정의 조합이 사용자의 쿼리를 나타냅니다. 이는 일반적으로 사용자가 검색하고자 하는 텍스트와 선택적 설정(예: 검색을 전체 단어로만 제한하는 기능)을 포함합니다.
사용자 에이전트는 주어진 쿼리에 대해 페이지 콘텐츠를 처리하고, 사용자의 쿼리를 만족하는 하나 이상의 일치 항목을 식별합니다.
이 일치 항목 중 하나는 사용자에게 활성 일치 항목으로 식별됩니다. 이는 강조 표시되고 화면에 보이도록 스크롤됩니다. 사용자는 페이지 내 검색 인터페이스를 사용하여 활성 일치 항목을 순차적으로 탐색할 수 있습니다.
이슈 #3539는 현재 명시되지 않은 window.find()
API가 페이지 내 검색(find-in-page)을 어떻게 표준화할지에 대한 논의를
추적합니다.
페이지 내 검색이 일치 항목을 찾기 시작할 때, [CSSCONTAIN]
요소 중 속성이 설정되지 않은 모든 요소는 속성을 수정하지 않고도 두 번째 슬롯의 가 접근 가능해져야 합니다. 이를 통해 페이지 내 검색이 그 내용을 검색할 수 있게 됩니다. 마찬가지로, 속성이 상태에 있는 모든 HTML 요소는 속성을 수정하지 않고도 가 접근 가능해져야 하며, 이를 통해 페이지 내 검색이 그 내용을 검색할 수 있게 됩니다. 페이지 내 검색이 일치 항목 검색을 마치면, 요소 및 속성이 상태에 있는 요소의 콘텐츠는 다시 건너뛰어야 합니다. 이 전체 과정은 동기적으로 이루어져야 하며, 사용자가나 작성자의 코드에서 이를 관찰할 수 없습니다.페이지 내 검색이 새로운
을 선택할 때 다음 단계를 수행하십시오:node를
의 첫 번째 노드로 설정하십시오.node의
에 대해 하고 다음 단계를 실행하십시오:node에 대해
을 실행하십시오.node에 대해
을 실행하십시오.페이지 내 검색이 요소를 자동으로 확장할 때, 이벤트가 발생합니다. 페이지 내 검색에서 발생하는 별도의 이벤트와 마찬가지로, 이 이벤트는 사용자가 페이지 내 검색 대화 상자에 입력하는 내용을 페이지에서 알아내는 데 사용될 수 있습니다. 페이지가 현재 검색어와 사용자가 입력할 수 있는 모든 가능한 다음 문자를 포함하는 작은 스크롤 가능한 영역을 만들고, 브라우저가 스크롤하는 항목을 관찰하여 그 문자를 검색어에 추가하고 스크롤 가능한 영역을 업데이트하여 점진적으로 검색어를 구축할 수 있습니다. 각 가능한 다음 일치 항목을 닫힌 요소에 래핑하면, 페이지는 이벤트 대신 이벤트를 청취할 수 있습니다. 이 공격은 페이지 내 검색 대화 상자에 사용자가 입력하는 모든 문자를 기반으로 조치를 취하지 않음으로써 두 이벤트 모두에서 해결할 수 있습니다.
페이지 내 검색 프로세스는 문서의 컨텍스트에서 호출되며, 해당 문서의 선택 영역에 영향을 미칠 수 있습니다. 특히, 활성 일치 항목을 정의하는 범위는 현재 선택 영역을 지시할 수 있습니다. 그러나 이러한 선택 업데이트는 페이지 내 검색 프로세스 중에 다른 시간(예: 페이지 내 검색 인터페이스가 해제될 때 또는 활성 일치 항목 범위가 변경될 때)에 발생할 수 있습니다.
사용자는 구현 정의(및 장치별) 방식으로 사용자 에이전트에 닫기 요청을 보낼 수 있습니다. 이는 사용자가 현재 화면에 표시되고 있는 팝오버, 메뉴, 대화 상자, 선택기 또는 표시 모드 등을 닫고자 한다는 것을 나타냅니다.
닫기 요청의 예시는 다음과 같습니다:
데스크톱 플랫폼의 Esc 키.
Android와 같은 특정 모바일 플랫폼의 뒤로 가기 버튼 또는 제스처.
iOS VoiceOver의 두 손가락 스크럽 "z" 제스처와 같은 보조 기술의 닫기 제스처.
DualShock 게임패드의 원형 버튼과 같은 게임 컨트롤러의 표준 "뒤로 가기" 버튼.
사용자 에이전트가 document
document를 대상으로 하는 잠재적
닫기
요청을 받을 때, document의 관련 글로벌
객체에 대해 전역 작업을 큐에 추가하고 다음 닫기 요청 단계을 수행해야 합니다:
만약 document의 전체 화면 요소가 null이 아니면:
document의 노드 네비게이블의 최상위 탐색 가능 객체의 활성 문서에 대해 완전히 전체 화면 종료를 실행하십시오.
반환하십시오.
이 과정은 keydown
과
같은 관련 이벤트를 트리거하지 않으며, 단지 fullscreenchange
이벤트가 나중에 발생하도록 합니다.
선택적으로, 대체 처리로 넘어갑니다.
예를 들어, 사용자 에이전트가 현재 웹 페이지에서 반복적인 닫기 요청 인터셉션으로 인한 사용자 좌절을 감지하면 이 경로를 따를 수 있습니다.
UI Events 또는 기타 관련 명세에 따라 관련 이벤트를 트리거하십시오. [UIEVENTS]
UI Events 모델에서 관련 이벤트의 예는 사용자가 키보드에서 Esc 키를 눌렀을 때 UI
Events가 트리거하는 keydown
이벤트입니다. 대부분의 키보드가 있는 플랫폼에서는 이것이 닫기 요청으로 처리되며,
이로 인해 이 닫기 요청 단계가 실행됩니다.
모델 외부의 관련 이벤트의 예는 보조 기술이 닫기 제스처를 통해 사용자가 닫기 요청을 보낼 때 Esc keydown
이벤트를 생성하는 경우입니다.
이러한 이벤트가 발생하지 않은 경우 event를 null로 설정하거나, 발생한 이벤트를 나타내는 Event
객체를 설정합니다. 여러 이벤트가 발생한 경우, 어떤 이벤트를 선택할지는 구현
정의에 따릅니다.
만약 event가 null이 아니고, 그 취소된 플래그가 설정되어 있으면, 반환하십시오.
만약 document가 완전히 활성화된 상태가 아니라면, 반환하십시오.
이 단계는 필요합니다. event가 null이 아닌 경우 이벤트 리스너가 document를 더 이상 완전히 활성화된 상태로 만들지 않았을 수 있기 때문입니다.
document의 관련 글로벌 객체에 대해 닫기 감시자 처리의 결과로 closedSomething을 설정하십시오.
만약 closedSomething이 true이면, 반환하십시오.
대체 처리: 다른 경우에는 닫기 요청을 감시하는 것이 없었습니다. 사용자 에이전트는 이 상호작용을 닫기 요청으로 해석하는 대신 다른 작업으로 해석할 수 있습니다.
플랫폼에서 Esc 키를 누르는 것이 닫기 요청으로 해석되는 경우, 사용자
에이전트는 키가 눌려질 때 이를 닫기 요청으로 해석해야 하며, 키가 해제될 때가 아닙니다. 따라서 위 알고리즘에서 발생하는 "관련 이벤트"는 단일 keydown
이벤트여야 합니다.
Esc가 닫기 요청인 플랫폼에서는 사용자
에이전트가 먼저 적절히 초기화된 keydown
이벤트를 트리거합니다. 웹 개발자가 preventDefault()
를
호출하여 이벤트를 취소하면 아무 일도 일어나지 않습니다. 하지만 이벤트가 취소되지 않고 발생하면 사용자 에이전트는 닫기 감시자 처리를 계속 진행합니다.
뒤로 가기 버튼이 잠재적인 닫기 요청인 플랫폼에서는 이벤트가 발생하지 않으므로, 뒤로 가기 버튼이 눌리면 사용자 에이전트는 닫기 감시자 처리를 바로 진행합니다. 만약 활성화된 닫기 감시자가 있으면 해당 감시자가 트리거됩니다. 없다면 사용자 에이전트는 뒤로 가기 버튼을 다른 방식으로 해석할 수 있습니다. 예를 들어, 히스토리를 −1만큼 탐색하는 요청으로 해석할 수 있습니다.
각 Window
는 닫기 감시자 관리자를 가지고 있으며, 이는 다음과 같은 구조체의 항목들로 구성됩니다:
허용된 그룹 수: 숫자로, 초기 값은 1입니다.
다음 사용자 상호작용은 새로운 그룹을 허용합니다: 초기 값이 true인 boolean입니다.
닫기 감시자 관리자의 복잡성 대부분은 닫기 요청의 대체 작업이 기록 탐색의 주요 메커니즘인 플랫폼에서 개발자가 사용자의 기록 탐색 능력을 비활성화하는 것을 방지하기 위한 악용 방지 보호 장치에서 비롯됩니다. 특히:
닫기 감시자의 그룹화는 기록 작업 활성화 없이 여러 닫기 감시자가 생성될 경우, 이들이 함께 그룹화되어 사용자에 의해 트리거된 닫기 요청이 그룹 내 모든 닫기 감시자를 닫도록 설계되었습니다. 이를 통해 웹 개발자가 닫기 감시자를 생성하여 무제한의 닫기 요청을 가로채지 못하게 합니다. 대신, 최대 1 + 사용자가 페이지를 활성화한 횟수만큼 닫기 감시자를 생성할 수 있습니다.
다음 사용자 상호작용은 새로운 그룹을 허용합니다 boolean은 웹 개발자가 개별 사용자 활성화와 연결된 방식으로 닫기 감시자를 생성하도록 유도합니다. 그렇지 않으면, 각 사용자 활성화는 허용된 그룹 수를 증가시킵니다. 요약하면:
허용됨: 사용자 상호작용; 자체 그룹에 닫기 감시자 생성; 사용자 상호작용; 두 번째 독립 그룹에 닫기 감시자 생성.
허용되지 않음: 사용자 상호작용; 사용자 상호작용; 자체 그룹에 닫기 감시자 생성; 두 번째 독립 그룹에 닫기 감시자 생성.
허용됨: 사용자 상호작용; 사용자 상호작용; 자체 그룹에 닫기 감시자 생성; 이전 그룹과 함께 그룹화된 닫기 감시자 생성.
이 보호 장치는 최대 사용자가 페이지를 활성화한 횟수 + 1개의 그룹만 생성하는 데 중요한 것은 아닙니다. 악용하려는 의도를 가진 사람은 단순히 각 사용자 상호작용마다 하나의 닫기 감시자를 생성하여 "저장"해 둘 것입니다. 그러나 이 시스템은 일반적인 경우에 더 예측 가능한 동작을 생성하고, 악용하지 않는 개발자들이 사용자 상호작용에 직접 반응하여 닫기 감시자를 생성하도록 유도합니다.
닫기 감시자 관리자에게 사용자 활성화에 대해 알리기 위해 Window
window를 사용하여:
manager를 window의 닫기 감시자 관리자로 설정하십시오.
만약 manager의 다음 사용자 상호작용은 새로운 그룹을 허용합니다가 true이면, manager의 허용된 그룹 수를 증가시키십시오.
manager의 다음 사용자 상호작용은 새로운 그룹을 허용합니다를 false로 설정하십시오.
window: Window
.
취소 작업: boolean 인수를 받아 boolean 값을 반환하는 알고리즘입니다. 인수는 취소 작업 알고리즘이 닫기 요청을 계속 진행할 수 있는지 여부를 나타냅니다. boolean 인수가 true이면, 알고리즘은 호출자가 닫기 작업으로 진행할 것인지(true) 아니면 중단할 것인지(false)를 반환할 수 있습니다. 인수가 false이면, 반환 값은 항상 false입니다. 이 알고리즘은 예외를 발생시킬 수 없습니다.
닫기 작업: 인수를 받지 않고 반환 값이 없는 알고리즘입니다. 이 알고리즘은 예외를 발생시킬 수 없습니다.
취소 작업 실행 중 boolean.
닫기 감시자 closeWatcher는 closeWatcher의 window의 닫기 감시자 관리자가 어떤 목록이라도 포함할 때 활성화된 상태입니다.
Window
window를 사용하여 닫기 감시자를 처리하려면:
processedACloseWatcher를 false로 설정하십시오.
만약 window의 닫기 감시자 관리자의 그룹이 비어 있지 않다면:
window의 닫기 감시자 관리자의 그룹에서 마지막 항목인 group을 설정하십시오.
역순으로 group의 각 closeWatcher에 대해:
만약 window의 닫기 감시자 관리자의 허용된 그룹 수가 1보다 크면, 1을 차감하십시오.
processedACloseWatcher를 반환하십시오.
CloseWatcher
인터페이스[Exposed=Window]
interface CloseWatcher : EventTarget {
constructor(optional CloseWatcherOptions options = {});
undefined requestClose();
undefined close();
undefined destroy();
attribute EventHandler oncancel;
attribute EventHandler onclose;
};
dictionary CloseWatcherOptions {
AbortSignal signal;
};
watcher = new CloseWatcher()
watcher = new CloseWatcher({ signal })
CloseWatcher
인스턴스를
생성합니다.
signal
옵션이 제공된 경우, 주어진 AbortSignal
이
중단되면 watcher는 마치 watcher.destroy()
에
의해 파괴된 것처럼 됩니다.
이미 닫기 감시자가 활성화되어 있고, Window
에 기록 작업
활성화가 없다면, 새롭게 생성된 CloseWatcher
는 이미 활성화된
닫기 감시자와 함께 닫히게 됩니다. (이 이미 활성화된
닫기 감시자는 반드시 CloseWatcher
객체일 필요는
없으며, dialog
요소나
popover
속성을 가진 요소에서
생성된 팝오버일 수도 있습니다.)
watcher.requestClose()
watcher를 대상으로 닫기 요청이
보내진 것처럼 동작합니다. 먼저 cancel
이벤트를 발생시키고, 해당
이벤트가 preventDefault()
에
의해 취소되지 않은 경우 close
이벤트를
발생시키고, 마치 watcher.destroy()
가
호출된 것처럼 닫기 감시자를 비활성화합니다.
이는 모든 닫기 요청이 이 메서드를 호출하도록 하여
cancel
및 close
이벤트 핸들러에 취소 및 닫기
로직을 통합할 수 있는 유틸리티입니다.
watcher.close()
즉시 close
이벤트를 발생시키고, 마치
watcher.destroy()
가
호출된 것처럼 닫기 감시자를 비활성화합니다.
이는 close
이벤트 핸들러에서 닫기
로직을 트리거하기 위해 사용할 수 있는 유틸리티로, cancel
이벤트 핸들러의 로직을
건너뜁니다.
watcher.destroy()
watcher를 비활성화하여 더 이상 close
이벤트를 수신하지 않으며, 새로운
독립적인 CloseWatcher
인스턴스를 생성할 수 있도록 합니다.
이것은 관련 UI 요소가 다른 방식으로 닫히는 경우 호출하도록 설계되었습니다.
각 CloseWatcher
인스턴스는 내부 닫기 감시자를 가지고 있으며, 이는 닫기 감시자입니다.
new CloseWatcher(options)
생성자 단계는 다음과 같습니다:
this의 관련 전역 객체의 연결된 문서
가 완전히 활성화되지 않은 경우, "InvalidStateError
" DOMException
을
throw합니다.
closeWatcher를 닫기 감시자 설정의 결과로 설정하며, 이는 this의 관련 전역 객체를 사용하여 다음을 포함합니다:
cancelAction이
canPreventClose가 cancel
이라는 이벤트를
this에서 발생시키도록 하여 그 결과를 반환하는 것과 같은 방식으로 설정합니다.
closeAction이 close
이라는 이름의
이벤트를 this에서 발생시키도록 설정합니다.
requestClose()
메서드 단계는 닫기를 요청하여 this의 내부 닫기 감시자를 요청합니다.
close()
메서드 단계는
닫기하여 this의 내부 닫기 감시자를 닫습니다.
destroy()
메서드
단계는 파괴하여 this의 내부 닫기 감시자를 파괴합니다.
다음은 이벤트 핸들러와 해당 이벤트 핸들러 이벤트 유형이며,
모든 CloseWatcher
인터페이스를 구현하는
객체에 의해 지원되어야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
oncancel |
cancel |
onclose |
close |
사용자 제공의 닫기 요청과
닫기 버튼을 눌렀을 때 자동으로 닫히는 커스텀 피커 컨트롤을 구현하려면,
다음 코드에서
CloseWatcher
API를 사용하여
닫기 요청을 처리하는 방법을 보여줍니다:
const watcher = new CloseWatcher();
const picker = setUpAndShowPickerDOMElement();
let chosenValue = null ;
watcher. onclose = () => {
chosenValue = picker. querySelector( 'input' ). value;
picker. remove();
};
picker. querySelector( '.close-button' ). onclick = () => watcher. requestClose();
선택된 값을 수집하는 로직이
CloseWatcher
객체의
close
이벤트 핸들러에 집중되어 있으며,
닫기 버튼의
클릭
이벤트 핸들러는 해당 로직을 호출하여
requestClose()
메서드를 호출합니다.
취소
이벤트는
CloseWatcher
객체에서
close
이벤트 발생을 막고
객체가 파괴되는 것을 방지하는 데 사용할 수 있습니다. 일반적인 사용 사례는 다음과 같습니다:
watcher. oncancel = async ( e) => {
if ( hasUnsavedData && e. cancelable) {
e. preventDefault();
const userReallyWantsToClose = await askForConfirmation( "정말로 닫으시겠습니까?" );
if ( userReallyWantsToClose) {
hasUnsavedData = false ;
watcher. close();
}
}
};
오용 방지 목적으로, 이 이벤트는 페이지에 히스토리 액션 활성화가 있는 경우에만
취소 가능
합니다.
이는 사용자가 중간 사용자 활성화 없이 두 번 연속으로 닫기 요청을 보내면
첫 번째 요청 후 두 번째 요청이
취소
이벤트 핸들러의
preventDefault()
호출을 무시하고
닫기 요청을 처리하게 됩니다.
위의 두 예시는
requestClose()
와
close()
의 차이점을 보여줍니다.
닫기 버튼의
클릭
이벤트 핸들러에서
requestClose()
를 사용했기 때문에,
이 버튼을 클릭하면
CloseWatcher
의
취소
이벤트가 트리거되며, 저장되지 않은 데이터가 있을 경우 사용자의 확인을 요청할 수 있습니다.
만약
close()
를 사용했다면 이 확인 과정이 건너뛰어질 것입니다.
때로는 이것이 적절할 수 있지만, 보통
requestClose()
가 사용자 트리거 닫기 요청에 대해 더 나은 선택입니다.
취소
이벤트의
사용자 활성화 제한 외에도,
CloseWatcher
생성에 대한 더 미묘한 사용자 활성화 게이팅이 있습니다.
사용자 활성화 없이 여러
CloseWatcher
를 생성하면, 새로 생성된 객체가
가장 최근에 생성된 닫기 감시자와 그룹화되어
단일 닫기 요청으로
두 객체를 모두 닫을 수 있게 됩니다:
window. onload = () => {
// 이것은 정상적으로 작동할 것입니다: 사용자 활성화 없이 생성된 첫 번째 닫기 감시자입니다.
( new CloseWatcher()). onclose = () => { /* ... */ };
};
button1. onclick = () => {
// 이것은 정상적으로 작동할 것입니다: 버튼 클릭이 사용자 활성화로 간주됩니다.
( new CloseWatcher()). onclose = () => { /* ... */ };
};
button2. onclick = () => {
// 이들은 함께 그룹화되며, 단일 닫기 요청에 모두 응답하여 닫힙니다.
( new CloseWatcher()). onclose = () => { /* ... */ };
( new CloseWatcher()). onclose = () => { /* ... */ };
};
이로 인해
destroy()
,
close()
, 또는
requestClose()
를 적절하게 호출하는 것이 중요합니다.
이렇게 해야만 "자유로운" 비그룹화된 닫기 감시자 슬롯을 다시 얻을 수 있습니다.
사용자 활성화 없이 생성된 닫기 감시자는 세션 비활성화 타임아웃 대화 상자나
서버에서 발생한 긴급 알림과 같은 경우에 유용합니다.
모든 현재 엔진에서 지원합니다.
이 섹션은 이벤트 기반의 드래그 앤 드롭 메커니즘을 정의합니다.
이 명세는 드래그 앤 드롭 작업이 정확히 무엇인지에 대해 정의하지 않습니다.
포인팅 장치가 있는 시각적 매체에서 드래그 작업은
마우스다운
이벤트의 기본 동작이 될 수 있으며, 이는 일련의
마우스무브
이벤트가 뒤따르고, 드롭은 마우스 버튼을 놓음으로써 트리거될 수 있습니다.
포인팅 장치 외의 입력 방식을 사용하는 경우, 사용자는 드래그 앤 드롭 작업을 수행하려는 의도를 명시적으로 나타내어 무엇을 드래그하고 어디에 드롭할 것인지 각각 명시해야 할 것입니다.
어떻게 구현되든, 드래그 앤 드롭 작업은 시작점(예: 마우스를 클릭한 위치, 선택된 드래그 요소 또는 요소의 시작 부분)을 가지고 있어야 하며, 중간 단계(드래그 중에 마우스가 지나가는 요소들 또는 사용자가 가능한 드롭 지점으로 선택하는 요소들)가 있을 수 있고, 종료 지점(마우스 버튼을 놓은 요소 또는 최종적으로 선택된 요소)이 있어야 하거나, 작업이 취소될 수 있습니다. 종료 지점은 드롭이 발생하기 전에 마지막으로 선택된 드롭 지점이어야 합니다(따라서 작업이 취소되지 않는 한, 중간 단계에 적어도 하나의 요소가 있어야 합니다).
이 섹션은 규범적이지 않습니다.
요소를 드래그 가능하게 만들려면, 요소에
draggable
속성을 추가하고, 드래그 중인 데이터를 저장하는
dragstart
이벤트 리스너를 설정하세요.
이벤트 핸들러는 일반적으로 드래그되는 것이 텍스트 선택이 아닌지 확인한 후
DataTransfer
객체에 데이터를 저장하고,
허용된 효과(복사, 이동, 링크 또는 이들의 조합)를 설정해야 합니다.
예를 들어:
< p > 당신이 좋아하는 과일은 무엇입니까?</ p >
< ol ondragstart = "dragStartHandler(event)" >
< li draggable = "true" data-value = "fruit-apple" > 사과</ li >
< li draggable = "true" data-value = "fruit-orange" > 오렌지</ li >
< li draggable = "true" data-value = "fruit-pear" > 배</ li >
</ ol >
< script >
var internalDNDType = 'text/x-example' ; // 사이트에 맞는 값으로 설정
function dragStartHandler( event) {
if ( event. target instanceof HTMLLIElement) {
// 요소의 data-value="" 속성을 이동하려는 값으로 사용:
event. dataTransfer. setData( internalDNDType, event. target. dataset. value);
event. dataTransfer. effectAllowed = 'move' ; // 이동만 허용
} else {
event. preventDefault(); // 선택 항목이 드래그되지 않도록 방지
}
}
</ script >
드롭을 허용하려면, 드롭 대상은 다음 이벤트들을 수신해야 합니다:
dragenter
이벤트 핸들러는
드롭 대상이 드롭을 수락할 의사가 있는지 없는지를 이벤트를 취소함으로써 보고합니다.
dragover
이벤트 핸들러는
이벤트와 연관된
dropEffect
속성을 설정하여
사용자에게 보여줄 피드백을 지정합니다. 이 이벤트도 취소해야 합니다.
drop
이벤트 핸들러는
드롭을 수락하거나 거부할 수 있는 마지막 기회를 제공합니다.
드롭이 수락되면, 이벤트 핸들러는 대상에서 드롭 작업을 수행해야 합니다.
이 이벤트는 취소해야 하며, 이를 통해
dropEffect
속성의 값이
소스에서 사용될 수 있도록 해야 합니다. 그렇지 않으면 드롭 작업이 거부됩니다.
예를 들어:
< p > 좋아하는 과일을 아래에 드롭하세요:</ p >
< ol ondragenter = "dragEnterHandler(event)" ondragover = "dragOverHandler(event)"
ondrop = "dropHandler(event)" >
</ ol >
< script >
var internalDNDType = 'text/x-example' ; // 사이트에 맞는 값으로 설정
function dragEnterHandler( event) {
var items = event. dataTransfer. items;
for ( var i = 0 ; i < items. length; ++ i) {
var item = items[ i];
if ( item. kind == 'string' && item. type == internalDNDType) {
event. preventDefault();
return ;
}
}
}
function dragOverHandler( event) {
event. dataTransfer. dropEffect = 'move' ;
event. preventDefault();
}
function dropHandler( event) {
var li = document. createElement( 'li' );
var data = event. dataTransfer. getData( internalDNDType);
if ( data == 'fruit-apple' ) {
li. textContent = '사과' ;
} else if ( data == 'fruit-orange' ) {
li. textContent = '오렌지' ;
} else if ( data == 'fruit-pear' ) {
li. textContent = '배' ;
} else {
li. textContent = '알 수 없는 과일' ;
}
event. target. appendChild( li);
}
</ script >
원본 요소(드래그된 요소)를 화면에서 제거하려면
dragend
이벤트를 사용할 수 있습니다.
여기 예제에서는 이 이벤트를 처리하기 위해 원본 마크업을 업데이트해야 합니다:
< p > 당신이 좋아하는 과일은 무엇입니까?</ p >
< ol ondragstart = "dragStartHandler(event)" ondragend = "dragEndHandler(event)" >
...이전과 동일...
</ ol >
< script >
function dragStartHandler( event) {
// ...이전과 동일...
}
function dragEndHandler( event) {
if ( event. dataTransfer. dropEffect == 'move' ) {
// 드래그된 요소 제거
event. target. parentNode. removeChild( event. target);
}
}
</ script >
드래그 앤 드롭 작업의 기초가 되는 데이터, 즉 드래그 데이터 저장소는 다음 정보를 포함합니다:
드래그 데이터 저장소 항목 목록: 드래그된 데이터를 나타내는 항목들의 목록으로, 각각 다음 정보를 포함합니다:
데이터의 종류:
텍스트.
파일 이름이 있는 바이너리 데이터.
데이터의 타입이나 형식을 나타내는 유니코드 문자열로, 일반적으로 MIME 타입에 의해 제공됩니다. MIME 타입이 아닌 일부 값들은 이전 버전과의 호환성을 위해 특별 처리됩니다. 이 API는 MIME 타입 사용을 강제하지 않으며, 다른 값들도 사용할 수 있습니다. 하지만 모든 경우에 API는 이러한 값을 모두 ASCII 소문자로 변환합니다.
텍스트 항목은 각 아이템 타입 문자열당 하나로 제한됩니다.
드래그 데이터 항목 종류에 따라 유니코드 또는 바이너리 문자열, 경우에 따라 파일 이름(역시 유니코드 문자열)으로 제공됩니다.
드래그 데이터 저장소 항목 목록은 항목이 추가된 순서대로 정렬되며, 가장 최근에 추가된 항목이 마지막에 위치합니다.
드래그 중 UI 피드백을 생성하는 데 사용되는 다음 정보:
드래그 데이터 저장소 모드, 다음 중 하나:
dragstart
이벤트에 해당. 새 데이터를 드래그 데이터 저장소에
추가할 수 있습니다.
drop
이벤트에 해당. 드래그된
데이터를 나타내는 항목 목록을 읽을 수 있으며, 데이터를 포함합니다. 새 데이터를 추가할 수 없습니다.
다른 모든 이벤트에 해당. 드래그 데이터 저장소에 있는 항목 목록의 형식과 종류를 열거할 수 있지만, 데이터 자체는 사용할 수 없으며 새 데이터를 추가할 수 없습니다.
드래그 데이터 저장소 허용 효과 상태: 문자열.
드래그 데이터 저장소가 생성될 때, 드래그 데이터 저장소 항목 목록이 비어 있고, 드래그 데이터 저장소
기본 피드백이 없으며, 드래그 데이터 저장소
비트맵과 드래그 데이터 저장소 핫스팟 좌표가 없고, 드래그 데이터 저장소 모드가 보호 모드이며, 드래그
데이터 저장소 허용 효과 상태가 문자열 "uninitialized
"로
초기화되어야 합니다.
DataTransfer
인터페이스모든 최신 엔진에서 지원됩니다.
DataTransfer
객체는 드래그 앤 드롭 작업을
위한 드래그 데이터 저장소를 노출하는 데 사용됩니다.
[Exposed =Window ]
interface DataTransfer {
constructor ();
attribute DOMString dropEffect ;
attribute DOMString effectAllowed ;
[SameObject ] readonly attribute DataTransferItemList items ;
undefined setDragImage (Element image , long x , long y );
/* old interface */
readonly attribute FrozenArray <DOMString > types ;
DOMString getData (DOMString format );
undefined setData (DOMString format , DOMString data );
undefined clearData (optional DOMString format );
[SameObject ] readonly attribute FileList files ;
};
dataTransfer = new DataTransfer()
모든 최신 엔진에서 지원됩니다.
빈 드래그 데이터 저장소를 사용하여 새로운
DataTransfer
객체를
생성합니다.
dataTransfer.dropEffect [ = value ]
모든 최신 엔진에서 지원됩니다.
현재 선택된 작업 유형을 반환합니다. 만약 effectAllowed
속성에서 허용된 작업이 아니라면, 작업이 실패할 것입니다.
선택된 작업을 변경할 수 있습니다.
dataTransfer.effectAllowed [ = value ]
모든 최신 엔진에서 지원됩니다.
허용되는 작업 유형을 반환합니다.
드래그 시작(dragstart
)
이벤트 동안 허용되는 작업 유형을 변경할 수 있습니다.
가능한 값은 "none
",
"copy
",
"copyLink
",
"copyMove
",
"link
",
"linkMove
",
"move
",
"all
",
그리고 "uninitialized
"입니다.
dataTransfer.items
모든 최신 엔진에서 지원됩니다.
드래그 데이터를 포함한 DataTransferItemList
객체를 반환합니다.
dataTransfer.setDragImage(element, x, y)
모든 최신 엔진에서 지원됩니다.
지정된 요소를 사용하여 드래그 피드백을 업데이트하며, 이전에 지정된 피드백을 대체합니다.
dataTransfer.types
모든 최신 엔진에서 지원됩니다.
드래그 시작(dragstart
)
이벤트에서 설정된 형식을 나열하는 고정 배열(frozen
array)을 반환합니다. 또한, 파일이 드래그되고 있다면 형식 중 하나는 "Files
" 문자열이 될 것입니다.
data = dataTransfer.getData(format)
모든 최신 엔진에서 지원됩니다.
지정된 데이터를 반환합니다. 해당 데이터가 없으면 빈 문자열을 반환합니다.
dataTransfer.setData(format, data)
모든 최신 엔진에서 지원됩니다.
지정된 데이터를 추가합니다.
dataTransfer.clearData([ format ])
모든 최신 엔진에서 지원됩니다.
지정된 형식의 데이터를 제거합니다. 인수가 생략된 경우, 모든 데이터를 제거합니다.
dataTransfer.files
모든 최신 엔진에서 지원됩니다.
드래그 중인 파일의 FileList
를
반환합니다.
DataTransfer
객체는 드래그 앤 드롭 이벤트의 일부로 생성된 경우, 해당 이벤트가 발생하는 동안에만 유효합니다.
DataTransfer
객체는 유효한 동안 드래그 데이터 저장소와 연관됩니다.
DataTransfer
객체는 types 배열을 가지며, 이는 FrozenArray<DOMString>
입니다.
이 배열은 초기에는 비어 있으며, DataTransfer
객체의 드래그 데이터 저장소 항목
목록의 내용이 변경되거나, 드래그 데이터 저장소와
더 이상 연관되지 않게 되면, 다음 단계를 실행합니다:
L을 빈 시퀀스로 설정합니다.
만약 DataTransfer
객체가
여전히 드래그 데이터 저장소와 연관되어 있다면:
DataTransfer
객체의 드래그 데이터 저장소 항목 목록에서 kind가 text인 각 항목에 대해, 항목의
유형 문자열로 구성된 항목을
L에 추가합니다.
만약 DataTransfer
객체의 드래그 데이터 저장소 항목 목록에 kind가 File인 항목이 있다면, 문자열
"Files
"로 구성된 항목을 L에 추가합니다. (이 값은 다른 값들과 구분될 수 있습니다. 왜냐하면 소문자가 아니기
때문입니다.)
DataTransfer
객체의 types
배열을 L로부터 고정 배열을 생성한 결과로 설정합니다.
DataTransfer()
생성자는 호출될 때, 다음과 같이 초기화된 새로 생성된 DataTransfer
객체를 반환해야 합니다:
드래그 데이터 저장소의 항목 목록을 빈 목록으로 설정합니다.
드래그 데이터 저장소의 모드를 읽기/쓰기 모드로 설정합니다.
dropEffect
및 effectAllowed
를
"none"으로 설정합니다.
dropEffect
속성은 드래그 앤 드롭 작업 중 사용자가 받는 피드백을 제어합니다. DataTransfer
객체가 생성될 때, dropEffect
속성은 문자열 값으로 설정됩니다. 가져올 때는 현재 값을 반환해야 합니다. 설정할 때, 새 값이 "none
", "copy
", "link
", 또는 "move
" 중 하나라면, 속성의 현재 값을 새 값으로 설정해야 합니다. 다른 값은 무시되어야
합니다.
effectAllowed
속성은 드래그 앤 드롭 처리 모델에서 dropEffect
속성을 dragenter
및
dragover
이벤트 동안
초기화하는 데 사용됩니다. DataTransfer
객체가 생성될 때, effectAllowed
속성은 문자열 값으로 설정됩니다. 가져올 때는 현재 값을 반환해야 합니다. 설정할 때, 드래그 데이터 저장소의 모드가 읽기/쓰기 모드이며 새 값이 "none
", "copy
", "copyLink
", "copyMove
", "link
", "linkMove
", "move
", "all
", 또는 "uninitialized
" 중 하나라면, 속성의 현재 값을 새 값으로
설정해야 합니다. 그렇지 않으면 변경되지 않아야 합니다.
items
속성은
DataTransferItemList
객체를 DataTransfer
객체와 연관하여
반환해야 합니다.
setDragImage(image, x, y)
메서드는 다음
단계를 실행해야 합니다:
DataTransfer
객체가 더
이상 드래그 데이터 저장소와 연관되지 않는 경우,
아무 일도 일어나지 않고 반환합니다.
드래그 데이터 저장소의 모드가 읽기/쓰기 모드가 아닌 경우, 아무 일도 일어나지 않고 반환합니다.
image가 img
요소인 경우, 드래그 데이터 저장소
비트맵을 요소의 이미지(자연 크기에서)로 설정합니다; 그렇지 않으면, 주어진 요소로부터 생성된 이미지로 드래그 데이터 저장소 비트맵을 설정합니다 (이 메커니즘에 대한 정확한
명세는 현재 지정되지 않았습니다).
드래그 데이터 저장소 핫스팟 좌표를 주어진 x, y 좌표로 설정합니다.
types
속성은 이
DataTransfer
객체의 types 배열을
반환해야 합니다.
getData(format)
메서드는 다음 단계를 실행해야 합니다:
DataTransfer
객체가 더
이상 드래그 데이터 저장소와 연관되지 않은
경우, 빈 문자열을 반환합니다.
드래그 데이터 저장소의 모드가 보호 모드인 경우, 빈 문자열을 반환합니다.
첫 번째 인수 format을 ASCII 소문자로 변환합니다.
convert-to-URL을 false로 설정합니다.
format이 "text
"와 같으면 "text/plain
"으로 변경합니다.
format이 "url
"과 같으면 "text/uri-list
"로 변경하고 convert-to-URL을
true로 설정합니다.
드래그 데이터 저장소 항목 목록에 kind가 text이고 유형 문자열이 format과 같은 항목이 없으면, 빈 문자열을 반환합니다.
드래그 데이터 저장소 항목 목록에 kind가 Plain Unicode string이고 유형 문자열이 format과 같은 항목의 데이터를 result로 설정합니다.
convert-to-URL이 true인 경우, result를 text/uri-list
데이터에 적합하게 파싱한 다음, 목록에서
첫 번째 URL로 result를 설정하고, 그렇지 않으면 빈 문자열로 설정합니다. [RFC2483]
result를 반환합니다.
setData(format, data)
메서드는 다음 단계를 실행해야 합니다:
DataTransfer
객체가 더
이상 드래그 데이터 저장소와 연관되지 않은
경우, 아무 일도 일어나지 않고 반환합니다.
드래그 데이터 저장소의 모드가 읽기/쓰기 모드가 아닌 경우, 아무 일도 일어나지 않고 반환합니다.
첫 번째 인수 format을 ASCII 소문자로 변환합니다.
format이 "text
"와 같으면 "text/plain
"으로 변경합니다.
format이 "url
"와 같으면 "text/uri-list
"로 변경합니다.
드래그 데이터 저장소 항목 목록에서 kind가 text이고 유형 문자열이 format과 같은 항목을 제거합니다.
드래그 데이터 저장소 항목 목록에 kind가 text이고 유형 문자열이 format과 같으며, 메서드의 두 번째 인수로 주어진 문자열 데이터로 구성된 항목을 추가합니다.
clearData(format)
메서드는 다음 단계를 실행해야 합니다:
DataTransfer
객체가 더
이상 드래그 데이터 저장소와 연관되지 않은
경우, 아무 일도 일어나지 않고 반환합니다.
드래그 데이터 저장소의 모드가 읽기/쓰기 모드가 아닌 경우, 아무 일도 일어나지 않고 반환합니다.
만약 메서드가 인수 없이 호출된 경우, 드래그 데이터 저장소 항목 목록에서 kind가 Plain Unicode string인 각 항목을 제거하고 반환합니다.
format을 format으로 설정하고, ASCII 소문자로 변환합니다.
format이 "text
"와 같으면 "text/plain
"으로 변경합니다.
format이 "url
"와 같으면 "text/uri-list
"로 변경합니다.
드래그 데이터 저장소 항목 목록에서 kind가 text이고 유형 문자열이 format과 같은 항목을 제거합니다.
clearData()
메서드는 드래그에 포함된 파일 여부에 영향을 미치지 않으므로, types
속성의
목록이 clearData()
호출 후에도 여전히 비어 있지 않을 수 있습니다 (드래그에 파일이 포함된 경우 여전히 "Files
" 문자열을 포함할 것입니다).
files
속성은 실시간 FileList
시퀀스를 반환해야 하며, 이는 다음 단계에서 발견된 파일을 나타내는 File
객체들로 구성됩니다. 또한, 주어진 FileList
객체 및 주어진 기본 파일에 대해 매번 동일한 File
객체를 사용해야 합니다.
빈 목록 L로 시작합니다.
DataTransfer
객체가 더
이상 드래그 데이터 저장소와 연관되지 않으면,
FileList
는
비어 있습니다. 빈 목록 L을 반환합니다.
드래그 데이터 저장소의 모드가 보호 모드인 경우, 빈 목록 L을 반환합니다.
드래그 데이터 저장소 항목 목록에서 kind가 File인 각 항목에 대해, 해당 항목의 데이터(파일, 특히 그 이름과 내용, 그리고 유형)를 목록 L에 추가합니다.
이 단계에서 발견된 파일들이 목록 L에 있는 파일들입니다.
이 API 버전에서는 드래그 중 파일의 유형을 노출하지 않습니다.
DataTransferItemList
인터페이스모든 최신 엔진에서 지원됩니다.
각 DataTransfer
객체는
DataTransferItemList
객체와 연결됩니다.
[Exposed=Window]
interface DataTransferItemList {
readonly attribute unsigned long length;
getter DataTransferItem (unsigned long index);
DataTransferItem? add(DOMString data, DOMString type);
DataTransferItem? add(File data);
undefined remove(unsigned long index);
undefined clear();
};
items.length
모든 현재 엔진에서 지원됩니다.
드래그 데이터 저장소의 아이템 수를 반환합니다.
items[index]
드래그 데이터 저장소의
index번째 항목을 나타내는 DataTransferItem
객체를 반환합니다.
items.remove(index)
모든 현재 엔진에서 지원됩니다.
드래그 데이터 저장소의 index번째 항목을 제거합니다.
items.clear()
모든 현재 엔진에서 지원됩니다.
드래그 데이터 저장소의 모든 항목을 제거합니다.
items.add(data)
모든 현재 엔진에서 지원됩니다.
items.add(data, type)
주어진 데이터를 위한 새 항목을 드래그 데이터 저장소에 추가합니다. 데이터가 일반 텍스트인 경우 type 문자열도 제공되어야 합니다.
DataTransferItemList
객체의 DataTransfer
객체가
드래그 데이터 저장소와 연결된 동안 DataTransferItemList
객체의 모드는 드래그 데이터
저장소 모드와 동일합니다. DataTransferItemList
객체의 DataTransfer
객체가
드래그 데이터 저장소와 연결되지 않은 경우,
DataTransferItemList
객체의 모드는 비활성 모드입니다. 이 섹션에서 참조된 드래그 데이터 저장소는 DataTransferItemList
객체의 DataTransfer
객체와
연결된 드래그 데이터 저장소입니다.
length
속성은 객체가 비활성 모드에 있을 때 0을 반환해야 하며, 그렇지 않은 경우 드래그 데이터 저장소
항목 목록에 있는 항목의 수를 반환해야 합니다.
DataTransferItemList
객체가 비활성 모드에 있지 않을 때, 지원되는 속성 인덱스는 인덱스입니다. 이는 드래그 데이터
저장소 항목 목록의 인덱스입니다.
인덱싱된 속성의 값을 결정하기 위해 DataTransferItemList
객체의 i 값을 드래그 데이터
저장소의 i번째 항목을 나타내는 DataTransferItem
객체로 반환해야 합니다. 동일한 항목이 이 DataTransferItemList
객체에서 여러 번 얻어질 때마다 동일한 객체가 반환되어야 합니다. DataTransferItem
객체는 처음 생성될 때 DataTransfer
객체와 연결되어야
합니다.
add()
메서드는 다음 단계를 수행해야 합니다:
DataTransferItemList
객체가 읽기/쓰기 모드에 있지
않다면 null을 반환합니다.
다음 목록에서 적절한 단계 집합으로 이동합니다:
이미 드래그 데이터 저장소 항목 목록에 종류가 텍스트이고 유형 문자열이 메서드의 두 번째
인수의 값과 동일한 항목이 있는 경우, "NotSupportedError
" DOMException
을
throw 합니다.
그렇지 않은 경우, 드래그 데이터 저장소 항목 목록에 종류가 텍스트이고, 유형 문자열이 메서드의 두 번째 인수의 값과 동일하며, 메서드의 첫 번째 인수로 제공된 문자열 데이터를 가지는 항목을 추가합니다.
File
인
경우드래그 데이터 저장소 항목 목록에 종류가 File이고, 유형 문자열이 type
으로
변환된 File
의
데이터와 동일한 항목을 추가합니다.
새로 추가된 항목에 해당하는 인덱싱된 속성의 값을 결정하고, 그 값을 반환합니다(새로 생성된 DataTransferItem 객체).
remove(index)
메서드는 다음 단계를 수행해야 합니다:
DataTransferItemList
객체가 읽기/쓰기 모드에
있지 않다면 "InvalidStateError
" DOMException을 throw 합니다.
드래그 데이터 저장소에 index번째 항목이 포함되어 있지 않다면, 아무런 작업도 하지 않습니다.
드래그 데이터 저장소에서 index번째 항목을 제거합니다.
clear()
메서드는 DataTransferItemList
객체가 읽기/쓰기 모드에 있을 경우,
드래그 데이터 저장소의 모든 항목을 제거해야
합니다. 그렇지 않다면, 아무런 작업도 하지 않습니다.
DataTransferItem
인터페이스모든 최신 엔진에서 지원됨.
각 DataTransferItem
객체는 DataTransfer
객체와 연결됩니다.
[Exposed =Window ]
interface DataTransferItem {
readonly attribute DOMString kind ;
readonly attribute DOMString type ;
undefined getAsString (FunctionStringCallback ? _callback );
File ? getAsFile ();
};
callback FunctionStringCallback = undefined (DOMString data );
item.kind
모든 최신 엔진에서 지원됨.
드래그 데이터 항목 종류, 하나: "string", "file"을 반환합니다.
item.type
모든 최신 엔진에서 지원됨.
드래그 데이터 항목 유형 문자열을 반환합니다.
item.getAsString(callback)
모든 최신 엔진에서 지원됨.
드래그 데이터 항목 종류가 텍스트인 경우, 콜백을 인수로 전달된 문자열 데이터로 호출합니다.
file = item.getAsFile()
모든 최신 엔진에서 지원됨.
드래그 데이터 항목 종류가 파일인 경우, 파일 객체를 반환합니다.
DataTransferItem
객체의 DataTransfer
객체가 드래그 데이터 저장소와 연결되어 있으며 해당 드래그 데이터 저장소의 드래그 데이터 저장소 항목
목록에 해당 DataTransferItem
객체가 나타내는 항목이 여전히 포함되어 있는 동안, DataTransferItem
객체의 모드는 드래그 데이터 저장소
모드와 동일합니다. DataTransferItem
객체의 DataTransfer
객체가 드래그 데이터 저장소와 연결되어 있지 않거나,
DataTransferItem
객체가 나타내는 항목이 관련 드래그 데이터 저장소 항목 목록에서 제거된 경우, DataTransferItem
객체의 모드는 비활성 모드가 됩니다. 이 섹션에서 참조된 드래그 데이터 저장소는 DataTransferItem
객체의 DataTransfer
객체와 연결된
드래그 데이터 저장소입니다.
kind
속성은 DataTransferItem
객체가 비활성 모드에 있는 경우 빈 문자열을 반환해야 합니다. 그렇지 않으면, 첫 번째 열에 항목이 나타내는 드래그 데이터 항목 종류가 포함된 행의 두 번째 열에 있는
문자열을 반환해야 합니다:
종류 | 문자열 |
---|---|
텍스트 | "string "
|
파일 | "file "
|
type
속성은 객체가 비활성 모드에 있을 경우 빈 문자열을 반환해야 하며, 그렇지 않은 경우 DataTransferItem
객체가 나타내는 항목의 드래그 데이터 항목 유형 문자열을 반환해야 합니다.
getAsString(callback)
메서드는 다음 단계를 실행해야 합니다:
callback이 null인 경우, 반환합니다.
DataTransferItem
객체가 읽기/쓰기 모드 또는 읽기 전용 모드에 있지 않으면
반환합니다. 콜백은 절대 호출되지 않습니다.
드래그 데이터 항목 종류가 텍스트가 아닌 경우 반환합니다. 콜백은 절대 호출되지 않습니다.
그렇지 않은 경우, 항목의 실제 데이터를 전달 인수로 콜백을 호출하도록 작업을 큐에 추가합니다. 이 데이터는 DataTransferItem
객체가 나타내는 항목의 실제 데이터입니다.
getAsFile()
메서드는 다음 단계를 실행해야 합니다:
DataTransferItem
객체가 읽기/쓰기 모드 또는 읽기 전용 모드에 있지 않으면
null을 반환합니다.
드래그 데이터 항목 종류가 파일이 아닌 경우 null을 반환합니다.
새로운 파일
객체를 반환합니다. 이 객체는 DataTransferItem
객체가 나타내는 항목의 실제 데이터를 나타냅니다.
DragEvent
인터페이스모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
드래그 앤 드롭 처리 모델에는 여러 이벤트가 포함됩니다. 이들 모두는 DragEvent
인터페이스를 사용합니다.
[Exposed =Window ]
interface DragEvent : MouseEvent {
constructor (DOMString type , optional DragEventInit eventInitDict = {});
readonly attribute DataTransfer ? dataTransfer ;
};
dictionary DragEventInit : MouseEventInit {
DataTransfer ? dataTransfer = null ;
};
event.dataTransfer
모든 최신 엔진에서 지원됨.
이벤트의 DataTransfer
객체를
반환합니다.
다른 이벤트 인터페이스와의 일관성을 위해 DragEvent
인터페이스에는 생성자가 있지만, 그다지 유용하지
않습니다. 특히, 스크립트에서 유용한 DataTransfer
객체를 생성할 방법이 없습니다.
DataTransfer
객체는 드래그 앤 드롭 중
브라우저에서 조정하는 처리 및 보안 모델을 갖고 있기 때문입니다.
dataTransfer
속성은 초기화된 값을 반환해야 하며, 이벤트에 대한 컨텍스트 정보를 나타냅니다.
사용자가 특정 related target과 함께, 선택적으로 특정 드래그 데이터 저장소를 사용하여 e라는 이름의 드래그 앤 드롭 이벤트를 요소에서 발생시켜야 할 때, 사용자 에이전트는 다음 단계를 수행해야 합니다:
특정 related target이 제공되지 않은 경우, related target을 null로 설정합니다.
e가 dragstart
인
경우, 드래그 데이터 저장소 모드를 읽기/쓰기 모드로 설정하고,
dataDragStoreWasChanged를 true로 설정합니다.
e가 drop
인
경우, 드래그 데이터 저장소 모드를
읽기 전용 모드로 설정합니다.
지정된 드래그 데이터 저장소와 연결된 새 DataTransfer
객체를 생성합니다.
effectAllowed
속성을 드래그 데이터 저장소의 허용된 드래그 데이터 저장소 효과 상태로 설정합니다.
e가 dragstart
,
drag
, 또는 dragleave
인
경우, dropEffect
속성을 "none
"로
설정합니다. e가 drop
또는 dragend
인 경우, 현재의
드래그 작업에 해당하는 값으로
설정합니다. e가 dragenter
또는
dragover
인 경우,
effectAllowed
속성의 값과 드래그 앤 드롭 소스에 기반한 값을 사용하여 설정합니다.
effectAllowed
|
dropEffect
|
---|---|
"none "
|
"none "
|
"copy "
|
"copy "
|
"copyLink "
|
"copy ",
또는, 적절한 경우, "link "
|
"copyMove "
|
"copy ",
또는, 적절한 경우, "move "
|
"all "
|
"copy ",
또는, 적절한 경우, "link "
또는 "move "
|
"link "
|
"link "
|
"linkMove "
|
"link ",
또는, 적절한 경우, "move "
|
"move "
|
"move "
|
"uninitialized "
텍스트 컨트롤에서 선택한 항목을 드래그하는 경우 |
"move ",
또는, 적절한 경우, "copy "
또는 "link "
|
"uninitialized "
선택한 항목을 드래그하는 경우 |
"copy ",
또는, 적절한 경우, "link "
또는 "move "
|
"uninitialized "
a 요소와 href
속성을 포함하여 드래그하는 경우
|
"link ",
또는, 적절한 경우, "copy "
또는 "move "
|
기타 모든 경우 | "copy ",
또는, 적절한 경우, "link "
또는 "move "
|
위 표에서 적절한 경우로 제공된 경우, 사용자 에이전트는 플랫폼 관행이 사용자가 이러한 대체 효과를 요청한 경우 대체 값을 사용할 수 있습니다.
예를 들어, Windows 플랫폼 관행에서는 "alt" 키를 누른 상태에서 드래그하면 데이터를 이동하거나 복사하는 대신 연결하려는 의도를 나타냅니다. 따라서 Windows 시스템에서 위의 표에 따라 "link"가 옵션인 경우 "alt" 키가 눌린 상태에서 사용자 에이전트는 "copy" 또는 "move" 대신 "link"를 선택할 수 있습니다.
event를 이벤트 생성의 결과로 설정합니다.
event의 type
속성을 e로 초기화하고, bubbles
속성을 true로, view
속성을 window로, relatedTarget
속성을 related target으로, dataTransfer
속성을 dataTransfer로 초기화합니다.
e가 dragleave
또는 dragend
가
아닌 경우, event의 cancelable
속성을 true로 초기화합니다.
event의 마우스 및 키 속성을 초기화하여 사용자가 상호작용할 때의 입력 장치 상태에 맞게 초기화합니다.
관련 포인팅 장치가 없는 경우, event의 screenX
, screenY
, clientX
,
clientY
, 및 button
속성을 0으로 초기화합니다.
드래그 데이터 저장소 허용된 효과 상태를 현재
dataTransfer의 effectAllowed
속성의 값으로 설정합니다. (이 값은 e가 dragstart
인
경우에만 변경될 수 있습니다.)
dataDragStoreWasChanged가 true인 경우, 드래그 데이터 저장소 모드를 보호 모드로 되돌립니다.
dataTransfer와 드래그 데이터 저장소 간의 연관성을 끊습니다.
사용자가 드래그 작업을 시작하려고 할 때, 사용자 에이전트는 다음 단계를 실행해야 합니다. 드래그가 다른 문서나 애플리케이션에서 시작되었고 사용자 에이전트가 드래그가 사용자 에이전트의 관리 범위 내의 문서와 교차할 때까지 드래그가 발생하고 있다는 사실을 인식하지 못한 경우에도 사용자 에이전트는 이러한 단계를 실행해야 합니다.
드래그 중인 항목을 다음과 같이 결정합니다:
드래그 작업이 선택 영역에서 호출된 경우, 드래그 중인 항목은 선택 영역입니다.
그렇지 않으면, 드래그 작업이 Document
에서
호출된 경우, 드래그 중인 항목은 사용자가 드래그하려고 했던 노드에서 시작하여 상위로 올라가는 조상 체인에서 draggable
IDL 속성이
true로 설정된 첫 번째 요소입니다. 그러한 요소가 없으면, 아무것도 드래그되지 않습니다. 드래그 앤 드롭 작업은 시작되지 않습니다.
그렇지 않으면, 드래그 작업이 사용자 에이전트의 관리 범위 밖에서 호출되었습니다. 드래그 중인 항목은 드래그가 시작된 문서나 애플리케이션에서 정의됩니다.
img
요소와 a
요소는 href
속성이 있을 때 draggable
속성이
기본적으로 true로 설정됩니다.
드래그 데이터 저장소를 생성합니다. 이 섹션의 단계에서 이후에 발생하는 모든 DND 이벤트는 이 드래그 데이터 저장소를 사용해야 합니다.
어떤 DOM 노드가 소스 노드인지 설정합니다:
드래그 중인 항목이 선택 영역인 경우, 소스 노드는 사용자가
드래그를 시작한 Text
노드입니다 (일반적으로 사용자가 처음 클릭한 Text
노드). 사용자가 특정 노드를 지정하지 않은 경우, 예를 들어 사용자가 "선택 영역"의 드래그를 시작하라고 사용자 에이전트에게 지시한 경우, 소스 노드는 선택 영역의 일부를 포함하는 첫 번째 Text
노드입니다.
그렇지 않으면, 드래그 중인 항목이 요소인 경우, 소스 노드는 드래그 중인 요소입니다.
그렇지 않으면, 소스 노드는 다른 문서나 애플리케이션의 일부입니다. 이 경우 사양에서 소스 노드에서 이벤트를 디스패치하도록 요구하는 경우, 사용자 에이전트는 대신 해당 상황과 관련된 플랫폼별 규칙을 따라야 합니다.
드래그 앤 드롭 작업 중에 소스 노드에서 여러 이벤트가 발생합니다.
드래그된 노드 목록을 다음과 같이 결정합니다:
드래그 중인 항목이 선택 영역인 경우, 드래그된 노드 목록에는 트리 순서에 따라 선택 영역에 부분적으로 또는 완전히 포함된 모든 노드(및 그 모든 조상)가 포함됩니다.
그렇지 않으면, 드래그된 노드 목록에는 소스 노드만 포함됩니다.
드래그 중인 항목이 선택 영역인 경우, 드래그 데이터 저장소 항목 목록에 다음 속성으로 항목을 추가합니다:
text/plain
"
그렇지 않으면, 파일이 드래그 중인 경우, 드래그 데이터 저장소 항목 목록에 파일당 하나씩 항목을 추가하고, 다음 속성으로 설정합니다:
application/octet-stream
"
현재 파일 드래그는 파일 시스템 관리자 애플리케이션과 같이 외부에서만 발생할 수 있습니다.
드래그가 애플리케이션 외부에서 시작된 경우, 사용자 에이전트는 플랫폼 규칙을 준수하여 적절하게 드래그 데이터 저장소 항목 목록에 항목을 추가해야 합니다. 그러나 플랫폼 규칙이 드래그된 데이터를 레이블링하는 데 MIME 유형을 사용하지 않는 경우, 사용자 에이전트는 해당 유형을 MIME 유형으로 매핑하기 위해 최선을 다해야 하며, 어떤 경우에도 드래그 데이터 항목 유형 문자열은 모두 ASCII 소문자로 변환되어야 합니다.
사용자 에이전트는 선택 영역 또는 드래그된 요소를 HTML 등의 다른 형식으로 나타내는 하나 이상의 항목을 추가할 수도 있습니다.
드래그된 노드 목록이 비어 있지 않다면, 해당 노드에서 마이크로데이터를 추출하여 JSON 형식으로 변환하고, 드래그 데이터 저장소 항목 목록에 다음 속성으로 항목을 추가합니다:
application/microdata+json
다음 하위 단계를 실행합니다:
urls을 « »로 설정합니다.
드래그된 노드 목록의 각 node에 대해 다음을 실행합니다:
a
요소이며 href
속성이 있는 경우
href
속성 값을 주어진 URL 인코딩, 파싱 및
직렬화의 결과를 urls에 추가합니다. 요소의 노드
문서를 기준으로 합니다.img
요소이며 src
속성이
있는 경우
src
속성
값을 주어진 URL 인코딩, 파싱 및
직렬화의 결과를 urls에 추가합니다. 요소의 노드
문서를 기준으로 합니다.urls이 여전히 비어 있으면 반환합니다.
url string을 urls에 있는 문자열을 추가한 결과로 설정하고, 추가된 순서대로 U+000D 캐리지 리턴 U+000A 줄 바꿈 문자 쌍 (CRLF)로 구분합니다.
드래그 데이터 저장소 항목 목록에 다음 속성으로 항목을 추가합니다:
text/uri-list
사용자 에이전트에 적절한 드래그 데이터 저장소 기본 피드백을 업데이트합니다 (사용자가 선택 영역을 드래그하는 경우, 이 선택 영역이 피드백의 기준이 될 가능성이 높습니다. 사용자가 요소를 드래그하는 경우, 해당 요소의 렌더링이 사용됩니다. 드래그가 사용자 에이전트 외부에서 시작된 경우, 드래그 피드백을 결정하는 플랫폼 규칙을 사용해야 합니다).
DND 이벤트를 발생시킵니다 명명된
dragstart
를
소스 노드에서 발생시킵니다.
이벤트가 취소된 경우, 드래그 앤 드롭 작업이 발생하지 않습니다; 반환합니다.
이벤트 리스너가 등록되지 않은 이벤트는 거의 정의상 취소되지 않기 때문에, 작성자가 이를 명시적으로 방지하지 않는 한 사용자는 항상 드래그 앤 드롭을 사용할 수 있습니다.
포인터 이벤트를 발생시킵니다 소스 노드에서
명명된 pointercancel
를
발생시키고, 필요한 경우 Pointer Events에서 요구하는 후속 이벤트를 발생시킵니다. [POINTEREVENTS]
드래그 앤 드롭 작업을 시작합니다 플랫폼 규칙에 따라 일관된 방식으로 시작하고, 아래에 설명된 대로 수행합니다.
드래그 앤 드롭 피드백은 다음과 같은 소스 중 사용할 수 있는 첫 번째 소스에서 생성해야 합니다:
사용자 에이전트가 드래그 앤 드롭 작업을 시작해야 하는 순간부터 드래그 앤 드롭 작업이 끝날 때까지 장치 입력 이벤트(예: 마우스 및 키보드 이벤트)는 억제되어야 합니다.
드래그 작업 중에 사용자가 드롭 대상으로 직접 선택한 요소를 즉시 사용자 선택이라고 합니다. (요소만 사용자가 선택할 수 있으며, 다른 노드는 드롭 대상이 될 수 없습니다.) 그러나 즉시 사용자 선택이 반드시 현재 대상 요소인 것은 아닙니다. 현재 대상 요소는 드래그 앤 드롭 작업의 드롭 부분에 현재 선택된 요소입니다.
즉시 사용자 선택은 사용자가 다른 요소를 선택할 때마다(포인팅 장치로 가리키거나 다른 방법으로 선택함) 변경됩니다. 현재 대상 요소는 즉시 사용자 선택이 변경될 때, 아래 설명된 대로 문서 내 이벤트 리스너의 결과에 따라 변경됩니다.
현재 대상 요소와 즉시 사용자 선택은 모두 null일 수 있으며, 이는 선택된 대상 요소가 없음을 의미합니다. 이들은 또한 다른 (DOM 기반) 문서 또는 전혀 다른 (웹이 아닌) 프로그램의 요소일 수 있습니다. (예를 들어, 사용자가 텍스트를 워드 프로세서로 드래그할 수 있습니다.) 현재 대상 요소는 처음에 null입니다.
또한 현재 드래그 작업이라는 것도 있으며, 이는 "none
", "copy
", "link
", "move
"의 값을 가질 수 있습니다. 처음에는 "none
"
값을 가지며, 아래 단계에서 설명된 대로 사용자 에이전트에 의해 업데이트됩니다.
사용자 에이전트는 드래그 작업이 시작된 즉시 및 이후로 드래그 작업이 진행되는 동안 매 350ms(±200ms)마다 작업을 큐에 추가하여 다음 단계를 순서대로 수행해야 합니다.
사용자 에이전트가 이전 반복의 단계를 여전히 수행 중인 상태에서 다음 반복이 예정된 경우, 이 반복은 건너뜁니다(즉, 드래그 앤 드롭 작업의 "누락된 프레임"을 건너뜁니다).
DND 이벤트를 발생시킵니다 명명된
drag
를 소스 노드에서 발생시킵니다. 이 이벤트가 취소된
경우, 사용자 에이전트는 현재 드래그 작업을 "none
"(드래그
작업 없음)으로 설정해야 합니다.
drag
이벤트가
취소되지 않았고 사용자가 드래그 앤 드롭 작업을 종료하지 않은 경우, 드래그 앤 드롭 작업의 상태를 다음과 같이 확인합니다.
사용자가 마지막 반복(또는 첫 번째 반복) 동안과 다른 즉시 사용자 선택을 가리키고 있으며, 이 즉시 사용자 선택이 현재 대상 요소와 같지 않은 경우, 현재 대상 요소를 다음과 같이 업데이트합니다.
현재 대상 요소도 null로 설정합니다.
DND 이벤트를
발생시킵니다 명명된 dragenter
를
즉시 사용자 선택에서
발생시킵니다.
이벤트가 취소된 경우, 현재 대상 요소를 즉시 사용자 선택으로 설정합니다.
그렇지 않은 경우, 다음 목록에서 적절한 단계를 실행합니다.
textarea
또는 input
요소의 type
속성이 Text
상태에 있는 경우) 또는 편집 호스트 또는 편집 가능한 요소이며, 드래그 데이터 저장소 항목
목록에 "text/plain
"의
드래그 데이터 항목 종류를
가진 항목이 있는 경우
현재 대상 요소를 변경하지 않습니다.
DND 이벤트를 발생시킵니다 명명된
dragenter
를
본문 요소에서 발생시킵니다.
본문 요소가 없는 경우, document
객체에서 발생시킵니다. 그런 다음, 현재 대상 요소를 본문 요소로 설정합니다.
이전 단계에서 현재 대상 요소가 변경된 경우, 그리고 이전 대상
요소가 null이 아니거나 비DOM 문서의 일부가 아닌 경우, DND 이벤트를 발생시킵니다 명명된 dragleave
를
이전 대상 요소에서 발생시킵니다. 이때 새로운 현재 대상 요소를 특정 관련
대상으로 설정합니다.
현재 대상
요소가 DOM 요소인 경우, DND 이벤트를 발생시킵니다 명명된 dragover
를
이 현재
대상 요소에서 발생시킵니다.
이벤트 dragover
가
취소되지 않은 경우, 다음 목록에서 적절한 단계를 실행합니다.
textarea
또는 input
요소의 type
속성이 Text
상태에 있는 경우) 또는 편집
호스트 또는 편집 가능한 요소이며, 드래그 데이터 저장소 항목 목록에
"text/plain
"의
드래그 데이터 항목 종류를 가진 항목이 있는
경우
현재 드래그 작업을 "copy
"
또는 "move
"
중 적절한 것으로 설정합니다. 이는 플랫폼 관행에 따라 달라질 수 있습니다.
그렇지 않은 경우(즉, dragover
이벤트가 취소된 경우), 현재 드래그 작업을 이벤트 디스패치가 완료된 후의 effectAllowed
및 dropEffect
속성의 값을 기반으로 설정합니다.
effectAllowed
|
dropEffect
|
드래그 작업 |
---|---|---|
"uninitialized ",
"copy ",
"copyLink ",
"copyMove ",
또는 "all "
|
"copy "
|
"copy "
|
"uninitialized ",
"link ",
"copyLink ",
"linkMove ",
또는 "all "
|
"link "
|
"link "
|
"uninitialized ",
"move ",
"copyMove ",
"linkMove ",
또는 "all "
|
"move "
|
"move "
|
다른 모든 경우 | "none "
|
현재 대상 요소가 DOM 요소가 아닌 경우, 플랫폼별 메커니즘을 사용하여 수행 중인 드래그 작업이 무엇인지(없음, 복사, 링크 또는 이동)를 결정하고, 현재 드래그 작업을 적절히 설정합니다.
현재 드래그 작업에 맞게 드래그 피드백(예: 마우스 커서)을 업데이트합니다.
드래그 작업 | 피드백 |
---|---|
"copy "
|
여기에 드롭하면 데이터가 복사됩니다. |
"link "
|
여기에 드롭하면 데이터가 링크됩니다. |
"move "
|
여기에 드롭하면 데이터가 이동됩니다. |
"none "
|
허용되지 않은 작업입니다. 여기에 드롭하면 드래그 앤 드롭 작업이 취소됩니다. |
그렇지 않은 경우, 사용자가 드래그 앤 드롭 작업을 종료한 경우(예: 마우스 기반 드래그 앤 드롭 인터페이스에서 마우스 버튼을 놓는 경우) 또는 drag
이벤트가 취소된 경우, 이는 마지막 반복이 됩니다. 다음 단계를 실행한 후 드래그 앤 드롭 작업을 중지합니다.
현재 드래그 작업이 "none
"인
경우(드래그 작업 없음), 또는 사용자가 드래그 앤 드롭 작업을 취소하여 종료한 경우(예: Escape 키를 눌러서),
또는 현재 대상 요소가 null인 경우,
드래그 작업이 실패한 것입니다. 다음 하위 단계를 실행합니다.
dropped를 false로 설정합니다.
현재 대상 요소가
DOM 요소인 경우, DND 이벤트를 발생시킵니다 명명된
dragleave
를
발생시킵니다. 그렇지 않은 경우, null이 아닌 경우, 플랫폼별 관행에 따라 드래그 취소를 수행합니다.
그렇지 않은 경우, 드래그 작업이 성공할 수 있습니다. 다음 하위 단계를 실행합니다.
dropped를 true로 설정합니다.
현재 대상 요소가
DOM 요소인 경우, DND 이벤트를 발생시킵니다 명명된
drop
를
발생시킵니다. 그렇지 않은 경우, 드롭을 나타내는 플랫폼별 관행을 따릅니다.
이벤트가 취소된 경우, 현재 드래그 작업을 dropEffect 속성의 값으로 설정합니다. 이 값은 이벤트 디스패치가 완료된 후의 DragEvent 객체의 dataTransfer 객체의 속성입니다.
그렇지 않은 경우, 이벤트가 취소되지 않은 경우, 이벤트의 기본 작업을 수행합니다. 이는 정확한 대상에 따라 달라집니다.
textarea
,
또는 input
요소의 type
속성이 Text
상태에 있는 경우) 또는 편집 호스트 또는 편집 가능한 요소이며, 드래그 데이터
저장소 항목 목록에 "text/plain
"의
드래그 데이터 항목
종류를 가진 항목이 있는 경우
해당 텍스트 컨트롤 또는 편집 호스트 또는 편집 가능한 요소에 "드래그 데이터 저장소 항목 목록"에 포함된 첫 번째 항목의 실제 데이터를 삽입합니다.
DND 이벤트를
발생시킵니다 명명된 dragend
를
소스 노드에서
발생시킵니다.
다음 목록에서 적절한 단계를 실행하여 dragend
이벤트의 기본 작업을 수행합니다.
move
"이고,
드래그 앤 드롭 작업의 소스가 편집 호스트 내에 완전히 포함된 DOM의 선택
영역인 경우선택 영역 삭제를 수행합니다.
move
"이고,
드래그 앤 드롭 작업의 소스가 텍스트 컨트롤 내의 선택 영역인 경우사용자 에이전트는 해당 텍스트 컨트롤에서 드래그된 선택 영역을 삭제해야 합니다.
none
"인
경우드래그가 취소되었습니다. 플랫폼 관행에 따라 이것이 사용자에게 나타내어져야 하는 경우(예: 드래그된 선택 영역이 드래그 앤 드롭 작업의 소스로 돌아가는 애니메이션), 그렇게 수행합니다.
이벤트에는 기본 작업이 없습니다.
이 단계의 목적을 위해, 텍스트 컨트롤은 textarea
요소 또는 input
요소로서, type
속성이 다음 상태 중 하나에 있는 요소를 의미합니다: Text,
Search,
Tel, URL, Email, Password, 또는
Number 상태입니다.
사용자 에이전트는 스크롤 가능한 영역의 가장자리에 가까운 드래그에 대해 어떻게 반응할지 고려하는 것이 좋습니다. 예를 들어, 사용자가 긴 페이지의 뷰포트 하단으로 링크를 드래그하는 경우, 사용자가 페이지 하단에 링크를 드롭할 수 있도록 페이지를 스크롤하는 것이 적절할 수 있습니다.
이 모델은 관련된 노드가 어느 document
객체에서 왔는지와 무관하게 작동합니다. 이벤트는 위에서 설명한 대로 발생하며, 처리 모델의 나머지 부분은 드래그 앤 드롭 작업에 몇 개의 문서가 관련되어 있는지와 무관하게 위에서 설명한 대로
실행됩니다.
이 섹션은 규범적이지 않습니다.
다음 이벤트들은 드래그 앤 드롭 모델에 관련됩니다.
이벤트 이름 | 타겟 | 취소 가능? | 드래그 데이터 저장소 모드 | dropEffect
| 기본 동작 |
---|---|---|---|---|---|
dragstart
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 소스 노드 | ✓ 취소 가능 | 읽기/쓰기 모드 | "없음 "
| 드래그 앤 드롭 작업 시작 |
drag
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 소스 노드 | ✓ 취소 가능 | 보호 모드 | "없음 "
| 드래그 앤 드롭 작업 계속 |
dragenter
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 즉각적인 사용자 선택 또는 바디 요소 | ✓ 취소 가능 | 보호 모드 | effectAllowed 값에 따라
| 즉각적인 사용자 선택을 잠재적인 타겟 요소로 거부 |
dragleave
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 이전 타겟 요소 | — | 보호 모드 | "없음 "
| 없음 |
dragover
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 현재 타겟 요소 | ✓ 취소 가능 | 보호 모드 | effectAllowed 값에 따라
| 현재 드래그 작업을 "없음"으로 재설정 |
drop
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 현재 타겟 요소 | ✓ 취소 가능 | 읽기 전용 모드 | 현재 드래그 작업 | 다양함 |
dragend
모든 현재 엔진에서 지원됩니다.
Firefox9+
Safari3.1+
Chrome1+
Opera12+ Edge79+ Edge (Legacy)12+ Internet Explorer9+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android12+ | 소스 노드 | — | 보호 모드 | 현재 드래그 작업 | 다양함 |
이 모든 이벤트는 버블링되고, 구성되며, effectAllowed
속성은 항상 dragstart
이벤트 후에 가졌던 값을
유지하며, uninitialized
기본값을 dragstart
이벤트에서 사용합니다.
draggable
속성모든 현재 엔진에서 지원됩니다.
모든 HTML 요소에는 draggable
콘텐츠 속성을 설정할 수 있습니다. draggable
속성은 다음 키워드와 상태를 가진
열거형 속성입니다:
키워드 | 상태 | 간략한 설명 |
---|---|---|
true
| true | 요소는 드래그할 수 있습니다. |
false
| false | 요소는 드래그할 수 없습니다. |
속성의 값이 없는 경우 기본값과 잘못된 값 기본값은 모두 auto 상태입니다. auto 상태는 사용자 에이전트의 기본 동작을 사용합니다.
draggable
속성이 있는 요소는 비시각적
상호작용을 위한 이름을 지정하는 title
속성도 있어야 합니다.
element.draggable [ = value ]
요소가 드래그 가능하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
기본값을 재정의하고 draggable
콘텐츠 속성을 설정하도록 설정할 수 있습니다.
draggable
IDL 속성은 콘텐츠
속성의 값에 따라 달라지며, 요소가 드래그 가능 여부를 제어합니다. 일반적으로 텍스트 선택만 드래그할 수 있지만, draggable
IDL 속성이 true로 설정된 요소도
드래그할 수 있습니다.
요소의 draggable
콘텐츠 속성이 true 상태인 경우, draggable
IDL 속성은 true를 반환해야
합니다.
그렇지 않은 경우, 요소의 draggable
콘텐츠
속성이 false 상태인 경우,
draggable
IDL 속성은 false를 반환해야
합니다.
그 외의 경우, 요소의 draggable
콘텐츠
속성은 auto 상태를 가집니다.
요소가 img
요소이거나, 이미지를 대표하는 object
요소 또는 a
요소로서 href
콘텐츠 속성을 가진 경우,
draggable
IDL 속성은 true를 반환해야
하며, 그렇지 않은 경우 draggable
IDL
속성은 false를 반환해야 합니다.
draggable
IDL 속성이 false 값으로
설정된 경우, draggable
콘텐츠 속성은
문자 그대로 "false
" 값으로 설정되어야 합니다. draggable
IDL 속성이 true 값으로 설정된
경우, draggable
콘텐츠 속성은 문자
그대로 "true
" 값으로 설정되어야 합니다.
사용자 에이전트는 DataTransfer
객체에
추가된 데이터를 dragstart
이벤트 동안 스크립트에 제공해서는 안 됩니다. 그렇지 않으면 사용자가 한 문서에서 두 번째 문서로 민감한 정보를 드래그하는 동안, 적대적인 세 번째 문서를 지나가는 경우, 적대적인 문서가 데이터를
가로챌 수 있기 때문입니다.
같은 이유로, 사용자 에이전트는 사용자가 드래그 작업을 명시적으로 종료한 경우에만 드롭을 성공한 것으로 간주해야 합니다. 스크립트가 드래그 작업을 종료하면 실패한 것으로 간주되어야 하며, drop
이벤트가
발생해서는 안 됩니다.
사용자 에이전트는 스크립트 작업에 대한 응답으로 드래그 앤 드롭 작업을 시작하지 않도록 주의해야 합니다. 예를 들어, 마우스와 윈도우 환경에서 스크립트가 사용자가 마우스 버튼을 누르고 있는 동안 윈도우를 이동시키면, UA는 이를 드래그 시작으로 간주하지 않습니다. 이는 그렇지 않을 경우 UA가 사용자의 동의 없이 민감한 소스에서 데이터를 드래그하여 적대적인 문서로 드롭할 수 있기 때문에 중요합니다.
사용자 에이전트는 드래그와 드롭 시 잠재적으로 활성화될 수 있는(스크립트가 포함된) 콘텐츠(예: HTML)를 알려진 안전한 기능의 허용 목록을 사용하여 필터링해야 합니다. 마찬가지로, 상대적 URL은 예상치 못한 방식으로 참조가 변경되지 않도록 절대적 URL로 변환해야 합니다. 이 명세는 이 작업이 수행되는 방식을 명시하지 않습니다.
적대적인 페이지가 일부 콘텐츠를 제공하고 사용자가 그 콘텐츠를 선택하여 드래그 앤 드롭(또는 복사 및 붙여넣기)하도록 유도하는 경우를 고려해 보십시오. 브라우저가 안전한 콘텐츠만 드래그되도록 보장하지 않으면, 선택된 항목에 포함된 스크립트와 이벤트 핸들러와 같은 잠재적으로 안전하지 않은 콘텐츠가 피해자 사이트에 드롭(또는 붙여넣기)된 후 피해자 사이트의 권한을 얻게 됩니다. 이는 크로스 사이트 스크립팅 공격을 가능하게 합니다.
popover
속성모든 최신 엔진에서 지원됩니다.
모든 HTML 요소는
popover
콘텐츠 속성을 설정할 수 있습니다. 지정되면 요소는 표시될 때까지 렌더링되지 않으며, 표시되는 순간 다른 페이지 콘텐츠 위에 렌더링됩니다.
popover
속성은 글로벌 속성이며, 작가들이 팝오버 기능을 가장 적합한 의미론적 요소에 적용할 수 있도록 유연성을 제공합니다.
다음은 웹사이트의 글로벌 내비게이션 내에 팝오버 하위 내비게이션 링크 목록을 만드는 방법을 보여줍니다.
< ul >
< li >
< a href = ... > All Products</ a >
< button popovertarget = sub-nav >
< img src = down-arrow.png alt = "Product pages" >
</ button >
< ul popover id = sub-nav >
< li >< a href = ... > Shirts</ a >
< li >< a href = ... > Shoes</ a >
< li >< a href = ... > Hats etc.</ a >
</ ul >
</ li >
<!-- 여기에 다른 목록 항목과 링크 추가 -->
</ ul >
popover
속성을
접근성 의미론이 없는 요소에 사용할 때, 예를 들어 div
요소에서는
적절한 ARIA 속성을 사용하여 팝오버가 접근 가능하도록 해야 합니다.
다음은 사용자 정의 메뉴 팝오버를 생성하기 위한 기본 마크업을 보여줍니다. 이 경우,
autofocus
속성 덕분에 팝오버가 호출될 때 첫 번째 메뉴 항목이 키보드 포커스를 받습니다.
화살표 키와 활성화 동작을 사용하여 메뉴 항목을 탐색하는 것은 여전히 작성자의 스크립팅이 필요합니다.
사용자 정의 메뉴 위젯을 빌드하기 위한 추가 요구 사항은 WAI-ARIA 사양에 정의되어 있습니다.
< button popovertarget = m > Actions</ button >
< div role = menu id = m popover >
< button role = menuitem tabindex = -1 autofocus > Edit</ button >
< button role = menuitem tabindex = -1 > Hide</ button >
< button role = menuitem tabindex = -1 > Delete</ button >
</ div >
팝오버는 사용자가 수행한 작업을 확인하는 상태 메시지를 렌더링하는 데 유용할 수 있습니다.
다음은 output
요소에서
팝오버를 표시하는 방법을 보여줍니다.
< button id = submit > Submit</ button >
< p >< output >< span popover = manual ></ span ></ output ></ p >
< script >
const sBtn = document. getElementById( "submit" );
const outSpan = document. querySelector( "output [popover=manual]" );
let successMessage;
let errorMessage;
/* 작업 성공 여부를 판단하고 적절한 성공 또는 오류 메시지를 결정하는 로직 정의 */
sBtn. addEventListener( "click" , ()=> {
if ( success ) {
outSpan. textContent = successMessage;
}
else {
outSpan. textContent = errorMessage;
}
outSpan. showPopover();
setTimeout( function () {
outSpan. hidePopover();
}, 10000 );
});
</ script >
팝오버 요소를 output
요소에 삽입하면
일반적으로 화면 읽기 프로그램이 콘텐츠가 표시될 때 이를 알리게 됩니다.
콘텐츠의 복잡성이나 빈도에 따라 이러한 알림이 이러한 보조 기술 사용자에게 유용하거나 귀찮을 수 있습니다.
output
요소 또는
다른 ARIA 라이브 영역을 사용할 때 최상의 사용자 경험을 보장하기 위해 이를 염두에 두세요.
popover
속성은
다음 키워드와 상태를 가진 열거형 속성입니다:
키워드 | 상태 | 간단한 설명 |
---|---|---|
auto
| auto | 열릴 때 다른 팝오버를 닫습니다. 간단히 닫기 기능이 있으며 닫기 요청에 응답합니다. |
(빈 문자열) | ||
manual
| manual | 다른 팝오버를 닫지 않으며, 간단히 닫기 또는 닫기 요청에 응답하지 않습니다. |
이 속성의 누락된 값 기본값은 팝오버 없음 상태이며, 잘못된 값 기본값은 manual 상태입니다.
모든 현재 엔진에서 지원됩니다.
popover
IDL 속성은 popover 속성을
반영해야 하며,
알려진 값들로만 제한됩니다.
모든 HTML 요소는 팝오버 가시성 상태를 가지며, 초기 상태는 으로 설정되고, 다음 가능한 값들을 가질 수 있습니다:
숨김
표시됨
Document
는
팝오버 포인터다운 대상을 가지며, 이는
HTML 요소 또는 null로 설정되며, 초기 상태는 null입니다.
모든 HTML 요소는 팝오버 호출자를 가지며, 이는 HTML 요소 또는 null로 설정되며, 초기 상태는 null입니다.
모든 HTML 요소는 팝오버 표시 또는 숨김을 가지며, 이는 부울 값으로, 초기 상태는 false로 설정됩니다.
모든 HTML 요소는 팝오버 토글 작업 추적기를 가지며, 이는 토글 작업 추적기 또는 null로 설정되며, 초기 상태는 null입니다.
모든 HTML 요소는 팝오버 닫기 감시자를 가지며, 이는 닫기 감시자 또는 null로 설정되며, 초기 상태는 null입니다.
다음 속성 변경 단계는, element, localName, oldValue, value, 및 namespace를 주어 모든 HTML 요소에 대해 사용됩니다:
namespace가 null이 아니면 반환합니다.
localName이 popover
가 아니면 반환합니다.
element의 팝오버 가시성 상태가 표시 상태에 있으며, oldValue와 value가 다른 상태에 있으면, element, true, true, 및 false를 주어 팝오버 숨기기 알고리즘을 실행합니다.
element.showPopover()
popover
속성이
auto 상태에 있으면,
element의 조상에 해당하지 않는 한, 이 상태에서 다른 모든
auto 팝오버를 닫습니다.
element.hidePopover()
display: none
을 적용하여 숨깁니다.
element.togglePopover()
모든 현재 엔진에서 지원됩니다.
showPopover()
메서드 단계는 popover 표시 알고리즘을
this, true,
및 null을 인자로 실행하는 것입니다.
popover 표시를 위해, HTML 요소 element, 부울 throwExceptions, 및 HTML 요소 또는 null invoker를 주어진 상황에서 실행하십시오:
popover 유효성 검사의 결과가 false라면, element, false, throwExceptions, 및 null을 주어 반환합니다.
document를 element의 노드 문서로 설정하십시오.
확인: element의 popover 호출자가 null인지 확인합니다.
nestedShow를 element의 popover 표시 또는 숨김으로 설정하십시오.
element의 popover 표시 또는 숨김을 true로 설정하십시오.
cleanupShowingFlag를 다음 단계로 설정하십시오:
nestedShow가 false인 경우, element의 popover 표시 또는 숨김을 false로 설정하십시오.
이벤트를 발생시키고,
이벤트의 beforetoggle
이름을
지정하며,
ToggleEvent
를 사용하고, cancelable
속성을 true로 초기화하고, oldState
속성을 "closed
"로, newState
속성을 "open
"으로 초기화한 결과가 false인 경우, cleanupShowingFlag을 실행하고 반환하십시오.
popover 유효성 검사의 결과가 false인 경우, element, false, throwExceptions, 및 document를 주어 cleanupShowingFlag을 실행하고 반환하십시오.
popover 유효성
검사가 다시 호출된 이유는, beforetoggle
이벤트를 발생시키면 이 요소가 분리되거나 popover
속성이 변경될 수 있기 때문입니다.
shouldRestoreFocus를 false로 설정하십시오.
element의 popover
속성이
auto 상태에 있는 경우:
originalType을 element의 popover
속성 값으로
설정하십시오.
ancestor를 최상위 popover 조상 알고리즘을 실행하여 얻은 element, invoker, 및 true의 결과로 설정하십시오.
ancestor가 null인 경우, ancestor를 document로 설정하십시오.
모든 popover를 숨김을 실행하여 ancestor, false, 및 nestedShow가 아닌 값을 주십시오.
originalType이 element의 popover
속성 값과 같지
않은 경우:
throwExceptions가 true인 경우,
"InvalidStateError
"
DOMException
을
던지십시오.
반환하십시오.
popover 유효성 검사의 결과가 false인 경우, element, false, throwExceptions, 및 document를 주어 cleanupShowingFlag을 실행하고 반환하십시오.
popover 유효성 검사가 다시 호출된 이유는, 위에서 모든 popover를
숨김을 실행한 결과로 beforetoggle
이벤트가 발생했을 수 있기 때문이며, 이벤트 핸들러가 이 요소를 분리했거나 popover
속성을 변경했을 수
있기 때문입니다.
최상위 자동 popover를 document에 대해 실행한 결과가 null인 경우, shouldRestoreFocus를 true로 설정하십시오.
이것은 스택 내에서 첫 번째 popover에 대해서만 초점이 이전에 초점이 맞춰진 요소로 돌아가도록 보장합니다.
element의 popover 종료 감시자를 element의 관련 글로벌 객체를 주어 종료 감시자 설정 결과로 설정하십시오.
취소 동작을 반환하십시오.
종료 동작을 popover를 숨김으로 설정하여 element, true, true, 및 false를 주어 실행하십시오.
element의 이전 초점 요소를 null로 설정하십시오.
originallyFocusedElement를 document의 문서의 초점 영역의 DOM 앵커로 설정하십시오.
요소를 최상위 레이어에 추가하십시오.
element의 popover 표시 상태를 표시 중으로 설정하십시오.
element의 popover 호출자를 invoker로 설정하십시오.
popover 초점 맞춤 단계를 element로 실행하십시오.
shouldRestoreFocus가 true이고 element의 popover
속성이 no popover 상태가 아닌
경우, element의 이전 초점 요소를
originallyFocusedElement로 설정하십시오.
popover 토글 이벤트 작업 큐에 추가를
element, "closed
", 및 "open
"을 주어 실행하십시오.
cleanupShowingFlag을 실행하십시오.
주어진 요소 element, 문자열 oldState 및 문자열 newState에 대해 popover 토글 이벤트 작업을 큐에 추가하려면 다음과 같이 합니다:
만약 element의 popover 토글 작업 추적기가 null이 아니면:
oldState를 element의 popover 토글 작업 추적기의 이전 상태로 설정합니다.
element의 popover 토글 작업 추적기의 작업을 작업 큐에서 제거합니다.
element의 popover 토글 작업 추적기를 null로 설정합니다.
요소 작업을 큐에 추가하고, DOM 조작 작업 소스 및 element를 주어 다음 단계를 실행합니다:
이벤트를
발생시키고, 이름을 toggle
로 지정하며,
element에서 ToggleEvent
를 사용하고,
oldState
속성을
oldState로 초기화하고, newState
속성을
newState로 초기화합니다.
element의 popover 토글 작업 추적기를 null로 설정합니다.
element의 popover 토글 작업 추적기를 구조체로 설정하고, 작업을 방금 큐에 추가한 작업으로 설정하며, 이전 상태를 oldState로 설정합니다.
모든 현재 엔진에서 지원됩니다.
hidePopover()
메서드의 단계는
다음과 같습니다:
popover 숨김 알고리즘을 this, true, true, 및 true를 주어 실행하십시오.
HTML 요소 element, 불리언 focusPreviousElement, 불리언 fireEvents, 불리언 throwExceptions을 주어 popover 숨기기를 수행하려면 다음과 같이 합니다:
element에 대해 throwExceptions 및 null을 주어 popover 유효성 검사를 실행한 결과가 false인 경우, 반환합니다.
document를 element의 노드 문서로 설정합니다.
nestedHide를 element의 popover 표시 또는 숨김으로 설정합니다.
element의 popover 표시 또는 숨김을 true로 설정합니다.
nestedHide가 true인 경우, fireEvents를 false로 설정합니다.
cleanupSteps를 다음 단계로 설정합니다:
nestedHide가 false인 경우, element의 popover 표시 또는 숨김을 false로 설정합니다.
element의 popover 닫기 감시자가 null이 아닌 경우:
element의 popover 닫기 감시자를 파괴합니다.
element의 popover 닫기 감시자를 null로 설정합니다.
element의 popover
속성이 auto 상태에 있는 경우:
element, focusPreviousElement 및 fireEvents을 주어 모든 popover 숨기기를 실행합니다.
element, true 및 throwExceptions을 주어 popover 유효성 검사를 실행한 결과가 false인 경우, cleanupSteps를 실행하고 반환합니다.
popover 유효성 검사는 모든 popover 숨기기 실행이 element를 연결 해제하거나 그 속성을 변경할 수 있기 때문에 다시 호출됩니다.
autoPopoverListContainsElement를 document의 자동 popover 목록의 마지막 항목이 element인 경우 true로, 그렇지 않은 경우 false로 설정합니다.
element의 popover 호출자를 null로 설정합니다.
fireEvents가 true인 경우:
element에서 beforetoggle
라는
이름의 이벤트를 ToggleEvent
을 사용하여
발생시키며, oldState
속성을 "open
"으로 초기화하고 newState
속성을 "closed
"로 초기화합니다.
autoPopoverListContainsElement가 true이고 document의 자동 popover 목록의 마지막 항목이 element가 아닌 경우, element, focusPreviousElement 및 false를 주어 모든 popover 숨기기를 실행합니다.
element, true, throwExceptions 및 null을 주어 popover 유효성 검사를 실행한 결과가 false인 경우, cleanupSteps를 실행하고 반환합니다.
popover 유효성 검사는 beforetoggle
이벤트 발생이 element를 연결 해제하거나 그 속성을 변경할 수 있기 때문에 다시 호출됩니다.
element를 주어 최상위 레이어에서 요소 제거를 요청합니다.
그렇지 않으면, element를 주어 즉시 최상위 레이어에서 요소를 제거합니다.
element의 popover 표시 상태를 으로 설정합니다.
fireEvents가 true인 경우, element, "open
", "closed
"를 주어 popover 토글 이벤트 작업을 큐에 추가합니다.
previouslyFocusedElement를 element의 이전에 포커스된 요소로 설정합니다.
previouslyFocusedElement가 null이 아닌 경우:
element의 이전에 포커스된 요소를 null로 설정합니다.
focusPreviousElement가 true이고 document의 문서의 포커스된 영역의 DOM 앵커가 element의 그림자 포함 포함 자손인 경우, previouslyFocusedElement에 대한 포커스 단계를 실행합니다. 이 단계를 수행할 때 뷰포트가 스크롤되지 않아야 합니다.
cleanupSteps를 실행합니다.
모든 현재 엔진에서 지원.
togglePopover(force)
메서드 단계는 다음과 같습니다:
만약 this의 팝오버 가시성 상태가 표시 중이며, force가 존재하지 않거나 false인 경우, 팝오버 숨기기 알고리즘을 실행하고 this, true, true, 및 true를 전달합니다.
그렇지 않으면, force가 존재하지 않거나 true인 경우, 팝오버 표시를 실행하고 this, true 및 null을 전달합니다.
그 외의 경우:
만약 this의 팝오버 가시성 상태가 표시 중이라면 expectedToBeShowing을 true로 설정합니다; 그렇지 않으면 false로 설정합니다.
팝오버 유효성 검사를 실행하고 expectedToBeShowing, true 및 null을 전달합니다.
this의 팝오버 가시성 상태가 표시 중이라면 true를 반환합니다; 그렇지 않으면 false를 반환합니다.
hide all popovers until, 다음 조건이 주어진 경우:
HTML 요소 또는 document
endpoint, a
boolean
focusPreviousElement, 및 boolean fireEvents:
document를 endpoint의 노드 문서로 설정합니다.
closeAllOpenPopovers 알고리즘은 다음 단계를 수행합니다:
popover를 document의 최상위 자동 팝오버로 설정합니다.
popover가 null이 아닐 때까지:
팝오버 숨기기 알고리즘을 실행하고 popover, focusPreviousElement, fireEvents, 및 false를 전달합니다.
popover를 document의 최상위 자동 팝오버로 설정합니다.
만약 endpoint가 document
라면,
closeAllOpenPopovers을 실행하고 return.
repeatingHide를 false로 설정합니다.
다음 단계를 최소한 한 번 수행합니다:
lastToHide를 null로 설정합니다.
foundEndpoint를 false로 설정합니다.
document의 표시 중인 자동 팝오버 목록의 각 popover에 대해 다음을 수행합니다:
만약 popover가 endpoint라면, foundEndpoint를 true로 설정합니다.
그렇지 않으면, 만약 foundEndpoint가 true라면, lastToHide를 popover로 설정하고 break합니다.
만약 foundEndpoint가 false라면, closeAllOpenPopovers을 실행하고 return.
lastToHide가 null이 아니며, lastToHide의 팝오버 가시성 상태가 표시 중이고 document의 표시 중인 자동 팝오버 목록이 비어 있지 않은 동안:
팝오버 숨기기 알고리즘을 실행하고 document의 표시 중인 자동 팝오버 목록의 마지막 요소, focusPreviousElement, fireEvents, 및 false를 전달합니다.
만약 document의 표시 중인 자동 팝오버 목록에 endpoint가 포함되어 있고 document의 표시 중인 자동 팝오버 목록의 마지막 요소가 endpoint가 아닌 경우, repeatingHide를 true로 설정합니다; 그렇지 않으면 false로 설정합니다.
만약 repeatingHide가 true라면, fireEvents를 false로 설정합니다.
그리고 repeatingHide가 true인 동안 계속 수행합니다.
모든 팝오버를 숨기기 알고리즘은 특정 이벤트가 발생할 때 모든 팝오버를 숨기기 위해 여러 상황에서 사용됩니다. 예를 들어, 팝오버의 가벼운 해제(light-dismiss) 중에, 이 알고리즘은 사용자가 클릭한 노드와 관련이 없는 팝오버만 닫도록 보장합니다.
다음을 찾기 위해 최상위 팝오버 조상, 다음 조건이 주어진 경우:
노드
newPopoverOrTopLayerElement, HTML
요소 또는
null invoker, 그리고 boolean isPopover, 다음 단계를 수행합니다. 반환 값은 HTML 요소 또는 null입니다.
최상위 팝오버 조상 알고리즘은 제공된 팝오버 또는 최상위 레이어 요소에 대해 최상위(최신) 조상 팝오버를 반환합니다. 팝오버는 여러 가지 방식으로 서로 관련될 수 있으며, 팝오버 트리를 형성할 수 있습니다. 한 팝오버(이를 "자식" 팝오버라고 합니다)가 최상위 조상 팝오버(이를 "부모" 팝오버라고 합니다)를 가질 수 있는 두 가지 경로가 있습니다:
팝오버가 노드 트리 내에서 서로 중첩되어 있습니다. 이 경우, 하위 팝오버는 "자식"이고 최상위 조상 팝오버는 "부모"입니다.
호출 요소(예: 버튼
)가
popovertarget
속성을 가지고 있으며, 팝오버를 가리키고 있습니다. 이 경우, 팝오버는 "자식"이며, 호출 요소가 있는 팝오버 서브트리는 "부모"입니다. 호출자는 팝오버 안에 있어야 하며, 열린
팝오버를 참조해야 합니다.
위에서 형성된 각 관계에서 부모 팝오버는 자식 팝오버보다 표시 중인 자동 팝오버 목록에서 엄격히 이전에 있어야 하며, 그렇지 않으면 유효한 조상 관계를 형성하지 않습니다. 이로 인해 표시되지 않는 팝오버와 자기참조(예: 팝오버가 호출 요소를 포함하고, 해당 요소가 다시 포함된 팝오버를 가리키는 경우)가 제거되며, (순환 가능성 있는) 연결 그래프에서 잘 형성된 트리를 구성할 수 있게 됩니다. 자동 팝오버만 고려됩니다.
제공된 요소가 대화상자(dialog)
와 같은 최상위
레이어 요소이며,
팝오버로 표시되지 않는 경우, 최상위
팝오버 조상은 노드 트리 내에서 첫 번째 팝오버만 찾습니다.
만약 isPopover가 true라면:
그 외의 경우:
단언: invoker가 null입니다.
popoverPositions을 빈 순서 있는 맵으로 설정합니다.
index를 0으로 설정합니다.
document를 newPopoverOrTopLayerElement의 노드 문서로 설정합니다.
document의 표시 중인 자동 팝오버 목록의 각 popover에 대해 다음을 수행합니다:
설정 popoverPositions[popover]을 index로 설정합니다.
index를 1씩 증가시킵니다.
만약 isPopover가 true라면, 설정 popoverPositions[newPopoverOrTopLayerElement]을 index로 설정합니다.
index를 1씩 증가시킵니다.
topmostPopoverAncestor를 null로 설정합니다.
checkAncestor를 다음 단계를 수행하는 알고리즘으로 설정합니다 candidate가 주어졌을 때:
candidate가 null인 경우, return.
candidateAncestor를 candidate에 대해 가장 가까운 포괄적인 열린 팝오버 실행 결과로 설정합니다.
candidateAncestor가 null인 경우, return.
candidatePosition을 popoverPositions[candidateAncestor]로 설정합니다.
만약 topmostPopoverAncestor가 null이거나 popoverPositions[topmostPopoverAncestor]이 candidatePosition보다 작은 경우, topmostPopoverAncestor를 candidateAncestor로 설정합니다.
checkAncestor를 newPopoverOrTopLayerElement의 부모 노드에 대해 실행합니다, 평면 트리 내에서.
checkAncestor를 invoker에 대해 실행합니다.
topmostPopoverAncestor를 반환합니다.
node에 대해 가장 가까운 포괄적인 열린 팝오버를 찾기 위해, 다음 단계를 수행합니다. 이 단계는 HTML 요소 또는 null을 반환합니다.
currentNode를 node로 설정합니다.
currentNode가 null이 아닐 때까지:
만약 currentNode의 popover
속성이
자동
상태에 있고 currentNode의
팝오버 가시성
상태가 표시
중이라면,
currentNode를 반환합니다.
currentNode를 currentNode의 부모로 설정합니다, 평면 트리 내에서.
null을 반환합니다.
document에 대해 최상위 자동 팝오버를 찾기 위해, 다음 단계를 수행합니다. 이 단계는 HTML 요소 또는 null을 반환합니다.
만약 document의 표시 중인 자동 팝오버 목록이 비어 있지 않다면, document의 표시 중인 자동 팝오버 목록의 마지막 요소를 반환합니다.
null을 반환합니다.
subject에 대해 팝오버 포커싱 단계를 수행하기 위해:
subject가 대화상자(dialog)
요소인 경우,
subject에 대해 대화상자 포커싱 단계를 실행하고 반환합니다.
subject에 autofocus
속성이 있는
경우, control을 subject로 설정합니다.
그 외의 경우, control을 "기타
"에 대해 subject의 자동 포커스 대리자로 설정합니다.
control이 null인 경우, 반환합니다.
control에 대해 포커싱 단계를 실행합니다.
topDocument를 활성 문서로 설정합니다, control의 노드 문서의 탐색 문맥의 최상위 탐색 문맥의.
topDocument의 자동 포커스 처리됨 플래그를 true로 설정합니다.
element에 대해 팝오버 유효성 검사를 수행하기 위해, 다음이 주어진 경우: HTML 요소
element, boolean expectedToBeShowing, boolean throwExceptions, 그리고 document
또는 null
expectedDocument,
다음 단계를 수행합니다. 이들은 예외를 발생시키거나 boolean을 반환합니다.
만약 element의 팝오버
속성이
팝오버 없음 상태에 있는
경우:
만약 throwExceptions이 true라면,
"NotSupportedError
" DOMException
을
발생시킵니다.
false를 반환합니다.
만약 다음 중 어느 하나라도 true라면:
expectedToBeShowing이 true이고 element의 팝오버 가시성 상태가 표시 중이 아닌 경우; 또는
expectedToBeShowing이 false이고 element의 팝오버 가시성 상태가 이 아닌 경우,
그렇다면 false를 반환합니다.
만약 다음 중 어느 하나라도 true라면:
element가 연결된 상태가 아닌 경우;
expectedDocument가 null이 아니며 element의 노드 문서가 expectedDocument가 아닌 경우;
element가 대화상자(dialog)
요소이며, 그 모달 상태 플래그가 설정되어 있는 경우; 또는
element의 전체 화면 플래그가 설정된 경우,
그렇다면:
만약 throwExceptions이 true라면,
"InvalidStateError
" DOMException
을
발생시킵니다.
false를 반환합니다.
true를 반환합니다.
document에 대해 표시 중인 자동 팝오버 목록을 가져오기 위해,
document
document:
popovers를 « »로 설정합니다.
각각에 대해 요소
element는
document의 최상위
레이어에 있습니다: 만약 element의 팝오버
속성이
자동 상태에 있고,
element의 팝오버 가시성 상태가 표시 중이라면, 추가합니다 element를 popovers에.
popovers를 반환합니다.
버튼은 다음과 같은 콘텐츠 속성을 가질 수 있습니다:
popovertarget
popovertargetaction
지정된 경우, popovertarget
속성 값은 같은
ID를 가져야 합니다.
popover
속성이 있는
요소와
동일한 트리 내에서, 버튼과 함께 popovertarget
속성을 가진 요소와 동일해야 합니다.
popovertargetaction
속성은 다음 키워드와 상태를 가지는
열거형
속성입니다:
키워드 | 상태 | 간략 설명 |
---|---|---|
toggle
| toggle | 대상 팝오버 요소를 표시하거나 숨깁니다. |
show
| show | 대상 팝오버 요소를 표시합니다. |
hide
| hide | 대상 팝오버 요소를 숨깁니다. |
이 속성의 누락된 값 기본값과 잘못된 값 기본값은 모두 toggle 상태입니다.
가능한 경우 팝오버 요소가 DOM 내에서 트리거 요소 바로 뒤에 배치되도록 합니다. 이렇게 하면 화면 읽기 프로그램과 같은 보조 기술을 사용하는 사용자를 위해 팝오버가 논리적인 프로그래밍 읽기 순서로 노출되도록 할 수 있습니다.
다음은 popovertarget
속성과 popovertargetaction
속성을 조합하여 팝오버를 표시하고 닫을 수 있는 방법을 보여줍니다:
< button popovertarget = "foo" popovertargetaction = "show" >
Show a popover
</ button >
< article popover = "auto" id = "foo" >
This is a popover article!
< button popovertarget = "foo" popovertargetaction = "hide" > Close</ button >
</ article >
만약 popovertargetaction
속성이 지정되지 않은 경우, 기본 동작은 연결된 팝오버를 토글하는 것입니다. 다음은 트리거 버튼에 popovertarget
속성만 지정하여 수동 팝오버를 열림 및 닫힘 상태 사이에서 토글할 수 있는 방법을 보여줍니다. 수동 팝오버는 가벼운 닫기나 닫기 요청에 응답하지 않습니다:
< input type = "button" popovertarget = "foo" value = "Toggle the popover" >
< div popover = manual id = "foo" >
This is a popover!
</ div >
interface mixin PopoverInvokerElement {
[CEReactions ] attribute Element ? popoverTargetElement ;
[CEReactions ] attribute DOMString popoverTargetAction ;
};
HTMLButtonElement/popoverTargetElement
모든 현재 엔진에서 지원됩니다.
HTMLInputElement/popoverTargetElement
모든 현재 엔진에서 지원됩니다.
popoverTargetElement
IDL 속성은 popovertarget
속성을
반영해야 합니다.
HTMLButtonElement/popoverTargetAction
모든 현재 엔진에서 지원됩니다.
HTMLInputElement/popoverTargetAction
모든 현재 엔진에서 지원됩니다.
popoverTargetAction
IDL 속성은 popovertargetaction
속성을
반영해야 하며, 알려진 값으로만 제한됩니다.
팝오버 타겟 속성 활성화 동작을 실행하려면 Node
node를 지정하세요:
popover를 node의 팝오버 타겟 요소로 설정합니다.
popover가 null이면, 반환합니다.
node의 popovertargetaction
속성이 show 상태에 있고
popover의 팝오버 가시성 상태가 표시 상태라면,
반환합니다.
node의 popovertargetaction
속성이 hide 상태에 있고
popover의 팝오버 가시성 상태가
상태라면,
반환합니다.
popover의 팝오버 가시성 상태가 표시 상태라면, 팝오버 숨기기 알고리즘을 popover, true, true, false를 인자로 하여 실행합니다.
그렇지 않으면, popover의 팝오버 가시성 상태가 상태이고, 팝오버 유효성 검사를 popover, false, false, null을 인자로 하여 실행한 결과가 true라면, 팝오버 표시를 popover, false, node를 인자로 하여 실행합니다.
팝오버 타겟 요소를 가져오려면 Node
node를 지정하고, 다음 단계를 수행합니다. 이들은 HTML 요소 또는 null을 반환합니다.
node가 버튼이 아니면, null을 반환합니다.
node가 비활성화됨 상태이면, null을 반환합니다.
popoverElement를 node의 연관된 요소
popovertarget
가져오기 작업의 결과로 설정합니다.
popoverElement가 null이면, null을 반환합니다.
popoverElement를 반환합니다.
"라이트 해제"는 popover
속성이
auto 상태에 있는 팝오버 바깥을 클릭하면
팝오버가 닫히는 것을 의미합니다. 이는 해당 팝오버가 닫기 요청에 반응하는 방식에
추가됩니다.
열린 팝오버 라이트 해제를 실행하려면, 이벤트
event를 지정하세요:
target을 event의 타겟으로 설정합니다.
document를 target의 노드 문서로 설정합니다.
topmostPopover를 document에 대해 가장 상위의 자동 팝오버 실행 결과로 설정합니다.
topmostPopover가 null이면 반환합니다.
event가 PointerEvent
이고,
event의 타입
이
"pointerdown
"인
경우: document의 팝오버 포인터다운 타겟을
target에 대해 가장 상위에서 클릭된 팝오버 실행 결과로 설정합니다.
event가 PointerEvent
이고,
event의 타입
이
"pointerup
"인
경우:
ancestor를 target에 대해 가장 상위에서 클릭된 팝오버 실행 결과로 설정합니다.
sameTarget을 ancestor가 document의 팝오버 포인터다운 타겟과 동일한 경우 true로 설정합니다.
document의 팝오버 포인터다운 타겟을 null로 설정합니다.
ancestor가 null인 경우 ancestor를 document로 설정합니다.
sameTarget이 true인 경우 ancestor, false, true를 인자로 하여 모든 팝오버 숨기기를 실행합니다.
열린 팝오버 라이트 해제는 사용자가 페이지의 아무 곳이나 클릭하거나 터치할 때 Pointer Events 스펙에 의해 호출됩니다.
가장 상위에서 클릭된 팝오버를 찾으려면, 노드
node를 지정하세요:
clickedPopover를 node에 대해 가장 가까운 포함된 열린 팝오버 실행 결과로 설정합니다.
invokerPopover를 node에 대해 호출자를 위한 가장 가까운 포함된 타겟 팝오버 실행 결과로 설정합니다.
getStackPosition을 HTML 요소 popover를 인자로 받아 다음 단계를 수행하는 알고리즘으로 설정하세요:
popoverList를 popover의 노드 문서의 보이는 자동 팝오버 목록으로 설정합니다.
popover가 popoverList에 있으면, popover의 popoverList 내 인덱스 + 1을 반환합니다.
0을 반환합니다.
clickedPopover를 인자로 하여 실행한 getStackPosition 결과가 invokerPopover를 인자로 하여 실행한 getStackPosition 결과보다 크면, clickedPopover를 반환합니다.
invokerPopover를 반환합니다.
호출자를 위한 가장 가까운 포함된 타겟 팝오버를 찾으려면, 노드
node를 지정하세요:
currentNode를 node로 설정합니다.
currentNode가 null이 아닐 때까지 반복합니다:
이 섹션에서는 웹 브라우저에 가장 직접적으로 적용되는 기능을 설명합니다. 그러나 달리 명시된 경우를 제외하고, 이 섹션에서 정의된 요구 사항은 웹 브라우저가 아닌 모든 사용자 에이전트에도 적용됩니다.
출처는 웹 보안 모델의 기본 통화입니다. 동일한 출처를 공유하는 웹 플랫폼의 두 액터는 서로를 신뢰하고 동일한 권한을 가진 것으로 간주됩니다. 다른 출처를 가진 액터들은 잠재적으로 서로 적대적일 수 있으며, 서로 다른 정도로 격리됩니다.
예를 들어, bank.example.com
에 호스팅된 Example Bank의 웹 사이트가 charity.example.org
에
호스팅된 Example Charity의 웹 사이트의 DOM을 검사하려고 하면, "SecurityError
" DOMException
이
발생합니다.
출처는 다음 중 하나입니다:
내부 값으로, 이를 다시 생성할 수 있는 직렬화가 없으며(이는 출처의 직렬화에 따라 "null
"로 직렬화됨), 의미 있는 유일한 작업은
동일성 테스트입니다.
튜플은 다음을 포함합니다:
출처는 여러 Document
객체 간에 공유될 수 있습니다. 또한 출처는 일반적으로 불변입니다. 오직 도메인만 튜플
출처에서 변경할 수 있으며, 이는 document.domain
API를 통해서만 가능합니다.
유효 도메인은 출처 origin에 대해 다음과 같이 계산됩니다:
출처의 직렬화는 주어진 출처 origin에 다음 알고리즘을 적용하여 얻은 문자열입니다:
origin이 불투명 출처인 경우,
"null
"을 반환합니다.
그렇지 않으면, result를 origin의 스킴으로 설정합니다.
result에 "://
"을 추가합니다.
origin의 포트가 null이 아닌 경우, U+003A COLON 문자 (:)와 origin의 포트를 직렬화된 값을 result에 추가합니다.
result를 반환합니다.
("https
", "xn--maraa-rta.example
", null, null)의 직렬화는
"https://xn--maraa-rta.example
"입니다.
이전에 출처의 유니코드 직렬화도 있었습니다. 그러나 이는 널리 채택되지 않았습니다.
두 출처, A와 B가 동일 출처라고 하는 경우, 다음 알고리즘이 true를 반환합니다:
A와 B가 동일한 불투명 출처인 경우, true를 반환합니다.
false를 반환합니다.
두 출처, A와 B가 동일 출처-도메인이라고 하는 경우, 다음 알고리즘이 true를 반환합니다:
A | B | 동일 출처 | 동일 출처-도메인 |
---|---|---|---|
("https ", "example.org ", null, null) |
("https ", "example.org ", null, null) |
✅ | ✅ |
("https ", "example.org ", 314, null) |
("https ", "example.org ", 420, null) |
❌ | ❌ |
("https ", "example.org ", 314, "example.org ") |
("https ", "example.org ", 420, "example.org ") |
❌ | ✅ |
("https ", "example.org ", null, null) |
("https ", "example.org ", null, "example.org ") |
✅ | ❌ |
("https ", "example.org ", null, "example.org ") |
("http ", "example.org ", null, "example.org ") |
❌ | ❌ |
스킴과 호스트는 튜플로서, 스킴(ASCII 문자열)과 호스트(호스트)로 구성됩니다.
출처 origin을 주어진 경우, 사이트를 획득하려면 다음 단계를 수행합니다:
origin이 불투명 출처인 경우, origin을 반환합니다.
origin의 호스트의 등록 가능 도메인이 null인 경우, (origin의 스킴, origin의 호스트)를 반환합니다.
두 사이트, A와 B가 동일 사이트라고 하는 경우, 다음 알고리즘이 true를 반환합니다:
A와 B가 동일한 불투명 출처인 경우, true를 반환합니다.
A 또는 B가 불투명 출처인 경우, false를 반환합니다.
A와 B의 스킴 값이 다르면, false를 반환합니다.
true를 반환합니다.
사이트의 직렬화는 주어진 사이트 site에 대해 다음 알고리즘을 적용하여 얻은 문자열입니다:
site가 불투명 출처인 경우,
"null
"을 반환합니다.
result를 site[0]으로 설정합니다.
result에 "://
"을 추가합니다.
site[1], 직렬화된 값을 result에 추가합니다.
result를 반환합니다.
직렬화된 값이 사이트인지 출처인지 문맥상 명확해야 합니다. 두 사이에 문법적 차이가 없을 수도 있기 때문입니다. 예를 들어, 출처 ("https
",
"shop.example
", null, null)와 사이트 ("https
", "shop.example
")는 동일한 직렬화:
"https://shop.example
"를 가집니다.
두 출처, A와 B가 스킴이 없는 동일 사이트라고 하는 경우, 다음 알고리즘이 true를 반환합니다:
두 출처, A와 B가 동일 사이트라고 하는 경우, 다음 알고리즘이 true를 반환합니다:
siteA를 사이트를 획득하여 얻은 값으로 설정합니다.
siteB를 사이트를 획득하여 얻은 값으로 설정합니다.
siteA가 동일 사이트와 siteB인 경우, true를 반환합니다.
false를 반환합니다.
동일 출처 및 동일 출처-도메인 개념과 달리, 스킴이 없는 동일 사이트 및 동일 사이트의 경우, 포트 및 도메인 구성 요소는 무시됩니다.
URL에서 설명된 이유로 인해, 동일 사이트 및 스킴이 없는 동일 사이트 개념은 가능한 한 피하고, 대신 동일 출처 검사를 사용하는 것이 좋습니다.
wildlife.museum
, museum
및 com
이 공용 접미사이고 example.com
이 그렇지 않다고 가정합니다:
A | B | 스킴이 없는 동일 사이트 | 동일 사이트 |
---|---|---|---|
("https ", "example.com ") |
("https ", "sub.example.com ") |
✅ | ✅ |
("https ", "example.com ") |
("https ", "sub.other.example.com ") |
✅ | ✅ |
("https ", "example.com ") |
("http ", "non-secure.example.com ") |
✅ | ❌ |
("https ", "r.wildlife.museum ") |
("https ", "sub.r.wildlife.museum ") |
✅ | ✅ |
("https ", "r.wildlife.museum ") |
("https ", "sub.other.r.wildlife.museum ") |
✅ | ✅ |
("https ", "r.wildlife.museum ") |
("https ", "other.wildlife.museum ") |
❌ | ❌ |
("https ", "r.wildlife.museum ") |
("https ", "wildlife.museum ") |
❌ | ❌ |
("https ", "wildlife.museum ") |
("https ", "wildlife.museum ") |
✅ | ✅ |
("https ", "example.com ") |
("https ", "example.com. ") |
❌ | ❌ |
document.domain [ = domain ]
보안 검사에 사용되는 현재 도메인을 반환합니다.
하위 도메인을 제거하는 값으로 설정할 수 있어, 출처의 도메인을 변경하여 동일 도메인의 다른 하위 도메인에 있는 페이지들이 서로 접근할 수 있게 합니다. 이는 동일 도메인의 다른 호스트에서 동작하는 페이지들이 서로의 DOM에 동기적으로 접근할 수 있도록 합니다.
샌드박스된 iframe
안에서, 불투명
출처를 가진 Document
들, 그리고 탐색 문맥이 없는
Document
들에서는 설정자가
"SecurityError
" 예외를 발생시킵니다. crossOriginIsolated
또는 originAgentCluster
가
true를 반환하는 경우, 설정자는 아무 작업도 하지 않습니다.
document.domain
설정자의 사용을 피하십시오. 이는 동일 출처 정책이 제공하는 보안 보호를 약화시킵니다. 특히 공유 호스팅을 사용하는 경우, 예를 들어 신뢰할 수 없는 제3자가 동일 IP 주소에서 다른 포트를
통해 HTTP 서버를 호스팅할 수 있다면, 동일 출처 보호가 실패할 수 있습니다. 이는 document.domain
설정자가 사용된 후에는 출처를 비교할 때 포트가 무시되기 때문입니다.
이러한 보안 위험으로 인해 이 기능은 웹 플랫폼에서 제거되는 중입니다. (이 과정은 수년이 걸릴 수 있습니다.)
대신, 출처 간 안전한 통신을 위해 postMessage()
또는 MessageChannel
객체를 사용하십시오.
domain
getter 단계는
다음과 같습니다:
effectiveDomain이 null이면, 빈 문자열을 반환합니다.
effectiveDomain을 직렬화된 값으로 반환합니다.
domain
setter 단계는 다음과 같습니다:
this의 탐색 문맥이 null인 경우, "SecurityError
" DOMException
을
발생시킵니다.
this의 활성 샌드박싱 플래그 집합에 샌드박스된
document.domain
탐색 문맥 플래그가 설정되어 있는 경우, "SecurityError
" DOMException
을
발생시킵니다.
effectiveDomain이 null인 경우, "SecurityError
" DOMException
을
발생시킵니다.
주어진 값이 유효 도메인의 등록
가능 도메인 접미사이거나 동일하지 않은 경우, "SecurityError
" DOMException
을
발생시킵니다.
주변 에이전트의 에이전트 클러스터의 is origin-keyed가 true이면, 반환합니다.
스칼라 값 문자열 hostSuffixString이 호스트 originalHost의 등록 가능 도메인 접미사이거나 동일한지를 결정하기 위해 다음 단계를 따릅니다:
hostSuffixString이 빈 문자열이면, false를 반환합니다.
hostSuffix를 hostSuffixString을 파싱한 결과로 설정합니다.
hostSuffix가 실패하면, false를 반환합니다.
hostSuffix가 동일하지 않으면 originalHost와:
hostSuffix 또는 originalHost가 도메인이 아니면, false를 반환합니다.
hostSuffix가 U+002E (.)으로 접두사로 붙어 originalHost의 끝과 일치하지 않으면, false를 반환합니다.
다음 중 하나가 true이면:
hostSuffix가 U+002E (.)으로 접두사로 붙어 originalHost의 끝과 일치하는 공용 접미사와,
그러면 false를 반환합니다. [URL]
단언합니다: originalHost의 공용 접미사가 U+002E (.)으로 접두사로 붙어 hostSuffix의 끝과 일치합니다.
true를 반환합니다.
hostSuffixString | originalHost | 등록 가능 도메인 접미사이거나 동일한지 | 참고 |
---|---|---|---|
"0.0.0.0 " |
0.0.0.0 |
✅ | |
"0x10203 " |
0.1.2.3 |
✅ | |
"[0::1] " |
::1 |
✅ | |
"example.com " |
example.com |
✅ | |
"example.com " |
example.com. |
❌ | 끝에 붙는 점은 중요합니다. |
"example.com. " |
example.com |
❌ | |
"example.com " |
www.example.com |
✅ | |
"com " |
example.com |
❌ | 작성 당시, com 은 공용 접미사입니다. |
"example " |
example |
✅ | |
"compute.amazonaws.com " |
example.compute.amazonaws.com |
❌ | 작성 당시, *.compute.amazonaws.com 은 공용 접미사입니다. |
"example.compute.amazonaws.com " |
www.example.compute.amazonaws.com |
❌ | |
"amazonaws.com " |
www.example.compute.amazonaws.com |
❌ | |
"amazonaws.com " |
test.amazonaws.com |
✅ | 작성 당시, amazonaws.com 은 등록 가능한 도메인입니다. |
window.originAgentCluster
이 Window
가 에이전트 클러스터에 속해 있으며, 그 클러스터가 출처-기반으로 키됨인 경우 true를 반환합니다. 자세한 내용은 이 섹션에서 설명합니다.
Document
가 보안 컨텍스트를 통해 제공될 때, 이를 출처-기반 에이전트 클러스터에 배치하도록 요청할 수
있습니다. 이 작업은 `Origin-Agent-Cluster
`
HTTP 응답 헤더를 사용하여 수행됩니다. 이 헤더는 구조화된 헤더로,
값은 불리언이어야 합니다. [STRUCTURED-FIELDS]
새로운
문서
객체 생성 및 초기화의 처리 모델에 따라, 이 헤더를 사용함으로써, Document
의 에이전트 클러스터 키는 출처가 되며,
해당 사이트 대신 사용됩니다.
Document
객체가 같은 브라우징 컨텍스트 그룹 내에서 로드된
이전 페이지에서 이 헤더를 생략한 경우에도 originAgentCluster
가
false를 반환할 수 있습니다. 반대로, 이 헤더가 설정되지 않은 경우에도 true를 반환할 수 있습니다.
같은 브라우징 컨텍스트 그룹 내의 동일
출처 Document
객체가 다른 에이전트 클러스터에 배치되지 않도록 기록된 에이전트 클러스터 키 맵을 통해 방지됩니다.
Document
객체가 불투명 출처를 가진 경우, originAgentCluster
getter는 항상 true를 반환합니다.
교차 출처 오프너 정책 값은 최상위 브라우징 컨텍스트에서 탐색되는 문서가 새로운 최상위 브라우징 컨텍스트와 해당 그룹을 강제로 생성할 수 있도록 합니다. 가능한 값은 다음과 같습니다:
unsafe-none
"
이는 현재 기본값으로, 문서는 전임자와 동일한 최상위 브라우징 컨텍스트에 위치하게 되며, 전임자가 다른 오프너 정책을 지정하지 않는 한 동일한 컨텍스트를 사용합니다.
same-origin-allow-popups
"
이는 문서에 대해 새로운 최상위 브라우징 컨텍스트를 강제로 생성하며, 전임자가 동일한 오프너 정책을 지정하지 않거나 그들이 동일 출처가 아닐 경우 이를 적용합니다.
same-origin
"
이는 "same-origin-allow-popups
"와
동일하게 동작하지만, 생성된 보조 브라우징 컨텍스트는 동일한 동일 출처의 문서를 포함해야 하며, 동일한
오프너 정책을 가지고 있어야 합니다. 그렇지 않으면 오프너에게 닫힌 상태로 나타납니다.
same-origin-plus-COEP
"
이는 "same-origin
"과
동일하게 동작하지만, 추가로 새로운 최상위 브라우징 컨텍스트의 그룹의 교차 출처 격리 모드를 "논리적
"
또는 "구체적
"으로
설정합니다.
"same-origin-plus-COEP
"는
`Cross-Origin-Opener-Policy
`
헤더를 통해 직접 설정할 수 없으며,
`Cross-Origin-Opener-Policy: same-origin
`과
`Cross-Origin-Embedder-Policy
`
헤더를 함께 설정함으로써 생성됩니다.
교차 출처 오프너 정책은 다음으로 구성됩니다:
값: 이는 초기값이 "unsafe-none
"인
출처 오프너 정책 값입니다.
보고 엔드포인트: 이는 문자열 또는 null이며, 초기값은 null입니다.
보고 전용 값: 이는 초기값이 "unsafe-none
"인
출처 오프너 정책 값입니다.
보고 전용 엔드포인트: 이는 문자열 또는 null이며, 초기값은 null입니다.
교차 출처 오프너 정책 값을 일치시키기 위해, 주어진 출처 오프너 정책 값 A, 출처 originA, 출처 오프너 정책 값 B, 그리고 출처 originB에 대해 다음을 수행합니다:
만약 A가 "unsafe-none
"이고
B도 "unsafe-none
"라면,
true를 반환합니다.
만약 A가 "unsafe-none
"이거나
B가 "unsafe-none
"라면,
false를 반환합니다.
만약 A가 B와 동일하고 originA가 originB와 동일 출처라면, true를 반환합니다.
false를 반환합니다.
Headers/Cross-Origin-Opener-Policy
모든 현재 엔진에서 지원됨.
Document
의 출처 오프너 정책은 `Cross-Origin-Opener-Policy
` 및 `Cross-Origin-Opener-Policy-Report-Only
` HTTP 응답 헤더에서 파생됩니다. 이
헤더들은 구조화된 헤더로, 그 값은 토큰이어야 합니다. [STRUCTURED-FIELDS]
유효한 토큰 값은 오프너 정책 값들입니다. 토큰에는 "report-to
" 매개변수와 같은 매개변수가 첨부될 수 있습니다. 이 매개변수는 적절한 보고 엔드포인트를 식별하는 유효한 URL 문자열을 가질 수 있습니다. [REPORTING]
아래에 설명된 처리 모델에 따라, 사용자 에이전트는 이 헤더에 유효하지 않은 값이 포함된 경우 이를 무시합니다. 마찬가지로, 값이 토큰으로 파싱될 수 없는 경우에도 사용자 에이전트는 이 헤더를 무시합니다.
응답 response와 환경 reservedEnvironment가 주어졌을 때 교차 출처 오프너 정책을 획득하는 절차는 다음과 같습니다:
policy를 새로운 오프너 정책으로 설정합니다.
만약 reservedEnvironment가 비보안 컨텍스트라면, policy를 반환합니다.
parsedItem을 `Cross-Origin-Opener-Policy
`와
"item
"를 사용하여 구조화된 필드 값을 얻는 결과로 설정합니다.
만약 parsedItem이 null이 아니라면:
만약 parsedItem[0]이 "same-origin
"이라면:
coep을 response와 reservedEnvironment에서 교차 출처 임베더 정책을 획득한 결과로 설정합니다.
만약 coep의 값이 교차 출처 격리와 호환되면,
policy의 값을 "same-origin-plus-COEP
"으로
설정합니다.
그렇지 않으면, policy의 값을 "same-origin
"으로
설정합니다.
만약 parsedItem[0]이 "same-origin-allow-popups
"이라면,
policy의 값을
"same-origin-allow-popups
"으로
설정합니다.
만약 parsedItem[1]["report-to
"]가 존재하고 그것이 문자열이라면, policy의 보고
엔드포인트를 parsedItem[1]["report-to
"]로 설정합니다.
parsedItem을 `Cross-Origin-Opener-Policy-Report-Only
`와
"item
"을 사용하여 구조화된 필드 값을 얻는 결과로 설정합니다.
만약 parsedItem이 null이 아니라면:
만약 parsedItem[0]이 "same-origin
"이라면:
coep을 response와 reservedEnvironment에서 교차 출처 임베더 정책을 획득한 결과로 설정합니다.
만약 coep의 값이 교차 출처 격리와 호환되거나
coep의 보고 전용 값이 교차 출처 격리와 호환되면,
policy의 보고 전용 값을 "same-origin-plus-COEP
"으로
설정합니다.
보고 전용 COOP은 COEP의 보고 전용을 고려하여 특별한 "same-origin-plus-COEP
"
값을 할당합니다. 이를 통해 개발자는 COOP과 COEP의 배포 순서에 더 큰 자유를 가질 수 있습니다.
그렇지 않으면, policy의 보고 전용 값을 "same-origin
"으로
설정합니다.
만약 parsedItem[0]이 "same-origin-allow-popups
"이라면,
policy의 보고 전용 값을 "same-origin-allow-popups
"으로
설정합니다.
만약 parsedItem[1]["report-to
"]가 존재하고 그것이 문자열이라면, policy의 보고 전용 엔드포인트를
parsedItem[1]["report-to
"]로 설정합니다.
policy를 반환합니다.
다음과 같은 경우를 가정하고, COOP 값이 브라우징 컨텍스트 그룹 전환을 요구하는지 확인하려면, 부울 isInitialAboutBlank, 두 개의 기원(origin) responseOrigin과 activeDocumentNavigationOrigin, 그리고 두 개의 교차 출처 오프너 정책 값 responseCOOPValue 및 activeDocumentCOOPValue을 사용하십시오:
만약 일치하는 activeDocumentCOOPValue, activeDocumentNavigationOrigin, responseCOOPValue, responseOrigin의 결과가 true라면, false를 반환하십시오.
다음이 모두 true인 경우:
isInitialAboutBlank
activeDocumentCOOPValue의 값이
"same-origin-allow-popups
"일
때
responseCOOPValue가 "unsafe-none
"일
때
그런 경우 false를 반환하십시오.
true를 반환하십시오.
다음과 같은 경우를 가정하고, 보고 전용 COOP 강제 적용이 브라우징 컨텍스트 그룹 전환을 요구하는지 확인하려면, 부울 isInitialAboutBlank, 두 개의 기원(origin) responseOrigin, activeDocumentNavigationOrigin, 그리고 두 개의 오프너 정책 responseCOOP 및 activeDocumentCOOP을 사용하십시오:
만약 COOP 값이 브라우징 컨텍스트 그룹 전환을 요구하는지 확인한 결과가 false라면, false를 반환하십시오.
보고 전용 정책을 일치시키는 것은 웹사이트가 모든 페이지에서 동일한 보고 전용 교차 출처 오프너 정책을 지정하고 이들 페이지 간의 탐색에 대해 위반 보고서를 받지 않도록 허용합니다.
만약 COOP 값이 브라우징 컨텍스트 그룹 전환을 요구하는지 확인한 결과가 true라면, true를 반환하십시오.
그렇지 않으면 false를 반환하십시오.
교차 출처 오프너 정책 강제 적용 결과는 다음과 같은 구조체를 포함하는 항목으로 구성됩니다:
초기값이 false인 부울 브라우징 컨텍스트 그룹 전환이 필요한지 여부
초기값이 false인 부울 보고 전용으로 인해 브라우징 컨텍스트 그룹 전환이 필요할지 여부
URL url
기원(origin) origin
오프너 정책 교차 출처 오프너 정책
초기값이 false인 부울 현재 컨텍스트가 탐색 소스인지 여부
다음과 같은 경우를 가정하고, 응답의 교차 출처 오프너 정책을 강제 적용하려면, 브라우징 컨텍스트 browsingContext, URL responseURL, 기원(origin) responseOrigin, 오프너 정책 responseCOOP, 교차 출처 오프너 정책 강제 적용 결과 currentCOOPEnforcementResult, 그리고 참조자 referrer를 사용하십시오:
newCOOPEnforcementResult를 새로운 교차 출처 오프너 정책 강제 적용 결과로 설정하십시오.
isInitialAboutBlank을 browsingContext의 활성 문서의 초기
about:blank
상태로 설정하십시오.
만약 isInitialAboutBlank이 true이고 browsingContext의 초기 URL이 null이라면, browsingContext의 초기 URL을 responseURL로 설정하십시오.
만약 COOP 값이 브라우징 컨텍스트 그룹 전환을 요구하는지 확인한 결과가 true라면:
newCOOPEnforcementResult의 브라우징 컨텍스트 그룹 전환이 필요한지 여부를 true로 설정하십시오.
만약 browsingContext의 그룹의 브라우징 컨텍스트 집합의 크기가 1보다 크다면:
COOP
응답으로 탐색할 때 브라우징 컨텍스트 그룹 전환에 대한 위반 보고서를 대기열에 추가하십시오. 이때 responseCOOP,
"enforce
", responseURL, currentCOOPEnforcementResult의
url,
currentCOOPEnforcementResult의 origin,
responseOrigin, 그리고 referrer를 사용하십시오.
COOP
응답으로부터 탐색할 때 브라우징 컨텍스트 그룹 전환에 대한 위반 보고서를 대기열에 추가하십시오. 이때
currentCOOPEnforcementResult의 교차
출처 오프너 정책, "enforce
", currentCOOPEnforcementResult의 url,
responseURL, currentCOOPEnforcementResult의 origin,
responseOrigin, 그리고 currentCOOPEnforcementResult의 현재
컨텍스트가 탐색 소스인지 여부를 사용하십시오.
만약 보고 전용 COOP을 강제 적용할 때 브라우징 컨텍스트 그룹 전환이 필요한지 확인한 결과가 true라면:
result의 보고 전용으로 인해 브라우징 컨텍스트 그룹 전환이 필요할지 여부를 true로 설정하십시오.
만약 browsingContext의 그룹의 브라우징 컨텍스트 집합의 크기가 1보다 크다면:
COOP
응답으로 탐색할 때 브라우징 컨텍스트 그룹 전환에 대한 보고 전용 위반 보고서를 대기열에 추가하십시오. 이때
responseCOOP, "reporting
", responseURL,
currentCOOPEnforcementResult의 url,
currentCOOPEnforcementResult의 origin,
responseOrigin, 그리고 referrer를 사용하십시오.
COOP
응답으로부터 탐색할 때 브라우징 컨텍스트 그룹 전환에 대한 보고 전용 위반 보고서를 대기열에 추가하십시오. 이때
currentCOOPEnforcementResult의 교차
출처 오프너 정책, "reporting
", currentCOOPEnforcementResult의 url,
responseURL, currentCOOPEnforcementResult의 origin,
그리고 currentCOOPEnforcementResult의 현재
컨텍스트가 탐색 소스인지 여부를 사용하십시오.
newCOOPEnforcementResult를 반환하십시오.
탐색 응답에 사용할 브라우징 컨텍스트를 얻으려면, 다음과 같은 경우를 가정하십시오. 브라우징 컨텍스트 browsingContext, 샌드박싱 플래그 세트 sandboxFlags, 오프너 정책 navigationCOOP, 그리고 교차 출처 오프너 정책 강제 적용 결과 coopEnforcementResult를 사용하십시오:
만약 browsingContext가 최상위 브라우징 컨텍스트가 아니라면, browsingContext를 반환하십시오.
만약 coopEnforcementResult의 브라우징 컨텍스트 그룹 전환이 필요한지 여부가 false라면:
만약 coopEnforcementResult의 보고 전용으로 인해 브라우징 컨텍스트 그룹 전환이 필요할지 여부가 true라면, browsingContext의 가상 브라우징 컨텍스트 그룹 ID를 새로 고유하게 설정하십시오.
browsingContext를 반환하십시오.
newBrowsingContext를 새로운 최상위 브라우징 컨텍스트 및 문서 생성의 첫 번째 반환 값으로 설정하십시오.
이 경우 브라우징 컨텍스트 그룹 교환이 수행됩니다. browsingContext는 새 문서 객체를 초기화하는 데 사용되지 않습니다. 다른 문서에도 사용되지 않는다면(예: 백/포워드 캐시의 경우), 사용자 에이전트는 이 시점에서 그것을 삭제할 수 있습니다.
만약 navigationCOOP의 값이
"same-origin-plus-COEP
"라면,
newBrowsingContext의 그룹의 교차
출처 격리 모드를 "논리적
"
또는 "구체적
"으로
설정하십시오. 이 선택은 구현
정의입니다.
일부 플랫폼에서는 교차
출처 격리 기능이 요구하는 보안 속성을 제공하는 것이 어렵습니다. "구체적
"은
이에 접근할 수 있게 하고, "논리적
"은
그렇지 않습니다.
만약 sandboxFlags가 비어 있지 않다면:
확인:
navigationCOOP의 값이
"unsafe-none
"입니다.
확인: newBrowsingContext의 팝업 샌드박싱 플래그 세트가 비어 있습니다.
newBrowsingContext의 팝업 샌드박싱 플래그 세트를 복제된 sandboxFlags로 설정하십시오.
newBrowsingContext를 반환하십시오.
액세서-액세스된 관계는 두 브라우징 컨텍스트 간의 액세스가 발생한 관계를 설명하는 열거형입니다. 다음 값들을 가질 수 있습니다:
액세서 브라우징 컨텍스트 또는 그 조상 중 하나가 액세스된 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 오프너 브라우징 컨텍스트인 경우.
액세스된 브라우징 컨텍스트 또는 그 조상 중 하나가 액세서 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 오프너 브라우징 컨텍스트인 경우.
두 브라우징 컨텍스트 accessor와 accessed, JavaScript 속성 이름 P, 그리고 환경 설정 객체 environment를 주어 두 브라우징 컨텍스트 간의 액세스가 보고되어야 하는지 확인하려면:
P가 교차 출처 접근 가능한 창 속성 이름이 아닌 경우, 반환하십시오.
accessorTopDocument를 accessor의 최상위 브라우징 컨텍스트의 활성 문서로 설정하십시오.
accessorInclusiveAncestorOrigins를 accessor의 활성 문서의 포함된 조상 탐색 가능 각각의 출처를 가져와 얻은 목록으로 설정하십시오.
accessedTopDocument를 accessed의 최상위 브라우징 컨텍스트의 활성 문서로 설정하십시오.
accessedInclusiveAncestorOrigins를 accessed의 활성 문서의 포함된 조상 탐색 가능 각각의 출처를 가져와 얻은 목록으로 설정하십시오.
만약 accessorInclusiveAncestorOrigins 중 하나라도 accessorTopDocument의 출처와 동일 출처가 아니거나, accessedInclusiveAncestorOrigins 중 하나라도 accessedTopDocument의 출처와 동일 출처가 아닌 경우, 반환하십시오.
이 방법은 교차 출처의 iframe에 대한 정보를 교차 출처 오프너 정책 보고를 사용한 최상위 프레임에 노출하지 않도록 합니다.
만약 accessor의 최상위 브라우징 컨텍스트의 가상 브라우징 컨텍스트 그룹 ID가 accessed의 최상위 브라우징 컨텍스트의 가상 브라우징 컨텍스트 그룹 ID와 같은 경우, 반환하십시오.
accessorAccessedRelationship를 액세서-액세스된 관계의 값으로 없음으로 설정하십시오.
만약 accessed의 최상위 브라우징 컨텍스트의 오프너 브라우징 컨텍스트가 accessor이거나, accessor의 조상인 경우, accessorAccessedRelationship을 액세서가 오프너임으로 설정하십시오.
만약 accessor의 최상위 브라우징 컨텍스트의 오프너 브라우징 컨텍스트가 accessed이거나, accessed의 조상인 경우, accessorAccessedRelationship을 액세서가 오프니임으로 설정하십시오.
액세스에 대한 위반 보고 큐에 추가, accessorAccessedRelationship, accessorTopDocument의 오리진 오프너 정책, accessedTopDocument의 오리진 오프너 정책, accessor의 활성 문서의 URL, accessed의 활성 문서의 URL, accessor의 최상위 탐색 문맥의 초기 URL, accessed의 최상위 탐색 문맥의 초기 URL, accessor의 활성 문서의 기원, accessed의 활성 문서의 기원, accessor의 최상위 탐색 문맥의 생성 시 오프너 기원, accessed의 최상위 탐색 문맥의 생성 시 오프너 기원, accessorTopDocument의 리퍼러, accessedTopDocument의 리퍼러, P 및 environment을 가지고.
보고서에 보낼 URL을 정화하려면 URL url이 주어졌을 때:
sanitizedURL을 url의 복사본으로 설정하십시오.
사용자 이름을 설정하여 sanitizedURL과 빈 문자열을 전달하십시오.
비밀번호를 설정하여 sanitizedURL과 빈 문자열을 전달하십시오.
정화된 URL의 직렬화를 sanitizedURL의 조각 제외 설정이 true로 설정된 상태에서 반환하십시오.
COOP 응답으로 이동할 때 브라우징 컨텍스트 그룹 전환에 대한 위반 보고를 대기열에 추가하려면 오프너 정책 coop, 문자열 disposition, URL coopURL, URL previousResponseURL, 두 개의 출처 coopOrigin과 previousResponseOrigin, 그리고 참조자 referrer가 주어졌을 때:
만약 coop의 보고서 엔드포인트가 null이면 반환하십시오.
coopValue를 coop의 값으로 설정하십시오.
만약 disposition이 "reporting
"이면, coopValue를 coop의 보고 전용 값으로
설정하십시오.
serializedReferrer를 빈 문자열로 설정하십시오.
만약 referrer가 URL이면, serializedReferrer를 referrer의 직렬화로 설정하십시오.
body를 다음 속성을 포함하는 새 객체로 설정하십시오:
키 | 값 |
---|---|
disposition | disposition |
effectivePolicy | coopValue |
previousResponseURL | 만약 coopOrigin과 previousResponseOrigin이 동일 출처이면, previousResponseURL의 정화된 URL로 설정하십시오. 그렇지 않으면 null로 설정하십시오. |
referrer | serializedReferrer |
type | "navigation-to-response " |
COOP 응답에서 벗어날 때 브라우징 컨텍스트 그룹 전환에 대한 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 문자열 disposition, URL coopURL, URL nextResponseURL, 두 개의 출처 coopOrigin과 nextResponseOrigin, 그리고 boolean isCOOPResponseNavigationSource가 주어졌을 때:
만약 coop의 보고 엔드포인트가 null이면 반환.
coopValue를 coop의 값으로 설정.
만약 disposition이 "reporting
"이면, coopValue를 coop의 보고 전용 값으로
설정.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | disposition |
effectivePolicy | coopValue |
nextResponseURL | 만약 coopOrigin과 nextResponseOrigin이 동일 출처이거나 isCOOPResponseNavigationSource가 true이면, URL을 정화하여 nextResponseURL을 사용. 그렇지 않으면 null. |
type | "navigation-from-response " |
액세스에 대한 위반 보고를 대기열에 추가하기 위해, 주어진 액세서-액세스드 관계 accessorAccessedRelationship, 두 개의 오프너 정책 accessorCOOP와 accessedCOOP, 네 개의 URL accessorURL, accessedURL, accessorInitialURL, accessedInitialURL, 네 개의 출처 accessorOrigin, accessedOrigin, accessorCreatorOrigin과 accessedCreatorOrigin, 두 개의 리퍼러 accessorReferrer와 accessedReferrer, 문자열 propertyName, 그리고 환경 설정 객체 environment가 주어졌을 때:
만약 coop의 보고 엔드포인트가 null이면 반환.
coopValue를 coop의 값으로 설정.
만약 disposition이 "reporting
"이면, coopValue를 coop의 보고 전용 값으로
설정.
만약 accessorAccessedRelationship이 액세서가 오프너라면:
열린 창에 대한 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessorCOOP, accessorURL, accessedURL, accessedInitialURL, accessorOrigin, accessedOrigin, accessedCreatorOrigin, propertyName, 그리고 environment.
오프너에서의 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessedCOOP, accessedURL, accessorURL, accessedOrigin, accessorOrigin, propertyName, 그리고 accessedReferrer.
그렇지 않고, 만약 accessorAccessedRelationship이 액세서가 오프니라면:
오프너에 대한 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessorCOOP, accessorURL, accessedURL, accessorOrigin, accessedOrigin, propertyName, accessorReferrer, 그리고 environment.
열린 창에서의 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessedCOOP, accessedURL, accessorURL, accessorInitialURL, accessedOrigin, accessorOrigin, accessorCreatorOrigin, 그리고 propertyName.
그렇지 않다면:
다른 창에 대한 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessorCOOP, accessorURL, accessedURL, accessorOrigin, accessedOrigin, propertyName, 그리고 environment.
다른 창에서의 액세스 위반 보고를 대기열에 추가를 실행, 주어진 accessedCOOP, accessedURL, accessorURL, accessedOrigin, accessorOrigin, 그리고 propertyName.
오프너에 대한 액세스 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 두 개의 URL coopURL과 openerURL, 두 개의 출처 coopOrigin과 openerOrigin, 문자열 propertyName, 리퍼러 referrer, 그리고 환경 설정 객체 environment가 주어졌을 때:
sourceFile, lineNumber, 그리고 columnNumber를 이 보고를 트리거한 관련 스크립트 URL 및 문제 발생 위치로 설정.
serializedReferrer를 빈 문자열로 설정.
만약 referrer가 URL인 경우, serializedReferrer를 referrer의 직렬화로 설정.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coop의 보고 전용 값 |
property | propertyName |
openerURL | 만약 coopOrigin과 openerOrigin이 동일 출처이면, openerURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
referrer | serializedReferrer |
sourceFile | sourceFile |
lineNumber | lineNumber |
columnNumber | columnNumber |
type | "access-to-opener " |
대기열 body를 "coop
"로 설정하고, coop의
보고 엔드포인트에
coopURL과 environment를 사용.
열린 창에 대한 액세스 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 세 개의 URL coopURL, openedWindowURL 및 initialWindowURL, 세 개의 출처 coopOrigin, openedWindowOrigin, 그리고 openerInitialOrigin, 문자열 propertyName, 그리고 환경 설정 객체 environment가 주어졌을 때:
sourceFile, lineNumber, 그리고 columnNumber를 이 보고를 트리거한 관련 스크립트 URL 및 문제 발생 위치로 설정.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coop의 보고 전용 값 |
property | propertyName |
openedWindowURL | 만약 coopOrigin과 openedWindowOrigin이 동일 출처이면, openedWindowURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
openedWindowInitialURL | 만약 coopOrigin과 openerInitialOrigin이 동일 출처이면, initialWindowURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
sourceFile | sourceFile |
lineNumber | lineNumber |
columnNumber | columnNumber |
type | "access-to-opener " |
대기열 body를 "coop
"로 설정하고, coop의
보고 엔드포인트에
coopURL과 environment를 사용.
다른 창에 대한 액세스 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 두 개의 URL coopURL 및 otherURL, 두 개의 출처 coopOrigin 및 otherOrigin, 문자열 propertyName, 그리고 환경 설정 객체 environment가 주어졌을 때:
sourceFile, lineNumber, 그리고 columnNumber를 이 보고를 트리거한 관련 스크립트 URL 및 문제 발생 위치로 설정.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coop의 보고 전용 값 |
property | propertyName |
otherURL | 만약 coopOrigin과 otherOrigin이 동일 출처이면, otherURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
sourceFile | sourceFile |
lineNumber | lineNumber |
columnNumber | columnNumber |
type | "access-to-opener " |
대기열 body를 "coop
"로 설정하고, coop의
보고 엔드포인트에
coopURL과 environment를 사용.
오프너에서의 액세스에 대한 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 두 개의 URL coopURL 및 openerURL, 두 개의 출처 coopOrigin 및 openerOrigin, 문자열 propertyName, 그리고 리퍼러 referrer가 주어졌을 때:
만약 coop의 보고 엔드포인트가 null이면, 반환.
serializedReferrer를 빈 문자열로 설정.
만약 referrer가 URL인 경우, serializedReferrer를 referrer의 직렬화로 설정.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coop의 보고 전용 값 |
property | propertyName |
openerURL | 만약 coopOrigin과 openerOrigin이 동일 출처이면, openerURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
referrer | serializedReferrer |
type | "access-to-opener " |
열린 창에서의 액세스에 대한 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 세 개의 URL coopURL, openedWindowURL 및 initialWindowURL, 세 개의 출처 coopOrigin, openedWindowOrigin, 그리고 openerInitialOrigin, 그리고 문자열 propertyName이 주어졌을 때:
만약 coop의 보고 엔드포인트가 null이면, 반환.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coopValue |
property | coop의 보고 전용 값 |
openedWindowURL | 만약 coopOrigin과 openedWindowOrigin이 동일 출처이면, openedWindowURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
openedWindowInitialURL | 만약 coopOrigin과 openerInitialOrigin이 동일 출처이면, initialWindowURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
type | "access-to-opener " |
다른 창에서의 액세스에 대한 위반 보고를 대기열에 추가하기 위해, 주어진 오프너 정책 coop, 두 개의 URL coopURL 및 otherURL, 두 개의 출처 coopOrigin 및 otherOrigin, 그리고 문자열 propertyName이 주어졌을 때:
만약 coop의 보고 엔드포인트가 null이면, 반환.
body를 다음 속성을 포함하는 새 객체로 설정:
키 | 값 |
---|---|
disposition | "reporting " |
effectivePolicy | coop의 보고 전용 값 |
property | propertyName |
otherURL | 만약 coopOrigin과 otherOrigin이 동일 출처이면, otherURL의 정화된 URL을 사용하고, 그렇지 않으면 null. |
type | "access-to-opener " |
Headers/Cross-Origin-Embedder-Policy
모든 현재 엔진에서 지원됩니다.
임베더 정책 값은 리소스 소유자의 명시적 허가 없이 크로스 오리진 리소스를 가져오는 것을 제어하는 세 가지 문자열 중 하나입니다.
unsafe-none
"
이 값은 기본값입니다. 이 값을 사용할 때, 크로스 오리진 리소스는 CORS 프로토콜이나
`Cross-Origin-Resource-Policy
`
헤더를 통해 명시적인 허가 없이도 가져올 수 있습니다.
require-corp
"
이 값을 사용할 때, 크로스 오리진 리소스를 가져오려면 서버의 명시적인 허가가 CORS 프로토콜이나
`Cross-Origin-Resource-Policy
`
헤더를 통해 필요합니다.
credentialless
"
이 값을 사용할 때, 크로스 오리진 no-CORS 리소스를 가져오는 경우 자격 증명이 생략됩니다. 그 대가로 명시적인 `Cross-Origin-Resource-Policy
`
헤더는 필요하지 않습니다. 자격 증명이 포함된 다른 요청은 CORS 프로토콜이나
`Cross-Origin-Resource-Policy
`
헤더를 통해 서버의 명시적인 허가가 필요합니다.
"credentialless
"를 지원하기 전에, 구현자들은 다음
두 가지를 지원하는 것이 강력히 권장됩니다:
그렇지 않으면 공격자들이 클라이언트의 네트워크 위치를 이용해 비공개 리소스를 읽을 수 있게 되어, 교차 출처 격리 기능을 악용할 수 있습니다.
임베더 정책 값이 "credentialless
" 또는 "require-corp
"일 때, 교차 출처 격리와 호환됩니다.
임베더 정책은 다음으로 구성됩니다:
값으로, 임베더 정책 값이며, 초기 값은 "unsafe-none
"입니다.
초기 값이 빈 문자열인 보고 엔드포인트 문자열.
초기 값이 "unsafe-none
"인 보고 전용 값, 이는
임베더 정책 값입니다.
초기 값이 빈 문자열인 보고 전용 보고 엔드포인트 문자열.
"coep
" 보고 유형은 값이 "coep
"인 보고
유형입니다. 이 보고 유형은 ReportingObserver
에게 표시됩니다.
`Cross-Origin-Embedder-Policy
`와
`Cross-Origin-Embedder-Policy-Report-Only
` HTTP
응답
헤더는 서버가 임베더 정책을 환경 설정 객체에 대해 선언할 수 있도록
합니다. 이 헤더들은 구조화된
헤더로, 그 값은 토큰이어야 합니다.
[STRUCTURED-FIELDS]
유효한 토큰 값은 임베더 정책
값입니다. 토큰에는
부가적으로 파라미터가 포함될 수 있습니다; 이 중 "report-to
" 파라미터는 적절한 보고 엔드포인트를 식별하는 유효한 URL 문자열을 가질 수 있습니다. [REPORTING]
처리 모델은
(기본적으로
"unsafe-none
") 헤더가
토큰으로 구문 분석될 수 없는 경우 열림 상태로 실패합니다. 여기에는 응답 내에 있는 여러 인스턴스의 `Cross-Origin-Embedder-Policy
`
헤더를 결합하여 우발적으로 생성된 리스트도 포함됩니다:
`Cross-Origin-Embedder-Policy `
| 최종 임베더 정책 값 |
---|---|
헤더가 전달되지 않음 | "unsafe-none "
|
`require-corp `
| "require-corp "
|
`unknown-value `
| "unsafe-none "
|
`require-corp, unknown-value `
| "unsafe-none "
|
`unknown-value, unknown-value `
| "unsafe-none "
|
`unknown-value, require-corp `
| "unsafe-none "
|
`require-corp, require-corp `
| "unsafe-none "
|
(이는 `Cross-Origin-Embedder-Policy-Report-Only
`에도
동일하게 적용됩니다.)
응답 response와 환경 environment에서 임베더 정책을 획득하기 위해:
policy를 새로운 임베더 정책으로 설정합니다.
environment가 비보안 컨텍스트인 경우, policy를 반환합니다.
parsedItem을 구조화된 필드 값을 얻는 것의 결과로 설정합니다.
`Cross-Origin-Embedder-Policy
`와
"item
"을
response의 헤더
목록에서 가져옵니다.
parsedItem이 null이 아니고 parsedItem[0]이 교차 출처 격리와 호환되는 경우:
parsedItem을 구조화된 필드 값을 얻는 것의 결과로 설정합니다.
`Cross-Origin-Embedder-Policy-Report-Only
`와
"item
"을
response의 헤더
목록에서 가져옵니다.
parsedItem이 null이 아니고 parsedItem[0]이 교차 출처 격리와 호환되는 경우:
policy를 반환합니다.
응답 response, 탐색 가능 객체 navigable 및 임베더 정책 responsePolicy을 가지고 내비게이션 응답이 자신의 임베더 정책을 준수하는지 확인하기 위해:
navigable이 자식 탐색 가능 객체이 아니면, true를 반환합니다.
만약 parentPolicy의 보고 전용 값이 교차 출처 격리와
호환되고
responsePolicy의 값이 그렇지 않다면, response,
"navigation
", parentPolicy의 보고 전용
보고
엔드포인트, "reporting
", 및 navigable의 컨테이너 문서의 관련
설정
객체를 사용하여 교차
출처 임베더 정책 상속 위반을 큐에 추가합니다.
만약 parentPolicy의 값이 교차 출처 격리와 호환되지 않거나, responsePolicy의 값이 교차 출처 격리와 호환된다면 true를 반환합니다.
response, "navigation
", parentPolicy의 보고 엔드포인트,
"enforce
", 및 navigable의
컨테이너
문서의 관련 설정
객체를 사용하여 교차
출처 임베더 정책 상속 위반을 큐에 추가합니다.
false를 반환합니다.
WorkerGlobalScope
workerGlobalScope, 환경 설정 객체
owner 및 응답
response를 가지고 글로벌 객체의 임베더 정책을
확인하기 위해:
workerGlobalScope가 DedicatedWorkerGlobalScope
객체가 아니면, true를 반환합니다.
policy를 workerGlobalScope의 임베더 정책으로 설정합니다.
만약 ownerPolicy의 보고 전용 값이 교차 출처 격리와
호환되고, policy의 값이 그렇지 않다면,
response, "worker initialization
", ownerPolicy의 보고
전용 보고
엔드포인트, "reporting
", 및 owner를 사용하여 교차
출처
임베더 정책 상속 위반을 큐에 추가합니다.
만약 ownerPolicy의 값이 교차 출처 격리와 호환되지 않거나, policy의 값이 교차 출처 격리와 호환된다면 true를 반환합니다.
response, "worker initialization
", ownerPolicy의 보고 엔드포인트,
"enforce
", 및 owner를 사용하여 교차
출처 임베더 정책 상속 위반을 큐에 추가합니다.
false를 반환합니다.
응답 response, 문자열 type, 문자열 endpoint, 문자열 disposition 및 환경 설정 객체 settings를 가지고 교차 출처 임베더 정책 상속 위반을 큐에 추가하기 위해:
serialized를 보고를 위한 응답 URL 직렬화의 결과로 설정합니다.
body를 다음 속성을 포함하는 새로운 객체로 설정합니다:
키 | 값 |
---|---|
type | type |
blockedURL | serialized |
disposition | disposition |
큐에 추가합니다
body를 endpoint에서 settings에 대한 "coep
"
보고 유형으로.
샌드박싱 플래그 세트는 잠재적으로 신뢰할 수 없는 리소스의 기능을 제한하기 위해 사용되는 다음 플래그 중 하나 이상의 집합입니다:
이 플래그는 샌드박스된 브라우징 컨텍스트 자체 외의 브라우징 컨텍스트(또는 그 안에 더 중첩된 브라우징 컨텍스트), 보조 브라우징 컨텍스트 (이는 다음에 정의된 샌드박스된 보조 내비게이션 브라우징 컨텍스트 플래그에 의해 보호됨), 및 최상위 브라우징 컨텍스트 (이는 아래에 정의된 사용자 활성화 없는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그와 사용자 활성화 있는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그에 의해 보호됨)로의 이동을 방지합니다.
만약 샌드박스된 보조 내비게이션 브라우징 컨텍스트 플래그가 설정되지 않은 경우, 특정 상황에서는 팝업(새로운 최상위 브라우징 컨텍스트)을 여는 것이 허용될 수 있습니다. 이 브라우징 컨텍스트는 항상 하나의 허용된 샌드박스 내비게이터를 가지고 있으며, 이는 브라우징 컨텍스트가 생성될 때 설정되어 그들을 생성한 브라우징 컨텍스트가 실제로 이를 탐색할 수 있도록 합니다. (그렇지 않으면, 샌드박스 내비게이션 브라우징 컨텍스트 플래그는 팝업이 열렸을 때조차 탐색을 방지할 것입니다.)
이 플래그는 새로운 보조 브라우징 컨텍스트를 생성하는 것을 방지합니다. 예를 들어, target
속성이나 window.open()
메서드를 사용하는 경우가 해당됩니다.
이 플래그는 최상위 브라우징 컨텍스트를 탐색하지 못하게 하고, 최상위 브라우징 컨텍스트를 닫는 것을 방지합니다. 이는 샌드박스된 브라우징 컨텍스트의 활성 창에 일시적 활성화가 없을 때만 적용됩니다.
사용자 활성화 없는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그가 설정되지 않은 경우, 콘텐츠는 최상위 브라우징 컨텍스트를 탐색할 수 있지만, 다른 브라우징 컨텍스트는 여전히 샌드박스 내비게이션 브라우징 컨텍스트 플래그와 샌드박스된 보조 내비게이션 브라우징 컨텍스트 플래그에 의해 보호될 수 있습니다.
이 플래그는 최상위 브라우징 컨텍스트를 탐색하지 못하게 하고, 최상위 브라우징 컨텍스트를 닫는 것을 방지합니다. 이는 샌드박스된 브라우징 컨텍스트의 활성 창에 일시적 활성화가 있을 때만 적용됩니다.
사용자 활성화 없는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그와 마찬가지로, 이 플래그는 최상위 브라우징 컨텍스트에만 영향을 미치며, 설정되지 않은 경우에도 다른 브라우징 컨텍스트는 여전히 다른 플래그에 의해 보호될 수 있습니다.
이 플래그는 콘텐츠를 불투명한 원본으로 강제하여 동일한 원본의 다른 콘텐츠에 접근하지 못하도록 방지합니다.
이 플래그는 또한 스크립트가 document.cookie
IDL 속성에서 읽거나 쓰는 것을 방지하고, localStorage
에 대한 접근을 차단합니다.
이 플래그는 폼 제출을 차단합니다.
이 플래그는 포인터 잠금 API를 비활성화합니다. [POINTERLOCK]
이 플래그는 스크립트 실행을 차단합니다.
이 플래그는 비디오 자동 재생 또는 폼 컨트롤 자동 초점과 같은 자동으로 트리거되는 기능을 차단합니다.
document.domain
브라우징 컨텍스트 플래그
이 플래그는 콘텐츠가 document.domain
세터를 사용하는
것을 방지합니다.
이 플래그는 콘텐츠가 생성하는 보조 브라우징 컨텍스트가 콘텐츠의 활성 샌드박싱 플래그 세트를 상속받도록 하여 샌드박스를 벗어나지 못하게 합니다.
이 플래그는 콘텐츠가 모달 대화 상자를 생성하기 위해 다음 기능 중 어느 것도 사용할 수 없도록 방지합니다:
이 플래그는 화면 방향을 잠그는 기능을 비활성화합니다. [SCREENORIENTATION]
이 플래그는 프레젠테이션 API를 비활성화합니다. [PRESENTATION]
이 플래그는 다운로드 하이퍼링크를 통해 또는 다운로드로 처리되는 내비게이션을 통해 콘텐츠가 다운로드를 시작하거나 인스턴스화하지 못하도록 방지합니다. 다운로드로 처리됨.
이 플래그는 페치 스킴이 아닌 프로토콜로의 내비게이션이 외부 소프트웨어로의 전달되지 않도록 방지합니다.
사용자 에이전트가 문자열 input, 샌드박싱 플래그 세트 output을 가지고 샌드박싱 지시문을 파싱해야 할 때, 다음 단계를 실행해야 합니다:
ASCII 공백으로 input을 분할하여 tokens를 얻습니다.
output을 비워 둡니다.
다음 플래그를 output에 추가합니다:
tokens에 allow-popups
키워드가 포함되어 있지 않다면, 샌드박스된 보조 내비게이션 브라우징
컨텍스트 플래그.
tokens에 allow-top-navigation
키워드가 포함되어 있지 않다면, 사용자
활성화 없는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그.
tokens에 allow-top-navigation-by-user-activation
키워드 또는
allow-top-navigation
키워드가 포함되어 있지 않다면, 사용자
활성화 있는 최상위 내비게이션 샌드박스 브라우징 컨텍스트 플래그.
이것은 allow-top-navigation
이
존재할 경우, allow-top-navigation-by-user-activation
키워드가 효과가 없음을 의미합니다. 이러한 이유로, 두 키워드를 모두 지정하는 것은 문서 적합성 오류입니다.
tokens에 allow-same-origin
키워드가 포함되어 있지 않다면, 샌드박스된 원본 브라우징 컨텍스트 플래그.
allow-same-origin
키워드는 두 가지 경우를 위해 의도되었습니다.
첫째, 동일한 사이트의 콘텐츠가 여전히 샌드박스 내에서 DOM에 접근할 수 있도록 하면서 스크립팅을 비활성화하기 위해 사용될 수 있습니다.
둘째, 제3자 사이트의 콘텐츠를 샌드박스 내에서 삽입하여 팝업 열기 등을 방지하면서, 해당 페이지가 데이터베이스 API를 사용하여 데이터를 저장하는 등의 방식으로 원래 사이트와 통신하는 것을 방지하지 않도록 할 수 있습니다.
tokens에 allow-forms
키워드가 포함되어 있지 않다면, 샌드박스된 폼 브라우징 컨텍스트 플래그.
tokens에 allow-pointer-lock
키워드가 포함되어 있지 않다면, 샌드박스된 포인터 잠금 브라우징 컨텍스트 플래그.
tokens에 allow-scripts
키워드가 포함되어 있지 않다면, 샌드박스된 스크립트 브라우징 컨텍스트 플래그.
tokens에 위에서 정의한 allow-scripts
키워드가 포함되어 있지 않다면, 샌드박스된 자동 기능 브라우징 컨텍스트
플래그.
이 플래그는 스크립트가 활성화되면 이러한 기능들이 어쨌든 가능해지기 때문에 스크립트와 동일한 키워드에 의해 완화됩니다. 그리고 샌드박스 내에서 이를 위해 스크립트를 사용하는 대신 선언적 기능을 사용하는 것이 허용되도록 하는 것이 좋습니다.
tokens에 allow-popups-to-escape-sandbox
키워드가 포함되어 있지 않다면,
샌드박스가 보조 브라우징 컨텍스트로
전파되는 플래그.
tokens에 allow-modals
키워드가 포함되어 있지 않다면, 샌드박스된 모달 플래그.
tokens에 allow-orientation-lock
키워드가 포함되어 있지 않다면, 샌드박스된 화면 방향 잠금 브라우징 컨텍스트
플래그.
tokens에 allow-presentation
키워드가 포함되어 있지 않다면, 샌드박스된 프레젠테이션 브라우징 컨텍스트 플래그.
tokens에 allow-downloads
키워드가 포함되어 있지 않다면, 샌드박스된 다운로드 브라우징 컨텍스트 플래그.
tokens에 allow-top-navigation-to-custom-protocols
키워드,
allow-popups
키워드 또는 allow-top-navigation
키워드가 포함되어 있지 않다면, 샌드박스된 사용자 정의 프로토콜
내비게이션 브라우징 컨텍스트 플래그.
모든 최상위 브라우징 컨텍스트는 팝업 샌드박싱 플래그 세트를 가지고 있으며, 이는 샌드박싱 플래그 세트입니다. 브라우징 컨텍스트가 생성될 때, 해당 팝업 샌드박싱 플래그 세트는 비워져 있어야 합니다. 이는 탐색 가능한 항목을 선택하는 규칙과 탐색 응답을 위한 브라우징 컨텍스트를 얻는 알고리즘에 의해 채워집니다.
모든 iframe
요소는 iframe
샌드박싱 플래그 세트를 가지고 있으며, 이는 샌드박싱 플래그 세트입니다. 특정 시간에 iframe
샌드박싱 플래그
세트에 설정된 플래그는 iframe
요소의
샌드박스
속성에 의해 결정됩니다.
모든 Document
는 활성 샌드박싱 플래그 세트를 가지고 있으며, 이는 샌드박싱 플래그 세트입니다. Document
가 생성될 때, 해당 활성 샌드박싱 플래그 세트는 비워져 있어야 합니다.
이는 탐색 알고리즘에 의해 채워집니다.
모든 CSP 목록 cspList는 CSP 파생 샌드박싱 플래그를 가지고 있으며, 이는 샌드박싱 플래그 세트입니다. 이는 다음 알고리즘의 반환 값입니다:
directives를 빈 순서가 있는 집합으로 설정합니다.
각 cspList의 정책에 대해:
directives가 비어 있다면, 빈 샌드박싱 플래그 세트를 반환합니다.
directive를 directives[directives의 크기 − 1]로 설정합니다.
샌드박싱 지시문을 파싱한 결과를 directive로 반환합니다.
브라우징 컨텍스트 browsing context의 생성 샌드박싱 플래그를 결정하기 위해, null 또는 요소 embedder를 가지고, 다음 샌드박싱 플래그 세트에 존재하는 플래그들의 합집합을 반환합니다:
embedder가 null인 경우: browsing context의 팝업 샌드박싱 플래그 세트에 설정된 플래그.
embedder가 요소인 경우: embedder의 iframe
샌드박싱 플래그 세트에 설정된 플래그.
embedder가 요소인 경우: embedder의 노드 문서의 활성 샌드박싱 플래그 세트에 설정된 플래그.
정책 컨테이너는 구조체로, Document
, WorkerGlobalScope
, 또는 WorkletGlobalScope
에 적용되는 정책을
포함합니다. 이는 다음과 같은 항목을 포함합니다:
CSP 목록. 이는 CSP 목록이며, 초기에는 비어 있습니다.
다른 정책들을 정책 컨테이너로 이동하십시오.
정책 컨테이너를 복제하기 위해, 정책 컨테이너 policyContainer를 사용합니다:
clone을 새로운 정책 컨테이너로 설정합니다.
각 policy를 policyContainer의 CSP 목록에서 clone의 CSP 목록으로 복사하여 추가합니다.
clone을 반환합니다.
url 정책 컨테이너를 기록에 저장해야 하는지를 결정하려면:
페치 응답에서 정책 컨테이너 생성을 수행하기 위해, 응답 response와 환경-또는-null environment가 주어졌을 때:
만약 response의 URL의 스킴이 "blob
"이라면, 정책 컨테이너를 복제한 결과를 response의 URL의 blob URL 항목의 환경의
정책 컨테이너로 반환합니다.
result를 새로운 정책 컨테이너로 설정합니다.
result의 CSP 목록을 response가 주어진 상태에서 응답의 콘텐츠 보안 정책을 파싱한 결과로 설정합니다.
만약 environment가 null이 아니면, result의 임베더 정책을 response와
environment를 가지고 임베더 정책을 얻는 결과로 설정합니다. 그렇지 않으면 "unsafe-none
"으로 설정합니다.
result의 리퍼러 정책을 response를 가지고 리퍼러-정책 헤더를 파싱한 결과로 설정합니다. [REFERRERPOLICY]
result을 반환합니다.
탐색 매개변수 정책 컨테이너 결정을 위해 URL responseURL과 네 개의 정책 컨테이너-또는-null historyPolicyContainer, initiatorPolicyContainer, parentPolicyContainer, 및 responsePolicyContainer가 주어졌을 때:
만약 historyPolicyContainer가 null이 아니라면:
단언: responseURL이 정책 컨테이너를 기록에 저장해야 하는지 요구합니다.
historyPolicyContainer의 복제본을 반환합니다.
만약 responseURL이 about:srcdoc
라면:
만약 responseURL이 로컬이고 initiatorPolicyContainer가 null이 아니라면 initiatorPolicyContainer의 복제본을 반환합니다.
만약 responsePolicyContainer가 null이 아니라면 responsePolicyContainer을 반환합니다.
새로운 정책 컨테이너를 반환합니다.
작업자 글로벌 스코프의 정책 컨테이너를 초기화하기 위해, WorkerGlobalScope
workerGlobalScope, 응답 response, 및 환경 environment가 주어졌을 때:
그 외의 경우, workerGlobalScope의 정책 컨테이너를 response와 environment가 주어졌을 때 페치 응답에서 정책 컨테이너 생성의 결과로 설정합니다.
Window
, WindowProxy
, 및 Location
객체에 대한 보안 인프라일반적으로 객체는 출처 간에 접근할 수 없지만, 웹 플랫폼은 웹이 의존하는 몇 가지 기존 예외가 없으면 웹 플랫폼 자체를 충실하게 유지할 수 없습니다.
이 섹션은 JavaScript 사양의 용어와 타이포그래피 규칙을 사용합니다. [JAVASCRIPT]
보안 검사를 수행할 때, platformObject, identifier, 및 type이 주어지면, 다음 단계를 수행합니다:
각 e에 대해 CrossOriginProperties(platformObject):
만약 SameValue(e.[[Property]], identifier)가 true이면:
만약 type이 "method
"이고 e에 [[NeedsGet]] 또는 [[NeedsSet]]이
없다면, 반환합니다.
그렇지 않고, 만약 type이 "getter
"이고 e.[[NeedsGet]]이 true라면,
반환합니다.
그렇지 않고, 만약 type이 "setter
"이고 e.[[NeedsSet]]이 true라면,
반환합니다.
만약 IsPlatformObjectSameOrigin(platformObject)이
false이면, "SecurityError
" DOMException
을
발생시킵니다.
Window
및 Location
객체는
모두 [[CrossOriginPropertyDescriptorMap]] 내부 슬롯을 가지고 있으며, 그 값은 처음에
비어 있는 맵입니다.
[[CrossOriginPropertyDescriptorMap]]
내부 슬롯은 (currentGlobal, objectGlobal, propertyKey) 튜플을 키로 하고 속성 설명자를 값으로 가지는 맵을
포함하며, 이는 currentGlobal이 Window
또는
Location
객체를 objectGlobal에서 검사할 때 스크립트에 보이는 내용을 메모이제이션한 것입니다. 이는 나중에 조회할 때 CrossOriginGetOwnPropertyHelper에
의해 게으르게 채워집니다.
사용자 에이전트는 값의 어떤 부분에 대한 참조도 없을 때, 맵에 보관된 값과 그에 상응하는 키를 가비지 수집할 수 있도록 허용해야 합니다. 즉, 가비지 수집이 관찰되지 않는 한 가능합니다.
예를 들어, const href = Object.getOwnPropertyDescriptor(crossOriginLocation, "href").set
를
사용할 경우, 값과 그에 해당하는 키는 관찰될 수 있으므로 가비지 수집되지 않습니다.
사용자 에이전트는 document.domain
이
설정되면 맵에서 키-값 쌍을 제거하는 최적화를 수행할 수 있습니다. 이는 document.domain
이
이전 값을 다시 참조할 수 없으므로 관찰되지 않습니다.
예를 들어, www.example.com에서 document.domain
을
"example.com
"으로 설정하면, 사용자 에이전트는 키의 일부가 www.example.com인 모든 키-값 쌍을 맵에서 제거할 수 있습니다. 이는
www.example.com이 다시는 출처의 일부가 될 수 없으므로 해당 값을 맵에서 다시
조회할 수 없기 때문입니다.
만약 O가 Location
객체라면, 다음을 반환합니다:
« { [[Property]]: "href
", [[NeedsGet]]: false, [[NeedsSet]]: true },
{ [[Property]]: "replace
" } ».
다음을 반환합니다:
« { [[Property]]: "window
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "self
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "location
", [[NeedsGet]]: true, [[NeedsSet]]: true },
{ [[Property]]: "close
" },
{ [[Property]]: "closed
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "focus
" },
{ [[Property]]: "blur
" },
{ [[Property]]: "frames
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "length
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "top
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "opener
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "parent
", [[NeedsGet]]: true, [[NeedsSet]]: false },
{ [[Property]]: "postMessage
" } ».
이 추상 연산은 Completion Record를 반환하지 않습니다.
인덱스된 속성들은 이 알고리즘에서 safelisting될 필요가 없습니다. 이는 WindowProxy
객체에 의해 직접 처리됩니다.
JavaScript 속성 이름 P는 "window
", "self
", "location
",
"close
", "closed
", "focus
", "blur
", "frames
",
"length
", "top
", "opener
", "parent
",
"postMessage
" 또는 배열 인덱스 속성 이름일 때 cross-origin 접근 가능한 window 속성 이름입니다.
만약 P가 "then
", %Symbol.toStringTag%, %Symbol.hasInstance%, 또는 %Symbol.isConcatSpreadable%라면,
다음을 반환합니다:
PropertyDescriptor{ [[Value]]: undefined, [[Writable]]:
false, [[Enumerable]]: false, [[Configurable]]: true }.
"SecurityError
" DOMException
을
발생시킵니다.
이 추상 연산은 Completion Record를 반환하지 않습니다.
여기서 현재
설정 객체는 대략적으로 "호출자"에 해당합니다. 왜냐하면 이 검사는 getter/setter/메서드와 관련된 실행 컨텍스트가 JavaScript 실행 컨텍스트 스택에 올라가기 전에 수행되기 때문입니다. 예를 들어, 코드
w.document
에서 이 단계는 document
getter에 도달하기
전에 [[Get]] 알고리즘의 일부로 호출됩니다.
이 추상 연산이 undefined를 반환하고 사용자 정의 동작이 없는 경우, 호출자는 "SecurityError
" DOMException
을
발생시켜야 합니다. 실제로는 호출자가 CrossOriginPropertyFallback을
호출하여 이를 처리합니다.
crossOriginKey를 현재 설정 객체, O의 관련 설정 객체, 그리고 P로 구성된 튜플로 정의합니다.
CrossOriginProperties(O)의 각 e에 대해:
만약 SameValue(e.[[Property]], P)가 true이면:
만약 O의 [[CrossOriginPropertyDescriptorMap]] 내부 슬롯의 값이 crossOriginKey를 키로 하는 엔트리를 포함하고 있다면, 해당 엔트리의 값을 반환합니다.
originalDesc를 OrdinaryGetOwnProperty(O, P)로 정의합니다.
crossOriginDesc를 undefined로 정의합니다.
만약 e.[[NeedsGet]] 및 e.[[NeedsSet]]이 존재하지 않는다면:
value를 originalDesc.[[Value]]로 정의합니다.
만약 IsCallable(value)가 true라면, value를 현재 영역에서 생성된 익명 내장 함수로 설정하며, 이는 객체 O에서 IDL 연산 P와 동일한 단계를 수행합니다.
crossOriginDesc를 PropertyDescriptor{ [[Value]]: value, [[Enumerable]]: false, [[Writable]]: false, [[Configurable]]: true }로 설정합니다.
그 외의 경우:
crossOriginGet를 undefined로 정의합니다.
만약 e.[[NeedsGet]]이 true라면, crossOriginGet을 현재 영역에서 생성된 익명 내장 함수로 설정하며, 이는 객체 O에서 IDL 속성 P의 getter와 동일한 단계를 수행합니다.
crossOriginSet를 undefined로 정의합니다.
만약 e.[[NeedsSet]]이 true라면, crossOriginSet을 현재 영역에서 생성된 익명 내장 함수로 설정하며, 이는 객체 O에서 IDL 속성 P의 setter와 동일한 단계를 수행합니다.
crossOriginDesc를 PropertyDescriptor{ [[Get]]: crossOriginGet, [[Set]]: crossOriginSet, [[Enumerable]]: false, [[Configurable]]: true }로 설정합니다.
O의 [[CrossOriginPropertyDescriptorMap]] 내부 슬롯에 crossOriginKey를 키로 하고 crossOriginDesc를 값으로 가지는 엔트리를 생성합니다.
crossOriginDesc를 반환합니다.
undefined를 반환합니다.
이 추상 연산은 Completion Record를 반환하지 않습니다.
여기에서 생성된 속성 설명자가 설정 가능하도록 한 이유는 JavaScript 명세서에서 요구하는 내부 필수 메서드의 불변성을 보존하기 위함입니다. 특히, 속성의 값이 탐색의 결과로 변경될 수 있기 때문에, 속성이 설정 가능하도록 하는 것이 요구됩니다. (그러나 호환성 문제로 인해 이러한 불변성을 보존할 수 없는 경우가 있습니다. 이와 관련된 내용은 tc39/ecma262 이슈 #672 및 이 명세서의 다른 참조에서 확인할 수 있습니다.) [JAVASCRIPT]
이 속성 설명자가 동일 출처 동작과 일치하지 않음에도 불구하고 열거되지 않도록 설정한 이유는 기존 웹 콘텐츠와의 호환성을 위해서입니다. 자세한 내용은 이슈 #3183를 참조하십시오.
desc를 ? O.[[GetOwnProperty]](P)로 정의합니다.
Assert: desc가 undefined가 아님을 확인합니다.
만약 IsDataDescriptor(desc)가 true이면, desc.[[Value]]를 반환합니다.
Assert: IsAccessorDescriptor(desc)가 true임을 확인합니다.
getter를 desc.[[Get]]로 정의합니다.
만약 getter가 undefined이면, "SecurityError
" DOMException
을
발생시킵니다.
? Call(getter, Receiver)을 반환합니다.
desc를 ? O.[[GetOwnProperty]](P)로 정의합니다.
Assert: desc가 undefined가 아님을 확인합니다.
만약 desc.[[Set]]이 존재하고 그 값이 undefined가 아니면:
? Call(setter, Receiver, « V »)을 수행합니다.
true를 반환합니다.
"SecurityError
" DOMException
을
발생시킵니다.
keys를 새로 빈 목록으로 정의합니다.
CrossOriginProperties(O)의 각 e에 대해, e.[[Property]]를 keys에 추가합니다.
keys와 « "then
", %Symbol.toStringTag%, %Symbol.hasInstance%, %Symbol.isConcatSpreadable% »의 연결을
반환합니다.
이 추상 연산은 Completion Record를 반환하지 않습니다.
Window
객체모든 현재 엔진에서 지원됩니다.
[Global =Window ,
Exposed =Window ,
LegacyUnenumerableNamedProperties ]
interface Window : EventTarget {
// 현재 브라우징 컨텍스트
[LegacyUnforgeable ] readonly attribute WindowProxy window ;
[Replaceable ] readonly attribute WindowProxy self ;
[LegacyUnforgeable ] readonly attribute Document document ;
attribute DOMString name ;
[PutForwards =href , LegacyUnforgeable ] readonly attribute Location location ;
readonly attribute History history ;
readonly attribute Navigation navigation ;
readonly attribute CustomElementRegistry customElements ;
[Replaceable ] readonly attribute BarProp locationbar ;
[Replaceable ] readonly attribute BarProp menubar ;
[Replaceable ] readonly attribute BarProp personalbar ;
[Replaceable ] readonly attribute BarProp scrollbars ;
[Replaceable ] readonly attribute BarProp statusbar ;
[Replaceable ] readonly attribute BarProp toolbar ;
attribute DOMString status ;
undefined close ();
readonly attribute boolean closed ;
undefined stop ();
undefined focus ();
undefined blur ();
// 다른 브라우징 컨텍스트
[Replaceable ] readonly attribute WindowProxy frames ;
[Replaceable ] readonly attribute unsigned long length ;
[LegacyUnforgeable ] readonly attribute WindowProxy ? top ;
attribute any opener ;
[Replaceable ] readonly attribute WindowProxy ? parent ;
readonly attribute Element ? frameElement ;
WindowProxy ? open (optional USVString url = "", optional DOMString target = "_blank", optional [LegacyNullToEmptyString ] DOMString features = "");
// 이 객체는 글로벌 객체이므로, IDL 명명된 getter는 NamedPropertiesObject 별난 객체를 프로토타입 체인에 추가합니다.
// 사실, 이는 글로벌 객체를 별난 객체로 만들지 않습니다.
// 인덱스 접근은 WindowProxy 별난 객체에 의해 처리됩니다.
getter object (DOMString name );
// 사용자 에이전트
readonly attribute Navigator navigator ;
[Replaceable ] readonly attribute Navigator clientInformation ; // .navigator의 레거시 별명
readonly attribute boolean originAgentCluster ;
// 사용자 프롬프트
undefined alert ();
undefined alert (DOMString message );
boolean confirm (optional DOMString message = "");
DOMString ? prompt (optional DOMString message = "", optional DOMString default = "");
undefined print ();
undefined postMessage (any message , USVString targetOrigin , optional sequence <object > transfer = []);
undefined postMessage (any message , optional WindowPostMessageOptions options = {});
// 폐기된 멤버도 포함
};
Window includes GlobalEventHandlers ;
Window includes WindowEventHandlers ;
dictionary WindowPostMessageOptions : StructuredSerializeOptions {
USVString targetOrigin = "/";
};
window.window
모든 현재 엔진에서 지원됩니다.
window.frames
모든 현재 엔진에서 지원됩니다.
window.self
모든 현재 엔진에서 지원됩니다.
이 속성들은 모두 window를 반환합니다.
window.document
모든 현재 엔진에서 지원됩니다.
window과 연결된 Document
를
반환합니다.
document.defaultView
모든 현재 엔진에서 지원됩니다.
document과 연결된 Window
를 반환하며, 없을
경우 null을 반환합니다.
Window
객체에는 Document
객체인 연관된 Document
가 있습니다. 이는 Document
객체입니다. 이 객체는 Window
객체가 생성될 때 설정되며, 초기 about:blank
Document
에서 탐색이 이루어질 때만 변경됩니다.
Window
의 탐색 컨텍스트는 해당 연관된 Document
의 탐색 컨텍스트입니다. 이는 null이거나 탐색 컨텍스트입니다.
Window
의 탐색 가능은 탐색
가능으로, 해당 Window
의 연관된 Document
의
활성 문서인 것이며, 그런 탐색 가능이 없다면 null입니다.
window
, frames
, 및 self
접근자 단계는 this의 관련 영역의
[[GlobalEnv]].[[GlobalThisValue]]를 반환하는 것입니다.
document
접근자 단계는 this의 연관된 Document
를
반환하는 것입니다.
Document
객체는 Window
객체와 연관되어 있으며, 이 객체는 새로운
Document
객체를 생성하는 탐색 알고리즘이 탐색 컨텍스트에서 처음으로 페이지를 로드할 때 한 번 변경될 수 있습니다.
이 특정 경우에는 초기 about:blank
페이지의 Window
객체가 재사용되며 새로운 Document
객체를 얻게 됩니다.
defaultView
접근자
단계는 다음과 같습니다:
this의
탐색 컨텍스트의 WindowProxy
객체를 반환합니다.
모든 현재 엔진에서 지원됩니다.
역사적인 이유로 Window
객체는 HTMLDocument
라는 이름의 쓰기 가능, 설정 가능, 열거 불가능한 속성을 가져야 하며, 그 값은 Document
인터페이스 객체여야 합니다.
window = window.open([ url [, target [, features ] ] ])
모든 현재 엔진에서 지원됩니다.
새 창을 열어 url을 표시합니다 (기본값은 "about:blank
")
및 이를 반환합니다. target (기본값은 "_blank
")은 새 창의 이름을 제공합니다. 해당 이름을 가진 창이 이미 존재하면 해당 창이
재사용됩니다. features 인수는 쉼표로 구분된
토큰 집합을 포함할 수 있습니다:
noopener
"
noreferrer
"
이들은 하이퍼링크에서 noopener
및 noreferrer
링크 타입과 동일하게 동작합니다.
popup
"
새 창에 최소한의 웹 브라우저 사용자 인터페이스를 제공하도록 사용자 에이전트에 권장합니다. (모든 BarProp
객체에서 visible
접근자에도 영향을 미칩니다.)
globalThis. open( "https://email.example/message/CAOOOkFcWW97r8yg=SsWg7GgCmp4suVX9o85y8BvNRqMjuc5PXg" , undefined , "noopener,popup" );
window.name [ = value ]
모든 현재 엔진에서 지원됩니다.
창의 이름을 반환합니다.
이름을 변경할 수 있습니다.
window.close()
모든 현재 엔진에서 지원됩니다.
창을 닫습니다.
window.closed
모든 현재 엔진에서 지원됩니다.
창이 닫힌 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.
window.stop()
모든 현재 엔진에서 지원됩니다.
문서 로드를 취소합니다.
윈도우 열기 단계는 문자열 url, 문자열 target 및 문자열 features가 주어졌을 때 다음과 같이 수행됩니다:
sourceDocument를 엔트리 글로벌 객체의 연관된
Document
로 설정합니다.
만약 target이 빈 문자열이면, target을 "_blank
"로 설정합니다.
tokenizedFeatures를 features를 토큰화한 결과로 설정합니다.
noopener와 noreferrer를 false로 설정합니다.
만약 tokenizedFeatures["noopener
"]가 존재하면:
noopener를 tokenizedFeatures["noopener
"]를
불리언 특징으로 파싱한 결과로 설정합니다.
tokenizedFeatures["noopener
"]를 제거합니다.
만약 tokenizedFeatures["noreferrer
"]가 존재하면:
noreferrer를 tokenizedFeatures["noreferrer
"]를
불리언 특징으로 파싱한 결과로 설정합니다.
tokenizedFeatures["noreferrer
"]를 제거합니다.
referrerPolicy를 빈 문자열로 설정합니다.
만약 noreferrer가 true이면, noopener를 true로 설정하고 referrerPolicy를
"no-referrer
"로 설정합니다.
targetNavigable과 windowType를 탐색 가능한 객체를 선택하는 규칙을 target, sourceDocument의 노드 탐색 가능한 객체와 noopener를 사용하여 적용한 결과로 설정합니다.
만약 링크를 클릭하여 새 탭에서 열 수 있는 사용자 에이전트가 있고, 사용자가 새 탭에서 열기 위해 Control-클릭을 수행하고, onclick
핸들러가 window.open()
API를 사용하여 페이지를 iframe
요소에 열 경우, 사용자 에이전트는 선택된 타겟 브라우징 컨텍스트 대신 새 탭을 타겟으로 할 수 있습니다.
만약 targetNavigable이 null이면, null을 반환합니다.
만약 windowType이 "new and unrestricted
" 또는 "new with no opener
" 중
하나이면:
targetNavigable의 활성 브라우징 컨텍스트의 팝업 여부를 팝업 창이 요청되었는지 확인한 결과로 설정합니다. tokenizedFeatures가 주어졌을 때.
브라우징 컨텍스트 기능 설정을 targetNavigable의 활성 브라우징 컨텍스트에 대해 수행합니다. [CSSOMVIEW]에 따라 tokenizedFeatures가 주어졌을 때.
urlRecord를 URL 레코드로 설정합니다.
about:blank
.
만약 url이 빈 문자열이 아니면, urlRecord를 URL 인코딩-파싱 결과로 설정합니다. url과 엔트리 설정 객체를 기준으로.
만약 urlRecord가 실패하면, "SyntaxError
" DOMException
을
던집니다.
만약 urlRecord가 about:blank
와
일치하면, targetNavigable의 활성 문서와
urlRecord가 주어졌을 때 URL
및 기록 업데이트 단계를 수행합니다.
이것은 url이 about:blank?foo
와 같은 경우에 필요합니다. 만약 url이 단순히
about:blank
라면, 이 단계는 아무 일도 하지 않습니다.
그렇지 않으면, 탐색을 targetNavigable에 대해 수행합니다. sourceDocument를 사용하여, referrerPolicy를 referrerPolicy로 설정하고 예외 활성화를 true로 설정합니다.
그렇지 않으면:
만약 url이 빈 문자열이 아니면:
urlRecord를 URL 인코딩-파싱 결과로 설정합니다. url과 엔트리 설정 객체를 기준으로.
만약 urlRecord가 실패하면, "SyntaxError
" DOMException
을
던집니다.
탐색을 targetNavigable에 대해 수행합니다. sourceDocument를 사용하여, referrerPolicy를 referrerPolicy로 설정하고 예외 활성화를 true로 설정합니다.
만약 noopener가 false이면, targetNavigable의 활성 브라우징 컨텍스트의 오프너 브라우징 컨텍스트를 sourceDocument의 브라우징 컨텍스트로 설정합니다.
만약 noopener가 true이거나 windowType이 "new with no opener
"이면, null을 반환합니다.
targetNavigable의 활성
WindowProxy
를 반환합니다.
open(url, target, features)
메서드 단계는
url, target, features가 주어졌을 때 윈도우 열기 단계를 수행하는 것입니다.
이 메서드는 기존 브라우징 컨텍스트를 탐색하거나, 보조 브라우징 컨텍스트를 열고 탐색하는 메커니즘을 제공합니다.
features 인수를 토큰화하려면:
tokenizedFeatures를 새 순서가 있는 맵으로 설정합니다.
position을 features의 첫 번째 코드 포인트로 설정합니다.
반복하며 position이 features의 끝을 지나지 않는 동안:
name을 빈 문자열로 설정합니다.
value를 빈 문자열로 설정합니다.
코드 포인트 시퀀스를 수집하여, features에서 position을 기준으로 피처 구분자를 만납니다. 이 과정은 이름 앞의 선행 구분자를 건너뜁니다.
코드 포인트 시퀀스를 수집하여, features에서 position을 기준으로 피처 구분자가 아닌 코드를 만납니다. 수집된 문자를 name으로 설정하고, ASCII 소문자로 변환합니다.
name을 피처 이름을 정규화한 결과로 설정합니다.
반복하며 position이 features의 끝을 지나지 않고, features의 position에 있는 코드 포인트가 U+003D (=)가 아닌 동안:
이는 첫 번째 U+003D (=)로 건너뛰지만, U+002C (,)나 비구분자를 지나지 않습니다.
만약 features의 position에 있는 코드 포인트가 피처 구분자인 경우:
position이 features의 끝을 지나지 않고, features의 position에 있는 코드 포인트가 피처 구분자인 동안:
만약 features의 position에 있는 코드 포인트가 U+002C (,)이면, 반복을 중단합니다.
position을 1만큼 증가시킵니다.
이는 첫 번째 비구분자로 건너뛰지만, U+002C (,)를 지나지 않습니다.
코드 포인트 시퀀스를 수집하여, features에서 position을 기준으로 피처 구분자가 아닌 코드 포인트를 만납니다. value를 수집된 코드 포인트로 설정하고, ASCII 소문자로 변환합니다.
만약 name이 빈 문자열이 아니면, tokenizedFeatures[name]을 value로 설정합니다.
tokenizedFeatures를 반환합니다.
윈도우 피처가 설정되어 있는지 확인하려면, tokenizedFeatures, featureName 및 defaultValue가 주어졌을 때:
만약 tokenizedFeatures[featureName]이 존재하면, tokenizedFeatures[featureName]을 불리언 피처로 파싱한 결과를 반환합니다.
defaultValue를 반환합니다.
팝업 윈도우가 요청되었는지 확인하려면, tokenizedFeatures가 주어졌을 때:
만약 tokenizedFeatures가 비어 있으면, false를 반환합니다.
만약 tokenizedFeatures["popup
"]이 존재하면, tokenizedFeatures["popup
"]을
불리언 피처로 파싱한 결과를 반환합니다.
location을 윈도우 피처가 설정되어 있는지
확인한 결과로 설정합니다. tokenizedFeatures, "location
", 및 false를 기준으로.
toolbar를 윈도우 피처가 설정되어
있는지 확인한 결과로 설정합니다. tokenizedFeatures, "toolbar
", 및 false를 기준으로.
만약 location과 toolbar가 모두 false이면, true를 반환합니다.
menubar를 윈도우 피처가 설정되어
있는지 확인한 결과로 설정합니다. tokenizedFeatures, "menubar
", 및 false를 기준으로.
만약 menubar가 false이면, true를 반환합니다.
resizable를 윈도우 피처가 설정되어
있는지 확인한 결과로 설정합니다. tokenizedFeatures, "resizable
", 및 true를 기준으로.
만약 resizable가 false이면, true를 반환합니다.
scrollbars를 윈도우 피처가 설정되어
있는지 확인한 결과로 설정합니다. tokenizedFeatures, "scrollbars
", 및 false를 기준으로.
만약 scrollbars가 false이면, true를 반환합니다.
status를 윈도우 피처가 설정되어
있는지 확인한 결과로 설정합니다. tokenizedFeatures, "status
", 및 false를 기준으로.
만약 status가 false이면, true를 반환합니다.
false를 반환합니다.
코드 포인트가 피처 구분자이려면, ASCII 공백 문자이거나, U+003D (=) 또는 U+002C (,)이어야 합니다.
레거시 이유로 인해 일부 피처 이름에는 몇 가지 별칭이 있습니다. 피처 이름을 정규화하려면 name을 기준으로 스위치를 전환하십시오:
screenx
"
left
"를 반환합니다.
screeny
"
top
"을 반환합니다.
innerwidth
"
width
"를 반환합니다.
innerheight
"
height
"을 반환합니다.
불리언 피처를 파싱하려면, 문자열 value가 주어졌을 때:
만약 value가 빈 문자열이면, true를 반환합니다.
만약 value가 "yes
"라면, true를 반환합니다.
만약 value가 "true
"라면, true를 반환합니다.
parsed를 정수를 파싱하는 규칙에 따라 value를 파싱한 결과로 설정합니다.
만약 parsed가 오류라면, 0으로 설정합니다.
만약 parsed가 0이면 false를 반환하고, 그렇지 않으면 true를 반환합니다.
name
getter 단계는:
name
setter 단계는:
탐색 가능 항목이 다른 출처로 탐색될 때 이름이 재설정됩니다.
close()
메서드 단계는:
만약 thisTraversable가 최상위 탐색 가능 항목이 아니면, 반환합니다.
만약 thisTraversable의 is closing이 true이면, 반환합니다.
browsingContext를 thisTraversable의 활성 브라우징 컨텍스트로 설정합니다.
sourceSnapshotParams를 thisTraversable의 활성 문서를 기준으로 스냅샷 소스 스냅샷 매개변수를 스냅샷하는 결과로 설정합니다.
다음 조건이 모두 true이면:
thisTraversable가 스크립트로 닫을 수 있는 경우;
현재 글로벌 객체의 탐색 가능 항목이 이 탐색 가능 항목을 탐색할 수 있도록 thisTraversable를 허용하는 경우;
다음과 같이 합니다:
thisTraversable의 is closing을 true로 설정합니다.
작업을 큐에 추가하여 DOM 조작 작업 소스에서 thisTraversable를 닫습니다.
탐색 가능 항목은 스크립트로 닫을 수 있는 경우, 활성 브라우징 컨텍스트가 보조 브라우징 컨텍스트이고, 이 컨텍스트가 스크립트에 의해 생성된 경우(사용자의 동작에 의한 것이 아닌 경우), 또는 최상위 탐색 가능 항목의 세션 기록 항목의 크기가 1인 경우입니다.
closed
getter 단계는 this의 브라우징 컨텍스트가 null이거나, is closing이
true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
stop()
메서드 단계는:
Window
객체에 대한 인덱스 접근window.length
현재 모든 엔진에서 지원합니다.
문서 트리 자식 탐색 가능 항목의 수를 반환합니다.
window[index]
지정된 문서 트리 자식 탐색 가능 항목에 해당하는
WindowProxy
를
반환합니다.
length
getter 단계는 this의 연결된 문서
의 문서 트리 자식 탐색 가능 항목의 크기를 반환합니다.
문서 트리 자식 탐색 가능 항목에 대한 인덱스 접근은
WindowProxy
객체의 [[GetOwnProperty]] 내부 메서드를 통해 정의됩니다.
Window
객체에 대한 이름 접근window[name]
지정된 요소 또는 요소 집합을 반환합니다.
일반적으로 이 API를 사용하는 것은 코드의 견고성을 떨어뜨릴 수 있습니다. 웹 플랫폼에 새로운 기능이 추가됨에 따라 이 API에 매핑되는 ID가 시간이 지남에 따라 변경될 수 있습니다.
대신 document.getElementById()
또는 document.querySelector()
를 사용하세요.
Window
객체 window의 문서 트리 자식 탐색 가능 대상 이름 속성 집합은 다음 단계들을 실행하여
반환되는 값입니다:
children을 window의 연결된 문서
의 문서 트리 자식 탐색 가능 항목으로 설정합니다.
firstNamedChildren을 빈 순서가 있는 집합으로 설정합니다.
각 navigable에 대해 children을 반복합니다:
names를 빈 순서가 있는 집합으로 설정합니다.
각 navigable에 대해 firstNamedChildren을 반복합니다:
names을 반환합니다.
아래 예제와 같이 https://example.org/
에 호스팅된 페이지에서, https://elsewhere.example/
가 window.name
을
"spices
"로 설정했다고 가정하면, 모든 것이 로드된 후 window.spices
를 평가하면 undefined가 반환됩니다:
< iframe src = https://elsewhere.example.com/ ></ iframe >
< iframe name = spices ></ iframe >
Window
객체는 이름 지정
속성을 지원합니다. window의 지원되는 속성 이름은 각 속성을 기여한 요소에 따라 트리 순서로 구성되며, 나중에 추가된 중복 항목은 무시됩니다:
window의 문서 트리 하위 탐색 가능한 대상 이름 속성 세트;
모든 name
콘텐츠 속성의 값, 해당 요소는 비어 있지 않은 embed
,
form
,
img
, 그리고
object
요소들이며,
이들은 비어 있지 않은 name
콘텐츠 속성을 가지고 있고, window의 연관된 Document
를
문서 트리로
가지고 있는 경우;
모든 HTML 요소들의 비어 있지 않은 id
콘텐츠
속성의 값,
해당 요소는 window의 연관된 Document
를
문서 트리로
가지고 있는 경우.
이름이 지정된 속성의 값을 결정하기 위해 name을 사용하여
Window
객체 window에서 다음
단계를 사용하여 반환된 값을 반환합니다:
objects을 window의 이름이 name인 이름이 지정된 객체의 목록으로 설정합니다.
이 알고리즘이 실행되지 않았다면 해당 속성은 존재하지 않으므로 적어도 하나 이상의 객체가 있어야 합니다.
objects에 탐색 가능 항목이 포함되어 있다면:
container을 window의 연결된 문서
의 후손 중
objects에 포함된 콘텐츠 탐색 가능 항목이 있는 첫 번째 탐색 가능
컨테이너로 설정합니다.
container의 콘텐츠 탐색 가능 항목의 활성 WindowProxy
를 반환합니다.
그렇지 않고 objects에 하나의 요소만 있는 경우 해당 요소를 반환합니다.
그렇지 않으면, window의 연관된 Document
에
루트를 둔 HTMLCollection
을
반환하며,
해당 컬렉션의 필터는 window의 이름 name과 일치하는 이름이 지정된 객체들만 매칭합니다. (정의에 따라,
이들은 모두 요소가 됩니다.)
이름이 지정된 객체들은 Window
객체 window에서 위
알고리즘의 목적을 위해 다음과 같이 구성됩니다:
window의 연결된 문서
의 문서 트리 자식 탐색 가능 항목 중
name이 이름으로 지정된 항목들;
window의 연결된 문서
의 임베드 요소, 폼 요소, 이미지 요소 또는 오브젝트 요소 중
name이 이름으로 지정된 요소들;
Window
인터페이스는 [Global]
확장 속성을 가지고 있으므로, 그 이름 속성들은 이름 지정
속성 객체의 규칙을 따르며, 레거시 플랫폼
객체의 규칙은 따르지 않습니다.
window.top
모든 현재 엔진에서 지원됩니다.
최상위 탐색 가능한 WindowProxy
에
대한 참조를 반환합니다.
window.opener [ = value ]
모든 현재 엔진에서 지원됩니다.
열린 탐색 문맥에 대한 WindowProxy
를
반환합니다.
해당 문맥이 없거나 null로 설정된 경우 null을 반환합니다.
null로 설정할 수 있습니다.
window.parent
모든 현재 엔진에서 지원됩니다.
부모 탐색 가능한 WindowProxy
를
반환합니다.
window.frameElement
모든 현재 엔진에서 지원됩니다.
탐색 가능한 컨테이너 요소를 반환합니다.
해당 요소가 없거나 교차 출처 상황에서 null을 반환합니다.
top
속성의 getter 단계는 다음과 같습니다:
현재 navigable
가 null인 경우, null을 반환합니다.
현재 navigable
의 최상위 탐색 가능한 WindowProxy
를 반환합니다.
opener
속성의 getter 단계는 다음과 같습니다:
현재 browsing context
가 null인 경우, null을 반환합니다.
현재 opener browsing context
가 null인 경우, null을 반환합니다.
현재 opener browsing context
의 WindowProxy
객체를 반환합니다.
opener
속성의 setter 단계는 다음과 같습니다:
지정된 값이 null인 경우, 현재의 browsing context
의 opener browsing context
를 null로 설정합니다.
지정된 값이 null이 아닌 경우, opener
속성 값을 설정합니다.
window.opener
를
null로 설정하면 opener 브라우징 컨텍스트 참조가
삭제됩니다. 실제로 이는 이후 스크립트가 opener 브라우징 컨텍스트의 Window
객체에 접근하지 못하도록
방지합니다.
기본적으로 스크립트는 opener 브라우징 컨텍스트의 Window
객체에 window.opener
getter를 통해 접근할 수 있습니다. 예를 들어, 스크립트는 window.opener.location
을 설정하여 opener 브라우징 컨텍스트를 탐색할 수
있습니다.
parent
속성의 getter 단계는 다음과 같습니다:
현재 navigable
가 null인 경우, null을 반환합니다.
현재 navigable
의 부모가 존재하는 경우, 해당 부모의 WindowProxy
를 반환합니다.
frameElement
속성의 getter 단계는 다음과 같습니다:
현재 node navigable
가 null인 경우, null을 반환합니다.
현재의 컨테이너를 반환합니다. 해당 컨테이너가 없거나 교차 출처 상황인 경우 null을 반환합니다.
다음과 같은 경우 이 속성들이 null을 반환할 수 있습니다:
<!DOCTYPE html>
< iframe ></ iframe >
< script >
"use strict" ;
const element = document. querySelector( "iframe" );
const iframeWindow = element. contentWindow;
element. remove();
console. assert( iframeWindow. top === null );
console. assert( iframeWindow. parent === null );
console. assert( iframeWindow. frameElement === null );
</ script >
여기서 iframeWindow
에 해당하는 탐색 문맥은 element
가 문서에서 제거될 때 무효화됩니다.
역사적인 이유로 Window
인터페이스에는 특정 웹 브라우저 인터페이스 요소의
가시성을 나타내는 일부 속성이 있었습니다.
개인정보 보호 및 상호 운용성의 이유로, 이러한 속성들은 이제 Window
의
탐색 컨텍스트의
팝업 여부 속성이 true인지 false인지를
나타내는 값을 반환합니다.
각 인터페이스 요소는 BarProp
객체로 표시됩니다:
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface BarProp {
readonly attribute boolean visible ;
};
window.locationbar.visible
모든 현재 엔진에서 지원됩니다.
window.menubar.visible
모든 현재 엔진에서 지원됩니다.
window.personalbar.visible
모든 현재 엔진에서 지원됩니다.
window.scrollbars.visible
모든 현재 엔진에서 지원됩니다.
window.statusbar.visible
모든 현재 엔진에서 지원됩니다.
window.toolbar.visible
모든 현재 엔진에서 지원됩니다.
Window
가
팝업이 아니면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
모든 현재 엔진에서 지원됩니다.
visible
의
getter 단계는 다음과 같습니다:
browsingContext가 null이면 true를 반환하십시오.
browsingContext의 최상위 탐색 컨텍스트의 팝업 여부의 부정을 반환하십시오.
다음 BarProp
객체는 각 Window
객체에 대해 존재해야 합니다:
BarProp
객체
BarProp
객체
BarProp
객체
BarProp
객체
BarProp
객체
BarProp
객체
locationbar
속성은 주소 표시줄
BarProp
객체를 반환해야 합니다.
menubar
속성은 메뉴 막대
BarProp
객체를 반환해야 합니다.
personalbar
속성은 개인 도구 모음
BarProp
객체를 반환해야 합니다.
scrollbars
속성은 스크롤바
BarProp
객체를 반환해야 합니다.
statusbar
속성은 상태 표시줄
BarProp
객체를 반환해야 합니다.
toolbar
속성은 도구 모음
BarProp
객체를 반환해야 합니다.
역사적인 이유로, status
속성은
Window
객체에서
마지막으로 설정된 문자열을 반환해야 하며, 설정 시 새로운 값으로 설정되어야 합니다. Window
객체가
생성될 때 이 속성은 빈 문자열로 설정되어야 합니다. 이 외에는 다른 기능을 수행하지 않습니다.
Window
객체에 대한 스크립트 설정창 환경 설정 객체를 설정하려면, 주어진 URL creationURL, 자바스크립트 실행 컨텍스트 execution context, null 또는 환경 reservedEnvironment, URL topLevelCreationURL, 그리고 기원 topLevelOrigin을 사용하여 다음 단계를 수행하십시오:
realm을 execution context의 Realm 구성 요소 값으로 설정하십시오.
window를 realm의 전역 객체로 설정하십시오.
settings object를 새 환경 설정 객체로 설정하십시오. 해당 객체의 알고리즘은 다음과 같이 정의됩니다:
execution context를 반환하십시오.
window의 연관된 Document
의
모듈 맵을 반환하십시오.
window의 연관된
Document
의 현재 기본 URL을 반환하십시오.
window의 기원을 반환하십시오. window의 연관된
Document
에서.
window의 정책 컨테이너를 반환하십시오.
window의 연관된
Document
에서.
다음 두 가지가 모두 참인 경우 true를 반환하고, 그렇지 않으면 false를 반환하십시오:
realm의 에이전트
클러스터의 교차 출처 격리
모드가 "구체적
"일
때,
그리고
window의 연관된
Document
가 "교차 출처 격리된
"
기능을 사용할 수 있는지 확인하십시오.
window의 연관된
Document
의 로드 타이밍 정보의 탐색
시작 시간을 반환하십시오.
reservedEnvironment가 null이 아닌 경우 다음을 수행하십시오:
settings object의 id를 reservedEnvironment의 id, 대상 탐색 컨텍스트를 reservedEnvironment의 대상 탐색 컨텍스트로, 그리고 settings object의 활성 서비스 워커를 reservedEnvironment의 활성 서비스 워커로 설정하십시오.
reservedEnvironment의 id를 빈 문자열로 설정하십시오.
예약된 환경의 ID는 생성된 환경 설정 객체에 완전히 이전된 것으로 간주됩니다. 이 시점부터 예약된 환경은 환경의 id로 검색할 수 없습니다.
그렇지 않은 경우, settings object의 id를 새로운 고유 불투명 문자열로 설정하고, settings object의 대상 탐색 컨텍스트를 null로 설정하며, settings object의 활성 서비스 워커를 null로 설정하십시오.
settings object의 생성 URL을 creationURL로, settings object의 최상위 생성 URL을 topLevelCreationURL로, 그리고 settings object의 최상위 기원을 topLevelOrigin으로 설정하십시오.
realm의 [[HostDefined]] 필드를 settings object로 설정하십시오.
WindowProxy
이색 객체WindowProxy
는 이색 객체로,
Window
일반 객체를 감싸고,
대부분의 작업을 래핑된 객체를 통해 간접적으로 수행합니다.
각 탐색 컨텍스트에는
연관된 WindowProxy
객체가 있습니다.
탐색 컨텍스트가 이동될 때, 탐색 컨텍스트의 연관된 WindowProxy
객체에 의해 감싸진 Window
객체가 변경됩니다.
WindowProxy
이색 객체는 명시적으로 아래에 달리 명시된 경우를 제외하고 일반적인 내부 메서드를 사용해야 합니다.
WindowProxy
인터페이스 객체는 존재하지 않습니다.
모든 WindowProxy
객체에는 래핑된
Window
객체를 나타내는 [[Window]] 내부 슬롯이 있습니다.
WindowProxy
는
"프록시"라는 이름이 붙어 있지만, 실제 프록시처럼 대상의 내부 메서드에 대해 다형성 디스패치를 수행하지 않습니다. 이는 WindowProxy
와 Location
객체 간의 기계를 재사용하기 위한 것입니다.
Window
객체가 일반 객체로 남아 있는 한, 이는 관찰할 수
없으며 양쪽으로 구현될 수 있습니다.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
IsPlatformObjectSameOrigin(W)이 참이면, OrdinaryGetPrototypeOf(W)를 반환하십시오.
null을 반환하십시오.
! SetImmutablePrototype(this, V)를 반환하십시오.
true를 반환하십시오.
false를 반환하십시오.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
P가 배열 인덱스 속성 이름인 경우:
index를 ! ToUint32(P)로 설정하십시오.
children를 W의 연관된 Document
의 문서 트리 자식 내비게이블로 설정하십시오.
value를 undefined로 설정하십시오.
index가 children의 크기보다 작으면 다음을 수행하십시오:
오름차순으로 정렬된
children에서 navigableA가 navigableB보다 작으면
navigableA의 컨테이너가 navigableB의 컨테이너보다
W의 연관된
Document
에 더 먼저 삽입된 경우입니다.
value를 children[index]의 활성 WindowProxy
로 설정하십시오.
value가 undefined인 경우 다음을 수행하십시오:
IsPlatformObjectSameOrigin(W)이 참이면 undefined를 반환하십시오.
"SecurityError
" DOMException
을
던지십시오.
PropertyDescriptor{ [[Value]]: value, [[Writable]]: false, [[Enumerable]]: true, [[Configurable]]: true }를 반환하십시오.
IsPlatformObjectSameOrigin(W)이 참이면 ! OrdinaryGetOwnProperty(W, P)를 반환하십시오.
이는 기존 웹 콘텐츠와의 호환성을 유지하기 위해 자바스크립트 명세의 의도적인 위반입니다. 자세한 내용은 tc39/ecma262 issue #672를 참조하십시오. [JAVASCRIPT]
property를 CrossOriginGetOwnPropertyHelper(W, P)로 설정하십시오.
property가 undefined가 아니면 property를 반환하십시오.
property가 undefined이고 P가 W의 문서 트리 자식 내비게이블 대상 이름 속성 세트에 포함된 경우 다음을 수행하십시오:
value를 이름이 P인 W의 명명된 객체의 활성 WindowProxy
로 설정하십시오.
PropertyDescriptor{ [[Value]]: value, [[Enumerable]]: false, [[Writable]]: false, [[Configurable]]: true }를 반환하십시오.
속성 설명자가 열거할 수 없는 이유는 동일 출처 동작과 일치하지 않음에도 불구하고 기존 웹 콘텐츠와의 호환성을 유지하기 위함입니다. 자세한 내용은 issue #3183를 참조하십시오.
? CrossOriginPropertyFallback(P)를 반환하십시오.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
IsPlatformObjectSameOrigin(W)이 참이면:
P가 배열 인덱스 속성 이름인 경우, false를 반환하십시오.
? OrdinaryDefineOwnProperty(W, P, Desc)를 반환하십시오.
이는 기존 웹 콘텐츠와의 호환성을 유지하기 위해 자바스크립트 명세의 의도적인 위반입니다. 자세한 내용은 tc39/ecma262 issue #672를 참조하십시오. [JAVASCRIPT]
"SecurityError
" DOMException
을
던지십시오.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
두 탐색 컨텍스트 간의 액세스가 보고되어야 하는지 확인하십시오, 현재 전역 객체의 browsing context, W의 browsing context, P 및 현재 설정 객체를 고려하십시오.
IsPlatformObjectSameOrigin(W)이 참이면, ? OrdinaryGet(this, P, Receiver)를 반환하십시오.
? CrossOriginGet(this, P, Receiver)를 반환하십시오.
OrdinaryGet과 CrossOriginGet이 [[GetOwnProperty]] 내부 메서드를 호출하므로, W 대신 this가 전달됩니다.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
두 탐색 컨텍스트 간의 액세스가 보고되어야 하는지 확인하십시오, 현재 전역 객체의 browsing context, W의 browsing context, P, 및 현재 설정 객체를 고려하십시오.
IsPlatformObjectSameOrigin(W)이 참이면:
P가 배열 인덱스 속성 이름인 경우, false를 반환하십시오.
? OrdinarySet(W, P, V, Receiver)를 반환하십시오.
? CrossOriginSet(this, P, V, Receiver)를 반환하십시오.
CrossOriginSet이 [[GetOwnProperty]] 내부 메서드를 호출하므로, W 대신 this가 전달됩니다.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
IsPlatformObjectSameOrigin(W)이 참이면:
P가 배열 인덱스 속성 이름인 경우:
desc를 ! this.[[GetOwnProperty]](P)로 설정하십시오.
desc가 undefined이면 true를 반환하십시오.
false를 반환하십시오.
? OrdinaryDelete(W, P)를 반환하십시오.
"SecurityError
" DOMException
을
던지십시오.
W를 this의 [[Window]] 내부 슬롯의 값으로 설정하십시오.
maxProperties를 W의 연관된 Document
의 문서 트리 자식 내비게이블의 크기로 설정하십시오.
keys를 범위 0부터 maxProperties까지(단, maxProperties는 제외)를 설정하십시오.
IsPlatformObjectSameOrigin(W)이 참이면, keys와 OrdinaryOwnPropertyKeys(W)의 연결을 반환하십시오.
keys와 ! CrossOriginOwnPropertyKeys(W)의 연결을 반환하십시오.
Location
인터페이스모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
각 Window
객체는 Window
객체가 생성될 때 할당되는 고유한 Location
객체 인스턴스와 연관되어 있습니다.
Location
이색 객체는 IDL, 생성 후
자바스크립트 내부 메서드의 호출, 및 자바스크립트 내부 메서드의 재정의를 혼합하여 정의됩니다. 무시무시한 보안 정책과 결합되어 있으므로 이를 구현할 때 특히 주의하십시오.
Location
객체를 생성하려면 다음 단계를 수행하십시오:
valueOf를 location의 관련 영역.[[Intrinsics]].[[%Object.prototype.valueOf%]]로 설정하십시오.
! location.[[DefineOwnProperty]]("valueOf
", {
[[Value]]: valueOf,
[[Writable]]: false,
[[Enumerable]]: false,
[[Configurable]]: false })를 수행하십시오.
! location.[[DefineOwnProperty]](%Symbol.toPrimitive%, { [[Value]]: undefined, [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false })를 수행하십시오.
location의 [[DefaultProperties]] 내부 슬롯의 값을 location.[[OwnPropertyKeys]]()로 설정하십시오.
location을 반환하십시오.
valueOf
및 %Symbol.toPrimitive% 자체 데이터 속성의 추가와 Location
의 모든 IDL 속성이
[LegacyUnforgeable]
로
표시된다는 사실은 Location
인터페이스를 참조하거나 이를
문자열화하여 문서의 URL을 결정한
다음 이를 보안과 관련된 방식으로 사용하는 레거시 코드에 의해 필요합니다.
특히, valueOf
, %Symbol.toPrimitive%, 및
[LegacyUnforgeable]
문자열화 완화는 foo[location] = bar
또는 location + ""
과 같은 코드가 잘못 유도되지 않도록 보장합니다.
document.location [ = value ]
window.location [ = value ]
현재 페이지의 위치와 함께 Location
객체를
반환합니다.
다른 페이지로 이동하도록 설정할 수 있습니다.
Document
객체의 location
getter 단계는 this가 완전히 활성화된 경우, 관련 글로벌 객체의 Location
객체를 반환하고, 그렇지 않으면 null을 반환합니다.
Window
객체의 location
getter 단계는 this의
Location
객체를 반환합니다.
Location
객체는 연관된 Document
의 URL의 표현을 제공하며, 연관된 내비게이블을 이동 및
다시 로드하는 방법을 제공합니다.
[Exposed =Window ]
interface Location { // 그러나 추가 생성 단계 및 재정의된 내부 메서드도 참조하십시오.
[LegacyUnforgeable ] stringifier attribute USVString href ;
[LegacyUnforgeable ] readonly attribute USVString origin ;
[LegacyUnforgeable ] attribute USVString protocol ;
[LegacyUnforgeable ] attribute USVString host ;
[LegacyUnforgeable ] attribute USVString hostname ;
[LegacyUnforgeable ] attribute USVString port ;
[LegacyUnforgeable ] attribute USVString pathname ;
[LegacyUnforgeable ] attribute USVString search ;
[LegacyUnforgeable ] attribute USVString hash ;
[LegacyUnforgeable ] undefined assign (USVString url );
[LegacyUnforgeable ] undefined replace (USVString url );
[LegacyUnforgeable ] undefined reload ();
[LegacyUnforgeable , SameObject ] readonly attribute DOMStringList ancestorOrigins ;
};
location.toString()
location.href
모든 최신 엔진에서 지원됩니다.
모든 최신 엔진에서 지원됩니다.
현재 페이지의 URL을 포함하는 Location
객체를
반환합니다.
지정된 URL로 이동할 수 있습니다.
location.origin
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 원본을 반환합니다.
location.protocol
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 스킴을 반환합니다.
스킴이 변경된 동일한 URL로 이동할 수 있습니다.
location.host
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 호스트와 포트를
반환합니다(스킴에 대해 기본 포트가 다를 경우).
호스트와 포트가 변경된 동일한 URL로 이동할 수 있습니다.
location.hostname
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 호스트를 반환합니다.
호스트가 변경된 동일한 URL로 이동할 수 있습니다.
location.port
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 포트를 반환합니다.
포트가 변경된 동일한 URL로 이동할 수 있습니다.
location.pathname
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 경로를 반환합니다.
경로가 변경된 동일한 URL로 이동할 수 있습니다.
location.search
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 쿼리를 반환합니다(비어
있지 않은 경우 선행 "?
" 포함).
쿼리가 변경된 동일한 URL로 이동할 수 있습니다(선행 "?
"는 무시됨).
location.hash
모든 최신 엔진에서 지원됩니다.
해당 Location
객체의 URL 조각을 반환합니다(비어
있지 않은 경우 선행 "#
" 포함).
조각이 변경된 동일한 URL로 이동할 수 있습니다(선행 "#
"는 무시됨).
location.assign(url)
모든 최신 엔진에서 지원됩니다.
지정된 URL로 이동합니다.
location.replace(url)
모든 최신 엔진에서 지원됩니다.
세션 기록에서 현재 페이지를 제거하고 지정된 URL로 이동합니다.
location.reload()
모든 최신 엔진에서 지원됩니다.
현재 페이지를 다시 로드합니다.
location.ancestorOrigins
DOMStringList
객체는 조상 탐색 가능 항목의 활성 문서의 원본 목록을 반환합니다.
Location
객체는
관련 관련된 Document
을
가지고 있으며, 이는 해당 관련
글로벌 객체의 브라우징
컨텍스트의 활성
문서이고, 이
Location
객체의 관련
글로벌
객체의 브라우징 컨텍스트가
null이 아닌 경우이며,
그렇지 않으면 null입니다.
Location
객체는
관련된 url을 가지고 있으며, 이는 해당 Location
객체의
관련된
Document
의 URL이고,
이
Location
객체의
관련된
Document
가 null이 아닌 경우이며, 그렇지 않으면 about:blank
입니다.
Location
객체는
관련된 조상 출처 목록을 가지고 있습니다.
Location
객체가
생성될 때,
그
조상 출처 목록은
다음
단계를 통해 생성된 문자열의 목록을
포함하는
DOMStringList
객체로 설정되어야 합니다:
output을 새로운 목록으로 설정합니다.
current을 Location
객체의
관련된
Document
로 설정합니다.
current의 컨테이너 문서가 null이 아닌 동안:
output을 반환합니다.
Location
객체 탐색으로
Location
객체의
location을 URL
url로,
선택적으로 NavigationHistoryBehavior
을
(기본값 "auto
")
지정하여 탐색합니다:
navigable을 location의 관련된 글로벌 객체의 탐색 가능 항목으로 설정합니다.
sourceDocument을 현재
글로벌 객체의 연결된
Document
로 설정합니다.
location의 관련된
Document
가
아직
완전히 로드되지
않았고,
현재
글로벌
객체가 일시적 활성화를
가지고
있지
않은 경우, historyHandling을 "replace
"로
설정합니다.
navigable을 url로 sourceDocument을 사용하여 탐색합니다. 예외 활성화를 true로 설정하고, historyHandling으로 historyHandling을 설정합니다.
href
설정자
단계는 다음과 같습니다:
this의 관련된 Document
가
null인
경우,
return합니다.
주어진 값을 엔트리 설정 객체를 기준으로 URL 인코딩-파싱의 결과로 url을 설정합니다.
url이 실패라면, "SyntaxError
" DOMException
을
throw합니다.
Location
-객체
탐색 this를
url로
설정합니다.
href
설정자는 고의적으로 보안 검사를 포함하지 않습니다.
origin
getter 단계는 다음과 같습니다:
this의 관련된 Document
가
null이 아니고,
해당
origin이 same
origin-domain과 같지 않다면, entry
settings
object의 origin을
사용하여 "SecurityError
" DOMException
을
throw합니다.
protocol
getter 단계는 다음과 같습니다:
this의 관련된 Document
가
null이 아니고,
해당
origin이 same
origin-domain과 같지 않다면, entry
settings
object의 origin을
사용하여 "SecurityError
" DOMException
을
throw합니다.
protocol
설정자
단계는 다음과 같습니다:
this의 관련된 Document
가
null인
경우,
return합니다.
this의 관련된 Document
의
origin이 same
origin-domain과 같지 않다면, entry
settings
object의 origin을
사용하여 "SecurityError
" DOMException
을
throw합니다.
possibleFailure을 다음 값으로 기본 URL 파싱의 결과로 설정합니다. copyURL을 url로 설정하고 scheme 시작 상태로 설정합니다 state override.
URL 파서는 여러 개의 연속적인 콜론을 무시하기 때문에, "https:
" (또는 "https::::
") 값을 제공하는
것은 "https
" 값을 제공하는 것과 동일합니다.
possibleFailure이 실패라면, "SyntaxError
" DOMException
을
throw합니다.
copyURL의 scheme이 HTTP(S) scheme이 아니라면, 이 단계를 종료합니다.
Location
-객체
탐색을
this에
copyURL로
설정합니다.
host
getter 단계는 다음과 같습니다:
this의 관련된 Document
가
null이 아니고,
해당
origin이 same
origin-domain과 같지 않다면, entry
settings
object의 origin을
사용하여 "SecurityError
" DOMException
을
throw합니다.
url의 host가 null이라면, 빈 문자열을 반환합니다.
url의 host를
반환합니다,
직렬화된
상태로, 그
뒤에 ":
"와
url의 port를
추가합니다,
직렬화된
상태로.
host
설정자 단계는 다음과 같습니다:
this의 관련된 Document
가
null인 경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
copyURL에 opaque path가 있다면, return합니다.
기본 URL 파싱을 수행하고, copyURL을 url로 설정하며 host 상태를 state override로 설정합니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
hostname
getter 단계는 다음과 같습니다:
this의 관련된 Document
가
null이 아니고, 해당 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
hostname
설정자 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
copyURL에 opaque path가 있다면, return합니다.
기본 URL 파싱을 수행하고, copyURL을 url로 설정하며 hostname 상태를 state override로 설정합니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
port
getter 단계는
다음과 같습니다:
this의 관련된 Document
가
null이 아니고, 해당 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
port
설정자
단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
copyURL이 username/password/port를 가질 수 없다면, return합니다.
주어진 값이 빈 문자열인 경우, copyURL의 port를 null로 설정합니다.
그렇지 않은 경우, 기본 URL 파싱을 수행하고, copyURL을 url로 설정하며 port 상태를 state override로 설정합니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
pathname
getter 단계는 다음과 같습니다:
this의 관련된 Document
가
null이 아니고, 해당 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
URL
경로 직렬화의 결과를 반환합니다. 이 Location
객체의 url을
사용합니다.
pathname
설정자 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
copyURL에 opaque path가 있다면, return합니다.
copyURL의 경로를 빈 목록으로 설정합니다.
기본 URL 파싱을 수행하고, copyURL을 url로 설정하며 경로 시작 상태를 state override로 설정합니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
search
getter 단계는
다음과 같습니다:
this의 관련된 Document
가 null이
아니고, 해당 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
search
설정자 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
주어진 값이 빈 문자열인 경우, copyURL의 query를 null로 설정합니다.
그렇지 않은 경우, 다음 하위 단계를 수행합니다:
주어진 값에서 선행 "?
"을 제거한 값을 input으로 설정합니다(있는
경우).
copyURL의 query를 빈 문자열로 설정합니다.
기본 URL 구문
분석 input, null,
해당
Document
의 문서의 문자 인코딩,
copyURL를 url로 사용하고,
쿼리 상태를 상태
오버라이드로 사용하여 수행합니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
hash
getter 단계는
다음과 같습니다:
this의 관련된 Document
가
null이 아니고, 해당 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
hash
설정자 단계는 다음과
같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
주어진 값에서 선행 "#
"을 제거한 값을 input으로 설정합니다(있는 경우).
copyURL의 fragment를 빈 문자열로 설정합니다.
기본 URL 파싱을 수행하고, copyURL을 url로 설정하며 fragment 상태를 상태 재정의로 설정합니다.
copyURL의 fragment가 this의 url의 fragment와 동일한 경우, return합니다.
이 중단은 스크롤 시 location.hash
를 중복으로 설정하는 배포된 컨텐츠와의 호환성을 위해
필요합니다. 이 중단은 location.href
설정자나 location.assign()
같은 다른 프래그먼트 탐색 메커니즘에는 적용되지 않습니다.
Location
-객체 탐색을
this에 copyURL로 설정합니다.
a
요소 및 area
요소에 대한
동등한 API와 달리, hash
설정자는 배포된 스크립트와의 호환성을 유지하기 위해 빈 문자열을 특별하게 처리하지 않습니다.
assign(url)
메소드 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
urlRecord을 URL 인코딩 파싱의 결과로 설정하고, url을 entry settings object에 상대적으로 설정합니다.
urlRecord가 실패라면, "SyntaxError
" DOMException
을
throw합니다.
Location
-객체 탐색을
this에 urlRecord로 설정합니다.
replace(url)
메소드 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, return합니다.
urlRecord을 URL 인코딩 파싱의 결과로 설정하고, url을 entry settings object에 상대적으로 설정합니다.
urlRecord가 실패라면, "SyntaxError
" DOMException
을
throw합니다.
Location
-객체 탐색을
this에 urlRecord로 설정하고, "replace
"로 설정합니다.
replace()
메소드에는 의도적으로 보안 검사가 없습니다.
reload()
메소드 단계는
다음과 같습니다:
document를 this의 관련된 Document
로 설정합니다.
document가 null인 경우, return합니다.
document의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
ancestorOrigins
getter 단계는 다음과 같습니다:
this의 관련된 Document
가 null인
경우, 빈 리스트를 반환합니다.
this의 관련된 Document
의 origin이 same origin-domain과 같지 않다면, entry settings
object의 origin을 사용하여 "SecurityError
" DOMException
을
throw합니다.
그렇지 않으면, this의 ancestor origins 리스트를 반환합니다.
ancestorOrigins
속성이 작동하는 방식에 대한 세부 사항은 여전히 논란의 여지가 있으며 변경될 수 있습니다. 자세한 내용은 이슈
#1918를 참조하십시오.
앞서 설명한 것처럼, Location
특이 객체에는
보안 목적을 위해 IDL 외에 추가 논리가 필요합니다. Location
객체는 명시적으로 다르게 지정된
경우를 제외하고 일반적인 내부 메서드를 사용해야 합니다.
또한, 모든 Location
객체는 생성 시
자신의 속성을 나타내는 [[DefaultProperties]] 내부 슬롯을 가지고 있습니다.
만약 IsPlatformObjectSameOrigin(this)가 true라면, ! OrdinaryGetPrototypeOf(this)를 반환합니다.
null을 반환합니다.
! SetImmutablePrototype(this, V)를 반환합니다.
true를 반환합니다.
false를 반환합니다.
만약 IsPlatformObjectSameOrigin(this)가 true라면:
desc를 OrdinaryGetOwnProperty(this, P)로 설정합니다.
만약 this의 [[DefaultProperties]] 내부 슬롯의 값에 P가 포함되어 있다면, desc.[[Configurable]]을 true로 설정합니다.
desc를 반환합니다.
property를 CrossOriginGetOwnPropertyHelper(this, P)로 설정합니다.
만약 property가 undefined가 아니라면, property를 반환합니다.
? CrossOriginPropertyFallback(P)를 반환합니다.
만약 IsPlatformObjectSameOrigin(this)가 true이면:
this의 [[DefaultProperties]] 내부 슬롯에 P가 포함되어 있다면, false를 반환합니다.
? OrdinaryDefineOwnProperty(this, P, Desc)를 반환합니다.
"SecurityError
" DOMException
을
throw합니다.
만약 IsPlatformObjectSameOrigin(this)가 true이면, ? OrdinaryGet(this, P, Receiver)를 반환합니다.
? CrossOriginGet(this, P, Receiver)를 반환합니다.
만약 IsPlatformObjectSameOrigin(this)가 true이면, ? OrdinarySet(this, P, V, Receiver)를 반환합니다.
? CrossOriginSet(this, P, V, Receiver)를 반환합니다.
만약 IsPlatformObjectSameOrigin(this)가 true이면, ? OrdinaryDelete(this, P)를 반환합니다.
"SecurityError
" DOMException
을
throw합니다.
만약 IsPlatformObjectSameOrigin(this)가 true이면, OrdinaryOwnPropertyKeys(this)를 반환합니다.
CrossOriginOwnPropertyKeys(this)를 반환합니다.
History
인터페이스모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
enum ScrollRestoration { " auto " , " manual " };
[Exposed =Window ]
interface History {
readonly attribute unsigned long length ;
attribute ScrollRestoration scrollRestoration ;
readonly attribute any state ;
undefined go (optional long delta = 0);
undefined back ();
undefined forward ();
undefined pushState (any data , DOMString unused , optional USVString ? url = null );
undefined replaceState (any data , DOMString unused , optional USVString ? url = null );
};
history.length
모든 현재 엔진에서 지원됩니다.
history.scrollRestoration
모든 현재 엔진에서 지원됩니다.
현재 활성 세션 기록 항목의 스크롤 복원 모드를 반환합니다.
history.scrollRestoration = value
현재 활성 세션 기록 항목의 스크롤 복원 모드를 value로 설정합니다.
history.state
모든 현재 엔진에서 지원됩니다.
현재 활성 세션 기록 항목의 클래식 기록 API 상태를 JavaScript 값으로 직렬화하여 반환합니다.
history.go()
현재 페이지를 다시 로드합니다.
history.go(delta)
모든 현재 엔진에서 지원됩니다.
현재 탐색 가능한 항목의 전체 세션 기록 항목 목록에서 지정된 단계만큼 앞으로 또는 뒤로 이동합니다.
0의 delta는 현재 페이지를 다시 로드합니다.
delta가 범위를 벗어나면 아무 작업도 수행하지 않습니다.
history.back()
모든 현재 엔진에서 지원됩니다.
현재 탐색 가능한 항목의 전체 세션 기록 항목 목록에서 한 단계 뒤로 이동합니다.
이전 페이지가 없으면 아무 작업도 수행하지 않습니다.
history.forward()
모든 현재 엔진에서 지원됩니다.
현재 탐색 가능한 항목의 전체 세션 기록 항목 목록에서 한 단계 앞으로 이동합니다.
다음 페이지가 없으면 아무 작업도 수행하지 않습니다.
history.pushState(data, "")
모든 현재 엔진에서 지원됩니다.
data의 직렬화를 클래식 기록 API 상태에 설정하고 새 항목의 URL에 현재 활성 기록 항목의 URL을 복사하여 세션 기록에 새 항목을 추가합니다.
(두 번째 매개변수는 역사적인 이유로 존재하며, 생략할 수 없습니다. 빈 문자열을 전달하는 것이 전통입니다.)
history.pushState(data, "", url)
data의 직렬화를 클래식 기록 API 상태에 설정하고 url을 URL에 설정하여 세션 기록에 새 항목을 추가합니다.
현재 문서
의 URL을 url로 다시 쓸 수
없으면 "SecurityError
" DOMException
이
발생합니다.
(두 번째 매개변수는 역사적인 이유로 존재하며, 생략할 수 없습니다. 빈 문자열을 전달하는 것이 전통입니다.)
history.replaceState(data, "")
모든 현재 엔진에서 지원됩니다.
현재 활성 세션 기록 항목의 클래식 기록 API 상태를 data의 구조적 복제로 업데이트합니다.
(두 번째 매개변수는 역사적인 이유로 존재하며, 생략할 수 없습니다. 빈 문자열을 전달하는 것이 전통입니다.)
history.replaceState(data, "", url)
현재 활성 세션 기록 항목의 클래식 기록 API 상태를 data의 구조적 복제로 업데이트하고, URL을 url로 설정합니다.
현재 문서
의 URL을 url로 다시 쓸 수
없으면 "SecurityError
" DOMException
이
발생합니다.
(두 번째 매개변수는 역사적인 이유로 존재하며, 생략할 수 없습니다. 빈 문자열을 전달하는 것이 전통입니다.)
문서
는 히스토리 객체인
History
객체를 가지고 있습니다.
history
getter 단계는 this의 연결된 문서
의 히스토리 객체를 반환하는 것입니다.
각 History
객체는 처음에 null로 설정된 상태를 가집니다.
각 History
객체는 처음에 0으로 설정된 비음수 정수인 길이를 가집니다.
각 History
객체는 처음에 0으로 설정된 비음수 정수인 인덱스를 가집니다.
비록 인덱스가 직접적으로 노출되지 않지만, 동기 탐색 중 길이의 변화로부터 추론할 수 있습니다. 실제로 그것이 사용되는 목적입니다.
길이
getter 단계는 다음과
같습니다:
만약 this의 관련 글로벌 객체의 연결된 문서
가 완전히 활성화되지 않았다면, "SecurityError
" DOMException
을
던집니다.
스크롤 복원
getter 단계는 다음과 같습니다:
만약 this의 관련 글로벌 객체의 연결된 문서
가 완전히 활성화되지 않았다면, "SecurityError
" DOMException
을
던집니다.
this의 탐색 가능한 노드의 활성 세션 히스토리 항목의 스크롤 복원 모드를 반환합니다.
스크롤 복원
setter 단계는 다음과 같습니다:
만약 this의 관련 글로벌 객체의 연결된 문서
가 완전히 활성화되지 않았다면, "SecurityError
" DOMException
을
던집니다.
this의 탐색 가능한 노드의 활성 세션 히스토리 항목의 스크롤 복원 모드를 주어진 값으로 설정합니다.
상태
getter 단계는 다음과 같습니다:
만약 this의 관련 글로벌 객체의 연결된 문서
가 완전히 활성화되지 않았다면, "SecurityError
" DOMException
을
던집니다.
go(delta)
메서드 단계는
주어진 delta를 가지고 델타 탐색을 수행하는 것입니다.
back()
메서드 단계는 주어진 −1을 가지고
델타 탐색을 수행하는 것입니다.
forward()
메서드 단계는 주어진
+1을 가지고 델타 탐색을 수행하는 것입니다.
History
객체 history를 주어진 정수
delta로 델타 탐색하려면:
만약 document가 완전히 활성화되지 않았다면,
"SecurityError
" DOMException
을
던집니다.
document의 탐색 가능한 노드의 탐색 가능한 항목, delta를 주어진 상태로 설정하고 소스 문서를 document로 설정하여 히스토리를 델타로 탐색합니다.
pushState(data, unused, url)
메서드
단계는 공유 히스토리 push/replace 상태 단계를 this,
data, url 및 "push
"를
주어진 상태로 실행합니다.
replaceState(data, unused, url)
메서드
단계는 공유 히스토리 push/replace 상태 단계를 this,
data, url 및 "replace
"를
주어진 상태로 실행합니다.
공유 히스토리 push/replace 상태 단계는 History
history, 값
data, 스칼라 값
문자열-또는-null url, 및 히스토리 처리 동작 historyHandling을 주어진 상태로 실행합니다.
history의 연결된 문서
를
document로 설정합니다.
만약 document가 완전히 활성화되지 않았다면,
"SecurityError
" DOMException
을
던집니다.
선택적으로 반환합니다. (예를 들어, 사용자 에이전트는 타이머에서 호출된 메서드, 명확한 사용자 작업에 응답하여 트리거되지 않은 이벤트 리스너에서 호출된 메서드 또는 빠르게 연속적으로 호출된 메서드를 허용하지 않을 수 있습니다.)
serializedData를 저장용 구조화 직렬화(data)로 설정합니다. 예외가 발생하면 다시 던집니다.
newURL을 document의 URL로 설정합니다.
만약 url이 null 또는 빈 문자열이 아니라면:
newURL을 URL 인코딩-파싱 결과로 설정합니다. url과 history의 관련 설정 객체를 기준으로 합니다.
만약 newURL이 실패라면, "SecurityError
" DOMException
을
던집니다.
만약 document가 newURL로 URL이 다시 작성될 수 없다면, "SecurityError
" DOMException
을
던집니다.
여기서 빈 문자열에 대한 특별한 경우는 역사적이며, location.href = ""
(빈 문자열에 대해 URL 파싱을 수행)와
history.pushState(null, "", "")
(이를 우회)을 비교할 때 다른 결과 URL을 생성하게 됩니다.
푸시/대체/다시 로드 내비게이트 이벤트를 navigation에서 발생시키고, 탐색 유형을 historyHandling으로 설정하고, isSameDocument를 true로 설정하며, 목적지 URL을 newURL로 설정하고, classicHistoryAPIState를 serializedData로 설정합니다.
만약 continue가 false라면, 반환합니다.
URL 및 히스토리 업데이트 단계를 document와 newURL에 대해 실행하고, serializedData를 serializedData로 설정하며, historyHandling을 historyHandling으로 설정합니다.
사용자 에이전트는 페이지당 세션 기록에 추가된 상태 객체의 수를 제한할 수 있습니다. 만약 페이지가 구현 정의
제한에 도달하면, 사용자 에이전트는 새 항목을 추가한 후 세션 기록에서 해당 문서
객체의 첫 번째 항목 직후에 항목을 제거해야 합니다. (따라서 상태
기록은 퇴거를 위한 FIFO 버퍼로 작동하지만 탐색을 위한 LIFO 버퍼로 작동합니다.)
문서
document는 다음 알고리즘이 true를
반환하는 경우에만 URL을 다시 작성할 수 있습니다:
documentURL을 document의 URL로 설정합니다.
만약 targetURL과 documentURL이 스킴, 사용자 이름, 비밀번호, 호스트, 또는 포트 구성 요소에서 다르다면, false를 반환합니다.
만약 targetURL의 스킴이 HTTP(S) 스킴이라면 true를 반환합니다.
만약 targetURL의 스킴이
"file
"이라면:
만약 targetURL과 documentURL이 경로 구성 요소에서 다르다면 false를 반환합니다.
true를 반환합니다.
만약 targetURL과 documentURL이 경로 구성 요소 또는 쿼리 구성 요소에서 다르다면 false를 반환합니다.
다른 유형의 URL에서는 프래그먼트에서의 차이점만 허용됩니다.
true를 반환합니다.
document의 URL | targetURL | URL을 다시 작성할 수 있음 |
---|---|---|
https://example.com/home
| https://example.com/home#about
| ✅ |
https://example.com/home
| https://example.com/home?page=shop
| ✅ |
https://example.com/home
| https://example.com/shop
| ✅ |
https://example.com/home
| https://user:pass@example.com/home
| ❌ |
https://example.com/home
| http://example.com/home
| ❌ |
file:///path/to/x
| file:///path/to/x#hash
| ✅ |
file:///path/to/x
| file:///path/to/x?search
| ✅ |
file:///path/to/x
| file:///path/to/y
| ❌ |
about:blank
| about:blank#hash
| ✅ |
about:blank
| about:blank?search
| ❌ |
about:blank
| about:srcdoc
| ❌ |
data:text/html,foo
| data:text/html,foo#hash
| ✅ |
data:text/html,foo
| data:text/html,foo?search
| ❌ |
data:text/html,foo
| data:text/html,bar
| ❌ |
data:text/html,foo
| data:bar
| ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43
| blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43#hash
| ✅ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43
| blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43?search
| ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43
| blob:https://example.com/anything
| ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43
| blob:path
| ❌ |
오직 문서
의 URL만
중요한 것이지, 출처는 중요하지
않다는 점에 주목하십시오. about:blank
문서
가 상속된 출처를 가지는 경우, 샌드박스된 iframe
또는 document.domain
세터가
사용된 경우에는 출처가 일치하지 않을 수 있습니다.
사용자가 항상 특정 좌표에 있으며, 특정 좌표에 해당하는 페이지를 북마크하여 나중에 다시 방문할 수 있는 게임을 고려해 보십시오.
이 게임에서 x=5 위치를 구현한 정적 페이지는 다음과 같을 수 있습니다:
<!DOCTYPE HTML>
<!-- 여기는 https://example.com/line?x=5 -->
< html lang = "en" >
< title > 라인 게임 - 5</ title >
< p > 당신은 라인의 5번 좌표에 있습니다.</ p >
< p >
< a href = "?x=6" > 6번 좌표로 이동</ a > 또는
< a href = "?x=4" > 4번 좌표로 후퇴</ a > ?
</ p >
이러한 시스템의 문제점은 사용자가 클릭할 때마다 전체 페이지가 다시 로드되어야 한다는 것입니다. 여기 스크립트를 사용하여 동일한 작업을 수행하는 또 다른 방법이 있습니다:
<!DOCTYPE HTML>
<!-- 여기서 시작: https://example.com/line?x=5 -->
< html lang = "en" >
< title > 라인 게임 - 5</ title >
< p > 당신은 라인의 < span id = "coord" > 5</ span > 번 좌표에 있습니다.</ p >
< p >
< a href = "?x=6" onclick = "go(1); return false;" > 6번 좌표로 이동</ a > 또는
< a href = "?x=4" onclick = "go(-1); return false;" > 4번 좌표로 후퇴</ a > ?
</ p >
< script >
var currentPage = 5 ; // 서버에서 채워진 값
function go( d) {
setupPage( currentPage + d);
history. pushState( currentPage, "" , '?x=' + currentPage);
}
onpopstate = function ( event) {
setupPage( event. state);
}
function setupPage( page) {
currentPage = page;
document. title = '라인 게임 - ' + currentPage;
document. getElementById( 'coord' ). textContent = currentPage;
document. links[ 0 ]. href = '?x=' + ( currentPage+ 1 );
document. links[ 0 ]. textContent = '6번 좌표로 이동' + ( currentPage+ 1 );
document. links[ 1 ]. href = '?x=' + ( currentPage- 1 );
document. links[ 1 ]. textContent = '4번 좌표로 후퇴' + ( currentPage- 1 );
}
</ script >
스크립트가 없는 시스템에서도 이 예시는 이전 예제와 동일하게 작동합니다. 하지만 스크립트를 지원하는 사용자는 네트워크 접근 없이 더 빠르게 탐색할 수 있습니다. 또한 단순한 스크립트 기반 접근만으로는 사용할 수 없는 북마크 및 세션 기록 탐색 기능이 여전히 작동합니다.
위 예시에서 pushState()
메소드의 data 인자는 서버로 전송될 정보와 동일하지만, 사용하기 더 편리한 형태로 되어 있어 사용자가 탐색할 때마다 스크립트가 URL을 분석할 필요가 없습니다.
대부분의 애플리케이션은 모든 기록 항목에 대해 동일한 스크롤 복원 모드 값을 사용하기를 원합니다. 이를 위해 scrollRestoration
속성을 가능한 빨리 설정할 수 있습니다 (예: 문서의 head
요소에 있는 첫 번째 스크립트
요소에서) 세션 기록에
추가되는 모든 항목이 원하는 스크롤 복원 모드를 가지도록 보장할 수 있습니다.
< head >
< script >
if ( 'scrollRestoration' in history)
history. scrollRestoration = 'manual' ;
</ script >
</ head >
이 섹션은 비규범적입니다.
네비게이션 API는 글로벌 navigation
속성을 통해
제공되며, 네비게이션 및 기록 항목을 관리하는 웹 애플리케이션 중심의 현대적인 방법을 제공합니다.
이는 고전적인 location
및 history
API의 후속입니다.
이 API가 제공하는 기능 중 하나는 세션 기록 항목을 검사하는 것입니다. 예를 들어, 다음 코드는 항목의 URL을 정렬된 목록으로 표시합니다:
const ol = document. createElement( "ol" );
ol. start = 0 ; // 목록 항목의 순번이 항목 인덱스와 일치하도록 설정
for ( const entry of navigation. entries()) {
const li = document. createElement( "li" );
if ( entry. index < navigation. currentEntry. index) {
li. className = "backward" ;
} else if ( entry. index > navigation. currentEntry. index) {
li. className = "forward" ;
} else {
li. className = "current" ;
}
li. textContent = entry. url;
ol. append( li);
}
navigation.entries()
배열은 NavigationHistoryEntry
인스턴스를 포함하며, 여기에 표시된 url
및 index
속성 외에도 유용한 다른 속성들이 있습니다. 이 배열은 현재 navigable을 나타내는 NavigationHistoryEntry
객체만 포함하므로, iframe
과 같은 navigable container 내부에서 이루어진
네비게이션이나 parent navigable의 네비게이션이 배열의 내용에 영향을 주지 않습니다.
또한, 동일한 출처를 가지는 세션 기록 항목을 나타내는 NavigationHistoryEntry
객체만 포함하므로, 현재 출처 전후에 다른 출처를 방문한 경우 해당하는 NavigationHistoryEntry
가
존재하지 않을 것입니다.
네비게이션 API는 또한 네비게이션, 리로드, 또는 기록을 통해 이동하는 데 사용할 수 있습니다:
< button onclick = "navigation.reload()" > 리로드</ button >
< input type = "url" id = "navigationURL" >
< button onclick = "navigation.navigate(navigationURL.value)" > 네비게이트</ button >
< button id = "backButton" onclick = "navigation.back()" > 뒤로가기</ button >
< button id = "forwardButton" onclick = "navigation.forward()" > 앞으로가기</ button >
< select id = "traversalDestinations" ></ select >
< button id = "goButton" onclick = "navigation.traverseTo(traversalDestinations.value)" > 이동하기</ button >
< script >
backButton. disabled = ! navigation. canGoBack;
forwardButton. disabled = ! navigation. canGoForward;
for ( const entry of navigation. entries()) {
traversalDestinations. append( new Option( entry. url, entry. key));
}
</ script >
네비게이션은 동일한 출처로 제한된다는 점에 유의하세요. 예를 들어, navigation.canGoBack
은
이전 세션 기록 항목이 다른 출처에 속하는 경우
false를 반환합니다.
네비게이션 API의 가장 강력한 기능은 navigate
이벤트로, 현재 navigable에서 거의 모든 네비게이션이나 이동이 발생할 때마다 발생합니다:
navigation. onnavigate = event => {
console. log( event. navigationType); // "push", "replace", "reload", 또는 "traverse"
console. log( event. destination. url);
console. log( event. userInitiated);
// ... 및 다른 유용한 속성들
};
(이 이벤트는 주소 표시줄에서 시작된 네비게이션이나, 네비게이션의 목적지가 새로운 문서인 경우 다른 창에서 시작된 네비게이션에서는 발생하지 않습니다.)
많은 경우 이 이벤트의 취소 가능
속성은 true이며, 이는 preventDefault()
를
사용하여 이 이벤트를 취소할 수 있음을 의미합니다:
navigation. onnavigate = event => {
if ( event. cancelable && isDisallowedURL( event. destination. url)) {
alert( `이 URL로 이동하지 마세요: ${ event. destination. url} !` );
event. preventDefault();
}
};
취소 가능
속성은 traverse
네비게이션의 경우, 예를 들어 하위 navigable 내에서 발생하는 경우,
새로운 출처로 이동하는 경우, 또는 사용자가 이전 preventDefault()
호출 후 곧바로 다시 이동하려는 경우 false가 됩니다.
NavigateEvent
의 intercept()
메소드를 사용하면 네비게이션을 가로채어 동일 문서 네비게이션으로 변환할 수 있습니다:
navigation. addEventListener( "navigate" , e => {
// 일부 네비게이션, 예를 들어 교차 출처 네비게이션은 가로챌 수 없습니다.
// 브라우저가 이를 정상적으로 처리하도록 합니다.
if ( ! e. canIntercept) {
return ;
}
// 유사하게, 해시 변경이나 다운로드도 가로채지 않습니다.
if ( e. hashChange || e. downloadRequest !== null ) {
return ;
}
const url = new URL( event. destination. url);
if ( url. pathname. startsWith( "/articles/" )) {
e. intercept({
async handler() {
// URL이 이미 변경되었으므로 새로운 콘텐츠를 가져오는 동안
// 자리 표시자를 표시합니다, 예를 들어 로딩 스피너나 로딩 페이지.
renderArticlePagePlaceholder();
// 새 콘텐츠를 가져와서 준비되면 표시합니다.
const articleContent = await getArticleContent( url. pathname, { signal: e. signal });
renderArticlePage( articleContent);
}
});
}
});
handler
함수는 네비게이션의 비동기 진행 상황, 성공 또는 실패를 나타내는 프라미스를 반환할 수 있다는 점에 유의하세요.
프라미스가 아직 대기 중인 동안, 브라우저 UI는 네비게이션이 진행 중인 것으로 처리할 수 있습니다 (예: 로딩 스피너를 표시함으로써). 네비게이션 API의 다른 부분도 이러한 프라미스에 민감하며,
navigation.navigate()
의
반환 값도 이에 영향을 받습니다:
const { committed, finished } = await navigation. navigate( "/articles/the-navigation-api-is-cool" );
// 커밋된 프라미스는 URL이 변경된 즉시 완료됩니다 (NavigateEvent가 취소되지 않는 한).
await committed;
// 완료된 프라미스는 handler() 함수가 완료된 후에 완료되며, 이는 기사가 다운로드되고 렌더링된 후에 발생합니다. (또는 handler() 함수가 실패할 경우 거부됩니다).
await finished;
Navigation
인터페이스[Exposed =Window ]
interface Navigation : EventTarget {
sequence <NavigationHistoryEntry > entries ();
readonly attribute NavigationHistoryEntry ? currentEntry ;
undefined updateCurrentEntry (NavigationUpdateCurrentEntryOptions options );
readonly attribute NavigationTransition ? transition ;
readonly attribute NavigationActivation ? activation ;
readonly attribute boolean canGoBack ;
readonly attribute boolean canGoForward ;
NavigationResult navigate (USVString url , optional NavigationNavigateOptions options = {});
NavigationResult reload (optional NavigationReloadOptions options = {});
NavigationResult traverseTo (DOMString key , optional NavigationOptions options = {});
NavigationResult back (optional NavigationOptions options = {});
NavigationResult forward (optional NavigationOptions options = {});
attribute EventHandler onnavigate ;
attribute EventHandler onnavigatesuccess ;
attribute EventHandler onnavigateerror ;
attribute EventHandler oncurrententrychange ;
};
dictionary NavigationUpdateCurrentEntryOptions {
required any state ;
};
dictionary NavigationOptions {
any info ;
};
dictionary NavigationNavigateOptions : NavigationOptions {
any state ;
NavigationHistoryBehavior history = "auto";
};
dictionary NavigationReloadOptions : NavigationOptions {
any state ;
};
dictionary NavigationResult {
Promise <NavigationHistoryEntry > committed ;
Promise <NavigationHistoryEntry > finished ;
};
enum NavigationHistoryBehavior {
" auto " ,
" push " ,
" replace "
};
각 Window
는 연결된
navigation
API를 가지고 있으며, 이는 Navigation
객체입니다. Window
객체가 생성될 때, 그 객체의 navigation
API는 new
Navigation
객체로 설정되어야 하며, 이는 Window
객체의 relevant
realm에서 생성된 것입니다.
navigation
getter 단계는 this의 navigation
API를 반환하는 것입니다.
다음은 모든 Navigation
인터페이스를 구현하는 객체에서 지원해야
하는 이벤트 핸들러와 그에 상응하는 이벤트 핸들러 이벤트 유형입니다. 이들은
이벤트 핸들러 IDL 속성으로
지원됩니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onnavigate |
navigate |
onnavigatesuccess |
navigatesuccess
|
onnavigateerror |
navigateerror
|
oncurrententrychange |
currententrychange
|
각 Navigation
는 연결된
entry list를 가지고 있으며, 이는 리스트입니다. 이 리스트는 NavigationHistoryEntry
객체들로 구성되며, 초기에는 비어 있습니다.
각 Navigation
는 연결된 current entry index를 가지고 있으며, 이는 초기에는 −1로 설정된 정수입니다.
Navigation
의 navigation의 current entry는 다음 단계들을 수행하여 얻은 결과입니다:
만약 navigation이 entries and events disabled을 가지고 있다면, null을 반환합니다.
단언: navigation의 current entry index가 −1이 아님을 확인합니다.
navigation의 entry list에서 navigation의 current entry index에 해당하는 항목을 반환합니다.
Navigation
의 navigation이 entries and events disabled 상태인지 확인하려면 다음 단계들을 수행합니다:
navigation의 relevant global object의 관련
Document
를 document로 설정합니다.
만약 document가 fully active 상태가 아니라면, true를 반환합니다.
만약 document의 초기
about:blank
가 true라면, true를 반환합니다.
만약 document의 origin이 불투명(opaque) 상태라면, true를 반환합니다.
false를 반환합니다.
navigation API entry index를 session history entry she 내에서 얻으려면 다음 단계를 수행합니다:
index를 0으로 설정합니다.
각각의 nhe에 대해 navigation의 entry list를 순회합니다:
만약 nhe의 session history entry가 she와 동일하다면, index를 반환합니다.
index를 1 증가시킵니다.
−1을 반환합니다.
navigation API에서 자주 사용되는 주요 유형은 NavigationType
열거형입니다:
enum NavigationType {
" push " ,
" replace " ,
" reload " ,
" traverse "
};
이 열거형은 웹 개발자가 주로 볼 수 있는 "navigation" 유형들을 캡처하며, 이는 이 표준의 navigate 알고리즘과 정확히 일치하지 않습니다. 각 값의 의미는 다음과 같습니다:
push
"
push
"로
설정됩니다. 또는 history.pushState()
호출에 해당합니다.replace
"
replace
"로
설정됩니다. 또는 history.replaceState()
호출에 해당합니다.reload
"
traverse
"
NavigationType
열거형의 값
공간은 사양 내부의 history
handling behavior 유형의 값 공간을 포함합니다. 이 표준의 여러 부분에서 이 겹침을 활용하여, history handling behavior를 NavigationType
을 기대하는 알고리즘에 전달합니다.
새 문서를 위한
navigation API 엔트리를 초기화하기 위해,
Navigation
navigation,
엔트리 목록
newSHEs,
및 세션 기록 엔트리
initialSHE가 주어졌을 때, 다음 단계를 수행합니다:
확인: navigation의 현재 엔트리 인덱스가 -1인지 확인합니다.
만약 navigation이 엔트리와 이벤트가 비활성화되어 있다면, 반환합니다.
각각의 newSHE에 대해 newSHEs를 반복합니다:
newNHE를 새로운
NavigationHistoryEntry
로
설정합니다.
이 객체는 navigation의 관련된 영역에서 생성됩니다.
newNHE의 세션 기록 엔트리를 newSHE로 설정합니다.
newSHEs는 원래 navigation API를 위한 세션 기록 엔트리 가져오기에서 나온 것입니다. 따라서 각 newSHE는 initialSHE와 동일한 출처입니다.
navigation의 현재 엔트리 인덱스를 initialSHE의 navigation API 엔트리 인덱스 가져오기의 결과로 설정합니다.
navigation API 엔트리를
재활성화를 위해 업데이트하려면,
Navigation
navigation,
엔트리
목록
newSHEs,
및 세션 기록 엔트리
reactivatedSHE가 주어졌을 때 다음 단계를 수행합니다:
만약 navigation이 엔트리와 이벤트가 비활성화되어 있다면, 반환합니다.
newNHEs를 새로운 빈 목록으로 설정합니다.
각각의 newSHE에 대해 newSHEs를 반복합니다:
newNHE를 null로 설정합니다.
만약 oldNHEs가 newSHE를 포함하는
NavigationHistoryEntry
matchingOldNHE를 포함하고 있다면:
newNHE를 matchingOldNHE로 설정합니다.
삭제: matchingOldNHE를 oldNHEs에서 삭제합니다.
그렇지 않으면:
newNHE를 새로운
NavigationHistoryEntry
로
설정합니다.
이 객체는 navigation의 관련된 영역에서 생성됩니다.
newNHE의 세션 기록 엔트리를 newSHE로 설정합니다.
추가: newNHE를 newNHEs에 추가합니다.
newSHEs는 원래 navigation API를 위한 세션 기록 엔트리 가져오기에서 나온 것입니다. 따라서 각 newSHE는 reactivatedSHE와 동일한 출처입니다.
이 반복이 끝나면, oldNHEs에 남아있는 모든 NavigationHistoryEntry
는
문서
가 bfcache에 있을 때 폐기된 세션 기록 엔트리를 나타냅니다.
navigation의 엔트리 목록을 newNHEs로 설정합니다.
navigation의 현재 엔트리 인덱스를 reactivatedSHE의 navigation API 엔트리 인덱스 가져오기의 결과로 설정합니다.
글로벌 태스크를 대기열에 추가: navigation의 관련된 글로벌 객체에서 navigation의 navigation 및 탐색 태스크 소스에 다음 단계를 실행합니다:
이 단계를 태스크로 지연시키는 이유는 dispose
이벤트가
pageshow
이벤트
후에 발생하도록 보장하기 위해서입니다.
이렇게 하면 재활성화될 때 페이지가 처음으로 받는 이벤트가
pageshow
이벤트가 됩니다.
(하지만 이 알고리즘의 나머지 부분은 pageshow
이벤트가 발생하기 전에 실행됩니다.
이렇게 하면 navigation.entries()
및
navigation.currentEntry
의
값이
pageshow
이벤트 핸들러 동안 올바르게 업데이트됩니다.)
동일 문서
탐색을 위한 navigation API 엔트리 업데이트하려면,
Navigation
navigation,
세션 기록 엔트리
destinationSHE,
및 NavigationType
navigationType이 주어졌을 때 다음 단계를 수행합니다:
만약 navigation이 엔트리와 이벤트가 비활성화되어 있다면, 반환합니다.
oldCurrentNHE를 navigation의 현재 엔트리로 설정합니다.
disposedNHEs를 새로운 빈 목록으로 설정합니다.
만약 navigationType이 "탐색
"이라면:
navigation의 현재 엔트리 인덱스를 destinationSHE의 navigation API 엔트리 인덱스 가져오기의 결과로 설정합니다.
확인: navigation의 현재 엔트리 인덱스가 -1이 아님을 확인합니다.
이 알고리즘은 동일 문서 탐색에만 호출됩니다. 교차 문서 탐색은 새 문서를 위한 navigation API 엔트리 초기화 또는 navigation API 엔트리를 재활성화를 위해 업데이트를 호출합니다.
그렇지 않고, navigationType이 "push
"이라면:
navigation의 현재 엔트리 인덱스를 navigation의 현재 엔트리 인덱스 + 1로 설정합니다.
i를 navigation의 현재 엔트리 인덱스로 설정합니다.
그렇지 않고, navigationType이 "replace
"라면:
추가: oldCurrentNHE를 disposedNHEs에 추가합니다.
만약 navigationType이 "push
"
또는 "replace
"이라면:
newNHE를 새로운
NavigationHistoryEntry
로
설정합니다.
이 객체는 navigation의 관련된 영역에서 생성됩니다.
newNHE의 세션 기록 엔트리를 destinationSHE로 설정합니다.
navigation의 엔트리 목록[navigation의 현재 엔트리 인덱스]을 newNHE로 설정합니다.
만약 navigation의 진행 중인 API 메서드 추적기가 null이 아니라면, navigation의 진행 중인 API 메서드 추적기 및 navigation의 현재 엔트리에 대해 커밋된 엔트리에 대해 알림을 수행합니다.
이 작업은 dispose
또는
currententrychange
이벤트를 발생시키기 전에 수행하는 것이 중요합니다.
이벤트 핸들러는 또 다른 탐색을 시작하거나 navigation의 진행 중인 API 메서드 추적기 값을 변경할 수 있습니다.
스크립트 실행 준비를 navigation의 관련된 설정 객체에 대해 수행합니다.
다른 navigation API 이벤트에 대한 논의를 이해하려면 탐색 이벤트 동안 마이크로태스크 억제에 대한 논의를 참조하십시오.
이벤트 발생:
navigation에서 currententrychange
이벤트를
NavigationCurrentEntryChangeEvent
을
사용하여 발생시킵니다.
이 이벤트의 navigationType
속성은 navigationType으로 초기화되며,
from
속성은 oldCurrentNHE로 초기화됩니다.
각각의 disposedNHE에 대해 disposedNHEs를 반복합니다:
스크립트 실행 후 정리를 navigation의 관련된 설정 객체에 대해 수행합니다.
구현에서는 동일 문서 탐색이 세션 기록 엔트리 목록에서 떨어져 나가면서 세션 기록 엔트리를 폐기할 수 있습니다. 이 경우의 정확한 동작은 아직 위 알고리즘(또는 이 표준의 다른 부분)에서 다루지 않고 있습니다. 이와 관련한 정의 진행 상황은 issue #8620에서 확인할 수 있습니다.
NavigationHistoryEntry
인터페이스[Exposed =Window ]
interface NavigationHistoryEntry : EventTarget {
readonly attribute USVString ? url ;
readonly attribute DOMString key ;
readonly attribute DOMString id ;
readonly attribute long long index ;
readonly attribute boolean sameDocument ;
any getState ();
attribute EventHandler ondispose ;
};
entry.url
이 탐색 기록 항목의 URL입니다.
이 항목이 현재 문서
와 다른 문서에
해당하는 경우(null을 반환할 수 있음), 즉 sameDocument
가
false이고 해당 문서
가
"no-referrer
" 또는 "origin
" 리퍼러 정책으로 가져온 경우, 해당 문서는 동일 출처 페이지에서도 URL을 숨기고 있다는
의미입니다.
entry.key
이 탐색 기록 항목의 위치를 나타내는 사용자 에이전트에서 생성된 랜덤 UUID 문자열입니다. 이 값은 "replace
"
탐색으로 인해 이 항목을 교체하는 다른 NavigationHistoryEntry
인스턴스에 의해 재사용되며, 페이지 새로고침 및 세션 복구 시에도 유지됩니다.
이 값은 navigation.traverseTo(key)
를
사용하여 탐색 기록 목록에서 이 항목으로 다시 이동하는 데 유용합니다.
entry.id
이 특정 탐색 기록 항목을 나타내는 사용자 에이전트에서 생성된 랜덤 UUID 문자열입니다. 이 값은 다른 NavigationHistoryEntry
인스턴스에 의해 재사용되지 않습니다. 이 값은 페이지 새로고침 및 세션 복구 시에도 유지됩니다.
이 값은 다른 저장소 API를 사용하여 이 탐색 기록 항목에 데이터를 연결하는 데 유용합니다.
entry.index
이 NavigationHistoryEntry
의
탐색 기록 목록 내 인덱스입니다. 탐색 기록 목록에 항목이 없으면 −1을 반환합니다.
entry.sameDocument
이 탐색 기록 항목이 현재 문서
와
동일한 문서에 해당하는지 여부를 나타냅니다. 예를 들어, 이 항목이 프래그먼트 탐색 또는 단일 페이지 애플리케이션 탐색을 나타내는 경우 true입니다.
entry.getState()
이 항목에 저장된 상태의 역직렬화를 반환합니다. 이 상태는 navigation.navigate()
또는 navigation.updateCurrentEntry()
를
사용하여 항목에 추가되었습니다. 이 상태는 페이지 새로고침 및 세션 복구 시에도 유지됩니다.
일반적으로 상태 값이 원시 값이 아닌 경우 entry.getState() !== entry.getState()
입니다. 매번 새롭게 역직렬화된 값이
반환되기 때문입니다.
이 상태는 클래식 히스토리 API의 history.state
와는
관련이 없습니다.
각 NavigationHistoryEntry
는
세션 히스토리 항목과 연결되어 있으며, 이는 세션 히스토리 항목입니다.
NavigationHistoryEntry
nhe의 키는 다음 알고리즘의 반환 값으로 결정됩니다:
nhe의 세션 히스토리 항목의 탐색 API 키를 반환합니다.
NavigationHistoryEntry
nhe의 ID는 다음 알고리즘의 반환 값으로 결정됩니다:
nhe의 세션 히스토리 항목의 탐색 API ID를 반환합니다.
NavigationHistoryEntry
nhe의 인덱스는 다음 알고리즘의 반환 값으로 결정됩니다:
nhe의 세션 히스토리 항목의 탐색 API 항목 인덱스를 가져오는 결과를 반환합니다.
접근자 단계는 다음과 같습니다:url
document가 완전히 활성화되지 않은 경우 빈 문자열을 반환합니다.
she를 this의 세션 히스토리 항목으로 설정합니다.
she의 문서가
document와 같지 않으며, she의 문서 상태의 요청 리퍼러 정책이
"no-referrer
" 또는 "origin
"인 경우 null을 반환합니다.
접근자 단계는 다음과 같습니다:key
접근자 단계는 다음과 같습니다:id
접근자 단계는 다음과 같습니다:index
접근자 단계는 다음과 같습니다:sameDocument
document가 완전히 활성화되지 않은 경우 false를 반환합니다.
this의 세션 히스토리 항목의 문서가 document와 동일한 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.
메서드 단계는 다음과 같습니다:getState()
StructuredDeserialize(this의 세션 히스토리 항목의 탐색 API 상태)를 반환하고, 모든 예외를 다시 던집니다.
이론적으로 큰 ArrayBuffer
를
역직렬화하려고 할 때 메모리가 부족한 경우 예외가 발생할 수 있습니다.
이벤트 핸들러 (및 해당 이벤트 핸들러 이벤트
타입)는 이벤트 핸들러 IDL 속성으로서 NavigationHistoryEntry
인터페이스를 구현하는 모든 객체에서 지원되어야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 타입 |
---|---|
ondispose |
dispose
|
entries = navigation.entries()
현재 내비게이션 히스토리 엔트리 목록을 나타내는 NavigationHistoryEntry
인스턴스 배열을 반환합니다. 즉, 이 navigable에 대한 모든 세션 히스토리 엔트리가 현재 세션 히스토리 엔트리와
동일한 출처이고 연속적으로 나열됩니다.
navigation.currentEntry
현재 세션 히스토리
엔트리에 해당하는 NavigationHistoryEntry
를
반환합니다.
navigation.updateCurrentEntry({ state })
현재 세션 히스토리
엔트리의 내비게이션
API 상태를 업데이트합니다. navigation.reload()
와
같은 탐색 작업을 수행하지 않고도 이 작업을 실행할 수 있습니다.
이 메서드는 이미 발생한 페이지 업데이트를 캡처하고 내비게이션 API 상태에 반영해야 할 때 가장 적합합니다. 상태 업데이트가 페이지 업데이트를 유도하려는 경우에는 대신 navigation.navigate()
또는 navigation.reload()
을
사용하십시오. 이는 navigate
이벤트를 트리거합니다.
navigation.canGoBack
현재 세션 히스토리
엔트리 (즉, currentEntry
)가
내비게이션 히스토리 엔트리 목록의 첫 번째가 아닌 경우 true를 반환합니다 (즉, entries()
에
있음). 이는 현재 문서
의 출처와
동일한 출처인 이전 세션 히스토리
엔트리가 존재함을 의미합니다.
navigation.canGoForward
현재 세션 히스토리
엔트리 (즉, currentEntry
)가
내비게이션 히스토리 엔트리 목록의 마지막이 아닌 경우 true를 반환합니다 (즉, entries()
에
있음). 이는 현재 문서
의 출처와
동일한 출처인 다음 세션 히스토리
엔트리가 존재함을 의미합니다.
메서드 entries()
의 단계는
다음과 같습니다:
this가 엔트리와 이벤트가 비활성화된 경우, 빈 목록을 반환합니다.
Web IDL의 시퀀스 타입 변환 규칙 때문에, 이는 각 호출 시 새로운 JavaScript 배열 객체를 생성합니다. 즉,
navigation.entries() !== navigation.entries()
입니다.
currentEntry
속성의 단계는 현재 엔트리를 this에서 반환하는 것입니다.
updateCurrentEntry(options)
메서드의 단계는 다음과 같습니다:
current가 null인 경우, "InvalidStateError
" DOMException
을
발생시킵니다.
serializedState를 StructuredSerializeForStorage(options["state
"])로
설정하고, 모든 예외를 다시 던집니다.
current의 세션 히스토리 엔트리의 내비게이션 API 상태를 serializedState로 설정합니다.
이벤트를 this에서 currententrychange
라는
이름으로 NavigationCurrentEntryChangeEvent
를
사용하여 발생시키며, 그 navigationType
속성을 null로 초기화하고, 그 from
속성을 current로 초기화합니다.
canGoBack
속성의
단계는 다음과 같습니다:
this가 엔트리와 이벤트가 비활성화된 경우, false를 반환합니다.
단언: this의 현재 엔트리 인덱스가 −1이 아님을 확인합니다.
this의 현재 엔트리 인덱스가 0인 경우, false를 반환합니다.
true를 반환합니다.
canGoForward
속성의 단계는 다음과 같습니다:
this가 엔트리와 이벤트가 비활성화된 경우, false를 반환합니다.
단언: this의 현재 엔트리 인덱스가 −1이 아님을 확인합니다.
this의 현재 엔트리 인덱스가 this의 엔트리 목록의 크기 - 1과 같으면 false를 반환합니다.
true를 반환합니다.
{ committed, finished } = navigation.navigate(url)
{ committed, finished } = navigation.navigate(url, options)
현재 페이지를 주어진 url로 내비게이트합니다. options에는 다음과 같은 값을 포함할 수 있습니다:
history
는
"replace
"로
설정하여
현재 세션 히스토리 엔트리를 새로 추가하는 대신 대체할 수 있습니다.
info
는
임의의 값으로 설정할 수 있으며, 해당 info
속성을 채웁니다. NavigateEvent
의
state
는
serializable한
값으로 설정할 수 있으며, 이는 동일 문서 내 내비게이션이 완료되면 navigation.currentEntry.getState()
에서 검색된 상태를 채웁니다. (교차 문서 내비게이션에서는 무시됩니다.)
기본적으로는 전체 내비게이션(즉, 교차 문서 내비게이션)을 수행하며, 주어진 URL이 현재 URL과 프래그먼트만 다를 경우에는 예외입니다.
navigateEvent.intercept()
메서드를 사용하여 이를 동일 문서 내비게이션으로 변환할 수 있습니다.
반환된 프로미스는 다음과 같이 동작합니다:
내비게이션이 중단된 경우, 두 프로미스 모두 "AbortError
"
DOMException
으로
거부됩니다.
navigateEvent.intercept()
메서드를 사용하여 생성된 동일 문서 내비게이션의 경우, committed
는
즉시 완료되며, finished
는
intercept()
에 전달된 핸들러가 반환한 프로미스에 따라 완료되거나 거부됩니다.
다른 동일 문서 내비게이션(e.g., 비-인터셉트된 프래그먼트 내비게이션)의 경우, 두 프로미스 모두 즉시 완료됩니다.
교차 문서 내비게이션이나 204 또는 205 상태를 반환하는 내비게이션의 경우, 또는 서버에서 `Content-Disposition: attachment
`
헤더 필드를 반환하여 실제로 내비게이션이 발생하지 않는 경우, 두 프로미스는 절대 완료되지 않습니다.
모든 경우에서, 반환된 프로미스가 완료될 때는 내비게이트된 NavigationHistoryEntry
로
완료됩니다.
{ committed, finished } = navigation.reload(options)
현재 페이지를 리로드합니다.
options에는 info
와
state
를
포함할 수 있으며, 이들은 위에서 설명한 대로 동작합니다.
기본적으로 현재 페이지를 네트워크 또는 캐시에서 다시 로드하는 동작은 navigateEvent.intercept()
메서드를 사용하여 오버라이드할 수 있습니다.
이렇게 하면 이 호출은 상태만 업데이트하거나 적절한 info
를
전달하고,
navigate
이벤트 핸들러가 수행하려는 작업을 수행하게 됩니다.
반환된 프로미스는 다음과 같이 동작합니다:
리로드가 navigateEvent.intercept()
메서드에 의해 인터셉트되면,
committed
는
즉시 완료되며,
finished
는
intercept()
에 전달된 핸들러가 반환한 프로미스에 따라 완료되거나 거부됩니다.
그 외의 경우, 두 프로미스는 절대 완료되지 않습니다.
{ committed, finished } = navigation.traverseTo(key)
{ committed, finished } = navigation.traverseTo(key, { info })
주어진 key와 일치하는 가장 가까운 세션 히스토리 엔트리로
트래버스합니다.
info
는
임의의 값으로 설정할 수 있으며,
해당 info
속성을 채웁니다. NavigateEvent
의
해당 세션
히스토리 엔트리로의 트래버스가 이미 진행 중인 경우, 이
메서드는 원래의 트래버스에 대한 프로미스를 반환하며, info
는 무시됩니다.
반환된 프로미스는 다음과 같이 동작합니다:
NavigationHistoryEntry
와
일치하는 navigation.entries()
내 key
가
없는 경우, 두 프로미스 모두 "InvalidStateError
"
DOMException
으로
거부됩니다.
navigateEvent.intercept()
메서드에 의해 인터셉트된 동일 문서 트래버스의 경우, committed
는
트래버스가 처리되고 navigation.currentEntry
가
업데이트되면 즉시 완료되며, finished
는
intercept()
에 전달된 핸들러가 반환한 프로미스에 따라 완료되거나 거부됩니다.
인터셉트되지 않은 동일 문서 트래버스의 경우, 두 프로미스 모두 트래버스가 처리되고 navigation.currentEntry
가
업데이트되면 완료됩니다.
교차 문서 트래버스의 경우, 또는 204 또는 205 상태를 반환하는 시도가 교차 문서 트래버스로 끝나는 경우, 서버에서 `Content-Disposition: attachment
`
헤더 필드를 반환하여 실제로 트래버스가 발생하지 않는 경우, 두 프로미스는 절대 완료되지 않습니다.
{ committed, finished } = navigation.back(key)
{ committed, finished } = navigation.back(key, { info })
가장 가까운 이전 세션 히스토리 엔트리로
트래버스하여 내비게이션 가능한 요소를 이동시킵니다.
즉, 다른 NavigationHistoryEntry
와
일치하여 navigation.currentEntry
가
변경됩니다.
info
는
임의의 값으로 설정할 수 있으며,
해당 info
속성을 채웁니다. NavigateEvent
의
해당 세션
히스토리 엔트리로의 트래버스가 이미 진행 중인 경우, 이
메서드는 원래의 트래버스에 대한 프로미스를 반환하며, info
는 무시됩니다.
반환된 프로미스는 traverseTo()
에서
반환된 것과 동일하게 동작합니다.
{ committed, finished } = navigation.forward(key)
{ committed, finished } = navigation.forward(key, { info })
가장 가까운 이후 세션 히스토리 엔트리로
트래버스하여 내비게이션 가능한 요소를 이동시킵니다.
즉, 다른 NavigationHistoryEntry
와
일치하여 navigation.currentEntry
가
변경됩니다.
info
는
임의의 값으로 설정할 수 있으며,
해당 info
속성을 채웁니다. NavigateEvent
의
해당 세션
히스토리 엔트리로의 트래버스가 이미 진행 중인 경우, 이
메서드는 원래의 트래버스에 대한 프로미스를 반환하며, info
는 무시됩니다.
반환된 프로미스는 traverseTo()
에서
반환된 것과 동일하게 동작합니다.
navigate(url, options)
메서드 단계는 다음과 같습니다:
urlRecord를 URL을 구문 분석한 결과로 설정합니다. url을 this의 관련 설정 객체에 상대적으로 제공합니다.
urlRecord가 실패한 경우, urlRecord에 대해 초기 오류 결과를 반환하고,
"SyntaxError
"
DOMException
을
반환합니다.
document를 this의 관련 글로벌 객체의 연관된 Document
로
설정합니다.
options["history
"]가
"push
"로
설정되어 있고,
urlRecord 및 document에 대해 이동이 교체여야 하는 경우,
urlRecord 및 document에 대해 초기 오류 결과를 반환하고,
"NotSupportedError
"
DOMException
을
반환합니다.
state를 options["state
"]로
설정하고,
존재하는 경우 존재합니다; 그렇지
않으면, undefined로 설정합니다.
serializedState를 StructuredSerializeForStorage(state)로 설정합니다. 예외가 발생하면, 그 예외에 대해 초기 오류 결과를 반환합니다.
이 단계는 초기 단계에서 수행되어야 합니다. 왜냐하면 직렬화는 웹 개발자 코드를 호출할 수 있으며, 이는 이후 단계에서 확인하는 여러 가지를 변경할 수 있기 때문입니다.
document가 완전히
활성화된 상태가 아니라면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
document의 언로드 카운터가 0보다 크다면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
info를 options["info
"]로
설정하고,
존재하는 경우 존재합니다; 그렇지
않으면, undefined로 설정합니다.
apiMethodTracker를 향후 비트래버스 API 메서드 트래커 설정 시도의 결과로 설정하고, this에 대해 info 및 serializedState를 제공합니다.
내비게이트
document의 노드 네비게이블을 urlRecord로 이동하고,
document를 사용하며, historyHandling을
options["history
"]에
설정하고, navigationAPIState를
serializedState에 설정합니다.
location.assign()
과
같은 기능은
도메인 경계 내 동일
출처 간에 노출되는 반면,
navigation.navigate()
는
window.navigation
속성에 대한 직접적인 동기식 접근이 있는 코드만 액세스할 수 있습니다.
따라서, 내비게이션의 소스 문서에 대한 귀속 문제를 피하고, 샌드박싱에 의해 내비게이션이 허용되었는지 확인 및
이에 동반되는 예외 허용 플래그를 처리할 필요가 없습니다.
모든 내비게이션을 이 Document
에 해당하는
Navigation
객체 자체에서 나온 것처럼 처리합니다 (즉, document).
this의 향후 비트래버스 API 메서드 트래커가 apiMethodTracker라면, 다음을 수행합니다:
향후 비트래버스 API
메서드 트래커가
여전히 apiMethodTracker인 경우, 이는 navigate 알고리즘이
내부
navigate
이벤트 발사 알고리즘에 도달하기 전에 중단되었음을 의미하며,
이는 향후 API
메서드 트래커를 진행 중으로 승격시킬 수 있었을 것입니다.
this의 향후 비트래버스 API 메서드 트래커를 null로 설정합니다.
초기 오류 결과를
""AbortError
""에 대해 반환합니다
DOMException
.
API 메서드 트래커 파생 결과를 apiMethodTracker에 대해 반환합니다.
reload(options)
메서드 단계는 다음과 같습니다:
document를 this의 관련 글로벌 객체의 연관된 Document
로
설정합니다.
serializedState를 StructuredSerializeForStorage(undefined)로 설정합니다.
만약 options["state
"]가
존재한다면,
serializedState를 StructuredSerializeForStorage(options["state
"])로
설정합니다.
만약 이 과정에서 예외가 발생하면, 그 예외에 대한 초기 오류 결과를 반환합니다.
이 단계는 초기 단계에서 수행되어야 합니다. 직렬화 과정에서 웹 개발자 코드를 호출할 수 있으며, 이는 이후 단계에서 확인할 다양한 요소를 변경할 수 있기 때문입니다.
그렇지 않으면:
만약 current가 null이 아니라면, serializedState를 current의 세션 기록 항목의 내비게이션 API 상태로 설정합니다.
document가 완전히 활성화된 상태가 아니라면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
document의 언로드 카운터가 0보다 크다면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
info를 options["info
"]로
설정하고,
존재하는 경우 존재합니다; 그렇지
않으면, undefined로 설정합니다.
apiMethodTracker를 향후 비트래버스 API 메서드 트래커 설정 시도의 결과로 설정하고, this에 대해 info 및 serializedState를 제공합니다.
다시 로드 document의 노드 네비게이블을 navigationAPIState로 설정하고, serializedState에 설정합니다.
API 메서드 트래커 파생 결과를 apiMethodTracker에 대해 반환합니다.
traverseTo(key, options)
메서드 단계는 다음과 같습니다:
this의
현재 항목 인덱스가 -1이라면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
this의
항목
목록에
포함되지 않은
NavigationHistoryEntry
가
있거나,
해당 세션 기록 항목의 네비게이션 API 키가 key와
일치하지 않으면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
네비게이션 API 탐색 수행의 결과를 this, key, options을 주고 반환합니다.
back(options)
메서드 단계는 다음과 같습니다:
this의
현재 항목 인덱스가 -1 또는
0이면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
key를 this의 항목 목록[this의 현재 항목 인덱스 - 1]의 세션 기록 항목의 네비게이션 API 키로 설정합니다.
네비게이션 API 탐색 수행의 결과를 this, key, options을 주고 반환합니다.
forward(options)
메서드 단계는 다음과 같습니다:
this의
현재 항목 인덱스가 -1이거나,
this의
항목
목록의
크기 - 1과 같다면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
key를 this의 항목 목록[this의 현재 항목 인덱스 + 1]의 세션 기록 항목의 네비게이션 API 키로 설정합니다.
네비게이션 API 탐색 수행의 결과를 this, key, options을 주고 반환합니다.
네비게이션 API 탐색을 수행하기 위해 Navigation
navigation, 문자열 key, 및 NavigationOptions
options가 주어졌을 때:
document를 navigation의 관련 글로벌 객체의 연관된 Document
로
설정합니다.
만약 document가 완전히 활성화된 상태가 아니라면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
만약 document의 언로드 카운터가 0보다 크다면,
초기 오류 결과를 반환하고,
"InvalidStateError
"
DOMException
을
반환합니다.
current를 navigation의 현재 항목으로 설정합니다.
만약 key가 current의 세션 기록 항목의 네비게이션 API 키와 같다면,
«[ "committed
"
→
해결된 약속 current, "finished
"
→
해결된 약속 current ]»을 반환합니다.
만약 navigation의 다가오는 탐색 API 메서드 트래커들[key]가 존재한다면, 네비게이션 API 메서드 트래커 파생 결과를 navigation의 다가오는 탐색 API 메서드 트래커들[key]에 대해 반환합니다.
info를 options["info
"]로
설정하고,
존재하는 경우 존재합니다; 그렇지
않으면, undefined로 설정합니다.
apiMethodTracker를 다가오는 탐색 API 메서드 트래커 추가의 결과로 설정하고, navigation에 대해 key 및 info를 제공합니다.
navigable를 document의 노드 네비게이블로 설정합니다.
traversable를 navigable의 탐색 가능한 네비게이블로 설정합니다.
sourceSnapshotParams를 document에 대해 소스 스냅샷 매개변수 스냅샷의 결과로 설정합니다.
traversable에 다음 세션 기록 탐색 단계를 추가합니다:
navigableSHEs를 navigable에 대해 세션 기록 항목 가져오기의 결과로 설정합니다.
targetSHE를 navigableSHEs 내에서 key와 일치하는 네비게이션 API 키를 가진 세션 기록 항목으로 설정합니다. 만약 그러한 항목이 존재하지 않는다면:
글로벌 작업 대기열에
navigation의 관련 글로벌 객체를
제공하여,
apiMethodTracker의 완료된 약속을 거절하고,
"InvalidStateError
"
DOMException
을
반환합니다.
이 단계를 중단합니다.
이 경로는 navigation의 항목 목록이 navigableSHEs와 비교하여 오래된 경우에 선택됩니다. 이는 기록 변경에 대한 반응으로 관련된 모든 스레드와 프로세스가 동기화되는 동안 짧은 기간 동안 발생할 수 있습니다.
만약 targetSHE가 navigable의 활성 세션 기록 항목이라면, 이 단계를 중단합니다.
이 경우는 이전에 대기열에 추가된 탐색이 이미 이 세션 기록 항목으로 이동했을 때 발생할 수 있습니다. 이 경우 이전 탐색이 이미 apiMethodTracker를 처리했을 것입니다.
result를 targetSHE의 단계에 따라
traversable에 대해 탐색 기록 단계를
적용한 결과로 설정하고,
sourceSnapshotParams, navigable, 및 "none
"을
사용합니다.
만약 result가 "canceled-by-beforeunload
"이라면,
글로벌 작업 대기열에
navigation의 관련 글로벌 객체를 제공하여,
apiMethodTracker의 완료된 약속을 거절하고,
새로운 "AbortError
"
DOMException
을
navigation의 관련 영역에서 생성합니다.
만약 result가 "initiator-disallowed
"이라면,
글로벌 작업 대기열에
navigation의
관련 글로벌 객체를 제공하여,
apiMethodTracker의 완료된 약속을 거절하고,
새로운 "SecurityError
"
DOMException
을
navigation의 관련 영역에서 생성합니다.
result가 "canceled-by-beforeunload
" 또는
"initiator-disallowed
"일 때,
navigate
이벤트는 발생하지 않았으며,
진행 중인 네비게이션
중단은 올바르지 않을 것입니다.
이는 navigateerror
이벤트 없이 이전 navigate
이벤트 없이 발생할 수 있습니다.
"canceled-by-navigate
"의 경우,
navigate
이벤트가 발생하지만,
내부
navigate
이벤트 발생 알고리즘은
진행 중인 네비게이션
중단을 처리할 것입니다.
apiMethodTracker에 대해 네비게이션 API 메서드 트래커 파생 결과를 반환합니다.
초기 오류 결과는 예외 e에 대해 NavigationResult
딕셔너리 인스턴스로 주어지며, «[ "committed
"
→
거절된
약속 e, "finished
"
→
거절된
약속 e ]»로 주어집니다.
네비게이션 API 메서드 트래커 파생 결과는 네비게이션 API 메서드 트래커에 대해 NavigationResult
딕셔너리 인스턴스로 주어지며,
«[ "committed
"
→
apiMethodTracker의 커밋된 약속, "finished
"
→
apiMethodTracker의 완료된 약속 ]»로 주어집니다.
어떤 네비게이션(단어의 광범위한 의미에서)이든,
Navigation
객체는 다음을 추적해야 합니다:
상태 | 기간 | 설명 |
---|---|---|
NavigateEvent
| 이벤트가 발생하는 동안 | 이벤트가 발생하는 동안 네비게이션이 취소되면, 이벤트를 취소할 수 있도록 |
이벤트의 중단 컨트롤러 | intercept() 에
전달된 핸들러에서 반환된 모든 약속이 해결될 때까지
| 네비게이션이 취소되면 중단 신호를 보낼 수 있도록 |
새 요소가 포커스된 여부 | intercept() 에
전달된 모든 약속이 해결될 때까지
| 만약 포커스가 변경된 경우, 포커스가 리셋되지 않도록 |
NavigationHistoryEntry 에
대한 네비게이션 여부
| 결정된 후부터 intercept() 에
전달된 모든 약속이 해결될 때까지
| committed 와
finished
약속을 무엇으로 해결할지 알 수 있도록
|
반환된 모든 finished
약속
| intercept() 에
전달된 모든 약속이 해결될 때까지
| 적절하게 해결하거나 거절할 수 있도록 |
상태 | 기간 | 설명 |
---|---|---|
state
| 이벤트가 발생하는 동안 | 이벤트가 취소되지 않은 채로 발생이 완료되면, 현재 항목의 네비게이션 API 상태를 업데이트할 수 있도록 |
상태 | 기간 | 설명 |
---|---|---|
info
| navigate 이벤트를
발생시키는 작업이 대기열에 추가될 때까지
| 세션 기록 탐색 대기열을 거친 후 navigate 이벤트를
발생시키기 위해 사용될 수 있도록
|
반환된 모든 committed
약속
| 세션 기록이 업데이트될 때까지(동일한 작업 내에서) | 적절하게 해결하거나 거절할 수 있도록 |
intercept() 가
호출되었는지 여부
| 세션 기록이 업데이트될 때까지(동일한 작업 내에서) | 기본 스크롤 복원 로직을 억제하고 scroll
옵션에 의해 주어진 동작을 따를 수 있도록
|
또한, 다음과 같은 웹 개발자 코드로 인해 주어진 시간에 단일 네비게이션 요청만 있다고 가정할 수 없습니다:
const p1 = navigation. navigate( url1). finished;
const p2 = navigation. navigate( url2). finished;
즉, 이 시나리오에서는 url2
로 네비게이션하는 동안에도 여전히 약속 p1
을 유지하여 거절할 수 있어야 합니다.
navigate()
에
대한 두 번째 호출이 발생하는 순간 진행 중인 네비게이션 약속을 모두 제거할 수는 없습니다.
우리는 이 모든 것을 각 Navigation
과 다음을
연관시켜 달성합니다:
진행 중인 navigate
이벤트,
NavigateEvent
또는
null, 초기에는 null입니다.
진행 중인 네비게이션 동안 포커스가 변경됨, 불리언, 초기에는 false입니다.
진행 중인 네비게이션 동안 기본 스크롤 복원을 억제, 불리언, 초기에는 false입니다.
진행 중인 API 메서드 추적기, 네비게이션 API 메서드 추적기 또는 null, 초기에는 null입니다.
다가오는 비-트래버스 API 메서드 추적기, 네비게이션 API 메서드 추적기 또는 null, 초기에는 null입니다.
다가오는 트래버스 API 메서드 추적기들, 문자열에서 정렬된 맵으로 네비게이션 API 메서드 추적기들, 초기에는 비어있습니다.
여기에서 네비게이션 API 메서드 추적기에 저장되지 않은 상태는 네비게이션 API 메서드에 의해 시작되지 않은 네비게이션에도 추적해야 하는 상태입니다.
네비게이션 API 메서드 추적기는 다음 구조체와 함께 항목들로 구성됩니다:
네비게이션 객체, Navigation
키, 문자열 또는 null
정보, 자바스크립트 값
직렬화된 상태, 직렬화된 상태 또는 null
커밋된 항목, NavigationHistoryEntry
또는 null
커밋된 약속, 약속
완료된 약속, 약속
이 모든 상태는 다음 알고리즘을 통해 관리됩니다.
다가오는 비-트래버스 API 메서드 추적기를 설정할지 여부를 결정하기 위해
Navigation
navigation, 자바스크립트 값 info, 그리고 직렬화된 상태 또는 null serializedState를 전달받았을 때:
committedPromise와 finishedPromise를 navigation의 관련 영역에서 새롭게 생성된 약속으로 설정합니다.
처리된 것으로 표시합니다 finishedPromise를.
apiMethodTracker를 다음과 같이 새 네비게이션 API 메서드 추적기로 설정합니다:
단언: navigation의 다가오는 비-트래버스 API 메서드 추적기는 null입니다.
navigation이 항목 및 이벤트가 비활성화된 상태가 아니면, navigation의 다가오는 비-트래버스 API 메서드 추적기를 apiMethodTracker로 설정합니다.
navigation이 항목 및 이벤트가 비활성화된 상태인 경우
committedPromise와 finishedPromise는 절대 완료되지 않습니다(이러한 NavigationHistoryEntry
객체를 생성하지 않으므로 이를 해결할 방법이 없기 때문입니다); serializedState를 적용할 NavigationHistoryEntry
가
없으며, info와 함께 포함될 navigate
이벤트도
없습니다. 따라서 이 API 메서드 호출을 추적할 필요가 없습니다.
apiMethodTracker를 반환합니다.
다가오는 트래버스 API 메서드 추적기 추가하기 위해 Navigation
navigation,
문자열 destinationKey, 그리고 자바스크립트 값 info를 전달받았을 때:
committedPromise와 finishedPromise를 navigation의 관련 영역에서 새롭게 생성된 약속으로 설정합니다.
처리된 것으로 표시합니다 finishedPromise를.
이것이 수행되는 이유에 대한 이전 설명을 참조하세요.
apiMethodTracker를 다음과 같이 새 네비게이션 API 메서드 추적기로 설정합니다:
navigation의 다가오는 트래버스 API 메서드 추적기들[key]을 apiMethodTracker로 설정합니다.
apiMethodTracker를 반환합니다.
Navigation
navigation 및 문자열 또는 null destinationKey를 제공받아 다가오는 API 메서드 추적기를 현재 진행 중인 것으로 승격하려면 다음을 수행합니다:
단언: navigation의 진행 중인 API 메서드 추적기가 null이어야 합니다.
destinationKey가 null이 아닌 경우:
단언: navigation의 다가오는 비-트래버스 API 메서드 추적기가 null이어야 합니다.
만약 navigation의 다가오는 트래버스 API 메서드 추적기[destinationKey]가 존재하는 경우:
navigation의 진행 중인 API 메서드 추적기를 navigation의 다가오는 트래버스 API 메서드 추적기[destinationKey]로 설정합니다.
제거합니다 navigation의 다가오는 트래버스 API 메서드 추적기[destinationKey].
그 외의 경우:
navigation의 진행 중인 API 메서드 추적기를 navigation의 다가오는 비-트래버스 API 메서드 추적기로 설정합니다.
navigation의 다가오는 비-트래버스 API 메서드 추적기를 null로 설정합니다.
정리하려면 navigation API method tracker apiMethodTracker를 다음과 같이 수행하십시오:
apiMethodTracker의 navigation 객체를 navigation으로 설정합니다.
만약 navigation의 진행 중인 API 메서드 추적기가 apiMethodTracker라면, navigation의 진행 중인 API 메서드 추적기를 null로 설정합니다.
그렇지 않으면:
apiMethodTracker의 key를 key로 설정합니다.
단언: key가 null이 아닙니다.
단언: navigation의 다가오는 트래버스 API 메서드 추적기[key]가 존재하는지 확인합니다.
제거합니다 navigation의 다가오는 트래버스 API 메서드 추적기[key].
NavigationHistoryEntry
nhe와 Navigation API 메서드 추적기
apiMethodTracker를 제공받아 확정된 항목에 대해 알림을 수행하려면 다음을
수행합니다:
apiMethodTracker의 확정된 항목을 nhe로 설정합니다.
만약 apiMethodTracker의 직렬화된 상태가 null이 아니라면, nhe의 세션 기록 항목의 Navigation API 상태를 apiMethodTracker의 직렬화된 상태로 설정합니다.
이것이 null인 경우, 우리는 navigation.traverseTo()
를
통해 nhe로 이동 중입니다. 이는 상태 변경을 허용하지 않습니다.
이 시점에서 apiMethodTracker의 직렬화된 상태는 더 이상 필요하지 않습니다. 구현에서는 Navigation API 메서드 추적기의 수명 동안 이를 유지하지 않도록 지우는 것이 좋습니다.
apiMethodTracker의 확정된 약속을 nhe로 해결합니다.
이 시점에서 apiMethodTracker의 확정된 약속은 저작자 코드에 아직 반환되지 않은 경우에만 필요합니다. 구현에서는 Navigation API 메서드 추적기의 수명 동안 이를 유지하지 않도록 지우는 것이 좋습니다.
navigation API 메서드 추적기 apiMethodTracker의 완료된 약속을 해결하려면:
apiMethodTracker의 확정된 약속을 확정된 항목으로 해결합니다.
일반적으로 확정된 항목에 대해 알림이 이미 apiMethodTracker에서 호출되었기 때문에, 이 단계는 아무것도 하지 않습니다. 그러나 어떤 경우에는 완료된 약속을 해결이 직접 호출될 수 있으며, 이 단계가 필요합니다.
정리 apiMethodTracker.
navigation API 메서드 추적기 apiMethodTracker의 완료된 약속을 거부하려면 JavaScript 값 exception을 사용하여 다음을 수행합니다:
apiMethodTracker의 확정된 약속을 exception으로 거부합니다.
이것은 apiMethodTracker의 확정된 약속이 이전에 확정된 항목에 대해 알림을 통해 해결된 경우 아무 일도 하지 않습니다.
apiMethodTracker의 완료된 약속을 exception으로 거부합니다.
정리 apiMethodTracker.
옵션 DOMException
error와 함께 Navigation
navigation의 진행 중인 탐색을 중단하려면 다음을 수행합니다:
navigation의 진행 중인 navigate
이벤트를
event로 설정합니다.
단언: event가 null이 아닙니다.
navigation의 진행 중인 탐색 중 포커스 변경됨을 false로 설정합니다.
navigation의 진행 중인 탐색 중 정상 스크롤 복원 억제를 false로 설정합니다.
error가 제공되지 않은 경우, error를 navigation의 관련 영역에서 생성된 새로운 "AbortError
" DOMException
으로
설정합니다.
navigation의 진행 중인 navigate
이벤트를 null로
설정합니다.
error에서 오류 정보 추출의 결과를 errorInfo로 설정합니다.
예를 들어, 이 알고리즘이 window.stop()
호출로 인해 실행되는 경우, 이러한 속성들은 window.stop()
을
호출한 스크립트 줄을 기반으로 초기화될 수 있습니다. 그러나 사용자가 중지 버튼을 클릭한 경우, 이러한 속성들은 빈 문자열 또는 0과 같은 기본 값으로 초기화될 가능성이 큽니다.
이벤트를
실행하고 navigation에서 navigateerror
라는
이름을 사용하여, ErrorEvent
를
사용하여 추가 속성을 errorInfo에 따라 초기화합니다.
만약 navigation의 진행 중인 API 메서드 추적기가 null이 아닌 경우, 완료된 약속을 거부 apiMethodTracker에 대해 error와 함께 수행합니다.
만약 navigation의 전환이 null이 아닌 경우:
탐색 취소에 대해 navigation API에 알리려면 탐색 가능한 navigable에서 다음을 수행하십시오:
이 알고리즘이 navigable의 활성 창의 관련 에이전트의 이벤트 루프에서 실행 중이라면, 다음 단계로 진행합니다. 그렇지 않으면, navigable의 활성 창에 대해 다음 단계를 실행하도록 전역 작업을 대기열에 추가합니다.
만약 navigation의 진행 중인 navigate
이벤트가
null이면, 반환합니다.
진행 중인 탐색을 중단을 navigation에 대해 수행합니다.
자식 탐색 가능 객체 파괴에 대해 탐색 API에 알림을 탐색 가능 객체 navigable에 대해 수행하려면:
탐색 중단에 대해 탐색 API에 알림을 navigable에서 수행합니다.
traversalAPIMethodTrackers을 navigation의 다가오는 탐색 API 메서드 추적기의 클론으로 설정합니다.
각 traversalAPIMethodTrackers의
apiMethodTracker에 대해 완료된 약속을 거부합니다. "AbortError
" DOMException
이
navigation의 관련 영역에서 생성됩니다.
진행 중인 탐색 개념은 웹 개발자에게 navigation.transition
속성을 통해 가장 직접적으로 노출됩니다. 이 속성은
NavigationTransition
인터페이스의 인스턴스입니다:
[Exposed =Window ]
interface NavigationTransition {
readonly attribute NavigationType navigationType ;
readonly attribute NavigationHistoryEntry from ;
readonly attribute Promise <undefined > finished ;
};
navigation.transition
아직 navigatesuccess
또는 navigateerror
단계에 도달하지 않은 진행 중인 탐색을 나타내는
NavigationTransition
입니다. 이러한 전환이 없으면 null을 반환합니다.
navigation.currentEntry
(및 location.href
와
같은
다른 속성들)이 탐색 시 즉시 업데이트되므로, 이
navigation.transition
속성은 탐색이 아직 완전히 완료되지 않았는지 확인하는 데 유용합니다.
navigation.transition.navigationType
이 전환이 어떤 유형의 탐색에 해당하는지를 나타내는 "push
",
"replace
",
"reload
",
또는 "traverse
"
중 하나입니다.
navigation.transition.from
전환이 시작된 NavigationHistoryEntry
를 반환합니다. 이는 navigation.currentEntry
와
비교하는 데 유용할 수 있습니다.
navigation.transition.finished
이 속성은 navigatesuccess
이벤트가
발생할 때 완료되거나, navigateerror
이벤트가 발생할 때 거부되는 프로미스를 반환합니다.
각 Navigation
객체는
transition을 가지며, 이는
NavigationTransition
또는 null입니다. 처음에는 null로 설정됩니다.
transition
getter 단계는 this의
transition을 반환하는 것입니다.
각 NavigationTransition
에는
navigation type이 연결되어 있으며,
이는 NavigationType
입니다.
각 NavigationTransition
에는
from entry가 연결되어 있으며, 이는
NavigationHistoryEntry
입니다.
각 NavigationTransition
에는
finished promise가 연결되어 있으며,
이는 프로미스입니다.
navigationType
getter 단계는 this의
navigation type을 반환하는 것입니다.
from
getter 단계는 this의
from
entry를 반환하는 것입니다.
finished
getter 단계는 this의
finished promise를 반환하는 것입니다.
NavigationActivation
인터페이스[Exposed =Window ]
interface NavigationActivation {
readonly attribute NavigationHistoryEntry ? from ;
readonly attribute NavigationHistoryEntry entry ;
readonly attribute NavigationType navigationType ;
};
navigation.activation
이 문서
를 "활성화한" 가장 최근의 문서 간
탐색에 대한 정보를 포함하는
NavigationActivation
입니다.
navigation.currentEntry
와
문서
의
URL이 동일한 문서 내 탐색으로 인해 정기적으로 업데이트될 수 있는 반면,
navigation.activation
은
일정하게 유지되며, 문서
가
기록에서 다시 활성화될
때만 해당 속성이 업데이트됩니다.
navigation.activation.entry
문서가 활성화될 때의 navigation.currentEntry
속성 값과 동일한
NavigationHistoryEntry
입니다.
navigation.activation.from
현재 문서
바로 전에 활성화되었던
문서
를 나타내는
NavigationHistoryEntry
입니다.
이전 문서
가
이 문서와 동일 출처가 아니거나,
초기
about:blank
문서
인 경우 null 값을 가집니다.
from
또는 entry
NavigationHistoryEntry
객체가
traverseTo()
메서드의 유효한 대상이
되지 않을 수 있는 몇 가지 사례가 있습니다. 예를 들어, 문서
는
location.replace()
를
사용하여
활성화되거나, 초기 항목이 history.replaceState()
로
대체될 수 있습니다. 그러나 이러한 항목의 url
속성과
getState()
메서드는 여전히 접근 가능합니다.
navigation.activation.navigationType
이 문서
를 활성화한 탐색 유형을 나타내는
"push
",
"replace
",
"reload
",
또는 "traverse
"
중 하나입니다.
각 Navigation
객체는 관련된 activation을 가지며,
이는 null 또는 NavigationActivation
객체이며,
초기 값은 null입니다.
각 NavigationActivation
은
다음을 가집니다:
old entry, null 또는
NavigationHistoryEntry
.
new entry, null 또는
NavigationHistoryEntry
.
navigation type,
NavigationType
.
activation
getter 단계는
this의
activation을 반환하는
것입니다.
from
getter 단계는 this의
old entry를
반환하는 것입니다.
entry
getter 단계는 this의
new entry를
반환하는 것입니다.
navigationType
getter 단계는 this의
navigation type을 반환하는 것입니다.
navigate
이벤트네비게이션 API의 주요 기능 중 하나는 navigate
이벤트입니다.
이 이벤트는 (단어의 광범위한 의미에서)
모든 네비게이션에서 발생하여, 웹 개발자가 이러한 외부 네비게이션을 모니터링할 수 있도록 합니다.
많은 경우에 이 이벤트는 취소 가능
하며,
이를 통해 네비게이션의 진행을 막을 수 있습니다.
또한, 다른 경우에는 intercept()
메서드를 사용하여 네비게이션을 가로채고 동일 문서 내 네비게이션으로 대체할 수 있습니다.
NavigateEvent
인터페이스[Exposed =Window ]
interface NavigateEvent : Event {
constructor (DOMString type , NavigateEventInit eventInitDict );
readonly attribute NavigationType navigationType ;
readonly attribute NavigationDestination destination ;
readonly attribute boolean canIntercept ;
readonly attribute boolean userInitiated ;
readonly attribute boolean hashChange ;
readonly attribute AbortSignal signal ;
readonly attribute FormData
? formData ;
readonly attribute DOMString ? downloadRequest ;
readonly attribute any info ;
readonly attribute boolean hasUAVisualTransition ;
undefined intercept (optional NavigationInterceptOptions options = {});
undefined scroll ();
};
dictionary NavigateEventInit : EventInit {
NavigationType navigationType = "push";
required NavigationDestination destination ;
boolean canIntercept = false ;
boolean userInitiated = false ;
boolean hashChange = false ;
required AbortSignal signal ;
FormData ? formData = null ;
DOMString ? downloadRequest = null ;
any info ;
boolean hasUAVisualTransition = false ;
};
dictionary NavigationInterceptOptions {
NavigationInterceptHandler handler ;
NavigationFocusReset focusReset ;
NavigationScrollBehavior scroll ;
};
enum NavigationFocusReset {
" after-transition " ,
" manual "
};
enum NavigationScrollBehavior {
" after-transition " ,
" manual "
};
callback NavigationInterceptHandler = Promise <undefined > ();
event.navigationType
"push
",
"replace
",
"reload
",
또는 "traverse
"
중 하나로, 이 네비게이션의 유형을 나타냅니다.
event.destination
네비게이션의 목적지를 나타내는
NavigationDestination
입니다.
event.canIntercept
이 네비게이션을 가로채고 동일 문서 내 네비게이션으로 전환할 수 있는
intercept()
메서드를 호출할 수 있는 경우 true, 그렇지 않으면 false입니다.
일반적으로, 현재
문서
가
목적지 URL로의 재작성 가능성을 가지고 있는 한, 이 값은 true입니다. 그러나
"문서 간 traverse
"
네비게이션의 경우 항상 false입니다.
event.userInitiated
이 네비게이션이
a
요소를 클릭하거나,
form
요소를 제출하거나,
브라우저 UI를 사용하여 발생한 경우 true, 그렇지 않으면 false입니다.
event.hashChange
프래그먼트 네비게이션의 경우 true, 그렇지 않으면 false입니다.
event.signal
사용자가 브라우저의 "중지" 버튼을 누르거나 다른 네비게이션이 이 네비게이션을 방해하는 등으로 인해 네비게이션이 취소되면 중단되는
AbortSignal
입니다.
개발자가 이 네비게이션을 처리하는 과정에서 수행하는 비동기 작업에 대해 이 신호를 전달하는 것이 권장됩니다. 예를 들어,
fetch()
를
호출할 때 이 신호를 전달할 수 있습니다.
event.formData
이 네비게이션이 "push
"
또는 "replace
"
네비게이션으로,
양식 제출을 나타내는 경우,
제출된 양식 항목을 나타내는 FormData
입니다.
그렇지 않으면 null입니다.
(특히, 원래 양식 제출로 생성된
세션 기록 항목을 다시
방문하는
"reload
"
또는 "traverse
"
네비게이션의 경우에도 이 값은 null입니다.)
event.downloadRequest
이 네비게이션이
a
또는
area
요소의 download
속성을 사용하여 다운로드로 요청되었는지를 나타냅니다:
다운로드가 요청되지 않은 경우 이 속성은 null입니다.
다운로드가 요청된 경우, 제공된 파일 이름을 반환합니다. (이 값은 빈 문자열일 수도 있습니다.)
다운로드가 요청되었다고 해서 항상 다운로드가 발생하는 것은 아닙니다. 예를 들어, 다운로드가 브라우저 보안 정책에 의해 차단되거나
"push
"
네비게이션으로 처리될 수 있습니다.
마찬가지로, 다운로드가 요청되지 않았더라도, 목적지 서버가 `Content-Disposition: attachment
`
헤더를 반환하여 다운로드가 발생할 수 있습니다.
마지막으로, 브라우저 UI 기능을 사용하여 시작된 다운로드에 대해서는
navigate
이벤트가 전혀 발생하지 않는다는 점에 유의하세요. 예를 들어, 마우스 오른쪽 버튼을 클릭하고 링크의 대상을 저장하는 것을 선택하는 경우가 이에 해당합니다.
event.info
이 네비게이션을 시작한 네비게이션 API 메서드 중 하나를 통해 전달된 임의의 JavaScript 값입니다. 사용자가 직접 시작했거나 다른 API에 의해 시작된 경우에는 undefined입니다.
event.hasUAVisualTransition
사용자 에이전트가 이 네비게이션에 대해 시각적 전환을 수행한 후에 이 이벤트가 디스패치되었는지 여부를 나타내며, 이 값이 true인 경우, 저자가 DOM을 즉시 포스트 네비게이션 상태로 업데이트하는 것이 최상의 사용자 경험을 제공합니다.
event.intercept({ handler, focusReset, scroll })
이 네비게이션을 가로채고, 이를 일반적인 처리 대신 목적지 URL로의 동일 문서 내 네비게이션으로 변환합니다.
handler
옵션은 프로미스를 반환하는 함수일 수 있습니다. 이 함수는
navigate
이벤트가 완료된 후 실행되며,
navigation.currentEntry
속성이 동기적으로 업데이트된 후에 실행됩니다. 이 반환된 프로미스는 네비게이션의 지속 시간과 성공 또는 실패를 신호하는 데 사용됩니다.
프로미스가 완료된 후, 브라우저는 로딩 스피너 UI 또는 보조 기술을 통해 네비게이션이 완료되었음을 사용자에게 신호합니다.
또한, 적절한 경우
navigatesuccess
또는
navigateerror
이벤트를 발생시켜 웹 애플리케이션의 다른 부분이 이에 응답할 수 있습니다.
기본적으로, 이 메서드를 사용하면 반환된 프로미스가 완료될 때 포커스가 초기화됩니다. 포커스는
autofocus
속성이 설정된 첫 번째 요소로 리셋되거나, 해당 속성이 없는 경우
body 요소로 리셋됩니다.
focusReset
옵션을 "manual
"로
설정하여 이 동작을 피할 수 있습니다.
기본적으로, 이 메서드를 사용하면
"traverse
"
또는 "reload
"
네비게이션의 경우 브라우저의 스크롤 복원 로직이,
"push
"
또는 "replace
"
네비게이션의 경우 스크롤 리셋/프래그먼트로의 스크롤 로직이 지연됩니다. 이 지연은 모든 핸들러의 반환된 프로미스가 완료될 때까지 유지됩니다.
scroll
옵션을 "manual
"로
설정하여
이 네비게이션에 대해 브라우저 구동 스크롤 동작을 완전히 비활성화할 수 있으며, 또는
scroll()
메서드를 프로미스가 완료되기 전에 호출하여 이 동작을 조기에 트리거할 수 있습니다.
이 메서드는 canIntercept
값이 false이거나 isTrusted
값이 false인 경우 ""SecurityError
"
DOMException
"
예외를 발생시킵니다.
또한, 이벤트 디스패치 중에 동기적으로 호출되지 않은 경우 ""InvalidStateError
"
DOMException
"
예외를 발생시킵니다.
event.scroll()
"traverse
"
또는 "reload
"
네비게이션의 경우, 브라우저의 일반적인 스크롤 복원 로직을 사용하여 스크롤 위치를 복원합니다.
"push
"
또는 "replace
"
네비게이션의 경우, 문서 상단으로 스크롤 위치를 리셋하거나, 프래그먼트가 있는 경우
destination.url
에
지정된 프래그먼트로 스크롤합니다.
이 메서드가 여러 번 호출되거나 자동 포스트 전환 스크롤 처리가
scroll
옵션이 "after-transition
"로
설정된 경우, 또는 네비게이션이 커밋되기 전에 호출되면 이 메서드는 ""InvalidStateError
"
DOMException
"
예외를 발생시킵니다.
각 NavigateEvent
는
"none
", "intercepted
", "committed
", "scrolled
",
또는 "finished
" 중 하나인 인터셉션 상태를 가지며, 초기 값은
"none
"입니다.
각 NavigateEvent
는
네비게이션 핸들러 목록을 가지며, 이는
NavigationInterceptHandler
콜백의
리스트로,
초기에는 비어 있습니다.
각 NavigateEvent
는
포커스 리셋 동작을 가지며, 이는
NavigationFocusReset
또는 null로, 초기 값은 null입니다.
각 NavigateEvent
는
스크롤 동작을 가지며, 이는
NavigationScrollBehavior
또는 null로, 초기 값은 null입니다.
각 NavigateEvent
는
중단 컨트롤러를 가지며, 이는
AbortController
또는 null로, 초기 값은 null입니다.
각 NavigateEvent
는
클래식 히스토리 API 상태를 가지며, 이는
직렬화된 상태 또는 null입니다.
이 상태는 이벤트의 navigationType
이
"push
"
또는 "replace
"인
경우에만 사용되며,
이벤트가 발생할 때 적절하게 설정됩니다.
navigationType
, destination
, canIntercept
, userInitiated
, hashChange
, signal
, formData
, downloadRequest
, info
, 및 hasUAVisualTransition
속성은 초기화된 값을 반환해야 합니다.
intercept(options)
메서드 단계는 다음과 같습니다:
this의
canIntercept
속성이 false로 초기화된 경우, ""SecurityError
"
DOMException
"을
발생시킵니다.
this의
디스패치 플래그가
설정되지 않은 경우, ""InvalidStateError
"
DOMException
"을
발생시킵니다.
만약 options["handler
"]가
존재하는 경우,
리스트에 추가합니다
this의
네비게이션 핸들러 목록에
추가합니다.
만약 options["focusReset
"]이
존재하는 경우, 다음을 실행합니다:
this의
포커스 리셋 동작이 null이 아니며,
options["focusReset
"]과
동일하지 않은 경우, 사용자 에이전트는
콘솔에 경고를 보고하여
이전에 intercept()
호출 시 설정된 focusReset
옵션이
이 새로운 값으로 덮어쓰여졌음을 알리고, 이전 값을 무시할 수 있습니다.
this의
포커스 리셋 동작을
options["focusReset
"]으로
설정합니다.
만약 options["scroll
"]이
존재하는 경우, 다음을 실행합니다:
this의
스크롤 동작이 null이 아니며,
options["scroll
"]과
동일하지 않은 경우, 사용자 에이전트는
콘솔에 경고를 보고하여
이전에 intercept()
호출 시 설정된 scroll
옵션이
이 새로운 값으로 덮어쓰여졌음을 알리고, 이전 값을 무시할 수 있습니다.
scroll()
메서드 단계는 다음과 같습니다:
this의
인터셉션 상태가
"committed
"가 아닌 경우, ""InvalidStateError
"
DOMException
"을
발생시킵니다.
공유된 체크 수행을
NavigateEvent
event에 대해 실행하려면:
만약 event의 관련 글로벌 객체의
관련된
Document
가
완전히 활성화된 상태가 아니라면,
""InvalidStateError
"
DOMException
"을
발생시킵니다.
만약 event의 isTrusted
속성이 false로 초기화된 경우, ""SecurityError
"
DOMException
"을
발생시킵니다.
만약 event의 취소 플래그가
설정된 경우, ""InvalidStateError
"
DOMException
"을
발생시킵니다.
NavigationDestination
인터페이스[Exposed =Window ]
interface NavigationDestination {
readonly attribute USVString url ;
readonly attribute DOMString key ;
readonly attribute DOMString id ;
readonly attribute long long index ;
readonly attribute boolean sameDocument ;
any getState ();
};
event.destination.url
네비게이션할 URL입니다.
event.destination.key
이 네비게이션이 "traverse
"
네비게이션인 경우, 목적지 NavigationHistoryEntry
의
key
속성 값입니다. 그렇지 않은 경우 빈 문자열입니다.
event.destination.id
이 네비게이션이 "traverse
"
네비게이션인 경우, 목적지 NavigationHistoryEntry
의
id
속성 값입니다. 그렇지 않은 경우 빈 문자열입니다.
event.destination.index
이 네비게이션이 "traverse
"
네비게이션인 경우, 목적지 NavigationHistoryEntry
의
index
속성 값입니다. 그렇지 않은 경우 -1입니다.
event.destination.sameDocument
이 네비게이션이 현재 문서
와
동일한 문서로의 네비게이션인지를 나타냅니다. 예를 들어, 프래그먼트 네비게이션이나
history.pushState()
네비게이션의 경우 true가 됩니다.
이 속성은 네비게이션의 원래 성격을 나타낸다는 점을 유의하세요. 만약 교차 문서 네비게이션이
navigateEvent.intercept()
메서드를 사용하여 동일 문서 네비게이션으로 변환되더라도 이 속성의 값은 변경되지 않습니다.
event.destination.getState()
"traverse
"
네비게이션의 경우, 목적지 세션 기록 항목에
저장된 상태의 디직렬화 값을 반환합니다.
"push
"
또는 "replace
"
네비게이션의 경우, 이 네비게이션이
navigation.navigate()
메서드를 사용하여 시작되었다면 전달된 상태의
디직렬화
값을 반환하며,
그렇지 않으면 undefined를 반환합니다.
"reload
"
네비게이션의 경우, 이 다시 로드가
navigation.reload()
메서드를 사용하여 시작되었다면 전달된 상태의
디직렬화
값을 반환하며,
그렇지 않으면 undefined를 반환합니다.
각 NavigationDestination
는
URL인
URL을 가집니다.
각 NavigationDestination
는
NavigationHistoryEntry
또는 null인 엔트리를 가집니다.
이것은 오직 NavigationDestination
가
"traverse
"
네비게이션과 일치하는 경우에만 null이 아닌 값을 가집니다.
각 NavigationDestination
는
직렬화된 상태인
상태를 가집니다.
각 NavigationDestination
는
boolean인 동일 문서 여부를 가집니다.
url
게터 단계는 this의
URL을
직렬화된 상태로 반환하는 것입니다.
key
게터 단계는 다음과 같습니다:
id
게터 단계는 다음과 같습니다:
index
게터 단계는 다음과 같습니다:
sameDocument
게터 단계는 this의
동일 문서 여부를
반환하는 것입니다.
getState()
메서드 단계는 StructuredDeserialize를
this의
state로
실행하는 것입니다.
표준의 다른 부분들은 이 섹션에 주어진 일련의 래퍼 알고리즘을 통해 navigate
이벤트를 발생시킵니다.
navigate
이벤트를 트래버스하여 발생시키기 위해
Navigation
navigation과 주어진 세션 기록
항목
destinationSHE,
그리고 선택적으로 사용자 네비게이션
개입
userInvolvement
(기본값 "없음
")을 사용하여:
navigation의 관련된 영역에서
NavigateEvent
를 주어 이벤트 생성의
결과로 event를 할당합니다.
event의 클래식 역사 API 상태를 null로 설정합니다.
navigation의 관련된 영역에서
새로 생성된 NavigationDestination
인 destination을 할당합니다.
destinationNHE를 navigation의 항목 목록에 있는
NavigationHistoryEntry
로
설정합니다. 해당 항목의 세션 기록 항목이 destinationSHE와
일치하거나
그러한 NavigationHistoryEntry
가
존재하지 않는 경우 null로 설정합니다.
destinationNHE가 null이 아닌 경우:
destination의 항목을 destinationNHE로 설정합니다.
destination의 상태를 destinationSHE의 네비게이션 API 상태로 설정합니다.
그 외의 경우,
destination의 항목을 null로 설정합니다.
destination의 상태를 StructuredSerializeForStorage(null)로 설정합니다.
destinationSHE의 문서가
navigation의 관련된 글로벌 객체의
관련된
문서
와 동일한 경우
destination의 동일 문서 여부를
true로 설정합니다. 그렇지 않은 경우 false로 설정합니다.
내부
navigate
이벤트 발생 알고리즘을 실행한 결과를 반환합니다.
navigation, "트래버스
",
event, destination, userInvolvement, null, 그리고 null을 전달합니다.
push/replace/reload navigate
이벤트를 발생시키기
위해
Navigation
navigation, 주어진
NavigationType
navigationType,
URL
destinationURL, boolean
isSameDocument, 선택적
사용자 네비게이션 개입
userInvolvement
(기본값 "없음
"), 선택적
항목 목록-또는-null formDataEntryList
(기본값 null), 선택적
직렬화된 상태
navigationAPIState
(기본값
StructuredSerializeForStorage(null)),
그리고 선택적
직렬화된 상태-또는-null
classicHistoryAPIState
(기본값
null)을 사용합니다:
navigation의 관련된 영역에서
NavigateEvent
를
주어 이벤트 생성의
결과로 event를 할당합니다.
event의 클래식 역사 API 상태를 classicHistoryAPIState로 설정합니다.
navigation의 관련된 영역에서
새로 생성된 NavigationDestination
인 destination을 할당합니다.
destination의 URL을 destinationURL로 설정합니다.
destination의 항목을 null로 설정합니다.
destination의 상태를 navigationAPIState로 설정합니다.
destination의 동일 문서 여부를 isSameDocument로 설정합니다.
내부
navigate
이벤트 발생 알고리즘을 실행한 결과를 반환합니다.
navigation, navigationType, event,
destination,
userInvolvement, formDataEntryList, 그리고 null을 전달합니다.
다운로드 요청 navigate
이벤트를 발생시키기 위해
Navigation
navigation, 주어진
URL
destinationURL,
사용자 네비게이션 개입
userInvolvement,
그리고 문자열
filename을 사용합니다:
navigation의 관련된 영역에서
NavigateEvent
를
주어 이벤트 생성의
결과로 event를 할당합니다.
event의 클래식 역사 API 상태를 null로 설정합니다.
navigation의 관련된 영역에서
새로 생성된 NavigationDestination
인 destination을 할당합니다.
destination의 URL을 destinationURL로 설정합니다.
destination의 항목을 null로 설정합니다.
destination의 상태를 StructuredSerializeForStorage(null)로 설정합니다.
destination의 동일 문서 여부를 false로 설정합니다.
내부
navigate
이벤트 발생 알고리즘을 실행한 결과를 반환합니다.
navigation, "push
",
event,
destination, userInvolvement, null, 그리고 filename을 전달합니다.
내부 navigate
이벤트 발생 알고리즘은
Navigation
navigation,
NavigationType
navigationType,
NavigateEvent
event,
NavigationDestination
destination,
사용자 네비게이션 개입
userInvolvement,
항목 목록-또는-null
formDataEntryList,
그리고 문자열-또는-null downloadRequestFilename을 사용하여 다음 단계를 포함합니다:
만약 navigation이 엔트리 및 이벤트 비활성화 상태라면:
확인: navigation의 진행 중인 API 메서드 트래커가 null이어야 합니다.
확인: navigation의 비트래버스 API 메서드 트래커가 null이어야 합니다.
확인: navigation의 트래버스 API 메서드 트래커 목록이 비어 있어야 합니다.
True를 반환합니다.
이러한 확인은 traverseTo()
,
back()
,
그리고 forward()
가 엔트리 및 이벤트가 비활성화된 경우에는 즉시 실패하기 때문에 유효합니다(탐색할 엔트리가 없으므로).
만약 시작점이 navigate()
또는 reload()
라면, 우리는 애초에 비트래버스 API 메서드 트래커 설정을
피했습니다.
destinationKey를 null로 설정합니다.
만약 destination의 엔트리가 null이 아니면, destinationKey를 destination의 엔트리의 키로 설정합니다.
확인: destinationKey가 빈 문자열이 아님을 확인합니다.
예정된 API 메서드 트래커를 진행 중으로 승격 합니다, navigation과 destinationKey를 인자로 전달합니다.
apiMethodTracker를 navigation의 진행 중인 API 메서드 트래커로 설정합니다.
만약 document가 URL을 재작성할 수 있고
destination의 URL로 설정될 수 있다면,
그리고 destination의 동일 문서가
true이거나 navigationType이 "traverse
"가
아니라면, event의
canIntercept
를 true로 초기화합니다. 그렇지 않으면 false로 초기화합니다.
다음 조건들 중 하나라도 true라면:
navigationType이 "
traverse
"가 아니다.
traverseCanBeCanceled이 true이다.
그렇다면 event의
취소 가능 여부
를
true로 초기화합니다.
그렇지 않으면 false로 초기화합니다.
event의
navigationType
을
navigationType으로 초기화합니다.
event의
목적지
를
destination으로 초기화합니다.
event의
다운로드 요청
을
downloadRequestFilename으로 초기화합니다.
만약 apiMethodTracker가 null이 아니라면, event의 info
를
apiMethodTracker의 정보로 초기화합니다. 그렇지 않다면 undefined로
초기화합니다.
이 시점에서 apiMethodTracker의 정보는 더 이상 필요하지 않으며, 네비게이션 API 메서드 트래커의 수명 동안 이를 유지하는 대신 null로 설정할 수 있습니다.
만약 사용자 에이전트가 document의 최신 항목의
캐시된 렌더링 상태를 표시하는 시각적 전환을 수행한 경우,
event의
hasUAVisualTransition
을 true로 초기화합니다.
그렇지 않다면 false로 초기화합니다.
event의 중단 컨트롤러를
navigation의 관련된 영역에서
생성된 새로운
AbortController
로
설정합니다.
currentURL을 document의 URL로 설정합니다.
만약 다음 조건들이 모두 true라면:
event의 클래식 역사 API 상태가 null이다.
destination의 동일 문서 여부가 true이다.
destination의 URL이 currentURL과 일치하며, 프래그먼트 제외가 true로 설정되어 있다.
그렇다면 event의
hashChange
를 true로 초기화합니다.
그렇지 않다면 false로 초기화합니다.
첫 번째 조건은
hashChange
가
프래그먼트 탐색에 대해 true로 설정되지만,
history.pushState(undefined, "", "#fragment")
와 같은 경우에는 false로 설정됩니다.
만약 userInvolvement이 "
none
"이 아니라면, event의 userInitiated
를
true로 초기화합니다. 그렇지 않다면 false로 초기화합니다.
만약 formDataEntryList가 null이 아니라면, event의 formData
를
navigation의 관련된 영역에서
생성된 새로운
FormData
로
formDataEntryList와 연결하여 초기화합니다. 그렇지 않다면 null로 초기화합니다.
확인: navigation의 진행 중인 navigate
이벤트가
null임을 확인합니다.
navigation의 진행 중인 navigate
이벤트를
event로 설정합니다.
navigation의 진행 중인 탐색 동안 포커스 변경 여부를 false로 설정합니다.
navigation의 진행 중인 탐색 동안 정상 스크롤 복원 억제 여부를 false로 설정합니다.
dispatchResult를 이벤트 디스패치의 결과로 설정합니다. 이 때, navigation에서 event를 디스패치합니다.
만약 dispatchResult가 false라면:
만약 navigationType이 "
traverse
"이라면, navigation의
관련된 전역
객체에 대해
히스토리 액션 사용자 활성화 소비를
수행합니다.
만약 event의 중단 컨트롤러의 신호가 중단되지 않은 경우, navigation에 대해 진행 중인 탐색 중단을 수행합니다.
false를 반환합니다.
endResultIsSameDocument를 event의
가로채기 상태가
"none
"이 아니거나, event의
목적지
의 동일 문서 여부가 true인 경우, true로
설정합니다.
navigation의 관련된 설정 객체를 사용하여 스크립트를 실행할 준비를 합니다.
만약 event의 가로채기 상태가
"none
"이 아니라면:
event의 가로채기 상태를
"committed
"로 설정합니다.
fromNHE을 navigation의 현재 엔트리로 설정합니다.
확인: fromNHE이 null이 아님을 확인합니다.
navigation의 전환을 navigation의
관련된 영역에서
생성된 새로운
NavigationTransition
으로 설정합니다. 이 때, 탐색 유형은
navigationType으로,
from 엔트리는
fromNHE로, 완료된 프로미스는
navigation의 관련된 영역에서
생성된 새로운 프로미스로 설정합니다.
처리된 것으로 표시 navigation의 전환의 완료된 프로미스를.
이 작업이 수행되는 이유는 다른 완료된 프로미스에 대한 논의를 참조하세요.
만약 navigationType이 "
traverse
"라면, navigation의
진행
중인 탐색 동안 정상 스크롤 복원 억제 여부를
true로 설정합니다.
만약 event의 스크롤 동작이 "
전환 후
"로 설정된 경우,
스크롤 복원은 관련
NavigateEvent
을 완료하는 동안 수행됩니다. 그렇지 않다면 스크롤 복원은 수행되지 않습니다.
즉,
intercept()
로 가로채진 탐색은 정상적인 스크롤 복원 과정을 거치지 않으며,
이러한 탐색의 스크롤 복원은 웹 개발자가 수동으로 수행하거나 전환 후에 수행됩니다.
만약 navigationType이 "
push
" 또는 "
replace
"라면, document와
event의
목적지
의 URL을 사용하여 URL 및 히스토리 업데이트 단계를 수행합니다.
이 때 직렬화된
데이터는
event의 클래식 역사 API
상태로,
역사 처리는
navigationType으로 설정됩니다.
만약 navigationType이 "
reload
"라면, 우리는 reload를 "동일 문서 재로드"로 변환하고 있으며,
URL 및 히스토리 업데이트 단계는
적절하지 않습니다. 네비게이션 API와 관련된 작업은 여전히 수행되며, 예를 들어
활성 세션
히스토리 엔트리의
네비게이션
API 상태가 업데이트되거나,
이 작업이
navigation.reload()
호출로 인해 발생한 경우
진행 중인 탐색 추적과 같은 작업이 수행됩니다.
만약 navigationType이 "
traverse
"라면,
이 이벤트 발사는 탐색 과정의
일부로 발생하고 있으며, 이 과정에서 적절한 세션 히스토리 엔트리 업데이트가 수행될 것입니다.
만약 endResultIsSameDocument가 true라면:
promisesList를 빈 리스트로 설정합니다.
각각의 handler를 event의 네비게이션 핸들러 목록에서:
추가합니다, 콜백 함수 호출의 결과를, 빈 인수 목록을 사용하여 promisesList에 추가합니다.
만약 promisesList의 크기가 0이라면, promisesList를 « undefined로 해결된 프로미스 »로 설정합니다.
여기서 모든 프로미스 대기가
0개의 프로미스를 받았을 때와 1개 이상의 프로미스를 받았을 때 성공 및 실패 단계를 예약하는 방식 사이에 미묘한 타이밍 차이가 있습니다.
대부분의 경우 모든 프로미스 대기의 사용에
있어서는 중요하지 않지만,
이 API의 경우에는 너무 많은 이벤트와 프로미스 핸들러가 거의 동시에 실행될 수 있어,
차이가 쉽게 관찰될 수 있습니다. 이는 이벤트/프로미스 핸들러 순서에 영향을 미칠 수 있습니다.
(예를 들어,
navigatesuccess
/
navigateerror
,
currententrychange
,
dispose
, apiMethodTracker의 프로미스,
그리고
navigation.transition.finished
프로미스와 같은 이벤트 및
프로미스를 포함합니다.)
모든 promisesList를 대기하고, 다음과 같은 성공 단계를 수행합니다:
확인: event가 navigation의
진행 중인
navigate
이벤트와
동일함을 확인합니다.
navigation의 진행 중인 navigate
이벤트를 null로 설정합니다.
event을 완료하고, true를 인자로 전달합니다.
이벤트를
발동하고, 이름을
navigatesuccess
로 설정합니다.
navigation에서 발동됩니다.
만약 apiMethodTracker가 null이 아니라면, 완료된 프로미스 해결을 apiMethodTracker에 대해 수행합니다.
만약 navigation의 전환이 null이 아니라면, navigation의 전환의 완료된 프로미스를 undefined로 해결합니다.
navigation의 전환을 null로 설정합니다.
다음과 같은 실패 단계를, rejectionReason을 인자로 하여 수행합니다:
확인: event가 navigation의
진행 중인
navigate
이벤트와
동일함을 확인합니다.
navigation의 진행 중인 navigate
이벤트를 null로 설정합니다.
event를 완료하고, false를 인자로 전달합니다.
errorInfo를 rejectionReason에서 오류 정보를 추출한 결과로 설정합니다.
이벤트를 발동하고, 이름을
navigateerror
로 설정합니다.
navigation에서 발동되며, 추가 속성은 errorInfo에 따라 초기화됩니다.
만약 apiMethodTracker가 null이 아니라면, 완료된 프로미스 거부를 apiMethodTracker에 대해 rejectionReason으로 수행합니다.
만약 navigation의 전환이 null이 아니라면, navigation의 전환의 완료된 프로미스를 rejectionReason으로 거부합니다.
navigation의 전환을 null로 설정합니다.
그렇지 않다면, apiMethodTracker가 null이 아니면, API 메서드 트래커 정리를 수행합니다.
스크립트 실행 후 정리를 수행하며, navigation의 관련된 설정 객체를 사용합니다.
이전 메모에 따라, 이는 잠재적인 프로미스 핸들러 마이크로태스크 억제를 중지시켜, 이를 이 시점 이후에 실행하게 합니다.
만약 event의 가로채기 상태가
"none
"이라면, true를 반환합니다.
false를 반환합니다.
navigateEvent.intercept()
를
호출하여,
웹 개발자는 동일 문서 내 네비게이션의 일반적인 스크롤 및 포커스 동작을 억제하고, 대신 나중에 교차 문서 네비게이션과 같은 동작을 호출할 수 있습니다. 이 섹션의 알고리즘은 나중에 적절한 시점에
호출됩니다.
부울 didFulfill이 주어진 NavigateEvent
event를 완료하려면:
만약 event의 인터셉션 상태가
"none
"이라면, 반환합니다.
포커스를 잠재적으로 리셋 합니다 event를 기반으로.
만약 didFulfill이 true라면, 스크롤 동작을 잠재적으로 처리 합니다 event를 기반으로.
event의 인터셉션 상태를
"finished
"로 설정합니다.
포커스를 잠재적으로 리셋하려면, NavigateEvent
event을 기반으로:
focusChanged을 navigation의 진행 중인 네비게이션 동안 포커스 변경으로 설정합니다.
navigation의 진행 중인 네비게이션 동안 포커스 변경을 false로 설정합니다.
만약 focusChanged이 true라면, 반환합니다.
만약 event의 포커스 리셋 동작이 "manual
"이라면,
반환합니다.
만약 null로 설정되었다면, 우리는 이를 "전환 후
"로
간주하고,
계속 진행합니다.
document를 event의 관련 글로벌 객체의 연결된
Document
로 설정합니다.
focusTarget을 document의 자동 포커스 대리자로 설정합니다.
만약 focusTarget이 null이라면, focusTarget을 document의 바디 요소로 설정합니다.
만약 focusTarget이 null이라면, focusTarget을 document의 문서 요소로 설정합니다.
순차 포커스 네비게이션 시작점을 focusTarget으로 이동합니다.
잠재적으로 스크롤 동작을 처리하려면,
NavigateEvent
event을 기반으로:
만약 event의 인터셉션 상태가
"scrolled
"이라면, 반환합니다.
만약 event의 스크롤 동작이 "manual
"이라면,
반환합니다.
만약 null로 설정되었다면, 우리는 이를 "전환 후
"로
간주하고,
계속 진행합니다.
스크롤 동작 처리를 event을 기반으로 수행합니다.
스크롤 동작 처리를 수행하려면, NavigateEvent
event을 기반으로:
event의 인터셉션 상태를
"scrolled
"로 설정합니다.
만약 event의 navigationType
이
"traverse
"
또는 "reload
"로
초기화되었다면,
스크롤 위치
데이터 복원을
event의 관련 글로벌 객체의 네비게이션 가능의 활성 세션 기록 항목을 기반으로 수행합니다.
그 외에는:
document를 event의 관련 글로벌 객체의
연결된
Document
로 설정합니다.
만약 document의 지정된 부분이 null이라면, 문서의 시작 부분으로 스크롤을 수행합니다 document을 기반으로. [CSSOMVIEW]
그 외에는, 프래그먼트로 스크롤을 document을 기반으로 수행합니다.
NavigateEvent
인터페이스는 그 복잡성 때문에 자체 전용 섹션이 있습니다.
NavigationCurrentEntryChangeEvent
인터페이스[Exposed =Window ]
interface NavigationCurrentEntryChangeEvent : Event {
constructor (DOMString type , NavigationCurrentEntryChangeEventInit eventInitDict );
readonly attribute NavigationType ? navigationType ;
readonly attribute NavigationHistoryEntry from ;
};
dictionary NavigationCurrentEntryChangeEventInit : EventInit {
NavigationType ? navigationType = null ;
required NavigationHistoryEntry from ;
};
event.navigationType
현재 항목이 변경된 원인이 된 탐색 유형을 반환하거나, 변경이 navigation.updateCurrentEntry()
로
인한 경우 null을 반환합니다.
event.from
현재 항목이 변경되기 전의 navigation.currentEntry
의
이전 값을 반환합니다.
만약 navigationType
이 null이거나 "reload
"인
경우, 이 값은
navigation.currentEntry
와
동일합니다.
이 경우, 우리는 새 항목으로 이동하거나 현재 항목을 교체하지 않았더라도 이벤트는 항목의 내용이 변경되었음을 의미합니다.
navigationType
과 from
속성은 초기화된 값을 반환해야 합니다.
PopStateEvent
인터페이스모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface PopStateEvent : Event {
constructor (DOMString type , optional PopStateEventInit eventInitDict = {});
readonly attribute any state ;
readonly attribute boolean hasUAVisualTransition ;
};
dictionary PopStateEventInit : EventInit {
any state = null ;
boolean hasUAVisualTransition = false ;
};
event.state
모든 현재 엔진에서 지원됩니다.
pushState()
나
replaceState()
에
제공된 정보의 복사본을 반환합니다.
event.hasUAVisualTransition
이 탐색에 대해 사용자 에이전트가 시각적 전환을 수행했는지 여부를 반환합니다. true인 경우, 작성자가 탐색 후 상태로 DOM을 동기식으로 업데이트하면 최고의 사용자 경험을 얻을 수 있습니다.
state
속성은 초기화된 값을 반환해야 합니다. 이 속성은 이벤트의 컨텍스트 정보를 나타내며, 만약 상태가 문서
의 초기 상태를 나타내는 경우 null을 반환합니다.
hasUAVisualTransition
속성은 초기화된 값을 반환해야 합니다.
HashChangeEvent
인터페이스HashChangeEvent/HashChangeEvent
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface HashChangeEvent : Event {
constructor (DOMString type , optional HashChangeEventInit eventInitDict = {});
readonly attribute USVString oldURL ;
readonly attribute USVString newURL ;
};
dictionary HashChangeEventInit : EventInit {
USVString oldURL = "";
USVString newURL = "";
};
event.oldURL
모든 현재 엔진에서 지원됩니다.
이전에 현재였던 세션 기록 항목의 URL을 반환합니다.
event.newURL
모든 현재 엔진에서 지원됩니다.
이제 현재인 세션 기록 항목의 URL을 반환합니다.
oldURL
속성은 초기화된 값을 반환해야 합니다. 이 속성은 탐색한 세션
기록 항목의 URL을 나타내는 이벤트의 컨텍스트 정보를 나타냅니다.
newURL
속성은 초기화된 값을 반환해야 합니다. 이 속성은 탐색된 세션
기록 항목의 URL을 나타내는 이벤트의 컨텍스트 정보를 나타냅니다.
PageSwapEvent
인터페이스[Exposed =Window ]
interface PageSwapEvent : Event {
constructor (DOMString type , optional PageSwapEventInit eventInitDict = {});
readonly attribute NavigationActivation
? activation ;
readonly attribute ViewTransition
? viewTransition ;
};
dictionary PageSwapEventInit : EventInit {
NavigationActivation ? activation = null ;
ViewTransition
? viewTransition = null ;
};
event.activation
NavigationActivation
객체는 문서 간 탐색의 목적지와 유형을 나타냅니다. 이 객체는 교차 출처 탐색에 대해서는 null이 됩니다.
event.activation.entry
NavigationHistoryEntry
객체로, 활성화되기 직전의 문서
를 나타냅니다.
event.activation.from
이 값은 이벤트가 발생할 당시 navigation.currentEntry
속성의 값과 동일한 NavigationHistoryEntry
객체입니다.
event.activation.navigationType
페이지 전환을 초래할 탐색의 유형을 나타내는 "push
",
"replace
",
"reload
",
또는 "traverse
"
중 하나입니다.
event.viewTransition
이벤트가 발생할 때 활성 상태인 경우, 문서 간 보기 전환을 나타내는 ViewTransition
객체를 반환합니다. 그렇지 않으면 null을 반환합니다.
activation
속성과 viewTransition
속성은 초기화된 값을
반환해야 합니다.
PageRevealEvent
인터페이스[Exposed =Window ]
interface PageRevealEvent : Event {
constructor (DOMString type , optional PageRevealEventInit eventInitDict = {});
readonly attribute ViewTransition
? viewTransition ;
};
dictionary PageRevealEventInit : EventInit {
ViewTransition
? viewTransition = null ;
};
event.viewTransition
이벤트가 발생할 때 활성 상태인 경우, 문서 간 보기 전환을 나타내는 ViewTransition
객체를 반환합니다. 그렇지 않으면 null을 반환합니다.
viewTransition
속성은 초기화된 값을 반환해야 합니다.
PageTransitionEvent
인터페이스PageTransitionEvent/PageTransitionEvent
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface PageTransitionEvent : Event {
constructor (DOMString type , optional PageTransitionEventInit eventInitDict = {});
readonly attribute boolean persisted ;
};
dictionary PageTransitionEventInit : EventInit {
boolean persisted = false ;
};
event.persisted
모든 현재 엔진에서 지원됩니다.
pageshow
이벤트의 경우, 페이지가 새로 로드되고 있는 경우 false를 반환하며(load
이벤트가 발생할 예정임),
그렇지 않으면 true를 반환합니다.
pagehide
이벤트의 경우, 페이지가 마지막으로 사라지고 있는 경우 false를 반환합니다. 그렇지 않으면 true를 반환하며, 이 경우 사용자가 이 페이지로 다시 탐색할 때 페이지가 재사용될 수
있음을 의미합니다(만약 문서
의 salvageable 상태가 true로 유지되는 경우).
페이지를 재사용할 수 없게 만드는 요인들에는 다음이 포함됩니다:
persisted
속성은 초기화된 값을 반환해야 합니다. 이 속성은 이벤트의 컨텍스트 정보를 나타냅니다.
페이지 전환 이벤트를 eventName으로 Window
객체에서 발생시키려면,
window에서 이벤트를 발생시키고,
PageTransitionEvent
객체를 사용하며, persisted
속성을 persisted로 초기화하고, cancelable
속성을 true로 초기화하며, bubbles
속성을 true로 초기화하고, legacy target override flag를 설정합니다.
cancelable
및 bubbles
속성의 값은 역사적인 이유로 true로 설정되어 있지만, 이벤트를 취소해도 아무런 영향이 없고, Window
객체를 넘어서 전파되는 것도 불가능하므로 의미가
없습니다.
BeforeUnloadEvent
인터페이스모든 현재 엔진에서 지원됩니다.
[Exposed =Window ]
interface BeforeUnloadEvent : Event {
attribute DOMString returnValue ;
};
BeforeUnloadEvent
에
특화된 초기화 메서드는 없습니다.
BeforeUnloadEvent
인터페이스는 이벤트를 취소하는 것뿐만 아니라 returnValue
속성을 빈 문자열이 아닌 값으로 설정하여 언로드가 취소되었는지 확인할 수 있도록 하는 레거시 인터페이스입니다. 작성자는 preventDefault()
메서드 또는 다른 이벤트 취소 수단을 사용해야 하며, returnValue
를
사용하는 것은 피해야 합니다.
returnValue
속성은 언로드가 취소되었는지 확인하는 과정을 제어합니다. 이벤트가
생성될 때 이 속성은 빈 문자열로 설정되어야 합니다. 이 속성을 가져올 때는 마지막으로 설정된 값을 반환해야 하며, 설정할 때는 새 값으로 설정되어야 합니다.
이 속성은 역사적인 이유로 DOMString
입니다. 빈 문자열이 아닌 값은 모두 사용자에게 확인을 요청하는 것으로 처리됩니다.
NotRestoredReasons
인터페이스[Exposed =Window ]
interface NotRestoredReasonDetails {
readonly attribute DOMString reason ;
[Default ] object toJSON ();
};
[Exposed =Window ]
interface NotRestoredReasons {
readonly attribute DOMString ? src ;
readonly attribute DOMString ? id ;
readonly attribute DOMString ? name ;
readonly attribute DOMString ? url ;
readonly attribute FrozenArray <NotRestoredReasonDetails >? reasons ;
readonly attribute FrozenArray <NotRestoredReasons >? children ;
[Default ] object toJSON ();
};
notRestoredReasonDetails.reason
문서가 앞뒤 캐시에서 제공되지 못하게 한 이유를 설명하는 문자열을 반환합니다. 가능한 문자열 값에 대한 정의는 bfcache 차단 세부 정보에서 확인할 수 있습니다.
notRestoredReasons.src
문서의 탐색 가능 노드의 컨테이너에서 src
속성을 반환합니다(iframe 요소인 경우). 이 속성이 설정되지 않았거나 iframe 요소가 아닌 경우 null일 수 있습니다.
notRestoredReasons.id
문서의 탐색 가능 노드의 컨테이너에서 id
속성을 반환합니다(iframe 요소인 경우). 이 속성이 설정되지 않았거나 iframe 요소가 아닌 경우 null일 수 있습니다.
notRestoredReasons.name
문서의 탐색 가능 노드의 컨테이너에서 name
속성을 반환합니다(iframe 요소인 경우). 이 속성이 설정되지 않았거나 iframe 요소가 아닌 경우 null일 수 있습니다.
notRestoredReasons.url
문서의 URL을 반환합니다. 문서가 교차 출처 iframe에 있는 경우 null을 반환할 수 있습니다.
이것은 src
외에
보고되며, iframe이 초기 src 설정 이후로 탐색된 경우가 있기 때문입니다.
notRestoredReasons.reasons
문서의 NotRestoredReasonDetails
배열을 반환합니다. 문서가 교차 출처 iframe에 있는 경우 이는 null일 수 있습니다.
notRestoredReasons.children
문서의 하위 항목에 대한 NotRestoredReasons
배열을 반환합니다. 문서가 교차 출처 iframe에 있는 경우 이는 null일 수 있습니다.
NotRestoredReasonDetails
개체는 지원 구조체, 복원되지 않은
이유
세부 정보 또는 null을 가집니다(초기 값은 null).
reason
getter 단계는
this의 지원
구조체의
reason을 반환합니다.
NotRestoredReasonDetails
개체를 생성하려면 복원되지 않은
이유
세부 정보 backingStruct 및 realm realm이 필요합니다:
notRestoredReasonDetails를 새로운 NotRestoredReasonDetails
개체로 realm에서 생성합니다.
notRestoredReasonDetails의 지원 구조체를 backingStruct로 설정합니다.
notRestoredReasonDetails를 반환합니다.
복원되지 않은 이유 세부 정보는 다음 구조체 항목으로 구성된 구조체입니다:
reason, 문자열, 초기 값은 비어 있음.
reason은 페이지가 앞뒤 캐시에서 복원되지 못하게 한 이유를 나타내는 문자열입니다. 문자열은 다음 중 하나일 수 있습니다:
fetch
"
Document
에 의해
시작된 fetch가
아직 진행 중이었으며 취소되어 페이지가 안정적인 상태에 있지 않았기 때문에 앞뒤 캐시에 저장되지 않았습니다.
navigation-failure
"
parser-aborted
"
websocket
"
WebSocket
연결이 종료되어 페이지가 안정적인 상태에 있지 않았기 때문에 앞뒤 캐시에 저장되지 않았습니다.
[WEBSOCKETS]
lock
"
masked
"
NotRestoredReasons
개체는 지원 구조체,
복원되지 않은 이유 또는 null을 가집니다(초기 값은 null).
NotRestoredReasons
개체는 reasons 배열을 가집니다. 이 배열은
FrozenArray<
또는 null일 수 있으며, 초기 값은 null입니다.
NotRestoredReasonDetails
>
NotRestoredReasons
개체는 children 배열을 가집니다. 이 배열은
FrozenArray<NotRestoredReasons>
또는 null일 수 있으며, 초기 값은 null입니다.
src
getter 단계는
this의 지원
구조체의
src을 반환하는 것입니다.
id
getter 단계는
this의 지원
구조체의 id를 반환하는 것입니다.
name
getter 단계는
this의 지원
구조체의 name을 반환하는 것입니다.
url
getter 단계는 다음과 같습니다:
reasons
getter 단계는
this의 reasons 배열을 반환하는 것입니다.
children
getter 단계는
this의 children
배열을 반환하는 것입니다.
NotRestoredReasons
개체를 생성하려면 복원되지 않은
이유 backingStruct 및 realm realm이 필요합니다:
notRestoredReasons를 새로운 NotRestoredReasons
개체로 realm에서 생성합니다.
notRestoredReasons의 지원 구조체를 backingStruct로 설정합니다.
backingStruct의 reasons가 null인 경우, notRestoredReasons의 reasons 배열을 null로 설정합니다.
그렇지 않은 경우:
reasonsArray를 빈 리스트로 설정합니다.
각 reason에 대해 backingStruct의 reasons를 반복합니다:
NotRestoredReasonDetails
개체를 reason 및 realm을 기준으로 생성하고, 이를 reasonsArray에
추가합니다.
notRestoredReasons의 reasons 배열을 고정된 배열을 생성하여 reasonsArray로 설정합니다.
backingStruct의 children가 null인 경우, notRestoredReasons의 children 배열을 null로 설정합니다.
그렇지 않은 경우:
childrenArray를 빈 리스트로 설정합니다.
각 child에 대해 backingStruct의 children를 반복합니다:
NotRestoredReasons
개체를 child 및 realm을 기준으로 생성하고, 이를 childrenArray에
추가합니다.
notRestoredReasons의 children 배열을 고정된 배열을 생성하여 childrenArray로 설정합니다.
notRestoredReasons을 반환합니다.
복원되지 않은 이유는 다음 구조체 항목으로 구성된 구조체입니다:
src, 문자열 또는 null, 초기 값은 null.
id, 문자열 또는 null, 초기 값은 null.
name, 문자열 또는 null, 초기 값은 null.
url, URL 또는 null, 초기 값은 null.
reasons, null 또는 리스트이며, 복원되지 않은 이유 세부 정보를 포함하며, 초기 값은 null.
children, null 또는 리스트이며, 복원되지 않은 이유를 포함하며, 초기 값은 null.
Document
의
복원되지 않은 이유는 탐색 가능 노드의
활성 세션
히스토리 항목의 문서 상태의
복원되지 않은 이유이며,
Document
의 탐색 가능 노드가 최상위 탐색 가능 항목일 경우에만
존재하며;
그렇지 않으면 null입니다.
이 표준에는 문서 시퀀스를 그룹화하기 위한 여러 관련 개념이 포함되어 있습니다. 간단한 비규범적 요약:
탐색 가능 항목은
문서 시퀀스를 사용자에게 보여주는 표현입니다. 즉, 문서 간을 탐색할 수 있는 항목을 나타냅니다.
일반적인 예로는 웹 브라우저의 탭이나 창, 또는 iframe
이나
frame
이 포함된
frameset
이
있습니다.
탐색 가능한 탐색 항목은 자체 및 하위 탐색 가능 항목의 세션 기록을 제어하는 특수한 유형의 탐색 가능 항목입니다. 즉, 자신의 일련의 문서뿐만 아니라 추가적인 문서 시퀀스의 트리와, 이 트리의 평평한 보기를 통해 앞뒤로 순차적으로 이동할 수 있는 기능을 나타냅니다.
탐색 컨텍스트는
일련의 문서를 개발자에게 보여주는 표현입니다. 이것은 WindowProxy
객체와 1:1로 대응됩니다. 각 탐색 가능 항목은 일련의 탐색 컨텍스트를 나타낼 수 있으며, 특정 조건 하에서
이러한 탐색 컨텍스트 간의 전환이 발생할 수
있습니다.
이 표준의 대부분은 탐색 가능 항목의 언어로 작업하지만, 특정 API는 탐색 컨텍스트 전환의 존재를 드러내며, 따라서 표준의 일부는 탐색 컨텍스트를 기준으로 작업해야 합니다.
탐색 가능 항목은 활성 세션 기록 항목을 통해 사용자에게 문서
를 제공합니다. 각 탐색 가능 항목에는 다음이 포함됩니다:
id, 새로운 고유 내부 값.
부모, 탐색 가능 항목 또는 null.
현재 세션 기록 항목, 세션 기록 항목.
이 항목은 부모 탐색 가능 항목의 세션 기록 탐색 큐 내에서만 수정할 수 있습니다.
활성 세션 기록 항목, 세션 기록 항목.
이 항목은 활성 세션 기록 항목의 문서의 이벤트 루프에서만 수정할 수 있습니다.
종료 중 boolean 값, 초기값은 false입니다.
이 값은 최상위 탐색 가능 항목에 대해서만 true로 설정됩니다.
load
이벤트 지연 boolean 값, 초기값은 false입니다.
이 값은 탐색 가능 항목의 부모가 null이 아닌 경우에만 true로 설정됩니다.
현재 세션 기록 항목과 활성 세션 기록 항목은 일반적으로 동일하지만, 다음과 같은 경우 동기화되지 않을 수 있습니다:
동기 탐색이 수행될 때. 이로 인해 활성 세션 기록 항목이 현재 세션 기록 항목을 일시적으로 앞지르게 됩니다.
디스플레이 불가 또는 오류가 없는 응답이 기록 단계 적용 시에 수신될 때. 이 경우 현재 세션 기록 항목은 업데이트되지만 활성 세션 기록 항목은 그대로 유지됩니다.
탐색 가능 항목의 활성 문서는 활성 세션 기록 항목의 문서입니다.
이 값은 탐색 가능 항목의 최상위 탐색 가능 항목의 세션 기록 탐색 큐
내에서 안전하게 읽을 수 있습니다. 탐색 가능 항목의 활성 세션 기록 항목이 동기적으로 변경될 수 있지만, 새로운 항목은 항상 동일한 문서
를 가질 것입니다.
탐색 가능 항목의 활성 탐색 컨텍스트는 활성 문서의 탐색 컨텍스트입니다. 이 탐색 가능 항목이 탐색 가능한 탐색 항목인 경우, 활성 탐색 컨텍스트는 최상위 탐색 컨텍스트가 됩니다.
탐색 가능 항목의 활성 WindowProxy
는 활성 탐색 컨텍스트에 연결된 WindowProxy
입니다.
탐색 가능 항목의 활성 윈도우는 활성 WindowProxy
의 [[Window]]입니다.
이 값은 항상 탐색 가능 항목의 활성 문서의 관련 글로벌 객체와 동일합니다. 이는 활성화 알고리즘에 의해 동기화됩니다.
탐색 가능의 대상 이름은 활성 세션 기록 항목의 문서 상태의 탐색 가능한 대상 이름입니다.
노드 node의 노드 탐색 가능을 가져오려면, node의 노드 문서가 활성화된 문서인 탐색 가능을 반환하거나, 해당 탐색 가능이 없으면 null을 반환합니다.
탐색 가능 navigable을 초기화하려면, 문서 상태 documentState와 선택적으로 탐색 가능-또는-null parent (기본값은 null)를 제공합니다.
entry를 새 세션 기록 항목으로 설정하고, 다음을 포함합니다:
이 알고리즘의 호출자는 entry의 단계를 초기화할 책임이 있습니다. 이 항목은 초기화될 때까지 "대기 중"으로 유지됩니다.
navigable의 현재 세션 기록 항목을 entry로 설정합니다.
navigable의 활성 세션 기록 항목을 entry로 설정합니다.
navigable의 부모를 parent로 설정합니다.
탐색 가능한 탐색 항목은 탐색 가능 항목으로, 자신과 자손 탐색 가능 항목들에 대해 현재 세션 기록 항목과 활성 세션 기록 항목으로 지정할 세션 기록 항목을 제어하는 역할을 합니다.
탐색 가능 항목의 속성 외에도, 탐색 가능한 탐색 항목은 다음과 같은 속성을 가집니다:
현재 세션 기록 단계, 숫자 값으로, 초기값은 0입니다.
세션 기록 탐색 큐, 세션 기록 탐색 병렬 큐로, 새로운 세션 기록 탐색 병렬 큐를 시작한 결과입니다.
중첩된 기록 단계 적용 중 boolean 값, 초기값은 false입니다.
시스템 가시성 상태, "hidden
" 또는 "visible
" 값입니다.
이 항목에 대한 요구 사항은 페이지 가시성 섹션을 참조하세요.
특정 탐색 가능 항목의 탐색 가능한 탐색 항목을 가져오기 위해:
navigable을 inputNavigable로 설정합니다.
navigable이 탐색 가능한 탐색 항목이 아닐 때마다, navigable을 navigable의 부모로 설정합니다.
navigable을 반환합니다.
최상위 탐색 가능 항목은 탐색 가능한 탐색 항목으로, 부모가 null인 경우를 말합니다.
현재, 모든 탐색 가능한 탐색 항목들은 최상위 탐색 가능 항목들입니다. 미래의 제안들은 비-최상위 탐색 가능 항목들을 도입하는 것을 상정하고 있습니다.
사용자 에이전트는 최상위 탐색 가능 항목 집합 (즉, 집합으로서의 최상위 탐색 가능 항목들)을 가지고 있습니다. 이는 보통 브라우저 창이나 탭의 형태로 사용자에게 제공됩니다.
특정 탐색 가능 항목의 최상위 탐색 가능 항목을 가져오기 위해:
navigable을 inputNavigable로 설정합니다.
navigable의 부모가 null이 아닐 때마다, navigable을 navigable의 부모로 설정합니다.
navigable을 반환합니다.
새로운 최상위 탐색 가능 항목을 생성하기 위해, 탐색 컨텍스트-또는-null opener, 문자열 targetName 및 선택적으로 탐색 가능 항목 openerNavigableForWebDriver를 주어진 경우:
document를 null로 설정합니다.
opener가 null인 경우, document를 새로운 최상위 탐색 컨텍스트 및 문서 생성의 두 번째 반환값으로 설정합니다.
그렇지 않으면, document를 새로운 보조 탐색 컨텍스트 및 문서 생성의 두 번째 반환값으로 설정합니다.
documentState를 새로운 문서 상태로 설정하고, 다음을 포함합니다:
traversable을 새로운 탐색 가능한 탐색 항목으로 설정합니다.
탐색 가능 항목 초기화를 documentState를 주어 traversable을 초기화합니다.
initialHistoryEntry를 traversable의 활성 세션 기록 항목으로 설정합니다.
initialHistoryEntry의 단계를 0으로 설정합니다.
opener가 null이 아닌 경우, 탐색 가능한 저장소 클론을 opener의 최상위 탐색 가능 항목과 traversable을 주어 수행합니다. [STORAGE]
목록에 추가 traversable를 사용자 에이전트의 최상위 탐색 가능 항목 집합에 추가합니다.
WebDriver BiDi 탐색 가능 항목 생성을 traversable과 openerNavigableForWebDriver을 주어 호출합니다.
traversable을 반환합니다.
새로운 최상위 탐색 가능 항목 생성하기 위해, URL initialNavigationURL과 선택적으로 POST 자원-또는-null initialNavigationPostResource (기본값 null)을 주어진 경우:
traversable을 새로운 최상위 탐색 가능 항목 생성의 결과로서 설정하고, null과 빈 문자열을 사용합니다.
탐색 traversable을 initialNavigationURL로, traversable의 활성 문서를 사용하여 탐색하며, 문서 자원을 initialNavigationPostResource로 설정합니다.
이 초기 탐색들은 traversable이 스스로 탐색하는 것으로 간주되어, 관련된 모든 보안 검사가 통과되도록 합니다.
traversable을 반환합니다.
특정 요소(예: iframe
요소)는 사용자에게 navigable을 표시할 수 있습니다. 이러한 요소들을 navigable 컨테이너라고 합니다.
각 navigable 컨테이너는 content navigable을 가지며, 이는 navigable이거나 null입니다. 초기값은 null입니다.
navigable navigable의 컨테이너는 navigable 컨테이너로, 해당 content navigable이 navigable입니다. 해당 요소가 없으면 null입니다.
navigable navigable의 컨테이너 문서를 구하는 단계는 다음과 같습니다:
navigable의 컨테이너가 null인 경우 null을 반환합니다.
navigable의 컨테이너의 노드 문서를 반환합니다.
이는 navigable의 컨테이너의 섀도우 포함 루트와 동일합니다. navigable의 컨테이너는 연결됨이어야 하기 때문입니다.
문서
document의 컨테이너 문서를 구하는 단계는 다음과 같습니다:
navigable navigable은 다른 potentialParent 내비게이블의 자식 내비게이블일 때, 즉 navigable의 부모가 potentialParent일 때 자식 내비게이블이라고 할 수 있습니다. 또한, navigable이 "자식 내비게이블"이라고 표현할 수도 있으며, 이는 해당 부모가 null이 아님을 의미합니다.
모든 자식 내비게이블은 해당 컨테이너의 content navigable입니다.
navigable 컨테이너 container의 컨텐츠 문서를 구하는 단계는 다음과 같습니다:
container의 content navigable이 null인 경우 null을 반환합니다.
container의 content navigable의 활성 문서를 document로 설정합니다.
document의 원본과 container의 노드 문서의 원본이 동일 출처 도메인이 아닌 경우 null을 반환합니다.
document를 반환합니다.
navigable 컨테이너 container의 컨텐츠 창을 구하는 단계는 다음과 같습니다:
container의 content navigable이 null인 경우 null을 반환합니다.
container의 content
navigable의 활성 WindowProxy
의 객체를
반환합니다.
요소 element를 주어진 상태에서 새로운 자식 내비게이블을 생성하려면:
element의 노드 내비게이블을 parentNavigable로 설정합니다.
element의 노드 문서의 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 그룹을 group으로 설정합니다.
element의 노드 문서, element 및 group을 사용하여 새 브라우징 컨텍스트와 문서를 생성한 결과를 browsingContext와 document로 설정합니다.
targetName을 null로 설정합니다.
element에 name
콘텐츠 속성이 있는 경우 해당 속성의 값을 targetName으로 설정합니다.
다음과 같은 속성을 가진 새로운 문서 상태를 documentState로 설정합니다:
새로운 navigable을 navigable로 설정합니다.
navigable 초기화를 수행하여 navigable을 documentState와 parentNavigable에 따라 초기화합니다.
element의 content navigable을 navigable로 설정합니다.
navigable의 활성 세션 히스토리 항목을 historyEntry로 설정합니다.
parentNavigable의 traversable navigable을 traversable로 설정합니다.
다음 세션 히스토리 탐색 단계를 추가합니다 traversable에 대해:
parentNavigable의 활성 세션 히스토리 항목의 문서 상태를 parentDocState로 설정합니다.
parentNavigable의 세션 히스토리 항목을 얻기 위해 세션 히스토리 항목을 가져오기의 결과를 parentNavigableEntries로 설정합니다.
parentNavigableEntries에서 parentDocState와 동일한 세션 히스토리 항목인 첫 번째 항목을 targetStepSHE로 설정합니다.
navigable의 id를 nestedHistory의 id로 설정하고, nestedHistory의 항목 목록을 « historyEntry »로 설정한 새 중첩된 히스토리를 생성합니다.
내비게이블 생성/삭제에 대해 업데이트합니다 traversable에 대해.
WebDriver BiDi navigable created를 traversable에 대해 호출합니다.
문서의 시퀀스, 특히 navigables와 그들의 세션 히스토리 항목을 시각화하는 유용한 방법은 Jake 다이어그램입니다. 일반적인 Jake 다이어그램은 다음과 같습니다:
0 | 1 | 2 | 3 | 4 | |
---|---|---|---|---|---|
top
| /t-a | /t-a#foo | /t-b | ||
frames[0]
| /i-0-a | /i-0-b | |||
frames[1]
| /i-1-a | /i-1-b |
여기에서 각 번호가 매겨진 열은 트래버서블의 세션 히스토리 단계의 가능한 값을 나타냅니다. 각 라벨이 붙은 행은 navigable이 서로 다른 URL 및 문서 사이를 전환하는 것을 묘사합니다. 첫 번째는 최상위 트래버서블로 라벨이 붙은 top
이고,
나머지는 자식 내비게이블입니다. 문서는 각 셀의 배경 색상으로 표시되며, 새로운 배경
색상은 해당 navigable에서 새로운 문서를 나타냅니다. URL은 셀의 텍스트 콘텐츠로 제공되며,
일반적으로 교차 출처 사례가 특별히 조사되지 않는 한 간결하게 상대 URL로 제공됩니다. 특정 navigable이 특정 단계에 존재하지 않을 경우 해당 셀은 비어 있습니다. 굵은 이탤릭체의 단계 번호는
트래버서블의 현재 세션 히스토리
단계를 나타내며, 굵은 이탤릭체의 URL이 있는 모든 셀은 해당 행의 navigable의 현재 세션 히스토리 항목을 나타냅니다.
따라서 위의 Jake 다이어그램은 다음과 같은 일련의 사건을 묘사합니다:
최상위 트래버서블이 생성되며, URL
/t-a
에서 시작하고 두 개의 자식 내비게이블이
각각 /i-0-a
및 /i-1-a
에서 시작합니다.
첫 번째 자식 내비게이블이 URL /i-0-b
로 내비게이션됩니다.
두 번째 자식 내비게이블이 URL /i-1-b
로 내비게이션됩니다.
최상위 트래버서블이 동일한 문서로 내비게이션되어 URL이 /t-a#foo
로
업데이트됩니다.
최상위 트래버서블이 다른 문서로 내비게이션되어 URL이 /t-b
가 됩니다.
(이 문서는 물론 이전 문서의 자식 내비게이블을 그대로 가지고 있지 않습니다.)
트래버서블이 −3의 델타로 탐색되어 1단계로 돌아갑니다.
Jake 다이어그램은 여러 navigable, 내비게이션 및 탐색의 상호 작용을 시각화하는 강력한 도구입니다. 모든 상호 작용을 캡처할 수 있는 것은 아니지만 — 예를 들어, Jake 다이어그램은 중첩의 단일 수준에서만 작동합니다 — 이 표준에서 여러 복잡한 상황을 설명하는 데 사용될 수 있습니다.
Jake 다이어그램은 그 창시자이자 비할 데 없는 Jake Archibald의 이름을 따서 명명되었습니다.
이 표준의 알고리즘에서는 주어진 Document
에서 시작하는 navigables 컬렉션을 보는 것이 종종 도움이 됩니다. 이 섹션은 그러한
내비게이블을 수집하기 위한 알고리즘의 선별된 집합을 포함하고 있습니다.
이들 알고리즘의 반환 값은 부모가 자식보다 먼저 나타나도록 정렬됩니다. 호출자는 이 정렬에 의존합니다.
Document
에서 시작하는 것이
일반적으로 더 나은데, 이는 호출자가 완전히 활성화된 Document
에서 시작하는지 여부를 인식하게 만들기
때문입니다. 비록 비-완전히 활성화된 Document
도 상위 및 하위 내비게이블을 가지고 있지만,
이들은 종종 존재하지 않는 것처럼 동작합니다(예: window.parent
getter에서).
Document
document의 상위 내비게이블은 다음 단계에 따라 제공됩니다:
ancestors를 빈 목록으로 설정합니다.
navigable이 null이 아닐 때까지:
ancestors를 반환합니다.
Document
document의 포함된 상위 내비게이블은 다음 단계에 따라 제공됩니다:
document의 상위 내비게이블을 navigables로 설정합니다.
navigables를 반환합니다.
Document
document의 하위 내비게이블은 다음 단계에 따라 제공됩니다:
navigables를 새로운 목록으로 설정합니다.
navigableContainers를 document의 섀도우 포함 하위 요소들 중 내비게이블 컨테이너인 요소들의 섀도우 포함 트리 순서에 따른 목록으로 설정합니다.
각각의 navigableContainer에 대해:
navigableContainer의 내용 내비게이블이 null인 경우, 계속 진행합니다.
확장 navigables에 navigableContainer의 내용 내비게이블의 활성 문서의 포함된 하위 내비게이블을 추가합니다.
navigables를 반환합니다.
Document
document의 포함된 하위 내비게이블은 다음 단계에 따라 제공됩니다:
navigables를 « document의 노드 내비게이블 »로 설정합니다.
navigables를 반환합니다.
이 하위 요소 수집 알고리즘은 하위 Document
객체의 DOM 트리를 보는 것으로 설명됩니다.
실제로는 호출자가 알고리즘을 호출할 때 DOM 트리가 다른 프로세스에 있을 수 있기 때문에 이는 종종 가능하지 않습니다. 대신 구현에서는 일반적으로 적절한 트리를 프로세스 간에 복제합니다.
Document
document의 문서 트리 자식 내비게이블은 다음 단계에 따라 제공됩니다:
document의 노드 내비게이블이 null인 경우, 빈 목록을 반환합니다.
navigables를 새로운 목록으로 설정합니다.
navigableContainers를 document의 하위 요소들 중 내비게이블 컨테이너인 요소들의 트리 순서에 따른 목록으로 설정합니다.
각각의 navigableContainer에 대해:
navigables를 반환합니다.
container라는 내비게이블 컨테이너가 주어졌을 때, 자식 내비게이블을 파괴하려면:
container의 콘텐츠 내비게이블을 navigable로 설정합니다.
navigable이 null인 경우, 반환합니다.
container의 콘텐츠 내비게이블을 null로 설정합니다.
자식 내비게이블 파괴에 대해 네비게이션 API에 알립니다를 호출합니다.
문서와 그 하위 요소들을 파괴를 navigable의 활성 문서에 대해 호출합니다.
container의 노드 내비게이블의 활성 세션 히스토리 항목의 문서 상태를 parentDocState로 설정합니다.
container의 노드 내비게이블의 내비게이블 트래버설을 traversable로 설정합니다.
세션 히스토리 트래버설 단계를 추가합니다 traversable에:
내비게이블 생성/파괴에 대해 업데이트를 traversable에 대해 호출합니다.
WebDriver BiDi 내비게이블 파괴를 navigable에 대해 호출합니다.
traversable이라는 최상위 내비게이블이 주어졌을 때, 최상위 내비게이블을 파괴하려면:
traversable의 활성 브라우징 컨텍스트를 browsingContext로 설정합니다.
각각의 historyEntry에 대해 traversable의 세션 히스토리 항목들에서 다음을 수행합니다:
historyEntry의 문서를 document로 설정합니다.
document가 null이 아닌 경우, 문서와 그 하위 요소들을 파괴를 document에 대해 호출합니다.
제거 browsingContext를 호출합니다.
탭 브라우저에서 탭을 닫거나 숨기는 등의 방법으로 사용자 인터페이스에서 traversable을 제거합니다.
제거 traversable을 사용자 에이전트의 최상위 내비게이블 집합에서 제거합니다.
WebDriver BiDi 내비게이블 파괴를 traversable에 대해 호출합니다.
사용자 에이전트는 언제든지 (일반적으로 사용자 요청에 응답하여) 최상위 내비게이블을 파괴할 수 있습니다.
traversable이라는 최상위 내비게이블을 닫으려면:
traversable의 is closing이 true인 경우, 반환합니다.
traversable의 활성 문서의 포함된 하위 내비게이블들을 toUnload로 설정합니다.
toUnload에 대해 언로드가 취소되었는지 확인을 수행한 결과가 true인 경우, 반환합니다.
세션 히스토리 트래버설 단계를 추가합니다 traversable에:
traversable을 파괴하는 알고리즘 단계를 afterAllUnloads로 설정합니다.
traversable의 활성 문서에 대해 null 및 afterAllUnloads를 사용하여 문서와 그 하위 요소들을 언로드합니다.
내비게이블은 대상 이름을 가질 수 있습니다. 이는 문자열로서 window.open()
이나 a
요소의 target
속성 등 특정
API가 그 내비게이블에서 내비게이션을 대상으로 할 수 있도록 합니다.
유효한 내비게이블 대상 이름은 ASCII 탭 또는 줄바꿈과 U+003C (<)을 모두 포함하지 않고, U+005F (_)로 시작하지 않는 하나 이상의 문자가 포함된 문자열입니다. (U+005F (_)로 시작하는 이름은 특별한 키워드에 예약되어 있습니다.)
유효한 내비게이블 대상 이름 또는
키워드는 유효한
내비게이블 대상 이름이거나 _blank
, _self
, _parent
, _top
중 하나와 ASCII 대소문자 무시 매치가 되는 문자열입니다.
이 값들은 페이지가 샌드박스 처리되었는지 여부에 따라 다른 의미를 가집니다. 아래 표는 요약된 비규범적인 예입니다. 이 표에서 "current"는 링크 또는 스크립트가 위치한 내비게이블, "parent"는 링크 또는 스크립트가 위치한 내비게이블의 부모를 의미하며, "top"은 링크 또는 스크립트가 위치한 내비게이블의 최상위
트래버서블을 의미합니다. "new"는 부모가 null인 새로운 트래버서블 내비게이블을 의미하며 (이는 사용자 설정과 사용자 에이전트 정책에 따라 보조 브라우징 컨텍스트를 사용할
수 있음), "none"은 아무 일도 일어나지 않음을 의미하며, "maybe new"는 "allow-popups
"
키워드가 sandbox
속성에 지정된
경우 "new"와 동일하며, 그렇지 않으면 "none"과 동일합니다.
키워드 | 일반 효과 | ...를 가진 iframe 에서의 효과
| |
---|---|---|---|
sandbox=""
| sandbox="allow-top-navigation"
| ||
링크 및 폼 제출을 위한 지정되지 않은 경우 | current | current | current |
빈 문자열 | current | current | current |
_blank
| new | maybe new | maybe new |
_self
| current | current | current |
_parent 부모가 없는 경우
| current | current | current |
_parent 부모가 최상위인 경우
| parent/top | none | parent/top |
_parent 부모가 있고 최상위가 아닌 경우
| parent | none | none |
_top 최상위가 현재인 경우
| current | current | current |
_top 최상위가 현재가 아닌 경우
| top | none | top |
존재하지 않는 이름 | new | maybe new | maybe new |
존재하고 하위 요소인 이름 | 지정된 하위 요소 | 지정된 하위 요소 | 지정된 하위 요소 |
존재하고 현재인 이름 | current | current | current |
존재하고 최상위인 조상인 이름 | 지정된 조상 | none | 지정된 조상/최상위 |
존재하고 최상위가 아닌 조상인 이름 | 지정된 조상 | none | none |
공통 최상위를 가진 다른 이름 | 지정된 | none | none |
다른 최상위를 가진 이름, 익숙한 경우 및 허용된 샌드박스 내비게이터가 있는 경우 | 지정된 | 지정된 | 지정된 |
다른 최상위를 가진 이름, 익숙한 경우, 그러나 허용된 샌드박스 내비게이터가 없는 경우 | 지정된 | none | none |
다른 최상위를 가진 이름, 익숙하지 않은 경우 | new | maybe new | maybe new |
샌드박스 처리된 브라우징 컨텍스트에 대한 대부분의 제한은 내비게이션 알고리즘 등 다른 알고리즘에 의해 적용되며, 아래에 주어진 내비게이블 선택 규칙에서는 적용되지 않습니다.
내비게이블 선택 규칙은 문자열 name, 내비게이블 currentNavigable, 그리고 부울 값 noopener를 주어진 조건으로 사용합니다:
chosen을 null로 설정합니다.
windowType을 "existing or none
"으로 설정합니다.
sandboxingFlagSet을 currentNavigable의 활성 문서의 활성 샌드박스 플래그 집합으로 설정합니다.
name이 빈 문자열이거나 "_self
"와 ASCII 대소문자 무시 매치가 되는 경우, chosen을
currentNavigable로 설정합니다.
그렇지 않으면, name이 "_parent
"와 ASCII 대소문자 무시 매치가 되는 경우, chosen을
currentNavigable의 부모로 설정하고,
없다면 currentNavigable로 설정합니다.
그렇지 않으면, name이 "_top
"와 ASCII 대소문자 무시 매치가 되는 경우, chosen을
currentNavigable의 트래버서블
내비게이블로 설정합니다.
그렇지 않으면, name이 "_blank
"와 ASCII 대소문자 무시 매치가 되지 않으며, name과 동일한 내비게이블을 가진 내비게이블이 존재하고,
currentNavigable의 활성 브라우징 컨텍스트가 해당 내비게이블의 활성 브라우징 컨텍스트와 익숙한 상태이며, 두 브라우징 컨텍스트가 서로 접근해도 괜찮다고 사용자 에이전트가 판단하는 경우,
chosen을 그 내비게이블로 설정합니다. 일치하는 내비게이블이 여러 개 있는 경우, 사용자 에이전트는 가장 최근에 열렸거나, 가장 최근에 포커스된 것이나,
더 가까운 관련성을 가진 것을 선택하여 chosen으로 설정해야 합니다.
이 부분은 issue #313에서 더 명확하게 정리될 것입니다.
그렇지 않으면, 새 최상위 트래버서블이 요청 중이며, 이는 사용자 에이전트의 설정과 능력에 따라 결정되며, 아래의 첫 번째 적용 가능한 옵션에 따른 규칙에 의해 결정됩니다:
사용자 에이전트는 사용자가 팝업이 차단되었다고 알릴 수 있습니다.
사용자 에이전트는 개발자 콘솔에 팝업이 차단되었다고 보고할 수 있습니다.
windowType을 "new and unrestricted
"로 설정합니다.
currentDocument를 currentNavigable의 활성 문서로 설정합니다.
만약 currentDocument의 교차 출처 오프너 정책의 값이 "same-origin
"
또는 "same-origin-plus-COEP
"이고,
currentDocument의 출처가 currentDocument의 관련
설정 객체의 최상위 출처와 동일 출처가 아닌 경우:
noopener를 true로 설정합니다.
name을 "_blank
"로 설정합니다.
windowType을 "new with no opener
"로 설정합니다.
오프너 정책이 있는 경우, 최상위 브라우징 컨텍스트의 활성 문서와 교차 출처인 중첩 문서는 항상 noopener를 true로 설정합니다.
chosen을 null로 설정합니다.
targetName을 빈 문자열로 설정합니다.
만약 name이 "_blank
"와 ASCII 대소문자 무시 매치가 되지 않는다면,
targetName을 name으로 설정합니다.
만약 noopener가 true인 경우, chosen을 null로 주어진 새로운 최상위 트래버서블 생성의 결과로 설정합니다.
그렇지 않으면:
chosen을 주어진 최상위 트래버서블 생성의 결과로 설정합니다. currentNavigable의 활성 브라우징 컨텍스트, targetName, 그리고 currentNavigable을 기반으로 합니다.
만약 sandboxingFlagSet에 샌드박스된 내비게이션 브라우징 컨텍스트 플래그가 설정된 경우, chosen의 활성 브라우징 컨텍스트의 허용된 하나의 샌드박스된 내비게이터를 currentNavigable의 활성 브라우징 컨텍스트로 설정합니다.
만약 sandboxingFlagSet에 샌드박스가 보조 브라우징 컨텍스트로 전파됨 플래그가 설정된 경우, sandboxingFlagSet에 설정된 모든 플래그는 chosen의 활성 브라우징 컨텍스트의 팝업 샌드박싱 플래그 세트에도 설정되어야 합니다.
새로 생성된 내비게이블
chosen이 즉시 내비게이션되는 경우,
내비게이션은 "replace
"
내비게이션으로 수행됩니다.
chosen을 currentNavigable로 설정합니다.
아무것도 하지 않습니다.
사용자 에이전트는 사용자가 항상 currentNavigable을 선택하도록 설정할 수 있는 방법을 제공하는 것이 권장됩니다.
chosen과 windowType을 반환합니다.
브라우징 컨텍스트는 일련의 문서를 프로그래밍적으로 표현한 것으로, 여러 문서가 단일 탐색 가능 항목 내에 존재할 수 있습니다. 각 브라우징 컨텍스트는 해당하는 WindowProxy
객체와 다음을 포함합니다:
오프너 브라우징 컨텍스트, 하나의 브라우징 컨텍스트 또는 null, 초기값은 null.
생성 시 오프너 출처, 하나의 출처 또는 null, 초기값은 null.
팝업 여부 boolean, 초기값은 false.
이 명세에서 팝업 여부가 유일하게 필수적으로 영향을 미치는 것은 관련 visible
getter와 BarProp
객체입니다. 그러나, 사용자 에이전트는 사용자 인터페이스 고려사항을 위해서도 이를 사용할 수 있습니다.
보조 여부 boolean, 초기값은 false.
초기 URL, 하나의 URL 또는 null, 초기값은 null.
가상 브라우징 컨텍스트 그룹 ID 정수, 초기값은 0. 이는 교차 출처 오프너 정책 보고에서 사용되어 보고 전용 정책이 강제되었을 경우 발생했을 브라우징 컨텍스트 그룹 전환을 추적합니다.
브라우징 컨텍스트의 활성 창은 해당 WindowProxy
객체의 [[Window]] 내부 슬롯 값입니다. 브라우징 컨텍스트의 활성 문서는 활성 창의 연결된
Document
입니다.
브라우징 컨텍스트의 최상위 탐색 가능 항목은 활성 문서의 노드 탐색 가능 항목의 최상위 탐색 가능 항목입니다.
브라우징 컨텍스트의 보조 여부가 true인 경우, 이를 보조 브라우징 컨텍스트라고 합니다. 보조 브라우징 컨텍스트는 항상 최상위 브라우징 컨텍스트입니다.
별도의 보조 여부 개념이 필요한지 불확실합니다. 이슈 #5680에서는 오프너 브라우징 컨텍스트가 null인지 여부를 사용하여 이를 간소화할 수 있을 것이라고 언급했습니다.
최신 명세는 대부분의 경우 브라우징 컨텍스트 개념을 사용하는 것을 피해야 합니다. 대신 Document
및 탐색 가능
항목 개념이 더 적합한 경우가 많습니다.
Document
의 브라우징 컨텍스트는 브라우징 컨텍스트 또는 null이며, 초기값은 null입니다.
Document
는 반드시 비-null 브라우징 컨텍스트를 가지는 것은 아닙니다. 특히, 데이터 마이닝 도구는 브라우징
컨텍스트를 인스턴스화하지 않을 가능성이 큽니다. Document
가 createDocument()
와
같은 API를 사용해 생성된 경우, 브라우징 컨텍스트는 절대 비-null이 되지 않습니다. Document
는 원래 iframe
요소를 위해 생성되었으나, 그 문서에서 제거된 후에는 관련 브라우징
컨텍스트가 더 이상 존재하지 않으므로 비-null 브라우징 컨텍스트를 가지지 않습니다.
일반적으로 Window
객체와 Document
객체 간에는 1:1 매핑이 존재하며, Document
객체가 비-null 브라우징 컨텍스트를 가지는 한, 이 매핑이 유지됩니다. 하나의 예외는 동일한 브라우징 컨텍스트에서 두 번째 Document
의 표현을 위해 Window
가 재사용될 수 있다는 점입니다. 이 경우, 매핑은 1:2로 변경됩니다. 이는 브라우징 컨텍스트가 초기 about:blank
Document
에서 다른 문서로 탐색될 때 발생하며, 이 탐색은 교체 방식으로 수행됩니다.
다음과 같은 경우에 새 브라우징 컨텍스트와 문서를 생성합니다: null 또는 문서
객체 creator, null 또는 엘리먼트
embedder, 그리고 브라우징 컨텍스트 그룹 group을 제공하는 경우:
browsingContext를 새로운 브라우징 컨텍스트로 설정합니다.
unsafeContextCreationTime을 공유된 현재 시간(unsafe shared current time)으로 설정합니다.
creatorOrigin을 null로 설정합니다.
creatorBaseURL을 null로 설정합니다.
creator가 null이 아닌 경우 다음을 수행합니다:
creatorOrigin을 creator의 origin으로 설정합니다.
creatorBaseURL을 creator의 문서 기본 URL로 설정합니다.
browsingContext의 가상 브라우징 컨텍스트 그룹 ID를 creator의 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 가상 브라우징 컨텍스트 그룹 ID로 설정합니다.
sandboxFlags를 browsingContext와 embedder를 사용해 생성 샌드박싱 플래그 결정의 결과로 설정합니다.
origin을 about:blank
와
sandboxFlags, 그리고 creatorOrigin을 사용해 원본 결정의 결과로 설정합니다.
permissionsPolicy를 embedder와 origin을 사용해 권한 정책 생성의 결과로 설정합니다. [PERMISSIONSPOLICY]
agent을 origin, group, 그리고 false를 사용해 유사 출처 창 에이전트 획득의 결과로 설정합니다.
realm execution context를 agent와 다음 커스터마이징을 사용해 새로운 자바스크립트 렐름 생성의 결과로 설정합니다:
글로벌 객체의 경우, 새로운 Window
객체를
생성합니다.
글로벌 this 바인딩의 경우, browsingContext의 WindowProxy
객체를
사용합니다.
topLevelCreationURL을 about:blank
로 설정합니다;
embedder가 null이 아닌 경우, embedder의 관련 설정 객체의 최상위 생성 URL로 설정합니다.
topLevelOrigin을 origin으로 설정합니다; embedder가 null이 아닌 경우, embedder의 관련 설정 객체의 최상위 출처로 설정합니다.
Window 환경 설정 객체 설정을
about:blank
,
realm execution context, null, topLevelCreationURL, 그리고 topLevelOrigin과
함께 실행합니다.
loadTimingInfo를 새로운 문서 로드 타이밍 정보로 설정하고, 그 탐색 시작 시간을 시간 조정을 호출한 결과로 설정합니다.
document를 새로운 문서
로
설정하고, 다음을 포함합니다:
html
"
text/html
"
quirks
"
about:blank
상태
creator가 null이 아닌 경우 다음을 수행합니다:
document의 referrer를 URL 직렬화(serialization)로 설정합니다.
creator의 출처가 동일 출처인 경우 document의 교차 출처 열기 정책을 creator의 브라우징 컨텍스트의 최상위 브라우징 컨텍스트의 활성화된 문서의 교차 출처 열기 정책으로 설정합니다.
확인(assert): document의 URL 및 document의 관련 설정
객체의 생성 URL이 about:blank
임을 확인합니다.
document를 로드 후 작업을 위한 준비 완료 상태로 표시합니다.
document에 대해 html
/head
/body
로
채우기를 실행합니다.
document를 활성화합니다.
로드를 완전히 완료한 후 document를 반환합니다.
browsingContext와 document를 반환합니다.
새로운 최상위 브라우징 컨텍스트와 문서를 생성하려면:
group과 document를 새로운 브라우징 컨텍스트 그룹 및 문서 생성의 결과로 설정합니다.
group의 브라우징 컨텍스트 집합[0]과 document를 반환합니다.
새로운 보조 브라우징 컨텍스트와 문서를 생성하려면, 주어진 브라우징 컨텍스트 opener를 사용합니다:
openerTopLevelBrowsingContext를 opener의 최상위 탐색 가능의 활성화된 브라우징 컨텍스트로 설정합니다.
group을 openerTopLevelBrowsingContext의 그룹으로 설정합니다.
확인(assert): group이 null이 아닌지 확인합니다, 탐색은 이를 직접 호출합니다.
browsingContext와 document를 새로운 브라우징 컨텍스트 및 문서 생성의 결과로 설정합니다, opener의 활성화된 문서를 사용합니다.
browsingContext의 보조 여부를 true로 설정합니다.
추가: browsingContext를 group에 추가합니다.
browsingContext의 opener 브라우징 컨텍스트를 opener로 설정합니다.
browsingContext의 가상 브라우징 컨텍스트 그룹 ID를 openerTopLevelBrowsingContext의 가상 브라우징 컨텍스트 그룹 ID로 설정합니다.
browsingContext의 생성 시 opener 출처를 opener의 활성화된 문서의 출처로 설정합니다.
browsingContext와 document를 반환합니다.
출처 결정을 위해, 주어진 URL url, 샌드박싱 플래그 세트 sandboxFlags, 및 출처 또는 null sourceOrigin을 사용합니다:
sandboxFlags에 샌드박스된 출처 브라우징 컨텍스트 플래그가 설정된 경우, 새 불투명 출처를 반환합니다.
url이 null인 경우, 새 불투명 출처를 반환합니다.
url이 about:srcdoc
인 경우:
확인(assert): sourceOrigin이 null이 아닌지 확인합니다.
sourceOrigin을 반환합니다.
url이 about:blank
와 일치하고
sourceOrigin이 null이 아닌 경우, sourceOrigin을 반환합니다.
url의 출처를 반환합니다.
위의 sourceOrigin을 반환하는 경우에는 두 문서
가 동일한 출처를 가지게
되므로, document.domain
이 둘
다에 영향을 미칩니다.
브라우징 컨텍스트 potentialDescendant가 potentialAncestor의 상위 컨텍스트라고 할 수 있는 경우는 다음 알고리즘이 true를 반환할 때입니다:
potentialDescendantDocument를 potentialDescendant의 활성 문서로 설정합니다.
만약 potentialDescendantDocument가 완전히 활성화된 상태가 아니라면, false를 반환합니다.
ancestorBCs를 potentialDescendantDocument의 상위 내비게이팅 요소들의 각 요소의 활성 문서에서 브라우징 컨텍스트를 가져와서 구성된 목록으로 설정합니다.
만약 ancestorBCs에 potentialAncestor가 포함되어 있다면, true를 반환합니다.
false를 반환합니다.
최상위 브라우징 컨텍스트는 브라우징 컨텍스트이며, 그 활성 문서의 노드 내비게이팅 요소가 탐색 가능한 내비게이팅 요소인 경우를 의미합니다.
이는 최상위 탐색 가능 항목일 필요는 없습니다.
브라우징 컨텍스트 start의 최상위 브라우징 컨텍스트는 다음 알고리즘의 결과입니다:
navigable을 start의 활성 문서의 노드 탐색 가능 항목으로 설정합니다.
navigable의 부모가 null이 아닐 때까지 navigable을 navigable의 부모로 설정합니다.
navigable의 활성 브라우징 컨텍스트를 반환합니다.
브라우징 컨텍스트 A는 다음 알고리즘이 true를 반환하는 경우 두 번째 브라우징 컨텍스트 B와 친숙하다고 할 수 있습니다:
만약 A의 활성 문서의 origin이 B의 활성 문서의 origin과 동일 출처인 경우, true를 반환합니다.
만약 A의 최상위 브라우징 컨텍스트가 B인 경우, true를 반환합니다.
만약 B가 보조 브라우징 컨텍스트이고, A가 B의 열기 브라우징 컨텍스트와 친숙한 경우, true를 반환합니다.
만약 B의 상위 브라우징 컨텍스트 중 하나가 A의 활성 문서와 동일한 출처를 가진 활성 문서를 가지고 있는 경우, true를 반환합니다.
이 경우에는 A가 B의 상위 브라우징 컨텍스트인 경우도 포함됩니다.
false를 반환합니다.
최상위 브라우징 컨텍스트는 연관된 그룹(null 또는 브라우징 컨텍스트 그룹)을 가집니다. 이는 초기에는 null입니다.
사용자 에이전트는 브라우징 컨텍스트 그룹 세트(집합으로 구성된 브라우징 컨텍스트 그룹)을 보유합니다.
브라우징 컨텍스트 그룹은 브라우징 컨텍스트 세트(집합으로 구성된 최상위 브라우징 컨텍스트)을 보유합니다.
최상위 브라우징 컨텍스트는 그룹이 생성될 때 그룹에 추가됩니다. 이후에 그룹에 추가되는 모든 최상위 브라우징 컨텍스트는 보조 브라우징 컨텍스트가 됩니다.
브라우징 컨텍스트 그룹은 연관된 에이전트 클러스터 맵(맵으로 구성된 에이전트 클러스터 키와 에이전트 클러스터)를 보유합니다. 사용자 에이전트는 더 이상 접근할 수 없다고 판단되면 에이전트 클러스터를 수집할 책임이 있습니다.
브라우징 컨텍스트 그룹은 연관된 히스토리컬 에이전트 클러스터 키 맵을 가지며, 이는 맵으로 구성된 출처와 에이전트 클러스터 키입니다. 이 맵은 주어진 출처에 대해 이전에 사용된 에이전트 클러스터 키를 기록하여 출처 기반 에이전트 클러스터 기능의 일관성을 보장하는 데 사용됩니다.
히스토리컬 에이전트 클러스터 키 맵은 브라우징 컨텍스트 그룹의 수명 동안 항목이 추가될 수 있습니다.
브라우징 컨텍스트 그룹은 연관된
크로스 오리진 격리 모드를 가지며, 이는 크로스 오리진 격리 모드입니다. 이는 처음에 "없음
"으로
설정됩니다.
크로스 오리진 격리 모드는 "없음
", "논리적
", 또는 "구체적
"의 세 가지 값 중 하나일 수 있습니다.
"논리적
"
및 "구체적
"은
비슷합니다. 두 모드 모두 다음과 같은 브라우징 컨텍스트 그룹에 사용됩니다:
모든 문서
는 `크로스 오리진 임베더 정책
`
헤더를 가지고 있으며, 그 값은 크로스 오리진 격리와 호환됩니다.
일부 플랫폼에서는 크로스 오리진 격리
기능에 의해 게이트된 API에 안전하게 접근할 수 있는 보안 속성을 제공하기 어렵습니다. 따라서 "구체적
"만이
이 기능에 접근할 수 있게 합니다. "논리적
"은
이 기능을 지원하지 않는 플랫폼에서 사용되며, 크로스 오리진 격리에 의해 부과된 다양한 제한은 적용되지만 이 기능은 제공되지 않습니다.
새로운 브라우징 컨텍스트 그룹과 문서를 생성하려면 다음을 수행합니다:
새로운 브라우징 컨텍스트 그룹을 생성합니다.
추가합니다. 사용자 에이전트의 브라우징 컨텍스트 그룹 세트에 group을 추가합니다.
null, null 및 group을 사용하여 새로운 브라우징 컨텍스트와 문서를 생성하고, browsingContext 및 document를 반환합니다.
추가합니다. browsingContext를 group에 추가합니다.
group과 document를 반환합니다.
최상위 브라우징 컨텍스트 browsingContext를 브라우징 컨텍스트 그룹 group에 추가하려면 다음을 따릅니다:
추가합니다. browsingContext를 group의 브라우징 컨텍스트 세트에 추가합니다.
browsingContext의 그룹을 group으로 설정합니다.
최상위 브라우징 컨텍스트 browsingContext를 제거하려면 다음을 따릅니다:
browsingContext의 그룹을 group으로 설정합니다.
browsingContext의 그룹을 null로 설정합니다.
제거합니다. browsingContext를 group의 브라우징 컨텍스트 세트에서 제거합니다.
만약 group의 브라우징 컨텍스트 세트가 비어있는 경우, 사용자 에이전트의 브라우징 컨텍스트 그룹 세트에서 group을 제거합니다.
추가와 제거는 브라우징 컨텍스트 그룹의 수명을 정의하는 기본 작업입니다. 이들은 문서
및 브라우징 컨텍스트의 생성 및 소멸 작업에 의해 호출됩니다.
주어진 브라우징 컨텍스트와 동일한 문서
객체가 없을 때(즉, 해당 문서
가 모두 파괴된 경우) 그리고 해당 브라우징 컨텍스트의 WindowProxy
가 가비지 수집 대상일 경우, 해당
브라우징 컨텍스트는 다시는 접근되지 않습니다. 만약
그것이 최상위 브라우징
컨텍스트라면, 이 시점에서 사용자 에이전트는 이를 제거해야
합니다.
Document
d가
완전히 활성화되었다고 할 때, d는 활성 문서인
탐색 가능한 navigable이며,
navigable이 최상위 탐색
가능 또는 navigable의 컨테이너 문서가 완전히 활성화된 경우를 의미합니다.
요소와 연결되어 있기 때문에, 자식 탐색 가능 요소는 항상 특정 Document
인 컨테이너 문서에
연결되어 있으며, 이들은 상위 탐색 가능 요소 안에 있습니다. 사용자 에이전트는 사용자가
자식 탐색 가능 요소와 상호작용하는 것을 허용해서는 안 됩니다.
컨테이너 문서가
완전히 활성화되지 않은 경우에는 말입니다.
다음 예제는 Document
가 활성 문서이면서도
완전히 활성화되지 않은 경우를 보여줍니다. 여기서
a.html
은 브라우저 창에 로드되고,
b-1.html
은 iframe
안에 로드되며,
b-2.html
과 c.html
은 생략됩니다(그들은 단순히 빈 문서일 수 있습니다).
<!-- a.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Navigable A</ title >
< iframe src = "b-1.html" ></ iframe >
< button onclick = "frames[0].location.href = 'b-2.html'" > Click me</ button >
<!-- b-1.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Navigable B</ title >
< iframe src = "c.html" ></ iframe >
이 시점에서 a.html
, b-1.html
, 그리고
c.html
문서들은 모두 각자의 활성 문서입니다.
또한 모두 완전히 활성화되었습니다.
버튼
을 클릭하여
탐색 가능 B에 새로운 Document
인
b-2.html
을 로드한 후, 다음과 같은 결과가 나타납니다:
용의 입에 오신 것을 환영합니다. 내비게이션, 세션 기록, 그리고 그 세션 기록을 통한 탐색은 이 표준에서 가장 복잡한 부분 중 일부입니다.
기본 개념은 그리 어렵지 않아 보일 수 있습니다:
사용자는 탐색 가능 요소를 보고 있으며, 이는 활성 문서를 표시하고 있습니다. 사용자는 이를 다른 URL로 내비게이트합니다.
브라우저는 네트워크에서 주어진 URL을 가져와, 새로 작성된 세션 기록 항목에 새로
생성된 Document
를 채웁니다.
브라우저는 탐색 가능 요소의 활성 세션 기록 항목을 새로 채워진 항목으로 업데이트하여, 사용자가 보고 있는 활성 문서를 업데이트합니다.
나중에 사용자가 브라우저 뒤로 가기 버튼을 누르면 이전 세션 기록 항목으로 돌아갑니다.
브라우저는 다시 탐색 가능 요소의 활성 세션 기록 항목을 업데이트합니다.
여기에서 탐색이 세션 기록을 통해 탐색(즉, 저장된 URL로의 네트워크 가져오기)을 유발할 수 있는 방식과, 탐색이 완료되면 사용자가 올바른 내용을 보고 있는지 확인하기 위해 세션 기록 목록과 상호 작용해야 하는 방식에서 얽힌 복잡성이 일부 드러납니다. 하지만 실제 문제는 다양한 엣지 케이스와 상호 작용하는 웹 플랫폼 기능에서 발생합니다:
자식 탐색 가능 요소 (예: iframe
에
포함된 요소)도 내비게이트하고 탐색할 수 있지만, 사용자는 브라우저 탭과 같은 단일 탐색 가능 요소에 대해 단일 뒤로/앞으로 인터페이스만 가지고 있기 때문에
이러한 내비게이션을 단일 세션 기록 목록으로 선형화해야 합니다.
사용자가 세션 기록에서 한 번에 한 단계 이상 되돌아갈 수 있기 때문에(예: 뒤로 가기 버튼을 길게 누르면), 자식 탐색 가능 요소가 관련된 경우 여러 탐색 가능 요소를 동시에 탐색하게 될 수 있습니다. 이는 여러 이벤트 루프 또는 에이전트 클러스터를 포함할 수 있는 탐색 가능 요소들 간에 동기화해야 합니다.
내비게이션 중에 서버는 204 또는 205 상태 코드나 `Content-Disposition: attachment
`
헤더로 응답하여 내비게이션이 중단되고 탐색 가능 요소가 원래의
활성 문서에 머무르게 할 수 있습니다.
(탐색으로 인해 발생한 내비게이션 중에 발생하면 훨씬 더 나빠집니다!)
`Location
`, `Refresh
`, `X-Frame-Options
`,
그리고 콘텐츠 보안 정책에 대한 헤더와 같은 다양한 다른 HTTP 헤더들이 가져오기 과정 또는 Document
생성 과정에
기여하거나, 또는 두 과정 모두에 기여합니다. `Cross-Origin-Opener-Policy
`
헤더는 탐색 컨텍스트 선택 및 생성 과정에도
기여합니다!
일부 내비게이션(즉, 프래그먼트 내비게이션 및 단일 페이지 앱 내비게이션)은 동기식으로 작동하여 자바스크립트 코드가 내비게이션의 결과를 즉시 관찰할 수 있도록 합니다. 그러면 세션 기록의 관점이 동일 트리의 다른 모든 탐색 가능 요소와 동기화되어야 하며, 이는 경쟁 조건의 영향을 받을 수 있으며 세션 기록의 상충되는 관점을 해결해야 할 필요가 있습니다.
플랫폼에는 javascript:
URL, srcdoc
iframe
요소, 그리고 beforeunload
이벤트와 같은 내비게이션 관련 기능이 축적되어 있어 특별히 처리해야 합니다.
다음 내용에서는 이러한 복잡성을 적절히 구분된 섹션과 알고리즘에 배치하고, 가능한 곳에서 적절한 설명을 제공하여 독자가 이러한 복잡성을 이해할 수 있도록 안내하려고 노력했습니다. 그럼에도 불구하고 내비게이션 및 세션 기록을 진정으로 이해하고자 한다면, 일반적인 조언이 매우 유용할 것입니다.
세션 기록 항목은 다음 구조체의 항목을 포함하는 구조체입니다:
단계, 음수가 아닌 정수 또는 "pending
", 초기값은 "pending
"입니다.
URL, URL.
문서 상태, 문서 상태.
클래식 히스토리 API 상태, 이는 직렬화된 상태로, 초기값은 StructuredSerializeForStorage(null)입니다.
내비게이션 API 상태, 이는 직렬화된 상태로, 초기값은 StructuredSerializeForStorage(undefined)입니다.
내비게이션 API 키, 문자열로, 초기값은 무작위 UUID 생성 결과로 설정됩니다.
내비게이션 API ID, 문자열로, 초기값은 무작위 UUID 생성 결과로 설정됩니다.
스크롤 위치 데이터, 문서의 복원 가능한 스크롤 영역에 대한 스크롤 위치 데이터입니다.
저장된 사용자 상태, 이는 구현 정의이며, 초기값은 null입니다.
예를 들어, 일부 사용자 에이전트는 폼 컨트롤의 값을 저장하려고 할 수 있습니다.
폼 컨트롤의 값을 저장하는 사용자 에이전트는 값이 히스토리 탐색 후 잘못 표시되지 않도록 요소의 dir
속성 값을 함께 저장하는 것이 좋습니다.
세션 기록 항목의 문서를 가져오려면, 해당 문서 상태의 문서를 반환합니다.
직렬화된 상태는 StructuredSerializeForStorage를 통해 객체를 직렬화한 것으로, 사용자 인터페이스 상태를 나타냅니다. 우리는 때때로 "상태 객체"라고 비공식적으로 부르기도 하는데, 이는 작성자가 제공한 사용자 인터페이스 상태를 나타내는 객체이거나, 직렬화된 상태를 StructuredDeserialize를 통해 역직렬화하여 생성된 객체입니다.
페이지는 세션 기록에 추가할 수 있는 직렬화된 상태를 추가할 수 있습니다. 그런 다음, 사용자가 (또는 스크립트가) 기록을 탐색할 때, 이 상태들은 역직렬화되어 스크립트로 반환되므로, 작성자는 단일 페이지 애플리케이션에서도 "내비게이션" 메타포를 사용할 수 있습니다.
직렬화된 상태는 두 가지 주요 목적을 위해 사용될 의도가
있습니다. 첫째, 작성자가 구문 분석을 하지 않아도 되도록 URL에 상태에 대한 사전 구문 분석된 설명을 저장하는
것입니다 (하지만 사용자가 전달하는 URL을 처리하려면 여전히 구문 분석이 필요하므로, 이는 단지 작은 최적화일 뿐입니다). 둘째, 현재 Document
인스턴스에만 적용되는 상태를 저장할 수 있도록 하는
것입니다. 이는 새로운 Document
가 열리면 다시 구성해야
할 수도 있습니다.
후자의 예로는 팝업 div
가 애니메이션을
시작한 정확한 좌표를 추적하는 것이 있으며, 사용자가 다시 돌아갔을 때 동일한 위치로 애니메이션이 실행될 수 있도록 할 수 있습니다. 또는 서버에서 URL의 정보를 기반으로 가져올 데이터를 가리키는 포인터를 유지하는 데 사용할 수 있으며, 이렇게 하면 뒤로 및 앞으로 이동할 때 정보를 다시
가져올 필요가 없습니다.
스크롤 복원 모드는 사용자가 세션 기록 항목으로 탐색할 때, 사용자 에이전트가 저장된 스크롤 위치(있는 경우)를 복원해야 하는지 여부를 나타냅니다. 스크롤 복원 모드는 다음 중 하나입니다:
auto
"
manual
"
문서 상태는 Document
를
표시하고, 필요시 이를 재생성하는 방법에 대한 정보를 세션 기록
항목에 저장합니다. 문서 상태는 다음과 같은 내용을 포함합니다:
문서, Document
또는 null로, 초기값은 null입니다.
히스토리 항목이 활성화된 상태일 때,
해당 항목은 문서 상태에 Document
를 포함합니다. 그러나 Document
가 완전히 활성화되지 않은 경우, 자원을 해제하기 위해 파괴될 수 있습니다. 이러한 경우, 이 문서 항목은 null로 설정됩니다. 그런 다음 URL 및 세션 기록 항목 및 문서 상태의 기타 데이터를 사용하여, 사용자 에이전트가 해당 항목으로 탐색해야 하는 경우 새
Document
를 생성하여 원래 문서를 대체합니다.
만약 Document
가 파괴되지 않은 경우, 히스토리
탐색 중에 다시 활성화될 수
있습니다. 브라우저가 이러한 Document
를 저장하는 캐시는
일반적으로 앞뒤 캐시 또는 bfcache로 불리며, 때로는 "엄청나게 빠른" 캐시로도 불릴 수 있습니다.
히스토리 정책 컨테이너, 정책 컨테이너 또는 null로, 초기값은 null입니다.
요청 리퍼러, "no-referrer
", "client
",
또는 URL,
초기값은 "client
"입니다.
요청 리퍼러 정책, 리퍼러 정책, 초기값은 기본 리퍼러 정책입니다.
요청 리퍼러 정책은 히스토리 정책 컨테이너의 리퍼러 정책과 구별됩니다. 전자는 이 문서의 페치에 사용되고, 후자는 이 문서에 의해 발생하는 페치를 제어합니다.
초기화자 원본, 원본 또는 null로, 초기값은 null입니다.
원본, 원본 또는 null로, 초기값은 null입니다.
이는 "about:
" 스킴을 사용하는 Document
의 원본을 설정하는 원본입니다. 이 원본은 탐색 중에 이러한 Document
를 복원할 때도 사용됩니다. 이 문서들은 네트워크를 통해 새로
가져오는 것이 아니라 로컬에서 재구성되기 때문입니다. 또한 세션 기록 항목이 다시 채워질 때 원본을 비교하는 데에도
사용됩니다. 원본이 변경되면 탐색 가능한 대상 이름이 초기화됩니다.
about 기본 URL, URL 또는 null로, 초기값은 null입니다.
이는 "about:
" 스킴을 사용하는 Document
에 대해서만 채워지며, 해당 문서의 대체 기본 URL이 됩니다. 이는 초기화된 Document
의 문서 기본 URL의 스냅샷입니다.
리소스, 문자열, POST 리소스 또는 null로, 초기값은 null입니다.
문자열은 HTML로 처리됩니다. 이는 iframe
의 srcdoc
문서의 소스를
저장하는 데 사용됩니다.
리로드 대기 중 부울, 초기값은 false입니다.
한 번이라도 채워진 적 있음 부울, 초기값은 false입니다.
탐색 가능한 대상 이름 문자열, 초기값은 빈 문자열입니다.
복원되지 않은 이유, 복원되지 않은 이유 또는 null로, 초기값은 null입니다.
사용자 에이전트는 문서 및 그 하위 문서들을 파괴할 수 있으며, 문서 상태의 문서가 null이 아니고, 해당 Document
가 완전히 활성화되지 않은 경우에 한합니다.
이 제한 사항 외에도, 이 표준은 사용자 에이전트가 문서 상태에 저장된 문서를 언제 파괴할지, 캐시에 유지할지를 지정하지 않습니다.
POST 리소스는 다음을 포함합니다:
요청 본문, 바이트 시퀀스 또는 실패.
이것은 항상 병렬로 액세스되므로 메모리에 저장할 필요는 없습니다. 그러나 각 호출 시 동일한 바이트 시퀀스를 반환해야 합니다. 디스크에서 리소스가 변경되거나 리소스를 더 이상 액세스할 수 없는 경우, 이는 실패로 설정해야 합니다.
요청 콘텐츠 유형,
`application/x-www-form-urlencoded
`,
`multipart/form-data
`,
또는 `text/plain
`.
중첩된 히스토리는 다음을 포함합니다:
이후에 자식 탐색 가능 요소를 리로드할 때 식별하는 방법이 여기에 포함될 것입니다.
세션 기록에서 몇 개의 연속적인 항목이 동일한 문서 상태를 공유할 수
있습니다. 이는 첫 번째 항목이 일반 탐색을 통해 도달하고, 이후의 항목이 history.pushState()
를 통해
추가될 때 발생할 수 있습니다. 또는 프래그먼트로의 탐색을 통해 발생할 수 있습니다.
동일한 문서 상태를 공유하는 모든 항목(따라서 특정 문서의 서로 다른 상태일 뿐인 항목)은 구조적으로 연속적입니다.
Document
는 최신 항목을 가지며,
이는 세션 기록 항목 또는 null입니다.
이는 주어진 Document
에 의해 가장 최근에 표현된 항목입니다.
하나의 Document
는 시간이 지나면서 여러 세션 기록 항목들을 나타낼 수 있으며, 위에서 설명한 것처럼
여러 연속적인 세션 기록 항목들이 동일한 문서 상태를 공유할 수 있습니다.
탐색 가능 요소의 세션 기록 항목을 수정하려면, 모든 수정 작업이 동기화되어야 하며, 이를 통해 단일 진실 소스를 유지할 수 있습니다. 이는 세션 기록이 하위 탐색 가능 요소들과 여러 이벤트 루프에 의해 영향을 받기 때문에 특히 중요합니다. 이를 달성하기 위해, 우리는 세션 기록 탐색 병렬 큐 구조를 사용합니다.
세션 기록 탐색 병렬 큐는 병렬 큐와 매우 유사합니다. 이 큐는 알고리즘 집합과 정렬된 집합을 가지고 있습니다.
항목들은 세션 기록 탐색 병렬 큐의 알고리즘 집합에 포함되며, 이들은 알고리즘 단계이거나 동기 탐색 단계입니다. 동기 탐색 단계는 특정 대상 탐색 가능 요소(탐색 가능 요소)를 포함하는 알고리즘 단계의 일종입니다.
알고리즘 단계 steps가 주어졌을 때, 탐색 가능 요소 traversable에 대해 세션 기록 탐색 단계를 추가하려면, 추가합니다 steps를 traversable의 세션 기록 탐색 큐의 알고리즘 집합에.
특정 탐색 가능 요소 targetNavigable와 관련된 세션 기록 동기 탐색 단계를 탐색 가능 요소 traversable에 추가하려면, 추가합니다 steps를 동기 탐색 단계로서 targetNavigable 대상 탐색 가능 요소를 목표로 traversable의 세션 기록 탐색 큐의 알고리즘 집합에 추가합니다.
새로운 세션 기록 탐색 병렬 큐 시작하기:
sessionHistoryTraversalQueue를 새 세션 기록 탐색 병렬 큐로 설정합니다.
다음 단계를 병렬로 실행합니다:
sessionHistoryTraversalQueue를 반환합니다.
이 섹션은 세션 기록을 조작할 때 표준 전체에서 수행하는 다양한 작업들을 포함하고 있습니다. 이들이 무엇을 하는지 파악하는 가장 좋은 방법은 호출 위치를 살펴보는 것입니다.
세션 기록 항목 가져오기을 위해 navigable navigable을 호출합니다:
navigable의 traversable navigable을 traversable로 설정합니다.
단언: 이 작업은 traversable의 세션 기록 탐색 큐 내에서 실행됩니다.
navigable이 traversable인 경우, traversable의 세션 기록 항목을 반환합니다.
traversable의 세션 기록 항목에서 각 entry에 대해, 추가로 entry의 문서 상태를 docStates에 추가합니다.
각 docState에 대해:
단언: 이 단계는 도달하지 않습니다.
네비게이션 API를 위한 세션 기록 항목 가져오기을 위해 navigable navigable에 대해 targetStep을 호출합니다:
navigable에 대해 세션 기록 항목 가져오기의 결과를 rawEntries로 설정합니다.
entriesForNavigationAPI를 빈 목록으로 설정합니다.
targetStep보다 작거나 같은 가장 큰 단계를 가진 rawEntries의 세션 기록 항목의 인덱스를 startingIndex로 설정합니다.
이 예제를 참조하여 왜 targetStep보다 작거나 같은 가장 큰 단계인지 이해할 수 있습니다.
추가로 rawEntries[startingIndex]를 entriesForNavigationAPI에 추가합니다.
rawEntries[startingIndex]의 문서 상태의 출처를 startingOrigin으로 설정합니다.
i를 startingIndex − 1로 설정합니다.
i > 0일 때:
i를 startingIndex + 1로 설정합니다.
i < rawEntries의 크기일 때:
entriesForNavigationAPI를 반환합니다.
앞으로의 세션 기록 지우기을 위해 traversable navigable navigable에 대해 호출합니다:
단언: 이 작업은 navigable의 세션 기록 탐색 큐 내에서 실행됩니다.
navigable의 현재 세션 기록 단계를 step으로 설정합니다.
각 entryList에 대해:
모든 사용된 기록 단계 가져오기을 위해 traversable navigable traversable에 대해 호출합니다:
단언: 이 작업은 traversable의 세션 기록 탐색 큐 내에서 실행됩니다.
steps를 빈 정렬된 세트로 설정하고, 비음수가 아닌 정수를 포함합니다.
각 entryList에 대해:
steps를 반환합니다. 오름차순으로 정렬된 상태로.
특정 동작은 내비게이션 가능 요소를 내비게이트하여 새로운 리소스로 이동하게 만듭니다.
예를 들어, 하이퍼링크를
따르거나,
양식 제출, 그리고
window.open()
및
location.assign()
메서드는 모두 내비게이션을 유발할 수 있습니다.
우리가 내비게이션 알고리즘 자체로 들어가기 전에, 그것이 사용하는 몇 가지 중요한 구조를 설정해야 합니다.
소스 스냅샷 매개변수 구조체는
내비게이션을 시작하는 문서
의
데이터를 캡처하는 데 사용됩니다. 내비게이션의 시작 시점에 스냅샷이 만들어지며, 내비게이션의 전체 수명 동안 사용됩니다.
이 구조체에는 다음과 같은 항목들이 포함됩니다:
소스 스냅샷 매개변수 스냅샷을 위해 주어진
문서
sourceDocument에서 새로운 소스 스냅샷 매개변수를 반환합니다.
대상 스냅샷 매개변수 구조체는 내비게이션되는 내비게이션 가능 요소의 데이터를 캡처하는 데 사용됩니다. 소스 스냅샷 매개변수와 마찬가지로, 내비게이션의 시작 시점에 스냅샷이 만들어지며, 내비게이션의 전체 수명 동안 사용됩니다. 이 구조체에는 다음과 같은 항목들이 포함됩니다:
대상 스냅샷 매개변수 스냅샷을 위해 주어진 내비게이션 가능 요소 targetNavigable에서 새로운 대상 스냅샷 매개변수를 반환합니다. 여기에는 샌드박싱 플래그가 targetNavigable의 활성 브라우징 컨텍스트 및 targetNavigable의 컨테이너를 기준으로 생성 샌드박싱 플래그 결정의 결과로 설정됩니다.
내비게이션 프로세스의 대부분은 새로운 문서
를
어떻게 생성할지 결정하는 것과 관련이 있습니다. 궁극적으로는 문서
객체 생성 및 초기화
알고리즘에서 발생합니다. 이 알고리즘의 매개변수는 내비게이션 매개변수라는
구조체를 통해 추적되며, 여기에는 다음과 같은 항목들이 포함됩니다:
문서
에
대한 알고리즘 (null 가능)
문서
를
위해 예약된
환경 (null 가능)
문서
에
사용할
출처
문서
에
사용할 정책
컨테이너
문서
에
적용할 샌드박싱 플래그
세트
문서
에
사용할
개방자 정책
문서
에
대한 내비게이션 타이밍 항목 생성을 위한 내비게이션 타이밍 항목 생성에
사용되는 NavigationTimingType
문서
의 about 기본 URL을
채우는 데 사용할 URL 또는 null 값
한 번 내비게이션 매개변수 구조체가 생성되면, 이 표준에서는 그 안의 어떤 항목도 변경하지 않습니다. 그것들은 다른 알고리즘으로만 전달됩니다.
내비게이션 ID는 내비게이션 중에 생성된 UUID 문자열입니다. 이는 WebDriver BiDi 명세와의 인터페이스뿐만 아니라 진행 중인 내비게이션을 추적하는 데 사용됩니다. [WEBDRIVERBIDI]
문서
생성 후,
관련된 탐색 가능한
내비게이션 요소의 세션 히스토리가
업데이트됩니다. NavigationHistoryBehavior
열거형은 새 내비게이션
알고리즘에 원하는 세션
히스토리 업데이트 유형을 표시하는 데 사용됩니다. 이는 다음 중 하나입니다:
push
"
replace
"
auto
"
push
"
또는 "replace
"
값으로 변환됩니다. 일반적으로는 "push
"
값이 되지만, 특정 상황에서는 "replace
"
값이 됩니다.
히스토리 처리 동작은 "push
"
또는 "replace
"
값으로 설정된 NavigationHistoryBehavior
입니다. 즉, 초기 "auto
"
값에서 해제된 것입니다.
내비게이션은 대체여야 합니다, 주어진 URL url 및 문서
document에서 다음 중 하나라도 참이면:
url의 스킴이
"javascript
"인
경우; 또는
document의 초기
about:blank
가
true인 경우.
다음과 같은 경우에는 "replace
"
내비게이션이 강제되는 경우가 많지만 항상 그런 것은 아닙니다:
문서
가
완전히
로드되지 않은 경우; 또는
플랫폼의 다양한 부분은 사용자가 내비게이션에 관여하고 있는지 여부를 추적합니다. 사용자 내비게이션 관여도는 다음 중 하나입니다:
브라우저 UI
"
활성화
"
없음
"
특정 호출 사이트에서 편의를 위해 이벤트
event의 사용자 내비게이션 관여도는 다음과
같이 정의됩니다:
"없음
"을 반환합니다.
내비게이션을 통해 내비게이션 가능
요소 navigable를
URL
url로 이동시키려면, 선택적으로 문서
sourceDocument, 선택적 POST 리소스, 문자열 또는 null documentResource (기본값은 null), 선택적 응답 또는 null response (기본값은 null), 선택적
부울 exceptionsEnabled
(기본값은
false), 선택적 NavigationHistoryBehavior
historyHandling
(기본값은 "auto
"),
선택적 직렬화된
상태 또는 null navigationAPIState (기본값은 null), 선택적 항목 목록 또는
null formDataEntryList (기본값은 null), 선택적 참조자
정책 referrerPolicy (기본값은
빈 문자열), 그리고 선택적 사용자
내비게이션 관여도 userInvolvement (기본값은 "없음
"):
cspNavigationType을 formDataEntryList가 null이 아니면 "form-submission
"으로,
그렇지 않으면 "other
"로 설정합니다.
sourceSnapshotParams을 sourceDocument에서 소스 스냅샷 매개변수 스냅샷 결과로 설정합니다.
initiatorOriginSnapshot을 sourceDocument의 출처로 설정합니다.
initiatorBaseURLSnapshot을 sourceDocument의 문서 기본 URL로 설정합니다.
만약 sourceDocument의 노드 내비게이션 가능 요소가 sourceSnapshotParams를 기반으로 navigable을 샌드박싱에 의해 내비게이션할 수 없음이면 다음을 수행합니다:
exceptionsEnabled가 true이면, "SecurityError
" DOMException
을
발생시킵니다.
반환합니다.
navigationId를 랜덤 UUID 생성의 결과로 설정합니다. [WEBCRYPTO]
주변 에이전트가 navigable의 활성 문서의 관련 에이전트와 동일하면 이 단계를 계속합니다. 그렇지 않으면, 전역 작업을 큐에 넣습니다 navigable의 활성 창을 대상으로 하여 이 단계를 계속합니다.
이렇게 하는 이유는 navigable의 활성 문서의 여러 속성을 살펴볼 예정인데, 이들은 이론적으로 적절한 이벤트 루프를 통해서만 접근할 수 있기 때문입니다. (하지만 — 예를 들어 — 같은 이벤트 루프에서 프래그먼트 내비게이션이 즉시 적용되어야 하기 때문에 무조건적으로 작업을 큐에 넣고 싶지는 않습니다.)
다른 구현 전략은 관련 정보를 이벤트 루프 간에 복제하거나, 이를 참조할 수 있도록 정식 "브라우저 프로세스"에 넣는 것입니다. 이는 대상 이벤트 루프에서 관련 속성이 변경되었지만 아직 복제되지 않은 경계 사례에서 여기서 지정한 것과 다른 결과를 줄 수 있습니다. 이러한 경계 사례에서 어느 전략이 브라우저 동작과 가장 잘 일치하는지 결정하기 위해서는 추가 테스트가 필요합니다.
navigable의 활성
문서의 언로드 카운터가
0보다 크면, WebDriver BiDi 내비게이션 실패를 호출하여
WebDriver BiDi 내비게이션 상태를 설정합니다. 여기서
id는
navigationId, status는 "canceled
",
그리고 url은
url로 설정하고 반환합니다.
container를 navigable의 컨테이너로 설정합니다.
container가 iframe
요소이며
container에 대해 느린
로드
요소
단계를 수행하면 true를 반환하면, 느린 로드 요소의 교차점 관찰 중지
container 및 container의 느린 로드 재개 단계를 null로 설정합니다.
내비게이션이
대체여야
하는 경우 url 및
navigable의 활성
문서를 기준으로
historyHandling을 "replace
"로
설정합니다.
navigable의 부모가
null이 아니면,
navigable의 load
이벤트를 지연하는 모드를
true로 설정합니다.
targetBrowsingContext를 navigable의 활성 브라우징 컨텍스트로 설정합니다.
targetSnapshotParams를 navigable에서 대상 스냅샷 매개변수 스냅샷의 결과로 설정합니다.
WebDriver BiDi 내비게이션 시작을
targetBrowsingContext로 호출하고, 새 WebDriver BiDi 내비게이션 상태를 설정합니다. 여기서
id는
navigationId, status는 "pending
",
그리고 url은
url로 설정합니다.
navigable의 진행 중인
내비게이션이 "traversal
"이면:
WebDriver BiDi 내비게이션 실패를
targetBrowsingContext와 새 WebDriver BiDi 내비게이션 상태로
호출합니다. 여기서
id는
navigationId, status는 "canceled
",
그리고 url은 url로 설정합니다.
반환합니다.
현재 내비게이션 가능 요소를 히스토리 탐색하려는 모든 시도는 무시됩니다.
진행 중인 내비게이션을 navigable에 대해 navigationId로 설정합니다.
이로 인해 navigable의 다른 진행 중인 내비게이션이 중단됩니다. 내비게이션 중에 진행 중인 내비게이션 변경이 추가 작업을 포기하게 만들기 때문입니다.
url의 스킴이
"javascript
"이면:
navigable의 활성 창을 기준으로 전역 작업을 큐에 넣고, navigable, url, historyHandling, initiatorOriginSnapshot, 및 cspNavigationType을 기반으로 javascript: URL로 내비게이션을 수행합니다.
반환합니다.
다음 모든 조건이 true인 경우:
userInvolvement이 "browser
UI
"가 아닙니다.
navigable의 활성 문서의 출처가 동일 출처 도메인에 해당하며 sourceDocument의 출처와 동일합니다.
navigable의 활성
문서의 초기
about:blank
이(가) false입니다.
다음 단계를 수행합니다:
entryListForFiring을 documentResource가 POST 리소스인 경우 formDataEntryList로, 그렇지 않으면 null로 설정합니다.
navigationAPIStateForFiring을 navigationAPIState가 null이 아니면 navigationAPIState로 설정하고, 그렇지 않으면 StructuredSerializeForStorage(undefined)로 설정합니다.
continue를 navigation에 navigationType을
historyHandling로 설정하고, isSameDocument를
false로 설정하며, userInvolvement을
userInvolvement로 설정하고, formDataEntryList를
entryListForFiring로 설정하고, destinationURL
을 url로 설정하고, navigationAPIState
을
navigationAPIStateForFiring로 설정한 후, push/replace/reload
navigate
이벤트를 호출하여 그 결과를 continue로 설정합니다.
continue가 false이면, 반환합니다.
userInvolvement이 "브라우저 UI
"
이거나 교차 출처 도메인 sourceDocument에 의해 시작된 내비게이션은 이전 프래그먼트로
내비게이션 경로를 통해 navigate
이벤트를 발생시킬 수 있습니다.
병렬로 이 단계를 실행합니다:
navigable의 활성 문서의 포함하는 하위 내비게이션 가능 요소들에 대해 언로드가 취소되었는지 확인한 결과를 unloadPromptCanceled로 설정합니다.
unloadPromptCanceled이 true이거나 navigable의 진행 중인 내비게이션이 더 이상 navigationId가 아니면:
WebDriver BiDi
내비게이션
실패를
targetBrowsingContext와 새 WebDriver BiDi
내비게이션
상태
로 호출합니다. 여기서 id는
navigationId, status는 "canceled
",
그리고 url은 url.
이 단계를 중단합니다.
전역 작업을 큐에 넣습니다 navigable의 활성 창을 기준으로 문서와 해당 하위 요소를 중단합니다 navigable의 활성 문서.
url이 about:blank와 일치하거나
about:srcdoc
인 경우 또는
about:srcdoc
인 경우:
documentState의 출처를 initiatorOriginSnapshot으로 설정합니다.
documentState의 about 기본 URL을 initiatorBaseURLSnapshot으로 설정합니다.
historyEntry을 새 세션 히스토리 항목으로 설정하며, URL을 url로 설정하고, 문서 상태을 documentState로 설정합니다.
navigationParams를 null로 설정합니다.
response가 null이 아니면:
policyContainer를 내비게이션 매개변수 정책 컨테이너 결정의 결과로 설정합니다. 여기서 응답의 URL을 사용하고, null과 sourceDocument의 정책 컨테이너의 클론, navigable의 컨테이너 문서의 정책 컨테이너, 및 null을 사용합니다.
finalSandboxFlags를 targetSnapshotParams의 샌드박싱 플래그와 policyContainer의 CSP 목록의 CSP 유래 샌드박싱 플래그의 합집합으로 설정합니다.
responseOrigin을 출처 결정의 결과로 설정합니다. 여기서 response의 URL과 finalSandboxFlags, 그리고 documentState의 초기자 출처를 사용합니다.
coop을 새 오프너 정책으로 설정합니다.
coopEnforcementResult을 새 교차 출처 오프너 정책 시행 결과 로 설정합니다. 여기서:
navigationParams을 새 내비게이션 매개변수로 설정합니다. 여기서:
navigate
"
히스토리 항목의 문서를 채우는
시도를 historyEntry에 대해 navigable, "navigate
",
sourceSnapshotParams, targetSnapshotParams, navigationId,
navigationParams, cspNavigationType을
사용하여 수행합니다. 여기서 allowPOST를 true로 설정하고, 완료 단계를 다음 단계로 설정합니다:
navigable의 탐색 가능 요소에 세션 히스토리 탐색 단계를 추가하여 navigable, historyHandling, 및 historyEntry를 사용하여 교차 문서 내비게이션을 완료합니다.
일반적인 교차 문서 내비게이션의 경우 먼저 세션 히스토리 항목 채우기로 이동하지만, 중단되지 않는 모든 내비게이션은 궁극적으로 아래 알고리즘 중 하나를 호출하게 됩니다.
교차 문서 내비게이션을 완료하려면, navigable navigable, history handling behavior historyHandling, 그리고 session history entry historyEntry를 사용합니다:
확인: 이것은 navigable의 탐색 가능한 요소의 세션 히스토리 탐색 큐에서 실행 중입니다.
navigable의 load
이벤트를 지연하는
모드를 false로 설정합니다.
historyEntry의 문서가 null인 경우, 반환합니다.
이것은 히스토리 항목의 문서를 채우려는 시도가 문서를 생성하지 못한 경우를 의미합니다. 예를 들어, 내비게이션이 후속 내비게이션으로 인해 취소되거나, 204 No Content 응답을 받은 경우 등이 있습니다.
다음 조건이 모두 true인 경우:
navigable의 부모가 null입니다.
historyEntry의 문서의 브라우징 컨텍스트가 보조 브라우징 컨텍스트가 아니며, opener 브라우징 컨텍스트가 null이 아닙니다.
그렇다면 historyEntry의 문서 상태의 내비게이션 대상 이름을 빈 문자열로 설정합니다.
entryToReplace를 navigable의 활성 세션 히스토리 항목으로 설정합니다. 단,
historyHandling이 "replace
"인
경우에만 그렇습니다. 그렇지 않으면 null로 설정합니다.
traversable를 navigable의 탐색 가능한 요소로 설정합니다.
targetStep을 null로 설정합니다.
targetEntries를 세션 히스토리 항목 가져오기의 결과로 설정합니다. 대상은 navigable입니다.
entryToReplace가 null이면:
앞으로의 세션 히스토리 지우기를 traversable에 대해 수행합니다.
targetStep을 traversable의 현재 세션 히스토리 단계 + 1로 설정합니다.
historyEntry의 단계를 targetStep으로 설정합니다.
추가 historyEntry를 targetEntries에 추가합니다.
그렇지 않으면:
교체 entryToReplace를 historyEntry로 targetEntries에서 교체합니다.
historyEntry의 문서 상태의 출처가 entryToReplace의 문서 상태의 출처와 동일 출처인 경우, historyEntry의 내비게이션 API 키를 entryToReplace의 내비게이션 API 키로 설정합니다.
targetStep을 traversable의 현재 세션 히스토리 단계로 설정합니다.
push/replace 히스토리 단계 적용을 targetStep에 traversable이 historyHandling을 기준으로 수행합니다.
javascript:
URL 특수
사례javascript:
URL은 사양과 관련된 다양한 문제를 기록한 전용
레이블을 이슈 트래커에서 가지고 있습니다.
javascript:
URL로 탐색하려면, 탐색 가능한 targetNavigable, URL url, 기록 처리 동작 historyHandling, 기원 initiatorOrigin,
그리고 문자열 cspNavigationType을 전달받습니다:
진행 중인 탐색을 설정하십시오 targetNavigable에 대해 null로 설정합니다.
만약 initiatorOrigin이 targetNavigable의 활성 문서의 기원과 동일한 기원-도메인이 아니면, 리턴하십시오.
request를 새 요청으로 설정하고, 그 URL을 url로 설정하십시오.
이것은 다음 단계로 넘겨주기 위한 합성 요청입니다. 네트워크에 도달하지 않습니다.
만약 콘텐츠 보안 정책에
의해 이 탐색 요청이 차단될지 여부를 request와 cspNavigationType으로 평가한 결과가
"차단됨
"이라면, 리턴하십시오.
[CSP]
newDocument를 javascript:
URL을 평가한
결과로 설정하고, 이를 targetNavigable, url, 및 initiatorOrigin에 전달하십시오.
만약 newDocument가 null이라면, 리턴하십시오.
이 경우, 일부 JavaScript 코드가 실행되었지만 새 문서
가 생성되지 않았으므로 탐색이 수행되지
않습니다.
entryToReplace를 targetNavigable의 활성 세션 기록 항목으로 설정하십시오.
oldDocState를 entryToReplace의 문서 상태로 설정하십시오.
documentState를 새 문서 상태로 설정하십시오
historyEntry를 새 세션 기록 항목으로 설정하십시오
우리는 url을 사용하지 않으며, 즉 실제 javascript:
URL을 탐색 알고리즘에 호출된 그대로 사용하지 않습니다.
이로 인해 javascript:
URL은 세션 기록에 저장되지 않으며, 따라서 다시 탐색할 수 없습니다.
세션 기록 탐색 단계 추가를 targetNavigable의 탐색 가능한 대상으로 하여, targetNavigable, historyHandling, 및 historyEntry와 함께 문서 간 탐색을 완료하십시오.
javascript:
URL 평가하려면, 탐색 가능한 targetNavigable, URL url, 그리고 기원
newDocumentOrigin을 전달받습니다:
URL 직렬화 프로그램을 url에 대해 실행한 결과를 urlString으로 설정하십시오.
encodedScriptSource를 urlString에서 선행하는 "javascript:
"를 제거한 결과로 설정하십시오.
baseURL을 settings의 API 기본 URL로 설정하십시오.
script을 scriptSource, settings, baseURL 및 기본 스크립트 가져오기 옵션을 주고 클래식 스크립트 생성 단계를 실행한 결과로 설정하십시오.
evaluationStatus를 클래식 스크립트 실행한 결과로 설정하십시오 script.
result를 null로 설정하십시오.
만약 evaluationStatus가 정상 완료이고, evaluationStatus.[[Value]]가 문자열인 경우, result를 evaluationStatus.[[Value]]로 설정하십시오.
그렇지 않으면 null을 반환하십시오.
response를 새 응답으로 설정하십시오, 다음을 포함하여
Content-Type
`,
`text/html;charset=utf-8
`) »
UTF-8로 인코딩한다는 것은, HTML 파서가 응답 본문을 디코딩할 때, 대리 문자가 왕복하지 않는다는 것을 의미합니다.
finalSandboxFlags를 policyContainer의 CSP 목록의 CSP에서 파생된 샌드박싱 플래그로 설정하십시오.
coop을 targetNavigable의 활성 문서의 크로스 오리진 오프너 정책으로 설정하십시오.
coopEnforcementResult를 새 크로스 오리진 오프너 정책 시행 결과로 설정하고, 다음을 포함하여
navigationParams를 새 탐색 매개변수로 설정하고, 다음을 포함하여
문서
의 참조자가 null이
됩니다. 이것이 맞습니까?
탐색
"
HTML 문서 로드를 수행한 결과를 navigationParams로 설정하십시오.
단편으로 탐색하기 위해 탐색 가능 항목 navigable, URL url, 히스토리 처리 동작 historyHandling, 사용자 탐색 참여도 userInvolvement, 직렬화된 상태-또는-null navigationAPIState 및 탐색 ID navigationId를 지정합니다:
navigable의 활성 세션 히스토리 항목의 탐색 API 상태를 destinationNavigationAPIState로 설정합니다.
navigationAPIState가 null이 아닌 경우 destinationNavigationAPIState를 navigationAPIState로 설정합니다.
push/replace/reload
navigate
이벤트를 navigation에서 발생시키고, navigationType을 historyHandling으로
설정하고, isSameDocument를 true로 설정하며, userInvolvement를 userInvolvement로
설정하고, destinationURL을 url로 설정하며, navigationAPIState를
destinationNavigationAPIState로 설정합니다.
continue가 false인 경우, 반환합니다.
historyEntry를 다음과 같은 속성으로 새 세션 히스토리 항목으로 설정합니다:
navigation.navigate()
로
수행된 탐색의 경우, state
옵션에서 제공된 값이 새 탐색
API 상태에 사용됩니다. (이 값이 제공되지 않은 경우 정의되지 않은 상태의 직렬화로 설정됩니다.) 다른 단편 탐색의 경우, 사용자 주도 탐색을 포함하여 탐색 API 상태가 이전
항목에서 그대로 전달됩니다.
클래식 히스토리 API 상태는 결코 전달되지 않습니다.
entryToReplace를 navigable의 활성 세션 히스토리 항목으로 설정합니다. 단,
historyHandling이 "교체
"인
경우, 그렇지 않으면 null로 설정합니다.
scriptHistoryIndex를 history의 인덱스로 설정합니다.
scriptHistoryLength를 history의 길이로 설정합니다.
historyHandling이 "푸시
"인
경우:
history의 상태를 null로 설정합니다.
scriptHistoryIndex를 증가시킵니다.
scriptHistoryLength를 scriptHistoryIndex + 1로 설정합니다.
navigable의 활성 세션 히스토리 항목을 historyEntry로 설정합니다.
히스토리 단계 적용을 위한 문서 업데이트를 navigable의 활성 문서, historyEntry, true, scriptHistoryIndex, scriptHistoryLength 및 historyHandling을 기준으로 수행합니다.
이 알고리즘은 단일 단편 탐색 결과로 두 번 호출됩니다: 한 번은 동기적으로, 최적의 추정값 scriptHistoryIndex와
scriptHistoryLength가 설정되고, history.state
가 null로
설정되며 다양한 이벤트가 발생합니다. 그리고 두 번째는 비동기적으로, 최종 인덱스 및 길이 값이 설정되고, history.state
는 변경되지
않으며 이벤트가 발생하지 않습니다.
단편으로 스크롤을 navigable의 활성 문서를 기준으로 수행합니다.
스크롤이 실패한 경우, 즉 문서
가 새로 생성되고 관련
ID가 아직 구문 분석되지 않은 경우, 두 번째 비동기 히스토리 단계 적용을 위한 문서 업데이트 호출이
스크롤링을 처리할 것입니다.
traversable를 navigable의 탐색 가능한 항목으로 설정합니다.
세션 히스토리 동기 탐색 단계 추가를 navigable과 관련하여 traversable에 수행합니다:
동일 문서 탐색 완료를 traversable, navigable, historyEntry, entryToReplace 및 historyHandling을 기준으로 수행합니다.
navigable의 활성 탐색 컨텍스트와
navigationId를 ID로 가지는 새 WebDriver BiDi 탐색 상태로 WebDriver BiDi 단편 탐색 완료를 수행하고,
url을 URL로, "완료
"를
상태로 설정합니다.
동일 문서 탐색 완료를 탐색 가능한 항목 traversable, 탐색 가능 항목 targetNavigable, 세션 히스토리 항목 targetEntry, 세션 히스토리 항목-또는-null entryToReplace 및 히스토리 처리 동작 historyHandling을 기준으로 수행합니다.
이는 단편 탐색과 URL 및 히스토리 업데이트 단계 모두에서 사용되며, 이들은 세션 히스토리에 대한 유일한 동기 업데이트입니다. 동기성을 유지하기 때문에 이 알고리즘은 최상위 탐색 가능 항목의 세션 히스토리 탐색 대기열 외부에서 수행됩니다. 이는 최상위 탐색 가능 항목의 현재 세션 히스토리 단계와의 동기화를 방해하므로, 이 알고리즘은 경쟁 조건으로 인한 충돌을 해결하는 데 사용됩니다.
단언: 이는 traversable의 세션 히스토리 탐색 대기열에서 실행 중입니다.
targetNavigable의 활성 세션 히스토리 항목이 targetEntry가 아닌 경우, 반환합니다.
targetStep을 null로 설정합니다.
targetEntries를 targetNavigable에 대한 세션 히스토리 항목 가져오기의 결과로 설정합니다.
entryToReplace이 null인 경우:
전방 세션 히스토리 지우기를 traversable에서 수행합니다.
targetStep을 traversable의 현재 세션 히스토리 단계 + 1로 설정합니다.
targetEntry의 단계를 targetStep으로 설정합니다.
추가 targetEntry를 targetEntries에 추가합니다.
그렇지 않은 경우:
교체 entryToReplace를 targetEntry로 targetEntries에서 교체합니다.
targetStep을 traversable의 현재 세션 히스토리 단계로 설정합니다.
푸시/교체 히스토리 단계 적용을 targetStep을 기준으로 traversable에 historyHandling을 지정하여 수행합니다.
이 작업은 "교체
"
탐색에도 수행되며, 이는 여러 동기 탐색에서 발생하는 경쟁 조건을 해결하기 위해 수행됩니다.
비 가져오기 스킴 문서를 생성하려는 시도의 입력은 비 가져오기 스킴 탐색 매개변수 struct입니다. 이는 비 fetch 스킴 탐색 사례와 관련된 매개변수만 포함하는 경량 버전입니다. 다음과 같은 항목을 포함합니다:
사용자에게 외부 소프트웨어 패키지의 호출을 확인하는 프롬프트를 제공할 때 사용할 수 있는 원점
이는 문서 상태의 시작자 원점과 약간 다르며, 비 가져오기 스킴 탐색 매개변수의 시작자 원점은 비 fetch 스킴 URL로 끝나는 리다이렉트 체인에서 마지막 fetch 스킴 URL까지의 리다이렉트를 따릅니다.
문서
에 대한 탐색 타이밍 항목을
생성하기 위해 사용되는 NavigationTimingType
url이 navigable에 영향을 미치지 않는 메커니즘으로 처리되어야 하는 경우, 예를 들어 url의 스킴이 외부에서 처리되는 경우, 다음을 수행합니다:
url을 인라인 콘텐츠로 표시하여 처리합니다. 예를 들어, 지정된 스킴이 지원되는 프로토콜 중 하나가 아니기 때문에 오류 메시지를 표시하거나 사용자에게 주어진 스킴에 대한 등록된 핸들러를 선택하도록 하는 인라인 프롬프트를 표시할 수 있습니다. navigable, navigationParams의 id, 그리고 navigationParams의 탐색 타이밍 유형을 기준으로 인라인 콘텐츠 표시의 결과를 반환합니다.
등록된 핸들러가 사용된 경우, 탐색이 새 URL로 호출됩니다.
외부 소프트웨어로의 이관을 URL 또는 응답 resource, 탐색 가능 항목 navigable, 샌드박싱 플래그 세트 sandboxFlags, 불리언 hasTransientActivation, 그리고 원점 initiatorOrigin를 기준으로 수행하려면, 사용자 에이전트는 다음을 수행해야 합니다:
다음 모든 조건이 참인 경우:
외부 소프트웨어 패키지를 호출하지 않고 반환합니다.
iframe 내부에서 외부 소프트웨어를 향한 탐색은 사용자에게 새로운 팝업 또는 새로운 최상위 탐색으로 보일 수 있습니다. 이는 "iframe
"에서
allow-popups
,
allow-top-navigation
,
allow-top-navigation-by-user-activation
,
또는 allow-top-navigation-to-custom-protocols
"가
지정된 경우에만 허용됩니다.
resource의 적절한 이관을 수행하며, 이 작업이 대상 소프트웨어를 악용하려는 시도일 가능성을 완화하려고 시도합니다. 예를 들어, 사용자 에이전트는 initiatorOrigin이 외부 소프트웨어를 호출할 수 있도록 허용할지를 확인하는 프롬프트를 사용자에게 표시할 수 있습니다. 특히 hasTransientActivation이 false인 경우, 사용자 확인 없이 외부 소프트웨어 패키지를 호출해서는 안 됩니다.
예를 들어, 대상 소프트웨어의 URL 핸들러에 취약점이 있을 수 있으며, 적대적인 페이지가 사용자를 속여 링크를 클릭하게 함으로써 이를 악용하려고 할 수 있습니다.
탐색 과정 초기 단계에서 몇 가지 시나리오가 개입하여 전체 과정을 중단시킬 수 있습니다. 이는 세션 히스토리 이동으로 인해 여러 탐색 가능 항목이 동시에 탐색하는 경우 특히 흥미로울 수 있습니다.
탐색 가능 항목 source가 소스 스냅샷 매개변수 sourceSnapshotParams가 주어졌을 때, 두 번째 탐색 가능 항목 target를 탐색하도록 샌드박싱에 의해 허용되었는지 여부는 다음 단계가 true를 반환하는지에 따라 결정됩니다:
source가 target과 동일하다면, true를 반환합니다.
source가 target의 상위 항목인 경우, true를 반환합니다.
target이 source의 상위 항목인 경우:
target이 최상위 탐색 가능 항목이 아닌 경우, true를 반환합니다.
sourceSnapshotParams의 일시적 활성화가 있는지 여부가 true이고, sourceSnapshotParams의 샌드박싱 플래그의 사용자 활성화가 있는 최상위 탐색 샌드박스 플래그가 설정되어 있으면, false를 반환합니다.
sourceSnapshotParams의 일시적 활성화가 있는지 여부가 false이고, sourceSnapshotParams의 샌드박싱 플래그의 사용자 활성화 없이 최상위 탐색 샌드박스 플래그가 설정되어 있으면, false를 반환합니다.
true를 반환합니다.
target이 최상위 탐색 가능 항목인 경우:
source가 target의 허용된 하나의 샌드박스된 탐색자인 경우, true를 반환합니다.
sourceSnapshotParams의 샌드박싱 플래그의 샌드박스된 탐색 브라우징 컨텍스트 플래그가 설정되어 있으면, false를 반환합니다.
true를 반환합니다.
sourceSnapshotParams의 샌드박싱 플래그의 샌드박스된 탐색 브라우징 컨텍스트 플래그가 설정되어 있으면, false를 반환합니다.
true를 반환합니다.
옵션으로 탐색 가능 항목 traversable, 옵션 정수
targetStep, 그리고 옵션 사용자 탐색 개입-또는-null
userInvolvementForNavigateEvent이 주어졌을 때, 언로드가 취소되었는지
확인하려면, 다음 단계를 실행하십시오. 이들은 "canceled-by-beforeunload
", "canceled-by-navigate
",
또는 "continue
"를 반환합니다.
navigablesThatNeedBeforeUnload에 있는 각 항목의 활성 문서를 documentsToFireBeforeunload로 설정합니다.
unloadPromptShown을 false로 설정합니다.
finalStatus를 "continue
"로 설정합니다.
traversable이 주어졌다면:
단언: targetStep 및 userInvolvementForNavigateEvent이 주어졌습니다.
traversable 및 targetStep을 사용하여 대상 히스토리 항목 가져오기의 결과로 targetEntry를 설정합니다.
targetEntry가 traversable의 현재 세션 히스토리 항목이 아니고, targetEntry의 문서 상태의 원점이 traversable의 현재 세션 히스토리 항목의 문서 상태의 원점과 동일하다면:
이 경우, traversable에 대해 navigate
이벤트를
여기서 발생시킵니다. 특정 상황에서 취소될 수 있기 때문에, 다른 이동 navigate
이벤트보다 나중에 발생하는 것과 별도로 처리해야 합니다.
또한, beforeunload
이벤트가 navigate
이벤트보다 먼저 발생하기를 원하기 때문에, 여기서 traversable에 대해 (적용 가능한 경우)
documentsToFireBeforeunload에 대한 아래의 루프의 일부로 처리하는 대신 beforeunload
이벤트를 발생시켜야 합니다.
단언: userInvolvementForNavigateEvent이 null이 아닙니다.
eventsFired를 false로 설정합니다.
needsBeforeunload가 true이면 navigablesThatNeedBeforeUnload이 traversable를 포함합니다. 그렇지 않으면 false입니다.
needsBeforeunload이 true이면 documentsToFireBeforeunload에서 traversable의 활성 문서를 제거합니다.
전역 작업을 큐에 추가하여 traversable의 활성 창에서 다음 단계를 수행하도록 합니다:
needsBeforeunload가 true이면:
traversable의 활성 문서 및 false를 기준으로 beforeunload
발생 단계를 실행한 결과로 (unloadPromptShownForThisDocument,
unloadPromptCanceledByThisDocument)를 설정합니다.
unloadPromptShownForThisDocument이 true이면 unloadPromptShown을 true로 설정합니다.
unloadPromptCanceledByThisDocument이 true이면
finalStatus를 "canceled-by-beforeunload
"로 설정합니다.
finalStatus가 "canceled-by-beforeunload
"인 경우, 이 단계를 중단합니다.
navigateEventResult를 navigation에서 targetEntry 및
userInvolvementForNavigateEvent을 기준으로 이동
navigate
이벤트를 발생시키는 결과로 설정합니다.
navigateEventResult가 false이면 finalStatus를
"canceled-by-navigate
"로 설정합니다.
eventsFired를 true로 설정합니다.
eventsFired가 true가 될 때까지 기다립니다.
finalStatus가 "continue
"가 아닌 경우, finalStatus를 반환합니다.
documentsThatNeedBeforeunload의 크기를 totalTasks로 설정합니다.
completedTasks를 0으로 설정합니다.
각 document에 대해 반복하고, document의 관련 글로벌 객체를 기준으로 전역 작업을 큐에 추가하여 다음 단계를 실행합니다:
document 및 unloadPromptShown을 기준으로 beforeunload
발생 단계의
결과로 (unloadPromptShownForThisDocument,
unloadPromptCanceledByThisDocument)를 설정합니다.
unloadPromptShownForThisDocument이 true이면 unloadPromptShown을 true로 설정합니다.
unloadPromptCanceledByThisDocument이 true이면 finalStatus를
"canceled-by-beforeunload
"로 설정합니다.
completedTasks를 1만큼 증가시킵니다.
completedTasks가 totalTasks와 같아질 때까지 기다립니다.
finalStatus를 반환합니다.
주어진 문서
및 불리언 unloadPromptShown을 기준으로 beforeunload
발생 단계를 실행하려면 다음 단계를 따르십시오:
unloadPromptCanceled를 false로 설정합니다.
document의 언로드 카운터를 1만큼 증가시킵니다.
document의 관련 글로벌 객체에서 이벤트를 발생시키는 결과로 eventFiringResult를 설정합니다. 이 이벤트의
이름은 beforeunload
이며,
BeforeUnloadEvent
를 사용하고, cancelable
속성을 true로 초기화합니다.
다음이 모두 true인 경우:
unloadPromptShown이 false입니다.
document의 활성 샌드박싱 플래그 세트가 샌드박스된 모달 플래그를 포함하지 않습니다.
eventFiringResult가 false이거나, 이벤트의 returnValue
속성이
빈 문자열이 아닙니다.
언로드 프롬프트를 표시하는 것이 성가시거나, 속임수 같거나, 무의미하지 않을 가능성이 있습니다.
다음 단계를 수행합니다:
unloadPromptShown을 true로 설정합니다.
document의 관련 글로벌 객체,
"beforeunload
", 및 ""를 기준으로 WebDriver BiDi 사용자 프롬프트 열림을 호출합니다.
사용자에게 문서를 언로드할 것인지 확인하도록 요청하고, 사용자의 응답을 기다리는 동안 일시 중지합니다.
사용자에게 표시되는 메시지는 사용자 에이전트에 의해 결정되며, 실제 returnValue
속성
값은 무시됩니다.
사용자가 페이지 탐색을 확인하지 않으면 unloadPromptCanceled을 true로 설정합니다.
document의 관련 글로벌 객체를 기준으로 WebDriver BiDi 사용자 프롬프트 닫힘을 호출합니다. unloadPromptCanceled이 false인 경우 true를, 그렇지 않은 경우 false를 전달합니다.
document의 언로드 카운터를 1만큼 감소시킵니다.
(unloadPromptShown, unloadPromptCanceled)을 반환합니다.
어떤 탐색 가능 요소 navigable에 대해 진행 중인 탐색을 설정하려면 newValue로 다음을 수행합니다:
만약 navigable의 진행 중인 탐색이 newValue와 동일하다면, 반환합니다.
탐색 중단에 대해 탐색 API에 알림을 navigable에 대해 수행합니다.
navigable의 진행 중인 탐색을 newValue로 설정합니다.
새로 고침을 수행하기 위해 탐색 가능
요소
navigable와 선택적 직렬화된
상태-또는-null
인
navigationAPIState (기본값은 null
) 및 선택적 사용자 탐색 참여도
userInvolvement (기본값은 "없음
")이 주어졌을 때 다음을 수행합니다:
만약 userInvolvement이 "브라우저 UI
"가 아니라면:
destinationNavigationAPIState을 navigable의 활성 세션 기록 항목의 탐색 API 상태로 설정합니다.
만약 navigationAPIState가 null이 아니면, destinationNavigationAPIState를 navigationAPIState로 설정합니다.
continue를 푸시/대체/새로 고침
navigate
이벤트를 navigation에서 발행한 결과로 설정하고, navigationType을 "새로 고침
"으로,
isSameDocument를 false로, userInvolvement을
userInvolvement로, destinationURL을 navigable의 활성 세션
기록 항목의 URL로, navigationAPIState을
destinationNavigationAPIState로 설정합니다.
만약 continue가 false라면, 이 단계를 중지합니다.
navigable의 활성 세션 기록 항목의 문서 상태의 새로 고침 대기 중을 true로 설정합니다.
traversable을 navigable의 탐색 가능 요소로 설정합니다.
다음 세션 기록 탐색 단계를 traversable에 추가합니다:
새로 고침 기록 단계 적용을 traversable에 수행합니다.
차이를 통해 기록 탐색을 수행하기 위해 탐색 가능 요소
traversable, 정수 delta와 선택적 문서
sourceDocument이 주어졌을 때:
sourceSnapshotParams와 initiatorToCheck를 null로 설정합니다.
userInvolvement을 "브라우저 UI
"로 설정합니다.
만약 sourceDocument가 주어졌다면:
sourceSnapshotParams을 원본 스냅샷 매개변수 스냅샷 찍기의 결과로 설정합니다.
initiatorToCheck을 sourceDocument의 노드 탐색 가능 요소로 설정합니다.
userInvolvement을 "없음
"으로 설정합니다.
다음 세션 기록 탐색 단계를 traversable에 추가합니다:
allSteps를 모든 사용된 기록 단계 가져오기의 결과로 설정합니다.
currentStepIndex를 traversable의 현재 세션 기록 단계의 인덱스로 설정합니다.
targetStepIndex를 currentStepIndex 더하기 delta로 설정합니다.
만약 allSteps[targetStepIndex]가 존재하지 않으면, 이 단계를 중지합니다.
탐색 기록 단계 적용을 allSteps[targetStepIndex]에 대해 traversable, sourceSnapshotParams, initiatorToCheck, userInvolvement을 주고 수행합니다.
탐색 알고리즘 외에도, 세션 기록 항목은 URL 및 기록 업데이트 단계라는 또 다른 메커니즘을 통해 푸시되거나 대체될 수
있습니다. 이 단계의 가장 잘 알려진 호출자는 history.replaceState()
및 history.pushState()
API이지만, 표준의 여러 다른 부분에서도 활성
세션 기록 항목을 업데이트해야 하며, 이 단계들을 사용하여 그렇게 합니다.
URL 및 기록 업데이트 단계는 문서
document, URL
newURL, 선택적 직렬화된 상태 또는
null
인 serializedData (기본값 null
), 그리고 선택적
기록 처리 동작 historyHandling (기본값 "replace
")가
주어졌을 때 수행됩니다:
navigable을 document의 노드 탐색 가능 요소로 설정합니다.
activeEntry를 navigable의 활성 세션 기록 항목으로 설정합니다.
newEntry를 다음을 포함하는 새 세션 기록 항목으로 설정합니다:
만약 document의 초기 about:blank
가 true라면,
historyHandling을 "replace
"로
설정합니다.
이는 초기 about:blank 문서
에서 pushState()
호출이 replaceState()
호출처럼 동작함을 의미합니다.
entryToReplace를 activeEntry로 설정하되, historyHandling이 "replace
"인
경우에만 해당합니다. 그렇지 않으면 null로 설정합니다.
만약 historyHandling이 "push
"라면:
이 값들은 즉각적인 동기적 접근을 위한 임시 예측 값입니다.
만약 serializedData가 null이 아니면, 기록 객체 상태를 복원합니다. document와 newEntry를 사용합니다.
document의 URL을 newURL로 설정합니다.
document의 최신 항목을 newEntry로 설정합니다.
navigable의 활성 세션 기록 항목을 newEntry로 설정합니다.
같은 문서 탐색에 대한 탐색 API 항목 업데이트를 document의 관련 전역 객체의 탐색 API, newEntry, 그리고 historyHandling을 주고 수행합니다.
traversable을 navigable의 탐색 가능 요소로 설정합니다.
다음 세션 기록 동기 탐색 단계를 traversable에 대해 navigable을 포함하여 추가합니다:
같은 문서 탐색 완료를 traversable, navigable, newEntry, entryToReplace, 그리고 historyHandling을 주고 수행합니다.
프래그먼트 탐색과 URL 및 기록 업데이트
단계 모두 동기 기록 업데이트를 수행하지만, 프래그먼트 탐색만이 동기적으로 기록 단계 적용을 위한 문서 업데이트 호출을 포함합니다.
URL 및 기록 업데이트
단계는 위의 알고리즘 내에서 몇 가지 선택된 업데이트만 수행하며, 다른 것은 생략합니다. 이는 다소 불행한 역사적 실수로, 이러한 불일치로 인해 웹 개발자의 슬픔을 초래하는 경우가 많습니다. 예를 들어, 프래그먼트 탐색에 대해서는 popstate
이벤트가 발생하지만, history.pushState()
호출에 대해서는 발생하지 않습니다.
개요에서 설명한 바와 같이, 탐색과 탐색 모두 세션 기록 항목을 생성한 다음, 해당 항목의 문서 멤버를 채우려고 시도하여 탐색 가능 요소 내에서 표시될 수 있도록 합니다.
이 과정은 이미 제공된 응답을 사용하는 것, srcdoc 리소스를 사용하는 것, 또는 가져오기 중 하나를 포함합니다. 이 과정에는 여러
실패 모드가 있으며, 이는 탐색 가능 요소를 현재 활성 문서
에 남겨두거나, 세션 기록 항목을 오류 문서로 채우는 결과를 초래할 수 있습니다.
세션 기록 항목 세션 기록
항목 entry의 문서를 채우려고 시도하기 위해, 탐색 가능 요소 navigable, NavigationTimingType
navTimingType, 원본 스냅샷 매개변수
sourceSnapshotParams, 대상 스냅샷 매개변수
targetSnapshotParams, 선택적 탐색 ID 또는 null navigationId (기본값 null),
선택적 탐색 매개변수 또는 null
navigationParams (기본값 null), 선택적 문자열 cspNavigationType (기본값 "other
"), 선택적 부울
allowPOST (기본값 false), 그리고 선택적 알고리즘 단계 completionSteps (기본값 빈 알고리즘)을 제공받았을 때 수행하는 단계는 다음과
같습니다:
단언: navigationParams가 null이 아닌 경우, navigationParams의 응답이 null이 아닙니다.
currentBrowsingContext을 navigable의 활성 브라우징 컨텍스트로 설정합니다.
만약 navigationParams가 null이면, 다음을 수행합니다:
만약 documentResource가 문자열이면, navigationParams를 srcdoc 리소스로부터 탐색 매개변수를 생성한 결과로 설정합니다.
그렇지 않으면, 다음 조건이 모두 참일 경우:
documentResource가 null이거나 allowPOST가 true이고 documentResource의 요청 본문이 실패하지 않은 경우
그러면 navigationParams를 가져오기를 통해 탐색 매개변수 생성한 결과로 설정합니다.
그렇지 않으면, entry의 URL의 스킴이 fetch 스킴이 아닌 경우, navigationParams를 다음을 포함하는 새 비-페치 스킴 탐색 매개변수로 설정합니다:
세션 기록 항목 session
history entry entry, 탐색
가능한 navigable, 대상 스냅샷 매개변수
targetSnapshotParams, navigation ID-or-null navigationId 및
NavigationTimingType
navTimingType를 기반으로 srcdoc 리소스에서 탐색 매개변수를
생성하기 위해:
response를 다음과 함께 새로운 응답으로 설정합니다:
about:srcdoc
Content-Type
`,
`text/html
`) »
responseOrigin을 기원 결정의 결과로 설정하고, response의 URL, targetSnapshotParams의 샌드박싱 플래그 및 entry의 문서 상태의 기원을 고려합니다.
coop를 새로운 오프너 정책으로 설정합니다.
coopEnforcementResult를 다음과 함께 새로운 교차 출처 오프너 정책 집행 결과로 설정합니다:
policyContainer를 탐색 매개변수 정책 컨테이너 결정의 결과로 설정합니다. 이는 response의 URL, entry의 문서 상태의 기록 정책 컨테이너, null, navigable의 컨테이너 문서의 정책 컨테이너 및 null을 고려합니다.
다음과 함께 새로운 탐색 매개변수를 반환합니다:
이 알고리즘은 entry를 변형합니다.
request를 다음과 함께 새로운 요청으로 설정합니다:
documentResource가 POST 리소스인 경우 다음을 수행합니다:
entry의 문서 상태의 재로드 대기 중이 true인 경우, request의 reload-navigation flag를 설정합니다.
그렇지 않고 entry의 문서 상태의 ever populated가 true인 경우, request의 history-navigation flag를 설정합니다.
sourceSnapshotParams의 일시적인 활성화가 있음이 true인 경우, request의 사용자 활성화를 true로 설정합니다.
navigable의 컨테이너가 null이 아닌 경우:
response를 null로 설정합니다.
responseOrigin을 null로 설정합니다.
fetchController를 null로 설정합니다.
coopEnforcementResult를 크로스 오리진 오프너 정책 집행 결과로 설정하고, 다음을 함께 설정합니다:
finalSandboxFlags를 빈 샌드박싱 플래그 세트로 설정합니다.
responsePolicyContainer를 null로 설정합니다.
responseCOOP를 새로운 오프너 정책으로 설정합니다.
locationURL을 null로 설정합니다.
currentURL을 request의 현재 URL로 설정합니다.
commitEarlyHints를 null로 설정합니다.
무한 반복:
request의 예약된 클라이언트가 null이 아니고 currentURL의 기원이 request의 예약된 클라이언트의 생성 URL의 기원과 동일하지 않은 경우:
request의 예약된 클라이언트가 null인 경우:
topLevelCreationURL을 currentURL로 설정합니다.
topLevelOrigin을 null로 설정합니다.
navigable이 최상위 탐색 가능이 아닌 경우:
topLevelCreationURL을 parentEnvironment의 최상위 생성 URL로 설정합니다.
topLevelOrigin을 parentEnvironment의 최상위 기원으로 설정합니다.
request의 예약된 클라이언트를 새로운 환경으로 설정합니다. 이 환경의 id는 고유 불투명 문자열이며, 대상 탐색 컨텍스트는 navigable의 활성 탐색 컨텍스트이며, 생성 URL은 currentURL, 최상위 생성 URL은 topLevelCreationURL, 최상위 기원은 topLevelOrigin입니다.
생성된 환경의 활성 서비스 워커는 페치 알고리즘에서 요청 URL이 서비스 워커 등록과 일치할 때 설정됩니다. [SW]
이
유형의 탐색
요청이 콘텐츠 보안 정책에 의해 차단되어야 하는지의 결과가 "Blocked
"인 경우, response를 네트워크
오류로 설정하고 반복을 중단합니다. [CSP]
response를 null로 설정합니다.
fetchController가 null인 경우, fetchController를 페치의 결과로 설정합니다. 이때 processEarlyHintsResponse를 아래에 정의된 대로 설정하고, processResponse를 아래에 정의된 대로 설정하며, useParallelQueue를 true로 설정합니다.
processEarlyHintsResponse는 earlyResponse라는 응답을 받아 다음 알고리즘을 실행합니다:
commitEarlyHints가 null인 경우, commitEarlyHints를 earlyResponse와 request의 예약된 클라이언트를 주어진 값으로 초기 힌트 헤더를 처리한 결과로 설정합니다.
processResponse는 fetchedResponse라는 응답을 받아 다음 알고리즘을 실행합니다:
response를 fetchedResponse로 설정합니다.
그렇지 않으면, 다음 수동 리디렉션을 처리합니다.
이 작업은 위의 첫 번째 반복 동안 processResponse를 호출하여 response를 설정하는 결과를 초래합니다.
탐색은 웹 플랫폼에서 mailto:
URL과 같은 리디렉션을 처리하는 유일한 장소이므로 수동으로 리디렉션을 처리합니다.
response가 null이 될 때까지 또는 navigable의 진행 중인 탐색이 더 이상 navigationId와 동일하지 않게 될 때까지 기다립니다.
후자의 조건이 발생하면 fetchController를 중단하고 반환합니다.
그렇지 않으면 계속 진행합니다.
request의 본문이 null인 경우, entry의 문서 상태의 리소스를 null로 설정합니다.
페치는 특정 리디렉션에 대해 본문을 해제합니다.
responsePolicyContainer를 response와 request의 예약된 클라이언트를 주어진 값으로 페치 응답에서 정책 컨테이너 생성의 결과로 설정합니다.
finalSandboxFlags를 targetSnapshotParams의 샌드박싱 플래그와 responsePolicyContainer의 CSP 목록의 CSP에서 파생된 샌드박싱 플래그의 합집합으로 설정합니다.
responseOrigin을 response의 URL, finalSandboxFlags, entry의 문서 상태의 이니셔터 기원을 주어진 값으로 기원을 결정하는 결과로 설정합니다.
response가 리디렉션인 경우, response의 URL은 리디렉션이 발생한 URL이며, response의 위치 URL 자체는 아닙니다.
navigable이 최상위 탐색 가능인 경우, 다음을 수행합니다:
responseCOOP를 response와 request의 예약된 클라이언트를 주어진 값으로 크로스 오리진 오프너 정책 얻기의 결과로 설정합니다.
coopEnforcementResult를 navigable의 활성 탐색 컨텍스트, response의 URL, responseOrigin, responseCOOP, coopEnforcementResult 및 request의 리퍼러를 주어진 값으로 응답의 크로스 오리진 오프너 정책을 집행의 결과로 설정합니다.
finalSandboxFlags가 비어 있지 않고 responseCOOP의 값이 "unsafe-none
"이
아닌 경우, response를 적절한 네트워크 오류로 설정하고 반복을
중단합니다.
이는 크로스 오리진 오프너 정책을 사용하여 응답을 초기화하는 동시에 탐색 결과를 샌드박스 처리할 수 없기 때문에 네트워크 오류로 이어집니다.
response가 네트워크 오류가 아니고, navigable이 하위 탐색 가능이며, navigable의 컨테이너 문서의 기원, navigable의 컨테이너 문서의 관련 설정 객체, request의 목적지, response 및 true를 사용하여 수행된 교차 기원 리소스 정책 검사의 결과가 차단됨인 경우, response를 네트워크 오류로 설정하고 반복을 중단합니다.
여기서 우리는 navigable 자체가 아닌 부모 탐색 가능에 대해 교차 기원 리소스 정책 검사를 실행하고 있습니다. 이는 삽입된 콘텐츠의 동일 기원성을 탐색 소스가 아닌 부모 컨텍스트에 대해 신경 쓰기 때문입니다.
locationURL을 currentURL의 fragment를 고려하여 response의 location URL로 설정하십시오.
locationURL이 실패하거나 null인 경우, 반복을 중단합니다.
entry의 클래식 기록 API 상태를 StructuredSerializeForStorage(null)로 설정합니다.
oldDocState를 entry의 문서 상태로 설정합니다.
entry의 문서 상태를 다음을 포함하는 새로운 문서 상태로 설정합니다:
탐색의 경우, entry만 oldDocState를 참조했으며, 이는 탐색 알고리즘 초기에 생성되었습니다. 따라서 탐색의 경우, 이는 기능적으로 entry의 문서 상태를 업데이트하는 것에 불과합니다. 순회(traversal)의 경우, 인접한 세션 기록 항목도 oldDocState를 참조할 수 있으며, 이 경우 entry의 문서 상태를 업데이트한 후에도 계속 참조할 것입니다.
oldDocState의 기록 정책 컨테이너는 탐색 중 URL이 정책 컨테이너를 기록에 저장해야 하는지 여부를 요구한 후 순회 중에 인구된 후에만 이 시점에서 비 null입니다.
설정은 다음 Jake 다이어그램에 의해 주어집니다:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /a | /a#foo | /a#bar | /b |
또한 0, 1, 2단계의 항목이 공유하는 문서 상태에 null 문서가 있다고 가정합니다. 즉, bfcache가 적용되지 않습니다.
이제 2단계로 다시 이동하지만, 이번에는 /a
를 가져올 때 서버가 /c
를 가리키는
`Location
`
헤더를 응답하는 시나리오를 고려해 보십시오. 즉, locationURL이 /c
를 가리키고 있으며, 따라서 반복을 중단하지 않았습니다.
이 경우 2단계를 차지하는 문서 상태를 교체하지만, 0단계 및 1단계를 차지하는 항목의 문서 상태는 교체하지 않습니다. 결과적으로 다음과 같은 Jake 다이어그램이 생성됩니다:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /a | /a#foo | /c#bar | /b |
locationURL이 리디렉션 체인에서 원래 URL로 돌아가는 경우에도 이 교체를 수행합니다. 예를 들어, /c
자체에
/a
를 가리키는 `Location
` 헤더가 있는 경우와 같습니다. 이 경우 다음과 같이 끝납니다:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /a | /a#foo | /a#bar | /b |
locationURL의 스킴이 HTTP(S) 스킴이 아닌 경우 다음을 수행합니다:
currentURL을 locationURL로 설정합니다.
entry의 URL을 currentURL로 설정합니다.
locationURL이 URL이고, 해당 스킴이 페치 스킴이 아닌 경우, 새로운 비-페치 스킴 탐색 매개변수를 다음과 함께 반환합니다:
이 시점에서, request의 현재 URL은 비-페치 스킴 스킴을 가진 URL로 리디렉션되기 전에 리디렉션 체인의 마지막 URL입니다. 이 URL의 기원이 비-페치 스킴 URL에 대한 탐색의 이니셔터 기원으로 사용됩니다.
다음 중 하나라도 true인 경우:
null을 반환합니다.
비-페치 스킴 URL로의 리디렉션은 허용되지만, 비-HTTP(S) 페치 스킴 URL로의 리디렉션은 네트워크 오류로 처리됩니다.
resultPolicyContainer를 response의 URL, entry의 문서 상태의 기록 정책 컨테이너, sourceSnapshotParams의 소스 정책 컨테이너, null 및 responsePolicyContainer를 주어진 값으로 탐색 매개변수 정책 컨테이너 결정의 결과로 설정합니다.
navigable의 컨테이너가
iframe
이고,
response의 타이밍 허용 플래그가 설정됨이 true인 경우, 컨테이너의 보류 중인 리소스 타이밍 시작
시간을
null로 설정합니다.
리소스 타이밍에 보고할 수 있는 iframe
의
경우, 정상적인 보고가 발생하므로 대체 단계를 실행할 필요가 없습니다.
다음을 포함하는 새로운 탐색 매개변수를 반환합니다:
요소의 문서
의
노드 탐색 가능성이
최상위 트래버서블이거나,
해당 요소의 문서
의 모든
조상 탐색 가능성이 동일한
기원을 가진
활성 문서를 가지고 있는 경우, 요소는
탐색 컨텍스트 범위 기원을 가집니다. 요소가
탐색
컨텍스트 범위 기원을 가지면,
그 값은 요소의 노드 문서의
기원입니다.
이 정의는 깨져 있으며, 표현하려는 바를 조사할 필요가 있습니다: issue #4703를 참조하십시오.
다음과 같은 경우에 문서를 로드하려면,
탐색 매개변수
navigationParams,
소스 스냅샷 매개변수
sourceSnapshotParams,
그리고 기원
initiatorOrigin을 수행하십시오. 이들은
문서
또는 null을 반환합니다.
사용자 에이전트가 주어진 type의 리소스를 탐색 가능 콘텐츠로 렌더링하는 것이 아닌 다른 메커니즘을 사용하도록 구성되어 있다면, 이 단계를 건너뜁니다. 그렇지 않다면, type이 다음 유형 중 하나라면:
text/css
"
text/plain
"
text/vtt
"
multipart/x-mixed-replace
"
application/pdf
"
text/pdf
"
그렇지 않다면 계속 진행하십시오.
명시적으로 지원되는 XML MIME 유형은
사용자가 에이전트가 콘텐츠를 렌더링하기 위해 외부 응용 프로그램을 사용하도록 구성된 XML MIME 유형 또는
전용 처리 규칙을 가지고 있는 XML MIME 유형입니다. 예를 들어, Atom 피드 뷰어가 내장된 웹 브라우저는
application/atom+xml
MIME 유형을 명시적으로 지원한다고 말할 수 있습니다.
명시적으로 지원되는 JSON MIME 유형은 사용자가 에이전트가 콘텐츠를 렌더링하기 위해 외부 응용 프로그램을 사용하도록 구성된 JSON MIME 유형 또는 전용 처리 규칙을 가지고 있는 JSON MIME 유형입니다.
이 두 경우 모두 외부 응용 프로그램 또는 사용자 에이전트는 navigationParams의 탐색 가능성에 직접 인라인으로 콘텐츠를 표시하거나, 또는 외부 소프트웨어로 전달합니다. 두 가지 모두 아래 단계에서 수행됩니다.
그렇지 않으면, 문서의 type이 외부 응용 프로그램에 전달되거나, 알려지지 않은 유형이 다운로드로 처리되기 때문에 navigationParams의 탐색 가능성에 영향을 미치지 않습니다. navigationParams의 응답, navigationParams의 탐색 가능성, navigationParams의 최종 샌드박스 플래그 세트, sourceSnapshotParams의 일시적 활성화, 그리고 initiatorOrigin을 전달하여 외부 소프트웨어로 전달하십시오.
null을 반환하십시오.
탐색 및 트래버설의 경우, 세션 기록에서 가고자 하는 위치가 결정되면, 이 개념을
탐색 가능한 트래버서블과
관련된 문서
에
적용하는 작업이 대부분의 작업을 차지합니다. 탐색의 경우, 이 작업은 일반적으로
프로세스의 마지막 부분에서 이루어지며, 트래버설의 경우에는 시작 부분에서 이루어집니다.
탐색 가능한 트래버서블이 올바른 세션 기록 단계에 도달하도록 보장하는 것은 특히 복잡합니다. 이는 트래버서블의 여러 탐색 가능 하위 요소들 간의 조정을 포함할 수 있으며, 이들을 병렬로 채우고 결과에 대한 동일한 뷰를 가지도록 다시 동기화하는 작업이 필요하기 때문입니다. 여기에 동기식 동일 문서 탐색이 교차 문서 탐색과 혼합되는 경우, 웹 페이지가 특정 상대적 타이밍 기대치를 가지게 되는 것까지 더해져 더 복잡해집니다.
탐색 가능 상태 변경은 세션 기록 단계 적용 알고리즘 동안 정보를 저장하는 데 사용되며, 알고리즘의 일부가 완료된 후에만 다른 부분이 계속 진행될 수 있도록 합니다. 이는 다음과 같은 항목을 포함하는 구조체입니다:
문서
모든 탐색 가능한 트래버서블 업데이트는 같은 세션 기록 단계 적용 알고리즘으로 끝나지만, 각 진입점마다 약간의 커스터마이징이 포함됩니다:
탐색 가능 생성/파괴 업데이트를 탐색 가능한 트래버서블 traversable에 대해 수행하려면:
step을 traversable의 현재 세션 기록 단계로 설정합니다.
세션 기록 단계 적용 step을 traversable에 대해 false, null, null, null, null을 주어 적용한 결과를 반환합니다.
푸시/대체 세션 기록 단계 적용을 비음수 정수 step과 기록 처리 동작 historyHandling을 사용하여 탐색 가능한 트래버서블 traversable에 대해 수행하려면:
세션 기록 단계 적용 step을 traversable에 대해 false, null, null, null, 그리고 historyHandling을 주어 적용한 결과를 반환합니다.
푸시/대체 세션 기록 단계 적용은 절대 소스 스냅샷 매개변수나 시작자 탐색 가능을 세션 기록 단계 적용에 전달하지 않습니다. 이는 해당 검사가 이전에 탐색 알고리즘에서 수행되었기 때문입니다.
세션 기록 단계 재로드 적용을 탐색 가능한 트래버서블 traversable에 대해 수행하려면:
step을 traversable의 현재 세션 기록 단계로 설정합니다.
세션 기록 단계 적용
step을 traversable에 대해 true, null, null, null,
그리고 "reload
"을
주어 적용한 결과를 반환합니다.
세션 기록
단계 재로드 적용은
절대 소스 스냅샷
매개변수나 시작자 탐색 가능을
세션 기록 단계 적용에 전달하지 않습니다.
이는 재로드가 항상 탐색 가능
자체에 의해 수행된 것으로 간주되기 때문입니다. 예를 들어,
parent.location.reload()
와 같은 경우에도 마찬가지입니다.
세션 기록 단계 트래버스 적용을 비음수 정수 step을 사용하여 탐색 가능한 트래버서블 traversable에 대해 수행하려면, 소스 스냅샷 매개변수 sourceSnapshotParams, 탐색 가능 initiatorToCheck, 그리고 사용자 탐색 참여도 userInvolvement와 함께 수행하십시오:
세션 기록 단계 적용
step을 traversable에 대해 true,
sourceSnapshotParams, initiatorToCheck,
userInvolvement, 그리고 "traverse
"을
주어 적용한 결과를 반환합니다.
이제 알고리즘 자체에 대해 설명합니다.
비음수 정수 step을 사용하여
탐색 가능한 트래버서블
traversable에 대해 세션 기록 단계 적용을 수행하려면,
부울 checkForCancelation,
소스 스냅샷
매개변수 또는 null sourceSnapshotParams,
탐색 가능 또는 null
initiatorToCheck,
사용자
탐색 참여도 또는 null userInvolvementForNavigateEvents,
그리고 탐색 유형
또는 null navigationType을 사용하여 다음 단계를 수행하십시오.
이들은 "initiator-disallowed
",
"canceled-by-beforeunload
",
"canceled-by-navigate
",
또는 "applied
"을 반환합니다.
확인: 이것은 traversable의 세션 기록 트래버설 대기열 내에서 실행되고 있습니다.
targetStep을 사용된 단계 가져오기를 통해 traversable과 step을 사용하여 얻은 결과로 설정합니다.
만약 initiatorToCheck이 null이 아닌 경우:
확인: sourceSnapshotParams이 null이 아닙니다.
다음의 각각에 대해 navigable을
현재
세션 기록 항목이 변경되거나 다시 로드될 모든 탐색 가능 항목 가져오기에서
가져옵니다: 만약 initiatorToCheck이
sourceSnapshotParams을 주어 navigable을 탐색할 수 있도록
샌드박싱에 의해 허용되지 않는다면 "initiator-disallowed
"을 반환하십시오.
navigablesCrossingDocuments을 교차 문서 트래버설을 경험할 가능성이 있는 모든 탐색 가능 항목 가져오기를 통해 traversable과 targetStep을 사용하여 얻은 결과로 설정합니다.
만약 checkForCancelation이 true이고,
언로드가
취소되었는지 확인의 결과가 navigablesCrossingDocuments,
traversable, targetStep, 그리고
userInvolvementForNavigateEvents에 대해 "계속
"이 아닌 경우,
해당 결과를 반환하십시오.
changingNavigables을 현재 세션 기록 항목이 변경되거나 다시 로드될 모든 탐색 가능 항목 가져오기를 통해 traversable과 targetStep을 사용하여 얻은 결과로 설정합니다.
nonchangingNavigablesThatStillNeedUpdates을 기록 객체 길이/인덱스 업데이트만 필요한 모든 탐색 가능 항목 가져오기를 통해 traversable과 targetStep을 사용하여 얻은 결과로 설정합니다.
다음의 각각에 대해 navigable을 changingNavigables에서 가져옵니다:
targetEntry을 대상 기록 항목 가져오기를 통해 navigable과 targetStep을 사용하여 얻은 결과로 설정합니다.
navigable의 현재 세션 기록 항목을 targetEntry로 설정합니다.
진행 중인
탐색 설정을 navigable에 대해 "traversal
"로 설정합니다.
totalChangeJobs을 changingNavigables의 크기로 설정합니다.
completedChangeJobs을 0으로 설정합니다.
changingNavigableContinuations을 빈 큐로 설정하고, 탐색 가능 상태 변경을 포함합니다.
이 큐는 changingNavigables에 대한 작업을 두 부분으로 나누는 데 사용됩니다. 특히, changingNavigableContinuations는 두 번째 부분을 위한 데이터를 보관합니다.
다음의 각각에 대해 navigable을 changingNavigables에서 가져와, 전역 작업을 큐에 추가하고, navigable의 활성 창에 대해 탐색 및 트래버설 작업 소스를 사용하여 실행하도록 합니다:
이 단계는 문서가 언로드되기 전에 동기식 탐색이 처리될 수 있도록 두 부분으로 나뉩니다. 상태는 changingNavigableContinuations에 저장되어 두 번째 부분에서 사용됩니다.
displayedEntry를 navigable의 활성 세션 기록 항목으로 설정합니다.
targetEntry를 navigable의 현재 세션 기록 항목으로 설정합니다.
changingNavigableContinuation을 다음 항목을 포함하는 탐색 가능 상태 변경으로 설정합니다:
만약 displayedEntry가 targetEntry와 동일하고, targetEntry의 문서 상태의 재로드 대기 중이 false라면:
changingNavigableContinuation의 업데이트 전용을 true로 설정합니다.
changingNavigableContinuation을 changingNavigableContinuations에 Enqueue하십시오.
이 단계를 중단합니다.
이 경우는 이미 동기식 탐색이 활성 세션 기록 항목을 업데이트한 경우 발생합니다.
navigationType에 따라 다음과 같이 전환합니다:
만약 targetEntry의 문서가 null이거나, targetEntry의 문서 상태의 재로드 대기 중이 true인 경우:
navTimingType을
targetEntry의
문서가 null인 경우
"back_forward
"로,
그렇지 않다면 "reload
"로
설정합니다.
targetSnapshotParams을 대상 스냅샷 매개변수 스냅샷을 navigable을 주어 수행한 결과로 설정합니다.
potentiallyTargetSpecificSourceSnapshotParams을 sourceSnapshotParams로 설정합니다.
만약 potentiallyTargetSpecificSourceSnapshotParams이 null이라면, 이를 소스 스냅샷 매개변수 스냅샷을 navigable의 활성 문서에 대해 수행한 결과로 설정하십시오.
이 경우 트래버스/재로드의 명확한 소스가 없습니다. 우리는 이 상황을 navigable이 스스로 탐색한 것으로 취급하지만, targetEntry의 문서 상태에 있는 targetEntry의 원래 시작자의 일부 속성(예: 시작자 기원과 참조자)이 보존되므로, 탐색에 적절하게 영향을 미칩니다.
병렬로, 세션 기록 항목의 문서 채우기 시도를 targetEntry에 대해 navigable, potentiallyTargetSpecificSourceSnapshotParams, targetSnapshotParams을 주어 수행합니다. allowPOST를 allowPOST로 설정하고, 완료 단계를 navigable의 활성 창에 대해 전역 작업을 큐에 추가하여 afterDocumentPopulated을 실행하도록 설정합니다.
그렇지 않다면, 즉시 afterDocumentPopulated을 실행합니다.
두 경우 모두, afterDocumentPopulated을 다음 단계로 설정합니다:
만약 targetEntry의 문서가 null이라면, changingNavigableContinuation의 업데이트 전용을 true로 설정합니다.
이것은 문서를 채우려고 시도했지만, 예를 들어 서버가 204를 반환했기 때문에 그렇게 할 수 없었다는 것을 의미합니다.
이러한 종류의 탐색 실패 또는 트래버설은 탐색 API에 신호되지 않습니다
(예:
탐색
API 메서드 추적기의 어떤 약속도,
navigateerror
이벤트도 포함되지 않습니다). 이렇게 하면,
크로스-오리진 케이스에서 타이밍 응답에 대한 정보를 유출하게 됩니다.
크로스-오리진과 동일 오리진 케이스에서 다른 결과를 제공하는 것은
혼동을 일으킬 수 있다고 판단되었습니다.
그러나 구현체는 이 기회를 사용하여
navigation.transition.finished
약속에 대한 어떤 약속 처리기도 지울 수 있습니다. 이들은 이 시점에서
절대 실행되지 않는 것이 보장됩니다. 또한, 탐색 API의 어떤 부분이
이 탐색을 시작했다면, 콘솔에 경고를
보고할 수 있습니다.
웹 개발자가 왜 약속이 완료되지 않고 이벤트가 절대 실행되지 않는지를
명확히 이해할 수 있도록 하기 위함입니다.
만약 targetEntry의 문서의 기원이 oldOrigin과 동일하지 않다면, targetEntry의 클래식 기록 API 상태를 null로 설정한 구조적으로 저장하기 위한 직렬화를 수행합니다.
이것은 리디렉션이 발생하지 않고, targetEntry의 이전 로드와 비교해 기원이 변경된 경우 기록 상태를 지웁니다. 이는 CSP 샌드박스 헤더의 변경으로 인해 발생할 수 있습니다.
다음의 모든 조건이 true인 경우:
그러면 targetEntry의 문서 상태의 탐색 가능 대상 이름을 빈 문자열로 설정합니다.
changingNavigableContinuation을 changingNavigableContinuations에 Enqueue하십시오.
이 작업의 나머지 부분은 이 알고리즘에서 나중에 실행됩니다.
navigablesThatMustWaitBeforeHandlingSyncNavigation을 빈 집합으로 설정합니다.
completedChangeJobs이 totalChangeJobs와 동일하지 않은 동안:
만약 traversable의 중첩된 세션 기록 단계 적용 실행 중이 false라면:
changingNavigableContinuation을 큐에서 제거하여 changingNavigableContinuations의 결과로 설정합니다.
만약 changingNavigableContinuation이 없다면, 계속하십시오.
displayedDocument을 changingNavigableContinuation의 표시된 문서로 설정합니다.
targetEntry을 changingNavigableContinuation의 대상 항목으로 설정합니다.
navigable을 changingNavigableContinuation의 탐색 가능으로 설정합니다.
기록 객체 길이와 인덱스 가져오기를 통해 traversable과 targetStep을 사용하여 얻은 결과로 scriptHistoryLength, scriptHistoryIndex를 설정합니다.
이 값들은 마지막으로 계산된 이후로 변경되었을 수 있습니다.
추가하십시오 navigable을 navigablesThatMustWaitBeforeHandlingSyncNavigation에.
트래버설 중 이 시점에 도달한 탐색 가능 항목은, 추가로 큐에 추가된 동기식 탐색 단계가 이 트래버설 후에 발생하려고 의도될 가능성이 더 크므로 더 이상 큐를 건너뛰지 않습니다. 여기에서 더 많은 세부 사항을 확인할 수 있습니다.
entriesForNavigationAPI을 탐색 API에 대한 세션 기록 항목 가져오기를 navigable과 targetStep을 주어 수행한 결과로 설정합니다.
만약 changingNavigableContinuation의 업데이트 전용이 true이거나, targetEntry의 문서가 displayedDocument인 경우:
이것은 동일 문서 탐색입니다: 우리는 언로드 없이 계속 진행합니다.
진행 중인 탐색 설정을 navigable에 대해 null로 설정합니다.
이것은 navigable의 새로운 탐색이 시작될 수 있도록 하며, 트래버설 동안에는 차단되었습니다.
전역 작업을 큐에 추가하고, navigable의 활성 창에 대해 탐색 및 트래버설 작업 소스를 사용하여 afterPotentialUnloads를 수행하도록 합니다.
그렇지 않다면:
두 경우 모두, afterPotentialUnloads을 다음 단계로 설정합니다:
만약 changingNavigableContinuation의 업데이트 전용이 false라면, 기록 항목 활성화를 targetEntry에 대해 수행합니다.
updateDocument을 기록 항목 적용을 위한 문서 업데이트를 기록 단계 적용을 위한 문서 업데이트를 수행하는 알고리즘 단계로 설정합니다. 이 단계는 targetEntry의 문서, targetEntry, changingNavigableContinuation의 업데이트 전용, scriptHistoryLength, scriptHistoryIndex, navigationType, entriesForNavigationAPI, 그리고 displayedEntry를 사용합니다.
만약 targetEntry의 문서가 displayedDocument과 동일하다면, updateDocument을 수행합니다.
그렇지 않다면, 전역 작업을 큐에 추가하고, targetEntry의 문서의 관련 전역 객체를 사용하여 updateDocument을 수행하도록 설정합니다.
completedChangeJobs을 증가시킵니다.
totalNonchangingJobs을 nonchangingNavigablesThatStillNeedUpdates의 크기로 설정합니다.
이 단계 이후로는 고의적으로 모든 이전 작업이 완료될 때까지 기다립니다. 이러한 작업에는 기록 길이와 인덱스를 업데이트하는 작업을 게시하는 동기식 탐색 처리가 포함됩니다.
completedNonchangingJobs을 0으로 설정합니다.
기록 객체 길이와 인덱스 가져오기를 traversable과 targetStep을 주어 수행한 결과로 scriptHistoryLength, scriptHistoryIndex를 설정합니다.
다음의 각각에 대해 navigable을 nonchangingNavigablesThatStillNeedUpdates에서 가져와, 전역 작업을 큐에 추가하고, navigable의 활성 창에 대해 탐색 및 트래버설 작업 소스를 사용하여 다음 단계를 수행하도록 합니다:
completedNonchangingJobs이 totalNonchangingJobs와 동일할 때까지 기다립니다.
traversable의 현재 세션 기록 단계를 targetStep으로 설정합니다.
"applied
"을 반환합니다.
문서
displayedDocument,
사용자 네비게이션 참여
userNavigationInvolvement,
세션 기록 항목
targetEntry,
네비게이션 유형
navigationType,
그리고 인자를 받지 않는 알고리즘 afterPotentialUnloads이 주어졌을 때
교차 문서 네비게이션을 위한 문서 비활성화를 수행합니다.
navigable을 displayedDocument의 노드 네비게이블로 설정합니다.
potentiallyTriggerViewTransition을 false로 설정합니다.
만약 userNavigationInvolvement이 "브라우저 UI
"라면
isBrowserUINavigation을 true로, 그렇지 않다면 false로 설정합니다.
potentiallyTriggerViewTransition을 displayedDocument, targetEntry의 문서, navigationType 그리고 isBrowserUINavigation을 인자로 하여 교차 문서 보기 전환을 트리거할 수 있는지 여부를 호출한 결과로 설정합니다.
만약 potentiallyTriggerViewTransition이 false라면:
firePageSwapBeforeUnload을 다음 단계로 설정합니다:
pageswap
이벤트를 트리거하고,
displayedDocument, targetEntry, navigationType
및 null을 전달합니다.
이로 인해 navigable의 새 네비게이션이 시작될 수 있으며, 트래버설 중에는 차단됩니다.
문서와 후손을 언로드합니다, displayedDocument, targetEntry의 문서 그리고 afterPotentialUnloads 및 firePageSwapBeforeUnload을 전달합니다.
그렇지 않다면, 글로벌 작업을 큐에 추가하고, navigable의 활성 창을 사용하여 다음 단계를 실행합니다:
proceedWithNavigationAfterViewTransitionCapture를 다음 단계로 설정합니다:
세션 기록 트래버설 단계를 추가하고, navigable의 트래버서블 네비게이블에 다음을 수행합니다:
이로 인해 navigable의 새 네비게이션이 시작될 수 있으며, 트래버설 중에는 차단됩니다.
문서와 후손을 언로드합니다, displayedDocument, targetEntry의 문서 및 afterPotentialUnloads을 전달합니다.
viewTransition을 교차 문서 보기 전환 설정의 결과로 설정하고, displayedDocument, targetEntry의 문서, navigationType 및 proceedWithNavigationAfterViewTransitionCapture를 전달합니다.
pageswap
이벤트를 트리거하고,
displayedDocument, targetEntry, navigationType 및
viewTransition을 전달합니다.
만약 viewTransition이 null이라면 proceedWithNavigationAfterViewTransitionCapture를 실행합니다.
보기 전환이 시작된 경우, 보기 전환 알고리즘이 proceedWithNavigationAfterViewTransitionCapture를 호출할 책임이 있습니다.
문서
displayedDocument,
세션 기록 항목
targetEntry,
네비게이션 유형
navigationType, 그리고
ViewTransition
-또는-null
viewTransition이 주어졌을 때
pageswap
이벤트를 트리거합니다.
어설션: 이 작업은 displayedDocument의 관련 에이전트의 이벤트 루프에 큐잉된 작업의 일부로 실행 중입니다.
activation을 null로 설정합니다.
다음 조건이 모두 참일 경우:
targetEntry의 문서의 교차 출처 리디렉션을 통해 생성되었는지가 false이거나, targetEntry의 문서의 최신 항목이 null이 아닌 경우,
다음과 같이 설정합니다:
destinationEntry를 navigationType에 따라 다음과 같이 결정합니다:
activation을 displayedDocument의
new
NavigationActivation
으로
설정하고,
다음을 포함합니다:
이것은 네비게이션 중 교차 출처 리디렉션이 발생할 경우,
새 문서가 bfcache에서 복원되지 않는 한,
이전 문서의 activation
이
null이 될 것임을 의미합니다.
이벤트를 트리거하고,
displayedDocument의
관련 전역 객체에서
pageswap
를 사용하며,
PageSwapEvent
의
activation
을
activation으로 설정하고,
viewTransition
을
viewTransition으로 설정합니다.
세션 기록 항목 entry를 네비게이블 navigable에 대해 활성화하려면 다음을 수행합니다:
저장된 상태를 저장하고, 네비게이블의 활성 세션 기록 항목에 저장합니다.
newDocument를 entry의 문서로 설정합니다.
어설션:
newDocument의 초기 상태가
about:blank
인지 확인하고,
false여야 합니다. 즉, 초기 about:blank
문서로 절대 다시 이동하지 않습니다. 이는 해당 문서가
다른 페이지로 이동할 때마다 교체되기 때문입니다.
navigable의 활성 세션 기록 항목을 entry로 설정합니다.
newDocument를 활성화합니다.
탐색 가능한 traversable 및 비음수 정수 step을 기반으로 사용된 단계를 가져오려면 다음 단계를 수행합니다. 이 단계는 비음수 정수를 반환합니다.
steps를 traversable 내에서 모든 사용된 기록 단계를 가져오기의 결과로 설정합니다.
steps에서 step보다 작거나 같은 가장 큰 항목을 반환합니다.
이것은 세션 기록 항목이 step과 일치하지 않는 경우에 대비한 것입니다. 이는 탐색 가능 항목이 제거되었기 때문일 수 있습니다.
탐색 가능한 traversable 및 비음수 정수 step을 기반으로 기록 객체 길이와 인덱스를 가져오려면 다음 단계를 수행합니다. 이 단계는 두 개의 비음수 정수로 구성된 튜플을 반환합니다.
steps를 traversable 내에서 모든 사용된 기록 단계를 가져오기의 결과로 설정합니다.
scriptHistoryLength를 steps의 크기로 설정합니다.
어설션: steps에 step이 포함되어 있는지 확인합니다.
이것은 step이 사용된 단계를 가져오기에 의해 조정되었음을 전제로 합니다.
scriptHistoryIndex를 steps 내에서 step의 인덱스로 설정합니다.
(scriptHistoryLength, scriptHistoryIndex)를 반환합니다.
탐색 가능한 traversable 및 비음수 정수 targetStep을 기반으로 현재 세션 기록 항목이 변경되거나 다시 로드될 탐색 가능한 모든 항목을 가져오려면 다음 단계를 수행합니다. 이 단계는 목록 형태로 탐색 가능한 항목들을 반환합니다.
results를 빈 목록으로 설정합니다.
navigablesToCheck를 « traversable »로 설정합니다.
이 목록은 아래의 반복문에서 확장됩니다.
각 navigable에 대해 navigablesToCheck의 항목을 확인합니다:
targetEntry를 navigable 및 targetStep을 기반으로 대상 기록 항목 가져오기의 결과로 설정합니다.
targetEntry가 navigable의 현재 세션 기록 항목이 아니거나 targetEntry의 문서 상태의 다시 로드 대기 중이 true이면, results에 navigable을 추가합니다.
targetEntry의 문서가 navigable의 문서와 동일하고, targetEntry의 문서 상태의 다시 로드 대기 중이 false이면, navigablesToCheck를 navigable의 하위 탐색 가능 항목들로 확장합니다.
하위 탐색 가능 항목들을 navigablesToCheck에 추가하면, 이 반복문에서 해당 탐색 가능 항목들도 확인됩니다. 하위 탐색 가능 항목들은 이 탐색에서 navigable의 활성 문서가 변경되지 않는 경우에만 확인됩니다.
results를 반환합니다.
탐색 가능한 traversable 및 비음수 정수 targetStep을 기반으로 기록 객체의 길이/인덱스 업데이트만 필요한 모든 탐색 가능한 항목을 가져오려면 다음 단계를 수행합니다. 이 단계는 목록 형태로 탐색 가능한 항목들을 반환합니다.
다른 탐색 가능한 항목들은 탐색에 영향을 받지 않을 수 있습니다. 예를 들어, 응답이 204일 경우, 현재 활성 문서는 유지됩니다. 또한, 204 이후 '뒤로 가기'를 하면 현재 세션 기록 항목이 변경되지만, 활성 세션 기록 항목은 이미 올바르게 설정되어 있을 것입니다.
results를 빈 목록으로 설정합니다.
navigablesToCheck를 « traversable »로 설정합니다.
이 목록은 아래의 반복문에서 확장됩니다.
각 navigable에 대해 navigablesToCheck의 항목을 확인합니다:
targetEntry를 navigable 및 targetStep을 기반으로 대상 기록 항목 가져오기의 결과로 설정합니다.
targetEntry가 navigable의 현재 세션 기록 항목이며, targetEntry의 문서 상태의 다시 로드 대기 중이 false이면, 다음을 수행합니다:
목록에 추가 navigable를 results에 추가합니다.
확장 navigablesToCheck를 navigable의 하위 탐색 가능한 항목들로 확장합니다.
하위 탐색 가능한 항목들을 navigablesToCheck에 추가하면, 이 반복문에서 해당 탐색 가능한 항목들도 확인됩니다. 하위 탐색 가능한 항목들은 이 탐색에서 navigable의 활성 문서가 변경되지 않는 경우에만 확인됩니다.
results를 반환합니다.
탐색 가능한 navigable 및 비음수 정수 step을 기반으로 대상 기록 항목 가져오기를 수행하려면 다음 단계를 수행합니다. 이 단계는 세션 기록 항목을 반환합니다.
entries를 navigable에 대한 세션 기록 항목 가져오기의 결과로 설정합니다.
entries에서 step보다 작거나 같은 가장 큰 항목을 반환합니다.
대상 기록 항목 가져오기에서 입력된 step보다 작거나 같은 최대 단계를 반환하는 이유를 이해하려면, 다음의 Jake 다이어그램을 고려하십시오:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /t | /t#foo | ||
frames[0]
| /i-0-a | /i-0-b |
입력된 단계 1의 경우, top
탐색 가능 항목의 대상 기록 항목은
/t
항목이며, 해당 단계는 0입니다.
반면 frames[0]
탐색 가능 항목의 대상 기록 항목은
/i-0-b
항목이며, 해당 단계는 1입니다:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /t | /t#foo | ||
frames[0]
| /i-0-a | /i-0-b |
마찬가지로, 입력된 단계 3의 경우 우리는
top
항목의 단계가 3이고,
frames[0]
항목의 단계가 1인 항목을 얻습니다:
0 | 1 | 2 | 3 | |
---|---|---|---|---|
top
| /t | /t#foo | ||
frames[0]
| /i-0-a | /i-0-b |
탐색 가능한 traversable 및 비음수 정수 targetStep을 기반으로 크로스 도큐멘트 탐색을 경험할 가능성이 있는 모든 탐색 가능한 항목을 가져오려면 다음 단계를 수행합니다. 이 단계는 목록 형태로 탐색 가능한 항목들을 반환합니다.
traversable의 세션 기록 탐색 대기열의 관점에서, 이 문서들은 targetStep에 의해 설명된 탐색 동안 크로스 도큐멘트가 될 후보입니다. 대상 문서의 상태 코드가 HTTP 204 No Content인 경우 크로스 도큐멘트 탐색을 경험하지 않을 것입니다.
주어진 탐색 가능한 항목이 크로스 도큐멘트 탐색을 경험할 가능성이 있다면, 이 알고리즘은 해당 탐색 가능한 항목을 반환하지만, 그 하위 탐색 가능한 항목들은 반환하지 않습니다. 이러한 항목들은 탐색되지 않고 언로드됩니다.
results를 빈 목록으로 설정합니다.
navigablesToCheck를 « traversable »로 설정합니다.
이 목록은 아래의 반복문에서 확장됩니다.
각 navigable에 대해 navigablesToCheck의 항목을 확인합니다:
targetEntry를 navigable 및 targetStep을 기반으로 대상 기록 항목 가져오기의 결과로 설정합니다.
targetEntry의 문서가 navigable의 문서가 아니거나, targetEntry의 문서 상태의 다시 로드 대기 중이 true인 경우, 목록에 추가 navigable를 results에 추가합니다.
비록 navigable의 활성 기록 항목은 동기적으로 변경될 수 있지만, 새로운 항목은 항상 동일한 문서를 갖게 되므로, navigable의 문서에 접근하는 것은 신뢰할 수 있습니다.
그렇지 않으면, 확장 navigablesToCheck를 navigable의 하위 탐색 가능한 항목들로 확장합니다.
하위 탐색 가능한 항목들을 navigablesToCheck에 추가하면, 이 반복문에서 해당 탐색 가능한 항목들도 확인됩니다. 하위 탐색 가능한 항목들은 이 탐색에서 navigable의 활성 문서가 변경되지 않는 경우에만 확인됩니다.
results를 반환합니다.
기록 단계 적용을 위해 문서를 업데이트하려면,
문서
document,
세션 기록 항목
entry, 부울 값 doNotReactivate, 정수 scriptHistoryLength 및
scriptHistoryIndex, NavigationType
또는 null인
navigationType, 선택적으로 목록
세션 기록 항목
entriesForNavigationAPI 및 선택적 세션 기록 항목
previousEntryForActivation을 사용하십시오.
document의 최신 항목이 null이면 documentIsNew를 true로 설정하고, 그렇지 않으면 false로 설정합니다.
document의 최신 항목이 entry와 다르면 documentsEntryChanged를 true로 설정하고, 그렇지 않으면 false로 설정합니다.
documentsEntryChanged가 true인 경우, 다음을 수행합니다:
document의 최신 항목을 entry로 설정합니다.
document 및 entry를 사용하여 기록 객체 상태 복원을 수행합니다.
documentIsNew가 false이면, 다음을 수행합니다:
단언: navigationType이 null이 아님을 확인합니다.
navigation, entry 및 navigationType을 사용하여 동일 문서 탐색을 위한 네비게이션 API 항목 업데이트를 수행합니다.
document의
관련
전역 객체에서
PopStateEvent
를
사용하여
이벤트를
발생시키며,
state
속성은
document의
기록 객체의
상태로
초기화되고,
hasUAVisualTransition
은
사용자 에이전트에 의해 캐시된 렌더링 상태를 표시하기 위한 시각적 전환이 수행되었을 경우 true로 초기화됩니다.
entry를 사용하여 유지된 상태를 복원합니다.
oldURL의
단편이
entry의
URL의
단편과 같지 않으면,
document의
관련
전역 객체에서
HashChangeEvent
를
사용하여
이벤트를 발생시키고,
oldURL
속성은
oldURL의
직렬화로 초기화되고,
newURL
속성은
entry의
URL의 직렬화로 초기화됩니다.
그렇지 않으면:
단언: entriesForNavigationAPI가 제공되었는지 확인합니다.
entry를 사용하여 유지된 상태를 복원합니다.
navigation, entriesForNavigationAPI, 및 entry를 사용하여 새 문서에 대한 네비게이션 API 항목 초기화를 수행합니다.
다음이 모두 true인 경우:
previousEntryForActivation이 제공됨;
navigationType이 null이 아님;
navigationType이 "reload
"이거나
previousEntryForActivation의
문서가
document가 아님,
그렇다면:
navigation의
활성화가
null이면, navigation의
활성화를
navigation의
관련 영역에서 새로운
NavigationActivation
객체로 설정합니다.
previousEntryIndex를 navigation 내의 previousEntryForActivation의 네비게이션 API 항목 인덱스 가져오기의 결과로 설정합니다.
previousEntryIndex가 음수가 아니면, activation의 이전 항목을 navigation의 항목 목록[previousEntryIndex]로 설정합니다.
그렇지 않고 다음이 모두 true인 경우:
navigationType이 "replace
"임;
previousEntryForActivation의
문서의
초기
about:blank
이
false임,
그렇다면 activation의
이전 항목을
navigation의 관련 영역에서
previousEntryForActivation의
세션 기록 항목이 설정된 새로운
NavigationHistoryEntry
로
설정합니다.
activation의 탐색 유형을 navigationType으로 설정합니다.
documentIsNew가 true인 경우, 다음을 수행합니다:
document에 대해 단편으로 스크롤 시도를 수행합니다.
이 시점에서 새로 생성된 문서에 대한 스크립트가 실행될 수 있습니다. document에 대해 스크립트가 실행될 수 있습니다.
그렇지 않고 documentsEntryChanged가 false이며 doNotReactivate가 false이면, 다음을 수행합니다:
documentsEntryChanged가 false일 수 있는 이유는 두 가지입니다: 하나는 우리가 bfcache에서 복원 중이거나, 또는 우리가 이미 동기적으로 document의 최신 항목을 동기적으로 설정한 탐색을 비동기적으로 완료하고 있기 때문입니다. doNotReactivate 인수는 이 두 가지 경우를 구분합니다.
document 및 세션 기록 항목 entry를 사용하여 기록 객체 상태 복원을 수행하려면 다음을 수행합니다:
targetRealm을 document의 관련 영역으로 설정합니다.
state를 StructuredDeserialize(entry의 고전 기록 API 상태, targetRealm)로 설정합니다. 예외가 발생하면 이를 catch하고 state를 null로 설정합니다.
문서
document를 활성화하려면 다음을 수행합니다:
window를 document의 관련 전역 객체로 설정합니다.
document의
탐색 컨텍스트의
WindowProxy
의
[[Window]]
내부 슬롯 값을 window로 설정합니다.
document의 가시성 상태를 document의 노드 탐색 가능의 탐색 가능한 시스템 가시성 상태로 설정합니다.
새로운 항목을
큐에 추가합니다.
VisibilityStateEntry
는
document의 가시성 상태로,
타임스탬프는 0으로 설정됩니다.
문서
document를 재활성화하려면,
세션 기록 항목
reactivatedEntry 및
목록
세션 기록 항목
entriesForNavigationAPI를 사용합니다:
이 알고리즘은 bfcache에서 나온 후, 즉 완전히 활성화된 후에 document를 업데이트합니다. 이 변경으로 인해 발생하는 이벤트 순서가 명확해지도록 이 알고리즘에 단계를 추가하는 것이 권장됩니다.
각
formControl에 대해, document 내에서 자동 완성 필드 이름이
"off
"인
경우, formControl에 대해
재설정 알고리즘을
호출합니다.
document의 일시 중단된 타이머 핸들이 비어 있지 않은 경우:
suspendDuration을 현재 고해상도 시간에서 document의 일시 중지 시간을 뺀 값으로 설정합니다.
각 handle에 대해, document의 일시 중단된 타이머 핸들에서 activeTimers[handle]이 존재하면 activeTimers[handle]을 suspendDuration만큼 증가시킵니다.
document의 관련 전역 객체의 네비게이션 API, entriesForNavigationAPI 및 reactivatedEntry를 사용하여 네비게이션 API 항목을 업데이트합니다.
document의
현재 문서 준비 상태가
"complete
"이고, document의
페이지 표시 플래그가 false인 경우, 다음을 수행합니다:
document를 위해
문서
의
단편으로 스크롤 시도(try to scroll to the fragment)를 하려면,
병렬로 다음 단계를 수행하십시오:
사용자 에이전트가 성능 문제에 대한 사용자 경험을 최적화할 수 있도록, 구현 정의된 시간을 기다립니다.
document의 관련 전역 객체에서 전역 작업을 큐에 추가하여 다음 단계를 수행합니다:
document 및 문자열
reason을 주어진 경우,
문서
를
복구 불가 상태로 만듭니다:
details를 reason 이유로 하는 새로운 복구되지 않은 이유 세부 정보로 설정합니다.
details를 document의 복구 불가 상태 이유 세부 정보에 추가합니다.
document의 복구 가능 상태를 false로 설정합니다.
document에 대해
문서
의
상태에 대해 복구되지 않은 이유(build not restored reasons for document
state)를
구축하려면:
notRestoredReasonsForDocument를 새로운 복구되지 않은 이유로 설정합니다.
document의 복구 불가 상태 이유를 notRestoredReasonsForDocument의 클론으로 설정합니다.
document의 문서 트리 하위 탐색 가능에 대해 각각 수행합니다:
childDocument를 navigable의 활성 문서로 설정합니다.
childDocument에 대해 문서 상태에 대한 복구되지 않은 이유 구축을 수행합니다.
childDocument의 복구되지 않은 이유를 notRestoredReasonsForDocument의 하위 요소에 추가합니다.
document의 노드 탐색 가능의 활성 세션 기록 항목의 문서 상태의 복구되지 않은 이유를 notRestoredReasonsForDocument로 설정합니다.
최상위 탐색 가능 항목 및 그 하위 항목에 대한 복구되지 않은 이유를 구축하려면 최상위 탐색 가능 항목 topLevelTraversable를 수행하십시오:
문서 상태에 대한 복구되지 않은 이유 구축을 topLevelTraversable의 활성 문서에 대해 수행하십시오.
crossOriginDescendants를 빈 목록으로 설정합니다.
각각의 childNavigable을 topLevelTraversable의 활성 문서의 하위 탐색 가능 항목에 대해 수행하십시오:
crossOriginDescendantsPreventsBfcache를 false로 설정합니다.
각각의 crossOriginNavigable을 crossOriginDescendants에서 수행하십시오:
reasonsForCrossOriginChild을 crossOriginNavigable의 활성 문서의 문서 상태의 복구되지 않은 이유로 설정합니다.
만약 reasonsForCrossOriginChild의 이유가 비어 있지 않으면, crossOriginDescendantsPreventsBfcache를 true로 설정합니다.
reasonsForCrossOriginChild의 URL을 null로 설정합니다.
reasonsForCrossOriginChild의 이유를 null로 설정합니다.
reasonsForCrossOriginChild의 하위 항목을 null로 설정합니다.
만약 crossOriginDescendantsPreventsBfcache가 true이면,
topLevelTraversable의
활성 문서와 "마스크됨
"를
주어진 경우
문서를 복구 불가 상태로
만듭니다.
문서
에는
초기값이 false인 boolean 속성인 표시된 상태가 있습니다.
이는 pagereveal
이벤트가
문서
의 각 활성화 시에
한 번씩만 발생하도록 보장하기 위해 사용됩니다
(처음 렌더링될 때 한 번, 그리고 각 재활성화 시에
한 번).
문서를 표시하려면 문서
document를 수행하십시오:
만약 document의 표시된 상태가 true라면, 반환합니다.
document의 표시된 상태를 true로 설정합니다.
transition을 들어오는 교차 문서 보기 전환 해결의 결과로 설정합니다 document에 대해 수행하십시오.
이벤트를 발생 시킵니다.
이벤트 이름은 pagereveal
이며,
document의 관련 글로벌 객체에서
PageRevealEvent
를
사용하여
viewTransition
을
transition으로 설정하여 수행하십시오.
만약 transition이 null이 아닌 경우:
스크립트를 실행할 준비를 document의 관련 설정 객체에 따라 수행합니다.
transition 활성화를 수행합니다.
스크립트 실행 후 정리를 document의 관련 설정 객체에 따라 수행합니다.
보기 전환을 활성화하면 약속이 해결되거나 거부될 수 있으므로, 활성화를 준비/정리로 감싸서 다음 렌더링 단계 전에 이러한 약속이 처리되도록 보장합니다.
pagereveal
이벤트는
페이지의 최신 버전을 표시하는 첫 번째 렌더링 업데이트
단계에서
반드시 발생하도록 보장되지만, 사용자 에이전트는 해당 이벤트를 발생시키기 전에 페이지의 캐시된 프레임을
표시할 수 있습니다.
이는 pagereveal
핸들러의
존재가 그러한 캐시된 프레임의 표시를 지연시키지 않도록 합니다.
문서
document에 대해 프래그먼트로 스크롤하려면 다음 단계를 수행하십시오:
그렇지 않고 document의 지정된 부분이 문서 상단인 경우:
document의 대상 요소를 null로 설정합니다.
문서 시작 부분으로 스크롤을 document에 대해 수행합니다. [CSSOMVIEW]
반환합니다.
그렇지 않으면:
target을 document의 지정된 부분으로 설정합니다.
document의 대상 요소를 target으로 설정합니다.
target에 대해 조상 세부 사항 표시 알고리즘을 실행합니다.
target에 대해
을 실행합니다.target을 뷰로 스크롤합니다. behavior는 "auto"로, block은 "start"로, inline은 "nearest"로 설정합니다. [CSSOMVIEW]
target으로 순차 포커스 탐색 시작 지점을 이동합니다.
문서
의 지정된 부분은 해당 URL의 프래그먼트에 의해 식별된 부분이며,
프래그먼트가 아무 것도 식별하지 않는 경우 null입니다. 프래그먼트를 노드에 매핑하는
의미론은 MIME 유형을 정의하는 사양에 의해 정의됩니다 (예: 프래그먼트를 XML MIME 유형에 대해 처리하는 것은 RFC7303의
책임입니다). [RFC7303]
각 문서
에는 대상
요소가 있으며, 이는 :target
의사 클래스 정의에 사용되고 위
알고리즘에 의해 업데이트됩니다. 초기값은 null입니다.
HTML 문서 document의 경우, 지정된 부분은 document와 document의 URL을 사용하여 지정된 부분 선택의 결과입니다.
문서
document 및 URL
url이 주어진 경우, 지정된 부분 선택을 수행하십시오:
만약 document의 URL이 url과 프래그먼트 제외 설정을 true로 설정한 상태로 동일하지 않으면 null을 반환합니다.
fragment를 url의 프래그먼트로 설정합니다.
만약 fragment가 빈 문자열이라면, 특수 값인 문서 상단을 반환합니다.
potentialIndicatedElement를 document와 fragment를 사용하여 잠재적인 지정 요소 찾기의 결과로 설정합니다.
만약 potentialIndicatedElement가 null이 아니라면, potentialIndicatedElement를 반환합니다.
fragmentBytes를 fragment에 대해 퍼센트 디코딩의 결과로 설정합니다.
decodedFragment를 fragmentBytes에 대해 BOM 없이 UTF-8 디코딩의 결과로 설정합니다.
document와 decodedFragment를 사용하여 potentialIndicatedElement를 잠재적인 지정 요소 찾기의 결과로 설정합니다.
만약 potentialIndicatedElement가 null이 아니라면, potentialIndicatedElement를 반환합니다.
만약 decodedFragment가 문자열 top
과 ASCII 대소문자 구분 없는 일치라면 문서 상단을 반환합니다.
null을 반환합니다.
문서
document 및 문자열
fragment이 주어진 경우 잠재적인 지정 요소 찾기를 실행하십시오:
만약 문서 트리 내에 document의 루트가 document이고 ID가 fragment와 동일한 요소가 있다면, 트리 순서의 첫 번째 요소를 반환합니다.
만약 문서 트리 내에
document의 루트가
document이고 name
속성이 fragment와 동일한 값을 가지는 a
요소가 있다면, 트리 순서의 첫 번째 요소를 반환합니다.
null을 반환합니다.
세션 히스토리 항목 entry에 저장된 상태를 저장하려면:
entry의 스크롤 위치 데이터를 entry의 문서의 복원 가능한 스크롤 영역에 대한 스크롤 위치를 포함하도록 설정합니다.
선택적으로, entry의 저장된 사용자 상태를 사용자 에이전트가 유지하고자 하는 상태(예: 양식 필드 값)를 반영하도록 업데이트합니다.
세션 히스토리 항목 entry에서 저장된 상태를 복원하려면:
만약 entry의 스크롤 복원 모드가 "auto
"이고,
entry의 문서의 관련 전역
객체의 네비게이션 API의 진행
중인 네비게이션 동안 일반적인 스크롤 복원을 억제가 false라면, entry에 대한 스크롤 위치 데이터 복원을 수행합니다.
사용자 에이전트가 스크롤 위치를 복원하지 않는다고 해서 스크롤 위치가 특정 값(예: (0,0))에 남아 있다는 것을 의미하지 않습니다. 실제 스크롤 위치는 네비게이션 유형과 사용자 에이전트의 특정 캐싱 전략에 따라 달라집니다. 따라서 웹 애플리케이션은 특정 스크롤 위치를 가정하지 말고 원하는 위치로 설정해야 합니다.
만약 진행
중인 네비게이션 동안 일반적인 스크롤 복원을 억제가 true라면, 스크롤 위치 데이터 복원은 관련 NavigateEvent
를
완료하는 과정에서 또는
navigateEvent.scroll()
메서드 호출을 통해 나중에 수행될 수 있습니다.
선택적으로, entry의 문서와 렌더링의 다른 측면(예: 양식 필드 값)을 업데이트합니다. 이는 사용자 에이전트가 entry의 저장된 사용자 상태에 기록한 것일 수 있습니다.
이 프로세스의 일부로 양식 컨트롤의 값을 복원하는 것은 input
또는 change
이벤트를
발생시키지 않지만, 양식 연관 사용자 정의 요소의
formStateRestoreCallback
을 트리거할 수 있습니다.
각 문서
는 불리언 사용자에 의해 스크롤됨을 가지고 있으며, 초기 값은 false입니다. 사용자가 문서를 스크롤하면, 사용자 에이전트는 해당
문서의 사용자에 의해 스크롤됨을 true로 설정해야 합니다.
문서
document의 복원 가능한 스크롤 영역은 document의 뷰포트와 모든 document의 스크롤 가능한 영역(모든 네비게이블 컨테이너 제외)을 포함합니다.
자식 네비게이블 스크롤 복원은 해당
네비게이블의 문서
에 대한 세션 히스토리 항목의 상태
복원의 일부로 처리됩니다.
세션 히스토리 항목 entry가 주어진 경우 스크롤 위치 데이터 복원을 수행하십시오:
document를 entry의 문서로 설정합니다.
만약 document의 사용자에 의해 스크롤됨이 true라면, 사용자 에이전트는 반환해야 합니다.
사용자 에이전트는 entry의 스크롤 위치 데이터를 사용하여 entry의 문서의 복원 가능한 스크롤 영역의 스크롤 위치를 복원하려고 시도해야 합니다. 사용자 에이전트는 document의 사용자에 의해 스크롤됨이 true가 될 때까지 이를 주기적으로 시도할 수 있습니다.
이는 스크롤 위치 데이터로 표시된 관련 콘텐츠가 네트워크에서 로드되는 데 시간이 걸릴 수 있기 때문에 성공할 때까지 또는 사용자가 스크롤할 때까지 잠재적으로 반복되는 시도로 공식화됩니다.
스크롤 복원은 스크롤 앵커링의 영향을 받을 수 있습니다. [CSSSCROLLANCHORING]
아래 알고리즘 중 하나를 사용하여 문서를 로드할 때, 다음 단계에 따라 Document
객체를 타입 type, 콘텐츠 타입 contentType, 그리고 네비게이션 매개변수
navigationParams를 주어 생성하고 초기화합니다.
Document
객체는 새 브라우징 컨텍스트 및 문서 생성 시에도
생성됩니다. 이러한 초기
about:blank
Document
는 이 알고리즘에 의해 생성되지
않습니다. 또한, 브라우징
컨텍스트가 없는 Document
객체는 document.implementation.createHTMLDocument()
와
같은 다양한 API를 통해 생성될 수 있습니다.
browsingContext를 navigationParams의 네비게이블의 활성 브라우징 컨텍스트로 설정합니다.
browsingContext를 browsingContext, navigationParams의 최종 샌드박싱 플래그 세트, navigationParams의 크로스 오리진 오프너 정책, 및 navigationParams의 COOP 집행 결과를 주어 네비게이션 응답에 사용할 브라우징 컨텍스트 얻기 결과로 설정합니다.
이로 인해 브라우징 컨텍스트 그룹
전환이 발생할 수 있으며, 이 경우 browsingContext는 navigationParams의 네비게이블의 활성 브라우징 컨텍스트 대신 새로 생성된 브라우징 컨텍스트가
됩니다. 이러한 경우, 생성된 Window
, Document
및 에이전트는 사용되지 않게 됩니다. 생성된 Document
의 기원이 불투명하기 때문에, 우리는 새로운 에이전트와 Window
를 이 알고리즘의 나중 부분에서 새로 생성된 Document
와 함께
사용하도록 설정합니다.
permissionsPolicy를 navigationParams의 네비게이블의 컨테이너, navigationParams의 기원, 그리고 navigationParams의 응답을 주어 응답에서 권한 정책 생성의 결과로 설정합니다. [PERMISSIONSPOLICY]
응답에서 권한 정책 생성 알고리즘은 전달된 기원을 사용합니다.
document.domain
이
navigationParams의 네비게이블의 컨테이너 문서에서 사용된 경우, 이 단계는
document가 생성되기 전에 실행되므로, 전달된 기원과 기원이 동일 기원 도메인일 수 없습니다. 이는 권한 정책
검사가 동일 기원 검사보다 덜
허용적이라는 것을 의미합니다.
아래에 이러한 작동 방식의 몇 가지 예가 있습니다.
navigationParams의 요청이 null이 아닌 경우, creationURL을 navigationParams의 요청의 현재 URL로 설정합니다.
window를 null로 설정합니다.
browsingContext의 활성 문서의 초기
about:blank
이 true이고, browsingContext의 활성 문서의 기원이 navigationParams의 기원과 동일 기원
도메인이면, window를 browsingContext의 활성 윈도우로 설정합니다.
이는 초기 about:blank
Document
와 곧 생성될
새로운 Document
가
동일한 Window
객체를 공유하게
됨을 의미합니다.
그렇지 않으면:
oacHeader를 navigationParams의 응답의 헤더 목록에서 `Origin-Agent-Cluster
`와
`item
`을 주어 구조화된 필드 값을 얻는 결과로 설정합니다.
oacHeader가 null이 아니고 oacHeader[0]이 부울 true이면 requestsOAC를 true로 설정하고, 그렇지 않으면 false로 설정합니다.
navigationParams의 예약된 환경이 비보안 컨텍스트이면, requestsOAC를 false로 설정합니다.
agent를 navigationParams의 기원, browsingContext의 그룹, 및 requestsOAC를 주어 유사 기원 윈도우 에이전트 얻기 결과로 설정합니다.
realmExecutionContext를 agent를 주어 새로운 자바스크립트 영역 생성 결과로 설정하고, 다음의 커스터마이징을 적용합니다:
전역 객체로 새 Window
객체를 생성합니다.
전역 this 바인딩으로 browsingContext의 WindowProxy
객체를 사용합니다.
window를 realmExecutionContext의 Realm 구성 요소의 전역 객체로 설정합니다.
topLevelCreationURL을 creationURL로 설정합니다.
topLevelOrigin을 navigationParams의 기원으로 설정합니다.
navigable의 컨테이너가 null이 아니면:
topLevelCreationURL을 parentEnvironment의 최상위 생성 URL로 설정합니다.
topLevelOrigin을 parentEnvironment의 최상위 기원으로 설정합니다.
윈도우 환경 설정 객체 설정을 creationURL, realmExecutionContext, navigationParams의 예약된 환경, topLevelCreationURL, 그리고 topLevelOrigin을 주어 실행합니다.
loadTimingInfo를 navigationParams의 응답의 타이밍 정보의 시작 시간을 네비게이션 시작 시간으로 설정한 새 문서 로드 타이밍 정보로 설정합니다.
document를 새 Document
로 설정합니다.
다음과 같은 속성을 가집니다.
loading
"
window의 연관된 Document
를
document로 설정합니다.
Document
에 대한 CSP 초기화 실행을
document를 주어 실행합니다. [CSP]
navigationParams의 요청이 null이 아닌 경우:
navigationParams의 페치 컨트롤러가 null이 아닌 경우:
fullTimingInfo를 navigationParams의 페치 컨트롤러에서 전체 타이밍 정보 추출의 결과로 설정합니다.
redirectCount를 0으로 설정하되, navigationParams의 응답의 크로스 오리진 리다이렉트가 있음이 true이면, navigationParams의 요청의 리다이렉트 수로 설정합니다.
네비게이션 타이밍 항목 생성을 document, fullTimingInfo, redirectCount, navigationTimingType, navigationParams의 응답의 서비스 워커 타이밍 정보, 그리고 navigationParams의 응답의 본문 정보를 주어 실행합니다.
네비게이션 타이밍 항목 생성을 document, navigationParams의 응답의 타이밍 정보, redirectCount, navigationParams의 네비게이션 타이밍 타입, 그리고 navigationParams의 응답의 서비스 워커 타이밍 정보를 주어 실행합니다.
navigationParams의 응답에 `Refresh
` 헤더가 있으면:
value를 헤더 값의 동형 디코딩 결과로 설정합니다.
공유 선언적 새로고침 단계를 document와 value를 주어 실행합니다.
현재 여러 `Refresh
` 헤더를 처리하는
방법에 대한 명세는 없습니다. 이는 문제 #2900로 추적되고 있습니다.
navigationParams의 조기 힌트 커밋이 null이 아니면, navigationParams의 조기 힌트 커밋을 document로 호출합니다.
링크 헤더
처리를 document, navigationParams의 응답, 및
"pre-media
"를 주어 실행합니다.
document를 반환합니다.
이 예에서 자식 문서는 PaymentRequest
를
사용할 수 없습니다. 자식 문서가 이를 사용하려고 시도하는 시점에서는 동일 기원 도메인이 아닙니다. 자식 문서가 초기화될 때, 부모
문서만이 document.domain
을
설정했으며, 자식 문서는 설정하지 않았기 때문입니다.
<!-- https://foo.example.com/a.html -->
<!doctype html>
< script >
document. domain = 'example.com' ;
</ script >
< iframe src = b.html ></ iframe >
<!-- https://bar.example.com/b.html -->
<!doctype html>
< script >
document. domain = 'example.com' ; // 문서가 초기화된 후에 이 작업이 수행됩니다
new PaymentRequest( …); // 사용이 허용되지 않음
</ script >
이 예에서 자식 문서는 PaymentRequest
를
사용할 수 있습니다. 자식 문서가 이를 사용하려고 시도하는 시점에서는 동일 기원 도메인이 아닙니다. 자식 문서가 초기화될 때, 문서 중
어느 것도 document.domain
을
설정하지 않았기 때문에 동일
기원 도메인이 정상적인 동일 기원
검사로 되돌아갑니다.
<!-- https://example.com/a.html -->
<!doctype html>
< iframe src = b.html ></ iframe >
<!-- 자식 문서는 이제 아래 스크립트가 실행되기 전에 초기화됩니다. -->
< script >
document. domain = 'example.com' ;
</ script >
<!-- https://example.com/b.html -->
<!doctype html>
< script >
new PaymentRequest( …); // 사용이 허용됨
</ script >
로 채우기 위해, html
/head
/body
Document
document를 주어 다음 단계를 수행합니다:
html을 document, html
,
그리고 HTML 네임스페이스를
주어 요소
생성 결과로 설정합니다.
head을 document, head
,
그리고 HTML 네임스페이스를
주어 요소
생성 결과로 설정합니다.
body을 document, body
,
그리고 HTML 네임스페이스를
주어 요소
생성 결과로 설정합니다.
html을 document에 추가합니다.
head을 html에 추가합니다.
body을 html에 추가합니다.
탐색 매개변수 navigationParams를 주어 HTML 문서 로딩을 수행하려면 다음 단계를 따릅니다:
document를 navigationParams를 주어 "html
", "text/html
"
및 문서 객체를
생성하고 초기화하는 결과로 설정합니다.
document의 URL이 about:blank
인 경우, document를 주어 html
/head
/body
로
채우기를 수행합니다.
이 특수한 경우는 비록 초기
about:blank
가 아닌 Document
에서도
요소 노드가 동기적으로 제공되어야 배포된 콘텐츠와 호환됩니다. 즉, "그렇지 않은 경우" 분기로 내려가 빈 바이트 시퀀스를
HTML 파서에 공급하여 document를 비동기적으로
채우는 것은 호환되지 않습니다.
그렇지 않으면, document와 연결된 HTML 파서를 생성합니다. 페칭이 실행되는 동안 네트워킹 작업 소스가 작업 대기열에 추가하는 모든 작업은 파서의 입력 바이트 스트림을 가져온 바이트로 채우고 HTML 파서가 입력 스트림에 대한 적절한 처리를 수행하도록 해야 합니다.
페칭이 실행되는 동안 네트워킹 작업
소스가 작업 대기열에 추가하는 첫 번째 작업은, 해당 작업이 HTML
파서에 의해 처리된 후에 document와 navigationParams의 응답, 및
"media
"
를 주어 링크 헤더 처리를 수행해야 합니다.
스크립트 실행이 발생하기 전에, 사용자 에이전트는 document에 대해 새로 생성된 문서에 대해 스크립트를 실행할 수 있는 상태가 되기를 기다려야 합니다.
입력 바이트 스트림은 토큰화기에서 사용할 문자를 변환합니다. 이 과정은 리소스의 실제 콘텐츠 유형 메타데이터에서 발견되는 문자 인코딩 정보를 부분적으로 사용하며, 계산된 유형은 이 목적에 사용되지 않습니다.
더 이상 바이트가 사용 가능하지 않으면, 사용자 에이전트는 document의 관련 글로벌 객체를 주어 파서가 암시된 EOF 문자를 처리하도록 전역 작업을 대기열에 추가해야 하며, 이는 결국 load
이벤트가 발생하게 됩니다.
document를 반환합니다.
탐색 매개변수 navigationParams와 문자열
type이 주어졌을 때, XML 파일을 인라인으로 표시해야 하는 경우, 사용자 에이전트는 문서 객체를 생성하고
초기화하여 "xml
", type, 및 navigationParams을 주어진 document를
생성하고 반환해야 하며, XML 파서를 생성해야 합니다. [XML] [XMLNS] [RFC7303] [DOM] 등 관련된 명세서의 요구 사항을
따라야 합니다.
이 문서를 작성할 당시, XML 명세 커뮤니티는 실제로 XML과 DOM이 어떻게 상호 작용하는지를 아직 명확히 명시하지 않았습니다.
페칭이 실행되는 동안 네트워킹 작업
소스가 작업 대기열에 추가하는 첫 번째 작업은, 해당 작업이 XML 파서에 의해
처리된 후에 document와 navigationParams의 응답을 주어 "media
"에 대한 링크 헤더 처리를 수행해야 합니다.
실제 HTTP 헤더 및 기타 메타데이터는 이 명세서에서 제공된 알고리즘에 의해 변형되거나 암시된 헤더가 아니라, 위에서 언급한 명세서에 따른 문자 인코딩을 결정할 때 사용되어야 합니다. 문자 인코딩이 확립되면 문서의 문자 인코딩을 해당 문자 인코딩으로 설정해야 합니다.
스크립트 실행이 발생하기 전에, 사용자 에이전트는 새로 생성된 Document
에 대해 스크립트가 실행될 수 있는 상태가 되기를
기다려야 합니다.
파싱이 완료되면, 사용자 에이전트는 document의 로드 중 탐색 ID를 null로 설정해야 합니다.
HTML 문서의 경우, 로드 이벤트가 발생한 후에 이 설정이 초기화됩니다.
파싱 과정에서 발생한 오류 메시지(예: XML 네임스페이스의 완전성 오류)는 Document
을 변형하여 인라인으로 보고될 수 있습니다.
탐색 매개변수 navigationParams와 문자열 type이 주어졌을 때 텍스트 문서 로딩을 수행하려면 다음 단계를 따릅니다:
document를 navigationParams를 주어 "html
" 및 type을
사용하여 문서 객체를
생성하고 초기화하는 결과로 설정합니다.
document의 파서가 모드를 변경할 수 없음 플래그를 true로 설정합니다.
document의 모드를
"no-quirks
"로
설정합니다.
document와 연결된 HTML 파서를 생성합니다. 마치 토큰화기가 "pre"라는 태그 이름과 단일 U+000A 줄 바꿈(LF) 문자를 가진 시작 태그 토큰을 방출한 것처럼 행동하고, PLAINTEXT 상태로 HTML 파서의 토큰화기를 전환합니다. 페칭이 실행되는 동안 네트워킹 작업 소스가 작업 대기열에 추가하는 모든 작업은, 파서의 입력 바이트 스트림을 가져온 바이트로 채우고 HTML 파서가 입력 스트림에 대한 적절한 처리를 수행하도록 해야 합니다.
document의 인코딩을 파싱 과정에서 문서를 디코딩하는 데 사용된 문자 인코딩으로 설정해야 합니다.
페칭이 실행되는 동안 네트워킹 작업
소스가 작업 대기열에 추가하는 첫 번째 작업은, 해당 작업이 HTML
파서에 의해
처리된 후에 document와 navigationParams의 응답을 주어 "media
"에 대한 링크 헤더 처리를 수행해야 합니다.
스크립트 실행이 발생하기 전에, 사용자 에이전트는 document에 대해 스크립트가 실행될 수 있는 상태가 되기를 기다려야 합니다.
더 이상 바이트가 사용 가능하지 않으면, 사용자 에이전트는 document의 관련 글로벌 객체를 주어 파서가 암시된 EOF 문자를 처리하도록 전역 작업을 대기열에 추가해야 하며, 이는 결국 load
이벤트가 발생하게 됩니다.
사용자 에이전트는 document의 head
요소에 콘텐츠(예: 스타일 시트 링크, 스크립트 제공, 문서 제목
설정 등)를 추가할 수 있습니다.
특히, 사용자 에이전트가 RFC 3676의 Format=Flowed
기능을 지원하는 경우, 텍스트가 올바르게 줄 바꿈되도록 추가 스타일을 적용하고
인용 기능을 처리해야 합니다. 이는 예를 들어 CSS 확장을 사용하여 수행될 수 있습니다.
document를 반환합니다.
일반 텍스트 문서의 바이트를 실제 문자로 변환하는 규칙과 텍스트를 사용자에게 실제로 렌더링하는 규칙은 자원의 계산된 MIME 유형(즉, type)에 대한 명세서에 정의되어 있습니다.
multipart/x-mixed-replace
문서 로딩탐색 매개변수
navigationParams, 소스 스냅샷 매개변수 sourceSnapshotParams, 및
출처 initiatorOrigin이 주어졌을
때, multipart/x-mixed-replace
문서를 로드하기 위해 다음 단계를
수행합니다:
navigationParams의 응답의 본문을 멀티파트 유형에 대한 규칙을 사용하여 파싱합니다. [RFC2046]
navigationParams의 복사본을 firstPartNavigationParams로 설정합니다.
firstPartNavigationParams의 응답을 navigationParams의 본문의 첫 번째 부분을 나타내는 새로운 응답으로 설정합니다.
document를 firstPartNavigationParams, sourceSnapshotParams 및 initiatorOrigin을 주어 문서를 로드한 결과로 설정합니다.
추가로 얻은 navigationParams의 응답의 각 본문 부분에 대해, 사용자 에이전트는
document의 노드 탐색
가능을 navigationParams의 요청의 URL로
탐색해야 하며, document를 사용하여 응답을 navigationParams의 응답으로 설정하고 historyHandling을
"replace
"로
설정합니다.
document를 반환합니다.
이러한 본문 부분을 완전한 독립 리소스처럼 처리하는 알고리즘의 목적상, 사용자 에이전트는 본문 부분을 따르는 경계에 도달할 때마다 해당 리소스에 대해 더 이상 바이트가 없는 것처럼 동작해야 합니다.
따라서 load
이벤트(그리고 사실
unload
이벤트)도 로드된 각 본문 부분에
대해 발생합니다.
navigationParams와 문자열 type이 주어졌을 때 미디어 문서를 로드하기 위해 다음 단계를 수행합니다:
document를 navigationParams을 주어 "html
" 및 type을 사용하여 문서 객체를 생성하고
초기화한 결과로 설정합니다.
document의 모드를
"no-quirks
"로 설정합니다.
html
/head
/body
로
채우기를 수행하여 document를 설정합니다.
아래에 설명된 대로 미디어를 위한 요소 host element를 body
요소에 추가합니다.
아래에 설명된 대로 이미지, 비디오 또는 오디오 리소스의 주소에 요소 host element의 적절한 속성을 설정합니다.
사용자 에이전트는 document의 head
요소 또는 host
element에 콘텐츠를 추가하거나 속성을 추가할 수 있습니다. 예를 들어, 스타일 시트를 링크하거나, 스크립트를 제공하거나, 문서에 제목
을 부여하거나, 미디어를 자동 재생하게 만들 수 있습니다.
document와 navigationParams의 응답 및 "media
"를 주어 링크 헤더 처리를 수행합니다.
사용자 에이전트가 document의 파싱을 중지한 것처럼 동작합니다.
document를 반환합니다.
미디어를 위한 요소 host element를 생성하기 위해 아래 표에서 미디어 유형을 설명하는 첫 번째 셀의 두 번째 셀에 주어진 요소를 사용합니다. 설정할 적절한 속성은 동일한 행의 세 번째 셀에 주어진 속성입니다.
미디어 유형 | 미디어를 위한 요소 | 적절한 속성 |
---|---|---|
이미지 | img
| src
|
비디오 | video
| src
|
오디오 | audio
| src
|
스크립트 실행이 발생하기 전에, 사용자 에이전트는 새로 생성된 문서에 대해 스크립트를 실행할 수 있는지 여부가 true가 될 때까지 기다려야 합니다.
사용자 에이전트가 사용자 에이전트 페이지 또는 PDF 뷰어를 인라인으로 표시하기 위한 문서를 생성해야 할 때, 탐색
가능 navigable, 탐색 ID
navigationId, NavigationTimingType
navTimingType이 제공된 경우, 사용자 에이전트는 다음 단계를 수행해야 합니다:
origin을 새로운 불투명한 출처로 설정합니다.
coop을 새로운 오프너 정책으로 설정합니다.
coopEnforcementResult을 다음을 포함하는 새로운 교차 출처 오프너 정책 집행 결과로 설정합니다:
navigationParams을 다음을 포함하는 새로운 탐색 매개변수로 설정합니다:
document를 "html
", "text/html
" 및 navigationParams을 주어 문서 객체를 생성하고
초기화한 결과로 설정합니다.
사용자 에이전트가 렌더링하려는 콘텐츠를 나타낼 때까지 document를 일반 문서
렌더링 규칙을 사용하지 않고 사용자 지정 렌더링과 연결하거나
document를 변형합니다.
document를 반환합니다.
결과로 생성된 문서
의 출처가 불투명하고, 결과로 생성된 문서
가 DOM에 접근할 수 있는 스크립트를 실행할 수 없도록 보장하기 때문에, 이
문서
의 존재 및 속성은 웹 개발자 코드에 의해 관찰할 수 없습니다. 이는 대부분의 위
값들, 예를 들어 text/html
유형이 중요하지 않음을 의미합니다. 비슷하게, navigationParams의 대부분 항목은 탐색
객체 생성 알고리즘이 혼란스러워하지 않도록 방지하는 것을 제외하고는 가시적인 효과가 없으므로 기본 값으로 설정됩니다.
페이지 설정이 완료되면, 사용자 에이전트는 파싱을 중지한 것처럼 행동해야 합니다.
문서
는 완전히 로드된
시간(시간 또는 null)을 가지며, 이는 초기에는 null입니다.
문서
는 완전히 로드된 시간이 null이 아닐 때 완전히
로드됨으로 간주됩니다.
문서
document를 완전히 로드 완료하기 위해:
document의 완전히 로드된 시간을 현재 시간으로 설정합니다.
document의 노드 탐색 가능의 컨테이너를 container로 설정합니다.
이는 초기
about:blank
문서
가 프레임
또는 iframe
에 있는 경우
null이 됩니다. 왜냐하면 이 알고리즘을 호출하는 탐색 문맥 생성 시점에서 컨테이너 관계가 아직 설정되지 않았기
때문입니다. (이는 새로운 자식 탐색 가능 생성의 후속 단계에서 발생합니다.)
이로 인해 다음 단계들은 아무런 작업도 수행하지 않으며, 이러한 경우에는 컨테이너 요소에서 비동기 로드
이벤트가 발생하지 않습니다. 대신, iframe
속성 처리 시 특수한 초기 삽입
케이스에서 동기 로드
이벤트가 발생합니다.
container가 iframe
요소인 경우, 요소 작업을 큐에 추가하여
container를 주어진 DOM 조작 작업 소스에 추가하여 container를 주어진
iframe 로드 이벤트 단계를
실행합니다.
그렇지 않고, container가 null이 아닌 경우, 요소 작업을 큐에 추가하여 container를 주어진 DOM 조작 작업
소스에 추가하여 container에 이벤트 이름 로드
를 발사합니다.
문서
는 구조
가능 상태를 가지며, 이 상태는 처음에 true로 설정되어야 합니다. 또한 페이지 표시 플래그를 가지며, 이 플래그는
처음에 false로 설정되어야 합니다. 페이지 표시 플래그는 스크립트가 일관된 방식으로
pageshow
및 pagehide
이벤트를 수신하도록 보장하기 위해 사용됩니다.
(예: 두 개의 pagehide
이벤트가 연속적으로
발생하지 않도록, 또는 그 반대의 경우도 마찬가지입니다.)
문서
는 DOMHighResTimeStamp
중단 시간을 가지며, 처음에는 0으로 설정됩니다.
문서
는 리스트의 중단된
타이머 핸들을 가지며, 처음에는 비어 있습니다.
이벤트 루프는 종료 중첩 수준 카운터를 가지며, 처음에는 0으로 설정되어야 합니다.
문서
객체는
아래 알고리즘이 실행되는 동안 특정 작업을 무시하기 위해 사용되는 언로드 카운터를 가지고 있습니다. 이 카운터는 처음에 0으로 설정되어야 합니다.
문서
oldDocument를 언로드하려면, 선택적으로 문서
newDocument를 지정합니다:
확인: 이 작업은 oldDocument의 관련 에이전트의 이벤트 루프에 큐에 추가된 작업의 일부로 실행되고 있습니다.
unloadTimingInfo를 새로운 문서 언로드 타이밍 정보로 설정합니다.
만약 newDocument가 제공되지 않았다면, unloadTimingInfo를 null로 설정합니다.
이 경우 oldDocument를 언로드하는 데 걸린 시간을 알 필요가 있는 새로운 문서가 없으므로, 타이밍 정보는 필요하지 않습니다.
그렇지 않고, newDocument의 이벤트 루프가 oldDocument의 이벤트 루프와 다르면, 사용자 에이전트는 oldDocument를 언로드할 수 있으며 병렬로 실행될 수 있습니다. 이 경우, 사용자 에이전트는 unloadTimingInfo를 null로 설정해야 합니다.
이 경우 newDocument의 로딩은 oldDocument를 언로드하는 데 걸리는 시간에 영향을 받지 않으므로, 그 타이밍 정보를 전달하는 것은 의미가 없습니다.
만약 사용자 에이전트가 oldDocument를 세션 기록 항목에서 유지하여 나중에 기록 탐색을 위해 사용할 의도가 있다면, intendToKeepInBfcache를 true로 설정합니다.
이 값은 oldDocument가 구조 가능 상태가 아니거나, oldDocument의 하위 항목 중 사용자 에이전트가 동일한 방식으로 유지할 의도가 없는 항목(구조 가능성이 없는 경우 포함)이 있는 경우 false로 설정되어야 합니다.
eventLoop의 종료 중첩 수준을 1 증가시킵니다.
oldDocument의 언로드 카운터를 1 증가시킵니다.
만약 intendToKeepInBfcache가 false라면, oldDocument의 구조 가능 상태를 false로 설정합니다.
만약 oldDocument의 페이지 표시가 true인 경우:
oldDocument의 페이지 표시를 false로 설정합니다.
페이지 전환
이벤트를 발생시킵니다. 이벤트 이름은 pagehide
이며,
oldDocument의 관련 글로벌 객체에 대해 oldDocument의 구조 가능 상태를 가지고 있습니다.
oldDocument의 가시성 상태를
"hidden
"으로 업데이트합니다.
만약 unloadTimingInfo가 null이 아닌 경우, unloadTimingInfo의 언로드 이벤트 시작 시간을 newDocument의 관련 글로벌 객체의 현재 고해상도 시간으로 설정합니다. 이 시간은 oldDocument의 관련 설정 객체의 교차 출처 고립 능력에 따라 조정된 시간입니다.
만약 oldDocument의 구조 가능 상태가 false라면, 이벤트 이름 unload
를 oldDocument의
관련 글로벌 객체에 대해
발사하며, legacy target override flag를 설정합니다.
만약 unloadTimingInfo가 null이 아닌 경우, unloadTimingInfo의 언로드 이벤트 종료 시간을 newDocument의 관련 글로벌 객체의 현재 고해상도 시간으로 설정합니다. 이 시간은 oldDocument의 관련 설정 객체의 교차 출처 고립 능력에 따라 조정된 시간입니다.
eventLoop의 종료 중첩 수준을 1 감소시킵니다.
oldDocument의 중단 시간을 document의 관련 글로벌 객체의 현재 고해상도 시간으로 설정합니다.
oldDocument의 중단된 타이머 핸들을 키를 가져오는 결과로 설정합니다. 이는 활성 타이머 맵에 해당합니다.
oldDocument의 사용자에 의해 스크롤되었는지 여부를 false로 설정합니다.
oldDocument에 대한 언로드 문서 정리 단계를 실행합니다. 이 단계는 이 명세서와 다른 적용 가능한 명세서에 정의된 대로 실행됩니다.
만약 oldDocument의 노드 탐색 가능이 최상위 탐색 가능이라면, oldDocument의 노드 탐색 가능을 고려하여 최상위 탐색 가능 및 해당 하위 항목에 대한 복원되지 않은 이유를 작성합니다.
oldDocument의 언로드 카운터를 1 감소시킵니다.
만약 newDocument가 제공되고, newDocument의 교차 출처 리디렉션을 통해 생성되지 않았다면, newDocument의 출처가 oldDocument의 출처와 동일한 경우, newDocument의 이전 문서 언로드 타이밍을 unloadTimingInfo로 설정합니다.
문서
document 및 선택적으로 문서
(또는 null) newDocument (기본값은
null), 선택적인 단계 집합 afterAllUnloads, 선택적인 단계 집합 firePageSwapSteps를 제공하여 문서 및 하위 항목을 언로드하려면:
확인: 이 작업은 document의 노드 탐색 가능의 탐색 가능 탐색의 세션 기록 탐색 큐 내에서 실행되고 있습니다.
childNavigables을 document의 하위 탐색 가능 항목으로 설정합니다.
numberUnloaded을 0으로 설정합니다.
각 childNavigable에 대해, 어떤 순서로?, 글로벌 작업을 큐에 추가합니다. childNavigable의 활성 창을 사용하여 다음 단계를 실행합니다:
incrementUnloaded는 numberUnloaded를 증가시키는 알고리즘 단계입니다.
문서 및 하위 항목을 언로드합니다. childNavigable의 활성 문서, null, incrementUnloaded을 사용합니다.
numberUnloaded가 childNavigable의 크기와 동일해질 때까지 기다립니다.
document의 관련 글로벌 객체를 사용하여 글로벌 작업을 큐에 추가하고 다음 단계를 실행합니다:
만약 firePageSwapSteps가 주어지면, firePageSwapSteps를 실행합니다.
문서를 언로드합니다. newDocument가 null이 아닌 경우 해당 문서를 전달합니다.
만약 afterAllUnloads가 주어졌다면, 이를 실행합니다.
이 명세서는 다음과 같은 언로드 문서 정리 단계를 정의합니다. 다른 명세서는 더 많은 단계를
정의할 수 있습니다. 문서
document에 대해:
window를 document의 관련 글로벌 객체로 설정합니다.
각 WebSocket
객체 webSocket의 관련 글로벌 객체가 window라면, webSocket을 사라지게 만듭니다.
이 작업이 WebSocket
객체에 영향을 미친다면, document와 "websocket
"를 사용하여 문서를 구조 불가능하게
만듭니다.
각 WebTransport
객체 transport의 관련 글로벌 객체가 window라면, 컨텍스트 정리 단계를 실행합니다.
만약 document의 구조 가능 상태가 false라면:
각 EventSource
객체
eventSource의 관련 글로벌 객체가 window와 동일하다면,
강제로 닫기를 실행합니다.
명세서 작성자는 교차 명세서 호출 순서를 명확하게 하기 위해 이곳에서 해당 명세서로의 호출을 추가하는 대신 언로드 문서 정리 단계 훅을 사용하는 대신 풀 리퀘스트를 보내는 것이 좋습니다. 현재까지 다음 명세서가 언로드 문서 정리 단계를 포함하고 있으며, 이는 미정의된 순서로 실행됩니다: Fullscreen API, Web NFC, WebDriver BiDi, Compute Pressure, File API, Media Capture and Streams, Picture-in-Picture, Screen Orientation, Service Workers, WebLocks API, WebAudio API, WebRTC. [FULLSCREEN] [WEBNFC] [WEBDRIVERBIDI] [COMPUTEPRESSURE] [FILEAPI] [MEDIASTREAM] [PICTUREINPICTURE] [SCREENORIENTATION] [SW] [WEBLOCKS] [WEBAUDIO] [WEBRTC]
Issue #8906은 이러한 단계의 순서를 명확히 하기 위한 작업을 추적합니다.
문서를 파기하려면 문서
document을(를) 다음과 같이 수행합니다:
문서 중단 document.
document의 구조 가능 상태를 false로 설정합니다.
ports를 document의 연결된 문서
와 관련 글로벌 객체를 가진
MessagePort
목록으로 설정합니다.
각 port에 대해 분리 작업을 수행합니다.
이 명세서와 다른 적용 가능한 명세서에서 정의된 document의 언로드 문서 정리 단계를 실행합니다.
document의 탐색 컨텍스트를 null로 설정합니다.
document의 노드 탐색 가능 항목의 활성 세션 기록 항목의 문서 상태의 문서를 null로 설정합니다.
목록에서 제거 document를 소유자 집합에서 각각 제거합니다. 각 WorkerGlobalScope
객체의 집합은 document를 포함합니다.
각 workletGlobalScope를 document의 worklet 글로벌 스코프에서 종료합니다.
파기 후에도 문서
객체 자체는 여전히 스크립트에 접근할 수
있을 수 있습니다. 이는 우리가 하위 탐색 가능
항목을 파기하는 경우입니다.
문서 및 하위 항목을 파기하려면 문서
document와 선택적 단계 집합
afterAllDestruction을(를) 지정하여 다음 단계를 병렬로
수행합니다:
document가 완전히 활성화된 상태가 아닌 경우:
document와 "masked
"를 지정하여 문서를 구조
불가능하게 만듭니다.
만약 document의 노드 탐색 가능 항목이 최상위 탐색 가능 항목인 경우, 최상위 탐색 가능 항목과 해당 하위 항목에 대한 복원되지 않은 이유를 작성합니다. document의 노드 탐색 가능 항목을 사용하여 수행합니다.
childNavigables을 document의 하위 탐색 가능 항목으로 설정합니다.
numberDestroyed을 0으로 설정합니다.
각 childNavigable에 대해, 어떤 순서로?, 글로벌 작업을 큐에 추가합니다. childNavigable의 활성 창을 사용하여 다음 단계를 실행합니다:
incrementDestroyed는 numberDestroyed를 증가시키는 알고리즘 단계입니다.
문서 및 하위 항목을 파기합니다. childNavigable의 활성 문서와 incrementDestroyed를 지정하여 수행합니다.
numberDestroyed가 childNavigable의 크기와 같아질 때까지 기다립니다.
글로벌 작업을 큐에 추가합니다. document의 관련 글로벌 객체를 사용하여 다음 단계를 수행합니다:
문서를 파기합니다. document.
만약 afterAllDestruction이 지정되었다면, 그것을 실행합니다.
문서를 중단하려면 문서
document을(를) 다음과 같이 수행합니다:
document의 컨텍스트에서 fetch 알고리즘의 모든 인스턴스를
취소하고, 해당 작업에 대해 큐에 추가된 작업을 폐기하며, 추가로 수신된 모든 네트워크 데이터를
폐기합니다. 만약 이로 인해 fetch 알고리즘의 인스턴스가 취소되거나, 큐에 추가된 작업이나 네트워크 데이터가 폐기되었다면, document와 "fetch
"를 지정하여 문서를 구조
불가능하게 만듭니다.
만약 document의 WebDriver BiDi 로딩 중 탐색 ID가 null이 아니면:
document의 탐색 컨텍스트와 새 WebDriver BiDi 탐색 상태로 WebDriver BiDi 탐색이 중단됨을 호출합니다. 이 새 상태의
id는 document의 WebDriver BiDi 로딩 중 탐색
ID이며, 상태는 "canceled
"이고,
url은 document의 URL입니다.
document의 WebDriver BiDi 로딩 중 탐색 ID를 null로 설정합니다.
만약 document에 활성 파서가 있다면:
document의 활성 파서가 중단됨을 true로 설정합니다.
그 파서를 중단합니다.
document의 구조 가능 상태를 false로 설정합니다.
document와 "parser-aborted
"를
지정하여 문서를 구조 불가능하게 만듭니다.
문서 및 하위 항목을 중단하려면 문서
document을(를) 다음과 같이 수행합니다:
descendantNavigables을 document의 하위 탐색 가능 항목들로 설정합니다.
각 descendantNavigable에 대해, 어떤 순서로?, 글로벌 작업을 큐에 추가합니다. descendantNavigable의 활성 창을 사용하여 다음 단계를 실행합니다:
document을 중단합니다.
로드 중지를 수행하려면 탐색 가능 항목 navigable을 다음과 같이 수행합니다:
navigable의 활성 문서를 document로 설정합니다.
만약 document의 언로드 카운터가 0이고, navigable의 진행 중인 탐색이 탐색 ID이면, navigable의 진행 중인 탐색을 null로 설정합니다.
이로 인해 navigable의 모든 진행 중인 탐색이 중단됩니다. 왜냐하면 탐색 중 특정 시점에서 진행 중인 탐색의 변경은 추가 작업을 중단시키기 때문입니다.
문서 및 하위 항목을 중단합니다. document을(를) 지정하여.
사용자 인터페이스를 통해 사용자 에이전트는 진행 중인 탐색이 "탐색
"인 경우 탐색 중단도 허용합니다. 위 알고리즘은
이를 고려하지 않습니다. (반면, window.stop()
은 탐색을 중단하지 않기
때문에 위 알고리즘은 해당 호출자에 대해 올바르게 동작합니다.) 이슈 #6905를 참조하세요.
X-Frame-Options
` 헤더모든 현재 엔진에서 지원됨.
`X-Frame-Options
` HTTP 응답 헤더는 `문서
`가 하위 탐색 가능 항목 내에서 로드될 수 있는지 여부와 방식을 제어하는 구식 방법입니다. 이는 동일한
상황에 대해 더 세부적인 제어를 제공하는 frame-ancestors
CSP 지시어에 의해 대체되었습니다. 이 헤더는 원래 HTTP Header Field X-Frame-Options에서 정의되었지만, 여기서 정의된 처리 모델이 해당 문서를
대체합니다.
[CSP] [RFC7034]
특히, `HTTP Header Field X-Frame-Options`는 이 헤더의 `ALLOW-FROM
` 변형을 지정했지만, 이는
구현하지 않아야 합니다.
아래 처리 모델에 따르면, 만약 CSP frame-ancestors
지시어와 `X-Frame-Options
`
헤더가 동일한 응답에서 함께 사용되면, `X-Frame-Options
`는 무시됩니다.
웹 개발자 및 적합성 검사기에게, 그 값의 ABNF는 다음과 같습니다:
X-Frame-Options = "DENY" / "SAMEORIGIN"
내비게이션 응답이 `X-Frame-Options
`를 준수하는지 확인하려면, 응답 response, 탐색 가능 항목 navigable, CSP 목록 cspList, 그리고 기원 destinationOrigin이 주어졌을 때 다음과 같이 수행합니다:
navigable이 하위 탐색 가능 항목이 아니면, true를 반환합니다.
각 policy에 대해 cspList에서 다음을 수행합니다:
만약 policy의 지시어
집합이 포함한다면 frame-ancestors
지시어를 true로 반환합니다.
rawXFrameOptions를 response의 헤더 목록에서 `X-Frame-Options
`을
가져오고, 디코딩하고, 분할하여 얻은 결과로 설정합니다.
xFrameOptions를 새 집합으로 설정합니다.
각 value에 대해 rawXFrameOptions에서 추가합니다. value를 ASCII 소문자로 변환하여 xFrameOptions에 추가합니다.
만약 xFrameOptions의 크기가 1보다 크고,
xFrameOptions가 `deny
`, `allowall
`, 또는 `sameorigin
` 중
하나라도 포함하면 false를 반환합니다.
여기서 의도한 것은 `X-Frame-Options
`를
적용하려고 시도했지만 혼란스러운 상황을 방지하는 것입니다.
이것은 구식 `ALLOWALL
` 값의 처리 모델에 대한 유일한 영향입니다.
만약 xFrameOptions의 크기가 1보다 크면 true를 반환합니다.
이것은 여러 잘못된 값을 포함하고 있으며, 헤더가 완전히 생략된 것처럼 처리된다는 것을 의미합니다.
만약 xFrameOptions[0]이 `deny
`이면 false를 반환합니다.
만약 xFrameOptions[0]이 `sameorigin
`이면:
true를 반환합니다.
이 지점에 도달했다면, 이는 잘못된 단일 값(구식 `ALLOWALL
` 또는 `ALLOW-FROM
` 형식일 수 있음)을
가지고 있음을 의미합니다. 이러한 값은 헤더가 완전히 생략된 것처럼 처리됩니다.
다음 표는 유효하지 않은 값을 포함한 다양한 헤더 값의 처리를 설명합니다:
`X-Frame-Options `
| 유효 여부 | 결과 |
---|---|---|
`DENY `
| ✅ | 임베딩 불허 |
`SAMEORIGIN `
| ✅ | 동일 출처 임베딩 허용 |
`INVALID `
| ❌ | 임베딩 허용 |
`ALLOWALL `
| ❌ | 임베딩 허용 |
`ALLOW-FROM=https://example.com/ `
| ❌ | 임베딩 허용 (어디서든) |
다음 표는 여러 값이 포함된 비합격 사례의 처리 방법을 설명합니다:
`X-Frame-Options `
| 결과 |
---|---|
`SAMEORIGIN, SAMEORIGIN `
| 동일 출처 임베딩 허용 |
`SAMEORIGIN, DENY `
| 임베딩 불허 |
`SAMEORIGIN, `
| 임베딩 불허 |
`SAMEORIGIN, ALLOWALL `
| 임베딩 불허 |
`SAMEORIGIN, INVALID `
| 임베딩 불허 |
`ALLOWALL, INVALID `
| 임베딩 불허 |
`ALLOWALL, `
| 임베딩 불허 |
`INVALID, INVALID `
| 임베딩 허용 |
값이 쉼표로 구분된 단일 헤더에 전달되든, 여러 헤더에 전달되든 동일한 결과가 나타납니다.
Refresh
` 헤더`Refresh
` HTTP 응답 헤더는 `meta
` 요소에 http-equiv
속성이 있고, Refresh 상태와 함께 사용된
경우와 동일한 값을 갖고 대부분 동일하게 작동합니다. 해당 처리 모델은 `문서` 객체 생성 및 초기화에 자세히 설명되어 있습니다.
브라우저 사용자 에이전트는 탐색, 새로 고침, 그리고 로딩 중지를 수행할 수 있는 기능을 제공해야 합니다. 이러한 기능은 최상위 탐색 가능 항목 내에서 제공되어야 하며, 이는 최상위 탐색 가능 집합 내에서 동작해야 합니다.
예를 들어, 위치 표시줄 및 새로 고침/중지 버튼 UI를 통해 제공할 수 있습니다.
브라우저 사용자 에이전트는 델타 값으로 세션 기록 탐색 기능을 제공해야 합니다. 이 기능은 최상위 탐색 가능 항목 내에서 동작하며, 이는 최상위 탐색 가능 집합 내에서 제공되어야 합니다.
예를 들어, 뒤로 및 앞으로 버튼을 통해 제공할 수 있으며, 일부 UI에서는 롱 프레스를 통해 델타 값을 변경하는 기능도 제공할 수 있습니다.
이러한 사용자 에이전트는 델타 값이 1보다 큰 탐색 기능도 제공하는 것이 좋습니다. 이렇게 하면 페이지가 사용자를 "가두는" 것을 방지할 수 있습니다. (예를 들어, history.pushState()
또는
프래그먼트 탐색을 반복적으로 호출하여 세션 기록에 불필요한 항목을 추가하는 경우
등.)
일부 사용자 에이전트는 "뒤로" 또는 "앞으로" 버튼을 한 번 누르면 더 큰 델타로 번역하는 휴리스틱을 가지고 있어 이러한 남용을 극복할 수 있습니다. 이러한 휴리스틱을 issue #7832에서 명시할 것을 고려 중입니다.
브라우저 사용자 에이전트는 사용자가 제공하거나 사용자 에이전트가 결정한 초기 URL을 사용하여 새로운 최상위 탐색 가능 항목을 생성할 수 있는 기능을 제공해야 합니다.
예를 들어, "새 탭" 또는 "새 창" 버튼을 통해 제공할 수 있습니다.
브라우저 사용자 에이전트는 사용자가 최상위 탐색 가능 항목 내의 어떤 항목이라도 닫을 수 있는 기능을 제공해야 합니다.
예를 들어, "탭 닫기" 버튼을 클릭하여 제공할 수 있습니다.
브라우저 사용자 에이전트는 사용자가 명시적으로 탐색 가능 항목 (단지 최상위 탐색 가능 항목뿐만 아니라)을 탐색, 새로 고침, 또는 로딩 중지할 수 있도록 하는 방법을 제공할 수 있습니다.
예를 들어, 컨텍스트 메뉴를 통해 제공할 수 있습니다.
브라우저 사용자 에이전트는 사용자가 최상위 탐색 가능 항목을 삭제할 수 있는 기능을 제공할 수 있습니다.
예를 들어, 하나 이상의 최상위 탐색 가능 항목이 포함된 창을 강제로 닫는 경우.
사용자가 탐색 가능 항목의 새로 고침을 요청할 때, 이 항목의 활성 세션 기록 항목의 문서 상태의 리소스가 POST 리소스인 경우, 사용자 에이전트는 사용자가 확인 작업을 먼저 수행하도록 해야 합니다. 그렇지 않으면 거래(예: 구매 또는 데이터베이스 수정)가 반복될 수 있기 때문입니다.
사용자가 탐색 가능 항목의 새로 고침을 요청할 때, 사용자 에이전트는 새로 고침 시 캐시를 무시하는 메커니즘을 제공할 수 있습니다.
위에서 언급한 메커니즘에 의해 시작된 모든 탐색 호출은 `userInvolvement` 인수를 `browser UI
`로 설정해야 합니다.
위에서 언급한 메커니즘에 의해 시작된 모든 새로 고침 호출은 `userInvolvement` 인수를
`browser UI
`로 설정해야 합니다.
위에서 언급한 메커니즘에 의해 시작된 모든 세션 기록 탐색 호출은 `sourceDocument` 인수를 전달하지 않아야 합니다.
위에서 언급한 권장사항과 이 사양의 데이터 구조는 사용자 에이전트가 사용자에게 세션 기록을 표현하는 방법에 대한 제한을 의미하지 않습니다.
예를 들어, 최상위 탐색 가능 항목의 세션 기록 항목은 목록으로 저장 및 유지되며, 사용자 에이전트는 이 목록을 델타로 탐색할 수 있는 인터페이스를 제공하는 것이 좋지만, 새로운 사용자 에이전트는 대신 또는 추가적으로 각 페이지가 사용자가 선택할 수 있는 여러 "앞으로" 페이지를 포함하는 트리형 보기를 제공할 수 있습니다.
유사하게, 모든 자식 탐색 가능 항목의 세션 기록이 탐색 가능 항목 내에 저장되지만, 사용자 에이전트는 사용자에게 더 세밀한 탐색 가능 항목별 세션 기록 보기를 제공할 수 있습니다.
브라우저 사용자 에이전트는 최상위 탐색 컨텍스트의 `팝업 여부` 불리언을 다음과 같은 목적으로 사용할 수 있습니다:
해당 최상위 탐색 가능 항목에 대해 최소한의 웹 브라우저 사용자 인터페이스를 제공할지 여부를 결정합니다.
탐색 컨텍스트 기능 설정의 선택적 단계를 수행합니다.
이 두 경우 모두 사용자 에이전트는 추가적으로 사용자 환경설정을 통합하거나 팝업 경로를 따를지 여부를 선택할 수 있는 옵션을 제공할 수 있습니다.
팝업에 대해 최소한의 사용자 인터페이스를 제공하는 사용자 에이전트는 브라우저의 주소 표시줄을 숨기지 않는 것이 좋습니다.
다양한 메커니즘이 문서의 컨텍스트에서 작성자가 제공한 실행 코드를 실행하게 할 수 있습니다. 이러한 메커니즘에는 다음이 포함되지만, 이에 국한되지 않을 수 있습니다:
script
요소의 처리.
javascript:
URL로의 탐색.
addEventListener()
를 사용하여 DOM을 통해 등록된 이벤트 핸들러, 명시적 이벤트 핸들러 콘텐츠 속성, 이벤트 핸들러 IDL 속성 등을
통해 등록된 이벤트 핸들러.
JavaScript는 에이전트 개념을 정의합니다. 이 섹션은 해당 언어 수준 개념을 웹 플랫폼에 매핑하는 방법을 설명합니다.
개념적으로, 에이전트 개념은 JavaScript 코드가 실행되는 아키텍처 독립적인 이상화된 "스레드"입니다. 이러한 코드는 여러 글로벌/영역을 포함할 수 있으며, 서로 동기적으로 접근할 수 있으므로 단일 실행 스레드에서 실행될 필요가 있습니다.
같은 에이전트를 공유하는 두 개의 Window
객체가 서로의 영역에서
생성된 모든 객체에 직접 접근할 수 있다는 것을 의미하지는 않습니다. 이를 위해서는 동일 기원-도메인이어야 합니다. IsPlatformObjectSameOrigin을
참조하십시오.
웹 플랫폼에는 다음과 같은 유형의 에이전트가 존재합니다:
서로 직접적으로 또는 document.domain
을
사용하여 접근할 수 있는 다양한 Window
객체를
포함합니다.
포함하는 에이전트 클러스터의 기원 키드
여부가 true이면, 모든 Window
객체는 동일 기원이 되며, 서로
직접적으로 접근할 수 있고 document.domain
은
아무런 효과가 없습니다.
동일
기원인 두 Window
객체가 서로
다른 유사 기원 창 에이전트에 있을
수 있습니다. 예를 들어 각각 자신의 탐색 문맥 그룹에 있는 경우입니다.
단일 DedicatedWorkerGlobalScope
를
포함합니다.
단일 SharedWorkerGlobalScope
를
포함합니다.
단일 ServiceWorkerGlobalScope
를
포함합니다.
단일 WorkletGlobalScope
객체를 포함합니다.
주어진 워크릿은 여러 영역을 가질 수 있지만, 각 영역은 독립적으로 코드를 실행할 수 있으므로 각 영역마다 자신의 에이전트가 필요합니다.
공유 및 전용 워커
에이전트만이 JavaScript Atomics
API를 사용하여 잠재적으로 블록할
수 있습니다.
불리언 canBlock을 전달받아 에이전트를 생성하려면:
새로운 고유 내부 값인 signifier를 설정하십시오.
새로운 후보 실행을 candidateExecution으로 설정하십시오.
agent를 생성하고, 해당 에이전트의 [[CanBlock]]을 canBlock으로, [[Signifier]]를 signifier로, [[CandidateExecution]]을 candidateExecution으로 설정하십시오. [[IsLockFree1]], [[IsLockFree2]], 그리고 [[LittleEndian]]은 구현의 재량에 따라 설정됩니다.
agent를 반환하십시오.
주어진 영역 realm에 대해, [[Signifier]]가 realm.[[AgentSignifier]]인 에이전트가 영역의 에이전트입니다.
플랫폼 객체 platformObject의 해당 에이전트는 platformObject의 해당 영역의 에이전트입니다.
현재 영역의 에이전트에 해당하는 것은 주변 에이전트입니다.
JavaScript는 또한 에이전트 클러스터 개념을 정의하며, 이 표준은 유사 기원 창 에이전트를 얻는 또는 워커/워크릿 에이전트를 얻는 알고리즘을 통해 에이전트를 적절하게 배치하여 웹 플랫폼에 매핑합니다.
에이전트 클러스터 개념은 JavaScript
메모리 모델을 정의하는 데 중요하며, 특히 에이전트 간에 SharedArrayBuffer
객체의 데이터를 공유할 수 있는 범위를 정의하는 데 중요합니다.
개념적으로, 에이전트 클러스터 개념은 여러 "스레드"(에이전트)를 그룹화하는 아키텍처 독립적인, 이상적인 "프로세스 경계"입니다. 이 사양에서 정의된 에이전트 클러스터는 일반적으로 사용자가 구현한 실제 프로세스 경계보다 더 제한적입니다. 사양 수준에서 이러한 이상화된 구분을 적용함으로써, 우리는 공유 메모리와 관련하여 웹 개발자가 상호 운용 가능한 동작을 경험할 수 있도록 보장합니다. 이는 사용자 에이전트 프로세스 모델이 다르거나 변경되는 상황에서도 마찬가지입니다.
에이전트 클러스터에는 교차 출처 격리 모드라는 관련 속성이 있으며, 이는 교차 출처 격리 모드입니다.
초기 값은 "none
"입니다.
에이전트 클러스터에는 또한 기원 키드 여부(불리언)이 관련 속성으로 있으며, 초기 값은 false입니다.
다음은 에이전트 클러스터의 할당을 정의합니다. 이는 유사 기원 창 에이전트의 할당입니다.
에이전트 클러스터 키는 사이트 또는 튜플 기원입니다. 기원 키드 에이전트 클러스터를 달성하기 위한 웹 개발자의 조치가 없다면, 이는 사이트가 됩니다.
동일한 표현 방식은 에이전트 클러스터 키가 스킴과 호스트 또는 기원일 수 있다는 것입니다.
유사 기원 창 에이전트 얻기를 실행하려면, 기원 origin, 탐색 문맥 그룹 group, 및 불리언 requestsOAC를 고려하여 다음 단계를 실행하십시오:
origin으로 사이트 얻기의 결과를 site로 설정하십시오.
key를 site로 설정하십시오.
만약 group의 교차 출처 격리
모드가 "none
"이
아니라면, key를 origin으로 설정하십시오.
그렇지 않고, 만약 group의 기록 에이전트 클러스터 키 맵[origin]이 존재한다면, key를 group의 기록 에이전트 클러스터 키 맵[origin]으로 설정하십시오.
그렇지 않다면:
만약 requestsOAC가 true이면, key를 origin으로 설정하십시오.
group의 기록 에이전트 클러스터 키 맵[origin]을 key로 설정하십시오.
만약 group의 에이전트 클러스터 맵[key]이 존재하지 않으면:
새로운 에이전트 클러스터를 agentCluster로 설정하십시오.
agentCluster의 교차 출처 격리 모드를 group의 교차 출처 격리 모드로 설정하십시오.
key가 origin과 같으면 agentCluster의 기원 키드 여부를 true로, 그렇지 않으면 false로 설정하십시오.
불리언 false를 전달하여 에이전트를 생성한 결과를 agentCluster에 추가하십시오.
group의 에이전트 클러스터 맵[key]을 agentCluster로 설정하십시오.
group의 에이전트 클러스터 맵[key]에 포함된 단일 유사 기원 창 에이전트를 반환하십시오.
이는 탐색 문맥 에이전트 클러스터당 단 하나의 유사 기원 창 에이전트만 존재함을 의미합니다. (그러나, 전용 워커 및 워크릿 에이전트는 동일한 클러스터에 있을 수 있습니다.)
다음은 모든 다른 유형의 에이전트에 대한 에이전트 클러스터 할당을 정의합니다.
워커/워크릿 에이전트를 얻으려면, 환경 설정 객체 또는 null outside settings, 불리언 isTopLevel, 및 불리언 canBlock을 전달하여 다음 단계를 실행하십시오:
agentCluster를 null로 설정하십시오.
만약 isTopLevel이 true이면:
새로운 에이전트 클러스터를 agentCluster로 설정하십시오.
agentCluster의 기원 키드 여부를 true로 설정하십시오.
이러한 워커는 기원 키드로 간주될 수 있습니다. 그러나, 이는 originAgentCluster
가
창의 기원 키드 여부를 노출하는 방식으로 어떤 API에서도 노출되지 않습니다.
그렇지 않으면:
canBlock을 전달하여 에이전트를 생성한 결과를 agentCluster에 추가하십시오.
agent을 반환하십시오.
전용/공유 워커 에이전트를 얻으려면, 환경 설정 객체 outside settings 및 불리언 isShared를 전달하여 워커/워크릿 에이전트를 얻는 결과를 반환하십시오.
워크릿 에이전트를 얻으려면, 환경 설정 객체 outside settings를 전달하여 워커/워크릿 에이전트를 얻는 결과를 반환하십시오.
서비스 워커 에이전트를 얻으려면, null, true 및 false를 전달하여 워커/워크릿 에이전트를 얻는 결과를 반환하십시오.
JavaScript 사양은 스크립트가 실행되는 글로벌 환경을 나타내는 영역 개념을 도입합니다. 각 영역은 구현 정의된 전역 객체를 포함하며, 이 사양의 많은 부분이 그 전역 객체와 그 속성을 정의하는 데 할애됩니다.
웹 사양에서는 영역/전역 객체 쌍과 값을 또는 알고리즘을 연관시키는 것이 종종 유용합니다. 값이 특정 유형의 영역에 국한되는 경우, Window
또는 WorkerGlobalScope
인터페이스 정의에서처럼 해당 전역 객체에 직접 연관됩니다. 값이 여러 영역에서 유용한 경우, 우리는 환경 설정 객체 개념을 사용합니다.
마지막으로, 경우에 따라 영역/전역 객체/환경 설정 객체가 존재하기도 전에 관련된 값을 추적해야 할 필요가 있습니다 (예: 탐색 중). 이러한 값들은 환경 개념에서 추적됩니다.
환경은 현재 또는 잠재적 실행 환경(예: 탐색 매개변수의 예약된 환경 또는 요청의 예약된 클라이언트)의 설정을 식별하는 객체입니다. 환경에는 다음과 같은 필드가 있습니다:
이 환경을 고유하게 식별하는 불투명한 문자열입니다.
이 환경과 연관된 리소스의 위치를 나타내는 URL입니다.
예를 들어, Window
환경 설정 객체의 경우, 전역 객체의 연관된 Document
의
URL과 이 URL이 다를 수 있습니다. 이는 history.pushState()
와
같이 후자를 수정하는 메커니즘 때문입니다.
현재로서는 구현 정의된 값, null 또는 기원입니다. "최상위" 잠재적 실행 환경의 경우 null입니다(즉, 아직 응답이 없는 경우); 그렇지 않은 경우, 이는 "최상위" 환경의 기원입니다. 전용 워커 또는 워크릿의 경우, 이는 생성자의 최상위 기원입니다. 공유 워커 또는 서비스 워커의 경우, 이는 구현 정의된 값입니다.
이는 샌드박싱, 워커, 워크릿이 관련된 경우, 최상위 생성 URL의 기원과 구별됩니다.
환경 설정이 완료되었는지 여부를 나타내는 플래그입니다. 처음에는 설정되지 않습니다.
사양에서는 환경에 대해 환경 삭제 단계를 정의할 수 있습니다. 이 단계는 환경을 입력으로 받습니다.
환경 삭제 단계는 실행 준비가 완료되지 못한 특정 환경에서만 실행됩니다. 예를 들어, 로드에 실패한 경우가 이에 해당됩니다.
환경 설정 객체는 환경으로, 추가로 다음과 같은 알고리즘을 지정합니다:
이 환경 설정 객체를 사용하는 모든 JavaScript 실행 컨텍스트로, 주어진 영역 내의 모든 스크립트가 이 설정 객체를 공유합니다. 클래식 스크립트를 실행하거나 모듈 스크립트를 실행할 때, 이 실행 컨텍스트는 JavaScript 실행 컨텍스트 스택의 최상위에 놓이며, 그 위에 해당 스크립트에 특화된 또 다른 실행 컨텍스트가 추가됩니다. (이 설정은 소스 텍스트 모듈 레코드의 Evaluate가 사용할 영역을 알 수 있도록 보장합니다.)
JavaScript 모듈을 가져올 때 사용하는 모듈 맵입니다.
이 환경 설정 객체를 사용하는 스크립트가 API를 호출할 때 사용하는 URL로, URL을 파싱할 때 사용됩니다.
보안 검사를 수행할 때 사용하는 기원입니다.
보안 검사를 위해 사용하는 정책을 포함하는 정책 컨테이너입니다.
이 환경 설정 객체를 사용하는 스크립트가 교차 출처 격리가 필요한 API를 사용할 수 있는지 여부를 나타내는 불리언 값입니다.
환경 설정 객체의 책임 이벤트 루프는 해당 전역 객체의 관련 에이전트의 이벤트 루프입니다.
전역 객체는 영역의 [[GlobalObject]] 필드에 있는 JavaScript 객체입니다.
이 사양에서 모든 영역은 전역 객체로 생성되며, 이 객체는 Window
, WorkerGlobalScope
,
또는 WorkletGlobalScope
객체일 수 있습니다.
전역 객체는 초기 값이 false인 오류 보고 모드라는 불리언 값을 가지고 있습니다.
전역 객체는 보류 중인 거부된 약속의 약한 집합을 가지고 있으며, 이는 집합으로서 초기에는 비어 있습니다. 이 집합은 구성원에 대한 강한 참조를 생성하지 않아야 하며, 구현은 이를 구현 정의 방식으로 크기를 제한할 수 있습니다. 예를 들어, 새 항목이 추가될 때 이전 항목을 제거하는 방식으로 이를 관리할 수 있습니다.
전역 객체는 초기에는 비어 있는 곧 알림 받을 거부된 약속의 목록을 가지고 있습니다.
항상 영역, 전역 객체 및 환경 설정 객체 간에는 1:1:1의 매핑이 존재합니다:
영역은 [[HostDefined]] 필드를 가지고 있으며, 이 필드에는 영역의 설정 객체가 포함되어 있습니다.
영역은 [[GlobalObject]] 필드를 가지고 있으며, 이 필드에는 영역의 전역 객체가 포함되어 있습니다.
환경 설정 객체의 영역 실행 컨텍스트의 영역 구성 요소는 환경 설정 객체의 영역입니다.
그 후 환경 설정 객체의 영역에는 [[GlobalObject]] 필드가 있으며, 이 필드에는 환경 설정 객체의 전역 객체가 포함됩니다.
새로운 영역을 생성하려면 에이전트 agent에서, 선택적으로 전역 객체나 전역 this 바인딩(또는 둘 다)을 생성하는 지침을 따라 다음 단계를 수행합니다:
제공된 전역 객체와 전역 this 바인딩을 생성하는 사용자 정의 사항을 포함하여 InitializeHostDefinedRealm()을 수행합니다.
realm execution context를 실행 중인 JavaScript 실행 컨텍스트로 설정합니다.
이 realm execution context를 JavaScript 실행 컨텍스트 스택에서 제거합니다.
realm을 realm execution context의 영역 구성 요소로 설정합니다.
만약 agent의 에이전트 클러스터의 교차 출처 격리 모드가
"none
"이라면,
다음을 수행합니다:
realm의 전역 객체를 global로 설정합니다.
global.[[Delete]]("SharedArrayBuffer
")를 실행하여 status를 설정합니다.
확인: status가 true인지 확인합니다.
이는 웹 콘텐츠와의 호환성을 위해 수행되며, 미래에는 이 조치가 제거될 수 있기를 기대합니다. 웹 개발자는 여전히 new WebAssembly.Memory({ shared:true, initial:0, maximum:0 }).buffer.constructor
를 통해
생성자에 접근할 수 있습니다.
realm execution context를 반환합니다.
이 사양 전반에서 알고리즘 단계를 정의할 때 어떤 영역을 사용할지—또는 동등하게, 어떤 전역 객체나 환경 설정 객체를 사용할지를 표시하는 것이 중요합니다. 일반적으로 최소한 네 가지 경우가 있습니다:
진입, 재임자, 및 현재 개념은 자격 없이 사용할 수 있는 반면, 관련 개념은 특정 플랫폼 객체에 적용되어야 한다는 점에 유의하십시오.
새로운 사양에서는 재임자 및 진입 개념을 사용하지 말아야 하며, 이는 지나치게 복잡하고 직관적이지 않기 때문입니다. 우리는 거의 모든 기존 사용을 플랫폼에서 제거하기 위해 노력하고 있습니다: 이슈 #1430에서 재임자, 이슈 #1431에서 진입에 대한 내용을 확인하십시오.
일반적으로 웹 플랫폼 사양은 this 값에 주로 적용되는 관련 개념을 사용해야 합니다. 이는 JavaScript 사양과 불일치하는데, JavaScript에서는 현재가 기본적으로 사용되기 때문입니다(예: Array.prototype.map
에서 결과를 생성하는 데
사용할 Array
생성자를 결정할 때). 하지만 이 불일치는 플랫폼에 깊이 내재되어 있기 때문에 앞으로도 이를 받아들여야 합니다.
다음 페이지들을 고려해 보십시오. a.html
은 브라우저 창에 로드되고, b.html
은 아래와 같이 iframe
에
로드되며, c.html
과 d.html
은 생략됩니다(이들은 단순히 빈 문서일 수 있습니다):
<!-- a.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Entry page</ title >
< iframe src = "b.html" ></ iframe >
< button onclick = "frames[0].hello()" > Hello</ button >
<!--b.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Incumbent page</ title >
< iframe src = "c.html" id = "c" ></ iframe >
< iframe src = "d.html" id = "d" ></ iframe >
< script >
const c = document. querySelector( "#c" ). contentWindow;
const d = document. querySelector( "#d" ). contentWindow;
window. hello = () => {
c. print. call( d);
};
</ script >
각 페이지는 자체 브라우징 컨텍스트를 가지고 있으며, 따라서 자체 영역, 전역 객체, 및 환경 설정 객체를 가집니다.
a.html
에서 버튼을 눌렀을 때 print()
메서드가 호출되면:
관련 개념이 현재 개념보다 일반적으로 더 나은 기본 선택인 이유
중 하나는, 관련 개념이 여러 번 반환되고 지속될 객체를 생성하는 데 더 적합하기 때문입니다. 예를 들어, navigator.getBattery()
메서드는 호출된 Navigator 객체의 관련
영역에서 약속을 생성합니다. 이는 다음과 같은 영향을 미칩니다: [BATTERY]
<!-- outer.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Relevant realm demo: outer page</ title >
< script >
function doTest() {
const promise = navigator. getBattery. call( frames[ 0 ]. navigator);
console. log( promise instanceof Promise); // false를 기록
console. log( promise instanceof frames[ 0 ]. Promise); // true를 기록
frames[ 0 ]. hello();
}
</ script >
< iframe src = "inner.html" onload = "doTest()" ></ iframe >
<!-- inner.html -->
<!DOCTYPE html>
< html lang = "en" >
< title > Relevant realm demo: inner page</ title >
< script >
function hello() {
const promise = navigator. getBattery();
console. log( promise instanceof Promise); // true를 기록
console. log( promise instanceof parent. Promise); // false를 기록
}
</ script >
만약 getBattery()
메서드의 알고리즘이 대신 현재 realm을 사용했다면, 모든 결과가
반대로 나타났을 것입니다. 즉, outer.html
에서 getBattery()
의
첫 번째 호출 이후에, inner.html
의 Navigator
객체는
outer.html
의 realm에서 생성된 Promise
객체를 영구적으로 저장하게 되어, hello()
함수 내부와 같은 호출은 "잘못된" realm에서 생성된 약속을 반환하게 될 것입니다. 이는 바람직하지 않기 때문에,
알고리즘은 대신 관련된 realm을 사용하여 위의 주석에 표시된 합리적인
결과를 제공합니다.
이 섹션의 나머지 부분에서는 진입, 재임자, 현재 및 관련 개념을 공식적으로 정의하는 내용을 다룹니다.
스크립트 호출 과정에서 realm 실행 컨텍스트가 JavaScript 실행 컨텍스트 스택에 푸시되거나 팝될 때, 다른 실행 컨텍스트들과 교차하여 추가됩니다.
이를 바탕으로, 진입 실행 컨텍스트를 JavaScript 실행 컨텍스트 스택에서 가장 최근에 푸시된 realm 실행 컨텍스트로 정의합니다. 진입 realm은 진입 실행 컨텍스트의 Realm 컴포넌트입니다.
그 후, 진입 설정 객체는 환경 설정 객체로, 진입 realm의 설정 객체입니다.
마찬가지로, 진입 글로벌 객체는 글로벌 객체로, 진입 realm의 글로벌 객체입니다.
모든 JavaScript 실행 컨텍스트는 코드 평가 상태의 일부로, 초기값이 0인 담당 결정 시 건너뛰기 카운터 값을 포함해야 합니다. 콜백 실행 준비 및 콜백 실행 후 정리 과정에서 이 값은 증가하거나 감소합니다.
모든 이벤트 루프는 초기값이 비어 있는 백업 담당 설정 객체 스택을 가지고 있습니다. 이는 스택에 작성자 코드가 없을 때, 하지만 작성자 코드가 어떤 방식으로든 현재 알고리즘을 실행하는 데 책임이 있는 경우, 담당 설정 객체를 결정하는 데 사용됩니다. 콜백 실행 준비 및 콜백 실행 후 정리 과정에서 이 스택이 조작됩니다. [WEBIDL]
Web IDL이 작성자 코드를 호출할 때 또는 HostEnqueuePromiseJob이 promise 작업을 호출할 때, 그들은 다음 알고리즘을 사용하여 담당 설정 객체를 결정하는 데 필요한 관련 데이터를 추적합니다:
환경 설정 객체 settings을 사용하여 콜백 실행 준비를 하려면 다음 단계를 따릅니다:
settings를 백업 담당 설정 객체 스택에 푸시합니다.
context를 최상위 스크립트 실행 컨텍스트로 설정합니다.
context가 null이 아니면 context의 담당 결정 시 건너뛰기 카운터를 증가시킵니다.
환경 설정 객체 settings을 사용하여 콜백 실행 후 정리를 하려면 다음 단계를 따릅니다:
context를 최상위 스크립트 실행 컨텍스트로 설정합니다.
이는 해당 최상위 스크립트 실행 컨텍스트에서 콜백 실행 준비의 호출과 동일할 것입니다.
context가 null이 아니면 context의 담당 결정 시 건너뛰기 카운터를 감소시킵니다.
Assert: 백업 담당 설정 객체 스택의 최상위 항목이 settings입니다.
settings를 백업 담당 설정 객체 스택에서 제거합니다.
여기서 최상위 스크립트 실행 컨텍스트는 JavaScript 실행 컨텍스트 스택의 최상위 항목 중 ScriptOrModule 구성 요소가 null이 아닌 항목이며, 스택에 그런 항목이 없다면 null입니다.
이 모든 것이 갖춰지면, 담당 설정 객체는 다음과 같이 결정됩니다:
context를 최상위 스크립트 실행 컨텍스트로 설정합니다.
context가 null이거나, context의 담당 결정 시 건너뛰기 카운터가 0보다 크면:
Assert: 백업 담당 설정 객체 스택이 비어 있지 않습니다.
이 주장은 알고리즘이 스크립트 호출이나 Web IDL 콜백 호출로 인해 실행되지 않은 경우 실패할 수 있습니다. 예를 들어, 작성자 코드가 전혀 관여하지 않은 상태에서 주기적으로 실행되는 알고리즘 안에서 담당 설정 객체를 얻으려는 시도는 이 주장을 실패하게 만듭니다. 이러한 경우 담당 개념은 사용할 수 없습니다.
백업 담당 설정 객체 스택의 최상위 항목을 반환합니다.
context의 Realm 구성 요소의 설정 객체를 반환합니다.
그런 다음, 담당 realm은 설정 객체의 realm입니다.
마찬가지로, 담당 글로벌 객체는 글로벌 객체로, 담당 설정 객체의 글로벌 객체입니다.
다음 일련의 예는 다양한 메커니즘이 담당 개념의 정의에 어떻게 기여하는지 명확하게 설명하기 위한 것입니다:
다음 시작 예를 고려해 보십시오:
<!DOCTYPE html>
< iframe ></ iframe >
< script >
frames[ 0 ]. postMessage( "some data" , "*" );
</ script >
여기에는 환경 설정 객체가 있습니다. 이 두
가지는 window
와 frames[0]
의 환경 설정 객체입니다. 우리가 신경 써야 할 것은 알고리즘이 postMessage()
메서드를 실행할 때
어떤 담당 설정 객체인지입니다.
담당 설정 객체는 window
여야 하며, 알고리즘을 실행한 작성자 코드가 frames[0]
가 아닌 window
에서 실행된다는
직관적인 개념을 포착해야 합니다. window post
message steps는 담당 설정
객체를 사용하여 결과 source
속성을 결정하고, 이 경우
window
가 메시지의 소스임이 분명합니다.
위에서 설명한 단계가 window
의 직관적으로 원하는 결과를 어떻게 얻을 수 있는지 설명하겠습니다.
window post message steps가 담당 설정 객체를 조회할 때 최상위
스크립트 실행 컨텍스트는 JavaScript 실행 컨텍스트 스택에 푸시된 ScriptEvaluation 알고리즘 동안 script
요소와 일치합니다. Web IDL 콜백 호출이
포함되지 않으므로 컨텍스트의 담당 결정 시 건너뛰기 카운터가 0이며, 이는 담당 설정 객체를 결정하는 데 사용됩니다.
결과는 window
의 환경
설정 객체입니다.
(frames[0]의 환경 설정 객체가
postMessage()
메서드를
호출할 때 이 관련 설정 객체의 대상임을 결정하는 데
관여한다는 점에 유의하십시오. 반면에 담당은 소스를 결정하는 데 사용됩니다.)
다음과 같은 더 복잡한 예를 고려해 보십시오:
<!DOCTYPE html>
< iframe ></ iframe >
< script >
const bound = frames[ 0 ]. postMessage. bind( frames[ 0 ], "some data" , "*" );
window. setTimeout( bound);
</ script >
이 예는 이전 것과 매우 유사하지만, Function.prototype.bind
와 setTimeout()
을 통해 추가적인 간접성이 있습니다. 그러나 답은
동일해야 합니다: 알고리즘을 비동기적으로 호출한다고 해서 담당 개념이 변경되어서는 안 됩니다.
이번에는 결과가 더 복잡한 메커니즘을 포함합니다:
bound
가 Web IDL 콜백 타입으로 변환될 때, 담당 설정 객체는
window
에 해당합니다(위의 시작 예와 동일한 방식). Web IDL은 이를 결과 콜백 값의 콜백 컨텍스트로
저장합니다.
setTimeout()
에 의해 게시된 작업이 실행될 때, 해당 작업의 알고리즘은 Web IDL을 사용하여 저장된 콜백 값을 호출합니다.
Web IDL은 위의 콜백 실행 준비 알고리즘을
호출합니다. 이것은 저장된 콜백 컨텍스트를 백업 담당 설정 객체 스택에 푸시합니다. 이 시점에서(타이머 작업 내부) 스택에
작성자 코드가 없기 때문에 최상위 스크립트 실행 컨텍스트는 null이며, 담당 결정 시 건너뛰기 카운터가
증가하지 않습니다.
콜백을 호출하면 bound
가 호출되고, 이는 postMessage()
메서드를
호출합니다. postMessage()
알고리즘이 담당 설정 객체를 조회할 때 스택에
작성자 코드가 없으므로 JavaScript 실행 컨텍스트 스택에는 ScriptEvaluation 컨텍스트나 유사한 것이 포함되지 않습니다. 이 경우 백업 담당
설정 객체 스택으로 돌아갑니다. 위에서 언급한 것처럼 이 스택의 최상위 항목은 window
의 관련 설정 객체일 것입니다. 따라서 postMessage()
알고리즘을
실행하는 동안 담당 설정 객체로 사용됩니다.
다음 마지막으로, 더 복잡한 예를 고려해 보십시오:
<!-- a.html -->
<!DOCTYPE html>
< button > click me</ button >
< iframe ></ iframe >
< script >
const bound = frames[ 0 ]. location. assign. bind( frames[ 0 ]. location, "https://example.com/" );
document. querySelector( "button" ). addEventListener( "click" , bound);
</ script >
<!-- b.html -->
<!DOCTYPE html>
< iframe src = "a.html" ></ iframe >
< script >
const iframe = document. querySelector( "iframe" );
iframe. onload = function onLoad() {
iframe. contentWindow. document. querySelector( "button" ). click();
};
</ script >
여기에는 다시 두 가지 중요한 환경 설정
객체가 있습니다: 하나는 a.html
의 것이고, 다른 하나는 b.html
의 것입니다. location.assign()
메서드가 Location
-object
navigate 알고리즘을 트리거할 때, 어떤 담당 설정 객체가 사용될까요? 앞서와 마찬가지로, 이는 직관적으로 a.html
의
것일 것입니다. 왜냐하면 click
리스너가 원래 a.html
에서 예약되었기 때문에, b.html
이 관여한다고 해도, 리스너를 실행하게 만든 담당은 여전히
a.html
의 것입니다.
콜백 설정은 이전 예와 유사합니다: bound
가 Web IDL 콜백 타입으로 변환될 때, 담당 설정 객체는 a.html
의 것으로 저장되고, 이는 콜백의 콜백 컨텍스트로 저장됩니다.
이제 click()
메서드가 b.html
안에서 호출될 때, 이는
이벤트를 디스패치하여 a.html
내부의 버튼에서 click
이벤트가 발생하게 만듭니다. 이번에는 이벤트 디스패치의 일환으로 콜백 실행 준비 알고리즘이 실행될 때 스택에 작성자 코드가 존재합니다; 최상위
스크립트 실행 컨텍스트는 onLoad
함수의 것이며, 그 담당 결정 시 건너뛰기 카운터가 증가됩니다. 또한,
a.html
의 환경 설정
객체(이는 EventHandler
의 콜백 컨텍스트로 저장됩니다.)가 백업 담당 설정 객체 스택에 푸시됩니다.
이제 Location
-object
navigate 알고리즘이 담당 설정
객체를 조회할 때, 최상위 스크립트 실행 컨텍스트는 여전히 onLoad
함수의
것입니다(콜백으로 바인드된 함수를 사용하고 있기 때문입니다). 그러나 그 담당 결정 시 건너뛰기 카운터 값은 1이므로, 우리는 백업 담당
설정 객체 스택으로 되돌아갑니다. 이것은 예상대로 a.html
의 환경 설정 객체를 반환합니다.
이것은 iframe
이 a.html
내부에서 탐색을 트리거한 경우에도, 실제로 a.html
자체가 Document
로 사용되어, 그에 따라 요청 클라이언트 등을 결정하게 된다는 것을 의미합니다. 이것은 웹 플랫폼에서 담당 개념을 사용하는 유일한
정당한 사례일 것입니다. 다른 모든 경우에는 담당 개념을 사용하는 결과가 단순히 혼란스러울 뿐이며, 적절한 경우 현재 또는 관련 개념으로 전환하기를 희망합니다.
JavaScript 명세는 현재 realm, 또는 "현재 Realm Record"라고도 불리는 것을 정의합니다. [JAVASCRIPT]
그런 다음, 현재 설정 객체는 환경 설정 객체로, 현재 realm의 환경 설정 객체입니다.
마찬가지로, 현재 글로벌 객체는 글로벌 객체로, 현재 realm의 글로벌 객체입니다.
플랫폼 객체의 관련 realm은 그것의 [[Realm]] 필드 값입니다.
그런 다음, 플랫폼 객체 o의 관련 설정 객체는 환경 설정 객체로, o의 관련 realm의 환경 설정 객체입니다.
마찬가지로, 플랫폼 객체 o의 관련 글로벌 객체는 글로벌 객체로, o의 관련 realm의 글로벌 객체입니다.
스크립트가 활성화됨은 환경 설정 객체 settings에 대해 다음 모든 조건이 참일 때를 말합니다:
Window
객체가 아니거나,
settings의 글로벌 객체에 연결된 문서의 활성 샌드박싱
플래그 집합에 샌드박스된 스크립트 브라우징 컨텍스트
플래그가 설정되지 않았습니다.
스크립트가 비활성화됨은 환경 설정 객체에 대해 스크립트가 활성화되지 않은 경우, 즉 위의 조건 중 하나라도 거짓인 경우를 말합니다.
스크립팅이 활성화됩니다 노드 node의 경우, node의 노드 문서의 탐색 컨텍스트가 null이 아니고, 스크립팅이 활성화됩니다 node의 관련 설정 객체에 대해.
스크립트가 비활성화됨은 노드에 대해 스크립트가 활성화되지 않았을 때, 즉 node의 노드 문서의 브라우징 컨텍스트가 null이거나 스크립트가 비활성화됨이 node의 관련 설정 객체에 대해 설정되었을 때를 말합니다.
환경 environment는 다음 알고리즘이 true를 반환하는 경우 보안 컨텍스트입니다:
environment가 환경 설정 객체인 경우:
global을 environment의 글로벌 객체로 설정합니다.
global이 WorkerGlobalScope
인
경우:
global이 WorkletGlobalScope
인
경우, true를 반환합니다.
워크릿은 보안 컨텍스트에서만 생성될 수 있습니다.
만약 URL이 잠재적으로 신뢰할 수 있는지 여부를 environment의
최상위 생성 URL로 판별한 결과가
"잠재적으로 신뢰할 수 있음
"이라면 true를 반환합니다.
false를 반환합니다.
환경 environment가 보안 컨텍스트가 아닌 경우, 비보안 컨텍스트입니다.
스크립트는 두 가지 가능한 구조 중 하나입니다(즉, 고전 스크립트 또는 모듈 스크립트). 모든 스크립트는 다음과 같은 항목을 포함합니다:
다음 중 하나:
구문 분석 실패를 나타내는 null.
스크립트 소스 텍스트를 구문 분석할 수 없음을 나타내는 JavaScript 값으로, 기록이 null일 때만 의미가 있습니다.
이 값은 스크립트 생성 시 즉각적인 구문 분석 오류를 내부적으로 추적하는 데 사용되며, 직접적으로 사용되지 않습니다. 대신, 이 스크립트에서 "무슨 일이 잘못되었는지"를 결정할 때는 재throw할 오류를 참조하십시오.
평가가 성공하지 못하게 할 오류를 나타내는 JavaScript 값입니다. 스크립트를 실행하려는 모든 시도에서 재throw됩니다.
이 오류 값은 JavaScript 사양에 의해 제공되므로 null이 될 수 없으며, 오류가 발생하지 않았음을 나타내기 위해 null을 사용합니다.
null 또는 모듈 지정자를 해결하기 위해 사용되는 기본 URL. 이 값이 null이 아닌 경우, 외부 스크립트의 경우에는 스크립트를 얻은 URL이거나, 인라인 스크립트의 경우에는 포함된 문서의 문서 기본 URL입니다.
고전 스크립트는 다음과 같은 추가 항목을 포함하는 스크립트의 한 유형입니다:
부울 값으로, true이면 이 스크립트에서 발생하는 오류에 대한 정보가 제공되지 않음을 의미합니다. 이는 교차 출처 스크립트에서 오류를 음소거하여 개인 정보를 유출할 수 없도록 하는 데 사용됩니다.
모듈 스크립트는 추가 항목이 없는 스크립트의 또 다른 유형입니다.
모듈 스크립트는 네 가지 유형으로 분류될 수 있습니다:
모듈 스크립트는 자바스크립트 모듈 스크립트입니다. 만약 해당 기록이 소스 텍스트 모듈 기록이라면.
모듈 스크립트는 CSS 모듈 스크립트입니다. 만약 해당 기록이 합성 모듈 기록이고, CSS 모듈 스크립트를 생성 알고리즘을 통해 생성되었을 경우. CSS 모듈 스크립트는 구문 분석된 CSS 스타일시트를 나타냅니다.
모듈 스크립트는 JSON 모듈 스크립트입니다. 만약 해당 기록이 합성 모듈 기록이고, JSON 모듈 스크립트를 생성 알고리즘을 통해 생성되었을 경우. JSON 모듈 스크립트는 구문 분석된 JSON 문서를 나타냅니다.
모듈 스크립트는 WebAssembly 모듈 스크립트입니다. 만약 해당 기록이 WebAssembly 모듈 기록이라면.
CSS 스타일시트와 JSON 문서는 종속 모듈을 가져오지 않으며, 평가 중 예외를 발생시키지 않으므로, 가져오기 옵션과 기본 URL은 CSS 모듈 스크립트와 JSON 모듈 스크립트에서 항상 null입니다.
활성 스크립트는 다음 알고리즘에 의해 결정됩니다:
record를 GetActiveScriptOrModule()로 설정합니다.
record가 null이면 null을 반환합니다.
record.[[HostDefined]]를 반환합니다.
활성 스크립트 개념은 현재 import()
기능에서만 사용되며, 상대적 모듈 지정자를 해결하기 위한 기본
URL을 결정하기 위해 사용됩니다.
이 섹션에서는 스크립트를 가져오는 여러 알고리즘을 소개하며, 필요한 다양한 입력을 받아 고전 스크립트 또는 모듈 스크립트로 결과를 도출합니다.
스크립트 가져오기 옵션은 다음과 같은 구조체 항목을 포함하는 구조체입니다:
초기 가져오기와 가져오는 모든 모듈에 대해 사용되는 암호화 nonce 메타데이터
초기 가져오기에 사용되는 무결성 메타데이터
초기 가져오기와 가져오는 모든 모듈에 대해 사용되는 파서 메타데이터
초기 가져오기에 사용되는 자격 증명 모드 (모듈 스크립트에 대해) 및 가져오는 모든 모듈에 대해 사용되는 자격 증명 모드 (고전 스크립트와 모듈 스크립트 모두에 대해)
초기 가져오기와 가져오는 모든 모듈에 대해 사용되는 리퍼러 정책
초기 가져오기와 가져오는 모든 모듈에 대해 사용되는 렌더링 차단의 부울 값입니다. 별도로 명시되지 않는 한, 이 값은 false입니다.
초기 가져오기에 사용되는 우선순위
기억하세요, import()
기능을 통해 고전 스크립트는 모듈 스크립트를 가져올 수 있습니다.
기본 스크립트 가져오기 옵션은 스크립트 가져오기 옵션으로, 암호화 nonce는 빈 문자열, 무결성
메타데이터는 빈 문자열, 파서 메타데이터는 "not-parser-inserted
", 자격 증명 모드는 "same-origin
", 리퍼러 정책은 빈 문자열, 그리고 가져오기 우선순위는 "auto
"입니다.
다음은 요청 request와 스크립트 가져오기 옵션 options을 사용하여 정의됩니다:
request의 암호화 nonce 메타데이터를 options의 암호화 nonce로 설정하고, request의 무결성 메타데이터를 options의 무결성 메타데이터로 설정하며, request의 파서 메타데이터를 options의 파서 메타데이터로 설정하고, request의 리퍼러 정책을 options의 리퍼러 정책으로 설정하며, request의 렌더링 차단을 options의 렌더링 차단으로 설정하고, request의 우선순위를 options의 우선순위로 설정합니다.
request의 암호화 nonce 메타데이터를 options의 암호화 nonce로 설정하고, request의 무결성 메타데이터를 options의 무결성 메타데이터로 설정하며, request의 파서 메타데이터를 options의 파서 메타데이터로 설정하고, request의 자격 증명 모드를 options의 자격 증명 모드로 설정하며, request의 리퍼러 정책을 options의 리퍼러 정책으로 설정하고, request의 렌더링 차단을 options의 렌더링 차단으로 설정하며, request의 우선순위를 options의 우선순위로 설정합니다.
다음과 같은 입력을 받아 하위 스크립트 가져오기 옵션을 얻으려면, 스크립트 가져오기 옵션 originalOptions, URL url, 그리고 환경 설정 객체 settingsObject을(를) 사용합니다:
newOptions을(를) originalOptions의 복사본으로 만듭니다.
integrity을(를) 빈 문자열로 설정합니다.
만약 settingsObject의 글로벌 객체가 Window
객체라면, integrity를
url 및 settingsObject와 함께 모듈 무결성 메타데이터 해결의 결과로 설정합니다.
newOptions의 무결성 메타데이터를 integrity로 설정합니다.
newOptions의 가져오기 우선순위를
"auto
"로 설정합니다.
newOptions을 반환합니다.
모듈 무결성 메타데이터 해결을 하려면, 다음과 같은 입력이 필요합니다: URL url과 환경 설정 객체 settingsObject.
map의 무결성[url]을 반환합니다.
아래의 여러 알고리즘은 fetch 수행
훅 알고리즘으로 맞춤화할 수 있습니다. 이 알고리즘은 요청, 불리언
isTopLevel, 그리고 processCustomFetchResponse
알고리즘을 사용합니다. 이 알고리즘은 processCustomFetchResponse를 응답과 함께 실행하며,
실패 시 null, 또는 응답 본문을 포함하는 바이트 시퀀스를 반환합니다. isTopLevel은
모든 클래식
스크립트 페치에 대해 참이며, 외부 모듈 스크립트 그래프를 가져올 때 또는 모듈 워커 스크립트 그래프를 가져올 때 초기
페치에 대해서만 참이 됩니다. 그러나 그래프 전반에 걸쳐 import
문 또는 import()
표현식으로 인해 발생하는 페치에 대해서는 거짓입니다.
기본적으로, fetch 수행 훅을 제공하지 않으면 아래 알고리즘들은 단순히 주어진 요청을 페치하게 됩니다. 알고리즘별 맞춤화와 함께 요청과 그 결과 응답을 검증합니다.
이 알고리즘별 맞춤화 위에 자신의 맞춤화를 추가하려면, 주어진 요청을 수정하고, 페치한 후, 그 결과 응답을 특정 검증을 수행하는 fetch 수행 훅을 제공합니다. 검증이 실패하면 네트워크 오류로 완료됩니다.
이 훅은 또한 응답 캐시를 유지하고 페치를 전혀 수행하지 않는 것과 같은 미세한 맞춤화를 수행하는 데에도 사용할 수 있습니다.
서비스 워커는 이 훅에 대한 자체 옵션으로 이 알고리즘들을 실행하는 사양의 예입니다. [SW]
이제 알고리즘 자체로 넘어가겠습니다.
주어진 URL, 환경 설정 객체 settingsObject, 스크립트 페치 옵션 options, CORS 설정 속성 상태 corsSetting, 인코딩 encoding, 그리고 알고리즘 onComplete를 사용하여 클래식 스크립트를 가져오기를 수행하려면, 다음 단계를 실행합니다. onComplete는 실패 시 null, 성공 시 클래식 스크립트를 수락하는 알고리즘이어야 합니다.
request를 url, "script
", 그리고 corsSetting을 사용하여 잠재적인 CORS
요청 생성의 결과로 설정합니다.
request의 클라이언트를 settingsObject로 설정합니다.
request의 initiator
type을 "script
"로 설정합니다.
request 및 options을 사용하여 클래식 스크립트 요청 설정을 수행합니다.
request를 response와 null, 실패 또는 바이트 시퀀스 bodyBytes를 사용하여 아래 processResponseConsumeBody 단계를 통해 페치합니다.
response는 CORS-동일 출처 또는 CORS-교차 출처일 수 있습니다. 이는 오류 보고 방법에만 영향을 미칩니다.
response를 response의 안전하지 않은 응답으로 설정합니다.
다음 중 하나라도 참이면:
그렇다면 onComplete를 null로 실행하고 이 단계를 중단합니다.
역사적인 이유로, 이 알고리즘은 이 섹션의 다른 스크립트 가져오기 알고리즘과 달리 MIME 유형 검사를 포함하지 않습니다.
response의 헤더 목록을 사용하여 MIME 유형 추출의 결과로 potentialMIMETypeForEncoding을 설정합니다.
potentialMIMETypeForEncoding과 encoding을 사용하여 레거시 인코딩 추출의 결과로 encoding을 설정합니다.
이 과정은 MIME 유형 본질을 의도적으로 무시합니다.
encoding을 기본 인코딩으로 사용하여 bodyBytes를 유니코드로 디코딩한 결과를 sourceText로 설정합니다.
파일에 BOM이 포함된 경우 디코딩 알고리즘은 encoding을 재정의합니다.
response가 CORS-교차 출처였다면 mutedErrors를 true로 설정하고, 그렇지 않으면 false로 설정합니다.
sourceText, settingsObject, response의 URL, options, mutedErrors 및 url을 사용하여 클래식 스크립트 생성의 결과로 script를 설정합니다.
주어진 URL, 환경 설정 객체 fetchClient, 대상 destination, 환경 설정 객체 settingsObject, 알고리즘 onComplete 및 선택적 fetch 수행 훅 performFetch를 사용하여 클래식 워커 스크립트를 가져오기를 수행하려면, 다음 단계를 실행합니다. onComplete는 실패 시 null, 성공 시 클래식 스크립트를 수락하는 알고리즘이어야 합니다.
다음의 새로운 요청을 request로 설정합니다: url이 URL, fetchClient이 클라이언트,
destination이 대상, initiator type이 "other
", 모드가 "same-origin
", 자격 증명 모드가 "same-origin
", 파서 메타데이터가 "파서 삽입되지 않음
", 그리고 URL 자격 증명 사용 플래그가 설정된 상태로 설정됩니다.
performFetch가 주어졌다면, request, true, 및 아래에 정의된 processResponseConsumeBody와 함께 performFetch를 실행합니다.
그렇지 않으면, request를 아래에 정의된 processResponseConsumeBody로 설정하여 페치합니다.
두 경우 모두, 응답 response 및 null, 실패 또는 바이트 시퀀스 bodyBytes를 받은 후 processResponseConsumeBody 알고리즘을 실행합니다:
response를 response의 안전하지 않은 응답으로 설정합니다.
다음 중 하나라도 참이면:
그렇다면 onComplete를 null로 실행하고 이 단계를 중단합니다.
다음이 모두 참인 경우:
response의 URL의 스킴이 HTTP(S) 스킴인 경우;
response의 헤더 목록에서 MIME 유형 추출 결과가 JavaScript MIME 유형이 아닌 경우;
그렇다면 onComplete를 null로 실행하고 이 단계를 중단합니다.
기타 페치 스킴은 역사적인 웹 호환성 문제로 MIME 유형 검사를 면제받습니다. 향후 이 부분을 강화할 수 있습니다; 이슈 #3255를 참조하십시오.
bodyBytes를 UTF-8로 디코딩한 결과를 sourceText로 설정합니다.
script을 sourceText, settingsObject, response의 URL 및 기본 스크립트 가져오기 옵션을 사용하여 클래식 스크립트 생성 단계를 실행한 결과로 설정하십시오.
script를 사용하여 onComplete를 실행합니다.
주어진 URL, 환경 설정 객체 settingsObject, 및 선택적 fetch 수행 훅 performFetch를 사용하여 클래식 워커-수입 스크립트 가져오기를 수행하려면, 다음 단계를 실행합니다. 알고리즘은 성공 시 클래식 스크립트를 반환하거나, 실패 시 예외를 던집니다.
response를 null로 설정합니다.
bodyBytes를 null로 설정합니다.
다음의 새로운 요청을 request로 설정합니다: url이 URL, settingsObject가 클라이언트,
destination이 "스크립트
", initiator type이 "기타
", 파서 메타데이터가 "파서 삽입되지 않음
", 그리고 URL 자격 증명 사용 플래그가 설정된 상태로 설정됩니다.
performFetch가 주어졌다면, request, isTopLevel, 및 아래에 정의된 processResponseConsumeBody와 함께 performFetch를 실행합니다.
그렇지 않으면, request를 아래에 정의된 processResponseConsumeBody로 설정하여 페치합니다.
두 경우 모두, 응답 res 및 null, 실패 또는 바이트 시퀀스 bb를 받은 후 processResponseConsumeBody 알고리즘을 실행합니다:
bodyBytes를 bb로 설정합니다.
response를 res로 설정합니다.
response가 null이 될 때까지 일시 중지합니다.
이 섹션의 다른 알고리즘과 달리, 페치 프로세스는 여기에서 동기식으로 수행됩니다.
response를 response의 안전하지 않은 응답으로 설정합니다.
다음 중 하나라도 참이면:
bodyBytes가 null이거나 실패인 경우;
response의 헤더 목록에서 MIME 유형 추출 결과가 JavaScript MIME 유형이 아닌 경우;
그렇다면 "NetworkError
" DOMException
을
던집니다.
bodyBytes를 UTF-8로 디코딩한 결과를 sourceText로 설정합니다.
response가 CORS-교차 출처였다면 mutedErrors를 true로 설정하고, 그렇지 않으면 false로 설정합니다.
script을 sourceText, settingsObject, response의 URL, 기본 스크립트 가져오기 옵션 및 mutedErrors을 주고 클래식 스크립트 생성 단계를 실행한 결과로 설정하십시오.
script를 반환합니다.
URL, 환경 설정 객체 settingsObject, 스크립트 가져오기 옵션 options, 및 알고리즘 onComplete이 주어진 경우, 다음 단계를 실행하여 외부 모듈 스크립트 그래프를 가져옵니다. onComplete는 null(실패 시) 또는 모듈 스크립트 (성공 시)을 수락하는 알고리즘이어야 합니다.
settingsObject을(를) 주어진 추가 가져오기 맵을 허용하지 않음으로 설정합니다.
url, settingsObject, "스크립트
", options,
settingsObject, "클라이언트
", true 및 다음 단계를 실행하여
단일 모듈 스크립트를
가져옵니다:
result가 null인 경우, onComplete을 null로 실행하고 이 단계를 중단합니다.
settingsObject, "스크립트
", 및 onComplete을 주어진 상태로
result의 후손을 가져오고 연결하는
단계를 실행합니다.
URL, destination, 환경 설정 객체 settingsObject, 스크립트 가져오기 옵션 options, 및 알고리즘 onComplete이 주어진 경우, 다음 단계를 실행하여 모듈 프리로드 모듈 스크립트 그래프를 가져옵니다. onComplete는 null(실패 시) 또는 모듈 스크립트 (성공 시)을 수락하는 알고리즘이어야 합니다.
settingsObject을(를) 주어진 추가 가져오기 맵을 허용하지 않음으로 설정합니다.
url, settingsObject, destination, options,
settingsObject,
"클라이언트
", true 및 다음 단계를 실행하여 단일 모듈 스크립트를 가져옵니다:
result를 사용하여 onComplete을 실행합니다.
result가 null이 아닌 경우, settingsObject, destination 및 빈 알고리즘을 주어진 상태로 result의 후손을 가져오고 연결하는 단계를 실행할 수 있습니다.
일반적으로 이 단계를 수행하면 성능이 향상됩니다. 이는 나중에 필연적으로 요청될 모듈을 미리 로드할 수 있게 하며, 외부 모듈 스크립트 그래프를 가져오는 알고리즘과 같은 알고리즘을 통해 전체 그래프를 가져오도록 합니다. 그러나 사용자는 대역폭이 제한된 상황이나 관련 페치가 이미 진행 중인 상황에서 이를 건너뛰고 싶을 수 있습니다.
문자열 sourceText, URL baseURL, 환경 설정 객체 settingsObject, 스크립트 가져오기 옵션 options, 및 알고리즘 onComplete이 주어진 경우, 다음 단계를 실행하여 인라인 모듈 스크립트 그래프를 가져옵니다. onComplete는 null(실패 시) 또는 모듈 스크립트 (성공 시)을 수락하는 알고리즘이어야 합니다.
settingsObject을(를) 주어진 추가 가져오기 맵을 허용하지 않음으로 설정합니다.
sourceText, settingsObject, baseURL, options을 사용하여 JavaScript 모듈 스크립트를 생성한 결과를 script로 설정합니다.
settingsObject, "스크립트
", 및 onComplete을 주어진 상태로 script의 후손을
가져오고 연결하는
단계를 실행합니다.
다음 단계를 실행하여 모듈 워커 스크립트 그래프를 가져옵니다. URL url, 환경 설정 객체 fetchClient, 대상 destination, 자격 증명 모드 credentialsMode, 환경 설정 객체 settingsObject, 및 알고리즘 onComplete이 주어진 경우, 워크릿/모듈 워커 스크립트 그래프를 가져옵니다 url, fetchClient, destination, credentialsMode, settingsObject, 및 onComplete이 주어진 상태에서.
다음 단계를 실행하여 워크릿 스크립트 그래프를 가져옵니다. URL url, 환경 설정 객체 fetchClient, 대상 destination, 자격 증명 모드 credentialsMode, 환경 설정 객체 settingsObject, 모듈 응답 맵 moduleResponsesMap, 및 알고리즘 onComplete이 주어진 경우, 워크릿/모듈 워커 스크립트 그래프를 가져옵니다 url, fetchClient, destination, credentialsMode, settingsObject, onComplete 및 다음 페치 훅을 수행합니다 주어진 request와 processCustomFetchResponse를 사용하여.
request의 URL을 requestURL로 설정합니다.
만약 moduleResponsesMap[requestURL]이 "fetching
" 상태라면,
해당 항목의 값이 변경될 때까지
병렬로 대기한 후,
작업을 큐에 넣습니다
네트워킹 작업 소스에서
아래 단계를 실행합니다.
만약 moduleResponsesMap[requestURL]이 존재한다면:
moduleResponsesMap[requestURL]을 cached로 설정합니다.
cached[0]과 cached[1]을 사용하여 processCustomFetchResponse를 실행합니다.
리턴합니다.
moduleResponsesMap[requestURL]을 "fetching
" 상태로
설정합니다.
페치 request, 다음 단계를 실행합니다. 응답 response와 null, 실패 또는 바이트 시퀀스 bodyBytes가 주어질 때:
moduleResponsesMap[requestURL]을 (response, bodyBytes)로 설정합니다.
response와 bodyBytes를 사용하여 processCustomFetchResponse를 실행합니다.
다음 알고리즘은 이 명세서 내에서만 외부 모듈 스크립트 그래프 가져오기 또는 위의 유사한 개념의 일부로 사용하기 위한 것이며, 다른 명세서에서 직접 사용해서는 안 됩니다.
이 다이어그램은 이러한 알고리즘이 위의 것들과 서로 어떻게 관련되어 있는지 보여줍니다:
워크렛/모듈 워커 스크립트 그래프 가져오기를 수행하려면 URL url, 환경 설정 객체 fetchClient, 대상 destination, 자격 증명 모드 credentialsMode, 환경 설정 객체 settingsObject, 알고리즘 onComplete, 그리고 선택적으로 fetch 수행 훅 performFetch를 주어진 대로 실행하세요. onComplete는 null(실패 시) 또는 모듈 스크립트(성공 시)를 수락하는 알고리즘이어야 합니다.
options를 스크립트 가져오기
옵션으로 설정하고,
암호화
난수는 빈 문자열로,
무결성 메타데이터는 빈 문자열로,
파서 메타데이터는
"not-parser-inserted
",
자격 증명 모드는
credentialsMode,
리퍼러 정책은 빈 문자열로,
가져오기 우선순위는
"auto
"로 설정하세요.
url, fetchClient, destination, options,
settingsObject,
"client
", true, 그리고 아래 정의된 대로 onSingleFetchComplete을 사용하여
단일 모듈 스크립트
가져오기를 수행하세요.
performFetch가 주어졌다면, 그것도 함께 전달하세요.
onSingleFetchComplete이 result를 받았을 때의 알고리즘은 다음과 같습니다:
result가 null인 경우, null을 주고 onComplete을 실행한 다음 이 단계를 중단하세요.
result를 주고 모듈 스크립트의 자손을 가져오고 링크를 fetchClient, destination, 그리고 onComplete을 사용하여 수행하세요. performFetch가 주어졌다면, 그것도 함께 전달하세요.
모듈 스크립트의 자손을 가져오고 링크를 수행하려면 모듈 스크립트 moduleScript, 환경 설정 객체 fetchClient, 대상 destination, 알고리즘 onComplete, 그리고 선택적으로 fetch 수행 훅 performFetch를 주어진 대로 실행하세요. onComplete는 null(실패 시) 또는 모듈 스크립트(성공 시)를 수락하는 알고리즘이어야 합니다.
record를 moduleScript의 레코드로 설정하세요.
record가 null인 경우, 다음을 수행하세요:
state를 레코드 { [[ParseError]]: null, [[Destination]]: destination, [[PerformFetch]]: null, [[FetchClient]]: fetchClient }로 설정하세요.
performFetch가 주어졌다면, state.[[PerformFetch]]를 performFetch로 설정하세요.
loadingPromise를 record.LoadRequestedModules(state)로 설정하세요.
이 단계에서는 모듈의 모든 전이 종속성을 재귀적으로 로드합니다.
loadingPromise가 충족될 때, 다음 단계를 실행하세요:
loadingPromise가 거부되면, 다음 단계를 실행하세요:
state.[[ParseError]]가 null이 아닌 경우, moduleScript의 재투척할 오류를 state.[[ParseError]]로 설정하고 moduleScript를 주고 onComplete을 실행하세요.
그 외의 경우, null을 주고 onComplete을 실행하세요.
state.[[ParseError]]가 null인 경우, loadingPromise가 로딩 오류로 인해 거부된 것입니다.
단일 모듈 스크립트를 가져오기를 수행하려면, URL url, 환경 설정 객체 fetchClient, 대상 destination, 스크립트 가져오기 옵션 options, 환경 설정 객체 settingsObject, 리퍼러 referrer, 선택적 ModuleRequest 레코드 moduleRequest, isTopLevel이라는 부울 값, 알고리즘 onComplete, 그리고 선택적 fetch 수행 훅 performFetch를 주어진 대로 실행하세요. onComplete는 null(실패 시) 또는 모듈 스크립트(성공 시)를 수락하는 알고리즘이어야 합니다.
moduleType을 "javascript-or-wasm
"으로 설정하십시오.
만약 moduleRequest가 주어졌다면, moduleRequest를 사용하여 모듈 요청으로부터 모듈 유형 단계를 실행한 결과로 moduleType을 설정하십시오.
확인: moduleType과 settingsObject를 주고 실행한 모듈 유형 허용됨 단계의 결과가 참인지 확인하십시오. 그렇지 않으면, moduleRequest의 [[Attributes]]를 검사할 때 실패가 발생했을 것이고, 우리는 이 지점에 도달하지 못했을 것입니다. HostLoadImportedModule 또는 단일 가져온 모듈 스크립트 가져오기에서 오류가 발생했을 것입니다.
moduleMap을 settingsObject의 모듈 맵으로 설정하십시오.
만약 moduleMap[(url, moduleType)]이 "fetching
"이면, 그 항목의 값이 변경될
때까지 병렬로 대기한 다음, 네트워킹 작업 소스에 대한 작업을 큐에 넣어 다음 단계를 계속 진행하십시오.
만약 moduleMap[(url, moduleType)]이 존재하면, onComplete를 실행하여 moduleMap[(url, moduleType)]을 반환하십시오.
request를 새로운 요청으로 설정하고, 그 URL을 url, 모드를 "cors
", referrer를 referrer로 설정하고, 클라이언트를
fetchClient로 설정하십시오.
destination과 moduleType을 사용하여 모듈 유형으로부터 가져오기 목적지 단계를 실행한 결과로 request의 목적지를 설정하십시오.
만약 destination이 "worker
", "sharedworker
",
"serviceworker
"이고, isTopLevel이 참이라면, request의 모드를 "same-origin
"으로 설정하십시오.
request의 발신자 유형을 "script
"로 설정하십시오.
모듈 스크립트 요청을 설정하십시오. request와 options을 주고 실행하십시오.
만약 performFetch가 주어졌다면, request, isTopLevel, 그리고 아래 정의된 processResponseConsumeBody로 performFetch를 실행하십시오.
그렇지 않으면, fetch request를 실행하고, processResponseConsumeBody를 아래 정의된 processResponseConsumeBody로 설정하십시오.
두 경우 모두, processResponseConsumeBody를 응답 response와 null, 실패, 또는 바이트 시퀀스 bodyBytes를 주고 실행하는 다음 알고리즘으로 설정하십시오.
response는 항상 CORS-same-origin입니다.
다음 중 하나라도 참이라면:
그렇다면 설정하십시오. moduleMap[(url, moduleType)]을 null로 설정하고, null을 주고 onComplete을 실행한 다음, 이 단계를 중단하십시오.
moduleScript을 null로 설정하십시오.
referrerPolicy를 Referrer-Policy
헤더에서 파싱한 결과로
설정하십시오. [REFERRERPOLICY]
만약 referrerPolicy가 빈 문자열이 아니라면, options의 참조자 정책을 referrerPolicy로 설정하십시오.
만약 mimeType의 핵심이 "application/wasm
"이고,
moduleType이 "javascript-or-wasm
"인 경우, moduleScript를 WebAssembly 모듈 스크립트 생성 단계를 실행한
결과로 bodyBytes, settingsObject, 응답의 URL과
options을 주고 설정하십시오.
그렇지 않으면:
sourceText를 UTF-8로 디코딩한 bodyBytes로 설정하십시오.
만약 mimeType이 자바스크립트 MIME 유형이고, moduleType이
"javascript-or-wasm
"인 경우, moduleScript를 자바스크립트 모듈 스크립트 생성 단계를
실행한 결과로 sourceText, settingsObject, 응답의 URL과 options을 주고 설정하십시오.
만약 mimeType의 MIME 유형 핵심이 "text/css
"이고,
moduleType이 "css
"인 경우, moduleScript를 CSS 모듈 스크립트 생성 단계를 실행한 결과로
sourceText과 settingsObject을 주고 설정하십시오.
만약 mimeType이 JSON MIME 유형이고, moduleType이
"json
"인 경우, moduleScript를 JSON 모듈 스크립트 생성 단계를 실행한 결과로
sourceText와 settingsObject을 주고 설정하십시오.
설정하십시오. moduleMap[(url, moduleType)]을 moduleScript로 설정하고, onComplete을 moduleScript로 주고 실행하십시오.
이것은 모듈 맵이 요청 URL을 키로 사용하고, 모듈 스크립트의 기본 URL은 응답 URL로 설정된다는 점을 의도한 것입니다. 전자는 중복된 가져오기를 방지하기 위해 사용되며, 후자는 URL 해석을 위해 사용됩니다.
단일 가져오기된 모듈 스크립트를 가져오기를 수행하려면, URL url, 환경 설정 객체 fetchClient, 대상 destination, 스크립트 가져오기 옵션 options, 환경 설정 객체 settingsObject, 리퍼러 referrer, ModuleRequest 레코드 moduleRequest, 알고리즘 onComplete, 그리고 선택적 fetch 수행 훅 performFetch를 주어진 대로 실행하세요. onComplete는 null(실패 시) 또는 모듈 스크립트(성공 시)를 수락하는 알고리즘이어야 합니다.
단언:
moduleRequest.[[Attributes]]에는 "type
"가 아닌
레코드
entry가 포함되지 않았습니다. 이는 우리가
HostGetSupportedImportAttributes에서
"type
" 속성만을 요청했기 때문입니다.
moduleType을 moduleRequest를 주고 모듈 요청에서 모듈 유형 단계를 실행한 결과로 설정하세요.
moduleType과 settingsObject을 주고 모듈 유형 허용 단계를 실행한 결과가 false이면, null을 주고 onComplete을 실행한 다음 반환하세요.
url, fetchClient, destination, options, settingsObject, referrer, moduleRequest, false, 그리고 onComplete를 주고 단일 모듈 스크립트 가져오기를 실행하세요. performFetch가 주어졌다면, 그것도 함께 전달하세요.
클래식 스크립트를 생성하려면, 문자열 source, 환경 설정 객체 settings, URL baseURL, 스크립트 가져오기 옵션 options, 선택적 부울 mutedErrors(기본값 false), 그리고 선택적 URL-또는-null sourceURLForWindowScripts(기본값 null)을 주어진 대로 실행하세요:
mutedErrors가 true이면, baseURL을
about:blank
로 설정하세요.
mutedErrors가 true일 때, baseURL은 스크립트의 CORS-교차 출처 응답의 url이며, 이는 JavaScript에 노출되어서는 안 됩니다. 따라서, 여기에서 baseURL이 정리됩니다.
settings에 대해 스크립팅이 비활성화되어 있으면, source를 빈 문자열로 설정하세요.
이 알고리즘이 이후 초기화할 새 클래식 스크립트를 script로 설정하세요.
script의 설정 객체를 settings로 설정하세요.
script의 기본 URL을 baseURL로 설정하세요.
script의 가져오기 옵션을 options로 설정하세요.
script의 음소거된 오류를 mutedErrors로 설정하세요.
클래식 스크립트 생성 시간 기록을 script와 sourceURLForWindowScripts을 주고 수행하세요.
result를 ParseScript(source, settings의 realm, script)의 결과로 설정하세요.
여기에서 script를 마지막 매개변수로 전달하면 result.[[HostDefined]]가 script가 됩니다.
result가 오류 목록인 경우, 다음을 수행하세요:
script의 레코드를 result로 설정하세요.
script를 반환하세요.
JavaScript 모듈 스크립트를 생성하려면, 문자열 source, 환경 설정 객체 settings, URL baseURL, 그리고 스크립트 가져오기 옵션 options을 주어진 대로 실행하세요:
settings에 대해 스크립팅이 비활성화되어 있으면, source를 빈 문자열로 설정하세요.
이 알고리즘이 이후 초기화할 새 모듈 스크립트를 script로 설정하세요.
script의 설정 객체를 settings로 설정하세요.
script의 기본 URL을 baseURL로 설정하세요.
script의 가져오기 옵션을 options로 설정하세요.
result를 ParseModule(source, settings의 realm, script)의 결과로 설정하세요.
여기에서 script를 마지막 매개변수로 전달하면 result.[[HostDefined]]가 script가 됩니다.
result가 오류 목록인 경우, 다음을 수행하세요:
script의 구문 오류를 result[0]으로 설정하세요.
script를 반환하세요.
script의 기록을 result로 설정하십시오.
script을 반환하십시오.
WebAssembly 모듈 스크립트 생성하려면, 바이트 시퀀스 bodyBytes, 환경 설정 객체 settings, URL baseURL, 그리고 스크립트 가져오기 옵션 options을 주고 실행하십시오:
만약 스크립팅이 비활성화되어 있다면 settings에 대해 bodyBytes를 바이트 시퀀스 0x00 0x61 0x73 0x6d 0x01 0x00 0x00 0x00으로 설정하십시오.
이 바이트 시퀀스는 매직 바이트와 버전 번호만 포함된 빈 WebAssembly 모듈에 해당합니다.
이 알고리즘이 나중에 초기화할 새로운 모듈 스크립트를 script로 설정하십시오.
script의 설정 객체를 settings로 설정하십시오.
script의 기본 URL을 baseURL로 설정하십시오.
script의 가져오기 옵션을 options로 설정하십시오.
bodyBytes, settings의 realm 및 script를 주고 실행한 WebAssembly 모듈 구문 분석의 결과를 result로 설정하십시오.
여기서 마지막 매개변수로 script를 전달하면 result.[[HostDefined]]가 script로 설정됩니다.
이전 단계에서 error가 발생했다면:
script의 구문 분석 오류를 error로 설정하십시오.
script를 반환하십시오.
script의 기록을 result로 설정하십시오.
script를 반환하십시오.
WebAssembly 자바스크립트 인터페이스: ESM 통합는 ECMA-262 모듈 로딩과의 WebAssembly 통합에 대한 후크를 지정합니다. 여기에는 직접적인 종속성 가져오기뿐만 아니라 가상화 및 다중 인스턴스화를 지원하는 소스 단계 가져오기도 포함됩니다. [WASMESM]
CSS 모듈 스크립트 생성하려면, 문자열 source 및 환경 설정 객체 settings을 주고 실행하십시오:
이 알고리즘이 나중에 초기화할 새로운 모듈 스크립트를 script로 설정하십시오.
script의 설정 객체를 settings로 설정하십시오.
비어 있는 사전을 인수로 하여 구성된 CSSStyleSheet
생성 단계를 실행한 결과를
sheet로 설정하십시오.
sheet에 대해 source를 주고 CSSStyleSheet의 규칙을 동기적으로 교체 단계를 실행하십시오.
이 과정에서 예외가 발생하면, 이를 처리하고 script의 구문 분석 오류를 해당 예외로 설정한 후 script를 반환하십시오.
CSSStyleSheet의 규칙을 동기적으로 교체
단계는 source에 @import
규칙이 포함된 경우 예외를 발생시킵니다. 현재 이 설계는 CSS 모듈 스크립트에 대해 이러한 규칙을 어떻게
처리할지 합의되지 않았기 때문에 이러한 규칙은 모두 차단됩니다.
sheet을 주고 CreateDefaultExportSyntheticModule 단계를 실행한 결과를 script의 기록으로 설정하십시오.
script를 반환하십시오.
JSON 모듈 스크립트 생성하려면, 문자열 source 및 환경 설정 객체 settings을 주고 실행하십시오:
이 알고리즘이 나중에 초기화할 새로운 모듈 스크립트를 script로 설정하십시오.
script의 설정 객체를 settings로 설정하십시오.
ParseJSONModule(source) 단계를 실행한 결과를 result로 설정하십시오.
이 과정에서 예외가 발생하면, 이를 처리하고 script의 구문 분석 오류를 해당 예외로 설정한 후 script를 반환하십시오.
script의 기록을 result로 설정하십시오.
script를 반환하십시오.
모듈 요청으로부터 모듈 유형 단계를 실행하려면, 모듈 요청 기록 moduleRequest을 주고 다음을 실행하십시오:
moduleType을 "javascript-or-wasm
"으로 설정하십시오.
만약 moduleRequest.[[Attributes]]에 레코드
entry가 포함되어 있고, entry.[[Key]]가 "type
"이라면:
만약 entry.[[Value]]가 "javascript-or-wasm
"이라면, moduleType을 null로
설정하십시오.
이 명세서는 내부적으로 자바스크립트 모듈 스크립트나 WebAssembly 모듈
스크립트에 "javascript-or-wasm
" 모듈 유형을 사용하므로, 이 단계는
"javascript-or-wasm
" 유형 속성을 사용하는 모듈이 가져와지는 것을 방지하기 위해 필요합니다. null
moduleType은 모듈
유형 허용됨 확인을 실패하게 만듭니다.
그 외의 경우, moduleType을 entry.[[Value]]로 설정하십시오.
moduleType을 반환하십시오.
모듈 유형 허용됨 단계는, 문자열 moduleType 및 환경 설정 객체 settings을 주고 다음과 같이 실행됩니다:
moduleType이 "javascript-or-wasm
", "css
", "json
"이 아니면
false를 반환하십시오.
moduleType이 "css
"이고 CSSStyleSheet
인터페이스가 settings의 realm에 노출되지 않았다면 false를 반환하십시오.
true를 반환하십시오.
모듈 유형으로부터 가져오기 목적지 단계는, 목적지 defaultDestination 및 문자열 moduleType을 주고 다음과 같이 실행됩니다:
json
"이라면 "json
"을 반환하십시오.
css
"이라면 "style
"을 반환하십시오.
주어진 클래식 스크립트 script와 선택적 불리언 rethrow errors (기본값 false)을 사용하여 클래식 스크립트 실행 단계를 실행하려면:
settings을 script의 설정 객체로 설정하세요.
settings를 사용하여 스크립트를 실행할 수 있는지 확인하세요. "실행하지 않음"을 반환하면 NormalCompletion(empty)을 반환하세요.
script를 주고 클래식 스크립트 실행 시작 시간 기록 단계를 실행하세요.
settings을 주고 스크립트 실행 준비 단계를 실행하세요.
evaluationStatus를 null로 설정하세요.
script의 재투척할 오류가 null이 아닌 경우, evaluationStatus를 Completion { [[Type]]: throw, [[Value]]: script의 재투척할 오류, [[Target]]: empty }로 설정하세요.
그렇지 않으면, evaluationStatus를 ScriptEvaluation(script의 레코드)로 설정하세요.
사용자 에이전트가 실행 중인 스크립트를 중단하여 ScriptEvaluation이 완료되지 않으면, evaluationStatus를 null로 유지하세요.
evaluationStatus가 비정상 완료인 경우, 다음을 수행하세요:
rethrow errors가 true이고 script의 음소거된 오류가 false인 경우, 다음을 수행하세요:
settings을 주고 스크립트 실행 후 정리 단계를 실행하세요.
evaluationStatus.[[Value]]를 재투척하세요.
rethrow errors가 true이고 script의 음소거된 오류가 true인 경우, 다음을 수행하세요:
settings을 주고 스크립트 실행 후 정리 단계를 실행하세요.
"NetworkError
" DOMException
을
던지세요.
그렇지 않으면, rethrow errors가 false입니다. 다음 단계를 수행하세요:
script의 설정 객체의 전역 객체에 대해 evaluationStatus.[[Value]]가 주어진 예외 보고 단계를 실행하세요.
settings을 주고 스크립트 실행 후 정리 단계를 실행하세요.
evaluationStatus를 반환하세요.
settings을 주고 스크립트 실행 후 정리 단계를 실행하세요.
evaluationStatus가 정상 완료인 경우, evaluationStatus를 반환하세요.
이 시점에 도달한 경우, 스크립트가 평가 중에 조기
중단되어 evaluationStatus가 null로 남겨졌습니다.
Completion { [[Type]]: throw, [[Value]]: 새 "QuotaExceededError
" DOMException
,
[[Target]]: empty }를 반환하세요.
주어진 모듈 스크립트 script와 선택적 불리언 preventErrorReporting (기본값 false)을 사용하여 모듈 스크립트 실행 단계를 실행하려면:
settings을 script의 설정 객체로 설정하세요.
settings를 사용하여 스크립트를 실행할 수 있는지 확인하세요. "실행하지 않음"을 반환하면 undefined로 해결된 약속을 반환하세요.
script를 주고 모듈 스크립트 실행 시작 시간 기록 단계를 실행하세요.
settings을 주고 스크립트 실행 준비 단계를 실행하세요.
evaluationPromise를 null로 설정하세요.
script의 재투척할 오류가 null이 아닌 경우, evaluationPromise를 재투척할 오류로 거부된 약속으로 설정하세요.
그렇지 않으면:
script의 레코드를 record로 설정하세요.
evaluationPromise를 record.Evaluate()로 설정하세요.
이 단계는 모듈의 모든 종속성을 재귀적으로 평가합니다.
사용자 에이전트가 실행 중인 스크립트를
중단하여
Evaluate가 완료되지 않으면,
evaluationPromise를 새 "QuotaExceededError
" DOMException
으로
거부된 약속으로 설정하세요.
preventErrorReporting이 false인 경우, evaluationPromise의 거부 시 reason과 함께 예외 보고 단계를 실행하세요.
settings을 주고 스크립트 실행 후 정리 단계를 실행하세요.
evaluationPromise를 반환하세요.
주어진 환경 설정 객체 settings을 사용하여 스크립트를 실행할 수 있는지 확인 단계를 실행하려면 다음을 수행하세요. "실행" 또는 "실행하지 않음"을 반환합니다.
settings에 의해 지정된 전역 객체가
Window
객체이고,
해당 문서
객체가
완전히 활성화되지 않은 경우, "실행하지 않음"을 반환하세요.
settings에 대해 스크립팅이 비활성화된 경우, "실행하지 않음"을 반환하세요.
"실행"을 반환하세요.
주어진 환경 설정 객체 settings을 사용하여 스크립트 실행 준비 단계를 실행하려면 다음을 수행하세요:
settings의 realm 실행 컨텍스트를 JavaScript 실행 컨텍스트 스택에 푸시하세요. 이제 실행 중인 JavaScript 실행 컨텍스트입니다.
settings을 주변 에이전트의 이벤트 루프의 현재 실행 중인 작업의 스크립트 평가 환경 설정 객체 집합에 추가하세요.
주어진 환경 설정 객체 settings을 사용하여 스크립트 실행 후 정리 단계를 실행하려면 다음을 수행하세요:
settings의 realm 실행 컨텍스트가 실행 중인 JavaScript 실행 컨텍스트임을 확인하세요.
settings의 realm 실행 컨텍스트를 JavaScript 실행 컨텍스트 스택에서 제거하세요.
이제 JavaScript 실행 컨텍스트 스택이 비어 있으면, 마이크로태스크 체크포인트 수행 단계를 실행하세요. (이 단계가 스크립트를 실행하면 이러한 알고리즘이 재귀적으로 호출됩니다.)
이 알고리즘은 한 스크립트가 다른 스크립트를 직접 호출하여 호출되지는 않지만, 스크립트가 이벤트를 디스패치하고 이벤트 리스너가 등록된 경우와 같이 간접적으로 재귀적으로 호출될 수 있습니다.
실행 중인 스크립트는 스크립트이며, 실행 중인 JavaScript 실행 컨텍스트의 ScriptOrModule 구성 요소에 있는 [[HostDefined]] 필드에 있습니다.
JavaScript 명세는 이 가능성을 고려하지 않지만, 때로는 실행 중인 스크립트를 중단해야 할 필요가 있습니다.
이는 ScriptEvaluation 또는 Source Text Module Record Evaluate 호출이 즉시 중단되도록 하며, JavaScript 실행 컨텍스트 스택을 비우고, finally
블록과
같은 정상적인 메커니즘을 트리거하지 않습니다. [JAVASCRIPT]
사용자 에이전트는 스크립트에 리소스 제한을 가할 수 있습니다. 예를 들어, CPU 할당량, 메모리 제한, 전체 실행 시간 제한 또는 대역폭 제한 등이 있을 수 있습니다. 스크립트가 이러한 한도를 초과하면
사용자 에이전트는 "QuotaExceededError
" DOMException
을
발생시키거나, 예외 없이 스크립트를 중단하거나, 사용자에게
알림을 표시하거나, 스크립트 실행을 조절할 수 있습니다.
예를 들어, 다음 스크립트는 절대 종료되지 않습니다. 사용자 에이전트는 몇 초 동안 기다린 후, 사용자에게 스크립트를 종료하거나 계속 실행할지 묻는 프롬프트를 표시할 수 있습니다.
< script >
while ( true ) { /* loop */ }
</ script >
사용자 에이전트는 사용자가 스크립트에 의해 프롬프트를 받거나(예: window.alert()
API를 사용하는 경우), 또는 스크립트의 동작(예: 시간이
초과된 경우)으로 인해 프롬프트를 받을 때 스크립팅을 비활성화할 수 있도록 권장됩니다.
스크립트가 실행되는 동안 스크립팅이 비활성화되면 스크립트는 즉시 종료되어야 합니다.
사용자 에이전트는 사용자가 특정한 목적으로 스크립트를 비활성화하여 탐색 컨텍스트를 닫을 수 있도록 허용할 수 있습니다.
예를 들어, 앞서 언급된 프롬프트는 페이지를 완전히 닫을 수 있는 메커니즘도 사용자에게 제공할 수 있으며, 이 경우 unload
이벤트 핸들러는 실행되지 않습니다.
모든 현재 엔진에서 지원됩니다.
self.reportError(e)
지정된 값 e에 대해 전역 객체에서 error
이벤트를 처리되지 않은 예외와 같은 방식으로
디스패치합니다.
JavaScript 값 exception에서 오류 정보를 추출하려면:
attributes를 IDL 속성을 키로 하는 빈 맵으로 설정합니다.
attributes[error
]을
exception으로 설정합니다.
attributes[message
]을
설정하고, attributes[filename
],
attributes[lineno
] 및
attributes[colno
]을
exception에서 파생된 구현
정의 값으로 설정합니다.
브라우저는 명시되지 않은 동작을 구현하여, 특이한 경우(예: eval
)를 포함하여 유용한 값을 수집합니다. 향후 이 부분이 더 자세히 명시될 수
있습니다.
attributes을 반환합니다.
특정 전역 객체 global에 대해 JavaScript 값 exception을 예외를 보고하고, 선택적 부울 값 omitError (기본값은 false)와 함께 처리하려면:
notHandled를 true로 설정합니다.
errorInfo를 exception에서 오류 정보를 추출한 결과로 설정합니다.
script를 스크립트로 설정하고, 구현 정의 방식으로 찾거나 null로 설정합니다. 일반적으로 실행 중인 스크립트일 것입니다 (주로 기존 스크립트 실행 중에).
구현에서는 덜 일반적인 경우에 오류가 음소거되는지를 결정하기 위해 어느 스크립트가 사용되는지에 대해 상호 운용 가능한 동작을 아직 확정하지 않았습니다.
script가 기존 스크립트이고
script의 음소거된 오류가 true인 경우,
errorInfo[error
]를
null로 설정하고, errorInfo[message
]을
"Script error.
"로 설정하며, errorInfo[filename
]을
빈 문자열로 설정하고, errorInfo[lineno
]을
0으로 설정하며, errorInfo[colno
]을 0으로
설정합니다.
omitError가 true이면 errorInfo[error
]을
null로 설정합니다.
global이 오류 보고 모드에 있지 않은 경우:
global이 EventTarget
을
구현하는 경우, global에서 errorInfo에 따라 초기화된 추가 속성 및 취소 가능
속성이 초기화된 상태로 error
라는 이름의 이벤트를 발생시키는 결과로
notHandled을 설정합니다.
이벤트 핸들러에서 true를 반환하면 이벤트 핸들러 처리 알고리즘에 따라 이벤트가 취소됩니다.
global의 오류 보고 모드를 false로 설정합니다.
notHandled이 true인 경우:
errorInfo[error
]를
null로 설정합니다.
global이 DedicatedWorkerGlobalScope
을
구현하는 경우, global과 연결된 Worker
의 관련 전역 객체로
전역 작업을 대기열에 추가하여
다음 단계를 실행합니다:
workerObject를 global과 연결된 Worker
객체로 설정합니다.
notHandled을 workerObject에서 errorInfo에 따라 초기화된 추가 속성 및
취소 가능
속성이 초기화된 상태로 error
라는 이름의
이벤트를 발생시키는 결과로 설정합니다.
notHandled이 true인 경우 예외를 보고하여 workerObject의 관련 전역 객체에 대해 omitError를 true로 설정합니다.
실제 exception 값은 소유 영역에서 사용할 수 없지만, 사용자 에이전트는 메시지, 파일 이름 및 기타 속성을 설정하고 잠재적으로 개발자 콘솔에 보고할 수 있는 충분한 정보를 계속 전달합니다.
그렇지 않으면 사용자 에이전트는 exception을 개발자 콘솔에 보고할 수 있습니다.
작업자와 그 Worker
객체를 연결하는 암시적인 포트가 끊어진 경우(즉, 상위
작업자가 종료된 경우), 사용자 에이전트는 Worker
객체에 error
이벤트 핸들러가 없고 해당 작업자의 onerror
속성이 null인 것처럼 행동해야 하지만, 그렇지 않으면 위에서 설명한 대로 행동해야 합니다.
따라서 오류 보고는 원래 문서
까지의 전용 작업자 체인으로
전파되며, 이 체인의 일부 작업자가 종료되고 가비지 수집된 경우에도 전파됩니다.
이 표준의 이전 버전에서는 예외를 보고하는 알고리즘을 정의했습니다. issue #958의 일환으로, 이는 이제 예외를 보고로 대체되었으며, 이는 다르게 작동하고 다른 입력을 받습니다. Issue #10516에서는 표준 생태계 업데이트를 추적합니다.
reportError(e)
메서드 단계는 e에 대한 예외를 보고하는 것입니다. this에 대해.
여기서 음소거가 적용되는지는 불분명합니다. Chrome과 Safari에서는 음소거되지만 Firefox에서는 음소거되지 않습니다. 또한 issue #958을 참조하십시오.
모든 현재 엔진에서 지원됩니다.
ErrorEvent
인터페이스는 다음과 같이 정의됩니다:
[Exposed=*]
interface ErrorEvent : Event {
constructor (DOMString type , optional ErrorEventInit eventInitDict = {});
readonly attribute DOMString message ;
readonly attribute USVString filename ;
readonly attribute unsigned long lineno ;
readonly attribute unsigned long colno ;
readonly attribute any error ;
};
dictionary ErrorEventInit : EventInit {
DOMString message = "";
USVString filename = "";
unsigned long lineno = 0;
unsigned long colno = 0;
any error ;
};
message
속성은
초기화된 값을 반환해야 합니다. 이 속성은 오류 메시지를 나타냅니다.
filename
속성은
초기화된 값을 반환해야 합니다. 이 속성은 오류가 처음 발생한 스크립트의 URL을 나타냅니다.
lineno
속성은 초기화된
값을 반환해야 합니다. 이 속성은 스크립트에서 오류가 발생한 줄 번호를 나타냅니다.
colno
속성은 초기화된 값을
반환해야 합니다. 이 속성은 스크립트에서 오류가 발생한 열 번호를 나타냅니다.
error
속성은 초기화된 값을
반환해야 합니다. 이 속성은 처음에는 undefined로 초기화되어야 합니다. 적절한 경우, 이 속성은 오류를 나타내는 객체로 설정됩니다 (예: 처리되지 않은 예외의 경우 예외 객체).
모든 현재 엔진에서 지원됩니다.
동기적인 런타임 스크립트 오류 외에도, 스크립트는 비동기적인 프로미스 거부를 겪을 수 있으며, 이는 unhandledrejection
및 rejectionhandled
이벤트를 통해 추적됩니다. 이러한 거부를 추적하는 작업은 HostPromiseRejectionTracker
추상 작업을 통해 수행되지만, 이를 보고하는 방법은 이곳에 정의되어 있습니다.
거부된 프로미스에 대해 알리기 위해 전역 객체 global이 주어졌을 때:
list를 복제된 global의 알림 대기 중인 거부된 프로미스 목록으로 설정합니다.
만약 list가 비어 있다면, return합니다.
비우기 global의 알림 대기 중인 거부된 프로미스 목록.
전역 작업을 대기열에 추가 하여 global에게 다음 단계를 실행합니다:
각각의 프로미스 p에 대해 list에서:
만약 p.[[PromiseIsHandled]]가 true라면, continue.
notCanceled을 이벤트를 발생시키는 결과로 설정합니다. 이 이벤트는 unhandledrejection
이름을 가지고 global에서 PromiseRejectionEvent
를 사용하여 발생시키며, 취소 가능
속성을 true로 초기화하고, promise
속성을 p로 초기화하며, reason
속성을 p.[[PromiseResult]]로 초기화합니다.
만약 notCanceled이 true라면, 사용자 에이전트는 p.[[PromiseResult]]를 개발자 콘솔에 보고할 수 있습니다.
만약 p.[[PromiseIsHandled]]가 false라면, p를 global의 처리되지 않은 거부된 프로미스 약한 집합에 추가합니다.
모든 현재 엔진에서 지원됩니다.
PromiseRejectionEvent
인터페이스는 다음과 같이 정의됩니다:
[Exposed=*]
interface PromiseRejectionEvent : Event {
constructor (DOMString type , PromiseRejectionEventInit eventInitDict );
readonly attribute object promise ;
readonly attribute any reason ;
};
dictionary PromiseRejectionEventInit : EventInit {
required object promise ;
any reason ;
};
모든 현재 엔진에서 지원됩니다.
promise
속성은 초기화된 값을 반환해야 합니다. 이 속성은 이 알림과 관련된 프로미스를 나타냅니다.
Promise<T>
유형에 대한 Web IDL 변환 규칙이 입력을 항상 새로운 프로미스로 감싸기 때문에, promise
속성은 object
유형으로 되어 있으며, 이는 원래 프로미스 객체에 대한 불투명한 핸들을 나타내기에 더 적합합니다.
모든 현재 엔진에서 지원됩니다.
reason
속성은 초기화된 값을 반환해야 합니다. 이 속성은 프로미스의 거부 이유를 나타냅니다.
import 맵 구문 분석 결과는 구조체로, 스크립트와 유사하며, 스크립트
요소의
결과에 저장될 수도 있지만,
다른 목적으로는 스크립트로 간주되지 않습니다.
다음과 같은 항목을 가집니다:
import 맵 구문 분석 결과를 생성하기 위해 문자열 input과 URL baseURL이 주어졌을 때:
result를 import 맵 구문 분석 결과로 설정하고, 그 import 맵을 null로, 재throw할 오류를 null로 설정합니다.
import 맵 문자열을 구문 분석하여 input과 baseURL을 사용하고, 예외를 catch합니다. 예외가 발생하면, result의 재throw할 오류를 그 예외로 설정합니다. 그렇지 않으면, result의 import 맵을 반환 값으로 설정합니다.
result를 반환합니다.
import 맵을 등록하기 위해 Window
global과
import 맵 구문 분석 결과
result가 주어졌을 때:
만약 result의 재throw할 오류가 null이 아니면, global에 대해 result의 재throw할 오류를 사용하여 예외를 보고하고 반환합니다.
단언: global의 import 맵이 빈 import 맵임을.
모듈 명세자 해결 알고리즘은 모듈 명세자 문자열을 URL로 변환하는 주요 진입점입니다. import 맵이 없는 경우, 이 과정은 비교적 단순하며, URL과 유사한 모듈 명세자 해결로 축소됩니다.
비어 있지 않은 import 맵이 있을 경우, 동작은 더 복잡해집니다. 해당 모듈 명세자 맵의 모든 적용 가능한 후보 항목을 가장 특정적인 범위에서 가장 특정하지 않은 범위까지 확인하며, 최상위 비범위 imports로 대체합니다. 각 후보에 대해 imports 일치 해결 알고리즘은 다음과 같은 결과를 제공합니다:
예외를 발생시킴. 그러면 모듈 명세자 해결 알고리즘은 추가적인 대체 없이 해당 예외를 다시 throw합니다.
오류 없이 해결에 실패함. 이 경우 외부 모듈 명세자 해결 알고리즘은 다음 후보로 이동합니다.
결국, 어떤 후보 모듈 명세자 맵에서도 성공적인 해결이 발견되지 않는다면, 모듈 명세자 해결은 예외를 발생시킵니다. 따라서 결과는 항상 URL 또는 throw된 예외입니다.
모듈 명세자 해결을 수행하려면, 스크립트 또는 null인 referringScript와 문자열 specifier이 주어졌을 때:
settingsObject와 baseURL을 null로 설정합니다.
만약 referringScript가 null이 아니면:
그렇지 않다면:
단언: 현재 설정 객체가 존재함을.
settingsObject를 현재 설정 객체로 설정합니다.
baseURL을 settingsObject의 API 기본 URL로 설정합니다.
importMap을 빈 import 맵으로 설정합니다.
만약 settingsObject의 글로벌
객체가 Window
를 구현하고 있다면,
importMap을
settingsObject의 글로벌 객체의
import
맵으로 설정합니다.
baseURLString을 baseURL의 직렬화된 값으로 설정합니다.
asURL을 URL과 유사한 모듈 명세자 해결의 결과로 설정합니다. specifier와 baseURL을 주어 설정합니다.
normalizedSpecifier을 직렬화된 asURL 값으로 설정하고, asURL이 null이 아닐 때, 그렇지 않으면, specifier로 설정합니다.
각각 scopePrefix → scopeImports 에 대해 importMap의 범위:
scopePrefix가 baseURLString과 같거나, scopePrefix가 U+002F (/)로 끝나고, scopePrefix가 코드 단위 접두사로 baseURLString과 일치하는 경우:
scopeImportsMatch를 imports 일치 해결의 결과로 normalizedSpecifier, asURL, 그리고 scopeImports를 주어 설정합니다.
scopeImportsMatch가 null이 아니면, scopeImportsMatch을 반환합니다.
topLevelImportsMatch를 imports 일치 해결의 결과로 normalizedSpecifier, asURL, 그리고 importMap의 imports를 주어 설정합니다.
topLevelImportsMatch가 null이 아니면, topLevelImportsMatch을 반환합니다.
이 시점에서, specifier는 importMap에 의해 remapping되지 않았지만, URL로 변환될 수 있었습니다.
asURL이 null이 아니면, asURL을 반환합니다.
specifier가 명세자였으나, importMap에 의해 remapping되지 않았음을 나타내는
TypeError
를 throw합니다.
imports 일치 해결을 수행하려면, 주어진 문자열 normalizedSpecifier, URL 또는 null인 asURL, 그리고 모듈 명세자 맵 specifierMap이 주어졌을 때:
각각 specifierKey → resolutionResult에 대해 specifierMap:
specifierKey가 normalizedSpecifier인 경우:
다음 모든 조건이 true이면:
specifierKey가 U+002F (/)로 끝남;
specifierKey가 코드 단위 접두사로 normalizedSpecifier와 일치함;
asURL이 null이거나, asURL이 특수함,
그렇다면:
resolutionResult가 null이면, specifierKey의 해결이 null
항목에 의해 차단되었음을 나타내는 TypeError
를 throw합니다.
이는 추가적인 대체 없이 전체 모듈 명세자 해결 알고리즘을 종료시킬 것입니다.
normalizedSpecifier의 접두사 specifierKey 이후의 부분을 afterPrefix로 설정합니다.
단언: resolutionResult가 직렬화된 값으로 U+002F (/)로 끝나며, 이는 구문 분석 중 강제되었습니다.
afterPrefix와 resolutionResult를 사용하여 URL 구문 분석의 결과로 url을 설정합니다.
url이 실패하면, normalizedSpecifier의 해결이 차단되었음을 나타내는
TypeError
를 throw합니다. 왜냐하면 afterPrefix 부분이 resolutionResult에
상대적으로 URL을 구문 분석할 수 없었기 때문입니다.
이는 추가적인 대체 없이 전체 모듈 명세자 해결 알고리즘을 종료시킬 것입니다.
만약 resolutionResult의 직렬화된 값이 url의
코드 단위 접두사와 일치하지 않으면,
normalizedSpecifier의 해결이 specifierKey 접두사를
초과하여 역추적되었음을 나타내는 TypeError
를 throw합니다.
이는 추가적인 대체 없이 전체 모듈 명세자 해결 알고리즘을 종료시킬 것입니다.
url을 반환합니다.
null을 반환합니다.
모듈 명세자 해결
알고리즘은
덜 특정한 범위로, 또는 가능하다면 "imports
"로 대체할 수 있습니다.
URL과 유사한 모듈 명세자 해결을 수행하려면, 주어진 문자열 specifier 와 URL baseURL이 주어졌을 때:
만약 specifier가 "/
", "./
", 또는 "../
"로 시작하면:
url을 URL 구문 분석의 결과로 specifier와 baseURL을 사용해 설정합니다.
url이 실패하면, null을 반환합니다.
이런 경우 중 하나는 specifier가 "../foo
"이고
baseURL이 data:
URL일 때입니다.
url을 반환합니다.
이 경우에는 specifier가 "//
"로 시작하는
경우, 즉 스킴 상대 URL이 포함됩니다. 따라서, url은
baseURL과 다른 호스트를
가질 수 있습니다.
url을 URL 구문 분석의 결과로 specifier (기본 URL 없이)로 설정합니다.
url이 실패하면, null을 반환합니다.
url을 반환합니다.
임포트 맵은 모듈 명세자 해결에 대한 제어를 허용합니다.
임포트 맵은 script
요소에서 인라인으로 제공되며,
type
속성이 "importmap
"으로
설정되고,
자식 텍스트 콘텐츠에
임포트 맵의 JSON 표현이 포함됩니다.
Document
당 하나의 임포트 맵만 처리됩니다.
첫 번째 임포트 맵이 감지된 후, 다른 임포트 맵은 무시되며, 이에 해당하는 script
요소가
error
이벤트를 발생시킵니다.
유사하게, import()
표현식이나
script
요소에서
type
속성이 "module
"로 설정된
경우,
모듈이 임포트된 후에도 추가적인 임포트 맵은 무시됩니다.
이러한 제한 사항은 초기 버전의 기능을 단순하게 유지하기 위한 것입니다. 구현자의 여유에 따라 시간이 지나면서 이 제한 사항들이 해제될 수 있습니다.
임포트 맵의 가장 간단한 사용 예는 전역적으로 명세자를 다시 매핑하는 것입니다:
{
"imports" : {
"moment" : "/node_modules/moment/src/moment.js"
}
}
이로 인해 import moment from "moment";
와 같은 구문이 작동하며,
/node_modules/moment/src/moment.js
URL에서 자바스크립트 모듈을 가져와 평가합니다.
임포트 맵은 슬래시로 끝나는 명세자를 사용하여 URL 클래스로 모듈 명세자를 매핑할 수 있습니다:
{
"imports" : {
"moment/" : "/node_modules/moment/src/"
}
}
이로 인해 import localeData from "moment/locale/zh-cn.js";
와 같은 구문이 작동하며,
/node_modules/moment/src/locale/zh-cn.js
URL에서 자바스크립트 모듈을 가져와 평가합니다.
이러한 슬래시로 끝나는 매핑은 종종 명세자 매핑과 결합됩니다. 예를 들어:
{
"imports" : {
"moment" : "/node_modules/moment/src/moment.js" ,
"moment/" : "/node_modules/moment/src/"
}
이로 인해 "moment
"로 지정된 "메인 모듈"과 "moment/locale/zh-cn.js
"와 같은 경로로 지정된 "서브 모듈" 모두 사용
가능합니다.
명세자는 임포트 맵에서 매핑할 수 있는 유일한 유형이 아닙니다. "URL 유사" 명세자, 즉 절대 URL로 해석 가능하거나 "/
", "./
",
"../
"로 시작하는 경우에도
매핑할 수 있습니다:
{
"imports" : {
"https://cdn.example.com/vue/dist/vue.runtime.esm.js" : "/node_modules/vue/dist/vue.runtime.esm.js" ,
"/js/app.mjs" : "/js/app-8e0d62a03.mjs" ,
"../helpers/" : "https://cdn.example/helpers/"
}
매핑할 URL과 매핑할 URL을 절대 URL이나 "/
", "./
", "../
"로 시작하는 상대 URL로 지정할 수 있습니다.
(이러한 시작 문자가 없는 상대 URL로 지정할 수는 없습니다. 이 문자는 명세자에서 구분할 수 있도록 도와줍니다.)
또한 슬래시로 끝나는 매핑이 이 맥락에서도 작동하는 것을 확인할 수 있습니다.
이러한 매핑은 정규화된 URL에 대해 작동하며, 임포트 맵 키에 제공된 문자열과 가져온 모듈 명세자가 일치할 필요가 없습니다.
예를 들어, 이 임포트 맵이 https://example.com/app.html
에 포함된 경우, import "/js/app.mjs"
뿐만 아니라
import "./js/app.mjs"
및 import "./foo/../js/app.mjs"
도 매핑됩니다.
이전의 모든 예제는 최상위 "imports
" 키를 사용하여 명세자를 전역적으로 매핑했습니다.
최상위 "scopes
" 키는 특정 URL 접두사와 일치하는 경우에만 적용되는 로컬 매핑을 제공할 수 있습니다. 예를 들어:
{
"scopes" : {
"/a/" : {
"moment" : "/node_modules/moment/src/moment.js"
},
"/b/" : {
"moment" : "https://cdn.example.com/moment/src/moment.js"
}
}
이 임포트 맵을 사용하면 import "moment"
문은 참조 스크립트가 포함된 위치에 따라 다른 의미를 가집니다:
/a/
하위에 위치한 스크립트 내부에서는,
/node_modules/moment/src/moment.js
을 임포트합니다.
/b/
하위에 위치한 스크립트 내부에서는,
https://cdn.example.com/moment/src/moment.js
을 임포트합니다.
/c/
하위에 위치한 스크립트 내부에서는,
해결에 실패하여 예외가 발생합니다.
스코프의 일반적인 사용 예는 웹 애플리케이션에서 "동일한" 모듈의 여러 버전을 존재하도록 하여 모듈 그래프의 일부는 한 버전을, 다른 일부는 다른 버전을 임포트할 수 있도록 하는 것입니다.
스코프는 서로 겹칠 수 있으며, 전역 "imports
" 명세자 맵과도 겹칠 수 있습니다.
해결 시점에 스코프는 가장 구체적인 것부터 덜 구체적인 것까지 순서대로 참조되며, 스코프의 구체성은
코드 단위 비교
작업을 사용하여 정렬됩니다.
예를 들어, "/scope2/scope3/
"는 "/scope2/
"보다 더 구체적으로 취급되며, 이는 최상위 (비스코프) 매핑보다 더 구체적으로
취급됩니다.
다음 임포트 맵은 이를 예시합니다:
{
"imports" : {
"a" : "/a-1.mjs" ,
"b" : "/b-1.mjs" ,
"c" : "/c-1.mjs"
},
"scopes" : {
"/scope2/" : {
"a" : "/a-2.mjs" },
"/scope2/scope3/" : {
"b" : "/b-3.mjs" }
}
이로 인해 다음과 같은 해결이 이루어집니다 (간결성을 위해 상대 URL을 사용):
명세자 | ||||
---|---|---|---|---|
"a "
| "b "
| "c "
| ||
참조자 | /scope1/r.mjs
| /a-1.mjs
| /b-1.mjs
| /c-1.mjs
|
/scope2/r.mjs
| /a-2.mjs
| /b-1.mjs
| /c-1.mjs
| |
/scope2/scope3/r.mjs
| /a-2.mjs
| /b-3.mjs
| /c-1.mjs
|
임포트 맵은 또한 서브 리소스 무결성 검사에서 사용되는 무결성 메타데이터로 모듈을 제공하는 데 사용할 수 있습니다. [SRI]
다음 임포트 맵은 이를 예시합니다:
{
"imports" : {
"a" : "/a-1.mjs" ,
"b" : "/b-1.mjs" ,
"c" : "/c-1.mjs"
} ,
"integrity" : {
"/a-1.mjs" : "sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" ,
"/d-1.mjs" : "sha384-MBO5IDfYaE6c6Aao94oZrIOiC6CGiSN2n4QUbHNPhzk5Xhm0djZLQqTpL0HzTUxk"
}
위 예시는 /a-1.mjs
와 /d-1.mjs
모듈에 대해 무결성 메타데이터를 제공하며, 후자는 맵에 임포트로 정의되지 않더라도
무결성을 확인할 수 있습니다.
script
요소의
자식 텍스트 콘텐츠는
임포트 맵을 나타내야 하며, 다음의 임포트 맵 작성 요구 사항을 준수해야 합니다:
유효한 JSON이어야 합니다. [JSON]
JSON은 JSON 객체를 나타내야 하며, "imports
", "scopes
", "integrity
"라는
최대 세 개의 키만 포함할 수 있습니다.
존재하는 경우, "imports
", "scopes
", "integrity
" 키에 해당하는 값은
각각 JSON 객체여야 합니다.
"imports
" 키에 해당하는 값이 존재하는 경우,
유효한 모듈 명세자 맵이어야 합니다.
"scopes
" 키에 해당하는 값이 존재하는 경우, JSON 객체여야 하며,
키는 유효한 URL 문자열이어야 하며,
값은 유효한 모듈 명세자 맵이어야
합니다.
"integrity
" 키에 해당하는 값이 존재하는 경우, JSON 객체여야 하며,
키는 유효한 URL 문자열이어야 하며,
값은 무결성 속성의 요구 사항을
충족해야 합니다.
유효한 모듈 명세자 맵은 다음 요구 사항을 충족하는 JSON 객체입니다:
모든 키는 비어 있지 않아야 합니다.
모든 값은 문자열이어야 합니다.
각 값은 유효한 절대 URL이거나
유효한 URL 문자열이어야 하며,
시작 문자가
"/
", "./
", "../
"이어야 합니다.
주어진 키가 "/
"로 끝나는 경우, 해당 값도 "/
"로 끝나야 합니다.
형식적으로, 임포트 맵은 세 가지 항목을 가진 구조체입니다:
모듈 명세자 맵은 정렬된 맵으로, 키는 문자열이며, 값은 URL 또는 null입니다.
모듈 무결성 맵은 정렬된 맵으로, 키는 URL이며, 값은 문자열로, 무결성 메타데이터로 사용됩니다.
빈 임포트 맵은 임포트 맵으로, 그 imports와 scopes가 모두 빈 맵입니다.
각 Window
는 임포트 맵을 가지고 있으며,
처음에는 빈 임포트 맵입니다.
각 Window
는 임포트 맵 허용 불리언 값을 가지고 있으며, 초기 값은 true입니다.
추가 임포트 맵을 허용하지 않도록 설정을 위해, 환경 설정 객체 settingsObject를 준수하세요:
settingsObject의 전역 객체를 global로 설정하세요.
만약 global이 Window
를
구현하지 않으면,
반환하세요.
global의 임포트 맵 허용 값을 false로 설정하세요.
임포트 맵은 현재 모듈 로딩이 시작되거나 하나의 임포트 맵이 로드된 후에는 허용되지 않습니다. 이러한 제한 사항은 향후 명세 개정에서 해제될 수 있습니다.
임포트 맵 문자열 파싱을 위해, 문자열 input과 URL baseURL을 준수하세요:
input을 주어진 JSON 문자열을 Infra 값으로 파싱한 결과를 parsed로 설정하세요.
만약 parsed가 정렬된 맵이 아니면,
TypeError
를
던져 상위 레벨 값이 JSON 객체여야 한다고 표시하세요.
sortedAndNormalizedImports를 빈 정렬된 맵으로 설정하세요.
만약 parsed["imports
"]가 존재하면:
만약 parsed["imports
"]가 정렬된 맵이 아니면,
"imports
" 상위 키 값은
JSON
객체여야 한다고 표시하며 TypeError
를
던지세요.
parsed["imports
"]와 baseURL을 주어진
모듈 명세자 맵 정렬 및
정규화의
결과를 sortedAndNormalizedImports로 설정하세요.
sortedAndNormalizedScopes를 빈 정렬된 맵으로 설정하세요.
만약 parsed["scopes
"]가 존재하면:
만약 parsed["scopes
"]가 정렬된 맵이 아니면,
"scopes
" 상위 키 값은
JSON
객체여야 한다고 표시하며 TypeError
를
던지세요.
parsed["scopes
"]와 baseURL을 주어진 스코프 정렬 및 정규화의
결과를 sortedAndNormalizedScopes로 설정하세요.
normalizedIntegrity를 빈 정렬된 맵으로 설정하세요.
만약 parsed["integrity
"]가 존재하면:
만약 parsed["integrity
"]가 정렬된 맵이 아니면,
"integrity
" 상위 키 값은 JSON 객체여야 한다고 표시하며 TypeError
를
던지세요.
parsed["integrity
"]와 baseURL을 주어진 모듈 무결성 맵 정규화의
결과를 normalizedIntegrity로 설정하세요.
만약 parsed의 키가 "imports
",
"scopes
", 또는 "integrity
" 외의 항목을 포함하면,
사용자 에이전트는 콘솔에 경고를 보고하여
임포트 맵에 잘못된 상위 키가 포함되어 있다고 알리세요.
이는 오타를 감지하는 데 도움이 됩니다. 오류가 아닌 이유는, 이는 향후 확장이 하위 호환성을 유지하면서 추가되지 못하게 할 수 있기 때문입니다.
임포트 맵으로 반환하세요, 그 imports는 sortedAndNormalizedImports이며, scopes는 sortedAndNormalizedScopes이며, 그 integrity는 normalizedIntegrity입니다.
이 파싱 알고리즘에서 생성된 임포트 맵은
고도로 정규화되어 있습니다. 예를 들어, 기본 URL이 https://example.com/base/page.html
일 때,
입력값
{
"imports" : {
"/app/helper" : "node_modules/helper/index.mjs" ,
"lodash" : "/node_modules/lodash-es/lodash.js"
}
}
은 임포트 맵을 생성하며, imports는 다음과 같습니다.
«[
"https://example.com/app/helper" → https://example.com/base/node_modules/helper/index.mjs
"lodash" → https://example.com/node_modules/lodash-es/lodash.js
]»
모듈 명세자 맵을 정렬하고 정규화하기 위해, 정렬된 맵 originalMap과 URL baseURL을 사용합니다:
normalized를 빈 정렬된 맵으로 설정합니다.
각 specifierKey와 value에 대해 originalMap에서:
specifierKey와 baseURL을 사용하여 명세자 키를 정규화한 결과를 normalizedSpecifierKey로 설정합니다.
만약 normalizedSpecifierKey가 null이라면, 계속 진행합니다.
만약 value가 문자열이 아니라면:
value와 baseURL을 사용하여 URL과 유사한 모듈 명세자 해석의 결과를 addressURL로 설정합니다.
만약 addressURL이 null이라면:
만약 specifierKey가 U+002F (/)로 끝나고, addressURL의 직렬화가 U+002F (/)로 끝나지 않는다면:
normalized[normalizedSpecifierKey]를 addressURL로 설정합니다.
normalized의 항목 a가 b보다 작은 경우, a의 키가 유닛 코드상 작을 때 내림차순으로 정렬하여 반환하세요.
스코프를 정렬하고 정규화하기 위해, 정렬된 맵 originalMap과 URL baseURL을 사용합니다:
normalized를 빈 정렬된 맵으로 설정하세요.
각 scopePrefix와 potentialSpecifierMap에 대해 originalMap에서:
만약 potentialSpecifierMap이 정렬된 맵이
아니라면, 접두어 scopePrefix가 JSON 객체여야 한다고 표시하며 TypeError
를
던지세요.
scopePrefix를 baseURL과 함께 사용하여 URL 파싱의 결과를 scopePrefixURL로 설정하세요.
만약 scopePrefixURL이 실패한다면:
scopePrefixURL의 직렬화 결과를 normalizedScopePrefix로 설정하세요.
normalized[normalizedScopePrefix]를 potentialSpecifierMap과 baseURL을 사용하여 모듈 명세자 맵 정렬 및 정규화의 결과로 설정하세요.
normalized의 항목 a가 b보다 작은 경우, a의 키가 유닛 코드상 작을 때 내림차순으로 정렬하여 반환하세요.
위의 두 알고리즘에서, 키와 스코프를 내림차순으로 정렬하면 "foo/bar/
"이 "foo/
"보다
우선순위를 갖게 됩니다. 이로 인해 모듈 명세자 해석 중
"foo/bar/
"이 "foo/
"보다 높은 우선순위를 가집니다.
모듈 무결성 맵을 정규화하기 위해, 정렬된 맵 originalMap을 사용합니다:
normalized를 빈 정렬된 맵으로 설정하세요.
각 key와 value에 대해 originalMap에서:
key와 baseURL을 사용하여 URL과 유사한 모듈 명세자 해석의 결과를 resolvedURL로 설정하세요.
"imports
"와는 달리, 무결성 맵의 키는 모듈 명세자가 아닌 URL로 취급됩니다.
그러나, "foo
"와 같은 "단순한" 상대적 URL을 금지하기 위해
URL과 유사한 모듈 명세자
해석
알고리즘을 사용합니다. 이는 모듈 명세자로 오인될 수 있습니다.
만약 resolvedURL이 null이라면:
만약 value가 문자열이 아니라면:
normalized[resolvedURL]를 value로 설정하세요.
normalized을 반환하세요.
명세자 키를 정규화하기 위해, 문자열 specifierKey와 URL baseURL을 사용합니다:
만약 specifierKey가 빈 문자열이라면:
사용자 에이전트는 명세자 키가 빈 문자열일 수 없다고 콘솔에 경고를 보고할 수 있습니다.
null을 반환하세요.
specifierKey와 baseURL을 사용하여 URL과 유사한 모듈 명세자 해석의 결과를 url로 설정하세요.
만약 url이 null이 아니라면, url의 직렬화를 반환하세요.
specifierKey를 반환하세요.
JavaScript 명세에는 호스트 환경에 따라 달라지는 구현 정의된 추상 연산이 여러 개 포함되어 있습니다. 이 섹션에서는 사용자 에이전트 호스트에 대한 이를 정의합니다.
JavaScript에는 구현 정의된 HostEnsureCanAddPrivateElement(O) 추상 연산이 포함되어 있습니다. 사용자 에이전트는 다음 구현을 사용해야 합니다: [JAVASCRIPT]
만약 O가 WindowProxy
객체이거나 구현이 Location
을
포함하는 경우 Completion { [[Type]]: throw, [[Value]]: 새로운 TypeError
}를 반환합니다.
NormalCompletion(unused)를 반환합니다.
JavaScript의 프라이빗 필드는 임의의 객체에 적용될 수 있습니다. 이는 특히 특이한 호스트 객체의 구현을 극도로 복잡하게 만들 수 있기 때문에, JavaScript 언어 명세는
호스트가 특정 기준을 충족하는 객체에서 프라이빗 필드를 거부할 수 있도록 이 훅을 제공합니다. HTML의 경우 WindowProxy
와
Location
은 복잡한
의미를 가지며, 특히 네비게이션과 보안에 있어 프라이빗 필드 의미론 구현이 도전적이기 때문에, 이 구현은 단순히 이러한 객체를 거부합니다.
JavaScript에는 구현 정의된 HostEnsureCanCompileStrings 추상 연산이 포함되어 있으며, 이는 Dynamic Code Brand Checks 제안에 의해 재정의됩니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT] [JSDYNAMICCODEBRANDCHECKS]
? EnsureCSPDoesNotBlockStringCompilation(realm, parameterStrings, bodyString, codeString, compilationType, parameterArgs, bodyArg)를 수행합니다. [CSP]
Dynamic Code Brand Checks 제안에는 구현 정의된 HostGetCodeForEval(argument) 추상 연산이 포함되어 있습니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JSDYNAMICCODEBRANDCHECKS]
만약 argument가 TrustedScript
객체라면, argument의 data를 반환합니다.
그렇지 않으면, no-code를 반환합니다.
JavaScript에는 구현 정의된 HostPromiseRejectionTracker(promise, operation) 추상 연산이 포함되어 있습니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
script를 실행 중인 스크립트로 설정합니다.
settingsObject를 현재 설정 객체로 설정합니다.
만약 script가 null이 아니라면, settingsObject를 script의 설정 객체로 설정합니다.
global을 settingsObject의 전역 객체로 설정합니다.
만약 operation이 "reject
"라면:
promise를 global의 알림 받을 예정인 거부된 프로미스 리스트에 추가합니다.
만약 operation이 "handle
"이라면:
만약 global의 알림 받을 예정인 거부된 프로미스 리스트가 promise를 포함하고 있다면, 그 리스트에서 promise를 제거하고 반환합니다.
만약 global의 처리되지 않은 거부된 프로미스 약한 세트가 promise를 포함하지 않는다면, 반환합니다.
promise를 global의 처리되지 않은 거부된 프로미스 약한 세트에서 제거합니다.
global에서 rejectionhandled
라는
이름의 이벤트를 발생시키기 위해 전역 태스크를 큐에 추가하고,
PromiseRejectionEvent
를
사용하여 promise
속성을 promise로 초기화하며, reason
속성을 promise.[[PromiseResult]]로 초기화합니다.
Temporal 제안에는 구현 정의된 HostSystemUTCEpochNanoseconds 추상 연산이 포함되어 있습니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JSTEMPORAL]
settingsObject를 global의 관련 설정 객체로 설정합니다.
time을 settingsObject의 현재 벽 시계 시간으로 설정합니다.
ns를 유닉스 에포크부터 time까지의 나노초 수로 설정하며, 가장 가까운 정수로 반올림합니다.
ns를 nsMinInstant와 nsMaxInstant 사이로 클램핑한 결과를 반환합니다.
Reference/Global_Objects/Promise#Incumbent_settings_object_tracking
한 엔진에서만 지원됩니다.
JavaScript 명세서는 작업을 예약하고 나중에 호스트에 의해 실행되는 방식과, 작업의 일부로 호출되는 JavaScript 함수들을 캡슐화하는 JobCallback Records를 정의합니다. JavaScript 명세서에는 작업이 예약되는 방식과 JobCallbacks가 처리되는 방식을 호스트가 정의할 수 있는 다수의 구현 정의된 추상 연산이 포함되어 있습니다. HTML은 이러한 추상 연산을 사용하여, JobCallbacks에서 현재 설정 객체와 JavaScript 실행 컨텍스트를 추적하고 복원하며, 활성 스크립트를 관리합니다. 이 섹션에서는 사용자 에이전트 호스트를 위한 이들을 정의합니다.
JavaScript에는 호스트가 작업 내에서 JavaScript 콜백을 호출할 때 상태를 복원할 수 있도록 하기 위해 구현 정의된 HostCallJobCallback(callback, V, argumentsList) 추상 연산이 포함되어 있습니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
callback.[[HostDefined]].[[IncumbentSettings]]를 incumbent settings로 설정합니다.
callback.[[HostDefined]].[[ActiveScriptContext]]를 script execution context로 설정합니다.
콜백을 실행할 준비를 incumbent settings으로 합니다.
이것은 콜백이 실행되는 동안 인커밴트 개념에 영향을 미칩니다.
script execution context가 null이 아닌 경우, JavaScript 실행 컨텍스트 스택에 script execution context를 추가합니다.
이것은 콜백이 실행되는 동안 활성 스크립트에 영향을 미칩니다.
result를 Call(callback.[[Callback]], V, argumentsList)로 설정합니다.
script execution context가 null이 아닌 경우, JavaScript 실행 컨텍스트 스택에서 script execution context를 제거합니다.
콜백 실행 후 정리를 incumbent settings으로 수행합니다.
result를 반환합니다.
JavaScript는 객체를 FinalizationRegistry
객체에 등록하여, 가비지 수집이 확인될 경우 정리 작업을 예약할 수 있습니다. JavaScript 사양에는 정리 작업을 예약하기 위한 구현 정의된
HostEnqueueFinalizationRegistryCleanupJob(finalizationRegistry)
추상 연산이 포함되어 있습니다.
정리 작업의 타이밍과 발생 여부는 JavaScript 사양에서 구현 정의된
사항입니다. 사용자 에이전트는 객체가 가비지 수집되는 시점과 해당 시점에 따라 다를 수 있으며, 이는 WeakRef.prototype.deref()
메서드의 반환값이 정의되지 않았거나 FinalizationRegistry
정리 콜백이 발생하는지 여부에 영향을 미칠 수 있습니다. HTML은 마이크로태스크 체크포인트를 수행하는 알고리즘에서
WeakRef
객체를 정리합니다. 저자는 가비지 수집 구현의 타이밍 세부 사항에 의존하지 않는 것이 가장 좋습니다.
정리 작업은 동기 JavaScript 실행과 혼합되지 않고, 큐에 저장된 작업들(tasks)에서 발생합니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
global을 finalizationRegistry.[[Realm]]의 전역 객체로 설정합니다.
전역 작업을 큐에 넣습니다 JavaScript 엔진 작업 소스에 global을 주어 다음 단계를 수행합니다:
entry를 finalizationRegistry.[[CleanupCallback]].[[Callback]].[[Realm]]의 환경 설정 객체로 설정합니다.
스크립트를 실행할 수 있는지 확인을 entry로 수행합니다. 이 결과가 "실행하지 않음"인 경우, 종료합니다.
스크립트를 실행할 준비를 entry로 수행합니다.
이 작업은 정리 콜백이 실행되는 동안 entry 개념에 영향을 미칩니다.
result를 CleanupFinalizationRegistry(finalizationRegistry) 수행의 결과로 설정합니다.
스크립트 실행 후 정리를 entry로 수행합니다.
result가 비정상 종료인 경우, result.[[Value]]에 따라 global에 대해 예외를 보고합니다.
JavaScript는 특정 realm에서 일반 작업(예: Atomics.waitAsync
에서
발생하는 Promise 처리)을 수행하기 위해 구현 정의된
HostEnqueueGenericJob(job, realm) 추상 연산을
포함합니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
global을 realm의 전역 객체로 설정합니다.
전역 작업을 큐에 넣습니다 JavaScript 엔진 작업 소스에 global을 주어 job()을 수행합니다.
JavaScript는 Promise 관련 작업을 예약하기 위해 구현 정의된 HostEnqueuePromiseJob(job, realm) 추상 연산을 포함합니다. HTML은 이러한 작업을 마이크로태스크 큐에 예약합니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
realm이 null이 아니면 job settings를 realm의 설정 객체로 설정합니다. 그렇지 않으면, job settings를 null로 설정합니다.
realm이 null이 아니면, 이는 실행될 작성자 코드의 realm입니다.
job이 NewPromiseReactionJob에 의해 반환되었을 때, 이는 Promise의 핸들러 함수의
realm입니다. job이 NewPromiseResolveThenableJob에 의해 반환되었을 때, 이는
then
함수의 realm입니다.
realm이 null인 경우, 작성자 코드가 실행되지 않거나, 작성자 코드가 확실히 throw할 것이 보장됩니다. 전자의 경우, 작성자는 실행할 코드를 전달하지
않았을 수 있습니다(예: promise.then(null, null)
). 후자의 경우, 취소된 프록시가 전달되었기 때문입니다. 두 경우 모두, 아래의
job settings를 사용하는 단계는 건너뜁니다.
NewPromiseResolveThenableJob과 NewPromiseReactionJob은 모두 취소된 프록시의 경우 null이 아닌 realms(현재 Realm Record)를 제공합니다. 이전 텍스트는 이를 반영하여 업데이트될 수 있습니다.
마이크로태스크를 큐에 넣습니다 다음 단계를 수행하도록:
job settings가 null이 아니면 스크립트를 실행할 수 있는지 확인합니다. 이 결과가 "실행하지 않음"이면 종료합니다.
job settings가 null이 아니면 스크립트를 실행할 준비를 합니다.
이 작업은 작업이 실행되는 동안 entry 개념에 영향을 미칩니다.
result를 job()의 결과로 설정합니다.
job은 추상
클로저로, NewPromiseReactionJob 또는 NewPromiseResolveThenableJob에 의해 반환됩니다.
job이 NewPromiseReactionJob에 의해 반환될 때 Promise의 핸들러 함수와
job이 NewPromiseResolveThenableJob에 의해 반환될 때
then
함수는 JobCallback
Records에 래핑됩니다. HTML은 현행 설정 객체와 JavaScript 실행 컨텍스트를 활성 스크립트에서 저장하고 HostMakeJobCallback 및 HostCallJobCallback에서 이를 복원합니다.
job settings가 null이 아니면 스크립트 실행 후 정리를 job settings로 수행합니다.
result가 비정상 종료인 경우, result.[[Value]]에 따라 realm의 전역 객체에 대해 예외를 보고합니다.
HostEnqueuePromiseJob이 null realm과 함께 호출되는 경우(예: Promise.prototype.then이 null 핸들러와 함께 호출된 경우)도 있으며, 이때 작업이 비정상적으로 종료될 수도 있습니다(Promise capability의 resolve 또는 reject 핸들러가 throw되었기 때문일 수 있음). 이 경우 어떤 전역 객체가 사용되어야 합니까? 이러한 단계 각각에서 현재 realm이 다를 수 있으며, 다른 realm에서 Promise 생성자 또는 Promise.prototype.then을 사용했을 수도 있습니다. 이와 관련된 자세한 내용은 이슈 #10526을 참조하세요.
JavaScript에는 일정 시간이 지난 후에 작업을 수행하기 위해 구현 정의된 HostEnqueueTimeoutJob(job, milliseconds) 추상 연산이 포함되어 있습니다. HTML은 이러한 작업을 일정 시간이 지난 후 단계를 실행을 사용하여 예약합니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
global을 realm의 전역 객체로 설정합니다.
timeoutStep을 전역 작업을 큐에 넣는 알고리즘 단계로 설정하여 global을 주어 job()을 수행합니다.
일정 시간이 지난 후 단계를
실행을 global, "JavaScript
", milliseconds, 및
timeoutStep를 주어 실행합니다.
JavaScript에는 구현 정의된 HostMakeJobCallback(callable) 추상 연산이 포함되어 있어, 작업 내부에서 호출된 JavaScript 콜백에 상태를 연결할 수 있습니다. 사용자 에이전트는 다음과 같은 구현을 사용해야 합니다: [JAVASCRIPT]
incumbent settings을 현행 설정 객체로 설정합니다.
active script을 활성 스크립트로 설정합니다.
script execution context을 null로 설정합니다.
active script이 null이 아니면, script execution context을 새로운 JavaScript 실행 컨텍스트로 설정하고, 해당 Function 필드를 null로 설정하며, Realm 필드를 active script의 설정 객체의 realm으로 설정하고, ScriptOrModule을 active script의 기록으로 설정합니다.
아래에서 볼 수 있듯이, 이는 작업 콜백이 호출될 때 현재 활성 스크립트를 전달하기 위해 사용됩니다.
active script가 null이 아니고, 이 방식으로 저장하는 것이 유용한 경우는 다음과 같습니다:
Promise. resolve( 'import(`./example.mjs`)' ). then( eval);
이 단계(및 HostCallJobCallback에서 이를 사용하는 단계들)가 없으면, import()
표현식이 평가될 때 활성 스크립트가 없게 되며, 이는
eval()
이
특정 스크립트에서 비롯되지 않은 내장 함수이기 때문입니다.
이 단계가 있을 경우, 활성 스크립트가 위의 코드에서 작업으로 전달되어, import()
가
원래 스크립트의 기본 URL을
적절히 사용할 수 있게 됩니다.
다음 버튼을 사용자가 클릭할 경우 active script가 null일 수 있습니다:
< button onclick = "Promise.resolve('import(`./example.mjs`)').then(eval)" > Click me</ button >
이 경우, 이벤트 핸들러의 JavaScript 함수는 이벤트 핸들러의 현재 값을 가져오기 알고리즘에 의해 생성되며, 이 함수는 null [[ScriptOrModule]] 값을 가집니다. 따라서, Promise 기계가 HostMakeJobCallback을 호출할 때 전달할 활성 스크립트가 없습니다.
따라서 import()
표현식이 평가될 때에도 여전히 활성 스크립트가 없습니다.
다행히도 이는 HostLoadImportedModule의 구현에서 현재 설정 객체의 API 기본 URL을 사용하도록 처리됩니다.
callable과 함께 { [[Callback]]: callable, [[HostDefined]]: { [[IncumbentSettings]]: incumbent settings, [[ActiveScriptContext]]: script execution context } } JobCallback 기록을 반환합니다.
JavaScript 명세는 모듈에 대한 구문과 호스트에 의존하지 않는 처리 모델의 일부를 정의합니다. 이 명세서는 모듈 시스템이 부트스트랩 되는 방식, 즉 script
요소에 type
속성이 "module
"로 설정된 경우 모듈이 어떻게 가져오고, 해석하고, 실행되는지에 대한 나머지 처리 모델을 정의합니다. [JAVASCRIPT]
JavaScript 명세가 "스크립트"와 "모듈"을 구분하여 설명하지만, 이 명세서는 클래식 스크립트와 모듈 스크립트로 설명합니다. 이 두 가지는 모두 script
요소를 사용하기 때문입니다.
modulePromise = import(specifier)
specifier로 식별되는 모듈 스크립트의 모듈 네임스페이스 객체에 대한 프로미스를
반환합니다. 이를 통해 런타임에 모듈 스크립트를 동적으로 가져올 수 있으며, import
문장 형태를 사용하지 않습니다. specifier는
모듈 지정자를 해석하여 활성 스크립트에
상대적으로 해석됩니다.
반환된 프로미스는 잘못된 지정자가 주어지거나, 모듈을 가져오거나 결과 모듈 그래프를 평가하는 동안 실패가 발생한 경우 거부됩니다.
이 구문은 클래식 스크립트와 모듈 스크립트 모두에서 사용할 수 있습니다. 따라서 이는 클래식 스크립트 세계에서 모듈 스크립트 세계로의 다리 역할을 합니다.
url = import.meta.url
활성 모듈 스크립트의 기본 URL을 반환합니다.
이 구문은 모듈 스크립트 내부에서만 사용할 수 있습니다.
url = import.meta.resolve(specifier)
specifier를 해석하여 활성 스크립트에
상대적으로 해석된 URL을 반환합니다. 즉, 이는 import(specifier)
을
사용하여 가져올 URL을 반환합니다.
잘못된 지정자가 주어진 경우 TypeError
예외를 발생시킵니다.
이 구문은 모듈 스크립트 내부에서만 사용할 수 있습니다.
모듈 맵은 순서가 있는 맵으로, 튜플로 구성된 키를 사용합니다. 이 튜플은 URL 레코드와 문자열로 이루어져 있습니다.
URL 레코드는 모듈을 가져온 요청
URL이며, 문자열은 모듈의 유형을 나타냅니다 (예:
"javascript-or-wasm
").
모듈 맵의 값은 모듈 스크립트, null (실패한
가져오기를 나타냄), 또는 자리 표시자 값 "fetching
"입니다. 모듈 맵은 가져온 모듈 스크립트가 각 문서
또는 워커마다 한 번만 가져와지고, 파싱되며 평가되도록 보장하기 위해 사용됩니다.
모듈 맵은 (URL, 모듈 유형)으로 키를
설정하기 때문에, 다음 코드는 모듈 맵에
세 개의 별도 항목을 생성합니다. 이는 세 가지 다른 (URL, 모듈 유형) 튜플을 결과로 내기 때문입니다 (모두
"javascript-or-wasm
" 유형):
import "https://example.com/module.mjs" ;
import "https://example.com/module.mjs#map-buster" ;
import "https://example.com/module.mjs?debug=true" ;
즉, URL 쿼리와 프래그먼트는 모듈 맵에서 서로 다른 항목을 생성할 수 있도록 다양하게 사용할 수 있습니다. 이로 인해 세 번의 별도 가져오기와 세 번의 별도 모듈 평가가 수행됩니다.
반면, 다음 코드는 모듈 맵에 단일 항목만 생성합니다. 이는 이 입력들을 URL 파서에 적용한 결과 생성된 URL 레코드가 동일하기 때문입니다:
import "https://example.com/module2.mjs" ;
import "https:example.com/module2.mjs" ;
import "https://///example.com\\module2.mjs" ;
import "https://example.com/foo/../module2.mjs" ;
따라서 이 두 번째 예에서는 한 번의 가져오기와 한 번의 모듈 평가만 발생합니다.
모듈 유형도 모듈 맵 키의 일부이기
때문에, 다음 코드는 두 개의 별도 항목을 모듈
맵에 만듭니다(첫 번째 항목의 유형은 "javascript-or-wasm
", 두 번째 항목의 유형은 "css
"):
< script type = module >
import "https://example.com/module" ;
</ script >
< script type = module >
import "https://example.com/module" with { type: "css" };
</ script >
이로 인해 두 번의 별도 가져오기와 두 번의 별도 모듈 평가가 수행될 수 있습니다.
실제로, 아직 명확히 정의되지 않은 메모리 캐시(이슈 #6110 참조)로 인해 리소스는 WebKit 및 Blink 기반 브라우저에서 한 번만 가져올 수 있습니다. 또한 모든 모듈 유형이 상호 배타적이라면, 단일 모듈 스크립트 가져오기에서 모듈 유형 확인이 실패할 것이므로, 최대 한 번의 모듈 평가만 발생할 것입니다.
모듈 맵 키에 유형을 포함하는 목적은 잘못된 유형 속성을 가진 가져오기가 동일한 지정자를 사용하여 다른 가져오기를 방해하지 않도록 하기 위함입니다.
JavaScript 모듈 스크립트는 다른 JavaScript 모듈에서 가져올 때 기본적으로 가져오기 유형이 JavaScript로 설정됩니다. 즉, import
문장이
type
가져오기 속성을 포함하지 않는 경우 가져오는 모듈 스크립트의 유형은 JavaScript로 설정됩니다. type
가져오기 속성을 사용하여
JavaScript 리소스를 가져오려 시도하면 실패합니다:
< script type = "module" >
// 다음 모든 경우는 .mjs 파일이 JavaScript MIME 유형으로 제공되는 경우 실패합니다.
// JavaScript 모듈 스크립트는 기본이며, 가져오기 유형 속성을 사용하여 가져올 수 없습니다.
import foo from "./foo.mjs" with { type: "javascript" };
import foo2 from "./foo2.mjs" with { type: "js" };
import foo3 from "./foo3.mjs" with { type: "" };
await import ( "./foo4.mjs" , { with : { type: null } });
await import ( "./foo5.mjs" , { with : { type: undefined } });
</ script >
Reference/Operators/import.meta/resolve
현재 모든 엔진에서 지원됩니다.
Reference/Operators/import.meta
현재 모든 엔진에서 지원됩니다.
JavaScript는 구현 정의된 HostGetImportMetaProperties 추상 연산을 포함하고 있습니다. 유저 에이전트는 다음 구현을 사용해야 합니다: [JAVASCRIPT]
moduleScript를 moduleRecord.[[HostDefined]]로 설정합니다.
Assert: moduleScript의 기본 URL이 null이 아닌지 확인합니다. moduleScript는 JavaScript 모듈 스크립트이기 때문입니다.
steps를 다음 단계로 설정합니다. 인수로는 specifier를 사용합니다:
specifier를 ? ToString(specifier)으로 설정합니다.
url을 moduleScript와 specifier를 사용하여 모듈 명세서를 해결한 결과로 설정합니다.
url의 직렬화된 값을 반환합니다.
resolveFunction을 ! CreateBuiltinFunction(steps, 1,
"resolve
", « »)으로 설정합니다.
« 레코드
{
[[Key]]: "url
", [[Value]]: urlString },
레코드
{ [[Key]]: "resolve
",
[[Value]]: resolveFunction } »을 반환합니다.
Import Attributes 제안에는 구현 정의된 HostGetSupportedImportAttributes 추상 연산이 포함되어 있습니다. 유저 에이전트는 다음 구현을 사용해야 합니다: [JSIMPORTATTRIBUTES]
« "type
" »을 반환합니다.
JavaScript는 구현 정의된 HostLoadImportedModule 추상 연산을 포함하고 있습니다. 유저 에이전트는 다음 구현을 사용해야 합니다: [JAVASCRIPT]
settingsObject를 현재 설정 객체로 설정합니다.
settingsObject의 전역
객체가 WorkletGlobalScope
또는 ServiceWorkerGlobalScope
를
구현하고, loadState가 undefined라면:
loadState는 현재 가져오기 프로세스가 동적 import()
호출에 의해 시작되었을 때 정의되지 않습니다. 이는 직접적으로 또는 동적으로 가져온 모듈의 전이 의존성을 로드할 때 발생할 수 있습니다.
completion을 완료 기록 { [[Type]]: throw,
[[Value]]: 새로운 TypeError
,
[[Target]]: empty }로 설정합니다.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)를 수행합니다.
반환합니다.
referencingScript를 null로 설정합니다.
originalFetchOptions을 기본 스크립트 가져오기 옵션으로 설정하십시오.
fetchReferrer를 "client
"로 설정합니다.
referrer가 스크립트 기록 또는 순환 모듈 기록 이라면:
referencingScript를 referrer.[[HostDefined]]로 설정합니다.
settingsObject를 referencingScript의 설정 객체로 설정합니다.
fetchReferrer를 referencingScript의 기본 URL로 설정합니다.
originalFetchOptions를 referencingScript의 가져오기 옵션으로 설정합니다.
referrer는 보통 스크립트 기록이나 순환 모듈 기록입니다. 그러나 이벤트 핸들러의 경우 이벤트 핸들러의 현재 값을 가져오는 알고리즘에 따라 그렇지 않을 것입니다. 예를 들어:
< button onclick = "import('./foo.mjs')" > Click me</ button >
만약 click
이벤트가 발생하면, import()
표현식이 실행될 때, GetActiveScriptOrModule은 null을 반환하며, 이 작업은 대체
referrer로 현재 realm을 받습니다.
만약 referrer가 순환 모듈 기록이고, moduleRequest가 referrer의 [[RequestedModules]]의 첫 번째 요소와 같다면:
각 모듈 요청 기록 requested에 대해 referrer의 [[RequestedModules]]에서:
만약 moduleRequest.[[Attributes]]에 레코드 entry가 포함되어 있고, entry.[[Key]]가
"type
"이 아니라면:
completion을 완료 기록 { [[Type]]: throw, [[Value]]:
새로운 SyntaxError
예외, [[Target]]: empty }로 설정하십시오.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)을 실행하십시오.
종료하십시오.
자바스크립트 명세서는 이 유효성 검사를 다시 수행하지만, 유효성 검사가 실패할 때 의존성을 불필요하게 로드하지 않기 위해 이곳에서 중복됩니다.
모듈 지정자 해결을 실행하십시오. referencingScript 및 moduleRequest.[[Specifier]]를 주고, 예외가 발생하면 처리하십시오. 예외가 발생하면 resolutionError를 해당 예외로 설정하십시오.
이전 단계에서 예외가 발생했다면:
completion을 완료 기록 { [[Type]]: throw, [[Value]]: resolutionError, [[Target]]: empty }로 설정하십시오.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)을 실행하십시오.
종료하십시오.
moduleType을 모듈 요청으로부터 모듈 유형 단계를 실행한 결과로 설정하십시오. 이때 moduleRequest를 전달하십시오.
moduleType과 settingsObject을 주고 모듈 유형 허용 단계를 실행한 결과가 false라면:
completion을 완료 기록 { [[Type]]: throw, [[Value]]:
새로운 TypeError
예외, [[Target]]: empty }로 설정하십시오.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)을 실행하십시오.
종료하십시오.
이 단계는 정적 모듈 의존성 목록에 대한 첫 번째 HostLoadImportedModule 호출이 이루어질 때, 모든 요청된 모듈 지정자와 유형 속성을 유효성 검사하여, 의존성 중 하나에 정적 오류가 있는 경우 추가 로딩 작업을 피하기 위함입니다. 해결할 수 없는 모듈 지정자나 지원되지 않는 유형 속성을 가진 모듈은 구문 오류가 있는 모듈과 동일하게 취급하며, 두 경우 모두 모듈을 나중에 연결하는 것을 고려할 수 없게 만듭니다.
추가 import 맵을 허용하지 않음을 settingsObject에 대해 수행합니다.
url을 referencingScript와 moduleRequest.[[Specifier]]를 사용하여 모듈 명세서를 해결한 결과로 설정하고, 예외를 포착합니다. 만약 예외가 발생했다면, resolutionError를 발생된 예외로 설정합니다.
이전 단계에서 예외가 발생했다면:
completion을 완료 기록 { [[Type]]: throw, [[Value]]: resolutionError, [[Target]]: empty }로 설정하십시오.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)을 실행하십시오.
종료하십시오.
fetchOptions을 하위 스크립트 가져오기 옵션 얻기 단계를 실행한 결과로 설정하십시오. 이때 originalFetchOptions, url, settingsObject를 전달하십시오.
destination을 "script"
로 설정하십시오.
fetchClient를 settingsObject로 설정합니다.
loadState가 undefined가 아니라면:
destination을 loadState.[[Destination]]로 설정합니다.
fetchClient를 loadState.[[FetchClient]]로 설정합니다.
단일 가져온 모듈 스크립트를 가져옴을 url, fetchClient, destination, fetchOptions, settingsObject, fetchReferrer, moduleRequest, 그리고 아래에 정의된 onSingleFetchComplete를 사용하여 수행합니다. 만약 loadState가 undefined가 아니고 loadState.[[PerformFetch]]가 null이 아니라면, loadState.[[PerformFetch]]도 전달합니다.
moduleScript를 주어진 onSingleFetchComplete는 다음 알고리즘입니다:
completion을 null로 설정합니다.
만약 moduleScript가 null이라면, completion을 완료 기록 { [[Type]]: throw, [[Value]]: 새로운 TypeError
,
[[Target]]: empty }로 설정합니다.
그렇지 않고, moduleScript의 구문 분석 오류가 null이 아니라면:
그렇지 않다면, completion을 완료 기록 { [[Type]]: 정상, [[Value]]: moduleScript의 기록, [[Target]]: empty }로 설정합니다.
FinishLoadingImportedModule(referrer, moduleRequest, payload, completion)를 수행합니다.
이벤트, 사용자 상호작용, 스크립트, 렌더링, 네트워킹 등을 조정하기 위해, 유저 에이전트는 이 섹션에서 설명된 대로 이벤트 루프를 사용해야 합니다. 각 에이전트에는 고유한 이벤트 루프가 연결되어 있습니다.
이벤트 루프는 유사 출처 창 에이전트의 경우 창 이벤트 루프라고 합니다. 이벤트 루프는 전용 워커 에이전트, 공유 워커 에이전트, 서비스 워커 에이전트의 경우 워커 이벤트 루프라고 합니다. 이벤트 루프는 워크렛 에이전트의 경우 워크렛 이벤트 루프라고 합니다.
이벤트 루프는 반드시 구현 스레드와 일치하지는 않습니다. 예를 들어, 여러 창 이벤트 루프가 단일 스레드에서 협력적으로 스케줄될 수 있습니다.
그러나 [[CanBlock]]이 true로 설정된 다양한 워커 에이전트의 경우, JavaScript 명세는 이들에 대한 진행 보장에 관한 요구사항을 설정하여, 특정 상황에서는 전용 에이전트 스레드를 필요로 합니다.
이벤트 루프에는 하나 이상의 태스크 큐가 있습니다. 태스크 큐는 세트로 구성된 태스크입니다.
태스크 큐는 세트이며, 큐가 아닙니다. 이는 이벤트 루프 처리 모델이 선택된 큐에서 첫 번째 실행 가능한 태스크를 가져오기 때문이지, 첫 번째 태스크를 제거하는 것은 아닙니다.
태스크는 다음과 같은 작업을 담당하는 알고리즘을 캡슐화합니다:
특정 이벤트
객체를 특정 이벤트 대상
객체에 디스패치하는 작업은 전용 태스크에 의해 수행되는 경우가 많습니다.
모든 이벤트가 태스크 큐를 사용하여 디스패치되는 것은 아닙니다. 많은 이벤트가 다른 태스크 중에 디스패치됩니다.
HTML 파서가 하나 이상의 바이트를 토큰화한 후, 생성된 토큰을 처리하는 작업은 보통 태스크입니다.
콜백을 호출하는 작업은 전용 태스크에 의해 수행되는 경우가 많습니다.
알고리즘이 리소스를 가져오는 경우, 가져오기가 비차단 방식으로 이루어진다면, 리소스가 일부 또는 전체 사용 가능 상태가 되었을 때 그 처리 작업은 태스크에 의해 수행됩니다.
일부 요소는 DOM 조작에 반응하는 태스크를 가집니다. 예를 들어 해당 요소가 문서에 삽입될 때 트리거되는 태스크가 있습니다.
공식적으로, 태스크는 구조체로서 다음을 포함합니다:
문서
와 관련된 태스크, 또는 창 이벤트 루프에 포함되지 않은 태스크의 경우 null.
태스크는 문서가 null이거나 완전히 활성화된 상태일 때 실행 가능한 상태입니다.
출처 필드에 따라 각 태스크는 특정 태스크 출처에서 발생한 것으로 정의됩니다. 각 이벤트 루프의 경우, 모든 태스크 출처는 특정 태스크 큐와 연결되어야 합니다.
기본적으로, 태스크 출처는 표준 내에서 논리적으로 다른 유형의 태스크를 분리하는 데 사용되며, 이는 사용자 에이전트가 이를 구별하고자 할 때 유용합니다. 태스크 큐는 주어진 이벤트 루프 내에서 태스크 출처를 하나로 모으는 데 사용자 에이전트가 사용합니다.
예를 들어, 사용자 에이전트가 마우스와 키보드 이벤트에 대한 태스크 큐를 하나 두고(사용자 상호작용 태스크 출처와 연결됨), 다른 모든 태스크 출처를 연결할 다른 태스크 큐를 둘 수 있습니다. 그런 다음, 이벤트 루프 처리 모델의 첫 번째 단계에서 제공되는 자유를 사용하여 키보드와 마우스 이벤트를 다른 태스크보다 세 번의 쿼터만큼 우선 처리하여 인터페이스의 응답성을 유지하면서도 다른 태스크 큐를 굶주리지 않도록 할 수 있습니다. 이 설정에서는 처리 모델이 사용자 에이전트가 어떤 태스크 출처의 이벤트도 순서대로 처리하지 않는다는 것을 여전히 보장합니다.
각 이벤트 루프에는 현재 실행 중인 태스크가 있으며, 이는 태스크이거나 null입니다. 초기 상태는 null입니다. 이는 재진입을 처리하는 데 사용됩니다.
각 이벤트 루프에는 마이크로태스크 큐가 있으며, 이는 큐로 구성된 마이크로태스크입니다. 초기 상태는 비어 있습니다. 마이크로태스크는 마이크로태스크 큐 작업 알고리즘을 통해 생성된 태스크를 지칭하는 비공식 용어입니다.
각 이벤트 루프에는 마이크로태스크 체크포인트 수행 불리언이 있으며, 초기 상태는 false입니다. 이는 마이크로태스크 체크포인트를 수행하는 알고리즘의 재진입 호출을 방지하는 데 사용됩니다.
각 창 이벤트 루프에는 DOMHighResTimeStamp
마지막 렌더 기회 시간이 있으며, 초기 값은 0입니다.
각 창 이벤트 루프에는 DOMHighResTimeStamp
마지막 유휴 기간 시작 시간이 있으며, 초기 값은 0입니다.
창 이벤트 루프 loop에 대한 동일 루프 창을 가져오려면, loop와 동일한 이벤트 루프를 가진 모든 창
객체를 반환합니다.
태스크 출처 source에, 옵션으로 이벤트 루프 event loop와 문서 document를 제공하여 일련의 단계 steps를 수행하는 태스크를 큐에 추가하려면 다음을 따릅니다:
만약 event loop가 주어지지 않았다면, event loop를 암시된 이벤트 루프로 설정합니다.
만약 document가 주어지지 않았다면, document를 암시된 문서로 설정합니다.
task를 새로운 태스크로 설정합니다.
task의 단계를 steps로 설정합니다.
task의 출처를 source로 설정합니다.
task의 문서를 document로 설정합니다.
task의 스크립트 평가 환경 설정 객체 세트를 빈 세트로 설정합니다.
queue를 event loop에서 source와 연결된 태스크 큐로 설정합니다.
Append task를 queue에 추가합니다.
태스크를 큐에 추가할 때 이벤트 루프와 문서를 전달하지 않으면, 불명확하고 제대로 명세되지 않은 암시된 이벤트 루프와 암시된 문서 개념에 의존하게 됩니다. 명세 작성자는 이러한 값들을 항상 전달하거나 전역 태스크 큐에 추가 또는 요소 태스크 큐에 추가와 같은 래퍼 알고리즘을 대신 사용하는 것이 좋습니다.
태스크 출처 source에 전역 객체 global과 일련의 단계 steps를 사용하여 전역 태스크 큐에 추가하려면:
document를 global의 연결된 문서
로 설정합니다. global이 창
객체인 경우; 그렇지 않으면 null로 설정합니다.
태스크 큐에 추가를 수행하여 source, event loop, document, steps을 제공합니다.
태스크 출처 source에 요소 element와 일련의 단계 steps을 사용하여 요소 태스크 큐에 추가하려면:
global을 element의 관련 전역 객체로 설정합니다.
전역 태스크 큐에 추가를 수행하여 source, global, steps을 제공합니다.
일련의 단계 steps을 수행하는 마이크로태스크 큐에 추가하려면, 옵션으로 문서 document를 제공합니다:
document가 주어지지 않았다면, document를 암시된 문서로 설정합니다.
microtask를 새로운 태스크로 설정합니다.
microtask의 단계를 steps로 설정합니다.
microtask의 출처를 마이크로태스크 태스크 출처로 설정합니다.
microtask의 문서를 document로 설정합니다.
microtask의 스크립트 평가 환경 설정 객체 세트를 빈 세트로 설정합니다.
마이크로태스크는 초기 실행 중에 이벤트 루프를 회전시킬 경우, 일반 태스크 큐로 이동할 수 있습니다. 이 경우에만 마이크로태스크의 출처, 문서, 스크립트 평가 환경 설정 객체 세트가 참조됩니다. 이들은 마이크로태스크 체크포인트를 수행하는 알고리즘에서는 무시됩니다.
암시된 이벤트 루프는 태스크를 큐에 추가할 때 호출 알고리즘의 문맥에서 추론할 수 있는 이벤트 루프입니다. 이는 일반적으로 모호하지 않으며, 대부분의 명세 알고리즘은 하나의 에이전트(따라서 하나의 이벤트 루프)만 포함하기 때문입니다. 예외는 창과 워커 간의 통신과 같은 교차 에이전트 통신을 포함하거나 명시하는 알고리즘입니다. 이러한 경우에는 암시된 이벤트 루프 개념에 의존해서는 안 되며, 명세는 태스크를 큐에 추가할 때 명시적으로 이벤트 루프를 제공해야 합니다.
암시된 문서는 이벤트 루프 event loop에 태스크를 큐에 추가할 때 다음과 같이 결정됩니다:
만약 event loop가 창 이벤트 루프가 아니라면, null을 반환합니다.
태스크가 요소의 문맥에서 큐에 추가되고 있다면, 해당 요소의 노드 문서를 반환합니다.
태스크가 스크립트에 의해 또는 이를 위해 큐에 추가되고 있다면, 스크립트의 설정 객체의 전역 객체의 연결된 문서
를
반환합니다.
단언: 이전 조건 중 하나가 참이므로 이 단계는 결코 도달되지 않습니다. 정말로?
암시된 이벤트 루프와 암시된 문서는 모호하게 정의되어 있으며, 많은 동작이 멀리에서 발생합니다. 이들을 제거하는 것이 목표입니다, 특히 암시된 문서. 참조 이슈 #4980.
이벤트 루프는 존재하는 한 계속해서 다음 단계들을 실행해야 합니다:
oldestTask와 taskStartTime을 null로 설정합니다.
해당 이벤트 루프에 태스크 큐가 적어도 하나의 실행 가능한 태스크를 포함하고 있다면, 다음을 수행합니다:
태스크 큐 중 하나를 taskQueue로 설정합니다. 이는 구현 정의된 방식으로 선택됩니다.
마이크로태스크 큐는 태스크 큐가 아니므로 이 단계에서 선택되지 않습니다. 하지만, 태스크 큐와 연결된 마이크로태스크 태스크 출처는 이 단계에서 선택될 수 있습니다. 이 경우, 다음 단계에서 선택된 태스크는 원래 마이크로태스크였으나 이벤트 루프를 회전시키는 과정에서 이동한 것입니다.
taskStartTime을 비안전 공유 현재 시간으로 설정합니다.
oldestTask를 taskQueue에서 첫 번째 실행 가능한 태스크로 설정하고, 이를 taskQueue에서 제거합니다.
oldestTask의 문서가 null이 아니면, taskStartTime과 oldestTask의 문서를 주어 태스크 시작 시간 기록을 수행합니다.
이벤트 루프의 현재 실행 중인 태스크를 oldestTask로 설정합니다.
oldestTask의 단계를 수행합니다.
이벤트 루프의 현재 실행 중인 태스크를 다시 null로 설정합니다.
마이크로태스크 체크포인트 수행을 수행합니다.
taskEndTime을 비안전 공유 현재 시간으로 설정합니다. [HRT]
oldestTask가 null이 아닌 경우, 다음을 수행합니다:
top-level browsing contexts를 빈 세트로 설정합니다.
oldestTask의 스크립트 평가 환경 설정 객체 세트의 각 환경 설정 객체 settings에 대해 다음을 수행합니다:
긴 태스크 보고를 수행하여 taskStartTime, taskEndTime, top-level browsing contexts, oldestTask를 전달합니다.
oldestTask의 문서가 null이 아니면, taskEndTime과 oldestTask의 문서를 주어 태스크 종료 시간 기록을 수행합니다.
이 창 이벤트 루프에 실행 가능한 태스크가 태스크 큐에 존재하지 않는 경우, 다음을 수행합니다:
이 이벤트 루프의 마지막 유휴 기간 시작 시간을 비안전 공유 현재 시간으로 설정합니다.
computeDeadline을 다음 단계로 설정합니다:
deadline을 이 이벤트 루프의 마지막 유휴 기간 시작 시간에 50을 더한 값으로 설정합니다.
50ms의 미래 제한은 새로운 사용자 입력에 대한 반응성을 보장하기 위한 것입니다.
hasPendingRenders를 false로 설정합니다.
이 이벤트 루프에 대해 같은 루프 창들 중 windowInSameLoop에 대해 다음을 수행합니다:
windowInSameLoop의 애니메이션 프레임 콜백 목록이 비어 있지 않거나, 사용자 에이전트가 windowInSameLoop가 렌더링 업데이트를 보유하고 있다고 믿는 경우, hasPendingRenders를 true로 설정합니다.
timerCallbackEstimates를 값을 가져와서 windowInSameLoop의 활성 타이머 맵의 결과로 설정합니다.
timerCallbackEstimates의 각 timeoutDeadline에 대해, timeoutDeadline이 deadline보다 작으면 deadline을 timeoutDeadline으로 설정합니다.
hasPendingRenders가 true인 경우, 다음을 수행합니다:
nextRenderDeadline을 이 이벤트 루프의 마지막 렌더 기회 시간에 (현재 새로 고침 속도로 나눈) 1000을 더한 값으로 설정합니다.
새로 고침 속도는 하드웨어 또는 구현에 따라 다를 수 있습니다. 60Hz의 새로 고침 속도에서는 nextRenderDeadline이 마지막 렌더 기회 시간 후 약 16.67ms일 것입니다.
nextRenderDeadline이 deadline보다 작으면 nextRenderDeadline을 반환합니다.
deadline을 반환합니다.
이 이벤트 루프에 대해 같은 루프 창들의 각 win에 대해, 유휴 기간 시작 알고리즘을 수행하고, 다음 단계에서 computeDeadline을 호출한 결과를 반환합니다. 이때, win의 관련 설정 객체의 교차 출처 격리 기능을 주어진 시간을 조정합니다. [REQUESTIDLECALLBACK]
이 워커 이벤트 루프인 경우, 다음을 수행합니다:
이 이벤트 루프의 에이전트의 단일 렘의 전역 객체가 지원되는 DedicatedWorkerGlobalScope
이고,
사용자 에이전트가 해당 시점에서 렌더링 업데이트가 유리하다고 판단하면, 다음을 수행합니다:
now를 현재 고해상도 시간으로 설정합니다. DedicatedWorkerGlobalScope
.
[HRT]
애니메이션 프레임 콜백 실행을 수행하고, now를 타임스탬프로 전달합니다.
현재 상태를 반영하여 해당 전용 워커의 렌더링을 업데이트합니다.
렌더링 업데이트에 대한 노트와 유사하게, 사용자 에이전트는 전용 워커에서 렌더링 비율을 결정할 수 있습니다.
이 이벤트 루프의 태스크 큐에 태스크가 없고, WorkerGlobalScope
객체의 종료 플래그가 true인 경우, 이 이벤트 루프를 파괴하고, 이 단계들을 중단하여,
아래의 웹 워커 섹션에 설명된 워커 실행 단계를 재개합니다.
윈도우 이벤트 루프 eventLoop는 존재하는 한 다음을 병렬로 실행해야 합니다:
하나 이상의 탐색 가능한 요소의 활성 문서의 관련 에이전트의 이벤트 루프가 eventLoop에 대해 렌더링 기회를 가질 때까지 기다립니다.
eventLoop의 마지막 렌더링 기회 시간을 불안전한 공유 현재 시간으로 설정합니다.
navigable이 렌더링 기회를 가진 경우, navigable의 활성 창에 대해 글로벌 작업을 큐에 추가하여 렌더링 작업 소스에 할당하고 렌더링을 업데이트합니다.
이로 인해 렌더링 업데이트에 대한 중복 호출이 발생할 수 있습니다. 그러나 이러한 호출은 불필요한 렌더링 단계에 따라 렌더링이 필요하지 않으므로 관찰 가능한 효과가 없습니다. 구현체는 이미 큐에 있는 경우에만 이 작업을 큐에 추가하는 등 추가 최적화를 도입할 수 있습니다. 그러나 작업과 관련된 문서가 작업이 처리되기 전에 비활성화될 수 있음을 유의해야 합니다.
frameTimestamp을 eventLoop의 마지막 렌더링 기회 시간으로 설정합니다.
docs를 모두 수집하여 eventLoop에 속한 완전 활성 문서
객체로 정렬합니다. 아래의 조건을
제외하고는 임의로 정렬됩니다:
두 문서 A와 B가 동일한 컨테이너 문서 C를 가질 때, A와 B의 순서는 C의 그림자 포함 트리 순서를 따라야 합니다.
아래 단계에서 docs를 반복하여 처리할 때, 각 문서
는 목록에 있는 순서대로 처리되어야 합니다.
비렌더링 가능한 문서 필터링: docs에서 다음 조건 중 하나에 해당하는 문서
객체 doc을 제거합니다:
doc이 렌더링 차단됨.
doc의 가시성 상태가 "
hidden
"입니다.
doc의 렌더링이 뷰 전환을 위한 렌더링 억제로 억제됩니다.
여기에서 렌더링 기회를 확인해야 합니다. 이는 동일한 이벤트 루프를 공유하는 일부 문서가 동일한 시점에 렌더링 기회를 가지지 않을 수 있기 때문입니다.
불필요한 렌더링: 다음 모든 조건이 참인 문서
객체 doc을
docs에서 제거합니다:
사용자 에이전트가 doc의 노드 탐색 가능을 업데이트해도 시각적으로 영향을 미치지 않을 것으로 판단합니다.
doc의 애니메이션 프레임 콜백 맵이 비어 있습니다.
사용자 에이전트가 렌더링 업데이트를 건너뛰는 것이 더 바람직하다고 판단하는 경우 docs에서 모든 문서
객체를 제거합니다.
비렌더링 가능한 문서 필터링 단계는 사용자에게 새로운 콘텐츠를 표시할 수 없는 경우 사용자 에이전트가 렌더링 업데이트를 방지합니다.
불필요한 렌더링 단계는 사용자 에이전트가 그릴 새로운 콘텐츠가 없는 경우 렌더링 업데이트를 방지합니다.
이 단계는 아래의 단계가 실행되지 않도록 사용자 에이전트가 방지할 수 있게 합니다. 예를 들어 특정 작업이 서로 직후에 실행되도록 보장하는 것입니다. 예를 들어 애니메이션 프레임 콜백 없이 마이크로태스크 체크포인트만 삽입된 상태로 타이머 콜백을 묶고 싶은 경우가 있습니다. 구체적으로, 사용자 에이전트는 중간 렌더링 업데이트 없이 타이머 콜백을 함께 결합하고자 할 수 있습니다.
각 doc에 대해 문서 표시 작업을 수행합니다.
각 doc에 대해 자동 포커스 후보 플러시 작업을 수행합니다. 만약 doc의 노드 탐색 가능이 최상위 탐색 가능 요소인 경우입니다.
각 doc에 대해 크기 조정 단계를 실행합니다. [CSSOMVIEW]
각 doc에 대해 스크롤 단계를 실행합니다. [CSSOMVIEW]
각 doc에 대해 미디어 쿼리를 평가하고 변경 사항을 보고합니다. [CSSOMVIEW]
각 doc에 대해 애니메이션 업데이트 및 이벤트 전송을 실행합니다. frameTimestamp와 doc의 관련 글로벌 객체를 타임스탬프로 사용하여 수행합니다. [WEBANIMATIONS]
각 doc에 대해 전체 화면 단계 실행을 수행합니다. [FULLSCREEN]
각 doc에 대해, CanvasRenderingContext2D
또는 OffscreenCanvasRenderingContext2D
와
연결된 context의 백업 저장소가 손실된 경우, 각 context에 대해 컨텍스트
손실 단계를 실행해야 합니다.
canvas를 context의 canvas
속성의 값으로
설정합니다. 만약 context가 CanvasRenderingContext2D
라면,
그렇지 않으면 context와 연결된 연결된
OffscreenCanvas
객체로 설정합니다.
context의 컨텍스트 손실을 true로 설정합니다.
context를 대상으로 렌더링 컨텍스트를 기본 상태로 재설정합니다.
canvas에서 이벤트를 발생시켜 contextlost
라는
이름의 이벤트를 실행하고, 취소 가능 속성을 true로 초기화합니다.
shouldRestore이 false인 경우, 이 단계를 중단합니다.
context의 속성을 사용하여 백업 저장소를 생성하고 context에 연결하려고 시도합니다. 실패하면 이 단계를 중단합니다.
context의 컨텍스트 손실을 false로 설정합니다.
이벤트를 발생시켜 contextrestored
라는
이름의 이벤트를 canvas에서 실행합니다.
각 doc에 대해 애니메이션 프레임 콜백 실행을 상대적 고해상도 시간을 사용하여 frameTimestamp와 doc의 관련 글로벌 객체에 대해 타임스탬프로 전달하여 수행합니다.
unsafeStyleAndLayoutStartTime을 불안전한 공유 현재 시간으로 설정합니다.
각 doc에 대해:
resizeObserverDepth를 0으로 설정합니다.
계속 반복합니다:
doc의 스타일을 다시 계산하고 레이아웃을 업데이트합니다.
hadInitialVisibleContentVisibilityDetermination을 false로 설정합니다.
'자동' 값을 사용하는 element의 콘텐츠 가시성 속성에 대해 각 요소에 대해:
만약 element의 뷰포트와의 근접성이 결정되지 않았고 사용자에게 관련성이 없는 경우 checkForInitialDetermination을 true로 설정합니다. 그렇지 않으면 checkForInitialDetermination을 false로 설정합니다.
element에 대한 뷰포트와의 근접성을 결정합니다.
만약 checkForInitialDetermination이 true이고 element가 사용자에게 관련성이 있는 경우, hadInitialVisibleContentVisibilityDetermination을 true로 설정합니다.
만약 hadInitialVisibleContentVisibilityDetermination이 true라면, 계속합니다.
이 단계의 의도는 첫 번째 뷰포트 근접성 결정이 즉시 적용되며, 이 루프의 이전 단계에서 수행된 스타일 및 레이아웃 계산에 반영되도록 하는 것입니다. 초기 결정 외의 근접성 결정은 다음 렌더링 기회에서 적용됩니다. [CSSCONTAIN]
지정된 깊이에서 활성 크기 조정 관측 수집을 doc에 대해 수행합니다.
만약 doc이 활성 크기 조정 관측을 가지고 있는 경우:
resizeObserverDepth을 doc에 대해 활성 크기 조정 관측을 방송한 결과로 설정합니다.
doc이 스킵된 크기 조정 관측을 가지고 있는 경우, doc에 대해 크기 조정 루프 오류 전달을 수행합니다.
각 doc에 대해, doc의 문서의 포커스 영역이 포커스 가능한 영역이 아닌 경우, doc의 뷰포트에 대해 포커싱 단계를 실행하고, doc의 관련 글로벌 객체의 네비게이션 API의 진행 중인 네비게이션 동안 포커스 변경을 false로 설정합니다.
예를 들어, 이 상황은 요소에 렌더링되지 않는 경우 발생할 수 있습니다. 또한 요소가 비활성화되는 경우에도 발생할 수 있습니다.
속성이 추가되어 더 이상이 비동기 수정은 일반적으로 blur 이벤트와 change 이벤트를 발생시킵니다.
문서의 포커스 영역이 제거되는 경우, 이 비동기 수정 외에도 동기 수정이 수행됩니다. 이 경우 blur 또는 change 이벤트가 발생하지 않습니다.
각 doc에 대해 대기 중인 전환 작업 수행을 실행합니다. [CSSVIEWTRANSITIONS]
각 doc에 대해 교차 관측 업데이트 단계 실행을 now와 doc의 관련 글로벌 객체에 대해 상대적 고해상도 시간을 사용하여 수행합니다. [INTERSECTIONOBSERVER]
각 doc에 대해 렌더링 시간 기록을 unsafeStyleAndLayoutStartTime을 사용하여 수행합니다.
각 doc에 대해 페인트 타이밍 표시를 수행합니다.
각 doc에 대해, doc과 그 노드 탐색 가능 요소의 현재 상태를 반영하도록 렌더링 또는 사용자 인터페이스를 업데이트합니다.
각 doc에 대해, 상위 레이어 제거 처리를 수행합니다.
A 탐색 가능한 요소는 사용자가 에이전트가 하드웨어 새로 고침 속도 제약과 성능을 위한 사용자 에이전트 제한을 고려하되, 뷰포트 외부에 있는 콘텐츠도 표시 가능한 것으로 간주하면서 현재 탐색 가능한 요소의 콘텐츠를 사용자에게 제공할 수 있는 경우 렌더링 기회를 가집니다.
A 탐색 가능한 요소의 렌더링 기회는 디스플레이 새로 고침 속도와 같은 하드웨어 제약 및 페이지 성능 또는 활성 문서의 가시성 상태가 "visible
"인지 여부와 같은 기타 요인을 기반으로
결정됩니다. 렌더링 기회는 일반적으로 정기적으로 발생합니다.
이 사양에서는 특정 렌더링 기회 선택 모델을 명시하지 않습니다. 예를 들어, 브라우저가 60Hz의 새로 고침 속도를 달성하려고 시도하는 경우, 렌더링 기회는 최대 초당 60분의 1(약 16.7ms)마다 발생합니다. 브라우저가 특정 탐색 가능한 요소가 이 속도를 유지할 수 없다고 판단하면, 가끔씩 프레임을 놓치는 것보다는 해당 탐색 가능한 요소에 대해 초당 30번의 더 지속 가능한 렌더링 기회로 떨어뜨릴 수 있습니다. 마찬가지로, 탐색 가능한 요소가 보이지 않는 경우 사용자 에이전트는 해당 페이지를 훨씬 느린 초당 4번의 렌더링 기회로 낮추거나 심지어 더 낮출 수도 있습니다.
사용자 에이전트가 마이크로태스크 체크포인트를 수행해야 할 때:
만약 이벤트 루프의 마이크로태스크 체크포인트 수행 중이 true라면, 리턴합니다.
이벤트 루프의 마이크로태스크 체크포인트 수행 중을 true로 설정합니다.
이벤트 루프의 마이크로태스크 큐가 비어 있지 않은 동안:
oldestMicrotask를 큐에서 제거한 결과로 설정합니다. 이는 이벤트 루프의 마이크로태스크 큐에서 수행됩니다.
이벤트 루프의 현재 실행 중인 작업을 oldestMicrotask로 설정합니다.
oldestMicrotask를 실행합니다.
이 과정에는 스크립트된 콜백을 호출하는 것이 포함될 수 있으며, 이는 결국 스크립트 실행 후 정리 단계를 호출하고, 이 단계는 다시 이 마이크로태스크 체크포인트 수행 알고리즘을 호출하게 됩니다. 따라서 재진입을 방지하기 위해 마이크로태스크 체크포인트 수행 중 플래그를 사용합니다.
이벤트 루프의 현재 실행 중인 작업을 다시 null로 설정합니다.
각 환경 설정 객체에 대해 settingsObject의 책임 있는 이벤트 루프가 이 이벤트 루프인 경우, settingsObject의 글로벌 객체에 대해 거부된 프로미스에 대해 알림을 수행합니다.
인덱스된 데이터베이스 트랜잭션 정리를 수행합니다.
ClearKeptObjects를 수행합니다.
WeakRef.prototype.deref()가 객체를 반환할 때, 해당 객체는 ClearKeptObjects가 다시 호출될 때까지 생존하며, 그 이후에는 다시 가비지 수집의 대상이 됩니다.
이벤트 루프의 마이크로태스크 체크포인트 수행 중을 false로 설정합니다.
마이크로태스크 체크포인트에 대한 타이밍 정보 기록을 수행합니다.
알고리즘이 병렬로 실행되는 중에 안정된 상태를 기다려야 할 때, 사용자 에이전트는 다음 단계를 실행하는 마이크로태스크를 큐에 추가해야 하며, 그 후 실행을 중지해야 합니다(알고리즘의 실행은 마이크로태스크가 실행될 때 재개됩니다. 이는 다음 단계에서 설명합니다).
알고리즘의 동기 섹션을 실행합니다.
알고리즘의 단계에서 설명한 대로 적절하다면 병렬로 알고리즘의 실행을 재개합니다.
동기 섹션의 단계는 ⌛로 표시됩니다.
조건 goal이 충족될 때까지 이벤트 루프를 돌리는 알고리즘 단계는 다음 알고리즘 단계를 대체하는 것과 동일합니다:
task를 이벤트 루프의 현재 실행 중인 작업으로 설정합니다.
task는 마이크로태스크일 수 있습니다.
task source를 task의 소스로 설정합니다.
old stack을 자바스크립트 실행 컨텍스트 스택의 복사본으로 설정합니다.
자바스크립트 실행 컨텍스트 스택을 비웁니다.
task가 마이크로태스크인 경우, 마이크로태스크 체크포인트 수행 중이 true이므로 이 단계는 아무 작업도 하지 않습니다.
병렬로:
조건 goal이 충족될 때까지 기다립니다.
task source에 작업을 큐에 추가하여 다음을 수행합니다:
old stack으로 자바스크립트 실행 컨텍스트 스택을 교체합니다.
원래 알고리즘에서 이 이벤트 루프 돌리기 인스턴스 이후에 나타나는 모든 단계를 수행합니다.
이로 인해 task가 재개됩니다.
task를 중지하고, 이를 호출한 알고리즘이 다시 시작되도록 합니다.
이로 인해 이벤트 루프의 주요 단계 세트 또는 마이크로태스크 체크포인트 수행 알고리즘이 계속됩니다.
이 사양 및 다른 사양에서 프로그래밍 언어의 함수 호출과 유사하게 동작하는 다른 알고리즘과 달리, 이벤트 루프 돌리기는 매크로와 유사합니다. 이는 일련의 단계 및 작업으로 확장하여 사용 사이트에서 타이핑 및 들여쓰기를 줄여줍니다.
다음 단계가 포함된 알고리즘:
무언가를 수행합니다.
이벤트 루프를 돌려 멋진 일이 일어날 때까지 기다립니다.
다른 작업을 수행합니다.
이는 "매크로 확장" 후 다음과 같이 됩니다:
무언가를 수행합니다.
old stack을 자바스크립트 실행 컨텍스트 스택의 복사본으로 설정합니다.
자바스크립트 실행 컨텍스트 스택을 비웁니다.
병렬로:
멋진 일이 일어날 때까지 기다립니다.
작업을 큐에 추가하여 "무언가 수행"에서 수행된 작업 소스에서 다음을 수행합니다:
old stack으로 자바스크립트 실행 컨텍스트 스택을 교체합니다.
다른 작업을 수행합니다.
병렬 작업에서 큐에 추가된 작업 내부에서 이벤트 루프가 회전하는 경우의 대체 예제는 다음과 같습니다. 이벤트 루프 돌리기를 사용한 버전:
병렬로:
병렬 작업 1을 수행합니다.
작업을 큐에 추가하여 DOM 조작 작업 소스에서 다음을 수행합니다:
작업 1을 수행합니다.
이벤트 루프를 돌려 멋진 일이 일어날 때까지 기다립니다.
작업 2를 수행합니다.
병렬 작업 2를 수행합니다.
완전히 확장된 버전:
병렬로:
병렬 작업 1을 수행합니다.
old stack을 null로 설정합니다.
작업을 큐에 추가하여 DOM 조작 작업 소스에서 다음을 수행합니다:
작업 1을 수행합니다.
old stack을 자바스크립트 실행 컨텍스트 스택의 복사본으로 설정합니다.
자바스크립트 실행 컨텍스트 스택을 비웁니다.
멋진 일이 일어날 때까지 기다립니다.
작업을 큐에 추가하여 DOM 조작 작업 소스에서 다음을 수행합니다:
old stack으로 자바스크립트 실행 컨텍스트 스택을 교체합니다.
작업 2를 수행합니다.
병렬 작업 2를 수행합니다.
이 사양의 일부 알고리즘은 역사적인 이유로 사용자가 작업을 실행하는 동안 일시 중지해야 하며, 조건 goal이 충족될 때까지 대기해야 합니다. 이는 다음 단계를 실행하는 것을 의미합니다:
global을 현재 글로벌 객체로 설정합니다.
timeBeforePause를 현재 고해상도 시간으로 설정하고, global을 사용하여 값을 구합니다.
필요한 경우, 문서
또는 탐색 가능한 요소의 렌더링 또는 사용자 인터페이스를 현재 상태로
반영되도록 업데이트합니다.
조건 goal이 충족될 때까지 기다립니다. 사용자 에이전트가 일시 중지된 작업을 가지고 있는 동안, 해당 이벤트 루프는 추가 작업을 실행하지 않아야 하며, 현재 실행 중인 작업의 모든 스크립트는 차단되어야 합니다. 그러나 일시 중지된 동안에도 사용자 입력에 대한 응답을 유지해야 하며, 이벤트 루프가 아무 작업도 하지 않기 때문에 제한된 용량에서만 응답할 수 있습니다.
일시 중지 기간 기록을 수행합니다. 이는 timeBeforePause에서 지속 시간까지, 그리고 global을 사용하여 현재 고해상도 시간을 기록합니다.
일시 중지는 사용자 경험에 매우 해롭습니다. 특히 여러 문서가 단일 이벤트 루프를 공유하는 시나리오에서는 더욱 그렇습니다. 사용자 에이전트는 일시 중지 대신 이벤트 루프 돌리기 또는 실행 중단 없이 계속 진행하는 등 대안을 실험해보는 것이 좋습니다. 기존 콘텐츠와의 호환성을 유지하면서 가능하다면 이 사양은 더 적합한 대안이 웹과 호환된다는 것이 밝혀지면 기꺼이 변경될 것입니다.
그동안 구현자는 사용자 에이전트가 실험할 수 있는 다양한 대안이 이벤트 루프의 동작, 특히 작업 및 마이크로태스크의 타이밍에 미묘한 변화를 줄 수 있음을 인식해야 합니다. 구현은 일시 중지 작업에 의해 암시된 정확한 의미를 위반하더라도 계속해서 실험해야 합니다.
다음 작업 소스는 이 사양 및 다른 사양에서 주로 관련이 없는 여러 기능에 의해 사용됩니다.
이 작업 소스는 요소가 문서에 삽입될 때 비차단 방식으로 발생하는 작업과 같이 DOM 조작에 반응하는 기능에 사용됩니다.
이 작업 소스는 예를 들어 키보드 또는 마우스 입력과 같은 사용자 상호작용에 반응하는 기능에 사용됩니다.
사용자 입력에 대한 응답으로 전송되는 이벤트(예: click
이벤트)는 사용자
상호작용 작업 소스로 작업을 큐에 추가하여 실행해야 합니다. [UIEVENTS]
이 작업 소스는 네트워크 활동에 대한 반응으로 트리거되는 기능에 사용됩니다.
이벤트 루프(event loop)와 올바르게 상호작용하는 사양을 작성하는 것은 까다로울 수 있습니다. 이는 이 사양이 동시성 모델과 독립적인 용어를 사용하여, "메인 스레드"나 "백그라운드 스레드에서"와 같은 보다 익숙한 모델 특정 용어 대신 "이벤트 루프"와 "병렬로"와 같은 용어를 사용하기 때문에 더욱 그렇습니다.
기본적으로, 사양 텍스트는 일반적으로 이벤트 루프에서 실행됩니다. 이는 대부분의 알고리즘을 작업으로 추적할 수 있고, 해당 작업이 큐에 추가되기 때문에, 이는 공식적인 이벤트 루프 처리 모델에서 자연스럽게 나옵니다.
JavaScript 메서드의 알고리즘 단계는 해당 메서드를 호출하는 작성자 코드에 의해 호출됩니다. 작성자 코드는 보통 스크립트
처리 모델의 어딘가에서 기원한 큐에 추가된 작업을 통해서만 실행될 수 있습니다.
이 출발점에서, 기본 지침은 사양이 수행해야 하는 모든 작업이 이벤트 루프를 차단할 수 있는 경우, 대신 해당 작업이 병렬로 수행되어야 한다는 것입니다. 여기에는 (하지만 이에 국한되지 않음):
무거운 계산 수행;
사용자에게 표시되는 프롬프트 표시;
외부 시스템을 포함할 수 있는 작업 수행 (예: "프로세스 외부로 나가기").
다음으로 복잡한 점은, 병렬로 실행되는 알고리즘 섹션에서는 특정 realm, 글로벌 객체 또는 환경 설정 객체와 연결된 객체를 생성하거나 조작해서는 안 됩니다. (더 익숙한 용어로 말하자면, 백그라운드 스레드에서 메인 스레드 아티팩트를 직접 접근해서는 안 됩니다.) 이렇게 하면 알고리즘 단계가 JavaScript 코드와 병렬로 실행되므로, JavaScript 코드에 관찰 가능한 데이터 경쟁이 발생할 수 있습니다.
그러나 Infra의 사양 수준 데이터 구조와 값을 조작할 수 있으며, 이러한 데이터 구조와 값은 realm-agnostic입니다. 이러한 값은 특정 변환이 발생하지 않는 한(종종 Web IDL을 통해) JavaScript에 직접 노출되지 않습니다. [INFRA] [WEBIDL]
따라서 관찰 가능한 JavaScript 객체의 세계에 영향을 미치기 위해서는, 해당 조작을 수행하기 위해 글로벌 작업을 큐에 추가해야 합니다. 이렇게 하면 다른 작업과 비교해 이벤트 루프에서의 작업 순서가 올바르게 상호 삽입됩니다. 또한, 작업 소스를 선택하여 글로벌 작업을 큐에 추가해야 합니다. 이는 다른 작업과 비교하여 단계의 상대적 순서를 결정합니다. 어떤 작업 소스를 사용할지 확신이 서지 않으면, 가장 적합하다고 생각되는 일반 작업 소스 중 하나를 선택하십시오. 마지막으로, 큐에 추가된 작업과 관련된 글로벌 객체를 지정해야 합니다. 이는 해당 글로벌 객체가 비활성 상태인 경우 작업이 실행되지 않도록 보장합니다.
글로벌 작업을 큐에 추가하는 기본 원시 작업은 작업을 큐에 추가하는 알고리즘입니다. 일반적으로, 글로벌 작업을 큐에 추가하는 것이 더 나은 방법입니다. 이는 자동으로 올바른 이벤트 루프를 선택하고, 적절한 경우 문서를 선택하기 때문입니다. 이전 사양에서는 종종 작업을 큐에 추가하는 것을 암시된 이벤트 루프 및 암시된 문서 개념과 결합하여 사용했지만, 이는 권장되지 않습니다.
이 모든 것을 종합하면, 비동기적으로 작업을 수행해야 하는 일반적인 알고리즘 템플릿을 제공할 수 있습니다:
이벤트 루프에서 여전히 동기 설정 작업을 수행합니다. 여기에는 realm-특정 JavaScript 값을 realm-agnostic 사양 수준 값으로 변환하는 작업이 포함될 수 있습니다.
병렬로 실행하면서, realm-agnostic 값으로만 작동하고 realm-agnostic 결과를 생성하는 잠재적으로 비용이 많이 드는 작업 세트를 수행합니다.
지정된 작업 소스와 적절한 글로벌 객체를 지정하여 글로벌 작업을 큐에 추가하고, realm-agnostic 결과를 이벤트 루프의 JavaScript 객체의 관찰 가능한 세계에 대한 관찰 가능한 효과로 변환합니다.
다음은 전달된 목록의 스칼라 값 문자열 input을 URL로 파싱한 후 "암호화"하는 알고리즘입니다:
urls을 빈 목록으로 설정합니다.
각 string에 대해 input을 반복합니다:
parsed를 string에 대해 URL 인코딩-파싱을 실행한 결과로 설정하고, 현재 설정 객체를 기준으로 합니다.
parsed가 실패이면, SyntaxError DOMException
으로
거부된 프로미스를 반환합니다.
serialized를 URL 직렬화기를 parsed에 적용한 결과로 설정합니다.
serialized를 urls에 추가합니다.
realm을 현재 realm으로 설정합니다.
p를 새 프로미스로 설정합니다.
다음 단계를 병렬로 실행합니다:
encryptedURLs를 빈 목록으로 설정합니다.
각 url에 대해 urls을 반복합니다:
글로벌 작업을 큐에 추가하고, realm의 글로벌 객체를 지정하여 다음 단계를 수행합니다:
array를 encryptedURLs을 JavaScript 배열로 변환한 결과로 설정합니다.
p를 array로 해결합니다.
p를 반환합니다.
이 알고리즘에 대해 주목할 점은 다음과 같습니다:
이 알고리즘은 URL 파싱을 병렬 단계로 넘어가기 전에 이벤트 루프에서 먼저 수행합니다. 이는 파싱이 현재 설정 객체에 의존하기 때문에 필요합니다. 병렬로 전환한 후에는 더 이상 현재 설정 객체가 유지되지 않기 때문입니다.
대신 현재 설정 객체의 API 기본 URL 참조를 저장하고 병렬 단계에서 사용할 수도 있었습니다. 이는 동등한 방법입니다. 그러나 이 예제에서처럼 가능한 한 많은 작업을 먼저 수행하는 것을 권장합니다. 올바른 값을 저장하려고 시도하는 것은 오류를 일으킬 수 있습니다. 예를 들어, API 기본 URL 대신 현재 설정 객체만 저장했다면 경쟁 상태가 발생할 가능성이 있습니다.
이 알고리즘은 처음 단계에서 목록과 문자열을 암시적으로 병렬 단계로 전달합니다. 이것은 목록과 문자열이 모두 realm-agnostic이므로 괜찮습니다.
이 알고리즘은 병렬 단계에서 "비용이 많이 드는 계산"(입력된 각 URL에 대해 100밀리초 대기)을 수행하여 메인 이벤트 루프를 차단하지 않습니다.
프로미스는 관찰 가능한 JavaScript 객체로서 병렬 단계 동안 절대 생성되거나 조작되지 않습니다. p는 해당 단계에 들어가기 전에 생성되고, 그런 다음 해당 작업을 위해 큐에 추가된 작업 동안 조작됩니다.
JavaScript 배열 객체의 생성도 큐에 추가된 작업 동안 발생하며, 이제 더 이상 명확하지 않은 컨텍스트에서 배열이 생성되는 realm을 신중하게 지정합니다.
(마지막 두 가지 점에 대해서는 whatwg/webidl 이슈 #135 및 whatwg/webidl 이슈 #371도 참조하십시오. 여기서는 위에서 설명한 프로미스 해결 패턴의 미묘한 점을 아직 논의 중입니다.)
또한, 이 알고리즘이 sequence
<USVString
>을
취하는 Web IDL로 지정된 작업에서 호출된 경우, 작성자가 입력으로 제공한 특정 realm JavaScript 객체에서 realm-agnostic
sequence
<USVString
>
Web IDL 타입으로 자동 변환이 이루어졌다는 점도 주목해야 합니다. 그런 다음 이를 목록과 스칼라 값 문자열로
처리합니다. 따라서 사양이 어떻게 구성되어 있는지에 따라, 메인 이벤트
루프에서 병렬로 진행하기 위한 준비 과정에서 중요한 역할을 하는 다른 암시적인 단계가 있을 수 있습니다.
많은 객체는 이벤트 핸들러를 지정할 수 있습니다. 이들은 객체에 대해 비캡처 이벤트 리스너로 작동합니다. [DOM]
이벤트 핸들러는 두 가지 구조체 항목을 포함하는 구조체 항목입니다:
값은 null, 콜백 객체 또는 내부
원시 미컴파일 핸들러일 수 있습니다. EventHandler
콜백 함수 타입은
스크립트에 노출되는 방식을 설명합니다. 초기에는 이벤트
핸들러의 값이 null로
설정되어야 합니다.
리스너는 null이거나 이벤트 리스너로, 이벤트 핸들러 처리 알고리즘을 실행하는 책임이 있습니다. 초기에는 이벤트 핸들러의 리스너가 null로 설정되어야 합니다.
이벤트 핸들러는 두 가지 방법으로 노출됩니다.
첫 번째 방법은 모든 이벤트 핸들러에 공통된 이벤트 핸들러 IDL 속성으로 노출됩니다.
두 번째 방법은 이벤트 핸들러 콘텐츠 속성으로 노출됩니다. HTML 요소와 일부 Window
객체의 이벤트 핸들러가 이 방식으로 노출됩니다.
이 두 가지 방법 모두에서, 이벤트 핸들러는
"on
"으로 시작하고 핸들러가 의도된 이벤트의 이름이 뒤따르는 문자열인 이름을 통해 노출됩니다.
대부분의 경우, 이벤트 핸들러를 노출하는 객체는 해당하는 이벤트 리스너가 추가된 객체와 동일합니다. 그러나 body
및 frameset
요소는 해당 요소의 Window
객체가 존재할 경우 그 객체에 대해 작동하는 여러 이벤트 핸들러를 노출합니다. 이 경우, 해당 객체를 이벤트 핸들러가 작동하는 대상이라고 부릅니다.
이벤트 핸들러의 대상을 결정하기 위해, EventTarget
객체 eventTarget과 이벤트 핸들러가 노출된
이벤트 핸들러 이름 name을 사용하여
다음 단계를 수행합니다:
eventTarget이 body
요소가 아니거나
frameset
요소가 아닌 경우,
eventTarget을 반환합니다.
name이 WindowEventHandlers
인터페이스 믹스인의 속성 이름이 아니고 Window
반영
body 요소 이벤트 핸들러 세트에 포함되지 않는 경우,
eventTarget을 반환합니다.
eventTarget의 노드 문서가 활성 문서가 아닌 경우, null을 반환합니다.
이 객체가 body
요소이지만 해당하는
Window
객체가 없는 경우 이러한 상황이 발생할 수
있습니다.
이 검사로 인해 반드시 body
및 frameset
요소가 그들의 노드 문서의 body 요소가 아닌
경우에도 다음 단계로 넘어갈 수 있습니다. 특히 활성
문서에서 생성된 document.createElement()
을
사용하여 생성되었지만 연결되지 않은 body
요소도 여러 이벤트 핸들러의 대상이 될 수 있습니다.
하나 이상의 이벤트 핸들러가 지정된 모든 EventTarget
객체는 관련 이벤트 핸들러 맵을 가집니다. 이는 순서가 있는 맵으로, 이름에 해당하는 문자열을 이벤트 핸들러와 매핑합니다.
하나 이상의 이벤트 핸들러가 지정된 EventTarget
객체가 생성될 때, 해당 이벤트 핸들러 맵은 해당 객체가 대상인
각 이벤트 핸들러에 대한 항목을 포함하도록 초기화되어야 하며, 이 이벤트 핸들러의 항목은 초기값으로 설정됩니다.
항목의 순서는 임의적일 수 있습니다. 이는 맵에서 작동하는 알고리즘을 통해 관찰할 수 없습니다.
항목은 단순히 해당 객체에 노출된 것이지만 다른 객체를 대상으로 하는 이벤트 핸들러의 경우 객체의 이벤트 핸들러 맵에 생성되지 않습니다.
이벤트 핸들러 IDL 속성은 특정 이벤트 핸들러의 IDL 속성입니다. IDL 속성의 이름은 이름과 동일합니다.
name을 가진 이벤트 핸들러 IDL 속성의 getter는 호출될 때 다음 단계를 수행해야 합니다:
eventTarget을 이벤트 핸들러의 대상을 결정하는 것의 결과로 설정합니다.
eventTarget이 null이면 null을 반환합니다.
eventTarget과 name을 사용하여 이벤트 핸들러의 현재 값을 가져오는 것의 결과를 반환합니다.
name을 가진 이벤트 핸들러 IDL 속성의 setter는 호출될 때 다음 단계를 수행해야 합니다:
eventTarget을 이벤트 핸들러의 대상을 결정하는 것의 결과로 설정합니다.
eventTarget이 null이면 반환합니다.
지정된 값이 null인 경우, 이벤트 핸들러 비활성화를 eventTarget과 name을 사용하여 수행합니다.
그렇지 않으면:
handlerMap을 eventTarget의 이벤트 핸들러 맵으로 설정합니다.
eventHandler를 handlerMap[name]으로 설정합니다.
eventHandler의 값을 지정된 값으로 설정합니다.
이벤트 핸들러 활성화를 eventTarget과 name을 사용하여 수행합니다.
특정 이벤트 핸들러 IDL 속성은 추가 요구 사항이 있습니다. 특히 onmessage
속성은 MessagePort
객체에서 사용됩니다.
이벤트 핸들러 콘텐츠 속성은 특정 이벤트 핸들러의 콘텐츠 속성입니다. 콘텐츠 속성의 이름은 이름과 동일합니다.
이벤트 핸들러 콘텐츠 속성이 지정될 때는 유효한 자바스크립트 코드가 포함되어 있어야 하며, 이를 구문 분석하면 FunctionBody 프로덕션과 일치해야 합니다. 자동 세미콜론 삽입 이후에 일치해야 합니다.
다음 속성 변경 단계는 이벤트 핸들러 콘텐츠 속성과 이벤트 핸들러 간의 동기화를 위해 사용됩니다: [DOM]
namespace가 null이 아니거나 localName이 이벤트 핸들러 콘텐츠 속성의 이름이 아닌 경우 반환합니다.
eventTarget을 이벤트 핸들러의 대상을 결정하는 것의 결과로 설정합니다.
eventTarget이 null이면 반환합니다.
value가 null이면 이벤트 핸들러 비활성화를 eventTarget과 localName을 사용하여 수행합니다.
그렇지 않으면:
콘텐츠
보안 정책에 의해 요소의 인라인 동작이 차단되어야 하는가? 알고리즘이 element, "스크립트 속성
" 및
value에 대해 실행될 때 "차단됨
"을 반환하면 반환합니다. [CSP]
handlerMap을 eventTarget의 이벤트 핸들러 맵으로 설정합니다.
eventHandler를 handlerMap[localName]으로 설정합니다.
location을 이 단계의 실행을 트리거한 스크립트 위치로 설정합니다.
eventHandler의 값을 내부 원시 미컴파일 핸들러 value/location으로 설정합니다.
이벤트 핸들러 활성화를 eventTarget과 localName을 사용하여 수행합니다.
DOM 표준에 따라, 이 단계는 oldValue와 value가 동일한 경우(속성을 현재 값으로 설정)에도 실행되지만, oldValue와 value가 모두 null인 경우(현재 존재하지 않는 속성을 제거)에는 실행되지 않습니다. [DOM]
이벤트 핸들러의 비활성화를 위해, EventTarget
객체 eventTarget과 이름을
나타내는 문자열 name이 주어진 경우, 다음 단계를 실행합니다:
handlerMap을 eventTarget의 이벤트 핸들러 맵으로 설정합니다.
eventHandler를 handlerMap[name]으로 설정합니다.
eventHandler의 값을 null로 설정합니다.
listener를 eventHandler의 리스너로 설정합니다.
listener가 null이 아닌 경우, eventTarget과 listener를 사용하여 이벤트 리스너 제거를 실행합니다.
eventHandler의 리스너를 null로 설정합니다.
이벤트 핸들러와 리스너를 모두 지우기 위해, EventTarget
객체 eventTarget이 주어진 경우, 다음 단계를 실행합니다:
eventTarget에 관련된 이벤트 핸들러 맵이 있는 경우, eventTarget의 관련된 이벤트 핸들러 맵의 각 name → eventHandler에 대해, eventTarget과 name을 사용하여 이벤트 핸들러 비활성화를 실행합니다.
eventTarget을 사용하여 모든 이벤트 리스너 제거를 실행합니다.
이 알고리즘은 document.open()
을 정의하는 데
사용됩니다.
이벤트 핸들러를 활성화하기 위해, EventTarget
객체 eventTarget과 이름을
나타내는 문자열 name이 주어진 경우, 다음 단계를 실행합니다:
handlerMap을 eventTarget의 이벤트 핸들러 맵으로 설정합니다.
eventHandler를 handlerMap[name]으로 설정합니다.
만약 eventHandler의 리스너가 null이 아니라면, 리턴합니다.
callback을 eventTarget, name, 그리고 그 인수를 주어진 하나의 인수로 실행하는 함수를 참조하는 Web IDL
EventListener
인스턴스를 생성한 결과로 설정합니다. 이 함수는 이벤트 핸들러 처리 알고리즘의 단계를 수행합니다.
EventListener
의
콜백
컨텍스트는 임의로 설정할 수 있으며, 이는 이벤트 핸들러 처리 알고리즘의 단계에 영향을 주지
않습니다. [DOM]
콜백은 명확하게 이벤트 핸들러 자체가 아닙니다. 모든 이벤트 핸들러는 동일한 콜백, 즉 올바른 코드를 호출하고 코드의 반환 값을 처리하는 아래 정의된 알고리즘을 등록하게 됩니다.
listener를 새 이벤트 리스너로 설정합니다. 이 리스너의 타입은 eventHandler에 해당하는 이벤트 핸들러 이벤트 타입이고, 콜백은 callback입니다.
명확히 하자면, 이벤트 리스너는
EventListener
와
다릅니다.
이벤트 리스너 추가를 eventTarget과 listener로 실행합니다.
eventHandler의 리스너를 listener로 설정합니다.
이벤트 리스너 등록은 이벤트 핸들러의 값이 null이 아닌 값으로 설정되고, 이벤트 핸들러가 아직 활성화되지 않은 경우에만 발생합니다. 리스너는 등록된 순서대로 호출되므로, 비활성화가 발생하지 않는 한, 특정 이벤트 유형에 대한 이벤트 리스너의 순서는 항상 다음과 같습니다:
첫 번째로, 이벤트 핸들러의 값이 null이 아닌 값으로
설정되기 전 addEventListener()
로
등록된 이벤트 리스너
그 다음으로, 현재 설정된 콜백 (있는 경우)
마지막으로, 이벤트 핸들러의 값이 null이 아닌 값으로
설정된 후에 addEventListener()
로
등록된 이벤트 리스너
이 예제는 이벤트 리스너가 호출되는 순서를 보여줍니다. 사용자가 이 예제의 버튼을 클릭하면, 페이지에는 차례로 "ONE", "TWO", "THREE", "FOUR"라는 텍스트가 포함된 네 개의 경고창이 표시됩니다.
< button id = "test" > Start Demo</ button >
< script >
var button = document. getElementById( 'test' );
button. addEventListener( 'click' , function () { alert( 'ONE' ) }, false );
button. setAttribute( 'onclick' , "alert('NOT CALLED')" ); // 여기서 이벤트 핸들러 리스너가 등록됩니다.
button. addEventListener( 'click' , function () { alert( 'THREE' ) }, false );
button. onclick = function () { alert( 'TWO' ); };
button. addEventListener( 'click' , function () { alert( 'FOUR' ) }, false );
</ script >
그러나 다음 예제에서는 이벤트 핸들러가 초기 활성화된 후 (이벤트 리스너가 제거되고), 나중에 다시 활성화되기 전에 비활성화됩니다. 페이지에는 순서대로 "ONE", "TWO", "THREE", "FOUR", "FIVE"라는 텍스트가 포함된 다섯 개의 경고창이 표시됩니다.
< button id = "test" > Start Demo</ button >
< script >
var button = document. getElementById( 'test' );
button. addEventListener( 'click' , function () { alert( 'ONE' ) }, false );
button. setAttribute( 'onclick' , "alert('NOT CALLED')" ); // event handler is activated here
button. addEventListener( 'click' , function () { alert( 'TWO' ) }, false );
button. onclick = null ; // but deactivated here
button. addEventListener( 'click' , function () { alert( 'THREE' ) }, false );
button. onclick = function () { alert( 'FOUR' ); }; // and re-activated here
button. addEventListener( 'click' , function () { alert( 'FIVE' ) }, false );
</ script >
이벤트 객체가 구현한 인터페이스는 이벤트 핸들러가 트리거되는지 여부에 영향을 미치지 않습니다.
이벤트 핸들러 처리 알고리즘은
EventTarget
객체
eventTarget, 이름을
나타내는 문자열 name, 그리고
Event
객체 event에 대해 다음과 같이 동작합니다:
callback을 eventTarget과 name을 통해 이벤트 핸들러의 현재 값을 가져오는 것의 결과로 설정합니다.
만약 callback이 null이라면, 리턴합니다.
만약 event가 ErrorEvent
객체이고,
event의 type
이
"error
"이며,
event의 currentTarget
이
WindowOrWorkerGlobalScope
믹스인을 구현하는 경우 special error event handling을 true로 설정합니다. 그렇지 않으면 special error event
handling을 false로 설정합니다.
event 객체를 다음과 같이 처리합니다:
return value를 callback 호출의 결과로 설정합니다.
event의 message
,
event의 filename
,
event의 lineno
,
event의 colno
,
event의 error
,
"rethrow
"와 함께 callback this
value를 event의 currentTarget
으로
설정합니다.
return value를 callback 호출의 결과로 설정합니다.
event, "rethrow
"와 함께 callback this
value를 event의 currentTarget
으로
설정합니다.
콜백에서 예외가 발생하면 이 단계가 종료되며, 예외는 DOM 이벤트 디스패치 로직으로 전달되어 보고됩니다.
return value를 다음과 같이 처리합니다:
BeforeUnloadEvent
객체이고 event의 type
이
"beforeunload
"인
경우이 경우, 이벤트 핸들러 IDL 속성의 타입이 OnBeforeUnloadEventHandler
이므로,
return value는 null 또는 DOMString
으로
변환됩니다.
만약 return value가 null이 아니라면:
event의 canceled flag를 설정합니다.
만약 event의 returnValue
속성의 값이 빈 문자열인 경우, event의 returnValue
속성의 값을 return value로 설정합니다.
만약 return value가 true라면, event의 canceled flag를 설정합니다.
만약 return value가 false라면, event의 canceled flag를 설정합니다.
만약 우리가 이 "그렇지 않은 경우" 절에 도달한 이유가 event의 type
이
"beforeunload
"이지만
event가 BeforeUnloadEvent 객체가 아닌 경우라면, 이러한 경우 return value는 null
또는 DOMString
으로
변환되므로 절대 false가 될 수 없습니다.
EventHandler
콜백
함수 타입은 이벤트 핸들러에 사용되는 콜백을 나타냅니다. Web IDL에서는 다음과 같이 표현됩니다:
[LegacyTreatNonObjectAsNull ]
callback EventHandlerNonNull = any (Event event );
typedef EventHandlerNonNull ? EventHandler ;
JavaScript에서, 모든 Function
객체는 이 인터페이스를 구현합니다.
예를 들어, 다음 문서 조각은:
< body onload = "alert(this)" onclick = "alert(this)" >
...문서가 로드될 때 "[object Window]
"라는 알림을 띄우고, 사용자가 페이지에서 무언가를 클릭할 때마다
"[object HTMLBodyElement]
"라는 알림을 띄웁니다.
함수의 반환 값은 이벤트가 취소될지 여부에 영향을 미칩니다: 위에서 설명한 것처럼, 반환 값이 false이면 이벤트가 취소됩니다.
역사적인 이유로 플랫폼에는 두 가지 예외가 있습니다:
글로벌 객체의 onerror
핸들러는, true를 반환하면 이벤트가 취소됩니다.
onbeforeunload
핸들러는, null이 아니고 undefined가 아닌 값을 반환하면 이벤트가 취소됩니다.
역사적인 이유로, onerror
핸들러는 다른
인수를 가집니다:
[LegacyTreatNonObjectAsNull ]
callback OnErrorEventHandlerNonNull = any ((Event or DOMString ) event , optional DOMString source , optional unsigned long lineno , optional unsigned long colno , optional any error );
typedef OnErrorEventHandlerNonNull ? OnErrorEventHandler ;
window. onerror = ( message, source, lineno, colno, error) => { … };
비슷하게, onbeforeunload
핸들러는 다른 반환 값을 가집니다:
[LegacyTreatNonObjectAsNull ]
callback OnBeforeUnloadEventHandlerNonNull = DOMString ? (Event event );
typedef OnBeforeUnloadEventHandlerNonNull ? OnBeforeUnloadEventHandler ;
내부 로우 미컴파일 핸들러는 다음 정보를 포함하는 튜플입니다:
미컴파일된 스크립트 본문
오류를 보고해야 하는 경우 스크립트 본문이 생성된 위치
사용자 에이전트가 EventTarget
객체 eventTarget와 이름을
나타내는 문자열 name을 주어 이벤트 핸들러의
현재 값을 가져와야 할 때, 다음 단계를 실행해야 합니다:
handlerMap을 eventTarget의 이벤트 핸들러 맵으로 설정합니다.
eventHandler를 handlerMap[name]으로 설정합니다.
만약 eventHandler의 값이 내부 로우 미컴파일 핸들러라면, 다음을 실행합니다:
만약 eventTarget이 요소라면 element를 eventTarget으로 설정하고
document를 element의 노드
문서로 설정합니다. 그렇지 않으면 eventTarget은 Window
객체이므로
element를 null로 설정하고 document를 eventTarget의 관련
Document
로 설정합니다.
스크립팅이 비활성화된 경우 document에 대해 null을 반환합니다.
body를 eventHandler의 값에 있는 미컴파일된 스크립트 본문으로 설정합니다.
location을 eventHandler의 값에서 제공된 스크립트 본문이 생성된 위치로 설정합니다.
만약 element가 null이 아니고 element가 폼 소유자를 가지고 있다면, form owner를 그 폼 소유자로 설정합니다. 그렇지 않으면 form owner를 null로 설정합니다.
settings object를 document의 관련 설정 객체로 설정합니다.
만약 body가 FunctionBody로 구문 분석할 수 없거나 구문 분석에서 초기 오류를 감지하면, 다음 하위 단계를 실행합니다:
settings object의 realm 실행 컨텍스트를 JavaScript 실행 컨텍스트 스택에 푸시합니다; 이제 실행 중인 JavaScript 실행 컨텍스트입니다.
이는 이후 OrdinaryFunctionCreate 호출이 올바른 realm에서 이루어지도록 하기 위해 필요합니다.
OrdinaryFunctionCreate를 호출한 결과로 function을 설정합니다. 인수는 다음과 같습니다:
realm을 settings object의 realm으로 설정합니다.
scope을 realm.[[GlobalEnv]]으로 설정합니다.
만약 eventHandler가 요소의 이벤트 핸들러라면, scope을 NewObjectEnvironment(document, true, scope)로 설정합니다.
만약 form owner가 null이 아니면, scope을 NewObjectEnvironment(form owner, true, scope)로 설정합니다.
만약 element가 null이 아니면, scope을 NewObjectEnvironment(element, true, scope)로 설정합니다.
scope을 반환합니다.
settings object의 realm 실행 컨텍스트를 JavaScript 실행 컨텍스트 스택에서 제거합니다.
function의 [[ScriptOrModule]]을 null로 설정합니다.
이는 생성된 함수가 스택에서 가장 가까운 스크립트와 연결되는 기본 동작이 경로에 의존적인 결과를 초래할 수 있기 때문에 수행됩니다. 예를 들어, 사용자 상호작용에 의해 처음 호출된 이벤트 핸들러는 이 알고리즘이 처음 호출될 때 활성 스크립트가 null일 경우 null [[ScriptOrModule]]을 가지게 됩니다. 반면 스크립트에서 이벤트를 디스패치하여 처음 호출된 핸들러는 그 스크립트로 [[ScriptOrModule]]이 설정됩니다.
대신 우리는 항상 [[ScriptOrModule]]을 null로 설정합니다. 이것이 더 직관적입니다; 이벤트를 처음 디스패치한 스크립트가 어떻게든 이벤트 핸들러 코드에 책임이 있다는 생각은 의심스럽습니다.
실제로, 이는 import()를 통한 상대 URL의 해상도에만 영향을 미칩니다. [[ScriptOrModule]]을 null로 설정하면 HostLoadImportedModule이 현재 설정 객체의 API 기본 URL을 참조하게 됩니다.
eventHandler의 값을 생성된 Web IDL EventHandler
콜백
함수 객체의 결과로 설정합니다. 이 객체의 참조는 function이며, 콜백 컨텍스트는 settings object입니다.
eventHandler의 값을 반환합니다.
Document
객체 및 Window
객체의 이벤트 핸들러
다음은 모든 HTML 요소가 지원해야 하는 이벤트
핸들러 (및 그에 대응하는 이벤트 핸들러 이벤트
타입) 목록입니다. 이들은 이벤트 핸들러
콘텐츠 속성과 이벤트 핸들러 IDL
속성으로 지원되어야 하며, 모든 Document
및 Window
객체도 이벤트 핸들러
IDL 속성으로 지원되어야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onabort
현재 모든 엔진에서 지원됩니다. Firefox9+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | abort
|
onauxclick
Firefox53+Safari없음Chrome55+
Opera?Edge79+ Edge (Legacy)?Internet Explorer없음 Firefox Android53+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | auxclick
|
onbeforeinput
| beforeinput
|
onbeforematch
| beforematch
|
onbeforetoggle
| beforetoggle
|
oncancel
HTMLDialogElement/cancel_event 현재 모든 엔진에서 지원됩니다. Firefox98+Safari15.4+Chrome37+
Opera?Edge79+ Edge (Legacy)?Internet Explorer없음 Firefox Android?Safari iOS?Chrome Android없음WebView Android?Samsung Internet?Opera Android? | cancel
|
oncanplay
HTMLMediaElement/canplay_event 현재 모든 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | canplay
|
oncanplaythrough
HTMLMediaElement/canplaythrough_event 현재 모든 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | canplaythrough
|
onchange
현재 모든 엔진에서 지원됩니다. Firefox1+Safari3+Chrome1+
Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | change
|
onclick
현재 모든 엔진에서 지원됩니다. Firefox6+Safari3+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android6+Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | click
|
onclose
| close
|
oncontextlost
| contextlost
|
oncontextmenu
| contextmenu
|
oncontextrestored
| contextrestored
|
oncopy
모든 현재 엔진에서 지원됨. Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | copy
|
oncuechange
HTMLTrackElement/cuechange_event 모든 현재 엔진에서 지원됨. Firefox68+Safari10+Chrome32+
Opera19+Edge79+ Edge (Legacy)14+Internet Explorer지원 안 함 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+ | cuechange
|
oncut
모든 현재 엔진에서 지원됨. Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | cut
|
ondblclick
모든 현재 엔진에서 지원됨. Firefox6+Safari3+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android6+Safari iOS1+Chrome Android지원 안 함WebView Android?Samsung Internet?Opera Android12.1+ | dblclick
|
ondrag
| drag
|
ondragend
| dragend
|
ondragenter
| dragenter
|
ondragleave
| dragleave
|
ondragover
| dragover
|
ondragstart
| dragstart
|
ondrop
| drop
|
ondurationchange
HTMLMediaElement/durationchange_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | durationchange
|
onemptied
HTMLMediaElement/emptied_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | emptied
|
onended
모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | ended
|
onformdata
| formdata
|
oninput
모든 현재 엔진에서 지원됨. Firefox6+Safari3.1+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)없음Internet Explorer🔰 9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | input
|
oninvalid
| invalid
|
onkeydown
모든 현재 엔진에서 지원됨. Firefox6+Safari1.2+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | keydown
|
onkeypress
| keypress
|
onkeyup
모든 현재 엔진에서 지원됨. Firefox6+Safari1.2+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | keyup
|
onloadeddata
HTMLMediaElement/loadeddata_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | loadeddata
|
onloadedmetadata
HTMLMediaElement/loadedmetadata_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | loadedmetadata
|
onloadstart
HTMLMediaElement/loadstart_event 현재 모든 엔진에서 지원됨. Firefox6+Safari4+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | loadstart
|
onmousedown
현재 모든 엔진에서 지원됨. Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mousedown
|
onmouseenter
현재 모든 엔진에서 지원됨. Firefox10+Safari7+Chrome30+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | mouseenter
|
onmouseleave
현재 모든 엔진에서 지원됨. Firefox10+Safari7+Chrome30+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | mouseleave
|
onmousemove
현재 모든 엔진에서 지원됨. Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mousemove
|
onmouseout
모든 최신 엔진에서 지원됩니다. Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mouseout
|
onmouseover
모든 최신 엔진에서 지원됩니다. Firefox6+Safari4+Chrome2+
Opera9.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+ | mouseover
|
onmouseup
모든 최신 엔진에서 지원됩니다. Firefox6+Safari4+Chrome2+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mouseup
|
onpaste
모든 최신 엔진에서 지원됩니다. Firefox22+Safari3+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | paste
|
onpause
모든 최신 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | pause
|
onplay
모든 현재 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
play
|
onplaying
HTMLMediaElement/playing_event 모든 현재 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
playing
|
onprogress
HTMLMediaElement/progress_event 모든 현재 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
progress
|
onratechange
HTMLMediaElement/ratechange_event 모든 현재 엔진에서 지원됩니다. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
ratechange
|
onreset
| reset
|
onscrollend
Firefox109+Safari없음Chrome114+
Opera?Edge114+ Edge (구형)?Internet Explorer없음 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? Firefox109+Safari없음Chrome114+
Opera?Edge114+ Edge (구형)?Internet Explorer없음 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | scrollend
|
onsecuritypolicyviolation
Element/securitypolicyviolation_event 모든 현재 엔진에서 지원됨. Firefox63+Safari10+Chrome41+
Opera?Edge79+ Edge (Legacy)15+Internet Explorer없음 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | securitypolicyviolation
|
onseeked
모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | seeked
|
onseeking
HTMLMediaElement/seeking_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | seeking
|
onselect
모든 현재 엔진에서 지원됨. Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLTextAreaElement/select_event 모든 현재 엔진에서 지원됨. Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | select
|
onslotchange
HTMLSlotElement/slotchange_event 모든 현재 엔진에서 지원됨. Firefox63+Safari10.1+Chrome53+
Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | slotchange
|
onstalled
HTMLMediaElement/stalled_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | stalled
|
onsubmit
모든 현재 엔진에서 지원됨. Firefox1+Safari3+Chrome1+
Opera8+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | submit
|
onsuspend
HTMLMediaElement/suspend_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | suspend
|
ontimeupdate
HTMLMediaElement/timeupdate_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | timeupdate
|
ontoggle
| toggle
|
onvolumechange
HTMLMediaElement/volumechange_event 모든 현재 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | volumechange
|
onwaiting
HTMLMediaElement/waiting_event 모든 현재 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | waiting
|
onwebkitanimationend
| webkitAnimationEnd
|
onwebkitanimationiteration
| webkitAnimationIteration
|
onwebkitanimationstart
| webkitAnimationStart
|
onwebkittransitionend
| webkitTransitionEnd
|
onwheel
모든 현재 엔진에서 지원됩니다. Firefox17+Safari7+Chrome31+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS없음Chrome Android?WebView Android?Samsung Internet?Opera Android? | wheel
|
다음은 모든 이벤트 핸들러 (및
해당하는 이벤트 핸들러
이벤트 유형)가 모든 HTML 요소에서
지원되어야 하며, body
및 frameset
요소를 제외합니다. 이는 모든 이벤트
핸들러 콘텐츠 속성과 이벤트
핸들러 IDL 속성이 포함됩니다. 또한 모든 문서
객체에서 지원되어야 하며, 이는 이벤트
핸들러 IDL 속성이 포함됩니다. 모든 윈도우
객체에서도 지원되어야 하며, 이는 이벤트
핸들러 IDL 속성이 해당 윈도우
객체 자체에서 노출되어야 하며, 모든 이벤트
핸들러 콘텐츠 속성과 이벤트
핸들러 IDL 속성이 해당 body
및 frameset
요소에서 노출되어야 하며, 이러한 요소는 해당 윈도우
객체의 연관된
Document
에 속합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onblur
모든 최신 엔진에서 지원됩니다. Firefox24+Safari3.1+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ 모든 최신 엔진에서 지원됩니다. Firefox6+Safari5.1+Chrome5+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | blur
|
onerror
모든 최신 엔진에서 지원됩니다. Firefox6+Safari5.1+Chrome10+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | error
|
onfocus
모든 최신 엔진에서 지원됩니다. Firefox24+Safari3.1+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ 모든 최신 엔진에서 지원됩니다. Firefox6+Safari5.1+Chrome5+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | focus
|
onload
| load
|
onresize
| resize
|
onscroll
모든 최신 엔진에서 지원됩니다. Firefox6+Safari2+Chrome1+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+ 모든 최신 엔진에서 지원됩니다. Firefox6+Safari1.3+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | scroll
|
이 표의 첫 번째 열에 나열된 집합의 이름
을
이벤트
핸들러
목록이라고 부릅니다.
Window
반영 본문 요소
이벤트 핸들러 집합이라고 부릅니다.
다음은 이벤트
핸들러 (및
해당 이벤트
핸들러 이벤트 유형)으로서 지원해야 하는 것입니다.
Window
객체, 이벤트
핸들러 IDL 속성으로서
Window
객체 자체에서, 그리고 모든 body
및 frameset
요소에서 노출된 이벤트
핸들러 콘텐츠 속성 및 이벤트
핸들러 IDL 속성으로서, 그 Window
객체의 연관된
Document
에서:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onafterprint
모든 현재 엔진에서 지원됩니다. Firefox6+Safari13+Chrome63+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | afterprint
|
onbeforeprint
모든 현재 엔진에서 지원됩니다. Firefox6+Safari13+Chrome63+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | beforeprint
|
onbeforeunload
모든 현재 엔진에서 지원됩니다. Firefox1+Safari3+Chrome1+
Opera12+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | beforeunload
|
onhashchange
모든 현재 엔진에서 지원됩니다. Firefox3.6+Safari5+Chrome8+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | hashchange
|
onlanguagechange
모든 현재 엔진에서 지원됩니다. Firefox32+Safari10.1+Chrome37+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안함 Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android? | languagechange
|
onmessage
모든 현재 엔진에서 지원됩니다. Firefox9+Safari4+Chrome60+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | message
|
onmessageerror
모든 현재 엔진에서 지원됩니다. Firefox6+Safari3.1+Chrome3+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ 모든 현재 엔진에서 지원됩니다. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer없음 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | messageerror
|
onoffline
모든 현재 엔진에서 지원됩니다. Firefox9+Safari4+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | offline
|
ononline
모든 현재 엔진에서 지원됩니다. Firefox9+Safari4+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | online
|
onpageswap
| pageswap
|
onpagehide
| pagehide
|
onpagereveal
| pagereveal
|
onpageshow
| pageshow
|
onpopstate
모든 현재 엔진에서 지원됩니다. Firefox4+Safari5+Chrome5+
Opera11.5+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+ | popstate
|
onrejectionhandled
모든 현재 엔진에서 지원됩니다. Firefox69+Safari11+Chrome49+
Opera?Edge79+ Edge (Legacy)?Internet Explorer없음 Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android? | rejectionhandled
|
onstorage
모든 현재 엔진에서 지원됩니다. Firefox45+Safari4+Chrome1+
Opera?Edge79+ Edge (Legacy)15+Internet Explorer9+ Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | storage
|
onunhandledrejection
Window/unhandledrejection_event 모든 현재 엔진에서 지원됩니다. Firefox69+Safari11+Chrome49+
Opera?Edge79+ Edge (Legacy)?Internet Explorer없음 Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android? | unhandledrejection
|
onunload
모든 현재 엔진에서 지원됩니다. Firefox1+Safari3+Chrome1+
Opera4+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | unload
|
이 이벤트
핸들러 목록은 이벤트
핸들러 IDL
속성으로 구현됩니다. 이는 WindowEventHandlers
인터페이스 믹스인으로 통해서입니다.
다음은 이벤트
핸들러 (및 그에 해당하는 이벤트
핸들러
이벤트 유형)로서 Document
객체에서 이벤트
핸들러 IDL 속성으로서 지원해야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onreadystatechange
| readystatechange
|
onvisibilitychange
Document/visibilitychange_event 모든 최신 엔진에서 지원됩니다. Firefox56+Safari14.1+Chrome62+
Opera49+Edge79+ Edge (Legacy)18Internet Explorer🔰 10+ Firefox Android?Safari iOS?Chrome Android?WebView Android62+Samsung Internet?Opera Android46+ | visibilitychange
|
interface mixin GlobalEventHandlers {
attribute EventHandler onabort ;
attribute EventHandler onauxclick ;
attribute EventHandler onbeforeinput ;
attribute EventHandler onbeforematch ;
attribute EventHandler onbeforetoggle ;
attribute EventHandler onblur ;
attribute EventHandler oncancel ;
attribute EventHandler oncanplay ;
attribute EventHandler oncanplaythrough ;
attribute EventHandler onchange ;
attribute EventHandler onclick ;
attribute EventHandler onclose ;
attribute EventHandler oncontextlost ;
attribute EventHandler oncontextmenu ;
attribute EventHandler oncontextrestored ;
attribute EventHandler oncopy ;
attribute EventHandler oncuechange ;
attribute EventHandler oncut ;
attribute EventHandler ondblclick ;
attribute EventHandler ondrag ;
attribute EventHandler ondragend ;
attribute EventHandler ondragenter ;
attribute EventHandler ondragleave ;
attribute EventHandler ondragover ;
attribute EventHandler ondragstart ;
attribute EventHandler ondrop ;
attribute EventHandler ondurationchange ;
attribute EventHandler onemptied ;
attribute EventHandler onended ;
attribute OnErrorEventHandler onerror ;
attribute EventHandler onfocus ;
attribute EventHandler onformdata ;
attribute EventHandler oninput ;
attribute EventHandler oninvalid ;
attribute EventHandler onkeydown ;
attribute EventHandler onkeypress ;
attribute EventHandler onkeyup ;
attribute EventHandler onload ;
attribute EventHandler onloadeddata ;
attribute EventHandler onloadedmetadata ;
attribute EventHandler onloadstart ;
attribute EventHandler onmousedown ;
[LegacyLenientThis ] attribute EventHandler onmouseenter ;
[LegacyLenientThis ] attribute EventHandler onmouseleave ;
attribute EventHandler onmousemove ;
attribute EventHandler onmouseout ;
attribute EventHandler onmouseover ;
attribute EventHandler onmouseup ;
attribute EventHandler onpaste ;
attribute EventHandler onpause ;
attribute EventHandler onplay ;
attribute EventHandler onplaying ;
attribute EventHandler onprogress ;
attribute EventHandler onratechange ;
attribute EventHandler onreset ;
attribute EventHandler onresize ;
attribute EventHandler onscroll ;
attribute EventHandler onscrollend ;
attribute EventHandler onsecuritypolicyviolation ;
attribute EventHandler onseeked ;
attribute EventHandler onseeking ;
attribute EventHandler onselect ;
attribute EventHandler onslotchange ;
attribute EventHandler onstalled ;
attribute EventHandler onsubmit ;
attribute EventHandler onsuspend ;
attribute EventHandler ontimeupdate ;
attribute EventHandler ontoggle ;
attribute EventHandler onvolumechange ;
attribute EventHandler onwaiting ;
attribute EventHandler onwebkitanimationend ;
attribute EventHandler onwebkitanimationiteration ;
attribute EventHandler onwebkitanimationstart ;
attribute EventHandler onwebkittransitionend ;
attribute EventHandler onwheel ;
};
interface mixin WindowEventHandlers {
attribute EventHandler onafterprint ;
attribute EventHandler onbeforeprint ;
attribute OnBeforeUnloadEventHandler onbeforeunload ;
attribute EventHandler onhashchange ;
attribute EventHandler onlanguagechange ;
attribute EventHandler onmessage ;
attribute EventHandler onmessageerror ;
attribute EventHandler onoffline ;
attribute EventHandler ononline ;
attribute EventHandler onpagehide ;
attribute EventHandler onpagereveal ;
attribute EventHandler onpageshow ;
attribute EventHandler onpageswap ;
attribute EventHandler onpopstate ;
attribute EventHandler onrejectionhandled ;
attribute EventHandler onstorage ;
attribute EventHandler onunhandledrejection ;
attribute EventHandler onunload ;
};
일부 작업 및 메서드는 요소에서 이벤트를 발생시키는 것으로 정의됩니다. 예를 들어, click()
메서드는 HTMLElement
인터페이스에서
click
이벤트를 발생시키는 것으로 정의됩니다. [UIEVENTS]
이름이 e인 합성 포인터 이벤트 발생은 target에서 선택적으로 신뢰되지 않는 플래그를 설정하여 다음 단계를 수행하는 것을 의미합니다:
event를 이벤트 생성의
결과로 설정합니다, PointerEvent
.
event의 type
속성을 e로 초기화합니다.
event의 bubbles
및 cancelable
속성을 true로 초기화합니다.
event의 composed 플래그를 설정합니다.
만약 not trusted flag가 설정되면, event의 isTrusted
속성을 false로 초기화합니다.
event의 ctrlKey
, shiftKey
, altKey
,
및
metaKey
속성을 현재 키 입력 장치의 상태에 따라 초기화합니다(사용할 수 없는 키는 false로 설정).
event의 view
속성을 target의 node
document의 Window
객체로 초기화합니다, 그렇지 않으면
null로 설정합니다.
event의 getModifierState()
메서드는 현재 키 입력 장치의 상태를 적절하게 설명하는 값을 반환해야 합니다.
이벤트 디스패치의 결과를 target에서 반환합니다.
click
이벤트 발생은 target에서 click
이라는
이름의 합성 포인터 이벤트 발생을 의미합니다.
WindowOrWorkerGlobalScope
믹스인WindowOrWorkerGlobalScope
믹스인은 Window
와 WorkerGlobalScope
객체에서 노출되는 API를 위해 사용됩니다.
다른 표준에서는
partial
interface mixin WindowOrWorkerGlobalScope { … };
및 적절한 참조를 사용하여 이를 추가로 확장하는 것이 권장됩니다.
typedef (DOMString or Function or TrustedScript ) TimerHandler ;
interface mixin WindowOrWorkerGlobalScope {
[Replaceable ] readonly attribute USVString origin ;
readonly attribute boolean isSecureContext ;
readonly attribute boolean crossOriginIsolated ;
undefined reportError (any e );
// base64 utility methods
DOMString btoa (DOMString data );
ByteString atob (DOMString data );
// timers
long setTimeout (TimerHandler handler , optional long timeout = 0, any ... arguments );
undefined clearTimeout (optional long id = 0);
long setInterval (TimerHandler handler , optional long timeout = 0, any ... arguments );
undefined clearInterval (optional long id = 0);
// microtask queuing
undefined queueMicrotask (VoidFunction callback );
// ImageBitmap
Promise <ImageBitmap > createImageBitmap (ImageBitmapSource image , optional ImageBitmapOptions options = {});
Promise <ImageBitmap > createImageBitmap (ImageBitmapSource image , long sx , long sy , long sw , long sh , optional ImageBitmapOptions options = {});
// structured cloning
any structuredClone (any value , optional StructuredSerializeOptions options = {});
};
Window includes WindowOrWorkerGlobalScope ;
WorkerGlobalScope includes WindowOrWorkerGlobalScope ;
self.isSecureContext
모든 현재 엔진에서 지원됩니다.
이 전역 객체가 보안 컨텍스트를 나타내는지 여부를 반환합니다. [SECURE-CONTEXTS]
self.origin
모든 현재 엔진에서 지원됩니다.
전역 객체의 출처를 문자열로 직렬화하여 반환합니다.
self.crossOriginIsolated
모든 현재 엔진에서 지원됩니다.
이 전역에서 실행되는 스크립트가 교차 출처 격리를 요구하는 API를 사용할 수 있는지 여부를 반환합니다. 이는 `Cross-Origin-Opener-Policy
`
및
`Cross-Origin-Embedder-Policy
`
HTTP 응답 헤더 및 "cross-origin-isolated
"
기능에 따라 달라집니다.
개발자들은 self.origin
을 location.origin
보다 사용하는 것이 좋습니다.
전자는 환경의 출처를 반환하고,
후자는 환경의 URL을 반환합니다. 다음 스크립트가 https://stargate.example/
문서에서 실행된다고 가정해 보십시오:
var frame = document. createElement( "iframe" )
frame. onload = function () {
var frameWin = frame. contentWindow
console. log( frameWin. location. origin) // "null"
console. log( frameWin. origin) // "https://stargate.example"
}
document. body. appendChild( frame)
self.origin
은 더 신뢰할 수 있는 보안 지표입니다.
isSecureContext
게터 단계는
this의 관련 설정 객체가
보안 컨텍스트인 경우
true를 반환하고, 그렇지 않으면 false를 반환합니다.
origin
게터 단계는 this의
관련
설정 객체의 출처를 직렬화된 문자열로 반환합니다.
crossOriginIsolated
게터 단계는
this의 관련 설정 객체의
교차 출처
격리 기능을 반환합니다.
atob()
및 btoa()
메서드를 사용하면 개발자는 내용을 Base64 인코딩으로 변환하거나 그 반대로 변환할 수 있습니다.
이 API에서 기억을 돕기 위해 "b"는 "binary"를, "a"는 "ASCII"를 의미한다고 생각할 수 있습니다. 하지만 실질적으로는, 주로 역사적인 이유로, 이 함수의 입력과 출력은 모두 유니코드 문자열입니다.
result = self.btoa(data)
모든 최신 엔진에서 지원됨.
유니코드 문자열 형태의 입력 데이터를 받아, 각 문자가 바이너리 바이트로 취급되는 범위 U+0000에서 U+00FF 사이의 문자를 포함하고, 각각 0x00에서 0xFF의 값을 가지는 바이너리 바이트로 변환한 후 그 Base64 표현을 반환합니다.
입력 문자열에 범위를 벗어난 문자가 포함되어 있으면, "InvalidCharacterError
" DOMException
예외를 던집니다.
result = self.atob(data)
모든 최신 엔진에서 지원됨.
Base64로 인코딩된 바이너리 데이터를 포함하는 유니코드 문자열 형태의 입력 데이터를 받아 디코딩한 후, 각 문자가 U+0000에서 U+00FF 사이의 문자를 포함하는 문자열을 반환합니다. 각 문자는 해당 바이너리 데이터의 0x00에서 0xFF 값에 해당하는 바이너리 바이트를 나타냅니다.
입력 문자열이 유효한 Base64 데이터가 아닌 경우, "InvalidCharacterError
" DOMException
예외를 던집니다.
btoa(data)
메서드는 data
에 U+00FF보다 큰 코드 포인트를 가진 문자가 포함된 경우 "InvalidCharacterError
" DOMException
을 던져야 합니다. 그렇지 않으면 사용자 에이전트는 data를 n번째 코드 포인트의 8비트 표현으로 변환한 바이트 시퀀스로 변환한 다음, 해당 바이트 시퀀스에
대해 forgiving-base64 encode를 적용하고 결과를 반환해야 합니다.
atob(data)
메서드의 단계는 다음과 같습니다:
data에 대해 forgiving-base64 decode를 실행한 결과 decodedData를 가져옵니다.
decodedData가 실패인 경우, "InvalidCharacterError
" DOMException
을
던집니다.
decodedData를 반환합니다.
문서에 마크업을 동적으로 삽입하는 API는 파서와 상호작용하며, 따라서 HTML 문서(HTML 문서 및 HTML 파서) 와 XML 문서(XML 문서 및 XML 파서)와 함께 사용되는지에 따라 동작이 달라집니다.
Document
객체는
동적 마크업 삽입 시 예외 발생 카운터를 가지며, 이 카운터는 토큰을 위한 요소
생성 알고리즘과 함께 사용되어
사용자 정의 요소 생성자가
파서에 의해 호출될 때
document.open()
,
document.close()
,
및
document.write()
를
사용할 수 없도록 방지합니다.
초기에는 카운터가 0으로 설정되어야 합니다.
document = document.open()
모든 최신 엔진에서 지원됨.
Document
는 이전 객체를 재사용하여
마치 새 Document
객체인 것처럼 제자리에서 대체되지만, 이전 객체를 재사용하여 반환됩니다.
결과적으로 생성된 Document
객체에는 HTML 파서가 연관되며, document.write()
를
사용하여 파싱할 데이터를 제공할 수 있습니다.
문서가 여전히 파싱 중인 경우 이 메서드는 아무런 효과가 없습니다.
문서가 XML
문서인 경우, "InvalidStateError
" DOMException
을
던집니다.
파서가 현재 사용자 정의
요소 생성자를 실행 중인 경우, "InvalidStateError
" DOMException
을
던집니다.
window = document.open(url, name, features)
window.open()
메서드와 동일하게 동작합니다.
Document
객체는 활성 파서가 중단됨이라는 불리언 값을 가지고 있으며, 이는 문서의 활성 파서가 중단된 후에 document.open()
및 document.write()
메서드가 (직접 또는 간접적으로) 호출되지 않도록 방지하는 데 사용됩니다. 이 값은 처음에 false로 설정됩니다.
문서 열기 단계는 document를 받아 다음과 같이 진행됩니다:
document가 XML
문서인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
document의 동적 마크업 삽입 시 예외 발생 카운터가 0보다
크면, "InvalidStateError
" DOMException
예외를 던집니다.
entryDocument를 진입
전역 객체의 연결된
Document
로 설정합니다.
document의 출처가
entryDocument의 출처와 동일 출처가 아닌 경우, "SecurityError
" DOMException
예외를 던집니다.
document에 활성 파서가 있고 그 스크립트 중첩 레벨이 0보다 크면, document를 반환합니다.
이 단계는 document.open()
이
파싱 중 발견된 인라인 스크립트에서 호출될 때 무시되지만, 타이머 콜백이나 이벤트 핸들러와 같은 비파서 작업에서 호출될 때는 영향을 미치도록 합니다.
마찬가지로, document의 언로드 카운터가 0보다 크면, document를 반환합니다.
이 단계는 document.open()
이
beforeunload
,
pagehide
,
또는 unload
이벤트 핸들러에서 호출되었을 때 무시되도록 합니다.
document의 활성 파서가 중단됨이 true인 경우, document를 반환합니다.
이 단계는 특히 탐색이 시작된 후 document.open()
이
호출되었을 때 무시되도록 하지만, 초기 파싱 중에만 해당됩니다. 자세한 내용은 이슈
#4723를 참조하십시오.
document의 노드 탐색 가능이 null이 아니고 document의 노드 탐색 가능에 진행 중인 탐색이 탐색 ID라면, 로드 중지합니다.
document의 모든 섀도우 포함 포함 자손 node에 대해 모든 이벤트 리스너와 핸들러 지우기를 수행합니다.
document이 연결된 Document
의 관련 전역 객체라면,
document의 관련 전역 객체에 대해 모든 이벤트 리스너와 핸들러 지우기를 수행합니다.
모두 교체를 document 내에서 null로 수행합니다.
document가 완전히 활성화되어 있는 경우:
newURL을 entryDocument의 URL의 복사본으로 설정합니다.
entryDocument가 document가 아닌 경우 newURL의 프래그먼트를 null로 설정합니다.
document 및 newURL과 함께 URL 및 히스토리 업데이트 단계를 실행합니다.
document의 초기 about:blank
를 false로 설정합니다.
document의 iframe 로드 진행 중 플래그가 설정된 경우, document의 iframe 로드 음소거 플래그를 설정합니다.
document를 비비정상 모드로 설정합니다.
새로운 HTML 파서를 생성하고 document와
연결합니다. 이것은 스크립트 생성 파서로, document.open()
및 document.close()
메서드로 닫을 수 있으며, 토크나이저는 document.close()
의
명시적인 호출을 기다린 후 종료 토큰을 생성합니다. 인코딩 신뢰도는 관련이 없습니다.
현재 문서 준비 상태 업데이트를
document에 대해 "로딩 중
"으로 설정합니다.
이로 인해 readystatechange
이벤트가 발생하지만, 이전 단계에서 이를 관찰할 수 있는 모든 이벤트 리스너와 핸들러를 지웠기 때문에
실제로는 작성자 코드에서 이 이벤트를 관찰할 수 없습니다.
document를 반환합니다.
문서 열기 단계는 Document
가 포스트 로드 작업 준비 여부나
완전히 로드됨 여부에 영향을 미치지 않습니다.
open(unused1,
unused2)
메서드는 문서 열기 단계를 this와 함께 실행한 결과를 반환해야 합니다.
unused1 및 unused2 인수는 무시되지만, 함수에 하나 또는 두
개의 인수를 전달하여 호출하는 코드가 계속 작동할 수 있도록 IDL에 유지됩니다. 이는 Web IDL의 오버로드 해결 알고리즘 규칙에 따라 이러한 호출이 없으면 TypeError
예외를 발생시킬 것이기 때문입니다. whatwg/webidl issue #581에서는 이들의 제거를
허용하기 위한 알고리즘 변경을 조사하고 있습니다. [WEBIDL]
open(url,
name, features)
메서드는 다음 단계를 수행해야 합니다:
this가 완전히
활성화되지 않은 경우, "InvalidAccessError
" DOMException
예외를 던집니다.
url, name, 및 features와 함께 창 열기 단계를 실행한 결과를 반환합니다.
document.close()
모든 최신 엔진에서 지원됨.
document.open()
메서드로 열렸던 입력 스트림을 닫습니다.
Document
가 XML 문서인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
파서가 현재 사용자 정의
요소 생성자를 실행 중인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
close()
메서드는 다음 단계를 수행해야
합니다:
this가 XML 문서인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
this의 동적 마크업 삽입 시 예외 발생 카운터가 0보다
크면, "InvalidStateError
" DOMException
예외를 던집니다.
스크립트 생성 파서가 this와 연관되어 있지 않으면, 종료합니다.
파서의 입력 스트림 끝에 명시적 "EOF" 문자를 삽입합니다.
this의 보류 중인 파싱 차단 스크립트가 null이 아니면 종료합니다.
토크나이저를 실행하여, 생성된 토큰을 처리하고, 토크나이저가 명시적 "EOF" 문자에 도달하거나 이벤트 루프 회전을 멈출 때까지 처리합니다.
document.write()
document.write(...text)
모든 최신 엔진에서 지원됨.
일반적으로, 주어진 문자열을 Document
의 입력 스트림에 추가합니다.
이 메서드는 매우 특이한 동작을 합니다. 경우에 따라, 이 메서드는 HTML 파서가 실행 중일 때 파서의 상태에 영향을 미쳐, 문서의 소스와 일치하지 않는 DOM이 생성될 수
있습니다(예: 작성된 문자열이 "<plaintext>
" 또는 "<!--
"인 경우). 다른 경우에는 호출이 현재 페이지를 먼저
지우는 결과를 초래하며, 이는 document.open()
이 호출된 것처럼
동작합니다. 또 다른 경우에는 이 메서드가 무시되거나 예외를 던집니다. 사용자 에이전트는 이 메서드를 통해 삽입된 script
요소를 실행하지 않도록 명시적으로 허용됩니다. 더 나아가, 이 메서드의 정확한 동작은 경우에 따라 네트워크 지연
시간에 따라 달라질 수 있으며, 이는 디버깅하기 매우 어려운 오류를 초래할 수 있습니다. 이 모든 이유로 인해, 이 메서드의 사용은 강력히 권장되지
않습니다.
XML 문서에서 호출될 때 "InvalidStateError
" DOMException
예외를 던집니다.
파서가 현재 사용자 정의 요소
생성자를 실행 중인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
이 메서드는 script
와
같은 잠재적으로 위험한 요소와 속성(예: 이벤트 핸들러 콘텐츠 속성)을 제거하기 위한 위생 처리를 수행하지 않습니다.
Document
객체는 외부 스크립트가 document.write()
를 사용하여 암시적으로
document.open()
을 호출하여 문서를
삭제하지 못하도록 방지하기 위해 파괴적 쓰기 무시 카운터를 가지고 있습니다. 처음에는 카운터가 0으로 설정되어야
합니다.
문서 쓰기 단계는 Document
객체
document, 리스트 text, 부울 lineFeed, 그리고 문자열 sink를 받아 다음과 같이 진행됩니다:
string을 빈 문자열로 설정합니다.
text에 문자열이 포함되어 있으면 isTrusted를 false로, 그렇지 않으면 true로 설정합니다.
text의 각 value에 대해 반복합니다:
value가 TrustedHTML
객체인 경우, value와 연관된 데이터를
string에 추가합니다.
그렇지 않으면 value를 string에 추가합니다.
isTrusted가 false인 경우, string을 TrustedHTML
,
this의 관련 전역 객체,
string, sink, "script
"를 사용하여 신뢰할 수 있는 타입 준수 문자열
가져오기 알고리즘을 호출한 결과로 설정합니다.
lineFeed가 true인 경우, string에 U+000A LINE FEED를 추가합니다.
document가 XML 문서인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
document의 동적 마크업 삽입 시 예외 발생 카운터가 0보다 크면, "InvalidStateError
" DOMException
예외를 던집니다.
document의 활성 파서가 중단됨이 true인 경우, 종료합니다.
삽입 지점이 정의되지 않은 경우, 다음을 수행합니다:
document의 언로드 카운터가 0보다 크거나 document의 파괴적 쓰기 무시 카운터가 0보다 크면, 종료합니다.
document와 함께 문서 열기 단계를 실행합니다.
document의 보류 중인 파싱 차단 스크립트가 null인 경우, HTML 파서가 string을 한 코드 포인트씩 처리하고,
토크나이저가 삽입 지점에 도달하거나 트리 구성 단계에서 토크나이저의 처리가 중단될 때(예: 토크나이저가 script
종료 태그 토큰을
생성하는 경우)까지 처리합니다.
document.write()
메서드가 인라인으로 실행 중인 스크립트(즉, 파서가 script
태그를 파싱했기 때문에
실행된 경우)에서 호출되었다면, 이는 파서의 재진입 호출입니다. 파서 일시 중지 플래그가 설정된 경우, 토크나이저는 즉시 중단되며 HTML이 파싱되지 않습니다. 이는
토크나이저의 파서 일시 중지 플래그 확인에 따라 수행됩니다.
document.write(...text)
메서드 단계는 문서 쓰기 단계를 this,
text, false, 그리고 "Document write
"와 함께 실행하는 것입니다.
document.writeln()
document.writeln(...text)
모든 최신 엔진에서 지원됨.
주어진 문자열을 Document
의 입력 스트림에 추가한 후, 줄 바꿈
문자를 추가합니다. 필요한 경우, open()
메서드를 먼저 암시적으로
호출합니다.
XML 문서에서 호출될 때 "InvalidStateError
" DOMException
예외를 던집니다.
파서가 현재 사용자 정의 요소
생성자를 실행 중인 경우, "InvalidStateError
" DOMException
예외를 던집니다.
이 메서드는 script
와 같은 잠재적으로 위험한 요소와
속성(예: 이벤트 핸들러
콘텐츠 속성)을 제거하기 위한 위생 처리를 수행하지 않습니다.
document.writeln(...text)
메서드 단계는 문서 쓰기 단계를 this,
text, true, 그리고 "Document writeln
"과 함께 실행하는 것입니다.
모든 최신 엔진에서 지원됨.
partial interface Element {
[CEReactions ] undefined setHTMLUnsafe ((TrustedHTML
or DOMString ) html );
DOMString getHTML (optional GetHTMLOptions options = {});
[CEReactions ] attribute (TrustedHTML
or [LegacyNullToEmptyString ] DOMString ) innerHTML ;
[CEReactions ] attribute (TrustedHTML
or [LegacyNullToEmptyString ] DOMString ) outerHTML ;
[CEReactions ] undefined insertAdjacentHTML (DOMString position , (TrustedHTML
or DOMString ) string );
};
partial interface ShadowRoot {
[CEReactions ] undefined setHTMLUnsafe ((TrustedHTML
or DOMString ) html );
DOMString getHTML (optional GetHTMLOptions options = {});
[CEReactions ] attribute (TrustedHTML
or [LegacyNullToEmptyString ] DOMString ) innerHTML ;
};
dictionary GetHTMLOptions {
boolean serializableShadowRoots = false ;
sequence <ShadowRoot > shadowRoots = [];
};
DOMParser
인터페이스DOMParser
인터페이스는 저자가 HTML 또는 XML로 문자열을 파싱하여 새로운 Document
객체를 생성할 수 있게 합니다.
parser = new DOMParser()
모든 최신 엔진에서 지원됨.
새 DOMParser
객체를 생성합니다.
document = parser.parseFromString(string, type)
모든 최신 엔진에서 지원됨.
type에 따라 HTML 또는 XML 파서를 사용하여 string을 파싱하고, 그 결과로 생성된 Document
를 반환합니다.
type은 "text/html
"(HTML 파서를 호출함), 또는
"text/xml
", "application/xml
",
"application/xhtml+xml
",
또는 "image/svg+xml
"(XML
파서를 호출함) 중 하나일 수 있습니다.
XML 파서의 경우, string을 파싱할 수 없으면 반환된 Document
에는 결과 오류를 설명하는 요소들이
포함됩니다.
script
요소는 파싱
중에 평가되지 않으며, 결과 문서의 인코딩은 항상 UTF-8로 설정됩니다. 문서의 URL은 parser의 관련 전역 객체에서
상속됩니다.
type에 위의 값이 아닌 값이 사용되면 TypeError
예외가 발생합니다.
DOMParser
의 설계는, 생성되어야 하며 그
후 parseFromString()
메서드를 호출해야 하는 클래스라는 점에서 불행한 역사적 유물입니다. 오늘날 이 기능을 설계한다면, 그것은 독립적인 함수일 것입니다. HTML을 파싱하는 현대적인 대안은 Document.parseHTMLUnsafe()
입니다.
이 메서드는 script
와 같은 잠재적으로 위험한
요소와 속성(예: 이벤트 핸들러 콘텐츠 속성)을 제거하기 위한 위생 처리를 수행하지 않습니다.
[Exposed =Window ]
interface DOMParser {
constructor ();
[NewObject ] Document
parseFromString ((TrustedHTML
or DOMString ) string , DOMParserSupportedType type );
};
enum DOMParserSupportedType {
" text/html " ,
" text/xml " ,
" application/xml " ,
" application/xhtml+xml " ,
" image/svg+xml "
};
new DOMParser()
생성자 단계는 아무것도 하지 않습니다.
parseFromString(string,
type)
메서드 단계는 다음과 같습니다:
compliantString을 TrustedHTML
,
this의 관련 전역 객체, string,
"DOMParser parseFromString
", 그리고 "script
"를 사용하여 신뢰할 수 있는 타입
준수 문자열 가져오기 알고리즘의 결과로 설정합니다.
document를 type에 따른 콘텐츠 유형을 가진 새로운 Document
로 설정하고,
document의 URL을 this의 관련 전역 객체의 연관된
Document
의 URL로 설정합니다.
문서의 인코딩은 기본값인 UTF-8로 유지됩니다. 특히,
compliantString을 파싱하는 동안 발견된 XML 선언이나 meta
요소는 영향을 미치지
않습니다.
type에 따라 다음을 수행합니다:
text/html
"
document와 compliantString을 사용하여 문자열에서 HTML을 파싱합니다.
document에는 탐색 문맥이 없으므로, 스크립팅이 비활성화됩니다.
document와 관련된 XML 파서 parser를 생성하고, XML 스크립팅 지원 비활성화 설정을 적용합니다.
parser를 사용하여 compliantString을 파싱합니다.
이전 단계에서 XML 잘못된 형식 또는 XML 네임스페이스 잘못된 형식 오류가 발생한 경우:
document를 반환합니다.
문자열에서 HTML 파싱을 수행하려면, Document
document 및 문자열
html을 사용합니다:
document의 유형을
"html
"로 설정합니다.
document와 관련된 HTML 파서 parser를 생성합니다.
parser를 시작하고 입력 스트림에 방금 삽입된 모든 문자를 소비할 때까지 실행되도록 합니다.
이는 문서의 모드를 변경할 수 있습니다.
element.setHTMLUnsafe(html)
html을 HTML 파서를 사용하여 파싱하고, 그 결과로 element의 자식을 대체합니다. element는 HTML 파서를 위한 컨텍스트를 제공합니다.
shadowRoot.setHTMLUnsafe(html)
html을 HTML 파서를 사용하여 파싱하고, 그 결과로 shadowRoot의 자식을 대체합니다. shadowRoot의 호스트는 HTML 파서를 위한 컨텍스트를 제공합니다.
doc = Document.parseHTMLUnsafe(html)
html을 HTML 파서를 사용하여 파싱하고, 결과로 Document
를 반환합니다.
script
요소는 파싱 중에 실행되지 않으며, 결과 문서의 인코딩은 항상 UTF-8로 설정됩니다. 문서의 URL은 about:blank
으로 설정됩니다.
이 메서드는 script
와 같은 잠재적으로
위험한 요소와
이벤트
핸들러 콘텐츠 속성을 제거하기 위한 위생 처리를 수행하지 않습니다.
Element
의
setHTMLUnsafe(html)
메서드 단계는 다음과 같습니다:
compliantHTML을 TrustedHTML
,
this의 관련 전역 객체, html,
"Element setHTMLUnsafe
", 및 "script
"를 사용하여 신뢰할 수 있는
타입 준수 문자열 가져오기 알고리즘의 결과로 설정합니다.
만약 this가 template
요소라면 target을 template의 내용으로 설정하고, 그렇지 않다면 target을 this로 설정합니다.
HTML을 안전하지 않게 설정을 실행하여 target, this, 그리고 compliantHTML을 설정합니다.
ShadowRoot
의
setHTMLUnsafe(html)
메서드 단계는 다음과 같습니다:
compliantHTML을 TrustedHTML
,
this의 관련 전역 객체, html,
"ShadowRoot setHTMLUnsafe
", 및 "script
"를 사용하여 신뢰할 수
있는 타입 준수 문자열 가져오기 알고리즘의 결과로 설정합니다.
HTML을 안전하지 않게 설정을 실행하여 this, this의 shadow 호스트, 그리고 compliantHTML을 설정합니다.
HTML을 안전하지 않게 설정하려면, Element
또는 DocumentFragment
target, Element
contextElement, 그리고 문자열
html을 사용합니다:
newChildren을 HTML 프래그먼트 파싱 알고리즘의 결과로 contextElement, html 및 true를 사용하여 설정합니다.
fragment를 새로운 DocumentFragment
로
설정하고, 해당 노드 문서를
contextElement의 노드 문서로
설정합니다.
newChildren의 각 node에 대해, append를 사용하여 node를 fragment에 추가합니다.
모든 것을 대체를 fragment를 사용하여 target 내에서 수행합니다.
정적 parseHTMLUnsafe(html)
메서드 단계는 다음과 같습니다:
compliantHTML을 TrustedHTML
,
this의 관련 전역 객체, html,
"Document parseHTMLUnsafe
", 및 "script
"를 사용하여 신뢰할 수
있는 타입 준수 문자열 가져오기 알고리즘의 결과로 설정합니다.
document를 콘텐츠 유형이 "text/html
"인 새로운 Document
로 설정합니다.
document에는 탐색 문맥이 없으므로, 스크립팅이 비활성화됩니다.
document의 선언적 쉐도우 루트 허용을 true로 설정합니다.
document와 compliantHTML을 사용하여 문자열에서 HTML을 파싱합니다.
document를 반환합니다.
html = element.getHTML({ serializableShadowRoots, shadowRoots })
element를 HTML로 직렬화한 결과를 반환합니다. element 내의 쉐도우 루트는 제공된 옵션에 따라 직렬화됩니다:
serializableShadowRoots
가
true이면, 직렬화 가능한 것으로 표시된 모든 쉐도우 루트가 직렬화됩니다.
만약 shadowRoots
배열이 제공되면, 직렬화 가능 여부와 관계없이 배열에 지정된 모든 쉐도우 루트가 직렬화됩니다.
어떤 옵션도 제공되지 않으면, 쉐도우 루트는 직렬화되지 않습니다.
html = shadowRoot.getHTML({ serializableShadowRoots, shadowRoots })
shadowRoot를 HTML로 직렬화한 결과를 반환하며, 이때 쉐도우 호스트를 컨텍스트 요소로 사용합니다. shadowRoot 내의 쉐도우 루트는 위와 동일한 옵션에 따라 직렬화됩니다.
Element
의
getHTML(options)
메서드 단계는
HTML 프래그먼트 직렬화 알고리즘의 결과를
this,
options["serializableShadowRoots
"],
그리고 options["shadowRoots
"]로
반환하는 것입니다.
ShadowRoot
의
getHTML(options)
메서드 단계는
HTML 프래그먼트 직렬화 알고리즘의 결과를
this,
options["serializableShadowRoots
"],
그리고 options["shadowRoots
"]로
반환하는 것입니다.
innerHTML
속성innerHTML
속성에는 여러 가지 미해결 문제가 있으며, 이는 DOM Parsing and Serialization 이슈
추적기에 기록되어 있습니다.
element.innerHTML
요소의 내용을 나타내는 HTML 또는 XML 조각을 반환합니다.
XML 문서의 경우, 요소를 XML로 직렬화할 수 없는 경우 "InvalidStateError
"
DOMException
을(를) 발생시킵니다.
element.innerHTML = value
지정된 문자열에서 구문 분석된 노드로 요소의 내용을 교체합니다.
XML 문서의 경우, 주어진 문자열이 올바르게 작성되지 않은 경우 "SyntaxError
"
DOMException
을(를) 발생시킵니다.
shadowRoot.innerHTML
쉐도우 루트의 내용을 나타내는 HTML 조각을 반환합니다.
shadowRoot.innerHTML = value
지정된 문자열에서 구문 분석된 노드로 쉐도우 루트의 내용을 교체합니다.
이 속성의 setter는 script
또는 이벤트 핸들러
콘텐츠 속성과 같은 잠재적으로 위험한 요소 및 속성을 제거하기 위한 정화를 수행하지 않습니다.
조각 직렬화 알고리즘 단계는
Element
,
Document
또는 DocumentFragment
node와 boolean require
well-formed을(를) 받아서 실행됩니다:
context document를 node의 노드 문서로 설정합니다.
context document가 HTML 문서인 경우, node와 false, 그리고 « »을(를) 사용하여 HTML 조각 직렬화 알고리즘의 결과를 반환합니다.
require well-formed를 사용하여 node의 XML 직렬화 결과를 반환합니다.
조각 구문 분석 알고리즘 단계는
Element
context와 문자열 markup을(를) 받아서 실행됩니다:
algorithm을 HTML 조각 구문 분석 알고리즘으로 설정합니다.
context의 노드 문서가 XML 문서인 경우, algorithm을 XML 조각 구문 분석 알고리즘으로 설정합니다.
new children을 algorithm을 사용하여 markup을(를) 인자로 주고 호출한 결과로 설정합니다. context를 context로 설정합니다.
fragment를 새로운 DocumentFragment
로
설정합니다.
이 노드 문서는 context의 노드 문서입니다.
각각의 노드를
new children에 있는 Node
에
대해, fragment에 추가합니다 (트리 순서로 추가됨).
fragment를 반환합니다.
Element
의
innerHTML
getter
단계는 다음과 같습니다:
조각
직렬화 알고리즘
단계를
this와 함께
실행하고, 결과를 반환합니다.
true로 설정하여 반환합니다.
ShadowRoot
의
innerHTML
getter 단계는 다음과 같습니다:
조각 직렬화 알고리즘
단계를
this와 함께
실행하고, true로 설정하여 반환합니다.
Element
의
innerHTML
setter 단계는 다음과 같습니다:
compliantString을 신뢰할 수 있는
유형 호환 문자열 가져오기 알고리즘을 사용하여, TrustedHTML
와
함께 얻은 결과로 설정합니다.
this의 관련 글로벌
객체, 주어진 값, "Element innerHTML
", 그리고
"script
"로 설정합니다.
context를 this로 설정합니다.
fragment를 조각 구문 분석 알고리즘 단계를 사용하여, context와 compliantString으로부터 얻은 결과로 설정합니다.
만약 context가 template
요소라면, context를 template
요소의 템플릿 내용으로 설정합니다.
(DocumentFragment
)
innerHTML
을
template
요소에 설정하면, 템플릿 내용의 모든 노드를
교체하게 되며, 이는 자식 요소 대신 교체됩니다.
모두 교체와 fragment를 context 내에서 실행합니다.
ShadowRoot
의
innerHTML
setter 단계는 다음과 같습니다:
compliantString을 신뢰할 수 있는
유형 호환 문자열 가져오기 알고리즘을 사용하여, TrustedHTML
과
함께 얻은 결과로 설정합니다.
this의 관련 글로벌 객체, 주어진 값,
"ShadowRoot innerHTML
", 그리고
"script
"로 설정합니다.
fragment를 조각 구문 분석 알고리즘 단계를 사용하여 context와 compliantString으로부터 얻은 결과로 설정합니다.
outerHTML
속성outerHTML
속성에는 여러 가지 미해결 문제가 있으며, 이는 DOM Parsing and Serialization 이슈
추적기에 기록되어 있습니다.
element.outerHTML
요소와 그 내용을 나타내는 HTML 또는 XML 조각을 반환합니다.
XML 문서의 경우, 요소를 XML로 직렬화할 수 없는 경우 "InvalidStateError
"
DOMException
을(를) 발생시킵니다.
element.outerHTML = value
지정된 문자열에서 구문 분석된 노드로 요소를 교체합니다.
XML 문서의 경우, 주어진 문자열이 올바르게 작성되지 않은 경우 "SyntaxError
"
DOMException
을(를) 발생시킵니다.
요소의 부모가 Document
인 경우, "NoModificationAllowedError
"
DOMException
을(를) 발생시킵니다.
이 속성의 setter는 script
또는 이벤트 핸들러
콘텐츠
속성과 같은 잠재적으로 위험한 요소 및 속성을 제거하기 위한 정화를 수행하지 않습니다.
Element
의
outerHTML
getter
단계는 다음과 같습니다:
element를 유일한 자식이 this인 가상의 노드로 설정합니다.
element와 true로 설정하여 조각 직렬화 알고리즘 단계를 실행한 결과를 반환합니다.
Element
의
outerHTML
setter 단계는 다음과 같습니다:
compliantString을 신뢰할 수 있는
유형 호환 문자열 가져오기 알고리즘을 사용하여, TrustedHTML
과
함께 얻은 결과로 설정합니다.
this의 관련 글로벌
객체, 주어진 값, "Element outerHTML
", 그리고
"script
"로 설정합니다.
parent가 null인 경우, 반환합니다. 남은 단계가 실행되더라도 생성된 노드에 대한 참조를 얻을 방법이 없을 것입니다.
parent가 Document
인 경우,
"NoModificationAllowedError
"
DOMException
을
발생시킵니다.
parent가 DocumentFragment
인
경우,
parent를 요소를 생성한 결과로 설정합니다.
this의
노드
문서, body
,
그리고
HTML
네임스페이스로 설정합니다.
fragment를 조각 구문 분석 알고리즘 단계를 사용하여 parent와 compliantString으로부터 얻은 결과로 설정합니다.
insertAdjacentHTML()
메서드insertAdjacentHTML()
메서드는 DOM Parsing and Serialization 이슈 추적기에 여러
가지 문제가 기록되어 있으며, 사양과 관련된 다양한 문제를 문서화하고 있습니다.
element.insertAdjacentHTML(position, string)
string을(를) HTML 또는 XML로 구문 분석하고 position 인수로 지정된 위치에 결과 노드를 트리에 삽입합니다. 구체적인 위치는 다음과 같습니다:
beforebegin
"
afterbegin
"
beforeend
"
afterend
"
인수가 잘못된 값을 가진 경우 (예: XML 문서의 경우, 주어진
문자열이 올바르게 작성되지 않은 경우), "SyntaxError
" DOMException
을(를) 발생시킵니다.
주어진 위치가 불가능한 경우 (예: Document
의 루트 요소 뒤에 요소를 삽입하는
경우), "NoModificationAllowedError
" DOMException
을(를)
발생시킵니다.
이 메서드는 script
또는 이벤트 핸들러 콘텐츠 속성과 같은 잠재적으로 위험한 요소 및
속성을 제거하기 위한 정화를 수행하지 않습니다.
Element
의
insertAdjacentHTML(position,
string)
메서드 단계는 다음과 같습니다:
compliantString을(를) 신뢰할 수
있는 유형 호환 문자열 가져오기 알고리즘을 사용하여, TrustedHTML
과
함께 얻은 결과로 설정합니다.
this의 관련 글로벌
객체, string, "Element insertAdjacentHTML
", 그리고
"script
"로 설정합니다.
context를 null로 설정합니다.
이 목록에서 첫 번째로 일치하는 항목을 사용합니다:
beforebegin
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
afterend
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
context가 null이거나 Document
인
경우,
"NoModificationAllowedError
"
DOMException
을(를)
발생시킵니다.
afterbegin
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
beforeend
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
"SyntaxError
" DOMException
을(를)
발생시킵니다.
context가 Element
이(가)
아니거나 다음 모든 조건이 true인 경우:
context의 노드 문서가 HTML 문서입니다;
context의 네임스페이스가 HTML 네임스페이스입니다,
context를 요소 생성의
결과로 설정합니다. this의 노드
문서, body
,
그리고
HTML
네임스페이스로 설정합니다.
fragment을(를) 조각 구문 분석 알고리즘 단계의 결과로 context 및 compliantString으로부터 얻은 결과로 설정합니다.
beforebegin
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
afterend
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
afterbegin
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
beforeend
" 문자열과 ASCII 대소문자 구분 없이 일치하는 경우
노드
를
직접 조작하는 다른 API와 마찬가지로 (그리고 innerHTML
과는
달리),
insertAdjacentHTML()
는 템플릿
요소에 대해 특별한 처리를 하지 않습니다. 대부분의 경우 직접 조작하는 대신
templateEl.content.insertAdjacentHTML()
을(를)
사용해야 합니다.
createContextualFragment()
메서드createContextualFragment()
메서드는 DOM Parsing and Serialization 이슈 트래커에
명시된 다양한 문제들을
포함하고 있습니다.
docFragment = range.createContextualFragment(string)
마크업 문자열 string에서 생성된 DocumentFragment
를
반환합니다.
이때 range의 시작 노드를
fragment가 구문 분석될 때의 맥락으로 사용합니다.
이 메서드는 script
요소나 이벤트 핸들러 콘텐츠 속성과 같은 잠재적으로 위험한
요소와 속성을 제거하기 위한 어떠한 검증도 수행하지 않습니다.
partial interface Range {
[CEReactions , NewObject ] DocumentFragment
createContextualFragment ((TrustedHTML
or DOMString ) string );
};
Range
의
createContextualFragment(string)
메서드 단계는 다음과 같습니다:
compliantString을 신뢰할 수 있는 유형의 호환 문자열 가져오기 알고리즘의 결과로 설정합니다.
TrustedHTML
,
this의 관련 전역 객체, string,
그리고 "Range
createContextualFragment"
를 전달하여 호출합니다.
element를 null로 설정합니다.
만약 node가 Element
를
구현하고 있다면,
element를 node로 설정합니다.
그렇지 않고 node가 Text
나
Comment
를
구현하고 있다면, element를 node의 부모 요소로 설정합니다.
element가 null이거나 다음 조건이 모두 true인 경우:
element의 노드 문서가 HTML 문서입니다;
element의 네임스페이스가 HTML 네임스페이스입니다,
그렇다면 element를 요소
생성의 결과로 설정합니다. this의 노드 문서,
body
,
그리고
HTML
네임스페이스를 전달하여 생성합니다.
fragment node를 프래그먼트 구문 분석 알고리즘 단계를 사용하여 element와 compliantString을 전달하여 구한 결과로 설정합니다.
fragment node를 반환합니다.
setTimeout()
및 setInterval()
메서드는
작성자가 타이머 기반의 콜백을 예약할 수 있도록 합니다.
id = self.setTimeout(handler [, timeout [, ...arguments ] ])
handler를 timeout 밀리초 후에 실행하도록 타임아웃을 예약합니다. arguments는 handler에 그대로 전달됩니다.
id = self.setTimeout(code [, timeout ])
code를 timeout 밀리초 후에 컴파일하고 실행하도록 타임아웃을 예약합니다.
self.clearTimeout(id)
id로 식별된 setTimeout()
또는
setInterval()
으로 설정된 타임아웃을 취소합니다.
id = self.setInterval(handler [, timeout [, ...arguments ] ])
timeout 밀리초마다 handler를 실행하도록 타임아웃을 예약합니다. arguments는 handler에 그대로 전달됩니다.
id = self.setInterval(code [, timeout ])
code를 timeout 밀리초마다 컴파일하고 실행하도록 타임아웃을 예약합니다.
self.clearInterval(id)
id로 식별된 setInterval()
또는
setTimeout()
으로 설정된 타이머를 취소합니다.
타이머는 중첩될 수 있으며, 다섯 번 이상의 중첩 타이머가 발생하면 간격이 최소 4밀리초로 강제 조정됩니다.
이 API는 타이머가 정확하게 일정에 따라 실행될 것을 보장하지 않습니다. CPU 부하, 다른 작업 등의 이유로 인한 지연이 예상됩니다.
WindowOrWorkerGlobalScope
믹스를 구현하는 객체는 setTimeout 및 setInterval ID의 맵을 가집니다. 이는 초기에는 비어있는 순서가 지정된 맵입니다. 이 맵의 각 키는 setTimeout()
또는 setInterval()
호출의 반환 값에 해당하는 양의 정수입니다. 각 값은 고유 내부 값에 해당하며, 이는 객체의 활성 타이머의 맵의 키에 해당합니다.
setTimeout(handler, timeout, ...arguments)
메서드의 단계는 타이머 초기화 단계를 this, handler,
timeout, arguments, 그리고 false를 전달하여 실행한 결과를 반환하는 것입니다.
setInterval(handler, timeout, ...arguments)
메서드의 단계는 타이머 초기화 단계를 this,
handler, timeout, arguments, 그리고 true를 전달하여 실행한 결과를 반환하는 것입니다.
clearTimeout(id)
및 clearInterval(id)
메서드의 단계는 제거하는
것입니다. this의 setTimeout 및
setInterval ID의 맵[id]을 제거합니다.
clearTimeout()
및 clearInterval()
는 동일한 맵에서 항목을 제거하므로, 이들 메서드
중 어느 것이나 setTimeout()
또는 setInterval()
으로 생성된 타이머를 제거하는 데 사용할 수 있습니다.
특정 WindowOrWorkerGlobalScope
global, 문자열 또는 Function
또는 TrustedScript
handler, 숫자 timeout, 목록 arguments, 부울 repeat 및 선택적으로(그리고
repeat가 true일 경우에만) 숫자 previousId를 전달하여 타이머 초기화
단계를 수행합니다. 이 단계들은 숫자를 반환합니다.
global이 WorkerGlobalScope
객체라면
thisArg을 global로 설정합니다. 그렇지 않으면 thisArg를 global에 해당하는 WindowProxy
로 설정합니다.
previousId가 주어졌다면 id를 previousId로 설정합니다. 그렇지 않으면 id를 global의 setTimeout 및 setInterval ID의 맵에 이미 존재하지 않는 양의 정수로 설정합니다.
주변 에이전트의 이벤트 루프의 현재 실행 중인 작업이 이 알고리즘에 의해 생성된 작업인 경우 nesting level을 해당 작업의 타이머 중첩 수준으로 설정합니다. 그렇지 않으면 nesting level을 0으로 설정합니다.
작업의 타이머 중첩 수준은 setTimeout()
에 대한 중첩 호출 및 setInterval()
에 의해 생성된 반복 타이머 모두에
사용됩니다. (또는, 실제로 이 두 가지의 조합일 수 있습니다.) 즉, 이는 특정 메서드의 중첩 호출이 아니라 이 알고리즘의 중첩 호출을 나타냅니다.
timeout이 0보다 작으면 timeout을 0으로 설정합니다.
nesting level이 5보다 크고 timeout이 4보다 작으면 timeout을 4로 설정합니다.
realm을 global의 관련된 영역으로 설정합니다.
initiating script을 활성 스크립트로 설정합니다.
uniqueHandle을 null로 설정합니다.
task을 다음 하위 단계를 실행하는 작업으로 설정합니다.
global의 setTimeout 및 setInterval ID의 맵에 id가 존재하지 않으면 이 단계를 중단합니다.
global의 setTimeout 및 setInterval ID의 맵[id]이 uniqueHandle과 같지 않으면 이 단계를 중단합니다.
이는 ID가 clearTimeout()
또는 clearInterval()
호출에 의해
제거되고, 이후 호출된 setTimeout()
또는
setInterval()
호출에 의해 재사용될
가능성을 고려한 것입니다.
handler에 대해 타이머 핸들러의 타이밍 정보 기록을 global의 관련된 설정 객체 및 repeat과 함께 수행합니다.
handler가 Function
인
경우 arguments와 "보고
"를 전달하여 콜백
함수 호출을 수행하고, thisArg을 콜백의 this 값으로 설정합니다.
그렇지 않다면:
previousId가 주어지지 않은 경우:
globalName을 global이 Window
객체일 경우
"Window
"로, 그렇지 않을 경우 "Worker
"로 설정합니다.
repeat가 true일 경우 methodName을 "setInterval
"로,
그렇지 않을 경우 "setTimeout
"로 설정합니다.
sink을 globalName, U+0020 SPACE, 그리고 methodName의 연결로 설정합니다.
handler을 신뢰할 수
있는 타입 준수 문자열 알고리즘을
TrustedScript
,
global,
handler, sink 및 "script
"와 함께 호출한 결과로 설정합니다.
단언: handler는 문자열입니다.
EnsureCSPDoesNotBlockStringCompilation(realm, « », handler, handler, timer, « », handler)을 수행합니다. 이 과정에서 예외가 발생하면 이를 catch하여 global에 대해 보고하고, 이 단계를 중단합니다.
fetch options을 기본 스크립트 가져오기 옵션으로 설정하십시오.
fetch options를 기본 클래식 스크립트 가져오기 옵션으로 설정합니다.
base URL을 settings object의 API 기본 URL로 설정합니다.
initiating script가 null이 아닌 경우:
fetch options를 스크립트 가져오기 옵션으로 설정하며, initiating
script의 가져오기 옵션의 암호화 nonce를 설정합니다. 무결성 메타데이터는 빈 문자열로, 파서 메타데이터는
"파서-삽입되지 않음
", 자격 증명 모드는
initiating script의 자격 증명 모드로 설정하고, 리퍼러 정책은
initiating script의 가져오기 옵션의 리퍼러 정책으로 설정하며,
가져오기 우선 순위는
"자동
"으로 설정합니다.
base URL을 initiating script의 기본 URL로 설정합니다.
이 단계는 setTimeout()
및 setInterval()
에 의한
문자열 컴파일이 eval()
에
의한 것과 동일하게 동작하도록 보장합니다. 즉, 모듈 스크립트를
import()
를
통해 가져오는 작업이 두 컨텍스트에서 동일하게 동작합니다.
script를 클래식 스크립트 생성의 결과로 설정합니다. handler, settings object, base URL 및 fetch options를 전달하여 수행합니다.
클래식 스크립트 실행을 script로 설정합니다.
global의 setTimeout 및 setInterval ID의 맵에 id가 존재하지 않으면 이 단계를 중단합니다.
global의 setTimeout 및 setInterval ID의 맵[id]이 uniqueHandle과 같지 않으면 이 단계를 중단합니다.
이는 handler의 작성자 코드에서 clearTimeout()
또는 clearInterval()
를 호출하여
ID가 제거되고, 이후 호출된 setTimeout()
또는 setInterval()
호출에 의해 재사용될
가능성을 고려한 것입니다.
repeat이 true인 경우 global, handler, timeout, arguments, true 및 id을 전달하여 타이머 초기화 단계를 다시 수행합니다.
그렇지 않다면, global의 setTimeout 및 setInterval ID의 맵[id]을 제거합니다.
nesting level을 1씩 증가시킵니다.
task의 타이머 중첩 수준을 nesting level로 설정합니다.
completionStep을 글로벌 작업을 대기열에 추가하는 알고리즘으로 설정합니다. 타이머 작업 소스에 global을 전달하여 task를 실행합니다.
uniqueHandle을 global, "setTimeout/setInterval
", timeout,
completionStep을 전달하여 타임아웃 후에 단계를 실행하는 결과로 설정합니다.
global의 setTimeout 및 setInterval ID의 맵[id]을 uniqueHandle로 설정합니다.
id을 반환합니다.
웹 IDL에 정의된 대로 인수 변환(예: 첫 번째 인수로 전달된 객체에 대해 toString()
메서드를 호출하는 것)은 이 알고리즘이 호출되기 전에 웹
IDL에 정의된 알고리즘에서 수행됩니다.
다음과 같이 다소 어리석은 코드가 로그에 "ONE TWO
"를 기록하게 됩니다:
var log = '' ;
function logger( s) { log += s + ' ' ; }
setTimeout({ toString: function () {
setTimeout( "logger('ONE')" , 100 );
return "logger('TWO')" ;
} }, 100 );
몇 밀리초의 작업을 연속적으로 실행하되, 사용자 인터페이스가 지연되지 않도록 하고(그리고 브라우저가 CPU를 과도하게 사용하여 스크립트를 종료하지 않도록) 다음 타이머를 예약하는 코드를 작업 전에 작성하면 됩니다:
function doExpensiveWork() {
var done = false ;
// ...
// 이 함수의 이 부분은 최대 5밀리초가 걸립니다.
// 다 완료되면 done을 true로 설정합니다.
// ...
return done; }
function rescheduleWork() {
var id = setTimeout( rescheduleWork, 0 ); // 다음 반복을 사전 예약합니다.
if ( doExpensiveWork())
clearTimeout( id); // 필요하지 않은 경우 타임아웃을 취소합니다.
}
function scheduleWork() {
setTimeout( rescheduleWork, 0 ); }
scheduleWork(); // 많은 작업을 수행하는 작업을 예약합니다.
WindowOrWorkerGlobalScope
믹스를 구현하는 객체는 활성 타이머의 맵을
가집니다. 이는 초기에는 비어있는 순서가 지정된 맵입니다. 이 맵의 각 키는 타이머를 나타내는 고유 내부 값이고, 각 값은 그 타이머의 만료 시간을 나타내는 DOMHighResTimeStamp
입니다.
WindowOrWorkerGlobalScope
global, 문자열 orderingIdentifier, 숫자 milliseconds 및 단계를 나타내는
completionSteps을 주어진 타이머에서 타임아웃 후에 단계를 실행하려면
다음 단계를 수행합니다. 이 단계는 고유 내부 값을 반환합니다.
timerKey를 새로운 고유 내부 값으로 설정합니다.
startTime을 global에 대해 현재 고해상도 시간으로 설정합니다.
global의 활성 타이머의 맵[timerKey]을 startTime에 milliseconds을 더한 값으로 설정합니다.
다음 단계를 병렬로 실행합니다:
global이 Window
객체인 경우,
global의 관련된
Document
가 추가로 milliseconds 밀리초 동안(반드시 연속적일 필요는 없음) 완전히 활성화될 때까지 기다립니다.
그렇지 않으면, global은 WorkerGlobalScope
객체이며,
milliseconds 밀리초 동안 워커가 일시 중단되지 않을 때까지(반드시 연속적일 필요는 없음) 기다립니다.
이 알고리즘의 동일한 global 및 orderingIdentifier을 가지고 시작한 알고리즘 중 이 알고리즘보다 먼저 시작했으며 milliseconds이 이 알고리즘의 것과 같거나 작은 알고리즘이 완료될 때까지 기다립니다.
옵션으로, 추가로 구현 정의된 시간 동안 기다릴 수 있습니다.
이는 사용자 에이전트가 장치의 전력 사용량을 최적화하기 위해 필요한 경우 타임아웃을 패딩할 수 있도록 허용합니다. 예를 들어, 일부 프로세서에는 타이머의 정밀도가 감소하는 저전력 모드가 있으며, 이러한 플랫폼에서는 사용자 에이전트가 더 높은 전력 소비를 수반하는 더 정확한 모드를 사용하도록 요구하는 대신 이 일정에 맞게 타이머를 느리게 할 수 있습니다.
completionSteps을 실행합니다.
global의 활성 타이머의 맵[timerKey]을 제거합니다.
timerKey를 반환합니다.
타임아웃 후에 단계를 실행은 setTimeout()
과 유사한 방식으로 개발자가 지정한 타임아웃 후에 개발자가
지정한 코드를 실행하려는 다른 명세에 의해 사용될 수 있습니다. (그러나 setTimeout()
의 중첩 및 클램핑 동작은 없습니다.) 이러한 명세는 특정
orderingIdentifier을 선택하여 해당 명세의 타임아웃 내에서 순서를 보장할 수 있으며, 다른 명세의 타임아웃과 관련하여 순서를 제한하지 않습니다.
모든 현재 엔진에서 지원됨.
self.queueMicrotask(callback)
미시작업을 큐에 추가하여 주어진 callback을 실행합니다.
queueMicrotask(callback)
메서드는
미시작업을 큐에 추가하여 invoke합니다.
callback과 « » 및 "report
"를 사용합니다.
queueMicrotask()
메서드는
작성자가 미시작업 큐에
콜백을 예약할 수 있도록 허용합니다.
이를 통해
JavaScript 실행 컨텍스트 스택이
다음으로 비워질 때,
현재 실행 중인 모든 동기 JavaScript가 완료된 후에 코드가 실행됩니다. 이는 예를 들어 setTimeout(f, 0)
을 사용할 때처럼
이벤트 루프에 제어를 다시 넘기지 않습니다.
작성자는 많은 미시작업을 예약하는 것이 많은 동기 코드를 실행하는 것과 동일한 성능 단점을 가진다는 것을 인식해야 합니다. 둘 다 브라우저가 렌더링과 같은 자체 작업을 수행하는 것을 방지합니다. 많은
경우에, requestAnimationFrame()
또는
requestIdleCallback()
이
더 나은 선택일 수 있습니다. 특히 다음 렌더링 주기 전에 코드를 실행하는 것이 목표라면, 그것이 requestAnimationFrame()
의
목적입니다.
다음 예제에서 볼 수 있듯이, queueMicrotask()
를
사용하는 가장 좋은 방법은
동기 코드를 재배치하는 메커니즘으로 생각하는 것입니다. 이를 통해 현재 실행 중인 동기 JavaScript가 완료된 직후 큐에 있는 코드가 실행됩니다.
queueMicrotask()
를 사용하는
가장 일반적인 이유는
정보가 동기적으로 제공되는 경우에도 일관된 순서를 만들기 위해서입니다,
불필요한 지연을 초래하지 않으면서 말입니다.
예를 들어, 이전에 로드된 데이터를 내부적으로 캐시하는 커스텀 요소가 load
이벤트를 발생시키는 상황을 고려해보세요. 단순한 구현은 다음과 같이 보일 수 있습니다:
MyElement. prototype. loadData = function ( url) {
if ( this . _cache[ url]) {
this . _setData( this . _cache[ url]);
this . dispatchEvent( new Event( "load" ));
} else {
fetch( url). then( res => res. arrayBuffer()). then( data => {
this . _cache[ url] = data;
this . _setData( data);
this . dispatchEvent( new Event( "load" ));
});
}
};
그러나 이 단순한 구현은 사용자가 일관되지 않은 동작을 경험하게 만듭니다. 예를 들어, 다음과 같은 코드가 있을 때
element. addEventListener( "load" , () => console. log( "loaded" ));
console. log( "1" );
element. loadData();
console. log( "2" );
데이터가 가져와야 하는 경우 "1, 2, loaded"를 기록할 수도 있고, 데이터가 이미 캐시된 경우 "1, loaded, 2"를 기록할 수도 있습니다. 마찬가지로
loadData()
호출 후에도 요소에 데이터가 설정되어 있는지 여부가 일관되지 않을 것입니다.
일관된 순서를 얻기 위해 queueMicrotask()
를
사용할 수 있습니다:
MyElement. prototype. loadData = function ( url) {
if ( this . _cache[ url]) {
queueMicrotask(() => {
this . _setData( this . _cache[ url]);
this . dispatchEvent( new Event( "load" ));
});
} else {
fetch( url). then( res => res. arrayBuffer()). then( data => {
this . _cache[ url] = data;
this . _setData( data);
this . dispatchEvent( new Event( "load" ));
});
}
};
본질적으로 큐에 있는 코드를 JavaScript 실행 컨텍스트 스택이 비워진 후에 실행되도록 재배치함으로써 요소 상태의 일관된 순서와 업데이트가 보장됩니다.
queueMicrotask()
의 또 다른
흥미로운 사용은
여러 호출자가 미리 조율되지 않은 "배치" 작업을 허용하는 것입니다. 예를 들어, 가능한 한 빨리 데이터를 어딘가에 보내고자 하지만, 이를 통해 여러 번의 네트워크 요청을 하는 것이 쉽게 피할
수 있다면 하고 싶지 않은 라이브러리 함수를 고려할 수 있습니다. 이와 같은 균형을 맞추는 방법 중 하나는 다음과 같습니다:
const queuedToSend = [];
function sendData( data) {
queuedToSend. push( data);
if ( queuedToSend. length === 1 ) {
queueMicrotask(() => {
const stringToSend = JSON. stringify( queuedToSend);
queuedToSend. length = 0 ;
fetch( "/endpoint" , stringToSend);
});
}
}
이 아키텍처에서는 현재 실행 중인 동기 JavaScript 내에서 sendData()
를 여러 번 호출해도
fetch()
호출 하나로 배치됩니다. 그러나 setTimeout()
을 사용하는 유사한 코드와는 달리,
중간에 이벤트 루프 태스크가 끼어들어 미리 실행되지 않습니다.
window.alert(message)
모든 현재 엔진에서 지원됩니다.
주어진 메시지를 사용하여 모달 경고를 표시하고, 사용자가 이를 해제할 때까지 기다립니다.
result = window.confirm(message)
모든 현재 엔진에서 지원됩니다.
주어진 메시지를 사용하여 모달 OK/취소 프롬프트를 표시하고, 사용자가 이를 해제할 때까지 기다리며, 사용자가 OK를 클릭하면 true를, 취소를 클릭하면 false를 반환합니다.
result = window.prompt(message [, default])
모든 현재 엔진에서 지원됩니다.
주어진 메시지를 사용하여 모달 텍스트 입력 프롬프트를 표시하고, 사용자가 이를 해제할 때까지 기다리며, 사용자가 입력한 값을 반환합니다. 사용자가 프롬프트를 취소하면 null을 반환합니다. 두 번째 인수가 있으면 해당 값이 기본값으로 사용됩니다.
작업(task) 또는 마이크로 작업(microtasks)에 의존하는 논리, 예를 들어 미디어 요소가 미디어 데이터를 로드할 때 이러한 메서드가 호출되면 중단됩니다.
alert()
및 alert(message)
메서드의 단계는
다음과 같습니다:
간단한 대화 상자를 표시할 수 없는 경우 this에 대해, 반환합니다.
메서드가 인수 없이 호출된 경우, message를 빈 문자열로 설정합니다. 그렇지 않으면 message를 메서드의 첫 번째 인수로 설정합니다.
주어진 message에 대해 줄 바꿈을 정규화한 결과로 message를 설정합니다.
message를 간단한 대화 상자 문자열을 선택적으로 잘라내기의 결과로 설정합니다.
message를 사용자에게 표시하고, U+000A LF을 줄 바꿈으로 처리합니다.
WebDriver BiDi 사용자 프롬프트 열림을 this,
"alert
", 및 message와 함께 호출합니다.
선택적으로, 사용자가 메시지를 확인할 때까지 일시 중지합니다.
WebDriver BiDi 사용자 프롬프트 닫힘을 this 및 true와 함께 호출합니다.
이 메서드는 역사적인 이유로 선택적 인수를 사용하는 대신 두 개의 오버로드를 사용하여 정의됩니다. 이로 인해 alert(undefined)
는
alert("undefined")
로 처리되지만, alert()
는 alert("")
로
처리됩니다.
confirm(message)
메서드
단계는 다음과 같습니다:
간단한 대화 상자를 표시할 수 없는 경우 this에 대해, false를 반환합니다.
주어진 message에 대해 줄 바꿈을 정규화한 결과로 message를 설정합니다.
message를 간단한 대화 상자 문자열을 선택적으로 잘라내기의 결과로 설정합니다.
message를 사용자에게 표시하고, U+000A LF을 줄 바꿈으로 처리하며, 사용자가 긍정적 또는 부정적으로 응답하도록 요청합니다.
WebDriver BiDi 사용자 프롬프트 열림을 this,
"confirm
", 및 message와 함께 호출합니다.
사용자가 긍정적이거나 부정적으로 응답할 때까지 일시 중지합니다.
WebDriver BiDi 사용자 프롬프트 닫힘을 this 및 true와 함께 호출합니다.
사용자가 긍정적으로 응답하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
prompt(message, default)
메서드 단계는 다음과 같습니다:
간단한 대화 상자를 표시할 수 없는 경우 this에 대해, null을 반환합니다.
주어진 message에 대해 줄 바꿈을 정규화한 결과로 message를 설정합니다.
message를 간단한 대화 상자 문자열을 선택적으로 잘라내기의 결과로 설정합니다.
default를 간단한 대화 상자 문자열을 선택적으로 잘라내기의 결과로 설정합니다.
message를 사용자에게 표시하고, U+000A LF을 줄 바꿈으로 처리하며, 사용자에게 문자열 값을 응답하거나 중단하도록 요청합니다. 응답은 default로 지정된 값으로 기본 설정되어야 합니다.
WebDriver BiDi 사용자 프롬프트 열림을 this,
"prompt
", message, 및 default와 함께 호출합니다.
사용자의 응답을 기다리는 동안 일시 중지합니다.
사용자가 중단하면 result를 null로 설정하고, 그렇지 않으면 사용자가 응답한 문자열로 설정합니다.
WebDriver BiDi 사용자 프롬프트 닫힘을 this, result가 null인 경우 false, 그렇지 않은 경우 true로 호출하고, result를 반환합니다.
result를 반환합니다.
간단한 대화 상자 문자열을 선택적으로 잘라내기를 위해, s를 반환하거나 s에서 파생된 더 짧은 문자열을 반환합니다. 사용자 에이전트는 s의 생략된 부분을 표시하기 위한 UI를 제공하지 않아야 하며, 이는 남용자가 "중요한 보안 경고! 전체 내용을 보려면 '자세히 보기'를 클릭하세요!"와 같은 대화 상자를 만드는 것을 너무 쉽게 만들기 때문입니다.
예를 들어, 사용자 에이전트는 메시지의 첫 100자만 표시할 수 있습니다. 또는 사용자 에이전트는 문자열의 중간 부분을 "…"로 대체할 수 있습니다. 이러한 유형의 수정은 비정상적으로 길고 신뢰할 수 있는 시스템 대화 상자의 남용 가능성을 제한하는 데 유용할 수 있습니다.
간단한 대화 상자를 표시할 수 없습니다는 Window
window에 대해 다음 알고리즘이 true를 반환할 때 발생합니다:
만약 window의 연관된
문서
의 활성 샌드박싱 플래그 세트가 샌드박싱된 모달 플래그를 포함하고 있다면, true를 반환합니다.
만약 window의 관련 설정 객체의 출처와 window의 최상위 출처가 동일 출처 도메인이 아닌 경우, true를 반환합니다.
만약 window의 관련 에이전트의 이벤트 루프의 종료 중첩 레벨이 0이 아닌 경우, 선택적으로 true를 반환합니다.
선택적으로, true를 반환합니다. (예를 들어, 사용자 에이전트는 모든 모달 대화 상자를 무시할 수 있는 옵션을 사용자에게 제공할 수 있으며, 이 경우 메서드가 호출될 때마다 이 단계에서 중단됩니다.)
false를 반환합니다.
모든 현재 엔진에서 지원됩니다.
window.print()
사용자에게 페이지를 인쇄하라는 메시지를 표시합니다.
print()
메서드의 단계는 다음과 같습니다:
document가 완전히 활성화된 상태가 아니라면, 반환합니다.
document의 언로드 카운터가 0보다 크면 반환합니다.
document가 로드 후 작업을 할 준비가 된 상태라면, document에 대해 인쇄 단계를 실행합니다.
그렇지 않으면, document의 로드 시 인쇄 플래그를 설정합니다.
사용자 에이전트는 사용자가 문서의 물리적 형태 (예: 인쇄된 사본) 또는 물리적 형태의 표현 (예: PDF 사본)을 얻을 기회를 요청할 때마다 인쇄 단계를 실행해야 합니다.
문서
document에 대한 인쇄
단계는 다음과 같습니다:
사용자 에이전트는 사용자에게 메시지를 표시하거나 반환할 수 있습니다 (또는 둘 다).
예를 들어, 키오스크 브라우저는 print()
메서드의
호출을 조용히 무시할 수 있습니다.
예를 들어, 모바일 기기의 브라우저는 주변에 프린터가 없음을 감지하고 계속해서 "PDF로 저장" 옵션을 제공하기 전에 해당 메시지를 표시할 수 있습니다.
document의 활성 샌드박싱 플래그 세트에 샌드박싱된 모달 플래그가 포함되어 있으면 반환합니다.
인쇄 대화 상자가 문서
의 샌드박스에 의해 차단되는 경우,
beforeprint
또는 afterprint
이벤트가 발생하지 않습니다.
사용자 에이전트는 이벤트를 발생시켜야 하며, 이 이벤트의 이름은 beforeprint
입니다. 이 이벤트는
document의 관련 글로벌 객체와
그 안의 모든 자식 네비게이블에 발생합니다.
자식에서만 발생하는 것은 이치에 맞지 않으며, 일부 작업은 큐에 추가될 가능성이 큽니다. 이슈 #5096을 참조하세요.
beforeprint
이벤트는 예를 들어 문서가 인쇄된 시간을 추가하여 인쇄된 사본을 주석 처리하는 데 사용할 수 있습니다.
사용자 에이전트는 document의 물리적 형태 (또는 물리적 형태의 표현)를 사용자에게 제공해야 합니다. 사용자 에이전트는 사용자가 승인하거나 거절할 때까지 기다릴 수 있으며, 그 경우 메서드가 대기하는 동안 일시 중지해야 합니다. 이 시점에서 대기하지 않더라도, 사용자 에이전트는 결국 대체 형식을 생성할 때 이 알고리즘의 이 시점에서 관련 문서의 상태를 사용해야 합니다.
사용자 에이전트는 이벤트를 발생시켜야 하며, 이 이벤트의 이름은 afterprint
입니다. 이 이벤트는
document의 관련 글로벌
객체와 그 안의 모든 자식 네비게이블에 발생합니다.
자식에서만 발생하는 것은 이치에 맞지 않으며, 일부 작업은 큐에 추가될 가능성이 큽니다. 이슈 #5096을 참조하세요.
afterprint
이벤트는
이전 이벤트에서 추가된 주석을 되돌리거나 인쇄 후 UI를 표시하는 데 사용할 수 있습니다. 예를 들어, 페이지가 주택 대출 신청 절차를 안내하는 경우, 스크립트는 양식 또는 기타 문서를
인쇄한 후 자동으로 다음 단계로 이동할 수 있습니다.
Navigator
객체모든 현재 엔진에서 지원됩니다.
Navigator
의 인스턴스는 사용자 에이전트(클라이언트)의 정체성과
상태를 나타냅니다. 또한 이 명세서와 다른 명세서에서 다양한 API가 위치한 범용 글로벌 객체 역할도 합니다.
[Exposed =Window ]
interface Navigator {
// 이 인터페이스를 구현하는 객체는 아래에 나열된 인터페이스들도 구현합니다.
};
Navigator includes NavigatorID ;
Navigator includes NavigatorLanguage ;
Navigator includes NavigatorOnLine ;
Navigator includes NavigatorContentUtils ;
Navigator includes NavigatorCookies ;
Navigator includes NavigatorPlugins ;
Navigator includes NavigatorConcurrentHardware ;
이 인터페이스 믹스인은 WorkerNavigator
가 Navigator
인터페이스의 일부를 재사용할 수 있도록 별도로
정의됩니다.
각 Window
에는 연관된
Navigator
가 있으며, 이는 Navigator
객체입니다. Window
객체가 생성될 때, 그 연관된 Navigator
는
Window
객체의 관련된 영역에서 생성된 새로운 Navigator
객체로 설정되어야 합니다.
모든 현재 엔진에서 지원됩니다.
navigator
및
clientInformation
의
getter 단계는 this의 연관된 Navigator
를 반환하는 것입니다.
interface mixin NavigatorID {
readonly attribute DOMString appCodeName ; // 상수 "Mozilla"
readonly attribute DOMString appName ; // 상수 "Netscape"
readonly attribute DOMString appVersion ;
readonly attribute DOMString platform ;
readonly attribute DOMString product ; // 상수 "Gecko"
[Exposed =Window ] readonly attribute DOMString productSub ;
readonly attribute DOMString userAgent ;
[Exposed =Window ] readonly attribute DOMString vendor ;
[Exposed =Window ] readonly attribute DOMString vendorSub ; // 상수 ""
};
때때로 업계의 모든 노력이 무색하게 웹 브라우저에는 웹 저자들이 해결해야 하는 버그와 한계가 존재합니다.
이 섹션에서는 스크립트에서 사용하는 사용자 에이전트의 종류를 결정하여 이러한 문제를 해결하기 위한 속성 모음을 정의합니다.
사용자 에이전트는 navigator 호환 모드를 가지며, 이는 Chrome, Gecko 또는 WebKit 중 하나입니다.
navigator 호환 모드는 기존의 웹 콘텐츠와 호환되는 것으로 알려진
속성 값 조합과 NavigatorID
믹스인의 존재 여부를
제한합니다.
클라이언트 감지는 항상 알려진 최신 버전으로 제한되어야 하며, 향후 버전 및 알려지지 않은 버전은 항상 완전히 호환되는 것으로 가정해야 합니다.
self.navigator.appCodeName
문자열 "Mozilla
"를 반환합니다.
self.navigator.appName
문자열 "Netscape
"를 반환합니다.
self.navigator.appVersion
브라우저의 버전을 반환합니다.
self.navigator.platform
플랫폼의 이름을 반환합니다.
self.navigator.product
문자열 "Gecko
"를 반환합니다.
window.navigator.productSub
문자열 "20030107
" 또는 "20100101
"를 반환합니다.
self.navigator.userAgent
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
완전한 `User-Agent
` 헤더를 반환합니다.
window.navigator.vendor
빈 문자열, "Apple Computer, Inc.
", 또는 "Google Inc.
" 문자열 중 하나를 반환합니다.
window.navigator.vendorSub
빈 문자열을 반환합니다.
appCodeName
문자열 "Mozilla
"를 반환해야 합니다.
appName
문자열 "Netscape
"를 반환해야 합니다.
appVersion
아래와 같이 "5.0 (
"로 시작하는 적절한 문자열을 반환해야 합니다:
trail을 "Mozilla/
" 접두사 뒤에 오는 기본
`User-Agent
` 값의 부분 문자열로 설정합니다.
trail을 반환합니다.
trail이 "5.0 (Windows
"로 시작하면 "5.0 (Windows)
"를 반환합니다.
그렇지 않으면 trail의 첫 번째 U+003B(;) 문자를 포함하지 않는 접두사와 U+0029 오른쪽 괄호를 연결하여 반환합니다. 예를 들어
"5.0 (Macintosh)
", "5.0 (Android 10)
", 또는 "5.0 (X11)
" 등을
반환합니다.
platform
브라우저가 실행 중인 플랫폼을 나타내는 문자열(예: "MacIntel
", "Win32
", "Linux x86_64
",
"Linux armv81
") 또는 프라이버시 및 호환성을 위해 다른 플랫폼에서 일반적으로 반환되는 문자열을 반환해야 합니다.
product
문자열 "Gecko
"를 반환해야 합니다.
productSub
다음 목록에서 적절한 문자열을 반환해야 합니다:
"20030107
" 문자열을 반환합니다.
"20100101
" 문자열을 반환합니다.
userAgent
기본
`User-Agent
`
값을 반환해야 합니다.
vendor
다음 목록에서 적절한 문자열을 반환해야 합니다:
"Google Inc.
" 문자열을 반환합니다.
빈 문자열을 반환합니다.
"Apple Computer, Inc.
" 문자열을 반환합니다.
vendorSub
빈 문자열을 반환해야 합니다.
navigator 호환 모드가 Gecko인 경우, 사용자 에이전트는 다음 부분 인터페이스도 지원해야 합니다:
partial interface mixin NavigatorID {
[Exposed =Window ] boolean taintEnabled (); // 상수 false
[Exposed =Window ] readonly attribute DOMString oscpu ;
};
taintEnabled()
메서드는 false를 반환해야 합니다.
oscpu
속성의 getter는 빈 문자열이나 브라우저가 실행 중인 플랫폼을 나타내는 문자열(예: "Windows NT 10.0; Win64; x64
", "Linux
x86_64
")을 반환해야 합니다.
이 API에 사용자마다 다른 정보가 포함될 경우 사용자를 프로파일링하는 데 사용할 수 있습니다. 실제로 충분한 정보가 제공되면 사용자를 고유하게 식별할 수 있습니다. 이러한 이유로, 사용자 에이전트
구현자들은 이 API에 가능한 적은 정보를 포함하도록 강력히 권고됩니다.
interface mixin NavigatorLanguage {
readonly attribute DOMString language ;
readonly attribute FrozenArray <DOMString > languages ;
};
self.navigator.language
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
사용자의 기본 언어를 나타내는 언어 태그를 반환합니다.
self.navigator.languages
모든 현재 엔진에서 지원됩니다.
사용자가 선호하는 언어를 나타내는 언어 태그 배열을 반환합니다. 가장 선호하는 언어가 첫 번째로 나타납니다.
가장 선호하는 언어는 navigator.language
에서
반환된 언어입니다.
languagechange
이벤트는
사용자 에이전트가 사용자의 선호 언어를 이해하는 방식이 변경될 때
Window
또는 WorkerGlobalScope
객체에서
발생합니다.
language
유효한 BCP 47 언어 태그를 반환해야 하며, 이는 가능한 언어 또는 사용자의 가장 선호하는 언어를 나타냅니다. [BCP47]
languages
유효한 BCP 47 언어 태그로 구성된 고정 배열을 반환해야 하며, 이는 하나 이상의 가능한 언어 또는 사용자의 선호하는 언어를 나타냅니다. 선호도에 따라 가장 선호하는 언어가 첫 번째로 정렬됩니다. 동일한 객체는 사용자 에이전트가 다른 값을 반환하거나 다른 순서로 값을 반환할 필요가 있을 때까지 반환되어야 합니다. [BCP47]
사용자 에이전트가 navigator.languages
속성을 Window
또는 WorkerGlobalScope
객체 global에 대해 새 언어 태그 집합을 반환해야 할 때마다, 사용자 에이전트는 전역 작업을 큐에 추가하고, 해당 작업이 시작되기를 기다리며 languagechange
이벤트를 global에서 발생시킵니다.
가능한 언어를 결정하기 위해 사용자 에이전트는 다음 사항을 염두에 두어야 합니다:
en-US
" 값을 사용하는 것이 좋습니다. 해당 서비스의 모든 사용자가 동일한 값을 사용하면, 사용자를 서로 구별할 가능성이
줄어듭니다.
지문 인식 벡터를 도입하지 않도록, 사용자 에이전트는 이 함수에서 정의된 API에 대해 HTTP `
Accept-Language
`
헤더와 동일한 목록을 사용해야 합니다.
interface mixin NavigatorOnLine {
readonly attribute boolean onLine ;
};
self.navigator.onLine
모든 현재 엔진에서 지원됩니다.
모든 현재 엔진에서 지원됩니다.
사용자 에이전트가 확실히 오프라인 상태인 경우 false를 반환합니다(네트워크에 연결되지 않음). 사용자 에이전트가 온라인 상태일 가능성이 있는 경우 true를 반환합니다.
onLine
속성은 사용자 에이전트가 사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 네트워크에 접속하지 않거나 그러한 시도가 실패할 것으로 알고 있는 경우 false를 반환해야 하며, 그렇지 않은
경우 true를 반환해야 합니다.
속성 navigator.onLine
의 값이
Window
또는
WorkerGlobalScope
global에서 true에서 false로 변경될 때, 사용자 에이전트는 전역 작업을 큐에 추가하고, 네트워킹 작업 소스에서
global을 대상으로 offline
이벤트를
발생시켜야 합니다.
반면, 속성 navigator.onLine
의 값이
Window
또는
WorkerGlobalScope
global에서 false에서 true로 변경될 때, 사용자 에이전트는 전역 작업을 큐에 추가하고 네트워킹 작업 소스에서 global을 대상으로
online
이벤트를 발생시켜야 합니다.
이 속성은 본질적으로 신뢰할 수 없습니다. 컴퓨터가 네트워크에 연결되어 있어도 인터넷에 액세스할 수 없는 경우가 있습니다.
이 예제에서는 브라우저가 온라인 및 오프라인으로 전환될 때 표시기를 업데이트합니다.
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > 온라인 상태</ title >
< script >
function updateIndicator() {
document. getElementById( 'indicator' ). textContent = navigator. onLine ? 'online' : 'offline' ;
}
</ script >
</ head >
< body onload = "updateIndicator()" ononline = "updateIndicator()" onoffline = "updateIndicator()" >
< p > 네트워크 상태: < span id = "indicator" > (상태 미확인)</ span >
</ body >
</ html >
registerProtocolHandler()
메서드Navigator/registerProtocolHandler
interface mixin NavigatorContentUtils {
[SecureContext ] undefined registerProtocolHandler (DOMString scheme , USVString url );
[SecureContext ] undefined unregisterProtocolHandler (DOMString scheme , USVString url );
};
window.navigator.registerProtocolHandler(scheme, url)
scheme을 url에 등록합니다. 예를 들어, 온라인 전화 메시징 서비스는 sms:
스킴의 핸들러로 등록될 수 있습니다. 이 경우 사용자가 해당 링크를 클릭하면 해당 웹사이트를 사용할 수 있는 기회가 제공됩니다. [SMS]
url의 문자열 "%s
"는 처리할 콘텐츠의 URL을 넣을 위치를 나타내는 자리 표시자로 사용됩니다.
사용자 에이전트가 등록을 차단하는 경우(예: "http
"와 같은 핸들러로 등록을 시도하는 경우), "SecurityError
" DOMException
예외를 발생시킵니다.
url에 "%s
" 문자열이 누락된 경우, "SyntaxError
" DOMException
예외를 발생시킵니다.
window.navigator.unregisterProtocolHandler(scheme, url)
Navigator/unregisterProtocolHandler
하나의 엔진에서만 지원됨
주어진 인수에 따라 핸들러를 등록 취소합니다.
사용자 에이전트가 등록 취소를 차단하는 경우(예: 잘못된 스킴과 함께 발생하는 경우), "SecurityError
" DOMException
예외를 발생시킵니다.
url에 "%s
" 문자열이 누락된 경우, "SyntaxError
" DOMException
예외를 발생시킵니다.
registerProtocolHandler(scheme,
url)
메서드의 단계는 다음과 같습니다:
scheme, url과 this의 relevant settings object를 사용하여 프로토콜 핸들러 매개변수 정규화를 실행한 결과로 normalizedScheme, normalizedURLString을 설정합니다.
병렬로: normalizedScheme 및 normalizedURLString에 대한 프로토콜 핸들러를 등록합니다. 사용자 에이전트는 설명된 제약 조건 내에서 원하는 대로 할 수 있습니다. 예를 들어, 사용자에게 사이트를 핸들러 목록에 추가하거나 기본값으로 설정하거나 요청을 취소할 수 있는 기회를 제공할 수 있습니다. 사용자 에이전트는 또한 정보를 조용히 수집하고 사용자에게 필요한 경우에만 제공할 수 있습니다.
사용자 에이전트는 사용자가 그러한 등록을 거부했더라도 핸들러를 등록한 사이트를 추적해야 하며, 동일한 요청에 대해 반복적으로 사용자에게 묻지 않아야 합니다.
만약 registerProtocolHandler()
자동화 모드가 this의 relevant global object의 관련
Document
에 대해 "none
"이 아닌 경우, 사용자
에이전트는 먼저 자동화 컨텍스트에 있는지 확인해야 합니다(참조: WebDriver의 보안 고려 사항). 그런 다음 위의 정보 통신 및 사용자
동의 수집을 건너뛰고 registerProtocolHandler()
자동화 모드 값에 따라 다음을 수행해야 합니다:
autoAccept
"
사용자가 등록 세부 정보를 보고 요청을 수락한 것처럼 작동합니다.
autoReject
"
사용자가 등록 세부 정보를 보고 요청을 거부한 것처럼 작동합니다.
사용자 에이전트가 URL inputURL에 대해 이 핸들러를 사용할 때:
inputURL과 함께 사용자 이름을 설정하고 빈 문자열로 설정합니다.
inputURL과 함께 비밀번호를 설정하고 빈 문자열로 설정합니다.
inputURLString을 직렬화한 결과를 설정합니다.
encodedURL을 UTF-8 백분율 인코딩을 수행하여 inputURLString에 대해 구성 요소 백분율 인코딩 세트를 사용한 결과로 설정합니다.
handlerURLString을 normalizedURLString으로 설정합니다.
handlerURLString에서 첫 번째 "%s
" 인스턴스를 encodedURL로 바꿉니다.
handlerURLString을 파싱하여 resultURL을 설정합니다.
사용자가 https://example.com/
사이트를 방문했을 때 다음 호출을 수행한 경우:
navigator. registerProtocolHandler( 'web+soup' , 'soup?url=%s' )
...그리고 나중에 https://www.example.net/
을 방문할 때 다음과 같은 링크를 클릭했다면:
< a href = "web+soup:chicken-kïwi" > Download our Chicken Kïwi soup!</ a >
...그러면 UA는 다음 URL로 이동할 수 있습니다:
https://example.com/soup?url=web+soup:chicken-k%C3%AFwi
이 사이트는 그런 다음 해당 수프를 합성하고 사용자에게 배송하는 등의 작업을 수행할 수 있습니다.
이것은 핸들러가 언제 사용되는지를 정의하지 않습니다. 어느 정도는 문서 간 탐색 처리 모델이 관련된 일부 경우를 정의하지만, 일반적으로 사용자 에이전트는 이 정보를 다른 경우에 스킴을 네이티브 플러그인 또는 도우미 애플리케이션에 전달할지 여부를 고려할 때 사용할 수 있습니다.
unregisterProtocolHandler(scheme,
url)
메서드의 단계는 다음과 같습니다:
scheme, url과 this의 relevant settings object를 사용하여 프로토콜 핸들러 매개변수 정규화를 실행한 결과로 normalizedScheme, normalizedURLString을 설정합니다.
병렬로: normalizedScheme 및 normalizedURLString으로 설명된 핸들러를 등록 취소합니다.
프로토콜 핸들러 매개변수 정규화는 scheme 문자열, url 문자열 및 환경 설정 객체 environment를 받아 다음 단계를 수행합니다:
scheme을 ASCII 소문자로 변환하여 scheme으로 설정합니다.
scheme이 안전 목록에 있는 스킴이 아니거나
"web+
"로 시작하고 하나 이상의 ASCII 소문자로
구성된 문자열이 아닌 경우, "SecurityError
" DOMException
을
발생시킵니다.
이것은 scheme에 콜론이 포함된 경우 ("mailto:
") 발생합니다.
다음 스킴들이 안전 목록에 있는 스킴입니다:
bitcoin
ftp
ftps
geo
im
irc
ircs
magnet
mailto
matrix
mms
news
nntp
openpgp4fpr
sftp
sip
sms
smsto
ssh
tel
urn
webcal
wtai
xmpp
이 목록은 변경될 수 있습니다. 추가되어야 할 스킴이 있는 경우, 피드백을 보내주시기 바랍니다.
url에 "%s
"가 포함되어 있지 않으면 "SyntaxError
" DOMException
을
발생시킵니다.
url을 environment를 기준으로 URL을 인코딩 및 파싱하여 urlRecord를 설정합니다.
urlRecord가 실패하면 "SyntaxError
" DOMException
을
발생시킵니다.
이것은 %s
플레이스홀더가 URL의 호스트 또는 포트에 포함된 경우 강제됩니다.
urlRecord의 scheme이 HTTP(S) 스킴이 아니거나 urlRecord의 출처가 environment의 출처와 동일 출처가 아닌 경우 "SecurityError
" DOMException
을
발생시킵니다.
확인:
urlRecord가 "잠재적으로 신뢰할 수 있는
"인지 여부를 판단하여 잠재적으로 신뢰할 수 있는 URL인지 확인합니다.
프로토콜 핸들러 매개변수 정규화는 보안 컨텍스트 내에서 실행되므로 이는 동일 출처 조건에 의해 암시됩니다.
scheme 및 urlRecord를 반환합니다.
urlRecord의 직렬화는
"%s
" 문자열을 포함하고 있어 유효한 URL 문자열로
정의되지 않습니다.
사용자 정의 스킴 핸들러는 여러 가지 우려를 야기할 수 있으며, 특히 개인정보 보호와 관련된 문제가 발생할 수 있습니다.
모든 웹 사용의 하이재킹. 사용자 에이전트는 정상적인 작동에 중요한 스킴(예: HTTP(S) 스킴)이 타사 사이트를 통해 리라우팅되는 것을 허용하지 않아야 합니다. 이는 사용자의 활동을 쉽게 추적할 수 있게 하며, 심지어 보안 연결에서도 사용자 정보를 수집할 수 있게 합니다.
기본 설정 하이재킹. 사용자 에이전트는 기본 설정을 자동으로 변경하지 않도록 강력히 권장됩니다. 이는 사용자가 예상하지 못한 원격 호스트로 데이터를 전송하게 만들 수 있기 때문입니다. 새로운 핸들러가 스스로 등록되더라도 그러한 사이트가 자동으로 사용되도록 해서는 안 됩니다.
등록 스팸. 사용자 에이전트는 사이트가 대량의 핸들러를 등록하려 할 가능성을 고려해야 합니다. 이는 여러 도메인에서 발생할 수 있으며(예: 서로 다른 도메인에서 리디렉션을
통해 각 도메인마다 web+spam:
핸들러를 등록하는 방식), 유사한 방식은 포르노 사이트에서 수년간 악용되어 왔습니다. 사용자 에이전트는 이러한 악의적인 시도를 우아하게
처리하여 사용자를 보호해야 합니다.
악의적인 핸들러 메타데이터. 사용자 에이전트는 인터페이스에 포함된 문자열에 대한 일반적인 공격으로부터 보호해야 합니다. 예를 들어, 이러한 문자열에 포함된 마크업이나 이스케이프 문자가 실행되지 않도록 하며, 널 바이트가 올바르게 처리되도록 하고, 너무 긴 문자열이 충돌이나 버퍼 오버런을 일으키지 않도록 해야 합니다.
개인정보 유출. 웹 페이지 작성자는 개인 정보로 간주되는 URL 데이터를 사용하여 사용자 정의 스킴 핸들러를 참조할 수 있습니다. 작성자는 사용자가 선택한 핸들러가 조직 내부의 페이지를 가리킨다고 가정하고 민감한 데이터가 타사에 노출되지 않도록 기대할 수 있습니다. 그러나 사용자가 외부 사이트를 가리키는 핸들러를 등록한 경우, 타사에 데이터가 유출될 수 있습니다. 구현자는 특정 서브도메인, 콘텐츠 유형 또는 스킴에서 사용자 정의 핸들러를 비활성화할 수 있도록 허용하는 것을 고려할 수 있습니다.
인터페이스 간섭. 사용자 에이전트는 메서드에 고의적으로 긴 인수가 전달될 경우를 대비해야 합니다. 예를 들어, 노출된 사용자 인터페이스가 "수락" 버튼과 "거부" 버튼으로 구성되어 있고, "수락" 바인딩에 핸들러의 이름이 포함된 경우, 긴 이름이 "거부" 버튼을 화면에서 밀어내지 않도록 하는 것이 중요합니다.
각 문서
에는 registerProtocolHandler()
자동화 모드가 있습니다. 기본값은
"없음
"이지만,
"자동 수락
"
또는 "자동 거부
"로
설정될 수 있습니다.
사용자 에이전트 자동화 및 웹사이트 테스트 목적을 위해 이 표준은 RPH 등록 모드 설정 WebDriver 확장 명령을 정의합니다. 이 명령은 사용자 에이전트가 문서
를 특정 모드에 배치하여 사용자가 등록 확인 프롬프트 대화 상자를 자동으로
수락하거나 거부하도록 시뮬레이션하게 합니다.
HTTP 메서드 | URI 템플릿 |
---|---|
`POST `
| /session/{session id}/custom-handlers/set-mode
|
원격 끝 단계는 다음과 같습니다:
parameters가 JSON 객체가 아닌 경우, WebDriver 오류를 WebDriver 오류 코드 잘못된 인수와 함께 반환합니다.
mode를 속성
가져오기라는 이름의 "mode
" 속성으로 설정합니다.
mode가 "자동 수락
",
"자동 거부
",
또는 "없음
"이
아닌 경우, WebDriver 오류를 WebDriver
오류 코드 잘못된
인수와 함께 반환합니다.
document를 현재 브라우징 컨텍스트의 활성 문서로 설정합니다.
document의 registerProtocolHandler()
자동화 모드를 mode로 설정합니다.
데이터가 null인 성공을 반환합니다.
interface mixin NavigatorCookies {
readonly attribute boolean cookieEnabled ;
};
window.navigator.cookieEnabled
모든 현재 엔진에서 지원됩니다.
쿠키 설정이 무시될 경우 false를 반환하고, 그렇지 않으면 true를 반환합니다.
cookieEnabled
속성은 사용자 에이전트가 HTTP 상태 관리 메커니즘에 따라 쿠키를
처리하려고 시도할 경우 true를 반환해야 하며, 쿠키 변경 요청을 무시할 경우 false를 반환해야 합니다. [COOKIES]
window.navigator.pdfViewerEnabled
사용자 에이전트가 PDF 파일을 탐색할 때 인라인으로 볼 수 있는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다. 후자의 경우 PDF 파일은 외부 소프트웨어에서 처리됩니다.
interface mixin NavigatorPlugins {
[SameObject ] readonly attribute PluginArray plugins ;
[SameObject ] readonly attribute MimeTypeArray mimeTypes ;
boolean javaEnabled ();
readonly attribute boolean pdfViewerEnabled ;
};
[Exposed =Window ,
LegacyUnenumerableNamedProperties ]
interface PluginArray {
undefined refresh ();
readonly attribute unsigned long length ;
getter Plugin ? item (unsigned long index );
getter Plugin ? namedItem (DOMString name );
};
[Exposed =Window ,
LegacyUnenumerableNamedProperties ]
interface MimeTypeArray {
readonly attribute unsigned long length ;
getter MimeType ? item (unsigned long index );
getter MimeType ? namedItem (DOMString name );
};
[Exposed =Window ,
LegacyUnenumerableNamedProperties ]
interface Plugin {
readonly attribute DOMString name ;
readonly attribute DOMString description ;
readonly attribute DOMString filename ;
readonly attribute unsigned long length ;
getter MimeType ? item (unsigned long index );
getter MimeType ? namedItem (DOMString name );
};
[Exposed =Window ]
interface MimeType {
readonly attribute DOMString type ;
readonly attribute DOMString description ;
readonly attribute DOMString suffixes ;
readonly attribute Plugin enabledPlugin ;
};
현재 PDF 뷰어 지원을 감지하는 방법은 navigator.pdfViewerEnabled
를
사용하는 것입니다. 하지만 역사적인 이유로, 동일한 기능을 제공하는 복잡하고 얽혀 있는 여러 인터페이스들이 있으며, 이러한 인터페이스들은 레거시 코드에서 사용되고 있습니다. 이 섹션에서는 간단한 현대
버전과 복잡한 역사적 버전을 모두 명시합니다.
각 사용자 에이전트에는 PDF 뷰어 지원이라는 불리언 값이 있으며, 이 값은 구현 정의에 따라 결정됩니다(사용자 환경 설정에 따라 다를 수 있습니다).
이 값은 탐색 처리 모델에도 영향을 미칩니다.
각 Window
객체는 PDF
뷰어 플러그인 객체 목록을 가지고 있습니다. 사용자 에이전트의 PDF 뷰어 지원이 false인 경우, 이 목록은 비어 있습니다. 그렇지 않은 경우, 이 목록에는 다섯 개의
Plugin
객체가 포함됩니다. 해당 객체들의 이름은 다음과 같습니다:
PDF Viewer
"
Chrome PDF Viewer
"
Chromium PDF Viewer
"
Microsoft Edge PDF Viewer
"
WebKit built-in PDF
"
위 목록의 값들은 PDF 뷰어 플러그인 이름 목록을 형성합니다.
이 이름들은 웹사이트들이 역사적으로 검색해온 것에 근거하여 선택되었으며, 따라서 기존 콘텐츠와의 호환성을 유지하기 위해 사용자 에이전트가 노출해야 하는 것들입니다. 이들은 알파벳순으로
정렬되어 있습니다. "PDF Viewer
" 이름은 목록의 0번째 위치에 삽입되어 enabledPlugin
getter가 일반 플러그인 이름을 가리킬 수 있도록 하였습니다.
각 Window
객체는 PDF 뷰어 MIME 타입 객체 목록을 가지고 있습니다. 사용자 에이전트의 PDF 뷰어 지원이 false인 경우, 이 목록은 비어
있습니다. 그렇지 않은 경우, 이 목록에는 두 개의 MimeType
객체가
포함되며, 해당 객체들의 타입은 다음과 같습니다:
application/pdf
"
text/pdf
"
위 목록의 값들은 PDF 뷰어 MIME 타입 목록을 형성합니다.
각 NavigatorPlugins
객체는 플러그인 배열을 가지고 있으며, 이는 새로운 PluginArray
입니다. 또한 MIME 타입 배열도 가지고 있으며, 이는 새로운 MimeTypeArray
입니다.
NavigatorPlugins
믹스인의 plugins
getter 단계는 this의 플러그인 배열을 반환하는
것입니다.
NavigatorPlugins
믹스인의 mimeTypes
getter 단계는 this의 MIME 타입 배열을 반환하는 것입니다.
NavigatorPlugins
믹스인의 javaEnabled()
메서드 단계는 false를 반환하는 것입니다.
모든 현재 엔진에서 지원됩니다.
NavigatorPlugins
믹스인의 pdfViewerEnabled
getter 단계는 사용자 에이전트의 PDF 뷰어 지원을 반환하는 것입니다.
PluginArray
인터페이스는 이름 지정 속성을
지원합니다. 사용자 에이전트의 PDF 뷰어
지원이 true인 경우, 해당 속성들은 PDF 뷰어 플러그인 이름입니다. 그렇지 않은 경우, 빈 목록입니다.
PluginArray
인터페이스의 namedItem(name)
메서드 단계는 다음과 같습니다:
각 Plugin
plugin에 대해 this의 해당 글로벌 객체의 PDF 뷰어 플러그인 객체에서 plugin의 이름이 name과 일치하는
경우, plugin을 반환합니다.
null을 반환합니다.
PluginArray
인터페이스는 인덱스 속성을 지원합니다. 지원되는 속성 인덱스는 인덱스이며, 이는 this의 해당 글로벌 객체의 PDF 뷰어 플러그인 객체입니다.
PluginArray
인터페이스의 item(index)
메서드 단계는 다음과 같습니다:
plugin을 this의 해당 글로벌 객체의 PDF 뷰어 플러그인 객체로 설정합니다.
index가 plugin의 크기보다 작으면, plugin[index]를 반환합니다.
null을 반환합니다.
PluginArray
인터페이스의 length
getter
단계는 this의 해당 글로벌 객체의 PDF 뷰어 플러그인 객체의 크기를 반환하는 것입니다.
PluginArray
인터페이스의 refresh()
메서드
단계는 아무 것도 하지 않는 것입니다.
MimeTypeArray
인터페이스는 이름 지정 속성을
지원합니다. 사용자 에이전트의 PDF 뷰어
지원이 true인 경우, 해당 속성들은 PDF 뷰어
MIME 타입입니다. 그렇지 않은 경우, 빈 목록입니다.
MimeTypeArray
인터페이스의 namedItem(name)
메서드 단계는 다음과 같습니다:
각 MimeType
mimeType에 대해 this의 해당 글로벌 객체의 PDF 뷰어 MIME
타입 객체에서 mimeType의 타입이 name과 일치하는 경우,
mimeType을 반환합니다.
null을 반환합니다.
MimeTypeArray
인터페이스는 인덱스 속성을 지원합니다. 지원되는 속성 인덱스는 인덱스이며, 이는 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입
객체입니다.
MimeTypeArray
인터페이스의 item(index)
메서드 단계는 다음과 같습니다:
mimeTypes을 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입 객체로 설정합니다.
index가 mimeTypes의 크기보다 작으면, mimeTypes[index]를 반환합니다.
null을 반환합니다.
MimeTypeArray
인터페이스의 length
getter 단계는 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입 객체의 크기를 반환하는 것입니다.
각 Plugin
객체에는 이름이 있으며, 이 객체가 생성될 때 설정됩니다.
Plugin
인터페이스의 name
getter 단계는 this의 이름을 반환하는 것입니다.
Plugin
인터페이스의 description
getter 단계는
"Portable Document Format
"을 반환하는 것입니다.
Plugin
인터페이스의 filename
getter 단계는
"internal-pdf-viewer
"를 반환하는 것입니다.
Plugin
인터페이스는 이름 지정 속성을
지원합니다. 사용자 에이전트의 PDF 뷰어
지원이 true인 경우, 해당 속성들은 PDF
뷰어 MIME 타입입니다. 그렇지 않은 경우, 빈 목록입니다.
Plugin
인터페이스의 namedItem(name)
메서드 단계는 다음과 같습니다:
각 MimeType
mimeType에 대해 this의 해당 글로벌 객체의 PDF 뷰어 MIME
타입 객체에서 mimeType의 타입이 name과 일치하는 경우,
mimeType을 반환합니다.
null을 반환합니다.
Plugin
인터페이스는 인덱스 속성을 지원합니다. 지원되는 속성 인덱스는 인덱스이며, 이는 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입
객체입니다.
Plugin
인터페이스의 item(index)
메서드 단계는 다음과 같습니다:
mimeTypes을 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입 객체로 설정합니다.
index가 mimeType의 크기보다 작으면, mimeTypes[index]를 반환합니다.
null을 반환합니다.
Plugin
인터페이스의 length
getter 단계는 this의 해당 글로벌 객체의 PDF 뷰어 MIME 타입
객체의 크기를 반환하는 것입니다.
각 MimeType
객체에는 타입이 있으며, 이 객체가 생성될 때 설정됩니다.
MimeType
인터페이스의 type
getter 단계는 this의 타입을 반환하는 것입니다.
MimeType
인터페이스의 description
getter 단계는
"Portable Document Format
"을 반환하는 것입니다.
MimeType
인터페이스의 suffixes
getter 단계는 "pdf
"를
반환하는 것입니다.
MimeType
인터페이스의 enabledPlugin
getter 단계는 this의 해당 글로벌 객체의 PDF 뷰어 플러그인 객체[0] (즉,
일반적인 "PDF Viewer
" 객체)을 반환하는 것입니다.
모든 현재 엔진에서 지원됨.
[Exposed =(Window ,Worker ), Serializable , Transferable ]
interface ImageBitmap {
readonly attribute unsigned long width ;
readonly attribute unsigned long height ;
undefined close ();
};
typedef (CanvasImageSource or
Blob or
ImageData ) ImageBitmapSource ;
enum ImageOrientation { " from-image " , " flipY " };
enum PremultiplyAlpha { " none " , " premultiply " , " default " };
enum ColorSpaceConversion { " none " , " default " };
enum ResizeQuality { " pixelated " , " low " , " medium " , " high " };
dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "from-image";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange ] unsigned long resizeWidth ;
[EnforceRange ] unsigned long resizeHeight ;
ResizeQuality resizeQuality = "low";
};
ImageBitmap
객체는 캔버스에 비트맵 이미지를 지연 없이 그릴 수 있는 객체를
나타냅니다.
이 지연이 과도한지 여부에 대한 정확한 판단은 구현자에게 맡겨지지만, 일반적으로 비트맵을 사용하는 데 네트워크 I/O 또는 로컬 디스크 I/O가 필요하다면 그 지연은 과도한 것으로 간주될 가능성이 큽니다. 반면, GPU나 시스템 RAM에서의 차단 읽기만 필요하다면 그 지연은 허용 가능한 것으로 간주될 것입니다.
promise = self.createImageBitmap(image [, options ])
모든 현재 엔진에서 지원됨.
promise = self.createImageBitmap(image, sx, sy, sw, sh [, options ])
image를 받아들이며, 이 image는 img
요소, SVG
image
요소, video
요소, canvas
요소, Blob
객체, ImageData
객체,
또는 또 다른 ImageBitmap
객체일 수 있으며, 새로 생성된
ImageBitmap
이 생성되면 해결되는 promise를 반환합니다.
만약 제공된 image 데이터가 실제로 이미지가 아니어서 ImageBitmap
객체를 생성할 수 없는 경우, promise는 대신
거부됩니다.
만약 sx, sy, sw, sh 인수가 제공된다면, 소스 이미지는 주어진 픽셀로 잘려지며, 원본에서 누락된 픽셀은 투명한 검정색으로 대체됩니다. 이 좌표는 소스 이미지의 픽셀 좌표 공간에 있는 것이며, CSS 픽셀에 있는 것이 아닙니다.
options이 제공되면, ImageBitmap
객체의
비트맵 데이터가 options에 따라 수정됩니다. 예를 들어, premultiplyAlpha
옵션이 "premultiply
"로
설정된 경우, 비트맵
데이터의 색상 채널이 알파 채널로
사전 곱셈됩니다.
소스 이미지가 유효한 상태가 아닌 경우, 예를 들어 img
요소가 성공적으로 로드되지 않았거나, [[Detached]] 내부 슬롯 값이 true인 ImageBitmap
객체, ImageData
객체의 data
속성 값의
[[ViewedArrayBuffer]] 내부 슬롯이 분리되었거나, 데이터를 비트맵 이미지로 해석할 수 없는 Blob
인
경우, promise는 "InvalidStateError" DOMException
으로
거부됩니다.
스크립트가 소스 이미지의 데이터에 접근할 수 없는 경우, 예를 들어 CORS-크로스
오리진인 video
또는 다른 기원의 워커에서 스크립트가 그리는 canvas
인 경우, promise는 "SecurityError" DOMException
으로
거부됩니다.
imageBitmap.close()
모든 현재 엔진에서 지원됨.
imageBitmap의 기본 비트맵 데이터를 해제합니다.
imageBitmap.width
모든 현재 엔진에서 지원됨.
imageBitmap.height
모든 현재 엔진에서 지원됨.
ImageBitmap
객체의 [[Detached]] 내부 슬롯 값이 false인 경우, 항상 너비와 높이를 가진 관련 비트맵 데이터가 있습니다. 그러나 이 데이터가 손상될 가능성도 있습니다. ImageBitmap
객체의 미디어 데이터를 오류 없이 디코딩할 수 있는 경우, 이를
완전히 디코딩 가능하다고 합니다.
ImageBitmap
객체의 비트맵에는 origin-clean 플래그가 있으며, 이 플래그는
비트맵이 다른 기원의 콘텐츠로 인해 오염되었는지 여부를 나타냅니다. 이 플래그는 처음에는 true로
설정되며, createImageBitmap()
의
단계에 의해 false로 변경될 수 있습니다.
ImageBitmap
객체는 직렬화 가능한 객체이며 전송 가능한 객체입니다.
그들의 직렬화 단계는 value와 serialized를 주어진 상태에서 다음과 같이 실행됩니다:
value의 origin-clean 플래그가 설정되지 않은 경우, "DataCloneError
" DOMException
을
던집니다.
serialized.[[BitmapData]]를 value의 비트맵 데이터의 복사본으로 설정합니다.
그들의 역직렬화 단계는 serialized, value 및 targetRealm을 주어진 상태에서 다음과 같이 실행됩니다:
value의 비트맵 데이터를 serialized.[[BitmapData]]로 설정합니다.
그들의 전송 단계는 value와 dataHolder를 주어진 상태에서 다음과 같이 실행됩니다:
value의 origin-clean 플래그가 설정되지 않은 경우, "DataCloneError
" DOMException
을
던집니다.
dataHolder.[[BitmapData]]를 value의 비트맵 데이터로 설정합니다.
value의 비트맵 데이터를 설정 해제합니다.
그들의 전송 수신 단계는 dataHolder와 value를 주어진 상태에서 다음과 같이 실행됩니다:
value의 비트맵 데이터를 dataHolder.[[BitmapData]]로 설정합니다.
createImageBitmap(image, options)
및
createImageBitmap(image, sx, sy, sw, sh, options)
메서드가 호출될 때, 다음 단계를 실행해야 합니다:
sw 또는 sh 중 어느 하나가 주어졌고 0인 경우, promise를 RangeError
로
거부하여 반환합니다.
options의 resizeWidth
또는 options의 resizeHeight
가 존재하며 0인 경우, promise를 "InvalidStateError
" DOMException
으로
거부하여 반환합니다.
이미지 인수의 사용 가능성을 확인합니다. 이 확인 중에 예외가 발생하거나
불량으로 반환되면 promise를 "InvalidStateError
" DOMException
으로
거부하여 반환합니다.
p를 새 promise로 설정합니다.
imageBitmap을 새 ImageBitmap
객체로 설정합니다.
image에 따라 다음을 실행합니다:
img
image
image의 미디어 데이터에 자연 치수가 없고 (예: 콘텐츠 크기가 지정되지 않은 벡터 그래픽)
options의 resizeWidth
또는 options의 resizeHeight
가
존재하지 않는 경우, promise를 "InvalidStateError
" DOMException
으로
거부하여 반환합니다.
image의 미디어 데이터에 자연 치수가 없는 경우 (예: 콘텐츠 크기가 지정되지 않은 벡터 그래픽),
resizeWidth
및 resizeHeight
옵션에 지정된 크기로 렌더링해야 합니다.
imageBitmap의 비트맵 데이터를 image의 미디어 데이터의 복사본으로 설정하고, 소스 사각형으로 자르고 서식을 적용합니다. 이것이 애니메이션 이미지인 경우, imageBitmap의 비트맵 데이터는 애니메이션이 지원되지 않거나 비활성화된 경우 사용하도록 정의된 기본 이미지만, 또는 그런 이미지가 없는 경우 애니메이션의 첫 프레임에서만 가져와야 합니다.
image가 원본 청정 상태가 아닌 경우, imageBitmap의 비트맵의 origin-clean 플래그를 false로 설정합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
video
image의 networkState
속성이 NETWORK_EMPTY
인
경우, promise를 "InvalidStateError
" DOMException
으로
거부하여 반환합니다.
imageBitmap의 비트맵 데이터를 현재 재생 위치에 있는 프레임의 복사본으로, 미디어 리소스의 자연 너비 및 자연 높이 (즉, 종횡비 조정이 적용된 후)에서 소스 사각형으로 자르고 서식을 적용합니다.
image가 원본 청정 상태가 아닌 경우, imageBitmap의 비트맵의 origin-clean 플래그를 false로 설정합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
canvas
imageBitmap의 비트맵 데이터를 image의 비트맵 데이터의 복사본으로, 소스 사각형으로 자르고 서식을 적용하여 설정합니다.
imageBitmap의 비트맵의 origin-clean 플래그를 image의 비트맵의 origin-clean 플래그와 동일한 값으로 설정합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
Blob
다음 단계를 병렬로 실행합니다:
image의 데이터를 읽은 결과를 imageData로 설정합니다. 객체를 읽는 동안 오류가 발생하면 p를 "InvalidStateError
" DOMException
으로
거부하고 이 단계를 중단합니다.
이미지 스니핑 규칙을 적용하여
imageData의 파일 형식을 결정하고, image의 MIME 유형 (예: image의 type
속성에 의해 지정된 공식 유형)을 제공합니다.
imageData가 지원되는 이미지 파일 형식이 아니거나 (예: 이미지가 전혀 아님), imageData가 치명적으로
손상되어 이미지 크기를 얻을 수 없는 경우 (예: 자연 크기가 없는 벡터 그래픽), p를 "InvalidStateError
" DOMException
으로
거부하고 이 단계를 중단합니다.
imageBitmap의 비트맵 데이터를 imageData로 설정하고, 소스 사각형으로 자르고 서식을 적용합니다. 이것이 애니메이션 이미지인 경우, imageBitmap의 비트맵 데이터는 애니메이션이 지원되지 않거나 비활성화된 경우 사용하도록 정의된 기본 이미지만, 또는 그런 이미지가 없는 경우 애니메이션의 첫 프레임에서만 가져와야 합니다.
p를 imageBitmap으로 해결합니다.
ImageData
image의 data
속성 값의
[[ViewedArrayBuffer]] 내부 슬롯을 buffer로 설정합니다.
IsDetachedBuffer(buffer)가 true인 경우,
promise를 "InvalidStateError
" DOMException
으로
거부하여 반환합니다.
imageBitmap의 비트맵 데이터를 image의 이미지 데이터로 설정하고, 소스 사각형으로 자르고 서식을 적용합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
ImageBitmap
imageBitmap의 비트맵 데이터를 image의 비트맵 데이터의 복사본으로, 소스 사각형으로 자르고 서식을 적용하여 설정합니다.
imageBitmap의 비트맵의 origin-clean 플래그를 image의 비트맵의 origin-clean 플래그와 동일한 값으로 설정합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
VideoFrame
imageBitmap의 비트맵 데이터를 image의 표시된 픽셀 데이터의 복사본으로, 소스 사각형으로 자르고 서식을 적용하여 설정합니다.
이 단계를 병렬로 실행합니다:
p를 imageBitmap으로 해결합니다.
p를 반환합니다.
위의 단계에서 사용자 에이전트가 소스 사각형으로 비트맵 데이터를 자르고 서식을 적용해야 한다고 요구할 때, 사용자 에이전트는 다음 단계를 실행해야 합니다:
input을 변환 중인 비트맵 데이터로 설정합니다.
sx, sy, sw, sh가 지정된 경우, sourceRectangle을 네 점 (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh)의 사각형으로 설정합니다. 그렇지 않은 경우, sourceRectangle을 네 점 (0, 0), (input의 너비, 0), (input의 너비, input의 높이), (0, input의 높이)의 사각형으로 설정합니다.
sw 또는 sh가 음수인 경우, 이 사각형의 좌상단 모서리는 (sx, sy) 점의 왼쪽이나 위에 위치하게 됩니다.
outputWidth를 다음과 같이 결정합니다:
resizeWidth
멤버가 지정된 경우resizeWidth
멤버의 값resizeWidth
멤버가 지정되지 않았지만 resizeHeight
멤버가 지정된 경우resizeHeight
멤버의 값을 곱한 후 sourceRectangle의 높이로 나누어 가장 가까운 정수로 올림resizeWidth
나
resizeHeight
가
지정되지 않은 경우
outputHeight를 다음과 같이 결정합니다:
resizeHeight
멤버가 지정된 경우resizeHeight
멤버의 값resizeHeight
멤버가 지정되지 않았지만 resizeWidth
멤버가 지정된 경우resizeWidth
멤버의 값을 곱한 후 sourceRectangle의 너비로 나누어 가장 가까운 정수로 올림resizeWidth
나
resizeHeight
가
지정되지 않은 경우
input을 투명한 검은색 그리드 평면에 배치합니다. 이 평면의 원점에서 좌상단 모서리가 위치하도록 x-좌표는 오른쪽으로 증가하고 y-좌표는 아래쪽으로 증가하며, input 이미지 데이터의 각 픽셀이 평면의 그리드 셀을 차지합니다.
output을 sourceRectangle이 표시하는 평면의 사각형으로 설정합니다.
output을 outputWidth와 outputHeight으로 지정된 크기로 확장합니다. 사용자 에이전트는 확장 알고리즘을
선택할 때 resizeQuality
옵션의 값을 사용해야 합니다.
옵션의 imageOrientation
멤버의 값이 "flipY
"인 경우, output을 수직으로 뒤집어야 하며, 소스의 이미지 방향
메타데이터(EXIF 메타데이터 등)를 무시해야 합니다.
값이 "from-image
"인 경우, 추가 작업이 필요하지 않습니다.
이전에 "none
"이라는 열거형 값이
있었습니다. 이는 "from-image
"로
이름이 변경되었습니다. 앞으로 "none
"이
다른 의미로 다시 추가될 것입니다.
image이 img
요소 또는 Blob
객체인 경우, val을 옵션의 colorSpaceConversion
멤버의 값으로 설정한 후, 다음 하위 단계를 실행합니다:
val이 "default
"인 경우, 색상 공간 변환 동작은 구현에 따라 달라지며, 캔버스에
이미지를 그릴 때 구현이 사용하는 기본 색상 공간에 따라 선택해야 합니다.
val이 "none
"인 경우, output은 색상 공간 변환 없이 디코딩되어야
합니다. 즉, 이미지 디코딩 알고리즘은 소스 데이터에 포함된 색상 프로필 메타데이터와 디스플레이 장치 색상 프로필을 무시해야 합니다.
val을 옵션의 premultiplyAlpha
멤버의 값으로 설정한 후, 다음 하위 단계를 실행합니다:
val이 "default
"인 경우, 알파 프리멀티플리케이션 동작은 구현에 따라 달라지며, 캔버스에
이미지를 그릴 때 최적이라고 구현에서 판단하는 대로 선택해야 합니다.
val이 "premultiply
"인 경우, 알파에 의해 프리멀티플리케이션되지 않은
output은 색상 성분이 알파에 의해 곱해져야 하며, 이미 알파에 의해 프리멀티플리케이션된 경우 변경되지 않습니다.
val이 "none
"인 경우, 알파에 의해 프리멀티플리케이션되지 않은
output은 변경되지 않고, 이미 프리멀티플리케이션된 경우 색상 성분이 알파로 나누어져야 합니다.
output을 반환합니다.
close()
메서드 단계는
다음과 같습니다:
this의 [[Detached]] 내부 슬롯 값을 true로 설정합니다.
width
getter
단계는 다음과 같습니다:
만약 this의 [[Detached]] 내부 슬롯 값이 true라면 0을 반환합니다.
height
getter
단계는 다음과 같습니다:
만약 this의 [[Detached]] 내부 슬롯 값이 true라면 0을 반환합니다.
ResizeQuality
열거형은 이미지 확대/축소 시 사용할 보간 품질에 대한
선호도를 표현하는 데 사용됩니다.
"pixelated
" 값은 이미지가 원래의 픽셀화를 최대한 보존하도록 확대/축소하는 것을 선호하며, 목표 크기가
원본의 배수가 아닌 경우 왜곡을 피하기 위해 필요한 최소한의 스무딩을 적용하는 것을 의미합니다.
"pixelated
"를
구현하려면 각 축에 대해 독립적으로, 목표 크기와 가장 가까운 정수 배수를 구하고 그 크기로 최근접 이웃(nearest neighbor) 보간법을 사용해 먼저 확대한 다음, 목표 크기로 나머지를
이중선형 보간법(bilinear interpolation)을 사용해 확대합니다.
"low
" 값은 낮은
수준의 이미지 보간 품질을 선호함을 나타냅니다. 낮은 품질의 이미지 보간은 더 높은 설정보다 계산적으로 더 효율적일 수 있습니다.
"medium
"
값은 중간 수준의 이미지 보간 품질을 선호함을 나타냅니다.
"high
" 값은
높은 수준의 이미지 보간 품질을 선호함을 나타냅니다. 높은 품질의 이미지 보간은 더 낮은 설정보다 계산적으로 더 비용이 많이 들 수 있습니다.
이중선형 보간은 상대적으로 빠르고 낮은 품질의 이미지 스무딩 알고리즘의 예입니다. 바이큐빅(bicubic) 또는 란초스(Lanczos) 보간법은 더 높은 품질의 출력을 생성하는 이미지
확대/축소 알고리즘의 예입니다. 이 사양은 "pixelated
"을 제외한 특정
보간 알고리즘 사용을 강제하지 않습니다.
이 API를 사용하여 스프라이트 시트를 미리 자르고 준비할 수 있습니다:
var sprites = {};
function loadMySprites() {
var image = new Image();
image. src = 'mysprites.png' ;
var resolver;
var promise = new Promise( function ( arg) { resolver = arg });
image. onload = function () {
resolver( Promise. all([
createImageBitmap( image, 0 , 0 , 40 , 40 ). then( function ( image) { sprites. person = image }),
createImageBitmap( image, 40 , 0 , 40 , 40 ). then( function ( image) { sprites. grass = image }),
createImageBitmap( image, 80 , 0 , 40 , 40 ). then( function ( image) { sprites. tree = image }),
createImageBitmap( image, 0 , 40 , 40 , 40 ). then( function ( image) { sprites. hut = image }),
createImageBitmap( image, 40 , 40 , 40 , 40 ). then( function ( image) { sprites. apple = image }),
createImageBitmap( image, 80 , 40 , 40 , 40 ). then( function ( image) { sprites. snake = image })
]));
};
return promise;
}
function runDemo() {
var canvas = document. querySelector( 'canvas#demo' );
var context = canvas. getContext( '2d' );
context. drawImage( sprites. tree, 30 , 10 );
context. drawImage( sprites. snake, 70 , 10 );
}
loadMySprites(). then( runDemo);
일부 객체에는 AnimationFrameProvider
인터페이스 믹스인이 포함됩니다.
callback FrameRequestCallback = undefined (DOMHighResTimeStamp time );
interface mixin AnimationFrameProvider {
unsigned long requestAnimationFrame (FrameRequestCallback callback );
undefined cancelAnimationFrame (unsigned long handle );
};
Window includes AnimationFrameProvider ;
DedicatedWorkerGlobalScope includes AnimationFrameProvider ;
각 AnimationFrameProvider
객체에는 제공자의 내부 상태를 저장하는 대상 객체도 있습니다. 이는 다음과 같이 정의됩니다:
AnimationFrameProvider
가
Window
라면
Window
의 관련 Document
AnimationFrameProvider
가
DedicatedWorkerGlobalScope
라면
DedicatedWorkerGlobalScope
각 대상 객체는 애니메이션 프레임 콜백 맵을 가지고 있으며, 이는 처음에는 비어 있어야 하는 순서가 있는 맵과 처음에는 0으로 설정되어야 하는 애니메이션 프레임 콜백 식별자로 구성됩니다.
AnimationFrameProvider
provider는 다음 중 하나라도 참이라면 지원되는 것으로 간주됩니다:
provider가 Window
인 경우
provider의 소유자 세트에 있는 DedicatedWorkerGlobalScope
객체가 지원되는 경우
모든 현재 엔진에서 지원됩니다.
requestAnimationFrame(callback)
메서드 단계는 다음과 같습니다:
만약 this가
지원되지 않는다면, "NotSupportedError
" DOMException
을
발생시킵니다.
target의 애니메이션 프레임 콜백 식별자를 1씩 증가시키고, handle을 그 결과로 설정합니다.
callbacks을 target의 애니메이션 프레임 콜백 맵으로 설정합니다.
설정 callbacks[handle]을 callback으로 합니다.
handle을 반환합니다.
모든 현재 엔진에서 지원됩니다.
cancelAnimationFrame(handle)
메서드 단계는 다음과 같습니다:
만약 this가
지원되지 않는다면, "NotSupportedError
" DOMException
을
발생시킵니다.
callbacks을 this의 대상 객체의 애니메이션 프레임 콜백 맵으로 설정합니다.
제거 callbacks[handle].
대상 객체 target의 애니메이션 프레임 콜백을 now라는 타임스탬프와 함께 실행하려면:
callbacks을 target의 애니메이션 프레임 콜백 맵으로 설정합니다.
callbackHandles을 애니메이션 프레임 콜백 맵의 키를 가져와서 설정합니다.
각 handle이 callbackHandles에 포함된 경우, handle이 callbacks에 존재하는지 확인합니다:
워커 안에서 requestAnimationFrame()
은
OffscreenCanvas
와 함께 사용할 수
있습니다. 우선, 문서에서 워커로 제어권을 전송합니다:
const offscreenCanvas = document. getElementById( "c" ). transferControlToOffscreen();
worker. postMessage( offscreenCanvas, [ offscreenCanvas]);
이후, 워커 안에서 다음 코드를 사용해 왼쪽에서 오른쪽으로 움직이는 사각형을 그릴 수 있습니다:
let ctx, pos = 0 ;
function draw( dt) {
ctx. clearRect( 0 , 0 , 100 , 100 );
ctx. fillRect( pos, 0 , 10 , 10 );
pos += 10 * dt;
requestAnimationFrame( draw);
}
self. onmessage = function ( ev) {
const transferredCanvas = ev. data;
ctx = transferredCanvas. getContext( "2d" );
draw();
};
WebSocket
인터페이스는 여기에 정의되어 있었습니다. 현재는 WebSockets에 정의되어 있습니다. [WEBSOCKETS]
MessageEvent
인터페이스현재 모든 엔진에서 지원됩니다.
서버-발신 이벤트의 메시지, 문서 간 메시지, 채널 메시지, 브로드캐스트 채널은 MessageEvent
인터페이스를 사용하여 메시지
이벤트를 처리합니다: [WEBSOCKETS]
[Exposed =(Window ,Worker ,AudioWorklet )]
interface MessageEvent : Event {
constructor (DOMString type , optional MessageEventInit eventInitDict = {});
readonly attribute any data ;
readonly attribute USVString origin ;
readonly attribute DOMString lastEventId ;
readonly attribute MessageEventSource ? source ;
readonly attribute FrozenArray <MessagePort > ports ;
undefined initMessageEvent (DOMString type , optional boolean bubbles = false , optional boolean cancelable = false , optional any data = null , optional USVString origin = "", optional DOMString lastEventId = "", optional MessageEventSource ? source = null , optional sequence <MessagePort > ports = []);
};
dictionary MessageEventInit : EventInit {
any data = null ;
USVString origin = "";
DOMString lastEventId = "";
MessageEventSource ? source = null ;
sequence <MessagePort > ports = [];
};
typedef (WindowProxy or MessagePort or ServiceWorker ) MessageEventSource ;
event.data
현재 모든 엔진에서 지원됩니다.
메시지의 데이터를 반환합니다.
event.origin
현재 모든 엔진에서 지원됩니다.
event.lastEventId
현재 모든 엔진에서 지원됩니다.
마지막 이벤트 ID 문자열을 반환합니다. 서버-발신 이벤트의 경우에 사용됩니다.
event.source
현재 모든 엔진에서 지원됩니다.
메시지 송신자의 WindowProxy
객체를 반환합니다. 문서 간 메시지(cross-document
messaging), 연결 이벤트(connect)에서 MessagePort
가 첨부될 때,
SharedWorkerGlobalScope
객체에서 발생합니다.
event.ports
현재 모든 엔진에서 지원됩니다.
메시지와 함께 전송된 MessagePort
배열을 반환합니다. 문서 간 메시지(cross-document
messaging)와 채널 메시지(channel messaging)의 경우에 사용됩니다.
data
속성은 초기화된
값을 반환해야 하며, 이는 전송된 메시지를 나타냅니다.
origin
속성은
초기화된 값을 반환해야 하며, 이는 서버-발신 이벤트
및 문서 간 메시지에서 메시지를 보낸 문서의 출처를
나타냅니다(일반적으로 문서의 스킴, 호스트명, 포트를 나타내지만, 경로나 프래그먼트는 포함되지
않습니다).
lastEventId
속성은 초기화된 값을 반환해야 하며, 이는 서버-발신 이벤트에서 이벤트 소스의 마지막 이벤트 ID 문자열을 나타냅니다.
source
속성은
초기화된 값을 반환해야 하며, 이는 문서 간 메시지에서 메시지가 발생한
WindowProxy
객체의 탐색 문맥을 나타냅니다. 또한, 공유 작업자가 사용하는 연결
이벤트(connect
)에서
새롭게 연결된 MessagePort
를 나타냅니다.
ports
속성은
초기화된 값을 반환해야 하며, 이는 문서 간 메시지 및 채널 메시지에서 전송되는 MessagePort
배열을 나타냅니다.
initMessageEvent(type, bubbles, cancelable, data, origin, lastEventId, source, ports)
메서드는 유사한 이름의 initEvent()
메서드와 유사하게 이벤트를 초기화해야 합니다. [DOM]
여러 API(WebSocket
,
EventSource
등)는 MessageEvent
인터페이스를 message
이벤트에 사용하면서도 MessagePort
API는 사용하지 않습니다.
현재 모든 엔진에서 지원됩니다.
이 섹션은 규범적이지 않습니다.
서버가 HTTP를 통해 또는 전용 서버-푸시 프로토콜을 사용하여 웹 페이지에 데이터를 푸시할 수 있도록 하기 위해, 이 명세서는 EventSource
인터페이스를 도입합니다.
이 API를 사용하는 것은 EventSource
객체를
생성하고 이벤트 리스너를 등록하는 것으로 이루어집니다.
var source = new EventSource( 'updates.cgi' );
source. onmessage = function ( event) {
alert( event. data);
};
서버 측에서는 스크립트("이 경우 updates.cgi
")가 text/event-stream
MIME
유형으로 다음 형식으로 메시지를 전송합니다:
data: 이 첫 번째 메시지입니다. data: 이 두 번째 메시지입니다. data: 두 줄로 되어 있습니다. data: 이 세 번째 메시지입니다.
저자는 다른 이벤트 유형을 사용하여 이벤트를 구분할 수 있습니다. 여기에는 "add"와 "remove"라는 두 가지 이벤트 유형이 포함된 스트림이 있습니다:
event: add data: 73857293 event: remove data: 2153 event: add data: 113411
이러한 스트림을 처리하는 스크립트는 다음과 같습니다(addHandler
와 removeHandler
는 이벤트를 인수로 받는 함수입니다):
var source = new EventSource( 'updates.cgi' );
source. addEventListener( 'add' , addHandler, false );
source. addEventListener( 'remove' , removeHandler, false );
기본 이벤트 유형은 "message"입니다.
이벤트 스트림은 항상 UTF-8로 디코딩됩니다. 다른 문자 인코딩을 지정할 방법은 없습니다.
이벤트 스트림 요청은 일반적인 HTTP 요청과 마찬가지로 HTTP 301 및 307 리디렉션을 사용하여 리디렉션될 수 있습니다. 클라이언트는 연결이 끊어지면 다시 연결되며, HTTP 204 No Content 응답 코드를 사용하여 클라이언트가 다시 연결되지 않도록 지시할 수 있습니다.
이 API를 XMLHttpRequest
나
iframe
을 사용하여 에뮬레이션하는
대신 사용하면 사용자 에이전트 구현자와 네트워크 운영자가 사전에 조율할 수 있는 경우 네트워크 리소스를 보다 효율적으로 사용할 수 있습니다. 이로 인해 특히 휴대용 장치에서 배터리 수명을 크게 절약할
수 있습니다. 이와 관련된 내용은 아래 연결 없는 푸시 섹션에서 자세히 설명합니다.
EventSource
인터페이스현재 모든 엔진에서 지원됩니다.
[Exposed =(Window ,Worker )]
interface EventSource : EventTarget {
constructor (USVString url , optional EventSourceInit eventSourceInitDict = {});
readonly attribute USVString url ;
readonly attribute boolean withCredentials ;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState ;
// networking
attribute EventHandler onopen ;
attribute EventHandler onmessage ;
attribute EventHandler onerror ;
undefined close ();
};
dictionary EventSourceInit {
boolean withCredentials = false ;
};
각 EventSource
객체는 다음과 같은 항목과 관련이
있습니다:
url(URL 레코드). 생성 시 설정됩니다.
request. 이 값은 처음에 null이어야 합니다.
재연결 시간(밀리초 단위). 이 값은 처음에 구현 정의 값이어야 하며, 아마도 몇 초 정도일 것입니다.
마지막 이벤트 ID 문자열. 이 값은 처음에 빈 문자열이어야 합니다.
url을 제외하고는 현재 EventSource
객체에서 노출되지 않습니다.
source = new EventSource(url [, { withCredentials: true } ])
현재 모든 엔진에서 지원됩니다.
새로운 EventSource
객체를
생성합니다.
url은 이벤트 스트림을 제공할 URL을 나타내는 문자열입니다.
withCredentials
를
true로 설정하면 url에 대한 연결 요청의 자격 증명 모드가 "include
"로 설정됩니다.
source.close()
현재 모든 엔진에서 지원됩니다.
이 EventSource
객체에 대해 시작된
fetch 알고리즘의 모든 인스턴스를 중단하고, readyState
속성을 CLOSED
로
설정합니다.
source.url
현재 모든 엔진에서 지원됩니다.
이벤트 스트림을 제공하는 URL을 반환합니다.
source.withCredentials
현재 모든 엔진에서 지원됩니다.
이벤트 스트림을 제공하는 URL에 대한 연결 요청의 자격 증명 모드가 "include
"로 설정된 경우 true를
반환하고, 그렇지 않으면 false를 반환합니다.
source.readyState
현재 모든 엔진에서 지원됩니다.
이 EventSource
객체의 연결 상태를
반환합니다. 이는 아래에 설명된 값을 가질 수 있습니다.
EventSource(url, eventSourceInitDict)
생성자가 호출되면 다음 단계를 수행해야 합니다:
ev라는 새 EventSource
객체를 만듭니다.
settings을 ev의 관련 설정 객체로 설정합니다.
urlRecord을 url을 주어진 settings에 따라 URL을 인코딩-파싱한 결과로 설정합니다.
urlRecord이 실패하면 "SyntaxError
" DOMException
을
발생시킵니다.
ev의 url을 urlRecord로 설정합니다.
corsAttributeState을 Anonymous로 설정합니다.
eventSourceInitDict의 withCredentials
멤버의 값이 true이면 corsAttributeState를 Use Credentials로 설정하고,
ev의 withCredentials
속성을 true로 설정합니다.
request를 urlRecord, 빈 문자열, 그리고 corsAttributeState를 이용해 잠재적인 CORS 요청을 생성한 결과로 설정합니다.
request의 client를 settings로 설정합니다.
사용자 에이전트는 설정할
수 있습니다(`Accept
`,
`text/event-stream
`)
request의 헤더 목록에.
request의 캐시 모드를 "no-store
"로 설정합니다.
request의 발신자 유형을 "other
"로 설정합니다.
ev의 request를 request로 설정합니다.
res가 네트워크 오류가 아닌 경우, 연결을 재설정하는 단계로 구성된 processEventSourceEndOfBody를 설정합니다.
Fetch request, processResponseEndOfBody를 processEventSourceEndOfBody로 설정하고 processResponse를 res가 주어졌을 때의 단계로 설정합니다:
res이 중단된 네트워크 오류인 경우 연결을 실패시킵니다.
그렇지 않고 res가 네트워크 오류인 경우, 사용자 에이전트가 그것이 무익하다는 것을 알고 있는 경우가 아니라면 연결을 재설정합니다. 그렇지 않다면 사용자 에이전트는 연결을 실패시킬 수 있습니다.
그렇지 않고 res의 상태가 200이 아니거나 res의 `Content-Type
`이
`text/event-stream
`이
아니면, 연결을
실패시킵니다.
ev를 반환합니다.
url
속성의 getter는 이
EventSource
객체의 url을 직렬화한 결과를 반환해야 합니다.
withCredentials
속성은 마지막으로 초기화된 값을 반환해야 합니다. 객체가 생성될 때, 이 속성은
false로 초기화되어야 합니다.
readyState
속성은 연결 상태를 나타냅니다. 이 속성은 다음 값을 가질 수 있습니다:
CONNECTING
(숫자 값 0)OPEN
(숫자 값 1)
CLOSED
(숫자 값
2)close()
메서드가 호출된 경우입니다.객체가 생성될 때, readyState
는
CONNECTING
(0)으로
설정되어야 합니다. 연결을 처리하는 규칙이 이 값이 변경되는 시점을 정의합니다.
close()
메서드는 이
EventSource
객체에 대해 시작된 fetch 알고리즘의 모든 인스턴스를 중단하고, readyState
속성을 CLOSED
로
설정해야 합니다.
다음은 모든 EventSource
인터페이스를 구현하는
객체가 이벤트 핸들러 IDL
속성으로 지원해야 하는 이벤트 핸들러와 이에 상응하는 이벤트 핸들러 이벤트 유형입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onopen
현재 모든 엔진에서 지원됨.
Firefox6+
Safari5+
Chrome6+
Opera12+ Edge79+ Edge (Legacy)? Internet Explorer지원 안 됨 Firefox Android45+ Safari iOS5+ Chrome Android? WebView Android? Samsung Internet? Opera Android12+ |
open |
onmessage
현재 모든 엔진에서 지원됨.
Firefox6+
Safari5+
Chrome6+
Opera12+ Edge79+ Edge (Legacy)? Internet Explorer지원 안 됨 Firefox Android45+ Safari iOS5+ Chrome Android? WebView Android? Samsung Internet? Opera Android12+ |
message |
onerror
현재 모든 엔진에서 지원됨.
Firefox6+
Safari5+
Chrome6+
Opera12+ Edge79+ Edge (Legacy)? Internet Explorer지원 안 됨 Firefox Android45+ Safari iOS5+ Chrome Android? WebView Android? Samsung Internet? Opera Android12+ |
error |
사용자 에이전트가 연결을 알리기 위해, 작업을 큐에 넣고, readyState
속성이 CLOSED
가
아닌 값으로 설정된 경우, readyState
속성을 OPEN
으로 설정하고
이벤트를 발생시키며, 이 이벤트는 open
라는 이름으로 EventSource
객체에서 발생합니다.
사용자 에이전트가 연결을 재수립하기 위해, 다음 단계를 수행합니다. 이 단계는 병렬로 수행되며, 작업의 일부로 수행되지 않습니다. (물론, 큐에 넣은 작업들은 정상적인 작업처럼 실행되며 병렬로 실행되지 않습니다.)
작업을 큐에 넣고 다음 단계를 수행합니다:
readyState
속성이 CLOSED
로
설정된 경우, 작업을 중단합니다.
readyState
속성을 CONNECTING
으로
설정합니다.
이벤트를
발생시키며, 이 이벤트는 error
라는 이름으로 EventSource
객체에서
발생합니다.
이벤트 소스의 재연결 시간만큼 지연을 기다립니다.
선택적으로, 추가 대기를 할 수 있습니다. 특히 이전 시도가 실패한 경우, 사용자 에이전트는 이미 과부하가 걸렸을 수 있는 서버를 과부하시키지 않기 위해 지수 백오프 지연을 도입할 수 있습니다. 또는 운영 체제가 네트워크 연결이 없다고 보고한 경우, 사용자 에이전트는 네트워크 연결이 복구되었다고 운영 체제가 알릴 때까지 대기할 수 있습니다.
앞서 언급한 작업이 실행될 때까지 기다립니다.
작업을 큐에 넣고 다음 단계를 수행합니다:
EventSource
객체의
readyState
속성이 CONNECTING
으로
설정되지 않은 경우, 반환합니다.
request를 EventSource
객체의 요청으로 설정합니다.
EventSource
객체의
마지막 이벤트 ID 문자열이 빈 문자열이 아닌
경우:
lastEventIDValue를 EventSource
객체의 마지막 이벤트 ID 문자열,
UTF-8로
인코딩한 값으로 설정합니다.
헤더 목록에서 Last-Event-ID
값을 lastEventIDValue로 request에 설정합니다.
요청을 가져오고, 이 방법으로 얻은 응답을 이전에 이 섹션에서 설명한 대로 처리합니다.
사용자 에이전트가 연결을 실패시키려면 작업을 큐에 넣고, readyState
속성이 CLOSED
가 아닌
값으로 설정된 경우, readyState
속성을 CLOSED
으로
설정하고 이벤트를 발생시키며, 이 이벤트는 error
라는 이름으로 EventSource
객체에서 발생합니다.
사용자 에이전트가 연결에 실패하면, 다시
연결을 시도하지 않습니다.
작업 소스는 EventSource
객체가 큐에 넣은 모든 작업의 소스이며, 원격 이벤트 작업
소스입니다.
Last-Event-ID
` 헤더Last-Event-ID
` HTTP 요청 헤더는 EventSource
객체의 마지막
이벤트 ID 문자열을 서버에 보고합니다. 이 문자열은 사용자
에이전트가 연결을
재수립할 때 전송됩니다.
값 공간을 더 잘 정의하기 위해 whatwg/html issue #7363를 참조하십시오. 본질적으로 U+0000 NULL, U+000A LF, 또는 U+000D CR을 포함하지 않는 UTF-8로 인코딩된 문자열입니다.
이 이벤트 스트림 형식의 MIME 유형은 text/event-stream
입니다.
이벤트 스트림 형식은 다음 ABNF의 stream
생산 규칙에 의해 설명되며, 이 규칙의 문자 세트는 유니코드입니다. [ABNF]
stream = [ bom ] * event
event = * ( comment / field ) end-of-line
comment = colon * any-char end-of-line
field = 1* name-char [ colon [ space ] * any-char ] end-of-line
end-of-line = ( cr lf / cr / lf )
; characters
lf = %x000A ; U+000A LINE FEED (LF)
cr = %x000D ; U+000D CARRIAGE RETURN (CR)
space = %x0020 ; U+0020 SPACE
colon = %x003A ; U+003A COLON (:)
bom = %xFEFF ; U+FEFF BYTE ORDER MARK
name-char = %x0000-0009 / %x000B-000C / %x000E-0039 / %x003B-10FFFF
; a scalar value other than U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), or U+003A COLON (:)
any-char = %x0000-0009 / %x000B-000C / %x000E-10FFFF
; a scalar value other than U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)
이 형식의 이벤트 스트림은 항상 UTF-8로 인코딩되어야 합니다. [ENCODING]
줄은 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 문자 쌍, 단일 U+000A LINE FEED (LF) 문자 또는 단일 U+000D CARRIAGE RETURN (CR) 문자로 구분되어야 합니다.
이러한 리소스를 위해 원격 서버에 설정된 연결이 장기적일 것으로 예상되므로, 사용자 에이전트(UAs)는 적절한 버퍼링이 사용되도록 해야 합니다. 특히, 줄이 단일 U+000A LINE FEED (LF) 문자로 끝나도록 정의된 줄 버퍼링은 안전하지만, 블록 버퍼링 또는 예상 줄 끝이 다른 줄 버퍼링은 이벤트 디스패치에 지연을 초래할 수 있습니다.
스트림은 UTF-8 디코딩 알고리즘을 사용하여 해독해야 합니다.
UTF-8 디코딩 알고리즘은 UTF-8 바이트 순서 표시(BOM)를 제거합니다.
그 후, 스트림은 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 문자 쌍, U+000D CARRIAGE RETURN (CR) 문자로 시작되지 않은 단일 U+000A LINE FEED (LF) 문자, 그리고 U+000A LINE FEED (LF) 문자로 끝나지 않은 단일 U+000D CARRIAGE RETURN (CR) 문자를 통해 한 줄씩 파싱해야 합니다.
스트림을 파싱할 때 data 버퍼, event type 버퍼 및 last event ID 버퍼가 연결되어야 하며, 이들은 빈 문자열로 초기화되어야 합니다.
받은 순서대로 줄을 다음과 같이 처리해야 합니다:
이벤트를 디스패치합니다, 아래 정의된 대로.
줄을 무시합니다.
줄에서 첫 번째 U+003A 콜론 문자(:) 앞의 문자를 수집하고 field에 해당 문자열을 설정합니다.
첫 번째 U+003A 콜론 문자(:) 이후의 문자를 수집하고 value에 해당 문자열을 설정합니다. value가 U+0020 SPACE 문자로 시작하면 value에서 제거합니다.
필드를 처리합니다 아래 설명된 단계에 따라 field를 필드 이름으로, value를 필드 값으로 사용하여 처리합니다.
필드를 처리합니다 아래 설명된 단계에 따라 전체 줄을 필드 이름으로, 빈 문자열을 필드 값으로 사용하여 처리합니다.
파일 끝에 도달하면, 보류 중인 데이터는 모두 폐기해야 합니다. (파일이 이벤트의 중간에서 종료되면, 최종 빈 줄 이전에 불완전한 이벤트는 디스패치되지 않습니다.)
필드 이름과 필드 값이 주어진 경우, 필드를 처리하는 단계는 필드 이름에 따라 다릅니다. 필드 이름은 대소문자를 구분하여 비교해야 합니다.
event type 버퍼를 필드 값으로 설정합니다.
필드 값을 data 버퍼에 추가한 다음, data 버퍼에 단일 U+000A LINE FEED (LF) 문자를 추가합니다.
필드 값에 U+0000 NULL이 포함되지 않은 경우, last event ID 버퍼를 필드 값으로 설정합니다. 그렇지 않으면 필드를 무시합니다.
필드 값이 ASCII 숫자로만 구성된 경우, 필드 값을 10진수로 해석하여 이벤트 스트림의 재연결 시간을 해당 정수로 설정합니다. 그렇지 않으면 필드를 무시합니다.
필드를 무시합니다.
사용자 에이전트가 이벤트를 디스패치하도록 요구받았을 때, 사용자 에이전트는 data 버퍼, event type 버퍼 및 last event ID 버퍼를 사용자 에이전트에 적합한 단계로 처리해야 합니다.
웹 브라우저의 경우, 이벤트를 디스패치하는 적합한 단계는 다음과 같습니다:
이벤트 소스의 마지막 이벤트 ID 문자열을 last event ID 버퍼의 값으로 설정합니다. 이 버퍼는 재설정되지 않으므로, 서버에 의해 다시 설정될 때까지 이벤트 소스의 마지막 이벤트 ID 문자열이 이 값으로 유지됩니다.
data 버퍼가 빈 문자열인 경우, data 버퍼와 event type 버퍼를 빈 문자열로 설정하고 반환합니다.
data 버퍼의 마지막 문자가 U+000A LINE FEED (LF) 문자인 경우, data 버퍼에서 마지막 문자를 제거합니다.
event를 이벤트
생성의 결과로 설정하고, MessageEvent
를 사용하여
EventSource
객체의 관련 영역에서
생성합니다.
event의 type
속성을
"message
"로
설정하고,
data를 data
속성에, origin
속성에 이벤트 스트림의 최종 URL(즉, 리디렉션 후의 URL)의 직렬화된 origin을,
lastEventId
속성에 이벤트 소스의 마지막 이벤트 ID 문자열을 설정합니다.
event type 버퍼에 빈 문자열 외의 값이 있으면, 새로 생성된 이벤트의 type을 event type 버퍼의 값으로 변경합니다.
data 버퍼와 event type 버퍼를 빈 문자열로 설정합니다.
작업을 큐에 추가하고, readyState
속성이 CLOSED
가
아닌 값으로 설정된 경우, 새로 생성된 이벤트를 디스패치합니다 EventSource
객체에.
이벤트에 "id" 필드가 없지만 이전 이벤트가 이벤트 소스의 마지막 이벤트 ID 문자열을 설정한 경우, 이벤트의
lastEventId
필드는
마지막으로 본 "id" 필드의 값으로 설정됩니다.
다른 사용자 에이전트의 경우, 이벤트를 디스패치하는 적절한 단계는 구현에 따라 다르지만, 최소한 data와 event type 버퍼를 빈 문자열로 설정한 후 반환해야 합니다.
다음 이벤트 스트림은 빈 줄 다음에 실행됩니다:
data: YHOO data: +2 data: 10
...이벤트 message
인터페이스를 가진 이벤트가 MessageEvent
로 EventSource
객체에
디스패치됩니다.
이벤트의 data
속성에는 문자열 "YHOO\n+2\n10
"이 포함됩니다 ("\n
"은 줄 바꿈을 나타냄).
이것은 다음과 같이 사용할 수 있습니다:
var stocks = new EventSource( "https://stocks.example.com/ticker.php" );
stocks. onmessage = function ( event) {
var data = event. data. split( '\n' );
updateStocks( data[ 0 ], data[ 1 ], data[ 2 ]);
};
...여기서 updateStocks()
는 다음과 같이 정의된 함수입니다:
function updateStocks( symbol, delta, value) { ... }
...또는 이와 유사한 것입니다.
다음 스트림에는 네 개의 블록이 포함되어 있습니다. 첫 번째 블록은 주석만 있으며 아무 것도 발생하지 않습니다. 두 번째 블록은 각각 "data"와 "id"라는 이름을 가진 두 개의 필드가
있으며, 이 블록에 대해 데이터 "first event"를 가진 이벤트가 발생하고 마지막 이벤트 ID가 "1"로 설정됩니다. 따라서 이 블록과 다음 블록 사이에 연결이 끊어지면 서버에
`Last-Event-ID
` 헤더가
값 `1
`로 전송됩니다. 세 번째 블록은 "second event" 데이터를 가진 이벤트를 발생시키며, 이번에는 값이 없는 "id" 필드를 가지며, 이는 마지막
이벤트 ID를 빈 문자열로 재설정합니다(즉, 다시 연결을 시도할 때 더 이상 `Last-Event-ID
` 헤더가
전송되지 않음). 마지막으로, 마지막 블록은 단순히 데이터 " third event"를 가진 이벤트를 발생시킵니다(선행 공백 문자 포함). 마지막 블록은 여전히 빈 줄로 끝나야 하며,
스트림의 끝만으로는 마지막 이벤트를 디스패치할 수 없습니다.
: test stream data: first event id: 1 data:second event id data: third event
다음 스트림은 두 개의 이벤트를 발생시킵니다:
data data data data:
첫 번째 블록은 데이터가 빈 문자열로 설정된 이벤트를 발생시키고, 마지막 블록이 빈 줄로 이어지면 마지막 블록도 마찬가지로 이벤트가 발생합니다. 중간 블록은 데이터가 단일 줄 바꿈 문자로 설정된 이벤트를 발생시킵니다. 마지막 블록은 빈 줄로 이어지지 않기 때문에 폐기됩니다.
다음 스트림은 두 개의 동일한 이벤트를 발생시킵니다:
data:test data: test
이는 콜론 뒤의 공백이 있는 경우 무시되기 때문입니다.
레거시 프록시 서버는 특정 경우에 짧은 시간 내에 HTTP 연결을 끊는 것으로 알려져 있습니다. 이러한 프록시 서버로부터 보호하기 위해, 작성자는 15초마다 주석 라인(‘:’ 문자로 시작하는 라인)을 포함할 수 있습니다.
이벤트 소스 연결을 서로 연결하거나 이전에 제공된 특정 문서와 연결하려는 작성자는 IP 주소에 의존하는 것이 잘 작동하지 않을 수 있음을 알 수 있습니다. 이는 개별 클라이언트가 여러 개의 IP 주소를 가질 수 있기 때문입니다(여러 프록시 서버를 통해) 그리고 개별 IP 주소에 여러 클라이언트가 있을 수 있습니다(프록시 서버를 공유하는 경우). 문서가 제공될 때 고유 식별자를 포함하고 연결이 설정될 때 해당 식별자를 URL의 일부로 전달하는 것이 좋습니다.
작성자는 또한 HTTP 청킹이 이 프로토콜의 신뢰성에 예상치 못한 부정적인 영향을 미칠 수 있음을 주의해야 합니다. 특히 타이밍 요구 사항을 인지하지 못하는 다른 레이어에서 청킹이 수행되는 경우 문제가 발생할 수 있습니다. 이러한 문제가 발생할 경우, 이벤트 스트림 제공 시 청킹을 비활성화할 수 있습니다.
HTTP의 서버당 연결 제한을 지원하는 클라이언트는 동일한 도메인에 대해 각 페이지에 EventSource
가 있는 경우 사이트에서 여러 페이지를 열 때 문제가
발생할 수 있습니다. 작성자는 연결당 고유 도메인 이름을 사용하는 비교적 복잡한 메커니즘을 사용하거나, 사용자가 페이지별로 EventSource
기능을 활성화 또는 비활성화할 수 있도록 하거나, 공유
워커를 사용하여 단일 EventSource
객체를
공유하여 이를 피할 수 있습니다.
특정 통신사에 연결된 모바일 핸드셋의 브라우저와 같은 제어된 환경에서 실행되는 사용자 에이전트는 연결 관리 작업을 네트워크의 프록시로 오프로드할 수 있습니다. 이러한 상황에서는 해당 사용자 에이전트가 핸드셋 소프트웨어와 네트워크 프록시를 모두 포함한다고 간주됩니다.
예를 들어, 모바일 기기의 브라우저가 연결을 설정한 후 지원되는 네트워크에 있음을 감지하고 네트워크의 프록시 서버가 연결 관리를 인수하도록 요청할 수 있습니다. 이러한 상황의 타임라인은 다음과 같을 수 있습니다:
EventSource
생성자에서 지정한
리소스를 요청합니다.
EventSource
생성자에서 지정한
리소스를 요청합니다(아마도 `Last-Event-ID
`
HTTP 헤더 등을
포함하여).
이렇게 하면 전체 데이터 사용량을 줄일 수 있으며, 결과적으로 상당한 전력 절감 효과를 얻을 수 있습니다.
이 사양에서 정의한 기존 API와 text/event-stream
와이어 포맷을
구현할 뿐만 아니라 위에서 설명한 것처럼 더 분산된 방식으로 구현할 수 있으며, 다른 적용 가능한 사양에서 정의한 이벤트 프레이밍 형식을 지원할 수도 있습니다.
이 사양은 이러한 형식을 어떻게 구문 분석하거나 처리해야 하는지 정의하지 않습니다.
EventSource
객체의 readyState
가
CONNECTING
상태이고, 해당 객체에 open
, message
또는 error
이벤트에 대한 이벤트 리스너가 하나 이상 등록되어 있는
경우, Window
또는 WorkerGlobalScope
객체에서 해당
EventSource
객체로의 강한 참조가 있어야 합니다.
EventSource
객체의 readyState
가
OPEN
상태이고, 해당 객체에
message
또는 error
이벤트에 대한 이벤트 리스너가 하나 이상 등록되어 있는
경우, Window
또는 WorkerGlobalScope
객체에서
해당 EventSource
객체로의 강한 참조가 있어야
합니다.
EventSource
객체가 원격 이벤트 작업 소스에 작업을 큐에
추가한 상태인 경우, Window
또는 WorkerGlobalScope
객체에서
해당 EventSource
객체로의 강한 참조가 있어야
합니다.
사용자 에이전트가 EventSource
객체를 강제로 종료해야 하는 경우(이는 Document
객체가 영구적으로 사라질 때 발생함), 사용자 에이전트는 해당
EventSource
객체에 대해 시작된 fetch 알고리즘의 모든 인스턴스를 중단하고 readyState
속성을 CLOSED
로
설정해야 합니다.
EventSource
객체가 연결이 열린 상태에서 가비지
컬렉션된 경우, 사용자 에이전트는 해당 EventSource
객체에 의해 시작된 fetch 알고리즘의 인스턴스를 중단해야 합니다.
이 섹션은 비규범적입니다.
사용자 에이전트는 EventSource
객체와 관련된 네트워크
연결에 대한 자세한 진단 정보를 개발 콘솔에 제공하여, 이 API를 사용하는 코드를 디버깅하는 데 도움이 되도록 강력히 권장합니다.
예를 들어, 사용자 에이전트는 페이지가 생성한 모든 EventSource
객체를 표시하는 패널을 가질 수
있으며, 각 객체에는 생성자의 인수, 네트워크 오류 여부, 연결의 CORS 상태, 해당 상태로 이어진 클라이언트가 전송한 헤더 및 서버에서 수신한 헤더, 수신된 메시지와 파싱된 방식 등을 나열할
수 있습니다.
구현체는 특히 error
이벤트가 발생할 때마다 개발 콘솔에
자세한 정보를 보고하도록 권장되며, 이벤트 자체에서는 거의 또는 전혀 정보를 제공할 수 없기 때문입니다.
모든 현재 엔진에서 지원됨.
웹 브라우저는 보안 및 개인정보 보호를 위해 서로 다른 도메인의 문서들이 서로에게 영향을 미치는 것을 방지합니다. 즉, 교차 사이트 스크립팅은 허용되지 않습니다.
이는 중요한 보안 기능이지만, 적대적이지 않은 페이지들 간에도 서로 다른 도메인에서 통신하는 것을 방지합니다. 이 섹션에서는 교차 사이트 스크립팅 공격을 가능하게 하지 않으면서도 문서들이 서로 다른 출처 도메인에서도 통신할 수 있도록 하는 메시징 시스템을 소개합니다.
postMessage()
API는
추적 벡터로 사용될 수 있습니다.
이 섹션은 비규범적입니다.
예를 들어, 문서 A가 문서 B를 포함하는 iframe
요소를 포함하고 있으며, 문서
A의 스크립트가 문서 B의 Window
객체에서 postMessage()
를
호출하면 해당 객체에서 메시지 이벤트가 발생하고, 이 메시지가 문서 A의 Window
에서 유래한 것으로 표시됩니다. 문서 A의 스크립트는 다음과 같이 보일
수 있습니다:
var o = document. getElementsByTagName( 'iframe' )[ 0 ];
o. contentWindow. postMessage( 'Hello world' , 'https://b.example.org/' );
수신 이벤트에 대한 이벤트 핸들러를 등록하려면 스크립트는 addEventListener()
(또는 유사한 메커니즘)를 사용합니다. 예를 들어, 문서 B의 스크립트는
다음과 같이 보일 수 있습니다:
window. addEventListener( 'message' , receiver, false );
function receiver( e) {
if ( e. origin == 'https://example.com' ) {
if ( e. data == 'Hello world' ) {
e. source. postMessage( 'Hello' , e. origin);
} else {
alert( e. data);
}
}
}
이 스크립트는 먼저 도메인이 예상된 도메인인지 확인한 다음 메시지를 확인하여, 사용자에게 메시지를 표시하거나 처음 메시지를 보낸 문서에 응답 메시지를 보냅니다.
이 API를 사용할 때는 사이트가 악의적인 목적으로 남용되지 않도록 사용자 보호에 특별히 신경 써야 합니다.
작성자는 메시지를 수신할 것으로 예상되는 도메인에서만 메시지를 수신하도록 origin
속성을 확인해야 합니다. 그렇지
않으면 작성자의 메시지 처리 코드에 있는 버그가 악의적인 사이트에 의해 악용될 수 있습니다.
또한, origin
속성을 확인한
후에도, 작성자는 해당 데이터가 예상된 형식인지 확인해야 합니다. 그렇지 않으면 이벤트의 소스가 교차 사이트 스크립팅 결함을 통해 공격받은 경우, postMessage()
메서드를 사용하여 전송된
정보를 추가로 확인하지 않고 처리하면 공격이 수신자에게 전파될 수 있습니다.
작성자는 기밀 정보를 포함한 메시지에서 targetOrigin 인수에 와일드카드 키워드(*)를 사용하지 말아야 합니다. 그렇지 않으면 메시지가 의도된 수신자에게만 전달된다는 보장이 없습니다.
모든 출처에서 메시지를 수신하는 작성자는 서비스 거부(DoS) 공격의 위험을 고려해야 합니다. 공격자가 대량의 메시지를 보낼 수 있으며, 수신 페이지가 각 메시지마다 비용이 많이 드는 계산을 수행하거나 네트워크 트래픽을 유발하는 경우, 공격자의 메시지가 서비스 거부 공격으로 이어질 수 있습니다. 작성자는 이러한 공격을 실질적으로 불가능하게 하기 위해 속도 제한(분당 특정 메시지 수만 허용)을 사용하는 것이 좋습니다.
The integrity of this API is based on the inability for scripts of one origin to
post arbitrary events (using dispatchEvent()
or otherwise) to objects in
other origins (those that are not the same).
Implementers are urged to take extra care in the implementation of this feature. It allows authors to transmit information from one domain to another domain, which is normally disallowed for security reasons. It also requires that UAs be careful to allow access to certain properties but not others.
User agents are also encouraged to consider rate-limiting message traffic between different origins, to protect naïve sites from denial-of-service attacks.
window.postMessage(message [, options ])
모든 현재 엔진에서 지원됨.
지정된 창에 메시지를 전송합니다. 메시지는 중첩된 객체와 배열 같은 구조화된 객체일 수 있으며, JavaScript 값(문자열, 숫자, Date
객체 등)을 포함할 수 있고, File
,
Blob
,
FileList
,
ArrayBuffer
객체와 같은 특정 데이터 객체를 포함할 수 있습니다.
options의 transfer
멤버에 나열된 객체는 단순히 복제되는 것이 아니라 전송되며, 전송된 객체는 전송 측에서 더 이상 사용할 수 없습니다.
대상 출처는 options의 targetOrigin
멤버를 사용하여 지정할 수 있습니다. 제공되지 않으면 기본값은 "/
"로 설정됩니다. 이 기본값은 메시지가 동일한 출처의 대상에만 전송되도록 제한합니다.
대상 창의 출처가 지정된 대상 출처와 일치하지 않으면 정보 유출을 방지하기 위해 메시지가 폐기됩니다. 출처에 관계없이 메시지를 대상에 전송하려면 대상 출처를
"*
"로 설정하십시오.
"DataCloneError
" DOMException
을
던집니다.
transfer 배열에 중복된 객체가 포함되어 있거나 message를 복제할 수 없는 경우.
window.postMessage(message, targetOrigin [, transfer ])
이것은 대상 출처를 매개변수로 지정하는 postMessage()
메서드의 대체 버전입니다. window.postMessage(message, target, transfer)
를 호출하는 것은 window.postMessage(message, {targetOrigin,
transfer})
을 호출하는 것과 동일합니다.
방금 새 Document
로 탐색된 탐색 맥락의 Window
에 메시지를 전송할 때, 메시지가 의도된 수신자에게 전달되지 않을 가능성이
큽니다. 대상 탐색 맥락의 스크립트가 메시지 수신기를 설정할 시간이
필요하기 때문입니다. 따라서 새로 생성된 자식 iframe
의 Window
에 메시지를 전송해야 하는 상황에서는 작성자가 자식 Document
가 메시지를 수신할 준비가 되었음을 부모에게 알리는 메시지를
게시하고, 부모가 이 메시지를 기다렸다가 메시지를 전송하는 것이 좋습니다.
targetWindow, message, 및 options가 주어졌을 때 window 메시지 전송 단계는 다음과 같습니다:
targetRealm을 targetWindow의 영역으로 설정합니다.
incumbentSettings을 현직 설정 객체로 설정합니다.
targetOrigin을 options["targetOrigin
"]으로
설정합니다.
targetOrigin이 단일 U+002F 솔리더스 문자(/)이면, targetOrigin을 incumbentSettings의 출처로 설정합니다.
그 외의 경우, targetOrigin이 단일 U+002A 별표 문자(*)가 아닌 경우:
parsedURL을 URL 파서를 실행하여 targetOrigin으로 설정합니다.
parsedURL이 실패한 경우 "SyntaxError
" DOMException
을
던집니다.
targetOrigin을 parsedURL의 출처로 설정합니다.
transfer를 options["transfer
"]로
설정합니다.
serializeWithTransferResult를 StructuredSerializeWithTransfer(message, transfer)의 결과로 설정합니다. 모든 예외를 다시 던집니다.
글로벌 작업을 큐에 추가합니다 게시된 메시지 작업 소스에서 targetWindow가 다음 단계를 실행하도록 설정합니다:
targetOrigin 인수가 단일 U+002A 별표 문자(*)가 아니고 targetWindow의 연결된
Document
의 출처가
targetOrigin과 동일 출처가 아닌 경우,
반환합니다.
source를 incumbentSettings의 글로벌 객체에 해당하는 WindowProxy
객체로 설정합니다 (즉, Window
객체).
deserializeRecord을 StructuredDeserializeWithTransfer(serializeWithTransferResult, targetRealm)의 결과로 설정합니다.
이 과정에서 예외가 발생하면 이를 잡아내어 이벤트를
발생시킵니다. 이벤트 이름은 messageerror
이고,
targetWindow에서 발생하며, MessageEvent
를 사용하고,
origin
속성을 origin으로 초기화하고, source
속성을 source로 초기화한 후 반환합니다.
messageClone을 deserializeRecord.[[Deserialized]]로 설정합니다.
newPorts를 deserializeRecord.[[TransferredValues]]에 포함된 모든 MessagePort
객체들로 구성된 새
고정 배열로 설정합니다(있을 경우), 상대적인 순서를 유지합니다.
이벤트를
발생시킵니다. 이벤트 이름은 message
이고,
targetWindow에서 발생하며,
MessageEvent
를
사용하고, origin
속성을 origin으로 초기화하고, source
속성을 source로 초기화하며,
data
속성을 messageClone으로 초기화하고, ports
속성을 newPorts로 초기화합니다.
Window
인터페이스의 postMessage(message,
options)
메서드 단계는 window 메시지 전송 단계를 실행하여 this, message, 및
options를 처리합니다.
Window
인터페이스의 postMessage(message, targetOrigin,
transfer)
메서드 단계는 window 메시지 전송 단계를 실행하여 this, message, 및 «[ "targetOrigin
"
→
targetOrigin, "transfer
"
→ transfer ]»를 처리합니다.
모든 현재 엔진에서 지원됨.
Channel_Messaging_API/Using_channel_messaging
모든 현재 엔진에서 지원됨.
이 섹션은 비규범적입니다.
서로 다른 탐색 맥락에서 실행되는 독립적인 코드 조각들이 직접 통신할 수 있도록 하기 위해, 작성자는 채널 메시징을 사용할 수 있습니다.
이 메커니즘의 통신 채널은 양방향 파이프로 구현되며, 각 끝에 포트가 있습니다. 한 포트에서 전송된 메시지는 다른 포트에 전달되며, 그 반대도 마찬가지입니다. 메시지는 실행 중인 작업을 방해하거나 차단하지 않고 DOM 이벤트로 전달됩니다.
연결(두 개의 "얽힌" 포트)을 생성하려면 MessageChannel()
생성자를 호출합니다:
var channel = new MessageChannel();
포트 중 하나는 로컬 포트로 유지하고, 다른 포트는 예를 들어 postMessage()
를 사용하여
원격 코드로 보냅니다:
otherWindow. postMessage( 'hello' , 'https://example.com' , [ channel. port2]);
메시지를 전송하려면 포트에서 postMessage()
메서드를 사용합니다:
channel. port1. postMessage( 'hello' );
메시지를 수신하려면 message
이벤트를 수신하도록 설정합니다:
channel. port1. onmessage = handleMessage;
function handleMessage( event) {
// message is in event.data
// ...
}
포트에서 전송된 데이터는 구조화된 데이터일 수 있습니다. 예를 들어, 여기에서는 문자열 배열이 MessagePort
를 통해 전달됩니다:
port1. postMessage([ 'hello' , 'world' ]);
이 섹션은 비규범적입니다.
이 예제에서는 두 개의 JavaScript 라이브러리가 MessagePort
를
사용하여 서로 연결됩니다. 이를 통해 나중에
라이브러리가 서로 다른 프레임이나 Worker
객체에서 호스팅되더라도 API에 변경 없이
연결할 수 있습니다.
< script src = "contacts.js" ></ script > <!-- contacts 객체를 노출합니다 -->
< script src = "compose-mail.js" ></ script > <!-- composer 객체를 노출합니다 -->
< script >
var channel = new MessageChannel();
composer. addContactsProvider( channel. port1);
contacts. registerConsumer( channel. port2);
</ script >
다음은 "addContactsProvider()" 함수의 구현 예시입니다:
function addContactsProvider( port) {
port. onmessage = function ( event) {
switch ( event. data. messageType) {
case 'search-result' : handleSearchResult( event. data. results); break ;
case 'search-done' : handleSearchDone(); break ;
case 'search-error' : handleSearchError( event. data. message); break ;
// ...
}
};
};
또 다른 구현 방법은 다음과 같습니다:
function addContactsProvider( port) {
port. addEventListener( 'message' , function ( event) {
if ( event. data. messageType == 'search-result' )
handleSearchResult( event. data. results);
});
port. addEventListener( 'message' , function ( event) {
if ( event. data. messageType == 'search-done' )
handleSearchDone();
});
port. addEventListener( 'message' , function ( event) {
if ( event. data. messageType == 'search-error' )
handleSearchError( event. data. message);
});
// ...
port. start();
};
주요 차이점은 addEventListener()
를
사용하는 경우, start()
메서드도 호출되어야 한다는 점입니다. onmessage
를
사용할 때는 start()
호출이
암시적으로 이루어집니다.
start()
메서드는 명시적으로
호출되거나 암시적으로 호출되더라도, 메시지 흐름을 시작합니다: 메시지 포트에서 게시된 메시지는 초기에는 일시 중지되어, 스크립트가 핸들러를 설정할 기회를 가지기 전에 메시지가 손실되지
않도록 합니다.
이 섹션은 비규범적입니다.
포트는 시스템 내 다른 행위자에게 제한된 능력(객체-능력 모델의 관점에서)을 노출하는 방법으로 볼 수 있습니다. 이는 특정 출처 내에서 포트를 편리한 모델로 사용하는 약한 능력 시스템이 될 수도 있고, 한 출처 provider에서 제공하는 포트가 다른 출처 consumer가 provider로부터 정보를 얻거나 변화를 일으킬 수 있는 유일한 메커니즘이 되는 강력한 능력 모델이 될 수도 있습니다.
예를 들어, 소셜 웹사이트가 하나의 iframe
에
사용자의 이메일 연락처 제공자(두 번째 출처의 주소록 사이트)를 포함하고, 두 번째 iframe
에
게임(세 번째 출처)을 포함하는 상황을 고려해 보십시오. 외부 소셜 사이트와 두 번째 iframe
에
있는 게임은 첫 번째 iframe
내의 내용을 접근할 수 없습니다. 그들은 함께 다음과 같은 작업만 할 수 있습니다:
내비게이트
iframe
을
새 URL로, 예를 들어 동일한 URL로 내비게이트하지만 다른 프래그먼트로 내비게이트하여, Window
가
iframe
내에서 hashchange
이벤트를 수신하게 합니다.
message
이벤트를 Window
에서
iframe
내의 API를 사용하여 window.postMessage()
를
통해 전송할 수 있습니다.
연락처 제공자는 이러한 방법, 특히 세 번째 방법을 사용하여 다른 출처가 사용자의 주소록을 조작할 수 있는 API를 제공할 수 있습니다. 예를 들어,
"add-contact Guillaume Tell <tell@pomme.example.net>
"라는 메시지에 응답하여 주어진 사람과 이메일 주소를 사용자의 주소록에
추가할 수 있습니다.
웹상의 모든 사이트가 사용자의 연락처를 조작하지 않도록 하기 위해, 연락처 제공자는 소셜 사이트와 같은 특정 신뢰할 수 있는 사이트에만 이를 허용할 수 있습니다.
이제 게임이 사용자의 주소록에 연락처를 추가하려 하고, 소셜 사이트가 이를 대신하여 허용하고자 한다고 가정해 보십시오. 이는 기본적으로 연락처 제공자가 소셜 사이트와의 신뢰를 "공유"하는 것입니다. 이를 수행할 수 있는 여러 방법이 있습니다. 가장 간단하게는 게임 사이트와 연락처 사이트 간에 메시지를 프록시할 수 있습니다. 그러나 이 솔루션에는 여러 가지 어려움이 있습니다: 소셜 사이트가 게임 사이트가 이 특권을 남용하지 않을 것이라고 완전히 신뢰해야 하거나, 소셜 사이트가 각 요청을 확인하여 허용하지 않으려는 요청(예: 여러 연락처 추가, 연락처 읽기, 삭제 등)이 아닌지 확인해야 합니다. 또한 여러 게임이 동시에 연락처 제공자와 상호작용하려는 가능성이 있을 경우 추가적인 복잡성이 필요할 수 있습니다.
그러나 메시지 채널과 MessagePort
객체를 사용하면 이러한 문제를 모두 해결할 수 있습니다. 게임이 소셜 사이트에 연락처를 추가하고 싶다고 알릴 때, 소셜 사이트는 연락처 제공자에게 연락처를 추가해 달라고 요청하는 대신, 연락처
하나를 추가할 수 있는 능력을 요청할 수 있습니다. 연락처 제공자는 그런 다음 MessagePort
객체 쌍을 생성하고, 그 중 하나를 소셜 사이트에 반환하여 이를 게임에 전달합니다. 게임과 연락처 제공자는 이제 직접 연결되며, 연락처 제공자는 단일 "연락처 추가" 요청만 수락한다는 것을 알고
있습니다. 즉, 게임은 단일 연락처를 추가할 수 있는 능력을 부여받은 것입니다.
이 섹션은 비규범적입니다.
이전 섹션의 예제를 이어서, 특히 연락처 제공자를 고려해 보십시오. 초기 구현에서는 서비스의 iframe
내에서 XMLHttpRequest
객체를 간단히 사용했을 수 있지만, 서비스의 진화 과정에서 대신 단일 WebSocket
연결이 있는 shared worker를 사용하고자 할
수 있습니다.
초기 설계가 MessagePort
객체를 사용하여 능력을 부여하거나, 단순히 여러 개의 독립적인 세션을 동시에 허용하도록 했을 경우, 서비스 구현은 iframe
내의 각 XMLHttpRequest
모델에서 공유된 WebSocket
모델로 전환할 수 있으며, API를 전혀 변경하지 않아도 됩니다. 서비스 제공자 측의 포트는 모두 공유 워커로 전달될 수 있으며, 이는 API 사용자에게 전혀 영향을 미치지 않습니다.
모든 최신 엔진에서 지원됩니다.
[Exposed =(Window ,Worker )]
interface MessageChannel {
constructor ();
readonly attribute MessagePort port1 ;
readonly attribute MessagePort port2 ;
};
channel = new MessageChannel()
모든 최신 엔진에서 지원됩니다.
두 개의 새로운 MessagePort
객체가 있는
새로운 MessageChannel
객체를
반환합니다.
channel.port1
모든 최신 엔진에서 지원됩니다.
첫 번째 MessagePort
객체를 반환합니다.
channel.port2
모든 최신 엔진에서 지원됩니다.
두 번째 MessagePort
객체를 반환합니다.
MessageChannel
객체는
포트 1 및
포트 2와 연결되어 있으며, 모두 MessagePort
객체입니다.
new MessageChannel()
생성자 단계는 다음과 같습니다:
port1
getter 단계는 this의
포트 1을 반환하는 것입니다.
port2
getter 단계는 this의
포트 2을 반환하는 것입니다.
모든 최신 엔진에서 지원됩니다.
각 채널에는 두 개의 메시지 포트가 있습니다. 한 포트를 통해 전송된 데이터는 다른 포트에서 수신되며, 그 반대도 마찬가지입니다.
[Exposed =(Window ,Worker ,AudioWorklet ), Transferable ]
interface MessagePort : EventTarget {
undefined postMessage (any message , sequence <object > transfer );
undefined postMessage (any message , optional StructuredSerializeOptions options = {});
undefined start ();
undefined close ();
// 이벤트 핸들러
attribute EventHandler onmessage ;
attribute EventHandler onmessageerror ;
attribute EventHandler onclose ;
};
dictionary StructuredSerializeOptions {
sequence <object > transfer = [];
};
port.postMessage(message [, transfer])
모든 최신 엔진에서 지원됩니다.
port.postMessage(message [, { transfer }])
메시지를 채널을 통해 전송합니다. transfer에 나열된 객체는 단순히 복사되지 않고 이전되므로 전송 측에서는 더 이상 사용할 수 없습니다.
만약 transfer에 중복된 객체나 port가 포함되어 있거나 message가 복제될 수 없으면 "DataCloneError
" DOMException
을
던집니다.
port.start()
모든 최신 엔진에서 지원됩니다.
포트에서 수신된 메시지의 디스패치를 시작합니다.
port.close()
모든 최신 엔진에서 지원됩니다.
포트를 비활성화하여 더 이상 활성화되지 않도록 합니다.
각 MessagePort
객체는 다른 포트와 얽힐 수 있으며 (대칭적
관계), 각 MessagePort
객체는 처음에는 비활성화된 상태의
포트 메시지 큐라는 작업 소스를 갖습니다. 이 포트 메시지 큐는 활성화되면 다시 비활성화될 수 없으며, 큐의 메시지는 다른 큐로
이동되거나 완전히 제거될 수 있습니다. MessagePort
에는 또한
전송된 적 있음 플래그가 있으며, 이는 초기 상태에서는 false입니다.
포트의 포트 메시지 큐가 활성화되면, 이벤트 루프는 이를 작업 소스 중 하나로
사용해야 합니다. 포트의 관련 전역 객체가 Window
인 경우, 그 작업은 포트
메시지 큐에 대기되며, 이 작업은 포트의 관련 전역
객체의 연결된
Document
와 연결되어야 합니다.
문서가 완전히 활성화되어 있지만, 이벤트 리스너가 완전히 활성화되지 않은 문서의 컨텍스트에서 생성된 경우, 해당 문서가 다시 완전히 활성화될 때까지 메시지가 수신되지 않을 수 있습니다.
각 이벤트 루프에는 전송되지 않은
포트 메시지 큐라는 가상 작업 소스가 있습니다. 이는 각 포트 메시지 큐의 작업을 포함하는 것처럼 작동합니다. 각 MessagePort
의 전송된 적 있음 플래그가 false일 때, 포트 메시지 큐는 비활성화된 상태에서 이벤트 루프를 위한 작업 소스로 사용됩니다.
포트의 전송된 적 있음 플래그가 true일 때, 포트 메시지 큐는 작업 소스로서, 전송되지 않은 포트 메시지 큐의 영향을 받지 않습니다.
사용자가 두 MessagePort
객체를 얽히게 하려면 다음 단계를 실행해야 합니다:
포트 중 하나가 이미 얽혀 있으면, 그것과 얽힌 포트를 풀어줍니다.
이전에 얽혀 있던 두 포트가 MessageChannel
객체의 두 포트였다면,
해당 MessageChannel
객체는 더
이상 실제 채널을 나타내지 않습니다: 해당 객체의 두 포트는 더 이상 얽혀 있지 않습니다.
두 포트를 얽히게 하여 새로운 채널의 두 부분을 형성합니다. (이 채널을 나타내는 MessageChannel
객체는 존재하지
않습니다.)
이 단계를 거친 포트 A와 B는 얽혀 있다고 하며, 하나는 다른 하나와 얽혀 있다고 합니다.
이 명세는 이 과정을 순간적으로 설명하지만, 구현은 메시지 전달을 통해 이루어질 가능성이 높습니다. 모든 알고리즘과 마찬가지로, "단지" 최종 결과가 명세와 구별할 수 없는, 블랙박스 관점에서 동일하게 되도록 하는 것이 핵심입니다.
initiatorPort라는 MessagePort
를
주어진 포트 풀기 단계를 실행하려면 다음 단계를 따릅니다:
otherPort를 initiatorPort와 얽혀 있는 MessagePort
으로 설정합니다.
확인: otherPort가 존재하는지 확인합니다.
initiatorPort와 otherPort를 풀어 더 이상 서로 얽히지 않도록 합니다.
close
이벤트는 포트가 명시적으로 닫히지 않더라도 발생합니다.
이 이벤트가 발생하는 경우는 다음과 같습니다:
close()
메서드가 호출된 경우;
문서
가 파괴된 경우; 또는
MessagePort
가 가비지 수집된 경우.
이 이벤트는 initiatorPort가 명시적으로 닫힘을 유발했거나, 문서
가 더 이상 존재하지 않거나, 앞서 설명한 대로 이미 가비지 수집되었기
때문에 otherPort에서만 이벤트가 발생합니다.
MessagePort
객체는
전송 가능한 객체입니다. value와
dataHolder를 주어진 상태에서 전송 단계는 다음과 같습니다:
value의 전송된 적 있음 플래그를 true로 설정합니다.
dataHolder의 [[PortMessageQueue]]를 value의 포트 메시지 큐로 설정합니다.
만약 value가 다른 포트 remotePort와 얽혀 있으면, 다음을 실행합니다:
remotePort의 전송된 적 있음 플래그를 true로 설정합니다.
dataHolder의 [[RemotePort]]를 remotePort로 설정합니다.
그렇지 않으면, dataHolder의 [[RemotePort]]를 null로 설정합니다.
이들의 전송 수신 단계는 다음과 같습니다:
value의 전송된 적 있음 플래그를 true로 설정합니다.
모든 작업을 dataHolder의
[[PortMessageQueue]]에서 value의 포트 메시지 큐로 이동시키고, value의 포트 메시지 큐는 비활성화 상태로
유지하며, value의 관련
전역 객체가 Window
인 경우, 이동된 작업을
value의 관련 전역
객체의 연결된
Document
와 연결합니다.
만약 dataHolder의 [[RemotePort]]가 null이 아니면, 얽힙니다 dataHolder의 [[RemotePort]]와 value를. (이는 dataHolder의 [[RemotePort]]를 원래 이전된 포트에서 풀어줍니다.)
sourcePort, targetPort, message 및 options를 주어진 상태에서 메시지 포트 메시지 전송 단계는 다음과 같습니다:
transfer를 options["transfer
"]로
설정합니다.
만약 transfer에 sourcePort가 포함되어 있으면, "DataCloneError
" DOMException
을
던집니다.
doomed을 false로 설정합니다.
만약 targetPort가 null이 아니고 transfer에 targetPort가 포함되어 있으면, doomed을 true로 설정하고, 선택적으로 대상 포트가 자신에게 메시지를 전송하여 통신 채널이 손실되었음을 개발자 콘솔에 보고합니다.
serializeWithTransferResult을 StructuredSerializeWithTransfer(message, transfer)로 설정합니다. 예외가 발생하면 다시 던집니다.
만약 targetPort가 null이거나 doomed가 true이면, 반환합니다.
다음 단계를 실행하는 작업을 targetPort의 포트 메시지 큐에 추가합니다:
finalTargetPort를 작업이 현재 위치한 MessagePort
로 설정합니다.
이는 targetPort와 다를 수 있습니다. targetPort가 이전되어 모든 작업이 함께 이동된 경우입니다.
targetRealm을 finalTargetPort의 관련 영역으로 설정합니다.
deserializeRecord을 StructuredDeserializeWithTransfer(serializeWithTransferResult, targetRealm)로 설정합니다.
예외가 발생하면 이를 잡아 이벤트를 실행하고,
이름은 messageerror
로
하며, finalTargetPort에서 MessageEvent
를 사용하여 이벤트를
발생시킨 후 반환합니다.
messageClone을 deserializeRecord.[[Deserialized]]로 설정합니다.
newPorts을 deserializeRecord.[[TransferredValues]]에 있는 모든 MessagePort
객체로 구성된 새로운
고정 배열로 설정하고, 상대적 순서를 유지합니다.
이벤트를 실행하고, 이름은 message
로 하며,
finalTargetPort에서 MessageEvent
를 사용하고,
data
속성을 messageClone으로 초기화하며 ports
속성을 newPorts로 초기화합니다.
postMessage(message,
options)
메서드의 단계는 다음과 같습니다:
targetPort를 이 포트와 얽혀 있는 포트로 설정합니다. 없다면 null로 설정합니다.
메시지 포트 메시지 전송 단계를 실행하고, 이 포트, targetPort, message 및 options을 제공합니다.
postMessage(message,
transfer)
메서드의 단계는 다음과 같습니다:
targetPort를 이 포트와 얽혀 있는 포트로 설정합니다. 없다면 null로 설정합니다.
options를 «[ "transfer
"
→ transfer
]»로 설정합니다.
메시지 포트 메시지 전송 단계를 실행하고, 이 포트, targetPort, message 및 options을 제공합니다.
start()
메서드의
단계는 이 포트의 포트 메시지 큐를 활성화하는 것입니다.
close()
메서드의
단계는 다음과 같습니다:
이 포트의 [[Detached]] 내부 슬롯 값을 true로 설정합니다.
다음은 이벤트 핸들러(및 해당하는 이벤트 핸들러 이벤트 유형)로, MessagePort
인터페이스를 구현하는 모든 객체가 이벤트 핸들러 IDL 속성으로
지원해야 하는 것입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onmessage
모든 현재 엔진에서 지원됨.
Firefox41+
Safari5+
Chrome2+
Opera10.6+ Edge79+ Edge (Legacy)12+ Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android37+ Samsung Internet? Opera Android11.5+ | message |
onmessageerror
MessagePort/messageerror_event 모든 현재 엔진에서 지원됨.
Firefox57+
Safari16.4+
Chrome60+
Opera? Edge79+ Edge (Legacy)18 Internet Explorer아니오 Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android47+ | messageerror
|
onclose |
close |
처음으로 MessagePort
객체의 onmessage
IDL 속성이 설정될 때, 해당 포트의 포트 메시지 대기열은
start()
메서드가 호출된
것처럼 활성화되어야 합니다.
MessagePort
객체
o가 가비지 컬렉션될 때, o가 엉켜 있다면 사용자 에이전트는 분리해야 합니다.
MessagePort
객체
o가 엉켜 있고 message
또는
messageerror
이벤트 리스너가 등록된 경우, 사용자 에이전트는 o의 엉켜 있는
MessagePort
객체가
o에 대한 강한 참조를 가진 것처럼 행동해야 합니다.
또한, MessagePort
객체는 해당
객체에서 디스패치될 예정인 태스크의 태스크 큐에 참조된 이벤트가 존재하거나, MessagePort
객체의 포트 메시지 큐가 활성화되고 비어 있지 않은
동안에는 가비지 컬렉션되지 않아야 합니다.
따라서, 메시지 포트를 수신하고, 이벤트 리스너를 부여한 후 잊어버리더라도, 해당 이벤트 리스너가 메시지를 받을 수 있는 한, 채널은 유지됩니다.
물론, 이것이 채널 양쪽에서 발생하면, 두 포트 모두가 가비지 컬렉션될 수 있습니다. 이는 두 포트가 서로 강한 참조를 가지고 있음에도 불구하고, 라이브 코드에서 접근할 수 없기 때문입니다. 하지만, 메시지 포트에 대기 중인 메시지가 있으면 가비지 컬렉션되지 않습니다.
작성자들은 MessagePort
객체를 명시적으로 닫아
분리하여 리소스를 다시 수집할 수 있도록 하는 것을 강력히 권장합니다. 많은 MessagePort
객체를 생성하고 닫지 않은
채로 버리면, 가비지 컬렉션이 즉시 수행되지 않는 경우가 많아 일시적인 메모리 사용량이 높아질 수 있습니다. 특히, 가비지 컬렉션이 프로세스 간 조정을 포함할 수 있는 MessagePort
의 경우에는 더욱
그렇습니다.
모든 현재 엔진에서 지원됨.
모든 현재 엔진에서 지원됨.
동일한 사용자 에이전트에서 같은 사용자가 열었지만 다른 관련 없는 브라우징 컨텍스트에 있는 동일 출처의 페이지는 가끔 서로에게 알림을 보내야 할 필요가 있습니다. 예를 들어, "여기에서 사용자가 로그인했습니다. 자격 증명을 다시 확인하세요"와 같은 경우입니다.
공유 상태의 잠금 관리를 관리하거나, 서버와 여러 로컬 클라이언트 간의 리소스 동기화를 관리하거나, 원격 호스트와 WebSocket
연결을 공유하는 등의 복잡한 경우에는 공유
워커가 가장 적합한 솔루션입니다.
그러나 공유 워커가 비합리적인 오버헤드가 될 수 있는 단순한 경우에는 이 섹션에서 설명하는 간단한 채널 기반 방송 메커니즘을 사용할 수 있습니다.
[Exposed =(Window ,Worker )]
interface BroadcastChannel : EventTarget {
constructor (DOMString name );
readonly attribute DOMString name ;
undefined postMessage (any message );
undefined close ();
attribute EventHandler onmessage ;
attribute EventHandler onmessageerror ;
};
broadcastChannel = new BroadcastChannel(name)
BroadcastChannel/BroadcastChannel
모든 현재 엔진에서 지원됨.
지정된 채널 이름에 대해 메시지를 송수신할 수 있는 새 BroadcastChannel
객체를 반환합니다.
broadcastChannel.name
모든 현재 엔진에서 지원됨.
채널 이름(생성자에 전달됨)을 반환합니다.
broadcastChannel.postMessage(message)
모든 현재 엔진에서 지원됨.
이 채널에 설정된 다른 BroadcastChannel
객체로 지정된 메시지를 보냅니다. 메시지는 구조화된 객체일 수 있습니다. 예: 중첩된 객체 및 배열 등.
broadcastChannel.close()
모든 현재 엔진에서 지원됨.
BroadcastChannel
객체를 닫아 가비지 컬렉션할 수 있도록 합니다.
BroadcastChannel
객체는 채널 이름과 닫힌 플래그를 가집니다.
new BroadcastChannel(name)
생성자의 단계는 다음과 같습니다:
name
getter 단계는 this의 채널 이름을 반환하는 것입니다.
BroadcastChannel
객체는 메시징 가능 상태라고 하며, 이는 해당 객체의 관련 글로벌 객체가 다음 중 하나일 때 발생합니다:
Window
객체로, 해당
연관된
Document
가 완전히 활성화된 상태이거나,
WorkerGlobalScope
객체로, 해당 객체의 닫힘 플래그가 false이고,
worker가 일시 정지
가능한 worker가 아닌 경우.
postMessage(message)
메서드 단계는 다음과 같습니다:
this의 닫힌 플래그가
true이면 "InvalidStateError
" DOMException
을
throw 합니다.
serialized를 StructuredSerialize(message)로 설정합니다. 모든 예외를 다시 throw합니다.
sourceStorageKey를 저장 목적으로 아닌 용도로 저장 키를 획득의 결과로 설정합니다. this의 관련 설정 객체와 함께 실행합니다.
destinations을 다음 기준에 맞는 BroadcastChannel
객체 목록으로 설정합니다:
source를 destinations에서 제거합니다.
모든 destination 객체들을 관련 에이전트가 동일한 BroadcastChannel
객체로 정렬하며, 가장 오래된 객체가 먼저 나옵니다. (이는 완전한 정렬을 정의하지 않습니다. 이 제약 조건 내에서 사용자 에이전트는 구현 정의 방식으로 목록을 정렬할 수 있습니다.)
각 destination 객체에 대해, destination의 관련 글로벌 객체에 주어진 DOM 조작 작업 소스에서 전역 작업을 큐에 추가합니다:
만약 destination의 닫힌 플래그가 true이면, 이 단계를 중단합니다.
targetRealm을 destination의 관련 영역으로 설정합니다.
data를 StructuredDeserialize(serialized, targetRealm)로 설정합니다.
이 과정에서 예외가 발생하면 이를 잡고, 이벤트를 발생시켜 messageerror
이벤트를 destination에서 MessageEvent
와
함께 origin 속성을
sourceOrigin의 시리얼화된
값으로 초기화하여 발송하고, 이 단계를 중단합니다.
이벤트를 발생시킵니다
이름이 message
인
이벤트를
destination에서,
MessageEvent
를
사용하여 발생시키며,
data
속성을
data로 초기화하고, origin
속성을 sourceOrigin의 직렬화 값으로
초기화합니다.
메시지 또는 BroadcastChannel
객체에 이벤트 리스너가 등록되어 있지 않은 상태에서, 닫힌 플래그가 false인 경우, 관련
글로벌 객체는 해당 BroadcastChannel
객체에 강한 참조를 가져야 합니다.
close()
메서드의 단계는 this의 닫힌 플래그를 true로 설정하는
것입니다.
작성자는 더 이상 필요하지 않은 BroadcastChannel
객체를 명시적으로 닫아 가비지 컬렉션할 수 있도록 하는 것이 좋습니다. 많은 BroadcastChannel
객체를 생성하고, 이를 닫지 않고 이벤트 리스너를 남겨두면 객체가 계속 살아남아 페이지나 워커가 닫힐 때까지 메모리 누수가 발생할 수 있습니다.
다음은 이벤트 핸들러 (및 해당하는
이벤트
핸들러 이벤트 유형)로서, 이벤트 핸들러 IDL 속성으로 지원해야 하며,
BroadcastChannel
인터페이스를 구현하는 모든 객체가 지원해야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onmessage
BroadcastChannel/message_event 모든 현재 엔진에서 지원. Firefox38+Safari15.4+Chrome54+
Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | message
|
onmessageerror
BroadcastChannel/messageerror_event 모든 현재 엔진에서 지원. Firefox57+Safari15.4+Chrome60+
Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | messageerror
|
예를 들어, 페이지에서 사용자가 다른 탭에서 로그아웃할 때 이를 감지하고자 할 수 있습니다:
var authChannel = new BroadcastChannel( 'auth' );
authChannel. onmessage = function ( event) {
if ( event. data == 'logout' )
showLogout();
}
function logoutRequested() {
// 사용자가 로그아웃을 요청할 때 호출됩니다
doLogout();
showLogout();
authChannel. postMessage( 'logout' );
}
function doLogout() {
// 실제로 사용자를 로그아웃 (예: 쿠키 삭제)
// ...
}
function showLogout() {
// 로그아웃 상태임을 UI에 표시
// ...
}
모든 현재 엔진에서 지원.
이 섹션은 규범적이지 않습니다.
이 명세서는 사용자 인터페이스 스크립트와 독립적으로 백그라운드에서 스크립트를 실행할 수 있는 API를 정의합니다.
이를 통해 클릭이나 기타 사용자 상호작용에 반응하는 스크립트에 의해 중단되지 않는 장기 실행 스크립트를 실행할 수 있으며, 페이지의 응답성을 유지하기 위해 양보하지 않고 긴 작업을 수행할 수 있습니다.
이 명세서에서 "워커"라고 하는 이러한 백그라운드 스크립트는 상대적으로 무겁고, 대량으로 사용하는 것을 권장하지 않습니다. 예를 들어, 4메가픽셀 이미지의 각 픽셀마다 하나의 워커를 시작하는 것은 적절하지 않습니다. 아래 예제에서는 워커의 적절한 사용 사례를 보여줍니다.
일반적으로 워커는 장기 실행을 예상하며, 높은 시작 성능 비용과 높은 인스턴스당 메모리 비용이 발생합니다.
이 섹션은 규범적이지 않습니다.
워커를 다양한 용도로 사용할 수 있습니다. 다음 하위 섹션에서는 이러한 사용 예제를 보여줍니다.
이 섹션은 규범적이지 않습니다.
워커의 가장 간단한 사용법은 사용자 인터페이스를 방해하지 않고 계산 집약적인 작업을 수행하는 것입니다.
이 예제에서는 메인 문서가 워커를 생성하여 (간단하게) 소수를 계산하고, 발견된 최신 소수를 점진적으로 표시합니다.
메인 페이지는 다음과 같습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Worker example: One-core computation</ title >
</ head >
< body >
< p > The highest prime number discovered so far is: < output id = "result" ></ output ></ p >
< script >
var worker = new Worker( 'worker.js' );
worker. onmessage = function ( event) {
document. getElementById( 'result' ). textContent = event. data;
};
</ script >
</ body >
</ html >
Worker()
생성자 호출은
워커를 생성하고, 그 워커를 나타내는 Worker
객체를 반환하며, 이 객체를
사용하여 워커와 통신할 수 있습니다. 이 객체의 onmessage
이벤트 핸들러를 통해 워커로부터 메시지를 받을 수 있습니다.
워커 자체는 다음과 같습니다:
var n = 1 ;
search: while ( true ) {
n += 1 ;
for ( var i = 2 ; i <= Math. sqrt( n); i += 1 )
if ( n % i == 0 )
continue search;
// 소수를 찾았습니다!
postMessage( n);
}
이 코드의 대부분은 최적화되지 않은 소수 검색입니다. postMessage()
메서드는 소수가 발견되었을 때 페이지로 메시지를 보내는 데 사용됩니다.
이 섹션은 규범적이지 않습니다.
지금까지의 예제들은 클래식 스크립트를 실행하는 워커를 보여줬습니다.
대신, 워커는 모듈 스크립트를 사용하여 인스턴스화될 수 있으며, 이는
JavaScript import
문을 사용하여 다른 모듈을 가져올 수 있고, 기본적으로 엄격 모드가 적용되며, 상위 수준의 선언이 워커의 전역 범위를 오염시키지 않는 등의
일반적인 이점을 제공합니다.
import
문이 사용 가능하므로, importScripts()
메서드는 모듈 워커 내에서 자동으로 실패합니다.
이 예제에서는 메인 문서가 오프-메인-스레드 이미지 조작을 수행하기 위해 워커를 사용합니다. 필터는 다른 모듈에서 가져옵니다.
메인 페이지는 다음과 같습니다:
<!DOCTYPE html>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Worker example: image decoding</ title >
< p >
< label >
Type an image URL to decode
< input type = "url" id = "image-url" list = "image-list" >
< datalist id = "image-list" >
< option value = "https://html.spec.whatwg.org/images/drawImage.png" >
< option value = "https://html.spec.whatwg.org/images/robots.jpeg" >
< option value = "https://html.spec.whatwg.org/images/arcTo2.png" >
</ datalist >
</ label >
</ p >
< p >
< label >
Choose a filter to apply
< select id = "filter" >
< option value = "none" > none</ option >
< option value = "grayscale" > grayscale</ option >
< option value = "brighten" > brighten by 20%</ option >
</ select >
</ label >
</ p >
< div id = "output" ></ div >
</ script type = "module" >
const worker = new Worker( "worker.js" , { type: "module" });
worker. onmessage = receiveFromWorker;
const url = document. querySelector( "#image-url" );
const filter = document. querySelector( "#filter" );
const output = document. querySelector( "#output" );
url. oninput = updateImage;
filter. oninput = sendToWorker;
let imageData, context;
function updateImage() {
const img = new Image();
img. src = url. value;
img. onload = () => {
const canvas = document. createElement( "canvas" );
canvas. width = img. width;
canvas. height = img. height;
context = canvas. getContext( "2d" );
context. drawImage( img, 0 , 0 );
imageData = context. getImageData( 0 , 0 , canvas. width, canvas. height);
sendToWorker();
output. replaceChildren( canvas);
};
}
function sendToWorker() {
worker. postMessage({ imageData, filter: filter. value });
}
function receiveFromWorker( e) {
context. putImageData( e. data, 0 , 0 );
}
</ script >
그런 다음 워커 파일은 다음과 같습니다:
import * as filters from "./filters.js" ;
self. onmessage = e => {
const { imageData, filter } = e. data;
filters[ filter]( imageData);
self. postMessage( imageData, [ imageData. data. buffer]);
};
이는 filters.js
파일을 가져옵니다:
export function none() {}
export function grayscale({ data: d }) {
for ( let i = 0 ; i < d. length; i += 4 ) {
const [ r, g, b] = [ d[ i], d[ i + 1 ], d[ i + 2 ]];
// CIE 휘도 값 (RGB 기준)
// 인간의 눈은 빨간색과 파란색을 잘 인식하지 못하므로, 이들을 약화시킵니다.
d[ i] = d[ i + 1 ] = d[ i + 2 ] = 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
};
export function brighten({ data: d }) {
for ( let i = 0 ; i < d. length; ++ i) {
d[ i] *= 1.2 ;
}
};
모든 현재 엔진에서 지원됨.
이 섹션은 규범적이지 않습니다.
이 섹션에서는 Hello World 예제를 사용하여 공유 워커를 소개합니다. 공유 워커는 각 워커가 여러 연결을 가질 수 있기 때문에 약간 다른 API를 사용합니다.
첫 번째 예제에서는 페이지에 연결할 때 워커와 연결하는 방법과 워커가 페이지로 메시지를 보내는 방법을 보여줍니다. 수신된 메시지는 로그에 표시됩니다.
여기에 HTML 페이지가 있습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Shared workers: demo 1</ title >
< pre id = "log" > Log:</ pre >
< script >
var worker = new SharedWorker( 'test.js' );
var log = document. getElementById( 'log' );
worker. port. onmessage = function ( e) { // note: not worker.onmessage!
log. textContent += '\n' + e. data;
}
</ script >
여기 JavaScript 워커가 있습니다:
onconnect = function ( e) {
var port = e. ports[ 0 ];
port. postMessage( 'Hello World!' );
}
두 번째 예제는 첫 번째 예제를 확장하여 두 가지를 변경합니다: 첫째, 메시지는 이벤트 핸들러 IDL 속성 대신
addEventListener()
를 사용하여 수신됩니다. 둘째, 워커에 메시지를 보내, 워커가 다시 메시지를 보내도록 합니다. 수신된 메시지는 다시 로그에
표시됩니다.
여기 HTML 페이지가 있습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Shared workers: demo 2</ title >
< pre id = "log" > Log:</ pre >
< script >
var worker = new SharedWorker( 'test.js' );
var log = document. getElementById( 'log' );
worker. port. addEventListener( 'message' , function ( e) {
log. textContent += '\n' + e. data;
}, false );
worker. port. start(); // note: need this when using addEventListener
worker. port. postMessage( 'ping' );
</ script >
여기 JavaScript 워커가 있습니다:
onconnect = function ( e) {
var port = e. ports[ 0 ];
port. postMessage( 'Hello World!' );
port. onmessage = function ( e) {
port. postMessage( 'pong' ); // not e.ports[0].postMessage!
// e.target.postMessage('pong'); would work also
}
}
마지막으로, 두 페이지가 동일한 워커에 연결되는 방법을 보여주는 예제가 확장됩니다. 이 경우, 두 번째 페이지는 단지 첫 번째 페이지에 있는 iframe
에 있을
뿐이지만, 동일한 원칙은 별도의 최상위 탐색
가능 페이지에도 적용됩니다.
다음은 외부 HTML 페이지입니다:
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Shared workers: demo 3</ title >
< pre id = "log" > Log:</ pre >
< script >
var worker = new SharedWorker( 'test.js' );
var log = document. getElementById( 'log' );
worker. port. addEventListener( 'message' , function ( e) {
log. textContent += '\n' + e. data;
}, false );
worker. port. start();
worker. port. postMessage( 'ping' );
</ script >
< iframe src = "inner.html" ></ iframe >
다음은 내부 HTML 페이지입니다:
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Shared workers: demo 3 inner frame</ title >
< pre id = log > Inner log:</ pre >
< script >
var worker = new SharedWorker( 'test.js' );
var log = document. getElementById( 'log' );
worker. port. onmessage = function ( e) {
log. textContent += '\n' + e. data;
}
</ script >
다음은 JavaScript 워커입니다:
var count = 0 ;
onconnect = function ( e) {
count += 1 ;
var port = e. ports[ 0 ];
port. postMessage( 'Hello World! You are connection #' + count);
port. onmessage = function ( e) {
port. postMessage( 'pong' );
}
}
이 섹션은 비규범적입니다.
이 예제에서는 동일한 지도를 보는 여러 개의 창(뷰어)을 열 수 있습니다. 모든 창은 동일한 지도 정보를 공유하며, 하나의 워커가 모든 뷰어를 조정합니다. 각 뷰어는 독립적으로 이동할 수 있지만, 지도의 데이터를 설정하면 모든 뷰어가 업데이트됩니다.
메인 페이지는 특별한 기능이 없으며, 단순히 뷰어를 여는 방법을 제공합니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Workers example: Multiviewer</ title >
< script >
function openViewer() {
window. open( 'viewer.html' );
}
</ script >
</ head >
< body >
< p >< button type = button onclick = "openViewer()" > Open a new
viewer</ button ></ p >
< p > Each viewer opens in a new window. You can have as many viewers
as you like, they all view the same data.</ p >
</ body >
</ html >
뷰어는 더 복잡합니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Workers example: Multiviewer viewer</ title >
< script >
var worker = new SharedWorker( 'worker.js' , 'core' );
// CONFIGURATION
function configure( event) {
if ( event. data. substr( 0 , 4 ) != 'cfg ' ) return ;
var name = event. data. substr( 4 ). split( ' ' , 1 )[ 0 ];
// update display to mention our name is name
document. getElementsByTagName( 'h1' )[ 0 ]. textContent += ' ' + name;
// no longer need this listener
worker. port. removeEventListener( 'message' , configure, false );
}
worker. port. addEventListener( 'message' , configure, false );
// MAP
function paintMap( event) {
if ( event. data. substr( 0 , 4 ) != 'map ' ) return ;
var data = event. data. substr( 4 ). split( ',' );
// display tiles data[0] .. data[8]
var canvas = document. getElementById( 'map' );
var context = canvas. getContext( '2d' );
for ( var y = 0 ; y < 3 ; y += 1 ) {
for ( var x = 0 ; x < 3 ; x += 1 ) {
var tile = data[ y * 3 + x];
if ( tile == '0' )
context. fillStyle = 'green' ;
else
context. fillStyle = 'maroon' ;
context. fillRect( x * 50 , y * 50 , 50 , 50 );
}
}
}
worker. port. addEventListener( 'message' , paintMap, false );
// PUBLIC CHAT
function updatePublicChat( event) {
if ( event. data. substr( 0 , 4 ) != 'txt ' ) return ;
var name = event. data. substr( 4 ). split( ' ' , 1 )[ 0 ];
var message = event. data. substr( 4 + name. length + 1 );
// display "<name> message" in public chat
var public = document. getElementById( 'public' );
var p = document. createElement( 'p' );
var n = document. createElement( 'button' );
n. textContent = '<' + name + '> ' ;
n. onclick = function () { worker. port. postMessage( 'msg ' + name); };
p. appendChild( n);
var m = document. createElement( 'span' );
m. textContent = message;
p. appendChild( m);
public. appendChild( p);
}
worker. port. addEventListener( 'message' , updatePublicChat, false );
// PRIVATE CHAT
function startPrivateChat( event) {
if ( event. data. substr( 0 , 4 ) != 'msg ' ) return ;
var name = event. data. substr( 4 ). split( ' ' , 1 )[ 0 ];
var port = event. ports[ 0 ];
// display a private chat UI
var ul = document. getElementById( 'private' );
var li = document. createElement( 'li' );
var h3 = document. createElement( 'h3' );
h3. textContent = 'Private chat with ' + name;
li. appendChild( h3);
var div = document. createElement( 'div' );
var addMessage = function ( name, message) {
var p = document. createElement( 'p' );
var n = document. createElement( 'strong' );
n. textContent = '<' + name + '> ' ;
p. appendChild( n);
var t = document. createElement( 'span' );
t. textContent = message;
p. appendChild( t);
div. appendChild( p);
};
port. onmessage = function ( event) {
addMessage( name, event. data);
};
li. appendChild( div);
var form = document. createElement( 'form' );
var p = document. createElement( 'p' );
var input = document. createElement( 'input' );
input. size = 50 ;
p. appendChild( input);
p. appendChild( document. createTextNode( ' ' ));
var button = document. createElement( 'button' );
button. textContent = 'Post' ;
p. appendChild( button);
form. onsubmit = function () {
port. postMessage( input. value);
addMessage( 'me' , input. value);
input. value = '' ;
return false ;
};
form. appendChild( p);
li. appendChild( form);
ul. appendChild( li);
}
worker. port. addEventListener( 'message' , startPrivateChat, false );
worker. port. start();
</ script >
</ head >
< body >
< h1 > Viewer</ h1 >
< h2 > Map</ h2 >
< p >< canvas id = "map" height = 150 width = 150 ></ canvas ></ p >
< p >
< button type = button onclick = "worker.port.postMessage('mov left')" > Left</ button >
< button type = button onclick = "worker.port.postMessage('mov up')" > Up</ button >
< button type = button onclick = "worker.port.postMessage('mov down')" > Down</ button >
< button type = button onclick = "worker.port.postMessage('mov right')" > Right</ button >
< button type = button onclick = "worker.port.postMessage('set 0')" > Set 0</ button >
< button type = button onclick = "worker.port.postMessage('set 1')" > Set 1</ button >
</ p >
< h2 > Public Chat</ h2 >
< div id = "public" ></ div >
< form onsubmit = "worker.port.postMessage('txt ' + message.value); message.value = ''; return false;" >
< p >
< input type = "text" name = "message" size = "50" >
< button > Post</ button >
</ p >
</ form >
< h2 > Private Chat</ h2 >
< ul id = "private" ></ ul >
</ body >
</ html >
뷰어가 작성된 방식에 대해 주목할 만한 몇 가지 주요 사항이 있습니다.
다중 리스너. 단일 메시지 처리 함수 대신, 여기서의 코드는 여러 이벤트 리스너를 연결하고, 각 리스너는 메시지와 관련이 있는지 빠르게 확인합니다. 이 예제에서는 큰 차이가 없지만, 여러 저자가 워커와 통신하기 위해 단일 포트를 사용하여 협업하려는 경우, 단일 이벤트 처리 함수에 모든 변경을 해야 하는 대신 독립적인 코드를 작성할 수 있습니다.
이와 같은 방식으로 이벤트 리스너를 등록하면, 이 예제의 configure()
메서드에서처럼 특정 리스너가 필요 없을 때 이를 등록 해제할 수도 있습니다.
마지막으로, 워커:
var nextName = 0 ;
function getNextName() {
// this could use more friendly names
// but for now just return a number
return nextName++ ;
}
var map = [
[ 0 , 0 , 0 , 0 , 0 , 0 , 0 ],
[ 1 , 1 , 0 , 1 , 0 , 1 , 1 ],
[ 0 , 1 , 0 , 1 , 0 , 0 , 0 ],
[ 0 , 1 , 0 , 1 , 0 , 1 , 1 ],
[ 0 , 0 , 0 , 1 , 0 , 0 , 0 ],
[ 1 , 0 , 0 , 1 , 1 , 1 , 1 ],
[ 1 , 1 , 0 , 1 , 1 , 0 , 1 ],
];
function wrapX( x) {
if ( x < 0 ) return wrapX( x + map[ 0 ]. length);
if ( x >= map[ 0 ]. length) return wrapX( x - map[ 0 ]. length);
return x;
}
function wrapY( y) {
if ( y < 0 ) return wrapY( y + map. length);
if ( y >= map[ 0 ]. length) return wrapY( y - map. length);
return y;
}
function wrap( val, min, max) {
if ( val < min)
return val + ( max- min) + 1 ;
if ( val > max)
return val - ( max- min) - 1 ;
return val;
}
function sendMapData( viewer) {
var data = '' ;
for ( var y = viewer. y- 1 ; y <= viewer. y+ 1 ; y += 1 ) {
for ( var x = viewer. x- 1 ; x <= viewer. x+ 1 ; x += 1 ) {
if ( data != '' )
data += ',' ;
data += map[ wrap( y, 0 , map[ 0 ]. length- 1 )][ wrap( x, 0 , map. length- 1 )];
}
}
viewer. port. postMessage( 'map ' + data);
}
var viewers = {};
onconnect = function ( event) {
var name = getNextName();
event. ports[ 0 ]. _data = { port: event. ports[ 0 ], name: name, x: 0 , y: 0 , };
viewers[ name] = event. ports[ 0 ]. _data;
event. ports[ 0 ]. postMessage( 'cfg ' + name);
event. ports[ 0 ]. onmessage = getMessage;
sendMapData( event. ports[ 0 ]. _data);
};
function getMessage( event) {
switch ( event. data. substr( 0 , 4 )) {
case 'mov ' :
var direction = event. data. substr( 4 );
var dx = 0 ;
var dy = 0 ;
switch ( direction) {
case 'up' : dy = - 1 ; break ;
case 'down' : dy = 1 ; break ;
case 'left' : dx = - 1 ; break ;
case 'right' : dx = 1 ; break ;
}
event. target. _data. x = wrapX( event. target. _data. x + dx);
event. target. _data. y = wrapY( event. target. _data. y + dy);
sendMapData( event. target. _data);
break ;
case 'set ' :
var value = event. data. substr( 4 );
map[ event. target. _data. y][ event. target. _data. x] = value;
for ( var viewer in viewers)
sendMapData( viewers[ viewer]);
break ;
case 'txt ' :
var name = event. target. _data. name;
var message = event. data. substr( 4 );
for ( var viewer in viewers)
viewers[ viewer]. port. postMessage( 'txt ' + name + ' ' + message);
break ;
case 'msg ' :
var party1 = event. target. _data;
var party2 = viewers[ event. data. substr( 4 ). split( ' ' , 1 )[ 0 ]];
if ( party2) {
var channel = new MessageChannel();
party1. port. postMessage( 'msg ' + party2. name, [ channel. port1]);
party2. port. postMessage( 'msg ' + party1. name, [ channel. port2]);
}
break ;
}
}
여러 페이지에 연결. 이 스크립트는 onconnect
이벤트 리스너를 사용하여 여러 연결을 수신합니다.
직접 채널. 워커가 한 뷰어로부터 다른 뷰어를 지목하는 "msg" 메시지를 받을 때, 두 뷰어 간에 직접 연결을 설정하여 워커가 모든 메시지를 중계하지 않고도 두 뷰어가 직접 통신할 수 있도록 합니다.
이 섹션은 비규범적입니다.
멀티코어 CPU가 보편화됨에 따라 더 나은 성능을 얻는 한 가지 방법은 계산적으로 비싼 작업을 여러 워커로 분할하는 것입니다. 이 예제에서는 1부터 10,000,000까지의 각 숫자에 대해 수행해야 하는 계산적으로 비싼 작업을 10개의 서브 워커에 분산합니다.
메인 페이지는 다음과 같으며, 결과만을 보고합니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Worker example: Multicore computation</ title >
</ head >
< body >
< p > Result: < output id = "result" ></ output ></ p >
< script >
var worker = new Worker( 'worker.js' );
worker. onmessage = function ( event) {
document. getElementById( 'result' ). textContent = event. data;
};
</ script >
</ body >
</ html >
워커 자체는 다음과 같습니다:
// 설정
var num_workers = 10 ;
var items_per_worker = 1000000 ;
// 워커 시작
var result = 0 ;
var pending_workers = num_workers;
for ( var i = 0 ; i < num_workers; i += 1 ) {
var worker = new Worker( 'core.js' );
worker. postMessage( i * items_per_worker);
worker. postMessage(( i+ 1 ) * items_per_worker);
worker. onmessage = storeResult;
}
// 결과 처리
function storeResult( event) {
result += 1 * event. data;
pending_workers -= 1 ;
if ( pending_workers <= 0 ) postMessage( result); // 완료!
}
이 코드는 서브 워커를 시작하기 위한 루프와 모든 서브 워커가 응답할 때까지 기다리는 핸들러로 구성됩니다.
서브 워커는 다음과 같이 구현됩니다:
var start;
onmessage = getStart;
function getStart( event) {
start = 1 * event. data;
onmessage = getEnd;
}
var end;
function getEnd( event) {
end = 1 * event. data;
onmessage = null ;
work();
}
function work() {
var result = 0 ;
for ( var i = start; i < end; i += 1 ) {
// 여기서 복잡한 계산 수행
result += 1 ;
}
postMessage( result);
close();
}
서브 워커는 두 개의 이벤트에서 두 숫자를 받고, 지정된 범위의 숫자에 대해 계산을 수행한 후 결과를 부모에게 보고합니다.
이 섹션은 비규범적입니다.
암호화 라이브러리가 세 가지 작업을 제공한다고 가정해 봅시다:
라이브러리 자체는 다음과 같습니다:
function handleMessage( e) {
if ( e. data == "genkeys" )
genkeys( e. ports[ 0 ]);
else if ( e. data == "encrypt" )
encrypt( e. ports[ 0 ]);
else if ( e. data == "decrypt" )
decrypt( e. ports[ 0 ]);
}
function genkeys( p) {
var keys = _generateKeyPair();
p. postMessage( keys[ 0 ]);
p. postMessage( keys[ 1 ]);
}
function encrypt( p) {
var key, state = 0 ;
p. onmessage = function ( e) {
if ( state == 0 ) {
key = e. data;
state = 1 ;
} else {
p. postMessage( _encrypt( key, e. data));
}
};
}
function decrypt( p) {
var key, state = 0 ;
p. onmessage = function ( e) {
if ( state == 0 ) {
key = e. data;
state = 1 ;
} else {
p. postMessage( _decrypt( key, e. data));
}
};
}
// 공유 워커와 전용 워커로 사용 지원
if ( 'onmessage' in this ) // dedicated worker
onmessage = handleMessage;
else // shared worker
onconnect = function ( e) { e. port. onmessage = handleMessage; }
// the "crypto" functions:
function _generateKeyPair() {
return [ Math. random(), Math. random()];
}
function _encrypt( k, s) {
return 'encrypted-' + k + ' ' + s;
}
function _decrypt( k, s) {
return s. substr( s. indexOf( ' ' ) + 1 );
}
여기서의 암호화 함수는 실제 암호화를 수행하지 않는 스텁이라는 점에 유의하십시오.
이 라이브러리는 다음과 같이 사용할 수 있습니다:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Worker example: Crypto library</ title >
< script >
const cryptoLib = new Worker( 'libcrypto-v1.js' ); // or could use 'libcrypto-v2.js'
function startConversation( source, message) {
const messageChannel = new MessageChannel();
source. postMessage( message, [ messageChannel. port2]);
return messageChannel. port1;
}
function getKeys() {
let state = 0 ;
startConversation( cryptoLib, "genkeys" ). onmessage = function ( e) {
if ( state === 0 )
document. getElementById( 'public' ). value = e. data;
else if ( state === 1 )
document. getElementById( 'private' ). value = e. data;
state += 1 ;
};
}
function enc() {
const port = startConversation( cryptoLib, "encrypt" );
port. postMessage( document. getElementById( 'public' ). value);
port. postMessage( document. getElementById( 'input' ). value);
port. onmessage = function ( e) {
document. getElementById( 'input' ). value = e. data;
port. close();
};
}
function dec() {
const port = startConversation( cryptoLib, "decrypt" );
port. postMessage( document. getElementById( 'private' ). value);
port. postMessage( document. getElementById( 'input' ). value);
port. onmessage = function ( e) {
document. getElementById( 'input' ). value = e. data;
port. close();
};
}
</ script >
< style >
textarea { display : block ; }
</ style >
</ head >
< body onload = "getKeys()" >
< fieldset >
< legend > Keys</ legend >
< p >< label > Public Key: < textarea id = "public" ></ textarea ></ label ></ p >
< p >< label > Private Key: < textarea id = "private" ></ textarea ></ label ></ p >
</ fieldset >
< p >< label > Input: < textarea id = "input" ></ textarea ></ label ></ p >
< p >< button onclick = "enc()" > Encrypt</ button > < button onclick = "dec()" > Decrypt</ button ></ p >
</ body >
</ html >
그러나 API의 후속 버전에서는 모든 암호화 작업을 서브 워커로 위임할 수 있습니다. 이 작업은 다음과 같이 수행할 수 있습니다:
function handleMessage( e) {
if ( e. data == "genkeys" )
genkeys( e. ports[ 0 ]);
else if ( e. data == "encrypt" )
encrypt( e. ports[ 0 ]);
else if ( e. data == "decrypt" )
decrypt( e. ports[ 0 ]);
}
function genkeys( p) {
var generator = new Worker( 'libcrypto-v2-generator.js' );
generator. postMessage( '' , [ p]);
}
function encrypt( p) {
p. onmessage = function ( e) {
var key = e. data;
var encryptor = new Worker( 'libcrypto-v2-encryptor.js' );
encryptor. postMessage( key, [ p]);
};
}
function encrypt( p) {
p. onmessage = function ( e) {
var key = e. data;
var decryptor = new Worker( 'libcrypto-v2-decryptor.js' );
decryptor. postMessage( key, [ p]);
};
}
// 공유 워커와 전용 워커로 사용 지원
if ( 'onmessage' in this ) // dedicated worker
onmessage = handleMessage;
else // shared worker
onconnect = function ( e) { e. ports[ 0 ]. onmessage = handleMessage };
작은 서브 워커는 다음과 같습니다.
키 쌍 생성의 경우:
onmessage = function ( e) {
var k = _generateKeyPair();
e. ports[ 0 ]. postMessage( k[ 0 ]);
e. ports[ 0 ]. postMessage( k[ 1 ]);
close();
}
function _generateKeyPair() {
return [ Math. random(), Math. random()];
}
암호화의 경우:
onmessage = function ( e) {
var key = e. data;
e. ports[ 0 ]. onmessage = function ( e) {
var s = e. data;
postMessage( _encrypt( key, s));
}
}
function _encrypt( k, s) {
return 'encrypted-' + k + ' ' + s;
}
복호화의 경우:
onmessage = function ( e) {
var key = e. data;
e. ports[ 0 ]. onmessage = function ( e) {
var s = e. data;
postMessage( _decrypt( key, s));
}
}
function _decrypt( k, s) {
return s. substr( s. indexOf( ' ' ) + 1 );
}
API 사용자는 이러한 처리가 발생하는지조차 알 필요가 없다는 점에 주목하십시오 — API는 변경되지 않았습니다. 라이브러리는 메시지 채널을 사용하여 데이터를 수신하면서도 API를 변경하지 않고 서브 워커로 작업을 위임할 수 있습니다.
이 섹션은 비규범적입니다.
워커를 생성하려면 JavaScript 파일의 URL이 필요합니다. Worker()
생성자는 해당 파일의 URL을 유일한
인수로 받아들이며, 그런 다음 워커가 생성되어 반환됩니다:
var worker = new Worker( 'helper.js' );
워커 스크립트를 기본 클래식 스크립트 대신 모듈 스크립트로 해석하려면, 약간 다른 서명을 사용해야 합니다:
var worker = new Worker( 'helper.mjs' , { type: "module" });
이 섹션은 비규범적입니다.
전용 워커는 백그라운드에서 MessagePort
객체를
사용하므로, 구조화된 데이터 전송, 바이너리 데이터 전송, 다른 포트 전송과 같은 모든 기능을 지원합니다.
전용 워커로부터 메시지를 받으려면 onmessage
이벤트
핸들러 IDL 속성을 Worker
객체에서
사용하십시오:
worker. onmessage = function ( event) { ... };
addEventListener()
메서드도 사용할 수 있습니다.
전용 워커에서 사용되는 암시적 MessagePort
는 생성 시
암시적으로 포트 메시지 큐가 활성화되므로, MessagePort
인터페이스의 start()
메서드에 해당하는 것이 Worker
인터페이스에는 없습니다.
워커에 데이터를 전송하려면 postMessage()
메서드를 사용하십시오. 이 통신 채널을 통해 구조화된 데이터를 전송할 수 있습니다. ArrayBuffer
객체를 효율적으로 전송하려면(복제하지 않고 전달하여) 두 번째 인수에 배열로 나열하십시오.
worker. postMessage({
operation: 'find-edges' ,
input: buffer, // ArrayBuffer 객체
threshold: 0.6 ,
}, [ buffer]);
워커 내부에서 메시지를 받으려면 onmessage
이벤트 핸들러 IDL 속성을 사용합니다.
onmessage = function ( event) { ... };
addEventListener()
메서드를 다시 사용할 수도 있습니다.
어떤 경우든 데이터는 이벤트 객체의 data
속성에서 제공됩니다.
메시지를 다시 보내려면 postMessage()
를
다시 사용하십시오. 이 역시 동일한 방식으로 구조화된 데이터를 지원합니다.
postMessage( event. data. input, [ event. data. input]); // 버퍼를 다시 전송합니다
모든 현재 엔진에서 지원됩니다.
이 섹션은 비규범적입니다.
공유 워커는 생성할 때 사용된 스크립트의 URL로 식별되며, 선택적으로 명시적인 이름을 가질 수 있습니다. 이 이름은 특정 공유 워커의 여러 인스턴스를 시작할 수 있게 합니다.
공유 워커는 origin을 기준으로 범위가 지정됩니다. 동일한 이름을 사용하는 두 개의 다른 사이트는 충돌하지 않지만, 동일한 사이트의 다른 페이지에서 동일한 공유 워커 이름을 사용하려고 하지만 다른 스크립트 URL을 사용할 경우 실패할 것입니다.
공유 워커 생성은 SharedWorker()
생성자를
사용하여 수행됩니다. 이 생성자는 첫 번째 인수로 사용할 스크립트의 URL을, 두 번째 인수로 워커의 이름(있는 경우)을 받습니다.
var worker = new SharedWorker( 'service.js' );
공유 워커와의 통신은 명시적인 MessagePort
객체를 사용하여
이루어집니다. SharedWorker()
생성자가
반환하는 객체는 port
속성에
포트에 대한 참조를 보유합니다.
worker. port. onmessage = function ( event) { ... };
worker. port. postMessage( 'some message' );
worker. port. postMessage({ foo: 'structured' , bar: [ 'data' , 'also' , 'possible' ]});
공유 워커 내부에서 워커의 새로운 클라이언트는 connect
이벤트를 사용하여 알립니다. 새 클라이언트의 포트는 이벤트 객체의 source
속성에 의해
제공됩니다.
onconnect = function ( event) {
var newPort = event. source;
// 리스너 설정
newPort. onmessage = function ( event) { ... };
// 포트로 메시지 보내기
newPort. postMessage( 'ready!' ); // 물론 구조화된 데이터도 보낼 수 있습니다
};
이 표준은 두 가지 종류의 워커를 정의합니다: 전용 워커와 공유 워커입니다. 전용 워커는 한 번 생성되면 생성자와 연결되지만, 메시지 포트를 사용하여 전용 워커에서 여러 다른 브라우징 컨텍스트나 워커로 통신할 수 있습니다. 반면에 공유 워커는 이름을 가지며, 한 번 생성되면 동일한 origin 내에서 실행되는 모든 스크립트가 해당 워커에 대한 참조를 얻고 그것과 통신할 수 있습니다. Service Workers는 세 번째 종류를 정의합니다. [SW]
전역 범위는 워커의 "내부"를 의미합니다.
WorkerGlobalScope
공통 인터페이스모든 현재 엔진에서 지원됩니다.
[Exposed =Worker ]
interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self ;
readonly attribute WorkerLocation location ;
readonly attribute WorkerNavigator navigator ;
undefined importScripts ((TrustedScriptURL
or USVString )... urls );
attribute OnErrorEventHandler onerror ;
attribute EventHandler onlanguagechange ;
attribute EventHandler onoffline ;
attribute EventHandler ononline ;
attribute EventHandler onrejectionhandled ;
attribute EventHandler onunhandledrejection ;
};
WorkerGlobalScope
는 특정 유형의 워커 전역 범위 객체의 기본 클래스 역할을 합니다. 여기에는 DedicatedWorkerGlobalScope
,
SharedWorkerGlobalScope
,
그리고 ServiceWorkerGlobalScope
가
포함됩니다.
WorkerGlobalScope
객체는 연결된 소유자
세트를 가지고 있습니다.
(집합의 문서
와
WorkerGlobalScope
객체들). 이는 초기에는 비어 있으며 워커가 생성되거나 획득될 때 채워집니다.
이는 단일 소유자 대신 집합입니다. 이는 SharedWorkerGlobalScope
객체들을 수용하기 위함입니다.
WorkerGlobalScope
객체는 연결된 유형
("classic
" 또는 "module
")을 가지고 있습니다. 이는 생성 중에 설정됩니다.
WorkerGlobalScope
객체는 연결된 URL(null
또는 URL)을 가지고 있습니다. 초기에는 null입니다.
WorkerGlobalScope
객체는 연결된 이름 (문자열)을
가지고 있습니다. 이는 생성 중에 설정됩니다.
이름은 WorkerGlobalScope
의
각 서브클래스마다 다른 의미를 가질 수 있습니다.
DedicatedWorkerGlobalScope
인스턴스의 경우, 이는 단순히 디버깅 목적에 유용한 개발자 제공 이름입니다.
SharedWorkerGlobalScope
인스턴스의 경우, 이를 통해 SharedWorker()
생성자를 사용하여 공통 공유 워커에 대한 참조를 얻을 수 있게 합니다.
ServiceWorkerGlobalScope
객체의 경우, 이는 의미가 없으며(따라서 JavaScript API를 통해 전혀 노출되지 않습니다).
WorkerGlobalScope
객체는 연결된 정책
컨테이너 (a 정책
컨테이너)를 가지고 있습니다. 초기에는 새 정책 컨테이너입니다.
WorkerGlobalScope
객체는 연결된 임베더
정책 (an 임베더
정책)을 가지고 있습니다.
WorkerGlobalScope
객체는 연결된 모듈
맵을 가지고 있습니다. 이는 모듈
맵으로, 초기에는 비어 있습니다.
WorkerGlobalScope
객체는 연결된 크로스-오리진 격리 기능 (boolean)을 가지고 있습니다. 초기 값은 false입니다.
workerGlobal.self
모든 현재 엔진에서 지원됩니다.
workerGlobal.location
모든 현재 엔진에서 지원됩니다.
WorkerLocation
객체를 반환합니다.
workerGlobal.navigator
모든 현재 엔진에서 지원됩니다.
WorkerNavigator
객체를 반환합니다.
workerGlobal.importScripts(...urls)
WorkerGlobalScope/importScripts
모든 현재 엔진에서 지원됩니다.
self
속성은
WorkerGlobalScope
객체 자체를 반환해야 합니다.
location
속성은
WorkerLocation
객체를 반환해야 합니다. 이 객체의 연결된 WorkerGlobalScope
객체는
WorkerGlobalScope
객체입니다.
비록 WorkerLocation
객체가
WorkerGlobalScope
객체 이후에 생성되지만, 이는 스크립트에서 관찰할 수 없으므로 문제가 되지 않습니다.
다음은 이벤트 핸들러 (및 해당하는 이벤트
핸들러 이벤트 유형)로,
WorkerGlobalScope
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL 속성으로 지원해야 하는
항목들입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onerror
모든 현재 엔진에서 지원됩니다. Firefox3.5+Safari4+Chrome4+
Opera11.5+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android? | error
|
onlanguagechange
WorkerGlobalScope/languagechange_event 모든 현재 엔진에서 지원됩니다. Firefox74+Safari4+Chrome4+
Opera11.5+Edge79+ Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | languagechange
|
onoffline
WorkerGlobalScope/offline_event Firefox29+Safari8+Chrome지원 안 됨
Opera?Edge지원 안 됨 Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | offline
|
ononline
WorkerGlobalScope/online_event Firefox29+Safari8+Chrome지원 안 됨
Opera?Edge지원 안 됨 Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | online
|
onrejectionhandled
| rejectionhandled
|
onunhandledrejection
| unhandledrejection
|
DedicatedWorkerGlobalScope
인터페이스
모든 현재 엔진에서 지원됩니다.
[Global =(Worker ,DedicatedWorker ),Exposed =DedicatedWorker ]
interface DedicatedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable ] readonly attribute DOMString name ;
undefined postMessage (any message , sequence <object > transfer );
undefined postMessage (any message , optional StructuredSerializeOptions options = {});
undefined close ();
attribute EventHandler onmessage ;
attribute EventHandler onmessageerror ;
};
DedicatedWorkerGlobalScope
객체는 마치 MessagePort
와
연관되어 있는 것처럼 동작합니다. 이 포트는 워커가 생성될 때 설정되는 채널의 일부이지만, 노출되지 않습니다. 이 객체는 DedicatedWorkerGlobalScope
객체가 가비지 컬렉션되기 전에 절대 가비지 컬렉션되어서는 안 됩니다.
해당 포트에서 수신된 모든 메시지는 즉시 DedicatedWorkerGlobalScope
객체로 재타겟팅되어야 합니다.
dedicatedWorkerGlobal.name
DedicatedWorkerGlobalScope/name
모든 현재 엔진에서 지원됩니다.
dedicatedWorkerGlobal의 이름,
즉 Worker
생성자에 제공된 값을 반환합니다. 주로 디버깅에 유용합니다.
dedicatedWorkerGlobal.postMessage(message [, transfer ])
DedicatedWorkerGlobalScope/postMessage
모든 현재 엔진에서 지원됩니다.
dedicatedWorkerGlobal.postMessage(message [, { transfer } ])
message를 복제하여 dedicatedWorkerGlobal과 연결된 Worker
객체로 전송합니다. transfer는 복제 대신 전송할 객체 목록으로 전달할 수 있습니다.
dedicatedWorkerGlobal.close()
DedicatedWorkerGlobalScope/close
모든 현재 엔진에서 지원됩니다.
dedicatedWorkerGlobal을 중단합니다.
name
게터 단계는 this의 name을
반환하는 것입니다. 이 값은 주로 디버깅 목적으로 사용되는 Worker
생성자를 사용하여 워커에 할당된 이름을 나타냅니다.
postMessage(message, transfer)
와 postMessage(message, options)
메서드는 DedicatedWorkerGlobalScope
객체에서 호출될 때, 각각 postMessage(message, transfer)
와
postMessage(message, options)
를
동일한 인수로 포트에서 즉시 호출한 것처럼 동작하고, 동일한 반환 값을 반환합니다.
워커를 종료하려면, workerGlobal을 주어진 상태에서 다음 단계를 수행합니다:
workerGlobal의 종료 중 플래그를 true로 설정합니다. (이것은 더 이상의 작업이 큐에 추가되지 않도록 방지합니다.)
close()
메서드 단계는 워커를 종료하는 것입니다. 여기서
this가 주어집니다.
다음은 이벤트
핸들러 (및 해당하는 이벤트 핸들러 이벤트
유형)로, 이벤트 핸들러
IDL 속성으로 지원해야 하는 항목들입니다. 이들은 DedicatedWorkerGlobalScope
인터페이스를 구현하는 객체에 적용됩니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onmessage
DedicatedWorkerGlobalScope/message_event 모든 현재 엔진에서 지원됩니다. Firefox3.5+Safari4+Chrome4+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+ | message
|
onmessageerror
DedicatedWorkerGlobalScope/messageerror_event 모든 현재 엔진에서 지원됩니다. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안 됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | messageerror
|
SharedWorkerGlobalScope
interface모든 현재 엔진에서 지원됩니다.
[Global =(Worker ,SharedWorker ),Exposed =SharedWorker ]
interface SharedWorkerGlobalScope : WorkerGlobalScope {
[Replaceable ] readonly attribute DOMString name ;
undefined close ();
attribute EventHandler onconnect ;
};
SharedWorkerGlobalScope
객체는 생성자
출처, 생성자
URL, 및 자격
증명과 연결됩니다.
이는 SharedWorkerGlobalScope
객체가 워커 실행
알고리즘에서 생성될 때 초기화됩니다.
Shared workers는 각 연결에 대해 connect
이벤트를 통해 SharedWorkerGlobalScope
객체로 메시지 포트를 수신합니다.
sharedWorkerGlobal.name
모든 현재 엔진에서 지원됩니다.
sharedWorkerGlobal의 이름,
즉 SharedWorker
생성자에 제공된 값을 반환합니다. 여러 SharedWorker
객체는 동일한 이름을 재사용하여 동일한 공유 워커(SharedWorkerGlobalScope
)와
일치할 수 있습니다.
sharedWorkerGlobal.close()
모든 현재 엔진에서 지원됩니다.
sharedWorkerGlobal를 종료합니다.
name
의 getter 단계는 this의 name을
반환하는 것입니다. 이 값은 SharedWorker
생성자를 사용하여 워커에 대한 참조를 얻는 데 사용할 수 있는 이름을 나타냅니다.
close()
메서드 단계는 close a worker를 this로 실행하는 것입니다.
다음은 이벤트
핸들러(및 해당하는 이벤트 핸들러 이벤트
유형)로, SharedWorkerGlobalScope
인터페이스를 구현하는 객체에서 이벤트 핸들러 IDL
속성으로 지원되어야 합니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onconnect
SharedWorkerGlobalScope/connect_event 모든 현재 엔진에서 지원됩니다. Firefox29+Safari16+Chrome4+
Opera10.6+Edge79+ Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS16+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | connect
|
워커 이벤트 루프의 작업 큐에는 오직 작업으로서 이벤트, 콜백, 네트워킹 활동만이 포함됩니다. 이러한 워커 이벤트 루프는 워커 실행 알고리즘에 의해 생성됩니다.
각 WorkerGlobalScope
객체는
종료 플래그를 가지며, 이
플래그는 초기에는 false로 설정되어야 하지만, 아래 처리 모델 섹션의 알고리즘에 의해 true로 설정될 수 있습니다.
WorkerGlobalScope
의 종료 플래그가 true로
설정되면, 이벤트 루프의 작업 큐는 추가될 모든 작업을 더 이상 큐에 추가하지 않도록 해야 합니다 (이미 큐에 있는 작업은 별도로 명시되지 않는 한 영향을 받지
않습니다). 실질적으로, 종료
플래그가 true인 경우, 타이머는 작동을 멈추고, 모든 대기 중인 백그라운드
작업에 대한 알림은 무시되는 등 해당 루프는 더 이상 작업을 처리하지 않게 됩니다.
워커는 메시지 채널과 MessagePort
객체를 통해 다른 워커 및 Window
와 통신합니다.
각 WorkerGlobalScope
객체(worker global scope)는 워커의 포트 목록을 가지고 있습니다. 이
목록에는 다른 포트와 얽혀 있는 모든 MessagePort
객체가 포함되며,
worker global scope에 의해 소유된 포트가 하나(그리고 오직 하나)만 있는 경우에 해당됩니다. 이 목록에는 전용 워커의 경우
암시적인 MessagePort
도 포함됩니다.
워커를 생성하거나 얻을 때 주어진 환경 설정 객체 o에 따라 추가할 관련 소유자는
o에 의해 지정된 전역 객체의 유형에 따라 달라집니다. o의 전역
객체가 WorkerGlobalScope
객체인 경우(즉, 중첩 전용 워커를 생성하는 경우), 관련 소유자는 해당 전역 객체입니다. 그렇지 않으면 o의 전역
객체는 Window
객체이며, 관련 소유자는 해당
Window
의 연관된
Document
입니다.
워커는 그 WorkerGlobalScope
의
소유자
집합이 비어있지 않은 경우 또는 다음과 같은 경우에 허용 가능한 워커라고
합니다:
WorkerGlobalScope
객체가 SharedWorkerGlobalScope
객체인 경우(즉, 워커가 공유 워커인 경우), 그리고
이 정의의 두 번째 부분은 페이지가 로드되는 동안 공유 워커가 잠시 동안 살아남을 수 있도록 허용합니다. 이는 사용자가 동일한 사이트 내에서 페이지를 이동할 때 사이트에서 사용된 공유 워커를 다시 시작하는 비용을 피하기 위한 방법으로 사용자 에이전트가 사용할 수 있습니다.
워커는 그 소유자 중 어느 하나가 완전히 활성화된 문서
객체이거나 활성 필요 워커인 경우 활성 필요
워커라고 합니다.
워커는 활성 필요 워커이며 동시에 타이머,
데이터베이스 트랜잭션 또는 네트워크 연결이 남아 있거나, 그 워커의 포트 목록이 비어 있지 않거나, 또는 그 WorkerGlobalScope
가
실제로 SharedWorkerGlobalScope
객체인 경우(즉, 워커가 공유 워커인 경우) 보호된 워커라고 합니다.
워커는 활성 필요 워커가 아니면서 허용 가능한 워커인 경우 중지 가능한 워커라고 합니다.
사용자가 Worker
또는 SharedWorker
객체
worker, URL url, 환경 설정 객체 outside settings, MessagePort
outside
port 및 WorkerOptions
사전을 사용하여 스크립트를
실행할 때, 다음 단계를 수행해야 합니다.
is shared를 worker가 SharedWorker
객체인 경우
true로 설정하고, 그렇지 않은 경우 false로 설정합니다.
owner를 outside settings에 주어진 관련 소유자 추가로 설정합니다.
unsafeWorkerCreationTime을 안전하지 않은 공유 현재 시간으로 설정합니다.
agent를 outside settings와 is shared에 주어진 전용/공유 워커 에이전트 얻기의 결과로 설정합니다. 이 단계의 나머지 부분은 해당 에이전트에서 실행됩니다.
realm execution context를 agent에 주어진 새로운 자바스크립트 영역 생성의 결과로 설정하고, 다음과 같은 사용자 정의를 적용합니다:
글로벌 객체에 대해 is shared가 true인 경우 SharedWorkerGlobalScope
객체를 생성합니다. 그렇지 않으면 DedicatedWorkerGlobalScope
객체를 생성합니다.
worker global scope를 realm execution context의 영역 구성 요소의 글로벌 객체로 설정합니다.
이것은 이전 단계에서 생성된 DedicatedWorkerGlobalScope
또는 SharedWorkerGlobalScope
객체입니다.
realm execution context, outside settings, unsafeWorkerCreationTime을 사용하여 워커 환경 설정 객체 설정을 실행하고, inside settings를 그 결과로 설정합니다.
options의 name
멤버 값을 worker global scope의 이름에 설정합니다.
is shared가 true인 경우:
destination을 is shared가 true인 경우 "sharedworker
"로, 그렇지 않은 경우
"worker
"로 설정합니다.
script를 options의 type
멤버 값에 따라 다음과 같이 얻습니다:
classic
"
module
"
credentials
멤버 값, inside settings을 사용하여 모듈 워커 스크립트 그래프 가져오기를 실행하고,
onComplete과 performFetch를 아래에 정의된 대로 설정합니다.
두 경우 모두, performFetch을 다음과 같이 설정합니다: 가져오기 훅 수행을 request, isTopLevel 및 processCustomFetchResponse로 설정합니다.
isTopLevel이 false인 경우, fetch request을 processResponseConsumeBody를 processCustomFetchResponse로 설정하여 실행하고, 이 단계를 중단합니다.
Fetch request를 다음 단계로 설정하고, response, 실패, 또는 바이트 시퀀스 bodyBytes를 반환합니다:
worker global scope, response, inside settings을 사용하여 워커 정책 컨테이너 초기화를 수행합니다.
글로벌 객체에 대한 글로벌 객체에 대한 CSP
초기화 알고리즘이 worker global scope에서 실행될 때 "Blocked
"를
반환하면, response를 네트워크 오류로 설정합니다. [CSP]
만약 worker global scope의 임베더 정책의
값이 교차 출처 격리와
호환됨이고 is shared가 true인 경우, agent의 에이전트
클러스터의 교차 출처 격리 모드를
"논리적
"
또는 "구체적
"으로
설정합니다. 선택된 모드는 구현에 정의된 것입니다.
이것은 에이전트 클러스터가 생성될 때 설정되어야 하며, 이 섹션의 재설계를 요구합니다.
worker global scope, outside settings, response을 사용하여 글로벌 객체의 임베더 정책 확인의 결과가 false인 경우, response를 네트워크 오류로 설정합니다.
만약 agent의 에이전트
클러스터의 교차 출처 격리
모드가 "구체적
"인
경우, worker global scope의 교차
출처 격리 기능을 true로 설정합니다.
is shared가 false이고 owner의 교차 출처 격리 기능이 false인 경우, worker global scope의 교차 출처 격리 기능을 false로 설정합니다.
is shared가 false이고 response의 URL의 스키마가 "data
"인 경우, worker
global scope의 교차
출처 격리 기능을 false로 설정합니다.
이것은 현재로서는 보수적인 기본 설정입니다. 워커가 일반적으로, 특히 data:
URL 워커가 권한 정책의 맥락에서 어떻게 처리될지에 대해 더 연구해야 합니다. 자세한 내용은 w3c/webappsec-permissions-policy
이슈 #207를 참조하십시오.
response와 bodyBytes로 processCustomFetchResponse을 실행합니다.
두 경우 모두, script를 얻었을 때 onComplete를 다음 단계로 설정합니다:
script가 null이거나 script의 재발할 오류가 null이 아닌 경우:
worker와 worker global scope를 연결합니다.
inside port을 새로운 MessagePort
객체로
inside settings의 realm에서 만듭니다.
inside port와 worker global scope를 연결합니다.
outside port와 inside port를 얽히게 만듭니다.
worker global scope와 연결된 새 WorkerLocation
객체를 생성합니다.
고아된 워커 닫기: 워커가 보호된 워커가 아닌 상태가 된 직후 또는 허용된 워커가 아닌 상태가 된 직후에 worker global scope의 닫기 플래그가 true로 설정되도록 워커를 모니터링합니다.
워커 일시 중지: worker global scope의 닫기 플래그가 false이고 워커가 일시 중지 가능한 워커일 때, 사용자가 해당 워커에서 스크립트 실행을 일시 중지하도록 모니터링합니다. 이는 닫기 플래그가 true로 전환되거나 워커가 일시 중지 가능한 워커 상태에서 벗어날 때까지 지속됩니다.
inside settings의 실행 준비 플래그를 설정합니다.
script가 고전적인 스크립트인 경우, 고전적인 스크립트 실행 script를 실행합니다. 그렇지 않으면 모듈 스크립트이며, 모듈 스크립트 실행 script를 실행합니다.
일반적인 경우에 더해 값을 반환하거나 예외로 인해 실패할 수 있으며, 이는 아래 정의된 워커 종료 알고리즘에 의해 조기 종료될 수 있습니다.
outside port의 포트 메시지 큐를 활성화합니다.
is shared가 false인 경우, 워커의 암묵적 포트의 포트 메시지 큐를 활성화합니다.
is shared가 true인 경우, DOM 조작 작업 소스에서 worker
global scope에 이벤트를
connect
이름으로 inside port를 포함한 빈 문자열로 초기화된 데이터
속성, inside port를 포함한 포트
속성, 및 inside port를 포함한 소스
속성으로 초기화된 MessageEvent
를
사용하여 발생시키기 위해 글로벌
작업 큐에 추가합니다.
worker global scope의 관련 설정 객체에 연결된 ServiceWorkerContainer
객체의 서비스 워커 클라이언트의 클라이언트 메시지 큐를 활성화합니다.
이벤트 루프: inside settings에 지정된 책임 이벤트 루프가 파괴될 때까지 실행합니다.
작업에 의해 실행되는 이벤트 또는 콜백 처리는 조기 종료될 수 있으며, 이는 아래 정의된 워커 종료 알고리즘에 의해 발생할 수 있습니다.
이 워커 처리 모델은 이벤트 루프가 파괴될 때까지 이 단계에 남아 있으며, 이는 이벤트 루프 처리 모델에서 설명된 것처럼 닫기 플래그가 true로 설정된 후에 발생합니다.
워커의 포트 목록에 있는 모든 포트를 얽히지 않도록 설정합니다.
사용자 에이전트가 워커를 종료하려고 할 때, 워커의 메인 루프(위에서 정의한 "워커 실행" 처리 모델)와 병렬로 다음 단계를 실행해야 합니다:
워커의 WorkerGlobalScope
객체의 닫기 플래그를 true로 설정합니다.
워커의 WorkerGlobalScope
객체의 관련 에이전트의 이벤트 루프의
작업 큐에 대기 중인 작업이 있다면, 처리하지 않고 버립니다.
현재 워커에서 실행 중인 스크립트를 중단합니다.
워커의 WorkerGlobalScope
객체가 실제로 DedicatedWorkerGlobalScope
객체인 경우(즉, 워커가 전용 워커인 경우), 워커의 암묵적 포트와 얽힌 포트의 포트 메시지 큐를 비웁니다.
사용자 에이전트는 워커가 활성 필요 워커 상태에서 벗어나고, 워커의 닫기 플래그가 true로 설정된 후에도 계속 실행 중일 때 워커 종료 알고리즘을 호출할 수 있습니다.
워커의 스크립트 중 하나에서 처리되지 않은 런타임 스크립트 오류가 발생할 때, 해당 오류가 이전 스크립트 오류를 처리하는 중에 발생하지 않은 경우, 사용자 에이전트는 워커의 WorkerGlobalScope
객체에
대해 이를 보고합니다.
AbstractWorker
믹스인interface mixin AbstractWorker {
attribute EventHandler onerror ;
};
다음은 AbstractWorker
인터페이스를 구현하는 객체가 이벤트 핸들러 IDL 속성으로 지원해야 하는 이벤트 핸들러 및 해당 이벤트 핸들러 이벤트
유형입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 유형 |
---|---|
onerror
모든 현재 엔진에서 지원됨.
Firefox44+
Safari11.1+
Chrome40+
Opera? Edge79+ Edge (Legacy)17+ Internet Explorer지원 안 함 Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? 모든 현재 엔진에서 지원됨.
Firefox29+
Safari16+
Chrome5+
Opera10.6+ Edge79+ Edge (Legacy)? Internet Explorer지원 안 함 Firefox Android33+ Safari iOS16+ Chrome Android지원 안 함 WebView Android? Samsung Internet4.0–5.0 Opera Android11–14 모든 현재 엔진에서 지원됨.
Firefox3.5+
Safari4+
Chrome4+
Opera10.6+ Edge79+ Edge (Legacy)12+ Internet Explorer10+ Firefox Android? Safari iOS5+ Chrome Android? WebView Android? Samsung Internet? Opera Android11+ |
error |
주어진 JavaScript 실행 컨텍스트 execution context, 환경 설정 객체 outside settings, 그리고 숫자 unsafeWorkerCreationTime으로 워커 환경 설정 객체를 설정하려면 다음과 같이 하십시오:
inherited origin을 outside settings의 origin으로 설정합니다.
realm을 execution context의 Realm 구성 요소의 값으로 설정합니다.
worker global scope를 realm의 글로벌 객체로 설정합니다.
settings object를 다음과 같은 알고리즘이 정의된 새로운 환경 설정 객체로 설정합니다:
execution context를 반환합니다.
worker global scope의 모듈 맵을 반환합니다.
worker global scope의 URL을 반환합니다.
만약 worker global scope의 URL의 스키마가 "data
"라면 고유한 불투명한
기원을 반환하고, 그렇지 않으면 inherited origin을 반환합니다.
worker global scope의 정책 컨테이너를 반환합니다.
worker global scope의 교차 출처 격리 기능을 반환합니다.
unsafeWorkerCreationTime을 worker global scope의 교차 출처 격리 기능과 함께 조정한 결과를 반환합니다.
settings object의 id를 새로운 고유 불투명 문자열로 설정하고, 생성 URL을 worker global scope의 url로, 최상위 생성 URL을 null로, 대상 브라우징 컨텍스트를 null로, 그리고 활성 서비스 워커를 null로 설정합니다.
worker global scope가 DedicatedWorkerGlobalScope
객체인 경우, settings object의 최상위 기원을 outside
settings의 최상위 기원으로 설정합니다.
그렇지 않은 경우, settings object의 최상위 기원을 구현에 정의된 값으로 설정합니다.
정확한 정의를 위해 최신 정보를 확인하려면 클라이언트 측 스토리지 파티셔닝을 참조하십시오.
realm의 [[HostDefined]] 필드를 settings object로 설정합니다.
settings object를 반환합니다.
Worker
인터페이스모든 최신 엔진에서 지원됨.
[Exposed =(Window ,DedicatedWorker ,SharedWorker )]
interface Worker : EventTarget {
constructor ((TrustedScriptURL
or USVString ) scriptURL , optional WorkerOptions options = {});
undefined terminate ();
undefined postMessage (any message , sequence <object > transfer );
undefined postMessage (any message , optional StructuredSerializeOptions options = {});
attribute EventHandler onmessage ;
attribute EventHandler onmessageerror ;
};
dictionary WorkerOptions {
WorkerType type = "classic";
RequestCredentials credentials = "same-origin"; // credentials는 type이 "module"인 경우에만 사용됩니다.
DOMString name = "";
};
enum WorkerType { "classic" , "module" };
Worker includes AbstractWorker ;
worker = new Worker(scriptURL [, options ])
모든 최신 엔진에서 지원됨.
새로운 Worker
객체를 반환합니다. scriptURL은 백그라운드에서 가져와 실행되며, worker는 해당 글로벌 환경의 통신 채널을 나타냅니다.
options는 주로 디버깅 목적으로 name 옵션을 통해 글로벌
환경의 이름을 정의하는 데 사용할 수 있습니다. 이 새로운 글로벌 환경이 JavaScript 모듈을 지원하도록 할 수도 있으며(type: "module"
지정), scriptURL이 credentials
옵션을 통해 어떻게 가져오는지 지정할 수도 있습니다.
worker.terminate()
모든 최신 엔진에서 지원됨.
worker.postMessage(message [, transfer ])
모든 최신 엔진에서 지원됨.
worker.postMessage(message [, { transfer } ])
message를 복제하여 worker의 글로벌 환경으로 전송합니다. transfer는 복제하지 않고 전송할 객체의 목록으로 전달할 수 있습니다.
terminate()
메서드는
호출되면 해당 객체와 연관된 워커에서 워커 종료 알고리즘을 실행해야 합니다.
Worker
객체는 암시적인 MessagePort
와
연관된 것처럼 작동합니다. 이 포트는 워커가 생성될 때 설정된 채널의 일부이지만 노출되지 않습니다. 이 객체는 Worker
객체 이전에 가비지
컬렉션되지 않아야 합니다.
해당 포트에서 수신된 모든 메시지는 즉시 Worker
객체로 재타겟팅되어야
합니다.
postMessage(message, transfer)
및 postMessage(message, options)
메서드는 Worker
객체에서 호출될 때, 동일한
인수로 해당 포트에서 각각 postMessage(message, transfer)
및 postMessage(message, options)
를
즉시 호출하고 동일한 반환값을 반환하는 것처럼 작동합니다.
postMessage()
메서드의 첫 번째 인수는 구조화된 데이터일 수 있습니다:
worker. postMessage({ opcode: 'activate' , device: 1938 , parameters: [ 23 , 102 ]});
다음은 Worker
인터페이스를
구현하는 객체가 이벤트 핸들러로서
지원해야 하는 이벤트 핸들러 이벤트 타입 (및 해당 이벤트 핸들러 IDL 속성)입니다:
이벤트 핸들러 | 이벤트 핸들러 이벤트 타입 |
---|---|
onmessage
| message
|
onmessageerror
| messageerror
|
Worker(scriptURL, options)
생성자가 호출되면,
사용자 에이전트는 다음 단계를 실행해야 합니다:
compliantScriptURL을 신뢰할 수 있는 타입 준수 문자열 가져오기 알고리즘을 호출하여, TrustedScriptURL
,
this의 관련 글로벌 객체,
scriptURL, "Worker 생성자
", 및 "script
"로부터 결과를 도출해야 합니다.
outside settings을 현재 설정 객체로 정의합니다.
worker URL을 URL을 인코딩-파싱한 결과로, compliantScriptURL을 outside settings를 기준으로 도출합니다.
모든 동일
출처 URL(예: blob:
URL) 사용 가능합니다. data:
URL도 사용 가능하지만, 이 경우 워커는 불투명한 출처를 가지게 됩니다.
만약 worker URL이 실패로 반환되면, "SyntaxError
" DOMException
을
던져야 합니다.
worker를 새로운 Worker
객체로
정의합니다.
outside port를 outside settings의 realm에서
새로운 MessagePort
로
정의합니다.
outside port를 worker와 연관시킵니다.
이 단계를 병렬로 실행합니다:
워커 실행을 worker, worker URL, outside settings, outside port, 및 options을 인자로 하여 실행합니다.
worker를 반환합니다.
SharedWorker
인터페이스모든 최신 엔진에서 지원됨.
[Exposed =Window ]
interface SharedWorker : EventTarget {
constructor ((TrustedScriptURL
or USVString ) scriptURL , optional (DOMString or WorkerOptions ) options = {});
readonly attribute MessagePort port ;
};
SharedWorker includes AbstractWorker ;
sharedWorker = new SharedWorker(scriptURL [, name ])
모든 최신 엔진에서 지원됨.
새로운 SharedWorker
객체를 반환합니다. scriptURL은 백그라운드에서 가져와 실행되며, sharedWorker는 해당 글로벌 환경의 통신 채널을 나타냅니다.
name은 글로벌 환경의 이름을 정의하는 데 사용할 수 있습니다.
sharedWorker = new SharedWorker(scriptURL [, options ])
새로운 SharedWorker
객체를 반환합니다. scriptURL은 백그라운드에서 가져와 실행되며, sharedWorker는 해당 글로벌 환경의 통신 채널을 나타냅니다.
options는 name
옵션을 통해 글로벌 환경의 이름을 정의하는 데 사용할 수 있습니다. 또한 이 새로운 글로벌 환경이
JavaScript 모듈을 지원하도록 하거나(type: "module"
지정), scriptURL을
credentials
옵션을 통해 어떻게 가져오는지 지정할 수도 있습니다. options의 type
또는
credentials
값이 기존 공유 워커와 일치하지 않으면 반환된 sharedWorker는 오류 이벤트를 발생시키고 기존 공유 워커에
연결되지 않습니다.
sharedWorker.port
모든 최신 엔진에서 지원됨.
sharedWorker의 MessagePort
객체를 반환하며, 이를 통해 글로벌 환경과 통신할 수 있습니다.
port
속성은
객체의 생성자가 할당한 값을 반환해야 합니다. 이는 공유 워커와 통신하기 위한 MessagePort
를
나타냅니다.
사용자 에이전트는 공유 워커 관리자를 연관시키며, 이는 새로운 병렬 큐 시작의 결과입니다.
각 사용자 에이전트는 단순화를 위해 단일 공유 워커 관리자를 가집니다. 구현에서는 출처별로 하나씩 사용할 수 있습니다. 이는 관찰 가능하지 않으며, 더 많은 병렬 처리를 가능하게 합니다.
SharedWorker(scriptURL, options)
생성자가
호출되면 다음 단계를 실행합니다:
compliantScriptURL을 신뢰할 수 있는 타입 준수 문자열 가져오기 알고리즘을 호출하여, TrustedScriptURL
,
this의 관련 글로벌 객체,
scriptURL, "SharedWorker 생성자
", 및 "script
"로부터 결과를 도출해야 합니다.
options이 DOMString
인
경우, options를 새로운 WorkerOptions
사전형 객체로 설정하며, name
멤버는 options의 값으로 설정하고, 다른 멤버는 기본값으로 설정합니다.
outside settings을 현재 설정 객체로 정의합니다.
urlRecord을 URL을 인코딩-파싱한 결과로, compliantScriptURL을 outside settings를 기준으로 도출합니다.
모든 동일
출처 URL(예: blob:
URL) 사용 가능합니다. data:
URL도 사용 가능하지만, 이 경우 워커는 불투명한 출처를 가지게 됩니다.
만약 urlRecord이 실패로 반환되면, "SyntaxError
" DOMException
을
던져야 합니다.
worker를 새로운 SharedWorker
객체로 정의합니다.
outside port를 outside settings의 realm에서
새로운 MessagePort
로
정의합니다.
outside port를 worker의 port
속성에 할당합니다.
callerIsSecureContext을 outside settings가 보안 컨텍스트인 경우 true로 설정하고, 그렇지 않으면 false로 설정합니다.
outside storage key을 저장 목적이 아닌 경우 저장 키 획득을 실행하여 outside settings에 대해 도출된 결과로 설정합니다.
worker global scope를 null로 설정합니다.
모든 SharedWorkerGlobalScope
객체 목록에서 scope에 대해 다음을 실행합니다:
worker storage key를 scope의 관련 설정 객체에 대해 저장 목적이 아닌 경우 저장 키 획득을 실행한 결과로 설정합니다.
다음이 모두 true인 경우:
name
멤버 값과 동일합니다.
다음 단계를 실행합니다:
worker global scope를 scope로 설정합니다.
중단합니다.
data:
URL은 불투명한 출처를 가진
워커를 생성합니다. 동일한 data:
URL을 동일한 출처 내에서 사용하여 동일한
SharedWorkerGlobalScope
객체에 접근할 수 있지만, 동일 출처 제한을 우회할 수는
없습니다.
worker global scope가 null이 아니지만, 사용자 에이전트가 worker global scope가 나타내는 워커와 outside settings의 스크립트 간의 통신을 허용하지 않도록 구성된 경우, worker global scope를 null로 설정합니다.
예를 들어, 사용자 에이전트는 특정 최상위 탐색 가능 객체를 다른 모든 페이지와 격리하는 개발 모드를 가질 수 있으며, 해당 개발 모드의 스크립트는 일반 브라우저 모드에서 실행 중인 공유 워커에 연결되지 않을 수 있습니다.
worker global scope가 null이 아닌 경우, 다음 하위 단계를 실행합니다:
settings object를 worker global scope의 관련 설정 객체로 설정합니다.
workerIsSecureContext를 settings object가 보안 컨텍스트인 경우 true로 설정하고, 그렇지 않으면 false로 설정합니다.
workerIsSecureContext가 callerIsSecureContext와 일치하지 않으면, 작업을 대기열에
추가하여 worker에서 error
이벤트를 발생시키고, 이러한 단계를 중단합니다. [SECURE-CONTEXTS]
worker를 worker global scope와 연관시킵니다.
inside port를 settings object의 새로운 MessagePort
로
정의합니다.
얽히게 합니다, outside port와 inside port를.
작업을
대기열에
추가하여, DOM
조작 작업 소스를 사용하여 worker global scope에서 connect
라는
이름의 이벤트를 발생시키고, MessageEvent
를
사용하여, data
속성을 빈 문자열로 초기화하고, ports
속성을 inside port만 포함하는 새로운 동결 배열로 초기화하며, source
속성을 inside port로 초기화합니다.
그렇지 않으면, 병렬로 워커 실행을 실행합니다, worker, urlRecord, outside settings, outside port, 및 options을 인자로 하여.
worker를 반환합니다.
interface mixin NavigatorConcurrentHardware {
readonly attribute unsigned long long hardwareConcurrency ;
};
self.navigator.hardwareConcurrency
사용자 에이전트에서 사용할 수 있는 논리 프로세서의 수를 반환합니다.
navigator.hardwareConcurrency
속성의 getter는 1과 사용자 에이전트에서 사용할 수
있는 논리 프로세서의 수 사이의 값을 반환해야 합니다. 이를 확인할 수 없는 경우, getter는 1을 반환해야 합니다.
사용자 에이전트는 논리 프로세서의 수를 노출하는 방향으로 작업해야 하며, 사용자 에이전트에 특정 제한이 있는 경우(예: 생성할 수 있는 workers의 수에 대한 제한)나 지문 채취 가능성을 줄이려는 경우에만 더 낮은 값을 사용할 수 있습니다.
importScripts(...urls)
메서드의 단계는 다음과 같습니다:
urlStrings를 « »로 설정합니다.
각 url에 대해:
다음 결과를
추가합니다, 신뢰할 수 있는 타입 준수 문자열 가져오기 알고리즘을 TrustedScriptURL
,
this의 관련 글로벌 객체,
url, "Worker importScripts
", 및 "script
"를 인자로 하여,
urlStrings에 추가합니다.
스크립트를 워커 글로벌 스코프에 가져오기를 this와 urlStrings을 인자로 실행합니다.
주어진 WorkerGlobalScope
객체 worker global scope, 리스트 urls, 및 선택적
performFetch를 인자로 하여, 스크립트를 워커 글로벌 스코프에 가져오는 단계는 다음과 같습니다:
settings object를 현재 설정 객체로 설정합니다.
urls이 비어 있으면, 반환합니다.
urlRecords를 « »로 설정합니다.
각 url에 대해:
url을 settings object에 상대적으로 인코딩-파싱한 결과로 urlRecord를 설정합니다.
urlRecord가 실패하면, "SyntaxError
" DOMException
을
던집니다.
각 urlRecord에 대해:
클래식 워커 가져오기 스크립트를 urlRecord 및 settings object를 인자로 실행하고, performFetch가 제공된 경우 이를 전달합니다. 성공하면, script를 그 결과로 설정합니다. 그렇지 않으면 예외를 다시 던집니다.
클래식 스크립트 실행을 script를 인자로 하고, 오류를 다시 던지는 인수를 true로 설정하여 실행합니다.
script는 반환되거나, 구문 분석에 실패하거나, 예외를 잡지 못하거나, 위에서 정의된 워커 종료 알고리즘에 의해 조기에 중단될 때까지 실행됩니다.
예외가 발생했거나 스크립트가 조기에 중단되면, 이러한 단계를 모두 중단하고, 예외 또는 중단이 호출한 스크립트에 의해 계속 처리되도록 합니다.
Service Workers는 이 알고리즘을 자체 페치 훅 수행으로 실행하는 명세서의 예입니다. [SW]
WorkerNavigator
인터페이스모든 최신 엔진에서 지원됨.
navigator
속성은 WorkerGlobalScope
인터페이스의 인스턴스를 반환해야 하며, 이는 사용자 에이전트(클라이언트)의 정체성과 상태를 나타냅니다:
[Exposed =Worker ]
interface WorkerNavigator {};
WorkerNavigator includes NavigatorID ;
WorkerNavigator includes NavigatorLanguage ;
WorkerNavigator includes NavigatorOnLine ;
WorkerNavigator includes NavigatorConcurrentHardware ;
WorkerLocation
인터페이스모든 최신 엔진에서 지원됨.
모든 최신 엔진에서 지원됨.
[Exposed =Worker ]
interface WorkerLocation {
stringifier readonly attribute USVString href ;
readonly attribute USVString origin ;
readonly attribute USVString protocol ;
readonly attribute USVString host ;
readonly attribute USVString hostname ;
readonly attribute USVString port ;
readonly attribute USVString pathname ;
readonly attribute USVString search ;
readonly attribute USVString hash ;
};
WorkerLocation
객체는
WorkerGlobalScope
객체
(WorkerGlobalScope
객체)와
연관되어 있습니다.
모든 최신 엔진에서 지원됨.
href
속성의 getter 단계는 this의
WorkerGlobalScope
객체의 url을
직렬화된 값을 반환하는 것입니다.
모든 최신 엔진에서 지원됨.
origin
속성의 getter 단계는 origin을
직렬화하여 this의 WorkerGlobalScope
객체의 url의 origin을 반환하는 것입니다.
모든 최신 엔진에서 지원됨.
protocol
속성의 getter 단계는 this의 WorkerGlobalScope
객체의 url의 scheme에 ":
"을 추가하여 반환하는 것입니다.
모든 최신 엔진에서 지원됨.
host
속성의 getter 단계는 다음과 같습니다:
this의 WorkerGlobalScope
객체의 url을 url로 설정합니다.
url의 host가 null이면, 빈 문자열을 반환합니다.
모든 최신 엔진에서 지원됨.
hostname
속성의 getter 단계는 다음과 같습니다:
this의 WorkerGlobalScope
객체의 url의 host를 host로 설정합니다.
host가 null이면, 빈 문자열을 반환합니다.
host를 직렬화하여 반환합니다.
모든 최신 엔진에서 지원됨.
port
속성의 getter 단계는 다음과 같습니다:
this의 WorkerGlobalScope
객체의 url의 port를 port로 설정합니다.
port가 null이면, 빈 문자열을 반환합니다.
port를 직렬화하여 반환합니다.
모든 최신 엔진에서 지원됩니다.
pathname
속성의 getter 단계는
URL 경로 직렬화를 반환하는 것입니다.
this의 WorkerGlobalScope
객체의 url.
모든 최신 엔진에서 지원됩니다.
search
속성의 getter 단계는 다음과 같습니다:
query를
this의
WorkerGlobalScope
객체의 url의 query로 설정합니다.
query가 null이거나 빈 문자열이면, 빈 문자열을 반환합니다.
"?
" 뒤에 query를 반환합니다.
모든 최신 엔진에서 지원됩니다.
hash
속성의 getter 단계는 다음과 같습니다:
fragment를 this의 WorkerGlobalScope
객체의 url의 fragment로 설정합니다.
fragment가 null이거나 빈 문자열이면, 빈 문자열을 반환합니다.
"#
" 뒤에 fragment를 반환합니다.
이 섹션은 비규범적입니다.
워클릿은 메인 자바스크립트 실행 환경과 독립적으로 스크립트를 실행할 수 있는 사양 인프라의 일부로, 특정 구현 모델을 요구하지 않습니다.
여기 명시된 워클릿 인프라는 웹 개발자가 직접 사용할 수 없습니다. 대신, 다른 사양이 이를 기반으로 특정 브라우저 구현 파이프라인의 특정 부분에서 실행되는 직접 사용 가능한 워클릿 유형을 만듭니다.
이 섹션은 비규범적입니다.
렌더링 또는 오디오 출력과 같은 구현 파이프라인의 중요한 부분에 확장 지점을 허용하는 것은 어렵습니다. 만약 확장 지점이 Window
에서 사용할 수 있는 API에 완전히 접근할 수 있다면, 엔진은 해당 단계 중에
어떤 일이 일어날지에 대한 기존의 가정을 포기해야 할 것입니다. 예를 들어, 레이아웃 단계에서는 렌더링 엔진이 DOM이 수정되지 않을 것이라고 가정합니다.
또한, Window
환경에서 확장 지점을 정의하면 사용자 에이전트가 Window
객체와 동일한 스레드에서 작업을 수행해야 한다는 제약이 발생합니다.
(구현이 스레드 안전 API를 허용하고 스레드 결합 보증을 제공하는 복잡하고 높은 오버헤드 인프라를 추가하지 않는 한.)
워클릿은 사용자 에이전트가 현재 의존하는 보증을 유지하면서 확장 지점을 허용하도록 설계되었습니다. 이는 WorkletGlobalScope
의 서브클래스를
기반으로 하는 새로운 글로벌 환경을 통해 이루어집니다.
워클릿은 웹 워커와 유사하지만, 다음과 같은 차이점이 있습니다:
스레드에 구애받지 않습니다. 즉, 각 워커가 전용 별도의 스레드에서 실행되도록 설계된 것과는 달리, 워클릿은 어디서든 실행될 수 있습니다(메인 스레드 포함).
병렬 처리 목적을 위해 글로벌 스코프의 여러 중복 인스턴스를 생성할 수 있습니다.
이벤트 기반 API를 사용하지 않습니다. 대신, 클래스는 글로벌 스코프에 등록되며, 해당 메서드는 사용자 에이전트에 의해 호출됩니다.
글로벌 스코프에서 사용 가능한 API 표면이 축소되었습니다.
워클릿은 상대적으로 높은 오버헤드를 가지고 있어 적절히 사용해야 합니다. 이로 인해 특정 WorkletGlobalScope
는 여러
개의 개별 스크립트 간에 공유될 것으로 예상됩니다. (이는 하나의 Window
가
여러 개의 개별 스크립트 간에 공유되는 것과 유사합니다.)
워클릿은 다양한 사용 사례에 맞는 일반적인 기술입니다. 예를 들어 CSS Painting API에 정의된 워클릿은 상태가 없는, 멱등적이며, 짧게 실행되는 연산을 위한 확장 지점을 제공합니다. 이러한 워클릿은 다음 몇 섹션에서 설명하는 특별한 고려 사항이 있습니다. 다른 워클릿은 Web Audio API에 정의된 것처럼 상태를 가지며, 오래 실행되는 작업에 사용됩니다. [CSSPAINT] [WEBAUDIO]
일부 워클릿을 사용하는 사양은 사용자 에이전트가 여러 스레드에 걸쳐 작업을 병렬 처리하거나 필요한 경우 스레드 간에 작업을 이동할 수 있도록 허용하기 위한 것입니다. 이러한 사양에서 사용자 에이전트는 웹 개발자가 제공한 클래스의 메서드를 구현 정의된 순서로 호출할 수 있습니다.
이로 인해 상호 운용성 문제를 방지하기 위해, 이러한 WorkletGlobalScope
에 클래스를
등록하는 작성자는 코드를 멱등하게 만들어야 합니다. 즉, 클래스의 메서드 또는 메서드 집합은 특정 입력에 대해 동일한 출력을 생성해야 합니다.
이 사양은 작성자가 멱등한 방식으로 코드를 작성하도록 장려하기 위해 다음 기술을 사용합니다:
글로벌 객체에 대한 참조가 제공되지 않습니다(즉, self
에
해당하는 것이 WorkletGlobalScope
에
없습니다).
워클릿이 처음 명시될 때 이러한 의도가 있었으나, globalThis
의 도입으로 인해 더 이상 사실이 아닙니다. 더 많은 논의는 이슈 #6059를 참조하세요.
코드는 모듈 스크립트로 로드되어, 엄격 모드에서 실행되며 글로벌 프록시를
참조하는 공유된 this
가 없습니다.
이러한 제한은 두 개의 다른 스크립트가 글로벌 객체의 속성을 사용하여 상태를 공유하지 못하도록 방지하는 데 도움이 됩니다.
추가적으로, 워클릿을 사용하고 구현 정의 동작을 허용하려는 사양은 다음을 준수해야 합니다:
이들은 사용자 에이전트가 각 Worklet
당 최소 두 개의 WorkletGlobalScope
인스턴스를 항상 갖도록 요구해야 하며, 클래스의 메서드 또는 메서드 집합을 특정 WorkletGlobalScope
인스턴스에 임의로 할당해야 합니다. 이 사양은 메모리 제약 하에서 옵트아웃을 제공할 수 있습니다.
이 사양들은 사용자 에이전트가 언제든지 WorkletGlobalScope
하위 클래스를 생성하고 파괴할 수 있도록 허용해야 합니다.
워클릿을 사용하는 일부 사양에서는 사용자 에이전트의 상태에 따라 웹 개발자가 제공한 클래스의 메서드를 호출할 수 있습니다. 스레드 간 동시성을 높이기 위해, 사용자 에이전트는 잠재적인 미래 상태를 기반으로 메서드를 추측적으로 호출할 수 있습니다.
이러한 사양에서는 사용자 에이전트가 언제든지, 그리고 사용자 에이전트의 현재 상태에 해당하지 않는 인수로도 이러한 메서드를 호출할 수 있습니다. 이러한 추측적 평가의 결과는 즉시 표시되지 않지만, 사용자가 추측된 상태와 일치하는 경우에 사용하기 위해 캐시될 수 있습니다. 이는 사용자 에이전트와 워클릿 스레드 간의 동시성을 높일 수 있습니다.
이로 인해 사용자 에이전트 간의 상호 운용성 위험을 방지하기 위해, 이러한 WorkletGlobalScope
에 클래스를
등록하는 작성자는 코드를 상태 비저장(stateless)으로 만들어야 합니다. 즉, 메서드를 호출한 유일한 효과는 결과여야 하며, 변경 가능한 상태 업데이트와 같은 부작용은 없어야 합니다.
코드 멱등성을 장려하는 동일한 기술은 작성자가 상태 비저장 코드를 작성하도록 권장합니다.
이 섹션은 규범적이지 않습니다.
이 예제에서는 가짜 워크릿을 사용합니다. Window
객체는 각자 자신의 Worklet
인스턴스를 제공하며, 이는 자체 FakeWorkletGlobalScope
컬렉션에서 코드를 실행합니다:
partial interface Window {
[SameObject , SecureContext ] readonly attribute Worklet fakeWorklet1 ;
[SameObject , SecureContext ] readonly attribute Worklet fakeWorklet2 ;
};
각 Window
에는 Worklet
인스턴스인 가짜 워크릿
1과 가짜 워크릿 2가 있으며, 이들 모두의 워크릿 글로벌 스코프 유형은 FakeWorkletGlobalScope
으로
설정되고, 워크릿 목적지 유형은
"fakeworklet
"로 설정됩니다. 사용자 에이전트는 각 워크릿마다 적어도 두 개의 FakeWorkletGlobalScope
인스턴스를 생성해야 합니다.
"fakeworklet
"는 실제로는 Fetch
사양에 따른 유효한 목적지가 아닙니다. 하지만 이 예시는 실제 워크릿들이 일반적으로 자신만의 워크릿 유형별 목적지를 갖게 되는 방식을 보여줍니다. [FETCH]
fakeWorklet1
의 getter 단계는 this의 가짜 워크릿 1을 반환하는 것입니다.
fakeWorklet2
의 getter 단계는 this의 가짜 워크릿 2을 반환하는 것입니다.
[Global =(Worklet ,FakeWorklet ),
Exposed =FakeWorklet ,
SecureContext ]
interface FakeWorkletGlobalScope : WorkletGlobalScope {
undefined registerFake (DOMString type , Function classConstructor );
};
각 FakeWorkletGlobalScope
에는
등록된 클래스 생성자 맵이 있으며, 이는 초기에는 비어 있는 순서가 있는 맵입니다.
registerFake(type, classConstructor)
메서드 단계는
this의 등록된 클래스
생성자 맵[type]을 classConstructor로 설정하는 것입니다.
이 섹션은 규범적이지 않습니다.
가짜 워크릿 1에 스크립트를 로드하려면, 웹 개발자는 다음과 같이 작성합니다:
window. fakeWorklet1. addModule( 'script1.mjs' );
window. fakeWorklet1. addModule( 'script2.mjs' );
어떤 스크립트가 먼저 가져오기를 완료하고 실행되는지는 네트워크 타이밍에 따라 달라집니다: 이는 script1.mjs
또는 script2.mjs
일 수
있습니다. 이 내용은 일반적으로 워크릿에 로드될 의도로 잘 작성된 스크립트에는 중요하지 않습니다. 만약 추측 평가에 대한 제안을
따른다면 더욱 그렇습니다.
웹 개발자가 특정 작업을 수행하려면 스크립트가 성공적으로 실행되고 일부 워크릿에 로드된 후에만 수행되기를 원할 경우, 다음과 같이 작성할 수 있습니다:
Promise. all([
window. fakeWorklet1. addModule( 'script1.mjs' ),
window. fakeWorklet2. addModule( 'script2.mjs' )
]). then(() => {
// 해당 스크립트들이 로드되었음을 전제로 작업 수행
});
스크립트 로딩과 관련된 또 다른 중요한 점은 로드된 스크립트가 각 WorkletGlobalScope
에서
여러 번 실행될 수 있다는 것입니다. 이는 Worklet
내에서
코드 이드포턴스에 대한 섹션에서 논의한 대로입니다. 특히 위에서 언급된 가짜 워크릿 1과 가짜 워크릿 2는 이를 요구합니다. 예를 들어 다음과 같은 시나리오를 고려할 수 있습니다:
// script.mjs
console. log( "FakeWorkletGlobalScope에서 안녕하세요!" );
// app.mjs
window. fakeWorklet1. addModule( "script.mjs" );
이것은 사용자 에이전트의 콘솔에서 다음과 같은 출력 결과를 가져올 수 있습니다:
[fakeWorklet1#1] FakeWorkletGlobalScope에서 안녕하세요!
[fakeWorklet1#4] FakeWorkletGlobalScope에서 안녕하세요!
[fakeWorklet1#2] FakeWorkletGlobalScope에서 안녕하세요!
[fakeWorklet1#3] FakeWorkletGlobalScope에서 안녕하세요!
사용자 에이전트가 FakeWorkletGlobalScope
의
세 번째 인스턴스를 종료하고 다시 시작하기로 결정한 경우, 콘솔은 다시 [fakeWorklet1#3] FakeWorkletGlobalScope에서 안녕하세요!
를 출력할
것입니다.
이 섹션은 규범적이지 않습니다.
우리의 가짜 워크릿의 의도된 사용 사례 중 하나는 웹 개발자가 매우 복잡한 불리언 부정 과정을 사용자 정의할 수 있도록 하는 것입니다. 그들은 다음과 같이 사용자 정의를 등록할 수 있습니다:
// script.mjs
registerFake( 'negation-processor' , class {
process( arg) {
return ! arg;
}
});
// app.mjs
window. fakeWorklet1. addModule( "script.mjs" );
이러한 등록된 클래스를 사용하기 위해, 가짜 워크릿에 대한 사양은 주어진 Worklet
worklet의 "참의 반대
찾기" 알고리즘을 정의할 수 있습니다:
선택적으로 워크릿 글로벌 스코프 생성을 worklet에 대해 수행하십시오.
workletGlobalScope를 worklet의 글로벌 스코프 중 하나로 설정하고, 구현 정의 방식으로 선택하십시오.
classConstructor를 workletGlobalScope의 등록된 클래스 생성자
맵["negation-processor
"]로 설정하십시오.
classInstance를 생성 결과로 설정하고, 인수는 없도록 하십시오.
function을 Get(classInstance,
"process
")로 설정하고, 예외가 발생하면 재throws합니다.
callback을 호출하고, 인수로 « true »와 "rethrow
"를
사용하여, 콜백의 this 값을
classInstance로 설정하여 반환하십시오.
다른, 어쩌면 더 나은 사양 아키텍처는 "process
" 속성을 추출하고, Function
으로
변환하여 registerFake()
메서드 단계의 일부로 등록 시점에 처리하는 것입니다.
WorkletGlobalScope
의 서브클래스는 특정 Worklet
에 로드된 코드가 실행될 수 있는 전역 객체를 생성하는 데 사용됩니다.
[Exposed =Worklet , SecureContext ]
interface WorkletGlobalScope {};
다른 사양에서는 WorkletGlobalScope
를 서브클래스로 하여,
클래스 등록을 위한 API와 특정 워크릿 유형에 맞는 기타 API를 추가할 수 있도록 의도되었습니다.
각 WorkletGlobalScope
에는 모듈 맵이 연관되어 있습니다. 이는 초기에는 비어 있는 모듈 맵입니다.
이 섹션은 규범적이지 않습니다.
각 WorkletGlobalScope
는
자신의 워크릿 에이전트에 포함되어 있으며, 해당 에이전트는 이벤트 루프와 연관되어
있습니다. 그러나 실제로 이러한 에이전트와 이벤트 루프의 구현은 대부분의 다른 것들과는 다를 것으로 예상됩니다.
각 WorkletGlobalScope
에
대해 워크릿 에이전트가 존재합니다. 이론적으로는 각 WorkletGlobalScope
인스턴스에 대해 별도의 스레드를 사용할 수 있는 구현이 가능하며, 이러한 수준의 병렬 처리는 에이전트를 사용하여 최상으로 수행될 수 있습니다. 그러나 [[CanBlock]] 값이 false이기 때문에
에이전트와 스레드가 일대일로 매칭될 필요는 없습니다. 이는 구현체가 워크릿에 로드된 스크립트를 다른 에이전트의 [[CanBlock]] 값이 false인 스레드를 포함한 임의의 스레드에서 실행할 수
있도록 자유롭게 할 수 있게 합니다. 예를 들어, 유사 기원 윈도우 에이전트("메인 스레드")의 스레드와 같이.
워크릿 이벤트 루프도 다소 특별합니다. 이들은 addModule()
와
관련된 작업, 사용자 에이전트가 작성자 정의 메서드를 호출하는 작업,
그리고 마이크로태스크에만 사용됩니다. 따라서 비록 이벤트 루프 처리 모델은 모든 이벤트 루프가 지속적으로 실행되어야 한다고 명시하고 있지만, 구현체는 저자 제공 메서드를 호출한 후, 해당 프로세스가 마이크로태스크 체크포인트를 수행하도록 하여, 가시적으로 동일한 결과를
얻을 수 있는 더 단순한 전략을 사용할 수 있습니다.
워크릿 전역 범위 생성하기 위해
Worklet
worklet:
outsideSettings을 worklet의 관련 설정 객체로 설정합니다.
agent을 워크릿 에이전트 획득 결과로 설정합니다. 나머지 단계는 해당 에이전트에서 실행합니다.
realmExecutionContext을 새로운 자바스크립트 영역 생성 결과로 설정하고, 다음과 같은 사용자 정의를 적용합니다:
전역 객체의 경우, worklet의 워크릿 전역 범위 타입에 의해 제공된 새 객체를 생성합니다.
workletGlobalScope을 전역 객체로 설정합니다. realmExecutionContext의 Realm 구성 요소의.
insideSettings을 워크릿 환경 설정 객체 설정 결과로 설정하고, realmExecutionContext 및 outsideSettings을 제공합니다.
runNextAddedModule을 다음 단계로 설정합니다:
pendingAddedModules이 비어 있지 않다면, 다음을 수행합니다:
moduleURL을 디큐한 결과로 설정합니다 pendingAddedModules에서.
워크릿 스크립트 그래프 가져오기를 실행합니다. moduleURL, insideSettings, worklet의 워크릿 목적지 타입, 자격 증명 모드?, insideSettings, worklet의 모듈 응답 맵를 제공합니다. 그리고 다음 단계를 script에 대해 수행합니다:
이 단계는 실제 네트워크 요청을 수행하지 않습니다. 대신 worklet의 응답을 재사용합니다. 이 단계의 주요 목적은 workletGlobalScope-에 특정한 모듈 스크립트를 응답에서 생성하는 것입니다.
단언: script가 null이 아님을 확인합니다. fetch가 성공하고 원본 텍스트가 성공적으로 구문 분석되었으므로 worklet의 모듈 응답 맵에 moduleURL이 처음으로 추가되었습니다.
모듈 스크립트 실행을 script에 대해 실행합니다.
runNextAddedModule을 실행합니다.
추가합니다
workletGlobalScope을
outsideSettings의 전역 객체에 연결된
Document
에 워크릿 전역 범위.
책임 있는 이벤트 루프를 실행합니다 insideSettings에 의해 지정된.
runNextAddedModule을 실행합니다.
워크릿 전역 범위 종료를 수행하기 위해
WorkletGlobalScope
workletGlobalScope:
eventLoop의 작업이 eventLoop의 작업 대기열에 대기 중이라면, 이를 처리하지 않고 폐기합니다.
현재 실행 중인 작업이 완료될 때까지 기다립니다.
eventLoop을 파괴합니다.
제거합니다
workletGlobalScope을 전역 범위에서
Worklet
포함하는
전역 범위에서
workletGlobalScope를.
제거합니다 workletGlobalScope을 워크릿 전역 범위에서
Document
포함하는 워크릿 전역 범위에서
workletGlobalScope를.
워크릿 환경 설정 객체 설정을 수행하기 위해, 자바스크립트 실행 컨텍스트 executionContext와 환경 설정 객체 outsideSettings를 제공합니다:
origin을 고유한 불투명 원본으로 설정합니다.
inheritedAPIBaseURL을 outsideSettings의 API 기본 URL로 설정합니다.
inheritedPolicyContainer을 복제된 객체로 설정합니다 outsideSettings의 정책 컨테이너.
realm을 executionContext의 Realm 구성 요소로 설정합니다.
workletGlobalScope을 realm의 전역 객체로 설정합니다.
settingsObject을 새 환경 설정 객체로 설정하고, 다음과 같이 알고리즘을 정의합니다:
executionContext을 반환합니다.
workletGlobalScope의 모듈 맵을 반환합니다.
inheritedAPIBaseURL을 반환합니다.
작업자 또는 단일 리소스에서 파생된 다른 전역 객체와 달리, 워크릿은 기본 리소스가 없습니다. 대신, 각기 다른 URL을 가진 여러 스크립트가 worklet.addModule()
를
통해 전역 범위로 로드됩니다. 따라서 이 API
기본 URL은 다른 전역 객체와는 다릅니다. 그러나 현재까지는 워크릿 코드에 사용할 수 있는 API가 API 기본 URL을 사용하는 경우가 없기 때문에 이 차이는 중요하지
않습니다.
origin을 반환합니다.
inheritedPolicyContainer을 반환합니다.
TODO를 반환합니다.
단언: 이 알고리즘은 호출되지 않음을 확인합니다. 워크릿 컨텍스트에서는 시간 원본이 사용되지 않기 때문입니다.
settingsObject의 id를 새로운 고유한 불투명 문자열로 설정하고, 생성 URL을 inheritedAPIBaseURL로 설정하고, 최상위 생성 URL을 null로 설정하고, 최상위 원본을 outsideSettings의 최상위 원본으로 설정하며, 대상 브라우징 컨텍스트를 null로 설정하고, 활성 서비스 작업자를 null로 설정합니다.
realm의 [[HostDefined]] 필드를 settingsObject로 설정합니다.
settingsObject을 반환합니다.
Worklet
클래스모든 최신 엔진에서 지원됨.
Worklet
클래스는 관련된 WorkletGlobalScope
에
모듈 스크립트를 추가할 수 있는 기능을 제공합니다. 그런 다음 사용자 에이전트는 WorkletGlobalScope
에
등록된 클래스를 생성하고 해당 메서드를 호출할 수 있습니다.
[Exposed =Window , SecureContext ]
interface Worklet {
[NewObject ] Promise <undefined > addModule (USVString moduleURL , optional WorkletOptions options = {});
};
dictionary WorkletOptions {
RequestCredentials credentials = "same-origin";
};
Worklet
인스턴스를 생성하는
사양은 주어진 인스턴스에 대해 다음을 지정해야 합니다:
워크릿 전역 범위 유형으로,
WorkletGlobalScope
에서
상속되는 웹 IDL 유형이어야 합니다.
워크릿 목적지 유형으로, 목적지여야 하며, 스크립트를 가져올 때 사용됩니다.
await worklet.addModule(moduleURL[, { credentials }])
모든 최신 엔진에서 지원됨.
moduleURL로 제공된 모듈 스크립트를 worklet의 모든 전역 범위에 로드하고 실행합니다. 이 과정의 일부로 추가 전역 범위를 생성할 수도 있습니다. 스크립트가 모든 전역 범위에서 성공적으로 로드되고 실행되면 반환된 약속이 이행됩니다.
credentials
옵션은 자격 증명 모드를 설정하여 스크립트 가져오기 프로세스를 수정할 수 있습니다. 기본값은 "same-origin
"입니다.
스크립트 또는 그 종속성을 가져오는 과정에서 실패하면,
반환된 약속은 "AbortError
" DOMException
으로
거부됩니다. 스크립트 또는 그 종속성의 구문 분석 중 오류가 발생하면,
반환된 약속은 구문 분석 중 생성된 예외와 함께 거부됩니다.
Worklet
에는 목록인
전역 범위가 있으며,
이 목록에는 Worklet
의
워크릿 전역 범위 유형의
인스턴스가 포함됩니다. 처음에는 비어 있습니다.
Worklet
에는 추가된 모듈 목록이 있으며, 이는 목록으로, 초기에는 비어 있습니다.
이 목록에 대한 접근은 스레드 안전해야 합니다.
Worklet
에는 모듈 응답 맵이 있으며, 이는 정렬된 맵으로,
URL에서
"fetching
" 또는 튜플까지로 구성되며,
이 맵은 처음에는 비어 있으며, 스레드 안전하게 접근해야 합니다.
추가된 모듈
목록
및 모듈
응답 맵은
WorkletGlobalScope
이
생성되는 시점에 동일한 소스 텍스트를 기반으로 동일한 모듈 스크립트가 실행되도록
보장하기 위해 존재합니다.
이는 추가 WorkletGlobalScope
생성이 작성자에게 투명하게 이루어지도록 합니다.
실제로, 사용자 에이전트가 이러한 데이터 구조와 관련 알고리즘을 스레드 안전한 프로그래밍 기술을 사용하여 구현할 필요는 없습니다.
대신, addModule()
이
호출될 때,
사용자 에이전트는 메인 스레드에서 모듈 그래프를 가져오고,
가져온 소스 텍스트(즉, 모듈 응답 맵에 포함된 중요한 데이터)를
WorkletGlobalScope
를
포함하는
각 스레드에 보낼 수 있습니다.
그런 다음, 사용자 에이전트가 주어진 Worklet
에 대해
새 WorkletGlobalScope
를
생성할 때,
메인 스레드에서 새 WorkletGlobalScope
가
포함된 스레드로 가져온 소스 텍스트와 진입점 목록을 보낼 수 있습니다.
addModule(moduleURL,
options)
메서드 단계는 다음과 같습니다:
moduleURLRecord를 URL 인코딩-파싱의 결과로 설정합니다 moduleURL, outsideSettings에 상대적인.
moduleURLRecord가 실패인 경우, 거부된 약속을 반환합니다.
"SyntaxError
" DOMException
으로.
promise를 새 약속으로 설정합니다.
다음 단계를 병렬로 실행합니다:
this의 전역 범위가 비어 있으면, 다음을 수행합니다:
워크릿 전역 범위 생성을 this에 대해 수행합니다.
모든 단계가 완료될 때까지 기다립니다. 생성 프로세스(워크릿 에이전트 내에서 수행되는 것을 포함하여).
addedSuccessfully를 false로 설정합니다.
각 workletGlobalScope에 대해
this의 전역 범위에서,
전역 작업 큐를 네트워킹 작업 소스에 지정하여
workletGlobalScope를 사용하여 워크릿 스크립트 그래프를 가져옵니다,
moduleURLRecord, outsideSettings, this의 워크릿 목적지 유형,
options["credentials
"],
workletGlobalScope의
관련 설정 객체,
this의 모듈 응답 맵을 제공하며,
script에 대해 다음 단계를 실행합니다:
이 페치 중 처음 것만 실제로 네트워크 요청을 수행합니다. 다른 WorkletGlobalScope
에
대한
요청은 응답을
재사용합니다
this의 모듈 응답 맵에서.
script가 null인 경우:
전역 작업을 큐에 추가하고 네트워킹 작업 소스에 this의 관련 전역 객체를 지정하여 다음 단계를 수행합니다:
pendingTasks가 -1이 아닌 경우:
pendingTasks를 -1로 설정합니다.
"AbortError
"
DOMException
과
함께 promise를 거부합니다.
이 단계를 중단합니다.
script의 재실행할 오류가 null이 아닌 경우:
전역 작업을 큐에 추가하고 네트워킹 작업 소스에 this의 관련 전역 객체를 지정하여 다음 단계를 수행합니다:
pendingTasks가 -1이 아닌 경우:
pendingTasks를 -1로 설정합니다.
script의 재실행할 오류와 함께 promise를 거부합니다.
이 단계를 중단합니다.
addedSuccessfully가 false인 경우:
모듈 스크립트를 실행합니다 script에 대해.
전역 작업을 큐에 추가하고 네트워킹 작업 소스에 this의 관련 전역 객체를 지정하여 다음 단계를 수행합니다:
pendingTasks가 -1이 아닌 경우:
pendingTasks를 pendingTasks - 1로 설정합니다.
pendingTasks가 0인 경우 promise를 해결합니다.
promise를 반환합니다.
Worklet
의 수명은 특별히 고려할 사항이 없으며,
이는 Window
와 같이 속한 객체에 연결되어 있습니다.
각 Document
는 워크릿 전역 범위를 가지고 있으며,
이는 WorkletGlobalScope
의
집합으로, 초기에는
비어 있습니다.
WorkletGlobalScope
의 수명은
최소한 Document
의
워크릿
전역 범위에
포함된 객체에 연결됩니다. 특히, Document
를
파괴하면,
해당 WorkletGlobalScope
가
종료되고 가비지 컬렉션될 수 있습니다.
또한, 사용자 에이전트는 언제든지 주어진 WorkletGlobalScope
를
종료할 수
있습니다.
단, 해당 워크릿 유형을 정의하는 사양에서 달리 명시하지 않은 경우에 한합니다. 예를 들어, 사용자 에이전트는
워크릿 에이전트의
이벤트 루프에
작업이 대기 중이지 않거나,
사용자 에이전트가 워크릿을 사용할 계획이 없을 경우,
또는 사용자 에이전트가 무한 루프 또는 제한 시간을 초과하는 콜백과 같은 비정상적인 작업을 감지한 경우, 이를 종료할 수 있습니다.
마지막으로, 특정 워크릿 유형에 대한 사양은
WorkletGlobalScope
를
언제 생성할지에 대해
더 구체적인 세부 사항을 제공할 수 있습니다. 예를 들어,
예제와 같이 특정 프로세스에서 워크릿 코드를 호출할 때 이를 생성할 수 있습니다.
모든 최신 엔진에서 지원됨.
이 섹션은 규범적이지 않습니다.
이 사양은 클라이언트 측에서 이름-값 쌍을 저장하기 위한 HTTP 세션 쿠키와 유사한 두 가지 관련 메커니즘을 소개합니다. [COOKIES]
첫 번째 메커니즘은 사용자가 하나의 거래를 수행하는 시나리오를 위한 것으로, 동시에 여러 창에서 여러 거래를 수행할 수 있는 경우를 고려하여 설계되었습니다.
쿠키는 이러한 경우를 잘 처리하지 못합니다. 예를 들어, 사용자가 동일한 사이트에서 두 개의 다른 창에서 비행기 티켓을 구매하고 있는 경우를 생각해보세요. 만약 사이트가 사용자가 구매 중인 티켓을 추적하기 위해 쿠키를 사용했다면, 두 창에서 페이지를 이동할 때마다 현재 구매 중인 티켓 정보가 한 창에서 다른 창으로 "누출"되어, 사용자가 두 번의 클릭만으로 동일한 비행편의 티켓을 두 장 구매하게 될 수 있습니다.
이를 해결하기 위해, 이 사양은 sessionStorage
getter를 도입합니다.
사이트는 세션 스토리지에 데이터를 추가할 수 있으며, 해당 창에서 열린 동일한 사이트의 모든 페이지에서 이를 접근할 수 있습니다.
예를 들어, 사용자가 보험을 원한다고 표시하기 위해 체크할 수 있는 체크박스가 있는 페이지가 있다고 가정해보겠습니다:
< label >
< input type = "checkbox" onchange = "sessionStorage.insurance = checked ? 'true' : ''" >
이번 여행에 보험이 필요합니다.
</ label >
나중에 페이지에서 사용자가 체크박스를 체크했는지 여부를 스크립트에서 확인할 수 있습니다:
if ( sessionStorage. insurance) { ... }
사용자가 사이트에서 여러 창을 열어두었다면, 각 창마다 독립적인 세션 스토리지 객체가 생깁니다.
두 번째 스토리지 메커니즘은 여러 창에 걸쳐 저장되며, 현재 세션이 끝난 후에도 지속되는 저장을 위해 설계되었습니다. 특히, 웹 애플리케이션은 성능상의 이유로 사용자가 작성한 전체 문서나 사용자의 메일함과 같은 메가바이트 단위의 사용자 데이터를 클라이언트 측에 저장하려고 할 수 있습니다.
다시 말해, 쿠키는 모든 요청과 함께 전송되기 때문에 이 경우를 잘 처리하지 못합니다.
localStorage
getter는 페이지의 로컬 스토리지 영역에 접근하는 데 사용됩니다.
example.com 사이트는 사용자가 페이지를 몇 번 로드했는지 세고, 그 결과를 페이지 하단에 다음과 같이 표시할 수 있습니다:
< p >
이 페이지를
< span id = "count" > 몇 번</ span >
보셨습니다.
</ p >
< script >
if ( ! localStorage. pageLoadCount)
localStorage. pageLoadCount = 0 ;
localStorage. pageLoadCount = parseInt( localStorage. pageLoadCount) + 1 ;
document. getElementById( 'count' ). textContent = localStorage. pageLoadCount;
</ script >
각 사이트는 자체적인 독립된 스토리지 영역을 가지고 있습니다.
localStorage
getter는 공유 상태에 접근할 수 있습니다.
이 사양은 멀티프로세스 사용자 에이전트에서 다른 에이전트 클러스터와의 상호작용을 정의하지 않으며, 작성자는 잠금 메커니즘이 없다고 가정하는 것이 좋습니다.
예를 들어, 사이트가 키의 값을 읽고, 그 값을 증가시킨 다음, 해당 값을 세션의 고유 식별자로 사용하는 시나리오를 생각해보세요.
만약 이 작업을 동시에 두 개의 다른 브라우저 창에서 수행하면, 두 세션에 동일한 "고유" 식별자를 사용하게 되어 잠재적으로 심각한 결과를 초래할 수 있습니다.
모든 최신 엔진에서 지원됨.
Storage
인터페이스[Exposed =Window ]
interface Storage {
readonly attribute unsigned long length ;
DOMString ? key (unsigned long index );
getter DOMString ? getItem (DOMString key );
setter undefined setItem (DOMString key , DOMString value );
deleter undefined removeItem (DOMString key );
undefined clear ();
};
storage.length
모든 최신 엔진에서 지원됨.
키/값 쌍의 수를 반환합니다.
storage.key (n)
모든 최신 엔진에서 지원됨.
n번째 키의 이름을 반환하며, n이 키/값 쌍의 수보다 크거나 같은 경우 null을 반환합니다.
value = storage.getItem (key)
모든 최신 엔진에서 지원됨.
value = storage[key]
주어진 key에 연결된 현재 값을 반환하거나, 주어진 key가 존재하지 않으면 null을 반환합니다.
storage.setItem (key, value)
모든 최신 엔진에서 지원됨.
value = storage[key] = value
key로 식별되는 쌍의 값을 value로 설정하며, 이전에 key에 대한 쌍이 존재하지 않은 경우 새 키/값 쌍을 생성합니다.
새 값을 설정할 수 없을 경우 "QuotaExceededError
" DOMException
예외를 발생시킵니다. (예를 들어, 사용자가 사이트의 스토리지를 비활성화했거나 할당량이 초과된 경우 설정이 실패할 수 있습니다.)
storage.removeItem (key)
모든 최신 엔진에서 지원됨.
delete
storage[key]
주어진 key에 해당하는 키/값 쌍을 제거합니다, 만약 주어진 key에 해당하는 키/값 쌍이 존재한다면.
storage.clear()
모든 최신 엔진에서 지원됨.
키/값 쌍이 있는 경우, 모든 키/값 쌍을 제거합니다.
Storage
객체에는 다음과 같은 연관된 속성이 있습니다:
local
" 또는 "session
".Storage
객체 storage를
재정렬하려면, storage의
맵의
항목을
구현에 정의된 방식으로 재정렬하십시오.
불행히도, 반복 순서는 정의되지 않으며 대부분의 변경 시 변경될 수 있습니다.
Storage
객체 storage를
브로드캐스트하려면, key, oldValue,
newValue가 주어졌을 때, 다음 단계를 수행하십시오:
storage의 관련
글로벌 객체의
연관된
Document
를
thisDocument로 설정하십시오.
thisDocument의 URL을 url로 설정하십시오.
storage를 제외한, 다음 조건을 만족하는 모든
Storage
객체를 remoteStorages로 설정하십시오:
또한, 유형이
"session
"일 경우,
해당 관련 설정 객체의
연관된
Document
의
탐색 가능한 노드의
탐색 가능한 네비게이블이
thisDocument의 탐색 가능한
노드의
탐색 가능한 네비게이블과 같아야 합니다.
각 remoteStorage에 대해: 전역 작업을 큐에 추가하여 remoteStorage의 관련 글로벌 객체에서 이벤트를 발생시킵니다.
이벤트 이름은 storage
로 하고,
key는 key
로,
oldValue는 oldValue
로,
newValue는 newValue
로,
url은 url
로,
remoteStorage는 storageArea
로
초기화됩니다.
결과적으로 생성된 작업과 연관된
Document
객체는
반드시 완전히 활성화된 상태일 필요는 없지만,
이러한 객체에서 발생하는 이벤트는 이벤트 루프에 의해
무시되며, Document
가
다시 완전히 활성화된 후에 처리됩니다.
length
속성의 getter 단계는
this의
맵의
크기를 반환하는 것입니다.
key(index)
메서드 단계는 다음과 같습니다:
지원되는 속성 이름은
Storage
객체
storage에서 키 가져오기의 결과입니다.
getItem(key)
메서드 단계는 다음과 같습니다:
setItem(key, value)
메서드 단계는 다음과 같습니다:
oldValue를 null로 설정하십시오.
reorder를 true로 설정하십시오.
만약 value를 저장할 수 없다면, "QuotaExceededError
"
DOMException
예외를 던지십시오.
만약 reorder가 true라면, 재정렬을 수행하십시오.
브로드캐스트를 수행하십시오. key, oldValue, 그리고 value를 사용하여 this를 사용하십시오.
removeItem(key)
메서드 단계는 다음과
같습니다:
clear()
메서드 단계는 다음과 같습니다:
sessionStorage
가져오기interface mixin WindowSessionStorage {
readonly attribute Storage sessionStorage ;
};
Window includes WindowSessionStorage ;
window.sessionStorage
모든 최신 엔진에서 지원됩니다.
window의 세션 스토리지 영역과 연결된 Storage
객체를 반환합니다.
만약 Document
의 origin이 불투명한 원본이거나, 요청이 정책 결정을 위반하는 경우 (예: 사용자
에이전트가 페이지에 데이터를 유지하도록 허용하지 않는 경우) "SecurityError
" DOMException
예외를 던집니다.
Document
객체에는 연관된 세션 스토리지 보유자가 있습니다. 이는 null이거나 Storage
객체일 수 있으며, 초기값은 null입니다.
sessionStorage
getter
단계는 다음과 같습니다:
만약 this의 연결된 Document
의 세션 스토리지 보유자가
null이 아니라면, this의 연결된 Document
의 세션 스토리지
보유자를 반환합니다.
map을 세션 스토리지 병 맵 가져오기의 결과로 설정하십시오. this의 관련 설정 객체와
"sessionStorage
"를 사용하십시오.
만약 map이 실패하면, "SecurityError
" DOMException
예외를 던지십시오.
this의 연결된 Document
의 세션 스토리지
보유자를 storage로 설정하십시오.
storage를 반환하십시오.
새로운 보조 브라우징 컨텍스트 및 문서 생성 후, 세션 스토리지가 복사됩니다.
localStorage
가져오기interface mixin WindowLocalStorage {
readonly attribute Storage localStorage ;
};
Window includes WindowLocalStorage ;
window.localStorage
모든 최신 엔진에서 지원됩니다.
window의 로컬 스토리지 영역과 연결된 Storage
객체를 반환합니다.
만약 Document
의 origin이 불투명한 원본이거나, 요청이 정책 결정을 위반하는 경우 (예: 사용자 에이전트가
페이지에 데이터를 유지하도록 허용하지 않는 경우) "SecurityError
" DOMException
예외를 던집니다.
Document
객체에는 연관된 로컬 스토리지 보유자가 있습니다. 이는 null이거나 Storage
객체일 수 있으며, 초기값은 null입니다.
localStorage
getter 단계는
다음과 같습니다:
만약 this의 연결된 Document
의 로컬 스토리지 보유자가 null이
아니라면, this의 연결된 Document
의 로컬 스토리지 보유자를
반환합니다.
map을 로컬 스토리지 병 맵 가져오기의 결과로 설정하십시오. this의 관련 설정 객체와 "localStorage
"를
사용하십시오.
만약 map이 실패하면, "SecurityError
" DOMException
예외를 던지십시오.
this의 연결된 Document
의 로컬 스토리지 보유자를
storage로 설정하십시오.
storage를 반환하십시오.
StorageEvent
인터페이스모든 최신 엔진에서 지원됩니다.
[Exposed =Window ]
interface StorageEvent : Event {
constructor (DOMString type , optional StorageEventInit eventInitDict = {});
readonly attribute DOMString ? key ;
readonly attribute DOMString ? oldValue ;
readonly attribute DOMString ? newValue ;
readonly attribute USVString url ;
readonly attribute Storage ? storageArea ;
undefined initStorageEvent (DOMString type , optional boolean bubbles = false , optional boolean cancelable = false , optional DOMString ? key = null , optional DOMString ? oldValue = null , optional DOMString ? newValue = null , optional USVString url = "", optional Storage ? storageArea = null );
};
dictionary StorageEventInit : EventInit {
DOMString ? key = null ;
DOMString ? oldValue = null ;
DOMString ? newValue = null ;
USVString url = "";
Storage ? storageArea = null ;
};
event.key
변경된 저장소 항목의 키를 반환합니다.
event.oldValue
변경된 저장소 항목 키의 이전 값을 반환합니다.
event.newValue
변경된 저장소 항목 키의 새로운 값을 반환합니다.
event.url
저장소 항목이 변경된 문서의 URL을 반환합니다.
event.storageArea
영향을 받은 Storage
객체를 반환합니다.
key
, oldValue
,
newValue
,
url
, 그리고 storageArea
속성은 초기화된 값을 반환해야 합니다.
initStorageEvent(type, bubbles, cancelable, key, oldValue, newValue, url, storageArea)
메서드는 initEvent()
메서드와 유사한 방식으로 이벤트를 초기화해야 합니다. [DOM]
제3자 광고주(또는 여러 사이트에 콘텐츠를 배포할 수 있는 능력을 가진 엔터티)가 고유 식별자를 해당 로컬 저장소 영역에 저장하여 여러 세션에 걸쳐 사용자를 추적하고, 사용자의 관심사에 대한 프로필을 작성하여 매우 타겟팅된 광고를 제공할 수 있습니다. 사용자의 실제 신원을 알고 있는 사이트(예: 인증된 자격 증명이 필요한 전자 상거래 사이트)와 함께 사용하면 순전히 익명의 웹 사용 환경에서 억압적인 그룹이 개별 사용자를 더 정확하게 타겟팅할 수 있습니다.
사용자 추적 위험을 완화하기 위해 사용할 수 있는 여러 가지 기술이 있습니다:
사용자 에이전트는 상위 레벨 탐색 가능한 활성 문서의 도메인에서 유래한 스크립트에
대해서만 localStorage
개체에 접근할 수
있도록 제한할 수 있습니다. 예를 들어, iframe
에서 실행되는 다른 도메인의
페이지에 대해서는 API 접근을 거부할 수 있습니다.
사용자 에이전트는 사용자가 구성할 수 있는 방식으로 일정 시간이 지난 후 저장된 데이터를 자동으로 삭제할 수 있습니다.
예를 들어, 사용자 에이전트는 제3자 로컬 저장소 영역을 세션 전용 저장소로 취급하여 사용자가 해당 데이터를 접근할 수 있는 모든 탐색 가능한 페이지를 닫은 후 데이터를 삭제하도록 구성될 수 있습니다.
이 방법은 사이트가 사용자를 추적할 수 있는 능력을 제한할 수 있습니다. 사용자가 사이트에 로그인하거나 서비스를 이용할 때와 같이 사용자가 직접 사이트에 인증할 때만 여러 세션에 걸쳐 사용자를 추적할 수 있게 됩니다.
그러나 이러한 방법은 API를 장기적인 저장소 메커니즘으로 사용하는 유용성을 줄일 수 있으며, 사용자가 데이터 만료의 영향을 완전히 이해하지 못할 경우 사용자의 데이터를 위험에 빠뜨릴 수 있습니다.
사용자가 쿠키를 삭제하면서 로컬 저장소에 저장된 데이터를 삭제하지 않는다면, 사이트는 이 두 기능을 상호 백업으로 사용하여 사용자의 개인정보 보호를 위협할 수 있습니다. 사용자 에이전트는 사용자가 이러한 가능성을 이해하고 모든 지속적인 저장소 기능에서 데이터를 동시에 삭제할 수 있도록 도와주는 인터페이스를 제공해야 합니다. [COOKIES]
사용자 에이전트는 사이트가 세션 저장소 영역에 무제한으로 접근할 수 있도록 허용할 수 있지만, 로컬 저장소 영역에 접근하려면 사용자의 승인을 요구할 수 있습니다.
사용자 에이전트는 제3자 출처의 콘텐츠가 데이터를 저장하도록 유도한 사이트의 출처를 기록할 수 있습니다.
이 정보가 현재 지속적인 저장소에 있는 데이터를 보여주는 데 사용된다면, 사용자는 지속적인 저장소의 어느 부분을 삭제할지에 대해 정보에 입각한 결정을 내릴 수 있습니다. 블록리스트(“이 데이터를 삭제하고 이 도메인이 다시는 데이터를 저장하지 못하도록 차단”)와 결합하여 사용자는 자신이 신뢰하는 사이트로 지속적인 저장소 사용을 제한할 수 있습니다.
사용자 에이전트는 사용자가 지속적인 저장소 도메인 블록리스트를 공유할 수 있도록 허용할 수 있습니다.
이를 통해 커뮤니티는 함께 협력하여 개인정보를 보호할 수 있습니다.
이러한 제안은 이 API를 사용한 사용자 추적의 단순한 사용을 방지하지만, 완전히 차단하지는 못합니다. 단일 도메인 내에서 사이트는 세션 중에 사용자를 계속 추적할 수 있으며, 사이트에서 얻은 식별 정보(이름, 신용카드 번호, 주소 등)와 함께 이 모든 정보를 제3자에게 전달할 수 있습니다. 제3자가 여러 사이트와 협력하여 이러한 정보를 얻으면 여전히 프로필을 만들 수 있습니다.
그러나 사용자 추적은 사용자 에이전트의 협조 없이도 어느 정도 가능하며, 이는 이미 무해한 목적으로 널리 사용되고 있는 세션 식별자를 URL에 사용하는 것과 같은 방법으로 쉽게 재목적화될 수 있습니다. 이 정보는 다른 사이트와 공유되어 방문자의 IP 주소 및 기타 사용자별 데이터(예: 사용자 에이전트 헤더 및 구성 설정)를 사용하여 별도의 세션을 하나의 사용자 프로필로 결합할 수 있습니다.
사용자 에이전트는 지속적으로 저장된 데이터를 잠재적으로 민감한 것으로 취급해야 합니다. 이메일, 캘린더 약속, 건강 기록 또는 기타 기밀 문서가 이 메커니즘에 저장될 가능성이 충분히 있습니다.
이를 위해 사용자 에이전트는 데이터를 삭제할 때 기본 저장소에서 데이터를 신속하게 삭제해야 합니다.
DNS 스푸핑 공격의 가능성 때문에 특정 도메인에 있다고 주장하는 호스트가 실제로 해당 도메인에 속해 있는지 보장할 수 없습니다. 이를 완화하기 위해 페이지는 TLS를 사용할 수 있습니다. TLS를 사용하는 페이지는 사용자, 사용자를 대신하여 작동하는 소프트웨어 및 동일한 도메인에서 온 것으로 식별되는 인증서를 가진 다른 TLS를 사용하는 페이지만이 해당 저장소 영역에 접근할 수 있다는 점을 확신할 수 있습니다.
예를 들어, 이제는 사라진 geocities.com
에 콘텐츠를 호스팅하는 사용자와 같은 여러 저자가 동일한 호스트 이름을 공유하는 경우, 모두 하나의 로컬 저장소 개체를
공유합니다. 경로명으로 접근을 제한할 수 있는 기능이 없습니다. 따라서 공유 호스트의 저자는 다른 저자가 데이터를 읽고 덮어쓰는 것이 간단하므로 이러한 기능을 사용하는 것을 피하는 것이 좋습니다.
경로 제한 기능이 제공되더라도 일반적인 DOM 스크립팅 보안 모델은 이러한 보호를 우회하고 어느 경로에서나 데이터를 접근할 수 있도록 하는 것이 간단합니다.
이러한 지속적인 저장소 기능을 구현할 때의 주요 위험은 적대적인 사이트가 다른 도메인의 정보를 읽도록 허용하는 것과 적대적인 사이트가 다른 도메인에서 읽을 수 있는 정보를 작성하도록 허용하는 것입니다.
타사 사이트가 해당 도메인에서 읽을 수 없는 데이터를 읽도록 허용하면 정보 유출이 발생합니다. 예를 들어, 한 도메인에서 사용자의 쇼핑 위시리스트가 다른 도메인에서 타겟 광고를 위해 사용될 수 있으며, 워드 프로세싱 사이트에 저장된 사용자의 진행 중인 기밀 문서가 경쟁 회사의 사이트에서 검토될 수 있습니다.
타사 사이트가 다른 도메인의 지속적인 저장소에 데이터를 작성하도록 허용하면 정보 위조가 발생할 수 있으며, 이는 동일하게 위험합니다. 예를 들어, 적대적인 사이트가 사용자의 위시리스트에 항목을 추가하거나, 사용자의 세션 식별자를 적대적인 사이트가 사용할 수 있는 알려진 ID로 설정하여 피해자 사이트에서 사용자의 행동을 추적할 수 있습니다.
따라서 이 사양에서 설명된 출처 모델을 엄격히 따르는 것이 사용자 보안을 위해 중요합니다.
이 섹션에서는 HTML MIME 타입으로 레이블이 지정된 리소스에 대한 규칙만 설명합니다. XML 리소스에 대한 규칙은 아래의 "XML 문법"라는 제목의 섹션에서 논의됩니다.
이 섹션은 문서, 저작 도구, 마크업 생성기에만 적용됩니다. 특히, 이 섹션은 적합성 검사기에는 적용되지 않습니다. 적합성 검사기는 다음 섹션("HTML 문서 구문 분석")에서 제시된 요구 사항을 사용해야 합니다.
문서는 다음과 같은 순서로 구성되어야 합니다:
html
요소 형식으로.
위에서 언급한 다양한 유형의 콘텐츠는 다음 몇 개의 섹션에서 설명됩니다.
또한, 문자 인코딩 선언이 어떻게 직렬화되어야 하는지에 대한 몇 가지 제한 사항이 있으며, 이 주제에 대한 섹션에서 논의됩니다.
ASCII 공백 문자는 html
요소 앞, html
요소의 시작 부분, 그리고 head
요소 앞에 있을 때 문서가 구문 분석될 때 제거됩니다.
html
요소 뒤에 있는 ASCII 공백 문자는 마치 body
요소 끝에 있는 것처럼 구문 분석됩니다. 따라서, 문서 요소 주변의 ASCII 공백 문자는 왕복이 불가능합니다.
DOCTYPE 뒤, 문서 요소 앞의 주석 뒤, html
요소의
시작 태그 뒤(생략되지 않은 경우), 그리고 html
요소 안에
있는 주석 뒤에 줄바꿈을 삽입하는 것이 제안됩니다.
HTML 문법의 많은 문자열(예: 요소와 속성의 이름)은 ASCII 대문자 및 ASCII 소문자에 대해 대소문자를 구분하지 않습니다. 편의를 위해 이 섹션에서는 이를 "대소문자 구분 없음"이라고 합니다.
DOCTYPE는 필수적인 서문입니다.
DOCTYPE는 레거시 이유로 필수적입니다. 생략될 경우, 브라우저는 일부 사양과 호환되지 않는 다른 렌더링 모드를 사용하는 경향이 있습니다. 문서에 DOCTYPE을 포함시키면 브라우저가 관련 사양을 최대한 따르도록 시도합니다.
DOCTYPE은 다음 순서로 구성되어야 합니다:
<!DOCTYPE
" 문자열과 ASCII
대소문자 구분 없음과 일치하는 문자열.
html
" 문자열과 ASCII
대소문자 구분 없음과 일치하는 문자열.
즉, <!DOCTYPE html>
이며, 대소문자를 구분하지 않습니다.
단축형 DOCTYPE "<!DOCTYPE html>
"을 출력할 수 없는 HTML 생성기를 위한 목적으로, DOCTYPE
레거시 문자열이 DOCTYPE에 삽입될 수 있습니다(위에서 정의된 위치에). 이 문자열은 다음으로 구성되어야 합니다:
SYSTEM
" 문자열과 ASCII
대소문자 구분 없음과 일치하는 문자열.
about:legacy-compat
"라는 리터럴
문자열.
즉, <!DOCTYPE html SYSTEM "about:legacy-compat">
또는
<!DOCTYPE html SYSTEM 'about:legacy-compat'>
이며, 따옴표 안의 부분을 제외하고는 대소문자를 구분하지 않습니다.
DOCTYPE 레거시 문자열은 시스템에서 더 짧은 문자열을 출력할 수 없는 경우에만 사용해야 합니다.
요소에는 빈 요소, template
요소, 원시 텍스트 요소, 이스케이프 가능한 원시 텍스트 요소, 외부 요소, 그리고 일반
요소의 여섯 가지 종류가 있습니다.
area
, base
, br
, col
, embed
, hr
, img
, input
, link
, meta
, source
, track
, wbr
template
요소
template
script
, style
textarea
, title
태그는 마크업에서 요소의 시작과 끝을 구분하는 데 사용됩니다. 원시 텍스트, 이스케이프 가능한 원시 텍스트, 및 일반 요소는 시작 태그로 시작 지점을 나타내고, 종료 태그로 끝나는 지점을 나타냅니다. 특정 일반 요소의 시작 및 종료 태그는 아래 옵션 태그 섹션에서 설명된 대로 생략될 수 있습니다. 생략될 수 없는 태그는 생략되어서는 안 됩니다. 빈 요소는 시작 태그만 가지고 있으며, 종료 태그는 지정되어서는 안 됩니다. 외부 요소는 시작 태그와 종료 태그를 모두 가지거나, 자가 폐쇄로 표시된 시작 태그를 가져야 하며, 이 경우 종료 태그를 가질 수 없습니다.
요소의 내용은 시작 태그 직후(특정 경우에는 암시될 수 있음)와 종료 태그 직전에 배치되어야 합니다(다시 말하지만, 특정 경우에는 암시될 수 있음). 각 요소의 정확한 허용 내용은 이 사양의 앞부분에서 설명한 해당 요소의 내용 모델에 따라 다릅니다. 요소는 허용되지 않는 내용을 포함해서는 안 됩니다. 그러나 이러한 내용 모델이 설정한 제한 외에도 다섯 가지 요소 유형에는 추가적인 구문적 요구 사항이 있습니다.
빈 요소는 내용을 가질 수 없습니다(시작 태그와 종료 태그 사이에 내용을 넣을 수 없기 때문에).
template
요소는
템플릿 콘텐츠를 가질 수 있지만, 이러한
템플릿 콘텐츠는
template
요소의 자식이 아닙니다.
대신, 이는 다른 DocumentFragment
에
연결된 Document
에 저장됩니다.
탐색 문맥이 없으므로,
template
콘텐츠가
메인 Document
와 충돌하지 않도록 합니다.
template
요소의
템플릿 콘텐츠에 대한 마크업은
template
요소의 시작 태그 바로 뒤와
template
요소의 종료 태그 바로 앞에
위치하며
(다른 요소와 마찬가지로), 텍스트,
문자 참조,
요소,
주석으로 구성될 수 있지만,
텍스트는 U+003C LESS-THAN SIGN (<) 문자나
모호한 앰퍼샌드를 포함해서는 안 됩니다.
원시 텍스트 요소는 텍스트를 가질 수 있지만, 아래에 설명된 제한사항이 적용됩니다.
이스케이프 가능한 원시 텍스트 요소는 텍스트와 문자 참조를 가질 수 있지만, 텍스트에는 모호한 앰퍼샌드가 포함되지 않아야 합니다. 또한 아래에 설명된 추가적인 제한이 적용됩니다.
외부 요소의 시작 태그가 자가 폐쇄로 표시된 경우에는 내용을 가질 수 없습니다(다시 말하지만, 종료 태그가 없으므로 시작 태그와 종료 태그 사이에 내용을 넣을 수 없습니다). 시작 태그가 자가 폐쇄로 표시되지 않은 외부 요소는 텍스트, 문자 참조, CDATA 섹션, 다른 요소, 및 주석을 가질 수 있지만, 텍스트에는 U+003C LESS-THAN SIGN(<) 문자나 모호한 앰퍼샌드가 포함되지 않아야 합니다.
HTML 구문은 외부 요소에서도 네임스페이스 선언을 지원하지 않습니다.
예를 들어, 다음 HTML 조각을 고려해 보십시오:
< p >
< svg >
< metadata >
<!-- 이것은 유효하지 않습니다 -->
< cdr:license xmlns:cdr = "https://www.example.com/cdr/metadata" name = "MIT" />
</ metadata >
</ svg >
</ p >
가장 안쪽의 요소인 cdr:license
는 실제로는 SVG 네임스페이스에 속합니다. "xmlns:cdr
" 속성은(다른 XML과 달리) 아무런 효과가
없기 때문입니다. 사실, 위 조각의 주석이 말하는 것처럼, 이 조각은 실제로 비합법적입니다. 이는 SVG 2가 SVG 네임스페이스에서
"cdr:license
"라는 이름의 요소를 정의하지 않기 때문입니다.
일반 요소는 텍스트, 문자 참조, 다른 요소, 및 주석을 가질 수 있지만, 텍스트에는 U+003C LESS-THAN SIGN(<) 문자나 모호한 앰퍼샌드가 포함되지 않아야 합니다. 일부 일반 요소는 내용 모델과 이 단락에서 설명된 제한 사항 외에도 더 많은 제한 사항을 가질 수 있습니다. 이러한 제한 사항은 아래에 설명되어 있습니다.
태그는 요소의 이름을 나타내는 태그 이름을 포함합니다. 모든 HTML 요소는 ASCII 영숫자만 사용하여 이름을 가집니다. HTML 구문에서 태그 이름은 외부 요소의 경우에도 혼용된 대소문자로 작성될 수 있으며, 소문자로 변환될 때 요소의 태그 이름과 일치해야 합니다. 태그 이름은 대소문자를 구분하지 않습니다.
시작 태그는 다음 형식을 가져야 합니다:
종료 태그는 다음 형식을 가져야 합니다:
속성은 요소의 시작 태그 안에 표현됩니다.
속성에는 이름과 값이 있습니다. 속성 이름은 제어 문자, U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (/), U+003D (=), 및 비문자를 제외한 하나 이상의 문자로 구성되어야 합니다. HTML 구문에서는, 외부 요소의 속성 이름조차도 ASCII 대문자와 소문자를 혼합하여 쓸 수 있습니다.
속성 값은 텍스트와 문자 참조의 혼합으로 구성되며, 추가로 텍스트에 모호한 앰퍼샌드가 포함되지 않아야 합니다.
속성은 네 가지 다른 방법으로 지정할 수 있습니다:
속성 이름만 있습니다. 값은 암묵적으로 빈 문자열입니다.
다음 예에서 disabled
속성은 빈 속성
구문을 사용하여 지정되었습니다:
< input disabled >
빈 속성 구문을 사용하는 속성 뒤에 다른 속성이 따라야 하는 경우, 두 속성 사이에 ASCII 공백이 있어야 합니다.
속성 이름 뒤에 하나 이상의 ASCII 공백이 올 수 있고, U+003D EQUALS SIGN 문자, 속성 값이 뒤따릅니다. 속성 값에는 인용되지 않은 속성 값 구문에 대해 주어진 요구 사항 외에, ASCII 공백, U+0022 QUOTATION MARK 문자("), U+0027 APOSTROPHE 문자('), U+003D EQUALS SIGN 문자(=), U+003C LESS-THAN SIGN 문자(<), U+003E GREATER-THAN SIGN 문자(>), U+0060 GRAVE ACCENT 문자(`)가 포함될 수 없으며, 빈 문자열이 될 수 없습니다.
다음 예에서 value
속성은 인용되지 않은
속성 값 구문을 사용하여 지정되었습니다:
< input value = yes >
인용되지 않은 속성 구문을 사용하는 속성 뒤에 다른 속성이나 선택적인 U+002F SOLIDUS 문자가 따라야 하는 경우, 두 속성 사이에 ASCII 공백이 있어야 합니다.
속성 이름 뒤에 ASCII 공백이 올 수 있고, U+003D EQUALS SIGN 문자, U+0027 APOSTROPHE 문자('), 속성 값이 뒤따르며, 값에는 U+0027 APOSTROPHE 문자가 포함되지 않아야 합니다. 마지막으로 두 번째 U+0027 APOSTROPHE 문자가 따라옵니다.
다음 예에서 type
속성은 단일 인용부호 속성
값 구문을 사용하여 지정되었습니다:
< input type = 'checkbox' >
단일 인용부호 속성 구문을 사용하는 속성 뒤에 다른 속성이 따라야 하는 경우, 두 속성 사이에 ASCII 공백이 있어야 합니다.
속성 이름 뒤에 ASCII 공백이 올 수 있고, U+003D EQUALS SIGN 문자, U+0022 QUOTATION MARK 문자("), 속성 값이 뒤따르며, 값에는 U+0022 QUOTATION MARK 문자가 포함되지 않아야 합니다. 마지막으로 두 번째 U+0022 QUOTATION MARK 문자가 따라옵니다.
다음 예에서 name
속성은 이중 인용부호 속성 값 구문을
사용하여 지정되었습니다:
< input name = "be evil" >
이중 인용부호 속성 구문을 사용하는 속성 뒤에 다른 속성이 따라야 하는 경우, 두 속성 사이에 ASCII 공백이 있어야 합니다.
같은 시작 태그에 대해 ASCII 대소문자를 구분하지 않는 일치하는 이름을 가진 두 개 이상의 속성이 있어서는 안 됩니다.
외부 요소가 아래 표의 첫 번째 및 두 번째 셀에서 로컬 이름과 네임스페이스로 제공된 네임스페이스 속성 중 하나를 가지고 있는 경우, 동일한 행의 세 번째 셀에서 제공된 이름을 사용하여 작성해야 합니다.
로컬 이름 | 네임스페이스 | 속성 이름 |
---|---|---|
actuate
| XLink 네임스페이스 | xlink:actuate
|
arcrole
| XLink 네임스페이스 | xlink:arcrole
|
href
| XLink 네임스페이스 | xlink:href
|
role
| XLink 네임스페이스 | xlink:role
|
show
| XLink 네임스페이스 | xlink:show
|
title
| XLink 네임스페이스 | xlink:title
|
type
| XLink 네임스페이스 | xlink:type
|
lang
| XML 네임스페이스 | xml:lang
|
space
| XML 네임스페이스 | xml:space
|
xmlns
| XMLNS 네임스페이스 | xmlns
|
xlink
| XMLNS 네임스페이스 | xmlns:xlink
|
다른 네임스페이스 속성은 HTML 구문에서 표현될 수 없습니다.
위 표에 나열된 속성들이 준수하는지 여부는 다른 사양(e.g., SVG 2 및 MathML)에 의해 정의되며, 이 섹션에서는 속성이 HTML 구문을 사용하여 직렬화될 경우의 구문 규칙만을 설명합니다.
일부 태그는 생략될 수 있습니다.
아래 설명된 상황에서 요소의 시작 태그를 생략하는 것은 해당 요소가
존재하지 않는다는 의미가 아닙니다. 해당 요소는 암시되며 여전히 존재합니다. 예를 들어, HTML 문서에는 항상 루트 html
요소가 있으며, 마크업에
<html>
문자열이 나타나지 않더라도 해당 요소는 존재합니다.
html
요소의 시작 태그는 html
요소 내부의 첫 번째 항목이 주석이 아닌 경우 생략될 수 있습니다.
예를 들어, 다음과 같은 경우 "<html>
" 태그를 제거해도 괜찮습니다:
<!DOCTYPE HTML>
< html >
< head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
</ body >
</ html >
이렇게 하면 문서가 다음과 같이 보일 것입니다:
<!DOCTYPE HTML>
< head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
</ body >
</ html >
이것은 동일한 DOM을 가지고 있습니다. 특히, 문서 요소 주위의 공백이 파서에 의해 무시된다는 점에 유의하십시오. 다음 예제도 동일한 DOM을 가집니다:
<!DOCTYPE HTML> < head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
</ body >
</ html >
그러나 다음 예제에서는 시작 태그를 제거하면 주석이 html
요소 앞에 위치하게 됩니다:
<!DOCTYPE HTML>
< html >
<!-- 주석이 DOM에서 어디에 있습니까? -->
< head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
태그가 제거되면 문서는 실제로 다음과 동일해집니다:
<!DOCTYPE HTML>
<!-- 주석이 DOM에서 어디에 있습니까? -->
< html >
< head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
따라서 태그는 주석이 뒤따르지 않는 경우에만 제거할 수 있습니다. 주석이 있을 때 태그를 제거하면 문서의 결과 파싱 트리가 변경됩니다. 물론 주석의 위치가 중요하지 않다면, 태그는 처음부터 시작 태그 앞에 주석이 있었던 것처럼 생략될 수 있습니다.
html
요소의 끝 태그는 html
요소가 주석에 의해 즉시 뒤따르지 않는 경우 생략될 수 있습니다.
head
요소의 시작 태그는 요소가 비어 있거나 head
요소 내부의 첫 번째 항목이 요소인 경우 생략될 수
있습니다.
head
요소의 끝 태그는 head
요소가 ASCII 공백이나 주석에 의해 즉시 뒤따르지 않는 경우 생략될 수 있습니다.
body
요소의 시작 태그는 요소가 비어 있거나 body
요소 내부의 첫 번째 항목이 ASCII 공백이나 주석이 아닌 경우, 첫 번째 항목이 meta
, noscript
, link
, script
, style
, 또는 template
요소인 경우 생략될 수 있습니다.
body
요소의 끝 태그는 body
요소가 주석에 의해 즉시 뒤따르지 않는 경우 생략될 수 있습니다.
위 예에서 head
요소의 시작 및 끝 태그와
body
요소의 시작 태그는 공백으로 둘러싸여 있기
때문에 생략될 수 없습니다:
<!DOCTYPE HTML>
< html >
< head >
< title > Hello</ title >
</ head >
< body >
< p > Welcome to this example.</ p >
</ body >
</ html >
(body
및 html
요소의 끝 태그는 문제 없이 생략될 수
있습니다. 이 후의 모든 공백은 body
요소에
파싱됩니다.)
그러나 일반적으로 공백은 문제가 되지 않습니다. 먼저 필요하지 않은 공백을 제거합니다:
<!DOCTYPE HTML> < html >< head >< title > Hello</ title ></ head >< body >< p > Welcome to this example.</ p ></ body ></ html >
그런 다음 DOM에 영향을 미치지 않고 여러 태그를 생략할 수 있습니다:
<!DOCTYPE HTML> < title > Hello</ title >< p > Welcome to this example.</ p >
이 시점에서 공백을 다시 추가할 수도 있습니다:
<!DOCTYPE HTML>
< title > Hello</ title >
이는 생략된 태그가 구문 분석기에서 암시된 위치에 표시된 이 문서와 동등합니다. 결과로 나타나는 유일한 공백 텍스트 노드는 head
요소 끝의 개행입니다:
<!DOCTYPE HTML>
< html >< head > < title > Hello</ title >
</ head >< body > < p > Welcome to this example.</ p > </ body ></ html >
li
요소의 끝 태그는 li
요소가 다른 li
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
dt
요소의 끝 태그는 dt
요소가 다른 dt
요소 또는 dd
요소에 의해 즉시 뒤따르는 경우 생략될 수 있습니다.
dd
요소의 끝 태그는 dd
요소가 다른 dd
요소 또는 dt
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
p
요소의 종료 태그는 p
요소가 즉시 address
, article
, aside
, blockquote
, details
, dialog
, div
, dl
, fieldset
, figcaption
, figure
, footer
, form
, h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
header
, hgroup
, hr
, main
, menu
, nav
, ol
, p
, pre
, search
, section
, table
, 또는 ul
요소로 바로 뒤따르거나, 부모 요소에 더 이상 내용이 없고 부모
요소가 HTML 요소인 경우 종료 태그를 생략할 수 있습니다. 이때 부모 요소가 a
, audio
, del
, ins
, map
, noscript
, 또는 video
요소이거나, 자율 사용자 정의 요소가 아니어야 합니다.
따라서 이전 예제를 더욱 단순화할 수 있습니다:
<!DOCTYPE HTML> < title > Hello</ title >< p > Welcome to this example.
rt
요소의 끝 태그는 rt
요소가 다른 rt
또는 rp
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는 경우
생략될 수 있습니다.
rp
요소의 끝 태그는 rp
요소가 다른 rt
또는 rp
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
optgroup
요소의 끝 태그는 optgroup
요소가 다른 optgroup
요소에 의해 즉시 뒤따르거나
hr
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
option
요소의 끝 태그는 option
요소가 다른 option
요소에 의해 즉시 뒤따르거나 optgroup
요소에 의해 즉시 뒤따르거나
hr
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
colgroup
요소의 시작 태그는 colgroup
요소 내부의 첫 번째 항목이
col
요소인 경우 생략될 수 있으며, 요소가 다른 colgroup
요소에 의해 즉시 뒤따르지 않는
경우 생략될 수 있습니다. (요소가 비어 있는 경우 생략될 수 없습니다.)
colgroup
요소의 끝 태그는 colgroup
요소가 ASCII 공백이나 주석에 의해 즉시 뒤따르지 않는 경우 생략될 수 있습니다.
caption
요소의 끝 태그는 caption
요소가 ASCII 공백이나 주석에 의해 즉시 뒤따르지 않는 경우 생략될 수 있습니다.
thead
요소의 끝 태그는 thead
요소가 tbody
또는 tfoot
요소에 의해 즉시 뒤따르는 경우 생략될 수 있습니다.
tbody
요소의 시작 태그는 tbody
요소 내부의 첫 번째 항목이 tr
요소이며, 요소가 다른 tbody
, thead
, 또는 tfoot
요소에 의해 즉시 뒤따르지 않는 경우 생략될 수
있습니다. (요소가 비어 있는 경우 생략될 수 없습니다.)
tbody
요소의 끝 태그는 tbody
요소가 tbody
또는 tfoot
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상
내용이 없는 경우 생략될 수 있습니다.
tfoot
요소의 끝 태그는 부모 요소에 더 이상 내용이 없는 경우 생략될 수 있습니다.
tr
요소의 끝 태그는 tr
요소가 다른 tr
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
td
요소의 끝 태그는 td
요소가 td
또는 th
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는 경우
생략될 수 있습니다.
th
요소의 끝 태그는 th
요소가 td
또는 th
요소에 의해 즉시 뒤따르거나 부모 요소에 더 이상 내용이 없는
경우 생략될 수 있습니다.
모든 테이블 관련 태그를 생략하면 테이블 마크업이 훨씬 더 간결해집니다.
다음 예제를 살펴보십시오:
< table >
< caption > 37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)</ caption >
< colgroup >< col >< col >< col ></ colgroup >
< thead >
< tr >
< th > Function</ th >
< th > Control Unit</ th >
< th > Central Station</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Headlights</ td >
< td > ✔</ td >
< td > ✔</ td >
</ tr >
< tr >
< td > Interior Lights</ td >
< td > ✔</ td >
< td > ✔</ td >
</ tr >
< tr >
< td > Electric locomotive operating sounds</ td >
< td > ✔</ td >
</ tr >
</ tr >
< td > Engineer's cab lighting</ td >
< td ></ td >
< td > ✔</ td >
</ tr >
</ tr >
< td > Station Announcements - Swiss</ td >
< td ></ td >
< td > ✔</ td >
</ tbody >
</ table >
똑같은 테이블은 약간의 공백 차이를 제외하고는 다음과 같이 마크업될 수 있습니다:
< table >
< caption > 37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
< colgroup >< col >< col >< col >
< thead >
< tr > < th > Function < th > Control Unit < th > Central Station
< tbody >
< tr > < td > Headlights < td > ✔ < td > ✔
< tr > < td > Interior Lights < td > ✔ < td > ✔
< tr > < td > Electric locomotive operating sounds < td > ✔ < td > ✔
< tr > < td > Engineer's cab lighting < td > < td > ✔
< tr > < td > Station Announcements - Swiss < td > < td > ✔
</ table >
이렇게 태그를 줄이면 각 행을 한 줄에 표시하여 더 간결하게 만들 수 있습니다:
< table >
< caption > 37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
< colgroup >< col >< col >< col >
< thead >
< tr > < th > Function < th > Control Unit < th > Central Station
< tbody >
< tr > < td > Headlights < td > ✔ < td > ✔
< tr > < td > Interior Lights < td > ✔ < td > ✔
< tr > < td > Electric locomotive operating sounds < td > ✔ < td > ✔
< tr > < td > Engineer's cab lighting < td > < td > ✔
< tr > < td > Station Announcements - Swiss < td > < td > ✔
</ table >
이 테이블들 간의 유일한 차이점은 정확한 위치에 있는 (어쨌든 의미적으로 중립적인) 공백입니다.
그러나, 시작 태그는 속성이 있는 경우 생략되어서는 안 됩니다.
모든 공백이 제거된 후 모든 선택적 태그가 제거된 이전 예제로 돌아갑니다:
<!DOCTYPE HTML> < title > Hello</ title >< p > Welcome to this example.
이 예제에서 body
요소에 class
속성이 있어야 하고 html
요소에 lang
속성이 있어야 한다면 마크업은 다음과 같이 되어야 합니다:
<!DOCTYPE HTML> < html lang = "en" >< title > Hello</ title >< body class = "demo" >< p > Welcome to this example.
이 섹션은 문서가 콘텐츠 모델 위반이 없음을 전제로 합니다. 이 섹션에서 설명한 방식으로 태그를 생략하면 사양에서 설명한 콘텐츠 모델에 맞지 않는 문서에서 예기치 않은 DOM 차이가 발생할 수 있습니다(이는 부분적으로 콘텐츠 모델이 피하고자 하는 것입니다).
역사적인 이유로 인해, 특정 요소는 콘텐츠 모델이 규정하는 제한 사항 외에도 추가적인 제한이 적용됩니다.
table
요소는 tr
요소를 포함해서는 안 됩니다. 비록 이 요소들이 이
명세서에 설명된 콘텐츠 모델에 따라 table
요소 내부에 기술적으로 허용되더라도
말입니다. (만약 tr
요소가 마크업에서 table
내부에 배치되면, 실제로 tbody
시작 태그가 암시됩니다.)
pre
및 textarea
요소의 시작 태그 바로 뒤에 단일 줄바꿈을 삽입할 수 있습니다. 이는 해당 요소의 처리에 영향을 주지 않습니다. 요소의 내용 자체가 줄바꿈으로 시작하는 경우, 그렇지 않으면 내용의 앞부분 줄바꿈이 선택적인
줄바꿈으로 처리되어 무시되기 때문에 이 선택적인 줄바꿈은 반드시 포함되어야
합니다.
원시 텍스트와 이스케이프 가능한 원시 텍스트
요소 내의 텍스트는 "</
"(U+003C LESS-THAN SIGN, U+002F SOLIDUS) 문자열을 포함해서는 안 되며, 이는 요소의 태그 이름과
대소문자를 구분하지 않고 일치하는 문자 다음에 U+0009 CHARACTER TABULATION(탭), U+000A LINE FEED(LF), U+000C FORM FEED(FF), U+000D
CARRIAGE RETURN(CR), U+0020 SPACE, U+003E GREATER-THAN SIGN(>) 또는 U+002F SOLIDUS(/) 중 하나가 따라오는 경우에 해당합니다.
텍스트는 요소, 속성 값 및 주석 내에 포함될 수 있습니다. 텍스트가 배치될 위치에 따라 다른 섹션에서 설명한 것처럼 텍스트에 허용되거나 허용되지 않는 사항에 대한 추가 제약이 적용됩니다.
HTML에서의 개행 문자는 U+000D CARRIAGE RETURN(CR) 문자, U+000A LINE FEED(LF) 문자 또는 이 순서대로 U+000D CARRIAGE RETURN(CR)과 U+000A LINE FEED(LF) 문자의 쌍으로 나타낼 수 있습니다.
문자 참조가 허용되는 경우, U+000A LINE FEED(LF) 문자의 문자 참조(단, U+000D CARRIAGE RETURN(CR) 문자는 제외)는 개행 문자를 나타냅니다.
다른 섹션에서 설명한 특정 경우에, 텍스트는 문자 참조와 혼합될 수 있습니다. 이러한 참조는 텍스트에 합법적으로 포함될 수 없는 문자를 이스케이프하는 데 사용할 수 있습니다.
문자 참조는 U+0026 AMPERSAND 문자(&)로 시작해야 합니다. 이후에는 세 가지 유형의 문자 참조가 가능합니다:
위에서 설명한 숫자 문자 참조 형식은 U+000D CR, 비문자, 및 제어 문자(ASCII 공백 문자 제외) 이외의 모든 코드 포인트를 참조할 수 있습니다.
모호한 앰퍼샌드는 U+0026 AMPERSAND 문자(&)로, 그 뒤에 하나 이상의 ASCII 영숫자가 이어지고, U+003B SEMICOLON 문자(;)로 끝나는 문자입니다. 이러한 문자는 명명된 문자 참조 섹션에 제공된 이름과 일치하지 않는 경우입니다.
CDATA 섹션은 다음 구성 요소로 이루어져야 하며, 이 순서를 따라야 합니다:
<![CDATA[
".
]]>
" 문자열을 포함할 수
없습니다.
]]>
".
CDATA 섹션은 외부 콘텐츠(MathML 또는 SVG)에서만 사용할 수 있습니다. 이 예에서는 CDATA 섹션이 MathML
ms
요소의 내용을 이스케이프하는 데 사용됩니다:
< p > 문자열을 숫자에 더할 수 있지만, 이렇게 하면 숫자가 문자열화됩니다:</ p >
< math >
< ms > <![CDATA[x<y]]> </ ms >
< mo > +</ mo >
< mn > 3</ mn >
< mo > =</ mo >
< ms > <![CDATA[x<y3]]> </ ms >
</ math >
주석은 다음 형식을 가져야 합니다:
<!--
".
>
" 문자열로 시작하거나,
"->
" 문자열로 시작하거나, "<!--
", "-->
", "--!>
" 문자열을 포함하거나,
"<!-
" 문자열로 끝나서는 안 됩니다.
-->
".
텍스트는 "<!
" 문자열로 끝날 수 있으며,
<!--My favorite operators are > and <!-->
와 같이 사용할 수 있습니다.
이 섹션은 사용자 에이전트, 데이터 마이닝 도구 및 적합성 검사 도구에만 적용됩니다.
XML 문서를 DOM 트리로 구문 분석하는 규칙은 다음 섹션 "XML 구문"에서 다룹니다.
사용자 에이전트는 이 섹션에 설명된 구문 분석 규칙을 사용하여 text/html
리소스로부터 DOM
트리를 생성해야 합니다. 이 규칙들은 HTML 파서로 알려진 것을 정의합니다.
이 사양에 설명된 HTML 구문은 SGML 및 XML과 유사하지만, 고유한 구문 분석 규칙을 가진 별도의 언어입니다.
이전 HTML 버전(특히 HTML2에서 HTML4까지)은 SGML을 기반으로 했으며 SGML 구문 분석 규칙을 사용했습니다. 그러나 거의 모든 웹 브라우저가 HTML 문서에 대해 진정한 SGML 구문 분석을 구현하지 않았으며, HTML을 SGML 애플리케이션으로 엄격하게 처리한 사용자 에이전트는 역사적으로 유효성 검사기뿐이었습니다. 그 결과, 유효성 검사기가 하나의 표현을 주장하는 반면 널리 배포된 웹 브라우저가 다른 표현을 구현하는 혼란이 발생했으며, 이는 수십 년간의 생산성을 낭비하게 했습니다. 따라서 이 HTML 버전은 SGML 기반을 벗어납니다.
작성 파이프라인에서 SGML 도구를 사용하고자 하는 작성자는 XML 도구와 HTML의 XML 직렬화를 사용할 것을 권장합니다.
적합성 검사기 목적을 위해, 리소스가 HTML 구문으로 확인되면, 이는 HTML 문서로 간주됩니다.
용어 섹션에 명시된 대로, 네임스페이스를 명시하지 않은 요소 타입에 대한 참조는 항상 HTML 네임스페이스의 요소를 참조합니다. 예를 들어, 사양에서 "a menu
element"라고 언급할 때, 이는 로컬 이름이
"menu
", 네임스페이스가 "http://www.w3.org/1999/xhtml
"이며 인터페이스가 HTMLMenuElement
인 요소를 의미합니다. 가능한 경우, 이러한 요소에
대한 참조는 정의로 하이퍼링크됩니다.
HTML 구문 분석 과정의 입력은 코드 포인트 스트림으로 구성되며, 이는 토큰화 단계와 그 다음의 트리 구성 단계를 거칩니다. 출력 결과는 문서
객체입니다.
스크립트를 지원하지 않는 구현에서는 실제로 DOM 문서
객체를 생성할 필요가 없지만, 이러한 경우에도 DOM
트리는 사양의 나머지 부분을 위한 모델로 여전히 사용됩니다.
일반적인 경우, 토큰화 단계에서 처리하는 데이터는 네트워크에서 제공되지만, 사용자 에이전트에서 실행 중인 스크립트에서도 제공될 수 있습니다. 예를 들어,
document.write()
API를 사용하는 경우가 해당됩니다.
토큰화 단계와 트리 구성 단계에는 단 하나의 상태 집합만 존재하지만, 트리 구성 단계는 재진입할 수 있습니다. 즉, 트리 구성 단계가 하나의 토큰을 처리하는 동안 토큰화기가 재개되어 첫 번째 토큰의 처리가 완료되기 전에 추가 토큰이 방출되고 처리될 수 있습니다.
다음 예제에서, 트리 구성 단계는 "script" 종료 태그 토큰을 처리하는 동안 "p" 시작 태그 토큰을 처리하기 위해 호출됩니다:
...
<script>
document.write('<p>');
</script>
...
이러한 경우를 처리하기 위해 파서는 스크립트 중첩 수준을 가지며, 이는 처음에 0으로 설정되어야 하며, 파서 일시 중지 플래그를 가지며, 이는 처음에 거짓으로 설정되어야 합니다.
이 명세서는 HTML 문서의 구문 분석 규칙을 정의하며, 이는 문법적으로 올바르든 아니든 상관없습니다. 구문 분석 알고리즘의 특정 지점은 구문 분석 오류라고 합니다. 구문 분석 오류에 대한 오류 처리는 잘 정의되어 있습니다 (이것은 이 명세서 전반에 걸쳐 설명된 처리 규칙입니다), 하지만 사용자 에이전트는 HTML 문서를 구문 분석할 때, 이 명세서에서 설명된 규칙을 적용하고 싶지 않은 첫 번째 구문 분석 오류에서 파서를 중단할 수 있습니다.
문서에 하나 이상의 구문 분석 오류 조건이 있는 경우, 적합성 검사기는 사용자에게 적어도 하나의 구문 분석 오류 조건을 보고해야 하며, 문서에 구문 분석 오류 조건이 없는 경우에는 구문 분석 오류 조건을 보고해서는 안 됩니다. 문서에 하나 이상의 구문 분석 오류 조건이 있는 경우, 적합성 검사기는 하나 이상의 구문 분석 오류 조건을 보고할 수 있습니다.
구문 분석 오류는 HTML의 문법에만 해당하는 오류입니다. 구문 분석 오류를 확인하는 것 외에도, 적합성 검사기는 이 명세서에서 설명된 모든 적합성 요구 사항을 문서가 준수하는지 확인합니다.
일부 구문 분석 오류는 적합성 검사기에서 보고서에 사용해야 하는 아래 표에 명시된 전용 코드가 있습니다.
아래 표의 오류 설명은 규범적인 것이 아닙니다.
코드 | 설명 |
---|---|
abrupt-closing-of-empty-comment |
이 오류는 파서가 U+003E (>) 주석으로 갑자기 닫히는
빈 주석을 만났을 때 발생합니다 (즉, |
abrupt-doctype-public-identifier |
이 오류는 파서가 DOCTYPE 공개 식별자에서 U+003E (>)
코드 포인트를 만났을 때 발생합니다
(예: |
abrupt-doctype-system-identifier |
이 오류는 파서가 DOCTYPE 시스템 식별자에서 U+003E
(>)
코드 포인트를 만났을 때 발생합니다
(예: |
absence-of-digits-in-numeric-character-reference |
이 오류는 파서가 숫자가 포함되지 않은 숫자 문자 참조를 만났을 때
발생합니다
(예: |
cdata-in-html-content |
이 오류는 파서가 외부 콘텐츠(SVG 또는 MathML) 이외의 영역에서 CDATA 섹션을 만났을 때 발생합니다. 파서는 이러한 CDATA 섹션을 주석으로 처리합니다. |
character-reference-outside-unicode-range |
이 오류는 파서가 유효한 유니코드 범위를 초과하는 숫자 문자 참조를 만났을 때 발생합니다. 파서는 이러한 문자 참조를 U+FFFD 대체 문자로 해석합니다. |
control-character-in-input-stream |
이 오류는 입력 스트림에 ASCII 공백 또는 U+0000 NULL이 아닌 제어 코드 포인트가 포함되어 있을 때 발생합니다. 이러한 코드 포인트는 그대로 구문 분석되며, 일반적으로 구문 분석 규칙이 추가적인 제한을 적용하지 않는 경우 DOM에 그대로 포함됩니다. |
control-character-reference |
이 오류는 파서가 U+000D 캐리지 리턴이 아닌 제어 제어 코드 포인트를 참조하는 숫자 문자 참조를 만났을 때 발생합니다. 파서는 C1 제어 참조를 제외하고는 해당 문자 참조를 있는 그대로 해석합니다. |
duplicate-attribute |
이 오류는 파서가 동일한 이름을 가진 속성이 이미 있는 태그에서 속성을 만났을 때 발생합니다. 파서는 이러한 중복 속성을 무시합니다. |
end-tag-with-attributes |
이 오류는 파서가 종료 태그에서 속성을 만났을 때 발생합니다. 종료 태그의 속성은 무시되며 DOM에 포함되지 않습니다. |
end-tag-with-trailing-solidus |
이 오류는 파서가 닫는 U+003E (>) 코드 포인트 바로 앞에 U+002F (/) 코드 포인트가 있는 종료 태그를 만나면 발생합니다(예:
|
eof-before-tag-name |
이 오류는 파서가 태그 이름이 예상되는 곳에서 입력 스트림의 끝에
도달하면 발생합니다. 이 경우 파서는 시작 태그(예:
|
eof-in-cdata |
이 오류는 파서가 입력 스트림의 끝에 도달했을 때 CDATA 섹션 안에 있으면 발생합니다. 파서는 이러한 CDATA 섹션을 입력 스트림 끝 바로 직전에 닫힌 것으로 처리합니다. |
eof-in-comment |
이 오류는 파서가 입력 스트림의 끝에 도달했을 때 주석 안에 있으면 발생합니다. 파서는 이러한 주석을 입력 스트림 끝 바로 직전에 닫힌 것으로 처리합니다. |
eof-in-doctype |
이 오류는 파서가 DOCTYPE 안에서 입력 스트림의 끝에
도달하면 발생합니다. 이 경우 DOCTYPE이 문서 서두에 올바르게 배치된 경우 파서는 |
eof-in-script-html-comment-like-text |
이 오류는 파서가 입력 스트림의 끝에 도달했을 때 HTML 주석과 유사한 텍스트를 스크립트 요소 내에서 HTML 주석과 유사한 구문 구조는 텍스트 콘텐츠로 구문 분석됩니다. 이러한 구조는 스크립팅 언어 특정 구문 구조의 일부일 수 있으며, 스크립팅 언어에서 지원하는 경우 HTML과 유사한 주석으로 처리될 수 있습니다(예: JavaScript 사양의 부록 B에서 HTML과 유사한 주석에 대한 구문 규칙을 찾을 수 있습니다). 이 오류의 일반적인 원인은 스크립트 요소의 내용에 대한 제한사항을 위반했기 때문입니다. [JAVASCRIPT] |
eof-in-tag |
이 오류는 파서가 입력 스트림의 끝에 도달했을 때 시작 태그 또는 종료 태그 안에 있으면 발생합니다(예:
|
incorrectly-closed-comment |
이 오류는 파서가 " |
incorrectly-opened-comment |
이 오류는 " 이 오류의 한 가지 가능한 원인은 HTML에서 XML 마크업 선언(예: |
invalid-character-sequence-after-doctype-name |
이 오류는 파서가 코드 포인트 시퀀스 중 DOCTYPE 이름 뒤에 " |
invalid-first-character-of-tag-name |
이 오류는 파서가 태그 이름 또는 종료 태그 이름의 첫 코드 포인트로 코드 포인트가 ASCII 알파벳이 아닌 경우 발생합니다. 시작 태그가 예상된 경우 해당 코드 포인트와 앞선 U+003C (<)는 텍스트 콘텐츠로 처리되며, 그 후의 모든 콘텐츠는 마크업으로 처리됩니다. 종료 태그가 예상된 경우 해당 코드 포인트와 이후의 모든 콘텐츠는 U+003E (>) 코드 포인트(있을 경우) 또는 입력 스트림 끝까지 주석으로 처리됩니다. 태그 이름의 첫 코드 포인트는 ASCII 알파벳으로 제한되지만, 후속 위치에서는 ASCII 숫자를 포함한 다양한 코드 포인트가 허용됩니다. |
missing-attribute-value |
이 오류는 파서가 U+003E (>) 코드 포인트를 만나는데,
이때 속성 값이 예상되는 위치에서 발생합니다(예:
|
missing-doctype-name |
이 오류는 파서가 이름이 누락된 DOCTYPE을 만나면
발생합니다(예: |
missing-doctype-public-identifier |
이 오류는 파서가 공용 식별자의 시작이 예상되는 위치에서 U+003E (>) 코드 포인트를 만나면
발생합니다(예: |
missing-doctype-system-identifier |
이 오류는 파서가 시스템 식별자의 시작이 예상되는 위치에서 U+003E (>) 코드 포인트를 만나면
발생합니다(예: |
missing-end-tag-name |
이 오류는 파서가 종료 태그 이름이 예상되는 위치에서 U+003E (>) 코드 포인트를 만나면
발생합니다, 즉 |
missing-quote-before-doctype-public-identifier |
이 오류는 파서가 DOCTYPE 공용 식별자를 인용 부호 없이
만나면 발생합니다(예: |
missing-quote-before-doctype-system-identifier |
이 오류는 파서가 DOCTYPE 시스템 식별자를 인용 부호 없이
만나면 발생합니다(예:
|
missing-semicolon-after-character-reference |
파서가 U+003B (;) 코드 포인트로 종료되지 않는 문자 참조를 만나면 이 오류가 발생합니다. 일반적으로 파서는 문자 참조가 U+003B (;) 코드 포인트로 종료된 것처럼 동작하지만, 일부 모호한 경우에는 파서가 후속 코드 포인트를 문자 참조에 포함시킬 수 있습니다. 예를 들어, |
missing-whitespace-after-doctype-public-keyword |
파서가 " |
missing-whitespace-after-doctype-system-keyword |
파서가 " |
missing-whitespace-before-doctype-name |
파서가 " |
missing-whitespace-between-attributes |
파서가 속성들 사이에 ASCII 공백이 없는 경우(예:
|
missing-whitespace-between-doctype-public-and-system-identifiers |
파서가 공용 식별자와 시스템 식별자가 ASCII 공백으로 분리되지 않은 DOCTYPE을 만나면 이 오류가 발생합니다. 이 경우 파서는 ASCII 공백이 있는 것처럼 동작합니다. |
nested-comment |
파서가 중첩된 주석을 만나면 이 오류가 발생합니다(예:
|
noncharacter-character-reference |
파서가 숫자 문자 참조를 만나면 이 오류가 발생하며, 이 참조는 비문자를 참조합니다. 파서는 이러한 문자 참조를 있는 그대로 해석합니다. |
noncharacter-in-input-stream |
입력 스트림에 비문자가 포함된 경우 이 오류가 발생합니다. 이러한 코드 포인트는 있는 그대로 구문 분석되며, 일반적으로 추가적인 제한 규칙이 적용되지 않는 경우 DOM으로 전달됩니다. |
non-void-html-element-start-tag-with-trailing-solidus |
파서가 비어 있지 않은 요소(예: void elements) 또는 외부 콘텐츠(예: SVG 또는 MathML 요소)가 아닌 시작 태그에 U+002F (/) 코드 포인트가 닫히는 U+003E (>) 코드 포인트 바로 앞에 있는 경우 이 오류가 발생합니다. 이 경우 파서는 U+002F (/)가 없는 것처럼 동작합니다. 예를 들어, 다음 마크업을 고려해 보세요:
이것은 다음과 같이 구문 분석됩니다: 시작 태그 이름의 끝에 오는 U+002F (/)는 외부 콘텐츠에서만 자체 종료 태그를 지정하는 데 사용할 수 있습니다. (자체 종료 태그는 HTML에서는 존재하지 않습니다.) 이는 void 요소에 대해서도 허용되지만, 이 경우에는 아무런 영향이 없습니다. |
null-character-reference |
파서가 숫자 문자 참조를 만나면 이 오류가 발생하며, 이 참조는 U+0000 NULL 코드 포인트를 참조합니다. 파서는 이러한 문자 참조를 U+FFFD 대체 문자로 해석합니다. |
surrogate-character-reference |
파서가 숫자 문자 참조를 만나면 이 오류가 발생하며, 이 참조는 대리자를 참조합니다. 파서는 이러한 문자 참조를 U+FFFD 대체 문자로 해석합니다. |
surrogate-in-input-stream |
입력 스트림에 대리자가 포함된 경우 이 오류가 발생합니다. 이러한 코드 포인트는 있는 그대로 구문 분석되며, 일반적으로 추가적인 제한 규칙이 적용되지 않는 경우 DOM으로 전달됩니다. 대리자는 |
unexpected-character-after-doctype-system-identifier |
파서가 코드 포인트 중 U+003E (>)로 종료되는 ASCII 공백이 아닌 것을 DOCTYPE 시스템 식별자 이후에 만나면 이 오류가 발생합니다. 이 경우 파서는 이러한 코드 포인트를 무시합니다. |
unexpected-character-in-attribute-name |
파서가 U+0022 ("), U+0027 ('), 또는 U+003C (<) 코드 포인트를 속성 이름 내에서 만나면 이 오류가 발생합니다. 파서는 이러한 코드 포인트를 속성 이름에 포함시킵니다. 이 오류를 발생시키는 코드 포인트는 일반적으로 다른 구문 구조의 일부이며, 속성 이름 주변에 오타가 있음을 나타낼 수 있습니다. |
unexpected-character-in-unquoted-attribute-value |
파서가 U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), 또는 U+0060 (`) 코드 포인트를 따옴표가 없는 속성 값 내에서 만나면 이 오류가 발생합니다. 파서는 이러한 코드 포인트를 속성 값에 포함시킵니다. 이 오류를 발생시키는 코드 포인트는 일반적으로 다른 구문 구조의 일부이며, 속성 값 주변에 오타가 있음을 나타낼 수 있습니다. U+0060 (`)는 일부 레거시 사용자 에이전트가 이를 인용 부호로 처리하기 때문에 이 오류를 발생시키는 코드 포인트 목록에 포함되어 있습니다. 예를 들어, 다음 마크업을 고려해 보세요:
잘못된 위치에 U+0027 (') 코드 포인트가 있기 때문에, 파서는 " |
unexpected-equals-sign-before-attribute-name |
파서가 속성 이름 앞에 U+003D (=) 코드 포인트를 만나면 이 오류가 발생합니다. 이 경우 파서는 U+003D (=)를 속성 이름의 첫 번째 코드 포인트로 처리합니다. 이 오류의 일반적인 원인은 속성 이름이 누락된 것입니다. 예를 들어, 다음 마크업을 고려해 보세요:
속성 이름이 누락되어 있기 때문에, 파서는 이 마크업을 " |
unexpected-null-character |
파서가 특정 위치에서 U+0000 NULL 코드 포인트를 입력 스트림에서 만나면 이 오류가 발생합니다. 일반적으로 이러한 코드 포인트는 무시되거나, 보안상의 이유로 U+FFFD 대체 문자로 교체됩니다. |
unexpected-question-mark-instead-of-tag-name |
파서가 코드 포인트의 첫 번째 코드 포인트가 예상되는 위치에서 U+003F (?)를 만나면 이 오류가 발생합니다. U+003F (?) 및 그 이후의 모든 내용은 U+003E (>) 코드 포인트(있는 경우) 또는 입력 스트림의 끝까지 주석으로 처리됩니다. 예를 들어, 다음 마크업을 고려해 보세요:
이것은 다음과 같이 구문 분석됩니다: 이 오류의 일반적인 원인은 XML 처리 명령(예:
|
unexpected-solidus-in-tag |
파서가 인용된 속성 값의 일부가 아니며, 태그 내에서 즉시 U+003E (>) 코드 포인트가 뒤따르지 않는 U+002F (/) 코드 포인트를 만나면 이 오류가 발생합니다. 이 경우 파서는 ASCII 공백을 만난 것처럼 동작합니다. |
unknown-named-character-reference |
토큰화 단계에 입력되는 코드 포인트 스트림은 처음에 사용자 에이전트에 의해 바이트 스트림으로 인식됩니다(일반적으로 네트워크를 통해 또는 로컬 파일 시스템에서 전송됨). 이러한 바이트는 특정 문자 인코딩에 따라 실제 문자를 인코딩하며, 사용자 에이전트는 이 인코딩을 사용하여 바이트를 문자로 디코딩합니다.
XML 문서의 경우, 사용자 에이전트가 문자 인코딩을 결정하기 위해 사용해야 하는 알고리즘은 XML에 명시되어 있습니다. 이 섹션은 XML 문서에는 적용되지 않습니다. [XML]
일반적으로 아래에 정의된 인코딩 스니핑 알고리즘을 사용하여 문자 인코딩을 결정합니다.
문자 인코딩이 주어진 경우, 입력 바이트 스트림의 바이트는 입력 스트림의 문자로 변환되어야 하며, 이 과정에서 입력 바이트 스트림과 문자 인코딩을 디코드에 전달합니다.
선행 바이트 순서 표식(BOM)은 문자 인코딩 인수를 무시하게 하며, 자체적으로 건너뜁니다.
원래 바이트 스트림에서 인코딩 표준에 부합하지 않는 바이트 또는 바이트 시퀀스(예: UTF-8 입력 바이트 스트림에서의 유효하지 않은 UTF-8 바이트 시퀀스)는 오류이며, 적합성 검사기에서 이를 보고해야 합니다. [ENCODING]
디코더 알고리즘은 유효하지 않은 입력을 처리하는 방법을 설명합니다. 보안상의 이유로, 이 규칙들을 정확하게 따르는 것이 중요합니다. 유효하지 않은 바이트 시퀀스의 처리 방식에 차이가 있으면 스크립트 삽입 취약성("XSS") 등의 문제가 발생할 수 있습니다.
HTML 파서가 입력 바이트 스트림을 디코딩할 때, 문자 인코딩과 신뢰도를 사용합니다. 신뢰도는 잠정적, 확정적, 또는 무관함 중 하나입니다. 사용된 인코딩과 그 인코딩에 대한 신뢰도가 잠정적인지 확정적인지 여부는 파싱 중에 사용되어 인코딩을 변경할지를 결정합니다. 인코딩이 필요하지 않은 경우, 예를 들어 파서가 유니코드 스트림에서 작동하고 전혀 문자 인코딩을 사용할 필요가 없는 경우, 신뢰도는 무관함으로 간주됩니다.
일부 알고리즘은 바이트를 입력 바이트 스트림에 추가하는 대신, 문자로 입력 스트림에 직접 추가하여 파서를 피드합니다.
HTML 파서가 알려진 확정 인코딩을 가진 입력 바이트 스트림을 처리해야 할 때, 그 문자 인코딩은 해당 인코딩이며, 신뢰도는 확정적입니다.
일부 경우에는 문서를 파싱하기 전에 인코딩을 명확하게 결정하는 것이 실용적이지 않을 수 있습니다. 이 때문에, 이 명세서는 선택적인 사전 스캔과 함께 두 번의 패스를 허용하는 메커니즘을 제공합니다. 구현체는 아래에 설명된 대로 문서를 파싱하기 전에 이용 가능한 바이트에 대해 단순화된 파싱 알고리즘을 적용할 수 있습니다. 그런 다음, 이 사전 파싱과 기타 외부 메타데이터에서 유도된 잠정적인 인코딩을 사용하여 실제 파서를 시작합니다. 문서가 로드되는 동안 사용자 에이전트가 이 정보와 충돌하는 문자 인코딩 선언을 발견하면, 파서를 다시 호출하여 실제 인코딩으로 문서를 파싱할 수 있습니다.
사용자 에이전트는 첫 번째 패스에서 문서를 디코딩할 때 사용할 문자 인코딩을 결정하기 위해 인코딩 스니핑 알고리즘이라고 불리는 다음 알고리즘을 사용해야 합니다. 이 알고리즘은 사용자 에이전트에 이용 가능한 모든 외부 메타데이터(예: 문서의 콘텐츠 유형 메타데이터)와 지금까지 이용 가능한 모든 바이트를 입력으로 받아들여 문자 인코딩과 신뢰도를 반환하며, 이는 잠정적 또는 확정적입니다.
BOM 스니핑의 결과가 인코딩인 경우, 해당 인코딩을 신뢰도 확정적으로 반환합니다.
비록 디코드 알고리즘 자체가 바이트 순서 표시(BOM)의 존재 여부에 따라 사용할 인코딩을 변경하겠지만, 이 알고리즘은 적절한 문서의 문자 인코딩과 신뢰도를 설정하기 위해 BOM도 스니핑합니다.
사용자가 사용자 에이전트에게 특정 인코딩으로 문서의 문자 인코딩을 덮어쓰도록 명시적으로 지시한 경우, 선택적으로 해당 인코딩을 신뢰도 확정적으로 반환합니다.
일반적으로 사용자 에이전트는 이러한 사용자 요청을 세션 간에 기억하며, 경우에 따라 iframe
에
있는 문서에도 적용합니다.
사용자 에이전트는 이 단계나 이 알고리즘의 이후 단계에서 리소스의 더 많은 바이트가 사용 가능할 때까지 기다릴 수 있습니다. 예를 들어, 사용자 에이전트는 500ms 또는 1024바이트 중 먼저 도달한 쪽을 기다릴 수 있습니다. 일반적으로 인코딩을 찾기 위해 소스를 사전 파싱하는 것이 성능을 향상시킵니다. 이는 인코딩 정보를 발견했을 때 파싱에 사용된 데이터 구조를 버릴 필요를 줄이기 때문입니다. 그러나 사용자 에이전트가 인코딩을 결정하기 위해 데이터를 얻는 데 너무 오래 지체하면, 지연으로 인한 비용이 사전 파싱에서 얻는 성능 향상을 초과할 수 있습니다.
문자 인코딩 선언에 대한 작성 적합성 요구 사항은 선언이 첫 1024바이트 내에만 나타나도록 제한합니다. 따라서 사용자 에이전트는 아래에서 호출된 사전 스캔 알고리즘을 첫 1024바이트에 대해 사용하는 것이 권장되지만, 그 이상으로 지연하지 않도록 해야 합니다.
전송 계층에서 문자 인코딩을 지정하고, 그것이 지원되는 인코딩인 경우, 해당 인코딩을 신뢰도 확정적으로 반환합니다.
선택적으로 바이트 스트림의 인코딩을 결정하기 위해 사전 스캔을 수행하며, 이때 사용자 에이전트가 더 이상의 바이트를 스캔하는 것이 효율적이지 않다고 결정할 때 종료 조건을 사용합니다. 사용자 에이전트는 처음 1024바이트만 사전 스캔할 것을 권장합니다. 사용자 에이전트는 바이트를 스캔하는 것이 전혀 효율적이지 않다고 판단할 수 있으며, 이 경우 이러한 하위 단계는 완전히 건너뛸 수 있습니다.
위에서 언급한 알고리즘은 문자 인코딩 또는 실패를 반환합니다. 문자 인코딩을 반환하면, 해당 인코딩을 신뢰도 잠정적으로 반환합니다.
이 알고리즘이 실행되는 HTML 파서가 Document
d와
연결되어 있고, 컨테이너 문서가 null이 아닌 경우:
parentDocument를 d의 컨테이너 문서로 설정합니다.
parentDocument의 기원(origin)이 d의 기원(origin)과 동일 출처이고, parentDocument의 문자 인코딩이 UTF-16BE/LE가 아닌 경우, parentDocument의 문자 인코딩을 신뢰도 잠정적으로 반환합니다.
그렇지 않은 경우, 사용자 에이전트가 이 페이지의 인코딩에 대한 정보를 가지고 있는 경우, 예를 들어 마지막으로 방문했을 때의 페이지 인코딩을 기반으로, 해당 인코딩을 신뢰도 잠정적으로 반환합니다.
사용자 에이전트는 빈도 분석 또는 기타 알고리즘을 적용하여 데이터 스트림에서 문자 인코딩을 자동 감지하려고 시도할 수 있습니다. 이러한 알고리즘은 리소스의 콘텐츠 외에도 리소스의 주소를 포함한 정보를 사용할 수 있습니다. 자동 감지가 문자 인코딩을 결정하는 데 성공하고, 해당 인코딩이 지원되는 인코딩인 경우, 해당 인코딩을 신뢰도 잠정적으로 반환합니다. [UNIVCHARDET]
사용자 에이전트는 네트워크를 통해 얻은 리소스에 대해 인코딩을 자동 감지하려고 시도하는 것을 일반적으로 권장하지 않습니다. 이는 본질적으로 상호 운용되지 않는 추론을 수반하기 때문입니다. HTML 문서의 서두를 기반으로 인코딩을 감지하려고 시도하는 것은 특히 까다롭습니다. HTML 마크업은 일반적으로 ASCII 문자만 사용하며, HTML 문서는 일반적으로 텍스트 콘텐츠보다 많은 마크업으로 시작하기 때문입니다.
UTF-8 인코딩은 매우 감지하기 쉬운 비트 패턴을 가지고 있습니다. 값이 0x7F보다 큰 바이트가 포함된 로컬 파일 시스템의 파일이 UTF-8 패턴과 일치하면 UTF-8일 가능성이 높으며, 그렇지 않은 경우는 매우 낮습니다. 사용자 에이전트가 서두뿐만 아니라 전체 파일을 검사할 수 있는 경우, 특히 UTF-8을 감지하는 것이 효과적일 수 있습니다. [PPUTF8] [UTF8DET]
그렇지 않은 경우, 구현 정의된 또는 사용자가 지정한 기본 문자 인코딩을 신뢰도 잠정적으로 반환합니다.
제어된 환경 또는 문서의 인코딩을 지정할 수 있는 환경(예: 새로운 네트워크에서 전용으로 사용하기 위한 사용자 에이전트의 경우)에서는 종합적인 UTF-8
인코딩이
제안됩니다.
다른 환경에서는 기본 인코딩이 일반적으로 사용자의 로케일(사용자가 자주 방문할 가능성이 있는 페이지의 언어, 따라서 종종 인코딩의 근사치)에 따라 달라집니다. 다음 표는 사용자의 로케일을 기반으로, 레거시 콘텐츠와의 호환성을 위해 권장되는 기본값을 제공합니다. 로케일은 BCP 47 언어 태그로 식별됩니다. [BCP47] [ENCODING]
로케일 언어 | 권장 기본 인코딩 | |
---|---|---|
ar | 아랍어 | windows-1256 |
az | 아제르바이잔어 | windows-1254 |
ba | 바슈키르어 | windows-1251 |
be | 벨라루스어 | windows-1251 |
bg | 불가리아어 | windows-1251 |
cs | 체코어 | windows-1250 |
el | 그리스어 | ISO-8859-7 |
et | 에스토니아어 | windows-1257 |
fa | 페르시아어 | windows-1256 |
he | 히브리어 | windows-1255 |
hr | 크로아티아어 | windows-1250 |
hu | 헝가리어 | ISO-8859-2 |
ja | 일본어 | Shift_JIS |
kk | 카자흐어 | windows-1251 |
ko | 한국어 | EUC-KR |
ku | 쿠르드어 | windows-1254 |
ky | 키르기스어 | windows-1251 |
lt | 리투아니아어 | windows-1257 |
lv | 라트비아어 | windows-1257 |
mk | 마케도니아어 | windows-1251 |
pl | 폴란드어 | ISO-8859-2 |
ru | 러시아어 | windows-1251 |
sah | 야쿠트어 | windows-1251 |
sk | 슬로바키아어 | windows-1250 |
sl | 슬로베니아어 | ISO-8859-2 |
sr | 세르비아어 | windows-1251 |
tg | 타지크어 | windows-1251 |
th | 태국어 | windows-874 |
tr | 터키어 | windows-1254 |
tt | 타타르어 | windows-1251 |
uk | 우크라이나어 | windows-1251 |
vi | 베트남어 | windows-1258 |
zh-Hans, zh-CN, zh-SG | 중국어(간체) | GBK |
zh-Hant, zh-HK, zh-MO, zh-TW | 중국어(번체) | Big5 |
모든 기타 로케일 | windows-1252 |
이 표의 내용은 Windows, Chrome, Firefox 기본 설정의 교집합에서 파생되었습니다.
문서의 문자 인코딩은 이 알고리즘에서 반환된 값으로 즉시 설정되어야 하며, 사용자 에이전트가 입력 바이트 스트림에 사용할 디코더를 선택할 때 반환된 값을 사용해야 합니다.
알고리즘이 사용자 에이전트에 바이트 스트림을 사전 스캔하여 인코딩을 결정하도록 요구할 때, 정의된 end condition이 주어지면, 다음 단계를 실행해야 합니다. 이 단계 동안(이 알고리즘이 호출하는 속성 가져오기 알고리즘 인스턴스를 포함하여) 사용자 에이전트가 바이트를 다 소모하거나(position 포인터가 아래 첫 번째 단계에서 생성된 이후 바이트 스트림의 끝을 넘어가는 경우) 종료 조건에 도달하면, 바이트 스트림을 사전 스캔하여 인코딩을 결정하는 알고리즘을 중단하고 동일한 바이트에 적용된 결과를 XML 인코딩 가져오기를 반환해야 합니다. 그렇지 않으면, 이러한 단계는 문자 인코딩을 반환합니다.
fallback encoding을 null로 설정합니다.
position를 입력 바이트 스트림의 바이트를 가리키는 포인터로 설정하며, 초기에는 첫 번째 바이트를 가리킵니다.
UTF-16 XML 선언을 사전 스캔합니다: position가 다음을 가리키는 경우:
UTF-16LE을 반환합니다.
UTF-16BE을 반환합니다.
역사적인 이유로, 접두사는 XML의 부록 F에서 두 바이트 더 길며 인코딩 이름은 확인되지 않습니다.
루프: position가 다음을 가리키는 경우:
<!--
`)position 포인터를 두 개의 0x2D 바이트가 선행되는 첫 번째 0x3E 바이트를 가리키도록 이동합니다(즉, ASCII '-->' 시퀀스의 끝에 위치). (두 개의 0x2D 바이트는 '<!--' 시퀀스의 바이트와 동일할 수 있습니다.)
position 포인터를 다음 0x09, 0x0A, 0x0C, 0x0D, 0x20, 또는 0x2F 바이트를 가리키도록 이동합니다(위에서 일치한 문자 시퀀스 중 하나).
attribute list을 빈 문자열 목록으로 설정합니다.
got pragma을 false로 설정합니다.
need pragma를 null로 설정합니다.
charset을 null 값으로 설정합니다(이 알고리즘의 목적상 인식되지 않는 인코딩이나 빈 문자열과는 구별됩니다).
속성: 속성 가져오기 및 값을 가져옵니다. 속성이 감지되지 않은 경우 아래의 처리 단계로 이동합니다.
속성의 이름이 이미 attribute list에 있는 경우, 속성 단계로 돌아갑니다.
속성의 이름을 attribute list에 추가합니다.
다음 목록에서 해당되는 단계를 실행합니다:
http-equiv
"인 경우속성의 값이 "content-type
"이면 got pragma을
true로 설정합니다.
content
"인 경우속성의 값을 문자열로 제공하여 메타 요소에서 문자 인코딩을 추출하는 알고리즘을 적용합니다. 문자 인코딩이 반환되었고 charset이 여전히 null로 설정된 경우, charset을 반환된 인코딩으로 설정하고 need pragma를 true로 설정합니다.
charset
"인 경우charset을 속성의 값에서 인코딩 가져오기의 결과로 설정하고, need pragma를 false로 설정합니다.
속성 단계로 돌아갑니다.
처리: need pragma가 null인 경우 아래의 다음 바이트 단계로 이동합니다.
need pragma가 true지만 got pragma이 false인 경우, 아래의 다음 바이트 단계로 이동합니다.
charset이 실패인 경우, 아래의 다음 바이트 단계로 이동합니다.
charset이 UTF-16BE/LE인 경우, charset을 UTF-8로 설정합니다.
charset이 x-user-defined인 경우, charset을 windows-1252로 설정합니다.
charset을 반환합니다.
position 포인터를 다음 0x09 (HT), 0x0A (LF), 0x0C (FF), 0x0D (CR), 0x20 (SP) 또는 0x3E (>) 바이트를 가리키도록 이동합니다.
속성을 더 이상 찾을 수 없을 때까지 속성 가져오기를 반복한 후, 아래의 다음 바이트 단계로 이동합니다.
<!
`)</
`)<?
`)position 포인터를 0x3C 바이트 이후에 나타나는 첫 번째 0x3E 바이트 (>)를 가리키도록 이동합니다.
해당 바이트를 처리하지 않습니다.
바이트 스트림을 사전 스캔하여 인코딩을 결정 알고리즘이 인코딩을 반환하지 않고 중단된 경우, XML 인코딩을 가져오기는 다음과 같이 수행됩니다.
text/html
에서도
XML 선언과 유사한 구문을 찾는 것은 기존 콘텐츠와의 호환성을 위해 필요합니다.
encodingPosition을 스트림의 시작 위치로 설정합니다.
encodingPosition이 바이트 시퀀스 0x3C, 0x3F, 0x78, 0x6D, 0x6C (`<?xml
`)
의 시작 위치를 가리키지 않으면 실패를 반환합니다.
xmlDeclarationEnd을 입력 바이트 스트림의 다음 0x3E (>) 바이트를 가리키는 포인터로 설정합니다. 그런 바이트가 없으면 실패를 반환합니다.
encodingPosition을 현재 encodingPosition 이후에 있는 바이트 시퀀스
0x65, 0x6E, 0x63, 0x6F, 0x64, 0x69, 0x6E, 0x67 (`encoding
`)의 첫 번째 발생
위치로 설정합니다. 그런 시퀀스가 없으면 실패를 반환합니다.
encodingPosition을 0x67 (g) 바이트 이후로 이동시킵니다.
encodingPosition에 있는 바이트가 0x20 이하인 동안(즉, ASCII 공백 또는 제어 문자) encodingPosition을 다음 바이트로 이동시킵니다.
encodingPosition에 있는 바이트가 0x3D (=)이 아니면 실패를 반환합니다.
encodingPosition을 다음 바이트로 이동시킵니다.
encodingPosition에 있는 바이트가 0x20 이하인 동안(즉, ASCII 공백 또는 제어 문자) encodingPosition을 다음 바이트로 이동시킵니다.
quoteMark를 encodingPosition에 있는 바이트로 설정합니다.
quoteMark가 0x22 (") 또는 0x27 (')이 아니면 실패를 반환합니다.
encodingPosition을 다음 바이트로 이동시킵니다.
encodingEndPosition을 encodingPosition 이후에 있는 quoteMark의 다음 발생 위치로 설정합니다. quoteMark가 다시 발생하지 않으면 실패를 반환합니다.
potentialEncoding을 encodingPosition (포함)과 encodingEndPosition (제외) 사이의 바이트 시퀀스로 설정합니다.
potentialEncoding에 값이 0x20 이하인 바이트가 하나 이상 포함되어 있으면 실패를 반환합니다.
encoding을 potentialEncoding을 제공받은 인코딩 가져오기의 결과로 설정합니다. 동형 디코드와 동일한 방법을 사용합니다.
encoding이 UTF-16BE/LE 이면 UTF-8로 변경합니다.
encoding을 반환합니다.
상호 운용성을 위해, 사용자 에이전트는 위에서 설명한 것과 다른 결과를 반환하는 사전 스캔 알고리즘을 사용해서는 안 됩니다. (그러나, 그렇게 하는 경우 알려주시기 바랍니다. 그렇게 하면 이 알고리즘을 개선하여 모두에게 이익을 줄 수 있습니다...)
사용자 에이전트는 Encoding에서 정의한 인코딩을 지원해야 합니다. 여기에는 다음이 포함되며, 이에 국한되지 않습니다: UTF-8, ISO-8859-2, ISO-8859-7, ISO-8859-8, windows-874, windows-1250, windows-1251, windows-1252, windows-1254, windows-1255, windows-1256, windows-1257, windows-1258, GBK, Big5, ISO-2022-JP, Shift_JIS, EUC-KR, UTF-16BE, UTF-16LE, UTF-16BE/LE, 그리고 x-user-defined. 사용자 에이전트는 다른 인코딩을 지원해서는 안 됩니다.
위의 규정은 예를 들어, CESU-8, UTF-7, BOCU-1, SCSU, EBCDIC, 및 UTF-32를 지원하는 것을 금지합니다. 이 명세서는 금지된 인코딩을 지원하려는 시도를 하지 않으며, 금지된 인코딩의 지원과 사용은 예기치 않은 동작으로 이어질 수 있습니다. [CESU8] [UTF7] [BOCU1] [SCSU]
파서가 사용자 에이전트에게 인코딩을 변경하도록 요구할 때, 다음 단계를 실행해야 합니다. 이는 위에서 설명한 인코딩 스니핑 알고리즘이 문자 인코딩을 찾지 못했거나, 찾은 문자 인코딩이 파일의 실제 인코딩과 일치하지 않는 경우 발생할 수 있습니다.
입력 스트림을 해석하는 데 이미 사용 중인 인코딩이 UTF-16BE/LE인 경우, 확신도를 확실한으로 설정하고 반환합니다. 새로운 인코딩은 무시됩니다. 만약 동일한 인코딩이 아니었다면, 명백히 잘못된 것입니다.
새 인코딩이 UTF-16BE/LE인 경우, 이를 UTF-8로 변경합니다.
새 인코딩이 x-user-defined인 경우, 이를 windows-1252로 변경합니다.
새 인코딩이 현재 입력 스트림을 해석하는 데 사용되고 있는 인코딩과 동일하거나 동등한 경우, 확신도를 확실한으로 설정하고 반환합니다. 이는 파일에서 발견된 인코딩 정보가 인코딩 스니핑 알고리즘이 결정한 인코딩과 일치할 때 발생하며, 첫 번째 패스에서 인코딩 스니핑 알고리즘이 올바른 인코딩을 찾지 못한 경우 두 번째 패스에서 발생할 수 있습니다.
현재 디코더에 의해 변환된 마지막 바이트까지의 모든 바이트가 현재 인코딩과 새 인코딩에서 동일한 유니코드 해석을 가지며, 사용자 에이전트가 인코딩 변환기를 동적으로 변경할 수 있는 경우, 사용자 에이전트는 새 인코딩 변환기로 동적으로 변경할 수 있습니다. 문서의 문자 인코딩과 입력 스트림을 새 인코딩으로 변환하는 데 사용된 인코딩을 설정하고, 확신도를 확실한으로 설정한 후 반환합니다.
그렇지 않은 경우, 네비게이트 알고리즘을 재시작합니다. 이때,
historyHandling을
"replace
"로
설정하고 다른 입력은 동일하게 유지하지만, 이번에는 인코딩 스니핑 알고리즘을 건너뛰고, 대신 새
인코딩과 확신도를 확실한으로 설정합니다.
가능한 한 네트워크 레이어에 실제로 접속하지 않고(예: 문서가 캐시되지 않도록 표시된 경우에도) 메모리에서 바이트를 다시 구문 분석해야 합니다. 만약 이게 불가능하고 네트워크 레이어에
접속하는 것이 GET
이외의 메소드를 사용하는 요청을 반복해야 하는 경우라면, 대신 확신도를 확실한으로 설정하고 새
인코딩을 무시합니다. 리소스가 잘못 해석될 수 있습니다. 사용자 에이전트는 상황을 사용자에게 알려 응용 프로그램 개발을 돕는 것이 좋습니다.
이 알고리즘은 새 인코딩이 meta
요소에 선언되었을
때만 호출됩니다.
입력 스트림은 입력 바이트 스트림이 디코딩될 때 푸시된 문자 또는 입력 스트림을 직접 조작하는 다양한 API에서 나온 문자들로 구성됩니다.
서로게이트가 발생할 경우, 이는 입력 스트림에서의 서로게이트 파싱 오류로 처리됩니다. 비문자가 발생할 경우, 이는 입력 스트림에서의 비문자 파싱 오류로 처리됩니다. 또한, U+0000 NULL 문자를 제외한 제어 문자는 입력 스트림에서의 제어 문자 파싱 오류로 처리됩니다.
U+0000 NULL 문자의 처리는 문자가 발견된 위치에 따라 달라지며 파싱의 후속 단계에서 발생합니다. 이러한 문자는 무시되거나 보안상의 이유로 U+FFFD 대체 문자로 교체됩니다. 이 처리는 필요에 따라 토큰화 단계와 트리 구성 단계에 걸쳐 이루어집니다.
토큰화 단계 이전에, 입력 스트림은 개행 문자 정규화를 통해 전처리되어야 합니다. 따라서 HTML DOM의 개행 문자는 U+000A LF 문자로 표현되며, 토큰화 단계의 입력에는 U+000D CR 문자가 존재하지 않습니다.
다음 입력 문자는 입력 스트림에서 아직 소비되지 않은 또는 이 섹션의 요구 사항에 의해 명시적으로 무시된 첫 번째 문자입니다. 처음에는, 다음 입력 문자는 입력의 첫 번째 문자입니다. 현재 입력 문자는 마지막으로 소비된 문자입니다.
삽입 지점은 document.write()
를
사용하여 삽입된 콘텐츠가 실제로 삽입되는 위치(문자 바로 앞이나 입력 스트림의 끝 바로 앞의 위치)입니다. 삽입 지점은 문자 위치에 상대적이며, 입력 스트림의 절대 오프셋이 아닙니다. 처음에는 삽입
지점이 정의되지 않습니다.
아래 표에서 "EOF" 문자는 입력 스트림의 끝을 나타내는 개념적인 문자입니다. 파서가 스크립트에 의해 생성된 파서인 경우, 입력 스트림의 끝은 명시적 "EOF" 문자(document.close()
메서드에 의해 삽입된)가 소비될 때 도달합니다. 그렇지 않은 경우, "EOF" 문자는 스트림 내의 실제 문자가 아니라, 추가 문자가 없음을 나타냅니다.
삽입 모드는 트리 구성 단계의 주요 작업을 제어하는 상태 변수입니다.
초기에는 삽입 모드가 "초기"로 설정됩니다. 파싱 과정에서 "html 이전", "head 이전", "head에서", "head noscript에서", "head 이후", "body에서", "텍스트", "테이블에서", "테이블 텍스트에서", "캡션에서", "열 그룹에서", "테이블 본문에서", "행에서", "셀에서", "선택에서", "테이블에서 선택", "템플릿에서", "본문 이후", "프레임셋에서", "프레임셋 이후", "본문 이후 이후", "프레임셋 이후 이후"로 변경될 수 있습니다. 삽입 모드는 토큰이 처리되는 방식과 CDATA 섹션의 지원 여부에 영향을 미칩니다.
이러한 모드 중 몇 가지는, 즉 "head에서", "body에서", "테이블에서", "선택에서"는 특별하며, 다른 모드가 여러 번 이들에 의존합니다. 아래 알고리즘에서 사용자 에이전트가 "규칙을 사용하여 m 삽입 모드"에서 무언가를 해야 한다고 말할 때, m이 이러한 모드 중 하나일 경우, 사용자 에이전트는 m 삽입 모드 섹션에 설명된 규칙을 사용해야 하지만, m의 규칙이 스스로 삽입 모드를 새로운 값으로 변경하지 않는 한, 삽입 모드는 변경되지 않아야 합니다.
삽입 모드가 "텍스트" 또는 "테이블 텍스트에서"로 전환될 때, 원래 삽입 모드도 설정됩니다. 이것은 트리 구성 단계가 다시 돌아올 삽입 모드입니다.
마찬가지로, 중첩된 템플릿
요소를 파싱하기
위해 템플릿 삽입 모드 스택이 사용됩니다. 처음에는 비어 있습니다. 현재 템플릿 삽입 모드는 템플릿 삽입 모드 스택에 가장 최근에 추가된 삽입 모드입니다. 아래 섹션의 알고리즘은
삽입 모드를 이 스택에 푸시하게 하며, 지정된 삽입 모드를 스택에 추가한다는 의미이고, 삽입 모드를 스택에서 팝하게 하며, 이는 가장 최근에 추가된 삽입 모드를 스택에서
제거해야 함을 의미합니다.
아래 단계가 UA에게 삽입 모드를 적절하게 재설정하도록 요구할 때, UA는 다음 단계를 따라야 합니다:
last를 false로 설정합니다.
node를 열린 요소 스택에서 마지막 노드로 설정합니다.
루프: node가 열린 요소 스택의 첫 번째 노드인 경우, last를 true로 설정하고, 파서가 HTML 조각 파싱 알고리즘(조각 케이스)의 일부로 생성된 경우, node를 해당 알고리즘에 전달된 컨텍스트 요소로 설정합니다.
node가 select
요소인 경우, 다음 하위
단계를 실행합니다:
node가 td
또는
th
요소이고, last가
false인 경우, 삽입 모드를 "셀에서"로 전환하고 반환합니다.
node가 tbody
, thead
, 또는 tfoot
요소인 경우, 삽입 모드를 "테이블 본문에서"로 전환하고 반환합니다.
node가 template
요소인
경우, 삽입 모드를 현재 템플릿
삽입 모드로 전환하고 반환합니다.
node가 head
요소이고 last가 false인 경우, 삽입
모드를 "head에서"로 전환하고
반환합니다.
node가 frameset
요소인 경우, 삽입 모드를 "프레임셋에서"로 전환하고
반환합니다. (조각 케이스)
node가 html
요소인 경우, 다음 하위 단계를 실행합니다:
head
요소
포인터가 null인 경우, 삽입
모드를 "head 이전"로 전환하고 반환합니다. (조각 케이스)
그렇지 않은 경우, head
요소 포인터가 null이 아니면, 삽입 모드를 "head 이후"로 전환하고 반환합니다.
node를 열린 요소 스택에서 node 앞의 노드로 설정합니다.
루프 레이블이 지정된 단계로 돌아갑니다.
처음에는 열린 요소들의 스택이 비어 있습니다. 스택은 아래로 확장되며, 스택의 최상단 노드는 스택에 처음 추가된 노드이고, 스택의 최하단 노드는 스택에 가장 최근에 추가된 노드입니다(스택이 잘못 중첩된 태그 처리의 일환으로 임의 접근 방식으로 조작되는 경우는 제외).
"html 이전" 삽입 모드는 html
문서 요소를 생성하고, 이는 스택에 추가됩니다.
단편 케이스에서는 열린 요소들의 스택이 해당
알고리즘의 일환으로 생성된 html
요소를 포함하도록 초기화됩니다.
(단편 케이스에서는 "html 이전" 삽입 모드를 생략합니다.)
그러나 html
노드는 어떤 방식으로든
생성되며, 스택의 최상단 노드입니다. 이 노드는 파서가 분석을 완료할 때까지
스택에서 제거되지 않습니다.
현재 노드는 이 열린 요소들의 스택의 최하단 노드입니다.
조정된 현재 노드는 파서가 HTML 단편 분석 알고리즘의 일환으로 생성되고 열린 요소들의 스택에 단 하나의 요소만 있는 경우의 컨텍스트 요소입니다. 그렇지 않으면, 조정된 현재 노드는 현재 노드입니다.
현재 노드가 열린 요소들의 스택에서 제거될 때, 내부 리소스 링크를 처리하고, 현재 노드의 노드 문서를 확인합니다.
열린 요소들의 스택의 요소들은 다음과 같은 범주로 나뉩니다:
다음 요소들은 각기 다른 수준의 특수 구문 분석 규칙을 가지고 있습니다: HTML의 address
,
applet
, area
, article
,
aside
, base
, basefont
, bgsound
, blockquote
,
body
, br
, button
,
caption
,
center
, col
, colgroup
,
dd
, details
,
dir
, div
, dl
, dt
, embed
, fieldset
,
figcaption
,
figure
,
footer
,
form
, frame
, frameset
, h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
head
, header
,
hgroup
,
hr
, html
, iframe
,
img
, input
, keygen
, li
, link
, listing
, main
, marquee
,
menu
, meta
, nav
, noembed
, noframes
, noscript
,
object
,
ol
, p
, param
, plaintext
, pre
, script
,
search
,
section
,
select
,
source
,
style
, summary
,
table
, tbody
, td
, template
,
textarea
,
tfoot
, th
, thead
, title
, tr
, track
, ul
, wbr
, xmp
; MathML
mi
,
MathML mo
, MathML
mn
, MathML
ms
, MathML
mtext
, and MathML
annotation-xml
; and SVG foreignObject
, SVG
desc
, and SVG
title
.
image
시작 태그 토큰은 트리 빌더에 의해 처리되지만, 이 목록에 포함되지 않은 이유는 요소가 아니기 때문입니다; 이 토큰은 img
요소로 변환됩니다.
다음 HTML 요소들은 활성 형식 지정 요소 목록에 포함됩니다: a
, b
, big
, code
, em
, font
, i
, nobr
, s
, small
, strike
, strong
,
tt
, and
u
.
HTML 문서를 구문 분석할 때 발견되는 모든 다른 요소들.
일반적으로 특수 요소들은 시작 및 종료 태그 토큰이 특정 방식으로 처리되며,
일반적 요소들의 토큰은 "기타 시작 태그" 및 "기타 종료 태그" 조항에 속하고, 트리
빌더의 일부는 열린 요소들의 스택의
특정 요소가 특수 범주에 속하는지를 확인합니다. 그러나 일부 요소들 (예: option
요소)은 시작 또는 종료
태그 토큰이 특정 방식으로 처리되지만, 여전히 특수 범주에 속하지 않으며, 따라서 다른
곳에서 일반적 처리를 받습니다.
열린 요소들의 스택이 특정 범위 내에 요소 target node를 가지고 있다고 할 때, 다음 알고리즘이 일치 상태에서 종료됩니다:
node를 현재 노드로 초기화합니다 (스택의 최하단 노드).
node가 대상 노드인 경우, 일치 상태에서 종료합니다.
그렇지 않은 경우, node가 list에 있는 요소 유형 중 하나인 경우, 실패 상태에서 종료합니다.
그렇지 않으면, node를 열린 요소들의 스택의 이전 항목으로 설정하고 2단계로 돌아갑니다. (이
루프는 절대 실패하지 않으며, 스택의 최상단 — html
요소 — 에
도달하면 항상 이전 단계에서 종료됩니다.)
열린 요소들의 스택이 특정 요소를 범위 내에 가지고 있다고 할 때, 이는 다음 요소 유형으로 구성된 특정 범위 내에 해당 요소를 가지고 있습니다:
applet
caption
html
table
td
th
marquee
object
template
mi
mo
mn
ms
mtext
annotation-xml
foreignObject
desc
title
열린 요소들의 스택이 리스트 항목 범위 내에 특정 요소를 가지고 있다고 할 때, 이는 다음 요소 유형으로 구성된 특정 범위 내에 해당 요소를 가지고 있습니다:
ol
HTML 네임스페이스 내에서
ul
HTML 네임스페이스 내에서
열린 요소들의 스택이 버튼 범위 내에 특정 요소를 가지고 있다고 할 때, 이는 다음 요소 유형으로 구성된 특정 범위 내에 해당 요소를 가지고 있습니다:
button
HTML 네임스페이스 내에서
열린 요소들의 스택이 테이블 범위 내에 특정 요소를 가지고 있다고 할 때, 이는 다음 요소 유형으로 구성된 특정 범위 내에 해당 요소를 가지고 있습니다:
html
HTML 네임스페이스 내에서
table
HTML 네임스페이스 내에서
template
HTML 네임스페이스 내에서
열린 요소들의 스택이 선택 범위 내에 특정 요소를 가지고 있다고 할 때, 이는 다음 요소 유형을 제외한 모든 요소 유형으로 구성된 특정 범위 내에 해당 요소를 가지고 있습니다:
optgroup
HTML 네임스페이스 내에서
option
HTML 네임스페이스 내에서
어느 시점에서든지 열린 요소들의 스택에
있는 요소들이 문서
트리 내에서 새 위치로 이동하거나 제거되더라도,
아무 일도 일어나지 않습니다. 특히, 이 경우 스택은 변경되지 않습니다. 이는 DOM에 더 이상 존재하지 않는 노드에 콘텐츠가 추가되는 등의 이상한 효과를 일으킬 수 있습니다.
일부 경우(예: 잘못 중첩된 형식 지정 요소 닫기)에는 스택이 임의 접근 방식으로 조작됩니다.
처음에는 활성 형식 지정 요소 목록이 비어 있습니다. 이 목록은 잘못 중첩된 형식 지정 요소 태그를 처리하는 데 사용됩니다.
이 목록은 형식 지정 범주의 요소들과 마커를 포함합니다.
마커는 applet
, object
,
marquee
,
template
,
td
, th
, 및 caption
요소에 들어갈 때 삽입되며, 형식 지정이 이들 요소로 "누출"되지 않도록 방지하는 데 사용됩니다.
또한, 활성 형식 지정 요소 목록의 각 요소는 생성된 토큰과 연결되어 있어, 필요한 경우 해당 토큰에 대한 추가 요소를 생성할 수 있습니다.
아래 단계에서 사용자 에이전트(U.A.)가 요소 element를 활성 형식 지정 요소 목록에 추가해야 한다고 요구할 때, U.A.는 다음 단계를 수행해야 합니다:
목록에 이미 활성 형식 지정 요소 목록에 마지막 마커 이후에 3개의 요소가 있는 경우 (마커가 없는 경우는 목록 전체), element와 동일한 태그 이름, 네임스페이스, 속성을 가진 가장 오래된 요소를 활성 형식 지정 요소 목록에서 제거합니다. 이 과정에서, 속성은 파서가 요소를 생성할 때와 동일한 상태로 비교해야 하며, 두 요소의 모든 파싱된 속성이 동일한 이름, 네임스페이스 및 값을 가진 쌍으로 일치할 수 있어야 합니다 (속성의 순서는 중요하지 않습니다).
이것은 노아의 방주 조항입니다. 단, 가족당 두 명 대신 세 명이 있습니다.
element를 활성 형식 지정 요소 목록에 추가합니다.
아래 단계에서 사용자 에이전트(U.A.)가 활성 형식 지정 요소를 재구성해야 한다고 요구할 때, U.A.는 다음 단계를 수행해야 합니다:
활성 형식 지정 요소 목록에 항목이 없으면 재구성할 것이 없습니다; 이 알고리즘을 중지합니다.
활성 형식 지정 요소 목록의 마지막 (가장 최근에 추가된) 항목이 마커이거나, 열린 요소들의 스택에 있는 요소라면 재구성할 것이 없습니다; 이 알고리즘을 중지합니다.
entry를 활성 형식 지정 요소 목록의 마지막 (가장 최근에 추가된) 요소로 설정합니다.
되감기: entry 이전에 활성 형식 지정 요소 목록에 항목이 없으면 생성이라는 단계로 이동합니다.
entry를 활성 형식 지정 요소 목록에서 entry 이전의 항목으로 설정합니다.
entry가 마커도 아니고, 열린 요소들의 스택에 있는 요소도 아니라면, 되감기라는 단계로 이동합니다.
전진: entry를 활성 형식 지정 요소 목록에서 entry 다음 요소로 설정합니다.
생성: entry가 생성된 토큰에 대해 HTML 요소를 삽입하여 new element를 생성합니다.
entry에 대한 항목을 new element에 대한 항목으로 목록에서 대체합니다.
목록의 활성 형식 지정 요소 목록에 new element에 대한 항목이 마지막 항목이 아닌 경우, 전진이라는 단계로 돌아갑니다.
이렇게 하면 현재 본문, 셀 또는 캡션(가장 최근에 추가된 것)에서 명시적으로 닫히지 않은 모든 형식 지정 요소가 다시 열리게 됩니다.
이 사양이 작성된 방식에 따르면, 활성 형식 지정 요소 목록은 항상 가장 최근에 추가된 요소가 마지막으로 (물론 위 알고리즘의 7단계에서 10단계가 실행되는 동안 제외하고) 시간 순서대로 정렬되어 있습니다.
아래 단계에서 사용자 에이전트(U.A.)가 마지막 마커까지 활성 형식 지정 요소 목록을 지워야 한다고 요구할 때, U.A.는 다음 단계를 수행해야 합니다:
entry를 활성 형식 지정 요소 목록의 마지막 (가장 최근에 추가된) 항목으로 설정합니다.
entry를 활성 형식 지정 요소 목록에서 제거합니다.
1단계로 돌아갑니다.
처음에, head
요소 포인터와 form
요소 포인터는 둘 다 null입니다.
head
요소가 구문 분석되면 (암시적으로든
명시적으로든) head
요소 포인터가
이 노드를 가리키도록 설정됩니다.
form
요소 포인터는 마지막으로
열렸고 종료 태그가 아직 나타나지 않은 form
요소를 가리킵니다. 이는 역사적인 이유로 매우 나쁜 마크업에서도 폼 컨트롤을 폼과 연관시키는 데 사용됩니다. 이 포인터는 template
요소 내에서는
무시됩니다.
스크립팅 플래그는 파서가 생성될 때 파서와 연결된 문서
에서 스크립팅이 활성화되었는지 여부에 따라 "enabled"로 설정되고, 그렇지 않으면 "disabled"로
설정됩니다.
스크립팅 플래그는 파서가 HTML 단편
구문 분석 알고리즘의 일부로 생성되었을 때도 활성화될 수 있지만, 그 경우 script
요소는 실행되지 않습니다.
frameset-ok 플래그는 파서가 생성될 때 "ok"로 설정됩니다. 특정 토큰이 나타난 후에는 "not ok"로 설정됩니다.
구현은 다음 상태 기계를 사용하여 HTML을 토큰화하는 것처럼 동작해야 합니다. 상태 기계는 데이터 상태에서 시작해야 합니다. 대부분의 상태는 단일 문자를 소비하며, 이는 다양한 부작용을 일으킬 수 있고, 상태 기계를 새 상태로 전환하여 현재 입력 문자를 다시 소비하거나, 새 상태로 전환하여 다음 문자를 소비하거나, 동일한 상태에 머물러 다음 문자를 소비합니다. 일부 상태는 더 복잡한 동작을 하며 다른 상태로 전환하기 전에 여러 문자를 소비할 수 있습니다. 일부 경우에는 트리 구성 단계에 의해 토큰화기 상태가 변경되기도 합니다.
상태가 일치한 문자를 특정 상태에서 다시 소비하도록 지시할 때, 이는 해당 상태로 전환하되, 다음 입력 문자를 소비하려고 할 때 현재 입력 문자를 대신 제공한다는 것을 의미합니다.
특정 상태의 정확한 동작은 삽입 모드와 열린 요소들의 스택에 따라 달라집니다. 특정 상태는 진행 상황을 추적하기 위해 temporary buffer를 사용하며, 문자 참조 상태는 호출된 상태로 돌아가기 위해 반환 상태를 사용합니다.
토큰화 단계의 출력은 다음과 같은 토큰 시리즈일 수 있습니다: DOCTYPE, 시작 태그, 종료 태그, 주석, 문자, 파일 종료. DOCTYPE 토큰에는 이름, 공개 식별자, 시스템 식별자, 그리고 강제 이상 모드 플래그가 있습니다. DOCTYPE 토큰이 생성되면, 이름, 공개 식별자, 시스템 식별자는 누락된 것으로 표시해야 하며 (이는 빈 문자열과는 구별되는 상태입니다), 강제 이상 모드 플래그는 꺼짐으로 설정해야 합니다 (다른 상태는 켜짐입니다). 시작 태그와 종료 태그 토큰에는 태그 이름, 자체 종료 플래그, 그리고 각각 이름과 값을 가진 속성 목록이 있습니다. 시작 또는 종료 태그 토큰이 생성되면, 자체 종료 플래그는 해제되어야 하며 (다른 상태는 설정됨), 속성 목록은 비어 있어야 합니다. 주석과 문자 토큰에는 데이터가 포함됩니다.
토큰이 방출되면, 즉시 트리 구성 단계에서 처리해야 합니다. 트리 구성 단계는 토큰화
단계의 상태에 영향을 미칠 수 있으며, 스트림에 추가 문자를 삽입할 수 있습니다. (예를 들어, script
요소는 스크립트 실행을 일으키고 동적 마크업 삽입 API를 사용하여 토큰화 중인 스트림에
문자를 삽입할 수 있습니다.)
토큰을 생성하는 것과 방출하는 것은 별개의 작업입니다. 예를 들어, 시작 태그 토큰으로 구문 분석되는 동안 파일이 예상치 못하게 끝나면, 토큰이 생성되었지만 암시적으로 포기될 수 있습니다 (즉, 방출되지 않음).
시작 태그 토큰이 자체 종료 플래그가 설정된 상태로 방출될 때, 트리 구성 단계에서 이 플래그가 인식되지 않으면, 이는 비비어있는 HTML 요소 시작 태그에 후행 슬래시가 있는 경우 구문 오류입니다.
종료 태그 토큰이 속성을 가진 상태로 방출될 때, 이는 속성이 있는 종료 태그 구문 오류입니다.
종료 태그 토큰이 자체 종료 플래그가 설정된 상태로 방출될 때, 이는 후행 슬래시가 있는 종료 태그 구문 오류입니다.
적절한 종료 태그 토큰은 이 토큰화기에서 마지막으로 방출된 시작 태그의 태그 이름과 일치하는 태그 이름을 가진 종료 태그 토큰입니다. 이 토큰화기에서 방출된 시작 태그가 없는 경우, 적절한 종료 태그 토큰은 없습니다.
문자 참조가 속성의 일부로 소비되었다고 할 때, 이는 반환 상태가 속성 값 (큰따옴표), 속성 값 (작은따옴표), 또는 속성 값 (따옴표 없음) 상태 중 하나일 때를 의미합니다.
상태가 문자 참조로 소비된 코드 포인트를 플러시하라고 지시할 때, 이는 임시 버퍼에 있는 각 코드 포인트를 (버퍼에 추가된 순서대로) 사용자 에이전트가 현재 속성의 값에 추가해야 함을 의미합니다. 문자 참조가 속성의 일부로 소비된 경우 또는 그렇지 않으면 코드 포인트를 문자 토큰으로 방출합니다.
토큰화기의 각 단계 전에, 사용자 에이전트는 먼저 파서 일시 중지 플래그를 확인해야 합니다. 만약 이 플래그가 true이면, 토큰화기는 중첩된 모든 토큰화기 호출의 처리를 중단하고, 호출자에게 제어권을 반환해야 합니다.
토큰화기 상태 기계는 다음 하위 섹션에 정의된 상태로 구성됩니다.
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
script
"가 있는 경우, 스크립트 데이터 이중 이스케이프 상태로
전환합니다. 그렇지 않으면 스크립트 데이터 이스케이프 상태로 전환합니다. 현재 입력
문자를 문자 토큰으로 방출합니다.
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
script
"가 있는 경우, 스크립트 데이터 이스케이프 상태로 전환합니다. 그렇지 않으면
스크립트 데이터 이중 이스케이프 상태로 전환합니다.
현재 입력
문자를 문자 토큰으로 방출합니다.
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
사용자가 속성 이름 상태를 떠날 때(그리고 적절한 경우 태그 토큰을 방출하기 전에), 전체 속성 이름을 동일한 토큰의 다른 속성과 비교해야 합니다. 동일한 이름을 가진 속성이 이미 토큰에 있는 경우, 이것은 중복 속성 구문 오류이며, 새 속성은 토큰에서 제거되어야 합니다.
토큰에서 속성이 제거되면 해당 속성 및 관련된 값(있는 경우)은 파서에 의해 이후에 사용되지 않으므로 효과적으로 삭제됩니다. 그러나 이렇게 속성을 제거해도 토크나이저의 관점에서는 여전히 "현재 속성"으로 남아 있습니다.
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소비하십시오:
다음 입력 문자를 소모합니다:
다음 몇 개의 문자가 다음과 같은 경우:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
현재 입력 문자로 시작하는 여섯 문자가 "PUBLIC"과 ASCII 대소문자 무시 일치하면, 그 문자를 소모하고 DOCTYPE 공용 키워드 이후 상태로 전환합니다.
그렇지 않고 현재 입력 문자로 시작하는 여섯 문자가 "SYSTEM"과 ASCII 대소문자 무시 일치하면, 그 문자를 소모하고 DOCTYPE 시스템 키워드 이후 상태로 전환합니다.
그 외의 경우, 이것은 DOCTYPE 이름 이후의 잘못된 문자 시퀀스 구문 오류입니다. 현재 DOCTYPE 토큰의 강제 쿼크 플래그를 켜짐으로 설정합니다. 다시 소모하여 잘못된 DOCTYPE 상태로 전환합니다.
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소모합니다:
다음 입력 문자를 소비합니다:
다음 입력 문자를 소비합니다:
다음 입력 문자를 소비합니다:
다음 입력 문자를 소비합니다:
다음 입력 문자를 소비합니다:
다음 입력 문자를 소비합니다:
U+0000 NULL 문자는 트리 구성 단계에서 처리되며, CDATA 섹션이 나타날 수 있는 유일한 위치인 외부 콘텐츠 삽입 모드의 일부로 처리됩니다.
다음 입력 문자를 소모합니다: next input character:
다음 입력 문자를 소모합니다: next input character:
임시 버퍼를 빈 문자열로 설정합니다. U+0026 AMPERSAND(&) 문자를 임시 버퍼에 추가합니다. 다음 입력 문자를 소모합니다: next input character:
소비된 문자가 이름이 있는 문자 참조 테이블의 첫 번째 열에 있는 식별자 중 하나인 최대한 많은 문자를 소비합니다. 소비될 때마다 각 문자를 임시 버퍼에 추가합니다.
문자 참조가 속성의 일부로 소비되었고, 마지막으로 일치한 문자가 U+003B 세미콜론(;) 문자가 아니며, 다음 입력 문자가 U+003D 등호 문자(=)이거나 ASCII 알파벳 숫자인 경우, 역사적인 이유로 문자 참조로서 소모된 코드 포인트를 플러시하고 리턴 상태로 전환합니다.
그렇지 않으면:
마지막으로 일치한 문자가 U+003B 세미콜론(;) 문자가 아닌 경우, 문자 참조 뒤에 세미콜론이 없음 파싱 오류입니다.
임시 버퍼를 빈 문자열로 설정합니다. 문자 참조 이름에 해당하는 문자 하나 또는 두 개를 임시 버퍼에 추가합니다.
마크업에 (속성이 아닌 경우) I'm ¬it; I tell you
문자열이 포함된 경우, 문자 참조는 "not"으로 파싱되어
I'm ¬it; I tell you
(이것은 파싱 오류입니다.)와 같이 됩니다. 하지만 마크업이 I'm ∉ I tell you
라면
문자 참조는 "notin;"으로 파싱되어 I'm ∉ I tell you
(파싱 오류 없음)와 같은 결과를 가져옵니다.
그러나 마크업에 I'm ¬it; I tell you
문자열이 속성에 포함된 경우, 문자 참조는 파싱되지 않으며 문자열은 그대로 유지됩니다(파싱 오류 없음).
다음 입력 문자를 소모합니다: next input character:
character reference code를 0으로 설정합니다.
다음 입력 문자를 소모합니다: next input character:
다음 입력 문자를 소모합니다: next input character:
다음 입력 문자를 소모합니다: next input character:
다음 입력 문자를 소모합니다: next input character:
다음 입력 문자를 소모합니다: next input character:
문자 참조 코드를 확인합니다:
숫자가 0x10FFFF보다 큰 경우, 이는 유니코드 범위를 벗어난 문자 참조 파싱 오류입니다. 문자 참조 코드를 0xFFFD로 설정합니다.
숫자가 서로게이트라면, 이는 서로게이트 문자 참조 파싱 오류입니다. 문자 참조 코드를 0xFFFD로 설정합니다.
숫자가 비문자(noncharacter)인 경우, 이는 비문자 문자 참조 파싱 오류입니다.
숫자가 0x0D이거나, 제어 문자(control)이지만 ASCII 공백 문자가 아닌 경우, 이는 제어 문자 참조 파싱 오류입니다. 숫자가 아래 표의 첫 번째 열에 있는 숫자 중 하나인 경우, 해당 행을 찾아 문자 참조 코드를 그 행의 두 번째 열에 있는 숫자로 설정합니다.
숫자 | 코드 포인트 | |
---|---|---|
0x80 | 0x20AC | 유로 기호 (€) |
0x82 | 0x201A | 싱글 로우-9 인용 부호 (‚) |
0x83 | 0x0192 | 후크가 있는 라틴 소문자 F (ƒ) |
0x84 | 0x201E | 더블 로우-9 인용 부호 („) |
0x85 | 0x2026 | 수평 줄임표 (…) |
0x86 | 0x2020 | 대거 (†) |
0x87 | 0x2021 | 이중 대거 (‡) |
0x88 | 0x02C6 | 수정 문자 곡절 악센트 (ˆ) |
0x89 | 0x2030 | 퍼밀 기호 (‰) |
0x8A | 0x0160 | 곡절 악센트가 있는 라틴 대문자 S (Š) |
0x8B | 0x2039 | 싱글 왼쪽 꺾쇠 인용 부호 (‹) |
0x8C | 0x0152 | 라틴 대문자 결합 OE (Œ) |
0x8E | 0x017D | 곡절 악센트가 있는 라틴 대문자 Z (Ž) |
0x91 | 0x2018 | 왼쪽 싱글 인용 부호 (‘) |
0x92 | 0x2019 | 오른쪽 싱글 인용 부호 (’) |
0x93 | 0x201C | 왼쪽 더블 인용 부호 (“) |
0x94 | 0x201D | 오른쪽 더블 인용 부호 (”) |
0x95 | 0x2022 | 불릿 (•) |
0x96 | 0x2013 | 엔 대시 (–) |
0x97 | 0x2014 | 엠 대시 (—) |
0x98 | 0x02DC | 작은 물결표 (˜) |
0x99 | 0x2122 | 상표 기호 (™) |
0x9A | 0x0161 | 곡절 악센트가 있는 라틴 소문자 S (š) |
0x9B | 0x203A | 싱글 오른쪽 꺾쇠 인용 부호 (›) |
0x9C | 0x0153 | 라틴 소문자 결합 OE (œ) |
0x9E | 0x017E | 곡절 악센트가 있는 라틴 소문자 Z (ž) |
0x9F | 0x0178 | 위 겹침 부호가 있는 라틴 대문자 Y (Ÿ) |
임시 버퍼를 빈 문자열로 설정합니다. 문자 참조 코드에 해당하는 코드 포인트를 임시 버퍼에 추가합니다. 문자 참조로 소비된 코드 포인트를 플러시합니다. 반환 상태로 전환합니다.
트리 구성 단계의 입력은 토큰화 단계에서 생성된
토큰의 시퀀스입니다. 트리 구성 단계는 파서가 생성될 때 DOM
Document
객체와 연결됩니다. 이 단계의 "출력"은 해당 문서의 DOM 트리를
동적으로 수정하거나 확장하는 것으로 구성됩니다.
이 명세서는 상호작용 사용자 에이전트가
Document
를 사용자에게 표시하여 사용할 수 있도록 해야 하는 시점이나
사용자 입력을 받아야 하는 시점을 정의하지 않습니다.
각 토큰이 토큰 생성기에서 방출될 때, 사용자 에이전트는 트리 구성 디스패처로 알려진 다음 목록에서 적절한 단계를 따라야 합니다:
annotation-xml
요소이며,
해당 토큰이 "svg" 시작 태그인 경우
다음 토큰은 트리 구성 디스패처에 의해 처리될 예정인 토큰입니다 (비록 해당 토큰이 나중에 무시되더라도).
노드가 MathML 텍스트 통합 지점인 경우, 다음 요소 중 하나입니다:
mi
요소
mo
요소
mn
요소
ms
요소
mtext
요소
노드가 HTML 통합 지점인 경우, 다음 요소 중 하나입니다:
annotation-xml
요소로,
시작 태그 토큰에 "encoding"이라는 이름의 속성이 있으며 해당 값이 "text/html
" 문자열과
ASCII 대소문자 구분 없이 일치하는 경우
annotation-xml
요소로,
시작 태그 토큰에 "encoding"이라는 이름의 속성이 있으며 해당 값이 "application/xhtml+xml
" 문자열과
ASCII 대소문자 구분 없이 일치하는 경우
foreignObject
요소
desc
요소
title
요소
해당 노드가 HTML 조각 파싱 알고리즘에 전달된 컨텍스트 요소인 경우, 해당 요소의 시작 태그 토큰은 HTML 조각 파싱 알고리즘에 의해 생성된 "가짜" 토큰입니다.
아래에 언급된 모든 태그 이름이 이 명세서에서 준수해야 할 태그 이름은 아닙니다. 많은 경우 레거시 콘텐츠를 처리하기 위해 포함되어 있습니다. 이들은 여전히 구현체가 준수성을 주장하기 위해 구현해야 하는 알고리즘의 일부를 형성합니다.
아래에 설명된 알고리즘은 생성된 DOM 트리의 깊이나, 태그 이름, 속성 이름, 속성 값,
텍스트
노드 등의
길이에 제한을 두지 않습니다. 구현자는 임의의 제한을 피하라고 권장되지만,
실질적인 문제로 인해 사용자 에이전트가 중첩 깊이 제약을 부과해야 할 가능성이 있습니다.
파서가 토큰을 처리하는 동안 포스터 페어런팅을 활성화하거나 비활성화할 수 있습니다. 이는 다음 알고리즘에 영향을 미칩니다.
특정 재정의 대상을 선택적으로 사용하여 노드를 삽입하기 위한 적절한 위치는 다음 단계를 실행하여 반환된 요소 내의 위치입니다:
만약 재정의 대상이 지정된 경우, target을 재정의 대상으로 설정합니다.
그렇지 않은 경우, target을 현재 노드로 설정합니다.
다음 목록에서 처음 일치하는 단계들을 사용하여 adjusted insertion location를 결정합니다:
table
,
tbody
,
tfoot
,
thead
, 또는
tr
요소인 경우
포스터 페어런팅은 테이블에서 컨텐츠가 잘못 중첩된 경우 발생합니다.
다음 하위 단계들을 실행합니다:
last template을 열린 요소의 스택에 있는
마지막
template
요소로 설정합니다. (있는 경우)
만약 last template이 있고 last table이 없거나, last template이 last table보다 열린 요소의 스택에서 더 아래에 (더 최근에 추가됨) 위치한 경우: adjusted insertion location를 last template의 템플릿 콘텐츠 내의 마지막 자식 (있는 경우) 뒤로 설정하고, 이 단계를 중단합니다.
만약 last table이 없는 경우, adjusted insertion location를
열린 요소의 스택에 있는
첫 번째 요소 (
html
요소) 내의 마지막 자식 (있는 경우) 뒤로 설정하고, 이 단계를 중단합니다.
(조각 사례)
만약 last table에 부모 노드가 있는 경우, adjusted insertion location를 last table의 부모 노드 내에서, last table 바로 앞에 위치시키고, 이 단계를 중단합니다.
previous element를 열린 요소의 스택에서 last table 바로 위에 있는 요소로 설정합니다.
adjusted insertion location를 previous element의 마지막 자식 (있는 경우) 뒤로 설정합니다.
이 단계들은 특정 상황에서, 특히
table
요소가 DOM에서 스크립트에 의해 이동되었거나,
삽입된 후 DOM에서 완전히 제거된 경우 등을 고려하여 포함되어 있습니다.
adjusted insertion location를 target 내의 마지막 자식 (있는 경우) 뒤로 설정합니다.
만약 adjusted insertion location가
template
요소 내에 있는 경우, 대신 adjusted insertion location를
template
요소의 템플릿 콘텐츠 내의
마지막 자식 (있는 경우) 뒤로 설정합니다.
adjusted insertion location를 반환합니다.
아래 단계들이 UA에게 특정 given namespace와 특정 intended parent로 토큰에 대한 요소를 생성하라고 요구할 때, UA는 다음 단계들을 실행해야 합니다:
만약 활성 투기적 HTML 파서가 null이 아닌 경우, 투기적 목업 요소를 생성한 결과를 반환합니다. 주어진 네임스페이스, 주어진 토큰의 태그 이름, 그리고 주어진 토큰의 속성들을 기준으로 합니다.
그렇지 않다면, 선택적으로 주어진 네임스페이스, 주어진 토큰의 태그 이름, 그리고 주어진 토큰의 속성들을 기준으로 투기적 목업 요소를 생성합니다.
결과는 사용되지 않습니다. 이 단계는 투기적 가져오기가 비투기적 파싱에서 시작될 수 있도록 합니다. 이 시점에서 가져오기는 여전히 투기적입니다. 예를 들어, 요소가 삽입될 때까지 intended parent가 문서에서 제거되었을 수 있기 때문입니다.
document를 intended parent의 노드 문서로 설정합니다.
local name을 토큰의 태그 이름으로 설정합니다.
만약 "is
" 속성이
해당 토큰에 존재한다면, 그 값을 is로 설정하고, 그렇지 않다면 null로 설정합니다.
definition을 사용자 정의 요소 정의 조회의 결과로 설정합니다. document, given namespace, local name, 및 is를 기준으로 합니다.
만약 definition이 null이 아니고, 파서가 HTML 조각 파싱 알고리즘의 일부로 생성되지 않은 경우, will execute script을 true로 설정합니다. 그렇지 않으면 false로 설정합니다.
만약 will execute script이 true인 경우:
document의 동적 마크업 삽입 시 예외 발생 카운터를 증가시킵니다.
만약 자바스크립트 실행 컨텍스트 스택이 비어있다면, 마이크로태스크 체크포인트를 수행합니다.
document의 관련 에이전트의 사용자 정의 요소 반응 스택에 새로운 요소 큐를 추가합니다.
element를 요소 생성의 결과로 설정합니다. document, localName, given namespace, null, 및 is를 기준으로 합니다. 만약 will execute script이 true라면, synchronous custom elements flag를 설정합니다. 그렇지 않으면 설정하지 않습니다.
이 단계는 will execute script이 true인 경우 사용자 정의 요소 생성자를 실행하게 됩니다. 그러나 동적 마크업 삽입 시 예외 발생 카운터를 증가시켰기 때문에, 이로 인해 새로운 문자가 토큰 생성기에 삽입되거나, 문서가 파기되거나 하는 일이 발생하지 않습니다.
주어진 토큰의 각 속성을 element에 추가합니다.
이 단계는 사용자 정의 요소 콜백 반응을 큐에
추가하여
attributeChangedCallback
을 실행할 수 있습니다. 이는 즉시 실행될 수 있습니다
(다음 단계에서).
비록 "is
" 속성이
사용자 정의 요소를
생성하는 데 중요한 역할을 하지만,
이는 관련
사용자 정의 요소 생성자의 실행 중에는 존재하지 않습니다. 이 속성은 이 단계에서
다른 속성과 함께 추가됩니다.
만약 will execute script이 true인 경우:
document의 관련 에이전트의 사용자 정의 요소 반응 스택에서 queue를 팝(popping)한 결과를 설정합니다. (이는 위에서 추가된 것과 동일한 요소 큐일 것입니다.)
queue에서 사용자 정의 요소 반응을 호출합니다.
document의 동적 마크업 삽입 시 예외 발생 카운터를 감소시킵니다.
만약 element가 XMLNS 네임스페이스
내의
xmlns
속성을 가지고 있으며, 해당 값이 요소의 네임스페이스와 정확히 일치하지 않는다면,
이는 구문 오류입니다.
마찬가지로, element가 XMLNS 네임스페이스
내의
xmlns:xlink
속성을 가지고 있으며, 해당 값이
XLink 네임스페이스와 일치하지 않는다면, 이는
구문 오류입니다.
만약 element가 재설정 가능한 요소라면, 해당 요소의 재설정 알고리즘을 호출합니다. (이 단계는 요소의 값과 체크 상태를 해당 요소의 속성을 기준으로 초기화합니다.)
만약 element가 폼 관련 요소이며
폼
관련 사용자 정의 요소가 아니며,
form
요소 포인터가 null이 아니며, 열린 요소의 스택에
template
요소가 없으며,
element가 목록화된
요소가 아니거나
form
속성을 가지고 있지
않으며,
intended parent가 트리에서
form
요소 포인터가 가리키는 요소와 동일한 트리에 있는 경우,
element를 form 요소와 연관시킵니다
form
요소와
연결하고
element의 파서 삽입 플래그를 설정합니다.
element를 반환합니다.
조정된 삽입 위치에 요소를 삽입하기 위해, 요소 element을 삽입합니다:
adjusted insertion location을 노드를 삽입하기 위한 적절한 위치로 설정합니다.
만약 element를 adjusted insertion location에 삽입할 수 없는 경우, 이 단계를 중단합니다.
만약 파서가 HTML 조각 파싱 알고리즘의 일부로 생성되지 않은 경우, 새로운 요소 큐를 element의 관련 에이전트의 사용자 정의 요소 반응 스택에 추가합니다.
element를 adjusted insertion location에 삽입합니다.
만약 파서가 HTML 조각 파싱 알고리즘의 일부로 생성되지 않은 경우, element의 관련 에이전트의 사용자 정의 요소 반응 스택에서 요소 큐를 팝하고, 해당 큐에서 사용자 정의 요소 반응을 호출합니다.
만약 adjusted insertion location가 더 이상 요소를 수용할 수 없는 경우, 예를 들어
문서
가 이미 자식 요소를 가지고
있는 경우, element는 무시됩니다.
아래 단계들이 사용자 에이전트에게 주어진 네임스페이스의 토큰에 대해 외부 요소를 삽입하고, onlyAddToElementStack이라는 불리언 값을 사용할 것을 요구할 때, 사용자 에이전트는 다음 단계들을 실행해야 합니다:
adjusted insertion location을 노드를 삽입하기 위한 적절한 위치로 설정합니다.
element를 주어진 네임스페이스의 토큰에 대한 요소를 생성한 결과로 설정하며, adjusted insertion location가 속한 요소를 의도된 부모로 설정합니다.
만약 onlyAddToElementStack이 false인 경우, 조정된 삽입 위치에 요소를 삽입과 함께 element를 실행합니다.
element를 반환합니다.
아래 단계들이 사용자 에이전트에게 토큰에 대해 HTML 요소를 삽입할 것을 요구할 때, 사용자 에이전트는 외부 요소를 삽입해야 하며, HTML 네임스페이스와 false를 사용합니다.
아래 단계들이 사용자 에이전트에게 토큰에 대해 MathML 속성을 조정할 것을 요구할 때,
만약 해당 토큰에 definitionurl
이라는 이름의 속성이 있다면, 그 이름을 definitionURL
로 변경합니다
(대소문자 차이에 주의하십시오).
아래 단계들이 사용자 에이전트에게 토큰에 대해 SVG 속성을 조정할 것을 요구할 때, 토큰에 있는 각 속성의 속성 이름이 다음 표의 첫 번째 열에 있는 이름 중 하나인 경우, 해당 속성의 이름을 두 번째 열에 주어진 이름으로 변경합니다. (이는 모두 소문자가 아닌 SVG 속성의 대소문자를 수정합니다.)
토큰의 속성 이름 | 요소의 속성 이름 |
---|---|
attributename
| attributeName
|
attributetype
| attributeType
|
basefrequency
| baseFrequency
|
baseprofile
| baseProfile
|
calcmode
| calcMode
|
clippathunits
| clipPathUnits
|
diffuseconstant
| diffuseConstant
|
edgemode
| edgeMode
|
filterunits
| filterUnits
|
glyphref
| glyphRef
|
gradienttransform
| gradientTransform
|
gradientunits
| gradientUnits
|
kernelmatrix
| kernelMatrix
|
kernelunitlength
| kernelUnitLength
|
keypoints
| keyPoints
|
keysplines
| keySplines
|
keytimes
| keyTimes
|
lengthadjust
| lengthAdjust
|
limitingconeangle
| limitingConeAngle
|
markerheight
| markerHeight
|
markerunits
| markerUnits
|
markerwidth
| markerWidth
|
maskcontentunits
| maskContentUnits
|
maskunits
| maskUnits
|
numoctaves
| numOctaves
|
pathlength
| pathLength
|
patterncontentunits
| patternContentUnits
|
patterntransform
| patternTransform
|
patternunits
| patternUnits
|
pointsatx
| pointsAtX
|
pointsaty
| pointsAtY
|
pointsatz
| pointsAtZ
|
preservealpha
| preserveAlpha
|
preserveaspectratio
| preserveAspectRatio
|
primitiveunits
| primitiveUnits
|
refx
| refX
|
refy
| refY
|
repeatcount
| repeatCount
|
repeatdur
| repeatDur
|
requiredextensions
| requiredExtensions
|
requiredfeatures
| requiredFeatures
|
specularconstant
| specularConstant
|
specularexponent
| specularExponent
|
spreadmethod
| spreadMethod
|
startoffset
| startOffset
|
stddeviation
| stdDeviation
|
stitchtiles
| stitchTiles
|
surfacescale
| surfaceScale
|
systemlanguage
| systemLanguage
|
tablevalues
| tableValues
|
targetx
| targetX
|
targety
| targetY
|
textlength
| textLength
|
viewbox
| viewBox
|
viewtarget
| viewTarget
|
xchannelselector
| xChannelSelector
|
ychannelselector
| yChannelSelector
|
zoomandpan
| zoomAndPan
|
아래 단계들이 사용자 에이전트에게 토큰에 대해 외부 속성을 조정할 것을 요구할 때,
토큰에 있는 속성 중 하나가 다음 표의 첫 번째 열에 있는 문자열과 일치하는 경우, 해당 속성을 네임스페이스가 있는 속성으로 설정하고,
접두사는 두 번째 열에 주어진 문자열로, 로컬 이름은 세 번째 열에 주어진 문자열로, 네임스페이스는 네 번째 열에 주어진 네임스페이스로 설정합니다.
(이것은 특히 XML 네임스페이스에서 lang
속성의 사용을 수정합니다.)
속성 이름 | 접두사 | 로컬 이름 | 네임스페이스 |
---|---|---|---|
xlink:actuate
| xlink
| actuate
| XLink 네임스페이스 |
xlink:arcrole
| xlink
| arcrole
| XLink 네임스페이스 |
xlink:href
| xlink
| href
| XLink 네임스페이스 |
xlink:role
| xlink
| role
| XLink 네임스페이스 |
xlink:show
| xlink
| show
| XLink 네임스페이스 |
xlink:title
| xlink
| title
| XLink 네임스페이스 |
xlink:type
| xlink
| type
| XLink 네임스페이스 |
xml:lang
| xml
| lang
| XML 네임스페이스 |
xml:space
| xml
| space
| XML 네임스페이스 |
xmlns
| (없음) | xmlns
| XMLNS 네임스페이스 |
xmlns:xlink
| xmlns
| xlink
| XMLNS 네임스페이스 |
아래 단계에서 사용자 에이전트가 토큰을 처리하는 동안 문자를 삽입해야 하는 경우, 사용자 에이전트는 다음 단계를 실행해야 합니다:
data를 알고리즘에 전달된 문자로 설정하거나, 명시적으로 지정된 문자가 없을 경우 처리 중인 문자 토큰의 문자로 설정합니다.
adjusted insertion location을 노드를 삽입할 적절한 위치로 설정합니다.
만약 adjusted insertion location이 Document
노드에 있다면, 반환합니다.
만약 adjusted insertion location 바로 앞에 Text
노드가 있다면, 그 Text
노드의 data에 data를 추가합니다.
그렇지 않으면, data를 가진 새로운 Text
노드를 생성하고, 그 data를 설정하며, node
document를 adjusted insertion location이 위치한 요소와 동일하게 설정한 다음, 새로 생성된 노드를 adjusted
insertion location에 삽입합니다.
아래는 파서에 대한 샘플 입력과, 스크립트를 실행하는 사용자 에이전트를 가정할 때 결과적으로 생성되는 Text
노드의 수입니다.
입력 | 생성된 Text
노드의 수 |
---|---|
| 문서 내 하나의 Text
노드, "AB"를 포함합니다. |
| 세 개의 Text
노드; 스크립트 앞의 "A", 스크립트의 내용, 스크립트 뒤의 "BC"(파서는 스크립트가 생성한 Text
노드에 추가합니다). |
| 문서 내 인접한 두 개의 Text
노드, "A"와 "BC"를 포함합니다. |
| 테이블 앞에 하나의 Text
노드, "ABCD"를 포함합니다. (이것은 foster parenting에 의해 발생합니다.) |
| 테이블 앞에 하나의 Text
노드, "A B C"를 포함합니다 (A-공백-B-공백-C). (이것은 foster parenting에 의해 발생합니다.) |
| 테이블 앞에 하나의 Text
노드, "A BC"를 포함하고, 테이블 안에 하나의 Text
노드 (하나의 공백 문자를 가진)를 포함합니다. (공백 문자가 비문자 토큰에 의해 비문자와 분리되면 foster parenting에 의해 영향을 받지 않습니다. 그러나 다른
토큰이 무시되더라도 공백 문자는 여전히 존재합니다.) |
아래 단계에서 사용자 에이전트가 주석 토큰을 처리하는 동안 주석을 삽입해야 하는 경우, 명시적으로 삽입 위치 position을 지정하여 사용자 에이전트는 다음 단계를 실행해야 합니다:
처리 중인 주석 토큰에 주어진 data를 설정합니다.
만약 position이 지정되었다면, adjusted insertion location을 position으로 설정합니다. 그렇지 않으면, adjusted insertion location을 노드를 삽입할 적절한 위치로 설정합니다.
data를 가진 Comment
노드를 생성하고, node
document를 adjusted insertion location이 위치한 노드와 동일하게 설정합니다.
생성된 노드를 adjusted insertion location에 삽입합니다.
일반 원시 텍스트 요소 파싱 알고리즘과 일반 RCDATA 요소 파싱 알고리즘은 다음 단계로 구성됩니다. 이 알고리즘들은 항상 시작 태그 토큰에 대한 응답으로 호출됩니다.
토큰에 대한 HTML 요소를 삽입합니다.
호출된 알고리즘이 일반 원시 텍스트 요소 파싱 알고리즘인 경우, 토크나이저를 RAWTEXT 상태로 전환합니다. 그렇지 않으면 호출된 알고리즘은 일반 RCDATA 요소 파싱 알고리즘이며, 토크나이저를 RCDATA 상태로 전환합니다.
아래 단계에서 UA가 암시적 종료 태그를 생성해야 하는 경우, 현재 노드가 dd
요소,
dt
요소,
li
요소,
optgroup
요소, option
요소, p
요소,
rb
요소, rp
요소,
rt
요소 또는
rtc
요소인 동안, UA는 현재 노드를 열린 요소
스택에서 제거해야 합니다.
단계에서 UA가 암시적 종료 태그를 생성해야 하지만 프로세스에서 제외할 요소를 나열하는 경우, UA는 해당 요소가 위 목록에 없는 것처럼 위 단계를 수행해야 합니다.
아래 단계에서 UA가 모든 암시적 종료 태그를 철저히 생성해야 하는 경우, 현재 노드가 caption
요소, colgroup
요소, dd
요소, dt
요소, li
요소, optgroup
요소, option
요소, p
요소,
rb
요소, rp
요소,
rt
요소,
rtc
요소, tbody
요소, td
요소, tfoot
요소, th
요소, thead
요소 또는 tr
요소인 동안, UA는 현재 노드를 열린 요소
스택에서 제거해야 합니다.
문서
객체에는 관련된 파서가 모드를 변경할 수 없는 플래그(boolean)이 있습니다. 이 플래그는 초기에는 false로 설정됩니다.
사용자 에이전트가 "초기" 삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 다음과 같이 토큰을 처리해야 합니다:
토큰을 무시합니다.
DOCTYPE 토큰의 이름이 "html
"이 아니거나, 토큰의 공용 식별자가 없지 않거나, 토큰의 시스템 식별자가 없거나 "about:legacy-compat
"가
아니라면, 파싱 오류가 발생합니다.
DOCTYPE 토큰에 주어진 이름을 설정하거나, 이름이 없을 경우 빈 문자열로 설정된 DocumentType
노드를 문서
노드에 추가합니다. 공용 식별자는
DOCTYPE 토큰에 주어진 공용 식별자로 설정하거나 없을 경우 빈 문자열로 설정되며, 시스템 식별자는 DOCTYPE 토큰에 주어진 시스템 식별자로 설정하거나 없을 경우 빈 문자열로
설정됩니다.
이것은 또한 DocumentType
노드가 문서
객체의 doctype
속성의 값으로 반환되도록 보장합니다.
그런 다음, 문서가 아닌 경우 iframe
srcdoc
문서, 그리고 파서가 모드를 변경할 수 없는 플래그가 false인
경우, DOCTYPE 토큰이 아래 목록의 조건 중 하나와 일치하면, 문서
를 쿼크 모드로 설정합니다:
html
"이 아닙니다.-//W3O//DTD W3 HTML Strict 3.0//EN//
"-/W3C/DTD HTML 4.0 Transitional/EN
"HTML
"로 설정됩니다.http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd
"+//Silmaril//dtd html Pro v0r11 19970101//
"-//AS//DTD HTML 3.0 asWedit + extensions//
"-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//
"-//IETF//DTD HTML 2.0 Level 1//
"-//IETF//DTD HTML 2.0 Level 2//
"-//IETF//DTD HTML 2.0 Strict Level 1//
"-//IETF//DTD HTML 2.0 Strict Level 2//
"-//IETF//DTD HTML 2.0 Strict//
"-//IETF//DTD HTML 2.0//
"-//IETF//DTD HTML 2.1E//
"-//IETF//DTD HTML 3.0//
"-//IETF//DTD HTML 3.2 Final//
"-//IETF//DTD HTML 3.2//
"-//IETF//DTD HTML 3//
"-//IETF//DTD HTML Level 0//
"-//IETF//DTD HTML Level 1//
"-//IETF//DTD HTML Level 2//
"-//IETF//DTD HTML Level 3//
"-//IETF//DTD HTML Strict Level 0//
"-//IETF//DTD HTML Strict Level 1//
"-//IETF//DTD HTML Strict Level 2//
"-//IETF//DTD HTML Strict Level 3//
"-//IETF//DTD HTML Strict//
"-//IETF//DTD HTML//
"-//Metrius//DTD Metrius Presentational//
"-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//
"-//Microsoft//DTD Internet Explorer 2.0 HTML//
"-//Microsoft//DTD Internet Explorer 2.0 Tables//
"-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//
"-//Microsoft//DTD Internet Explorer 3.0 HTML//
"-//Microsoft//DTD Internet Explorer 3.0 Tables//
"-//Netscape Comm. Corp.//DTD HTML//
"-//Netscape Comm. Corp.//DTD Strict HTML//
"-//O'Reilly and Associates//DTD HTML 2.0//
"-//O'Reilly and Associates//DTD HTML Extended 1.0//
"-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//
"-//SQ//DTD HTML 2.0 HoTMetaL + extensions//
"-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//
"-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//
"-//Spyglass//DTD HTML 2.0 Extended//
"-//Sun Microsystems Corp.//DTD HotJava HTML//
"-//Sun Microsystems Corp.//DTD HotJava Strict HTML//
"-//W3C//DTD HTML 3 1995-03-24//
"-//W3C//DTD HTML 3.2 Draft//
"-//W3C//DTD HTML 3.2 Final//
"-//W3C//DTD HTML 3.2//
"-//W3C//DTD HTML 3.2S Draft//
"-//W3C//DTD HTML 4.01 Frameset//
"로 시작됩니다.-//W3C//DTD HTML 4.01 Transitional//
"로 시작됩니다.그렇지 않으면, 문서가 아닌 경우 iframe
srcdoc
문서, 그리고 파서가 모드를 변경할 수 없는 플래그가 false인
경우, DOCTYPE 토큰이 아래 목록의 조건 중 하나와 일치하면, 문서
를 제한된 쿼크 모드로 설정합니다:
-//W3C//DTD XHTML 1.0 Frameset//
"로 시작됩니다.-//W3C//DTD XHTML 1.0 Transitional//
"로 시작됩니다.-//W3C//DTD HTML 4.01 Frameset//
"로 시작됩니다.-//W3C//DTD HTML 4.01 Transitional//
"로 시작됩니다.시스템 식별자와 공용 식별자 문자열은 위에 제공된 값들과 ASCII 대소문자 구분 없는 방식으로 비교되어야 합니다. 시스템 식별자가 빈 문자열인 경우 위 조건에 대해 누락된 것으로 간주되지 않습니다.
문서가 아닌 경우 iframe
srcdoc
문서, 이 경우 파싱 오류가 발생합니다. 만약
파서가 모드를 변경할 수 없는 플래그가 false인
경우, 문서
를 쿼크 모드로
설정합니다.
사용자 에이전트가 "html 이전" 삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 다음과 같이 토큰을 처리해야 합니다:
파싱 오류. 토큰을 무시합니다.
토큰을 무시합니다.
토큰에 대한 요소를 생성하고 HTML 네임스페이스에
추가하며, 문서
를 의도한 부모로 설정합니다.
이를 문서
객체에 추가합니다. 이 요소를
열린 요소 스택에
넣습니다.
아래 "기타" 항목에 설명된 대로 행동합니다.
파싱 오류. 토큰을 무시합니다.
html
요소를
생성하고, 그 노드 문서를
문서
객체로 설정합니다. 이를 문서
객체에 추가합니다. 이 요소를 열린 요소
스택에 넣습니다.
문서 요소가 문서
객체에서 제거될 수 있습니다. 예를 들어, 스크립트에
의해 제거될 수 있으며, 이러한 경우에는 특별한 일이 발생하지 않으며, 다음 섹션에서 설명된 대로 콘텐츠는 계속해서 노드에 추가됩니다.
사용자 에이전트가 "head 이전" 삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 다음과 같이 토큰을 처리해야 합니다:
토큰을 무시합니다.
파싱 오류. 토큰을 무시합니다.
토큰에 대해 HTML 요소를 삽입합니다.
head
요소
포인터를 새로 생성된 head
요소로
설정합니다.
아래 "기타" 항목에 설명된 대로 행동합니다.
파싱 오류. 토큰을 무시합니다.
속성이 없는 "head" 시작 태그 토큰에 대해 HTML 요소를 삽입합니다.
head
요소 포인터를 새로 생성된 head
요소로
설정합니다.
현재 토큰을 다시 처리합니다.
사용자 에이전트가 "head" 삽입 모드의 규칙을 적용해야 할 때, 사용자 에이전트는 다음과 같이 토큰을 처리해야 합니다:
문자를 삽입합니다.
주석을 삽입합니다.
파싱 오류. 토큰을 무시합니다.
토큰에 대해 HTML 요소를 삽입합니다. 현재 노드를 열린 요소 스택에서 즉시 제거합니다.
토큰의 자체 종료 플래그가 설정되어 있는 경우 해당 플래그를 확인합니다.
토큰에 대해 HTML 요소를 삽입합니다. 현재 노드를 열린 요소 스택에서 즉시 제거합니다.
토큰의 자체 종료 플래그가 설정되어 있는 경우 해당 플래그를 확인합니다.
현재 활성 상태의 추측 HTML 파서가 null인 경우:
요소에 charset
속성이
있고, 해당 값에서 인코딩을 가져오는 것이
인코딩을 반환하며, 현재 신뢰도가 잠정적인 경우,
인코딩을 결과 인코딩으로 변경합니다.
그렇지 않으면, 해당 요소에 http-equiv
속성이 있고, 해당 속성의 값이 "Content-Type
"와 ASCII 대소문자 무시 비교로 일치하며, 요소에 content
속성이
있고, 그 값에서 meta
요소에서 문자 인코딩을 추출하는 알고리즘을 적용하여 반환된 인코딩이 있으며, 현재 확신이 잠정적인 경우, 추출된 인코딩으로 인코딩을 변경합니다.
추측 HTML 파서는 구현 복잡성을 줄이기 위해 문자 인코딩 선언을 추측적으로 적용하지 않습니다.
일반 RCDATA 요소 파싱 알고리즘을 따릅니다.
일반 원시 텍스트 요소 파싱 알고리즘을 따릅니다.
토큰에 대해 HTML 요소를 삽입합니다.
삽입 모드를 "in head noscript"로 전환합니다.
다음 단계들을 실행합니다:
adjusted insertion location을 노드를 삽입하기에 적합한 위치로 설정합니다.
토큰에 대해 요소를 생성하여 adjusted insertion location이 위치한 요소를 부모로 설정합니다.
해당 요소의 파서 문서를 Document
로 설정하고, 해당 요소의 force async를 false로
설정합니다.
이렇게 하면 스크립트가 외부에 있을 경우, 스크립트 내에서 document.write()
호출이 발생하더라도 문서를 날리지 않고 인라인으로 실행됩니다. 또한, 종료 태그를 볼 때까지 스크립트가 실행되지 않도록 방지합니다.
파서가 HTML 조각 파싱 알고리즘의 일부로 생성된 경우,
script
요소의 이미 시작됨을 true로 설정합니다. (조각 케이스)
파서가 document.write()
또는 document.writeln()
메서드를 통해 호출된 경우, 해당 script
요소의 이미 시작됨을 선택적으로 true로
설정할 수 있습니다. (예: 사용자 에이전트는 느린 네트워크 조건에서 삽입된 교차 출처 스크립트의 실행을 방지하거나, 페이지 로딩 시간이 이미 오래 걸린 경우 이 절을
사용하여 실행을 방지할 수 있습니다.)
새로 생성된 요소를 adjusted insertion location에 삽입합니다.
토크나이저를 스크립트 데이터 상태로 전환합니다.
현재 노드 (즉,
head
요소)를
열려있는 요소들의 스택에서 팝합니다.
"다른 경우" 항목에서 설명한 대로 동작합니다.
template start tag를 시작 태그로 지정합니다.
마커를 활성 서식 요소 목록의 끝에 삽입합니다.
프레임셋 가능 플래그를 "허용 안 됨"으로 설정합니다.
삽입 모드를 "template 내"로 전환합니다.
template 내"를 template 삽입 모드의 스택에 새로 추가하여 현재 template 삽입 모드로 만듭니다.
adjusted insertion location를 노드를 삽입하기 적절한 위치로 지정합니다.
intended parent를 adjusted insertion location가 있는 요소로 지정합니다.
document를 intended parent의 노드 문서로 지정합니다.
다음 중 하나라도 거짓이면:
shadowrootmode
가
none 상태가 아닐 경우;
해당 토큰에 대해 HTML 요소를 삽입합니다.
그렇지 않은 경우:
declarative shadow host element를 조정된 현재 노드로 지정합니다.
template를 외부 요소 삽입의 결과로 지정합니다. template start tag의 경우, HTML 네임스페이스와 true로 지정합니다.
mode를 template start tag의 shadowrootmode
속성 값으로 지정합니다.
clonable을 template start tag에 shadowrootclonable
속성이 있으면 true로, 그렇지 않으면 false로 지정합니다.
serializable을 template start tag에 shadowrootserializable
속성이 있으면 true로, 그렇지 않으면 false로 지정합니다.
delegatesFocus를 template start tag에 shadowrootdelegatesfocus
속성이 있으면 true로, 그렇지 않으면 false로 지정합니다.
declarative shadow host element가 shadow host인 경우, 조정된 삽입 위치에 요소를 삽입하고 template을 지정합니다.
그렇지 않은 경우:
shadow root를 연결합니다.
declarative shadow host element에 mode, clonable,
serializable, delegatesFocus를 설정하고 "named
"로 설정합니다.
예외가 발생하면 이를 캐치하여:
조정된 삽입 위치에 요소를 삽입하고 template을 지정합니다.
사용자 에이전트는 개발자 콘솔에 오류를 보고할 수 있습니다.
종료합니다.
shadow를 declarative shadow host element의 shadow root로 지정합니다.
shadow의 선언적을 true로 설정합니다.
template의 template 내용 속성을 shadow로 설정합니다.
shadow의 요소 내부에서 사용할 수 있음을 true로 설정합니다.
template 요소가 열려있는 요소들의 스택에 없으면, 이는 구문 오류입니다; 해당 토큰을 무시합니다.
그렇지 않으면 다음 단계들을 실행합니다:
열려있는 요소들의 스택에서 template 요소가 팝될 때까지 요소들을 팝합니다.
현재 template 삽입 모드를 template 삽입 모드의 스택에서 팝합니다.
삽입 모드를 적절히 재설정합니다.
구문 오류. 해당 토큰을 무시합니다.
현재 노드 (즉, head 요소)를 열려있는 요소들의 스택에서 팝합니다.
해당 토큰을 다시 처리합니다.
사용자 에이전트가 "in head noscript" 삽입 모드에 대한 규칙을 적용해야 할 때, 사용자는 다음과 같이 토큰을 처리해야 합니다:
구문 오류. 해당 토큰을 무시합니다.
현재 노드 (즉, noscript
요소)를
열려있는 요소들의 스택에서
팝합니다;
새로운 현재 노드는
head
요소가 됩니다.
"다른 경우" 항목에서 설명한 대로 동작합니다.
구문 오류. 해당 토큰을 무시합니다.
현재 노드 (즉, noscript
요소)를
열려있는 요소들의
스택에서 팝합니다;
새로운 현재 노드는
head
요소가
됩니다.
해당 토큰을 다시 처리합니다.
사용자 에이전트가 "head 이후" 삽입 모드의 규칙을 적용할 때, 사용자 에이전트는 다음과 같이 토큰을 처리해야 합니다:
문자를 삽입합니다.
주석을 삽입합니다.
구문 오류. 토큰을 무시합니다.
HTML 요소를 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
HTML 요소를 삽입합니다.
삽입 모드를 "in frameset"로 전환합니다.
head
요소 포인터가 가리키는 노드를 열린 요소 스택에 넣습니다.
규칙을 사용하여 토큰을 "in head" 삽입 모드로 처리합니다.
head
요소 포인터가 가리키는 노드를 열린 요소 스택에서 제거합니다. (이 시점에서 현재 노드가 아닐 수도 있습니다.)
head
요소 포인터는 이 시점에서 null일 수 없습니다.
아래 "기타" 항목에 설명된 대로 처리합니다.
구문 오류. 토큰을 무시합니다.
"body" 시작 태그 토큰에 대해 HTML 요소를 삽입합니다.
현재 토큰을 다시 처리합니다.
사용자 에이전트가 "in body" 삽입 모드에 대한 규칙을 적용해야 할 때, 사용자는 다음과 같이 토큰을 처리해야 합니다:
구문 오류. 해당 토큰을 무시합니다.
활성 포맷팅 요소들을 재구성합니다, 있는 경우.
토큰의 문자를 삽입합니다.
활성 포맷팅 요소들을 재구성합니다, 있는 경우.
토큰의 문자를 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
주석을 삽입합니다.
구문 오류. 해당 토큰을 무시합니다.
만약 열려있는 요소들의 스택에
template
요소가
있다면,
해당 토큰을 무시합니다.
그렇지 않으면, 토큰의 각 속성에 대해 해당 속성이 열려있는 요소들의 스택 맨 위 요소에 이미 존재하는지 확인합니다. 존재하지 않으면, 그 속성과 해당 값을 그 요소에 추가합니다.
만약 열려있는 요소들의 스택에
노드가 하나만 있거나, 스택의 두 번째 요소가 body
요소가 아니거나,
또는 스택에 template
요소가
있다면,
해당 토큰을 무시합니다. (fragment case 또는 스택에
template
요소가 있습니다.)
그렇지 않으면, frameset-ok 플래그를 "not
ok"로 설정한 후,
토큰의 각 속성에 대해 해당 속성이 스택의 두 번째 요소인 body
요소에
이미 존재하는지 확인합니다. 존재하지 않으면, 그 속성과 해당 값을 그 요소에 추가합니다.
만약 열려있는 요소들의 스택에
노드가 하나만 있거나, 스택의 두 번째 요소가 body
요소가
아니라면, 해당 토큰을 무시합니다. (fragment case 또는
스택에
template
요소가 있습니다.)
만약 frameset-ok 플래그가 "not ok"로 설정되어 있다면, 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
열려있는 요소들의 스택에서 두 번째 요소를 제거하고, 부모 노드가 있다면 그 부모 노드에서 제거합니다.
열려있는 요소들의
스택의
하단부터 루트 html
요소 바로
아래까지 있는 모든 노드를 팝합니다.
토큰에 대해 HTML 요소를 삽입합니다.
삽입 모드를 "in frameset"으로 전환합니다.
만약 템플릿 삽입 모드의 스택이 비어 있지 않다면, "in template" 삽입 모드의 규칙을 사용하여 토큰을 처리합니다.
그렇지 않으면, 다음 단계를 따릅니다:
만약 열려있는 요소들의 스택에
body
요소가 스코프 내에 존재하지 않는다면,
이는 구문 오류입니다; 해당 토큰을 무시합니다.
그렇지 않으면, 열려있는 요소들의
스택에
dd
요소,
dt
요소,
li
요소,
optgroup
요소,
option
요소,
p
요소,
rb
요소,
rp
요소,
rt
요소,
rtc
요소,
tbody
요소,
td
요소,
tfoot
요소,
th
요소,
thead
요소,
tr
요소,
body
요소,
또는 html
요소가 아닌 노드가
있다면,
이는 구문 오류입니다.
삽입 모드를 "after body"로 전환합니다.
만약 열려있는 요소들의 스택에
body
요소가 스코프 내에 존재하지 않는다면,
이는 구문 오류입니다; 해당 토큰을 무시합니다.
그렇지 않으면, 열려있는 요소들의
스택에
dd
요소,
dt
요소,
li
요소,
optgroup
요소,
option
요소,
p
요소,
rb
요소,
rp
요소,
rt
요소,
rtc
요소,
tbody
요소,
td
요소,
tfoot
요소,
th
요소,
thead
요소,
tr
요소,
body
요소,
또는 html
요소가 아닌 노드가
있다면,
이는 구문 오류입니다.
삽입 모드를 "after body"로 전환합니다.
해당 토큰을 다시 처리합니다.
만약 열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재한다면,
p
요소를 닫습니다.
토큰에 대해 HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재한다면,
p
요소를 닫습니다.
현재 노드가 태그 이름이 "h1", "h2", "h3", "h4", "h5", "h6" 중 하나인 HTML 요소라면, 이는 구문 오류입니다; 열려있는 요소들의 스택에서 현재 노드를 팝합니다.
HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재한다면,
p
요소를 닫습니다.
HTML 요소를 삽입합니다.
다음 토큰이 U+000A 라인 피드(LF) 문자 토큰이면, 해당 토큰을 무시하고 다음 토큰으로 넘어갑니다.
(이는 pre
블록의
시작 부분에서 줄 바꿈을 무시하는 편의를 제공합니다.)
frameset-ok 플래그를 "not ok"로 설정합니다.
form
요소 포인터가
null이 아니고,
열려있는 요소들의 스택에
template
요소가 없다면,
이는 구문 오류입니다; 해당 토큰을 무시합니다.
그렇지 않으면:
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재한다면,
p
요소를 닫습니다.
HTML 요소를 삽입하고,
열려있는 요소들의 스택에
template
요소가 없다면,
form
요소
포인터를
생성된 요소를 가리키도록 설정합니다.
다음 단계를 실행합니다:
frameset-ok 플래그를 "not ok"로 설정합니다.
node를 현재 노드(current node, 스택의 맨 아래 노드)로 초기화합니다.
루프: node가 li
요소인 경우,
다음 하위 단계를 실행합니다:
암시적
종료 태그 생성을 실행합니다.
단, li
요소는 제외합니다.
열려있는
요소들의 스택에서
li
요소가
팝될 때까지 요소들을 팝합니다.
아래의 완료 단계로 건너뜁니다.
node가 특수 카테고리에 속하지만,
address
,
div
,
또는 p
요소가 아니라면,
완료 단계로 건너뜁니다.
그렇지 않으면, node를 열려있는 요소들의 스택의 이전 항목으로 설정하고 루프 단계로 돌아갑니다.
완료: 열려있는
요소들의 스택에
p
요소가 버튼 스코프 내에 존재하면,
p
요소를
닫습니다.
마지막으로, 해당 토큰에 대한 HTML 요소를 삽입합니다.
다음 단계를 실행합니다:
frameset-ok 플래그를 "not ok"로 설정합니다.
node를 현재 노드(current node, 스택의 맨 아래 노드)로 초기화합니다.
루프: node가 dd
요소인 경우,
다음 하위 단계를 실행합니다:
암시적
종료 태그 생성을 실행합니다.
단, dd
요소는 제외합니다.
열려있는
요소들의 스택에서
dd
요소가
팝될 때까지 요소들을 팝합니다.
아래의 완료 단계로 건너뜁니다.
node가 dt
요소인 경우,
다음 하위 단계를 실행합니다:
암시적
종료 태그 생성을 실행합니다.
단, dt
요소는 제외합니다.
열려있는
요소들의 스택에서
dt
요소가
팝될 때까지 요소들을 팝합니다.
아래의 완료 단계로 건너뜁니다.
node가 특수 카테고리에 속하지만,
address
,
div
,
또는 p
요소가 아니라면,
완료 단계로 건너뜁니다.
그렇지 않으면, node를 열려있는 요소들의 스택의 이전 항목으로 설정하고 루프 단계로 돌아갑니다.
완료: 열려있는
요소들의 스택에
p
요소가 버튼 스코프 내에 존재하면,
p
요소를
닫습니다.
마지막으로, 해당 토큰에 대한 HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재하면,
p
요소를 닫습니다.
해당 토큰에 대한 HTML 요소를 삽입합니다.
토크나이저를 PLAINTEXT 상태로 전환합니다.
태그 이름이 "plaintext"인 시작 태그가 표시되면, 남은 모든 토큰은 문자 토큰(및 마지막 종료 파일 토큰)이 됩니다.
이는 토크나이저를 PLAINTEXT 상태에서
전환할 방법이 없기 때문입니다. 하지만 트리 빌더는 기존의 삽입 모드에 남아 있으므로,
해당 문자 토큰을 처리하는 동안 활성 포맷팅 요소를 재구성할 수 있습니다.
이는 파서가 plaintext
요소에 다른 요소를 삽입할 수
있음을 의미합니다.
열려있는 요소들의
스택에
button
요소가 스코프 내에 존재하면,
다음 하위 단계를 실행합니다:
암시적 종료 태그 생성을 실행합니다.
열려있는
요소들의 스택에서
button
요소가 팝될 때까지 요소들을 팝합니다.
활성 포맷팅 요소를 재구성합니다(있는 경우).
해당 토큰에 대한 HTML 요소를 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
열려있는 요소들의 스택에 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 스코프 내에 존재하지 않으면, 이는 구문 오류입니다. 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
암시적 종료 태그 생성을 실행합니다.
열려있는 요소들의 스택에서 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 팝될 때까지 요소들을 팝합니다.
열려있는 요소들의 스택에 template
요소가
없는 경우,
다음 하위 단계를 실행합니다:
form
요소
포인터가 가리키는
요소를 node로 설정하거나, 요소가 없으면 null로 설정합니다.
form
요소
포인터를 null로 설정합니다.
node가 null이거나 열려있는 요소들의 스택에 node가 스코프 내에 존재하지 않으면, 이는 구문 오류입니다. 반환하고 해당 토큰을 무시합니다.
암시적 종료 태그 생성을 실행합니다.
현재 노드가 node가 아니면, 이는 구문 오류입니다.
node를 열려있는 요소들의 스택에서 제거합니다.
열려있는 요소들의 스택에 template
요소가
있는 경우,
대신 다음 하위 단계를 실행합니다:
열려있는 요소들의
스택에
form
요소가 스코프 내에 존재하지 않으면,
이는 구문 오류입니다. 반환하고 해당 토큰을 무시합니다.
암시적 종료 태그 생성을 실행합니다.
열려있는 요소들의
스택에서
form
요소가 팝될
때까지 요소들을 팝합니다.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 존재하지 않으면,
이는 구문 오류입니다. 속성이 없는 "p" 시작 태그 토큰에 대한
HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
li
요소가 리스트 항목 스코프 내에 존재하지 않으면,
이는 구문 오류입니다. 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
암시적 종료 태그
생성을 실행합니다.
단, li
요소는
제외합니다.
열려있는 요소들의
스택에서
li
요소가 팝될 때까지
요소들을 팝합니다.
열려있는 요소들의 스택에 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 스코프 내에 존재하지 않으면, 이는 구문 오류입니다. 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
암시적 종료 태그 생성을 실행합니다. 단, 해당 토큰과 같은 태그 이름을 가진 HTML 요소는 제외합니다.
열려있는 요소들의 스택에서 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 팝될 때까지 요소들을 팝합니다.
열려있는 요소들의 스택에 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 스코프 내에 존재하지 않으면, 이는 구문 오류입니다. 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
암시적 종료 태그 생성을 실행합니다.
열려있는 요소들의 스택에서 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 팝될 때까지 요소들을 팝합니다.
깊게 숨을 쉬고, 아래의 "다른 종료 태그" 항목에서 설명한 대로 동작합니다.
활성
포맷팅 요소 목록에
마지막 마커 이후 또는 마커가 없으면 목록의
시작부터
a
요소가 포함되어 있으면, 이는 구문 오류입니다.
해당 토큰에 대해 adoption
agency 알고리즘을 실행한 다음,
그 요소를 활성 포맷팅 요소 목록과
열려있는 요소들의 스택에서
제거합니다.
(adoption agency 알고리즘이 이미 제거하지 않은 경우 해당 요소가 테이블 스코프 내에 있지 않기 때문일 수 있습니다.)
비준수 스트림 <a href="a">a<table><a href="b">b</table>x
에서,
첫 번째 a
요소는 두 번째 요소를 확인하면
닫히고,
"x" 문자는 "a"가 아닌 "b"에 대한 링크 안에 있게 됩니다. 이는 바깥쪽 a
요소가 테이블 스코프 내에 없기 때문에 (테이블의 시작 부분에 있는 일반적인 </a>
종료 태그는 바깥쪽
a
요소를 닫지 않음을 의미합니다). 그
결과,
두 개의 a
요소가 간접적으로 서로 중첩되게
됩니다 — 비준수 마크업은
파싱 시 종종 비준수 DOM을 생성하게 됩니다.
활성 포맷팅 요소를 재구성합니다.
해당 토큰에 대해 HTML 요소를 삽입하고, 해당 요소를 활성 포맷팅 요소 목록에 추가합니다.
활성 포맷팅 요소를 재구성합니다, 있는 경우.
HTML 요소를 삽입합니다. 해당 요소를 활성 포맷팅 요소 목록에 추가합니다.
활성 포맷팅 요소를 재구성합니다, 있는 경우.
열려있는 요소들의 스택에 nobr
요소가
스코프 내에 있는지 확인합니다.
만약 있다면, 이는 구문 오류입니다.
adoption agency
알고리즘을 해당 토큰에 대해 실행한 후,
다시 한 번 활성 포맷팅 요소를 재구성합니다, 있는 경우.
HTML 요소를 삽입합니다. 해당 요소를 활성 포맷팅 요소 목록에 추가합니다.
해당 토큰에 대해 adoption agency 알고리즘을 실행합니다.
활성 포맷팅 요소를 재구성합니다, 있는 경우.
HTML 요소를 삽입합니다.
마커를 활성 포맷팅 요소 목록의 끝에 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
열려있는 요소들의 스택에 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 스코프 내에 없으면, 이는 구문 오류입니다. 해당 토큰을 무시합니다.
그렇지 않으면, 다음 단계를 실행합니다:
암시적 종료 태그 생성을 실행합니다.
열려있는 요소들의 스택에서 해당 토큰과 같은 태그 이름을 가진 HTML 요소가 팝될 때까지 요소들을 팝합니다.
문서
가 quirks 모드로 설정되어 있지 않고,
열려있는 요소들의 스택에 p
요소가 버튼 스코프 내에 있으면,
p
요소를 닫습니다.
HTML 요소를 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
구문 오류. 토큰에서 속성을 제거하고, 다음 항목에서 설명한 대로 동작합니다. 즉, 실제로는 종료 태그 토큰이지만, 속성이 없는 "br" 시작 태그 토큰처럼 동작합니다.
활성 포맷팅 요소를 재구성합니다, 있는 경우.
HTML 요소를 삽입합니다. 현재 노드를 즉시 열려있는 요소들의 스택에서 팝합니다.
토큰의 self-closing flag를 인지합니다, 설정된 경우.
frameset-ok 플래그를 "not ok"로 설정합니다.
활성 포맷팅 요소를 재구성, 있는 경우.
HTML 요소를 삽입합니다. 즉시 현재 노드를 열려있는 요소들의 스택에서 팝합니다.
토큰의 자체 닫힘 플래그를 확인합니다, 설정된 경우.
토큰에 "type"이라는 이름의 속성이 없거나, 있더라도 그 속성의 값이 문자열 "hidden
"과
ASCII 대소문자 구분 없이 일치하지 않으면,
frameset-ok 플래그를 "not ok"로
설정합니다.
HTML 요소를 삽입합니다. 즉시 현재 노드를 열려있는 요소들의 스택에서 팝합니다.
토큰의 자체 닫힘 플래그를 확인합니다, 설정된 경우.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 있으면, p
요소를 닫습니다.
HTML 요소를 삽입합니다. 즉시 현재 노드를 열려있는 요소들의 스택에서 팝합니다.
토큰의 자체 닫힘 플래그를 확인합니다, 설정된 경우.
frameset-ok 플래그를 "not ok"로 설정합니다.
구문 오류. 토큰의 태그 이름을 "img"로 변경하고 다시 처리합니다. (묻지 마세요.)
다음 단계를 실행합니다:
HTML 요소를 삽입합니다.
다음 토큰이
U+000A 라인 피드(LF) 문자 토큰이면, 해당 토큰을 무시하고 다음 토큰으로 이동합니다.
(textarea
요소의 시작 부분에서 줄바꿈이 작성 편의를 위해 무시됩니다.)
토크나이저를 RCDATA 상태로 전환합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
삽입 모드를 "텍스트"로 전환합니다.
열려있는 요소들의 스택에
p
요소가 버튼 스코프 내에 있으면, p
요소를 닫습니다.
활성 포맷팅 요소를 재구성, 있는 경우.
frameset-ok 플래그를 "not ok"로 설정합니다.
일반 원시 텍스트 요소 구문 분석 알고리즘을 따릅니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
일반 원시 텍스트 요소 구문 분석 알고리즘을 따릅니다.
일반 원시 텍스트 요소 구문 분석 알고리즘을 따릅니다.
활성 포맷팅 요소를 재구성, 있는 경우.
HTML 요소를 삽입합니다.
frameset-ok 플래그를 "not ok"로 설정합니다.
삽입 모드가 "테이블 안", "캡션 안", "테이블 본문 안", "행 안", 또는 "셀 안" 중 하나이면, 삽입 모드를 "테이블 안 선택 모드"로 전환합니다. 그렇지 않으면 삽입 모드를 "선택 모드"로 전환합니다.
현재 노드가
option
요소인 경우,
열려있는 요소들의 스택에서
현재 노드를 팝합니다.
활성 포맷팅 요소를 재구성, 있는 경우.
HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
ruby
요소가
스코프 내에 있으면,
암시적 종료 태그 생성을
실행합니다.
현재 노드가 이제
ruby
요소가 아니면, 이는
구문 오류입니다.
HTML 요소를 삽입합니다.
열려있는 요소들의 스택에
ruby
요소가
스코프 내에 있으면,
암시적 종료 태그 생성을
실행합니다,
단 rtc
요소는 제외합니다.
현재 노드가 이제
rtc
요소 또는
ruby
요소가 아니면,
이는 구문 오류입니다.
HTML 요소를 삽입합니다.
활성 포맷팅 요소를 재구성, 있는 경우.
MathML 속성 조정을 실행합니다. (이것은 MathML 속성이 모두 소문자로 되어 있지 않은 경우를 수정합니다.)
외부 속성 조정을 실행합니다. (특히 XLink와 같은 네임스페이스 속성 사용을 수정합니다.)
외부 요소를 삽입합니다, MathML 네임스페이스와 거짓을 사용합니다.
토큰에 자체 닫힘 플래그가 설정되어 있으면, 현재 노드를 열려있는 요소들의 스택에서 팝하고, 토큰의 자체 닫힘 플래그를 확인합니다.
활성 포맷팅 요소를 재구성, 있는 경우.
SVG 속성 조정을 실행합니다. (이것은 SVG 속성이 모두 소문자로 되어 있지 않은 경우를 수정합니다.)
외부 속성 조정을 실행합니다. (특히 SVG에서 XLink와 같은 네임스페이스 속성 사용을 수정합니다.)
외부 요소를 삽입합니다, SVG 네임스페이스와 거짓을 사용합니다.
토큰에 자체 닫힘 플래그가 설정되어 있으면, 현재 노드를 열려있는 요소들의 스택에서 팝하고, 토큰의 자체 닫힘 플래그를 확인합니다.
구문 오류. 해당 토큰을 무시합니다.
활성 포맷팅 요소를 재구성, 있는 경우.
HTML 요소를 삽입합니다.
이 요소는 일반 요소가 됩니다.
단 한 가지 예외가 있습니다: 스크립팅 플래그가 비활성화된 경우,
이 요소는 noscript
요소일 수도
있습니다.
다음 단계를 실행합니다:
현재 노드 (스택의 맨 아래 노드)를 node로 초기화합니다.
루프: node가 토큰과 동일한 태그 이름을 가진 HTML 요소이면:
암시적 종료 태그 생성을 실행합니다, 단 토큰과 동일한 태그 이름을 가진 HTML 요소는 제외합니다.
현재 노드에서 node까지 모든 노드를 팝합니다, node를 포함하여, 그런 다음 이러한 단계를 중지합니다.
열려있는 요소들의 스택의 이전 항목을 node로 설정합니다.
루프 레이블이 있는 단계로 돌아갑니다.
위의 단계에서 사용자 에이전트가 p
요소를 닫아야 한다고 말할 때,
이는 사용자 에이전트가 다음 단계를 실행해야 함을 의미합니다:
암시적 종료 태그 생성,
p
요소를 제외하고 생성합니다.
입양 기관 알고리즘은 실행되는 토큰 token을 인수로 받아 다음 단계를 따릅니다:
subject를 token의 태그 이름으로 설정합니다.
현재 노드가 태그 이름이 subject인 HTML 요소이며, 현재 노드가 활성 포맷 요소 목록에 포함되어 있지 않다면, 현재 노드를 열린 요소의 스택에서 팝하고 돌아갑니다.
outerLoopCounter를 0으로 설정합니다.
무한 반복:
outerLoopCounter가 8 이상이면, 돌아갑니다.
outerLoopCounter를 1 증가시킵니다.
formattingElement를 다음과 같은 조건을 만족하는 활성 포맷 요소 목록의 마지막 요소로 설정합니다:
그러한 요소가 없다면, 돌아가서 위의 "다른 종료 태그" 항목에서 설명한 대로 대신 처리합니다.
formattingElement가 열린 요소의 스택에 포함되어 있지 않다면, 이는 구문 오류입니다; 목록에서 해당 요소를 제거하고 돌아갑니다.
formattingElement가 열린 요소의 스택에 포함되어 있지만, 요소가 스코프에 포함되어 있지 않다면, 이는 구문 오류입니다; 돌아갑니다.
formattingElement가 현재 노드가 아닌 경우, 이는 구문 오류입니다. (하지만 돌아가지는 않습니다.)
furthestBlock를 formattingElement 아래에 있는 열린 요소의 스택에서 가장 상위에 있는 노드로 설정하고, 이 요소는 특수 범주에 속합니다. 이러한 요소가 없을 수도 있습니다.
만약 furthestBlock이 없다면, 사용자 에이전트는 먼저 열린 요소의 스택에서 현재 노드부터 formattingElement을 포함한 모든 노드를 팝한 다음, formattingElement을 활성 포맷 요소 목록에서 제거하고 마지막으로 돌아갑니다.
commonAncestor를 formattingElement 위에 있는 열린 요소의 스택의 요소로 설정합니다.
북마크가 formattingElement의 위치를 활성 포맷 요소 목록에서 요소 양쪽의 위치와 비교하여 기록합니다.
node와 lastNode를 furthestBlock으로 설정합니다.
innerLoopCounter를 0으로 설정합니다.
무한 반복:
innerLoopCounter를 1 증가시킵니다.
node를 열린 요소의 스택에서 node 위에 있는 요소로 설정하거나, node가 더 이상 열린 요소의 스택에 포함되어 있지 않은 경우(예: 이 알고리즘에 의해 제거되었기 때문에), node가 제거되기 전에 열린 요소의 스택에서 node 위에 있던 요소로 설정합니다.
node가 formattingElement인 경우, 중단합니다.
innerLoopCounter가 3보다 크고 node가 활성 포맷 요소 목록에 포함되어 있다면, node를 활성 포맷 요소 목록에서 제거합니다.
node가 활성 포맷 요소 목록에 포함되어 있지 않다면, node를 열린 요소의 스택에서 제거하고 계속 진행합니다.
요소 node가 생성된 토큰에 대해, 토큰에 대한 요소 생성을 HTML 네임스페이스에서 실행하고, commonAncestor를 의도된 부모로 설정합니다. 활성 포맷 요소 목록에서 node의 항목을 새 요소로 교체하고, 열린 요소의 스택에서 node의 항목을 새 요소로 교체한 다음, node를 새 요소로 설정합니다.
lastNode가 furthestBlock인 경우, 앞서 언급한 북마크를 활성 포맷 요소 목록에서 새 node 바로 뒤로 이동합니다.
마지막 노드를 node에 추가합니다.
lastNode를 node로 설정합니다.
이전 단계에서 최종적으로 생성된 lastNode를 노드를 삽입할 적절한 위치에 삽입하지만, commonAncestor를 오버라이드 대상으로 사용합니다.
토큰에 대한 요소 생성을 formattingElement가 생성된 토큰에 대해 실행하며, furthestBlock를 의도된 부모로 설정하여 HTML 네임스페이스에서 생성합니다.
furthestBlock의 모든 자식 노드를 이전 단계에서 생성된 요소에 추가합니다.
그 새 요소를 furthestBlock에 추가합니다.
formattingElement를 활성 포맷 요소 목록에서 제거하고, 앞서 언급한 북마크 위치에 새 요소를 활성 포맷 요소 목록에 삽입합니다.
formattingElement를 열린 요소의 스택에서 제거하고, 새 요소를 열린 요소의 스택에서 furthestBlock 바로 아래에 삽입합니다.
이 알고리즘의 이름인 "입양 기관 알고리즘"은 요소가 부모를 변경하게 되는 방식을 나타내며, 중첩 오류 콘텐츠를 처리하기 위한 다른 가능한 알고리즘과 대조됩니다.
사용자 에이전트가 "텍스트" 삽입 모드 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
토큰의 문자를 삽입합니다.
이것은 U+0000 NULL 문자가 될 수 없습니다; 토크나이저는 이를 U+FFFD REPLACEMENT CHARACTER로 변환합니다.
활성 추측 HTML 파서가 null이고 JavaScript 실행 컨텍스트 스택이 비어 있는 경우, 마이크로태스크 체크포인트를 수행합니다.
script를 현재 노드(스크립트
요소일 것입니다)로
설정합니다.
old insertion point를 현재 삽입 지점과 동일한 값으로 설정합니다. 삽입 지점을 다음 입력 문자 바로 앞에 설정합니다.
파서의 스크립트 중첩 수준을 1 증가시킵니다.
활성 추측 HTML 파서가 null이면, 스크립트 요소 script를 준비합니다. 이는 스크립트 실행을 유발할 수 있으며, 이로 인해 토크나이저에 새 문자가 삽입될 수 있으며, 토크나이저가 더 많은 토큰을 출력하게 되어 재귀적으로 파서를 호출할 수 있습니다.
파서의 스크립트 중첩 수준을 1 감소시킵니다. 파서의 스크립트 중첩 수준이 0이 되면 파서 일시 중지 플래그를 false로 설정합니다.
insertion point가 old insertion point의 값을 갖도록 설정합니다. (다시 말해, 삽입 지점을 이전 값으로 복원합니다. 이 값은 "정의되지 않음" 값일 수 있습니다.)
이 시점에서 대기 중인 파싱 차단 스크립트가 null이 아닌 경우:
파서 일시 중지 플래그를 true로 설정하고, 중첩된 토크나이저 호출의 처리를 중단하며 호출자에게 제어를 반환합니다. (호출자가 "외부" 트리 구성 단계로 돌아오면 토크나이저가 다시 시작됩니다.)
이 특정 파서의 트리 구성 단계는 재귀적으로 호출되고 있으며, 예를 들어 document.write()
호출에서 유발될 수 있습니다.
대기 중인 파싱 차단 스크립트가 null이 아닐 때:
the script를 대기 중인 파싱 차단 스크립트로 설정합니다.
대기 중인 파싱 차단 스크립트를 null로 설정합니다.
추측 HTML 파서를 시작합니다.
이 HTML 파서의 토크나이저를 차단합니다. 이로 인해 이벤트 루프가 작업을 실행하여 토크나이저를 호출할 수 없게 됩니다.
만약 파서의 문서
가 스크립트를 차단하는 스타일
시트를 가지고 있거나, the script의 파서 실행 준비 완료가 false인 경우:
이벤트 루프를 회전하여
파서의 문서
가 스크립트를 차단하는 스타일
시트가 없고, the script의 파서 실행 준비 완료가 true가 될 때까지
기다립니다.
이 동안 파서가 중단되었다면, 반환합니다.
예를 들어, 이벤트 루프를 회전하는 동안 문서
가 파괴되었거나,
document.open()
메서드가 문서
에서 호출되었다면 이
상황이 발생할 수 있습니다.
추측 HTML 파서를 중지합니다.
파서의 스크립트 중첩 수준을 1 증가시킵니다(이전 단계에서 0이어야 하므로 이 단계에서 1로 설정됩니다).
스크립트 요소를 실행합니다 the script.
파서의 스크립트 중첩 수준을 1 감소시킵니다. 파서의 스크립트 중첩 수준이 0(이 시점에서는 항상 0이어야 함)인 경우, 파서 일시 중지 플래그를 false로 설정합니다.
삽입 지점을 다시 undefined로 설정합니다.
사용자 에이전트가 "테이블 내" 삽입 모드 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
table
, tbody
, template
,
tfoot
, thead
또는 tr
요소인 경우
pending table character tokens을 빈 토큰 목록으로 설정합니다.
주석을 삽입합니다.
구문 오류. 토큰을 무시합니다.
스택을 테이블 컨텍스트로 되돌립니다. (아래 참조.)
마커를 활성 포맷팅 요소 목록의 끝에 삽입합니다.
토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "캡션 내"로 전환합니다.
스택을 테이블 컨텍스트로 되돌립니다. (아래 참조.)
토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "컬럼 그룹 내"로 전환합니다.
스택을 테이블 컨텍스트로 되돌립니다. (아래 참조.)
속성이 없는 "colgroup" 시작 태그 토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "컬럼 그룹 내"로 전환합니다.
현재 토큰을 다시 처리합니다.
스택을 테이블 컨텍스트로 되돌립니다. (아래 참조.)
토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "테이블 본문 내"로 전환합니다.
스택을 테이블 컨텍스트로 되돌립니다. (아래 참조.)
속성이 없는 "tbody" 시작 태그 토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "테이블 본문 내"로 전환합니다.
현재 토큰을 다시 처리합니다.
만약 열린 요소의 스택에
table
요소가 테이블 범위에
없다면, 토큰을 무시합니다.
그 외의 경우:
이 스택에서 table
요소가
스택에서 팝될 때까지 요소를 팝합니다.
삽입 모드를 적절하게 재설정합니다.
토큰을 다시 처리합니다.
만약 열린 요소의
스택에 table
요소가 테이블 범위에
없다면, 이는 구문 오류입니다. 토큰을 무시합니다.
그 외의 경우:
이 스택에서 table
요소가
스택에서 팝될 때까지 요소를 팝합니다.
삽입 모드를 적절하게 재설정합니다.
구문 오류. 토큰을 무시합니다.
만약 토큰에 "type"이라는 이름의 속성이 없거나, 있더라도 그 속성의 값이 문자열 "hidden
"과 ASCII 대소문자 구분 없음과 일치하지 않는다면: 아래의 "기타" 항목에 설명된 대로
행동합니다.
그 외의 경우:
토큰에 대해 HTML 요소를 삽입합니다.
토큰의 자체 닫힘 플래그가 설정되어 있으면, 토큰의 자체 닫힘 플래그를 확인합니다.
만약 열린 요소의
스택에 template
요소가 있거나, form
요소
포인터가 null이 아니라면, 토큰을
무시합니다.
그 외의 경우:
토큰에 대해 HTML 요소를
삽입하고, form
요소 포인터를 생성된 요소를 가리키도록
설정합니다.
구문 오류. 양육자 모드를 활성화하고, 규칙을 사용하여 "본문 내" 삽입 모드에서 토큰을 처리한 다음, 양육자 모드를 비활성화합니다.
위 단계에서 UA가 스택을 테이블 컨텍스트로 되돌리도록 요구할 때, 이는 현재 노드가 table
, template
, 또는
html
요소가 아니면, 열린 요소의 스택에서 요소를
팝해야 함을 의미합니다.
이는 테이블 범위 내에 요소가 있는지 단계에서 사용하는 것과 동일한 요소 목록입니다.
현재 노드가 이 과정 후에 html
요소가 되는 것은 프래그먼트 사례입니다.
사용자 에이전트가 "테이블 텍스트" 삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. 토큰을 무시합니다.
문자 토큰을 보류 중인 테이블 문자 토큰 리스트에 추가합니다.
보류 중인 테이블 문자 토큰 리스트에 ASCII 공백이 아닌 문자 토큰이 포함되어 있으면, 이는 구문 오류입니다. "테이블 안" 삽입 모드의 "그 외의 모든 경우" 항목에 주어진 규칙을 사용하여 보류 중인 테이블 문자 토큰 리스트의 문자 토큰을 다시 처리합니다.
그렇지 않은 경우, 보류 중인 테이블 문자 토큰 리스트에 있는 문자를 삽입합니다.
사용자 에이전트가 "캡션 삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
만약 열린 요소의 스택에 caption
요소가 테이블 범위에 없다면, 이는
구문 오류입니다. 토큰을 무시합니다. (단편 사례)
그렇지 않으면:
암시된 종료 태그를 생성합니다.
이제 현재 노드가 caption
요소가
아니라면, 이는 구문 오류입니다.
이 스택에서 caption
요소가
스택에서 팝될 때까지 요소들을 팝합니다.
만약 열린 요소의 스택에 caption
요소가 테이블 범위에 없다면,
이는 구문 오류입니다. 토큰을 무시합니다. (단편 사례)
그렇지 않으면:
암시된 종료 태그를 생성합니다.
이제 현재 노드가 caption
요소가
아니라면, 이는 구문 오류입니다.
이 스택에서 caption
요소가
스택에서 팝될 때까지 요소들을 팝합니다.
토큰을 다시 처리합니다.
구문 오류. 토큰을 무시합니다.
사용자 에이전트가 "열 그룹 안" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
문자를 삽입합니다.
주석을 삽입합니다.
구문 오류. 토큰을 무시합니다.
토큰에 대해 HTML 요소를 삽입합니다. 즉시 현재 노드를 열린 요소의 스택에서 팝합니다.
토큰의 자체 종료 플래그가 설정된 경우 자체 종료 플래그를 확인합니다.
구문 오류. 토큰을 무시합니다.
만약 현재 노드가 colgroup
요소가 아니라면, 이는 구문 오류입니다. 토큰을 무시합니다.
그렇지 않으면, 열린 요소의 스택에서 현재 노드를 팝합니다.
삽입 모드를 "테이블 안"으로 전환합니다.
토큰을 다시 처리합니다.
사용자 에이전트가 "테이블 본문 안" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
스택을 테이블 본문 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "행 안"으로 전환합니다.
스택을 테이블 본문 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
속성이 없는 "tr" 시작 태그 토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "행 안"으로 전환합니다.
현재 토큰을 다시 처리합니다.
만약 열린 요소의 스택에 토큰과 동일한 태그 이름을 가진 HTML 요소가 테이블 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다.
그렇지 않으면:
스택을 테이블 본문 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
만약 열린 요소의 스택에
tbody
, thead
, 또는 tfoot
요소가 테이블 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다.
그렇지 않으면:
스택을 테이블 본문 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
현재 노드를 열린 요소의 스택에서 팝합니다. 삽입 모드를 "테이블 안"으로 전환합니다.
토큰을 다시 처리합니다.
구문 오류. 토큰을 무시합니다.
위의 단계에서 사용자 에이전트가 스택을 테이블 본문 컨텍스트로 초기화해야 한다는 것은, 현재 노드가 tbody
, tfoot
, thead
, template
, 또는 html
요소가 아닐 때, 열린 요소의 스택에서 요소들을 팝해야 함을
의미합니다.
이 과정 후에 현재 노드가 html
요소가 되는 경우는 프래그먼트 케이스입니다.
사용자 에이전트가 "행 안" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
스택을 테이블 행 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
토큰에 대해 HTML 요소를 삽입한 다음, 삽입 모드를 "셀 안"으로 전환합니다.
마커를 활성 서식 지정 요소 목록의 끝에 삽입합니다.
만약 열린 요소의 스택에
tr
요소가 테이블 스코프에 없다면, 이는 구문
오류이며, 토큰을 무시합니다.
그렇지 않으면:
스택을 테이블 행 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
현재 노드 (이는 tr
요소일 것입니다)를 열린 요소의 스택에서 팝합니다. 삽입
모드를 "테이블 본문 안"으로 전환합니다.
만약 열린 요소의 스택에
tr
요소가 테이블 스코프에 없다면, 이는 구문
오류이며, 토큰을 무시합니다.
그렇지 않으면:
스택을 테이블 행 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
현재 노드 (이는 tr
요소일 것입니다)를 열린 요소의 스택에서 팝합니다. 삽입
모드를 "테이블 본문 안"으로 전환합니다.
토큰을 다시 처리합니다.
만약 열린 요소의 스택에 토큰과 동일한 태그 이름을 가진 HTML 요소가 테이블 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다.
만약 열린 요소의 스택에
tr
요소가 테이블 스코프에 없다면, 토큰을 무시합니다.
그렇지 않으면:
스택을 테이블 행 컨텍스트로 초기화합니다. (아래를 참조하십시오.)
현재 노드 (이는 tr
요소일 것입니다)를 열린 요소의 스택에서 팝합니다. 삽입
모드를 "테이블 본문 안"으로 전환합니다.
토큰을 다시 처리합니다.
구문 오류. 토큰을 무시합니다.
위의 단계에서 사용자 에이전트가 스택을 테이블 행 컨텍스트로 초기화해야 한다는 것은, 현재 노드가 tr
, template
, 또는 html
요소가 아닐 때, 열린 요소의 스택에서 요소들을 팝해야 함을
의미합니다.
이 과정 후에 현재 노드가 html
요소가 되는 경우는 프래그먼트 케이스입니다.
사용자 에이전트가 "셀 안" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
만약 열린 요소의 스택에 토큰과 동일한 태그 이름을 가진 HTML 요소가 테이블 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다.
그렇지 않으면:
암시적 종료 태그를 생성합니다.
이제 현재 노드가 토큰과 동일한 태그 이름을 가진 HTML 요소가 아니라면, 이는 구문 오류입니다.
토큰과 동일한 태그 이름을 가진 HTML 요소가 스택에서 팝될 때까지 열린 요소의 스택에서 요소들을 팝합니다.
확인:
열린 요소의 스택이 테이블 스코프에
td
또는 th
요소를 가지고 있습니다.
셀을 닫습니다 (아래 참조) 그리고 토큰을 다시 처리합니다.
구문 오류. 토큰을 무시합니다.
만약 열린 요소의 스택에 토큰과 동일한 태그 이름을 가진 HTML 요소가 테이블 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다.
그렇지 않으면, 셀을 닫습니다 (아래 참조) 그리고 토큰을 다시 처리합니다.
위의 단계에서 셀을 닫는다고 할 때, 이는 다음 알고리즘을 실행함을 의미합니다:
암시적 종료 태그를 생성합니다.
열린 요소의 스택은 td
요소와 th
요소를 동시에 테이블 범위 내에 가질 수
없으며, 셀을 닫는 알고리즘이 호출될 때 이들 요소가 모두 없어서는 안 됩니다.
사용자 에이전트가 "선택 안" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. 토큰을 무시합니다.
토큰의 문자를 삽입합니다.
주석을 삽입합니다.
구문 오류. 토큰을 무시합니다.
만약 현재 노드가 option
요소라면, 열린
요소의 스택에서 그 노드를 팝합니다.
만약 현재 노드가 option
요소라면, 열린
요소의 스택에서 그 노드를 팝합니다.
만약 현재 노드가 optgroup
요소라면, 열린 요소의 스택에서 그 노드를 팝합니다.
토큰에 대한 HTML 요소를 삽입합니다. 즉시 현재 노드를 열린 요소의 스택에서 팝합니다.
토큰의 셀프 클로징 플래그가 설정된 경우, 이를 인식합니다.
먼저, 현재 노드가 option
요소이고, 열린
요소의 스택에서 바로 앞에 있는 노드가 optgroup
요소라면, 열린 요소의 스택에서 현재 노드를 팝합니다.
만약 현재 노드가 optgroup
요소라면, 열린 요소의 스택에서 그 노드를 팝합니다. 그렇지 않으면, 이는 구문 오류이며, 토큰을 무시합니다.
만약 현재 노드가 option
요소라면, 열린
요소의 스택에서 그 노드를 팝합니다. 그렇지 않으면, 이는 구문
오류이며, 토큰을 무시합니다.
만약 열린 요소의 스택에
select
요소가 선택 스코프에 없다면, 이는 구문 오류이며, 토큰을 무시합니다. (단편 케이스)
그렇지 않으면:
스택에서 select
요소가
팝될 때까지 열린 요소의
스택에서 요소들을 팝합니다.
삽입 모드를 적절히 재설정합니다.
만약 열린 요소의 스택에
select
요소가 선택 스코프에 없다면, 토큰을 무시합니다. (단편 케이스)
그렇지 않으면:
스택에서 select
요소가 팝될 때까지 열린 요소의
스택에서 요소들을 팝합니다.
삽입 모드를 적절히 재설정합니다.
이것은 종료 태그로 처리됩니다.
만약 열린 요소의 스택에
select
요소가 선택 스코프에 없다면, 토큰을 무시합니다. (단편 케이스)
그렇지 않으면:
스택에서 select
요소가 팝될 때까지 열린 요소의
스택에서 요소들을 팝합니다.
삽입 모드를 적절히 재설정합니다.
토큰을 다시 처리합니다.
구문 오류. 토큰을 무시합니다.
사용자 에이전트가 "테이블 안에서 선택" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
열린 요소의 스택에서
select
요소가 팝될 때까지 요소를 팝합니다.
삽입 모드를 적절히 재설정합니다.
토큰을 다시 처리합니다.
만약 열린 요소의 스택에 그 토큰과 동일한 태그 이름을 가진 테이블 스코프 내의 요소가 없다면, 토큰을 무시합니다.
그렇지 않으면:
열린 요소의 스택에서
select
요소가 팝될 때까지 요소를 팝합니다.
삽입 모드를 적절히 재설정합니다.
토큰을 다시 처리합니다.
사용자 에이전트가 "템플릿 내" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
토큰을 "본문 삽입 모드"의 규칙을 사용하여 처리합니다.
토큰을 "헤드 삽입 모드"의 규칙을 사용하여 처리합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
구문 오류. 토큰을 무시합니다.
템플릿
요소가 열린 요소의 스택에 없다면,
파싱을 중지합니다. (프래그먼트 케이스)
그렇지 않으면, 구문 오류입니다.
열린 요소의 스택에서 템플릿
요소가
팝될 때까지 요소를 팝합니다.
현재 템플릿 삽입 모드를 템플릿 삽입 모드 스택에서 팝합니다.
삽입 모드를 적절히 재설정합니다.
토큰을 다시 처리합니다.
사용자 에이전트가 "본문 이후" 삽입 모드삽입 모드" 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
토큰을 "본문 삽입 모드"의 규칙을 사용하여 처리합니다.
구문 오류. 토큰을 무시합니다.
토큰을 "본문 삽입 모드"의 규칙을 사용하여 처리합니다.
파서가 HTML 조각 파싱 알고리즘의 일부로 생성된 경우, 이는 구문 오류입니다. 토큰을 무시합니다. (프래그먼트 케이스)
파싱을 중지합니다.
사용자 에이전트가 "frameset 삽입 모드"insertion mode의 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. 토큰을 무시합니다.
현재 노드가 루트 html
요소라면, 이는 구문 오류입니다. 토큰을 무시하십시오. (프래그먼트 케이스)
그렇지 않은 경우, 열린 요소의 스택에서 현재 노드를 제거합니다.
파서가 HTML 프래그먼트 파싱 알고리즘의 일부로 생성된 것이 아니고(프래그먼트 케이스), 현재 노드가 더 이상 frameset
요소가 아니라면, 삽입 모드를 "after
frameset"로 전환합니다.
HTML 요소를 삽입합니다. 열린 요소의 스택에서 현재 노드를 즉시 제거합니다.
토큰의 자체 종료 플래그를 확인합니다(설정된 경우).
현재 노드가 루트 html
요소가 아니라면, 이는
구문 오류입니다.
구문 오류. 토큰을 무시합니다.
사용자 에이전트가 "프레임셋 이후" 삽입 모드의 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. 토큰을 무시합니다.
삽입 모드를 "프레임셋 이후 이후"로 전환합니다.
구문 오류. 토큰을 무시합니다.
사용자 에이전트가 "본문 이후 이후" 삽입 모드의 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
사용자 에이전트가 "프레임셋 이후 이후" 삽입 모드"의 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. 토큰을 무시합니다.
사용자 에이전트가 외부 콘텐츠에서 토큰을 파싱하는 규칙을 적용해야 할 때, 사용자 에이전트는 토큰을 다음과 같이 처리해야 합니다:
구문 오류. U+FFFD 대체 문자를 삽입합니다.
frameset-ok 플래그를 "허용하지 않음"으로 설정합니다.
구문 오류. 토큰을 무시합니다.
현재 노드가 MathML 텍스트 통합 지점이거나, HTML 통합 지점이거나, HTML 네임스페이스에 있는 요소가 될 때까지 열린 요소의 스택에서 요소를 팝합니다.
HTML 콘텐츠의 현재 삽입 모드와 관련된 규칙에 따라 토큰을 다시 처리합니다.
조정된 현재 노드가 MathML 네임스페이스에 있는 요소인 경우, 토큰의 MathML 어트리뷰트를 조정합니다. (이렇게 하면 MathML 어트리뷰트의 대소문자가 일치하지 않는 문제를 수정합니다.)
조정된 현재 노드가 SVG 네임스페이스에 있는 요소이고, 토큰의 태그 이름이 다음 표의 첫 번째 열에 있는 경우, 태그 이름을 두 번째 열에 있는 이름으로 변경합니다. (이렇게 하면 SVG 요소의 대소문자가 일치하지 않는 문제를 수정합니다.)
태그 이름 | 요소 이름 |
---|---|
altglyph
| altGlyph
|
altglyphdef
| altGlyphDef
|
altglyphitem
| altGlyphItem
|
animatecolor
| animateColor
|
animatemotion
| animateMotion
|
animatetransform
| animateTransform
|
clippath
| clipPath
|
feblend
| feBlend
|
fecolormatrix
| feColorMatrix
|
fecomponenttransfer
| feComponentTransfer
|
fecomposite
| feComposite
|
feconvolvematrix
| feConvolveMatrix
|
fediffuselighting
| feDiffuseLighting
|
fedisplacementmap
| feDisplacementMap
|
fedistantlight
| feDistantLight
|
fedropshadow
| feDropShadow
|
feflood
| feFlood
|
fefunca
| feFuncA
|
fefuncb
| feFuncB
|
fefuncg
| feFuncG
|
fefuncr
| feFuncR
|
fegaussianblur
| feGaussianBlur
|
feimage
| feImage
|
femerge
| feMerge
|
femergenode
| feMergeNode
|
femorphology
| feMorphology
|
feoffset
| feOffset
|
fepointlight
| fePointLight
|
fespecularlighting
| feSpecularLighting
|
fespotlight
| feSpotLight
|
fetile
| feTile
|
feturbulence
| feTurbulence
|
foreignobject
| foreignObject
|
glyphref
| glyphRef
|
lineargradient
| linearGradient
|
radialgradient
| radialGradient
|
textpath
| textPath
|
조정된 현재 노드가 SVG 네임스페이스에 있는 경우, 토큰의 SVG 어트리뷰트를 조정합니다. (이렇게 하면 SVG 어트리뷰트의 대소문자가 일치하지 않는 문제를 수정합니다.)
외부 어트리뷰트를 조정합니다 토큰에 대해. (이렇게 하면 네임스페이스가 지정된 어트리뷰트, 특히 SVG에서 XLink의 사용을 수정합니다.)
외부 요소를 삽입합니다 토큰에 대해, 조정된 현재 노드의 네임스페이스와 거짓으로.
토큰이 셀프 클로징 플래그를 설정한 경우, 다음 목록에서 적절한 단계를 실행합니다:
토큰의 셀프 클로징 플래그를 인정하고, 아래의 "script" 종료 태그에 대한 단계에 설명된 대로 행동합니다.
현재 노드를 열린 요소의 스택에서 팝하고 토큰의 셀프 클로징 플래그를 인정합니다.
script
요소인 경우
old insertion point을 현재 삽입 지점과 동일하게 설정합니다. 삽입 지점을 다음 입력 문자 바로 앞으로 설정합니다.
파서의 스크립트 중첩 레벨을 1 증가시키고, 파서 일시 중지 플래그를 true로 설정합니다.
활성 추측적
HTML 파서가 null이고 사용자 에이전트가 SVG를 지원하는 경우, SVG script
요소를 SVG 규칙에 따라 처리합니다. [SVG]
이것이 토크나이저에 새 문자를 삽입하게 되더라도, 파서 일시 중지 플래그가 true이므로 파서는 재진입되지 않습니다.
파서의 스크립트 중첩 레벨을 1 감소시키고, 파서의 스크립트 중첩 레벨이 0이면 파서 일시 중지 플래그를 false로 설정합니다.
삽입 지점을 old insertion point 값으로 설정합니다. (즉, 삽입 지점을 이전 값으로 복원합니다. 이 값은 "정의되지 않은" 값일 수 있습니다.)
다음 단계를 실행합니다:
node를 현재 노드로 초기화합니다 (스택의 가장 아래에 있는 노드).
node의 태그 이름이 ASCII 소문자로 변환된 것이 토큰의 태그 이름과 동일하지 않으면 구문 오류입니다.
루프: node가 스택의 최상단에 있는 요소이면, 반환합니다. (프래그먼트 케이스)
토큰의 태그 이름과 node의 태그 이름이 같으면, node가 스택에서 팝될 때까지 스택에서 요소를 팝하고, 그런 다음 반환합니다.
node를 스택의 이전 항목으로 설정합니다.
node가 HTML 네임스페이스에 있는 요소가 아니면, 루프 단계로 돌아갑니다.
그렇지 않으면, HTML 콘텐츠의 현재 삽입 모드에 해당하는 규칙에 따라 토큰을 처리합니다.
Document/DOMContentLoaded_event
모든 최신 엔진에서 지원됩니다.
사용자 에이전트가 문서의 파싱을 중지하면, 사용자 에이전트는 다음 단계들을 실행해야 합니다:
모든 최신 엔진에서 지원됩니다.
액티브 사양 HTML 파서가 null이 아닌 경우, 사양 HTML 파서를 중지하고 반환하십시오.
삽입 지점을 정의되지 않음으로 설정하십시오.
현재 문서 준비
상태를 "interactive
"로 업데이트하십시오.
모든 노드를 열린 요소의 스택에서 팝하십시오.
문서 파싱이 완료될 때 실행될 스크립트 목록이 비어 있지 않을 때까지:
이벤트 루프를 회전하여 첫 번째 script
가 파서 실행 준비가 된 상태로
설정되고 Document
가 스크립트를 차단하는 스타일시트가 없는 상태가 될 때까지
기다리십시오.
목록의 첫 번째 script
요소를
문서가
파싱을 마치면 실행될 스크립트 목록에서 제거하십시오 (즉, 목록에서 첫 번째 항목을 쉬프트 아웃하십시오).
전역 작업을 대기열에 추가하고 DOM 조작 작업 소스를 통해 다음 하위 단계를 실행하십시오.
Document
의 로드 타이밍 정보의 DOM 콘텐츠 로드 이벤트 시작 시간을 현재 고해상도 시간으로
설정하십시오.
이벤트를 발생시키고 DOMContentLoaded
를
Document
객체에서 bubbles
속성을 true로 초기화하여 실행하십시오.
Document
의 로드 타이밍 정보의 DOM 콘텐츠 로드 이벤트 종료 시간을 현재 고해상도 시간으로 설정하십시오.
클라이언트 메시지 큐를 활성화하십시오.
WebDriver BiDi DOM 콘텐츠 로드를 실행하십시오.
이벤트 루프를 회전하여 가능한 한 빨리 실행될 스크립트 세트와 가능한 한 빨리 순서대로 실행될 스크립트 목록이 비어 있을 때까지 기다리십시오.
이벤트 루프를 회전하여 Document
에서 load 이벤트를 지연시키는 것이 없을 때까지 기다리십시오.
전역 작업을 대기열에 추가하고 DOM 조작 작업 소스를 통해 다음 단계를 실행하십시오.
현재 문서 준비 상태를 "complete
"로
업데이트하십시오.
Document
객체의 로드 타이밍 정보의 로드 이벤트 시작 시간을 window를 기준으로 현재 고해상도 시간으로
설정하십시오.
이벤트를 발생시키고 load
를 window에서 legacy
target override flag가 설정된 상태로 실행하십시오.
WebDriver BiDi 로드 완료를 실행하십시오.
Document
는 이제 로드 후 작업 준비 완료 상태입니다.
사용자 에이전트가 파서를 중단해야 할 때, 다음 단계를 실행해야 합니다:
입력 스트림에 대기 중인 모든 콘텐츠를 버리고, 이후 추가될 콘텐츠도 모두 버리십시오.
이 HTML 파서에 대해 사양 HTML 파서를 중지하십시오.
현재 문서
준비 상태를 "interactive
"로 업데이트하십시오.
모든 노드를 열린 요소의 스택에서 팝하십시오.
현재 문서
준비 상태를 "complete
"로 업데이트하십시오.
사용자 에이전트는 HTML 파서가 대기 중인 파싱 차단 스크립트를 가져오고 실행하는 동안 또는 일반적인 파싱 중에 HTML 마크업에 선언된 리소스를 추측적으로 가져오는 최적화를 이 섹션에서 설명한 대로 구현할 수 있습니다. 이 최적화는 정확하게 정의되지는 않았지만, 상호 운용성을 위해 고려해야 할 몇 가지 규칙이 있습니다.
각 HTML 파서는 활성 추측적 HTML 파서를 가질 수 있습니다. 이 값은 초기에는 null입니다.
추측적 HTML 파서는 일반 HTML 파서처럼 작동해야 하며 (예: 트리 빌더 규칙이 적용됨), 몇 가지 예외가 있습니다:
일반 HTML 파서와 문서 자체의 상태는 영향을 받아서는 안 됩니다.
예를 들어, 일반 HTML 파서의 다음 입력 문자나 열린 요소 스택은 추측적 HTML 파서에 의해 영향을 받지 않습니다.
HTML 파서의 입력 바이트 스트림에 푸시된 바이트는 추측적 HTML 파서의 입력 바이트 스트림에도 푸시되어야 합니다. 스트림에서 읽은 바이트는 독립적이어야 합니다.
추측적 파싱의 결과는 주로 추측적 가져오기 시리즈입니다. 어떤 종류의 리소스를 추측적으로 가져올지는 구현 정의이지만, 사용자 에이전트는 스크립트가 HTML 파서를 차단하지 않는다고 가정할 때 일반 HTML 파서로 가져오지 않을 리소스를 추측적으로 가져와서는 안 됩니다.
같은 마크업이 추측적 HTML 파서와 일반 HTML 파서에서 여러 번 볼 수 있습니다. 중복된 가져오기는 아직 완전히 지정되지 않은 캐싱 규칙에 의해 방지될 것으로 예상됩니다.
추측적 모의 요소 element에 대한 추측적 가져오기는 다음 규칙을 따라야 합니다:
이러한 것들 중 일부는 추측적으로 발견되었지만 실제로 문서에 적용되어야 할까요?
추측적 HTML 파서가 다음 요소 중 하나를 만나면, 후속 추측적 가져오기의 효과를 위해 해당 요소가 처리된 것처럼 행동합니다.
url을 URL로 설정합니다. 이 URL이 비어 있거나 존재하지 않으면 아무것도 하지 않습니다. 그렇지 않으면 url이 추측적 가져오기 URL 목록에 이미 존재하는 경우 아무것도 하지 않습니다. 그렇지 않으면 요소가 정상적으로 처리된 것처럼 url을 가져오고, url을 추측적 가져오기 URL 목록에 추가합니다.
Document는 추측적 가져오기 URL 목록을 가지고 있으며, 이는 목록으로, 초기에는 비어 있습니다.
HTML 파서 인스턴스에 대한 추측적 HTML 파서를 시작하려면 다음을 수행하십시오:
선택적으로, 반환합니다.
이 단계는 사용자 에이전트가 추측적 HTML 파싱을 옵트아웃할 수 있도록 합니다.
만약 parser의 활성 추측적 HTML 파서가 null이 아니면, 추측적 HTML 파서를 중지합니다.
이 경우는 document.write()가 또 다른 파서 차단 스크립트를 작성하는 경우 발생할 수 있습니다. 단순화를 위해 이 명세서는 항상 추측적 파싱을 재시작하지만, 사용자 에이전트는 최종 결과가 동일한 한 더 효율적인 전략을 구현할 수 있습니다.
speculativeParser를 parser와 동일한 상태로 새로운 추측적 HTML 파서로 설정합니다.
speculativeDoc을 parser의 Document와 동일한 구조로 새롭게 설정하되, 모든 요소는 추측적 모의 요소로 설정합니다. speculativeParser가 speculativeDoc을 파싱하도록 합니다.
parser의 활성 추측적 HTML 파서를 speculativeParser로 설정합니다.
HTML 파서 인스턴스에 대한 추측적 HTML 파서를 중지하려면 다음을 수행하십시오:
speculativeParser를 parser의 활성 추측적 HTML 파서로 설정합니다.
만약 speculativeParser가 null이면, 반환합니다.
speculativeParser의 입력 스트림에 있는 모든 대기 중인 콘텐츠를 폐기하고, 추가될 예정이었던 모든 미래 콘텐츠를 무시합니다.
parser의 활성 추측적 HTML 파서를 null로 설정합니다.
추측적 HTML 파서는 정상적인 요소 대신 추측적 모의 요소를 생성합니다. 트리 빌더가 요소에서 일반적으로 수행하는 DOM 작업은 추측적 모의 요소에서도 적절하게 작동할 것으로 예상됩니다.
추측적 모의 요소는 다음 항목을 포함하는 구조체입니다:
추측적 모의 요소 생성을 namespace, tagName, attributes로 설정하려면 다음을 수행하십시오:
element를 새로운 추측적 모의 요소로 설정합니다.
element의 네임스페이스를 namespace로 설정합니다.
element의 로컬 이름을 tagName으로 설정합니다.
element의 속성 목록을 attributes로 설정합니다.
선택적으로 element에 대해 추측적 가져오기를 수행합니다.
element를 반환합니다.
트리 빌더가 템플릿 요소의 템플릿 내용에 요소를 삽입하라고 지시할 때, 그것이 추측적 모의 요소이고, 템플릿 내용이 ShadowRoot 노드가 아닌 경우 아무것도 하지 않습니다. 선언적이지 않은 쉐도우 루트 내에서 추측적으로 발견된 URL은 자체적으로 템플릿일 수 있으며, 추측적으로 가져와서는 안 됩니다.
애플리케이션이 XML 파이프라인과 함께 HTML
파서를 사용하는 경우, 생성된 DOM이 특정 미묘한 방식에서 XML 도구 체인과 호환되지 않을 수 있습니다. 예를 들어, XML 도구 체인은 xmlns
라는 이름의
속성을 표현할 수 없을 수 있습니다. 이는 XML 구문에서 네임스페이스와 충돌하기 때문입니다. 또한 HTML
파서가 생성하는 일부 데이터는 DOM 자체에 포함되지 않습니다. 이 섹션에서는 이러한 문제를 처리하기 위한 몇 가지 규칙을 명시합니다.
사용 중인 XML API가 DOCTYPE을 지원하지 않는 경우, 도구는 DOCTYPE을 완전히 삭제할 수 있습니다.
XML API가 "xmlns
"라는 이름의 네임스페이스가 없는 속성, "xmlns:
"로 시작하는 이름의 속성, 또는 XMLNS 네임스페이스의 속성을 지원하지 않는 경우, 도구는 이러한 속성을 삭제할 수 있습니다.
도구는 올바른 작동을 위해 필요한 네임스페이스 선언으로 출력을 주석 처리할 수 있습니다.
사용 중인 XML API가 요소 및 속성의 로컬 이름에 허용되는 문자를 제한하는 경우, 도구는 API에서 지원하지 않는 모든 요소 및 속성 로컬 이름을 허용되는 이름 집합으로 매핑할 수 있습니다. 지원되지 않는 모든 문자를 대문자 U와 해당 문자의 코드 포인트를 16진수로 표현한 여섯 자리 숫자로 교체하며, 0-9의 숫자와 A-F의 대문자를 기호로 사용하여 숫자 순으로 증가합니다.
예를 들어, HTML 파서에 의해
출력될 수 있는 foo<bar
라는 요소 이름은 HTML 요소 이름도 아니며 잘 형성된 XML 요소 이름도 아니지만, fooU00003Cbar
로
변환되어 잘 형성된 XML 요소 이름이 됩니다 (물론 HTML에서는 여전히 유효하지 않습니다).
또 다른 예로, xlink:href
라는 속성을 고려해 보겠습니다. MathML 요소에 사용될 때, 이는 조정된 후에
"xlink
"라는 접두사와 "href
"라는 로컬 이름을 가진 속성이 됩니다. 그러나 HTML 요소에 사용될 때는 접두사가 없고
"xlink:href
"라는 로컬 이름을 가진 속성이 되며, 이는 유효한 NCName이 아니므로 XML API에서 허용되지 않을 수 있습니다. 따라서
"xlinkU00003Ahref
"로 변환될 수 있습니다.
이 변환으로 생성된 이름은 HTML 파서에 의해 생성된 속성과 충돌하지 않습니다. 왜냐하면 이들은 모두 소문자이거나 외부 속성 조정 알고리즘의 테이블에 나열된 것이기 때문입니다.
XML API가 U+002D HYPHEN-MINUS 문자(--, 하이픈 마이너스)가 연속으로 두 번 나타나는 것을 제한하는 경우, 도구는 문제의 문자를 분리하기 위해 U+0020 SPACE 문자를 삽입할 수 있습니다.
XML API가 U+002D HYPHEN-MINUS 문자(-)로 끝나는 주석을 제한하는 경우, 도구는 해당 주석의 끝에 U+0020 SPACE 문자를 삽입할 수 있습니다.
XML API가 문자 데이터, 속성 값 또는 주석에 허용되는 문자를 제한하는 경우, 도구는 U+000C FORM FEED (FF) 문자를 U+0020 SPACE 문자로 대체하고, 기타 모든 XML 이외의 문자는 U+FFFD REPLACEMENT CHARACTER로 대체할 수 있습니다.
도구가 대역 외 정보를 전달할 방법이 없는 경우, 다음 정보를 삭제할 수 있습니다:
form
요소 조상이 아닌 폼 컨트롤과 폼 사이의 연결 (파서에서 form
요소 포인터 사용)
template
요소의 템플릿 내용.
이 섹션에서 허용된 변환은 HTML 파서의
규칙이 적용된 이후에 적용됩니다. 예를 들어, <a::>
시작 태그는 </a::>
종료 태그로 닫히며,
</aU00003AU00003A>
종료 태그로 닫히지 않습니다. 비록 사용자 에이전트가 위 규칙을 사용하여 해당 시작 태그에 대해 이름이
aU00003AU00003A
인 실제 요소를 DOM에 생성하더라도 말입니다.
이 섹션은 규범적이지 않습니다.
이 섹션에서는 일부 오류가 있는 마크업을 살펴보고 HTML 파서가 이러한 경우를 어떻게 처리하는지 논의합니다.
이 섹션은 규범적이지 않습니다.
가장 자주 논의되는 오류 마크업 예는 다음과 같습니다:
< p > 1< b > 2< i > 3</ b > 4</ i > 5</ p >
이 마크업의 파싱은 "3"까지는 간단합니다. 이 시점에서 DOM은 다음과 같이 보입니다:
여기서 열린 요소의 스택에는 html
, body
, p
, b
, i
의 다섯 개 요소가 있습니다. 활성
서식 지정 요소 목록에는 b
와
i
의 두 가지 요소만 있습니다. 삽입 모드는 "본문에서"입니다.
태그 이름이 "b"인 종료 태그 토큰을 받으면 "수용 기관 알고리즘"이 호출됩니다. 이 경우는 간단한 사례로,
formattingElement는 b
요소이며, furthest
block이 없습니다. 따라서 열린 요소의 스택에는 html
, body
, p
의 세 개 요소만 남게 되며, 활성 서식 지정 요소 목록에는 i
하나만 남습니다. DOM 트리는 이 시점에서
수정되지 않습니다.
다음 토큰은 문자("4")이며, 활성 서식 지정 요소를 재구성하게 합니다. 이 경우
i
요소만 해당됩니다. "4" 텍스트
노드를 위해 새로운 i
요소가 생성됩니다. 또한
"i"의 종료 태그 토큰도 수신된 후 "5" 텍스트
노드가 삽입되면, DOM은 다음과 같이 보입니다:
이 섹션은 규범적이지 않습니다.
이전 예제와 유사한 경우는 다음과 같습니다:
< b > 1< p > 2</ b > 3</ p >
"2"까지의 구문 분석은 다음과 같이 간단합니다:
흥미로운 부분은 "b" 태그 이름을 가진 종료 태그 토큰이 구문 분석될 때입니다.
그 토큰이 나타나기 전에, 열린 요소 스택에
네 가지 요소가 있습니다:
html
,
body
,
b
, 그리고
p
. 활성
서식 지정 요소 목록에는 하나만 있습니다: b
. 삽입 모드는
"본문"입니다.
"b" 태그 이름을 가진 종료 태그 토큰을 받으면, 이전 예제와 같이 "수용 기관 알고리즘"이 호출됩니다. 그러나 이번 경우에는 furthest
block이 존재하며, 이는 p
요소입니다.
따라서 이번에는 수용 기관 알고리즘이 건너뛰어지지 않습니다.
common ancestor은 body
요소입니다. 활성 서식 지정 요소 목록에서 b
의 위치를 표시하는 개념적 "북마크"가 있지만,
해당 목록에는 하나의 요소만 있으므로 북마크는 크게 영향을 미치지 않습니다.
알고리즘이 진행되면서 node는 서식 지정 요소(b
)로 설정되고, last
node는 furthest block(p
)으로 설정됩니다.
last node는 common ancestor에 추가(이동)되어 DOM은 다음과 같이 나타납니다:
마지막으로, 새로운 b
요소가 p
요소에 추가되어 DOM은 다음과 같이 나타납니다:
b
요소가 활성 서식 지정 요소 목록 및 열린 요소 스택에서 제거되어 "3"이
구문 분석될 때 p
요소에 추가됩니다:
이 섹션은 규범적이지 않습니다.
역사적 이유로 인해, 테이블에서의 오류 처리는 특히 이상합니다. 예를 들어, 다음 마크업을 고려해 보십시오:
< table > < b > < tr >< td > aaa</ td ></ tr > bbb</ table > ccc
강조된 b
요소 시작 태그는 테이블 내에 직접
포함될 수 없으며, 파서는 이 경우 요소를 테이블 앞에 배치합니다. (이것은 위탁 양육이라고 합니다.)
이는 table
요소의 시작 태그가
확인된 직후의 DOM 트리를 확인함으로써 알 수 있습니다:
...그리고 b
요소 시작 태그가 확인된 직후:
이 시점에서, 열린 요소 스택에는
html
,
body
,
table
,
그리고 b
요소들이 포함되어 있습니다(결과
DOM 트리와는 다르지만); 활성 서식 지정 요소 목록에는 단 하나의 b
요소만 포함되어 있으며,
삽입 모드는 "테이블에서"로 설정되어 있습니다.
tr
시작 태그는 b
요소를 스택에서 꺼내고, tbody
시작 태그를 암시적으로
생성하도록 하며,
tbody
및 tr
요소들은 "테이블 본문에서"와 "행에서" 삽입 모드를 통해 간단하게 처리됩니다.
이후 DOM은 다음과 같이 나타납니다:
여기서, 열린 요소 스택에는 html
, body
,
table
, tbody
,
그리고 tr
요소들이 포함되어 있습니다;
활성 서식 지정 요소 목록에는 여전히 b
요소가 포함되어 있으며,
삽입 모드는 "행에서"로 설정되어 있습니다.
td
요소 시작 태그 토큰은 td
요소를 트리에 추가한 후, 표식을
활성 서식 지정 요소 목록에 추가합니다 (이 또한 "셀에서" 삽입 모드"로 전환됩니다).
표식은 "aaa" 문자 토큰들이 확인될
때, 생성된 b
요소가 해당 텍스트
노드를 포함하지 않음을 의미합니다:
종료 태그들은 간단하게 처리됩니다; 이를 처리한 후, 열린 요소 스택에는 html
, body
,
table
, 그리고 tbody
요소들이 포함되어
있습니다;
활성 서식 지정 요소 목록에는 여전히 b
요소가 포함되어 있으며 (이 표식은 "td"
종료 태그 토큰에 의해 제거됨);
삽입 모드는 "테이블 본문에서"로 설정됩니다.
따라서 "bbb" 문자 토큰들이 발견됩니다. 이들은 "테이블 텍스트에서" 삽입 모드를 사용하도록 트리거합니다 (원래 삽입 모드는 "테이블 본문에서"로 설정됩니다).
문자 토큰들이 수집되며, 다음 토큰 (즉, table
요소 종료 태그)이
확인될 때, 이들은 그룹으로 처리됩니다.
문자가 모두 공백이 아니기 때문에, 이들은 "테이블에서" 삽입 모드의 "기타 규칙"에 따라 처리되며, 이는 "본문에서" 삽입 모드로 대체되지만 위탁 양육이 적용됩니다.
활성 서식 지정 요소들을 재구성할 때, b
요소가 생성되고 위탁 양육이 적용되며, 그런 다음 "bbb" 텍스트
노드가 추가됩니다:
열린 요소 스택에는 html
, body
, table
, tbody
, 그리고 새로운
b
요소들이 포함되어 있습니다 (다시
말하지만, 이것은 결과 트리와 일치하지 않습니다!); 활성 서식 지정 요소 목록에는 새로운 b
요소가 포함되어 있으며, 삽입 모드는 여전히 "테이블 본문에서"로 설정되어 있습니다.
문자 토큰이 "bbb" 대신에 ASCII 공백 문자만 있었다면,
ASCII 공백 문자는 tbody
요소에 추가되었을
것입니다.
마지막으로, table
이
"table" 종료 태그에 의해 닫힙니다. 이 태그는 열린 요소 스택에서 table
요소를 포함한 모든
노드를 제거하지만, 활성 서식 지정 요소 목록에는 영향을 미치지 않으므로, 테이블
이후의 "ccc" 문자 토큰들은 또 다른 b
요소가 생성되며, 이번에는 테이블 이후에 생성됩니다:
이 섹션은 규범적이지 않습니다.
다음 마크업을 고려해보세요. 이 예제에서 우리는 이 문서가 URL
https://example.com/inner
로, 다른 문서의 iframe
의
내용으로 렌더링되고 있다고 가정합니다. 그 문서의 URL은
https://example.com/outer
입니다:
< div id = a >
< script >
var div = document. getElementById( 'a' );
parent. document. body. appendChild( div);
</ script >
< script >
alert( document. URL);
</ script >
</ div >
< script >
alert( document. URL);
</ script >
첫 번째 "script" 종료 태그까지, 스크립트가 구문 분석되기 전의 결과는 비교적 간단합니다:
그러나 스크립트가 구문 분석된 후, div
요소와 그 자식 script
요소는 사라집니다:
이 시점에서, 이들은 앞서 언급한 외부 탐색 컨텍스트의 문서
에 있습니다.
그러나 열린 요소 스택에는 여전히 div
요소가 남아 있습니다.
따라서 두 번째 script
요소가 구문 분석될 때, 이 요소는 외부 문서
객체에 삽입됩니다.
파서가 생성된 문서와 다른 문서
에서 구문 분석된
스크립트는 실행되지 않으므로, 첫 번째 alert는 표시되지 않습니다.
div
요소의 종료 태그가 구문 분석되면 div
요소가 스택에서 제거되어, 다음 script
요소는 내부 문서
에
있게 됩니다:
이 스크립트는 실행되며, "https://example.com/inner"이라는 알림이 표시됩니다.
이 섹션은 규범적이지 않습니다.
이전 섹션의 예제를 확장하여, 두 번째 script
요소가 외부 스크립트(즉, src
속성이 있는 경우)인 경우를 고려해보세요.
이 요소가 생성될 때 파서의 문서
에
포함되지 않았다면, 해당 외부 스크립트는 다운로드조차 되지 않습니다.
외부 스크립트가 있는 script
요소가 정상적으로 파서의 문서
에
구문 분석되지만, 외부 스크립트가 다운로드되는 동안 해당 요소가 다른 문서로 이동되면, 스크립트는 계속 다운로드되지만 실행되지는 않습니다.
일반적으로 script
요소를 문서
간에 이동하는 것은 좋은 관행으로 간주되지 않습니다.
이 섹션은 규범적이지 않습니다.
다음 마크업은 중첩된 서식 지정 요소(예: b
)가
어떻게 수집되고, 그들이 포함된 요소들이 닫혀도 계속 적용되지만, 과도한 중복은 제거되는지를 보여줍니다.
<!DOCTYPE html>
< p >< b class = x >< b class = x >< b >< b class = x >< b class = x >< b > X
< p > X
< p >< b >< b class = x >< b > X
< p ></ b ></ b ></ b ></ b ></ b ></ b > X
결과로 생성된 DOM 트리는 다음과 같습니다:
html
html
마크업의 두 번째 p
요소에는 명시적인
b
요소가 없지만, 결과 DOM에서는 각
종류의 서식 지정 요소(이 경우 클래스 속성이 있는 b
요소 3개와 장식이 없는 b
요소 2개)가 요소의 "X" 앞에
재구성됩니다.
또한 최종 문단에서는 활성 서식 지정 요소 목록을 완전히 지우는 데 6개의 b
종료 태그만 필요하다는 점을 주목하세요,
비록 이 시점까지 9개의 b
시작 태그가
있었음에도 불구하고 말입니다.
다음 알고리즘의 목적을 위해, 요소가 비어있는 상태로 직렬화된다면, 그 요소의 유형은 비어있는 요소 중 하나이거나, basefont
, bgsound
, frame
, keygen
, 또는 param
입니다.
다음 단계들은 HTML 조각 직렬화 알고리즘을 형성합니다. 이 알고리즘은 DOM
Element
,
Document
, 또는 DocumentFragment
를
입력으로 받으며, the node, serializableShadowRoots라는 boolean 값, 그리고
sequence<ShadowRoot>
shadowRoots를 받아 문자열을 반환합니다.
이 알고리즘은 직렬화되는 노드 자체가 아닌, 그 자식들을 직렬화합니다.
만약 the node가 비어있는 상태로 직렬화된다면, 빈 문자열을 반환합니다.
문자열 s를 빈 문자열로 초기화합니다.
만약 the node가 template
요소라면, the node를 template
요소의 template
contents(DocumentFragment
노드)로 대신합니다.
만약 current node가 shadow host라면:
current node의 shadow root를 shadow라고 합니다.
다음 중 하나가 참이라면:
serializableShadowRoots가 true이고 shadow의 serializable이 true인 경우; 또는
shadowRoots가 shadow를 포함하는 경우,
그렇다면:
"<template shadowrootmode="
"를 추가합니다.
만약 shadow의 mode가 "open
"이라면
"open
"을 추가합니다. 그렇지 않으면 "closed
"를 추가합니다.
""
"를 추가합니다.
만약 shadow의 delegates focus가 설정되어 있다면,
" shadowrootdelegatesfocus=""
"를 추가합니다.
만약 shadow의 serializable이 설정되어 있다면,
" shadowrootserializable=""
"를 추가합니다.
만약 shadow의 clonable이 설정되어 있다면,
" shadowrootclonable=""
"를 추가합니다.
">
"를 추가합니다.
shadow, serializableShadowRoots, shadowRoots와 함께 HTML 조각 직렬화 알고리즘을 실행한 결과값을 추가합니다(따라서 해당 요소에 대해 이 알고리즘으로 재귀적으로 들어갑니다).
"</template>
"를 추가합니다.
the node의 각 자식 노드에 대해 tree order로 다음 단계를 실행합니다:
current node를 처리 중인 자식 노드로 설정합니다.
다음 목록에서 적절한 문자열을 s에 추가합니다:
Element
인
경우
만약 current node가 HTML 네임스페이스, MathML 네임스페이스 또는 SVG 네임스페이스에 속하는 요소라면, tagname을 current node의 local name으로 설정합니다. 그렇지 않으면 tagname을 current node의 qualified name으로 설정합니다.
U+003C LESS-THAN SIGN 문자(<)와 tagname을 추가합니다.
HTML
요소는 HTML 파서나
createElement()
에
의해 생성된 경우, tagname은 소문자로 설정됩니다.
만약 current node의 is
값이 null이 아니며, 그 요소에
is
속성이 없는 경우,
" is="
" 문자열을 추가하고, current node의 is
값을 attribute
mode에서 설명된 대로 escape하여 추가한 후 U+0022 QUOTATION
MARK 문자(")를 추가합니다.
그 요소에 있는 각 속성에 대해 U+0020 SPACE 문자, 속성의 직렬화된 이름을 추가하고, U+003D EQUALS SIGN 문자(=), U+0022 QUOTATION MARK 문자("), 속성의 값을 attribute mode에서 설명된 대로 escape한 후 두 번째 U+0022 QUOTATION MARK 문자(")를 추가합니다.
이전 문단의 목적을 위해 속성의 직렬화된 이름을 다음과 같이 결정해야 합니다:
속성의 직렬화된 이름은 속성의 local name입니다.
HTML 요소에 있는 속성들은 HTML 파서나
setAttribute()
에
의해 설정되었을 때, local name은 소문자로 설정됩니다.
속성의 직렬화된 이름은 "xml:
" 문자열과 속성의 local name입니다.
xmlns
인 경우
속성의 직렬화된 이름은 "xmlns
" 문자열입니다.
xmlns
가 아닌 경우
속성의 직렬화된 이름은 "xmlns:
" 문자열과 속성의 local name입니다.
속성의 직렬화된 이름은 "xlink:
" 문자열과 속성의 local name입니다.
속성의 직렬화된 이름은 속성의 qualified name입니다.
속성의 정확한 순서는 구현 정의로, 원본 마크업에서 속성들이 주어진 순서와 같은 요소에 따라 달라질 수 있지만, 정렬 순서는 안정적이어야 하며, 이 알고리즘의 연속된 호출에서 속성의 직렬화 순서는 동일해야 합니다.
U+003E GREATER-THAN SIGN 문자(>)를 추가합니다.
만약 current node가 비어있는 상태로 직렬화된다면, 이 시점에서 다음 자식 노드로 넘어갑니다.
current node, serializableShadowRoots, shadowRoots와 함께 HTML 조각 직렬화 알고리즘을 실행한 결과값을 s에 추가하고, U+003C LESS-THAN SIGN 문자(<), U+002F SOLIDUS 문자(/), tagname을 다시 추가한 후 U+003E GREATER-THAN SIGN 문자(>)를 추가합니다.
Text
노드인 경우
만약 current node의 부모가 style
,
script
,
xmp
, iframe
,
noembed
, noframes
또는
plaintext
요소이거나, current node의 부모가 noscript
요소이며 스크립팅이
활성화되어 있는 경우, current node의 데이터 값을 그대로 추가합니다.
그렇지 않으면, current node의 데이터 값을 아래 설명된 대로 escape하여 추가합니다.
Comment
노드인 경우
"<!--
" (U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D
HYPHEN-MINUS, U+002D HYPHEN-MINUS)를 추가하고, current node의 데이터 값을 추가한 후 "-->
" (U+002D
HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN)를 추가합니다.
ProcessingInstruction
노드인 경우
"<?
" (U+003C LESS-THAN SIGN, U+003F QUESTION MARK)를 추가하고, current
node의 target
IDL 속성 값을 추가한 후, U+0020 SPACE 문자 하나를 추가하고,
current node의 데이터 값을 추가한 후, U+003E GREATER-THAN SIGN 문자 하나를
추가합니다.
DocumentType
노드인 경우
"<!DOCTYPE
" (U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+0044 LATIN
CAPITAL LETTER D, U+004F LATIN CAPITAL LETTER O, U+0043 LATIN CAPITAL LETTER C, U+0054
LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER Y, U+0050 LATIN CAPITAL LETTER P,
U+0045 LATIN CAPITAL LETTER E)를 추가하고, U+0020 SPACE 문자를 추가한 후 current node의 이름 값을 추가하고, ">
" (U+003E
GREATER-THAN SIGN)를 추가합니다.
s 값을 반환합니다.
이 알고리즘의 출력 결과를 HTML 파서를 사용하여 구문 분석할 경우, 원래의 트리 구조가 반환되지 않을 수 있습니다. serialize와 reparse 단계를 거치지 않는 트리 구조는 HTML 파서 자체에서 생성될 수도 있으며, 이러한 경우는 일반적으로 비준수입니다.
예를 들어, textarea
요소에
Comment
노드를 추가한 후 이를 직렬화하고 그 출력을 다시 구문 분석하면, 해당 주석이 텍스트 컨트롤에 표시되게 됩니다. 유사하게, DOM 조작 결과로 인해 주석에
"-->
"가 포함된 요소를 직렬화하고 이를 구문 분석하면, 주석이 해당 시점에서 잘리고 나머지 부분은 마크업으로 해석됩니다. 또 다른 예로는, script
요소에
"</script>
"라는 텍스트 문자열이 포함된 Text
노드를 추가하거나, p
요소가 ul
요소를 포함하도록 만드는 것 등이
있습니다. 이는 p
요소의 끝 태그를
암시하게 됩니다.
이로 인해 교차 사이트 스크립팅 공격이 가능해질 수 있습니다. 예를 들어, 사용자가 입력한 글꼴 이름을 CSS style
블록에 DOM을
통해 삽입하고, 그런 다음 innerHTML
IDL 속성을 사용하여 해당 style
요소의 HTML
직렬화를 얻는 페이지가 있다고 가정해 봅시다. 사용자가 글꼴 이름으로 "</style><script>attack</script>
"을 입력하면, innerHTML
은
원래 DOM에 script
노드가
존재하지 않았더라도, 이를 구문 분석하는 다른 컨텍스트에서는 script
노드를
포함하는 마크업을 반환하게 됩니다.
예를 들어, 다음과 같은 마크업을 고려해 보십시오:
< form id = "outer" >< div ></ form >< form id = "inner" >< input >
이는 다음과 같이 구문 분석됩니다:
input
요소는 내부
form
요소와 연관됩니다.
이제 이 트리 구조를 직렬화하고 다시 구문 분석하면, <form id="inner">
시작 태그는 무시되고, input
요소는 외부
form
요소와 연관되게
됩니다.
< html >< head ></ head >< body >< form id = "outer" >< div > < form id = "inner" > < input ></ form ></ div ></ form ></ body ></ html >
또 다른 예로, 다음과 같은 마크업을 고려해 보십시오:
< a >< table >< a >
이는 다음과 같이 구문 분석됩니다:
즉, 두 번째 a
요소가 위탁 부모로 설정되기 때문에 a
요소가 중첩됩니다.
serialize-reparse 단계를 거친 후, a
요소들과 table
요소는 모두 형제가
됩니다. 이는 두 번째 <a>
시작 태그가 첫 번째 a
요소를 암시적으로 닫기 때문입니다.
< html >< head ></ head >< body >< a > < a > </ a >< table ></ table ></ a ></ body ></ html >
역사적인 이유로, 이 알고리즘은 pre
,
textarea
, 또는
listing
요소에서 초기 U+000A 라인 피드(LF) 문자를
라운드트립하지 않습니다. (처음 두 가지 경우) 라운드트립 중인 마크업이 준수할 수 있음에도 불구하고, HTML 파서는 구문 분석 중에 그러한 문자를 제거하지만, 이 알고리즘은 추가 U+000A 라인 피드(LF)
문자를 직렬화하지 않습니다.
예를 들어, 다음과 같은 마크업을 고려해 보십시오:
< pre >
Hello.</ pre >
이 문서가 처음 구문 분석될 때, pre
요소의 자식 텍스트
콘텐츠는 단일 개행 문자로 시작합니다. serialize-reparse 라운드트립 후, pre
요소의 자식 텍스트
콘텐츠는 단순히 "Hello.
"입니다.
is
속성은
사용자 정의 내장 요소의
생성 신호를 나타내는 특별한 역할을 합니다. 이 속성은 파싱된 HTML이 요소의 is
값을 설정할 수 있는 메커니즘을 제공합니다. 이 때문에 우리는 직렬화 중에 이 속성을
특별 처리하여 요소의 is
값이 직렬화-파싱 라운드트립을 통해 보존되도록 보장합니다.
파서를 통해 맞춤형
내장 요소를 생성할 때, 개발자는 is
속성을
직접 사용합니다. 이러한 경우 serialize-parse 라운드트립이 제대로 작동합니다.
< script >
window. SuperP = class extends HTMLParagraphElement {};
customElements. define( "super-p" , SuperP, { extends : "p" });
</ script >
< div id = "container" >< p is = "super-p" > Superb!</ p ></ div >
< script >
console. log( container. innerHTML); // <p is="super-p">
container. innerHTML = container. innerHTML;
console. log( container. innerHTML); // <p is="super-p">
console. assert( container. firstChild instanceof SuperP);
</ script >
하지만 생성자의 생성자나 createElement()
를
통해 맞춤형 내장 요소를 생성하는 경우, is
속성은 추가되지
않습니다. 대신에 is
값이 속성을 중재하지 않고 설정됩니다.
< script >
container. innerHTML = "" ;
const p = document. createElement( "p" , { is: "super-p" });
container. appendChild( p);
// DOM에 is 속성이 없습니다:
console. assert( ! p. hasAttribute( "is" ));
// 하지만 여전히 super-p 요소입니다:
console. assert( p instanceof SuperP);
</ script >
serialize-parse 라운드트립이 제대로 작동하도록 하려면, 직렬화 과정에서 요소의 is
값을 is
속성으로 명시적으로 기록합니다:
< script >
console. log( container. innerHTML); // <p is="super-p">
container. innerHTML = container. innerHTML;
console. log( container. innerHTML); // <p is="super-p">
console. assert( container. firstChild instanceof SuperP);
문자열 이스케이프 (위 알고리즘의 목적을 위해)는 다음 단계를 수행합니다:
"&
" 문자가 나타나는 경우 "&
" 문자열로 대체합니다.
U+00A0 NO-BREAK SPACE 문자가 나타나는 경우 "
" 문자열로 대체합니다.
알고리즘이 속성 모드에서 호출된 경우, ""
" 문자가 나타나는 경우 ""
" 문자열로 대체합니다.
알고리즘이 속성 모드에서 호출되지 않은 경우, "<
" 문자가 나타나는 경우 "<
" 문자열로,
">
" 문자가 나타나는 경우 ">
" 문자열로 대체합니다.
다음 단계들은 HTML 조각 구문 분석 알고리즘을 형성합니다.
이 알고리즘은 Element
노드를 입력으로 받고, 이 노드는 구문 분석기의 context 요소로 참조됩니다.
이 요소는 구문 분석기의 맥락을 제공하며, input, 즉 구문 분석할 문자열과 선택적인 불리언
allowDeclarativeShadowRoots (기본값은 false)를 입력으로 받습니다. 이 알고리즘은 0개 이상의 노드를 반환합니다.
파서 섹션의 알고리즘에서 조각 케이스로 표시된 부분은 이 알고리즘을 처리하기 위해 파서가 생성된 경우에만 발생하는 부분입니다. 이러한 주석은 정보 제공을 위한 것이며, 규범적인 의미는 없습니다. 파서가 이 알고리즘을 처리하기 위해 생성되지 않았을 때에도 조각 케이스로 설명된 조건이 발생할 수 있다면, 그것은 명세의 오류입니다.
만약 context 요소의 노드 문서가 쿼크 모드에
있다면, Document
를 쿼크 모드로 설정하십시오.
그렇지 않고, 만약 context 요소의 노드 문서가 제한된 쿼크 모드에 있다면, Document
를 제한된 쿼크 모드로 설정하십시오.
그렇지 않으면, Document
를 비 쿼크
모드로 유지하십시오.
만약 allowDeclarativeShadowRoots가 true라면, Document
의 선언적 섀도우 루트를 허용으로 설정하십시오.
context 요소에 따라 HTML 파서의 토큰화 단계를 다음과 같이 설정하십시오:
title
textarea
style
xmp
iframe
noembed
noframes
script
noscript
plaintext
성능상의 이유로, 오류를 보고하지 않고 이 명세서에서 설명된 실제 상태 머신을 직접 사용하는 구현체는 위의 목록에서 언급된 RAWTEXT와 스크립트 데이터 상태 대신 PLAINTEXT 상태를 사용할 수 있습니다. 이러한 상태들은 파서가 이 알고리즘을 처리하기 위해 생성된 경우에만 적용되며, 이들은 훨씬 적은 상태 전환을 포함하기 때문에 오류를 제외하고는 동일합니다.
root를 새 html
요소로 설정하고, 이 요소는
속성이 없습니다.
root 요소를 위에서 생성한 Document
노드에 추가하십시오.
파서의 열린 요소 스택을 설정하여 이 스택에 단일 요소인 root만 포함되도록 하십시오.
만약 context 요소가 template
요소라면,
"template 내" 모드를 템플릿 삽입 모드 스택에 추가하여 새로운
현재
템플릿 삽입 모드로 설정하십시오.
context 요소의 로컬 이름을 이름으로 하고, context 요소의 속성을 속성으로 하는 시작 태그 토큰을 생성하십시오.
이 시작 태그 토큰을 context 노드의 시작 태그 토큰으로 설정하여, 이를 HTML 통합 지점인지 여부를 결정하는 데 사용하십시오.
파서는 이 알고리즘의 일부로 context 요소를 참조할 것입니다.
파서의 form
요소
포인터를
context 요소에 가장 가까운 form
요소에 설정하십시오.
(위로 올라가며 포함된 요소가 form
요소인 경우 포함하여).
만약 그러한 form
요소가
없다면,
form
요소
포인터는 초기값(null)을 유지합니다.
파서를 시작하고 입력 스트림에 삽입된 모든 문자를 소비할 때까지 실행하십시오.
root의 자식 노드를 트리 순서로 반환하십시오.
이 표는 HTML에서 지원하는 문자 참조 이름과 해당하는 코드 포인트를 나열합니다. 이 표는 이전 섹션에서 참조됩니다.
레거시 호환성을 위해 많은 코드 포인트가 여러 문자 참조 이름을 가지는 것이 의도적입니다. 예를 들어, 일부는 끝에 세미콜론이 있거나 없거나, 또는 다른 대소문자로 나타날 수 있습니다.
이름 | 문자 | 글리프 |
---|---|---|
Aacute;
| U+000C1 | Á |
Aacute
| U+000C1 | Á |
aacute;
| U+000E1 | á |
aacute
| U+000E1 | á |
Abreve;
| U+00102 | Ă |
abreve;
| U+00103 | ă |
ac;
| U+0223E | ∾ |
acd;
| U+0223F | ∿ |
acE;
| U+0223E U+00333 | ∾̳ |
Acirc;
| U+000C2 | Â |
Acirc
| U+000C2 | Â |
acirc;
| U+000E2 | â |
acirc
| U+000E2 | â |
acute;
| U+000B4 | ´ |
acute
| U+000B4 | ´ |
Acy;
| U+00410 | А |
acy;
| U+00430 | а |
AElig;
| U+000C6 | Æ |
AElig
| U+000C6 | Æ |
aelig;
| U+000E6 | æ |
aelig
| U+000E6 | æ |
af;
| U+02061 | |
Afr;
| U+1D504 | 𝔄 |
afr;
| U+1D51E | 𝔞 |
Agrave;
| U+000C0 | À |
Agrave
| U+000C0 | À |
agrave;
| U+000E0 | à |
agrave
| U+000E0 | à |
alefsym;
| U+02135 | ℵ |
aleph;
| U+02135 | ℵ |
Alpha;
| U+00391 | Α |
alpha;
| U+003B1 | α |
Amacr;
| U+00100 | Ā |
amacr;
| U+00101 | ā |
amalg;
| U+02A3F | ⨿ |
AMP;
| U+00026 | & |
AMP
| U+00026 | & |
amp;
| U+00026 | & |
amp
| U+00026 | & |
And;
| U+02A53 | ⩓ |
and;
| U+02227 | ∧ |
andand;
| U+02A55 | ⩕ |
andd;
| U+02A5C | ⩜ |
andslope;
| U+02A58 | ⩘ |
andv;
| U+02A5A | ⩚ |
ang;
| U+02220 | ∠ |
ange;
| U+029A4 | ⦤ |
angle;
| U+02220 | ∠ |
angmsd;
| U+02221 | ∡ |
angmsdaa;
| U+029A8 | ⦨ |
angmsdab;
| U+029A9 | ⦩ |
angmsdac;
| U+029AA | ⦪ |
angmsdad;
| U+029AB | ⦫ |
angmsdae;
| U+029AC | ⦬ |
angmsdaf;
| U+029AD | ⦭ |
angmsdag;
| U+029AE | ⦮ |
angmsdah;
| U+029AF | ⦯ |
angrt;
| U+0221F | ∟ |
angrtvb;
| U+022BE | ⊾ |
angrtvbd;
| U+0299D | ⦝ |
angsph;
| U+02222 | ∢ |
angst;
| U+000C5 | Å |
angzarr;
| U+0237C | ⍼ |
Aogon;
| U+00104 | Ą |
aogon;
| U+00105 | ą |
Aopf;
| U+1D538 | 𝔸 |
aopf;
| U+1D552 | 𝕒 |
ap;
| U+02248 | ≈ |
apacir;
| U+02A6F | ⩯ |
apE;
| U+02A70 | ⩰ |
ape;
| U+0224A | ≊ |
apid;
| U+0224B | ≋ |
apos;
| U+00027 | ' |
ApplyFunction;
| U+02061 | |
approx;
| U+02248 | ≈ |
approxeq;
| U+0224A | ≊ |
Aring;
| U+000C5 | Å |
Aring
| U+000C5 | Å |
aring;
| U+000E5 | å |
aring
| U+000E5 | å |
Ascr;
| U+1D49C | 𝒜 |
ascr;
| U+1D4B6 | 𝒶 |
Assign;
| U+02254 | ≔ |
ast;
| U+0002A | * |
asymp;
| U+02248 | ≈ |
asympeq;
| U+0224D | ≍ |
Atilde;
| U+000C3 | Ã |
Atilde
| U+000C3 | Ã |
atilde;
| U+000E3 | ã |
atilde
| U+000E3 | ã |
Auml;
| U+000C4 | Ä |
Auml
| U+000C4 | Ä |
auml;
| U+000E4 | ä |
auml
| U+000E4 | ä |
awconint;
| U+02233 | ∳ |
awint;
| U+02A11 | ⨑ |
backcong;
| U+0224C | ≌ |
backepsilon;
| U+003F6 | ϶ |
backprime;
| U+02035 | ‵ |
backsim;
| U+0223D | ∽ |
backsimeq;
| U+022CD | ⋍ |
Backslash;
| U+02216 | ∖ |
Barv;
| U+02AE7 | ⫧ |
barvee;
| U+022BD | ⊽ |
Barwed;
| U+02306 | ⌆ |
barwed;
| U+02305 | ⌅ |
barwedge;
| U+02305 | ⌅ |
bbrk;
| U+023B5 | ⎵ |
bbrktbrk;
| U+023B6 | ⎶ |
bcong;
| U+0224C | ≌ |
Bcy;
| U+00411 | Б |
bcy;
| U+00431 | б |
bdquo;
| U+0201E | „ |
becaus;
| U+02235 | ∵ |
Because;
| U+02235 | ∵ |
because;
| U+02235 | ∵ |
bemptyv;
| U+029B0 | ⦰ |
bepsi;
| U+003F6 | ϶ |
bernou;
| U+0212C | ℬ |
Bernoullis;
| U+0212C | ℬ |
Beta;
| U+00392 | Β |
beta;
| U+003B2 | β |
beth;
| U+02136 | ℶ |
between;
| U+0226C | ≬ |
Bfr;
| U+1D505 | 𝔅 |
bfr;
| U+1D51F | 𝔟 |
bigcap;
| U+022C2 | ⋂ |
bigcirc;
| U+025EF | ◯ |
bigcup;
| U+022C3 | ⋃ |
bigodot;
| U+02A00 | ⨀ |
bigoplus;
| U+02A01 | ⨁ |
bigotimes;
| U+02A02 | ⨂ |
bigsqcup;
| U+02A06 | ⨆ |
bigstar;
| U+02605 | ★ |
bigtriangledown;
| U+025BD | ▽ |
bigtriangleup;
| U+025B3 | △ |
biguplus;
| U+02A04 | ⨄ |
bigvee;
| U+022C1 | ⋁ |
bigwedge;
| U+022C0 | ⋀ |
bkarow;
| U+0290D | ⤍ |
blacklozenge;
| U+029EB | ⧫ |
blacksquare;
| U+025AA | ▪ |
blacktriangle;
| U+025B4 | ▴ |
blacktriangledown;
| U+025BE | ▾ |
blacktriangleleft;
| U+025C2 | ◂ |
blacktriangleright;
| U+025B8 | ▸ |
blank;
| U+02423 | ␣ |
blk12;
| U+02592 | ▒ |
blk14;
| U+02591 | ░ |
blk34;
| U+02593 | ▓ |
block;
| U+02588 | █ |
bne;
| U+0003D U+020E5 | =⃥ |
bnequiv;
| U+02261 U+020E5 | ≡⃥ |
bNot;
| U+02AED | ⫭ |
bnot;
| U+02310 | ⌐ |
Bopf;
| U+1D539 | 𝔹 |
bopf;
| U+1D553 | 𝕓 |
bot;
| U+022A5 | ⊥ |
bottom;
| U+022A5 | ⊥ |
bowtie;
| U+022C8 | ⋈ |
boxbox;
| U+029C9 | ⧉ |
boxDL;
| U+02557 | ╗ |
boxDl;
| U+02556 | ╖ |
boxdL;
| U+02555 | ╕ |
boxdl;
| U+02510 | ┐ |
boxDR;
| U+02554 | ╔ |
boxDr;
| U+02553 | ╓ |
boxdR;
| U+02552 | ╒ |
boxdr;
| U+0250C | ┌ |
boxH;
| U+02550 | ═ |
boxh;
| U+02500 | ─ |
boxHD;
| U+02566 | ╦ |
boxHd;
| U+02564 | ╤ |
boxhD;
| U+02565 | ╥ |
boxhd;
| U+0252C | ┬ |
boxHU;
| U+02569 | ╩ |
boxHu;
| U+02567 | ╧ |
boxhU;
| U+02568 | ╨ |
boxhu;
| U+02534 | ┴ |
boxminus;
| U+0229F | ⊟ |
boxplus;
| U+0229E | ⊞ |
boxtimes;
| U+022A0 | ⊠ |
boxUL;
| U+0255D | ╝ |
boxUl;
| U+0255C | ╜ |
boxuL;
| U+0255B | ╛ |
boxul;
| U+02518 | ┘ |
boxUR;
| U+0255A | ╚ |
boxUr;
| U+02559 | ╙ |
boxuR;
| U+02558 | ╘ |
boxur;
| U+02514 | └ |
boxV;
| U+02551 | ║ |
boxv;
| U+02502 | │ |
boxVH;
| U+0256C | ╬ |
boxVh;
| U+0256B | ╫ |
boxvH;
| U+0256A | ╪ |
boxvh;
| U+0253C | ┼ |
boxVL;
| U+02563 | ╣ |
boxVl;
| U+02562 | ╢ |
boxvL;
| U+02561 | ╡ |
boxvl;
| U+02524 | ┤ |
boxVR;
| U+02560 | ╠ |
boxVr;
| U+0255F | ╟ |
boxvR;
| U+0255E | ╞ |
boxvr;
| U+0251C | ├ |
bprime;
| U+02035 | ‵ |
Breve;
| U+002D8 | ˘ |
breve;
| U+002D8 | ˘ |
brvbar;
| U+000A6 | ¦ |
brvbar
| U+000A6 | ¦ |
Bscr;
| U+0212C | ℬ |
bscr;
| U+1D4B7 | 𝒷 |
bsemi;
| U+0204F | ⁏ |
bsim;
| U+0223D | ∽ |
bsime;
| U+022CD | ⋍ |
bsol;
| U+0005C | \ |
bsolb;
| U+029C5 | ⧅ |
bsolhsub;
| U+027C8 | ⟈ |
bull;
| U+02022 | • |
bullet;
| U+02022 | • |
bump;
| U+0224E | ≎ |
bumpE;
| U+02AAE | ⪮ |
bumpe;
| U+0224F | ≏ |
Bumpeq;
| U+0224E | ≎ |
bumpeq;
| U+0224F | ≏ |
Cacute;
| U+00106 | Ć |
cacute;
| U+00107 | ć |
Cap;
| U+022D2 | ⋒ |
cap;
| U+02229 | ∩ |
capand;
| U+02A44 | ⩄ |
capbrcup;
| U+02A49 | ⩉ |
capcap;
| U+02A4B | ⩋ |
capcup;
| U+02A47 | ⩇ |
capdot;
| U+02A40 | ⩀ |
CapitalDifferentialD;
| U+02145 | ⅅ |
caps;
| U+02229 U+0FE00 | ∩︀ |
caret;
| U+02041 | ⁁ |
caron;
| U+002C7 | ˇ |
Cayleys;
| U+0212D | ℭ |
ccaps;
| U+02A4D | ⩍ |
Ccaron;
| U+0010C | Č |
ccaron;
| U+0010D | č |
Ccedil;
| U+000C7 | Ç |
Ccedil
| U+000C7 | Ç |
ccedil;
| U+000E7 | ç |
ccedil
| U+000E7 | ç |
Ccirc;
| U+00108 | Ĉ |
ccirc;
| U+00109 | ĉ |
Cconint;
| U+02230 | ∰ |
ccups;
| U+02A4C | ⩌ |
ccupssm;
| U+02A50 | ⩐ |
Cdot;
| U+0010A | Ċ |
cdot;
| U+0010B | ċ |
cedil;
| U+000B8 | ¸ |
cedil
| U+000B8 | ¸ |
Cedilla;
| U+000B8 | ¸ |
cemptyv;
| U+029B2 | ⦲ |
cent;
| U+000A2 | ¢ |
cent
| U+000A2 | ¢ |
CenterDot;
| U+000B7 | · |
centerdot;
| U+000B7 | · |
Cfr;
| U+0212D | ℭ |
cfr;
| U+1D520 | 𝔠 |
CHcy;
| U+00427 | Ч |
chcy;
| U+00447 | ч |
check;
| U+02713 | ✓ |
checkmark;
| U+02713 | ✓ |
Chi;
| U+003A7 | Χ |
chi;
| U+003C7 | χ |
cir;
| U+025CB | ○ |
circ;
| U+002C6 | ˆ |
circeq;
| U+02257 | ≗ |
circlearrowleft;
| U+021BA | ↺ |
circlearrowright;
| U+021BB | ↻ |
circledast;
| U+0229B | ⊛ |
circledcirc;
| U+0229A | ⊚ |
circleddash;
| U+0229D | ⊝ |
CircleDot;
| U+02299 | ⊙ |
circledR;
| U+000AE | ® |
circledS;
| U+024C8 | Ⓢ |
CircleMinus;
| U+02296 | ⊖ |
CirclePlus;
| U+02295 | ⊕ |
CircleTimes;
| U+02297 | ⊗ |
cirE;
| U+029C3 | ⧃ |
cire;
| U+02257 | ≗ |
cirfnint;
| U+02A10 | ⨐ |
cirmid;
| U+02AEF | ⫯ |
cirscir;
| U+029C2 | ⧂ |
ClockwiseContourIntegral;
| U+02232 | ∲ |
CloseCurlyDoubleQuote;
| U+0201D | ” |
CloseCurlyQuote;
| U+02019 | ’ |
clubs;
| U+02663 | ♣ |
clubsuit;
| U+02663 | ♣ |
Colon;
| U+02237 | ∷ |
colon;
| U+0003A | : |
Colone;
| U+02A74 | ⩴ |
colone;
| U+02254 | ≔ |
coloneq;
| U+02254 | ≔ |
comma;
| U+0002C | , |
commat;
| U+00040 | @ |
comp;
| U+02201 | ∁ |
compfn;
| U+02218 | ∘ |
complement;
| U+02201 | ∁ |
complexes;
| U+02102 | ℂ |
cong;
| U+02245 | ≅ |
congdot;
| U+02A6D | ⩭ |
Congruent;
| U+02261 | ≡ |
Conint;
| U+0222F | ∯ |
conint;
| U+0222E | ∮ |
ContourIntegral;
| U+0222E | ∮ |
Copf;
| U+02102 | ℂ |
copf;
| U+1D554 | 𝕔 |
coprod;
| U+02210 | ∐ |
Coproduct;
| U+02210 | ∐ |
COPY;
| U+000A9 | © |
COPY
| U+000A9 | © |
copy;
| U+000A9 | © |
copy
| U+000A9 | © |
copysr;
| U+02117 | ℗ |
CounterClockwiseContourIntegral;
| U+02233 | ∳ |
crarr;
| U+021B5 | ↵ |
Cross;
| U+02A2F | ⨯ |
cross;
| U+02717 | ✗ |
Cscr;
| U+1D49E | 𝒞 |
cscr;
| U+1D4B8 | 𝒸 |
csub;
| U+02ACF | ⫏ |
csube;
| U+02AD1 | ⫑ |
csup;
| U+02AD0 | ⫐ |
csupe;
| U+02AD2 | ⫒ |
ctdot;
| U+022EF | ⋯ |
cudarrl;
| U+02938 | ⤸ |
cudarrr;
| U+02935 | ⤵ |
cuepr;
| U+022DE | ⋞ |
cuesc;
| U+022DF | ⋟ |
cularr;
| U+021B6 | ↶ |
cularrp;
| U+0293D | ⤽ |
Cup;
| U+022D3 | ⋓ |
cup;
| U+0222A | ∪ |
cupbrcap;
| U+02A48 | ⩈ |
CupCap;
| U+0224D | ≍ |
cupcap;
| U+02A46 | ⩆ |
cupcup;
| U+02A4A | ⩊ |
cupdot;
| U+0228D | ⊍ |
cupor;
| U+02A45 | ⩅ |
cups;
| U+0222A U+0FE00 | ∪︀ |
curarr;
| U+021B7 | ↷ |
curarrm;
| U+0293C | ⤼ |
curlyeqprec;
| U+022DE | ⋞ |
curlyeqsucc;
| U+022DF | ⋟ |
curlyvee;
| U+022CE | ⋎ |
curlywedge;
| U+022CF | ⋏ |
curren;
| U+000A4 | ¤ |
curren
| U+000A4 | ¤ |
curvearrowleft;
| U+021B6 | ↶ |
curvearrowright;
| U+021B7 | ↷ |
cuvee;
| U+022CE | ⋎ |
cuwed;
| U+022CF | ⋏ |
cwconint;
| U+02232 | ∲ |
cwint;
| U+02231 | ∱ |
cylcty;
| U+0232D | ⌭ |
Dagger;
| U+02021 | ‡ |
dagger;
| U+02020 | † |
daleth;
| U+02138 | ℸ |
Darr;
| U+021A1 | ↡ |
dArr;
| U+021D3 | ⇓ |
darr;
| U+02193 | ↓ |
dash;
| U+02010 | ‐ |
Dashv;
| U+02AE4 | ⫤ |
dashv;
| U+022A3 | ⊣ |
dbkarow;
| U+0290F | ⤏ |
dblac;
| U+002DD | ˝ |
Dcaron;
| U+0010E | Ď |
dcaron;
| U+0010F | ď |
Dcy;
| U+00414 | Д |
dcy;
| U+00434 | д |
DD;
| U+02145 | ⅅ |
dd;
| U+02146 | ⅆ |
ddagger;
| U+02021 | ‡ |
ddarr;
| U+021CA | ⇊ |
DDotrahd;
| U+02911 | ⤑ |
ddotseq;
| U+02A77 | ⩷ |
deg;
| U+000B0 | ° |
deg
| U+000B0 | ° |
Del;
| U+02207 | ∇ |
Delta;
| U+00394 | Δ |
delta;
| U+003B4 | δ |
demptyv;
| U+029B1 | ⦱ |
dfisht;
| U+0297F | ⥿ |
Dfr;
| U+1D507 | 𝔇 |
dfr;
| U+1D521 | 𝔡 |
dHar;
| U+02965 | ⥥ |
dharl;
| U+021C3 | ⇃ |
dharr;
| U+021C2 | ⇂ |
DiacriticalAcute;
| U+000B4 | ´ |
DiacriticalDot;
| U+002D9 | ˙ |
DiacriticalDoubleAcute;
| U+002DD | ˝ |
DiacriticalGrave;
| U+00060 | ` |
DiacriticalTilde;
| U+002DC | ˜ |
diam;
| U+022C4 | ⋄ |
Diamond;
| U+022C4 | ⋄ |
diamond;
| U+022C4 | ⋄ |
diamondsuit;
| U+02666 | ♦ |
diams;
| U+02666 | ♦ |
die;
| U+000A8 | ¨ |
DifferentialD;
| U+02146 | ⅆ |
digamma;
| U+003DD | ϝ |
disin;
| U+022F2 | ⋲ |
div;
| U+000F7 | ÷ |
divide;
| U+000F7 | ÷ |
divide
| U+000F7 | ÷ |
divideontimes;
| U+022C7 | ⋇ |
divonx;
| U+022C7 | ⋇ |
DJcy;
| U+00402 | Ђ |
djcy;
| U+00452 | ђ |
dlcorn;
| U+0231E | ⌞ |
dlcrop;
| U+0230D | ⌍ |
dollar;
| U+00024 | $ |
Dopf;
| U+1D53B | 𝔻 |
dopf;
| U+1D555 | 𝕕 |
Dot;
| U+000A8 | ¨ |
dot;
| U+002D9 | ˙ |
DotDot;
| U+020DC | ◌⃜ |
doteq;
| U+02250 | ≐ |
doteqdot;
| U+02251 | ≑ |
DotEqual;
| U+02250 | ≐ |
dotminus;
| U+02238 | ∸ |
dotplus;
| U+02214 | ∔ |
dotsquare;
| U+022A1 | ⊡ |
doublebarwedge;
| U+02306 | ⌆ |
DoubleContourIntegral;
| U+0222F | ∯ |
DoubleDot;
| U+000A8 | ¨ |
DoubleDownArrow;
| U+021D3 | ⇓ |
DoubleLeftArrow;
| U+021D0 | ⇐ |
DoubleLeftRightArrow;
| U+021D4 | ⇔ |
DoubleLeftTee;
| U+02AE4 | ⫤ |
DoubleLongLeftArrow;
| U+027F8 | ⟸ |
DoubleLongLeftRightArrow;
| U+027FA | ⟺ |
DoubleLongRightArrow;
| U+027F9 | ⟹ |
DoubleRightArrow;
| U+021D2 | ⇒ |
DoubleRightTee;
| U+022A8 | ⊨ |
DoubleUpArrow;
| U+021D1 | ⇑ |
DoubleUpDownArrow;
| U+021D5 | ⇕ |
DoubleVerticalBar;
| U+02225 | ∥ |
DownArrow;
| U+02193 | ↓ |
Downarrow;
| U+021D3 | ⇓ |
downarrow;
| U+02193 | ↓ |
DownArrowBar;
| U+02913 | ⤓ |
DownArrowUpArrow;
| U+021F5 | ⇵ |
DownBreve;
| U+00311 | ◌̑ |
downdownarrows;
| U+021CA | ⇊ |
downharpoonleft;
| U+021C3 | ⇃ |
downharpoonright;
| U+021C2 | ⇂ |
DownLeftRightVector;
| U+02950 | ⥐ |
DownLeftTeeVector;
| U+0295E | ⥞ |
DownLeftVector;
| U+021BD | ↽ |
DownLeftVectorBar;
| U+02956 | ⥖ |
DownRightTeeVector;
| U+0295F | ⥟ |
DownRightVector;
| U+021C1 | ⇁ |
DownRightVectorBar;
| U+02957 | ⥗ |
DownTee;
| U+022A4 | ⊤ |
DownTeeArrow;
| U+021A7 | ↧ |
drbkarow;
| U+02910 | ⤐ |
drcorn;
| U+0231F | ⌟ |
drcrop;
| U+0230C | ⌌ |
Dscr;
| U+1D49F | 𝒟 |
dscr;
| U+1D4B9 | 𝒹 |
DScy;
| U+00405 | Ѕ |
dscy;
| U+00455 | ѕ |
dsol;
| U+029F6 | ⧶ |
Dstrok;
| U+00110 | Đ |
dstrok;
| U+00111 | đ |
dtdot;
| U+022F1 | ⋱ |
dtri;
| U+025BF | ▿ |
dtrif;
| U+025BE | ▾ |
duarr;
| U+021F5 | ⇵ |
duhar;
| U+0296F | ⥯ |
dwangle;
| U+029A6 | ⦦ |
DZcy;
| U+0040F | Џ |
dzcy;
| U+0045F | џ |
dzigrarr;
| U+027FF | ⟿ |
Eacute;
| U+000C9 | É |
Eacute
| U+000C9 | É |
eacute;
| U+000E9 | é |
eacute
| U+000E9 | é |
easter;
| U+02A6E | ⩮ |
Ecaron;
| U+0011A | Ě |
ecaron;
| U+0011B | ě |
ecir;
| U+02256 | ≖ |
Ecirc;
| U+000CA | Ê |
Ecirc
| U+000CA | Ê |
ecirc;
| U+000EA | ê |
ecirc
| U+000EA | ê |
ecolon;
| U+02255 | ≕ |
Ecy;
| U+0042D | Э |
ecy;
| U+0044D | э |
eDDot;
| U+02A77 | ⩷ |
Edot;
| U+00116 | Ė |
eDot;
| U+02251 | ≑ |
edot;
| U+00117 | ė |
ee;
| U+02147 | ⅇ |
efDot;
| U+02252 | ≒ |
Efr;
| U+1D508 | 𝔈 |
efr;
| U+1D522 | 𝔢 |
eg;
| U+02A9A | ⪚ |
Egrave;
| U+000C8 | È |
Egrave
| U+000C8 | È |
egrave;
| U+000E8 | è |
egrave
| U+000E8 | è |
egs;
| U+02A96 | ⪖ |
egsdot;
| U+02A98 | ⪘ |
el;
| U+02A99 | ⪙ |
Element;
| U+02208 | ∈ |
elinters;
| U+023E7 | ⏧ |
ell;
| U+02113 | ℓ |
els;
| U+02A95 | ⪕ |
elsdot;
| U+02A97 | ⪗ |
Emacr;
| U+00112 | Ē |
emacr;
| U+00113 | ē |
empty;
| U+02205 | ∅ |
emptyset;
| U+02205 | ∅ |
EmptySmallSquare;
| U+025FB | ◻ |
emptyv;
| U+02205 | ∅ |
EmptyVerySmallSquare;
| U+025AB | ▫ |
emsp;
| U+02003 | |
emsp13;
| U+02004 | |
emsp14;
| U+02005 | |
ENG;
| U+0014A | Ŋ |
eng;
| U+0014B | ŋ |
ensp;
| U+02002 | |
Eogon;
| U+00118 | Ę |
eogon;
| U+00119 | ę |
Eopf;
| U+1D53C | 𝔼 |
eopf;
| U+1D556 | 𝕖 |
epar;
| U+022D5 | ⋕ |
eparsl;
| U+029E3 | ⧣ |
eplus;
| U+02A71 | ⩱ |
epsi;
| U+003B5 | ε |
Epsilon;
| U+00395 | Ε |
epsilon;
| U+003B5 | ε |
epsiv;
| U+003F5 | ϵ |
eqcirc;
| U+02256 | ≖ |
eqcolon;
| U+02255 | ≕ |
eqsim;
| U+02242 | ≂ |
eqslantgtr;
| U+02A96 | ⪖ |
eqslantless;
| U+02A95 | ⪕ |
Equal;
| U+02A75 | ⩵ |
equals;
| U+0003D | = |
EqualTilde;
| U+02242 | ≂ |
equest;
| U+0225F | ≟ |
Equilibrium;
| U+021CC | ⇌ |
equiv;
| U+02261 | ≡ |
equivDD;
| U+02A78 | ⩸ |
eqvparsl;
| U+029E5 | ⧥ |
erarr;
| U+02971 | ⥱ |
erDot;
| U+02253 | ≓ |
Escr;
| U+02130 | ℰ |
escr;
| U+0212F | ℯ |
esdot;
| U+02250 | ≐ |
Esim;
| U+02A73 | ⩳ |
esim;
| U+02242 | ≂ |
Eta;
| U+00397 | Η |
eta;
| U+003B7 | η |
ETH;
| U+000D0 | Ð |
ETH
| U+000D0 | Ð |
eth;
| U+000F0 | ð |
eth
| U+000F0 | ð |
Euml;
| U+000CB | Ë |
Euml
| U+000CB | Ë |
euml;
| U+000EB | ë |
euml
| U+000EB | ë |
euro;
| U+020AC | € |
excl;
| U+00021 | ! |
exist;
| U+02203 | ∃ |
Exists;
| U+02203 | ∃ |
expectation;
| U+02130 | ℰ |
ExponentialE;
| U+02147 | ⅇ |
exponentiale;
| U+02147 | ⅇ |
fallingdotseq;
| U+02252 | ≒ |
Fcy;
| U+00424 | Ф |
fcy;
| U+00444 | ф |
female;
| U+02640 | ♀ |
ffilig;
| U+0FB03 | ffi |
fflig;
| U+0FB00 | ff |
ffllig;
| U+0FB04 | ffl |
Ffr;
| U+1D509 | 𝔉 |
ffr;
| U+1D523 | 𝔣 |
filig;
| U+0FB01 | fi |
FilledSmallSquare;
| U+025FC | ◼ |
FilledVerySmallSquare;
| U+025AA | ▪ |
fjlig;
| U+00066 U+0006A | fj |
flat;
| U+0266D | ♭ |
fllig;
| U+0FB02 | fl |
fltns;
| U+025B1 | ▱ |
fnof;
| U+00192 | ƒ |
Fopf;
| U+1D53D | 𝔽 |
fopf;
| U+1D557 | 𝕗 |
ForAll;
| U+02200 | ∀ |
forall;
| U+02200 | ∀ |
fork;
| U+022D4 | ⋔ |
forkv;
| U+02AD9 | ⫙ |
Fouriertrf;
| U+02131 | ℱ |
fpartint;
| U+02A0D | ⨍ |
frac12;
| U+000BD | ½ |
frac12
| U+000BD | ½ |
frac13;
| U+02153 | ⅓ |
frac14;
| U+000BC | ¼ |
frac14
| U+000BC | ¼ |
frac15;
| U+02155 | ⅕ |
frac16;
| U+02159 | ⅙ |
frac18;
| U+0215B | ⅛ |
frac23;
| U+02154 | ⅔ |
frac25;
| U+02156 | ⅖ |
frac34;
| U+000BE | ¾ |
frac34
| U+000BE | ¾ |
frac35;
| U+02157 | ⅗ |
frac38;
| U+0215C | ⅜ |
frac45;
| U+02158 | ⅘ |
frac56;
| U+0215A | ⅚ |
frac58;
| U+0215D | ⅝ |
frac78;
| U+0215E | ⅞ |
frasl;
| U+02044 | ⁄ |
frown;
| U+02322 | ⌢ |
Fscr;
| U+02131 | ℱ |
fscr;
| U+1D4BB | 𝒻 |
gacute;
| U+001F5 | ǵ |
Gamma;
| U+00393 | Γ |
gamma;
| U+003B3 | γ |
Gammad;
| U+003DC | Ϝ |
gammad;
| U+003DD | ϝ |
gap;
| U+02A86 | ⪆ |
Gbreve;
| U+0011E | Ğ |
gbreve;
| U+0011F | ğ |
Gcedil;
| U+00122 | Ģ |
Gcirc;
| U+0011C | Ĝ |
gcirc;
| U+0011D | ĝ |
Gcy;
| U+00413 | Г |
gcy;
| U+00433 | г |
Gdot;
| U+00120 | Ġ |
gdot;
| U+00121 | ġ |
gE;
| U+02267 | ≧ |
ge;
| U+02265 | ≥ |
gEl;
| U+02A8C | ⪌ |
gel;
| U+022DB | ⋛ |
geq;
| U+02265 | ≥ |
geqq;
| U+02267 | ≧ |
geqslant;
| U+02A7E | ⩾ |
ges;
| U+02A7E | ⩾ |
gescc;
| U+02AA9 | ⪩ |
gesdot;
| U+02A80 | ⪀ |
gesdoto;
| U+02A82 | ⪂ |
gesdotol;
| U+02A84 | ⪄ |
gesl;
| U+022DB U+0FE00 | ⋛︀ |
gesles;
| U+02A94 | ⪔ |
Gfr;
| U+1D50A | 𝔊 |
gfr;
| U+1D524 | 𝔤 |
Gg;
| U+022D9 | ⋙ |
gg;
| U+0226B | ≫ |
ggg;
| U+022D9 | ⋙ |
gimel;
| U+02137 | ℷ |
GJcy;
| U+00403 | Ѓ |
gjcy;
| U+00453 | ѓ |
gl;
| U+02277 | ≷ |
gla;
| U+02AA5 | ⪥ |
glE;
| U+02A92 | ⪒ |
glj;
| U+02AA4 | ⪤ |
gnap;
| U+02A8A | ⪊ |
gnapprox;
| U+02A8A | ⪊ |
gnE;
| U+02269 | ≩ |
gne;
| U+02A88 | ⪈ |
gneq;
| U+02A88 | ⪈ |
gneqq;
| U+02269 | ≩ |
gnsim;
| U+022E7 | ⋧ |
Gopf;
| U+1D53E | 𝔾 |
gopf;
| U+1D558 | 𝕘 |
grave;
| U+00060 | ` |
GreaterEqual;
| U+02265 | ≥ |
GreaterEqualLess;
| U+022DB | ⋛ |
GreaterFullEqual;
| U+02267 | ≧ |
GreaterGreater;
| U+02AA2 | ⪢ |
GreaterLess;
| U+02277 | ≷ |
GreaterSlantEqual;
| U+02A7E | ⩾ |
GreaterTilde;
| U+02273 | ≳ |
Gscr;
| U+1D4A2 | 𝒢 |
gscr;
| U+0210A | ℊ |
gsim;
| U+02273 | ≳ |
gsime;
| U+02A8E | ⪎ |
gsiml;
| U+02A90 | ⪐ |
GT;
| U+0003E | > |
GT
| U+0003E | > |
Gt;
| U+0226B | ≫ |
gt;
| U+0003E | > |
gt
| U+0003E | > |
gtcc;
| U+02AA7 | ⪧ |
gtcir;
| U+02A7A | ⩺ |
gtdot;
| U+022D7 | ⋗ |
gtlPar;
| U+02995 | ⦕ |
gtquest;
| U+02A7C | ⩼ |
gtrapprox;
| U+02A86 | ⪆ |
gtrarr;
| U+02978 | ⥸ |
gtrdot;
| U+022D7 | ⋗ |
gtreqless;
| U+022DB | ⋛ |
gtreqqless;
| U+02A8C | ⪌ |
gtrless;
| U+02277 | ≷ |
gtrsim;
| U+02273 | ≳ |
gvertneqq;
| U+02269 U+0FE00 | ≩︀ |
gvnE;
| U+02269 U+0FE00 | ≩︀ |
Hacek;
| U+002C7 | ˇ |
hairsp;
| U+0200A | |
half;
| U+000BD | ½ |
hamilt;
| U+0210B | ℋ |
HARDcy;
| U+0042A | Ъ |
hardcy;
| U+0044A | ъ |
hArr;
| U+021D4 | ⇔ |
harr;
| U+02194 | ↔ |
harrcir;
| U+02948 | ⥈ |
harrw;
| U+021AD | ↭ |
Hat;
| U+0005E | ^ |
hbar;
| U+0210F | ℏ |
Hcirc;
| U+00124 | Ĥ |
hcirc;
| U+00125 | ĥ |
hearts;
| U+02665 | ♥ |
heartsuit;
| U+02665 | ♥ |
hellip;
| U+02026 | … |
hercon;
| U+022B9 | ⊹ |
Hfr;
| U+0210C | ℌ |
hfr;
| U+1D525 | 𝔥 |
HilbertSpace;
| U+0210B | ℋ |
hksearow;
| U+02925 | ⤥ |
hkswarow;
| U+02926 | ⤦ |
hoarr;
| U+021FF | ⇿ |
homtht;
| U+0223B | ∻ |
hookleftarrow;
| U+021A9 | ↩ |
hookrightarrow;
| U+021AA | ↪ |
Hopf;
| U+0210D | ℍ |
hopf;
| U+1D559 | 𝕙 |
horbar;
| U+02015 | ― |
HorizontalLine;
| U+02500 | ─ |
Hscr;
| U+0210B | ℋ |
hscr;
| U+1D4BD | 𝒽 |
hslash;
| U+0210F | ℏ |
Hstrok;
| U+00126 | Ħ |
hstrok;
| U+00127 | ħ |
HumpDownHump;
| U+0224E | ≎ |
HumpEqual;
| U+0224F | ≏ |
hybull;
| U+02043 | ⁃ |
hyphen;
| U+02010 | ‐ |
Iacute;
| U+000CD | Í |
Iacute
| U+000CD | Í |
iacute;
| U+000ED | í |
iacute
| U+000ED | í |
ic;
| U+02063 | |
Icirc;
| U+000CE | Î |
Icirc
| U+000CE | Î |
icirc;
| U+000EE | î |
icirc
| U+000EE | î |
Icy;
| U+00418 | И |
icy;
| U+00438 | и |
Idot;
| U+00130 | İ |
IEcy;
| U+00415 | Е |
iecy;
| U+00435 | е |
iexcl;
| U+000A1 | ¡ |
iexcl
| U+000A1 | ¡ |
iff;
| U+021D4 | ⇔ |
Ifr;
| U+02111 | ℑ |
ifr;
| U+1D526 | 𝔦 |
Igrave;
| U+000CC | Ì |
Igrave
| U+000CC | Ì |
igrave;
| U+000EC | ì |
igrave
| U+000EC | ì |
ii;
| U+02148 | ⅈ |
iiiint;
| U+02A0C | ⨌ |
iiint;
| U+0222D | ∭ |
iinfin;
| U+029DC | ⧜ |
iiota;
| U+02129 | ℩ |
IJlig;
| U+00132 | IJ |
ijlig;
| U+00133 | ij |
Im;
| U+02111 | ℑ |
Imacr;
| U+0012A | Ī |
imacr;
| U+0012B | ī |
image;
| U+02111 | ℑ |
ImaginaryI;
| U+02148 | ⅈ |
imagline;
| U+02110 | ℐ |
imagpart;
| U+02111 | ℑ |
imath;
| U+00131 | ı |
imof;
| U+022B7 | ⊷ |
imped;
| U+001B5 | Ƶ |
Implies;
| U+021D2 | ⇒ |
in;
| U+02208 | ∈ |
incare;
| U+02105 | ℅ |
infin;
| U+0221E | ∞ |
infintie;
| U+029DD | ⧝ |
inodot;
| U+00131 | ı |
Int;
| U+0222C | ∬ |
int;
| U+0222B | ∫ |
intcal;
| U+022BA | ⊺ |
integers;
| U+02124 | ℤ |
Integral;
| U+0222B | ∫ |
intercal;
| U+022BA | ⊺ |
Intersection;
| U+022C2 | ⋂ |
intlarhk;
| U+02A17 | ⨗ |
intprod;
| U+02A3C | ⨼ |
InvisibleComma;
| U+02063 | |
InvisibleTimes;
| U+02062 | |
IOcy;
| U+00401 | Ё |
iocy;
| U+00451 | ё |
Iogon;
| U+0012E | Į |
iogon;
| U+0012F | į |
Iopf;
| U+1D540 | 𝕀 |
iopf;
| U+1D55A | 𝕚 |
Iota;
| U+00399 | Ι |
iota;
| U+003B9 | ι |
iprod;
| U+02A3C | ⨼ |
iquest;
| U+000BF | ¿ |
iquest
| U+000BF | ¿ |
Iscr;
| U+02110 | ℐ |
iscr;
| U+1D4BE | 𝒾 |
isin;
| U+02208 | ∈ |
isindot;
| U+022F5 | ⋵ |
isinE;
| U+022F9 | ⋹ |
isins;
| U+022F4 | ⋴ |
isinsv;
| U+022F3 | ⋳ |
isinv;
| U+02208 | ∈ |
it;
| U+02062 | |
Itilde;
| U+00128 | Ĩ |
itilde;
| U+00129 | ĩ |
Iukcy;
| U+00406 | І |
iukcy;
| U+00456 | і |
Iuml;
| U+000CF | Ï |
Iuml
| U+000CF | Ï |
iuml;
| U+000EF | ï |
iuml
| U+000EF | ï |
Jcirc;
| U+00134 | Ĵ |
jcirc;
| U+00135 | ĵ |
Jcy;
| U+00419 | Й |
jcy;
| U+00439 | й |
Jfr;
| U+1D50D | 𝔍 |
jfr;
| U+1D527 | 𝔧 |
jmath;
| U+00237 | ȷ |
Jopf;
| U+1D541 | 𝕁 |
jopf;
| U+1D55B | 𝕛 |
Jscr;
| U+1D4A5 | 𝒥 |
jscr;
| U+1D4BF | 𝒿 |
Jsercy;
| U+00408 | Ј |
jsercy;
| U+00458 | ј |
Jukcy;
| U+00404 | Є |
jukcy;
| U+00454 | є |
Kappa;
| U+0039A | Κ |
kappa;
| U+003BA | κ |
kappav;
| U+003F0 | ϰ |
Kcedil;
| U+00136 | Ķ |
kcedil;
| U+00137 | ķ |
Kcy;
| U+0041A | К |
kcy;
| U+0043A | к |
Kfr;
| U+1D50E | 𝔎 |
kfr;
| U+1D528 | 𝔨 |
kgreen;
| U+00138 | ĸ |
KHcy;
| U+00425 | Х |
khcy;
| U+00445 | х |
KJcy;
| U+0040C | Ќ |
kjcy;
| U+0045C | ќ |
Kopf;
| U+1D542 | 𝕂 |
kopf;
| U+1D55C | 𝕜 |
Kscr;
| U+1D4A6 | 𝒦 |
kscr;
| U+1D4C0 | 𝓀 |
lAarr;
| U+021DA | ⇚ |
Lacute;
| U+00139 | Ĺ |
lacute;
| U+0013A | ĺ |
laemptyv;
| U+029B4 | ⦴ |
lagran;
| U+02112 | ℒ |
Lambda;
| U+0039B | Λ |
lambda;
| U+003BB | λ |
Lang;
| U+027EA | ⟪ |
lang;
| U+027E8 | ⟨ |
langd;
| U+02991 | ⦑ |
langle;
| U+027E8 | ⟨ |
lap;
| U+02A85 | ⪅ |
Laplacetrf;
| U+02112 | ℒ |
laquo;
| U+000AB | « |
laquo
| U+000AB | « |
Larr;
| U+0219E | ↞ |
lArr;
| U+021D0 | ⇐ |
larr;
| U+02190 | ← |
larrb;
| U+021E4 | ⇤ |
larrbfs;
| U+0291F | ⤟ |
larrfs;
| U+0291D | ⤝ |
larrhk;
| U+021A9 | ↩ |
larrlp;
| U+021AB | ↫ |
larrpl;
| U+02939 | ⤹ |
larrsim;
| U+02973 | ⥳ |
larrtl;
| U+021A2 | ↢ |
lat;
| U+02AAB | ⪫ |
lAtail;
| U+0291B | ⤛ |
latail;
| U+02919 | ⤙ |
late;
| U+02AAD | ⪭ |
lates;
| U+02AAD U+0FE00 | ⪭︀ |
lBarr;
| U+0290E | ⤎ |
lbarr;
| U+0290C | ⤌ |
lbbrk;
| U+02772 | ❲ |
lbrace;
| U+0007B | { |
lbrack;
| U+0005B | [ |
lbrke;
| U+0298B | ⦋ |
lbrksld;
| U+0298F | ⦏ |
lbrkslu;
| U+0298D | ⦍ |
Lcaron;
| U+0013D | Ľ |
lcaron;
| U+0013E | ľ |
Lcedil;
| U+0013B | Ļ |
lcedil;
| U+0013C | ļ |
lceil;
| U+02308 | ⌈ |
lcub;
| U+0007B | { |
Lcy;
| U+0041B | Л |
lcy;
| U+0043B | л |
ldca;
| U+02936 | ⤶ |
ldquo;
| U+0201C | “ |
ldquor;
| U+0201E | „ |
ldrdhar;
| U+02967 | ⥧ |
ldrushar;
| U+0294B | ⥋ |
ldsh;
| U+021B2 | ↲ |
lE;
| U+02266 | ≦ |
le;
| U+02264 | ≤ |
LeftAngleBracket;
| U+027E8 | ⟨ |
LeftArrow;
| U+02190 | ← |
Leftarrow;
| U+021D0 | ⇐ |
leftarrow;
| U+02190 | ← |
LeftArrowBar;
| U+021E4 | ⇤ |
LeftArrowRightArrow;
| U+021C6 | ⇆ |
leftarrowtail;
| U+021A2 | ↢ |
LeftCeiling;
| U+02308 | ⌈ |
LeftDoubleBracket;
| U+027E6 | ⟦ |
LeftDownTeeVector;
| U+02961 | ⥡ |
LeftDownVector;
| U+021C3 | ⇃ |
LeftDownVectorBar;
| U+02959 | ⥙ |
LeftFloor;
| U+0230A | ⌊ |
leftharpoondown;
| U+021BD | ↽ |
leftharpoonup;
| U+021BC | ↼ |
leftleftarrows;
| U+021C7 | ⇇ |
LeftRightArrow;
| U+02194 | ↔ |
Leftrightarrow;
| U+021D4 | ⇔ |
leftrightarrow;
| U+02194 | ↔ |
leftrightarrows;
| U+021C6 | ⇆ |
leftrightharpoons;
| U+021CB | ⇋ |
leftrightsquigarrow;
| U+021AD | ↭ |
LeftRightVector;
| U+0294E | ⥎ |
LeftTee;
| U+022A3 | ⊣ |
LeftTeeArrow;
| U+021A4 | ↤ |
LeftTeeVector;
| U+0295A | ⥚ |
leftthreetimes;
| U+022CB | ⋋ |
LeftTriangle;
| U+022B2 | ⊲ |
LeftTriangleBar;
| U+029CF | ⧏ |
LeftTriangleEqual;
| U+022B4 | ⊴ |
LeftUpDownVector;
| U+02951 | ⥑ |
LeftUpTeeVector;
| U+02960 | ⥠ |
LeftUpVector;
| U+021BF | ↿ |
LeftUpVectorBar;
| U+02958 | ⥘ |
LeftVector;
| U+021BC | ↼ |
LeftVectorBar;
| U+02952 | ⥒ |
lEg;
| U+02A8B | ⪋ |
leg;
| U+022DA | ⋚ |
leq;
| U+02264 | ≤ |
leqq;
| U+02266 | ≦ |
leqslant;
| U+02A7D | ⩽ |
les;
| U+02A7D | ⩽ |
lescc;
| U+02AA8 | ⪨ |
lesdot;
| U+02A7F | ⩿ |
lesdoto;
| U+02A81 | ⪁ |
lesdotor;
| U+02A83 | ⪃ |
lesg;
| U+022DA U+0FE00 | ⋚︀ |
lesges;
| U+02A93 | ⪓ |
lessapprox;
| U+02A85 | ⪅ |
lessdot;
| U+022D6 | ⋖ |
lesseqgtr;
| U+022DA | ⋚ |
lesseqqgtr;
| U+02A8B | ⪋ |
LessEqualGreater;
| U+022DA | ⋚ |
LessFullEqual;
| U+02266 | ≦ |
LessGreater;
| U+02276 | ≶ |
lessgtr;
| U+02276 | ≶ |
LessLess;
| U+02AA1 | ⪡ |
lesssim;
| U+02272 | ≲ |
LessSlantEqual;
| U+02A7D | ⩽ |
LessTilde;
| U+02272 | ≲ |
lfisht;
| U+0297C | ⥼ |
lfloor;
| U+0230A | ⌊ |
Lfr;
| U+1D50F | 𝔏 |
lfr;
| U+1D529 | 𝔩 |
lg;
| U+02276 | ≶ |
lgE;
| U+02A91 | ⪑ |
lHar;
| U+02962 | ⥢ |
lhard;
| U+021BD | ↽ |
lharu;
| U+021BC | ↼ |
lharul;
| U+0296A | ⥪ |
lhblk;
| U+02584 | ▄ |
LJcy;
| U+00409 | Љ |
ljcy;
| U+00459 | љ |
Ll;
| U+022D8 | ⋘ |
ll;
| U+0226A | ≪ |
llarr;
| U+021C7 | ⇇ |
llcorner;
| U+0231E | ⌞ |
Lleftarrow;
| U+021DA | ⇚ |
llhard;
| U+0296B | ⥫ |
lltri;
| U+025FA | ◺ |
Lmidot;
| U+0013F | Ŀ |
lmidot;
| U+00140 | ŀ |
lmoust;
| U+023B0 | ⎰ |
lmoustache;
| U+023B0 | ⎰ |
lnap;
| U+02A89 | ⪉ |
lnapprox;
| U+02A89 | ⪉ |
lnE;
| U+02268 | ≨ |
lne;
| U+02A87 | ⪇ |
lneq;
| U+02A87 | ⪇ |
lneqq;
| U+02268 | ≨ |
lnsim;
| U+022E6 | ⋦ |
loang;
| U+027EC | ⟬ |
loarr;
| U+021FD | ⇽ |
lobrk;
| U+027E6 | ⟦ |
LongLeftArrow;
| U+027F5 | ⟵ |
Longleftarrow;
| U+027F8 | ⟸ |
longleftarrow;
| U+027F5 | ⟵ |
LongLeftRightArrow;
| U+027F7 | ⟷ |
Longleftrightarrow;
| U+027FA | ⟺ |
longleftrightarrow;
| U+027F7 | ⟷ |
longmapsto;
| U+027FC | ⟼ |
LongRightArrow;
| U+027F6 | ⟶ |
Longrightarrow;
| U+027F9 | ⟹ |
longrightarrow;
| U+027F6 | ⟶ |
looparrowleft;
| U+021AB | ↫ |
looparrowright;
| U+021AC | ↬ |
lopar;
| U+02985 | ⦅ |
Lopf;
| U+1D543 | 𝕃 |
lopf;
| U+1D55D | 𝕝 |
loplus;
| U+02A2D | ⨭ |
lotimes;
| U+02A34 | ⨴ |
lowast;
| U+02217 | ∗ |
lowbar;
| U+0005F | _ |
LowerLeftArrow;
| U+02199 | ↙ |
LowerRightArrow;
| U+02198 | ↘ |
loz;
| U+025CA | ◊ |
lozenge;
| U+025CA | ◊ |
lozf;
| U+029EB | ⧫ |
lpar;
| U+00028 | ( |
lparlt;
| U+02993 | ⦓ |
lrarr;
| U+021C6 | ⇆ |
lrcorner;
| U+0231F | ⌟ |
lrhar;
| U+021CB | ⇋ |
lrhard;
| U+0296D | ⥭ |
lrm;
| U+0200E | |
lrtri;
| U+022BF | ⊿ |
lsaquo;
| U+02039 | ‹ |
Lscr;
| U+02112 | ℒ |
lscr;
| U+1D4C1 | 𝓁 |
Lsh;
| U+021B0 | ↰ |
lsh;
| U+021B0 | ↰ |
lsim;
| U+02272 | ≲ |
lsime;
| U+02A8D | ⪍ |
lsimg;
| U+02A8F | ⪏ |
lsqb;
| U+0005B | [ |
lsquo;
| U+02018 | ‘ |
lsquor;
| U+0201A | ‚ |
Lstrok;
| U+00141 | Ł |
lstrok;
| U+00142 | ł |
LT;
| U+0003C | < |
LT
| U+0003C | < |
Lt;
| U+0226A | ≪ |
lt;
| U+0003C | < |
lt
| U+0003C | < |
ltcc;
| U+02AA6 | ⪦ |
ltcir;
| U+02A79 | ⩹ |
ltdot;
| U+022D6 | ⋖ |
lthree;
| U+022CB | ⋋ |
ltimes;
| U+022C9 | ⋉ |
ltlarr;
| U+02976 | ⥶ |
ltquest;
| U+02A7B | ⩻ |
ltri;
| U+025C3 | ◃ |
ltrie;
| U+022B4 | ⊴ |
ltrif;
| U+025C2 | ◂ |
ltrPar;
| U+02996 | ⦖ |
lurdshar;
| U+0294A | ⥊ |
luruhar;
| U+02966 | ⥦ |
lvertneqq;
| U+02268 U+0FE00 | ≨︀ |
lvnE;
| U+02268 U+0FE00 | ≨︀ |
macr;
| U+000AF | ¯ |
macr
| U+000AF | ¯ |
male;
| U+02642 | ♂ |
malt;
| U+02720 | ✠ |
maltese;
| U+02720 | ✠ |
Map;
| U+02905 | ⤅ |
map;
| U+021A6 | ↦ |
mapsto;
| U+021A6 | ↦ |
mapstodown;
| U+021A7 | ↧ |
mapstoleft;
| U+021A4 | ↤ |
mapstoup;
| U+021A5 | ↥ |
marker;
| U+025AE | ▮ |
mcomma;
| U+02A29 | ⨩ |
Mcy;
| U+0041C | М |
mcy;
| U+0043C | м |
mdash;
| U+02014 | — |
mDDot;
| U+0223A | ∺ |
measuredangle;
| U+02221 | ∡ |
MediumSpace;
| U+0205F | |
Mellintrf;
| U+02133 | ℳ |
Mfr;
| U+1D510 | 𝔐 |
mfr;
| U+1D52A | 𝔪 |
mho;
| U+02127 | ℧ |
micro;
| U+000B5 | µ |
micro
| U+000B5 | µ |
mid;
| U+02223 | ∣ |
midast;
| U+0002A | * |
midcir;
| U+02AF0 | ⫰ |
middot;
| U+000B7 | · |
middot
| U+000B7 | · |
minus;
| U+02212 | − |
minusb;
| U+0229F | ⊟ |
minusd;
| U+02238 | ∸ |
minusdu;
| U+02A2A | ⨪ |
MinusPlus;
| U+02213 | ∓ |
mlcp;
| U+02ADB | ⫛ |
mldr;
| U+02026 | … |
mnplus;
| U+02213 | ∓ |
models;
| U+022A7 | ⊧ |
Mopf;
| U+1D544 | 𝕄 |
mopf;
| U+1D55E | 𝕞 |
mp;
| U+02213 | ∓ |
Mscr;
| U+02133 | ℳ |
mscr;
| U+1D4C2 | 𝓂 |
mstpos;
| U+0223E | ∾ |
Mu;
| U+0039C | Μ |
mu;
| U+003BC | μ |
multimap;
| U+022B8 | ⊸ |
mumap;
| U+022B8 | ⊸ |
nabla;
| U+02207 | ∇ |
Nacute;
| U+00143 | Ń |
nacute;
| U+00144 | ń |
nang;
| U+02220 U+020D2 | ∠⃒ |
nap;
| U+02249 | ≉ |
napE;
| U+02A70 U+00338 | ⩰̸ |
napid;
| U+0224B U+00338 | ≋̸ |
napos;
| U+00149 | ʼn |
napprox;
| U+02249 | ≉ |
natur;
| U+0266E | ♮ |
natural;
| U+0266E | ♮ |
naturals;
| U+02115 | ℕ |
nbsp;
| U+000A0 | |
nbsp
| U+000A0 | |
nbump;
| U+0224E U+00338 | ≎̸ |
nbumpe;
| U+0224F U+00338 | ≏̸ |
ncap;
| U+02A43 | ⩃ |
Ncaron;
| U+00147 | Ň |
ncaron;
| U+00148 | ň |
Ncedil;
| U+00145 | Ņ |
ncedil;
| U+00146 | ņ |
ncong;
| U+02247 | ≇ |
ncongdot;
| U+02A6D U+00338 | ⩭̸ |
ncup;
| U+02A42 | ⩂ |
Ncy;
| U+0041D | Н |
ncy;
| U+0043D | н |
ndash;
| U+02013 | – |
ne;
| U+02260 | ≠ |
nearhk;
| U+02924 | ⤤ |
neArr;
| U+021D7 | ⇗ |
nearr;
| U+02197 | ↗ |
nearrow;
| U+02197 | ↗ |
nedot;
| U+02250 U+00338 | ≐̸ |
NegativeMediumSpace;
| U+0200B | |
NegativeThickSpace;
| U+0200B | |
NegativeThinSpace;
| U+0200B | |
NegativeVeryThinSpace;
| U+0200B | |
nequiv;
| U+02262 | ≢ |
nesear;
| U+02928 | ⤨ |
nesim;
| U+02242 U+00338 | ≂̸ |
NestedGreaterGreater;
| U+0226B | ≫ |
NestedLessLess;
| U+0226A | ≪ |
NewLine;
| U+0000A | ␊ |
nexist;
| U+02204 | ∄ |
nexists;
| U+02204 | ∄ |
Nfr;
| U+1D511 | 𝔑 |
nfr;
| U+1D52B | 𝔫 |
ngE;
| U+02267 U+00338 | ≧̸ |
nge;
| U+02271 | ≱ |
ngeq;
| U+02271 | ≱ |
ngeqq;
| U+02267 U+00338 | ≧̸ |
ngeqslant;
| U+02A7E U+00338 | ⩾̸ |
nges;
| U+02A7E U+00338 | ⩾̸ |
nGg;
| U+022D9 U+00338 | ⋙̸ |
ngsim;
| U+02275 | ≵ |
nGt;
| U+0226B U+020D2 | ≫⃒ |
ngt;
| U+0226F | ≯ |
ngtr;
| U+0226F | ≯ |
nGtv;
| U+0226B U+00338 | ≫̸ |
nhArr;
| U+021CE | ⇎ |
nharr;
| U+021AE | ↮ |
nhpar;
| U+02AF2 | ⫲ |
ni;
| U+0220B | ∋ |
nis;
| U+022FC | ⋼ |
nisd;
| U+022FA | ⋺ |
niv;
| U+0220B | ∋ |
NJcy;
| U+0040A | Њ |
njcy;
| U+0045A | њ |
nlArr;
| U+021CD | ⇍ |
nlarr;
| U+0219A | ↚ |
nldr;
| U+02025 | ‥ |
nlE;
| U+02266 U+00338 | ≦̸ |
nle;
| U+02270 | ≰ |
nLeftarrow;
| U+021CD | ⇍ |
nleftarrow;
| U+0219A | ↚ |
nLeftrightarrow;
| U+021CE | ⇎ |
nleftrightarrow;
| U+021AE | ↮ |
nleq;
| U+02270 | ≰ |
nleqq;
| U+02266 U+00338 | ≦̸ |
nleqslant;
| U+02A7D U+00338 | ⩽̸ |
nles;
| U+02A7D U+00338 | ⩽̸ |
nless;
| U+0226E | ≮ |
nLl;
| U+022D8 U+00338 | ⋘̸ |
nlsim;
| U+02274 | ≴ |
nLt;
| U+0226A U+020D2 | ≪⃒ |
nlt;
| U+0226E | ≮ |
nltri;
| U+022EA | ⋪ |
nltrie;
| U+022EC | ⋬ |
nLtv;
| U+0226A U+00338 | ≪̸ |
nmid;
| U+02224 | ∤ |
NoBreak;
| U+02060 | |
NonBreakingSpace;
| U+000A0 | |
Nopf;
| U+02115 | ℕ |
nopf;
| U+1D55F | 𝕟 |
Not;
| U+02AEC | ⫬ |
not;
| U+000AC | ¬ |
not
| U+000AC | ¬ |
NotCongruent;
| U+02262 | ≢ |
NotCupCap;
| U+0226D | ≭ |
NotDoubleVerticalBar;
| U+02226 | ∦ |
NotElement;
| U+02209 | ∉ |
NotEqual;
| U+02260 | ≠ |
NotEqualTilde;
| U+02242 U+00338 | ≂̸ |
NotExists;
| U+02204 | ∄ |
NotGreater;
| U+0226F | ≯ |
NotGreaterEqual;
| U+02271 | ≱ |
NotGreaterFullEqual;
| U+02267 U+00338 | ≧̸ |
NotGreaterGreater;
| U+0226B U+00338 | ≫̸ |
NotGreaterLess;
| U+02279 | ≹ |
NotGreaterSlantEqual;
| U+02A7E U+00338 | ⩾̸ |
NotGreaterTilde;
| U+02275 | ≵ |
NotHumpDownHump;
| U+0224E U+00338 | ≎̸ |
NotHumpEqual;
| U+0224F U+00338 | ≏̸ |
notin;
| U+02209 | ∉ |
notindot;
| U+022F5 U+00338 | ⋵̸ |
notinE;
| U+022F9 U+00338 | ⋹̸ |
notinva;
| U+02209 | ∉ |
notinvb;
| U+022F7 | ⋷ |
notinvc;
| U+022F6 | ⋶ |
NotLeftTriangle;
| U+022EA | ⋪ |
NotLeftTriangleBar;
| U+029CF U+00338 | ⧏̸ |
NotLeftTriangleEqual;
| U+022EC | ⋬ |
NotLess;
| U+0226E | ≮ |
NotLessEqual;
| U+02270 | ≰ |
NotLessGreater;
| U+02278 | ≸ |
NotLessLess;
| U+0226A U+00338 | ≪̸ |
NotLessSlantEqual;
| U+02A7D U+00338 | ⩽̸ |
NotLessTilde;
| U+02274 | ≴ |
NotNestedGreaterGreater;
| U+02AA2 U+00338 | ⪢̸ |
NotNestedLessLess;
| U+02AA1 U+00338 | ⪡̸ |
notni;
| U+0220C | ∌ |
notniva;
| U+0220C | ∌ |
notnivb;
| U+022FE | ⋾ |
notnivc;
| U+022FD | ⋽ |
NotPrecedes;
| U+02280 | ⊀ |
NotPrecedesEqual;
| U+02AAF U+00338 | ⪯̸ |
NotPrecedesSlantEqual;
| U+022E0 | ⋠ |
NotReverseElement;
| U+0220C | ∌ |
NotRightTriangle;
| U+022EB | ⋫ |
NotRightTriangleBar;
| U+029D0 U+00338 | ⧐̸ |
NotRightTriangleEqual;
| U+022ED | ⋭ |
NotSquareSubset;
| U+0228F U+00338 | ⊏̸ |
NotSquareSubsetEqual;
| U+022E2 | ⋢ |
NotSquareSuperset;
| U+02290 U+00338 | ⊐̸ |
NotSquareSupersetEqual;
| U+022E3 | ⋣ |
NotSubset;
| U+02282 U+020D2 | ⊂⃒ |
NotSubsetEqual;
| U+02288 | ⊈ |
NotSucceeds;
| U+02281 | ⊁ |
NotSucceedsEqual;
| U+02AB0 U+00338 | ⪰̸ |
NotSucceedsSlantEqual;
| U+022E1 | ⋡ |
NotSucceedsTilde;
| U+0227F U+00338 | ≿̸ |
NotSuperset;
| U+02283 U+020D2 | ⊃⃒ |
NotSupersetEqual;
| U+02289 | ⊉ |
NotTilde;
| U+02241 | ≁ |
NotTildeEqual;
| U+02244 | ≄ |
NotTildeFullEqual;
| U+02247 | ≇ |
NotTildeTilde;
| U+02249 | ≉ |
NotVerticalBar;
| U+02224 | ∤ |
npar;
| U+02226 | ∦ |
nparallel;
| U+02226 | ∦ |
nparsl;
| U+02AFD U+020E5 | ⫽⃥ |
npart;
| U+02202 U+00338 | ∂̸ |
npolint;
| U+02A14 | ⨔ |
npr;
| U+02280 | ⊀ |
nprcue;
| U+022E0 | ⋠ |
npre;
| U+02AAF U+00338 | ⪯̸ |
nprec;
| U+02280 | ⊀ |
npreceq;
| U+02AAF U+00338 | ⪯̸ |
nrArr;
| U+021CF | ⇏ |
nrarr;
| U+0219B | ↛ |
nrarrc;
| U+02933 U+00338 | ⤳̸ |
nrarrw;
| U+0219D U+00338 | ↝̸ |
nRightarrow;
| U+021CF | ⇏ |
nrightarrow;
| U+0219B | ↛ |
nrtri;
| U+022EB | ⋫ |
nrtrie;
| U+022ED | ⋭ |
nsc;
| U+02281 | ⊁ |
nsccue;
| U+022E1 | ⋡ |
nsce;
| U+02AB0 U+00338 | ⪰̸ |
Nscr;
| U+1D4A9 | 𝒩 |
nscr;
| U+1D4C3 | 𝓃 |
nshortmid;
| U+02224 | ∤ |
nshortparallel;
| U+02226 | ∦ |
nsim;
| U+02241 | ≁ |
nsime;
| U+02244 | ≄ |
nsimeq;
| U+02244 | ≄ |
nsmid;
| U+02224 | ∤ |
nspar;
| U+02226 | ∦ |
nsqsube;
| U+022E2 | ⋢ |
nsqsupe;
| U+022E3 | ⋣ |
nsub;
| U+02284 | ⊄ |
nsubE;
| U+02AC5 U+00338 | ⫅̸ |
nsube;
| U+02288 | ⊈ |
nsubset;
| U+02282 U+020D2 | ⊂⃒ |
nsubseteq;
| U+02288 | ⊈ |
nsubseteqq;
| U+02AC5 U+00338 | ⫅̸ |
nsucc;
| U+02281 | ⊁ |
nsucceq;
| U+02AB0 U+00338 | ⪰̸ |
nsup;
| U+02285 | ⊅ |
nsupE;
| U+02AC6 U+00338 | ⫆̸ |
nsupe;
| U+02289 | ⊉ |
nsupset;
| U+02283 U+020D2 | ⊃⃒ |
nsupseteq;
| U+02289 | ⊉ |
nsupseteqq;
| U+02AC6 U+00338 | ⫆̸ |
ntgl;
| U+02279 | ≹ |
Ntilde;
| U+000D1 | Ñ |
Ntilde
| U+000D1 | Ñ |
ntilde;
| U+000F1 | ñ |
ntilde
| U+000F1 | ñ |
ntlg;
| U+02278 | ≸ |
ntriangleleft;
| U+022EA | ⋪ |
ntrianglelefteq;
| U+022EC | ⋬ |
ntriangleright;
| U+022EB | ⋫ |
ntrianglerighteq;
| U+022ED | ⋭ |
Nu;
| U+0039D | Ν |
nu;
| U+003BD | ν |
num;
| U+00023 | # |
numero;
| U+02116 | № |
numsp;
| U+02007 | |
nvap;
| U+0224D U+020D2 | ≍⃒ |
nVDash;
| U+022AF | ⊯ |
nVdash;
| U+022AE | ⊮ |
nvDash;
| U+022AD | ⊭ |
nvdash;
| U+022AC | ⊬ |
nvge;
| U+02265 U+020D2 | ≥⃒ |
nvgt;
| U+0003E U+020D2 | >⃒ |
nvHarr;
| U+02904 | ⤄ |
nvinfin;
| U+029DE | ⧞ |
nvlArr;
| U+02902 | ⤂ |
nvle;
| U+02264 U+020D2 | ≤⃒ |
nvlt;
| U+0003C U+020D2 | <⃒ |
nvltrie;
| U+022B4 U+020D2 | ⊴⃒ |
nvrArr;
| U+02903 | ⤃ |
nvrtrie;
| U+022B5 U+020D2 | ⊵⃒ |
nvsim;
| U+0223C U+020D2 | ∼⃒ |
nwarhk;
| U+02923 | ⤣ |
nwArr;
| U+021D6 | ⇖ |
nwarr;
| U+02196 | ↖ |
nwarrow;
| U+02196 | ↖ |
nwnear;
| U+02927 | ⤧ |
Oacute;
| U+000D3 | Ó |
Oacute
| U+000D3 | Ó |
oacute;
| U+000F3 | ó |
oacute
| U+000F3 | ó |
oast;
| U+0229B | ⊛ |
ocir;
| U+0229A | ⊚ |
Ocirc;
| U+000D4 | Ô |
Ocirc
| U+000D4 | Ô |
ocirc;
| U+000F4 | ô |
ocirc
| U+000F4 | ô |
Ocy;
| U+0041E | О |
ocy;
| U+0043E | о |
odash;
| U+0229D | ⊝ |
Odblac;
| U+00150 | Ő |
odblac;
| U+00151 | ő |
odiv;
| U+02A38 | ⨸ |
odot;
| U+02299 | ⊙ |
odsold;
| U+029BC | ⦼ |
OElig;
| U+00152 | Œ |
oelig;
| U+00153 | œ |
ofcir;
| U+029BF | ⦿ |
Ofr;
| U+1D512 | 𝔒 |
ofr;
| U+1D52C | 𝔬 |
ogon;
| U+002DB | ˛ |
Ograve;
| U+000D2 | Ò |
Ograve
| U+000D2 | Ò |
ograve;
| U+000F2 | ò |
ograve
| U+000F2 | ò |
ogt;
| U+029C1 | ⧁ |
ohbar;
| U+029B5 | ⦵ |
ohm;
| U+003A9 | Ω |
oint;
| U+0222E | ∮ |
olarr;
| U+021BA | ↺ |
olcir;
| U+029BE | ⦾ |
olcross;
| U+029BB | ⦻ |
oline;
| U+0203E | ‾ |
olt;
| U+029C0 | ⧀ |
Omacr;
| U+0014C | Ō |
omacr;
| U+0014D | ō |
Omega;
| U+003A9 | Ω |
omega;
| U+003C9 | ω |
Omicron;
| U+0039F | Ο |
omicron;
| U+003BF | ο |
omid;
| U+029B6 | ⦶ |
ominus;
| U+02296 | ⊖ |
Oopf;
| U+1D546 | 𝕆 |
oopf;
| U+1D560 | 𝕠 |
opar;
| U+029B7 | ⦷ |
OpenCurlyDoubleQuote;
| U+0201C | “ |
OpenCurlyQuote;
| U+02018 | ‘ |
operp;
| U+029B9 | ⦹ |
oplus;
| U+02295 | ⊕ |
Or;
| U+02A54 | ⩔ |
or;
| U+02228 | ∨ |
orarr;
| U+021BB | ↻ |
ord;
| U+02A5D | ⩝ |
order;
| U+02134 | ℴ |
orderof;
| U+02134 | ℴ |
ordf;
| U+000AA | ª |
ordf
| U+000AA | ª |
ordm;
| U+000BA | º |
ordm
| U+000BA | º |
origof;
| U+022B6 | ⊶ |
oror;
| U+02A56 | ⩖ |
orslope;
| U+02A57 | ⩗ |
orv;
| U+02A5B | ⩛ |
oS;
| U+024C8 | Ⓢ |
Oscr;
| U+1D4AA | 𝒪 |
oscr;
| U+02134 | ℴ |
Oslash;
| U+000D8 | Ø |
Oslash
| U+000D8 | Ø |
oslash;
| U+000F8 | ø |
oslash
| U+000F8 | ø |
osol;
| U+02298 | ⊘ |
Otilde;
| U+000D5 | Õ |
Otilde
| U+000D5 | Õ |
otilde;
| U+000F5 | õ |
otilde
| U+000F5 | õ |
Otimes;
| U+02A37 | ⨷ |
otimes;
| U+02297 | ⊗ |
otimesas;
| U+02A36 | ⨶ |
Ouml;
| U+000D6 | Ö |
Ouml
| U+000D6 | Ö |
ouml;
| U+000F6 | ö |
ouml
| U+000F6 | ö |
ovbar;
| U+0233D | ⌽ |
OverBar;
| U+0203E | ‾ |
OverBrace;
| U+023DE | ⏞ |
OverBracket;
| U+023B4 | ⎴ |
OverParenthesis;
| U+023DC | ⏜ |
par;
| U+02225 | ∥ |
para;
| U+000B6 | ¶ |
para
| U+000B6 | ¶ |
parallel;
| U+02225 | ∥ |
parsim;
| U+02AF3 | ⫳ |
parsl;
| U+02AFD | ⫽ |
part;
| U+02202 | ∂ |
PartialD;
| U+02202 | ∂ |
Pcy;
| U+0041F | П |
pcy;
| U+0043F | п |
percnt;
| U+00025 | % |
period;
| U+0002E | . |
permil;
| U+02030 | ‰ |
perp;
| U+022A5 | ⊥ |
pertenk;
| U+02031 | ‱ |
Pfr;
| U+1D513 | 𝔓 |
pfr;
| U+1D52D | 𝔭 |
Phi;
| U+003A6 | Φ |
phi;
| U+003C6 | φ |
phiv;
| U+003D5 | ϕ |
phmmat;
| U+02133 | ℳ |
phone;
| U+0260E | ☎ |
Pi;
| U+003A0 | Π |
pi;
| U+003C0 | π |
pitchfork;
| U+022D4 | ⋔ |
piv;
| U+003D6 | ϖ |
planck;
| U+0210F | ℏ |
planckh;
| U+0210E | ℎ |
plankv;
| U+0210F | ℏ |
plus;
| U+0002B | + |
plusacir;
| U+02A23 | ⨣ |
plusb;
| U+0229E | ⊞ |
pluscir;
| U+02A22 | ⨢ |
plusdo;
| U+02214 | ∔ |
plusdu;
| U+02A25 | ⨥ |
pluse;
| U+02A72 | ⩲ |
PlusMinus;
| U+000B1 | ± |
plusmn;
| U+000B1 | ± |
plusmn
| U+000B1 | ± |
plussim;
| U+02A26 | ⨦ |
plustwo;
| U+02A27 | ⨧ |
pm;
| U+000B1 | ± |
Poincareplane;
| U+0210C | ℌ |
pointint;
| U+02A15 | ⨕ |
Popf;
| U+02119 | ℙ |
popf;
| U+1D561 | 𝕡 |
pound;
| U+000A3 | £ |
pound
| U+000A3 | £ |
Pr;
| U+02ABB | ⪻ |
pr;
| U+0227A | ≺ |
prap;
| U+02AB7 | ⪷ |
prcue;
| U+0227C | ≼ |
prE;
| U+02AB3 | ⪳ |
pre;
| U+02AAF | ⪯ |
prec;
| U+0227A | ≺ |
precapprox;
| U+02AB7 | ⪷ |
preccurlyeq;
| U+0227C | ≼ |
Precedes;
| U+0227A | ≺ |
PrecedesEqual;
| U+02AAF | ⪯ |
PrecedesSlantEqual;
| U+0227C | ≼ |
PrecedesTilde;
| U+0227E | ≾ |
preceq;
| U+02AAF | ⪯ |
precnapprox;
| U+02AB9 | ⪹ |
precneqq;
| U+02AB5 | ⪵ |
precnsim;
| U+022E8 | ⋨ |
precsim;
| U+0227E | ≾ |
Prime;
| U+02033 | ″ |
prime;
| U+02032 | ′ |
primes;
| U+02119 | ℙ |
prnap;
| U+02AB9 | ⪹ |
prnE;
| U+02AB5 | ⪵ |
prnsim;
| U+022E8 | ⋨ |
prod;
| U+0220F | ∏ |
Product;
| U+0220F | ∏ |
profalar;
| U+0232E | ⌮ |
profline;
| U+02312 | ⌒ |
profsurf;
| U+02313 | ⌓ |
prop;
| U+0221D | ∝ |
Proportion;
| U+02237 | ∷ |
Proportional;
| U+0221D | ∝ |
propto;
| U+0221D | ∝ |
prsim;
| U+0227E | ≾ |
prurel;
| U+022B0 | ⊰ |
Pscr;
| U+1D4AB | 𝒫 |
pscr;
| U+1D4C5 | 𝓅 |
Psi;
| U+003A8 | Ψ |
psi;
| U+003C8 | ψ |
puncsp;
| U+02008 | |
Qfr;
| U+1D514 | 𝔔 |
qfr;
| U+1D52E | 𝔮 |
qint;
| U+02A0C | ⨌ |
Qopf;
| U+0211A | ℚ |
qopf;
| U+1D562 | 𝕢 |
qprime;
| U+02057 | ⁗ |
Qscr;
| U+1D4AC | 𝒬 |
qscr;
| U+1D4C6 | 𝓆 |
quaternions;
| U+0210D | ℍ |
quatint;
| U+02A16 | ⨖ |
quest;
| U+0003F | ? |
questeq;
| U+0225F | ≟ |
QUOT;
| U+00022 | " |
QUOT
| U+00022 | " |
quot;
| U+00022 | " |
quot
| U+00022 | " |
rAarr;
| U+021DB | ⇛ |
race;
| U+0223D U+00331 | ∽̱ |
Racute;
| U+00154 | Ŕ |
racute;
| U+00155 | ŕ |
radic;
| U+0221A | √ |
raemptyv;
| U+029B3 | ⦳ |
Rang;
| U+027EB | ⟫ |
rang;
| U+027E9 | ⟩ |
rangd;
| U+02992 | ⦒ |
range;
| U+029A5 | ⦥ |
rangle;
| U+027E9 | ⟩ |
raquo;
| U+000BB | » |
raquo
| U+000BB | » |
Rarr;
| U+021A0 | ↠ |
rArr;
| U+021D2 | ⇒ |
rarr;
| U+02192 | → |
rarrap;
| U+02975 | ⥵ |
rarrb;
| U+021E5 | ⇥ |
rarrbfs;
| U+02920 | ⤠ |
rarrc;
| U+02933 | ⤳ |
rarrfs;
| U+0291E | ⤞ |
rarrhk;
| U+021AA | ↪ |
rarrlp;
| U+021AC | ↬ |
rarrpl;
| U+02945 | ⥅ |
rarrsim;
| U+02974 | ⥴ |
Rarrtl;
| U+02916 | ⤖ |
rarrtl;
| U+021A3 | ↣ |
rarrw;
| U+0219D | ↝ |
rAtail;
| U+0291C | ⤜ |
ratail;
| U+0291A | ⤚ |
ratio;
| U+02236 | ∶ |
rationals;
| U+0211A | ℚ |
RBarr;
| U+02910 | ⤐ |
rBarr;
| U+0290F | ⤏ |
rbarr;
| U+0290D | ⤍ |
rbbrk;
| U+02773 | ❳ |
rbrace;
| U+0007D | } |
rbrack;
| U+0005D | ] |
rbrke;
| U+0298C | ⦌ |
rbrksld;
| U+0298E | ⦎ |
rbrkslu;
| U+02990 | ⦐ |
Rcaron;
| U+00158 | Ř |
rcaron;
| U+00159 | ř |
Rcedil;
| U+00156 | Ŗ |
rcedil;
| U+00157 | ŗ |
rceil;
| U+02309 | ⌉ |
rcub;
| U+0007D | } |
Rcy;
| U+00420 | Р |
rcy;
| U+00440 | р |
rdca;
| U+02937 | ⤷ |
rdldhar;
| U+02969 | ⥩ |
rdquo;
| U+0201D | ” |
rdquor;
| U+0201D | ” |
rdsh;
| U+021B3 | ↳ |
Re;
| U+0211C | ℜ |
real;
| U+0211C | ℜ |
realine;
| U+0211B | ℛ |
realpart;
| U+0211C | ℜ |
reals;
| U+0211D | ℝ |
rect;
| U+025AD | ▭ |
REG;
| U+000AE | ® |
REG
| U+000AE | ® |
reg;
| U+000AE | ® |
reg
| U+000AE | ® |
ReverseElement;
| U+0220B | ∋ |
ReverseEquilibrium;
| U+021CB | ⇋ |
ReverseUpEquilibrium;
| U+0296F | ⥯ |
rfisht;
| U+0297D | ⥽ |
rfloor;
| U+0230B | ⌋ |
Rfr;
| U+0211C | ℜ |
rfr;
| U+1D52F | 𝔯 |
rHar;
| U+02964 | ⥤ |
rhard;
| U+021C1 | ⇁ |
rharu;
| U+021C0 | ⇀ |
rharul;
| U+0296C | ⥬ |
Rho;
| U+003A1 | Ρ |
rho;
| U+003C1 | ρ |
rhov;
| U+003F1 | ϱ |
RightAngleBracket;
| U+027E9 | ⟩ |
RightArrow;
| U+02192 | → |
Rightarrow;
| U+021D2 | ⇒ |
rightarrow;
| U+02192 | → |
RightArrowBar;
| U+021E5 | ⇥ |
RightArrowLeftArrow;
| U+021C4 | ⇄ |
rightarrowtail;
| U+021A3 | ↣ |
RightCeiling;
| U+02309 | ⌉ |
RightDoubleBracket;
| U+027E7 | ⟧ |
RightDownTeeVector;
| U+0295D | ⥝ |
RightDownVector;
| U+021C2 | ⇂ |
RightDownVectorBar;
| U+02955 | ⥕ |
RightFloor;
| U+0230B | ⌋ |
rightharpoondown;
| U+021C1 | ⇁ |
rightharpoonup;
| U+021C0 | ⇀ |
rightleftarrows;
| U+021C4 | ⇄ |
rightleftharpoons;
| U+021CC | ⇌ |
rightrightarrows;
| U+021C9 | ⇉ |
rightsquigarrow;
| U+0219D | ↝ |
RightTee;
| U+022A2 | ⊢ |
RightTeeArrow;
| U+021A6 | ↦ |
RightTeeVector;
| U+0295B | ⥛ |
rightthreetimes;
| U+022CC | ⋌ |
RightTriangle;
| U+022B3 | ⊳ |
RightTriangleBar;
| U+029D0 | ⧐ |
RightTriangleEqual;
| U+022B5 | ⊵ |
RightUpDownVector;
| U+0294F | ⥏ |
RightUpTeeVector;
| U+0295C | ⥜ |
RightUpVector;
| U+021BE | ↾ |
RightUpVectorBar;
| U+02954 | ⥔ |
RightVector;
| U+021C0 | ⇀ |
RightVectorBar;
| U+02953 | ⥓ |
ring;
| U+002DA | ˚ |
risingdotseq;
| U+02253 | ≓ |
rlarr;
| U+021C4 | ⇄ |
rlhar;
| U+021CC | ⇌ |
rlm;
| U+0200F | |
rmoust;
| U+023B1 | ⎱ |
rmoustache;
| U+023B1 | ⎱ |
rnmid;
| U+02AEE | ⫮ |
roang;
| U+027ED | ⟭ |
roarr;
| U+021FE | ⇾ |
robrk;
| U+027E7 | ⟧ |
ropar;
| U+02986 | ⦆ |
Ropf;
| U+0211D | ℝ |
ropf;
| U+1D563 | 𝕣 |
roplus;
| U+02A2E | ⨮ |
rotimes;
| U+02A35 | ⨵ |
RoundImplies;
| U+02970 | ⥰ |
rpar;
| U+00029 | ) |
rpargt;
| U+02994 | ⦔ |
rppolint;
| U+02A12 | ⨒ |
rrarr;
| U+021C9 | ⇉ |
Rrightarrow;
| U+021DB | ⇛ |
rsaquo;
| U+0203A | › |
Rscr;
| U+0211B | ℛ |
rscr;
| U+1D4C7 | 𝓇 |
Rsh;
| U+021B1 | ↱ |
rsh;
| U+021B1 | ↱ |
rsqb;
| U+0005D | ] |
rsquo;
| U+02019 | ’ |
rsquor;
| U+02019 | ’ |
rthree;
| U+022CC | ⋌ |
rtimes;
| U+022CA | ⋊ |
rtri;
| U+025B9 | ▹ |
rtrie;
| U+022B5 | ⊵ |
rtrif;
| U+025B8 | ▸ |
rtriltri;
| U+029CE | ⧎ |
RuleDelayed;
| U+029F4 | ⧴ |
ruluhar;
| U+02968 | ⥨ |
rx;
| U+0211E | ℞ |
Sacute;
| U+0015A | Ś |
sacute;
| U+0015B | ś |
sbquo;
| U+0201A | ‚ |
Sc;
| U+02ABC | ⪼ |
sc;
| U+0227B | ≻ |
scap;
| U+02AB8 | ⪸ |
Scaron;
| U+00160 | Š |
scaron;
| U+00161 | š |
sccue;
| U+0227D | ≽ |
scE;
| U+02AB4 | ⪴ |
sce;
| U+02AB0 | ⪰ |
Scedil;
| U+0015E | Ş |
scedil;
| U+0015F | ş |
Scirc;
| U+0015C | Ŝ |
scirc;
| U+0015D | ŝ |
scnap;
| U+02ABA | ⪺ |
scnE;
| U+02AB6 | ⪶ |
scnsim;
| U+022E9 | ⋩ |
scpolint;
| U+02A13 | ⨓ |
scsim;
| U+0227F | ≿ |
Scy;
| U+00421 | С |
scy;
| U+00441 | с |
sdot;
| U+022C5 | ⋅ |
sdotb;
| U+022A1 | ⊡ |
sdote;
| U+02A66 | ⩦ |
searhk;
| U+02925 | ⤥ |
seArr;
| U+021D8 | ⇘ |
searr;
| U+02198 | ↘ |
searrow;
| U+02198 | ↘ |
sect;
| U+000A7 | § |
sect
| U+000A7 | § |
semi;
| U+0003B | ; |
seswar;
| U+02929 | ⤩ |
setminus;
| U+02216 | ∖ |
setmn;
| U+02216 | ∖ |
sext;
| U+02736 | ✶ |
Sfr;
| U+1D516 | 𝔖 |
sfr;
| U+1D530 | 𝔰 |
sfrown;
| U+02322 | ⌢ |
sharp;
| U+0266F | ♯ |
SHCHcy;
| U+00429 | Щ |
shchcy;
| U+00449 | щ |
SHcy;
| U+00428 | Ш |
shcy;
| U+00448 | ш |
ShortDownArrow;
| U+02193 | ↓ |
ShortLeftArrow;
| U+02190 | ← |
shortmid;
| U+02223 | ∣ |
shortparallel;
| U+02225 | ∥ |
ShortRightArrow;
| U+02192 | → |
ShortUpArrow;
| U+02191 | ↑ |
shy;
| U+000AD | |
shy
| U+000AD | |
Sigma;
| U+003A3 | Σ |
sigma;
| U+003C3 | σ |
sigmaf;
| U+003C2 | ς |
sigmav;
| U+003C2 | ς |
sim;
| U+0223C | ∼ |
simdot;
| U+02A6A | ⩪ |
sime;
| U+02243 | ≃ |
simeq;
| U+02243 | ≃ |
simg;
| U+02A9E | ⪞ |
simgE;
| U+02AA0 | ⪠ |
siml;
| U+02A9D | ⪝ |
simlE;
| U+02A9F | ⪟ |
simne;
| U+02246 | ≆ |
simplus;
| U+02A24 | ⨤ |
simrarr;
| U+02972 | ⥲ |
slarr;
| U+02190 | ← |
SmallCircle;
| U+02218 | ∘ |
smallsetminus;
| U+02216 | ∖ |
smashp;
| U+02A33 | ⨳ |
smeparsl;
| U+029E4 | ⧤ |
smid;
| U+02223 | ∣ |
smile;
| U+02323 | ⌣ |
smt;
| U+02AAA | ⪪ |
smte;
| U+02AAC | ⪬ |
smtes;
| U+02AAC U+0FE00 | ⪬︀ |
SOFTcy;
| U+0042C | Ь |
softcy;
| U+0044C | ь |
sol;
| U+0002F | / |
solb;
| U+029C4 | ⧄ |
solbar;
| U+0233F | ⌿ |
Sopf;
| U+1D54A | 𝕊 |
sopf;
| U+1D564 | 𝕤 |
spades;
| U+02660 | ♠ |
spadesuit;
| U+02660 | ♠ |
spar;
| U+02225 | ∥ |
sqcap;
| U+02293 | ⊓ |
sqcaps;
| U+02293 U+0FE00 | ⊓︀ |
sqcup;
| U+02294 | ⊔ |
sqcups;
| U+02294 U+0FE00 | ⊔︀ |
Sqrt;
| U+0221A | √ |
sqsub;
| U+0228F | ⊏ |
sqsube;
| U+02291 | ⊑ |
sqsubset;
| U+0228F | ⊏ |
sqsubseteq;
| U+02291 | ⊑ |
sqsup;
| U+02290 | ⊐ |
sqsupe;
| U+02292 | ⊒ |
sqsupset;
| U+02290 | ⊐ |
sqsupseteq;
| U+02292 | ⊒ |
squ;
| U+025A1 | □ |
Square;
| U+025A1 | □ |
square;
| U+025A1 | □ |
SquareIntersection;
| U+02293 | ⊓ |
SquareSubset;
| U+0228F | ⊏ |
SquareSubsetEqual;
| U+02291 | ⊑ |
SquareSuperset;
| U+02290 | ⊐ |
SquareSupersetEqual;
| U+02292 | ⊒ |
SquareUnion;
| U+02294 | ⊔ |
squarf;
| U+025AA | ▪ |
squf;
| U+025AA | ▪ |
srarr;
| U+02192 | → |
Sscr;
| U+1D4AE | 𝒮 |
sscr;
| U+1D4C8 | 𝓈 |
ssetmn;
| U+02216 | ∖ |
ssmile;
| U+02323 | ⌣ |
sstarf;
| U+022C6 | ⋆ |
Star;
| U+022C6 | ⋆ |
star;
| U+02606 | ☆ |
starf;
| U+02605 | ★ |
straightepsilon;
| U+003F5 | ϵ |
straightphi;
| U+003D5 | ϕ |
strns;
| U+000AF | ¯ |
Sub;
| U+022D0 | ⋐ |
sub;
| U+02282 | ⊂ |
subdot;
| U+02ABD | ⪽ |
subE;
| U+02AC5 | ⫅ |
sube;
| U+02286 | ⊆ |
subedot;
| U+02AC3 | ⫃ |
submult;
| U+02AC1 | ⫁ |
subnE;
| U+02ACB | ⫋ |
subne;
| U+0228A | ⊊ |
subplus;
| U+02ABF | ⪿ |
subrarr;
| U+02979 | ⥹ |
Subset;
| U+022D0 | ⋐ |
subset;
| U+02282 | ⊂ |
subseteq;
| U+02286 | ⊆ |
subseteqq;
| U+02AC5 | ⫅ |
SubsetEqual;
| U+02286 | ⊆ |
subsetneq;
| U+0228A | ⊊ |
subsetneqq;
| U+02ACB | ⫋ |
subsim;
| U+02AC7 | ⫇ |
subsub;
| U+02AD5 | ⫕ |
subsup;
| U+02AD3 | ⫓ |
succ;
| U+0227B | ≻ |
succapprox;
| U+02AB8 | ⪸ |
succcurlyeq;
| U+0227D | ≽ |
Succeeds;
| U+0227B | ≻ |
SucceedsEqual;
| U+02AB0 | ⪰ |
SucceedsSlantEqual;
| U+0227D | ≽ |
SucceedsTilde;
| U+0227F | ≿ |
succeq;
| U+02AB0 | ⪰ |
succnapprox;
| U+02ABA | ⪺ |
succneqq;
| U+02AB6 | ⪶ |
succnsim;
| U+022E9 | ⋩ |
succsim;
| U+0227F | ≿ |
SuchThat;
| U+0220B | ∋ |
Sum;
| U+02211 | ∑ |
sum;
| U+02211 | ∑ |
sung;
| U+0266A | ♪ |
Sup;
| U+022D1 | ⋑ |
sup;
| U+02283 | ⊃ |
sup1;
| U+000B9 | ¹ |
sup1
| U+000B9 | ¹ |
sup2;
| U+000B2 | ² |
sup2
| U+000B2 | ² |
sup3;
| U+000B3 | ³ |
sup3
| U+000B3 | ³ |
supdot;
| U+02ABE | ⪾ |
supdsub;
| U+02AD8 | ⫘ |
supE;
| U+02AC6 | ⫆ |
supe;
| U+02287 | ⊇ |
supedot;
| U+02AC4 | ⫄ |
Superset;
| U+02283 | ⊃ |
SupersetEqual;
| U+02287 | ⊇ |
suphsol;
| U+027C9 | ⟉ |
suphsub;
| U+02AD7 | ⫗ |
suplarr;
| U+0297B | ⥻ |
supmult;
| U+02AC2 | ⫂ |
supnE;
| U+02ACC | ⫌ |
supne;
| U+0228B | ⊋ |
supplus;
| U+02AC0 | ⫀ |
Supset;
| U+022D1 | ⋑ |
supset;
| U+02283 | ⊃ |
supseteq;
| U+02287 | ⊇ |
supseteqq;
| U+02AC6 | ⫆ |
supsetneq;
| U+0228B | ⊋ |
supsetneqq;
| U+02ACC | ⫌ |
supsim;
| U+02AC8 | ⫈ |
supsub;
| U+02AD4 | ⫔ |
supsup;
| U+02AD6 | ⫖ |
swarhk;
| U+02926 | ⤦ |
swArr;
| U+021D9 | ⇙ |
swarr;
| U+02199 | ↙ |
swarrow;
| U+02199 | ↙ |
swnwar;
| U+0292A | ⤪ |
szlig;
| U+000DF | ß |
szlig
| U+000DF | ß |
Tab;
| U+00009 | ␉ |
target;
| U+02316 | ⌖ |
Tau;
| U+003A4 | Τ |
tau;
| U+003C4 | τ |
tbrk;
| U+023B4 | ⎴ |
Tcaron;
| U+00164 | Ť |
tcaron;
| U+00165 | ť |
Tcedil;
| U+00162 | Ţ |
tcedil;
| U+00163 | ţ |
Tcy;
| U+00422 | Т |
tcy;
| U+00442 | т |
tdot;
| U+020DB | ◌⃛ |
telrec;
| U+02315 | ⌕ |
Tfr;
| U+1D517 | 𝔗 |
tfr;
| U+1D531 | 𝔱 |
there4;
| U+02234 | ∴ |
Therefore;
| U+02234 | ∴ |
therefore;
| U+02234 | ∴ |
Theta;
| U+00398 | Θ |
theta;
| U+003B8 | θ |
thetasym;
| U+003D1 | ϑ |
thetav;
| U+003D1 | ϑ |
thickapprox;
| U+02248 | ≈ |
thicksim;
| U+0223C | ∼ |
ThickSpace;
| U+0205F U+0200A | |
thinsp;
| U+02009 | |
ThinSpace;
| U+02009 | |
thkap;
| U+02248 | ≈ |
thksim;
| U+0223C | ∼ |
THORN;
| U+000DE | Þ |
THORN
| U+000DE | Þ |
thorn;
| U+000FE | þ |
thorn
| U+000FE | þ |
Tilde;
| U+0223C | ∼ |
tilde;
| U+002DC | ˜ |
TildeEqual;
| U+02243 | ≃ |
TildeFullEqual;
| U+02245 | ≅ |
TildeTilde;
| U+02248 | ≈ |
times;
| U+000D7 | × |
times
| U+000D7 | × |
timesb;
| U+022A0 | ⊠ |
timesbar;
| U+02A31 | ⨱ |
timesd;
| U+02A30 | ⨰ |
tint;
| U+0222D | ∭ |
toea;
| U+02928 | ⤨ |
top;
| U+022A4 | ⊤ |
topbot;
| U+02336 | ⌶ |
topcir;
| U+02AF1 | ⫱ |
Topf;
| U+1D54B | 𝕋 |
topf;
| U+1D565 | 𝕥 |
topfork;
| U+02ADA | ⫚ |
tosa;
| U+02929 | ⤩ |
tprime;
| U+02034 | ‴ |
TRADE;
| U+02122 | ™ |
trade;
| U+02122 | ™ |
triangle;
| U+025B5 | ▵ |
triangledown;
| U+025BF | ▿ |
triangleleft;
| U+025C3 | ◃ |
trianglelefteq;
| U+022B4 | ⊴ |
triangleq;
| U+0225C | ≜ |
triangleright;
| U+025B9 | ▹ |
trianglerighteq;
| U+022B5 | ⊵ |
tridot;
| U+025EC | ◬ |
trie;
| U+0225C | ≜ |
triminus;
| U+02A3A | ⨺ |
TripleDot;
| U+020DB | ◌⃛ |
triplus;
| U+02A39 | ⨹ |
trisb;
| U+029CD | ⧍ |
tritime;
| U+02A3B | ⨻ |
trpezium;
| U+023E2 | ⏢ |
Tscr;
| U+1D4AF | 𝒯 |
tscr;
| U+1D4C9 | 𝓉 |
TScy;
| U+00426 | Ц |
tscy;
| U+00446 | ц |
TSHcy;
| U+0040B | Ћ |
tshcy;
| U+0045B | ћ |
Tstrok;
| U+00166 | Ŧ |
tstrok;
| U+00167 | ŧ |
twixt;
| U+0226C | ≬ |
twoheadleftarrow;
| U+0219E | ↞ |
twoheadrightarrow;
| U+021A0 | ↠ |
Uacute;
| U+000DA | Ú |
Uacute
| U+000DA | Ú |
uacute;
| U+000FA | ú |
uacute
| U+000FA | ú |
Uarr;
| U+0219F | ↟ |
uArr;
| U+021D1 | ⇑ |
uarr;
| U+02191 | ↑ |
Uarrocir;
| U+02949 | ⥉ |
Ubrcy;
| U+0040E | Ў |
ubrcy;
| U+0045E | ў |
Ubreve;
| U+0016C | Ŭ |
ubreve;
| U+0016D | ŭ |
Ucirc;
| U+000DB | Û |
Ucirc
| U+000DB | Û |
ucirc;
| U+000FB | û |
ucirc
| U+000FB | û |
Ucy;
| U+00423 | У |
ucy;
| U+00443 | у |
udarr;
| U+021C5 | ⇅ |
Udblac;
| U+00170 | Ű |
udblac;
| U+00171 | ű |
udhar;
| U+0296E | ⥮ |
ufisht;
| U+0297E | ⥾ |
Ufr;
| U+1D518 | 𝔘 |
ufr;
| U+1D532 | 𝔲 |
Ugrave;
| U+000D9 | Ù |
Ugrave
| U+000D9 | Ù |
ugrave;
| U+000F9 | ù |
ugrave
| U+000F9 | ù |
uHar;
| U+02963 | ⥣ |
uharl;
| U+021BF | ↿ |
uharr;
| U+021BE | ↾ |
uhblk;
| U+02580 | ▀ |
ulcorn;
| U+0231C | ⌜ |
ulcorner;
| U+0231C | ⌜ |
ulcrop;
| U+0230F | ⌏ |
ultri;
| U+025F8 | ◸ |
Umacr;
| U+0016A | Ū |
umacr;
| U+0016B | ū |
uml;
| U+000A8 | ¨ |
uml
| U+000A8 | ¨ |
UnderBar;
| U+0005F | _ |
UnderBrace;
| U+023DF | ⏟ |
UnderBracket;
| U+023B5 | ⎵ |
UnderParenthesis;
| U+023DD | ⏝ |
Union;
| U+022C3 | ⋃ |
UnionPlus;
| U+0228E | ⊎ |
Uogon;
| U+00172 | Ų |
uogon;
| U+00173 | ų |
Uopf;
| U+1D54C | 𝕌 |
uopf;
| U+1D566 | 𝕦 |
UpArrow;
| U+02191 | ↑ |
Uparrow;
| U+021D1 | ⇑ |
uparrow;
| U+02191 | ↑ |
UpArrowBar;
| U+02912 | ⤒ |
UpArrowDownArrow;
| U+021C5 | ⇅ |
UpDownArrow;
| U+02195 | ↕ |
Updownarrow;
| U+021D5 | ⇕ |
updownarrow;
| U+02195 | ↕ |
UpEquilibrium;
| U+0296E | ⥮ |
upharpoonleft;
| U+021BF | ↿ |
upharpoonright;
| U+021BE | ↾ |
uplus;
| U+0228E | ⊎ |
UpperLeftArrow;
| U+02196 | ↖ |
UpperRightArrow;
| U+02197 | ↗ |
Upsi;
| U+003D2 | ϒ |
upsi;
| U+003C5 | υ |
upsih;
| U+003D2 | ϒ |
Upsilon;
| U+003A5 | Υ |
upsilon;
| U+003C5 | υ |
UpTee;
| U+022A5 | ⊥ |
UpTeeArrow;
| U+021A5 | ↥ |
upuparrows;
| U+021C8 | ⇈ |
urcorn;
| U+0231D | ⌝ |
urcorner;
| U+0231D | ⌝ |
urcrop;
| U+0230E | ⌎ |
Uring;
| U+0016E | Ů |
uring;
| U+0016F | ů |
urtri;
| U+025F9 | ◹ |
Uscr;
| U+1D4B0 | 𝒰 |
uscr;
| U+1D4CA | 𝓊 |
utdot;
| U+022F0 | ⋰ |
Utilde;
| U+00168 | Ũ |
utilde;
| U+00169 | ũ |
utri;
| U+025B5 | ▵ |
utrif;
| U+025B4 | ▴ |
uuarr;
| U+021C8 | ⇈ |
Uuml;
| U+000DC | Ü |
Uuml
| U+000DC | Ü |
uuml;
| U+000FC | ü |
uuml
| U+000FC | ü |
uwangle;
| U+029A7 | ⦧ |
vangrt;
| U+0299C | ⦜ |
varepsilon;
| U+003F5 | ϵ |
varkappa;
| U+003F0 | ϰ |
varnothing;
| U+02205 | ∅ |
varphi;
| U+003D5 | ϕ |
varpi;
| U+003D6 | ϖ |
varpropto;
| U+0221D | ∝ |
vArr;
| U+021D5 | ⇕ |
varr;
| U+02195 | ↕ |
varrho;
| U+003F1 | ϱ |
varsigma;
| U+003C2 | ς |
varsubsetneq;
| U+0228A U+0FE00 | ⊊︀ |
varsubsetneqq;
| U+02ACB U+0FE00 | ⫋︀ |
varsupsetneq;
| U+0228B U+0FE00 | ⊋︀ |
varsupsetneqq;
| U+02ACC U+0FE00 | ⫌︀ |
vartheta;
| U+003D1 | ϑ |
vartriangleleft;
| U+022B2 | ⊲ |
vartriangleright;
| U+022B3 | ⊳ |
Vbar;
| U+02AEB | ⫫ |
vBar;
| U+02AE8 | ⫨ |
vBarv;
| U+02AE9 | ⫩ |
Vcy;
| U+00412 | В |
vcy;
| U+00432 | в |
VDash;
| U+022AB | ⊫ |
Vdash;
| U+022A9 | ⊩ |
vDash;
| U+022A8 | ⊨ |
vdash;
| U+022A2 | ⊢ |
Vdashl;
| U+02AE6 | ⫦ |
Vee;
| U+022C1 | ⋁ |
vee;
| U+02228 | ∨ |
veebar;
| U+022BB | ⊻ |
veeeq;
| U+0225A | ≚ |
vellip;
| U+022EE | ⋮ |
Verbar;
| U+02016 | ‖ |
verbar;
| U+0007C | | |
Vert;
| U+02016 | ‖ |
vert;
| U+0007C | | |
VerticalBar;
| U+02223 | ∣ |
VerticalLine;
| U+0007C | | |
VerticalSeparator;
| U+02758 | ❘ |
VerticalTilde;
| U+02240 | ≀ |
VeryThinSpace;
| U+0200A | |
Vfr;
| U+1D519 | 𝔙 |
vfr;
| U+1D533 | 𝔳 |
vltri;
| U+022B2 | ⊲ |
vnsub;
| U+02282 U+020D2 | ⊂⃒ |
vnsup;
| U+02283 U+020D2 | ⊃⃒ |
Vopf;
| U+1D54D | 𝕍 |
vopf;
| U+1D567 | 𝕧 |
vprop;
| U+0221D | ∝ |
vrtri;
| U+022B3 | ⊳ |
Vscr;
| U+1D4B1 | 𝒱 |
vscr;
| U+1D4CB | 𝓋 |
vsubnE;
| U+02ACB U+0FE00 | ⫋︀ |
vsubne;
| U+0228A U+0FE00 | ⊊︀ |
vsupnE;
| U+02ACC U+0FE00 | ⫌︀ |
vsupne;
| U+0228B U+0FE00 | ⊋︀ |
Vvdash;
| U+022AA | ⊪ |
vzigzag;
| U+0299A | ⦚ |
Wcirc;
| U+00174 | Ŵ |
wcirc;
| U+00175 | ŵ |
wedbar;
| U+02A5F | ⩟ |
Wedge;
| U+022C0 | ⋀ |
wedge;
| U+02227 | ∧ |
wedgeq;
| U+02259 | ≙ |
weierp;
| U+02118 | ℘ |
Wfr;
| U+1D51A | 𝔚 |
wfr;
| U+1D534 | 𝔴 |
Wopf;
| U+1D54E | 𝕎 |
wopf;
| U+1D568 | 𝕨 |
wp;
| U+02118 | ℘ |
wr;
| U+02240 | ≀ |
wreath;
| U+02240 | ≀ |
Wscr;
| U+1D4B2 | 𝒲 |
wscr;
| U+1D4CC | 𝓌 |
xcap;
| U+022C2 | ⋂ |
xcirc;
| U+025EF | ◯ |
xcup;
| U+022C3 | ⋃ |
xdtri;
| U+025BD | ▽ |
Xfr;
| U+1D51B | 𝔛 |
xfr;
| U+1D535 | 𝔵 |
xhArr;
| U+027FA | ⟺ |
xharr;
| U+027F7 | ⟷ |
Xi;
| U+0039E | Ξ |
xi;
| U+003BE | ξ |
xlArr;
| U+027F8 | ⟸ |
xlarr;
| U+027F5 | ⟵ |
xmap;
| U+027FC | ⟼ |
xnis;
| U+022FB | ⋻ |
xodot;
| U+02A00 | ⨀ |
Xopf;
| U+1D54F | 𝕏 |
xopf;
| U+1D569 | 𝕩 |
xoplus;
| U+02A01 | ⨁ |
xotime;
| U+02A02 | ⨂ |
xrArr;
| U+027F9 | ⟹ |
xrarr;
| U+027F6 | ⟶ |
Xscr;
| U+1D4B3 | 𝒳 |
xscr;
| U+1D4CD | 𝓍 |
xsqcup;
| U+02A06 | ⨆ |
xuplus;
| U+02A04 | ⨄ |
xutri;
| U+025B3 | △ |
xvee;
| U+022C1 | ⋁ |
xwedge;
| U+022C0 | ⋀ |
Yacute;
| U+000DD | Ý |
Yacute
| U+000DD | Ý |
yacute;
| U+000FD | ý |
yacute
| U+000FD | ý |
YAcy;
| U+0042F | Я |
yacy;
| U+0044F | я |
Ycirc;
| U+00176 | Ŷ |
ycirc;
| U+00177 | ŷ |
Ycy;
| U+0042B | Ы |
ycy;
| U+0044B | ы |
yen;
| U+000A5 | ¥ |
yen
| U+000A5 | ¥ |
Yfr;
| U+1D51C | 𝔜 |
yfr;
| U+1D536 | 𝔶 |
YIcy;
| U+00407 | Ї |
yicy;
| U+00457 | ї |
Yopf;
| U+1D550 | 𝕐 |
yopf;
| U+1D56A | 𝕪 |
Yscr;
| U+1D4B4 | 𝒴 |
yscr;
| U+1D4CE | 𝓎 |
YUcy;
| U+0042E | Ю |
yucy;
| U+0044E | ю |
Yuml;
| U+00178 | Ÿ |
yuml;
| U+000FF | ÿ |
yuml
| U+000FF | ÿ |
Zacute;
| U+00179 | Ź |
zacute;
| U+0017A | ź |
Zcaron;
| U+0017D | Ž |
zcaron;
| U+0017E | ž |
Zcy;
| U+00417 | З |
zcy;
| U+00437 | з |
Zdot;
| U+0017B | Ż |
zdot;
| U+0017C | ż |
zeetrf;
| U+02128 | ℨ |
ZeroWidthSpace;
| U+0200B | |
Zeta;
| U+00396 | Ζ |
zeta;
| U+003B6 | ζ |
Zfr;
| U+02128 | ℨ |
zfr;
| U+1D537 | 𝔷 |
ZHcy;
| U+00416 | Ж |
zhcy;
| U+00436 | ж |
zigrarr;
| U+021DD | ⇝ |
Zopf;
| U+02124 | ℤ |
zopf;
| U+1D56B | 𝕫 |
Zscr;
| U+1D4B5 | 𝒵 |
zscr;
| U+1D4CF | 𝓏 |
zwj;
| U+0200D | |
zwnj;
| U+0200C | |
이 데이터는 JSON 파일로도 제공됩니다.
위에 표시된 글리프는 비규범적입니다. 나열된 문자에 대한 공식적인 정의는 유니코드를 참조하십시오.
문자 참조 이름은 XML Entity Definitions for Characters에서 유래했지만, 위의 내용만이 규범적으로 간주됩니다. [XMLENTITY]
이 목록은 고정되어 있으며 앞으로 확장되거나 변경되지 않을 것입니다.
모든 현재 엔진에서 지원됨.
이 섹션에서는 XML 리소스에 대한 규칙만 설명합니다.
text/html
리소스에 대한 규칙은
위에 있는 "HTML 문법"이라는 제목의 섹션에서
설명합니다.
XML 문법을 사용하는 것은 권장되지 않습니다.
그 이유로는 XML 파서가 바이트 또는 문자 문자열을 문서
객체로 매핑하는 규칙을
정의하는
명세가 없다는 점, 그리고 XML 문법이 사실상 유지 관리되지 않는다는 점 — 즉, XML 문법에 추가 기능이
추가될 것으로 예상되지 않는다는 점 (비록 HTML 문법에 그러한 기능이 추가된 경우에도) 등을 들 수 있습니다.
HTML의 XML 문법은 이전에 "XHTML"이라고 불렸지만, 이 규격에서는 그 용어를 사용하지 않습니다(그 이유 중 하나는 MathML 및 SVG의 HTML 문법에는 그러한 용어가 사용되지 않기 때문입니다).
XML의 문법은 XML 및 XML의 네임스페이스에서 정의됩니다. [XML] [XMLNS]
이 규격에서는 XML 자체에 정의된 구문 수준 요구 사항을 초과하는 것은 정의하지 않습니다.
XML 문서는 원하는 경우 DOCTYPE
을 포함할 수 있지만, 이 규격을 준수하기 위해 필요하지는 않습니다. 이 규격에서는 공용 또는 시스템 식별자를 정의하지 않으며 공식 DTD를
제공하지 않습니다.
XML에 따르면, XML 프로세서는 DOCTYPE에서 참조한 외부 DTD 하위 집합을 처리할 것으로 보장되지 않습니다. 예를 들어, XML 문서에서 문자를 위한
엔터티 참조를 사용하는 것은 외부 파일에서 정의된 경우 안전하지 않습니다(단,
<
,
>
, &
, "
, '
는 제외).
이 섹션은 XML과 DOM 간의 관계, 특히 HTML과의 상호 작용에 중점을 두고 설명합니다.
이 규격의 목적상 XML 파서는 XML에서 제시된 규칙을 따르는 구조체로,
바이트 또는 문자의 문자열을 문서
객체로 매핑합니다.
이 문서를 작성하는 시점에서는 그러한 규칙이 실제로 존재하지 않습니다.
XML 파서는 생성 시
문서
객체와 연결되거나, 묵시적으로 하나를 생성합니다.
이 문서
는 DOM 노드로 채워져야 하며, 이는 입력된 데이터의 트리
구조를 표현합니다.
이때 XML, XML의 네임스페이스, DOM에 정의된 대로 수행됩니다. 요소를 나타내는 DOM 노드를 생성할 때,
토큰을 위한 요소
생성 알고리즘 또는 적절한 XML 데이터 구조를
처리하는 동등한 알고리즘을 사용하여 적절한 요소 인터페이스가 생성되도록 하고, 커스텀 요소가 올바르게 설정되도록 해야 합니다.
XML 파서가 문서
의 트리에서 수행하는 작업에 대해, 사용자 에이전트는 요소와 속성이
각각 개별적으로 추가되고 설정된 것처럼 작동하여, 이 명세서에서 요소가 문서에 삽입되거나 속성이 설정될 때 발생하는 규칙을 트리거해야 하며, DOM의 변형 관찰자에 대한 요구 사항은 변형 관찰자가 실행됨을 의미합니다.
[XML] [XMLNS] [DOM] [UIEVENTS]
요소의 시작 태그가 구문 분석된 시점과 요소의 종료 태그가 구문 분석되거나 구문 오류가 감지되는 시점 사이에, 사용자 에이전트는 해당 요소가 열린 요소 스택에 있는 것처럼 행동해야 합니다.
이는 다양한 요소가 열린 요소 스택에서 제거될 때에만 특정 프로세스를 시작하도록 사용됩니다.
이 규격은 외부 엔터티를 검색할 때 사용자 에이전트가 사용할 추가 정보를 제공합니다. 다음 목록에 나열된 공개 식별자는 과 the 이 링크로 제공된 URL모두 일치합니다. (이 URL은 엔터티 선언이 포함된 DTD이며, 명명된 문자 참조 섹션에 나열된 이름이 포함되어 있습니다.) [XML]
-//W3C//DTD XHTML 1.0 Transitional//EN
-//W3C//DTD XHTML 1.1//EN
-//W3C//DTD XHTML 1.0 Strict//EN
-//W3C//DTD XHTML 1.0 Frameset//EN
-//W3C//DTD XHTML Basic 1.0//EN
-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN
-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN
-//W3C//DTD MathML 2.0//EN
-//WAPFORUM//DTD XHTML Mobile 1.0//EN
또한, 사용자 에이전트는 위의 공용 식별자 중 하나가 사용될 때 위의 외부 엔터티 내용을 검색하려고 시도해야 하며, 다른 외부 엔터티의 내용을 검색하려고 시도해서는 안 됩니다.
이는 위반이라고 할 수는 없지만, XML의 요구 사항 정신과는 다릅니다. 이는 외부 하위 집합을 처리하기 위해 네트워크 액세스가 필요하지 않도록 모든 사용자 에이전트가 엔터티를 상호 운용할 수 있는 방식으로 처리하도록 하는 목적에서 비롯되었습니다. [XML]
XML 파서는 XML 스크립팅 지원이 활성화된 상태 또는 XML 스크립팅 지원이 비활성화된 상태로 호출될 수 있습니다. 별도로 명시되지 않는 한, XML 파서는 XML 스크립팅 지원이 활성화된 상태로 호출됩니다.
XML 파서가
XML 스크립팅 지원이
활성화된
상태에서 스크립트
요소를 생성할 때,
이 요소는 파서 문서가 설정되고,
강제 비동기가 false로 설정되어야 합니다.
파서가 XML 조각 구문
분석 알고리즘의 일부로 생성된 경우,
요소의 이미 시작됨이 true로 설정되어야 합니다. 이후 요소의 종료
태그가 구문 분석되면, 사용자 에이전트는 마이크로태스크 체크포인트를 수행하고,
스크립트 요소를 준비해야 합니다.
이로 인해 구문 분석
차단 중인 스크립트가 생기는 경우, 사용자 에이전트는 다음 단계를 수행해야 합니다:
파서의 문서
에
스크립트를 차단하는 스타일 시트가 없고
구문
분석 차단 중인 스크립트의 구문 분석 실행 준비 완료가 true일 때까지
이벤트 루프를 실행합니다.
스크립트 요소를 실행합니다. 이는 구문 분석 차단 중인 스크립트에 의해 제공됩니다.
구문 분석 차단 중인 스크립트를 null로 설정합니다.
document.write()
API는
XML 문서에서 사용할 수 없으므로,
HTML 파서의 복잡성 중 많은 부분이 XML 파서에는 필요하지 않습니다.
XML 파서가 XML 스크립팅 지원 비활성화된 상태에서는 이 모든 일이 발생하지 않습니다.
XML 파서가 노드를
템플릿
요소에 추가하려고 할
때,
대신 이 노드를 템플릿
요소의
템플릿 내용에 추가해야 합니다( DocumentFragment
노드).
이는 의도적인 위반이며,
불행히도 XML은 템플릿
처리에 필요한 방식으로 공식적으로 확장될 수 없습니다.
[XML]
XML 파서가 노드
객체를 생성할 때,
해당 노드가 삽입될 노드의 노드 문서로 설정되어야 합니다.
이 규격의 특정 알고리즘은 파서에게 하나의 문자열씩 문자들을 공급합니다. 이러한 경우, XML 파서는 이러한 모든 문자를 연결하여 단일 문자열로 구성된 것과 마찬가지로 작동해야 합니다.
XML 파서가 입력의 끝에 도달하면, 구문 분석을 중지해야 하며, 이는 HTML 파서와 동일한 규칙을 따릅니다. 또한, XML 파서는 중단될 수 있으며, 이는 다시 HTML 파서와 동일한 방식으로 수행되어야 합니다.
적합성 검사기를 위한 목적에서, 리소스가 XML 문법을 사용하고 있다고 판단되는 경우, 이는 XML 문서로 간주됩니다.
문서
또는 요소
노드의 XML 조각 직렬화 알고리즘은 해당 노드를 나타내는 XML 조각을 반환하거나 예외를 발생시킵니다.
문서
의 경우, 오류 사례가 적용되지 않는다면 알고리즘은 문서 엔터티 형식의 문자열을 반환해야 합니다.
요소
의
경우, 오류 사례가 적용되지 않는다면 알고리즘은 내부 일반 구문 분석된 엔터티 형식의 문자열을 반환해야
합니다.
두 경우 모두, 반환된 문자열은 XML 네임스페이스의 적절한 형식을 갖추어야 하며 해당 노드의 관련 자식 노드 모두의 동형 직렬화여야 하며 트리 순서에 따라야 합니다.
사용자 에이전트는 직렬화 시 접두사 및 네임스페이스 선언을 조정할 수 있으며, 일부 경우에는 네임스페이스의 적절한 형식을 갖춘 XML을 얻기 위해 이를 강제로 수행해야 할 수도 있습니다. 사용자
에이전트는 텍스트
노드를 표현하기 위해 일반 텍스트와 문자 참조의 조합을 사용할 수 있습니다.
노드의 관련 자식 노드는 다음 규칙에 따라 적용됩니다:
템플릿
요소의
경우
템플릿
요소의
템플릿 내용의 자식 노드들입니다.
요소
의
경우, 직렬화된 요소 중 네임스페이스가 없는 요소가 있으면, 해당 요소에 대한 기본 네임스페이스가 빈 문자열로 명시적으로 선언되어야 합니다. (문서
의 경우에는 적용되지 않습니다.) [XML] [XMLNS]
이 섹션의 목적상, 내부 일반 구문 분석된 엔터티는 네임스페이스 선언이 없는 요소로 구성된 문서가 XML 네임스페이스의 적절한 형식을 갖춘 경우 XML 네임스페이스의 적절한 형식을 갖춘 것으로 간주됩니다.
직렬화되는 DOM 서브트리에서 다음 오류 사례 중 하나라도 발견되면, 알고리즘은 문자열을 반환하는 대신 "InvalidStateError
" DOMException
을
발생시켜야 합니다:
문서
노드.
PubidChar
생성 규칙에 맞지 않는 문자가 포함된 문서 유형
노드. [XML]
Char
생성 규칙에
맞지 않는 문자가 포함된 문서 유형
노드. [XML]
이름
생성 규칙과 일치하지 않는 노드. [XML]
xmlns
"인 소문자 문자열인 속성
노드. [XMLNS]
요소
노드.
Char
생성 규칙에 맞지 않는 문자가 포함된 속성
노드, 텍스트
노드, 주석
노드, 또는 처리 명령어
노드. [XML]
주석
노드.
xml
" 문자열과 ASCII
대소문자 구분 없이 일치하는 처리 명령어
노드.
처리 명령어
노드.
?>
" 문자열이 포함된 처리 명령어
노드.
이것들이 DOM을 직렬화할 수 없게 만드는 유일한 방법입니다. DOM은 모든 다른 XML 제약 조건을 강제합니다. 예를 들어, 문서
노드에 두 개의 요소를 추가하려고 하면 "HierarchyRequestError
" DOMException
을
발생시킵니다.
XML 조각 구문 분석 알고리즘은 문서
를 반환하거나 "SyntaxError
" DOMException
을
발생시킵니다.
input 문자열과 컨텍스트 요소가 주어진 경우, 알고리즘은 다음과 같습니다:
새로운 XML 파서를 생성합니다.
방금 생성된 파서에 컨텍스트 요소의 시작 태그에 해당하는 문자열을 입력하고, DOM에서 해당 요소에 적용된 모든 네임스페이스 접두사를 선언하며, 해당 요소에 적용된 기본 네임스페이스도 선언합니다(있는 경우).
네임스페이스 접두사는 DOM 요소에서 lookupNamespaceURI()
메서드가 해당 접두사에 대해 null이 아닌 값을 반환하는 경우 적용된 것으로 간주됩니다.
기본 네임스페이스는 DOM 요소에서 isDefaultNamespace()
메서드가 true를 반환하는 네임스페이스입니다.
DOCTYPE
이 파서에 전달되지 않으므로 외부 하위 집합이 참조되지 않으며, 따라서 엔터티가 인식되지 않습니다.
방금 생성된 파서에 input 문자열을 입력합니다.
방금 생성된 파서에 컨텍스트 요소의 종료 태그에 해당하는 문자열을 입력합니다.
XML의 적절한 형식 오류나 XML 네임스페이스 적절한 형식 오류가 발생한 경우, "SyntaxError
" DOMException
을
발생시킵니다.
결과로 생성된 문서
의 문서 요소에 형제 노드가 있는 경우, "SyntaxError
" DOMException
을
발생시킵니다.
사용자 에이전트는 HTML 문서를 특정 방식으로 표시해야 할 의무가 없습니다. 그러나 이 섹션에서는 HTML 문서를 렌더링하는 데 있어 권장 사항을 제공합니다. 이러한 권장 사항을 따를 경우, 문서 작성자가 의도한 사용자 경험에 가까운 경험을 제공할 가능성이 높습니다. 이 섹션의 규범성에 대한 혼란을 피하기 위해 "must" 대신 "expected"라는 용어를 사용합니다. 이 섹션에서 "expected"라는 용어는 사용자 에이전트가 제안된 기본 렌더링을 지원하는 것으로 지정된 경우, "must"와 동일한 규정 준수 의미를 가집니다.
이 섹션의 권장 사항은 일반적으로 CSS 용어로 표현됩니다. 사용자 에이전트는 CSS를 지원하거나, 이 섹션에서 제공된 CSS 규칙을 다른 표현 메커니즘에 맞게 변환할 것으로 예상됩니다.
스타일 계층 규칙(예: 작성자 스타일 시트)이 없는 경우, 사용자 에이전트는 요소가 이 명세서에서 설명한 바와 같이 해당 요소가 표현하는 의미를 사용자에게 전달하도록 렌더링할 것으로 예상됩니다.
이 섹션의 권장 사항은 일반적으로 96dpi 이상의 해상도를 가진 시각적 출력 매체를 가정하지만, HTML은 여러 매체에 적용될 수 있도록 설계된 매체 독립적 언어입니다. 사용자 에이전트 구현자들은 이 섹션의 권장 사항을 목표 매체에 맞게 조정하는 것이 좋습니다.
요소는 CSS 레이아웃 박스, SVG 레이아웃 박스, 또는 다른 스타일링 언어의 동등한 요소를 가지고 있는 경우 렌더링 중이라고 합니다.
화면 밖에 있는 것만으로는 해당 요소가 렌더링 중이 아니라고 할 수 없습니다. 속성이 있는 경우, 일반적으로 해당 요소는 렌더링 중이 아닙니다. 하지만 스타일 시트에 의해 이 속성이 무시될 수 있습니다.
완전히 활성화된 상태는 요소가 렌더링 중인지 여부에 영향을 미치지 않습니다. 문서가 완전히 활성화되지 않았고 사용자에게 전혀 표시되지 않더라도, 그 안에 있는 요소는 여전히 "렌더링 중"으로 간주될 수 있습니다.
요소가 렌더링 중이고 관련된 CSS 레이아웃 박스가 뷰포트와 교차할 때, 해당 요소는 뷰포트와 교차한다고 합니다.
렌더링 중 상태와 마찬가지로, 비-완전히 활성화된 문서의 요소들도 뷰포트와 교차할 수 있습니다. 뷰포트는 문서 간에 공유되지 않으며 항상 사용자에게 표시되지는 않을 수 있으므로, 비-완전히 활성화된 문서의 요소도 해당 문서와 관련된 뷰포트와 교차할 수 있습니다.
이 명세서는 교차가 테스트되는 정확한 타이밍을 정의하지 않지만, 이 타이밍이 Intersection Observer API와 일치하도록 제안합니다. [INTERSECTIONOBSERVER]
요소가 자식에게 렌더링을 위임했다고 말할 때는, 그 요소 자체는 렌더링 중이 아니지만, CSS 'display: contents' 또는 다른 스타일링 언어의 동등한 결과로 인해 자식(있는 경우)이 렌더링 중일 수 있는 경우를 의미합니다. [CSSDISPLAY]
작성자 수준의 CSS 스타일 시트를 따르지 않는 사용자 에이전트도 이러한 섹션에 제시된 CSS 규칙을 이 명세서 및 관련 CSS 및 유니코드 명세서와 일관되게 적용한 것처럼 행동할 것으로 예상됩니다. [CSS] [UNICODE] [BIDI]
이것은 특히 'display', 'unicode-bidi' 및 'direction' 속성과 관련된 문제에 중요합니다.
아래 하위 섹션에 제공된 CSS 규칙은, 달리 명시되지 않은 한, HTML 요소를 포함하는 모든 문서에 대해 사용자 에이전트 수준의 스타일 시트 기본값으로 사용될 것으로 예상됩니다.
일부 규칙은 CSS 캐스케이드의 작성자 수준 제로 특이성 표현 힌트 부분을 위한 것이며, 이러한 규칙들은 표현 힌트로 명시됩니다.
아래 텍스트에서 요소 element의 속성 attribute가 픽셀 길이 속성 (또는 속성들) properties에 매핑된다고 할 때, 이는 element에 attribute가 설정되어 있고, 해당 속성 값을 음수가 아닌 정수를 구문 분석하는 규칙을 사용하여 구문 분석했을 때 오류가 발생하지 않으면, 사용자 에이전트가 구문 분석된 값을 표현 힌트로서 픽셀 길이로 사용할 것으로 예상된다는 의미입니다.
아래 텍스트에서 요소 element의 속성 attribute가 치수 속성 (또는 속성들) properties에 매핑된다고 할 때, 이는 element에 attribute가 설정되어 있고, 해당 속성 값을 치수 값을 구문 분석하는 규칙을 사용하여 구문 분석했을 때 오류가 발생하지 않으면, 사용자 에이전트가 구문 분석된 치수를 표현 힌트로서 값으로 사용할 것으로 예상된다는 의미입니다. 치수가 길이인 경우 값은 픽셀 길이로, 치수가 백분율인 경우 값은 백분율로 사용됩니다.
아래 텍스트에서 요소 element의 속성 attribute가 치수 속성(0을 무시) (또는 속성들) properties에 매핑된다고 할 때, 이는 element에 attribute가 설정되어 있고, 해당 속성 값을 0이 아닌 치수 값을 구문 분석하는 규칙을 사용하여 구문 분석했을 때 오류가 발생하지 않으면, 사용자 에이전트가 구문 분석된 치수를 표현 힌트로서 값으로 사용할 것으로 예상된다는 의미입니다. 치수가 길이인 경우 값은 픽셀 길이로, 치수가 백분율인 경우 값은 백분율로 사용됩니다.
아래 텍스트에서 요소 element의 속성 w와 h가 종횡비
속성에 매핑된다고 할 때, 이는 element에 w와 h 속성이 모두 설정되어 있고, 해당 속성 값을 음수가 아닌
정수를 구문 분석하는 규칙을 사용하여 구문 분석했을 때 오류가 발생하지 않으면, 사용자 에이전트가 구문 분석된 정수를 표현 힌트로서 'aspect-ratio'
속성에 auto w / h
형태로 사용할 것으로 예상된다는 의미입니다.
아래 텍스트에서 요소 element의 속성 w와 h가 종횡비 속성(치수 규칙 사용)에 매핑된다고 할 때, 이는
element에 w와 h 속성이 모두 설정되어 있고, 해당 속성 값을 치수 값을 구문
분석하는 규칙을 사용하여 구문 분석했을 때 오류가 발생하지 않거나 둘 중 어느 것도 백분율을 반환하지 않으면, 사용자 에이전트가 구문 분석된 치수를 표현 힌트로서 'aspect-ratio'
속성에 auto w / h
형태로 사용할 것으로 예상된다는 의미입니다.
사용자 에이전트가 노드의 하위 요소를 정렬할 때, 'margin-inline-start' 및 'margin-inline-end' 속성 값이 'auto'가 아닌 값을 가지는, 과도하게 제약된 하위 요소만 정렬할
것으로 예상됩니다. 또한, 이 요소들은 사용된 값이 더 큰 값으로 강제되었으며,
해당 요소 자체에 적용 가능한 align
속성이 없어야 합니다. 여러 요소가 특정 하위 요소를 정렬해야 하는 경우, 가장 깊이 중첩된 요소가
다른 요소를 재정의할 것으로 예상됩니다. 정렬된 요소들은 사용된
값을 통해 왼쪽 라인과 오른쪽 라인에 따라 정렬될
것으로 예상됩니다. [CSSLOGICAL] [CSSWM]
@namespace "http://www.w3.org/1999/xhtml" ;
area, base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
display : none;
}
{
display : none;
}
[hidden=until-found i]:not(embed) {
content-visibility : hidden;
}
embed[hidden] {
display : inline;
height : 0 ;
width : 0 ;
}
input[type=hidden i] {
display : none !important;
}
@media (scripting) {
noscript { display: none !important; }
}
@namespace "http://www.w3.org/1999/xhtml" ;
html, body {
display : block;
}
아래 표에 나열된 각 속성에 대해, body
요소가 주어지면, 존재하는 첫
번째 속성이 픽셀 길이 속성으로
body
요소에 매핑됩니다. 만약 속성이 발견되지 않거나, 발견된
속성의 값을 성공적으로 구문 분석할 수 없는 경우, 기본값으로 8px이 사용될 것으로 예상됩니다.
속성 | 출처 |
---|---|
'margin-top' | body 요소의 marginheight 속성
|
body 요소의 topmargin 속성
| |
body 요소의 컨테이너 프레임 요소의 marginheight
속성
| |
'margin-right' | body 요소의 marginwidth 속성
|
body 요소의 rightmargin 속성
| |
body 요소의 컨테이너 프레임 요소의 marginwidth 속성
| |
'margin-bottom' | body 요소의 marginheight 속성
|
body 요소의 bottommargin 속성
| |
body 요소의 컨테이너 프레임 요소의 marginheight
속성
| |
'margin-left' | body 요소의 marginwidth 속성
|
body 요소의 leftmargin 속성
| |
body 요소의 컨테이너 프레임 요소의 marginwidth 속성
|
만약 body
요소의 노드 문서가 노드 내비게이브라면,
그리고 그 컨테이너가 내비게이블이라면, 그 컨테이너 프레임 요소는 프레임
또는 iframe
요소입니다. 그렇지 않으면 컨테이너 프레임 요소가 없습니다.
위의 요구 사항은 한 페이지가 다른 페이지의 여백을 변경할 수 있음을 암시합니다(다른 출처의 페이지 포함). 예를 들어, iframe
을 사용하여 피싱 또는 사용자를 오도하기 위한 목적으로
페이지가 작성자의 의도와 다르게 렌더링되도록 할 수 있습니다. 이는 잠재적으로 보안 위험이 될 수 있습니다.
만약 Document
의 노드 네비게이블이 자식
네비게이블이라면, 해당 네비게이블의
콘텐츠
박스
내부에 위치하고 크기가 조정될 것으로 예상됩니다. 컨테이너가
렌더링되고 있지 않다면, 해당
네비게이블은 너비와 높이가 0인
뷰포트를 가지는 것으로
예상됩니다.
만약 문서
의 노드 내비게이블이 자식
내비게이블이라면, 그 내비게이블의 컨테이너가 프레임
또는 iframe
요소이며, 해당 요소에
스크롤링
속성이 있고, 그 속성의 값이 "off
", "noscroll
", 또는 "no
" 문자열과 ASCII 대소문자 구분 없음 일치한다면, 사용자 에이전트는 문서
의 노드 내비게이블의 뷰포트에 대해 스크롤바가 표시되지 않도록 해야 합니다.
만약 body
요소에 빈 값이 아닌 background
속성이 설정되어 있다면, 새 값은 요소의 노드 문서에 상대적으로 인코딩, 구문 분석 및 직렬화되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을
프레젠테이션 힌트로 처리하여 요소의 '배경 이미지' 속성을 반환값으로 설정할 것으로 예상됩니다.
만약 body
요소에 bgcolor
속성이 설정되어 있다면, 새 값은 레거시 색상 값
구문 분석 규칙을 사용하여 구문 분석되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 요소의 '배경 색상' 속성을 결과 색상으로 설정할 것으로 예상됩니다.
만약 body
요소에 text
속성이 설정되어 있다면, 그 값은 레거시 색상 값
구문 분석 규칙을 사용하여 구문 분석되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 요소의 '색상' 속성을 결과 색상으로
설정할 것으로 예상됩니다.
만약 body
요소에 link
속성이 설정되어 있다면, 그 값은 레거시 색상 값
구문 분석 규칙을 사용하여 구문 분석되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 문서
내의 :link
의사 클래스와 일치하는 모든 요소의
'색상' 속성을 결과 색상으로 설정할 것으로 예상됩니다.
만약 body
요소에 vlink
속성이 설정되어 있다면, 그 값은 레거시 색상 값
구문 분석 규칙을 사용하여 구문 분석되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 문서
내의 :visited
의사 클래스와 일치하는 모든 요소의
'색상' 속성을 결과 색상으로 설정할 것으로 예상됩니다.
만약 body
요소에 alink
속성이 설정되어 있다면, 그 값은 레거시 색상 값
구문 분석 규칙을 사용하여 구문 분석되도록 예상되며, 오류가 반환되지 않으면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 문서
내의 :active
의사 클래스와 일치하는 모든 요소의
'색상' 속성을 결과 색상으로 설정할 것으로 예상됩니다.
@namespace "http://www.w3.org/1999/xhtml" ;
address, blockquote, center, dialog, div, figure, figcaption, footer, form,
header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
display : block;
}
blockquote, figure, listing, p, plaintext, pre, xmp {
margin-block : 1 em ;
}
blockquote, figure { margin-inline : 40 px ; }
address { font-style : italic; }
listing, plaintext, pre, xmp { font-family : monospace; white-space : pre;
}
dialog:not([open]) { display : none; }
dialog {
position : absolute;
inset-inline-start : 0 ; inset-inline-end : 0 ;
width : fit-content;
height : fit-content;
margin : auto;
border : solid;
padding : 1 em ;
background-color : Canvas;
color : CanvasText;
}
dialog:modal {
position : fixed;
overflow : auto;
inset-block : 0 ;
max-width : calc ( 100 % - 6 px - 2 em );
max-height : calc ( 100 % - 6 px - 2 em );
}
dialog::backdrop {
background : rgba ( 0 , 0 , 0 , 0.1 );
}
[popover]:not(:popover-open):not(dialog[open]) {
display : none;
}
dialog:popover-open {
display : block;
}
[popover] {
position : fixed;
inset : 0 ;
width : fit-content;
height : fit-content;
margin : auto;
border : solid;
padding : 0.25 em ;
overflow : auto;
color : CanvasText;
background-color : Canvas;
}
:popover-open::backdrop {
position : fixed;
inset : 0 ;
pointer-events : none !important;
background-color: transparent;
}
slot {
display: contents;
}
다음 규칙도 프레젠테이션 힌트로서 적용될 것으로 예상됩니다:
@namespace "http://www.w3.org/1999/xhtml" ;
pre[wrap] { white-space : pre-wrap; }
쿼크 모드에서는 다음 규칙이 적용될 것으로 예상됩니다:
@namespace "http://www.w3.org/1999/xhtml" ;
form { margin-block-end : 1 em ; }
center
요소와 div
요소가 ASCII 대소문자 구분 없이 "center
" 또는 "middle
"
문자열과 일치하는 값을 갖는 align
속성을 가지고 있다면, 이들은
프레젠테이션 힌트에서 'text-align' 속성이
'center'로 설정된 것처럼 자신 내부의 텍스트를 중앙에 배치하고, 자손 요소들을 중앙에 정렬할 것으로 예상됩니다.
div
요소가 "left
" 문자열과
일치하는 값을 갖는 align
속성을 가지고 있다면, 이 요소는
자신 내부의 텍스트를 왼쪽으로 정렬하고, 자손 요소들을 왼쪽으로 정렬할 것으로
예상됩니다.
div
요소가 "right
" 문자열과
일치하는 값을 갖는 align
속성을 가지고 있다면, 이 요소는
자신 내부의 텍스트를 오른쪽으로 정렬하고, 자손 요소들을 오른쪽으로 정렬할
것으로 예상됩니다.
div
요소가 "justify
" 문자열과
일치하는 값을 갖는 align
속성을 가지고 있다면, 이 요소는
텍스트를 양쪽 정렬하고, 자손 요소들을 왼쪽으로 정렬할 것으로 예상됩니다.
@namespace "http://www.w3.org/1999/xhtml" ;
cite, dfn, em, i, var { font-style : italic; }
b, strong { font-weight : bolder; }
code, kbd, samp, tt { font-family : monospace; }
big { font-size : larger; }
small { font-size : smaller; }
sub { vertical-align : sub; }
sup { vertical-align : super; }
sub, sup { line-height : normal; font-size : smaller; }
ruby { display : ruby; }
rt { display : ruby-text; }
:link { color : #0000EE; }
:visited { color : #551A8B; }
:link:active, :visited:active { color : #FF0000; }
:link, :visited { text-decoration : underline; cursor : pointer; }
:focus-visible { outline : auto; }
mark { background : yellow; color : black; } /* 이 색상은 단지 제안이며 구현 피드백에 따라 변경될 수 있습니다 */
abbr[title], acronym[title] { text-decoration : dotted underline; }
ins, u { text-decoration : underline; }
del, s, strike { text-decoration : line-through; }
q::before { content : open-quote; }
q::after { content : close-quote; }
br { display-outside : newline; /* 이것은 양방향 텍스트 렌더링에도 영향을 미칩니다 */
nobr { white-space : nowrap; }
wbr { display-outside : break-opportunity; /* 이것은 양방향 텍스트 렌더링에도 영향을 미칩니다 */
nobr wbr { white-space : normal; }
다음 규칙도 프레젠테이션 힌트로서 적용될 것으로 예상됩니다:
@namespace "http://www.w3.org/1999/xhtml" ;
br[clear=left i] { clear : left; }
br[clear=right i] { clear : right; }
br[clear=all i], br[clear=both i] { clear : both; }
CSS 루비 모델의 목적을 위해, 루비
요소의 자식
요소들 중에서 rt
또는 rp
요소가 아닌 연속적인 요소들은 display 속성이 루비-베이스로
설정된 익명 상자로 감싸질 것으로 예상됩니다. [CSSRUBY]
루비의 특정 부분에 둘 이상의 주석이 있는 경우, 주석들은 루비 기본 텍스트의 양쪽에 분배되어 한쪽에서의 루비 주석 겹침을 최소화해야 합니다.
가능해질 때, 위의 요구 사항은 CSS 루비 용어로 표현되도록 업데이트될 것입니다. (현재 CSS 루비는 중첩된 루비
요소나 여러 연속적인 rt
요소를 처리하지 않으며, 이것이 이 의미가 표현되는
방법입니다.)
올바른 루비 렌더링을 지원하지 않는 사용자 에이전트는 rp
요소가 없는 경우 rt
요소의 텍스트 주위에 괄호를
렌더링해야 합니다.
사용자 에이전트는 clear
속성을 인라인 요소에서 지원할 것으로 예상되며, br
요소에
clear
속성이 있는 경우, CSS의
비규범적 주석에서 설명된 방식으로 이를 렌더링해야 합니다.
color 속성의 초기 값은 검정색이어야 합니다. 배경색 속성의 초기 값은 투명이어야 합니다. 캔버스의 배경은 흰색이어야 합니다.
폰트
요소에 color
속성이 있는 경우, 그 값은 유산 색상 값 구문 분석 규칙을 사용하여 구문 분석되고, 오류가 반환되지
않으면, 사용자 에이전트는 해당 속성을 프레젠테이션 힌트로
처리하여 요소의 색상 속성을 결과 색상으로 설정해야 합니다.
폰트
요소에 face
속성이 있는 경우, 사용자 에이전트는 해당 속성을
요소의 프레젠테이션 힌트로 처리하여 글꼴 속성을 속성의 값으로 설정해야 합니다.
폰트
요소에 size
속성이 있는 경우, 사용자 에이전트는 다음 단계를
사용하여 해당 속성을 프레젠테이션 힌트로 처리하여 요소의
글꼴 크기 속성을 설정해야 합니다. 이 단계는 유산
글꼴 크기 구문 분석 규칙으로 알려져 있습니다.
input을 속성의 값으로 설정합니다.
position을 input의 시작 부분을 가리키는 포인터로 설정합니다.
ASCII 공백 건너뛰기 규칙에 따라 position을 사용하여 input에서 공백을 건너뜁니다.
position이 input의 끝을 지나면, 프레젠테이션 힌트가 없습니다. 반환합니다.
position의 문자가 U+002B 더하기 기호(+)인 경우, mode를 relative-plus로 설정하고, position을 다음 문자로 이동합니다. 그렇지 않고 position의 문자가 U+002D 하이픈(-)인 경우, mode를 relative-minus로 설정하고, position을 다음 문자로 이동합니다. 그렇지 않으면 mode를 absolute로 설정합니다.
코드 포인트 시퀀스 수집 규칙에 따라 input에서 position을 사용하여 ASCII 숫자 시퀀스를 수집하고, 결과 시퀀스를 digits로 설정합니다.
digits가 빈 문자열인 경우, 프레젠테이션 힌트가 없습니다. 반환합니다.
digits을 십진수 정수로 해석합니다. 결과 숫자를 value로 설정합니다.
mode가 relative-plus인 경우, value에 3을 더합니다. mode가 relative-minus인 경우, value에서 3을 뺀 결과로 value를 설정합니다.
value가 7보다 크면, 이를 7로 설정합니다.
value가 1보다 작으면, 이를 1로 설정합니다.
다음 표에 따라 value의 값에 해당하는 키워드로 글꼴 크기를 설정합니다.
value | 글꼴 크기 키워드 |
---|---|
1 | 'x-small' |
2 | 'small' |
3 | 'medium' |
4 | 'large' |
5 | 'x-large' |
6 | 'xx-large' |
7 | 'xxx-large' |
@namespace "http://www.w3.org/1999/xhtml" ;
[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) { direction : ltr; }
[dir]:dir(rtl), bdi:dir(rtl) { direction : rtl; }
address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
[dir=ltr i], [dir=rtl i], [dir=auto i] {
unicode-bidi : isolate;
}
bdo, bdo[dir] { unicode-bidi : isolate-override; }
input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
[type=email i]), textarea[dir=auto i], pre[dir=auto i] {
unicode-bidi : plaintext;
}
/* input 요소의 type 속성이 Text 상태에 있는 경우에 대한 설명은 본문을 참조하세요. */
/* br 요소와 wbr 요소에 content 속성을 설정하는 규칙에도 양방향 텍스트에 대한 영향이 있습니다. */
input 요소의 input
요소의 dir
속성이 auto 상태에 있고, type
속성이 Text 상태에 있을 때, 사용자 에이전트는 unicode-bidi 속성을 'plaintext'로 설정하는 사용자 에이전트 수준의 스타일 시트 규칙이 있는 것처럼 동작해야
합니다.
입력 필드(textarea
요소와 input
요소의 type
속성이 Text, Search, Telephone, URL, 또는 Email 상태에 있을 때)는 요소의 direction 속성에 일치하는 방향성을 가진 편집 사용자 인터페이스를 제공해야 합니다.
문서의 문자 인코딩이 ISO-8859-8인 경우, 다음 규칙들이 위의 규칙들에 추가로 적용되어야 합니다: [ENCODING]
@namespace "http://www.w3.org/1999/xhtml" ;
address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],
[dir=rtl i], [dir=auto i], *|* {
unicode-bidi : bidi-override;
}
input:not([type=submit i]):not([type=reset i]):not([type=button i]),
textarea {
unicode-bidi : normal;
}
@namespace "http://www.w3.org/1999/xhtml" ;
article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
display : block;
}
h1 { margin-block : 0.67 em ; font-size : 2.00 em ; font-weight : bold; }
h2 { margin-block : 0.83 em ; font-size : 1.50 em ; font-weight : bold; }
h3 { margin-block : 1.00 em ; font-size : 1.17 em ; font-weight : bold; }
h4 { margin-block : 1.33 em ; font-size : 1.00 em ; font-weight : bold; }
h5 { margin-block : 1.67 em ; font-size : 0.83 em ; font-weight : bold; }
h6 { margin-block : 2.33 em ; font-size : 0.67 em ; font-weight : bold; }
다음 CSS 블록에서 x는 다음 선택자의 약어입니다:
:is(article, aside, nav, section)
@namespace "http://www.w3.org/1999/xhtml" ;
x h1 { margin-block : 0.83 em ; font-size : 1.50 em ; }
x x h1 { margin-block : 1.00 em ; font-size : 1.17 em ; }
x x x h1 { margin-block : 1.33 em ; font-size : 1.00 em ; }
x x x x h1 { margin-block : 1.67 em ; font-size : 0.83 em ; }
x x x x x h1 { margin-block : 2.33 em ; font-size : 0.67 em ; }
이 약어는 이 블록을 최소한 읽기 쉽게 유지하기 위해 사용됩니다.
@namespace "http://www.w3.org/1999/xhtml" ;
dir, dd, dl, dt, menu, ol, ul { display : block; }
li { display : list-item; text-align : match-parent; }
dir, dl, menu, ol, ul { margin-block : 1 em ; }
:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
margin-block : 0 ;
}
dd { margin-inline-start : 40 px ; }
dir, menu, ol, ul { padding-inline-start : 40 px ; }
ol, ul, menu { counter-reset : list-item; }
ol { list-style-type : decimal; }
dir, menu, ul {
list-style-type : disc;
}
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
list-style-type : circle;
}
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
list-style-type : square;
}
다음 규칙들도 표현 힌트로 적용될 것으로 예상됩니다.
@namespace "http://www.w3.org/1999/xhtml" ;
ol[type="1"], li[type="1"] { list-style-type : decimal; }
ol[type=a s], li[type=a s] { list-style-type : lower-alpha; }
ol[type=A s], li[type=A s] { list-style-type : upper-alpha; }
ol[type=i s], li[type=i s] { list-style-type : lower-roman; }
ol[type=I s], li[type=I s] { list-style-type : upper-roman; }
ul[type=none i], li[type=none i] { list-style-type : none; }
ul[type=disc i], li[type=disc i] { list-style-type : disc; }
ul[type=circle i], li[type=circle i] { list-style-type : circle; }
ul[type=square i], li[type=square i] { list-style-type : square; }
li
요소를 렌더링할 때, 비-CSS 사용자 에이전트는 li
요소의 서수 값을 사용하여 목록 항목 마커의 카운터를 렌더링하는 것이 예상됩니다.
CSS 사용자 에이전트의 경우, 목록 항목 렌더링의 일부 측면은 CSS Lists 사양에 정의되어 있습니다. 추가적으로, 다음 속성 매핑이 적용될 것으로 예상됩니다: [CSSLISTS]
li
요소가 value
속성을 가지고 있고, 해당 속성 값을 정수 파싱 규칙을 사용하여 파싱해도 오류가 발생하지 않는 경우,
사용자 에이전트는 파싱된 값 value를 표현 힌트로 사용하여
list-item value
형식의 'counter-set' 속성을 설정하는 것이 예상됩니다.
ol
요소가 start
속성 또는 reversed
속성을 가지거나 둘 다 가지는 경우, 사용자 에이전트는 해당
속성을 표현 힌트로 처리하기 위해 다음 단계를 수행할 것으로 예상됩니다:
value를 null로 설정합니다.
요소에 start
속성이 있는 경우, value를
해당 속성 값을 정수 파싱 규칙을 사용하여
파싱한 결과로 설정합니다.
요소에 reversed
속성이 있는 경우:
value가 정수인 경우, value를 1 증가시키고
reversed(list-item) value
를 반환합니다.
그렇지 않으면 reversed(list-item)
를 반환합니다.
start
속성이 없었거나 해당 값의
파싱 결과가 오류로 이어졌습니다.
그렇지 않으면:
value가 정수인 경우, value를 1 감소시키고 list-item value
를
반환합니다.
그렇지 않으면 표현 힌트가 없습니다.
@namespace "http://www.w3.org/1999/xhtml" ;
table { display : table; }
caption { display : table-caption; }
colgroup, colgroup[hidden] { display : table-column-group; }
col, col[hidden] { display : table-column; }
thead, thead[hidden] { display : table-header-group; }
tbody, tbody[hidden] { display : table-row-group; }
tfoot, tfoot[hidden] { display : table-footer-group; }
tr, tr[hidden] { display : table-row; }
td, th { display : table-cell; }
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden] {
visibility : collapse;
}
table {
box-sizing : border-box;
border-spacing : 2 px ;
border-collapse : separate;
text-indent : initial;
}
td, th { padding : 1 px ; }
th { font-weight : bold; }
caption { text-align : center; }
thead, tbody, tfoot, table > tr { vertical-align : middle; }
tr, td, th { vertical-align : inherit; }
thead, tbody, tfoot, tr { border-color : inherit; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i], table[frame=void i],
table[frame=above i], table[frame=below i], table[frame=hsides i],
table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
table[frame=box i], table[frame=border i],
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
border-color : black;
}
다음 규칙들도 표현적 힌트로서 적용될 것으로 예상됩니다:
@namespace "http://www.w3.org/1999/xhtml" ;
table[align=left i] { float : left; }
table[align=right i] { float : right; }
table[align=center i] { margin-inline : auto; }
thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],
tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] {
text-align : center;
}
caption[align=bottom i] { caption-side : bottom; }
p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],
h4[align=left i], h5[align=left i], h6[align=left i] {
text-align : left;
}
p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],
h4[align=right i], h5[align=right i], h6[align=right i] {
text-align : right;
}
p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],
h4[align=center i], h5[align=center i], h6[align=center i] {
text-align : center;
}
p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],
h4[align=justify i], h5[align=justify i], h6[align=justify i] {
text-align : justify;
}
thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],
tr[valign=top i], td[valign=top i], th[valign=top i] {
vertical-align : top;
}
thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],
tr[valign=middle i], td[valign=middle i], th[valign=middle i] {
vertical-align : middle;
}
thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],
tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] {
vertical-align : bottom;
}
thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],
tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] {
vertical-align : baseline;
}
td[nowrap], th[nowrap] { white-space : nowrap; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i] {
border-style : hidden;
border-collapse : collapse;
}
table[border] { border-style : outset; } /* only if border is not equivalent to zero */
table[frame=void i] { border-style : hidden; }
table[frame=above i] { border-style : outset hidden hidden hidden; }
table[frame=below i] { border-style : hidden hidden outset hidden; }
table[frame=hsides i] { border-style : outset hidden outset hidden; }
table[frame=lhs i] { border-style : hidden hidden hidden outset; }
table[frame=rhs i] { border-style : hidden outset hidden hidden; }
table[frame=vsides i] { border-style : hidden outset; }
table[frame=box i], table[frame=border i] { border-style : outset; }
table[border] > tr > td, table[border] > tr > th,
table[border] > thead > tr > td, table[border] > thead > tr > th,
table[border] > tbody > tr > td, table[border] > tbody > tr > th,
table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
/* only if border is not equivalent to zero */
border-width : 1 px ;
border-style : inset;
}
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th {
border-width : 1 px ;
border-style : none;
}
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
border-width : 1 px ;
border-block-style : none;
border-inline-style : solid;
}
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
border-width : 1 px ;
border-style : solid;
}
table[rules=groups i] > colgroup {
border-inline-width : 1 px ;
border-inline-style : solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
border-block-width : 1 px ;
border-block-style : solid;
}
table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
border-block-width : 1 px ;
border-block-style : solid;
}
쿽스 모드에서는 다음 규칙들도 적용될 것으로 예상됩니다:
@namespace "http://www.w3.org/1999/xhtml" ;
table {
font-weight : initial;
font-style : initial;
font-variant : initial;
font-size : initial;
line-height : initial;
white-space : initial;
text-align : initial;
}
CSS 테이블 모델의 목적을 위해 col
요소는 span
속성이 지정한 만큼
존재하는 것처럼 처리되어야 합니다.
CSS 테이블 모델의 목적을 위해 colgroup
요소에
col
요소가 포함되어 있지 않다면, 해당 요소는 span
속성이 지정한
만큼의 자식을 가진 것처럼 처리되어야 합니다.
CSS 테이블 모델의 목적을 위해 colspan
및 rowspan
속성은 td
및 th
요소에서 행과 열을 아우르는 셀에 대한 특별한
지식을 제공해야 합니다.
HTML 문서의 경우, 다음 규칙도 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
:is(table, thead, tbody, tfoot, tr) > form { display : none !important; }
table
요소의 cellspacing
속성은 픽셀 길이 속성에 'border-spacing'으로 매핑됩니다.
table
요소의 cellpadding
속성은 픽셀 길이 속성들에 'padding-top', 'padding-right', 'padding-bottom', 및 'padding-left'으로 매핑됩니다.
table
요소의 height
속성은 차원 속성에 'height'으로 매핑됩니다.
table
요소의 width
속성은 차원 속성 (0 무시)에 'width'으로 매핑됩니다.
col
요소의 width
속성은 차원 속성에 'width'으로 매핑됩니다.
thead
, tbody
, 및 tfoot
요소의 height
속성은 차원 속성에 'height'으로 매핑됩니다.
tr
요소의 height
속성은 차원 속성에 'height'으로 매핑됩니다.
td
및 th
요소의 height
속성은 차원 속성 (0 무시)에 'height'으로 매핑됩니다.
td
및 th
요소의 width
속성은 차원 속성 (0 무시)에 'width'으로 매핑됩니다.
thead
, tbody
, tfoot
, tr
, td
, 및 th
요소들이 align
속성을 가지고 있고 그 값이
ASCII 대소문자 구분 없음으로 "center
" 또는 "middle
"
문자열과 일치하는 경우, 해당 요소들은 자신 안에 있는 텍스트를 중앙에 정렬해야 하며, 마치 'text-align'
속성이 'center'로 설정된 것처럼 프레젠테이션 힌트에서 중앙으로 후손을 정렬해야 합니다.
thead
, tbody
, tfoot
, tr
, td
, 및 th
요소들이 align
속성을 가지고 있고 그 값이
ASCII 대소문자 구분 없음으로 "left
" 문자열과 일치하는 경우, 해당 요소들은 자신
안에 있는 텍스트를 왼쪽에 정렬해야 하며, 마치 'text-align'
속성이 'left'로 설정된 것처럼 프레젠테이션 힌트에서 왼쪽으로 후손을 정렬해야 합니다.
thead
, tbody
, tfoot
, tr
, td
, 및 th
요소들이 align
속성을 가지고 있고 그 값이
ASCII 대소문자 구분 없음으로 "right
" 문자열과 일치하는 경우, 해당 요소들은 자신
안에 있는 텍스트를 오른쪽에 정렬해야 하며, 마치 'text-align'
속성이 'right'로 설정된 것처럼 프레젠테이션 힌트에서 오른쪽으로 후손을 정렬해야 합니다.
thead
, tbody
, tfoot
, tr
, td
, 및 th
요소들이 align
속성을 가지고 있고 그 값이
ASCII 대소문자 구분 없음으로 "justify
" 문자열과 일치하는 경우, 해당 요소들은
자신 안에 있는 텍스트를 양쪽 정렬해야 하며, 마치 'text-align'
속성이 'justify'로 설정된 것처럼 프레젠테이션 힌트에서 왼쪽으로 후손을 정렬해야 합니다.
사용자 에이전트는 th
요소를 일치시키는 사용자 에이전트 스타일 시트 규칙을
가지고 있어야 하며, 해당 요소의 부모 노드가 계산된 값이 초기 값인
경우, 선언 블록은 'text-align' 속성을 'center'로 설정하는 단일 선언만으로 구성되어야 합니다.
table
, thead
, tbody
, tfoot
, tr
, td
또는 th
요소에 background
속성이 설정되어 있고 값이 비어있지 않다면, 새로운 값은
해당 요소의 노드 문서에 상대적으로 인코딩, 파싱 및 직렬화되어야 하며, 만약 실패하지 않는다면 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 요소의 'background-image' 속성을 반환된 값으로 설정해야 합니다.
table
, thead
, tbody
, tfoot
, tr
, td
또는 th
요소에 bgcolor
속성이 설정되어 있을 때,
새로운 값은 레거시
색상 값을 파싱하는 규칙을 사용하여 파싱되어야 하며, 만약 오류를 반환하지 않는다면 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 요소의 'background-color' 속성을 결과 색상으로 설정해야 합니다.
table
요소에 bordercolor
속성이 있을 때, 그 값은 레거시 색상
값을 파싱하는 규칙을 사용하여 파싱되어야 하며, 만약 오류를 반환하지 않는다면 사용자 에이전트는 속성을 프레젠테이션 힌트로 처리하여 요소의 'border-top-color', 'border-right-color', 'border-bottom-color', 그리고 'border-left-color' 속성을 결과 색상으로 설정해야 합니다.
table
요소의 border
속성은 픽셀 길이 속성으로 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'에 매핑됩니다. 속성이 존재하지만 음수가 아닌
정수를 파싱하는 규칙을 사용하여 속성 값을 파싱할 때 오류가 발생하면, 해당 속성에 대해 기본 값으로 1px이 사용되어야 합니다.
CSS 블록에서 "경계가 0과 동등하지 않은 경우에만"이라고 표시된 규칙은, 선택자에 언급된 border
속성이 존재할 뿐만 아니라 음수가 아닌
정수를 파싱하는 규칙을 사용하여 파싱했을 때 0이 아닌 값이거나 오류가 발생한 것으로 판명된 경우에만 적용되어야 합니다.
쿼크 모드에서 td
요소나 th
요소에 nowrap
속성이 있으나 width
속성도 있으며, 그 값을 0이
아닌 차원 값을 파싱하는 규칙을 사용하여 파싱했을 때 길이(오류가 아닌 값이거나 백분율로 분류된 숫자가 아님)로 판명된 경우, 요소의 프레젠테이션 힌트가 해당 요소의 'white-space' 속성을 'normal'로 설정하여, 위의 CSS 블록에서 'nowrap'으로 설정된 규칙을 덮어쓰도록
설정되어야 합니다.
노드는 요소 간 공백이 아닌 텍스트 노드이거나 요소 노드일 때 실질적으로 간주됩니다.
노드는 실질적 노드를 포함하지 않는 요소일 때 비어 있는 것으로 간주됩니다.
기본 여백을 가진 요소는 다음 요소들입니다: blockquote
,
dir
, dl
, h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
listing
, menu
, ol
, p
, plaintext
, pre
, ul
, xmp
쿼크 모드에서, 기본 여백을 가진 요소가 body
, td
또는 th
요소의 자식이며, 이전에 실질적인 형제가 없는 경우, 사용자 에이전트 수준 스타일 시트 규칙이 'margin-block-start' 속성을 0으로 설정해야 합니다.
쿼크 모드에서, 기본 여백을 가진 요소가 body
, td
또는 th
요소의 자식이며, 이전에 실질적인 형제가 없고, 비어 있는 경우, 사용자 에이전트 수준
스타일 시트 규칙이 'margin-block-end' 속성을 0으로 설정해야 합니다.
쿼크 모드에서, 기본 여백을 가진 요소가 td
또는 th
요소의 자식이며, 이후에 실질적인 형제가 없고, 비어 있는 경우, 사용자 에이전트
수준 스타일 시트 규칙이 'margin-block-start' 속성을 0으로 설정해야 합니다.
쿼크 모드에서, p
요소가 td
또는 th
요소의 자식이며, 이후에 실질적인 형제가 없는 경우, 사용자 에이전트 수준 스타일 시트 규칙이 'margin-block-end' 속성을 0으로 설정해야 합니다.
@namespace "http://www.w3.org/1999/xhtml" ;
input, select, button, textarea {
letter-spacing : initial;
word-spacing : initial;
line-height : initial;
text-transform : initial;
text-indent : initial;
text-shadow : initial;
appearance : auto;
}
input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
overflow : clip !important;
overflow-clip-margin: 0 !important;
}
input, select, textarea {
text-align: initial;
}
:autofill {
field-sizing: fixed !important;
}
input:is([type=reset i], [type=button i], [type=submit i]), button {
text-align: center;
}
input, button {
display: inline-block;
}
input[type=hidden i], input[type=file i], input[type=image i] {
appearance: none;
}
input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
[type=submit i], [type=color i], [type=search i]), select, button {
box-sizing: border-box;
}
textarea { white-space: pre-wrap; }
쿼크 모드에서, 다음 규칙도 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
input:not([type=image i]), textarea { box-sizing : border-box; }
각 종류의 폼 컨트롤은 위젯 섹션에서 외관 및 느낌을 설명합니다.
input
요소에서 type
속성이 상태 또는 이미지 버튼 상태가
아니고, 렌더링 중인 경우, 다음과 같이 작동해야 합니다:
내부 디스플레이 타입은 항상 'flow-root'입니다.
hr
요소@namespace "http://www.w3.org/1999/xhtml" ;
hr {
color : gray;
border-style : inset;
border-width : 1 px ;
margin-block : 0.5 em ;
margin-inline : auto;
overflow : hidden;
}
다음 규칙은 프레젠테이션 힌트로 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
hr[align=left i] { margin-left : 0 ; margin-right : auto; }
hr[align=right i] { margin-left : auto; margin-right : 0 ; }
hr[align=center i] { margin-left : auto; margin-right : auto; }
hr[color], hr[noshade] { border-style : solid; }
hr
요소에 color
속성 또는 noshade
속성이 있는 경우, 그리고 size
속성도 있는 경우, 해당 속성 값을 음수가 아닌 정수를 구문 분석하는 규칙을 사용하여 구문 분석하고 오류가 발생하지
않는다면, 사용자 에이전트는 구문 분석된 값을 2로 나눈 값을 프레젠테이션 힌트로 사용하여 해당 요소의 'border-top-width', 'border-right-width', 'border-bottom-width', 및 'border-left-width' 속성에 대해 픽셀 단위 길이로 사용해야 합니다.
그렇지 않은 경우, hr
요소에 color
속성도 없고 noshade
속성도 없지만 size
속성이 있고, 해당 속성 값을 음수가 아닌 정수를 구문 분석하는 규칙을 사용하여 구문 분석하고 오류가
발생하지 않는다면: 구문 분석된 값이 1인 경우, 사용자 에이전트는 해당 속성을 프레젠테이션 힌트로 사용하여 요소의 'border-bottom-width'를 0으로 설정해야 합니다; 그렇지 않고 구문 분석된 값이 1보다 큰 경우,
사용자 에이전트는 구문 분석된 값에서 2를 뺀 값을 픽셀 단위 길이로 사용하여 프레젠테이션 힌트로 요소의 'height' 속성에 사용해야
합니다.
width
속성이 있는 hr
요소는 요소의 크기 속성에 매핑됩니다. 'width' 요소의 속성에 매핑됩니다.
hr
요소에 color
속성이 있는 경우, 해당 값은 기존
색상 값을 구문 분석하는 규칙을 사용하여 구문 분석되고, 오류가 발생하지 않는다면, 사용자 에이전트는 속성을 프레젠테이션 힌트로 사용하여 요소의 'color' 속성을 해당
색상으로 설정해야 합니다.
fieldset
및
legend
요소
@namespace "http://www.w3.org/1999/xhtml" ;
fieldset {
display : block;
margin-inline : 2 px ;
border : groove 2 px ThreeDFace;
padding-block : 0.35 em 0.625 em ;
padding-inline : 0.75 em ;
min-inline-size : min-content;
}
legend {
padding-inline : 2 px ;
}
legend[align=left i] {
justify-self : left;
}
legend[align=center i] {
justify-self : center;
}
legend[align=right i] {
justify-self : right;
}
fieldset
요소가 CSS 박스를 생성할 때, 다음과 같이 작동해야 합니다:
요소는 새로운 블록 포맷팅 컨텍스트를 설정해야 합니다.
'display' 속성은 다음과 같이 작동해야 합니다:
계산된 'display' 값이 외부 디스플레이 타입이 'inline'인 값을 가지면 'inline-block'으로 작동합니다.
그렇지 않은 경우, 'flow-root'로 작동합니다.
이는 계산된 값을 변경하지 않습니다.
요소의 박스에 아래 목록의 조건을 만족하는 자식 박스가 있는 경우, 첫 번째 해당 자식 박스가 'fieldset' 요소의 렌더된 레전드가 됩니다:
legend
요소입니다.
요소에 렌더된 레전드가 있는 경우, 보더는 필드셋의 작성 모드를 사용하여 아래와 같이 정의된 직사각형 뒤에 그려지지 않아야 합니다:
직사각형의 블록 시작 모서리는 렌더된 레전드의 마진 직사각형의 블록 시작 모서리와 필드셋의 보더의 블록 시작 외부 모서리 중 더 작은 값을 가집니다.
직사각형의 블록 끝 모서리는 렌더된 레전드의 마진 직사각형의 블록 끝 모서리와 필드셋의 보더의 블록 끝 외부 모서리 중 더 큰 값을 가집니다.
직사각형의 인라인 시작 모서리는 렌더된 레전드의 보더 직사각형의 인라인 시작 모서리와 필드셋의 보더의 인라인 시작 외부 모서리 중 더 작은 값을 가집니다.
직사각형의 인라인 끝 모서리는 렌더된 레전드의 보더 직사각형의 인라인 끝 모서리와 필드셋의 보더의 인라인 끝 외부 모서리 중 더 큰 값을 가집니다.
요소의 보더에 할당된 공간은 요소의 'border-block-start-width' 또는 렌더된 레전드의 마진 박스 크기 중 더 큰 값이어야 합니다.
계산된 'block-size'가 'auto'가 아닌 경우, 보더를 넘어선 렌더된 레전드의 마진 박스 크기를 사용하여 'block-size'에서 그 크기를 빼야 합니다. 내용 박스의 블록 크기가 음수가 될 경우, 내용 박스의 블록 크기는 0이 되어야 합니다.
요소에 렌더된 레전드가 있는 경우, 해당 요소는 첫 번째 자식 박스여야 합니다.
익명 필드셋 내용 박스는 렌더된 레전드 후에 나타나야 하며, '::before' 및 '::after' 가상 요소를 포함하여 필드셋 요소의 콘텐츠를 포함해야 합니다.
'padding-top', 'padding-right', 'padding-bottom', 'padding-left' 속성의 사용된 값은 0이어야 합니다.
최소 콘텐츠 인라인 크기를 계산할 때, 렌더된 레전드의 최소 콘텐츠 인라인 크기와 익명 필드셋 내용 박스의 최소 콘텐츠 인라인 크기 중 더 큰 값을 사용해야 합니다.
최대 콘텐츠 인라인 크기를 계산할 때, 렌더된 레전드의 최대 콘텐츠 인라인 크기와 익명 필드셋 내용 박스의 최대 콘텐츠 인라인 크기 중 더 큰 값을 사용해야 합니다.
fieldset
요소의 렌더된 레전드는 다음과 같이 작동해야
합니다:
요소는 그 내용에 대해 새로운 포맷팅 컨텍스트를 설정해야 합니다. 이 포맷팅 컨텍스트의 타입은 요소의 'display' 값에 따라 결정됩니다.
'display' 속성은 계산된 값이 블록화된 것처럼 작동해야 합니다.
이는 계산된 값을 변경하지 않습니다.
계산된 값이 'auto'인 경우, 사용된 값은 적합 콘텐츠 인라인 크기여야 합니다.
요소는 블록 방향으로 보더 박스가 필드셋 요소의 블록 시작 쪽 보더 위에 중앙에 위치하도록 배치되어야 합니다.
fieldset
요소의 익명 필드셋 내용 박스는 다음과 같이 작동해야 합니다:
'display' 속성은 다음과 같이 작동해야 합니다:
다음 속성들은 fieldset
요소로부터 상속되어야 합니다:
'block-size' 속성은 '100%'로 설정되어야 합니다.
백분율 패딩을 계산할 때, 패딩이 필드셋 요소에 대해 계산된 것처럼 동작해야 합니다.
다음 요소들은 교체된
요소들이 될 수 있습니다: audio
,
canvas
,
embed
, iframe
,
img
, input
, object
, 그리고
video
.
embed
,
iframe
,
그리고
video
요소들은
교체된
요소들로 처리되어야 합니다.
임베디드
콘텐츠를 나타내는 canvas
요소는 교체된
요소로 처리되어야 합니다. 이러한 요소들의 콘텐츠는 해당 요소의 비트맵(존재할 경우) 또는 해당 요소와 동일한
자연
크기를 가지는 투명한
검정 비트맵입니다. 다른 canvas
요소들은 렌더링 모델에서 일반적인 요소로 처리되어야 합니다.
이미지,
플러그인 또는 그 콘텐츠 네비게이블을 나타내는 object
요소는 교체된
요소로 처리되어야 합니다.
다른 object
요소들은 렌더링 모델에서 일반적인 요소로 처리되어야 합니다.
사용자 인터페이스를 노출할 때 audio
요소는 교체된
요소로 처리되어야 하며, 이 요소는 약 한 줄 높이로 사용자 에이전트의 사용자 인터페이스 기능을 노출하는데 필요한
만큼 넓게 처리되어야 합니다. audio
요소가 사용자 인터페이스를 노출하지 않는 경우, 사용자 에이전트는 해당 요소의 'display' 속성을 강제로 'none'으로
계산해야 하며, CSS 규칙과 관계없이 처리해야 합니다.
video
요소가 사용자 인터페이스를 노출하는지 여부는 렌더링 크기에 영향을 주지 않아야 합니다. 컨트롤은 페이지 콘텐츠 위에
오버레이 되어 레이아웃 변경 없이 노출되며, 사용자가 필요로 하지 않을 때는 사라져야 합니다.
video
요소가 포스터 프레임 또는 비디오 프레임을 나타낼 때, 포스터 프레임 또는 비디오 프레임은 해당 포스터 프레임 또는
비디오 프레임의 비율을 유지하면서 video
요소 자체보다 더 크지 않은 최대 크기로 렌더링되어야 하며, 해당 video
요소의 중심에 위치해야 합니다.
모든 자막 또는 캡션은 관련 렌더링 규칙에 따라 video
요소 바로 위에 오버레이 되어야 합니다. WebVTT의 경우 WebVTT 텍스트 트랙의 표시를 업데이트하는
규칙을 따릅니다. [WEBVTT]
사용자 에이전트가 video
요소에 대해 사용자 인터페이스를 노출하기 시작할 때, 사용자 에이전트는 텍스트 트랙 렌더링을 업데이트하는
규칙을 실행해야 합니다. 이 규칙은 video
요소의 텍스트 트랙 목록에
있는 텍스트 트랙 중 표시 중이며 텍스트 트랙 유형이
자막 또는 캡션인 것에
적용됩니다 (예: WebVTT 기반의 텍스트 트랙의 경우, WebVTT 텍스트 트랙의 표시를 업데이트하는
규칙을 따릅니다). [WEBVTT]
video
및 canvas
요소의
크기를 조정해도 비디오 재생이 중단되거나 캔버스가 지워지지 않습니다.
다음 CSS 규칙들이 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
iframe { border : 2 px inset; }
video { object-fit : contain; }
사용자 에이전트는 img
요소와 input
요소를 type
속성이
이미지
버튼
상태에 있을 때, 다음 목록에서 첫 번째 적용 가능한 규칙에 따라 렌더링해야 합니다.
input
요소의 경우,
해당 요소는 버튼처럼 보이도록 하여 버튼임을 나타내야 합니다.
img
요소이며, 사용자 에이전트가 이 상태가 변경될 것으로 예상하지
않는 경우
img
요소인 경우
input
요소인 경우
위에서 언급한 아이콘은 대부분의 텍스트를 방해하지 않도록 상대적으로 작아야 하며 쉽게 클릭할 수 있어야 합니다. 예를 들어, 시각적 환경에서는 아이콘이 16x16 픽셀 정사각형이거나, 이미지가 스케일링 가능한 경우 1em x 1em이 될 수 있습니다. 오디오 환경에서는 아이콘이 짧은 신호음일 수 있습니다. 아이콘은 사용자가 이미지에 대한 사용자 에이전트 옵션을 확인할 수 있도록 하며, 적절한 경우, 실제 이미지와 상호작용했을 때 나타나는 컨텍스트 메뉴에 접근할 수 있도록 해야 합니다.
같은 절대 URL과 동일한 이미지 데이터를 가진 모든 애니메이션 이미지는 그룹으로 동일한 타임라인에 동기화되어 렌더링되어야 하며, 타임라인은 그룹에 가장 오래된 추가 시점에서 시작됩니다.
즉, 같은 절대 URL과 애니메이션 이미지 데이터를 가진 두 번째 이미지가 문서에 삽입될 때, 해당 이미지는 첫 번째 이미지에서 현재 표시되고 있는 애니메이션 사이클 지점으로 점프합니다.
사용자 에이전트가 애니메이션 이미지를 표시하는 img
요소의 애니메이션을
다시 시작해야 할 때, 해당 img
요소의 노드 문서에 있는 동일한 절대
URL과 동일한 이미지 데이터를 가진 모든 애니메이션 이미지는 애니메이션을 처음부터 다시 시작해야 합니다.
다음 CSS 규칙들이 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain : size !important;
contain-intrinsic-size: 300px 150px;
}
다음 CSS 규칙들은 문서
가 퀴크 모드에 있을 때 적용되어야
합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
img[align=left i] { margin-right : 3 px ; }
img[align=right i] { margin-left : 3 px ; }
다음 CSS 규칙들은 표시 힌트로 적용되어야 합니다:
@namespace "http://www.w3.org/1999/xhtml" ;
iframe[frameborder='0'], iframe[frameborder=no i] { border : none; }
embed[align=left i], iframe[align=left i], img[align=left i],
input[type=image i][align=left i], object[align=left i] {
float : left;
}
embed[align=right i], iframe[align=right i], img[align=right i],
input[type=image i][align=right i], object[align=right i] {
float : right;
}
embed[align=top i], iframe[align=top i], img[align=top i],
input[type=image i][align=top i], object[align=top i] {
vertical-align : top;
}
embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],
input[type=image i][align=baseline i], object[align=baseline i] {
vertical-align : baseline;
}
embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],
input[type=image i][align=texttop i], object[align=texttop i] {
vertical-align : text-top;
}
embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],
input[type=image i][align=absmiddle i], object[align=absmiddle i],
embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],
input[type=image i][align=abscenter i], object[align=abscenter i] {
vertical-align : middle;
}
embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],
input[type=image i][align=bottom i], object[align=bottom i] {
vertical-align : bottom;
}
다음과 같은 경우에 embed
,
iframe
,
img
,
또는 object
요소나 input
요소의 type
속성이 이미지 버튼
상태일 때, align
속성의 값이 ASCII
대소문자 구분 없음으로
"center
" 또는 "middle
" 문자열과 일치하면, 사용자 에이전트는 해당 요소의 'vertical-align' 속성이 부모 요소의 기준선에 해당 요소의 수직 중앙을 맞추는 값으로 설정된 것처럼 동작해야
합니다.
hspace
속성은 embed
,
img
,
또는 object
요소와, input
요소의 type
속성이 이미지 버튼
상태일 때, 크기 속성인 'margin-left'
및 'margin-right'에 매핑됩니다.
vspace
속성은 embed
,
img
,
또는 object
요소와, input
요소의 type
속성이 이미지 버튼
상태일 때, 크기 속성인 'margin-top'
및 'margin-bottom'에 매핑됩니다.
img
요소, object
요소, 또는 input
요소의 type
속성이 이미지 버튼
상태일 때, border
속성의 값을 비음수 정수를 파싱하는 규칙에
따라 파싱한 결과가 0보다 큰 숫자인 경우, 사용자 에이전트는 그 값을 다음 여덟 개의 표시 힌트에 사용해야 합니다: 네 개의 힌트는 요소의 'border-top-width', 'border-right-width', 'border-bottom-width', 및 'border-left-width' 속성에 해당 값을 픽셀 단위로 설정하고, 네 개의 힌트는 요소의 'border-top-style', 'border-right-style', 'border-bottom-style', 및 'border-left-style' 속성에 'solid' 값을 설정합니다.
width
및 height
속성은 img
요소의 크기 속성
소스 크기 속성에 매핑됩니다.
각각의 속성은 'width'
및 'height'
속성에 매핑됩니다. 이들은 또한 크기
규칙을 사용하여 종횡비 속성에 매핑됩니다.
width
및 height
속성은 embed
,
iframe
,
object
,
video
요소, 및 input
요소의 type
속성이 이미지 버튼
상태이며 이미지로 표시되거나 사용자에 의해 이미지로 표시될 것으로 예상되는 경우, 크기 속성에 매핑됩니다. 각각의 속성은 'width'
및 'height' 속성에 매핑됩니다.
width
및 height
속성은 크기
규칙을 사용하여 종횡비 속성에 매핑됩니다, img
및 video
요소, 그리고 input
요소의 type
속성이 이미지 버튼 상태일 때.
width
및 height
속성은 종횡비 속성에 매핑됩니다,
canvas
요소에서.
이미지 맵의 도형들은 CSS 캐스케이드의 목적으로 원래의 area
요소와는 독립적인 요소로 동작해야 하며, 동일한 스타일
규칙을 따르지만 img
또는 object
요소로부터 상속됩니다.
렌더링 목적으로는 오직 'cursor' 속성만이 도형에 영향을 미칠 수 있습니다.
예를 들어, area
요소가 style 속성을 통해 'cursor' 속성을 'help'로 설정한 경우,
사용자가 해당 도형을 지정할 때 커서는 도움말 커서로 변경됩니다.
마찬가지로, area
요소에 CSS
규칙을 적용하여 'cursor' 속성을 'inherit'으로 설정하거나, 'cursor' 속성을 설정하는 규칙이 전혀 적용되지 않은
경우, 도형의 커서는 img
또는 object
요소에서 상속되며, area
요소의 부모로부터 상속되지 않습니다.
CSS 기본 사용자 인터페이스 명세에서는 기본 외관을 가질 수 있는 요소들을 기본 외관으로, 이러한 기본 외관을 사용할지 여부를 위젯으로 정의하며, 'appearance' 속성에 따라 그 논리가 결정됩니다. 이러한 논리는 다시 각 요소가 변형 가능한 위젯인지, 아니면 변형 불가능한 위젯인지에 따라 달라집니다. 이 섹션에서는 HTML의 이러한 개념과 일치하는 요소, 그들의 기본 외관이 무엇인지, 그리고 그들의 변형된 상태나 기본 외관의 특수성을 정의합니다. [CSSUI]
다음 요소들은 CSS 'appearance' 속성의 목적으로 기본 외관을 가질 수 있습니다.
여러 위젯은 'writing-mode' CSS 속성에 의해 렌더링이 제어됩니다. 이러한 위젯의 목적을 위해 다음과 같은 정의를 사용합니다.
수평 쓰기 모드는 컨트롤의 'writing-mode' 속성을 해석하여 'horizontal-tb'라는 계산된 값을 얻을 때를 말합니다.
수직 쓰기 모드는 컨트롤의 'writing-mode' 속성을 해석하여 'vertical-rl', 'vertical-lr', 'sideways-rl' 또는 'sideways-lr'라는 계산된 값을 얻을 때를 말합니다.
요소가 버튼 레이아웃을 사용할 때, 이는 변형 가능한 위젯이며, 기본 외관은 버튼의 외관입니다.
버튼 레이아웃은 다음과 같이 정의됩니다:
요소가 button
요소인 경우, 'display' 속성은 다음과 같이 작동해야 합니다:
계산된 'display' 값이 'inline-grid', 'grid', 'inline-flex', 'flex', 'none', 또는 'contents'인 경우, 계산된 값으로 작동합니다.
그렇지 않고 계산된 'display' 값이 외부 디스플레이 유형이 'inline'인 경우, 'inline-block'으로 작동합니다.
그렇지 않으면 'flow-root'로 작동합니다.
요소는 그 콘텐츠를 위한 새로운 포맷팅 컨텍스트를 설정해야 합니다. 이 포맷팅 컨텍스트의 유형은 'display' 값에 의해 결정됩니다.
요소가 절대 위치인 경우, CSS 시각적 포맷팅 모델의 목적으로 대체 요소처럼 작동합니다. [CSS]
계산된 값이 'inline-size'가 'auto'인 경우, 사용된 값은 fit-content inline size입니다.
'align-self' 속성의 'normal' 키워드 목적을 위해, 요소가 대체 요소인 것처럼 작동합니다.
요소가 input
요소이거나, button
요소이면서 'display'의 계산된 값이 'inline-grid', 'grid', 'inline-flex' 또는 'flex'가 아닌
경우, 요소의 박스는 익명 버튼 콘텐츠 박스를 가지고 있으며, 다음과 같은 동작을 합니다:
이 박스는 새로운 블록 포맷팅 컨텍스트를 설정하는 블록 컨테이너 블록 레벨 요소입니다.
박스가 가로축에서 오버플로우하지 않으면 수평으로 중앙에 배치됩니다.
박스가 세로축에서 오버플로우하지 않으면 수직으로 중앙에 배치됩니다.
그렇지 않으면 익명 버튼 콘텐츠 박스가 없습니다.
기본 외관이 어떻게 예상되는지를 정의해야 합니다. 기본 외관.
button
요소button
요소는 CSS 박스를 생성할 때, 버튼을 나타내고 버튼 레이아웃을 사용하며, 익명 버튼 콘텐츠 박스의 콘텐츠(만약 익명 버튼 콘텐츠 박스가
있다면)는 그 요소의 박스가 원래 가질 자식 박스들입니다.
details
및
summary
요소
@namespace "http://www.w3.org/1999/xhtml" ;
details, summary {
display : block;
}
details > summary:first-of-type {
display : list-item;
counter-increment : list-item 0 ;
list-style : disclosure-closed inside;
}
details[open] > summary:first-of-type {
list-style-type : disclosure-open;
}
details
요소는 내부에 세 개의 자식 요소가 있는 섀도우 트리를 가져야 합니다:
첫 번째 자식 요소는 slot
요소로,
details
요소의 첫 번째 summary
요소 자식을 받도록 설정됩니다. 이 요소는 텍스트 내용이 구현
정의인(그리고 아마도 로케일에 따라 다른) 기본 요약이라는 단일 자식 summary
요소를 가집니다.
이 슬롯이 표현하는 summary
요소는 사용자가 세부사항을 표시하거나 숨기도록 요청할 수 있게 해야 합니다.
두 번째 자식 요소는 slot
요소로, details
요소의 나머지 자손들을 받도록 설정됩니다. 이 요소는 내용을 가지지 않습니다.
이 요소는 '::details-content' 의사 요소와 일치해야 합니다.
이 요소의 style
속성은 open
속성이
없는 경우 "display: block; content-visibility: hidden;
"로 설정되어야 합니다. open
속성이 있는 경우, style
속성은 "display: block;
"으로 설정되어야 합니다.
슬롯이 섀도우 트리 내에 숨겨져 있기 때문에, 이 style
속성은 작성자 코드에서
직접적으로 보이지 않습니다. 그러나 그 영향은 보일 수 있습니다. 특히, content-visibility: hidden
대신
display: none
을 선택하는 것은 다양한 레이아웃 정보를 쿼리하는 API의 결과에 영향을 미칩니다.
세 번째 자식 요소는 link
또는
style
요소로, 기본 요약에 대한 다음 스타일을
가집니다:
:host summary {
display : list-item;
counter-increment : list-item 0 ;
list-style : disclosure-closed inside;
}
:host([open]) summary {
list-style-type : disclosure-open;
}
이 자식 요소의 위치는 다른 두 요소에 비해 관찰할 수 없습니다. 이는 구현에서 해당 요소의 순서가 다를 수 있음을 의미합니다. 구현은 심지어 요소가 아닌 메커니즘을 사용하여 스타일을 섀도우 트리와 연관시킬 수도 있습니다.
이 섀도우 트리의 구조는 details
요소와 '::details-content' 의사 요소가 CSS 스타일에 반응하는 방식으로 관찰할 수 있습니다.
input
요소를 텍스트 입력 위젯으로 사용input
요소의 type
속성이 Text,
Telephone, URL, 또는
Email 상태에 있는 경우, 이는 전환 가능한 위젯입니다. 예상되는 네이티브 외관은 'inline-block' 박스로 렌더링되며, 이는 한 줄 텍스트 컨트롤을 나타냅니다.
input
요소의 type
속성이 Search
상태에 있는 경우, 이는 전환 가능한 위젯입니다. 예상되는 네이티브 외관은 한 줄
텍스트 컨트롤을 나타내는 'inline-block' 박스로 렌더링됩니다. 요소의 'appearance'
속성의 'textfield' 속성이 아닌 경우, 검색 필드임을 나타내는
별도의 스타일을 가질 수 있습니다.
input
요소의 type
속성이 Password 상태에 있는 경우, 이는 전환 가능한 위젯입니다. 예상되는 네이티브 외관은 입력된
데이터를 숨기는 한 줄 텍스트 컨트롤을 나타내는 'inline-block' 박스로 렌더링됩니다.
위 상태 중 하나에 속하는 input
요소의 사용된 값은 'line-height'
속성의 길이 값으로, 'line-height: normal'에 대한 사용된 값보다 작지 않아야 합니다.
사용된 값은 실제로는 'normal' 키워드가 아닙니다. 또한, 이 규칙은 계산된 값에 영향을 주지 않습니다.
이 텍스트 컨트롤이 텍스트 선택을 제공하는 경우, 사용자가 현재 선택을 변경하면 사용자 에이전트는 요소 작업을 큐에 추가하고, input
요소에서 select
라는
이벤트를 발생시켜야
합니다. 이 때 bubbles
속성은 true로 초기화됩니다.
위 상태 중 하나에 속하는 input
요소는 기본 선호 크기를 가진 요소이며, 사용자 에이전트는 이 요소에 'field-sizing' CSS
속성을 적용해야 합니다. 사용자 에이전트는 요소의 인라인 크기를 다음 단계에
따라 결정해야 합니다:
요소의 'field-sizing' 속성의 계산된 값이
'content'인 경우, 인라인 크기는 요소가 표시하는 텍스트에 따라 결정됩니다. 이 텍스트는 값이거나 placeholder
속성으로 지정된 짧은 힌트입니다. 사용자 에이전트는 인라인 크기에서 텍스트 캐럿 크기를 고려할 수 있습니다.
요소에 size
속성이 있고, 해당 속성의 값을 양의 정수 파싱 규칙을
사용하여 파싱하는 과정에서 오류가 발생하지 않는다면, 그 속성의 값을 문자 폭을 픽셀로 변환하는
알고리즘을 적용하여 얻은 값을 반환합니다.
그렇지 않은 경우, 숫자 20에 문자 폭을 픽셀로 변환하는 알고리즘을 적용하여 얻은 값을 반환합니다.
문자 폭을 픽셀로 변환하는 알고리즘은 (size-1)×avg + max을 반환합니다. 여기서 size는 변환할 문자 폭이고, avg는 요소에 대해 이 알고리즘을 실행 중인 주요 폰트의 평균 문자 폭(픽셀 단위)이며, max는 동일한 폰트의 최대 문자 폭(역시 픽셀 단위)입니다. (요소의 'letter-spacing' 속성은 결과에 영향을 미치지 않습니다.)
이 텍스트 컨트롤은 스크롤 컨테이너로 간주되어야 하며, 인라인 축에서는 스크롤을 지원하되, 블록 축에서는 지원하지 않아야 합니다.
예상되는 네이티브 외관과 기본 외관을 자세히 설명해야 합니다.
input
요소를 도메인 특정 위젯으로 사용input
요소의 type
속성이
Date 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 날짜
컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Month 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 월
컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Week 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 주
컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Time 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 시간
컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Local Date
and Time 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 로컬
날짜 및 시간 컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Number 상태에 있는 경우, 이는 전환 가능한 위젯으로 간주되며, 숫자
컨트롤을 나타내는 'inline-block' 박스로 렌더링되어야 합니다.
input
요소의 type
속성이 Number 상태에 있는 경우, 이는 기본 선호 크기를 가진 요소로 간주되며, 사용자 에이전트는 이 요소에 'field-sizing' CSS
속성을 적용해야 합니다. 블록 크기는 한 줄 높이에
해당합니다. 요소의 'field-sizing' 속성의
계산된 값이 'content'인 경우, 인라인 크기는 현재 값을 표시할 수 있는 너비로
예상됩니다. 그렇지 않은 경우, 인라인 크기는 가장 넓은
값을 표시할 수 있는 너비로 예상됩니다.
input
요소의 type
속성이 Date, Month, Week, Time, 또는 Local
Date and Time 상태에 있는 경우, 한 줄 높이 정도이며 가장 넓은 값을 표시할 수 있는 너비로 예상됩니다.
예상되는 네이티브 외관과 기본 외관을 자세히 설명해야 합니다.
input
요소를 범위
컨트롤로 사용input
요소의
type
속성이 Range 상태에 있는 경우, 이는 비전환 가능한 위젯으로
간주됩니다. 예상되는 네이티브 외관은 슬라이더
컨트롤을 나타내는 'inline-block' 박스로 렌더링됩니다.
이 컨트롤이 수평 쓰기 모드를 가지고 있을 때, 이 컨트롤은 수평 슬라이더로 예상됩니다. 'direction' 속성의 계산된 값이 'rtl'인 경우, 가장 낮은 값은 오른쪽에 위치하며, 그렇지 않으면 왼쪽에 위치합니다. 이 컨트롤이 수직 쓰기 모드를 가지고 있을 때, 이는 수직 슬라이더로 예상됩니다. 'direction' 속성의 계산된 값이 'rtl'인 경우, 가장 낮은 값은 아래쪽에 위치하며, 그렇지 않으면 위쪽에 위치합니다.
사전 정의된 추천 값(list
속성에 의해
제공됨)은 슬라이더에 눈금으로 표시되며, 슬라이더는 이 눈금에 맞춰 스냅됩니다.
예상되는 기본 외관을 자세히 설명해야 합니다.
input
요소를 색상
선택 도구로 사용input
요소의
type
속성이 Color
상태에 있는 경우, 이는 색상 선택 도구를 나타내며, 활성화되면 사용자가 색상 피커(예: 색상 휠 또는 색상 팔레트)를 통해 색상을 변경할 수 있도록 합니다. 이 요소가 CSS 박스를 생성할 때, 버튼 레이아웃을 사용하며, 이는 익명 버튼
콘텐츠 박스의 자식 박스를 포함하지 않습니다. 익명 버튼 콘텐츠 박스는 표현적 힌트를 사용하여 요소의
'background-color' 속성을 요소의 값으로 설정할 것으로 예상됩니다.
사전 정의된 추천 값(list
속성에 의해 제공됨)은 색상 선택 도구 인터페이스에 표시되며, 색상 선택 도구 자체에는 표시되지 않습니다.
예상되는 네이티브 외관 및 기본 외관에 대한 세부 사항이 필요합니다.
input
요소를 체크박스 및 라디오 버튼 위젯으로 사용
input
요소의 type
속성이 체크박스 상태에 있는
경우, 이는 변형 불가 위젯으로 inline-block
상자에 하나의 체크박스 컨트롤을 포함하며, 라벨은 없습니다.
예상되는 네이티브 외관 및 기본 외관에 대한 세부 사항이 필요합니다.
input
요소의 type
속성이 라디오 버튼 상태에
있는 경우, 이는 변형 불가 위젯으로 inline-block
상자에 하나의 라디오 버튼 컨트롤을 포함하며, 라벨은 없습니다.
예상되는 네이티브 외관 및 기본 외관에 대한 세부 사항이 필요합니다.
input
요소를 파일 업로드 컨트롤로 사용input
요소의 type
속성이 파일 업로드 상태에 있는 경우, 이는 CSS 박스를 생성할 때 inline-block
상자로 렌더링되며, 선택된 파일의 파일 이름을 나타내는 텍스트 영역과 파일 선택을 변경할 수 있는 파일 선택기를 제공하는 버튼을 포함합니다. 이 버튼은 버튼 레이아웃을 사용하고 ::file-selector-button 가상 요소와 일치합니다. 익명 버튼 콘텐츠 박스의 내용은 구현 정의된
텍스트(예: "파일 선택")일 수 있으며, 로케일에 따라 다를 수 있습니다.
input
요소의 type
속성이
파일 업로드 상태에 있는 경우, 사용자
에이전트는 이를 기본 선호 크기를 가진 요소로 처리할 수 있으며, field-sizing CSS 속성을
적용할 수 있습니다. field-sizing 속성의 계산된 값이 'content'일 경우, 요소의 내재적 크기는 ::file-selector-button 가상 요소 및 선택된 파일 이름과 같은 콘텐츠에 따라 달라집니다.
input
요소를 버튼으로 사용input
요소의 type
속성이 제출 버튼, 리셋 버튼, 또는 버튼 상태에
있는 경우, CSS 박스(CSS box)를 생성할 때 버튼을 표시하고, 버튼 레이아웃을 사용하며, 익명 버튼 콘텐츠 박스의 내용은 해당 요소의 value
속성에 포함된 텍스트(있을
경우) 또는 해당 요소의 type
속성에 따른 구현 정의(implementation-defined) 텍스트일 것입니다. 이 텍스트는 로케일에 따라 다를 수 있습니다.
marquee
요소@namespace "http://www.w3.org/1999/xhtml" ;
marquee {
display : inline-block;
text-align : initial;
overflow : hidden !important;
}
marquee
요소가 활성화되면, 아래 설명된 속성에 따라 애니메이션 방식으로
렌더링됩니다:
behavior
속성이 스크롤 상태일
때
요소의 direction
속성에 따라 아래에서 설명된 방향으로 요소의 내용을 슬라이드하여 시작 시점에서 콘텐츠가 marquee
의 시작
측면 밖에 있으며, 종료 시점에서 내부 끝 측면과 맞닿게 끝납니다.
예를 들어, direction
속성이 left
(기본값)인 경우, 콘텐츠는 오른쪽에서 시작하여 왼쪽으로 이동하며, 콘텐츠의 왼쪽 가장자리가 왼쪽 내부 가장자리와 맞닿게 됩니다.
애니메이션이 끝나면 사용자 에이전트는 마키의 현재 루프 인덱스를 증가시킵니다. 이 후에도 요소가 활성화된 상태로 남아 있으면, 사용자 에이전트는 애니메이션을 다시 시작합니다.
behavior
속성이
슬라이드 상태일 때
요소의 direction
속성에 따라 아래에서 설명된 방향으로 요소의 내용을 슬라이드하여 시작 시점에서 콘텐츠가 marquee
의 시작
측면 밖에 있으며, 종료 시점에서 끝 측면 밖에 끝납니다.
예를 들어, direction
속성이 left
(기본값)인 경우, 콘텐츠는 오른쪽에서 시작하여 왼쪽으로 이동하며, 콘텐츠의 오른쪽 가장자리가 왼쪽 내부 가장자리와 맞닿게 됩니다.
애니메이션이 끝나면 사용자 에이전트는 마키의 현재 루프 인덱스를 증가시킵니다. 이 후에도 요소가 활성화된 상태로 남아 있으면, 사용자 에이전트는 애니메이션을 다시 시작합니다.
behavior
속성이
교대 상태일
때
마키의 현재 루프
인덱스가 짝수(또는 0)일 때, 요소의 내용을 아래에서 설명된 방향으로 슬라이드하여 시작 시점에서 marquee
의 시작
측면과 맞닿게 하고, 종료 시점에서 끝 측면과 맞닿게 합니다.
마키의 현재 루프 인덱스가 홀수일 때, 요소의 내용을 반대 방향으로 슬라이드하여 시작 시점에서 끝 측면과 맞닿게 하고, 종료 시점에서 시작 측면과 맞닿게 합니다.
예를 들어, direction
속성이 left
(기본값)인 경우, 콘텐츠는 오른쪽에서 시작하여 왼쪽으로 이동하며, 콘텐츠의 왼쪽 가장자리가 왼쪽 내부 가장자리와 맞닿게 됩니다.
애니메이션이 끝나면 사용자 에이전트는 마키의 현재 루프 인덱스를 증가시킵니다. 이 후에도 요소가 활성화된 상태로 남아 있으면, 사용자 에이전트는 애니메이션을 계속합니다.
direction
속성은
다음 표에서 설명된 의미를 가집니다:
direction
속성 상태
| 애니메이션 방향 | 시작 가장자리 | 종료 가장자리 | 반대 방향 |
---|---|---|---|---|
left | ← 오른쪽에서 왼쪽으로 | 오른쪽 | 왼쪽 | → 왼쪽에서 오른쪽으로 |
right | → 왼쪽에서 오른쪽으로 | 왼쪽 | 오른쪽 | ← 오른쪽에서 왼쪽으로 |
up | ↑ 아래에서 위로 | 아래 | 위 | ↓ 위에서 아래로 |
down | ↓ 위에서 아래로 | 위 | 아래 | ↑ 아래에서 위로 |
어떤 경우든지 애니메이션은 각 프레임 간에 마키 스크롤 간격에 따른 지연이 있어야 하며, 콘텐츠는 각 프레임마다 마키 스크롤 거리로 주어진 거리만큼 이동해야 합니다.
marquee
요소에
bgcolor
속성이 설정된 경우, 이 값은 레거시 색상 값 구문 분석 규칙에 따라 구문 분석되며, 오류가 발생하지
않으면 사용자 에이전트는 이 속성을 프레젠테이션 힌트로
취급하여 요소의 '배경색' 속성으로 설정합니다.
width
및 height
속성이 marquee
요소에 설정된 경우,
해당 속성은 크기 속성에
매핑되며, 각각 'width' 및 'height' 속성에 매핑됩니다.
marquee
요소의
vspace
속성은 크기 속성에 매핑되며, 요소의 'margin-top' 및 'margin-bottom' 속성에 매핑됩니다. hspace
속성은 크기 속성에
매핑되며, 요소의 'margin-left'
및 'margin-right' 속성에 매핑됩니다.
meter
요소@namespace "http://www.w3.org/1999/xhtml" ;
meter { appearance : auto; }
meter
요소는 전환 가능한 위젯(devolvable widget)입니다. 이 요소의 예상되는 기본 외형은 '1em'의 '블록 크기'와
'5em'의 '인라인 크기'를 가진 '인라인 블록' 박스로
렌더링되며, '-0.2em'의 '수직 정렬'
속성을 갖고 게이지(gauge)를 나타냅니다.
이 요소가 수평 쓰기 모드에 있을 때는 수평 게이지를 나타낼 것으로 예상됩니다. 최소값은 '방향' 속성의 계산된 값이 'rtl'인 경우 오른쪽에 있으며, 그렇지 않은 경우 왼쪽에 있습니다. 이 요소가 수직 쓰기 모드에 있을 때는 수직 게이지를 나타낼 것으로 예상됩니다. 최소값은 '방향' 속성의 계산된 값이 'rtl'인 경우 아래쪽에 있으며, 그렇지 않은 경우 위쪽에 있습니다.
사용자 에이전트는 게이지에 대한 플랫폼 규칙과 일치하는 표현을 사용할 것으로 예상됩니다.
게이지에 표시해야 할 내용에 대한 요구 사항은 meter
요소의 정의에 포함되어 있습니다.
예상되는 기본 외형(primitive appearance)에 대한 세부 사항이 필요합니다.
progress
요소@namespace "http://www.w3.org/1999/xhtml" ;
progress { appearance : auto; }
progress
요소는 전환 가능한 위젯(devolvable widget)입니다. 이 요소의 예상되는 기본 외형은 '1em'의 '블록 크기'와
'10em'의 '인라인 크기'를
가진 '인라인 블록' 박스로 렌더링되며, '-0.2em'의 '수직 정렬' 속성을 가집니다.
이 요소가
수평 쓰기 모드에 있을 때, 요소는 수평 진행
막대로 표현될 것으로 예상됩니다. '방향' 속성의 계산된 값이 'rtl'인 경우 시작점이 오른쪽에, 끝점이 왼쪽에 있으며, 그렇지 않은 경우 시작점이 왼쪽에, 끝점이 오른쪽에
있습니다. 이 요소가 수직 쓰기 모드에 있을 때는
수직 진행 막대로 표현될 것으로 예상됩니다. '방향' 속성의 계산된 값이 'rtl'인 경우 시작점이 아래쪽에, 끝점이 위쪽에 있으며, 그렇지 않은 경우 시작점이 위쪽에, 끝점이 아래쪽에
있습니다.
사용자 에이전트는 진행 막대에 대한 플랫폼 규칙과 일치하는 표현을 사용할 것으로 예상됩니다. 특히, 사용자 에이전트는 결정형(progress)과 비결정형(indeterminate) 진행 막대에 대해 다른 표현을 사용할 것으로 기대됩니다. 또한, 사용자 에이전트는 요소의 크기에 따라 표현을 달리할 것으로 예상됩니다.
진행 막대가 결정형인지 비결정형인지, 그리고 결정형 진행 막대가 어떤 진행 상태를 보여줘야 하는지에 대한 요구 사항은 progress
요소의 정의에
포함되어 있습니다.
예상되는 기본 외형(primitive appearance)에 대한 세부 사항이 필요합니다.
select
요소select
요소는 기본 권장 크기를 가진 요소이며, 사용자 에이전트는 'field-sizing'
CSS 속성을 select
요소에 적용할
것으로 예상됩니다.
select
요소는 그 속성에 따라
리스트 박스 또는 드롭다운 박스 중 하나입니다.
select
요소에 multiple
속성이 있으면, 멀티
셀렉트 리스트 박스로 렌더링될 것으로 예상됩니다.
select
요소에 multiple
속성이 없고, display size가 1보다 크면, 단일 셀렉트 리스트 박스로 렌더링될 것으로 예상됩니다.
이 요소가 리스트 박스로 렌더링되면, 이는 전환 가능한 위젯(devolvable widget)으로, '인라인 블록' 박스로 렌더링될 것으로 예상됩니다. 이 요소의 인라인 크기는 select
의 레이블 너비와 스크롤바의 너비를 더한 값입니다. 이 요소의 블록 크기는 다음 단계에 따라 결정됩니다:
요소의 ‘field-sizing’ 속성의 계산된 값이 ‘content’인 경우, 항목에 대한 모든 행을 포함하는 데 필요한 높이를 반환합니다.
size
속성이 없거나 유효한 값이
없는 경우, 네 개의 행을 포함하는 데 필요한 높이를 반환합니다.
그 외의 경우, 요소의 표시 크기에 의해 지정된 만큼의 항목에 대한 행을 포함하는 데 필요한 높이를 반환합니다.
select
요소에
multiple
속성이 없고, 표시 크기가 1인 경우, 해당 요소는
'inline-block' 한 줄의 드롭다운 상자로 렌더링될 것으로 예상됩니다.
해당 요소의 인라인 크기는
내재적 크기로
‘select’ 요소의
레이블의 너비입니다. 만약 요소의 'field-sizing'
속성의 계산된 값이
'content'일 경우, 인라인 크기는 표시된
텍스트에 따라 달라집니다. 표시된 텍스트는 일반적으로 선택 여부가 true로 설정된 option
요소의 레이블입니다.
해당 요소가 드롭다운 상자로 렌더링될 때, 이것은
devolvable 위젯입니다. 요소의 계산된 값이
'appearance' 속성이 'menulist-button'
일 때,
그것은 "드롭다운 버튼"을 포함한 드롭다운 상자처럼 보이지만, 반드시 호스트 운영 체제의 네이티브 컨트롤을 사용하여 렌더링될 필요는 없습니다.
이러한 상태에서는 'color', 'background-color' 및 'border'와 같은 CSS 속성을 무시해서는 안 됩니다
(이는 일반적으로 네이티브 외관에 따라 요소를 렌더링할 때 허용됩니다).
어느 경우든 (리스트 상자 또는 드롭다운 상자), 요소의 항목은 해당 요소의 옵션 목록이 될 것으로
예상되며, 요소의 optgroup
요소는 적용 가능한 경우 옵션 그룹에 대한 헤더를 제공하는 자식 요소를 제공할 것입니다.
optgroup
요소는
해당 요소의 label
속성을 표시하여 렌더링될 것으로 예상됩니다.
option
요소는
해당 요소의 레이블을 표시하여
렌더링될 것으로 예상되며, 만약 optgroup
요소가 있다면 그 아래에 들여쓰기 된 형태로 표시될 것입니다.
하나 이상의 자식 hr
요소 형제들의 각 시퀀스는 단일 구분선으로 렌더링될 수 있습니다.
‘select’ 요소의 레이블의 너비는 가장 넓은 optgroup
요소를 렌더링하는데
필요한 너비와 요소의 옵션 목록에
있는 가장 넓은 option
요소를
렌더링하는데
필요한 너비 중 더 넓은 것입니다 (들여쓰기가 있는 경우, 이를 포함하여).
select
요소에 자리 표시자 레이블 옵션이
포함되어 있는 경우, 사용자 에이전트는 해당 option
이 유효한 옵션이 아니라 레이블임을 나타내는 방식으로 렌더링할 것으로 예상됩니다.
이는 사용자가 해당 자리 표시자
레이블 옵션을 명시적으로 선택하지 못하도록 하는 것을 포함할 수 있습니다. 자리 표시자 레이블 옵션의 선택 여부가 true일 때, 컨트롤은 현재 유효한 옵션이
선택되지 않았음을 나타내는 방식으로 표시될 것으로 예상됩니다.
사용자 에이전트는 select
의
레이블이 페이지의 일부로 표시되는지 메뉴 컨트롤에 표시되는지에 관계없이 정렬이 일관되도록 렌더링할 것으로 예상됩니다.
요소의 예상 네이티브 외관과 기본 외관에 대한 세부 사항을 명시해야 합니다.
textarea
요소textarea
요소는 전환 가능한 위젯(devolvable widget)으로, 멀티라인 텍스트 컨트롤을 나타내는 '인라인 블록' 박스로 렌더링될 것으로 예상됩니다. 이 멀티라인 텍스트 컨트롤이 선택을 제공하는 경우, 사용자가 현재 선택을
변경하면 사용자 에이전트는 요소 작업을 큐에 추가하고
사용자 상호작용 작업 소스에
대해 textarea
요소에
select
라는 이름의 이벤트를 발생시키도록 기대됩니다. 이때 bubbles
속성은 true로 초기화됩니다.
textarea
요소는 기본 선호 크기를 가진 요소이며, 사용자 에이전트는 'field-sizing' CSS 속성을 textarea
요소에 적용할 것으로 예상됩니다.
요소의 'field-sizing' 속성의 계산된 값이 'content'인 경우, 내재적 크기는 요소가 표시하는 텍스트에 따라 결정됩니다. 텍스트는
원시 값이거나
placeholder
속성에 의해 지정된 짧은 힌트일 수 있습니다. 사용자 에이전트는 내재적 크기에 텍스트 캐럿 크기를 고려할 수 있습니다. 그렇지 않은 경우, 요소의 내재적 크기는 textarea 유효 너비와 textarea 유효 높이에서 계산됩니다 (아래에 정의됨).
textarea
요소의
textarea 유효 너비는
size×avg + sbw입니다.
여기서 size는 요소의 문자
너비,
avg는 요소의 주요 폰트의 평균 문자 너비 (단위: CSS 픽셀)이며, sbw는 스크롤바의 너비 (단위: CSS
픽셀)입니다. (요소의 'letter-spacing' 속성은 결과에 영향을 미치지 않습니다.)
textarea
요소의
textarea 유효 높이는 요소의 CSS 픽셀 단위로 지정된 줄 수의 높이와 스크롤바의 높이를 더한 값입니다.
사용자 에이전트는 textarea
요소에 'white-space' CSS 속성을
적용할 것으로 예상됩니다. 역사적인 이유로, 요소에 값이 "off
"인 wrap
속성이 있는 경우, 사용자
에이전트는
속성을 요소의 'white-space' 속성을 'pre'로
설정하는 프레젠테이션 힌트로 처리할 것으로 예상됩니다.
요소의 예상 네이티브 외관과 기본 외관에 대한 세부 사항을 명시해야 합니다.
사용자 에이전트는 frameset
요소를 뷰포트의 높이와 너비를 가진 박스로 렌더링할 것으로 예상됩니다.
다음 레이아웃 알고리즘에 따라 렌더링된 표면을 제공합니다:
cols 및 rows 변수는 숫자와 단위로 구성된 0개 이상의 쌍 목록이며, 단위는 퍼센트, 상대, 절대 중 하나입니다.
요소의 cols
속성의 값을 구문 분석하기 위해 차원의 목록을 구문 분석하기 위한 규칙을 사용합니다.
cols은 그 결과로 설정되며, 속성이 없는 경우 빈 목록으로 설정됩니다.
요소의 rows
속성의 값을 구문 분석하기 위해 차원의 목록을 구문 분석하기 위한 규칙을 사용합니다.
rows은 그 결과로 설정되며, 속성이 없는 경우 빈 목록으로 설정됩니다.
숫자가 0이고 단위가 상대인 cols 또는 rows 항목에 대해, 항목의 숫자를 1로 변경합니다.
cols에 항목이 없는 경우, 값이 1이고 단위가 상대인 단일 항목을 cols에 추가합니다.
rows에 항목이 없는 경우, 값이 1이고 단위가 상대인 단일 항목을 rows에 추가합니다.
아래 정의된 알고리즘을 호출하여 차원의 목록을 픽셀 값 목록으로
변환합니다.
입력 목록으로 cols를 사용하고, frameset
이 렌더링되는 표면의 너비를 사용합니다.
이 너비는 CSS 픽셀로 입력 차원입니다. sized cols가 결과 목록입니다.
아래 정의된 알고리즘을 호출하여 차원의 목록을 픽셀 값 목록으로
변환합니다.
입력 목록으로 rows를 사용하고, frameset
이 렌더링되는 표면의 높이를 사용합니다.
이 높이는 CSS 픽셀로 입력 차원입니다. sized rows가 결과 목록입니다.
표면을 w×h 직사각형의 격자로 나눕니다. 여기서 w는 sized cols 목록의 항목 수이고, h는 sized rows 목록의 항목 수입니다.
그리드의 각 열을 sized cols 목록의 해당 항목만큼 CSS 픽셀만큼 너비로 크기를 조정합니다.
그리드의 각 행을 sized rows 목록의 해당 항목만큼 CSS 픽셀 높이로 크기를 조정합니다.
알고리즘이 호출된 frameset
요소의
자식 요소인
frame
및 frameset
요소의 목록을 children으로 정의합니다.
이전 단계에서 만든 직사각형 격자의 각 행에 대해, 위에서 아래로 이 하위 단계를 실행합니다:
frameset
요소가 테두리를
가지고 있는 경우,
해당 요소의 프레임 테두리 색상을 사용하여
직사각형 주위에 외부 테두리를 그립니다.
각 직사각형에 요소가 할당된 경우, 그 요소가 테두리를 가지고 있는 경우, 그 직사각형 주위에 내부 테두리를 그리며, 해당 요소의 프레임 테두리 색상을 사용합니다.
(보이는) 테두리가 frame
요소와 같은
noresize
속성을 가진 요소와 접하지 않는 경우(중첩된 frameset
요소에서도 포함),
사용자 에이전트는 사용자가 테두리를 이동하여 직사각형을 다시 크기 조정하고,
중첩된 frameset
그리드의 비율을 유지할 수 있도록
해야 합니다.
아래 알고리즘이 true를 반환하는 경우, frameset
또는
frame
요소는 테두리를
가지고 있습니다:
요소에 frameborder
속성이 있고, 그 값이 빈 문자열이 아니며 첫 번째 문자가 U+0031 숫자 1(1) 또는
U+0079 소문자 y(y), 또는 U+0059 대문자 Y(Y) 중 하나인 경우 true를 반환합니다.
그렇지 않으면 요소에 frameborder
속성이 있는 경우 false를 반환합니다.
그렇지 않으면 요소에 부모 요소가 frameset
요소인 경우,
그 요소가 테두리를 가지고 있는지에 따라 true를
반환하고, 그렇지 않으면 false를 반환합니다.
그렇지 않으면 true를 반환합니다.
frameset
또는 frame
요소의
프레임 테두리 색상은 다음 알고리즘을 통해 얻은 색상입니다:
요소에 bordercolor
속성이 있고, 그 속성의 값을 레거시 색상 값을 구문 분석하는 규칙을
적용하여 오류가 발생하지 않는 경우, 얻은 색상을 반환합니다.
그렇지 않으면 요소에 부모 요소가 frameset
요소인 경우,
해당 요소의 프레임 테두리
색상을 반환합니다.
그렇지 않으면 회색을 반환합니다.
차원의 목록을 픽셀 값 목록으로 변환하는 알고리즘은 다음 단계로 구성됩니다:
input list는 알고리즘에 전달된 숫자와 단위의 목록입니다.
output list는 input list와 같은 길이의 숫자 목록으로, 모두 0으로 설정됩니다.
output list의 항목은 같은 위치에 있는 input list의 항목에 해당합니다.
input dimension은 알고리즘에 전달된 크기입니다.
count percentage는 단위가 퍼센트인 input list 항목의 수입니다.
total percentage는 단위가 퍼센트인 input list의 모든 숫자의 합계입니다.
count relative는 단위가 상대인 input list 항목의 수입니다.
total relative는 단위가 상대인 input list의 모든 숫자의 합계입니다.
count absolute는 단위가 절대인 input list 항목의 수입니다.
total absolute는 단위가 절대인 input list의 모든 숫자의 합계입니다.
remaining space는 input dimension의 값입니다.
total absolute가 remaining space보다 큰 경우, input list에서 단위가 절대인 각 항목에 대해, output list에서 해당 값을 input list의 항목 숫자에 remaining space를 곱하고 total absolute로 나눈 값으로 설정합니다. 그런 다음 remaining space를 0으로 설정합니다.
그렇지 않으면, input list에서 단위가 절대인 각 항목에 대해, output list의 해당 값을 input list의 숫자로 설정합니다. 그런 다음 remaining space를 total absolute만큼 감소시킵니다.
total percentage를 input dimension에 곱하고 100으로 나눈 값이 remaining space보다 큰 경우, input list에서 단위가 퍼센트인 각 항목에 대해, output list에서 해당 값을 input list의 항목 숫자에 remaining space를 곱하고 total percentage로 나눈 값으로 설정합니다. 그런 다음 remaining space를 0으로 설정합니다.
그렇지 않으면, input list에서 단위가 퍼센트인 각 항목에 대해, output list에서 해당 값을 input list의 항목 숫자에 input dimension을 곱하고 100으로 나눈 값으로 설정합니다. 그런 다음 remaining space를 input dimension에 total percentage를 곱하고 100으로 나눈 값만큼 감소시킵니다.
input list에서 단위가 상대인 각 항목에 대해, output list에서 해당 값을 input list의 항목 숫자에 remaining space를 곱하고 total relative로 나눈 값으로 설정합니다.
output list를 반환합니다.
프레임 너비를 위해 정수 값을 사용하는 사용자 에이전트(서브픽셀 정밀도로 프레임을 배치할 수 있는 사용자 에이전트와는 다르게)는 나머지를 먼저 단위가 상대인 마지막 항목에 할당하고, 그 다음에는 단위가 퍼센트인 각 항목에 (비례적으로가 아닌) 동일하게, 그 다음에는 단위가 절대인 각 항목에 (비례적으로가 아닌) 동일하게, 그리고 마지막으로 다른 모든 방법이 실패할 경우 마지막 항목에 할당할 것으로 예상됩니다.
frame
요소의 내용이
frameset
부모를 가지지 않는 경우, 해당 요소의 내용은
투명한 검정색으로 렌더링될 것으로 예상됩니다;
이 경우 사용자 에이전트는 해당 요소의 내용 탐색 가능을 렌더링하지
않으며,
해당 요소의 내용 탐색 가능은 너비와 높이가 0인
뷰포트를 가질 것으로 예상됩니다.
사용자 에이전트는 사용자가 이후 탐색에 사용할 탐색 가능한 요소를 선택하는 것과 같은 하이퍼링크 활성화 및 폼 제출의 일부 측면을 제어할 수 있도록 해야 합니다.
사용자 에이전트는 사용자가 하이퍼링크와 폼의 목적지를 탐색하기 전에 발견할 수 있도록 해야 합니다.
사용자 에이전트는 하이퍼링크가 하이퍼링크 감사를 포함하는지 여부와, 이러한 감사의 일부로 연락할 도메인을 최소한 사용자에게 알려야 합니다.
사용자 에이전트는 탐색할 때
탐색 가능한 요소를 q
,
q
,
blockquote
,
ins
,
및 del
요소의 cite
속성에 의해 표시된 URL로 이동할 수 있습니다.
사용자 에이전트는 link
요소로 생성된 하이퍼링크를 사용자 인터페이스에 노출할 수 있습니다.
이는 이전에 논의된 바와
같습니다.
title
속성사용자 에이전트는 사용자의 요청 시 요소의 권고 정보를 노출하고, 이러한 정보가 존재함을 사용자에게 알릴 것으로 예상됩니다.
사용자가 포인팅 장치를 사용할 수 있는 인터랙티브 그래픽 시스템에서는 툴팁 형태로 표시될 수 있습니다. 사용자가 포인팅 장치를 사용할 수 없는 경우, 사용자 에이전트는 해당 내용을 다른 방식으로 제공해야 합니다. 예를 들어, 요소를 포커스 가능 영역으로 만들고 현재 포커스된 요소의 권고 정보를 항상 표시하거나, 터치 장치에서 사용자가 화면을 팬할 때 사용자의 손가락 아래 있는 요소의 권고 정보를 표시하는 방식이 있을 수 있습니다.
U+000A 라인 피드(LF) 문자는 툴팁에서 줄 바꿈을 유발할 것으로 예상됩니다. U+0009 문자 탭(tab) 문자는 다음 글리프가 다음 탭 정지 위치와 정렬되도록 8배의 U+0020 스페이스 문자 너비의 배수 위치에 탭 정지가 발생하며, 탭 정지 위치로 수평 이동을 일으킬 것으로 예상됩니다.
예를 들어, 시각적 사용자 에이전트는 title
속성이 있는
요소를 포커스 가능하게 만들고, title
속성이 있는 포커스된 요소가 포커스를 받을 때 해당 요소 아래에 툴팁을 표시할 수 있습니다.
이를 통해 사용자는 문서 내의 모든 권고 텍스트를 탭으로 찾아볼 수 있습니다.
또 다른 예로, 화면 읽기 프로그램은 툴팁이 있는 요소를 읽을 때 오디오 큐를 제공하고, 큐가 재생된 마지막 툴팁을 읽는 키를 제공할 수 있습니다.
현재 텍스트 편집 캐럿(즉, 활성 범위, 비어 있고 편집 호스트 내에 있는 경우)이 있는 경우, CSS 렌더링 모델의 목적을 위해 세로 크기를 가진 인라인 대체 요소처럼 동작할 것으로 예상됩니다. 이때 캐럿의 너비는 0입니다.
이것은 비어 있는 블록에도 캐럿이 들어갈 수 있으며, 캐럿이 그러한 요소 내에 있을 때 요소를 통해 여백이 겹치는 것을 방지한다는 것을 의미합니다.
사용자 에이전트는 사용자 인터페이스에 노출된 텍스트의 유니코드 의미론을 준수할 것으로 예상됩니다. 예를 들어 대화 상자, 제목 표시줄, 팝업 메뉴 및 툴팁에 표시되는 텍스트에서 양방향 알고리즘을 지원합니다. 요소의 내용에서 가져온 텍스트는 텍스트가 가져온 요소의 방향성을 준수하는 방식으로 렌더링될 것으로 예상됩니다. 속성에서 가져온 텍스트는 속성의 방향성을 준수하는 방식으로 렌더링될 것으로 예상됩니다.
다음은 프로그래밍 언어를 선택하도록 요청하는 히브리어 텍스트가 포함된 마크업 예제입니다. 이 언어들의 일부 이름에 있는 구두점을 고려하면 좌에서 우로 읽는 방향이 중요합니다:
< p dir = "rtl" lang = "he" >
< label >
בחר שפת תכנות:
< select >
< option dir = "ltr" > C++</ option >
< option dir = "ltr" > C#</ option >
< option dir = "ltr" > FreePascal</ option >
< option dir = "ltr" > F#</ option >
</ select >
</ label >
</ p >
select
요소가 드롭다운 상자로 렌더링된 경우, 올바른 렌더링은 드롭다운과 현재 선택 항목을 표시하는 상자 모두에서 구두점이 동일하게 나타나도록 보장해야 합니다.
속성의 방향성은 속성과 요소의 dir
속성에 따라 달라집니다.
다음 예제에서 이를 확인할 수 있습니다. 다음 마크업을 고려해 보세요:
< table >
< tr >
< th abbr = "(א" dir = ltr > A
< th abbr = "(א" dir = rtl > A
< th abbr = "(א" dir = auto > A
</ table >
abbr
속성이 툴팁 또는
다른 사용자 인터페이스에서
렌더링되는 경우, 첫 번째는 왼쪽 괄호를 가집니다(방향이 'ltr'이기 때문입니다). 두 번째는 오른쪽 괄호를 가집니다(방향이 'rtl'이기 때문입니다).
세 번째는 속성 값에서 'rtl'로 결정되므로 오른쪽 괄호를 가집니다.
그러나 속성이 방향성 지원 속성이 아닌 경우, 결과는 다를 것입니다:
< table >
< tr >
< th data-abbr = "(א" dir = ltr > A
< th data-abbr = "(א" dir = rtl > A
< th data-abbr = "(א" dir = auto > A
</ table >
이 경우 사용자 에이전트가 data-abbr
속성을 사용자 인터페이스(예: 디버깅 환경)에서 노출하는 경우, 마지막 사례는 왼쪽 괄호로
렌더링됩니다. 이는 방향이 요소의 내용에서 결정되기 때문입니다.
스크립트에서 제공된 문자열(예: window.alert()
의 인수)은
표시될 때 양방향 알고리즘에 의해 정의된 대로 하나 이상의 양방향 알고리즘 문단으로 처리될 것으로 예상됩니다.
여기에는 U+000A 라인 피드(LF) 문자의 문단 분리 동작을 지원하는 것이 포함됩니다. 이러한 텍스트의 문단 수준을 양방향 알고리즘에서
결정할 때, 이 명세서는 규칙 P2 및 P3의 상위 레벨 재정의를 제공하지 않습니다. [BIDI]
필요한 경우 작성자는 주어진 문단의 특정 방향을 강제하기 위해 유니코드 U+200E LEFT-TO-RIGHT MARK 또는 U+200F RIGHT-TO-LEFT MARK 문자를 사용하여 문단을 시작할 수 있습니다.
따라서 다음 스크립트:
alert( '\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!' )
...는 항상 "למד LMTH היום!"라는 메시지를 표시합니다. (그리고 "דמל HTML םויה!"로 표시되지 않습니다), 이는 사용자 에이전트 인터페이스의 언어나 페이지 또는 그 요소들의 방향과 상관없이 적용됩니다.
더 복잡한 예로, 다음 스크립트를 고려해 보세요:
/* 경고: 이 스크립트는 오른쪽에서 왼쪽으로 쓰는 스크립트를 올바르게 처리하지 않습니다 */
var s;
if ( s = prompt( 'What is your name?' )) {
alert( s + '! Ok, Fred, ' + s + ', and Wilma will get the car.' );
}
사용자가 "Kitty"를 입력하면, 사용자 에이전트는 "Kitty! Ok, Fred, Kitty, and Wilma will get the car."라는 경고를 표시합니다. 그러나 사용자가 "لا أفهم"를 입력하면, 양방향 알고리즘이 문단의 방향을 오른쪽에서 왼쪽으로 결정하므로 출력은 다음과 같은 의도치 않은 결과를 낳습니다: "لا أفهم! derF ,kO, لا أفهم, rac eht teg lliw amliW dna."
사용자가 제공한 텍스트(또는 방향성이 알려지지 않은 다른 텍스트)로 시작하는 경고를 왼쪽에서 오른쪽으로 렌더링하도록 강제하려면, 문자열에 U+200E LEFT-TO-RIGHT MARK 문자를 접두사로 추가할 수 있습니다:
var s;
if ( s = prompt( 'What is your name?' )) {
alert( ' \u200E ' + s + '! Ok, Fred, ' + s + ', and Wilma will get the car.' );
}
사용자 에이전트는 사용자가 문서
의 물리적 형태(또는 물리적 형태의 표현)를
얻을 수 있는 기회를 요청할 수 있도록 해야 합니다. 예를 들어, 페이지를 인쇄하거나 PDF 형식으로 변환하는 옵션을 선택하는 경우가
해당됩니다. [PDF]
사용자가 실제로 문서
의 물리적 형태(또는 물리적 형태의 표현)를
얻을 때, 사용자 에이전트는 인쇄 매체를 위한
문서
의 새로운 렌더링을 생성할 것으로 예상됩니다.
HTML 사용자 에이전트는 특정 상황에서 자체적으로 내장된 지식이 없는 어휘를 사용하는 비-HTML 문서를 렌더링하게 될 수 있습니다. 이 섹션에서는 사용자 에이전트가 이러한 문서를 어느 정도 유용하게 처리할 수 있는 방법을 제공합니다.
문서
가 스타일 없는 문서인 동안,
사용자 에이전트는 스타일 없는 문서
보기로 렌더링할 것으로 예상됩니다.
문서
가 다음 조건을 충족하는 동안 스타일 없는 문서입니다:
문서
에 작성자 스타일 시트가 없습니다(HTTP 헤더, 처리 명령,
링크
같은 요소, 스타일
같은 인라인 요소
또는 다른 메커니즘을 통해 참조되는 스타일 시트 포함).
문서
의 요소 중 어느 것도 표현적 힌트를 가지고 있지 않습니다.
문서
의 요소 중 어느 것도 스타일 속성을 가지고 있지
않습니다.
문서
의 요소 중 어느 것도 다음 네임스페이스 중 하나에 포함되지
않습니다:
HTML 네임스페이스,
SVG 네임스페이스,
MathML 네임스페이스.
문서
에는 포커스 가능 영역(예: XLink) 또는 뷰포트 외의 다른 포커스 가능 영역이 없습니다.
문서
에는 하이퍼링크(예: XLink)가 없습니다.
문서
와 연관된
문서
로,
창
객체를 가진 스크립트가 존재하지 않습니다.
문서
의 요소 중 어느 것도 등록된 이벤트 리스너를 가지고 있지
않습니다.
스타일 없는 문서 보기는 CSS에 따라 렌더링되지 않는 문서 뷰를 의미합니다
(이 문맥에서는 적용 가능한 스타일이 없으므로 텍스트 벽만 나타날 것입니다). 대신 개발자에게 유용한 방식으로 렌더링됩니다.
여기에는 문서
객체의 소스를
문법 강조와 함께 표시하거나, DOM 트리만 표시하거나, 단순히 페이지가 스타일 없는 문서라는 메시지를 표시하는 것이 포함될 수 있습니다.
만약 문서
가 더 이상 스타일 없는 문서가 아니게 되면,
위의 조건이 더 이상 적용되지 않으므로, 이러한 요구 사항을 따르는 사용자 에이전트는 일반적인 CSS 렌더링으로 전환할 것입니다.
이 섹션에 나열된 기능은 준수 검사기에서 경고를 발생시킬 것입니다.
작성자는 border
속성을
img
요소에 지정해서는 안
됩니다.
속성이 존재하는 경우, 그 값은 문자열 "0
"이어야 합니다. 대신 CSS를 사용해야 합니다.
작성자는 charset
속성을
script
요소에
지정해서는 안 됩니다.
속성이 존재하는 경우, 그 값은 "utf-8
"과 ASCII 대소문자
구분 없이 일치하는 문자열이어야 합니다.
(이것은 이 표준의 다른 요구 사항을 준수하여 UTF-8로 인코딩된 문서에서는 효과가 없습니다.)
작성자는 language
속성을
script
요소에
지정해서는 안 됩니다.
속성이 존재하는 경우, 그 값은 "JavaScript
"와 ASCII 대소문자
구분 없이 일치하는 문자열이어야 하며,
type
속성을 생략하거나 그
값이 "text/javascript
"와
ASCII 대소문자
구분 없이 일치하는 문자열이어야 합니다.
속성은 아예 생략하거나, type
속성을 사용하는
것으로 대체되어야 합니다
(값이 "JavaScript
"인 경우 아무런 효과가 없습니다).
작성자는 script
요소의 type
속성에
대해 빈 문자열이나
JavaScript MIME 타입 에센스 일치 값을 지정해서는 안 됩니다.
대신, 속성을 생략해야 하며, 이는 동일한 효과를 가집니다.
작성자는 style
요소에
type
속성을 지정해서는 안
됩니다.
속성이 존재하는 경우, 그 값은 "text/css
"와
ASCII 대소문자
구분 없이 일치하는 문자열이어야 합니다.
작성자는 name
속성을
a
요소에 지정해서는 안 됩니다.
속성이 존재하는 경우, 그 값은 빈 문자열이 아니어야 하며, 요소 자체의 ID와 동일하지 않아야 하며,
name
속성이 지정된 다른 a
요소의 값과도 동일하지 않아야
합니다.
만약 이 속성이 존재하고 요소에 ID가 있으면, 속성의 값은 요소의 ID와 일치해야 합니다.
이전 버전의 언어에서는 이 속성을 프래그먼트에 대한
가능한 타겟을 지정하는 방법으로 사용했습니다.
대신 id
속성을 사용해야
합니다.
작성자는 이 명세서의 다른 요구 사항에 반하더라도 maxlength
및
size
속성을 input
요소에 지정해서는
안 됩니다.
이 요소의 type
속성이 Number 상태에 있을 때,
이 속성을 사용하는 한 가지 유효한 이유는 input
요소에
type="number"
를 지원하지 않는
레거시 사용자 에이전트가 여전히 텍스트 컨트롤을 유용한 너비로 렌더링할 수 있도록 하기 위함입니다.
HTML4 Transitional 문서에서 이 명세서에서 정의된 언어로의 전환을 용이하게 하고, 매우 제한된 상황에서만 허용되는 특정 기능을 억제하기 위해, 준수 검사기는 문서에서 다음 기능이 사용될 때 사용자에게 경고해야 합니다. 이는 일반적으로 효과가 없는 오래된 사용되지 않는 기능이며, 단순한 실수(일반적인 준수 오류)와 단순한 잔여 마크업 또는 비정상적이고 권장되지 않는 관행(이러한 경고)을 구분하기 위해 허용됩니다.
다음 기능은 위에서 설명한 대로 분류되어야 합니다:
charset
속성이
"utf-8
"과 ASCII 대소문자 구분 없이 일치하는 문자열인 경우,
script
요소에 존재하는 경우.
language
속성이
"JavaScript
"와 ASCII 대소문자 구분 없이 일치하는 문자열인 경우,
script
요소에 존재하는 경우.
그리고 type
속성이 없거나,
존재하고 그 값이 "text/javascript
"와 ASCII 대소문자 구분 없이 일치하는 문자열인 경우.
type
속성이
JavaScript MIME 타입 에센스 일치 값인 경우,
script
요소에 존재하는 경우.
type
속성이
"text/css
"와
ASCII 대소문자 구분 없이 일치하는 문자열인 경우,
style
요소에 존재하는 경우.
maxlength
속성이
input
요소에 존재하는 경우,
이 요소의 type
속성이
Number 상태인 경우.
준수 검사기는 오류가 없는 페이지와 이러한 사용되지 않는 기능이 없는 페이지를 구별해야 하며, 오류가 없지만 일부 사용되지 않는 기능이 있는 페이지를 구별해야 합니다.
예를 들어, 유효성 검사기는 일부 페이지를 "유효한 HTML"로, 다른 페이지를 "경고가 있는 유효한 HTML"로 보고할 수 있습니다.
다음 목록에 있는 요소는 완전히 사용되지 않으며, 작성자가 사용해서는 안 됩니다:
applet
acronym
abbr
를 대신 사용하세요.
bgsound
audio
를 대신 사용하세요.
dir
ul
을 대신 사용하세요.
frame
frameset
noframes
CSS를 사용하여 iframe
을 사용하거나,
서버 측 포함 기능을 사용하여 완전한 페이지를 생성하세요.
isindex
명시적인 form
과 text control을
대신 사용하세요.
keygen
엔터프라이즈 장치 관리 사례에서는 기기 내 관리 기능을 사용하세요.
인증서 등록 사례에서는 Web Cryptography API를 사용하여 키 쌍을 생성하고, 이를 내보내어 사용자가 수동으로 설치할 수 있도록 하세요. [WEBCRYPTO]
listing
menuitem
맞춤형 컨텍스트 메뉴를 구현하려면 contextmenu
이벤트를 처리하는 스크립트를 사용하세요.
nextid
GUID를 사용하세요.
noembed
param
외부 리소스의 URL을 설정하려면 data
속성을 사용하세요.
plaintext
text/plain
MIME 타입을 대신 사용하세요.
rb
rtc
strike
xmp
pre
및 code
를 대신 사용하고,
"<
" 및 "&
" 문자를 각각 "<
" 및 "&
"로
이스케이프하세요.
basefont
big
blink
center
font
marquee
multicol
nobr
spacer
tt
적절한 요소나 CSS를 대신 사용하세요.
tt
요소가 키보드 입력을 표시하는 데 사용된 경우 kbd
요소를 고려하고, 변수를
나타내는 경우 var
요소를
고려하세요. 컴퓨터 코드를 표시하는 경우 code
요소를, 컴퓨터 출력을
나타내는 경우 samp
요소를
고려하세요.
big
요소가 제목을 나타내는 데 사용된 경우 h1
요소를 고려하고, 중요한 구절을 표시하는 경우 strong
요소를, 참조
목적으로 텍스트를 강조 표시하는 경우 mark
요소를 고려하세요.
더 많은 예제와 제안은 텍스트 수준 의미 체계 사용 요약를 참조하세요.
다음 속성은 더 이상 사용되지 않으며(요소는 여전히 언어의 일부임), 작성자가 사용해서는 안 됩니다:
charset
a
요소에서charset
link
요소에서연결된 리소스에 대해 HTTP `Content-Type
` 헤더를 대신 사용하세요.
charset
script
요소에서 (이전
섹션에서 언급한 경우 제외)속성을 생략하세요. 문서와 스크립트는 모두 UTF-8을 사용해야 하므로 script
요소에서
속성을 지정하는 것은 중복됩니다.
coords
a
요소에서shape
a
요소에서이미지 맵을 위해 area
를 대신
사용하세요.
methods
a
요소에서methods
link
요소에서HTTP OPTIONS 기능을 사용하세요.
name
a
요소에서 (이전 섹션에서 언급한 경우 제외)
name
embed
요소에서name
img
요소에서name
option
요소에서대신 id
속성을 사용하세요.
rev
a
요소에서rev
link
요소에서대신 반대되는 용어를 사용하는 rel
속성을 사용하세요.
(예: rev="made"
대신 rel="author"
사용).
urn
a
요소에서urn
link
요소에서대신 선호하는 영구 식별자를 지정하는 href
속성을
사용하세요.
accept
form
요소에서hreflang
area
요소에서type
area
요소에서이 속성은 유용하지 않으며, 역사적인 이유로 area
요소에는 해당하는
IDL 속성이 없습니다. 이를 모두 생략하세요.
nohref
area
요소에서profile
head
요소에서불필요하므로 이를 모두 생략하세요.
manifest
html
요소에서대신 서비스 워커를 사용하세요. [SW]
version
html
요소에서불필요하므로 이를 모두 생략하세요.
ismap
input
요소에서불필요하므로 이를 모두 생략하세요. input
요소에서
type
속성이 Image Button 상태에 있는 경우 서버 측 이미지 맵으로
처리됩니다.
usemap
input
요소에서usemap
object
요소에서이미지 맵을 위해 img
요소를
사용하세요.
longdesc
iframe
요소에서
longdesc
img
요소에서설명으로 연결하려면 일반 a
요소를
사용하거나(이미지의 경우) 이미지 맵을 사용하여 설명 페이지로의 링크를 제공하세요.
lowsrc
img
요소에서두 개의 별도 이미지를 사용하는 대신 src
속성에 지정된 진행형 JPEG 이미지를 사용하세요.
target
link
요소에서불필요하므로 이를 모두 생략하세요.
type
menu
요소에서맞춤형 컨텍스트 메뉴를 구현하려면 contextmenu
이벤트를 처리하는 스크립트를 사용하세요. 툴바 메뉴의 경우 속성을 생략하세요.
label
menu
요소에서contextmenu
모든 요소에서onshow
모든 요소에서맞춤형 컨텍스트 메뉴를 구현하려면 contextmenu
이벤트를 처리하는 스크립트를 사용하세요.
scheme
meta
요소에서각 필드에 대해 하나의 스키마만 사용하거나 스키마 선언을 값의 일부로 만드세요.
archive
object
요소에서classid
object
요소에서code
object
요소에서codebase
object
요소에서
codetype
object
요소에서
declare
object
요소에서리소스를 다시 사용할 때마다 object
요소를
완전히 반복하세요.
standby
object
요소에서연결된 리소스를 최적화하여 빠르게 또는 적어도 점진적으로 로드되도록 하세요.
typemustmatch
object
요소에서신뢰할 수 없는 리소스와 함께 object
요소를
사용하지 마세요.
language
script
요소에서 (이전
섹션에서 언급한 경우 제외)
event
script
요소에서for
script
요소에서DOM 이벤트 메커니즘을 사용하여 이벤트 리스너를 등록하세요. [DOM]
type
style
요소에서 (이전 섹션에서
언급한 경우 제외)CSS의 경우 속성을 생략하세요. 데이터 블록의 경우 script
를 컨테이너로
사용하고 style
을
사용하지 마세요.
datapagesize
table
요소에서불필요하므로 이를 모두 생략하세요.
summary
table
요소에서abbr
td
요소에서명확하고 간결한 텍스트를 사용하고, 더 정교한 텍스트는 그 후에 포함하세요. title
속성을 사용하여 더 자세한 텍스트를 포함할 수
있습니다. 제목인 경우 th
를
사용하세요(여기에는 abbr
속성이
있습니다).
axis
td
및 th
요소에서scope
td
요소에서제목 셀의 경우 th
요소를
사용하세요.
datasrc
a
, button
, div
, frame
, iframe
, img
, input
, label
, legend
, marquee
, object
, option
, select
, span
, table
, 및 textarea
요소에서
datafld
a
, button
, div
, fieldset
, frame
, iframe
, img
, input
, label
, legend
, marquee
, object
, select
, span
, 및 textarea
요소에서
dataformatas
button
, div
, input
, label
, legend
, marquee
, object
, option
, select
, span
, 및 table
요소에서페이지를 동적으로 채우기 위해 스크립트와 XMLHttpRequest
와
같은 메커니즘을 사용하세요. [XHR]
dropzone
모든 요소에서alink
body
요소에서bgcolor
body
요소에서bottommargin
body
요소에서
leftmargin
body
요소에서
link
body
요소에서marginheight
body
요소에서
marginwidth
body
요소에서
rightmargin
body
요소에서
text
body
요소에서topmargin
body
요소에서vlink
body
요소에서clear
br
요소에서align
caption
요소에서align
col
요소에서char
col
요소에서charoff
col
요소에서valign
col
요소에서width
col
요소에서align
div
요소에서compact
dl
요소에서align
embed
요소에서hspace
embed
요소에서vspace
embed
요소에서align
hr
요소에서color
hr
요소에서noshade
hr
요소에서size
hr
요소에서width
hr
요소에서align
h1
—h6
요소에서
align
iframe
요소에서allowtransparency
iframe
요소에서frameborder
iframe
요소에서framespacing
iframe
요소에서hspace
iframe
요소에서marginheight
iframe
요소에서marginwidth
iframe
요소에서scrolling
iframe
요소에서
vspace
iframe
요소에서align
input
요소에서border
input
요소에서hspace
input
요소에서vspace
input
요소에서align
img
요소에서border
img
요소에서 (이전 섹션에서 언급한
경우 제외)hspace
img
요소에서vspace
img
요소에서align
legend
요소에서type
li
요소에서compact
menu
요소에서align
object
요소에서border
object
요소에서hspace
object
요소에서vspace
object
요소에서compact
ol
요소에서align
p
요소에서width
pre
요소에서align
table
요소에서bgcolor
table
요소에서border
table
요소에서bordercolor
table
요소에서
cellpadding
table
요소에서
cellspacing
table
요소에서
frame
table
요소에서height
table
요소에서rules
table
요소에서width
table
요소에서align
tbody
, thead
, 및 tfoot
요소에서char
tbody
, thead
, 및 tfoot
요소에서charoff
tbody
, thead
, 및 tfoot
요소에서height
thead
, tbody
, 및 tfoot
요소에서valign
tbody
, thead
, 및 tfoot
요소에서align
td
및 th
요소에서bgcolor
td
및 th
요소에서char
td
및 th
요소에서charoff
td
및 th
요소에서height
td
및 th
요소에서nowrap
td
및 th
요소에서valign
td
및 th
요소에서width
td
및 th
요소에서align
tr
요소에서bgcolor
tr
요소에서char
tr
요소에서charoff
tr
요소에서height
tr
요소에서valign
tr
요소에서compact
ul
요소에서type
ul
요소에서background
body
, table
, thead
, tbody
, tfoot
, tr
, td
, 및 th
요소에서CSS를 대신 사용하세요.
marquee
요소marquee
요소는 콘텐츠를
애니메이션화하는 표현 요소입니다. CSS 전환 및 애니메이션이 더 적절한 메커니즘입니다. [CSSANIMATIONS] [CSSTRANSITIONS]
marquee
요소는 HTMLMarqueeElement
인터페이스를
구현해야 합니다.
[Exposed =Window ]
interface HTMLMarqueeElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString behavior ;
[CEReactions ] attribute DOMString bgColor ;
[CEReactions ] attribute DOMString direction ;
[CEReactions ] attribute DOMString height ;
[CEReactions ] attribute unsigned long hspace ;
[CEReactions ] attribute long loop ;
[CEReactions ] attribute unsigned long scrollAmount ;
[CEReactions ] attribute unsigned long scrollDelay ;
[CEReactions ] attribute boolean trueSpeed ;
[CEReactions ] attribute unsigned long vspace ;
[CEReactions ] attribute DOMString width ;
undefined start ();
undefined stop ();
};
marquee
요소는 켜질 수 있고 꺼질 수 있습니다. 요소가 생성될 때 켜집니다.
start()
메서드가
호출되면, marquee
요소가 켜져야 합니다.
stop()
메서드가
호출되면, marquee
요소가 꺼져야 합니다.
behavior
콘텐츠 속성은
marquee
요소에 대한 열거형 속성이며, 다음과 같은 키워드와 상태를 가집니다
(모두 비준수 상태):
키워드 | 상태 |
---|---|
scroll |
scroll |
slide |
slide |
alternate |
alternate |
이 속성의 값 누락 시 기본값과 잘못된 값 시 기본값은 모두 scroll 상태입니다.
direction
콘텐츠
속성은 marquee
요소에 대한 열거형 속성이며, 다음과 같은 키워드와 상태를 가집니다
(모두 비준수 상태):
키워드 | 상태 |
---|---|
left |
left |
right |
right |
up |
up |
down |
down |
이 속성의 값 누락 시 기본값과 잘못된 값 시 기본값은 모두 left 상태입니다.
truespeed
콘텐츠
속성은 marquee
요소에 대한 불리언 속성입니다.
marquee
요소는 다음과 같이 획득된
marquee 스크롤 간격을 가집니다:
scrolldelay
속성이 있고, 음수가 아닌 정수 구문 분석 규칙을 사용하여 해당 값을 구문 분석할
때 오류가 발생하지 않으면, delay를 구문 분석된 값으로 설정합니다. 그렇지 않으면, delay를 85로 설정합니다.truespeed
속성이 없고, delay 값이 60 미만이면, delay를 60으로 설정합니다.marquee
요소는 marquee 스크롤 거리를 가지며, 요소에 scrollamount
속성이 있고 음수가 아닌 정수 구문 분석 규칙을 사용하여 해당 값을 구문 분석할 때
오류가 발생하지 않으면, 구문 분석된 값을 CSS 픽셀로 해석한 값이 되며, 그렇지 않으면 6 CSS 픽셀로 설정됩니다.
marquee
요소는 marquee 루프 수를 가지며, 요소에 loop
속성이 있고, 정수 구문 분석 규칙을 사용하여 해당 값을 구문 분석할 때 오류가 발생하지 않거나 값이 1 미만이
아닌 경우, 구문 분석된 값이 설정되고, 그렇지 않으면 −1이 설정됩니다.
loop
IDL 속성은
가져올 때 요소의 marquee 루프 수를 반환해야 하며, 설정할 때
새 값이 요소의 marquee 루프 수와 다르고 0보다 크거나
−1과 같은 경우, 요소의 loop
콘텐츠
속성(필요한 경우 추가됨)을 새 값을 나타내는 유효한 정수로 설정해야 합니다. (다른
값은 무시됩니다.)
marquee
요소는 또한 요소가
생성될 때 0으로 설정되는 marquee 현재 루프 인덱스를 가집니다.
렌더링 레이어는 때때로 marquee 현재 루프 인덱스를 증가시킬 것이며, 이는 다음 단계를 실행하도록 해야 합니다:
marquee
요소를 꺼야 합니다.behavior
,
direction
, height
, hspace
,
vspace
, 및
width
IDL
속성은 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
bgColor
IDL 속성은 반영해야 하며, bgcolor
콘텐츠 속성을 가져야 합니다.
scrollAmount
IDL 속성은 반영해야 하며, scrollamount
콘텐츠 속성을 가져야 합니다. 기본 값은 6입니다.
scrollDelay
IDL 속성은 반영해야 하며, scrolldelay
콘텐츠 속성을 가져야 합니다. 기본 값은 85입니다.
trueSpeed
IDL 속성은 반영해야 하며, truespeed
콘텐츠 속성을
가져야 합니다.
frameset
요소는 프레임을 사용하는 문서에서 body 요소 역할을 합니다.
frameset
요소는 HTMLFrameSetElement
인터페이스를 구현해야 합니다.
[Exposed =Window ]
interface HTMLFrameSetElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString cols ;
[CEReactions ] attribute DOMString rows ;
};
HTMLFrameSetElement includes WindowEventHandlers ;
cols
및 rows
IDL
속성은 frameset
요소의 동일한 이름의 콘텐츠 속성을 반영해야 합니다.
frameset
요소는 이벤트 핸들러 콘텐츠 속성으로 Window
객체의 여러 이벤트 핸들러를 노출하며, 이 속성들은 이벤트 핸들러 IDL 속성을 반영합니다.
Window
객체의 Window
-반영 body 요소 이벤트 핸들러 세트로
명명된 이벤트 핸들러가 frameset
요소에 노출되며, 이는 HTML 요소에 의해 일반적으로 지원되는 동일한 이름의 일반 이벤트 핸들러를 대체합니다.
frame
요소는 iframe
요소와 유사한 탐색 가능한 콘텐츠를 가지지만, frameset
요소 내에서 렌더링됩니다.
frame
HTML 요소 삽입 단계는 insertedNode를 사용하여 다음과 같이 수행됩니다:
frame
속성을 처리합니다.frame
HTML 요소 제거 단계는 removedNode를 사용하여 자식 탐색 가능 항목을 파괴하는 것입니다.
frame
요소에 null이 아닌 탐색 가능한 콘텐츠가 있고, src
속성이 설정, 변경 또는 제거될 때마다 사용자 에이전트는 frame
속성을 처리해야
합니다.
요소 element에 대해 선택적 불리언 initialInsertion이 있는 상태에서 프레임 속성을 처리하는 방법은 다음과 같습니다:
url을 element와 initialInsertion을 사용하여 iframe
및
frame
요소에 대한 공유 속성 처리 단계를 실행한 결과로 설정합니다.
url이 null인 경우, 반환합니다.
url이 about:blank
과
일치하고 initialInsertion이 true인 경우, 다음을 실행합니다:
element에서 load
라는 이름의 이벤트를 발생시킵니다.
반환합니다.
element, url 및 빈 문자열을 사용하여 iframe
또는 frame
탐색을 실행합니다.
frame
요소는 로드 이벤트를 지연시킬 가능성이 있습니다.
frame
요소는 HTMLFrameElement
인터페이스를 구현해야 합니다.
[Exposed =Window ]
interface HTMLFrameElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString scrolling ;
[CEReactions ] attribute USVString src ;
[CEReactions ] attribute DOMString frameBorder ;
[CEReactions ] attribute USVString longDesc ;
[CEReactions ] attribute boolean noResize ;
readonly attribute Document ? contentDocument ;
readonly attribute WindowProxy ? contentWindow ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString marginHeight ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString marginWidth ;
};
name
, scrolling
, 및
src
IDL 속성은 frame
요소의 동일한 이름의 콘텐츠 속성을 반영해야 합니다. 반영의 목적상, frame
요소의
src
콘텐츠 속성은 URL을 포함하는 것으로 정의됩니다.
frameBorder
IDL 속성은 frame
요소의 frameborder
콘텐츠 속성을 반영해야 합니다.
longDesc
IDL
속성은 frame
요소의 longdesc
콘텐츠 속성을 반영해야 하며, 반영의 목적상 이는 URL을 포함하는 것으로 정의됩니다.
noResize
IDL
속성은 frame
요소의 noresize
콘텐츠 속성을 반영해야 합니다.
marginHeight
IDL 속성은 frame
요소의 marginheight
콘텐츠 속성을 반영해야 합니다.
marginWidth
IDL 속성은 frame
요소의 marginwidth
콘텐츠 속성을 반영해야 합니다.
contentDocument
getter 단계는 this의 콘텐츠 문서를 반환하는 것입니다.
contentWindow
getter 단계는 this의 콘텐츠 창을 반환하는 것입니다.
사용자 에이전트는 acronym
요소를
abbr
요소와
동일한 의미적 방식으로 처리하고 렌더링 목적으로 처리해야 합니다.
partial interface HTMLAnchorElement {
[CEReactions ] attribute DOMString coords ;
[CEReactions ] attribute DOMString charset ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString rev ;
[CEReactions ] attribute DOMString shape ;
};
coords
,
charset
,
name
,
rev
, 및
shape
IDL 속성은
a
요소의 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLAreaElement {
[CEReactions ] attribute boolean noHref ;
};
noHref
IDL 속성은
area
요소의
nohref
콘텐츠
속성을 반영해야 합니다.
partial interface HTMLBodyElement {
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString text ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString link ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString vLink ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString aLink ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString bgColor ;
[CEReactions ] attribute DOMString background ;
};
text
IDL 속성은
body
요소의
text
콘텐츠 속성을
반영해야 합니다.
link
IDL 속성은
body
요소의
link
콘텐츠 속성을
반영해야 합니다.
aLink
IDL 속성은
body
요소의
alink
콘텐츠 속성을
반영해야 합니다.
vLink
IDL 속성은
body
요소의
vlink
콘텐츠 속성을
반영해야 합니다.
bgColor
IDL 속성은
body
요소의
bgcolor
콘텐츠
속성을 반영해야 합니다.
background
IDL 속성은
body
요소의
background
콘텐츠
속성을 반영해야 합니다. (렌더링 섹션의 규칙에도 불구하고
background
콘텐츠는
URL을
포함하지 않도록 정의되었습니다.)
partial interface HTMLBRElement {
[CEReactions ] attribute DOMString clear ;
};
clear
IDL 속성은
br
요소의 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLTableCaptionElement {
[CEReactions ] attribute DOMString align ;
};
align
IDL 속성은
caption
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLTableColElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString ch ;
[CEReactions ] attribute DOMString chOff ;
[CEReactions ] attribute DOMString vAlign ;
[CEReactions ] attribute DOMString width ;
};
align
및
width
IDL 속성은
col
요소의 동일한 이름의
콘텐츠 속성을 반영해야 합니다.
ch
IDL 속성은
col
요소의
char
콘텐츠 속성을
반영해야 합니다.
chOff
IDL 속성은
col
요소의
charoff
콘텐츠
속성을
반영해야 합니다.
vAlign
IDL 속성은
col
요소의
valign
콘텐츠 속성을
반영해야 합니다.
사용자 에이전트는 dir
요소를
ul
요소와
동일한 의미적 방식으로 처리하고 렌더링 목적으로 처리해야 합니다.
dir
요소는
HTMLDirectoryElement
인터페이스를 구현해야 합니다.
[Exposed =Window ]
interface HTMLDirectoryElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute boolean compact ;
};
compact
IDL
속성은
dir
요소의 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
partial interface HTMLDivElement {
[CEReactions ] attribute DOMString align ;
};
align
IDL 속성은
div
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLDListElement {
[CEReactions ] attribute boolean compact ;
};
compact
IDL 속성은
dl
요소의 동일한
이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLEmbedElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString name ;
};
name
및
align
IDL 속성은
embed
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
font
요소는
HTMLFontElement
인터페이스를 구현해야 합니다.
[Exposed =Window ]
interface HTMLFontElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString color ;
[CEReactions ] attribute DOMString face ;
[CEReactions ] attribute DOMString size ;
};
color
,
face
및
size
IDL 속성은
font
요소의 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
partial interface HTMLHeadingElement {
[CEReactions ] attribute DOMString align ;
};
align
IDL 속성은
h1
–h6
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
profile
IDL 속성은
head
요소(및
HTMLHeadElement
인터페이스)에서 의도적으로 생략되었습니다. 다른 적용 가능한 사양에서
그렇게 요구하지 않는 한, 구현은 이 속성을 지원하지 않아야 합니다. (이 내용은 이전 DOM 버전에 정의되었기 때문에 언급되었습니다.)
partial interface HTMLHRElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString color ;
[CEReactions ] attribute boolean noShade ;
[CEReactions ] attribute DOMString size ;
[CEReactions ] attribute DOMString width ;
};
align
,
color
,
size
및
width
IDL 속성은
hr
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
noShade
IDL 속성은
hr
요소의
noshade
콘텐츠 속성을
반영해야 합니다.
partial interface HTMLHtmlElement {
[CEReactions ] attribute DOMString version ;
};
version
IDL 속성은
html
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLIFrameElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString scrolling ;
[CEReactions ] attribute DOMString frameBorder ;
[CEReactions ] attribute USVString longDesc ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString marginHeight ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString marginWidth ;
};
align
및
scrolling
IDL 속성은
iframe
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
frameBorder
IDL 속성은
iframe
요소의
frameborder
콘텐츠 속성을 반영해야 합니다.
longDesc
IDL 속성은
iframe
요소의
longdesc
콘텐츠 속성을 반영해야 하며, 이는 반영 목적을 위해
URL을
포함하는 것으로 정의됩니다.
marginHeight
IDL 속성은
iframe
요소의
marginheight
콘텐츠 속성을 반영해야 합니다.
marginWidth
IDL 속성은
iframe
요소의
marginwidth
콘텐츠 속성을 반영해야 합니다.
partial interface HTMLImageElement {
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute USVString lowsrc ;
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute unsigned long hspace ;
[CEReactions ] attribute unsigned long vspace ;
[CEReactions ] attribute USVString longDesc ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString border ;
};
name
,
align
,
border
,
hspace
, 및
vspace
IDL 속성은
img
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
longDesc
IDL
속성은
img
요소의
longdesc
콘텐츠 속성을
반영해야 하며, 이는 반영 목적을 위해
URL을
포함하는 것으로 정의됩니다.
lowsrc
IDL 속성은
img
요소의
lowsrc
콘텐츠 속성을
반영해야 하며, 이는 반영 목적을 위해
URL을
포함하는 것으로 정의됩니다.
partial interface HTMLInputElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString useMap ;
};
align
IDL 속성은
input
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
useMap
IDL 속성은
input
요소의
usemap
콘텐츠
속성을
반영해야 합니다.
partial interface HTMLLegendElement {
[CEReactions ] attribute DOMString align ;
};
align
IDL 속성은
legend
요소의
동일한 이름의 콘텐츠 속성을 반영해야 합니다.
partial interface HTMLLIElement {
[CEReactions ] attribute DOMString type ;
};
type
IDL
속성은 li
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
partial interface HTMLLinkElement {
[CEReactions ] attribute DOMString charset ;
[CEReactions ] attribute DOMString rev ;
[CEReactions ] attribute DOMString target ;
};
charset
,
rev
, 그리고
target
IDL
속성은 link
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
사용자 에이전트는 listing
요소를 pre
요소와 동일한 방식으로 처리해야 하며, 이는 의미론적 측면과 렌더링 목적 모두에서 동일합니다.
partial interface HTMLMenuElement {
[CEReactions ] attribute boolean compact ;
};
compact
IDL 속성은 menu
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
partial interface HTMLMetaElement {
[CEReactions ] attribute DOMString scheme ;
};
사용자 에이전트는 scheme
콘텐츠
속성을
meta
요소의 name
콘텐츠
속성의 확장으로 처리할 수 있습니다. 이 동작은 meta
요소를 처리할 때, 사용자 에이전트가 name
속성의 값을 인식하여 scheme
속성을 지원하는 경우에 적용됩니다.
사용자 에이전트는 scheme
속성을 무시하고 대신 메타데이터 이름에 지정된 값을 각 예상 값에 대해 지정된 것처럼 처리하는 것이 권장됩니다
scheme
속성입니다.
예를 들어, 사용자 에이전트가 meta
요소에 대해 작업하고, name
속성이 "eGMS.subject.keyword" 값을 가지고 있으며
이 메타데이터 이름과 함께 scheme
속성이 사용된다는 것을 알고 있는 경우,
scheme
속성을 고려하여
name
속성의 확장인 것처럼 동작할 수 있습니다. 따라서
다음 두 개의 meta
요소는 두 가지 다른 메타데이터 이름 값을 제공하는 두 요소로 간주될 수 있습니다. 하나는 "eGMS.subject.keyword"와 "LGCL"의 조합으로 구성되고, 다른 하나는
"eGMS.subject.keyword"와 "ORLY"의 조합으로 구성됩니다:
<!-- 이 마크업은 잘못되었습니다 -->
< meta name = "eGMS.subject.keyword" scheme = "LGCL" content = "Abandoned vehicles" >
< meta name = "eGMS.subject.keyword" scheme = "ORLY" content = "Mah car: kthxbye" >
그러나 이 마크업의 제안된 처리는 다음과 같습니다:
< meta name = "eGMS.subject.keyword" content = "Abandoned vehicles" >
< meta name = "eGMS.subject.keyword" content = "Mah car: kthxbye" >
scheme
IDL
속성은 meta
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
partial interface HTMLObjectElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString archive ;
[CEReactions ] attribute DOMString code ;
[CEReactions ] attribute boolean declare ;
[CEReactions ] attribute unsigned long hspace ;
[CEReactions ] attribute DOMString standby ;
[CEReactions ] attribute unsigned long vspace ;
[CEReactions ] attribute DOMString codeBase ;
[CEReactions ] attribute DOMString codeType ;
[CEReactions ] attribute DOMString useMap ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString border ;
};
align
,
archive
,
border
,
code
,
declare
,
hspace
,
standby
,
그리고
vspace
IDL
속성은 object
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
codeBase
IDL 속성은 object
요소의 codebase
콘텐츠 속성을 반영해야 하며, 반영 목적으로는 URL을 포함하는 것으로 정의됩니다.
codeType
IDL 속성은 object
요소의 codetype
콘텐츠 속성을 반영해야 합니다.
현재 모든 엔진에서 지원됩니다.
useMap
IDL 속성은 반영해야 합니다
usemap
콘텐츠 속성을.
partial interface HTMLOListElement {
[CEReactions ] attribute boolean compact ;
};
compact
IDL 속성은 ol
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
partial interface HTMLParagraphElement {
[CEReactions ] attribute DOMString align ;
};
align
IDL
속성은 p
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
param
요소는
HTMLParamElement
인터페이스를 구현해야 합니다.
[Exposed =Window ]
interface HTMLParamElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute DOMString value ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString valueType ;
};
name
,
value
,
그리고 type
IDL
속성은 param
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
valueType
IDL 속성은 param
요소의
valuetype
콘텐츠
속성을 반영해야 합니다.
사용자 에이전트는 plaintext
요소를
pre
요소와 의미론적 측면과 렌더링 목적 모두에서 동일한 방식으로 처리해야 합니다. (이 요소에 대한 파서는
특별한 동작을 합니다.)
partial interface HTMLPreElement {
[CEReactions ] attribute long width ;
};
width
IDL
속성은 pre
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
partial interface HTMLStyleElement {
[CEReactions ] attribute DOMString type ;
};
type
IDL
속성은 style
요소의
type
콘텐츠
속성을 반영해야 합니다.
partial interface HTMLScriptElement {
[CEReactions ] attribute DOMString charset ;
[CEReactions ] attribute DOMString event ;
[CEReactions ] attribute DOMString htmlFor ;
};
charset
그리고 event
IDL
속성은 script
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
htmlFor
IDL 속성은 script
요소의 for
콘텐츠
속성을 반영해야 합니다.
partial interface HTMLTableElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString border ;
[CEReactions ] attribute DOMString frame ;
[CEReactions ] attribute DOMString rules ;
[CEReactions ] attribute DOMString summary ;
[CEReactions ] attribute DOMString width ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString bgColor ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString cellPadding ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString cellSpacing ;
};
align
,
border
,
frame
,
summary
,
rules
,
그리고
width
,
IDL
속성은 table
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
bgColor
IDL 속성은 table
요소의 bgcolor
콘텐츠 속성을 반영해야 합니다.
cellPadding
IDL 속성은 table
요소의 cellpadding
콘텐츠 속성을 반영해야 합니다.
cellSpacing
IDL 속성은 table
요소의 cellspacing
콘텐츠 속성을 반영해야 합니다.
partial interface HTMLTableSectionElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString ch ;
[CEReactions ] attribute DOMString chOff ;
[CEReactions ] attribute DOMString vAlign ;
};
align
IDL 속성은 tbody
,
thead
,
그리고
tfoot
요소의 동일한 이름의 콘텐츠
속성을 반영해야 합니다.
ch
IDL 속성은 tbody
,
thead
,
그리고 tfoot
요소의
char
콘텐츠
속성을 반영해야 합니다.
chOff
IDL 속성은 tbody
,
thead
,
그리고 tfoot
요소의 charoff
콘텐츠 속성을 반영해야 합니다.
vAlign
IDL 속성은 tbody
,
thead
,
그리고 tfoot
요소의 valign
콘텐츠 속성을 반영해야 합니다.
partial interface HTMLTableCellElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString axis ;
[CEReactions ] attribute DOMString height ;
[CEReactions ] attribute DOMString width ;
[CEReactions ] attribute DOMString ch ;
[CEReactions ] attribute DOMString chOff ;
[CEReactions ] attribute boolean noWrap ;
[CEReactions ] attribute DOMString vAlign ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString bgColor ;
};
align
,
axis
,
height
,
그리고
width
IDL 속성은 td
및
th
요소의 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
ch
IDL 속성은 td
및
th
요소의 반영해야 합니다
char
콘텐츠 속성입니다.
chOff
IDL 속성은 td
및
th
요소의 반영해야 합니다
charoff
콘텐츠 속성입니다.
noWrap
IDL 속성은 td
및
th
요소의 반영해야 합니다
nowrap
콘텐츠 속성입니다.
vAlign
IDL 속성은 td
및
th
요소의 반영해야 합니다
valign
콘텐츠 속성입니다.
bgColor
IDL 속성은 td
및
th
요소의 반영해야 합니다
bgcolor
콘텐츠 속성입니다.
partial interface HTMLTableRowElement {
[CEReactions ] attribute DOMString align ;
[CEReactions ] attribute DOMString ch ;
[CEReactions ] attribute DOMString chOff ;
[CEReactions ] attribute DOMString vAlign ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString bgColor ;
};
align
IDL 속성은 tr
요소의 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
ch
IDL 속성은 tr
요소의 반영해야 합니다
char
콘텐츠 속성입니다.
chOff
IDL 속성은 tr
요소의 반영해야 합니다
charoff
콘텐츠 속성입니다.
vAlign
IDL 속성은 tr
요소의 반영해야 합니다
valign
콘텐츠 속성입니다.
bgColor
IDL 속성은 tr
요소의 반영해야 합니다
bgcolor
콘텐츠 속성입니다.
partial interface HTMLUListElement {
[CEReactions ] attribute boolean compact ;
[CEReactions ] attribute DOMString type ;
};
compact
및 type
IDL 속성은 ul
요소의 동일한 이름의 콘텐츠 속성을
반영해야 합니다.
사용자 에이전트는 xmp
요소를 pre
요소와 동일한 방식으로 취급해야 합니다. (그러나 파서는 이 요소에 대해 특별한 동작을 수행합니다.)
partial interface Document {
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString fgColor ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString linkColor ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString vlinkColor ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString alinkColor ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString bgColor ;
[SameObject ] readonly attribute HTMLCollection anchors ;
[SameObject ] readonly attribute HTMLCollection applets ;
undefined clear ();
undefined captureEvents ();
undefined releaseEvents ();
[SameObject ] readonly attribute HTMLAllCollection all ;
};
Document
객체의 속성은 다음
표의 첫 번째 열에 나열되어 있으며, 반영해야 합니다.
콘텐츠 속성은 동일한 행의 두 번째 열에 주어진 이름으로 body 요소에 있으며,
body 요소가
body
요소인 경우( frameset
요소가 아닌 경우).
body 요소가 없거나
frameset
요소인 경우에는
속성은 빈 문자열을 반환하고 설정할 때 아무 작업도 하지 않아야 합니다.
ID 속성 | 콘텐츠 속성 |
---|---|
fgColor
| text
|
linkColor
| link
|
vlinkColor
| vlink
|
alinkColor
| alink
|
bgColor
| bgcolor
|
anchors
속성은 HTMLCollection
을 반환해야 합니다.
Document
노드에 루팅되고,
필터는 a
요소만 일치하며
name
속성을 포함합니다.
applets
속성은 HTMLCollection
을 반환해야 합니다.
Document
노드에 루팅되며,
필터는 아무 것도 일치하지 않습니다. (역사적 이유로 존재합니다.)
clear()
,
captureEvents()
,
및 releaseEvents()
메서드는 아무 작업도 수행하지 않아야 합니다.
all
속성은 HTMLAllCollection
을 반환해야 합니다. Document
노드에
루팅되며,
필터는 모든 요소와 일치합니다.
partial interface Window {
undefined captureEvents ();
undefined releaseEvents ();
[Replaceable , SameObject ] readonly attribute External external ;
};
captureEvents()
및 releaseEvents()
메서드는 아무 작업도 수행하지 않아야 합니다.
external
Window
인터페이스의 속성은 External
인터페이스의 인스턴스를 반환해야 합니다:
[Exposed =Window ]
interface External {
undefined AddSearchProvider ();
undefined IsSearchProviderInstalled ();
};
AddSearchProvider()
및 IsSearchProviderInstalled()
메서드는 아무 작업도 수행하지 않아야 합니다.
text/html
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
charset
charset
매개변수는 문서의 문자 인코딩을 지정하기 위해 제공될 수 있으며, 바이트 순서
표시(BOM)를 제외한 문서의 모든 문자 인코딩 선언을 무시합니다. 매개변수의 값은
"utf-8
" 문자열과 ASCII 대소문자 구분 없이 일치해야 합니다. [ENCODING]
HTML 문서에 적용되는 보안 고려 사항에 대한 소설 전체가 작성되었습니다. 많은 사항이 이 문서에 나열되어 있으며, 자세한 내용은 독자가 참조할 수 있습니다. 그러나 몇 가지 일반적인 문제는 여기에 언급할 가치가 있습니다:
HTML은 스크립트 언어이며, 수많은 API를 가지고 있습니다(이 문서에 설명된 일부 포함). 스크립트는 사용자에게 정보 유출, 자격 증명 유출, 크로스 사이트 스크립팅 공격, 크로스 사이트 요청 위조 등의 위험을 초래할 수 있습니다. 이 사양의 디자인은 올바르게 구현되면 안전하도록 의도되었지만, 전체 구현은 방대한 작업이며, 모든 소프트웨어와 마찬가지로 사용자 에이전트에는 보안 버그가 있을 수 있습니다.
스크립팅 없이도 HTML에는 특정 기능이 있으며, 이는 역사적인 이유로 광범위한 호환성을 위해 필요하지만 사용자를 불행한 보안 문제에 노출시킬 수 있습니다. 특히 img
요소는 사용자의 위치에서 포트 스캔을 수행하는 방법으로
사용될 수 있으며, 공격자가 그렇지 않으면 알 수 없는 로컬 네트워크 토폴로지를 노출시킬 수 있습니다.
HTML은 때때로 동일 출처 정책으로 알려진 구획화 체계에 의존합니다. 대부분의 경우 출처(origin)는 동일한 호스트, 동일한 포트에서 동일한 프로토콜을 사용하는 모든 페이지로 구성됩니다.
따라서 사이트의 일부를 구성하는 신뢰할 수 없는 콘텐츠는 해당 사이트의 민감한 콘텐츠와 다른 출처(origin)에 호스팅되어야 합니다. 신뢰할 수 없는 콘텐츠는 동일한 출처의 다른 페이지를 쉽게 위조할 수 있고, 해당 출처에서 데이터를 읽고, 해당 출처에서 스크립트를 실행하며, 크로스 사이트 요청 위조 공격에서 고유한 토큰으로 보호된 폼을 전송할 수 있으며, 해당 출처에 노출된 또는 해당 출처에 부여된 모든 타사 리소스를 사용할 수 있습니다.
html
" 및 "htm
"은 일반적으로 사용되지만, 반드시 독점적인 것은 아닙니다.TEXT
조각(Fragments)이 text/html
리소스와 함께 사용될 때, 해당 조각은 해당 문서(Document)
의 지정된 부분을 참조하거나 페이지 내 스크립트에 대한 상태 정보를 제공합니다.
multipart/x-mixed-replace
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
boundary
(RFC2046에 정의됨) [RFC2046]multipart/x-mixed-replace
리소스의 하위 리소스는 text/html
과 같은 중요한 보안
영향을 미칠 수 있는 유형을 포함하여 모든 유형일 수 있습니다.
multipart/mixed
와 동일합니다.
[RFC2046]
multipart/x-mixed-replace
리소스를 고유하게 식별할 수 있는 바이트 시퀀스는 없습니다.
조각(Fragments)
이 multipart/x-mixed-replace
리소스와 함께 사용될 때, 해당 조각은 해당 바디 파트에서 사용된 유형에 의해 정의된 각 바디 파트에 적용됩니다.
application/xhtml+xml
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
application/xml
과 동일 [RFC7303]
application/xml
과 동일 [RFC7303]
application/xml
과 동일 [RFC7303]
application/xml
과 동일 [RFC7303]
application/xml
과 동일 [RFC7303]
application/xhtml+xml
유형으로 레이블링하면, 해당 리소스가 문서 요소를 포함하는 XML
문서임을 나타냅니다.
이 문서 요소는 HTML 네임스페이스에서 가져옵니다. 따라서 관련 사양은 XML, XML의
네임스페이스, 및 이 사양입니다. [XML] [XMLNS]
application/xml
과 동일 [RFC7303]
application/xml
과
동일 [RFC7303]
xhtml
" 및 "xht
"는 문서 요소를
포함하는 XML 리소스의 확장자로 때때로 사용됩니다. HTML
네임스페이스.
TEXT
조각(Fragments)이
application/xhtml+xml
리소스와 함께 사용될 때, 해당 조각은 다른 XML MIME 유형과 동일한 의미를
갖습니다. [RFC7303]
text/ping
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
charset
charset
매개변수는 제공될 수 있습니다. 이 매개변수의 값은 "utf-8
"이어야 합니다. 이 매개변수는 아무런 목적을
가지지 않으며, 단지 레거시 서버와의 호환성을 위해 허용됩니다.
이 유형이 하이퍼링크 감사 문맥에서 설명된 방식으로만 사용된다면, 이 유형은 새로운 보안 문제를 일으키지 않습니다.
text/ping
리소스는 항상 0x50 0x49 0x4E 0x47
(`PING
`) 네 바이트로 구성됩니다.
ping
속성 처리의 일부로 생성된 HTTP POST 요청에서만 사용됩니다.
조각(Fragments)은
text/ping
리소스에 대해 아무런 의미가 없습니다.
application/microdata+json
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
application/json
과
동일 [JSON]
application/json
과
동일 [JSON]
application/json
과
동일 [JSON]
application/json
과
동일 [JSON]
application/microdata+json
유형으로 레이블링하면, 해당 리소스는 "items
"라는 단일 항목을 가진 객체로 구성된 JSON 텍스트임을 나타냅니다. 이 항목은 각 항목이
"id
"라는 항목을 가진 객체로 구성된 항목 배열로, 값은 문자열이고, "type
"이라는 항목을 가진 또 다른 문자열 값과, 각 항목이 객체 또는
문자열로 구성된 배열 값을 가진 "properties
"라는 항목을 포함합니다. 따라서 관련 사양은 JSON 및 이 사양입니다. [JSON]
application/json
과
동일 [JSON]
application/json
과
동일 [JSON]
application/json
과
동일 [JSON]
조각(Fragments)이
application/microdata+json
리소스와 함께 사용될 때, 이는 application/json
과 동일한
의미를 갖습니다 (즉, 작성 당시에는 의미가 전혀 없습니다). [JSON]
text/event-stream
이 등록은 커뮤니티 리뷰를 위해 작성되었으며, IESG의 검토, 승인 및 IANA에 등록될 예정입니다.
charset
charset
매개변수는 제공될 수 있습니다. 이 매개변수의 값은 "utf-8
"이어야 합니다. 이 매개변수는 아무런 목적을
가지지 않으며, 단지 레거시 서버와의 호환성을 위해 허용됩니다.
콘텐츠를 소비하는 출처와 다른 출처에서 온 이벤트 스트림은 정보 유출을 초래할 수 있습니다. 이를 방지하기 위해, 사용자 에이전트는 CORS 개념을 적용해야 합니다. [FETCH]
이벤트 스트림이 사용자 에이전트를 압도할 수 있으며, 사용자의 로컬 리소스를 고갈시키지 않도록 사용자 에이전트는 적절한 제한을 적용할 것으로 예상됩니다.
서버는 클라이언트가 빠르게 다시 연결하는 상황이 발생하면 압도될 수 있습니다. 서버는 5xx 상태 코드를 사용하여 용량 문제를 나타내야 하며, 이는 준수하는 클라이언트가 자동으로 다시 연결하지 못하게 합니다.
조각(Fragments)은
text/event-stream
리소스에 대해 아무런
의미가 없습니다.
web+
스킴 접두사이 섹션은 IANA URI 스킴 레지스트리와 함께 사용할 수 있는 규칙을 설명합니다. 자체적으로 특정 스킴을 등록하지는 않습니다. [RFC7595]
web+
"로 시작하며, 그 뒤에 a
-z
범위의 하나 이상의 문자가 따라옵니다.web+
" 스킴은 관련이 있을 때 UTF-8 인코딩을 사용해야 합니다.web+
" 스킴에 대한 핸들러를 등록할 수 있습니다. 따라서 이러한 스킴은 핵심 플랫폼 기능(예: HTTP)을 위해 사용되어서는 안 됩니다. 또한
이러한 스킴은 URL에 사용자 이름, 비밀번호, 개인 정보 또는 기밀 프로젝트 이름과 같은 기밀 정보를 저장해서는 안 됩니다.
다음 섹션은 표준을 준수하는 요소와 기능만을 다룹니다.
이 섹션은 비규범적입니다.
셀에 있는 별표(*)는 실제 규칙이 위 표에 표시된 것보다 더 복잡하다는 것을 나타냅니다.
† "부모" 열의 범주는 해당 범주를 자신의 콘텐츠 모델에 나열하는 부모를 나타내며, 해당 범주에 속하는 요소를 의미하지는 않습니다. 예를 들어, a
요소의 "부모" 열에는 "구절"이라고 표시되어 있으므로, 콘텐츠
모델에 "구절" 범주를 포함하는 모든 요소가 a
요소의 부모가 될 수
있습니다. "흐름" 범주에는 모든 "구절" 요소가 포함되므로, th
요소가 a
요소의 부모가 될 수 있습니다.
이 섹션은 비규범적입니다.
이 섹션은 비규범적입니다.
속성 | 요소(들) | 설명 | 값 |
---|---|---|---|
abbr
| th
| 다른 문맥에서 셀을 참조할 때 사용하는 대체 레이블 | 텍스트* |
accept
| input
| 파일 업로드 컨트롤에서 기대되는 파일 유형에 대한 힌트 | 쉼표로 구분된 토큰
집합*으로 구성되며, 유효한 MIME 타입 문자열 또는
audio/* , video/* , image/*
|
accept-charset
| form
| 양식 제출에 사용할 문자 인코딩 | ASCII 대소문자 구분 없이 "UTF-8 "와 일치
|
accesskey
| HTML 요소 | 요소를 활성화하거나 포커스하는 키보드 단축키 | 고유한 공백으로 구분된 토큰의 순서 집합, 이 중 어느 것도 다른 것과 동일하지 않은 한 코드 포인트 길이로 구성됨 |
action
| form
| URL을 양식 제출에 사용 | 유효한 비어 있지 않은 URL (주위에 공백이 있을 수 있음) |
allow
| iframe
| 권한 정책을
iframe 의 콘텐츠에 적용
| 직렬화된 권한 정책 |
allowfullscreen
| iframe
| iframe 의 콘텐츠가
requestFullscreen() 을
사용할 수 있는지 여부
| 부울 속성 |
alt
| area ;
img ;
input
| 이미지가 사용 가능하지 않을 때 사용할 대체 텍스트 | 텍스트* |
as
| link
| 프리로드
요청에 대한 잠재적 목적지 (rel ="preload " 및 rel ="modulepreload ")
| 잠재적 목적지, rel ="preload "; 스크립트와 같은 목적지, rel ="modulepreload "
|
async
| script
| 가져오는 동안 차단하지 않고 사용 가능한 즉시 스크립트를 실행 | 부울 속성 |
autocapitalize
| HTML 요소 | 권장되는 자동 대문자화 동작 (지원되는 입력 방법에 대해) | "on ";
"off ";
"none ";
"sentences ";
"words ";
"characters "
|
autocomplete
| form
| 양식 내 컨트롤에 대한 자동 완성 기능의 기본 설정 | "on "; "off "
|
autocomplete
| input ;
select ;
textarea
| 양식 자동 완성 기능에 대한 힌트 | 자동 완성 필드 이름 및 관련 토큰* |
autocorrect
| HTML 요소 | 권장되는 자동 수정 동작 (지원되는 입력 방법에 대해) | "on ";
"off "
|
autofocus
| HTML 요소 | 페이지가 로드될 때 자동으로 요소에 포커스를 맞춤 | 부울 속성 |
autoplay
| audio ;
video
| 페이지가 로드될 때 미디어 리소스를 자동으로 시작할 수 있음 | 부울 속성 |
blocking
| link ;
script ;
style
| 요소가 잠재적으로 렌더링 차단인지 여부 | 고유한 공백으로 구분된 토큰의 무순 집합* |
charset
| meta
| 문자 인코딩 선언 | "utf-8 "
|
checked
| input
| 컨트롤이 선택되어 있는지 여부 | 부울 속성 |
cite
| blockquote ;
del ;
ins ;
q
| 인용의 출처나 수정 사항에 대한 추가 정보를 제공하는 링크 | 공백으로 둘러싸인 유효한 URL |
class
| HTML 요소 | 요소가 속한 클래스 | 공백으로 구분된 토큰의 집합 |
color
| link
| 사이트 아이콘을 사용자 정의할 때 사용할 색상 (rel ="mask-icon "인
경우)
| CSS <color> |
cols
| textarea
| 줄당 최대 문자 수 | 유효한 0보다 큰 비음수 정수 |
colspan
| td ;
th
| 셀이 걸쳐야 하는 열의 수 | 유효한 0보다 큰 비음수 정수 |
content
| meta
| 요소의 값 | 텍스트* |
contenteditable
| HTML 요소 | 요소를 편집할 수 있는지 여부 | "true "; "plaintext-only "; "false "
|
controls
| audio ;
video
| 사용자 에이전트 컨트롤 표시 | 부울 속성 |
coords
| area
| 이미지 맵에서 생성할 모양의 좌표 | 유효한 부동 소수점 수 목록* |
crossorigin
| audio ;
img ;
link ;
script ;
video
| 요소가 크로스오리진 요청을 처리하는 방법 | "anonymous ";
"use-credentials "
|
data
| object
| 리소스의 주소 | 공백으로 둘러싸인 유효한 비어 있지 않은 URL |
datetime
| del ;
ins
| 변경의 날짜와 (선택적으로) 시간 | 선택적 시간과 함께 유효한 날짜 문자열 |
datetime
| time
| 기계가 읽을 수 있는 값 | 유효한 월 문자열, 유효한 날짜 문자열, 유효한 연도 없는 날짜 문자열, 유효한 시간 문자열, 유효한 로컬 날짜 및 시간 문자열, 유효한 시간대 오프셋 문자열, 유효한 전역 날짜 및 시간 문자열, 유효한 주 문자열, 유효한 비음수 정수 또는 유효한 기간 문자열 |
decoding
| img
| 프레젠테이션을 위해 이 이미지를 처리할 때 사용할 디코딩 힌트 | "sync ";
"async ";
"auto "
|
default
| track
| 더 적합한 텍스트 트랙이 없으면 트랙을 활성화 | 부울 속성 |
defer
| script
| 스크립트 실행을 지연 | 부울 속성 |
dir
| HTML 요소 | 요소의 텍스트 방향성 | "ltr "; "rtl "; "auto "
|
dir
| bdo
| 요소의 텍스트 방향성 | "ltr "; "rtl "
|
dirname
| input ;
textarea
| 양식 제출 시 요소의 방향성을 전송하는 데 사용할 양식 컨트롤의 이름 | 텍스트* |
disabled
| button ;
input ;
optgroup ;
option ;
select ;
textarea ;
양식 관련 사용자 정의 요소
| 양식 컨트롤이 비활성화되었는지 여부 | 부울 속성 |
disabled
| fieldset
| legend 내에 있는 경우를
제외한 하위 양식 컨트롤이 비활성화되었는지 여부
| 부울 속성 |
disabled
| link
| 링크가 비활성화되었는지 여부 | 부울 속성 |
download
| a ;
area
| 리소스를 탐색하는 대신 다운로드할지 여부 및 해당 파일 이름 | 텍스트 |
draggable
| HTML 요소 | 요소를 드래그할 수 있는지 여부 | "true "; "false "
|
enctype
| form
| 항목 목록 인코딩 유형을 양식 제출에 사용 | "application/x-www-form-urlencoded ";
"multipart/form-data ";
"text/plain "
|
enterkeyhint
| HTML 요소 | Enter 키 작업 선택에 대한 힌트 | "enter ";
"done ";
"go ";
"next ";
"previous ";
"search ";
"send "
|
fetchpriority
| img ;
link ;
script
| 페치를 시작할 때 우선 순위 설정 | "auto ";
"high ";
"low "
|
for
| label
| 라벨을 양식 컨트롤과 연결 | ID* |
for
| output
| 출력을 계산한 컨트롤을 지정 | 고유한 공백으로 구분된 토큰의 무순 집합으로 구성된 ID* |
form
| button ;
fieldset ;
input ;
object ;
output ;
select ;
textarea ;
양식 관련 사용자 정의 요소
| 요소를 양식 요소와 연결
| ID* |
formaction
| button ;
input
| 양식 제출을 위한 URL | 공백으로 둘러싸인 유효한 비어 있지 않은 URL |
formenctype
| button ;
input
| 항목 목록 인코딩 유형을 양식 제출에 사용 | "application/x-www-form-urlencoded ";
"multipart/form-data ";
"text/plain "
|
formmethod
| button ;
input
| 양식 제출을 위한 변형 | "GET "; "POST "; "dialog "
|
formnovalidate
| button ;
input
| 양식 제출 시 양식 컨트롤 유효성 검사를 건너뛰기 | 부울 속성 |
formtarget
| button ;
input
| 양식 제출을 위한 내비게이션 | 유효한 탐색 대상 이름 또는 키워드 |
headers
| td ;
th
| 이 셀에 대한 헤더 셀 | 고유한 공백으로 구분된 토큰의 무순 집합으로 구성된 ID* |
height
| canvas ;
embed ;
iframe ;
img ;
input ;
object ;
source (picture 내에서);
video
| 수직 차원 | 유효한 비음수 정수 |
hidden
| 요소가 관련이 있는지 여부 | " | "; " "; 빈 문자열|
high
| meter
| 높은 범위의 하한 | 유효한 부동 소수점 수* |
href
| a ;
area
| 하이퍼링크의 주소 | 공백으로 둘러싸인 유효한 URL |
href
| link
| 하이퍼링크의 주소 | 공백으로 둘러싸인 유효한 비어 있지 않은 URL |
href
| base
| 문서 기본 URL | 공백으로 둘러싸인 유효한 URL |
hreflang
| a ;
link
| 링크된 리소스의 언어 | 유효한 BCP 47 언어 태그 |
http-equiv
| meta
| Pragma 지시어 | "content-type ";
"default-style ";
"refresh ";
"x-ua-compatible ";
"content-security-policy "
|
id
| HTML 요소 | 요소의 ID | 텍스트* |
imagesizes
| link
| 다양한 페이지 레이아웃에 대한 이미지 크기 (rel ="preload "에 대해)
| 유효한 소스 크기 목록 |
imagesrcset
| link
| 다양한 상황에서 사용할 이미지 예: 고해상도 디스플레이, 작은 모니터 등 (rel ="preload "에 대해)
| 이미지 후보 문자열로 구성된 쉼표로 구분된 목록 |
inert
| HTML 요소 | 요소가 비활성 상태인지 여부 | 부울 속성 |
inputmode
| HTML 요소 | 입력 모드 선택을 위한 힌트 | "none ";
"text ";
"tel ";
"email ";
"url ";
"numeric ";
"decimal ";
"search "
|
integrity
| link ;
script
| 하위 리소스 무결성 검사에서 사용하는 무결성 메타데이터 [SRI] | 텍스트 |
is
| HTML 요소 | 맞춤형 내장 요소를 생성 | 유효한 사용자 정의 요소 이름으로 정의된 맞춤형 내장 요소 |
ismap
| img
| 이미지가 서버 측 이미지 맵인지 여부 | 부울 속성 |
itemid
| HTML 요소 | 마이크로데이터 항목에 대한 전역 식별자 | 공백으로 둘러싸인 유효한 URL |
itemprop
| HTML 요소 | 마이크로데이터 항목의 속성 이름 | 고유한 공백으로 구분된 토큰의 무순 집합으로 구성된 유효한 절대 URL, 정의된 속성 이름, 또는 텍스트* |
itemref
| HTML 요소 | 참조된 요소들 | 고유한 공백으로 구분된 토큰의 무순 집합으로 구성된 ID* |
itemscope
| HTML 요소 | 마이크로데이터 항목을 도입 | 부울 속성 |
itemtype
| HTML 요소 | 마이크로데이터 항목의 항목 유형 | 고유한 공백으로 구분된 토큰의 무순 집합으로 구성된 유효한 절대 URL* |
kind
| track
| 텍스트 트랙의 유형 | "subtitles ";
"captions ";
"descriptions ";
"chapters ";
"metadata "
|
label
| optgroup ;
option ;
track
| 사용자에게 표시되는 라벨 | 텍스트 |
lang
| HTML 요소 | 요소의 언어 | 유효한 BCP 47 언어 태그 또는 빈 문자열 |
list
| input
| 자동 완성 옵션의 목록 | ID* |
loading
| iframe ;
img
| 로딩 지연 여부를 결정할 때 사용됨 | "lazy ";
"eager "
|
loop
| audio ;
video
| 미디어 리소스를 반복할지 여부 | 부울 속성 |
low
| meter
| 낮은 범위의 상한 | 유효한 부동 소수점 숫자* |
max
| input
| 최대값 | 다양함* |
max
| meter ;
progress
| 범위의 상한선 | 유효한 부동 소수점 숫자* |
maxlength
| input ;
textarea
| 값의 최대 길이 | 유효한 음수가 아닌 정수 |
media
| link ;
meta ;
source ;
style
| 적용 가능한 미디어 | 유효한 미디어 쿼리 리스트 |
method
| form
| 폼 제출에 사용할 변형 | "GET ";
"POST ";
"dialog "
|
min
| input
| 최소값 | 다양함* |
min
| meter
| 범위의 하한선 | 유효한 부동 소수점 숫자* |
minlength
| input ;
textarea
| 값의 최소 길이 | 유효한 음수가 아닌 정수 |
multiple
| input ;
select
| 여러 값을 허용할지 여부 | 부울 속성 |
muted
| audio ;
video
| 기본적으로 미디어 리소스를 음소거할지 여부 | 부울 속성 |
name
| button ;
fieldset ;
input ;
output ;
select ;
textarea ;
폼 관련 사용자 정의 요소
| 폼 제출에 사용할 요소의 이름 및 form.elements API
| 텍스트* |
name
| details
| 상호 배타적인 details
요소 그룹의 이름
| 텍스트* |
name
| form
| document.forms
API에서 사용할 폼의 이름
| 텍스트* |
name
| iframe ;
object
| content navigable의 이름 | 유효한 탐색 대상 이름 또는 키워드 |
name
| map
| usemap 속성에서
참조할 이미지 맵의 이름
| 텍스트* |
name
| meta
| 메타데이터 이름 | 텍스트* |
name
| slot
| 섀도우 트리 슬롯의 이름 | 텍스트 |
nomodule
| script
| 모듈 스크립트를 지원하는 사용자 에이전트에서 실행을 방지함 | 부울 속성 |
nonce
| HTML elements | 콘텐츠 보안 정책 검사에서 사용되는 암호학적 논스 [CSP] | 텍스트 |
novalidate
| form
| 폼 제출 시 폼 컨트롤 검증을 건너뜀 | 부울 속성 |
open
| details
| 세부사항이 표시되는지 여부 | 부울 속성 |
open
| dialog
| 대화 상자가 표시되고 있는지 여부 | 부울 속성 |
optimum
| meter
| 게이지에서의 최적값 | 유효한 부동 소수점 숫자* |
pattern
| input
| 폼 컨트롤 값이 일치해야 하는 패턴 | JavaScript 패턴 생산과 일치하는 정규 표현식 |
ping
| a ;
area
| 핑할 URL | 공백으로 구분된 토큰 세트로 구성된 유효한 비어 있지 않은 URL |
placeholder
| input ;
textarea
| 폼 컨트롤 내에 배치할 사용자에게 보이는 라벨 | 텍스트* |
playsinline
| video
| 사용자 에이전트가 요소의 재생 영역 내에 비디오 콘텐츠를 표시하도록 권장함 | 부울 속성 |
popover
| HTML elements | 요소를 팝오버 요소로 만듦 | "auto ";
"manual ";
|
popovertarget
| button ;
input
| 팝오버 요소를 토글, 표시 또는 숨길 대상을 지정함 | ID* |
popovertargetaction
| button ;
input
| 타겟이 된 팝오버 요소가 토글, 표시 또는 숨겨져야 하는지를 나타냄 | "toggle ";
"show ";
"hide "
|
poster
| video
| 비디오 재생 전에 표시할 포스터 프레임 | 공백으로 둘러싸일 수 있는 유효한 비어 있지 않은 URL |
preload
| audio ;
video
| 미디어 리소스가 얼마나 버퍼링이 필요할지에 대한 힌트 | "none ";
"metadata ";
"auto "
|
readonly
| input ;
textarea
| 사용자가 값을 편집할 수 있는지 여부 | 부울 속성 |
readonly
| 폼 관련 사용자 정의 요소 | willValidate 에
영향을 미치며, 사용자 정의 요소 작성자가 추가한 동작에도 영향을 미침
| 부울 속성 |
referrerpolicy
| a ;
area ;
iframe ;
img ;
link ;
script
| 요소가 시작하는 패치(fetches)에 대한 참조 정책 | 참조 정책 |
rel
| a ;
area
| 문서 내에서 하이퍼링크를 포함하는 위치와 대상 리소스 간의 관계 | 공백으로 구분된 고유 토큰의 무순서 집합* |
rel
| link
| 하이퍼링크를 포함하는 문서와 대상 리소스 간의 관계 | 공백으로 구분된 고유 토큰의 무순서 집합* |
required
| input ;
select ;
textarea
| 폼 제출을 위해 컨트롤이 필수인지 여부 | 부울 속성 |
reversed
| ol
| 목록을 역순으로 번호 매기기 | 부울 속성 |
rows
| textarea
| 표시할 줄 수 | 0보다 큰 유효한 음수가 아닌 정수 |
rowspan
| td ;
th
| 셀이 가로지를 행의 수 | 유효한 음수가 아닌 정수 |
sandbox
| iframe
| 중첩 콘텐츠에 대한 보안 규칙 | 공백으로 구분된 고유 토큰의 무순서 집합, ASCII 대소문자 구분 없음, 구성:
|
scope
| th
| 헤더 셀이 적용되는 셀을 지정 | "row ";
"col ";
"rowgroup ";
"colgroup "
|
selected
| option
| 옵션이 기본적으로 선택되었는지 여부 | 부울 속성 |
shadowrootclonable
| template
| 선언적 섀도우 루트에 clonable을 설정 | 부울 속성 |
shadowrootdelegatesfocus
| template
| 선언적 섀도우 루트에 delegates focus를 설정 | 부울 속성 |
shadowrootmode
| template
| 스트리밍 선언적 섀도우 루트를 활성화 | "open ";
"closed "
|
shadowrootserializable
| template
| 선언적 섀도우 루트에 serializable을 설정 | 부울 속성 |
shape
| area
| 이미지 맵에서 생성할 모양 종류 | "circle ";
"default ";
"poly ";
"rect "
|
size
| input ;
select
| 컨트롤의 크기 | 0보다 큰 유효한 음수가 아닌 정수 |
sizes
| link
| 아이콘의 크기 (rel ="icon ")
| 공백으로 구분된 고유 토큰의 무순서 집합, ASCII 대소문자 구분 없음, 구성: |
sizes
| img ;
source
| 다양한 페이지 레이아웃에 사용할 이미지 크기 | 유효한 소스 크기 목록 |
slot
| HTML 요소 | 요소의 원하는 슬롯 | 텍스트 |
span
| col ;
colgroup
| 요소가 가로지를 열 수 | 0보다 큰 유효한 음수가 아닌 정수 |
spellcheck
| HTML 요소 | 요소의 맞춤법 및 문법을 검사할지 여부 | "true ";
"false ";
빈 문자열
|
src
| audio ;
embed ;
iframe ;
img ;
input ;
script ;
source (video 또는 audio );
track ;
video
| 자원의 주소 | 유효한 비어 있지 않은 URL, 공백으로 둘러싸일 수 있음 |
srcdoc
| iframe
| iframe 에서 렌더링할 문서
| iframe
srcdoc 문서의 소스*
|
srclang
| track
| 텍스트 트랙의 언어 | 유효한 BCP 47 언어 태그 |
srcset
| img ;
source
| 다양한 상황에서 사용할 이미지, 예를 들어 고해상도 디스플레이, 작은 모니터 등. | 이미지 후보 문자열 목록 |
start
| ol
| 목록의 시작 값 | 유효한 정수 |
step
| input
| 폼 컨트롤의 값에 맞춰야 하는 세부 사항 | 0보다 큰 유효한 부동 소수점
수, 또는 "any "
|
style
| HTML 요소 | 표현 및 형식 지정 지침 | CSS 선언* |
tabindex
| HTML 요소 | 요소가 포커스를 받을 수 있는지와 순차적으로 포커스를 받을 수 있는지 여부, 및 순차적 포커스 탐색 목적으로 요소의 상대적 순서 | 유효한 정수 |
target
| a ;
area
| 하이퍼링크 탐색을 위한 탐색 가능한 대상 | 유효한 탐색 대상 이름 또는 키워드 |
target
| base
| 하이퍼링크 탐색 가능한 대상에 대한 기본값 탐색 및 양식 제출 | 유효한 탐색 대상 이름 또는 키워드 |
target
| form
| 탐색 가능한 양식 제출 대상 | 유효한 탐색 대상 이름 또는 키워드 |
title
| HTML 요소 | 요소에 대한 자문 정보 | 텍스트 |
title
| abbr ;
dfn
| 약어의 전체 용어 또는 확장 | 텍스트 |
title
| input
| 패턴 설명 (pattern 속성
사용 시)
| 텍스트 |
title
| link
| 링크의 제목 | 텍스트 |
title
| link ;
style
| CSS 스타일 시트 세트 이름 | 텍스트 |
translate
| HTML 요소 | 페이지가 현지화될 때 요소가 번역될지 여부 | "yes "; "no "
|
type
| a ;
link
| 참조된 리소스 유형에 대한 힌트 | 유효한 MIME 유형 문자열 |
type
| button
| 버튼 유형 | "submit ";
"reset ";
"button "
|
type
| embed ;
object ;
source
| 내장 리소스 유형 | 유효한 MIME 유형 문자열 |
type
| input
| 양식 컨트롤의 유형 | input 유형 키워드
|
type
| ol
| 목록 표지의 종류 | "1 ";
"a ";
"A ";
"i ";
"I "
|
type
| script
| 스크립트의 유형 | "module "; 유효한 MIME 유형 문자열, JavaScript MIME 유형 본질 일치가 아닌 것
|
usemap
| img
| 이미지 맵으로 사용할 이름 | 유효한 해시 이름 참조* |
value
| button ;
option
| 양식 제출에 사용될 값 | 텍스트 |
value
| data
| 기계가 읽을 수 있는 값 | 텍스트* |
value
| input
| 폼 컨트롤의 값 | 다양함* |
value
| li
| 목록 항목의 서수 값 | 유효한 정수 |
value
| meter ;
progress
| 요소의 현재 값 | 유효한 부동 소수점 수 |
width
| canvas ;
embed ;
iframe ;
img ;
input ;
object ;
source (picture );
video
| 수평 차원 | 유효한 음수가 아닌 정수 |
wrap
| textarea
| 양식 제출을 위해 폼 컨트롤의 값을 래핑하는 방법 | "soft ";
"hard "
|
writingsuggestions
| HTML 요소 | 요소가 쓰기 제안을 제공할 수 있는지 여부 | "true ";
"false ";
빈 문자열
|
표에 있는 별표 (*)는 위 표에 표시된 것보다 실제 규칙이 더 복잡함을 나타냅니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
모든 현재 엔진에서 지원합니다.
이 섹션은 비규범적입니다.
이 섹션은 비규범적입니다.
AudioTrack
AudioTrackList
BarProp
BeforeUnloadEvent
BroadcastChannel
CanvasGradient
CanvasPattern
CanvasRenderingContext2D
CloseWatcher
CustomElementRegistry
CustomStateSet
DOMParser
DOMStringList
DOMStringMap
DataTransfer
DataTransferItem
DataTransferItemList
DedicatedWorkerGlobalScope
Document
, partial
1 2
DragEvent
Element
,
partial
ElementInternals
ErrorEvent
EventSource
External
FormDataEvent
HTMLAllCollection
HTMLAnchorElement
,
partial
HTMLAreaElement
,
partial
HTMLAudioElement
HTMLBRElement
, partial
HTMLBaseElement
HTMLBodyElement
,
partial
HTMLButtonElement
HTMLCanvasElement
HTMLDListElement
,
partial
HTMLDataElement
HTMLDataListElement
HTMLDetailsElement
HTMLDialogElement
HTMLDirectoryElement
HTMLDivElement
, partial
HTMLElement
HTMLEmbedElement
,
partial
HTMLFieldSetElement
HTMLFontElement
HTMLFormControlsCollection
HTMLFormElement
HTMLFrameElement
HTMLFrameSetElement
HTMLHRElement
, partial
HTMLHeadElement
HTMLHeadingElement
,
partial
HTMLHtmlElement
,
partial
HTMLIFrameElement
,
partial
HTMLImageElement
,
partial
HTMLInputElement
,
partial
HTMLLIElement
, partial
HTMLLabelElement
HTMLLegendElement
,
partial
HTMLLinkElement
,
partial
HTMLMapElement
HTMLMarqueeElement
HTMLMediaElement
HTMLMenuElement
,
partial
HTMLMetaElement
,
partial
HTMLMeterElement
HTMLModElement
HTMLOListElement
,
partial
HTMLObjectElement
,
partial
HTMLOptGroupElement
HTMLOptionElement
HTMLOptionsCollection
HTMLOutputElement
HTMLParagraphElement
,
partial
HTMLParamElement
HTMLPictureElement
HTMLPreElement
, partial
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
,
partial
HTMLSelectElement
HTMLSlotElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
,
partial
HTMLTableCaptionElement
,
partial
HTMLTableCellElement
,
partial
HTMLTableColElement
,
partial
HTMLTableElement
,
partial
HTMLTableRowElement
,
partial
HTMLTableSectionElement
,
partial
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
,
partial
HTMLUnknownElement
HTMLVideoElement
HashChangeEvent
History
ImageBitmap
ImageBitmapRenderingContext
ImageData
Location
MediaError
MessageChannel
MessageEvent
MessagePort
MimeType
MimeTypeArray
NavigateEvent
Navigation
NavigationActivation
NavigationCurrentEntryChangeEvent
NavigationDestination
NavigationHistoryEntry
NavigationTransition
Navigator
, partial
NotRestoredReasonDetails
NotRestoredReasons
OffscreenCanvas
OffscreenCanvasRenderingContext2D
PageRevealEvent
PageSwapEvent
PageTransitionEvent
Path2D
Plugin
PluginArray
PopStateEvent
PromiseRejectionEvent
RadioNodeList
Range
,
partial
ShadowRoot
,
partial
SharedWorker
SharedWorkerGlobalScope
Storage
StorageEvent
SubmitEvent
TextMetrics
TextTrack
TextTrackCue
TextTrackCueList
TextTrackList
TimeRanges
ToggleEvent
TrackEvent
UserActivation
ValidityState
VideoTrack
VideoTrackList
VisibilityStateEntry
Window
, partial
Worker
WorkerGlobalScope
WorkerLocation
WorkerNavigator
Worklet
WorkletGlobalScope
이 섹션은 비규범적입니다.
다음 표는 이 문서에서 발생하는 이벤트를 나열한 것으로, 이미 미디어 요소 이벤트와 드래그 앤 드롭 이벤트에 정의된 이벤트는 제외됩니다.
이벤트 | 인터페이스 | 관련 대상 | 설명 |
---|---|---|---|
DOMContentLoaded
모든 현재 엔진에서 지원됨. Firefox1+Safari3.1+Chrome1+
Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+ | Event
| Document
| 구문 분석기가 작업을 완료하면 Document 에서 발생함
|
afterprint
모든 현재 엔진에서 지원됨. Firefox6+Safari13+Chrome63+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| Window
| 인쇄 후 Window 에서 발생함
|
beforeprint
모든 현재 엔진에서 지원됨. Firefox6+Safari13+Chrome63+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| Window
| 인쇄 전에 Window 에서 발생함
|
beforematch
한 개의 엔진에서만 지원됨. Firefox지원
안됨Safari지원
안됨Chrome102+
Opera지원 안됨Edge102+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| 요소들 | 숨겨져 있다가 찾기 기능을 통해 | 상태의 요소에서 표시되기 전에 발생함.
beforetoggle
HTMLElement/beforetoggle_event 모든 현재 엔진에서 지원됨. Firefox🔰
114+Safaripreview+Chrome114+
Opera?Edge114+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | ToggleEvent
| 요소들 | popover 속성이 있는 요소에서 표시와 숨김 간에 전환될 때
발생함
|
beforeunload
모든 현재 엔진에서 지원됨. Firefox1+Safari3+Chrome1+
Opera12+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | BeforeUnloadEvent
| Window
| 페이지가 언로드되기 직전에 Window 에서 발생함. 페이지가 경고 메시지를 표시할
수 있음.
|
blur
| Event
| Window , 요소들
| 노드가 포커스를 잃을 때 발생함 |
cancel
HTMLDialogElement/cancel_event 모든 현재 엔진에서 지원됨. Firefox98+Safari15.4+Chrome37+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android지원 안됨WebView Android?Samsung Internet?Opera Android? | Event
| CloseWatcher , dialog
요소들, input
요소들
| CloseWatcher 객체 또는
dialog
요소에서 닫기 요청을 받거나, input
요소에서 사용자가 선택을 변경하지 않았을 때 발생함.
|
change
모든 현재 엔진에서 지원됨. Firefox1+Safari3+Chrome1+
Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | Event
| 폼 컨트롤 | 사용자가 값 변경을 커밋했을 때 컨트롤에서 발생함 (또한 input
이벤트도 참조하세요)
|
click
| PointerEvent
| 요소들 | 일반적으로 마우스 이벤트이며, 비포인터 입력 장치(예: 키보드)에서 요소가 활성화될 때 요소의 활성화 동작이 실행되기 전에 요소에서 합성적으로 발생함 |
close
모든 현재 엔진에서 지원됨. Firefox98+Safari15.4+Chrome37+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| CloseWatcher ,
dialog
요소들,
MessagePort
| CloseWatcher
객체 또는
dialog
요소가 닫기 요청을 통해 닫히거나, 웹 개발자의 코드 또는 MessagePort
객체가 얽힘이 풀릴 때 발생함
|
connect
SharedWorkerGlobalScope/connect_event 모든 현재 엔진에서 지원됨. Firefox29+Safari16+Chrome4+
Opera10.6+Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS16+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | MessageEvent
| SharedWorkerGlobalScope
| 새로운 클라이언트가 연결될 때 공유 작업자의 글로벌 스코프에서 발생함 |
contextlost
HTMLCanvasElement/webglcontextlost_event 한 개의 엔진에서만 지원됨. Firefox지원
안됨Safari지원
안됨Chrome98+
Opera?Edge98+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| canvas
요소들, OffscreenCanvas
객체들
| 해당 CanvasRenderingContext2D
또는 OffscreenCanvasRenderingContext2D
가 손실되었을 때 발생함
|
contextrestored
HTMLCanvasElement/contextrestored_event 한 개의 엔진에서만 지원됨. Firefox지원
안됨Safari지원
안됨Chrome98+
Opera?Edge98+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| canvas
요소들, OffscreenCanvas
객체들
| 해당 CanvasRenderingContext2D
또는 OffscreenCanvasRenderingContext2D
가 손실된 후 복원되었을 때 발생함
|
currententrychange
| NavigationCurrentEntryChangeEvent
| Navigation
| navigation.currentEntry
가 변경될 때 발생함
|
dispose
| Event
| NavigationHistoryEntry
| 세션 기록 항목과 연결된
NavigationHistoryEntry
가 세션 기록에서 영구적으로 제거되고 더 이상 이동할 수 없을 때 발생함
|
error
모든 현재 엔진에서 지원됨. Firefox6+Safari5+Chrome6+
Opera12+Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android45+Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ 모든 현재 엔진에서 지원됨. Firefox6+Safari5.1+Chrome10+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | Event
또는 ErrorEvent
| 글로벌 스코프 객체들, Worker
객체들,
요소들,
네트워킹 관련 객체들
| 예상치 못한 오류(예: 네트워크 오류, 스크립트 오류, 디코딩 오류)가 발생할 때 발생함 |
focus
| Event
| Window , 요소들
| 노드가 포커스 획득 시 발생함 |
formdata
HTMLFormElement/formdata_event 모든 현재 엔진에서 지원됨. Firefox72+Safari15+Chrome77+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | FormDataEvent
| form
요소들
| form
요소가 엔트리 목록을
구성할 때 발생함
|
hashchange
모든 현재 엔진에서 지원됨. Firefox3.6+Safari5+Chrome8+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | HashChangeEvent
| Window
| 문서의 Window 에서 프래그먼트 부분이 변경될 때 발생함
|
input
| Event
| 요소들 | 사용자가 contenteditable
요소의 콘텐츠 또는 폼 컨트롤의 값을 변경할 때 발생함. 또한 폼 컨트롤의 change 이벤트도 참조하세요.
|
invalid
HTMLInputElement/invalid_event 모든 현재 엔진에서 지원됨. Firefox4+Safari5+Chrome10+
Opera10+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android64+Safari iOS5+Chrome Android?WebView Android4+Samsung Internet4.0+Opera Android12+ | Event
| 폼 컨트롤 | 폼 유효성 검사 중 제약 조건을 충족하지 않을 경우 해당 컨트롤에서 발생함 |
languagechange
모든 현재 엔진에서 지원됨. Firefox32+Safari10.1+Chrome37+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? WorkerGlobalScope/languagechange_event 모든 현재 엔진에서 지원됨. Firefox74+Safari4+Chrome4+
Opera11.5+Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| 글로벌 스코프 객체들 | 사용자의 기본 언어가 변경될 때 글로벌 스코프 객체에서 발생함 |
load
| Event
| Window , 요소들
| 문서가 로드가 완료되었을 때 Window 에서 발생하며, 리소스를 포함한
요소(img , embed 등)가 로드를 완료했을 때 해당 요소에서
발생함
|
message
BroadcastChannel/message_event 모든 현재 엔진에서 지원됨. Firefox38+Safari15.4+Chrome54+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+ DedicatedWorkerGlobalScope/message_event 모든 현재 엔진에서 지원됨. Firefox3.5+Safari4+Chrome4+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11.5+ 모든 현재 엔진에서 지원됨. Firefox6+Safari5+Chrome6+
Opera12+Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android45+Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ 모든 현재 엔진에서 지원됨. Firefox41+Safari5+Chrome2+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+ 모든 현재 엔진에서 지원됨. Firefox9+Safari4+Chrome60+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android47+ 모든 현재 엔진에서 지원됨. Firefox3.5+Safari4+Chrome4+
Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11.5+ | MessageEvent
| Window , EventSource , MessagePort , BroadcastChannel ,
DedicatedWorkerGlobalScope ,
Worker , ServiceWorkerContainer
| 객체가 메시지를 수신했을 때 해당 객체에서 발생함 |
messageerror
BroadcastChannel/messageerror_event 모든 현재 엔진에서 지원됨. Firefox57+Safari15.4+Chrome60+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ DedicatedWorkerGlobalScope/messageerror_event 모든 현재 엔진에서 지원됨. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ MessagePort/messageerror_event 모든 현재 엔진에서 지원됨. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ 모든 현재 엔진에서 지원됨. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ 모든 현재 엔진에서 지원됨. Firefox57+Safari16.4+Chrome60+
Opera?Edge79+ Edge (Legacy)18Internet Explorer지원 안됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | MessageEvent
| Window , MessagePort , BroadcastChannel ,
DedicatedWorkerGlobalScope ,
Worker , ServiceWorkerContainer
| 객체가 역직렬화할 수 없는 메시지를 수신했을 때 해당 객체에서 발생함 |
navigate
| NavigateEvent
| Navigation
| 탐색 가능한 객체가 탐색, 새로 고침, 히스토리 트래버스 또는 기타 방식으로 URL을 변경하기 전에 발생 |
navigateerror
| ErrorEvent
| Navigation
| 탐색이 성공적으로 완료되지 않을 때 발생 |
navigatesuccess
| Event
| Navigation
| 탐색이 성공적으로 완료될 때 발생 |
offline
모든 현재 엔진에서 지원됨. Firefox9+Safari4+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | Event
| 전역 범위 객체 | 네트워크 연결이 끊어졌을 때 전역 범위 객체에서 발생 |
online
모든 현재 엔진에서 지원됨. Firefox9+Safari4+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | Event
| 전역 범위 객체 | 네트워크 연결이 복구될 때 전역 범위 객체에서 발생 |
open
모든 현재 엔진에서 지원됨. Firefox6+Safari5+Chrome6+
Opera12+Edge79+ Edge (Legacy)?Internet Explorer지원 안됨 Firefox Android45+Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | Event
| EventSource
| EventSource 객체에서 연결이 설정될 때 발생
|
pageswap
| PageSwapEvent
| Window
| Window 에서 문서가 탐색의 결과로 언로드되기 직전에 발생합니다.
|
pagehide
모든 최신 엔진에서 지원. Firefox6+Safari5+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | PageTransitionEvent
| Window
| 페이지의 세션 기록 항목이 활성 항목이 아니게 될 때 Window 에서 발생합니다.
|
pagereveal
| PageRevealEvent
| Window
| 페이지가 초기화되거나 재활성화된 후 처음으로 렌더링을
시작할 때 Window 에서 발생합니다.
|
pageshow
모든 최신 엔진에서 지원. Firefox6+Safari5+Chrome3+
Opera?Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | PageTransitionEvent
| Window
| 페이지의 세션 기록 항목이 활성 항목이 될 때 Window 에서 발생합니다.
|
pointercancel
| PointerEvent
| 요소 및 텍스트
노드
| 사용자가 드래그 앤 드롭 작업을 시도할 때 소스 노드에서 발생합니다. |
popstate
모든 최신 엔진에서 지원. Firefox4+Safari5+Chrome5+
Opera11.5+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+ | PopStateEvent
| Window
| 특정 세션 기록
탐색의 경우 Window 에서 발생합니다.
|
readystatechange
Document/readystatechange_event 모든 최신 엔진에서 지원. Firefox4+Safari5.1+Chrome9+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | Event
| Document
| 문서의 구문 분석이 완료되었을 때, 그리고 모든 하위 리소스가 로드되었을 때 Document 에서 발생합니다.
|
rejectionhandled
| PromiseRejectionEvent
| 전역 범위 객체 | 이전에 처리되지 않았던 promise 거부가 처리될 때 전역 범위 객체에서 발생합니다. |
reset
모든 최신 엔진에서 지원. Firefox6+Safari3+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | Event
| form 요소
| 리셋될 때 form 요소에서 발생합니다.
|
select
모든 최신 엔진에서 지원. Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLTextAreaElement/select_event 모든 최신 엔진에서 지원. Firefox6+Safari1+Chrome1+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | Event
| 폼 컨트롤 | API 또는 사용자가 텍스트 선택을 조정할 때 폼 컨트롤에서 발생합니다. |
storage
모든 최신 엔진에서 지원. Firefox45+Safari4+Chrome1+
Opera?Edge79+ Edge (Legacy)15+Internet Explorer9+ Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | StorageEvent
| Window
| 해당 localStorage 또는 sessionStorage 스토리지 영역이
변경될 때 Window 이벤트에서 발생합니다.
|
submit
모든 최신 엔진에서 지원. Firefox1+Safari3+Chrome1+
Opera8+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | SubmitEvent
| form 요소
| 제출될 때 form 요소에서 발생합니다.
|
toggle
HTMLDetailsElement/toggle_event 모든 최신 엔진에서 지원. Firefox49+Safari10.1+Chrome36+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 모든 최신 엔진에서 지원. 🔰
114+Safaripreview+Chrome114+
Opera?Edge114+ Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | ToggleEvent
| details 및 popover 요소
| 열리거나 닫힐 때 details
요소에서 발생하며, popover 속성이 있는 요소가 표시됨과
숨김 사이를 전환할 때 발생합니다.
|
unhandledrejection
Window/unhandledrejection_event 모든 최신 엔진에서 지원. Firefox69+Safari11+Chrome49+
Opera?Edge79+ Edge (Legacy)?Internet Explorer지원 안 됨 Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android? | PromiseRejectionEvent
| 전역 범위 객체 | promise 거부가 처리되지 않은 상태로 유지될 때 전역 범위 객체에서 발생합니다. |
unload
모든 최신 엔진에서 지원. Firefox1+Safari3+Chrome1+
Opera4+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | Event
| Window
| 페이지가 사라질 때 Window 객체에서 발생합니다.
|
visibilitychange
Document/visibilitychange_event 모든 최신 엔진에서 지원. Firefox56+Safari14.1+Chrome62+
Opera49+Edge79+ Edge (Legacy)18Internet Explorer🔰 10+ Firefox Android?Safari iOS?Chrome Android?WebView Android62+Samsung Internet?Opera Android46+ | Event
| Document
| 페이지가 사용자에게 보이거나 숨겨질 때 Document 객체에서
발생합니다.
|
이 섹션은 규범적이지 않습니다.
다음 HTTP 요청 헤더는 이 명세서에서 정의됩니다:
다음 HTTP 응답 헤더는 이 명세서에서 정의됩니다:
Cross-Origin-Embedder-Policy
Cross-Origin-Embedder-Policy-Report-Only
Cross-Origin-Opener-Policy
Cross-Origin-Opener-Policy-Report-Only
Origin-Agent-Cluster
Refresh
X-Frame-Options
이 섹션은 규범적이지 않습니다.
다음 MIME 유형은 이 명세서에서 언급됩니다:
application/atom+xml
application/json
application/octet-stream
application/microdata+json
application/rss+xml
application/wasm
application/x-www-form-urlencoded
application/xhtml+xml
application/xml
image/gif
image/jpeg
image/png
image/svg+xml
multipart/form-data
multipart/mixed
multipart/x-mixed-replace
text/css
text/event-stream
text/javascript
text/json
text/plain
text/html
text/ping
text/uri-list
text/vcard
text/vtt
text/xml
video/mp4
video/mpeg
모든 참조는 "비규범적"으로 표시되지 않는 한 규범적입니다.
XMLHttpRequest
, A. van Kesteren. WHATWG.
HTML을 발명한 팀 버너스 리(Tim Berners-Lee)에게 감사드립니다. 이 없이 이 모든 것은 존재하지 않았을 것입니다.
감사의 말
Aankhen, Aaqa Ishtyaq, Aaron Boodman, Aaron Leventhal, Aaron Krajeski, Abhishek Ghaskata, Abhishek Gupta, Adam Barth, Adam de Boor, Adam Hepton, Adam Klein, Adam Rice, Adam Roben, Addison Phillips, Adele Peterson, Adrian Bateman, Adrian Roselli, Adrian Sutton, Agustín Fernández, Aharon (Vladimir) Lanin, Ajai Tirumali, Ajay Poshak, Akash Balenalli Akatsuki Kitamura, Alan Plum, Alastair Campbell, Alejandro G. Castro, Alex Bishop, Alex Nicolaou, Alex Nozdriukhin, Alex Rousskov, Alex Soncodi, Alexander Farkas, Alexander J. Vincent, Alexander Kalenik, Alexandre Dieulot, Alexandre Morgaut, Alexey Feldgendler, Алексей Проскуряков (Alexey Proskuryakov), Alexey Shvayka, Alexis Deveria, Alfred Agrell, Ali Juma, Alice Boxhall, Alice Wonder, Allan Clements, Allen Wirfs-Brock, Alex Komoroske, Alex Russell, Alphan Chen, Aman Ansari, Ami Fischman, Amos Jeffries, Amos Lim, Anders Carlsson, André Bargull, André E. Veltstra, Andrea Rendine, Andreas, Andreas Deuschlinger, Andreas Farre, Andreas Kling, Andrei Popescu, Andres Gomez, Andres Rios, Andreu Botella, Andrew Barfield, Andrew Clover, Andrew Gove, Andrew Grieve, Andrew Kaster, Andrew Macpherson, Andrew Oakley, Andrew Paseltiner, Andrew Simons, Andrew Smith, Andrew W. Hagen, Andrew Williams, Andrey V. Lukyanov, Andry Rendy, Andy Davies, Andy Earnshaw, Andy Heydon, Andy Paicu, Andy Palay, Anjana Vakil, Ankur Kaushal, Anna Belle Leiserson, Anna Sidwell, Anthony Boyd, Anthony Bryan, Anthony Hickson, Anthony Ramine, Anthony Ricaud, Anton Vayvod, Antonio Sartori, Antti Koivisto, Arfat Salman, Arkadiusz Michalski, Arne Thomassen, Aron Spohr, Arphen Lin, Arthur Hemery, Arthur Sonzogni, Arthur Stolyar, Arun Patole, Aryeh Gregor, Asanka Herath, Asbjørn Ulsberg, Ashley Gullen, Ashley Sheridan, Asumu Takikawa, Atsushi Takayama, Attila Haraszti, Aurelien Levy, Ave Wrigley, Avi Drissman, Axel Dahmen, 방성범 (Bang Seongbeom), Barry Pollard, Ben Boyle, Ben Godfrey, Ben Golightly, Ben Kelly, Ben Lerner, Ben Leslie, Ben Meadowcroft, Ben Millard, Benjamin Carl Wiley Sittler, Benjamin Hawkes-Lewis, Benji Bilheimer, Benoit Ren, Bert Bos, Bijan Parsia, Bil Corry, Bill Mason, Bill McCoy, Billy Wong, Billy Woods, Bjartur Thorlacius, Björn Höhrmann, Blake Frantz, Bob Lund, Bob Owen, Bobby Holley, Boris Zbarsky, Brad Fults, Brad Neuberg, Brad Spencer, Bradley Meck, Brady Eidson, Brandon Jones, Brendan Eich, Brenton Simpson, Brett Wilson, Brett Zamir, Brian Birtles, Brian Blakely, Brian Campbell, Brian Korver, Brian Kuhn, Brian M. Dube, Brian Ryner, Brian Smith, Brian Wilson, Bryan Sullivan, Bruce Bailey, Bruce D'Arcus, Bruce Lawson, Bruce Miller, Bugs Nash, C. Scott Ananian, C. Williams, Cameron McCormack, Cameron Zemek, Cao Yipeng, Carlos Amengual, Carlos Gabriel Cardona, Carlos Ibarra López, Carlos Perelló Marín, Carolyn MacLeod, Casey Leask, Cătălin Badea, Cătălin Mariș, Cem Turesoy, ceving, Chao Cai, 윤석찬 (Channy Yun), Charl van Niekerk, Charlene Wright, Charles Iliya Krempeaux, Charles McCathie Nevile, Charlie Reis, 白丞祐 (Cheng-You Bai), Chris Apers, Chris Cressman, Chris Dumez, Chris Evans, Chris Harrelson, Chris Markiewicz, Chris Morris, Chris Nardi, Chris Needham, Chris Pearce, Chris Peterson, Chris Rebert, Chris Weber, Chris Wilson, Christian Biesinger, Christian Johansen, Christian Schmidt, Christoph Päper, Christophe Dumez, Christopher Aillon, Christopher Cameron, Christopher Ferris, Chriswa, Clark Buehler, Cole Robison, Colin Fine, Collin Jackson, Corey Farwell, Corprew Reed, Craig Cockburn, Csaba Gabor, Csaba Marton, Cynthia Shelly, Cyrille Tuzi, Daksh Shah, Dan Callahan, Dan Yoder, Dane Foster, Daniel Barclay, Daniel Bratell, Daniel Brooks, Daniel Brumbaugh Keeney, Daniel Buchner, Daniel Cheng, Daniel Clark, Daniel Davis, Daniel Ehrenberg, Daniel Glazman, Daniel Holbert, Daniel Peng, Daniel Schattenkirchner, Daniel Spång, Daniel Steinberg, Daniel Tan, Daniel Trebbien, Daniel Vogelheim, Danny Sullivan, Daphne Preston-Kendal, Darien Maillet Valentine, Darin Adler, Darin Fisher, Darxus, Dave Camp, Dave Cramer, Dave Hodder, Dave Lampton, Dave Singer, Dave Tapuska, Dave Townsend, David Baron, David Bloom, David Bokan, David Bruant, David Carlisle, David E. Cleary, David Egan Evans, David Fink, David Flanagan, David Gerard, David Grogan, David Hale, David Håsäther, David Hyatt, David I. Lehn, David John Burrowes, David Matja, David Remahl, David Resseguie, David Smith, David Storey, David Vest, David Woolley, David Zbarsky, Dave Methvin, DeWitt Clinton, Dean Edridge, Dean Edwards, Dean Jackson, Debanjana Sarkar, Debi Orton, Delan Azabani, Derek Featherstone, Derek Guenther, Devarshi Pant, Devdatta, Devin Mullins, Devin Rousso, Di Zhang, Diego Ferreiro Val, Diego González Zúñiga, Diego Ponce de León, Dimitri Glazkov, Dimitry Golubovsky, Dirk Pranke, Dirk Schulze, Dirkjan Ochtman, Divya Manian, Dmitry Lazutkin, Dmitry Titov, dolphinling, Dominic Cooney, Dominique Hazaël-Massieux, Don Brutzman, Donovan Glover, Doron Rosenberg, Doug Kramer, Doug Simpkinson, Drew Wilson, Edgar Chen, Edmund Lai, Eduard Pascual, Eduardo Vela, Edward Welbourne, Edward Z. Yang, Ehsan Akhgari, Eira Monstad, Eitan Adler, Eli Friedman, Eli Grey, Eliot Graff, Elisabeth Robson, Elizabeth Castro, Elliott Sprehn, Elliotte Harold, Emilio Cobos Álvarez, Emily Stark, Eric Carlson, Eric Casler, Eric Lawrence, Eric Portis, Eric Rescorla, Eric Semling, Eric Shepherd, Eric Willigers, Erik Arvidsson, Erik Charlebois, Erik Rose, 栗本 英理子 (Eriko Kurimoto), espretto, Evan Jacobs, Evan Martin, Evan Prodromou, Evan Stade, Evert, Evgeny Kapun, ExE-Boss, Ezequiel Garzón, fantasai, Félix Sanz, Felix Sasaki, Fernando Altomare Serboncini, Forbes Lindesay, Francesco Schwarz, Francis Brosnan Blazquez, Franck 'Shift' Quélain, François Marier, Frank Barchard, Frank Liberato, Franklin Shirley, Frederik Braun, Fredrik Söderquist, 鵜飼文敏 (Fumitoshi Ukai), Futomi Hatano, Gavin Carothers, Gavin Kistner, Gareth Rees, Garrett Smith, Gary Blackwood, Gary Kacmarcik, Gary Katsevman, Geoff Richards, Geoffrey Garen, Georg Neis, George Lund, Gianmarco Armellin, Giovanni Campagna, Giuseppe Pascale, Glenn Adams, Glenn Maynard, Graham Klyne, Greg Botten, Greg Houston, Greg Wilkins, Gregg Tavares, Gregory J. Rosmaita, Gregory Terzian, Grey, guest271314, Guilherme Johansson Tramontina, Guy Bedford, Gytis Jakutonis, Håkon Wium Lie, Habib Virji, Hajime Morrita, Hallvord Reiar Michaelsen Steen, Hanna Laakso, Hans S. Tømmerhalt, Hans Stimer, Harald Alvestrand, Hayato Ito, 何志翔 (HE Zhixiang), Henri Sivonen, Henrik Lied, Henrik Lievonen, Henry Lewis, Henry Mason, Henry Story, Hermann Donfack Zeufack, 中川博貴 (Hiroki Nakagawa), Hiroshige Hayashizaki, Hiroyuki USHITO, Hitoshi Yoshida, Hongchan Choi, 王华 (Hua Wang), Hugh Bellamy, Hugh Guiney, Hugh Winkler, Ian Bicking, Ian Clelland, Ian Davis, Ian Fette, Ian Henderson, Ian Kilpatrick, Ibrahim Ahmed, Ido Green, Ignacio Javier, Igor Oliveira, 安次嶺 一功 (Ikko Ashimine), Ilya Grigorik, Ingvar Stepanyan, isonmad, Iurii Kucherov, Ivan Enderlin, Ivan Nikulin, Ivan Panchenko, Ivo Emanuel Gonçalves, J. King, J.C. Jones, Jackson Ray Hamilton, Jacob Davies, Jacques Distler, Jake Archibald, Jake Verbaten, Jakub Vrána, Jakub Łopuszański, Jakub Wilk, James Craig, James Graham, James Greene, James Justin Harrell, James Kozianski, James M Snell, James Perrett, James Robinson, Jamie Liu, Jamie Lokier, Jamie Mansfield, Jan Kühle, Jan Miksovsky, Janice Shiu, Janusz Majnert, Jan-Ivar Bruaroey, Jan-Klaas Kollhof, Jared Jacobs, Jason Duell, Jason Kersey, Jason Lustig, Jason Orendorff, Jason White, Jasper Bryant-Greene, Jasper St. Pierre, Jatinder Mann, Jay Henry Kao, Jean-Yves Avenard, Jed Hartman, Jeff Balogh, Jeff Cutsinger, Jeff Gilbert, Jeff "=JeffH" Hodges, Jeff Schiller, Jeff Walden, Jeffrey Yasskin, Jeffrey Zeldman, 胡慧鋒 (Jennifer Braithwaite), Jellybean Stonerfish, Jennifer Apacible, Jens Bannmann, Jens Fendler, Jens Oliver Meiert, Jens Widell, Jer Noble, Jeremey Hustman, Jeremy Keith, Jeremy Orlow, Jeremy Roman, Jeroen van der Meer, Jerry Smith, Jesse Renée Beach, Jessica Jong, jfkthame, Jian Li, Jihye Hong, Jim Jewett, Jim Ley, Jim Meehan, Jim Michaels, Jinho Bang, Jinjiang (勾三股四), Jirka Kosek, Jjgod Jiang, Joaquim Medeiros, João Eiras, Jochen Eisinger, Joe Clark, Joe Gregorio, Joel Spolsky, Joel Verhagen, Joey Arhar, Johan Herland, Johanna Herman, John Boyer, John Bussjaeger, John Carpenter, John Daggett, John Fallows, John Foliot, John Harding, John Keiser, John Law, John Musgrave, John Snyders, John Stockton, John-Mark Bell, Johnny Stenback, Jon Coppeard, Jon Ferraiolo, Jon Gibbins, Jon Jensen, Jon Perlow, Jonas Sicking, Jonathan Cook, Jonathan Kew, Jonathan Neal, Jonathan Oddy, Jonathan Rees, Jonathan Watt, Jonathan Worent, Jonny Axelsson, Joram Schrijver, Jordan Tucker, Jorgen Horstink, Joris van der Wel, Jorunn Danielsen Newth, Joseph Kesselman, Joseph Mansfield, Joseph Pecoraro, Josh Aas, Josh Hart, Josh Juran, Josh Levenberg, Josh Matthews, Joshua Bell, Joshua Chen, Joshua Randall, Juan Olvera, Juanmi Huertas, Jukka K. Korpela, Jules Clément-Ripoche, Julian Reschke, Julio Lopez, 小勝 純 (Jun Kokatsu), Jun Yang (harttle), Jungkee Song, Jürgen Jeka, Justin Lebar, Justin Novosad, Justin Rogers, Justin Schuh, Justin Sinclair, Juuso Lapinlampi, Ka-Sing Chou, Kagami Sascha Rosylight, Kai Hendry, Kamishetty Sreeja, 呂康豪 (KangHao Lu), Karl Dubost, Karl Tomlinson, Kartik Arora, Kartikaya Gupta, Kathy Walton, 河童エクマ(Kawarabe Ecma) Keith Cirkel, Keith Rollin, Keith Yeung, Kelly Ford, Kelly Norton, Ken Russell, Kenji Baheux, Kevin Benson, Kevin Cole, Kevin Gadd, Kevin Venkiteswaran, Khushal Sagar, Kinuko Yasuda, Koji Ishii, Kornél Pál, Kornel Lesinski, 上野 康平 (UENO, Kouhei), Kris Northfield, Kristof Zelechovski, Krzysztof Maczyński, 黒澤剛志 (Kurosawa Takeshi), Kyle Barnhart, Kyle Hofmann, Kyle Huey, Léonard Bouchet, Léonie Watson, Lachlan Hunt, Larry Masinter, Larry Page, Lars Gunther, Lars Solberg, Laura Carlson, Laura Granka, Laura L. Carlson, Laura Wisewell, Laurens Holst, Lawrence Forooghian, Lee Kowalkowski, Leif Halvard Silli, Leif Kornstaedt, Lenny Domnitser, Leonard Rosenthol, Leons Petrazickis, Liviu Tinta, Lobotom Dysmon, Logan, Logan Moore, Loune, Lucas Gadani, Łukasz Pilorz, Luke Kenneth Casson Leighton, Luke Warlow, Luke Wilde, Maciej Stachowiak, Magne Andersson, Magnus Kristiansen, Maik Merten, Majid Valipour, Malcolm Rowe, Manish Goregaokar, Manish Tripathi, Manuel Martinez-Almeida, Manuel Rego Casasnovas, Marc Hoyois, Marc-André Choquette, Marc-André Lafortune, Marco Zehe, Marcus Bointon, Marcus Otterström, Marijn Kruisselbrink, Mark Amery, Mark Birbeck, Mark Davis, Mark Green, Mark Miller, Mark Nottingham, Mark Pilgrim, Mark Rogers, Mark Rowe, Mark Schenk, Mark Vickers, Mark Wilton-Jones, Markus Cadonau, Markus Stange, Martijn van der Ven, Martijn Wargers, Martin Atkins, Martin Chaov, Martin Dürst, Martin Honnen, Martin Janecke, Martin Kutschker, Martin Nilsson, Martin Thomson, Masataka Yakura, Masatoshi Kimura, Mason Freed, Mason Mize, Mathias Bynens, Mathieu Henri, Matias Larsson, Matt Brubeck, Matt Di Pasquale, Matt Falkenhagen, Matt Giuca, Matt Harding, Matt Schmidt, Matt Wright, Matthew Gaudet, Matthew Gregan, Matthew Mastracci, Matthew Noorenberghe, Matthew Raymond, Matthew Thomas, Matthew Tylee Atkinson, Mattias Waldau, Max Romantschuk, Maxim Tsoy, Mayeul Cantan, Menachem Salomon, Menno van Slooten, Micah Dubinko, Micah Nerren, Michael 'Ratt' Iannarelli, Michael A. Nachbaur, Michael A. Puls II, Michael Carter, Michael Daskalov, Michael Day, Michael Dyck, Michael Enright, Michael Gratton, Michael Kohler, Michael McKelvey, Michael Nordman, Michael Powers, Michael Rakowski, Michael(tm) Smith, Michael Walmsley, Michal Zalewski, Michel Buffa, Michel Fortin, Michelangelo De Simone, Michiel van der Blonk, Miguel Casas-Sanchez, Mihai Şucan, Mihai Parparita, Mike Brown, Mike Dierken, Mike Dixon, Mike Hearn, Mike Pennisi, Mike Schinkel, Mike Shaver, Mikko Rantalainen, Mingye Wang, Mirko Brodesser, Mohamed Zergaoui, Mohammad Al Houssami, Mohammad Reza Zakerinasab, Momdo Nakamura, Morten Stenshorne, Mounir Lamouri, Ms2ger, mtrootyy, 邱慕安 (Mu-An Chiou), Mukilan Thiyagarajan, Mustaq Ahmed, Myles Borins, Nadia Heninger, Nate Chapin, NARUSE Yui, Navid Zolghadr, Neil Deakin, Neil Rashbrook, Neil Soiffer, Nereida Rondon, networkException, Nicholas Shanks, Nicholas Stimpson, Nicholas Zakas, Nickolay Ponomarev, Nicolas Gallagher, Nicolas Pena Moreno, Nicolò Ribaudo, Nidhi Jaju, Nikki Bee, Niklas Gögge, Nina Satragno, Noah Mendelsohn, Noah Slater, Noam Rosenthal, Noel Gordon, Nolan Waite, NoozNooz42, Norbert Lindenberg, Oisín Nolan, Ojan Vafai, Olaf Hoffmann, Olav Junker Kjær, Oldřich Vetešník, Oli Studholme, Oliver Hunt, Oliver Rigby, Olivia (Xiaoni) Lai, Olivier Gendrin, Olli Pettay, Ondřej Žára, Ori Avtalion, Oriol Brufau, oSand, Pablo Flouret, Patrick Dark, Patrick Garies, Patrick H. Lauke, Patrik Persson, Paul Adenot, Paul Lewis, Paul Norman, Per-Erik Brodin, 一丝 (percyley), Perry Smith, Peter Beverloo, Peter Karlsson, Peter Kasting, Peter Moulder, Peter Occil, Peter Stark, Peter Van der Beken, Peter van der Zee, Peter-Paul Koch, Phil Pickering, Philip Ahlberg, Philip Brembeck, Philip Taylor, Philip TAYLOR, Philippe De Ryck, Pierre-Arnaud Allumé, Pierre-Marie Dartus, Pierre-Yves Gérardy, Piers Wombwell, Pooja Sanklecha, Prashant Hiremath, Prashanth Chandra, Prateek Rungta, Pravir Gupta, Prayag Verma, 李普君 (Pujun Li), Rachid Finge, Rafael Weinstein, Rafał Miłecki, Rahul Purohit, Raj Doshi, Rajas Moonka, Rakina Zata Amni, Ralf Stoltze, Ralph Giles, Raphael Champeimont, Rebecca Star, Remci Mizkur, Remco, Remy Sharp, Rene Saarsoo, Rene Stach, Ric Hardacre, Rich Clark, Rich Doughty, Richa Rupela, Richard Gibson, Richard Ishida, Ricky Mondello, Rigo Wenning, Rikkert Koppes, Rimantas Liubertas, Riona Macnamara, Rob Buis, Rob Ennals, Rob Jellinghaus, Rob S, Rob Smith, Robert Blaut, Robert Collins, Robert Hogan, Robert Kieffer, Robert Linder, Robert Millan, Robert O'Callahan, Robert Sayre, Robin Berjon, Robin Schaufler, Rodger Combs, Roland Steiner, Roma Matusevich, Romain Deltour, Roman Ivanov, Roy Fielding, Rune Lillesveen, Russell Bicknell, Ruud Steltenpool, Ryan King, Ryan Landay, Ryan Sleevi, Ryo Kajiwara, Ryo Kato, Ryosuke Niwa, S. Mike Dierken, Salvatore Loreto, Sam Dutton, Sam Kuper, Sam Ruby, Sam Sneddon, Sam Weinig, Samikshya Chand, Samuel Bronson, Samy Kamkar, Sander van Lambalgen, Sanjoy Pal, Sanket Joshi, Sarah Gebauer, Sarven Capadisli, Satrujit Behera, Sayan Sivakumaran, Schalk Neethling, Scott Beardsley, Scott González, Scott Hess, Scott Miles, Scott O'Hara, Sean B. Palmer, Sean Feng, Sean Fraser, Sean Hayes, Sean Hogan, Sean Knapp, Sebastian Markbåge, Sebastian Schnitzenbaumer, Sendil Kumar N, Seth Call, Seth Dillingham, Shannon Moeller, Shanti Rao, Shaun Inman, Shiino Yuki, 贺师俊 (HE Shi-Jun), Shiki Okasaka, Shivani Sharma, shreyateeza, Shubheksha Jalan, Sidak Singh Aulakh, Sierk Bornemann, Sigbjørn Finne, Sigbjørn Vik, Silver Ghost, Silvia Pfeiffer, Šime Vidas, Simon Fraser, Simon Montagu, Simon Sapin, Yu Han, Simon Spiegel, Simon Wülker, skeww, Smylers, Srirama Chandra Sekhar Mogali, Stanton McCandlish, stasoid, Stefan Håkansson, Stefan Haustein, Stefan Santesson, Stefan Schumacher, Ştefan Vargyas, Stefan Weiss, Steffen Meschkat, Stephen Ma, Stephen Stewart, Stephen White, Steve Comstock, Steve Faulkner, Steve Fink, Steve Orvell, Steve Runyon, Steven Bennett, Steven Bingler, Steven Garrity, Steven Tate, Stewart Brodie, Stuart Ballard, Stuart Langridge, Stuart Parmenter, Subramanian Peruvemba, Sudhanshu Jaiswal, sudokus999, Sunava Dutta, Surma, Susan Borgrink, Susan Lesch, Sylvain Pasche, T.J. Crowder, Tab Atkins-Bittner, Taiju Tsuiki, Takashi Toyoshima, Takayoshi Kochi, Takeshi Yoshino, Tantek Çelik, 田村健人 (Kent TAMURA), Tawanda Moyo, Taylor Hunt, Ted Mielczarek, Terence Eden, Terrence Wood, Tetsuharu OHZEKI, Theresa O'Connor, Thijs van der Vossen, Thomas Broyer, Thomas Koetter, Thomas O'Connor, Tim Altman, Tim Dresser, Tim Johansson, Tim Nguyen, Tim Perry, Tim van der Lippe, TJ VanToll, Tobias Schneider, Tobie Langel, Toby Inkster, Todd Moody, Tom Baker, Tom Pike, Tom Schuster, Tom ten Thij, Tomasz Jakut, Tomek Wytrębowicz, Tommy Thorsen, Tony Ross, Tooru Fujisawa, Toru Kobayashi, Traian Captan, Travis Leithead, Trevor Rowbotham, Trevor Saunders, Trey Eckels, triple-underscore, Tristan Fraipont, 保呂 毅 (Tsuyoshi Horo), Tyler Close, Valentin Gosu, Vardhan Gupta, Vas Sudanagunta, Veli Şenol, Victor Carbune, Victor Costan, Vipul Snehadeep Chawathe, Vitya Muhachev, Vlad Levin, Vladimir Katardjiev, Vladimir Vukićević, Vyacheslav Aristov, voracity, Walter Steiner, Wakaba, Wayne Carr, Wayne Pollock, Wellington Fernando de Macedo, Wenson Hsieh, Weston Ruter, Wilhelm Joys Andersen, Will Levine, Will Ray, William Chen, William Swanson, Willy Martin Aguirre Rodriguez, Wladimir Palant, Wojciech Mach, Wolfram Kriesing, Xan Gregg, xenotheme, XhmikosR, Xida Chen, Xidorn Quan, Xue Fuqiao, Yang Chen, Yao Xiao, Yash Handa, Yay295, Ye-Kui Wang, Yehuda Katz, Yi Xu, Yi-An Huang, Yngve Nysaeter Pettersen, Yoav Weiss, Yonathan Randolph, Yu Huojiang, Yuki Okushi, Yury Delendik, 平野裕 (Yutaka Hirano), Yuzo Fujishima, 西條柚 (Yuzu Saijo), Zhenbin Xu, 张智强 (Zhiqiang Zhang), Zoltan Herczeg, Zyachel, and Øistein E. Andersen, 에게 감사의 말을 전합니다. 이들의 크고 작은 유용한 의견들이 수년간 이 명세서의 변경으로 이어졌습니다.
또한 HTML에 대해 블로그, 공개 메일링 리스트 또는 포럼에 게시한 모든 분들께 감사드립니다. 특히 다양한 W3C HTML WG 리스트와 다양한 WHATWG 리스트에 기여해 주신 분들께 감사드립니다.
Safari에서 canvas
의 첫 번째 구현을 만들어 주신
Richard Williamson에게 특별히 감사드립니다. 이를 기반으로 캔버스 기능이 설계되었습니다.
특히 이벤트 기반의 드래그 앤 드롭 메커니즘, contenteditable
및 기타 기능을
처음으로 널리 배포한 Windows Internet Explorer 브라우저의 Microsoft 직원들에게도 특별히 감사의 말씀을 드립니다.
특히 adoption agency 알고리즘의 오류 있는 구현을 만든 David Hyatt에게 특별히 감사드리며, 편집자가 이를 역설계하고 수정하여 파싱 섹션에 사용하기 전에 많은 노력이 필요했습니다. 또한 그에게 10,000달러를 특별히 감사드립니다.
마이크로데이터 사용성 연구에 참여한 분들께 감사드리며, 그들의 실수가 마이크로데이터 기능을 설계하는 데 있어 가이드가 되었습니다.
명세서에 사용된 예제들에 영감을 준 많은 출처들에도 감사드립니다.
또한 Microsoft 블로깅 커뮤니티에서 제공한 아이디어들, W3C 웹 애플리케이션 및 복합 문서 워크숍 참석자들, #mrt 팀, #mrt.no 팀, #whatwg 팀, 그리고 Pillar와 Hedral의 아이디어와 지원에도 감사드립니다.
이 명세서의 PDF 버전을 생성해 주신 Igor Zhbanov에게도 감사드립니다.
특히 RICG에게 picture
요소 및 관련 기능을 개발해 주신 것에
대해 감사드립니다. 특히 Adrian Bateman, Bruce Lawson, David Newton, Ilya Grigorik, John Schoenick, Leon de Rijke, Mat
Marquis, Marcos Cáceres, Tab Atkins, Theresa O'Connor, 그리고 Yoav Weiss의 기여에 감사드립니다.
WPWG가 커스텀 엘리먼트 기능을 개발하는 데 기여해 주신 것에 대해 특별히 감사드립니다. 특히 XBL 사양에 대한 영향력을 행사한 David Hyatt와 Ian Hickson, 커스텀 엘리먼트 사양의 초안을 작성한 Dimitri Glazkov, 그리고 기여해 주신 Alex Komoroske, Alex Russell, Andres Rios, Boris Zbarsky, Brian Kardell, Daniel Buchner, Dominic Cooney, Erik Arvidsson, Elliott Sprehn, Hajime Morrita, Hayato Ito, Jan Miksovsky, Jonas Sicking, Olli Pettay, Rafael Weinstein, Roland Steiner, Ryosuke Niwa, Scott Miles, Steve Faulkner, Steve Orvell, Tab Atkins, Theresa O'Connor, Tim Perry, William Chen께 감사드립니다.
CSSWG가 워크렛을 개발해 주신 것에 대해 특별히 감사드립니다. 특히 원래 워크렛 사양의 편집자로 일해주신 Ian Kilpatrick께 감사드립니다.
2003년부터 약 10년 동안, 이 표준은 거의 전적으로 Ian Hickson(Google, ian@hixie.ch)에 의해 작성되었습니다.
2015년부터 편집 그룹이 확장되었습니다. 현재는 Anne van Kesteren (Apple, annevk@annevk.nl), Domenic Denicola (Google, d@domenic.me), Dominic Farolino (Google, domfarolino@gmail.com), Philip Jägenstedt (Google, philip@foolip.org), 그리고 Simon Pieters (Mozilla, zcorpan@gmail.com)가 유지 관리하고 있습니다.
소개에 사용된 이미지는 사진을 기반으로 하였으며, 사진 제공자는 Wonderlane입니다. (CC BY 2.0)
포함된 콘텐츠 소개에 사용된 늑대 이미지는 사진을 기반으로 하였으며, 사진 제공자는 Barry O'Neill입니다. (퍼블릭 도메인)
캔버스 데모에 사용된 블루 로봇 플레이어 스프라이트는 작품을 기반으로 하였으며, 작품 제공자는 JohnColburn입니다. (CC BY-SA 3.0)
FIRST Robotics Competition 2013 Silicon Valley Regional에서 타워를 오르는 로봇 148의 사진은 작품을 기반으로 하였으며, 작품 제공자는 Lenore Edman입니다. (CC BY 2.0)
<flag-icon>
예제는
커스텀 엘리먼트에서 영감을 얻었습니다.
제공자는 Steven
Skelton입니다.
(MIT)
picture
요소 및 관련 기능의
일부 수정 기록은
ResponsiveImagesCG/picture-element
리포지토리에서 확인할 수 있으며, 해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
theme-color
메타데이터 이름의
일부 수정 기록은
whatwg/meta-theme-color
리포지토리에서 확인할 수 있으며, 해당 리포지토리는
CC0 하에 제공됩니다.
커스텀 엘리먼트 기능의
일부 수정 기록은
w3c/webcomponents
리포지토리에서 확인할 수 있으며,
해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
innerText
게터 및 세터의
일부 수정 기록은
rocallahan/innerText-spec
리포지토리에서 확인할 수
있으며,
해당 리포지토리는
CC0 하에 제공됩니다.
워크렛 기능의
일부 수정 기록은
w3c/css-houdini-drafts
리포지토리에서 확인할 수 있으며,
해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
import maps 기능의
일부 수정 기록은
WICG/import-maps
리포지토리에서 확인할 수 있으며,
해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
navigation API 기능의
일부 수정 기록은
WICG/navigation-api
리포지토리에서 확인할 수 있으며,
해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
Close requests and
close watchers
섹션의 일부 수정 기록은
WICG/close-watcher
리포지토리에서 확인할 수 있으며,
해당 리포지토리는
W3C 소프트웨어 및
문서 라이선스 하에 제공됩니다.
저작권 © WHATWG (Apple, Google, Mozilla, Microsoft). 이 작업은 크리에이티브 커먼즈 저작자표시 4.0 국제 라이선스 하에 라이선스가 부여됩니다. 소스 코드에 통합된 일부는 BSD 3-Clause License 하에 라이선스가 부여됩니다.
이것은 현행 표준입니다. 특허 검토 버전에 관심이 있는 분들은 현행 표준 검토 초안을 확인하시기 바랍니다.