너비
HTML
미리보기
요소 수, 제목 개요, 마크업 문제 목록을 보려면 검사를 누르세요.
문제
제목 개요
가장 많이 사용된 태그
스크립트 실행이 허용되면 미리보기의 콘솔 출력이 여기에 표시됩니다.
요소 수, 제목 개요, 마크업 문제 목록을 보려면 검사를 누르세요.
스크립트 실행이 허용되면 미리보기의 콘솔 출력이 여기에 표시됩니다.
이메일 템플릿, 티켓에서 가져온 코드 조각, 내보낸 보고서처럼, 때로는 HTML 조각이 어떻게 보이는지 확인만 하면 될 때가 있습니다. 붙여넣으면 입력하는 대로, 잠긴 프레임 안에서, 선택한 화면 너비로 렌더링됩니다. 미리보기 옆에서 코드를 정리하거나 줄이고, 콘솔과 함께 스크립트를 실행하고, 마크업에서 실제로 잘못된 부분의 목록을 볼 수 있습니다.
붙여넣은 HTML에는 직접 작성하지 않은 스크립트, 폼, 링크가 들어 있을 수 있습니다. 미리보기는 고유한 불투명 출처(opaque origin)를 가진 sandbox iframe 안에서 실행되므로, 그 안의 어떤 것도 이 사이트의 쿠키나 세션을 읽거나, 사용자 대신 어딘가로 제출하거나, 이 페이지를 다른 곳으로 이동시킬 수 없습니다. 스크립트는 직접 켜기 전까지 꺼져 있습니다.
표준 HTML 파서로 마크업을 읽고 실제로 본 것만 보고합니다. 열렸지만 닫히지 않은 태그, 여는 태그 없는 닫는 태그, alt 텍스트가 없는 이미지, 중복된 id, rel="noopener" 없이 새 탭을 여는 링크, 건너뛴 제목 수준, http://로 불러오는 리소스, 그리고 전체 페이지라면 doctype, title, lang, viewport 태그 누락입니다.
검사는 스타일이 아니라 오류를 알려 줍니다. HTML 표준이 생략을 허용하는 닫는 태그, 예를 들어 </p>, </li>, </td>, </tr>, </option>은 닫히지 않은 태그로 나오지 않으며, <br>, <img>, <input> 같은 빈 요소는 닫는 태그가 필요 없습니다. 비어 있는 alt=""도 대체 텍스트로 인정되며, 장식용 이미지에는 이것이 맞습니다. target="_blank" 링크는 rel="noopener" 또는 rel="noreferrer"가 있으면 통과합니다. <a href>의 일반 http:// 링크는 안전하지 않은 것으로 세지 않고, 이미지, 스크립트, 스타일시트, iframe처럼 불러오는 리소스만 셉니다. 제목 단계를 다시 올라가는 것(h4에서 h2)은 괜찮고, 한 단계를 건너뛰어 내려가는 것(h2에서 h4)만 지적합니다. doctype, title, lang, viewport 검사는 붙여 넣은 내용이 전체 페이지일 때, 즉 doctype이나 html, head, body 태그가 있을 때만 실행되므로 이메일 블록이나 CMS 조각은 이 항목으로 감점되지 않습니다.
많은 사람이 휴대폰에서 메일을 열기 때문에 먼저 모바일 너비(375 px)로 보고, 그다음 태블릿(768 px)과 데스크톱(1280 px)으로 확인하세요. 스크립트는 꺼 두세요. 메일 앱은 JavaScript를 실행하지 않으므로 스크립트 없는 미리보기가 받는 사람이 보는 화면에 더 가깝습니다. 이미지는 https://로 시작하는 절대 URL을 쓰세요. 미리보기도, 받는 사람의 메일 앱도 내 컴퓨터의 파일은 볼 수 없습니다. 최소화는 일반 주석을 지우지만 <!--[if로 시작하는 조건부 주석(<!--[if mso]> ... <![endif]--> 등)은 남깁니다. 하지만 <!--[if !mso]><!--> 패턴의 닫는 표시 <!--<![endif]-->는 남기지 않으므로, 이 패턴을 쓰는 템플릿은 최소화하지 마세요. Outlook에서 그 뒤의 내용이 모두 숨겨질 수 있습니다. 미리보기는 브라우저 렌더링입니다. Windows용 클래식 Outlook은 Word 엔진으로 메일을 그리므로 대량 발송 전에 그곳으로 테스트 메일을 보내 확인하세요.
미리보기, 정렬, 최소화는 브라우저에서 처리됩니다. 마크업을 서버로 보내는 것은 검사 보고서뿐이며, 서버에서 파싱해 같은 응답으로 돌려줍니다. 디스크에 쓰거나 로그에 남기지 않으며, 사용 기록에는 개수만 남습니다.
붙여넣은 코드는 신뢰할 수 없기 때문에 스크립트는 기본적으로 꺼져 있습니다. "스크립트 실행"을 체크하면 여전히 샌드박스 안에서 JavaScript가 켜진 상태로 미리보기가 다시 로드되고, 콘솔 출력이 미리보기 아래에 표시됩니다.
미리보기는 붙여넣은 텍스트로 만들어지며 사용자의 컴퓨터나 서버에서 불러오는 것이 아닙니다. 그래서 images/logo.png 같은 상대 경로는 이 사이트에서 찾게 되고 찾을 수 없습니다. 절대 URL을 사용하거나, 파일이 실제로 있는 위치를 가리키는 <base href="..."> 태그를 추가하세요.
태그 사이의 들여쓰기만 다시 맞추고 pre, textarea, script, style의 내용은 그대로 둡니다. 인라인 요소 사이의 공백이 가끔 약간 달라질 수 있으니 포맷 후 미리보기를 확인하세요.
검사 보고서는 최대 1,000,000자까지 받으며 문제는 최대 200개까지 보여 줍니다. 입력이 매끄럽도록 실시간 미리보기는 200,000자를 넘으면 일시 중지되며, 새로고침이나 Ctrl+Enter로 업데이트할 수 있습니다.
네. 이메일의 HTML을 붙여 넣거나 .html 파일을 열고, 너비를 모바일(375 px)과 데스크톱(1280 px)으로 바꿔 두 레이아웃을 확인한 뒤 검사를 눌러 alt 텍스트가 없는 이미지와 암호화되지 않은 http://로 불러오는 리소스를 찾으세요. 미리보기는 브라우저의 엔진을 쓰지만 이메일 클라이언트는 저마다 엔진이 다르고 상당수가 CSS 일부를 버리므로, 브라우저에서 여는 웹메일과 대체로 비슷할 뿐 모든 받은편지함과 똑같지는 않습니다. 이메일 클라이언트는 JavaScript를 실행하지 않으니 스크립트 실행은 꺼 두세요. 실제로 보내기 전에 독자들이 쓰는 클라이언트로 테스트 메일을 보내 보세요.
직접 여는 것보다 안전합니다. 파일 열기는 파일을 브라우저 안의 편집기로 불러오며, 검사를 누르지 않는 한 서버로는 아무것도 전송되지 않습니다. 미리보기는 스크립트와 양식 제출이 꺼진 격리된 샌드박스 프레임에서 표시되므로, 페이지는 코드를 실행하거나 양식을 보내거나 이 사이트의 쿠키에 접근할 수 없습니다. 다만 전체 http(s) 주소를 가진 이미지와 스타일시트는 그대로 로드되므로 보낸 사람이 파일이 열린 것을 알 수 있습니다. 먼저 소스를 읽고, 스크립트 실행은 끈 상태로 두고, 받은 페이지에는 절대 비밀번호를 입력하지 마세요.
파일 열기는 파일을 항상 UTF-8로 읽고, 안에 있는 <meta charset> 태그는 무시합니다. EUC-KR이나 CP949로 저장된 페이지(오래된 Windows 편집기와 내보내기 파일에서 흔합니다)는 한글을 올바른 UTF-8이 아닌 바이트로 저장하므로 각 글자가 대체 문자 �로 표시됩니다. 편집기에서 파일을 열어 UTF-8로 다시 저장한 뒤(메모장: 다른 이름으로 저장에서 인코딩 UTF-8, VS Code: 상태 표시줄의 인코딩을 클릭한 다음 Save with Encoding) 여기서 다시 여세요. 또는 브라우저에서 파일을 열고 소스를 본 뒤 여기에 붙여 넣으세요. 브라우저가 이미 페이지 자체의 charset으로 디코딩했습니다.
샌드박스는 스크립트 실행을 켜도 폼 제출과 팝업을 절대 허용하지 않습니다. 그래서 제출 버튼을 눌러도 아무것도 전송되지 않고, target="_blank" 링크와 window.open() 호출은 차단됩니다. 이렇게 해서 붙여 넣은 페이지가 데이터를 보내거나 다른 사이트를 열 수 없습니다. 일반 링크는 미리보기 프레임 안에서 열리고, 프레임 표시를 거부하는 사이트는 빈 화면이나 거부 화면으로 보입니다. 폼을 확인하려면 소스에서 action, method와 필드를 읽으세요. 검사는 rel="noopener"가 없는 모든 target="_blank" 링크도 보여 줍니다. 실제 제출은 직접 운영하는 개발 서버에서 테스트하세요.