HTML Preview

Preview HTML code

Preview HTML code 브라우저에서 로컬로 실행됩니다.

About the

HTML 미리보기는 HTML의 일부를 실시간으로 렌더링하므로 파일을 저장하거나 열지 않고도 생성되는 내용을 확인할 수 있습니다. 이메일 템플릿, 구성요소의 마크업, 콘텐츠 관리 시스템의 스니펫 또는 어딘가에 붙여넣기 전에 확인하고 싶은 기타 모든 항목과 같은 짧은 스니펫을 위한 것입니다. 편집과 미리보기 사이의 전환이 즉각적이므로 마크업 조정을 위한 빠른 루프가 됩니다.

Where people use the

테스트를 보내기 전에 이메일 템플릿 조각을 확인합니다.
콘텐츠 관리 시스템에서 붙여넣은 마크업을 미리 봅니다.
풀 요청에 코드 조각을 붙여넣기 전에 코드 조각의 상태를 확인합니다.
테이블이나 목록이 예상한 대로 렌더링되는지 테스트합니다.

How to use the

1
마크업 붙여넣기
HTML 조각을 편집기에 입력하거나 붙여넣습니다. 전체 문서 또는 일부 조각 모두 작동합니다.
2
미리보기로 전환
미리보기를 눌러 렌더링합니다. 마크업은 브라우저에 나타나는 것처럼 페이지에 그려집니다.
3
다시 전환하고 조정하세요.
마크업으로 돌아가려면 편집을 누르세요. 변경 사항이 유지되므로 반복할 수 있습니다.
4
기분 좋을 때 복사해 보세요
편집기에서 마크업을 선택하고 프로젝트에 복사합니다.

팁 및 모범 사례

조각이 여기에 없는 스타일시트에 의존하는 경우 인라인 스타일을 추가하세요.
깨끗한 렌더링은 유효한 마크업의 증거가 아닙니다. 브라우저는 오류를 덮어버립니다.
스크립트 동작이 포함된 전체 페이지가 아닌 조각에 대한 미리보기를 염두에 두세요.

자주 묻는 질문

CSS와 JavaScript를 지원합니까?

스타일 태그와 인라인 스타일이 렌더링됩니다. 스크립트는 마크업으로 렌더링되지만 이는 조각의 미리보기이므로 스크립트 동작을 신뢰할 수 없는 것으로 취급하십시오.

내 스니펫이 내 사이트와 다르게 보이는 이유는 무엇인가요?

주변 스타일시트가 누락되었기 때문입니다. 프래그먼트는 여기에서 아무것도 상속하지 않으므로 사이트의 CSS에 의존하는 모든 항목은 스타일이 지정되지 않은 것처럼 보입니다.

외부 이미지나 글꼴을 로드할 수 있나요?

예, 공개적으로 접근할 수 있는 경우에는 주변 페이지의 자체 규칙이 여전히 적용되지 않습니다.

마크업이 업로드되었나요?

아니요. 렌더링은 브라우저에서 발생하므로 게시되지 않은 템플릿과 내부 콘텐츠는 장치에 남아 있습니다.

HTML의 유효성을 검사합니까?

아니요. 귀하가 제공하는 것을 렌더링합니다. 브라우저는 일부 실수를 자동으로 수정하므로 깔끔한 렌더링은 마크업이 유효하다는 것을 증명하지 않습니다.