HTML 플레이그라운드 도구
HTML, CSS, JavaScript를 자유롭게 실험할 수 있는 안전한 샌드박스입니다.
소개
HTML 플레이그라운드는 아무런 결과 없이 코드를 실험할 수 있는 샌드박스형 온라인 환경입니다. 원하는 것을 작성하고, 실행하고, 결과를 확인하고, 다시 시작하세요. 웹 기술을 배우고, 테스트하고, 탐색할 수 있는 완벽한 장소입니다.
놀이터가 다른 이유는 무엇입니까?
놀이터는 실험을 위해 설계되었습니다. 프로덕션 IDE와 달리 걱정할 프로젝트 구조, 저장할 파일, 배포 파이프라인이 없습니다. 당신에게는 빈 캔버스가 있고 무엇이든 시도할 자유가 있습니다.
이는 특히 다음과 같은 경우에 유용합니다.
- "만약에?" 테스트하기 시나리오를 빠르게
- 당신이 읽은 새로운 CSS 속성으로 실험하기
- 이전에 사용해 본 적이 없는 JavaScript API 사용해 보기
- 일회용 프로토타입 제작
- 격리된 버그 재현
놀이터 기능
- 즉시 재설정 — 한 번의 클릭으로 기본 상태로 돌아갑니다.
- 샌드박스 실행 — 코드는 격리된 iframe에서 실행됩니다.
- 콘솔 출력 — JavaScript 로그 및 오류 보기
- 다운로드 옵션 — 보관하려는 실험을 저장하세요.
- 모바일 친화적 - 모든 기기에서 실험 가능
놀이터에서 시도해 볼 수 있는 아이디어
- CSS 전용 애니메이션 로딩 스피너 구축
- CSS 그리드를 사용하여 반응형 그리드 레이아웃 만들기
- JavaScript로 간단한 할 일 목록 만들기
- Intersection Observer API 테스트
- 어두운/밝은 모드 토글 만들기
- CSS 사용자 정의 속성(변수) 실험
- 카운트다운 타이머 만들기
실험 시작
HTML Code Runner를 방문하여 코드를 사용해 보세요. 규칙도, 제한도, 결과도 없습니다. 오직 귀하와 브라우저만 있을 뿐입니다.
자주 묻는 질문
예. 코드는 브라우저 데이터나 다른 탭에 액세스할 수 없는 샌드박스 iframe에서 실행됩니다.
코드를 다운로드하고 HTML 파일을 공유할 수 있습니다. 이 도구에는 기본 제공 공유 기능이 없습니다.
아니요. 원하는 만큼 놀이터를 사용할 수 있습니다. 세션 제한이 없습니다.