HTML 이미지 변환 — HTML·CSS 코드를 PNG로 저장

HTML → 이미지 변환이란?

HTML과 CSS로 만든 카드, 공지, 표, 버튼, 이메일 배너 같은 화면 조각을 PNG 이미지로 저장하는 도구예요. 개발 문서나 블로그에 코드 결과 화면을 넣고 싶을 때, SNS용 공지 카드를 코드로 빠르게 만들 때, 디자인 시안 일부를 이미지로 공유할 때 쓸 수 있어요. 스크린샷 프로그램으로 화면을 자르는 것과 달리 정확한 너비와 배율로 깔끔하게 저장돼요.

사용법

1. HTML 칸에 코드를 붙여 넣어요. 문서 전체(<html>…)를 넣어도 되고, 조각만 넣어도 돼요. 처음이라면 예시 넣기를 눌러 보세요.
2. 필요하면 CSS 칸에 스타일을 따로 넣어요. HTML 안의 <style>도 함께 적용돼요.
3. 캡처 너비(px), 배율(1×·2×·3×), 배경(흰색·투명)을 정해요.
4. 미리보기를 확인한 뒤 PNG로 만들기를 누르고 PNG 저장으로 내려받아요.

변환 기준

• 안전한 미리보기: 코드는 샌드박스 iframe 안에 그려요. 샌드박스가 스크립트 실행을 막고, 콘텐츠 보안 정책(CSP)이 data:·blob: 주소 외의 네트워크 요청을 막아요.
• 외부 주소 제거: 붙여 넣은 코드를 먼저 브라우저의 HTML·CSS 파서로 읽어(이때는 아무것도 불러오지 않아요) src, srcset, poster, SVG href, style 속성, <style>, url(), image-set(), @import, @font-face에 들어 있는 주소 가운데 data:·blob:가 아닌 것을 모두 지우고 목록으로 알려 줘요. 캡처 직전에도 미리보기를 한 번 더 확인하고, 캡처하는 동안에는 data:·blob: 주소만 읽을 수 있게 막아 두어서 외부 주소로는 요청이 한 번도 나가지 않아요. 링크(<a href>)는 그림에 영향이 없어 목록에 넣지 않고, 눌러도 이동하지 않게 바꿔요.
• 캡처 크기: 정한 너비로 배치한 뒤 내용의 실제 높이만큼 캡처해요. PNG 크기는 너비×배율, 높이×배율이에요.
• 크기 한도: 브라우저가 다룰 수 있는 크기(아이폰·아이패드 16,777,216화소, 한 변 16,384px)를 넘으면 배율을 자동으로 낮추고 알려 줘요.
• 문서 전체 입력: <body> 안쪽과 모든 <style>만 쓰고 <head>의 다른 태그는 버려요.
• 캡처에는 html-to-image(MIT 라이선스)를 써요.

예시

입력	설정	결과
예시 공지 카드	너비 800, 2×	1600px 너비 PNG
표(<table>) + CSS	너비 600, 3×, 투명	1800px 너비, 배경 투명 PNG
외부 이미지가 있는 코드	너비 800, 1×	외부 이미지는 빈칸, 막은 주소 목록 표시

벡터 그림이라면 SVG → PNG 변환을, 마크다운 문서는 마크다운 미리보기를 함께 써 보세요.