HTML Editor의 모든 기능을 안내합니다.
화면 좌상단 툴바의 연필 아이콘을 클릭하거나 Cmd+E를 누르면 편집 모드가 켜집니다.
편집 모드에서는 요소 주변에 파란 점선이 표시되고, 클릭하면 선택 및 우측 속성 패널이 열립니다.
저장은 툴바의 저장 아이콘을 클릭하면 편집 결과가 HTML 파일로 다운로드됩니다.
| 핸들 위치 | 동작 |
|---|---|
| 우측 하단 (흰 사각형) | 크기 조절 — Shift 누르면 자유 비율 |
| 상단 중앙 (원형) | 회전 — Shift 누르면 5° 스냅 |
| 좌측 상단 (보라색 원) | 모서리 둥글기 |
| 우측 세로 슬라이더 | 투명도 |
| 우측 상단 빨간 X | 삭제 |
| 섹션 | 내용 |
|---|---|
| 레이어 | 앞/뒤 순서 (z-index) |
| 색상 조정 | 밝기 / 대비 / 채도 (0–200%) |
| 테두리 | 두께, 스타일(실선/파선/점선), 색상 |
| 이미지 맞춤 | 꽉 채움 / 전체 보기 / 늘리기 / 원본 크기 |
| 크롭 | 드래그로 위치, 슬라이더로 확대 (최대 4배) |
| 변형 | 회전 슬라이더, 90° 회전, 좌우/상하 반전 |
| 필터 | 없음 / 흑백 / 세피아 / 빈티지 / 쿨 / 웜 |
| 그림자 | X/Y 오프셋, 블러, 불투명도, 색상 |
| 이미지 교체 | 현재 위치·크기 유지한 채 이미지 파일만 교체 |
| 정렬 | 컨테이너 내 수평/수직 정렬 |
| 링크 | URL 입력 또는 Cmd+V |
페이지 위에 새로운 텍스트 블록을 자유롭게 배치합니다.
| 섹션 | 내용 |
|---|---|
| 레이어 | 앞/뒤 순서 (z-index) |
| 색상 | 텍스트 색상 + 페이지 색상 스와치 |
| 배경색 | 텍스트박스 배경 색상 + 투명 옵션 |
| 테두리 | 두께, 스타일(실선/파선/점선), 색상 |
| 타이포그래피 | 두께(100–900), 크기(8–96px), 줄높이, 자간 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 / 양쪽 + 컨테이너 정렬 |
| 스타일 | 이탤릭 / 밑줄 / 취소선 |
| 폰트 | 페이지 사용 폰트 자동 추출, 클릭으로 적용 |
| 태그 | h1–h6, p, div, span, li 등으로 변경 |
| 링크 | URL 입력 시 자동 밑줄, 비편집 모드에서 클릭 가능 |
사각형, 원, 선을 자유롭게 그려 배치합니다.
| 섹션 | 내용 |
|---|---|
| 레이어 | 앞/뒤 순서 (z-index) |
| 채우기 색상 | 도형 내부 색상 + 투명 옵션 |
| 테두리 | 두께, 스타일(실선/파선/점선), 색상 |
| 모서리 둥글기 | 사각형 전용 |
| 화살표 | 선 전용 — 시작/끝 화살표 토글 |
| 변형 | 회전 슬라이더 |
| 정렬 | 컨테이너 내 수평/수직 정렬 |
여러 요소를 동시에 선택해 이동하거나 정렬할 수 있습니다.
| 기능 | 내용 |
|---|---|
| 정렬 | 왼쪽 / 가운데 / 오른쪽 / 위 / 중간 / 아래 정렬 |
| 간격 균등 | 수평 / 수직 간격 균등 분배 (3개 이상 필요) |
| 그룹화 | Cmd+G 또는 버튼으로 그룹 생성 |
| 삭제 | 선택된 모든 요소 일괄 삭제 |
여러 요소를 하나로 묶어 함께 이동하고 크기를 조절합니다.
페이지의 모든 요소를 시각적으로 탐색하고 선택할 수 있는 도구입니다.
div.container)페이지에 이미 있는 텍스트(제목, 본문, 목록 등)를 직접 수정합니다.
이미지, 텍스트박스, 도형, 기존 텍스트에 링크를 설정할 수 있습니다. 편집 모드가 꺼진 상태에서 클릭하면 새 탭에서 링크가 열립니다.
링크 설정 시 텍스트 계열 요소에는 자동으로 밑줄이 적용되고, 왼쪽에 파란 링크 배지가 표시됩니다.
| 단축키 | 동작 |
|---|---|
| Cmd+C | 선택 요소 복사 (스타일, 크기, 효과 포함) |
| Cmd+X | 선택 요소 잘라내기 |
| Cmd+V (선택 없음) | 클립보드 내용 붙여넣기 |
| Cmd+V (요소 선택됨) | URL이면 해당 요소에 링크 설정 |
| 클립보드 내용 | 결과 |
|---|---|
| 이미지 파일 | 이미지로 삽입 |
| 이미지 URL (.jpg, .png 등) | 이미지로 삽입 |
| 일반 텍스트 | 텍스트박스로 삽입 |
| 단축키 | 동작 |
|---|---|
| Cmd+E | 편집 모드 켜기 / 끄기 |
| Cmd+Z | 실행 취소 (최대 50단계) |
| Cmd+Shift+Z / Cmd+Y | 다시 실행 |
| Cmd+C | 선택 요소 복사 |
| Cmd+X | 선택 요소 잘라내기 |
| Cmd+V | 붙여넣기 / 링크 설정 |
| Cmd+G | 선택 요소 그룹화 |
| Cmd+Shift+G | 그룹 해제 |
| i | 이미지 추가 모드 토글 |
| t | 텍스트 추가 모드 토글 |
| r | 사각형 추가 모드 토글 |
| o | 원 추가 모드 토글 |
| a | 선/화살표 추가 모드 토글 |
| d | DOM 피커 토글 |
| Delete / Backspace | 선택 요소 삭제 |
| Escape | 선택 해제 / 편집 모드 종료 |
| Shift + 회전 드래그 | 5° 단위 스냅 회전 |
| Shift + 크기 조절 | 비율 무시 자유 리사이즈 |
Unblock-File -Path "파일경로.html"
버전별 버그 수정 및 기능 변경 내역입니다.
pointer-state.ts에서 모든 상태를 통합 관리Mode: reader | editing — 편집 모드 토글 (기존 edit-mode.ts 흡수, 파일 삭제)Op: idle | resizing | dragging | ... — 마우스 인터랙션 락AddMode: null | image | textbox | shape-* — 요소 추가 플로우 상호 배타성 보장addActive/textActive/shapeActive 3개 독립 변수 → FSM AddMode 단일 상태로 통합element-highlight.ts 신규: 오버레이(파란 hover/빨간 lock) + 태그 라벨 + 칩 UI를 재사용 가능한 유틸로 추출docs/CHANGELOG.md 수정 시 빌드에서 런처 변경 이력 탭에 자동 반영data-hedit-inline-id가 span에 있고 data-hedit-eid가 부모 블록(h1, p 등)에만 있는 경우, .closest('[data-hedit-eid]')로 블록을 찾아 innerHTML 동기화_syncedEids Set)textContent → innerHTML로 변경해 <br> 등 HTML 태그 보존img.draggable = false + CSS -webkit-user-drag: none 적용attachEditor)와 저장된 이미지 재로드(rehydrateWrapper) 경로 모두 적용attachEditor 경로에만 draggable=false 적용 — v0.2.5에서 완전 수정position: absolute; inset: 0 컨테이너에 inline position: relative를 덮어쓰던 문제 수정_ensureContainerPositioned에서 CSS computed style 기반으로 판단하도록 변경ensureSiblingsAbove에서 flex/grid 컨테이너 감지 후 position: relative 추가 생략data-hedit-eid 부여, 요소 단위 innerHTML 동기화docs/stacking-context-strategy.md: CSS 스태킹 컨텍스트 컨테이너 타입별 대응 전략 문서 추가docs/blog-stacking-context.md: 기술 블로그 초안 추가