</>
유튜브 사직인생 - HTML 양방향 Coding HELPER
실시간 양방향 편집 · 코드와 미리보기를 동시에
프로젝트명
? 도움말
HTML 코드 편집기
⧉
🗑
B
I
U
S
H1
H2
H3
• ─
1. ─
⫷
≡
⫸
🔗
🖼
▦
</>
❝
―
실시간 미리보기 (직접 편집 가능)
💡
⤴
📂
불러오기
💾
임시 저장
📘 사용 안내
유튜브 사직인생 - HTML 양방향 Coding HELPER (ver.202606-1)
1. 양방향 실시간 편집
왼쪽 코드
를 수정하면 → 오른쪽 미리보기에 즉시 반영
오른쪽 미리보기
를 직접 클릭하여 편집하면 → 왼쪽 코드에 자동 반영
코드를 모르는 분도 오른쪽에서 글을 쓰면 자동으로 HTML 코드가 만들어집니다
2. 도구 모음 사용법
오른쪽 미리보기
에서 글을 선택한 뒤 도구 버튼을 누르면 서식이 적용됩니다
제목(H1~H3), 굵게, 기울임, 목록, 정렬, 링크, 이미지, 표 등 지원
색상 선택기로 글자 색도 바꿀 수 있습니다
3. 임시 저장 (다운로드)
💾 저장 버튼
또는
Ctrl+S
(Mac은
⌘+S
)
파일명:
yyyy-mm-dd_hh:mm:ss_프로젝트명.html
저장 위치: 브라우저 기본 다운로드 폴더
바탕화면을 기본 위치로 쓰려면 브라우저 설정 → 다운로드 → 위치를 바탕화면으로 변경하세요. 또는 "다운로드 전 저장 위치 묻기"를 켜면 매번 위치 선택이 가능합니다.
4. 불러오기
📂 불러오기 버튼
으로 저장한 HTML 파일을 다시 열 수 있습니다
파일명에서 프로젝트명을 자동으로 추출합니다
5. 자동 임시 저장 (브라우저 내)
편집 내용은 5초마다 브라우저에 자동 저장됩니다 (localStorage)
실수로 창을 닫아도 다시 열면 마지막 작업이 복원됩니다
6. 기타 기능
💡 테두리 표시
: 미리보기의 각 요소 경계를 점선으로 표시
⤴ 새 창
: 미리보기를 별도의 깨끗한 창으로 열기
⧉ 복사
: 코드 전체를 클립보드에 복사
🗑 모두 지우기
: 작업 내용 초기화
확인