온라인 HTML / CSS / JS 실시간 뷰어

HTML, CSS, JavaScript 코드를 탭별로 입력하면 하단 미리보기 창에 즉시 렌더링됩니다. 간단한 UI 프로토타입, 스타일 테스트, 스니펫 검증에 활용하세요.

미리보기

사용법

  1. HTML, CSS, JavaScript 탭을 각각 눌러 코드를 입력합니다.
  2. 입력하는 즉시(약 0.6초 디바운스 후) 하단 미리보기 iframe에 결과가 자동 반영됩니다. 실행 버튼으로 즉시 반영시킬 수도 있습니다.
  3. 결과를 더 크게 보고 싶다면 새 탭에서 열기를 누르거나 미리보기 크기를 조절하세요.

언제 쓰면 좋은가

  • CSS 스타일 하나를 빠르게 테스트해보고 싶은데 프로젝트 전체를 실행하기는 번거로울 때
  • 간단한 UI 컴포넌트 프로토타입을 만들어 동료에게 링크로 공유하기 전에 미리 확인할 때
  • JS 스니펫이 특정 브라우저 환경에서 어떻게 동작하는지 격리된 상태로 검증할 때

자주 묻는 질문

Q. 입력한 코드가 서버에 저장되나요?
아니요. 모든 코드는 브라우저 안의 sandbox iframe에서만 실행되며 어디에도 전송·저장되지 않습니다.

Q. 외부 라이브러리(CDN)를 불러올 수 있나요?
HTML 탭에 <script src="..."> 태그를 직접 추가하면 iframe 안에서 로드됩니다. 단, sandbox 보안 정책상 일부 기능은 제한될 수 있습니다.

다른 도구