색상 정지점
#6366f10%
#ec4899100%
프리셋
CSS 코드
클릭하여 복사
이어서 해볼 도구
같은 흐름으로 이어지는 도구를 골라 두었습니다.
- SWC 트랜스파일 플레이그라운드Rust로 만든 초고속 컴파일러 SWC를 브라우저에서 그대로 실행합니다. TypeScript·JSX 코드를 서버 업로드 없이 실시간으로 트랜스파일하고, AST(JSON 트리)와 최소화 결과를 나란히 확인하세요. 타깃(ES5~ES2022)·데코레이터·소스맵 옵션과 기본/응용/심화 예제로 SWC의 동작 원리를 배울 수 있습니다.
- Sass/SCSS 컴파일러브라우저에서 SCSS·Sass를 CSS로 바로 컴파일하는 놀이터 — dart-sass 엔진, 실시간 2분할 편집기, 기본/응용/심화 예제 갤러리, 연습 미션 8개, 치트시트를 제공합니다.
- esbuild 플레이그라운드브라우저에서 esbuild-wasm 으로 TypeScript·JSX 를 트랜스폼하고 번들하세요. loader·target·minify·format 옵션을 토글하고, 가상 다중 파일을 인메모리 플러그인으로 번들하며, 소요시간과 출력 크기를 확인합니다.
- CSS 퀴즈CSS 지식을 퀴즈로 테스트하세요. CSS 코드의 결과를 예측하고 학습합니다.