4.10 {@html}로 돔에 HTML 엘리먼트 생성하기
스벨트는 데이터를 HTML로 표현하기 위한 네 가지 블록 표현식(#if, #each, #await, #key)을 제공합니다. 네 가지 방법을 사용해서 돔(DOM)에 데이터를 표현했습니다.
HTML로 된 문자열을 텍스트가 아닌 HTML 엘리먼트로 생성해서 돔에 추가하는 방법도 제공합니다. 바로 {@html 표현식}입니다.
일반적으로는 게시판의 콘텐츠를 보여주는 방법으로 사용할 수 있습니다. 간단한 예제로 확인해보겠습니다. svelte.dev 웹 사이트에서 REPL의 App.svelte을 열고 다음과 같이 작성하세요.
REPL의 App.svelte
<script>
// 게시글 형태의 JSON 정의
var post = {
title: "가장 빨리 만나는 스벨트",
content: "<span style='color:red'>스벨트</span>는 정말 <b>재미있어요</b>"
}
</script>
<div>
<h1>{post.title}</h1> <!-- 일반 출력 -->
{@html post.content} <!-- {@html} 표현식 사용하여 출력 -->
</div>