HTML 편집기

HTML 편집기는 HTML 실시간 기능을 제공하는 HTML 편집할수 있는 텍스트 유틸리티 입니다. HTML 코드를 작성하면서 실시간으로 결과를 확인할 수 있습니다.

HTML 입력* (HTML을 입력하거나 HTML 파일 혹은 다운로드 받은 HTML 압축 파일을 드래그 드랍해 주세요.) 수정시 사용할 제목 메인 키워드

공백 미포함 글자 수: 0, 공백 포함 글자 수: 0, 단어 수: 0

이미지 입력 (이미지 혹은 이미지 포함 압축 파일을 드래그 드랍하거나 클릭하여 선택하세요. 입력된 이미지를 클릭시 HTML 코드에 자동 입력 됩니다.)

이미지를 드래그하거나 클릭하여 선택하세요

HTML 미리보기 🔗

HTML 문법의 주요 요소 🔗

HTML 태그	설명
<h1>제목</h1>	제목, 블로그에서 제목
<h2>중제목</h2>	중제목, 블로그에서 본문 섹션 중제목
<h3>소제목</h3>	소제목, 블로그에서 본문 하위 섹션 소제목
<ul><li>순서 없는 목록 아이템 1</li></ul>	순서 없는 목록
<ol><li>순서 있는 목록 아이템 1</li></ol>	순서 있는 목록
<a href="https://www.freeonlineutility.com/">링크텍스트</a>	링크
<strong>굵은 글씨</strong>	굵은 글씨
<em>기울임 글씨</em>	기울임 글씨
<code>프로그램 코드</code>	프로그램 코드
<img src="img.png" alt="마우스를이미지에올릴때보일글자없어도무방">	이미지

HTML 편집기 사용 방법

HTML 편집기 도구의 사용법은 매우 간단합니다:

1. 위의 텍스트 영역에 HTML 코드를 작성합니다.

2. HTML 코드를 직접 작성하지 않고 HTML 파일 혹은 다운로드 받은 HTML 압축 파일을 드래그 드랍해도 됩니다. HTML 압축 파일을 드래그 드랍할 경우 HTML 뿐아니라 이미지도 자동으로 입력 됩니다.

3. 이미지 혹은 이미지 포함 압축 파일을 드래그하거나 클릭하여 선택합니다.

4. HTML 미리보기 버튼을 누르면 미리보기 결과가 아래 미리보기 창에 보여 집니다.

5. 초기화 버튼을 클릭하면 기본 코드로 리셋됩니다.

📦 다운로드 파일 구성 안내

아래 다운로드 버튼을 클릭하면 하나의 ZIP 파일이 생성되며, 내부에는 다음과 같은 파일들이 포함됩니다.

1. html.html

현재 작성한 HTML 에디터의 모든 텍스트가 저장됩니다.

2. 1.png, 2.png, 3.png ...

업로드한 원본 이미지들이 순서대로 1.png, 2.png 형태로 저장됩니다.

3. share.html

공유주소 링크가 들어 있습니다. 링크를 클릭하면 공유 URL로 이동 합니다.

4. images.zip (원본 이미지 ZIP)

업로드된 원본 이미지를 그대로 포함한 ZIP 파일입니다.
내부 폴더 구조:

images/
         ├── 1.png
         ├── 2.png
         └── ...

5. cropped-images.zip (랜덤 크롭 + 밝기 적용 + JPEG 압축)

업로드한 각 이미지에 대해 다음 과정을 수행한 뒤 ZIP 파일로 저장됩니다:

이미지를 90%~100% 범위 내에서 랜덤 비율로 크롭
밝기를 0.8 ~ 1.2 범위 내에서 랜덤 적용
크롭된 이미지에 대해 JPEG 70% 품질로 압축
압축된 Blob을 기존 파일명.png 으로 저장

최종 ZIP 파일 이름은 HTML 내용의 첫 번째 <h1> 제목을 기반으로 저장됩니다. 제목이 없을 경우 기본 형식이 적용됩니다:

제목-YYYYMMDDHHMMSS.zip
            html-YYYYMMDDHHMMSS.zip (제목이 없는 경우)

생성형 AI 애니웨어 사이드 패널 사용 생성형 AI 결과를 HTML 편집기에서 편집, 이미지 추가, 저장, 공유 안내 🔗

생성형 AI 애니웨어 사이드패널 (메타 생성형 AI, 챗지피티 포함)에서 생성된 AI 결과물은 HTML 편집기를 통해 하나의 작업 흐름으로 편집, 이미지 추가, 저장, 공유까지 모두 진행할 수 있습니다.

예를 들어 사이드 패널의 기자단 리뷰쓰기 템플릿에서 생성형 AI에게 보내기 버튼을 클릭하면 생성형 AI가 자동으로 원고를 생성합니다. 마크다운으로 작성된 원고를 다시 생성형 AI 로 HTML 변환 혹은 처음부터 HTML 생성합니다.

생성된 원고는 복사 아이콘을 통해 클립보드로 복사할 수 있으며, 마크다운 괄호 안에 표시된 클립보드 텍스트를 클릭하면 복사된 내용을 HTML 편집기에서 바로 불러와 미리보기를 하며 상단 HTML 입력에서 내용을 편집할 수 있습니다.

HTML 편집기에서는 텍스트 수정뿐만 아니라 이미지 삽입도 가능하며, 이미지가 포함된 상태에서 마크다운 압축 다운로드 버튼을 누르면 원고와 이미지가 함께 압축 파일로 저장됩니다.

추후 다시 편집이 필요할 경우, 다운로드한 압축 파일을 HTML 편집기의 마크다운 입력 영역에 드래그 앤 드롭하면 원래의 편집 상태로 그대로 복원됩니다. 이미지가 포함된 경우 이미지도 자동으로 함께 불러와집니다.

HTML 편집기 도구는 리뷰에 이미지를 쉽게 삽입 및 하나의 압축 파일로 묶어 다운로드 할수 있어 체험단, 기자단 원고 공동작업시 다른 팀원이나 배포자(블로거)에게 전달하기 쉽게 해줍니다.

블로거에게 블로그 글 복사·붙여넣기를 의뢰할 때는, 압축 해제 후 생성되는 share.html(마크다운 공유 주소) 파일과 cropped-images.zip(이미지 처리 파일, 랜덤 크롭·밝기 보정·JPEG 압축 적용)을 전달하면 됩니다.

HTML 편집기에서 작성한 샘플 원고는 크랜베리마케팅 리뷰어 카페 원고 공유 게시판에서 다운받을 수 있습니다.

유용한 팁

SEO 측면에서 블로그 글쓰기에서 공백 미포함 최소 글자 수 1,500자 사용이 추천됩니다.