HTML 미리보기

HTML과 CSS를 붙여넣으면 격리된 프레임에서 바로 렌더링해 보여줍니다. 필요하면 스크립트도 실행할 수 있습니다. 무료 온라인 도구.

이 도구는

HTML과 CSS를 붙여넣으면 어떻게 그려지는지 바로 보여줍니다. 미리보기는 이 페이지에 접근할 수 없는 격리된 프레임에서 실행됩니다.

사용 방법

HTML을 붙여넣습니다. <style> 블록을 넣어도 됩니다.
JavaScript가 필요하면 스크립트 허용을 켭니다.
렌더링 결과를 확인합니다.

자주 묻는 질문

믿을 수 없는 HTML을 미리 봐도 안전한가요?

같은 출처 권한 없이 격리된 프레임이라 이 사이트의 데이터를 읽을 수 없습니다. 믿을 수 없는 코드는 스크립트를 끈 채로 보세요.

외부 CSS나 이미지도 불러오나요?

네. HTML 안의 외부 리소스는 프레임이 불러옵니다.

스크립트가 실행되지 않는 이유는?

기본으로 꺼져 있습니다. 스크립트 허용을 켜세요.

관련 도구

Markdown 미리보기 – GitHub 스타일 Markdown 렌더링
HTML → JSX – HTML 마크업을 React JSX로 변환
HTML 엔티티 인코딩 / 디코딩 – HTML 엔티티 이스케이프와 해제

포맷

JSON 포맷 / 검증 – JSON 정렬, 압축, 문법 검사
줄 정렬 / 중복 제거 – 줄 정렬, 중복 제거, 뒤집기, 공백 정리

인코딩 / 디코딩

Base64 인코딩 / 디코딩 – 텍스트를 Base64로 변환 (UTF-8)
URL 인코딩 / 디코딩 – URL 퍼센트 인코딩과 디코딩
HTML 엔티티 인코딩 / 디코딩 – HTML 엔티티 이스케이프와 해제
Base64 이미지 인코딩 / 디코딩 – 이미지를 data URI로 바꾸고 Base64 이미지 미리보기
백슬래시 이스케이프 / 해제 – 따옴표, 줄바꿈, 제어 문자 이스케이프
Hex ↔ ASCII – 텍스트와 16진수 바이트 상호 변환
JWT 디버거 – JSON Web Token 헤더와 페이로드 해석

생성

UUID / ULID 생성 / 분석 – UUID v4 / v7, ULID 생성과 기존 ID 분석
해시 생성기 – MD5, SHA-1, SHA-256, SHA-384, SHA-512 해시
랜덤 문자열 생성기 – 암호학적으로 안전한 랜덤 문자열
Lorem Ipsum 생성기 – 문단·문장·단어 단위 더미 텍스트
QR 코드 생성 / 읽기 – QR 코드를 만들고 이미지에서 읽기

변환

세계 시간 변환 – 시간대 간 시각 변환 (기본값: 이 컴퓨터의 현재 시각)
유닉스 시간 변환 – 유닉스 타임스탬프와 날짜 문자열 변환
진법 변환기 – 2진수, 8진수, 10진수, 16진수 상호 변환
YAML ↔ JSON – YAML과 JSON 상호 변환
CSV ↔ JSON – CSV와 JSON 상호 변환
HTML → JSX – HTML 마크업을 React JSX로 변환
쿼리 문자열 ↔ JSON – URL 쿼리 문자열과 JSON 상호 변환
URL 파서 – URL을 구성 요소와 쿼리 파라미터로 분해
색상 변환기 – HEX, RGB, HSL, HWB, CMYK 상호 변환
SVG → CSS – SVG를 CSS 배경용 data URI로 변환
JSON ↔ PHP 배열 – JSON과 PHP 배열 문법 상호 변환
PHP Serialize / Unserialize – JSON과 PHP serialize() 형식 상호 변환

텍스트

정규식 테스터 – 정규식을 테스트하고 매치 결과 확인
문자열 케이스 변환 – camelCase, snake_case, kebab-case 등
문자열 분석 – 글자·바이트·단어 수와 코드 포인트 확인
텍스트 비교 – 두 텍스트를 줄·단어·글자 단위로 비교

검사

Cron 식 해석 – cron 식 설명과 다음 실행 시각
cURL 분석 – cURL 명령을 분해하고 fetch() 코드로 변환
X.509 인증서 디코더 – PEM 인증서와 체인 분석

미리보기

Markdown 미리보기 – GitHub 스타일 Markdown 렌더링
HTML 미리보기 – 격리된 프레임에서 HTML 렌더링