HTML 클립보드 형식

아티클
07/01/2023

클립보드를 통해 HTML 텍스트를 전송하기 위한 요구 사항은 시나리오에 따라 다릅니다. 이 문서에서는 HTML 문서의 조각 잘라내기 및 붙여넣기와 관련이 있습니다. 클립보드를 통해 전체 HTML 문서를 전송하기 위한 요구 사항이 있을 수 있습니다. 그러나 이 문서는 선택한 HTML 텍스트의 조각을 전송해야 하는 요구 사항에 따라 달라집니다. 따라서 전체 HTML 문서를 클립보드에 복사해야 하는 메서드가 너무 많은 것으로 간주됩니다.

클립보드 형식을 CF_HTML 사용하면 원시 HTML 텍스트 조각과 해당 컨텍스트(즉, 외부 HTML)를 ASCII로 클립보드에 저장할 수 있습니다. 이렇게 하면 앞의 모든 주변 태그로 구성된 HTML 조각의 컨텍스트를 애플리케이션에서 검사하여 HTML 조각의 주변 태그를 해당 특성으로 기록할 수 있습니다. 이러한 조각을 해석하는 방법을 결정하는 것은 애플리케이션에 달려 있지만 IE4/MSHTML 구현을 기반으로 하는 몇 가지 기본 지침이 여기에 포함되어 있습니다.

클립보드의 공식 이름(에서 RegisterClipboardFormat사용하는 문자열)은 "HTML Format"입니다.

Description

CF_HTML 는 항상 UTF-8 인코딩을 사용하지만 텍스트 클립보드 형식입니다. 여기서 UTF-8을 사용하는 것은 Windows API가 텍스트 문자열, 특히 사람이 읽을 수 있는(즉, 지역화 가능한) 문자열을 나타내는 데 UTF-16을 사용하는 일반적인 규칙에 대한 예외입니다.

다음과 같이 의사-Backus-Naur 형식으로 클립보드의 CF_HTML 일반 레이아웃 또는 구문을 설명할 수 있습니다.

참고

이 문법은 비표범**입니다.

<cf-html>                ::= <description-header> <context>
<context>                ::= [<preceding-context>] <fragment> [<trailing-context>]

<description-header>     ::= "Version:" <version> <br> ( <header-offset-keyword> ":" <header-offset-value> <br> )*
<header-offset-keyword>  ::= "StartHTML" | "EndHTML" | "StartFragment" | "EndFragment" | "StartSelection" | "EndSelection"
<header-offset-value>    ::= { Base 10 (decimal) integer string with optional _multiple_ leading zero digits (see "Offset syntax" below) }
<version>                ::= "0.9" | "1.0"
<fragment>               ::= <fragment-start-comment> <fragment-text> <fragment-end-comment>
<fragment-start-comment> ::= "<!--StartFragment -->"
<fragment-end-comment>   ::= "<!--EndFragment -->"
<preceding-context>      ::= { Arbitrary HTML }
<trailing-context>       ::= { Arbitrary HTML }
<fragment-text>          ::= { Arbitrary HTML }
<br>                     ::= "\r" | "\n" | "\r\n"

설명 헤더 및 오프셋

설명 헤더에는 컨텍스트와 조각이 시작되고 끝나는 위치를 나타내는 클립보드 버전 번호와 오프셋이 포함됩니다. 설명은 ASCII 텍스트 키워드와 문자열, 콜론(:)으로 구분된 목록입니다.

Version: 클립보드의 vv 버전 번호입니다. 시작 버전은 입니다 Version:0.9. Windows 10 20H2 현재는 입니다Version:1.0.
StartHTML: 클립보드 시작부터 컨텍스트 시작까지 또는 컨텍스트 -1 가 없는 경우 오프셋(바이트)입니다.
EndHTML: 클립보드의 시작부터 컨텍스트 끝까지 또는 컨텍스트 -1 가 없는 경우 오프셋(바이트)입니다.
StartFragment: 클립보드의 시작부터 조각의 시작 부분까지 오프셋(바이트)입니다.
EndFragment: 클립보드의 시작부터 조각 끝까지 오프셋(바이트)입니다.
StartSelection: 선택 사항입니다. 클립보드의 시작부터 선택 영역의 시작까지 오프셋(바이트)입니다.
EndSelection: 선택 사항입니다. 클립보드의 시작부터 선택 영역 끝까지 오프셋(바이트)입니다.

및 EndSelection 키워드는 StartSelection 선택 사항이며 애플리케이션에서 이 정보를 생성하지 않으려면 둘 다 생략해야 합니다.

예를 들어 HTML이 CF_HTML 오프셋에서 StartHTML 시작되고 나중에 여러 StartFragmentEndFragment 쌍을 추가하여 연속되지 않은 조각 선택을 지원하기 때문에 클립보드 형식의 향후 수정 버전이 헤더를 확장할 수 있습니다.

오프셋 구문

바이트 오프셋을 생성하는 프로그램의 편의를 위해 오프셋 값은 필요에 따라 임의의 숫자 0으로 왼쪽 패딩될 수 있습니다 '0'. 그 이유는 오프셋에 대해 HTML을 스니핑하는 프로그램이 각 키워드(keyword)(예: )에 대한 출력 버퍼에 10(10) 0을 쓸 수 있기 때문입니다StartHTML: 0000000000. 나중에 정확한 StartHTML 오프셋(예: 71)이 알려지면 프로그램에서 버퍼에서 "71"(예: 결과 StartHTML: 0000000071)으로 맨 오른쪽 0을 덮어쓸 수 있습니다.

클립보드에서 지원하는 유일한 문자 집합은 유니코드(UTF-8)입니다. UTF-8 및 ASCII의 첫 번째 문자가 일치하므로 설명은 항상 ASCII이지만 컨텍스트의 바이트(부터 StartHTML시작)는 UTF-8로 인코딩된 다른 문자를 사용할 수 있습니다.

클립보드 형식 헤더(  위)의 줄 끝은 CRLF(Windows), LF(Unix) 또는 고독한 CR(고풍스러운)으로 표시될 수 있습니다.

조각, 선택 영역 및 해당 컨텍스트

요소	설명 헤더	시작 및 끝 문자 위치에 유효한 HTML이 필요합니다.
Context	`StartHTML` 및 `EndHTML`	Yes
Fragment	`StartFragment` 및 `EndFragment`	Yes
선택 영역	`StartSelection` 및 `EndSelection`	No

Context

컨텍스트는 유효하고 완전한 HTML 문서입니다. 사용자가 선택한 원본 HTML 문서 전체가 그대로 전달되는 것은 아닙니다. 반대로 최소한의 형식의 HTML 문서일 수 있습니다.

이 컨텍스트 에는 조각 과 앞의 모든 주변 태그(시작 및 끝 태그, 앞의 주변 태그는 HTML 노드까지 조각의 모든 부모 노드를 나타낸다)가 포함됩니다. 위의 예제 문서에는 및 <title> 요소를 사용할 <base href=""> 수 있는 완전한 HTML <head> 요소가 있습니다. 예를 들어 이 요소를 삽입하여 이 추가 정보를 가져올 수 있습니다. HTML 조각을 클립보드에 복사하는 애플리케이션은 이러한 요소가 아직 없는 경우 컨텍스트에 포함할 요소를 만들 <base href=""> 도록 선택할 수 있습니다. 이렇게 하면 HTML 조각의 절대 URI가 아닌 URI를 확인할 수 있습니다.

HTML 조각의 기본 붙여넣기를 위한 충분한 정보가 조각에 포함되어 있으므로 컨텍스트 는 선택 사항입니다. 컨텍스트가 저장되지 않은 경우 조각은 및 StartHTML=EndHTML=-1만 저장됩니다.

Fragment

조각(<fragment-text>위)에는 유효한 HTML 조각이 포함되어 있습니다.

유효한 HTML 조각은 단일 외부 HTML 요소로 구성됩니다. 이 요소는 올바르게 중첩된 경우 하위 HTML 요소를 포함할 수 있습니다. 예를 들어 조각은 3  개의 요소를 포함하는 단일 <div> 요소일 수 있습니다. 요소(요소)가 블록 수준 요소를 자식으로 포함할 수 없으므로  세  개의 요소가 포함된 요소로 구성된  조각은 유효하지 않습니다.

따라서 조각은 사용자가 텍스트를 선택한 화면의 더 큰 영역을 효과적으로 나타냅니다(예: 복사). 선택 영역에는 선택한 텍스트와 선택한 텍스트 내에 끝 태그가 있는 요소의 여는 태그와 특성, 포함된 모든 시작 태그의 조각 끝에 있는 끝 태그가 포함됩니다. HTML 조각을 기본으로 붙여넣는 데 필요한 모든 정보입니다.

조각 앞에 HTML 주석  이 표시되고 조각이 시작되고 끝나는 위치를 나타내야 합니다. 이러한 HTML 주석은 각 주석 자체 내에 공백 문자가 없는 그대로 사용해야 합니다. 따라서 조각의 시작과 끝은 이러한 주석의 존재와 및 EndFragment 헤더로 StartFragment 표시됩니다. 도구는 이 정보를 생성해야 합니다. 이 중복성은 의도적인 것이며 조각의 시작 부분(바이트 수)을 찾아 HTML 트리에서 직접 조각의 위치를 표시할 수 있도록 도입되었습니다.

선택 영역

기본 붙여넣기를 위해 조각에 충분한 정보가 포함되어 있으므로 선택 항목은 선택 사항입니다. 선택 영역이 저장되지 않은 경우 및 EndSelection 는 모두 StartSelection 헤더에 저장되지 않습니다.

있는 경우 선택 영역은 사용자가 선택한 정확한 텍스트 범위입니다( 조각 내). 이렇게 하면 올바른 형식의 균형 잡힌 시작 및 끝 태그와 끝 태그 없이 정확히 선택된 텍스트를 표시하여 조각에 더 많은 정보가 추가됩니다.

선택 영역은 지정된 요소에서 시작하여 후속 요소 또는 상위 요소에서 끝날 수 있는 텍스트 실행을 나타낼 수 있습니다. 따라서 HTML을 사용하여 텍스트 선택을 나타낼 수 없습니다.

시나리오

다음 시나리오에서는 IE4/MSHTML HTML 편집기가 HTML 잘라내기 및 붙여넣기를 처리하는 방법을 설명합니다. 다른 애플리케이션은 이러한 시나리오를 따르거나 따르지 않을 수 있습니다. 여기에 설명된 클립보드 형식은 애플리케이션이 작동하도록 선택하는 방법에 대한 유연성을 허용하기 위한 것입니다. (이러한 시나리오는 겹치는 태그가 없는 좋은 HTML만 표시합니다.)

시나리오 1 - HTML의 간단한 조각

다음 HTML 텍스트를 가정합니다.

<body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body>

다음과 같이 표시됩니다.

이것은 정상입니다. 이것은 굵게입니다.이것은 굵은 기울임꼴입니다.기울임꼴입니다.

사용자가 위의 HTML 텍스트를 MSHTML 기반 애플리케이션(MSHTML, 즉 Trident라고도 하는 인터넷 Explorer 엔진)에 로드한 경우 MSHTML은 다음과 같이 HTML의 부분 문자열 복사를 처리합니다.

사용자는 선행 또는 후행 공백이 없는 텍스트를 선택합니다( 예: 위의 예제에서 "굵게 기울임꼴이 굵게 표시되었습니다.)."
텍스트를 클립보드에 복사하려면 사용자가 복사 명령 단추를 클릭합니다.

MSHTML은 다음과 같이 이 HTML 텍스트를 Windows 클립보드에 배치합니다.

Version:1.0
StartHTML:0121
EndHTML:0272
StartFragment:0006
EndFragment:0106
StartSelection:0180
EndSelection:0225
<html><!--StartFragment--><body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body><!--EndFragment--></html>

시나리오 2 - HTML의 테이블 조각

다음 HTML 텍스트를 가정합니다.

<BODY><TABLE BORDER><TR><TH ROWSPAN=2>Head1</TH><TD>Item 1</TD><TD>Item 2</TD><TD>Item 3</TD><TD>Item 4</TD></TR><TR><TD>Item 5</TD><TD>Item 6</TD><TD>Item 7</TD><TD>Item 8</TD></TR><TR><TH>Head2</TH><TD>Item 9</TD><TD>Item 10</TD><TD>Item 11</TD><TD>Item 12</TD></TR></TABLE></BODY>

다음과 같이 표시됩니다.

헤드 1 항목 1 항목 2 항목 3 항목 4

항목 5 항목 6 항목 7 항목 8

헤드 2 항목 9 항목 10 항목 11 항목 12

헤드 1	항목 1	항목 2	항목 3	항목 4
항목 5	항목 6	항목 7	항목 8
헤드 2	항목 9	항목 10	항목 11	항목 12

MSHTML이 테이블에서 HTML의 부분 문자열 복사를 처리하는 방법

사용자가 마우스를 사용하여 표 셀 항목 6, 항목 7, 항목 10 및 항목 11을 포함하는 텍스트를 선택할 때 그런 다음 이 선택이 클립보드에 복사됩니다.

다음은 클립보드에 표시되는 내용입니다(IE4/MSHTML의 해석입니다). 선명도를 위해 줄 바꿈이 추가되었습니다.

<!DOCTYPE
<HTML>
<BODY>
<TABLE BORDER>
<!--StartFragment-->
  **<TR>
    <TD>Item 6</TD>
    <TD>Item 7</TD>
  </TR>
  <TR>
    <TD>Item 10</TD>
    <TD>Item 11</TD>
  </TR>**
<!--EndFragment-->
</TABLE>
</BODY>
</HTML>

및 EndSelection로 구분된 StartSelection 선택 영역은 굵게 표시됩니다.

시나리오 3 - 정렬된 목록 `<ol>` 의 조각을 일반 텍스트에 붙여넣기

다음 HTML 텍스트를 가정합니다.

<BODY><OL TYPE="a"><LI>Item 1<LI>Item 2<LI>Item 3<LI>Item 4<LI>Item 5<LI>Item 6</OL></BODY>

다음과 같이 표시됩니다.

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

MSHTML이 HTML 번호 매기기 목록 항목의 부분 문자열 복사를 처리하는 방법

사용자는 항목 3의 시작 부분부터 항목 4, 항목 5의 끝까지 텍스트를 선택합니다. 사용자가 복사 명령을 호출합니다.
다음 HTML은 클립보드에 있습니다(선명도를 위해 줄 바꿈 추가). 주석의  정확한 위치는 사용자가 브라우저의 텍스트 선택 논리를 처리하는 방법에 따라 달라집니다.

<html>
<body>
<ol>
<!-- StartFragment-->
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<!-- EndFragment-->
</ol>
</body>
</html>

이 조각을 빈 문서에 붙여넣으면 다음 HTML이 만들어집니다.

<body>
<ol>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>

다음과 같이 표시됩니다.

항목 3

항목 4

항목 5

시나리오 5 - 부분적으로 선택된 지역 붙여넣기

다음 HTML 텍스트를 가정합니다.

<p>IE4/MSHTML is a WYSIWYG Editor that supports:</p>
<ul><li>Cut<li>Copy<li>Paste</ul>
<p>This is a Great Tool!</p>

다음과 같이 표시됩니다.

IE4/MSHTML은 다음을 지원하는 WYSIWYG 편집기입니다.

잘라내기

복사

붙여넣기

이것은 훌륭한 도구입니다!

MSHTML이 HTML 목록 항목의 부분 문자열 복사를 처리하는 방법

사용자는 마우스를 사용하여 텍스트 선택 영역을 끕니다(예: "를 지원하는 WYSIWYG 편집기: 경찰 잘라내기"). 일반 텍스트인 것처럼 해당 선택은 다음과 같이 끊어진 HTML 조각처럼 보입니다.

WYSIWYG Editor, which supports:</p>
<ul>
  <li>Cut</li>
  <li>Cop

사용자가 명령 복사 단추를 누르면 클립보드가 다음과 같이 표시됩니다(선명도를 위해 줄 바꿈이 추가되었습니다. 굵은 텍스트는 사용자가 실제로 선택한 내용을 나타냅니다.)

<html>
<body>
<!-- StartFragment-->
<p>WYSIWYG Editor, which supports</p>
<ul>
	<li>Cut</li>
	<li>Cop</li>
</ul>
<!-- EndFragment-->
</body>
</html>

다음과 같은 부분을 확인하세요.

"WYSIWYG" 이전의 텍스트가 제거되었습니다.
목록 항목(<li>Paste</li>)은 사용자가 선택한 항목이 없으므로 제거되었습니다.
"복사"의 "y"가 제거되었습니다.

추가 정보

클립보드

다음을 통해 공유

HTML 클립보드 형식

Description

설명 헤더 및 오프셋

오프셋 구문

조각, 선택 영역 및 해당 컨텍스트

Context

Fragment

선택 영역

시나리오

시나리오 1 - HTML의 간단한 조각

시나리오 2 - HTML의 테이블 조각

MSHTML이 테이블에서 HTML의 부분 문자열 복사를 처리하는 방법

시나리오 3 - 정렬된 목록 `<ol>` 의 조각을 일반 텍스트에 붙여넣기

MSHTML이 HTML 번호 매기기 목록 항목의 부분 문자열 복사를 처리하는 방법

시나리오 5 - 부분적으로 선택된 지역 붙여넣기

MSHTML이 HTML 목록 항목의 부분 문자열 복사를 처리하는 방법

추가 정보

피드백

추가 리소스

다음을 통해 공유

HTML 클립보드 형식

Description

설명 헤더 및 오프셋

오프셋 구문

조각, 선택 영역 및 해당 컨텍스트

Context

Fragment

선택 영역

시나리오

시나리오 1 - HTML의 간단한 조각

시나리오 2 - HTML의 테이블 조각

MSHTML이 테이블에서 HTML의 부분 문자열 복사를 처리하는 방법

시나리오 3 - 정렬된 목록 <ol> 의 조각을 일반 텍스트에 붙여넣기

MSHTML이 HTML 번호 매기기 목록 항목의 부분 문자열 복사를 처리하는 방법

시나리오 5 - 부분적으로 선택된 지역 붙여넣기

MSHTML이 HTML 목록 항목의 부분 문자열 복사를 처리하는 방법

추가 정보

피드백

추가 리소스

시나리오 3 - 정렬된 목록 `<ol>` 의 조각을 일반 텍스트에 붙여넣기