HTML을 이미지로
HTML과 CSS를 붙여 넣으면 PNG, JPG, WebP, SVG로 만들어 줍니다. 픽셀 밀도는 1배, 2배, 3배 중에서 고릅니다. SNS 카드, 코드 조각, 배너, 이메일 머리글에 쓸 만합니다.
픽셀 밀도
배경
마크업은 이 기기에서 그려집니다. 스크립트는 실행되지 않고 다른 사이트의 이미지나 글꼴도 불러오지 않으니, data: URL과 시스템 글꼴을 쓰세요. 실제 웹페이지를 캡처하려면 브라우저 자체의 스크린숏 기능을 쓰세요(Chrome: DevTools에서 Capture full size screenshot).
사용 방법
- HTML을 붙여 넣으세요. CSS는 style 태그 안에 넣으면 됩니다.
- 너비를 CSS 픽셀로 정하세요. 높이를 비워 두면 내용에 맞춥니다.
- 픽셀 밀도(휴대폰에서 글자를 선명하게 보이려면 2배)와 배경을 고르세요.
- '이미지 만들기'를 누르고 미리보기를 확인한 뒤 내려받으세요.
그릴 수 있는 것과 없는 것
- 브라우저가 지원하는 모든 HTML 요소와 CSS. flexbox, grid, 그러데이션, 테두리, 시스템 글꼴도 됩니다.
- 이미지는 data: URL로만 넣을 수 있습니다. 브라우저는 페이지가 다른 사이트의 픽셀을 읽지 못하게 하므로, 다른 사이트의 그림과 웹 글꼴은 불러오지 않습니다.
- 스크립트는 실행되지 않습니다. 마크업은 스크립트가 꺼진 샌드박스에서 배치됩니다.
주소로 웹페이지 캡처하기
URL을 이미지로 바꾸려면 페이지를 대신 열어 줄 서버가 필요한데, 그러려면 주소를 서버에 보내고 서버가 캡처 내용을 보게 됩니다. 이 사이트에는 서버가 없습니다. 대신 브라우저가 할 수 있습니다. Chrome이나 Edge에서 DevTools(F12)를 열고 Ctrl+Shift+P를 누른 뒤 'Capture full size screenshot'을 실행하세요. Firefox는 오른쪽 클릭 메뉴에 '스크린샷 찍기'가 있습니다.