HTML 코드 뷰어

오른쪽 패널의 미리보기는 코드가 브라우저에서 어떻게 보일지에 가까운 표현입니다. 예상과 다르게 보인다면 HTML 태그가 올바르게 닫혔는지 확인하세요.

붙여넣은 HTML은 'sandbox' 속성으로 격리된 iframe 안에 배치됩니다. 이 격리는 코드가 실행되도록 허용하면서 사이트의 다른 부분, 쿠키, 다른 탭에 대한 접근은 차단합니다 — 즉, 신뢰할 수 없는 코드도 안전하게 테스트할 수 있습니다.

• HTML(CSS/JavaScript도 포함 가능)을 코드 상자에 붙여넣습니다.
• '미리보기 업데이트'를 클릭하면 코드가 격리된 iframe으로 전달됩니다.
• iframe은 'sandbox' 속성 덕분에 메인 페이지와 격리된 환경에서 코드를 렌더링합니다.
• 결과가 오른쪽 미리보기 영역에 시각적으로 표시됩니다.
• 코드를 편집하고 버튼을 다시 클릭하면 미리보기가 업데이트됩니다.

임베드 iframe 스니펫이나 간단한 HTML/CSS 실험을 붙여넣으면 결과가 즉시 오른쪽 패널에 나타나, 실제 사이트에 추가하기 전에 어떻게 보일지 확인할 수 있습니다.

• 여기서 게시하기 전에 임베드 코드(예: iframe 위젯)가 사이트에서 어떻게 보일지 테스트해 보세요.
• 미리보기는 변경할 때마다 자동으로 업데이트되지 않습니다 — 코드를 편집한 후 '미리보기 업데이트'를 클릭하는 것을 잊지 마세요.
• 미리보기 영역이 격리되어 있으므로 코드 내의 스크립트는 페이지의 나머지 부분에 영향을 주거나 읽을 수 없습니다.

웹 개발 중 HTML 조각이나 임베드 코드가 실제 사이트에서 어떻게 보일지 확인하려면 보통 코드를 먼저 실제 환경에 추가해야 하는데, 이는 시간을 낭비하고 코드에 오류가 있는 경우 사이트의 모양을 망가뜨릴 수 있습니다. 이 도구는 격리된 환경에서 코드를 테스트할 수 있게 하여 이러한 위험을 제거합니다.

이 도구의 핵심은 브라우저가 제공하는 'sandbox' iframe 기능입니다. 이 기능은 iframe 내부의 콘텐츠를 특정 권한 집합 밖에서 완전히 격리합니다. 기본적으로 스크립트 실행 외에는 어떤 기능도 부여되지 않습니다 — 부모 페이지 접근 없음, 양식 제출 없음, 새 창 열기 없음.

이 설계 선택은 의도적입니다: 사용자가 신뢰하지 않는 코드조차 테스트할 수 있는 공간을 제공하면서 실제 사이트(및 사용자의 쿠키와 세션 데이터)를 보호합니다. 많은 전문 코드 공유 플랫폼(CodePen 스타일 도구 등)도 동일한 격리 원칙을 따릅니다.

미리보기는 코드가 변경될 때마다 자동으로 새로고침되지 않습니다. 대신 '미리보기 업데이트' 버튼으로 수동으로 트리거됩니다. 이는 성능을 원활하게 유지하고, 코드가 완성되기 전에 실수로 실행되는 대신 사용자가 코드가 실제로 실행되는 시점을 제어할 수 있게 합니다.

이 도구는 임베드 위젯 테스트, HTML/CSS 아이디어 빠르게 시도하기, 버그 리포트에서 공유된 코드를 안전하게 검토하기, 또는 학습 과정의 일환으로 HTML이 어떻게 렌더링되는지 확인하는 데 유용합니다.