HTML 편집기

HTML, CSS, JavaScript 탭에 코드를 작성하면 옆의 미리 보기에 입력하는 대로 페이지가 표시됩니다. ‘입력하는 대로 자동 업데이트’의 체크를 해제하면 ‘실행’을 클릭하거나 Ctrl+Enter를 누를 때만 코드가 실행됩니다. 편집기는 코드를 강조 표시하고, 새 줄을 들여 쓰고, 괄호와 태그를 닫아 주며, 여백에 오류를 표시합니다. 미리 보기 아래의 콘솔에는 스크립트가 console.log()로 출력한 내용과 발생한 오류가 줄 번호와 함께 나타납니다. 미리 보기 위의 버튼으로 노트북, 태블릿, 휴대폰 너비로 페이지를 볼 수 있고, 전체 화면 버튼을 누르면 편집기가 창 전체를 차지합니다.

페이지는 별도의 샌드박스 프레임에서 실행되므로 그 스타일과 스크립트가 이 사이트를 바꿀 수 없고, 사이트도 여러분의 코드를 읽지 않습니다. 코드는 입력하는 대로 브라우저에 저장되어 편집기를 다시 열어도 그대로 남아 있습니다. ‘HTML 복사’와 ‘HTML 다운로드’는 CSS와 JavaScript가 들어 있는 하나의 HTML 파일로 페이지 전체를 내보내므로, 바로 브라우저에서 열거나 업로드할 수 있습니다. ‘파일 열기’는 HTML, CSS, JavaScript 파일을 해당 탭으로 불러옵니다. ‘예제 불러오기’를 누르면 샘플 페이지가 다시 나타납니다. 이 편집기는 오픈 소스 코드 편집기인 Ace를 바탕으로 만들어졌습니다.