몰입형 리더용 HTML 콘텐츠를 준비하는 방법
이 문서에서는 HTML을 구성하고 콘텐츠를 검색하여 Immersive Reader 애플리케이션에서 사용할 수 있는 방법을 보여 줍니다.
HTML 콘텐츠 준비
렌더링하려는 콘텐츠를 컨테이너 요소 내의 몰입형 리더에 배치합니다. 컨테이너 요소에 고유한 id가 있는지 확인합니다. Immersive Reader가 기본 HTML 요소를 지원하는 방식에 대해 자세히 알아보려면 SDK 참조를 확인합니다.
<div id='immersive-reader-content'>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strike>Strikethrough</strike>
<code>Code</code>
<sup>Superscript</sup>
<sub>Subscript</sub>
<ul><li>Unordered lists</li></ul>
<ol><li>Ordered lists</li></ol>
</div>
JavaScript에서 HTML 콘텐츠 가져오기
컨테이너 요소의 id를 사용하여 JavaScript 코드에서 HTML 콘텐츠를 가져옵니다.
const htmlContent = document.getElementById('immersive-reader-content').innerHTML;
HTML 콘텐츠로 몰입형 리더 시작
ImmersiveReader.launchAsync를 호출할 때 청크의 mimeType 속성을 text/html로 설정하여 HTML 렌더링을 사용하도록 설정합니다.
const data = {
chunks: [{
content: htmlContent,
mimeType: 'text/html'
}]
};
ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, data, YOUR_OPTIONS);