편집 모드 켜기
HTML Editor는 편집 모드를 켜야 요소를 수정할 수 있습니다.
화면 좌상단 툴바에서 연필 아이콘 버튼을 클릭하거나, 키보드 단축키 Cmd+E를 누르세요.
컨테이너 선택 및 고정
편집 모드가 켜지면 먼저 편집할 영역(컨테이너)을 선택해야 합니다.
- 마우스를 올리면 컨테이너 후보가 하이라이트됩니다
- 클릭하면 해당 컨테이너가 고정되고, 바깥 영역이 어둡게 표시됩니다
- 컨테이너를 고정하면 이미지·텍스트·도형 추가 버튼이 활성화되고, 붙여넣기(
Cmd+V)가 해당 컨테이너에 삽입됩니다
- 이미 있는 요소를 클릭하면 컨테이너 고정 없이 바로 편집할 수도 있습니다
상단 잠금 뱃지의 해제 버튼을 누르면 다른 컨테이너로 전환할 수 있습니다.
편집 모드 끄기
같은 버튼을 다시 누르거나 Cmd+E를 누르면 편집 모드가 꺼집니다.
편집 모드를 끄면 모든 선택과 컨테이너 고정이 해제되고, 내용이 비어있는 텍스트박스는 자동으로 제거됩니다.
저장하기
편집이 끝나면 툴바의 저장 아이콘 버튼을 클릭하세요.
OS 네이티브 저장 위치 선택 창이 열립니다. 파일명과 저장 경로를 지정해서 HTML 파일로 저장할 수 있습니다.
브라우저가 File System Access API를 지원하지 않는 경우 자동으로 파일이 다운로드됩니다.
전체 단축키는 [키보드 단축키](./keyboard-shortcuts.md)를 참고하세요.
이미지 추가하기
방법 1 — 드래그앤드롭
이미지 파일을 페이지 위로 드래그해서 놓으면 자동으로 삽입됩니다.
방법 2 — 툴바 버튼
1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)
2. 툴바에서 이미지 추가 아이콘 버튼을 클릭하거나 i 키를 누릅니다
3. 파일 선택 창이 열립니다. 이미지를 선택합니다
4. 고정된 컨테이너 안에서 드래그하여 크기를 지정합니다 (클릭만 하면 기본 크기)
컨테이너가 고정되지 않으면 추가 버튼이 비활성 상태입니다.
방법 3 — 클립보드 붙여넣기
컨테이너 고정 상태에서 이미지 URL 또는 이미지 파일을 복사한 뒤 Cmd+V를 누르면 삽입됩니다.
방법 4 — 에셋 보관함
1. 툴바에서 폴더 아이콘(l 키)을 클릭하면 상단에 에셋 보관함이 열립니다
2. + 업로드 버튼으로 이미지 파일을 추가하거나, 보관함 영역에 파일을 드래그하여 등록합니다
3. 보관함이 열린 상태에서 Cmd+V를 누르면 클립보드의 이미지/이미지 URL이 보관함에 추가됩니다
4. 썸네일을 클릭하면 고정된 컨테이너에 이미지가 삽입됩니다
5. 썸네일을 드래그하면 고스트가 표시되며, 컨테이너 위에서 놓으면 해당 위치에 삽입됩니다
페이지에 이미 있는 이미지는 편집기 시작 시 자동으로 보관함에 수집됩니다. 에셋은 현재 세션에서만 유지됩니다. 삽입되는 이미지는 컨테이너 크기에 맞게 자동 축소됩니다.
이미지 선택하기
편집 모드에서 이미지를 한 번 클릭하면 선택됩니다. 선택된 이미지는 파란 테두리로 표시되고, 우측에 속성 패널이 열립니다.
선택 해제: Escape (오버레이 하단의 ESC 힌트 참고)
이동하기
선택된 이미지를 드래그하면 이동합니다. 다른 요소나 컨테이너 경계에 가까워지면 자동으로 스냅(정렬 가이드)이 표시됩니다.
핸들 조작
| 핸들 위치 | 동작 |
| 우측 하단 흰 사각형 | 크기 조절 (Shift 드래그: 비율 고정) |
| 상단 중앙 원형 | 회전 (Shift 드래그: 5° 스냅) |
| 좌측 상단 보라색 원형 | 모서리 둥글게 |
| 우측 세로 슬라이더 | 투명도 조절 |
크기 조절 핸들은 이미지 모서리에 절반 걸쳐 있어, 이미지가 화면 끝에 붙어 있어도 조작할 수 있습니다.
이미지 삭제하기
- 이미지 우측 상단의 빨간 X 버튼 클릭
- 또는 이미지 선택 후
Delete / Backspace 키
속성 패널 기능
이미지를 선택하면 우측 패널에 다양한 옵션이 표시됩니다.
레이어 / 정렬
레이어로 요소 앞뒤 순서를 조절하고, 정렬로 컨테이너 안에서 수평·수직 위치를 맞춥니다.
이미지 맞춤 / 크롭
꽉 채움·전체 보기·늘리기·원본 크기 중 표시 방식을 선택합니다. 크롭 버튼을 누르면 크롭 모드가 활성화되어 보이는 영역과 확대 비율을 조정할 수 있습니다.
색상 / 필터
밝기·대비·채도를 슬라이더로 조정합니다. 필터(흑백·세피아·빈티지·쿨·웜)를 클릭 한 번으로 적용할 수 있습니다.
스타일
그림자(X/Y 오프셋, 블러, 불투명도, 색상)와 테두리(두께·스타일·색상)를 설정합니다.
변형 / 크기 / 링크 / 초기화
회전 슬라이더와 빠른 회전(90°), 반전(좌우·상하), 가로·세로 크기를 조정합니다. 링크 URL을 설정하면 편집 모드 꺼진 상태에서 이미지 클릭 시 해당 링크로 이동합니다. 초기화는 색상 조정·필터·그림자·테두리·회전을 기본값으로 되돌립니다 (위치·크기 유지).
텍스트박스는 페이지 위에 새로운 텍스트를 자유롭게 배치할 수 있는 블록입니다.
텍스트박스 추가하기
1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)
2. 툴바에서 T 아이콘 버튼을 클릭하거나 t 키를 누릅니다
3. 커서가 십자(+)로 바뀝니다. 텍스트를 넣을 위치를 클릭합니다
4. 텍스트박스가 생성되고 바로 입력할 수 있습니다
컨테이너가 고정되지 않으면 텍스트 추가 버튼이 비활성 상태입니다.
텍스트 입력하기
텍스트박스를 클릭하면 커서가 활성화되어 바로 입력할 수 있습니다.
편집 완료 후 텍스트박스 바깥을 클릭하면 편집이 종료됩니다.
내용을 입력하지 않고 편집 모드를 끄면 빈 텍스트박스는 자동으로 삭제됩니다.
이동 / 크기 조절 / 회전
이미지와 동일하게 드래그로 이동, 하단 핸들로 세로 크기 조절, 상단 핸들로 회전할 수 있습니다.
텍스트박스 삭제하기
- 속성 패널 하단의 삭제 버튼 클릭
- 또는 텍스트박스 선택 후
Delete / Backspace 키
속성 패널 기능
텍스트박스를 선택하면 우측 패널에서 다양한 스타일을 설정할 수 있습니다.
태그
텍스트의 HTML 태그를 변경합니다. 태그에 따라 기본 크기와 두께가 자동 적용됩니다.
| 태그 | 용도 |
h1 – h6 | 제목 (숫자가 작을수록 크게) |
p | 본문 단락 |
div, span | 일반 텍스트 |
li | 목록 항목 |
blockquote | 인용문 |
pre | 코드/고정폭 텍스트 |
레이어
여러 요소가 겹쳐있을 때 앞뒤 순서를 조절합니다.
정렬
컨테이너 내 수평/수직 위치를 버튼으로 맞춥니다.
폰트
페이지에서 사용 중인 폰트 목록이 자동으로 표시됩니다. 클릭하면 적용, 다시 클릭하면 해제됩니다.
타이포그래피
| 설정 | 범위 |
| 폰트 두께 | Thin(100) – Black(900) |
| 폰트 크기 | 8px – 96px |
| 줄 높이 | 0.5 – 3.0 |
색상
텍스트 색상을 컬러 피커로 선택하거나, 페이지에서 사용 중인 색상 스와치를 클릭해서 바로 적용할 수 있습니다.
텍스트 정렬
왼쪽 / 가운데 / 오른쪽 / 양쪽
스타일
- *기울임* (이탤릭)
- <u>밑줄</u>
- ~~취소선~~
링크
URL을 입력하거나 Cmd+V로 붙여넣으면 링크가 설정됩니다.
- 링크 설정 시 자동으로 밑줄이 적용됩니다
- 편집 모드가 꺼진 상태에서 클릭하면 해당 URL로 이동합니다
초기화 / 삭제
- 초기화: 모든 스타일을 기본값으로 되돌립니다
- 삭제: 텍스트박스를 페이지에서 제거합니다
도형 추가하기
1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)
2. 툴바에서 도형 버튼을 클릭하거나 단축키를 누릅니다
3. 고정된 컨테이너 안에서 드래그하여 크기를 지정합니다 (클릭만 하면 기본 크기)
컨테이너가 고정되지 않으면 도형 추가 버튼이 비활성 상태입니다.
| 도형 | 툴바 버튼 | 단축키 |
| 사각형 | 사각형 아이콘 | r |
| 원 | 원 아이콘 | o |
| 선 / 화살표 | 선 아이콘 | a |
이동 / 크기 조절 / 회전
이미지와 동일하게 동작합니다.
- 이동: 드래그
- 크기 조절: 우측 하단 핸들 드래그
- 회전: 상단 중앙 핸들 드래그 (
Shift: 5° 스냅)
속성 패널
도형을 선택하면 우측 패널에서 스타일을 변경할 수 있습니다.
채우기
테두리 (선 스타일)
- 두께, 스타일(실선/파선/점선/없음), 색상 설정
선 / 화살표 방향
그림자
레이어
정렬
페이지에 이미 있는 텍스트(제목, 본문, 목록 등)를 직접 수정할 수 있습니다.
텍스트 선택하기
편집 모드에서 페이지의 텍스트를 한 번 클릭하면 선택됩니다.
- 파란 테두리가 표시되고 우측에 속성 패널이 열립니다
- 이 상태에서 스타일을 변경하거나 링크를 설정할 수 있습니다
속성 패널 상단에는 해당 텍스트 요소의 HTML 태그 이름(예: h1, p, li)이 표시됩니다.
텍스트 내용 수정하기
선택된 텍스트를 더블 클릭하면 커서가 활성화되어 직접 내용을 수정할 수 있습니다.
편집 완료:
- 텍스트 바깥을 클릭하거나
Escape 키를 누르면 됩니다
편집이 끝나도 선택 상태는 유지되어 패널에서 스타일 변경을 이어서 할 수 있습니다.
스타일 변경은 텍스트박스와 동일합니다. [텍스트박스 속성 패널](./textbox.md#속성-패널) 참고.
이미지, 텍스트박스, 기존 텍스트에 링크를 달 수 있습니다. 링크가 설정된 요소는 편집 모드가 꺼진 상태에서 클릭하면 해당 URL로 이동합니다.
링크 설정 방법
방법 1 — 패널에서 직접 입력
요소를 선택하면 우측 패널 하단에 링크 섹션이 있습니다. URL을 직접 입력하세요.
방법 2 — Cmd+V 붙여넣기 (가장 빠른 방법)
1. 링크 URL을 클립보드에 복사합니다
2. 편집 모드에서 링크를 달 요소를 클릭해서 선택합니다
3. Cmd+V를 누르면 자동으로 링크가 설정됩니다
링크 설정 시 자동 동작
| 요소 | 자동 적용 |
| 이미지 | 링크 배지(파란 아이콘) 표시 |
| 텍스트박스 | 밑줄 + 링크 배지 표시 |
| 기존 텍스트 | 밑줄 + 포인터 커서 표시 |
링크가 있는 요소는 왼쪽에 파란 원형 아이콘(🔗)이 표시됩니다.
레이어(Z-index)와 링크
링크가 설정된 요소가 클릭되려면 레이어 순서가 1 이상이어야 합니다. 링크를 설정하면 레이어가 자동으로 1로 조정됩니다.
링크 제거
패널 링크 섹션의 입력 필드를 비우면 링크가 제거됩니다.
링크 클릭 동작
- 편집 모드 켜짐: 클릭해도 링크로 이동하지 않습니다 (편집 우선)
- 편집 모드 꺼짐: 클릭 시 새 탭에서 링크가 열립니다
요소 복사하기
편집 모드에서 요소를 선택한 뒤 Cmd+C를 누르면 복사됩니다.
요소 잘라내기
Cmd+X를 누르면 복사 후 원본이 삭제됩니다.
요소 붙여넣기
컨테이너 고정 상태에서 Cmd+V를 누르면 고정된 컨테이너의 마우스 커서 위치에 붙여넣어집니다.
- 이미지를 복사했다면 이미지가, 텍스트박스를 복사했다면 텍스트박스가 그대로 붙여넣어집니다
- 스타일, 크기, 효과 등 모든 설정이 그대로 복제됩니다
컨테이너가 고정되지 않은 상태에서 붙여넣기하면 안내 토스트가 표시됩니다.
외부에서 붙여넣기
이미지나 텍스트를 다른 곳에서 복사해서 Cmd+V로 붙여넣을 수도 있습니다.
| 클립보드 내용 | 결과 |
| 이미지 파일 | 이미지로 삽입 |
이미지 URL (.jpg, .png 등) | 이미지로 삽입 |
| 일반 텍스트 | 텍스트박스로 삽입 |
| 웹페이지에서 복사한 이미지 | 이미지로 삽입 |
이미지 파일 드래그앤드롭
클립보드 없이 이미지 파일을 직접 페이지 위로 드래그해서 놓아도 삽입됩니다.
- 여러 파일을 한 번에 드래그하면 20px 간격으로 나란히 삽입됩니다
- 편집 모드가 꺼져 있어도 드롭하면 자동으로 편집 모드가 켜집니다
링크 붙여넣기 (선택된 요소에)
요소가 선택된 상태에서 URL을 클립보드에 복사하고 Cmd+V를 누르면 링크가 설정됩니다. 자세한 내용은 [링크 설정 가이드](./links.md)를 참고하세요.
전역
| 단축키 | 동작 |
Cmd+E | 편집 모드 켜기 / 끄기 |
Cmd+Z | 실행 취소 |
Cmd+Shift+Z | 다시 실행 |
Escape | 선택 해제 / 추가 모드 취소 |
i | 이미지 추가 |
t | 텍스트박스 추가 |
r | 사각형 도형 추가 |
o | 원 도형 추가 |
a | 선/화살표 추가 |
l | 에셋 보관함 열기/닫기 |
요소 추가 단축키는 컨테이너가 고정된 상태에서만 동작합니다. 입력 필드에 포커스가 있을 때도 동작하지 않습니다.
선택
| 단축키 | 동작 |
Cmd+A | 컨테이너 내 모든 요소 선택 |
Cmd+C | 선택 요소 복사 |
Cmd+X | 선택 요소 잘라내기 |
Cmd+V (URL 복사 후) | 선택 요소에 링크 설정 |
Cmd+V (보관함 열림) | 클립보드 이미지를 보관함에 추가 |
Delete / Backspace | 선택 요소 삭제 |
Cmd+G | 다중 선택 요소 그룹화 |
Cmd+Shift+G | 그룹 해제 |
Cmd+V (선택 없을 때) | 클립보드 내용 붙여넣기 (이미지 또는 텍스트박스로) |
붙여넣기(Cmd+V)는 컨테이너가 고정된 상태에서만 동작합니다.
핸들 조작 중
| 단축키 | 동작 |
Shift + 회전 드래그 | 5° 단위 스냅 |
Shift + 크기 조절 드래그 | 비율 고정 리사이즈 |
Shift + 도형 드래그 | 정사각형/정원/45° 스냅 |