HTML 코드 에디터는 무엇을 하나요?

HTML 코드를 입력하면서 그 결과를 바로 옆에서 실시간으로 확인할 수 있는 온라인 편집기입니다. 왼쪽 편집기에 코드를 쓰면, 오른쪽 미리보기 화면이 곧바로 그 코드가 그려 낸 모습으로 바뀝니다. 프로그램을 설치하거나 파일을 저장하고 브라우저로 여는 번거로운 과정 없이, 한 화면에서 작성과 확인을 동시에 할 수 있습니다.

HTML을 처음 배우는 분이 태그를 하나씩 바꿔 보며 결과가 어떻게 달라지는지 익히거나, 이메일 서식·게시글·간단한 페이지 조각을 만들면서 모양을 맞춰 볼 때 특히 편리합니다. 편집기에는 문법에 따라 색이 입혀지고 줄 번호가 표시되어, 태그가 열리고 닫히는 지점을 눈으로 따라가기 쉽습니다.

사용 방법

1. 왼쪽 편집기에 처음부터 들어 있는 예시 코드(<h1>Hello World!</h1>)를 참고하며 원하는 HTML을 입력합니다.
2. 타이핑을 멈추면 잠깐 사이(약 0.3초)에 오른쪽 미리보기 화면이 자동으로 갱신됩니다. 따로 버튼을 누를 필요가 없습니다.
3. 처음부터 새로 작성하고 싶으면 편집기 위의 지우기 버튼으로 내용을 한 번에 비울 수 있습니다.

미리보기는 안전을 위해 격리된 영역(iframe)에서 그려지며, 입력한 코드는 접속한 분의 브라우저 안에서만 처리되고 서버로 전송되지 않습니다. 다만 이 편집기에는 저장 기능이 없으므로, 완성한 코드는 복사해서 파일로 따로 보관하는 것을 잊지 마세요. 페이지를 새로 고치면 작성 내용이 사라집니다.

편집기와 미리보기, 무엇이 다른가요?

화면이 좌우로 나뉘어 있는데, 각 영역의 역할은 다음과 같습니다.

예를 들어 왼쪽에 <h1>안녕하세요</h1>라고 쓰면, 오른쪽에는 큰 제목 글씨로 안녕하세요가 즉시 나타납니다. 태그를 <h1>에서 <p>로 바꾸면 미리보기의 글씨 크기도 곧바로 작아집니다.

자주 묻는 질문

작성한 코드가 저장되나요?

저장되지 않습니다. 이 도구는 실시간 편집과 미리보기에 집중한 도구라, 페이지를 벗어나거나 새로 고치면 내용이 초기화됩니다. 완성한 코드는 편집기에서 전체 선택해 복사한 뒤, 컴퓨터에 파일로 저장해 두세요.

코드가 지저분하게 뭉쳐 있는데 정리할 수 있나요?

이 편집기 자체에는 자동 정렬 기능이 없습니다. 들여쓰기를 가지런히 펴고 싶다면 코드를 복사해 HTML 포맷터에 붙여넣어 정리한 뒤 다시 가져오면 됩니다.

미리보기에서 자바스크립트도 동작하나요?

미리보기 영역은 스크립트 실행이 제한적으로 허용된 격리된 화면에서 그려집니다. 간단한 동작은 확인할 수 있지만, 외부 파일을 불러오는 복잡한 스크립트는 이 미리보기 환경과 실제 웹페이지가 다르게 보일 수 있으니 최종 확인은 실제 브라우저에서 한 번 더 하는 것이 안전합니다.

마크다운으로 쓴 글도 여기에 넣을 수 있나요?

이 편집기는 HTML을 그대로 그려 보는 도구라, 마크다운을 넣으면 기호가 글자 그대로 보입니다. 마크다운을 먼저 마크다운 → HTML 도구로 변환한 다음, 그 결과를 이 편집기에 붙여넣어 확인하세요.

근거: Ace 편집기 + iframe 미리보기 구조, 입력 300ms 디바운스 자동 갱신, 초기 예시 코드와 지우기 버튼은 html-code-editor 뷰 실측. 마지막 검토: 2026년 7월 11일.