From 8e3bf4a874c598a5019a7bb0830fe3d8b1d9b5f8 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Fri, 26 Jun 2026 15:23:19 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EB=AC=BC=20HTML=20=EB=B8=94?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminEditorBlockPanel.vue    | 38 ++++++++++---
 components/admin/AdminMarkdownEditor.vue      | 13 ++---
 components/admin/AdminSlashCommandIcon.vue    |  4 +-
 .../content/ContentMarkdownRenderer.vue       | 47 +++++-----------
 components/content/ProseHtml.vue              | 54 ++++++++++++++++++
 docs/changelog.md                             |  6 ++
 docs/deploy.md                                | 10 +++-
 docs/history.md                               |  4 ++
 docs/map.md                                   |  8 ++-
 docs/spec.md                                  | 22 ++++----
 docs/update.md                                |  7 +++
 lib/markdown-block-context.js                 | 56 +++++++++----------
 lib/markdown-html-block.js                    | 35 ++++++++++++
 lib/markdown-slash-commands.js                | 24 ++++++--
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 16 files changed, 233 insertions(+), 101 deletions(-)
 create mode 100644 components/content/ProseHtml.vue
 create mode 100644 lib/markdown-html-block.js

diff --git a/components/admin/AdminEditorBlockPanel.vue b/components/admin/AdminEditorBlockPanel.vue
index 3cca685..9a1d1a8 100644
--- a/components/admin/AdminEditorBlockPanel.vue
+++ b/components/admin/AdminEditorBlockPanel.vue
@@ -114,10 +114,18 @@ const panelTitle = computed(() => {
     return '텍스트 색상'
   }
 
-  if (props.panel.kind === 'embed') {
+  if (props.panel.kind === 'html') {
     return 'HTML'
   }
 
+  if (props.panel.kind === 'link') {
+    return '링크'
+  }
+
+  if (props.panel.kind === 'iframe') {
+    return 'iframe'
+  }
+
   if (props.panel.kind === 'quote') {
     return '인용'
   }
@@ -154,8 +162,16 @@ const panelMeta = computed(() => {
     return '선택한 텍스트'
   }
 
-  if (props.panel.kind === 'embed') {
-    return 'URL·iframe'
+  if (props.panel.kind === 'html') {
+    return '사용자 HTML'
+  }
+
+  if (props.panel.kind === 'link') {
+    return 'URL 카드'
+  }
+
+  if (props.panel.kind === 'iframe') {
+    return 'sandbox iframe'
   }
 
   if (props.panel.kind === 'quote') {
@@ -252,17 +268,25 @@ const onPanelFocusOut = (event) => {
           </div>
         </template>
 
-        <template v-else-if="panel.kind === 'embed'">
+        <template v-else-if="['html', 'link', 'iframe'].includes(panel.kind)">
           <label class="admin-editor-block-panel__field grid gap-2 text-sm">
-            <span class="font-semibold text-[#394047]">HTML 코드 또는 URL</span>
+            <span class="font-semibold text-[#394047]">
+              {{ panel.kind === 'link' ? 'URL' : panel.kind === 'iframe' ? 'iframe 코드' : 'HTML 코드' }}
+            </span>
             <textarea
               class="min-h-28 resize-y rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 font-mono text-xs leading-5 text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
               :value="panel.url"
-              placeholder="https://www.youtube.com/watch?v=... 또는 <iframe src=&quot;...&quot;></iframe>"
+              :placeholder="panel.kind === 'link' ? 'https://example.com' : panel.kind === 'iframe' ? '<iframe src=&quot;https://...&quot;></iframe>' : '<table>...</table>'"
               @input="emit('update-embed-url', $event.target.value)"
             />
           </label>
-          <p class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
+          <p v-if="panel.kind === 'html'" class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
+            본문 HTML은 그대로 표시하되 script, iframe, 이벤트 속성 같은 실행성 코드는 제거합니다. iframe은 /iframe 블록을 사용합니다.
+          </p>
+          <p v-else-if="panel.kind === 'link'" class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
+            YouTube·X(트위터)·Mastodon URL은 임베드로, 그 외 외부 URL은 링크 카드로 표시합니다.
+          </p>
+          <p v-else class="admin-editor-block-panel__hint mt-3 text-xs leading-relaxed text-[#8e9cac]">
             YouTube·YouTube Shorts, X(트위터) 게시물 URL과 외부 서비스 iframe 코드를 지원합니다. iframe은 src 등 허용된 속성만 사용합니다.
           </p>
         </template>
diff --git a/components/admin/AdminMarkdownEditor.vue b/components/admin/AdminMarkdownEditor.vue
index 189f5e5..6948fcf 100644
--- a/components/admin/AdminMarkdownEditor.vue
+++ b/components/admin/AdminMarkdownEditor.vue
@@ -2800,14 +2800,14 @@ const appendImagesToActiveGallery = (images) => {
 }
 
 /**
- * 현재 HTML 블록 값을 수정한다.
- * @param {string} url - HTML 블록 값
+ * 현재 링크·iframe·HTML 블록 값을 수정한다.
+ * @param {string} url - 블록 값
  * @returns {void}
  */
 const updateActiveEmbedUrl = (url) => {
   const block = activeBlockContext.value
 
-  if (!block || block.kind !== 'embed') {
+  if (!block || !['link', 'iframe', 'html'].includes(block.kind)) {
     return
   }
 
@@ -2819,12 +2819,7 @@ const updateActiveEmbedUrl = (url) => {
     return
   }
 
-  if (trimmed.includes('\n') || /^<iframe\b/i.test(trimmed)) {
-    replaceLineRange(block.startLine, block.endLine, [':::embed', trimmed, ':::'], false)
-    return
-  }
-
-  replaceLineRange(block.startLine, block.endLine, [trimmed], false)
+  replaceLineRange(block.startLine, block.endLine, [`:::${block.kind}`, trimmed, ':::'], false)
 }
 
 /**
diff --git a/components/admin/AdminSlashCommandIcon.vue b/components/admin/AdminSlashCommandIcon.vue
index 3bbe193..b5cfff0 100644
--- a/components/admin/AdminSlashCommandIcon.vue
+++ b/components/admin/AdminSlashCommandIcon.vue
@@ -123,8 +123,8 @@ const props = defineProps({
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.8 2H3.2C1.985 2 1 2.895 1 4v16c0 1.105.985 2 2.2 2h17.6c1.215 0 2.2-.895 2.2-2V4c0-1.105-.985-2-2.2-2Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 11 12 15l-4.5-4"></path>
     </template>
 
-    <!-- embed -->
-    <template v-else-if="commandId === 'embed'">
+    <!-- embed/html/link/iframe -->
+    <template v-else-if="['html', 'link', 'iframe'].includes(commandId)">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V9.8l4.7-5.3H19c.3 0 .5.2.5.5v14zm-6-9.5L16 12l-2.5 2.8 1.1 1L18 12l-3.5-3.5-1 1zm-3 0l-1-1L6 12l3.5 3.8 1.1-1L8 12l2.5-2.5z"></path>
     </template>
 
diff --git a/components/content/ContentMarkdownRenderer.vue b/components/content/ContentMarkdownRenderer.vue
index d9ca930..781ffe5 100644
--- a/components/content/ContentMarkdownRenderer.vue
+++ b/components/content/ContentMarkdownRenderer.vue
@@ -35,9 +35,9 @@ import {
   parseCalloutOptions
 } from '../../lib/markdown-callout.js'
 import { createHeadingIdFactory } from '../../lib/markdown-toc.js'
-import { isIframeEmbedMarkup } from '../../lib/markdown-iframe-embed.js'
 import ContentMarkdownCodeBlockEditor from './ContentMarkdownCodeBlockEditor.vue'
 import ProseCodeBlock from './ProseCodeBlock.vue'
+import ProseHtml from './ProseHtml.vue'
 import ContentMarkdownCalloutEditor from './ContentMarkdownCalloutEditor.vue'
 import ContentMarkdownToggleEditor from './ContentMarkdownToggleEditor.vue'
 
@@ -253,13 +253,13 @@ const isMarkdownBlockStart = (line) => {
     trimmedLine === ':::video' ||
     trimmedLine === ':::audio' ||
     trimmedLine === ':::file' ||
-    trimmedLine === ':::embed' ||
+    trimmedLine === ':::link' ||
+    trimmedLine === ':::iframe' ||
+    trimmedLine === ':::html' ||
     trimmedLine.startsWith(':::callout') ||
     trimmedLine.startsWith(':::toggle') ||
     trimmedLine.startsWith('```') ||
     trimmedLine === '---' ||
-    isStandaloneUrlLine(trimmedLine) ||
-    isIframeEmbedMarkup(trimmedLine) ||
     /^(#{1,6})\s+(.+)$/.test(trimmedLine) ||
     trimmedLine.startsWith('> ') ||
     /^- /.test(trimmedLine) ||
@@ -689,11 +689,12 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
-    if (trimmedLine === ':::embed') {
+    if ([':::link', ':::iframe', ':::html'].includes(trimmedLine)) {
       const startLine = index
+      const blockType = trimmedLine.replace(':::', '')
       const { contentLines, endLine, nextIndex } = collectFencedLines(lines, index + 1)
       blocks.push(attachSourceRange(
-        createBlock('embed', '', null, `block-${blocks.length}`, { url: contentLines.join('\n').trim() }),
+        createBlock(blockType, '', null, `block-${blocks.length}`, { url: contentLines.join('\n').trim() }),
         startLine,
         endLine
       ))
@@ -711,28 +712,6 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
-    if (isStandaloneUrlLine(trimmedLine)) {
-      const startLine = index
-      blocks.push(attachSourceRange(
-        createBlock('embed', '', null, `block-${blocks.length}`, { url: trimmedLine }),
-        startLine,
-        startLine
-      ))
-      index += 1
-      continue
-    }
-
-    if (isIframeEmbedMarkup(trimmedLine)) {
-      const startLine = index
-      blocks.push(attachSourceRange(
-        createBlock('embed', '', null, `block-${blocks.length}`, { url: trimmedLine }),
-        startLine,
-        startLine
-      ))
-      index += 1
-      continue
-    }
-
     const image = parseImageLine(trimmedLine)
 
     if (image) {
@@ -3282,27 +3261,29 @@ onBeforeUnmount(() => {
         :size="block.meta.size"
       />
       <section
-        v-else-if="block.type === 'embed' && interactive"
+        v-else-if="['link', 'iframe', 'html'].includes(block.type) && interactive"
         class="content-markdown-renderer__embed-live group relative mb-8 rounded-[12px] outline-none transition-shadow focus-within:ring-2 focus-within:ring-[var(--site-accent)] focus-within:ring-offset-2 focus-visible:ring-2 focus-visible:ring-[var(--site-accent)] focus-visible:ring-offset-2"
         :data-source-line="block.meta.startLine"
         data-preview-card-block="true"
         tabindex="0"
         role="group"
-        aria-label="HTML 블록"
+        :aria-label="block.type === 'link' ? '링크 블록' : block.type === 'iframe' ? 'iframe 블록' : 'HTML 블록'"
         @mousedown.capture="focusPreviewCardBlock"
         @keydown="onPreviewCardKeydown($event, block)"
       >
         <button
           class="content-markdown-renderer__embed-delete content-markdown-renderer__preview-card-action absolute right-2 top-2 z-10 rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white opacity-0 shadow transition-opacity hover:bg-[#15171a] focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)] group-hover:opacity-100 group-focus-within:opacity-100"
           type="button"
-          aria-label="HTML 블록 삭제"
+          :aria-label="block.type === 'link' ? '링크 블록 삭제' : block.type === 'iframe' ? 'iframe 블록 삭제' : 'HTML 블록 삭제'"
           @click.stop="deletePreviewCardBlock(block)"
         >
           삭제
         </button>
-        <ProseEmbed :url="block.url" />
+        <ProseHtml v-if="block.type === 'html'" :html="block.url" />
+        <ProseEmbed v-else :url="block.url" />
       </section>
-      <ProseEmbed v-else-if="block.type === 'embed'" :url="block.url" />
+      <ProseHtml v-else-if="block.type === 'html'" :html="block.url" />
+      <ProseEmbed v-else-if="block.type === 'link' || block.type === 'iframe'" :url="block.url" />
       <div
         v-else-if="block.type === 'gallery'"
         class="content-markdown-renderer__gallery group relative my-8 flex flex-col gap-2 rounded-[12px] outline-none transition-shadow focus-within:ring-2 focus-within:ring-[var(--site-accent)] focus-within:ring-offset-2 focus-visible:ring-2 focus-visible:ring-[var(--site-accent)] focus-visible:ring-offset-2"
diff --git a/components/content/ProseHtml.vue b/components/content/ProseHtml.vue
new file mode 100644
index 0000000..de666cc
--- /dev/null
+++ b/components/content/ProseHtml.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { sanitizeHtmlBlock } from '../../lib/markdown-html-block.js'
+
+const props = defineProps({
+  html: {
+    type: String,
+    default: ''
+  }
+})
+
+const sanitizedHtml = computed(() => sanitizeHtmlBlock(props.html))
+</script>
+
+<template>
+  <div
+    v-if="sanitizedHtml"
+    class="prose-html prose-html-block mb-8 overflow-x-auto text-base leading-7 text-[var(--site-text)]"
+    v-html="sanitizedHtml"
+  />
+  <p v-else class="prose-html prose-html-block mb-8 text-sm font-semibold text-[var(--site-muted)]">
+    표시할 수 있는 HTML이 없습니다.
+  </p>
+</template>
+
+<style scoped>
+.prose-html :deep(table) {
+  width: 100%;
+  min-width: 520px;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.prose-html :deep(th),
+.prose-html :deep(td) {
+  border: 1px solid var(--site-line);
+  padding: 0.5rem 0.75rem;
+  vertical-align: top;
+}
+
+.prose-html :deep(th) {
+  background: color-mix(in srgb, var(--site-text) 6%, transparent);
+  font-weight: 700;
+}
+
+.prose-html :deep(p) {
+  margin-bottom: 0.625rem;
+}
+
+.prose-html :deep(a) {
+  color: var(--site-accent);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+</style>
diff --git a/docs/changelog.md b/docs/changelog.md
index 8975802..4105cde 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v1.8.1
+
+- 글쓰기 HTML 기능을 `/html`, `/link`, `/iframe`으로 분리했다.
+- `/html` 블록에서 표처럼 복잡한 HTML을 본문에 표시할 수 있게 했다.
+- 기존 URL·iframe 글은 새 블록 형식으로 수동 정리하는 기준을 배포 문서에 추가했다.
+
 ## v1.8.0
 
 - 글쓰기 라이브 모드에서 방향키로 긴 본문을 이동할 때 화면이 커서를 따라오도록 수정했다.
diff --git a/docs/deploy.md b/docs/deploy.md
index f096878..1a5362e 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드
 
-> 로컬 기준 v1.8.0에서 `npm run verify` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.8.1에서 `npm run verify` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
 
 ## 빌드 유형
 
@@ -16,6 +16,14 @@
 
 ## 로컬 개발
 
+### v1.8.1 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 게시물 글쓰기에서 `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` 블록을 삽입하는지 확인한다.
+- 표 HTML은 `:::html` 블록에 넣고, iframe 코드는 `:::iframe` 블록에 넣는다.
+- 기존에 HTML 기능으로 작성한 단독 URL은 `:::link` 블록으로, iframe HTML은 `:::iframe` 블록으로 수동 정리한다.
+- `:::html` 블록에 붙여넣은 표의 `rowspan`, `colspan`, 셀 폭·정렬이 공개 본문에서 유지되는지 확인한다.
+
 ### v1.8.0 참고
 
 - 추가 DB 마이그레이션은 없다.
diff --git a/docs/history.md b/docs/history.md
index 4cfdffe..69b3172 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-06-26 v1.8.1 — 게시물 HTML은 범용 블록으로 분리한다
+
+게시물 수가 아직 적어 기존 `:::embed` 값을 자동 변환·호환하는 코드보다 운영자가 직접 새 형식으로 고치는 편이 단순하다. 작성 기능은 `/html`, `/link`, `/iframe`으로 분리하고 저장 형식도 각각 `:::html`, `:::link`, `:::iframe`로 명확히 둔다. `/html`은 표처럼 마크다운으로 표현하기 어려운 일반 HTML을 표시하되, 게시물 본문에서 실행성 코드가 퍼지지 않도록 script, iframe, 이벤트 속성 등은 제거한다. iframe은 별도 `/iframe` 블록에서 안전 속성 기반 sandbox 렌더링을 사용한다.
+
 ## 2026-06-22 v1.7.7 — 장기 방문 통계는 일별 집계를 한 번에 합산한다
 
 Homepage에서 최근 7일·30일·6개월·1년 방문자를 선택해 볼 수 있도록 기간별 평면 필드를 제공한다. 장기 범위 추가로 쿼리 횟수가 늘지 않게 `site_analytics_daily`의 최근 365일 행을 한 번 읽고 PostgreSQL `FILTER` 집계로 각 기간을 동시에 계산한다. 6개월은 대시보드의 기간 기준과 맞춰 최근 180일로 정의하고, 개인용 Homepage의 권장 갱신 주기는 5분으로 둔다.
diff --git a/docs/map.md b/docs/map.md
index 2a7d89a..0ff5e47 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -32,8 +32,9 @@
 | lib/recommended-site-icon-url.js | 추천 사이트 아이콘 URL 우선순위(수동 썸네일 > 서버 캐시 > 외부 프록시) |
 | lib/navigation-editor-tree.js | 관리자 메뉴 UI·서버 `renumberSortOrderByTree`가 쓰는 `buildNavigationEditorTree`, 관리자 상단 네비 평면 표용 `flattenNavigationEditorWrappers` |
 | lib/markdown-content-normalizer.js | 관리자 Markdown-first 전환 후 레거시 블록 배열·객체 본문 값을 저장용 마크다운 문자열로 변환 |
-| lib/markdown-block-context.js | 관리자 Markdown textarea·라이브 편집 포커스 위치 기준 이미지·갤러리·HTML 임베드·인용·콜아웃·코드·토글 블록 설정 패널 대상 판별, 코드 fenced 블록 여닫는 펜스 쌍 판별 |
-| lib/markdown-iframe-embed.js | 게시물 본문 HTML 블록의 iframe 코드 판별과 안전 속성 추출 |
+| lib/markdown-block-context.js | 관리자 Markdown textarea·라이브 편집 포커스 위치 기준 이미지·갤러리·링크·iframe·HTML·인용·콜아웃·코드·토글 블록 설정 패널 대상 판별, 코드 fenced 블록 여닫는 펜스 쌍 판별 |
+| lib/markdown-iframe-embed.js | 게시물 본문 iframe 블록의 코드 판별과 안전 속성 추출 |
+| lib/markdown-html-block.js | 게시물 본문 HTML 블록의 실행성 태그·속성 제거 |
 | lib/markdown-callout.js | 인용 막대 색상·콜아웃 배경색 옵션, 선언 줄 파싱·직렬화 |
 | lib/brand-color.js | 사이트 브랜드 컬러 기본값·hex 검증·정규화 |
 | lib/markdown-image.js | 이미지 마크다운 직렬화·파싱, 단독 이미지 URL 판별 |
@@ -115,7 +116,7 @@
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(왼쪽 상태 텍스트·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약·멤버십·비공개 상태 저장, 발행 모달(중앙 배치), 좌우 설정 패널(작은 화면은 오른쪽 고정 오버레이), 오른쪽 `View Post` 링크, 오른쪽 하단 본문 통계(단어·문자·공백·읽기 시간·블록·이미지), 미리보기 emit·미저장 이탈 가드, 카드 썸네일을 숨기는 원본 전용 대표 이미지 선택, 대표 이미지 본문 상단 표시 토글, 추천 글 토글, 사이트 설정 기준 태그 최대 개수 제한, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 페이지 공개 상태 선택, HTML 문서 기본 모드, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입 |
 | components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함)·미디어 모달(이미지·갤러리·비디오·오디오·파일, 업로드 탭 기본·첫 순서, 업로드 완료 파일 자동 선택, 카드 썸네일 파생 파일 숨김, 업로드 중 중복 업로드·닫기 차단·로딩 표시), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·선택 텍스트 색상 컨텍스트 `block-panel` emit, 에디터 본문 `Cmd/Ctrl+Z` 히스토리와 선택 위치 복원, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭·지원 블록 밖 커서 이동 시 닫기·미디어 모달 중 유지, 인용 마지막 줄 아래 방향키 외부 문단 포커스 이동, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연 |
-| components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(선택 텍스트 색상, 이미지·갤러리·HTML·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
+| components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(선택 텍스트 색상, 이미지·갤러리·링크·iframe·HTML·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/HTML 블록, 콜아웃 Emoji on/off·이모지 프리셋·인용과 같은 배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상만 편집, 수정 화면 변경 저장 버튼 변경사항 기준 활성화) |
 | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) |
@@ -156,6 +157,7 @@
 | components/content/ProseSignup.vue | 본문 회원가입·뉴스레터 CTA 카드 |
 | components/content/ProseHeaderCard.vue | 헤더 카드 |
 | components/content/ProseEmbed.vue | 상단 외부 여백 없이 하단 여백만 두는 YouTube 영상 iframe, X/Twitter 소셜 iframe, Mastodon `/embed` iframe, 제한된 사용자 iframe HTML, 기타 `http(s)` 외부 링크 |
+| components/content/ProseHtml.vue | `:::html` 본문 HTML 렌더링, 표 기본 스타일과 실행성 HTML 제거 |
 
 ## 관리자 페이지
 
diff --git a/docs/spec.md b/docs/spec.md
index 0055abc..93fcc07 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -83,7 +83,7 @@
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
 - 표준 마크다운 표(`| 헤더 | ... |`, `| --- | ... |`)는 본문에서 가로 스크롤 가능한 HTML table로 렌더링한다. 정렬 구분선(`:---`, `:---:`, `---:`)은 각각 좌/중앙/우 정렬로 반영한다.
 - 인용문(`>`)은 왼쪽 세로 막대형 기본 스타일로 표시한다. 기본 인용 텍스트는 라이트·다크 모드 모두 사이트 본문 텍스트 색상(`--site-text`)을 따른다. 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`는 인용 막대 색상으로 반영하며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이다.
-- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 콜아웃은 제목·아이콘 표시 여부·아이콘·배경색, 코드 블록은 언어·줄번호 표시 여부, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html` 또는 `/iframe` 슬래시 명령은 외부 URL 또는 iframe HTML을 넣는 HTML 블록을 찾는다. 소스·라이브 모드 모두 `Cmd/Ctrl+K`로 링크 마크다운을 삽입한다. 에디터 되돌리기·다시 실행은 본문 값과 함께 선택 위치를 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다.
+- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 콜아웃은 제목·아이콘 표시 여부·아이콘·배경색, 코드 블록은 언어·줄번호 표시 여부, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` fenced 블록을 삽입한다. 소스·라이브 모드 모두 `Cmd/Ctrl+K`로 링크 마크다운을 삽입한다. 에디터 되돌리기·다시 실행은 본문 값과 함께 선택 위치를 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다.
 - 게시물 상세의 오른쪽 사이드바는 데스크톱에서 블로그 소개·Follow 대신 본문 H1~H3 제목 기반 목차를 최상단에 표시한다. 목차는 별도 최대 높이와 내부 스크롤을 두지 않고 전체 목록이 먼저 펼쳐지며, 왼쪽 기준선과 브랜드 컬러 활성 항목 표시선을 둔다. 목차 항목은 최소 24px 높이와 세로 중앙 정렬을 사용하며, 2줄 이상 제목에서는 항목 높이에 맞춰 활성 표시선도 함께 늘어난다. 활성 표시선은 항목의 가상 요소 배경 막대로 그려 텍스트 시작점이 밀리지 않게 한다. 목차 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 스크롤 중에는 현재 제목에 해당하는 목차 항목을 강조하고, 목차 항목이 많으면 오른쪽 사이드바 스크롤이 활성 항목을 따라간다. 본문 제목이 없으면 목차 없음 문구를 표시한다. 오른쪽 사이드바가 본문 아래로 내려가는 모바일 폭에서는 목차를 숨긴다. 게시물 상세에서는 일반 오른쪽 사이드 광고 대신 게시물 사이드 광고 코드를 목차 아래에 표시하고, 왼쪽 사이드바에는 게시물 광고를 표시하지 않는다. 게시물 상세 목차와 게시물 사이드 광고 슬롯은 하단 구분선을 표시하지 않는다.
 - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
 - 공개 회원 로그인 세션의 회원 ID가 게시물 `author_id`와 같으면 제목 우측 공유 버튼 옆에 수정 아이콘을 표시하며, 클릭 시 `/admin/posts/:id` 편집 화면을 새 탭으로 연다. 별도 관리자 세션만 있거나 비로그인 상태에서는 표시하지 않는다.
@@ -247,7 +247,7 @@ components/content/
   - 관리자 슬래시: `/video`, `/audio`, `/file`로 빈 템플릿 삽입 후 URL·메타 수정
 - 관리자 미디어 화면은 미디어 라이브러리·카드 썸네일·프로필 이미지 탭으로 구분한다. 미디어 라이브러리 탭은 원본 업로드 파일만 표시하고, 게시물 목록용 `thumbs/*-card.webp` 파생 파일은 카드 썸네일 탭에만 표시한다. 게시물 글쓰기의 대표 이미지와 본문 `/이미지`·`/갤러리` 선택 모달은 모두 카드 썸네일 파생 파일을 숨기고 원본 이미지만 선택하게 한다. 본문 미디어 모달은 업로드 탭을 먼저 열고, 업로드 완료 후 라이브러리에서 새 파일을 자동 선택한다.
 - 게시물 생성·수정 API는 `thumbs/*-card.webp` 카드 썸네일 URL을 대표 이미지로 저장하지 못하게 검증한다. 카드 썸네일은 원본 대표 이미지 저장 후 목록 표시용으로만 자동 생성한다.
-- 주소·HTML 임베드 블록은 위 블록과 불필요하게 벌어지지 않도록 상단 외부 여백 없이 표시하고, 다음 블록과 구분되는 하단 여백만 유지한다.
+- 링크·iframe·HTML 블록은 위 블록과 불필요하게 벌어지지 않도록 상단 외부 여백 없이 표시하고, 다음 블록과 구분되는 하단 여백만 유지한다.
 - 관리자 미디어 화면의 미디어 라이브러리 탭은 전체·이미지·영상·음악·파일 종류 필터와 미사용 필터를 제공한다. 미사용은 게시물·페이지·사이트 설정·회원 프로필에서 참조되지 않는 항목을 의미한다. 비디오 항목은 브라우저에서 초반 프레임을 캔버스로 추출해 목록 썸네일로 표시하고, 추출 실패 시 `video` placeholder를 유지한다.
 - 카드 썸네일 탭의 항목은 원본 대표 이미지가 사용 중이면 `목록 카드 썸네일` 사용처를 가진 것으로 판정한다. 원본 대표 이미지가 사용 중이지만 카드 썸네일 파일이 없으면 원본 항목에 `원본` 배지와 “목록에서 원본 이미지를 불러옴” 상태를 표시한다. 카드 썸네일은 원본과의 연결을 유지하기 위해 폴더 이동과 파일명 변경을 막고, 사용 중이면 삭제도 막는다.
 - 문단과 줄바꿈
@@ -261,8 +261,10 @@ components/content/
   - Toggle: `:::toggle 제목` ~ `:::`
   - Bookmark: `:::bookmark` ~ `:::` (본문은 `url=`, `title=`, `description=`, `thumbnail=` 키값 또는 첫 줄 URL·이어지는 제목/설명 줄)
   - Signup: `:::signup` ~ `:::` (선택: `title=`, `description=`, `button=`, `placeholder=`)
-  - HTML: 단독 `http(s)` URL 한 줄 또는 iframe HTML(기존 `:::embed` ~ `:::`도 렌더링 호환). YouTube·YouTube Shorts URL은 iframe, `twitter.com`·`x.com` 게시물 URL은 X 공식 embed iframe, 그 외 URL은 외부 링크 카드
-  - 렌더링: `ProseCallout.vue`, `ProseToggle.vue`, `ProseBookmark.vue`, `ProseSignup.vue`, `ProseEmbed.vue`
+  - Link: `:::link` ~ `:::`. YouTube·YouTube Shorts URL은 iframe, `twitter.com`·`x.com` 게시물 URL은 X 공식 embed iframe, 그 외 URL은 외부 링크 카드
+  - iframe: `:::iframe` ~ `:::`. iframe HTML에서 안전 속성만 추출해 sandbox iframe으로 표시
+  - HTML: `:::html` ~ `:::`. 표 등 일반 HTML을 표시하되 script, iframe, 이벤트 속성 등 실행성 코드는 제거
+  - 렌더링: `ProseCallout.vue`, `ProseToggle.vue`, `ProseBookmark.vue`, `ProseSignup.vue`, `ProseEmbed.vue`, `ProseHtml.vue`
 
 ---
 
@@ -669,8 +671,8 @@ components/content/
 - 툴바 `이미지`·`갤러리`는 미디어 모달을 연다. 모달 기본 탭은 **미디어 라이브러리**이며 **업로드** 탭에서 드래그·파일 선택 후 라이브러리 목록을 갱신한다. 업로드 중에는 추가 드롭·파일 선택과 모달 닫기를 막고 로딩 스피너를 표시하며, 업로드 완료 후에는 모달을 자동으로 닫거나 본문에 자동 삽입하지 않는다. 본문 삽입은 라이브러리 목록에서 파일을 직접 선택한 뒤 `삽입` 버튼을 눌렀을 때만 실행한다.
 - 미디어 라이브러리에서 단일 이미지를 선택하면 `![alt](url)` 형식으로 삽입한다.
 - 미디어 라이브러리에서 여러 이미지를 선택하면 `:::gallery` fenced block으로 삽입한다.
-- 작성 모드에서 커서가 이미지 마크다운 줄, `:::gallery`, 단독 URL HTML 블록 줄, 단독 iframe HTML 줄, 기존 `:::embed`, 인용문, `:::callout`, 코드 fenced 블록, `:::toggle` 블록 안에 있고 textarea(또는 블록 패널)에 포커스가 있으면 게시물 설정 사이드바(420px) 위에 **블록 설정 패널**(`AdminEditorBlockPanel`)이 오른쪽에서 슬라이드 인한다. 본문·패널 바깥을 클릭하면 슬라이드 아웃한다. 라이브 모드 멀티라인 편집기는 실제 커서가 있는 원본 줄을 패널 상태에 반영하며, 커서가 지원 블록 밖으로 이동하면 직전 코드·콜아웃·인용 설정 패널을 닫는다. 코드 fenced 블록 판별은 위에서 아래로 여는 펜스와 닫는 펜스를 짝지어 처리해, 닫는 ` ``` ` 줄을 다음 코드 블록 시작으로 오인하지 않는다. 갤러리 이미지 추가 미디어 모달을 여는 동안에는 활성 갤러리 컨텍스트와 패널 상태를 유지한다.
-- 블록 설정 패널: 이미지·갤러리(캡션, **파일명을 캡션으로 사용** 토글·기본 끔, URL, 갤러리 순서·삭제·추가), HTML(URL 또는 iframe), 인용 배경색, 콜아웃 제목·아이콘·배경색, 코드 언어·줄번호, 토글 기본 펼침 상태, 선택 텍스트 색상. `AdminMarkdownEditor`는 `block-panel` 이벤트로 상태를 `AdminPostForm`에 전달한다.
+- 작성 모드에서 커서가 이미지 마크다운 줄, `:::gallery`, `:::link`, `:::iframe`, `:::html`, 인용문, `:::callout`, 코드 fenced 블록, `:::toggle` 블록 안에 있고 textarea(또는 블록 패널)에 포커스가 있으면 게시물 설정 사이드바(420px) 위에 **블록 설정 패널**(`AdminEditorBlockPanel`)이 오른쪽에서 슬라이드 인한다. 본문·패널 바깥을 클릭하면 슬라이드 아웃한다. 라이브 모드 멀티라인 편집기는 실제 커서가 있는 원본 줄을 패널 상태에 반영하며, 커서가 지원 블록 밖으로 이동하면 직전 코드·콜아웃·인용 설정 패널을 닫는다. 코드 fenced 블록 판별은 위에서 아래로 여는 펜스와 닫는 펜스를 짝지어 처리해, 닫는 ` ``` ` 줄을 다음 코드 블록 시작으로 오인하지 않는다. 갤러리 이미지 추가 미디어 모달을 여는 동안에는 활성 갤러리 컨텍스트와 패널 상태를 유지한다.
+- 블록 설정 패널: 이미지·갤러리(캡션, **파일명을 캡션으로 사용** 토글·기본 끔, URL, 갤러리 순서·삭제·추가), 링크 URL, iframe 코드, HTML 코드, 인용 배경색, 콜아웃 제목·아이콘·배경색, 코드 언어·줄번호, 토글 기본 펼침 상태, 선택 텍스트 색상. `AdminMarkdownEditor`는 `block-panel` 이벤트로 상태를 `AdminPostForm`에 전달한다.
 - 미디어 라이브러리 갤러리 다중 선택 시 선택 항목은 **주황(`#ff7a00`) 굵은 테두리**로 표시한다.
 - 옵시디언식 토큰 숨김/백스페이스 복원 Live Preview는 후속 단계로 둔다.
 - 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
@@ -731,10 +733,10 @@ components/content/
 - `emoji=none`이면 공개 렌더러에서 이모지를 숨긴다.
 - 콜아웃 배경 프리셋은 인용 블록과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`를 지원한다.
 - 토글 블록은 `:::toggle 제목` fenced block 안에 펼침 본문을 저장한다. 라이브 모드에서는 제목·본문을 인라인 편집하며, chevron으로 펼침·접힘 시 본문이 애니메이션된다.
-- HTML 블록은 이미지 파일 URL을 제외한 단독 `http(s)` URL 한 줄을 기본 저장 형식으로 사용한다.
-- 기존 `:::embed` fenced block은 이전 콘텐츠 호환과 여러 줄 iframe 코드 저장을 위해 계속 파싱·렌더링한다.
-- 게시물 본문 HTML 블록은 임의 HTML 실행이 아니라 iframe HTML만 허용한다. iframe 코드는 `src`, `title`, `allow`, `width`, `height`, `allowfullscreen` 등 제한된 속성만 추출해 sandbox iframe으로 렌더링한다.
-- 관리자 Markdown-first 에디터의 라이브/스타일 모드에서 HTML 블록은 URL 입력 카드 없이 즉시 실제 프리뷰로 표시된다. HTML·비디오·오디오·파일 프리뷰 카드는 hover/focus 시 우측 상단 삭제 버튼을 표시한다. 블록 래퍼에 포커스한 상태에서 `Backspace`·`Delete`·`Ctrl/Cmd+Shift+K`로 삭제하고, `Enter`로 아래 빈 줄을 추가하며, `ArrowUp`·`ArrowDown`은 브라우저 스크롤 대신 이전/다음 편집 줄로 이동한다.
+- 링크 블록은 `:::link` fenced block 안에 URL을 저장하고 `ProseEmbed`로 렌더링한다. 이미지 파일 URL은 링크 블록이 아니라 이미지 블록으로 저장한다.
+- iframe 블록은 `:::iframe` fenced block 안에 iframe HTML을 저장한다. 렌더링 시 `src`, `title`, `allow`, `width`, `height`, `allowfullscreen` 등 제한된 속성만 추출해 sandbox iframe으로 표시한다.
+- HTML 블록은 `:::html` fenced block 안에 사용자 HTML을 저장하고 `ProseHtml`로 렌더링한다. 본문 HTML에서는 script, iframe, object, form 계열 태그와 이벤트 속성, `javascript:` URL을 제거한다. iframe은 `/iframe` 블록을 사용한다.
+- 관리자 Markdown-first 에디터의 라이브/스타일 모드에서 링크·iframe·HTML 블록은 입력 카드 없이 즉시 실제 프리뷰로 표시된다. 링크·iframe·HTML·비디오·오디오·파일 프리뷰 카드는 hover/focus 시 우측 상단 삭제 버튼을 표시한다. 블록 래퍼에 포커스한 상태에서 `Backspace`·`Delete`·`Ctrl/Cmd+Shift+K`로 삭제하고, `Enter`로 아래 빈 줄을 추가하며, `ArrowUp`·`ArrowDown`은 브라우저 스크롤 대신 이전/다음 편집 줄로 이동한다.
 - 라이브/스타일 모드에서 제목 블록 Enter는 현재 제목 내용을 저장한 뒤 바로 아래 빈 문단을 추가하고, 원문 마크다운 편집 상태로 전환하지 않는다.
 - 게시물 작성 화면 상단 제목 입력 후 Enter는 현재 에디터 모드를 유지한 채 본문 첫 줄(마크다운 첫 줄이 제목이면 그 다음 줄)로 포커스를 옮긴다.
 - 소스 모드 라인 번호는 논리 줄 수를 표시하되, 긴 문장 자동 줄바꿈으로 textarea의 한 줄 높이가 늘어나면 라인 번호 칸도 같은 높이로 맞춘다.
diff --git a/docs/update.md b/docs/update.md
index 8c71914..cbe8f2e 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 이력
 
+## v1.8.1
+
+- 게시물 글쓰기 슬래시 명령을 `/html`, `/link`, `/iframe`으로 분리.
+- 게시물 본문에 `:::html`, `:::link`, `:::iframe` 블록 저장·렌더링 추가.
+- 본문 HTML 블록에서 실행성 태그·속성을 제거하고 표 등 일반 HTML을 표시하도록 정리.
+- 기존 HTML/임베드 작성값은 수동으로 새 블록 형식으로 정리하도록 배포 가이드 추가.
+
 ## v1.8.0
 
 - 게시물 라이브 편집에서 위·아래 방향키로 인접 블록 이동 시 커서가 화면 밖으로 벗어나면 편집 스크롤 영역이 함께 따라오도록 수정.
diff --git a/lib/markdown-block-context.js b/lib/markdown-block-context.js
index d585927..4074c98 100644
--- a/lib/markdown-block-context.js
+++ b/lib/markdown-block-context.js
@@ -2,7 +2,6 @@ import { isImageUrl, parseImageMarkdownLine } from './markdown-image.js'
 import { CALLOUT_BACKGROUND_OPTIONS, QUOTE_BACKGROUND_OPTIONS, parseCalloutOptions } from './markdown-callout.js'
 import { parseCodeFenceLine } from './markdown-code-block.js'
 import { parseToggleOpenerLine } from './markdown-toggle.js'
-import { isIframeEmbedMarkup } from './markdown-iframe-embed.js'
 
 /**
  * fenced 블록 시작 줄 인덱스를 찾는다.
@@ -191,41 +190,40 @@ const resolveGalleryBlock = (lines, currentLine) => {
 }
 
 /**
- * 임베드 fenced 블록을 파싱한다.
+ * 링크·iframe·HTML fenced 블록을 파싱한다.
  * @param {string[]} lines - 본문 줄 목록
  * @param {number} currentLine - 현재 줄
- * @returns {{ kind: 'embed', startLine: number, endLine: number, url: string }|null}
+ * @returns {{ kind: 'link'|'iframe'|'html', startLine: number, endLine: number, url: string }|null}
  */
-const resolveEmbedBlock = (lines, currentLine) => {
-  const standaloneUrl = String(lines[currentLine] || '').trim()
+const resolveHtmlFamilyBlock = (lines, currentLine) => {
+  const blockTypes = [
+    { opener: ':::link', kind: 'link' },
+    { opener: ':::iframe', kind: 'iframe' },
+    { opener: ':::html', kind: 'html' }
+  ]
+
+  for (const blockType of blockTypes) {
+    const blockStart = findFencedBlockStart(lines, currentLine, blockType.opener)
+
+    if (blockStart === -1) {
+      continue
+    }
+
+    const blockEnd = findFencedBlockEnd(lines, blockStart)
+
+    if (blockEnd === -1 || currentLine > blockEnd) {
+      continue
+    }
 
-  if ((isStandaloneUrlLine(standaloneUrl) && !isStandaloneImageUrlLine(standaloneUrl)) || isIframeEmbedMarkup(standaloneUrl)) {
     return {
-      kind: 'embed',
-      startLine: currentLine,
-      endLine: currentLine,
-      url: standaloneUrl
+      kind: blockType.kind,
+      startLine: blockStart,
+      endLine: blockEnd,
+      url: lines.slice(blockStart + 1, blockEnd).join('\n').trim()
     }
   }
 
-  const embedStart = findFencedBlockStart(lines, currentLine, ':::embed')
-
-  if (embedStart === -1) {
-    return null
-  }
-
-  const embedEnd = findFencedBlockEnd(lines, embedStart)
-
-  if (embedEnd === -1 || currentLine > embedEnd) {
-    return null
-  }
-
-  return {
-    kind: 'embed',
-    startLine: embedStart,
-    endLine: embedEnd,
-    url: lines.slice(embedStart + 1, embedEnd).join('\n').trim()
-  }
+  return null
 }
 
 /**
@@ -394,5 +392,5 @@ export const resolveActiveBlockContext = (markdown, lineIndex) => {
     return toggle
   }
 
-  return resolveEmbedBlock(lines, currentLine)
+  return resolveHtmlFamilyBlock(lines, currentLine)
 }
diff --git a/lib/markdown-html-block.js b/lib/markdown-html-block.js
new file mode 100644
index 0000000..4f68a34
--- /dev/null
+++ b/lib/markdown-html-block.js
@@ -0,0 +1,35 @@
+const DANGEROUS_TAG_NAMES = [
+  'script',
+  'iframe',
+  'object',
+  'embed',
+  'form',
+  'input',
+  'button',
+  'textarea',
+  'select',
+  'meta',
+  'link',
+  'base'
+]
+
+const dangerousTagPattern = new RegExp(`<\\s*(${DANGEROUS_TAG_NAMES.join('|')})\\b[\\s\\S]*?<\\s*\\/\\s*\\1\\s*>`, 'gi')
+const dangerousSingleTagPattern = new RegExp(`<\\s*(${DANGEROUS_TAG_NAMES.join('|')})\\b[^>]*\\/?>`, 'gi')
+
+/**
+ * 본문 HTML 블록에서 실행성 코드와 위험 속성을 제거한다.
+ * @param {string} value - 원본 HTML
+ * @returns {string} 정리된 HTML
+ */
+export const sanitizeHtmlBlock = (value) => String(value || '')
+  .replace(dangerousTagPattern, '')
+  .replace(dangerousSingleTagPattern, '')
+  .replace(/\s+on[a-z]+\s*=\s*"[^"]*"/gi, '')
+  .replace(/\s+on[a-z]+\s*=\s*'[^']*'/gi, '')
+  .replace(/\s+on[a-z]+\s*=\s*[^\s>]+/gi, '')
+  .replace(/\s+(href|src)\s*=\s*"javascript:[^"]*"/gi, '')
+  .replace(/\s+(href|src)\s*=\s*'javascript:[^']*'/gi, '')
+  .replace(/\s+(href|src)\s*=\s*javascript:[^\s>]+/gi, '')
+  .replace(/\s+style\s*=\s*"[^"]*expression\s*\([^"]*"/gi, '')
+  .replace(/\s+style\s*=\s*'[^']*expression\s*\([^']*'/gi, '')
+  .trim()
diff --git a/lib/markdown-slash-commands.js b/lib/markdown-slash-commands.js
index f8779a1..1cc5ff9 100644
--- a/lib/markdown-slash-commands.js
+++ b/lib/markdown-slash-commands.js
@@ -116,12 +116,28 @@ export const MARKDOWN_SLASH_COMMANDS = [
     lines: [':::toggle 제목', '', ':::']
   },
   {
-    id: 'embed',
+    id: 'html',
     label: 'HTML',
-    description: 'URL 또는 iframe HTML',
-    keywords: ['html', 'iframe', 'embed', 'youtube', 'link', '임베드', '유튜브'],
+    description: '원하는 HTML 코드 삽입',
+    keywords: ['html', 'markup', 'tablehtml', 'html표', '코드', '마크업'],
     action: 'lines',
-    lines: ['https://']
+    lines: [':::html', '', ':::']
+  },
+  {
+    id: 'link',
+    label: '링크',
+    description: 'URL 링크/임베드 카드',
+    keywords: ['link', 'url', 'embed', 'youtube', '링크', '주소', '임베드', '유튜브'],
+    action: 'lines',
+    lines: [':::link', 'https://', ':::']
+  },
+  {
+    id: 'iframe',
+    label: 'iframe',
+    description: '외부 iframe 코드 삽입',
+    keywords: ['iframe', 'frame', '아이프레임', 'html'],
+    action: 'lines',
+    lines: [':::iframe', '<iframe src="https://"></iframe>', ':::']
   },
   {
     id: 'video',
diff --git a/package-lock.json b/package-lock.json
index 109c8f5..4d27ac2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.8.0",
+      "version": "1.8.1",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index 3c9b60e..fd353db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "private": true,
   "type": "module",
   "imports": {