HTML 편집기는 HTML 실시간 미리보기 기능을 제공하는 HTML 편집할수 있는 텍스트 유틸리티 입니다. HTML 코드를 작성하면서 실시간으로 결과를 확인할 수 있습니다.
공백 미포함 글자 수: 0, 공백 포함 글자 수: 0, 단어 수: 0
이미지를 드래그하거나 클릭하여 선택하세요
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.jpg" 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 (제목이 없는 경우)
활용 사례
체험단, 기자단 원고쓰기: HTML 편집기 도구는 생성형 AI 애니웨어 (메타 생성형 AI, 챗지피티 포함) 로 자동으로 쓴 리뷰에 이미지를 쉽게 삽입 및 하나의 압축 파일로 묶어 다운로드 할수 있어 공동작업시 다른 팀원이나 배포자(블로거)에게 전달하기 쉽게 해줍니다.
유용한 팁
- SEO 측면에서 블로그 글쓰기에서 공백 미포함 최소 글자 수 1,500자 사용이 추천됩니다.
