HTML 도구
HTML, Pug, JSX, SVG 컴포넌트, CSS를 다뤄 보세요. 구현에 필요한 마크업과 스타일로 변환할 수 있습니다.
이 분류에는 도구 21개가 있습니다. 모두 브라우저에서 실행되며 가입이 필요 없습니다.
SVG 경로 편집기
SVG 경로의 모양을 직접 편집하세요. 기준점과 곡선 핸들을 움직인 후 경로를 복사하거나 SVG를 저장할 수 있습니다.
SVG 최적화 도구
SVGO로 정적 SVG를 로컬에서 최적화하세요. 결과를 비교하고 개별 파일 또는 ZIP으로 다운로드할 수 있습니다.
SVG → JSX
SVG 파일을 React JSX 코드로 빠르게 변환하여 React 앱 개발 프로세스를 단순화하고 개발 효율성을 향상시킵니다.
SVG → React Native
SVG 파일을 React Native 구성 요소로 변환하여 교차 플랫폼 모바일 앱을 쉽게 구축하고 개발 경험을 향상시킵니다.
HTML → JSX
HTML 코드를 React JSX 형식으로 변환하여 React 프로젝트에서 재사용 및 구성 요소화를 용이하게 합니다.
HTML → Pug
HTML을 Pug 템플릿으로 변환하여 프론트엔드 개발 프로세스를 최적화하고 코드의 유지보수성과 효율성을 향상시킵니다.
Markdown → HTML
Markdown 파일을 HTML로 변환하여 웹 페이지에서 형식화된 텍스트 콘텐츠를 표시할 수 있습니다.
Flexbox 생성기
실제 플렉스 레이아웃을 구성해 보세요. 컨테이너와 각 항목을 조정하고 다양한 너비로 확인한 후 CSS, HTML 또는 Tailwind 코드를 가져올 수 있습니다.
CSS 클립 패스 생성기
캔버스에서 직접 모양을 만들어 보세요. 다각형의 꼭짓점을 드래그하고 둥근 모양도 살펴본 후 CSS 또는 SVG로 내보낼 수 있습니다.
박스 그림자 생성기
레이어를 하나씩 쌓아 깊이감을 만들어 보세요. 광원을 움직이고 부드러움과 색상을 조정한 후 실제 서비스에 바로 사용할 그림자 코드를 복사할 수 있습니다.
CSS Grid 생성기
CSS 그리드 레이아웃을 시각적으로 그려 보세요. 열과 행의 크기를 정하고 셀을 드래그해 영역 이름을 지정한 후 CSS, HTML 또는 Tailwind 코드를 복사할 수 있습니다.
Cubic Bezier 생성기
두 개의 핸들을 드래그하여 CSS 이징 곡선을 만들어 보세요. linear 타이밍과 움직임을 비교하고 트랜지션이나 Tailwind용 cubic-bezier()를 복사할 수 있습니다.
Border Radius 생성기
모서리를 각각 둥글게 하고, 타원형 반경으로 전환하고, 가장자리 핸들을 드래그해 블롭 도형을 만들어 보세요. border-radius CSS나 Tailwind 클래스를 복사할 수 있습니다.
글래스모피즘 생성기
backdrop-filter로 반투명 유리 패널을 만들어 보세요. 실시간 배경 위에서 흐림, 투명도, 채도, 테두리를 조정한 후 CSS를 복사할 수 있습니다.
CSS 그라데이션 생성기
드래그할 수 있는 색상 정지점, 각도 다이얼, 프리셋으로 선형·원형·원뿔형 CSS 그라데이션을 만드세요. CSS나 Tailwind 클래스를 바로 복사. 무료.
CSS → JS Objects
CSS 파일을 JavaScript 객체로 변환하여 프론트엔드 프로젝트에서 스타일을 사용하고 조작할 수 있습니다.
CSS → template literal
객체 스타일을 템플릿 문자열로 변환하여 React 등의 프레임워크에서의 스타일 적용을 최적화합니다.
CSS → TailwindCSS
CSS 코드를 TailwindCSS 클래스로 변환하여 실용적인 스타일의 웹사이트를 빠르게 구축합니다.
Less → CSS
Less 전처리기 파일을 표준 CSS로 변환하여 스타일시트의 호환성과 유지보수성 향상합니다.
Scss → CSS
SCSS 전처리기 파일을 표준 CSS로 변환하여 스타일시트의 작성과 관리를 단순화합니다.
Sass → CSS
Sass 전처리기 파일을 표준 CSS로 변환하여 스타일시트의 가독성과 재사용성을 강화합니다.