Softonic

HTML 이미지 변환기

단계 1 / 3

HTML 조각을 붙여 넣으세요. 스크립트, 양식, 프레임, 이벤트 처리기는 렌더링 전에 제거됩니다.

HTML과 CSS 조각을 고정 크기 PNG 또는 JPG로 변환하되 소스나 생성 이미지를 저희 서버에 업로드하지 않습니다. 한 변당 64~1,920 px, 배율 1x~3x를 정하고 브라우저 안에서 미리 보고 내려받으세요.

HTML을 이미지로 렌더링하는 방법

  1. 1

    코드 붙여 넣기

    HTML 조각이나 문서를 입력합니다. 인라인 CSS와 `<style>` 규칙을 지원하며 스크립트, 양식, 프레임, 이벤트 처리기는 제거됩니다.

  2. 2

    캔버스 설정

    PNG 또는 JPG를 고르고 너비와 높이, 1x~3x 배율을 지정합니다.

  3. 3

    미리보기 렌더링

    브라우저가 정리된 코드를 고정 크기의 격리된 프레임 안에 배치합니다.

  4. 4

    로컬에 저장

    PNG 또는 JPG를 바로 저장합니다. 생성 파일은 저희 서버에 업로드되지 않습니다.

브라우저 렌더러가 지원하는 항목

변환기는 브라우저의 레이아웃 엔진을 사용합니다. 일반 HTML, 인라인 CSS, <style> 규칙, Flexbox, Grid, 그라데이션, 그림자, 인라인 SVG, 설치된 글꼴을 결과에 반영할 수 있습니다. 출력은 정적인 래스터 이미지이며 조작 가능한 웹페이지 복사본은 아닙니다.

캔버스와 출력 규칙

설정 지원 범위 동작
너비 64~1,920 px 캡처 프레임의 정확한 CSS 너비
높이 64~1,920 px 정확한 CSS 높이, 넘치는 내용은 잘림
배율 1x~3x 레이아웃 크기를 바꾸지 않고 해상도를 높임
PNG 고정 크기 래스터 투명 영역을 유지
JPG 고정 크기 래스터 품질 92%와 흰색 배경 사용

브라우저 메모리를 보호하기 위해 출력은 1,600만 픽셀로 제한됩니다. 크기와 배율이 한도를 넘으면 도구가 가장 높은 안전한 0.5x 단계로 배율을 낮춥니다. HTML 소스는 최대 100,000자입니다.

개인정보 보호와 원격 리소스

HTML과 생성된 데이터 이미지는 현재 브라우저에 남습니다. 단계별 모드에서는 다음 단계로 이동할 수 있도록 이 탭의 세션 저장소에 설정을 보관하며, 처음부터 다시 시작하면 삭제합니다. 코드나 이미지는 저희 서버로 전송되지 않습니다.

외부 URL은 예외입니다. 원격 이미지, 웹 글꼴, 스타일시트는 원본 서버에서 가져오므로 해당 서버가 요청을 볼 수 있습니다. CORS나 접근 제한으로 로딩이 실패할 수도 있습니다. 완전히 오프라인으로 렌더링하려면 이미지와 글꼴을 데이터 URL로 포함하고 CSS도 인라인으로 작성하세요.

안전성과 재현성의 한계

캡처 전에 스크립트, 양식, 중첩 프레임, 임베디드 객체, 이벤트 속성을 제거합니다. 미리보기는 상호작용할 수 없게 되지만, 다른 곳에 게시할 HTML을 위한 범용 보안 정리 도구는 아닙니다. JavaScript 위젯은 실행되지 않고 동영상과 canvas 상태는 보장되지 않습니다. 애니메이션은 한 장의 정지 화면이 되며 브라우저 전용 CSS는 다른 엔진과 다를 수 있습니다.

자주 묻는 질문

가능합니다. 렌더러는 head의 지원되는 <style> 규칙과 스타일시트 링크를 가져오고 body 내용을 캡처합니다. 스크립트, 메타데이터, 양식, 프레임, 활성 처리기는 제거되므로 탐색 가능한 페이지처럼 작동하지 않습니다.

원본 서버가 교차 출처 사용을 막거나 로그인을 요구하거나 너무 늦게 응답할 수 있습니다. CORS를 허용하는 접근 가능한 URL을 쓰거나 리소스를 데이터 URL로 포함하세요.

PNG는 투명 픽셀을 유지합니다. JPG는 흰색 배경과 고정 품질 92%를 사용해 사진에서 더 작을 때가 많습니다. WebP 출력이나 별도 품질 조절은 지원하지 않습니다.

출력을 1,600만 픽셀로 제한하기 때문입니다. 큰 캔버스에서는 브라우저 메모리 부족을 막기 위해 가장 높은 안전한 0.5x 단계를 자동으로 선택합니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

이 도구는 다른 언어로도 제공됩니다