CSS 플레이그라운드

CSS Playground의 동작 방식

도구가 하는 일

CSS Playground는 HTML과 CSS 두 개의 에디터와, 입력하는 대로 업데이트되는 샌드박스 iframe 미리보기를 제공합니다. 컴포넌트를 프로토타이핑하고, 셀렉터를 테스트하며, 폴백 스타일을 검증하거나, 버그 리포트를 위한 최소 재현 예제를 만드는 데 사용하세요. 'Reset styles' 토글은 작은 CSS 리셋(box-sizing, 합리적인 body 기본값)을 추가해 브라우저 기본 스타일과 CSS가 충돌하지 않도록 합니다.

개발자들이 흔히 사용하는 사례

프론트엔드 개발자는 PR이나 문서에 공유할 수 있도록 격리된 컴포넌트 예제를 만듭니다. 디자이너는 그라데이션, 그림자, 애니메이션 타이밍, 그리고 grid, subgrid, container queries 같은 최신 기능을 실험합니다. 교육자는 CodePen 계정을 만들지 않고도 학생들에게 CSS 개념을 시연합니다. QA 엔지니어는 통제된 환경에서 CSS만으로 발생하는 버그를 깔끔하게 재현합니다.

데이터 형식, 타입 또는 변형

HTML 에디터는 body 안에 들어갈 어떤 콘텐츠든 받습니다. CSS 에디터는 커스텀 프로퍼티, 네스팅, @container, @layer 등 최신 CSS를 모두 받습니다. 출력은 meta viewport 태그(선택 사항)와 인라인 style 블록을 포함한 완전한 독립형 HTML 문서로, 전체 파일로 그대로 복사할 수 있습니다. 미리보기 iframe은 sandbox='allow-same-origin'을 사용해 상대 URL은 허용하면서 스크립트와 폼 제출은 차단합니다.

흔한 함정과 엣지 케이스

외부 @font-face URL과 @import 문은 iframe 샌드박스에 의해 차단될 수 있습니다. 바깥 문서에서 상속되는 스타일에 의존하는 CSS를 붙여넣으면 iframe이 격리되어 있기 때문에 여기서는 동일하게 동작하지 않습니다. 지속 시간이 매우 긴 애니메이션은 에디터에 포커스가 없어도 미리보기 iframe에서 계속 실행되므로, 타이밍을 디버깅 중이라면 animation-play-state로 일시 정지하세요.

코드 대신 이 도구를 사용해야 하는 경우

한 번만 해보는 실험, 격리된 최소 재현, 또는 빠른 교육용 데모에는 브라우저 도구를 사용하세요. 실제 프로젝트에서는 개발 서버, 핫 모듈 교체, 컴포넌트 개발 도구(React Refresh, Vue devtools)가 훨씬 풍부한 피드백 루프를 제공합니다. 이 플레이그라운드는 툴링을 설정하고 싶지 않은 스케치 용도로 사용하세요.