HTML 이미지 변환: HTML을 PNG·JPG로

HTML 코드를 붙여넣거나 .html 파일을 열면 PNG·JPG 이미지로 변환됩니다. 배율은 1·2·3배, 배경을 투명하게 할 수도 있습니다. 무료이고 설치할 것도 없으며, 아무것도 브라우저 밖으로 나가지 않습니다. 지금 보고 있는 웹페이지, 로그인이 필요한 페이지, 자바스크립트로 만들어지는 페이지는 무료 FullPage Capture 확장 프로그램을 쓰세요.

업데이트 2026년 10월 15일작성: FullPage Capture 팀

HTML 코드

<!doctype html>
<html>
<head>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #0b0f19; color: #f3f5f9; }
  .card { margin: 48px; padding: 40px; border-radius: 24px; background: linear-gradient(135deg, #1d9bf0, #7856ff); }
  h1 { margin: 0 0 12px; font-size: 44px; letter-spacing: -0.02em; }
  p { margin: 0; font-size: 20px; opacity: .9; }
  ul { margin: 24px 48px 48px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  li { padding: 20px; border-radius: 16px; background: #161b26; font-size: 18px; }
</style>
</head>
<body>
  <div class="card">
    <h1>Hello from HTML</h1>
    <p>Edit this code, then press Convert to image.</p>
  </div>
  <ul><li>PNG or JPG</li><li>1x, 2x or 3x</li><li>Nothing uploaded</li></ul>
</body>
</html>

또는 .html 파일 열기이미지와 CSS 파일도 함께 고르면 파일 이름으로 연결됩니다.

너비(px)배율형식배경

HTML을 PNG·JPG로 변환하는 방법

HTML을 붙여넣거나 파일 열기. 페이지 전체든 일부든 상자에 붙여넣습니다. 컴퓨터의 .html 파일을 열 수도 있고, 이미지와 CSS를 같은 창에서 함께 고르면 파일 이름으로 쓰입니다.

너비와 배율 정하기. 너비는 코드를 배치하는 CSS 너비, 즉 브라우저 창 너비입니다. 2배면 고해상도 화면과 인쇄에서도 선명하고, 작은 글씨에는 3배를 쓰세요.

변환하고 다운로드. 이미지로 변환을 누르고 미리보기를 확인한 뒤 PNG(무손실, 투명 가능)나 JPG(가벼움, 흰 배경)를 내려받습니다.

HTML을 PNG로 바꾸는 도구. 분홍에서 보라로 이어지는 세일 배너 코드를 넣고 너비 900, 2배, PNG로 변환한 1,800×1,082픽셀 결과 이미지와 Download PNG 버튼. — HTML로 만든 세일 배너를 900 px, 2배로 변환: 1,800×1,082픽셀 이미지.

이럴 때 좋습니다

HTML 이메일 템플릿: 검토, 고객, 디자인 파일용 이메일 이미지.
HTML과 CSS로 만든 SNS 카드와 배너를 2배 PNG로.
코드 설명과 문서: HTML을 글자가 아니라 보이는 모습 그대로.
컴퓨터의 파일: 내보낸 보고서, 청구서, .html로 저장한 페이지.
투명 PNG: 배경 없는 배지, 버튼 같은 조각.

변환 도구와 확장 프로그램, 무엇을 쓸까?

변환 도구는 가지고 있는 코드를 그립니다. 확장 프로그램은 스크립트, 글꼴, 이미지가 모두 불러와진 뒤의 페이지를 로그인한 화면까지 브라우저에 보이는 그대로 찍습니다.

	HTML→PNG 변환(이 페이지)	FullPage Capture 확장 프로그램
HTML 코드나 컴퓨터의 .html 파일	예	예파일 URL 액세스 허용
주소로 여는 실제 웹페이지	아니요	예
로그인이 필요한 페이지, 웹 앱	아니요	예
자바스크립트로 만든 내용	아니요스크립트 꺼짐	예
아주 긴 페이지	약 32,000 px까지	예그 이상은 나눠 저장
페이지 나누기가 있는 PDF	아니요	예
설치 불필요	예	아니요무료, 계정 불필요

자주 묻는 질문

HTML이 어딘가에 업로드되나요?

아니요. 변환은 내 브라우저 안에서 이뤄집니다. 코드는 이 페이지의 숨은 프레임에서 배치되어 바로 캔버스에 그려지며, 저희 서버나 다른 어디로도 전송되지 않습니다. 코드가 연결한 이미지는 브라우저처럼 각 서버에서 불러옵니다.

HTML 안의 자바스크립트가 실행되나요?

아니요. 안전을 위해, 그리고 매번 같은 이미지가 나오도록 프레임에서 스크립트를 꺼 두었습니다. 자바스크립트로 내용을 만드는 페이지(React 앱, 스크립트로 그린 차트)는 Chrome에서 열고 확장 프로그램으로 캡처하세요. 스크립트 실행 후의 페이지를 찍습니다.

이미지나 글꼴이 빠지는 이유는?

이미지를 결과에 넣으려면 이 페이지가 먼저 그 이미지를 읽어야 하는데, 일부 서버는 다른 사이트의 읽기를 막습니다(CORS). 불러오지 못한 개수는 도구가 알려 줍니다. 컴퓨터의 이미지는 .html 파일과 함께 고르세요. 같은 이유로 그런 서버의 웹 글꼴은 시스템 글꼴로 바뀝니다.

PNG와 JPG 중 무엇을 고를까요?

PNG는 모든 픽셀을 지키고 배경을 투명하게 할 수 있어 화면 캡처, 글자, 이메일 템플릿에 맞습니다. JPG는 가볍고 배경은 항상 흰색이라 사진이나 빠르게 보내는 미리보기에 충분합니다.

HTML 이메일 템플릿을 이미지로 만들 수 있나요?

네, 대표적인 용도입니다. 템플릿을 붙여넣고 너비를 600~640 px로 맞추면 브라우저가 배치한 그대로의 이메일 이미지가 나옵니다. 메일 프로그램마다 표시가 다를 수 있으니 중요한 프로그램에서도 확인하세요.

지금 보고 있는 웹페이지를 PNG로 만들려면?

확장 프로그램을 쓰세요. Chrome이나 Edge에서 페이지를 열고 아이콘을 누르면 스크립트, 글꼴, 로그인 화면까지 포함해 페이지 전체가 PNG·JPG·PDF 한 장이 됩니다. 웹페이지를 PNG·JPG로 저장

확장 프로그램으로 컴퓨터의 .html 파일을 찍을 수 있나요?

네. Chrome은 허용하기 전까지 확장 프로그램이 컴퓨터의 파일에 접근하지 못하게 합니다. chrome://extensions에서 FullPage Capture의 세부정보를 열고 파일 URL에 대한 액세스 허용을 켠 다음, 파일을 Chrome에서 열고 아이콘을 누르세요.

실제 웹페이지 전체를 이미지로 만들려면 확장 프로그램을 설치하고 아무 페이지에서나 아이콘을 누르세요.

Chrome에 추가

이미지 대신 문서로 남기고 싶다면 웹페이지를 PDF로 저장하세요.

HTML 이미지 변환: HTML을 PNG·JPG로

HTML을 PNG·JPG로 변환하는 방법

이럴 때 좋습니다

변환 도구와 확장 프로그램, 무엇을 쓸까?

자주 묻는 질문

관련 페이지