WYSIWYG HTML 편집기

비주얼 편집기로 서식 있는 텍스트를 쓰면 실시간으로 안전한 HTML을 얻습니다 — 스크립트·인라인 스타일·이벤트 핸들러·임베드는 제거되고 의미 있는 태그만 남습니다.

서식 있는 텍스트를 입력하거나 붙여넣고 툴바를 사용하세요. 정리된 안전한 HTML이 아래에 실시간으로 표시됩니다. 이미 가진 HTML이 있다면 소스 편집을 켜고 그 칸에 붙여넣으세요. 붙여넣거나 소스 편집 칸에 넣은 HTML은 편집기에 들어오기 전에 정리됩니다: 스크립트·스타일·이벤트 핸들러·프레임·삽입 요소는 지워지고, 다른 사이트의 이미지는 이미지 보기를 누르기 전까지 불러오지 않습니다.

정리된 HTML
정리된 HTML이 여기에 표시됩니다…

깔끔한 HTML을 출력하는 비주얼 편집기

툴바로 굵게·기울임·밑줄·제목·글머리 목록·번호 목록·링크를 적용하며 텍스트를 원하는 모습으로 편집하면, 그 아래에 정리된 HTML이 실시간으로 표시됩니다. 모든 입력은 새니타이저를 거쳐 의미 있는 태그와 링크의 안전한 href·title, 이미지의 안전한 src·alt만 남기므로, 복사한 마크업을 CMS·이메일 템플릿·정적 사이트·블로그에 바로 붙여넣을 수 있습니다. 반대 방향도 됩니다 — 소스 편집을 켜면 정리된 HTML 칸이 편집할 수 있는 입력칸으로 바뀌어, 이미 가진 HTML을 그대로 붙여넣고 위쪽 비주얼 편집기에서 고칠 수 있습니다. 모든 처리는 브라우저에서 이루어지며 콘텐츠는 업로드되지 않습니다.

기본적으로 안전합니다

워드·구글 문서·웹페이지에서 붙여넣은 내용에는 인라인 스타일, class 속성, 빈 span 래퍼, 심지어 script 태그까지 섞여 있기 쉽습니다. 이 편집기는 script·style·on* 이벤트 핸들러 속성을 제거하고, 의미 없는 래퍼를 텍스트만 남기고 풀며, 폼 요소와 svg·canvas·audio·video 같은 삽입 요소(picture 요소는 안에 든 이미지까지)를 삭제하고, javascript: 같은 위험한 링크·이미지 URL을 제거합니다. 그 밖의 이미지는 대체 텍스트(alt)와 함께 남습니다. 편집하지 않고 변환이나 들여쓰기 정리만 하려면 마크다운 → HTML·HTML 포매터를 쓰세요.

자주 묻는 질문

입력한 내용이 서버로 업로드되나요?

아니요. 모든 편집과 정리는 브라우저 안에서 JavaScript로 처리되며, 입력하거나 붙여넣은 내용은 전송되거나 업로드되지 않습니다. 이 브라우저에 보관하지도 않으므로, 새로 고치거나 탭을 닫았다 열면 편집기는 다시 예시 문서로 열립니다. 페이지를 떠나기 전에 작성한 내용을 복사하거나 내려받으세요. 붙여넣거나 소스 편집 칸에 넣은 다른 사이트의 이미지는 이미지 보기를 누르기 전까지 불러오지 않으며, 누르면 그 그림을 보여 주는 어느 페이지와 마찬가지로 브라우저가 그 사이트에서 직접 불러옵니다.

어떤 HTML을 유지하고 무엇을 제거하나요?

제목·문단·목록·굵게·기울임·밑줄·코드·인용·링크·이미지 같은 의미 있는 태그와 링크의 안전한 href·title, 이미지의 안전한 src·alt는 유지합니다. script, 인라인 스타일, class·id 속성, 이벤트 핸들러, 폼 요소, svg·canvas·audio·video 같은 삽입 요소는 제거하고 의미 없는 래퍼는 풀어 깔끔한 마크업만 남깁니다.

마크다운 → HTML이나 HTML 포매터와 무엇이 다른가요?

이 도구는 비주얼 편집기입니다. 글을 직접 꾸미면 그 결과로 HTML이 만들어집니다. 마크다운 → HTML은 마크다운 문법을 변환하고, HTML 포매터는 이미 있는 마크업의 들여쓰기만 정리합니다. 코드를 건드리지 않고 내용을 쓰고 꾸미고 싶을 때 이 도구를 쓰세요.