HTML로 내보내기

캔버스에 쌓은 것 전체를 파일 하나로 떨어뜨립니다. 이미지로 내보내는 것과 달리 글자가 글자로 남는다는 점이 가장 큰 차이입니다.

이 문서가 다루는 도구는 블록 에디터 입니다 — 제목·이미지·표·그래프를 세로로 쌓아 상세페이지를 만들고 PNG 나 HTML 파일로 내려받습니다. 옆에 열어 두고 따라 하시면 빠릅니다. 다른 도구는 도구 목록에 있습니다.

내보내는 법

오른쪽 위 Export 버튼을 누르고 HTML로 내보내기 를 고릅니다. export.html 이라는 파일 하나가 다운로드 폴더에 저장됩니다. 확인 창은 뜨지 않고 바로 저장됩니다.

어떤 파일이 나오나

결과물의 성격을 알면 어디에 쓸 수 있는지 판단이 빨라집니다.

• 파일 하나로 끝납니다. 별도의 css 폴더나 이미지 폴더가 따라붙지 않습니다.
• 스타일이 파일 안에 들어 있습니다. 문서 머리에 <style> 이 통째로 박혀 있고, 바깥 스타일시트를 불러오지 않습니다.
• 넣은 이미지가 파일 안에 함께 저장됩니다. 그림이 파일 자체에 담기기 때문에, 원본 사진이 없는 컴퓨터에서 열어도 그대로 보입니다. 대신 사진이 많으면 파일 용량이 그만큼 커집니다.
• 자바스크립트가 없습니다. 내보낸 파일에는 스크립트가 한 줄도 들어가지 않습니다. 정적인 결과물이라 어디에 올려도 동작이 같습니다.
• 가로폭은 860px 로 고정되고 화면 가운데에 놓입니다. 배경은 회색입니다.
• 글꼴만 예외적으로 Google Fonts 를 불러옵니다. 인터넷이 끊긴 상태에서 열면 글꼴이 기본 글꼴로 바뀌지만, 글과 배치는 그대로 나옵니다.

이럴 때 HTML이 낫습니다

• 글자를 복사하게 해야 할 때. 이미지로 내보내면 문장이 그림이 되어 긁어 갈 수 없습니다.
• 검색에 걸려야 할 때. 웹에 올리는 경우 이미지 안의 글자는 읽히지 않습니다.
• 문장 한 줄만 고쳐야 할 때. 텍스트 편집기로 파일을 열어 그 단어만 바꾸면 됩니다.
• 화면 폭이 넓은 곳에서 볼 때. 이미지와 달리 확대해도 글자가 깨지지 않습니다.

반대로 이미지가 나은 경우

글자를 그대로 두면 보는 곳마다 글꼴이 달라질 수 있습니다. 지정한 글꼴이 없는 환경에서는 대체 글꼴로 그려지면서 줄바꿈 위치가 조금씩 밀립니다. 배치가 한 픽셀도 달라지면 안 되는 결과물이라면 이미지로 내보내기가 더 안전합니다.

업로드하는 곳이 HTML 을 아예 받지 않는 경우도 흔합니다. 그럴 때도 이미지 쪽입니다.

내보낸 파일 쓰는 법

1. 그냥 열어 본다 — 파일을 더블클릭하면 브라우저가 엽니다. 확인용으로 가장 빠릅니다.
2. 그대로 올린다 — 정적 파일을 올릴 수 있는 곳이면 이 파일 하나만 올려도 페이지가 됩니다.
3. 일부만 떼어 붙인다 — 텍스트 편집기로 열면 위쪽이 스타일, 아래쪽이 내용입니다. 이미 스타일이 있는 페이지에 붙일 때는 <style> 안쪽과 내용 부분을 함께 가져가야 모양이 유지됩니다.
4. 보관해 둔다 — 작업물은 브라우저 안에만 있으므로, 완성본 HTML 파일이 사실상 백업 역할을 합니다. 자세한 사정은 저장은 어디에 되나에 있습니다.